Merge branch 'website3-more-styling' into feature/init-packages-json-builder

This commit is contained in:
neil 2022-10-20 12:56:14 +08:00
commit 15240a4329
21 changed files with 1006 additions and 271 deletions

5
src/content/lisbon.md Normal file
View file

@ -0,0 +1,5 @@
---
title: "tea @ Web Summit 2022"
Description: "tea.web_summit"
layout: "lisbon"
---

View file

@ -35,13 +35,13 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12"> <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
<p class="lead hero-subhead animated-25 animatedFadeInUp fadeInUp" style="margin-top:8px; margin-bottom: -9px;">The revolution is here. Were calling on all open-source devs to authenticate their Github with tea.</p> <p class="lead hero-subhead animated-25 animatedFadeInUp fadeInUp" style="margin-top:8px; margin-bottom: -9px;">The open-source revolution is here. Were calling on all devs to build with our powerful, new unified package manager.</p>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<div class="full-width-cta-container"> <div class="full-width-cta-container">
{{- partial "full-width-cta.html" . -}} {{- partial "clipboard-copy.html" . -}}
</div> </div>
<div class="hero-bottom"> <div class="hero-bottom">
@ -49,7 +49,7 @@
<!-- Teal Impact Section --> <!-- Teal Impact Section -->
<section class="teal-bg impact-section"> <section class="teal-bg impact-section two-boxes">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
@ -86,8 +86,9 @@
<div class="row"> <div class="row">
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12"> <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
<h2 style="margin-bottom: 1vw;">about tea.</h2> <h2 style="margin-bottom: 1vw;">about tea.</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p> <p class="lead">tea.xyz is a feature-rich, delightful unified package manager that will revolutionize open-source development by providing creators and maintainers value for previously unpaid labor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Weve reimagined what a package manager can do for the first time since brew with new features such as executable markdown, a virtual environment manager, and universal interpretation. In short, weve built a tool that improves how you develop by getting out of your way so you can keep building.</p>
<p>Next were going to change the way you get rewarded for what you build by implementing a blockchain protocol that finally recognizes your hard work in open-source. You wont have to use our web3 features to use tea, but we think youll want to. <a class="teal" href="/white-paper/">Check out our whitepaper for more details.</a></p>
<img class="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid"> <img class="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
<div class="gen-art-mobile" id="m-gen-art-1"></div> <div class="gen-art-mobile" id="m-gen-art-1"></div>
<div class="gen-art-mobile" id="m-gen-art-2"></div> <div class="gen-art-mobile" id="m-gen-art-2"></div>
@ -180,8 +181,8 @@
<div class="container package-cta-container"> <div class="container package-cta-container">
<div class="row" style="margin-bottom: 20px;"> <div class="row" style="margin-bottom: 20px;">
<div class="col" style="margin: 150px 0px;"> <div class="col" style="margin: 150px 0px;">
<h3 class="text-center">Stay tuned for our full launch.</h3> <h3 class="text-center">Authenticate your GitHub for an even bigger sip</h3>
<p class="text-center">The tea's almost done steeping. Developers around the world are starting to take their first sips with the <a>tea cli</a>, and as they start working thy're magic, you'll begin to see some amazing packages populate above. In the meantime, keep in touch by joining our <a>Discord Community</a>.</p> <p class="text-center">Using tea without authenticating is like playing a video game without the DLC. Theres so much more to our ecosystem than a command line interface, and we want you to be a part of it.</p>
</div> </div>
</div> </div>
</div> </div>
@ -206,8 +207,8 @@
<div class="row mb-5"> <div class="row mb-5">
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12"> <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
<h2>sta'tea'stics</h2> <h2>sta'tea'stics</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p class="lead">The problem is bigger than most realize. While everyday people use software every day, very few understand that the technology underlying their daily routine is provided by uncompensated labor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br> <p>Even many developers dont fully recognize the security risks of unpaid open-source until something deep in the stack collapses, like log4J.We want to shine a light on the scale of OSS usage, both to celebrate the achievements of unsung heroes as well as highlight the need for a better way.</p><br>
{{- partial "detail-btn-large.html" "#" -}} {{- partial "detail-btn-large.html" "#" -}}
</div> </div>
</div> </div>
@ -248,8 +249,8 @@
<div class="row"> <div class="row">
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12" style="position:relative; z-index: 2;"> <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12" style="position:relative; z-index: 2;">
<h2>partners</h2> <h2>partners</h2>
<p class="lead">As we like to say at tea, teamwork makes the dream workand by golly if we don't have a a good team.</p> <p>At our core, tea is about building an open-source ecosystem that is fair for everyone. This is an enormous undertaking and we cant do it alone. Here we want to thank those that have already enlisted for the Open-Source Revolution.</p>
<p>Binance Labs saw the value in tea's mission right from the get-go (you can read more about that here) and Project Galaxy has been a valueable strategic partner, particulalry in the distribution of our Nebraska Man comic book series.</p> <!-- Add in community to partners, with large metric feed. Maybe use fists icon for that -->
</div> </div>
<div class="col"> <div class="col">

View file

@ -1,206 +1,98 @@
{{ define "main" }} {{ define "main" }}
<img id="tea-steam-dark-1" src="/Images/tea-steam-dark-1.svg" style="z-index:0 !important; " alt="">
<div class="container mb-5 mt-5"> <section>
<div>
<span id="aa62fd265a9f"></span>
</div>
<div class="container">
<div class="row"> <div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-12 pe-lg-5 pe-md-5 pe-sm-0 pe-0" style="z-index:100; display:flex; flex-direction:column;"> <div class="col">
<div style="margin-top:auto; margin-bottom:auto;"> <h1>Careers</h1>
<h1 class="display-1 mb-5">Join the <span class="teal">tea</span> party!</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="mb-lg-5 mb-md-5 mb-sm-5 mb-5 lead">Were looking for the best-of-the-best to help brew the future of web3. If youre a visionary self-starter whos eager to be on the front lines of innovation, then take look at our list of current openings and apply accordingly. Even if you dont see a role that captures your skill set, please feel free to <a class="teal" href="mailto:talent@tea.xyz?subject=resumé">email us</a> your resumé in order to be considered for future opportunities.</p>
</div> </div>
</div> </div>
</div>
</section>
<hr class="careers-divider"> <hr>
<style> <section>
@media only screen and (min-width: 600px) {
.careers-divider{
display:none;
}
}
</style>
<div class="col-lg-6 col-md-6 col-sm-12 col-12" style="z-index:100 !important;">
<h3 class="mb-4">Current <span class="teal">job openings</span></h3>
<p class="mb-4" style="color:#E5E6E9;">The tools that build the internet have steeped too long. For the past two decades, big tech has made trillions off the generosity of visionary developers and web pioneers… never thanking, never mentioning, and certainly never paying. At tea, were brewing something to change that by enabling developers (you) to continue doing what you love, while earning what you deserve.</p>
<div class="accordion" id="accordionExample"> <div class="accordion" id="accordionExample">
<div class="accordion-item"> <div class="accordion-item">
<p class="accordion-header" id="headingOne"> <h2 class="accordion-header" id="headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="true" aria-controls="collapseOne"> <button class="accordion-button" id="jobOne" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Package Maintainer Accordion Item #1
</button> </button>
</p> </h2>
<div class="accordion-body"> <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div>We are looking for Package Maintainers to help us review, update, and deploy packages for the tea system.</div> <div class="accordion-body two-boxes">
<div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample"> <div class="one-box-down">
<br><strong>Responsibilities:</strong><br><br> <p>Employment type: <span id="typeOne"></span></p>
<ul> <p>Department: <span id="deptOne"></span></p>
<li>Collaborate with Package Manager teammates to determine priorities. </li> <p>Location: <span id="locOne"></span></p>
<li>Build source code and compile packages for distribution. </li> </div>
<li>Include testing code and documentation to help teammates troubleshoot issues. </li> <hr class="one-box-down">
<li>Track security and breaking changes for packages in our ecosystem to ensure quick remediations. </li> <div class="one-box-down" id="descOne"></div>
<li>Attend meetings, brainstorming sessions and regular standups for enhancing your knowledge of new technologies. </li> <div>
<li>Stay on top of technology trends and developments, especially changes related to package dependencies. </li> <a href="" id="linkOne">
<li>Ensure that all technology practices adhere to applicable standards. </li> <button class="detail-btn-large"><i class="icon-enter-arrow"></i>VIEW ALL DETAILS</button>
</ul> </a>
</div>
<p>This is a full-time remote contractor position.</p><br> </div>
<a class="btn btn-primary mb-3" href="https://tea.breezy.hr/p/d98d28311cbd-package-maintainer"
role="button">Apply on Breezy HR</a>
<p class="small" style="color:#B9C7C9;">Visit Breezy HR to apply, and to read more about the qualifications and responsibilities for this position.</p></div>
</div> </div>
</div> </div>
<div class="accordion-item"> <div class="accordion-item">
<p class="accordion-header" id="headingTwo"> <h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> <button class="accordion-button collapsed" id="jobTwo" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Blockchain Architect Accordion Item #2
</button> </button>
</p> </h2>
<div class="accordion-body">
Reporting to the Chief Product Officer, the Blockchain Architect will be responsible to effectively and efficiently utilize technology to meet the networks needs and goals, including:
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample"> <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<br> <div class="accordion-body two-boxes">
<ul> <div class="one-box-down">
<li>Select and/or build all components of the blockchain technology stack.</li> <p>Employment type: <span id="typeTwo"></span></p>
<li>Ensure scalable connectivity of on-chain and off-chain software solutions.</li> <p>Department: <span id="deptTwo"></span></p>
<li>Support the launch and growth of the developer community through various initiatives including public engagement and documentation publishing.</li> <p>Location: <span id="locTwo"></span></p>
</ul> </div>
<hr class="one-box-down">
<p>This is a full-time remote position.</p><br> <div class="one-box-down" id="descTwo"></div>
<div>
<a class="btn btn-primary mb-3" href="https://tea.breezy.hr/p/dc187fdab65e-blockchain-architect" <a href="" id="linkTwo">
role="button">Apply on Breezy HR</a> <button class="detail-btn-large"><i class="icon-enter-arrow"></i>VIEW ALL DETAILS</button>
</a>
<p class="small" style="color:#B9C7C9;">Visit Breezy HR to apply, and to read more about the qualifications and responsibilities for this position.</p></div> </div>
</div>
</div> </div>
</div> </div>
<div class="accordion-item"> <div class="accordion-item">
<p class="accordion-header" id="headingOne"> <h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Senior Blockchain Developer Accordion Item #3
</button> </button>
</p> </h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body"> <div class="accordion-body">
<div> Reporting to the Blockchain Architect, the Blockchain Developer will be responsible for the design, implementation, and distribution of a secure blockchain infrastructure that meets the networks needs and goals.<br></div> <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
<div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample"><br>
This is a full-time remote position.<br><br>
<a class="btn btn-primary mb-3 mt-3" href="https://tea.breezy.hr/p/f5b2c4d0f3e6-senior-blockchain-developer"
role="button">Apply on Breezy HR</a>
<p class="small" style="color:#B9C7C9;">Visit Breezy HR to apply, and to read more about the qualifications and responsibilities for this position.</p></div>
</div>
</div>
<div class="accordion-item">
<p class="accordion-header" id="headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="true" aria-controls="collapseOne">
Full Stack Developer
</button>
</p>
<div class="accordion-body">
<div>Reporting to the CEO, the full stack developer will be directly responsible for the architecture and implementation of entire portions of teas open source product suite.<br></div>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample"><br>
This is a full-time remote position.<br><br>
<a class="btn btn-primary mb-3 mt-3" href="https://tea.breezy.hr/p/aa62fd265a9f-full-stack-developer"
role="button">Apply on Breezy HR</a>
<p class="small" style="color:#B9C7C9;">Visit Breezy HR to apply, and to read more about the qualifications and responsibilities for this position.</p></div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section>
<style>
.accordion-item:last-of-type .accordion-button.collapsed {
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
</style>
<!-- Why Work at tea --> <!-- Why Work at tea -->
<div class="row" style="background-color:#23282C;"> <div class="row teal-bg">
<div class="container mb-5 mt-5"> <div class="container two-boxes">
<div class="row">
<h3 class="text-center display-4 mb-5">Why work at tea?</h3>
</div>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<p class="text-center lead">Join a team of motivated and passionate individuals and be a part of a rapidly growing and exciting project in web3 and open source technologies. We offer an attractive salary, relocation packages (if applicable), token/equity options and performance&#8208;based bonuses.</p> <h3 class="black text-center">Why work @ tea?</h3>
<p class="text-center black">Join a team of motivated and passionate individuals and be a part of a rapidly growing and exciting project in web3 and open source technologies. We offer an attractive salary, relocation packages (if applicable), token/equity options and performance&#8208;based bonuses.</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- Community Links -->
<div class="row community-container pt-5 pb-5 mt-5 mb-5">
<div class="container p-4" id="community">
<div class="row">
<div class="col">
<h3 style="text-align:center;" class="mb-5 display-5">Join the Community</h3>
</div>
</div>
<div class="row">
<div class="col-6 col-sm-6 col-lg">
<a href="https://discord.gg/KCZsXfJphn">
<div class="com-card mb-4">
<img src="/Images/discord.svg" alt="" class="community-icon">
</div>
</a>
</div>
<div class="col-6 col-sm-6 col-lg">
<a href="https://twitter.com/teaxyz_">
<div class="com-card mb-4">
<img src="/Images/twitter.svg" alt="" class="community-icon">
</div>
</a>
</div>
<div class="col-6 col-sm-6 col-lg">
<a href="https://github.com/teaxyz">
<div class="com-card mb-4">
<img src="/Images/github.svg" alt="" class="community-icon">
</div>
</a>
</div>
<div class="col-6 col-sm-6 col-lg">
<a href="https://t.me/tea_xyz">
<div class="com-card mb-4">
<img src="/Images/telegram.svg" alt="" class="community-icon">
</div>
</a>
</div>
<div class="col-6 col-sm-6 col-lg align-self-center">
<a href="https://reddit.com/r/teaxyz">
<div class="com-card mb-4">
<img src="/Images/reddit.svg" alt="" class="community-icon">
</div>
</a>
</div>
<div class="col-6 col-sm-6 col-lg align-self-center">
<a href="https://www.instagram.com/tea.xyz/">
<div class="com-card mb-4">
<img src="/Images/instagram-iconAsset 1.svg" alt="" class="community-icon">
</div>
</a>
</div>
</div>
</div>
</div>
{{ end }} {{ end }}

View file

@ -480,7 +480,7 @@
</div> </div>
<div class="col-6 col-sm-6 col-lg align-self-center"> <div class="col-6 col-sm-6 col-lg align-self-center">
<a href="https://www.instagram.com/tea.xyz/"> <a href="#">
<div class="com-card mb-4"> <div class="com-card mb-4">
<img src="/Images/instagram-iconAsset 1.svg" alt="" class="community-icon"> <img src="/Images/instagram-iconAsset 1.svg" alt="" class="community-icon">
</div> </div>

View file

@ -0,0 +1,68 @@
{{ define "main" }}
<section>
<div class="container">
<div class="row">
<div class="col">
<h1>tea @ Web Summit</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</section>
<hr>
<section>
<div class="container">
<div class="row">
<div class="col">
<h2>Schedule</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<style>
td{
height: 300px !important;
}
table{
border: 2px solid white;
}
</style>
{{ end }}

View file

@ -16,8 +16,8 @@
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<h2>the battle for the internet has just begun</h2> <h3>the battle for the internet has just begun</h3>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p class="lead">Weve called open source devs the “unnamed heroes of the internet.” Now is the time to give them a name and tell their stories. Introducing The Maintainers: a comic series about the OSS Developer Universe. Our first issue follows the origins of Nebraska Man as he joins the fight for a fairer internet. </p>
</div> </div>
</div> </div>
</div> </div>
@ -33,7 +33,7 @@
</div> </div>
<div class="col-lg-8 col-md-8 col-sm-12 col-12 my-auto"> <div class="col-lg-8 col-md-8 col-sm-12 col-12 my-auto">
<h3>Latest Release</h3> <h3>Latest Release</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Created by Niel Edwards (sp?), a frequent collaborator for Marvel and DC Comics, this first issue tells the story of Nebraska Mans plight as an unthanked and uncompensated open-source dev. He is then approached by the Shadowy Super Coder and learns about a powerful new technology that could save the day.</p>
</div> </div>
</div> </div>
</div> </div>

View file

@ -3,12 +3,12 @@
<section> <section>
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col"> <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12">
<div class="package-thumbnail gray-bg"> <div class="package-thumbnail gray-bg">
</div> </div>
</div> </div>
<div class="col"> <div class="col-xl-8 col-lg-8 col-md-6 col-sm-12 col-12">
<h3>{{- .Title -}}</h3> <h3>{{- .Title -}}</h3>
{{ range where $.Site.Data.packages "name" .Title }} {{ range where $.Site.Data.packages "name" .Title }}
<p>{{- .desc -}}</p> <p>{{- .desc -}}</p>
@ -21,7 +21,145 @@
</div> </div>
</section> </section>
{{- partial "full-width-cta-split.html" -}} <!-- Copy to clipboard field -->
<hr>
<div class="row button-container">
<input class="one-liner" type="text" value="$ sh <(curl tea.xyz) install&nbsp;{{- .Title -}}" id="myInput" readonly>
<button class="clipboard-copy" id="copy-icon" onclick="myFunction()" data-bs-toggle="modal" data-bs-target="#exampleModal">copy</button>
</div>
<hr>
<style>
@media only screen and (min-width: 768px) {
.one-liner{
width: 85%;
padding: 2.455vw 4.185vw;
border-radius: 0px;
border: none;
background-color: #1a1a1a !important;
font-family: "pp-neue-machina";
color:#ffffff;
font-size: 2vw;
border-left: 2px solid #949494;
}
.one-liner:focus{
border:none;
outline: none;
border-left: 2px solid #949494;
}
.clipboard-copy{
height: 8.371vw;
width: 14%;
font-family: "pp-neue-machina";
color:#ffffff;
font-size: 2.1vw;
float:right;
background-color: #1a1a1a !important;
border: none;
border-right: 2px solid #949494;
transition: 0.2s linear;
}
.clipboard-copy:hover{
background-color: #00ffd0 !important;
color: #1a1a1a !important;
box-shadow: inset 0vw 0vw 0vw 0.558vw #1a1a1a !important;
}
}
@media only screen and (min-width: 576px) and (max-width: 768px) {
.one-liner{
width: 85%;
padding: 5vw 4vw;
border-radius: 0px;
border: none;
background-color: #1a1a1a !important;
font-family: "pp-neue-machina";
color:#ffffff;
font-size: 3.5vw;
border-left: 2px solid #949494;
}
.one-liner:focus{
border:none;
outline: none;
border-left: 2px solid #949494;
}
.clipboard-copy{
padding: 5vw 4vw;
width: 14%;
font-family: "pp-neue-machina";
color:#ffffff;
font-size: 3.5vw;
float:right;
background-color: #1a1a1a !important;
border: none;
border-right: 2px solid #949494;
transition: 0.2s linear;
}
.clipboard-copy:hover{
background-color: #00ffd0 !important;
color: #1a1a1a !important;
box-shadow: inset 0vw 0vw 0vw 0.558vw #1a1a1a !important;
}
}
@media only screen and (max-width: 576px) {
.one-liner{
width: 100%;
padding: 7.5vw 7.5vw !important;
border-radius: 0px;
border: none;
background-color: #1a1a1a !important;
font-family: "pp-neue-machina";
color:#ffffff;
text-align: center !important;
font-size: 4vw;
border-left: 2px solid #949494;
}
.one-liner:focus{
border:none;
outline: none;
border-left: 2px solid #949494;
}
.clipboard-copy{
display: none;
}
}
</style>
<script>
function myFunction() {
// Get the text field
var copyText = document.getElementById("myInput");
// Select the text field
copyText.select();
copyText.setSelectionRange(0, 99999); // For mobile devices
// Copy the text inside the text field
navigator.clipboard.writeText(copyText.value);
//Change button text to 'copied'
document.getElementById("copy-icon").innerHTML = "copied!";
}
</script>
<style> <style>

View file

@ -407,7 +407,7 @@ their Github account. So dont delay, get it while its hot.</p>
</div> </div>
<div class="col-6 col-sm-6 col-lg align-self-center"> <div class="col-6 col-sm-6 col-lg align-self-center">
<a href="https://www.instagram.com/tea.xyz/"> <a href="#">
<div class="com-card mb-4"> <div class="com-card mb-4">
<img src="/Images/instagram-iconAsset 1.svg" alt="" class="community-icon"> <img src="/Images/instagram-iconAsset 1.svg" alt="" class="community-icon">
</div> </div>

View file

@ -4,12 +4,12 @@
<div class="gen-art animated-25 animatedFadeInUp fadeInUp" id="pro-gen-art-1"></div> <div class="gen-art animated-25 animatedFadeInUp fadeInUp" id="pro-gen-art-1"></div>
<div class="gen-art animated-25 animatedFadeInUp fadeInUp" id="pro-gen-art-2"></div> <div class="gen-art animated-25 animatedFadeInUp fadeInUp" id="pro-gen-art-2"></div>
<div class="gen-art animated-5 animatedFadeInUp fadeInUp" id="pro-gen-art-3"></div> <div class="gen-art animated-5 animatedFadeInUp fadeInUp" id="pro-gen-art-3"></div>
<div class="container product-container"> <div class="container product-container" lang="en">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<h1>Products</h1> <h1>Products</h1>
<div class="lead-container"> <div class="lead-container">
<p class="lead animated-5 animatedFadeInUp fadeInUp">Just like the perfect cup or tea, greatness needs time to steep. But were happy to announce that the wait is over… its time to take your first sip.</p> <p class="lead animated-5 animatedFadeInUp fadeInUp">Just like the perfect cup or tea, greatness needs time to steep. But the wait is over… its time to take your first sip.</p>
</div> </div>
</div> </div>
</div> </div>
@ -22,8 +22,8 @@
<div class="container product-container"> <div class="container product-container">
<div class="row"> <div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-12 my-auto"> <div class="col-lg-6 col-md-6 col-sm-12 col-12 my-auto">
<h3>tea cli</h3> <h3>tea.cli</h3>
<p>Our command-line interface is beautiful in its simplicity. Like that cup of lemon-ginger, weve designed our CLI or be snappy and to-the-point. Theres no honey or superfluous add-ins here; as with any good tool, our interface does what it <em>has to</em>, and then gets out of the way so that you can do what you <em>want</em> to.</p> <p>Tea.cli is more than a package manager. With new features such as executable markdown, a universal interpreter, and virtual environment manager it has never been easier to create and collaborate. </p>
<button onclick="window.location.href='/tea-cli/'" class="detail-btn-large"><i class="icon-enter-arrow"></i>VIEW ALL DETAILS</button> <button onclick="window.location.href='/tea-cli/'" class="detail-btn-large"><i class="icon-enter-arrow"></i>VIEW ALL DETAILS</button>
</div> </div>
<div class="col my-auto"> <div class="col my-auto">
@ -39,26 +39,9 @@
<div class="container product-container"> <div class="container product-container">
<div class="row"> <div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-12 order-lg-2 my-auto"> <div class="col-lg-6 col-md-6 col-sm-12 col-12 order-lg-2 my-auto">
<h3>package manager</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<button onclick="window.location.href='/package-manager/'" class="detail-btn-large"><i class="icon-enter-arrow"></i>VIEW ALL DETAILS</button>
</div>
<div class="col">
<img src="/Images/tea_cli_mockup_no_background.png" alt="tea-cli preview" style="width:100%;">
</div>
</div>
</div>
</section>
<hr>
<section class="products-tea-protocol">
<div class="container product-container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-12 my-auto">
<h3>tea protocol</h3> <h3>tea protocol</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>The OSS funding problem has always existed, but until now, we haven't had the technology to fix it. tea is changing that by facilitating the graph of open source projects that underpin all modern digital infrastructure. We're putting this information on-chain so that we can create a map to guide value redistribution back into the open source projects that make the Internet possible.</p>
<button onclick="window.location.href='/tea-protocol/'" class="detail-btn-large"><i class="icon-enter-arrow"></i>VIEW ALL DETAILS</button> <button onclick="window.location.href='/white-paper/'" class="detail-btn-large"><i class="icon-enter-arrow"></i>READ OUR WHITE PAPER</button>
</div> </div>
<div class="col"> <div class="col">
<img src="/Images/tea_cli_mockup_no_background.png" alt="tea-cli preview" style="width:100%;"> <img src="/Images/tea_cli_mockup_no_background.png" alt="tea-cli preview" style="width:100%;">

View file

@ -1,28 +1,37 @@
{{ define "main" }} {{ define "main" }}
<div class="teacli-gen-art-1"></div>
<div class="teacli-gen-art-2"></div>
<section class="tea-cli"> <section class="tea-cli">
<div class="container tea-cli-container"> <div class="container tea-cli-container two-boxes">
<div class="row"> <div class="row">
<div class="col my-auto"> <div class="col my-auto">
<h1>TEA CLI</h1> <h1>TEA CLI</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p class="lead">brew2 for web3 is here. The minds that changed the interwebs for the better back in 2009 have just done it again. tea is here to help make your dev experience a little more delightful. </p>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
{{- partial "full-width-cta-split.html" . -}} <style>
<section class="teal-bg"> .tea-cli-container{
<div class="container tea-cli-container"> background-image: url("/Images/x-large-grid.svg");
background-repeat: repeat;
background-size: cover;
}
</style>
{{- partial "clipboard-copy.html" -}}
<section class="teal-bg two-boxes">
<div class="container">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<p class="black text-center">TOTAL DOWNLOADS</p> <h3 class="black text-center">Oh @#$%... the documentation <em>is</em> the script!?"</h3>
<p class="black text-center tea-cli-data"><span id="tea-cli-downloads">612,085</span></p> <p class="black text-center">Our latest developer discovering <strong>Executable Markdown</strong></p>
</div>
<div class="col">
<p class="black text-center">FOR THIS VERSION</p>
<p class="black text-center tea-cli-data"><span id="tea-cli-ver-downloads">612,085</span></p>
</div> </div>
</div> </div>
</div> </div>
@ -36,11 +45,51 @@
</style> </style>
<section> <section>
<div class="container"> <div class="container two-boxes">
<h2>Versions</h2> <div class="row one-box-down">
<h3>The new foundation of the internet.</h3>
</div>
<div class="row">
<div class="col-xxl-4 col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 one-box-down">
<h4>teaxyz/cmd</h4>
<p>A big reason Homebrew was a massive success was “viral contribution”. This is a new form of viral contribution. tea is a packaging primitive. We are making it super easy and viral for people to create new tools on top of tea and to satisfy that “I'm a part of this” urge that open source vitality plays up.</p>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 one-box-down">
<h4>executable markdown</h4>
<p>Markdown has become the ultimate documentation file format (white paper is written in it). Every project has comprehensive readmes. Every dev team documents their internal workspaces with markdown. Were iterating the format by making it able to execute itself.</p>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 one-box-down">
<h4>universal interpreter</h4>
<p>Making a PM or tool that uses other packages sucks RN. This has led to self contained ecosystems where people make a packaging tool (eg. npm) and then everybody can only use tools within that ecosystem because everything else is too much friction. tea changes this.</p>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 one-box-down">
<h4>virtual environment</h4>
<p>devshops and open source projects need specific versions of tools and they need the whole team to be on those tools. Currently you either cross your fingers or use Docker. Docker sucks and slows down dev and hinders innovation. Docker is great for deployment but it sucks for dev. tea ensures that checking out a project uses the exact versions of things that project needs whatever platform they are developing on.</p>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 one-box-down">
<h4>pantries</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 one-box-down">
<h4>Executable Blog Posts</h4>
<p>Every blog post and tutorial on dev starts with brew install foo in teas future they will instead do sh <(curl tea.xyz) [<http://blog-post.com/article-url/>](<http://blog-post.com/article-url/>) (we will also release web-buttons that activate tea if installed or install it first otherwise).
</p>
</div>
</div>
</div> </div>
<hr>
{{- partial "tea-cli-accordion.html" . -}}
</section> </section>
<hr>
<section>
<div class="container three-boxes">
<div class="row">
<div class="col">
<h3 class="text-center">And it's even better if you join the tea party...</h3>
</div>
</div>
</div>
</section>
<hr>
{{- partial "full-width-cta.html" -}}
{{ end }} {{ end }}

View file

@ -82,7 +82,7 @@
</div> </div>
<div class="col-6 col-sm-6 col-lg align-self-center"> <div class="col-6 col-sm-6 col-lg align-self-center">
<a href="https://www.instagram.com/tea.xyz/"> <a href="#">
<div class="com-card mb-4"> <div class="com-card mb-4">
<img src="/Images/instagram-iconAsset 1.svg" alt="" class="community-icon"> <img src="/Images/instagram-iconAsset 1.svg" alt="" class="community-icon">
</div> </div>

View file

@ -0,0 +1,153 @@
<hr>
<div class="row button-container" onclick="myFunction()" style="display:flex; justify-content:space-between;">
<input class="one-liner" type="text" value="$ sh <(curl tea.xyz)" id="myInput" readonly>
<!-- The button used to copy the text -->
<button class="clipboard-copy" id="copy-icon" onclick="myFunction()" data-bs-toggle="modal" data-bs-target="#exampleModal">copy</button>
</div>
<hr>
<style>
.button-container{
background-color: #1a1a1a;
}
@media only screen and (min-width: 768px) {
.one-liner{
width: 80%;
padding: 2.455vw 4.185vw;
border-radius: 0px;
border: none;
background-color: #1a1a1a !important;
font-family: "pp-neue-machina";
color:#ffffff;
font-size: 2vw;
border-left: 2px solid #949494;
}
.one-liner:focus{
border:none;
outline: none;
border-left: 2px solid #949494;
}
.clipboard-copy{
height: 8.371vw;
width: 18%;
font-family: "pp-neue-machina";
color:#ffffff;
font-size: 2.1vw;
float:right !important;
background-color: #1a1a1a !important;
border: none;
border-right: 2px solid #949494;
transition: 0.2s linear;
}
.clipboard-copy:hover{
background-color: #00ffd0 !important;
color: #1a1a1a !important;
box-shadow: inset 0vw 0vw 0vw 0.558vw #1a1a1a !important;
}
}
@media only screen and (min-width: 576px) and (max-width: 768px) {
.one-liner{
width: 85%;
padding: 5vw 4vw;
border-radius: 0px;
border: none;
background-color: #1a1a1a !important;
font-family: "pp-neue-machina";
color:#ffffff;
font-size: 3.5vw;
border-left: 2px solid #949494;
border-right: 2px solid #949494;
}
.one-liner:focus{
border:none;
outline: none;
border-left: 2px solid #949494;
border-right: 2px solid #949494;
}
.clipboard-copy{
padding: 5vw 4vw;
width: 14%;
font-family: "pp-neue-machina";
color:#ffffff;
font-size: 3.5vw;
float:right;
background-color: #1a1a1a !important;
border: none;
border-right: 2px solid #949494;
transition: 0.2s linear;
}
.clipboard-copy:hover{
background-color: #00ffd0 !important;
color: #1a1a1a !important;
box-shadow: inset 0vw 0vw 0vw 0.558vw #1a1a1a !important;
}
}
@media only screen and (max-width: 576px) {
.one-liner{
width: 100%;
padding: 7.5vw 7.5vw !important;
border-radius: 0px;
border: none;
background-color: #1a1a1a !important;
font-family: "pp-neue-machina";
color:#ffffff;
text-align: center !important;
font-size: 4vw;
border-left: 2px solid #949494;
border-right: 2px solid #949494;
}
.one-liner:focus{
border:none;
outline: none;
border-left: 2px solid #949494;
border-right: 2px solid #949494;
}
.clipboard-copy{
display: none;
}
}
</style>
<script>
function myFunction() {
// Get the text field
var copyText = document.getElementById("myInput");
// Select the text field
copyText.select();
copyText.setSelectionRange(0, 99999); // For mobile devices
// Copy the text inside the text field
navigator.clipboard.writeText(copyText.value);
/* Alert the copied text
alert("Copied " + copyText.value + " to clipboard");*/
//Change button text to 'copied'
document.getElementById("copy-icon").innerHTML = "copied!";
}
</script>

View file

@ -0,0 +1,169 @@
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="modal-body">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12 col-12 modal-image">
</div>
<div class="col-lg-9 col-md-9 col-sm-12 col-12 modal-message">
<h4 class="modal-head"><i class="icon-tea-checkmark"></i> <br id="mobile-break"> Copied to clipboard, enjoy!</h4>
<p class="lead">But wait... using tea without authenticating is like buying a video game without the DLC.</p>
<p class="modal-text">By authenticating your GitHub, you'll be eligible for a variety of exciting rewards, including minted NFT certificates. Your authentication number is directly tied to the rarity of your certificate, so be sure to take a sip while it's hot!</p>
<button class="detail-btn-large" id="modal-cta"><i class="icon-enter-arrow"></i>AUTHENTICATE WITH TEA</button>
<div class="small grid-gray">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
.modal-image{
background-image: url("/Images/gen-art/abstract-pattern.png");
background-position: center;
background-repeat: repeat;
background-size: cover;
}
.modal-message{
padding-left: 2vw;
}
.btn-close{
position: absolute;
right: 1vw;
top: 1vw;
}
.lead{
margin-bottom: 1vw !important;
}
.modal-content{
background-color: #1a1a1a;
color:white;
font-family: "sono";
border-radius: 0px !important;
border: 2px solid #949494;
padding: 2vw 2vw 2vw 2vw;
}
@media only screen and (min-width: 1200px) {
.modal-dialog{
max-width: 60%;
}
#mobile-break{
display: none;
}
.modal-text{
margin-bottom: 2vw;
}
#modal-cta{
width: 100%;
margin-bottom: 1vw;
}
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
.modal-dialog{
max-width: 60%;
}
#mobile-break{
display: none;
}
.modal-text{
margin-bottom: 2vw;
}
#modal-cta{
width: 100%;
margin-bottom: 1vw;
}
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
.modal-dialog{
max-width: 80%;
}
#mobile-break{
display: none;
}
.modal-text{
margin-bottom: 2vw;
}
#modal-cta{
width: 100%;
margin-bottom: 1vw;
}
}
@media only screen and (min-width: 576px) and (max-width: 768px) {
.modal-dialog{
max-width: 100%;
}
#mobile-break{
display: block;
}
.modal-text{
margin-bottom: 8vw;
}
#modal-cta{
width: 100%;
margin-bottom: 4vw;
}
.modal-head{
margin-bottom: 4vw;
}
}
@media only screen and (max-width: 576px) {
.modal-dialog{
max-width: 100%;
}
#mobile-break{
display: block;
}
.modal-text{
margin-bottom: 8vw;
}
#modal-cta{
width: 100%;
margin-bottom: 4vw;
}
.modal-head{
margin-bottom: 4vw;
}
}
</style>

View file

@ -1,10 +1,12 @@
<hr> <hr>
<div id="myData"></div>
<section class="footer" id="community"> <section class="footer" id="community">
<div class="container"> <div class="container">
<div class="row footer-top"> <div class="row footer-top">
<div class="col-lg-8 footer-content"> <div class="col-lg-8 footer-content">
<h4>Equitable open-source for <span id="cycle">web3</span></h4> <h4>Changing the way you build. And what happens after you build it.</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>tea.cli is a delightful package manager that gets out of your way and sets you up for a joyful development process. <a class="teal" href="#">You can install it today</a>. Our web3 protocol will create an OSS ecosystem that is safer for all users, and fair for all maintainers. Read our <a class="teal" href="#">white paper</a> here.</p>
<img class="footer-grid" src="/Images/footer-grid-element.svg" alt="tea.grid"> <img class="footer-grid" src="/Images/footer-grid-element.svg" alt="tea.grid">
<img class="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid"> <img class="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
</div> </div>
@ -16,13 +18,12 @@
<a class="list-group-item" role="button" href="https://github.com/teaxyz"><i class="icon-github social-icon"></i>GitHub</a> <a class="list-group-item" role="button" href="https://github.com/teaxyz"><i class="icon-github social-icon"></i>GitHub</a>
<a class="list-group-item" role="button" href="https://reddit.com/r/teaxyz"><i class="icon-reddit social-icon"></i>Reddit</a> <a class="list-group-item" role="button" href="https://reddit.com/r/teaxyz"><i class="icon-reddit social-icon"></i>Reddit</a>
<a class="list-group-item" role="button" href="https://t.me/tea_xyz"><i class="icon-telegram social-icon"></i>Telegram</a> <a class="list-group-item" role="button" href="https://t.me/tea_xyz"><i class="icon-telegram social-icon"></i>Telegram</a>
<a class="list-group-item" role="button" href="https://www.instagram.com/tea.xyz/"><i class="icon-instagram social-icon"></i>Instagram</a>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
<div class="row mb-4"> <div class="row mb-4">
<h4>subscribe to our email list</h4> <h4>sign up for tea'mails</h4>
<hr> <hr>
<div class="col"> <div class="col">
<div class="input-group"> <div class="input-group">
@ -162,3 +163,29 @@ integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+
}, },
}); });
</script> </script>
<script>
const url = 'https://tea.breezy.hr/json?verbose=true';
fetch(url)
.then(res => res.json())
.then((out) => {
//Debugging + Reference
console.log(out);
//Job Description One
document.getElementById('typeOne').innerHTML = out[0].type.name;
document.getElementById('deptOne').innerHTML = out[0].department;
out[0].location.is_remote === true ? document.getElementById('locOne').innerHTML = 'Remote' : document.getElementById('locOne').innerHTML = out[0].location.name;
document.getElementById('jobOne').innerHTML = out[0].name;
document.getElementById('descOne').innerHTML = out[0].description;
document.getElementById('linkOne').href = out[0].url;
//Job Description Two
document.getElementById('typeTwo').innerHTML = out[1].type.name;
document.getElementById('deptTwo').innerHTML = out[1].department;
document.getElementById('jobTwo').innerHTML = out[1].name;
document.getElementById('descTwo').innerHTML = out[1].description;
})
.catch(err => { throw err });
</script>

View file

@ -63,6 +63,7 @@
<link rel="stylesheet" href="/css/products.css"> <link rel="stylesheet" href="/css/products.css">
<link rel="stylesheet" href="/css/accordion.css"> <link rel="stylesheet" href="/css/accordion.css">
<link rel="stylesheet" href="/css/nebraska-man.css"> <link rel="stylesheet" href="/css/nebraska-man.css">
<link rel="stylesheet" href="/css/spacing.css">
<link <link
rel="stylesheet" rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
@ -78,12 +79,12 @@
<meta name="twitter:image:alt" content="sh &lt;(curl tea.xyz)"> <meta name="twitter:image:alt" content="sh &lt;(curl tea.xyz)">
<meta name="twitter:title" content="tea."> <meta name="twitter:title" content="tea.">
<meta name="twitter:description" content="something new is brewing."> <meta name="twitter:description" content="something new is brewing.">
<meta name="twitter:image" content="https://tea.xyz/cover.png"> <meta name="twitter:image" content="/cover.png">
<meta property="og:url" content="http://tea.xyz" /> <meta property="og:url" content="http://tea.xyz" />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:title" content="tea.xyz" /> <meta property="og:title" content="tea.xyz" />
<meta property="og:description" content="Equitable Open-Source for web3" /> <meta property="og:description" content="Equitable Open-Source for web3" />
<meta property="og:image" content="https://tea.xyz/cover.png" /> <meta property="og:image" content="/cover.png" />
<meta property="og:image:alt" content="sh &lt;(curl tea.xyz)" /> <meta property="og:image:alt" content="sh &lt;(curl tea.xyz)" />
<meta name="facebook-domain-verification" content="0fsbdl7joh0gha23zbhtovtpn0z0cl" /> <meta name="facebook-domain-verification" content="0fsbdl7joh0gha23zbhtovtpn0z0cl" />
<meta name="description" content="The tools that build the internet have steeped too long. For the past two decades, big tech has made trillions off the generosity of visionary developers and web pioneers… never thanking, never mentioning, and certainly never paying. At tea, were brewing something to change that by enabling developers (you) to continue doing what you love, while earning what you deserve."> <meta name="description" content="The tools that build the internet have steeped too long. For the past two decades, big tech has made trillions off the generosity of visionary developers and web pioneers… never thanking, never mentioning, and certainly never paying. At tea, were brewing something to change that by enabling developers (you) to continue doing what you love, while earning what you deserve.">

View file

@ -6,6 +6,7 @@
<hr> <hr>
<div class="container package-grid-header"> <div class="container package-grid-header">
<h3>packages</h3> <h3>packages</h3>
<p>There are already plenty of packages available through tea. As the communitea builds the library, contributions will live here.</p>
</div> </div>
<hr> <hr>
<div class="container package-grid"> <div class="container package-grid">

View file

@ -1,6 +1,6 @@
<div class="card card-thumbnail" style="width: 100%"> <div class="card card-thumbnail" style="width: 100%">
<figure class="card-img-top" > <figure class="card-img-top" >
<img src="{{- .thumb_image_url -}}" alt="{{- .name -}}" style="width:100%; height:100%;"> <img class="package-image" src="{{- .thumb_image_url -}}" alt="{{- .name -}}" style="width:100%; height:100%;">
<article class="card-thumb-label"> <article class="card-thumb-label">
<i class="icon-tea-logo-iconasset-1"></i> <i class="icon-tea-logo-iconasset-1"></i>
<h3>{{- .name -}}</h3> <h3>{{- .name -}}</h3>
@ -47,6 +47,16 @@ div.card.card-thumbnail{
right: 0; right: 0;
} }
@media only screen and (min-width: 576px) {
.package-image{
box-shadow: 0px 0px 12px #0c0c0c !important;
}
}
@media only screen and (min-width: 992px) { @media only screen and (min-width: 992px) {
.card-thumb-label i{ .card-thumb-label i{

View file

@ -347,7 +347,7 @@ mark{
@media only screen and (max-width: 576px) { @media only screen and (max-width: 576px) {
.hero-section{ .hero-section{
padding: 4vw !important; padding: 1vw 4vw !important;
} }
.hero-container{ .hero-container{
@ -355,7 +355,7 @@ mark{
background-position: top; background-position: top;
background-repeat: repeat-y; background-repeat: repeat-y;
background-size: cover; background-size: cover;
padding-top: 16vw; padding-top: 17.5vw;
padding-bottom: 21vw; padding-bottom: 21vw;
border: 1px solid #949494; border: 1px solid #949494;
} }

View file

@ -12,11 +12,6 @@
background-size: contain; background-size: contain;
} }
.products-hero h1{
position: relative;
z-index: 2;
}
.lead-container{ .lead-container{
padding-left: 25vw; padding-left: 25vw;
padding-right: 25vw; padding-right: 25vw;
@ -61,11 +56,6 @@
background-size: contain; background-size: contain;
} }
.products-hero h1{
position: relative;
z-index: 2;
}
.lead-container{ .lead-container{
padding-left: 25vw; padding-left: 25vw;
padding-right: 25vw; padding-right: 25vw;
@ -138,3 +128,29 @@
height: 7vw; height: 7vw;
box-shadow: 0px 0px 12px #1a1a1a; box-shadow: 0px 0px 12px #1a1a1a;
} }
.teacli-gen-art-1{
background-image: url("/Images/gen-art/glass-triangles.jpg");
background-position: center;
background-repeat: repeat;
background-size: cover;
position: absolute;
right: 8.3vw;
top: 12.2vw;
width: 16.7vw;
height: 17vw;
z-index: 0;
}
.teacli-gen-art-2{
background-image: url("/Images/gen-art/pixel-mouth.jpg");
background-position: center;
background-repeat: repeat;
background-size: cover;
position: absolute;
right: 16.5vw;
top: 16.5vw;
width: 12vw;
height: 17vw;
z-index: 0;
}

218
src/static/css/spacing.css Normal file
View file

@ -0,0 +1,218 @@
/* This file is entirely for spacing utlilities. Spacing is based of the grid-box height/width and various viewer widths. */
/* Height spacers */
@media only screen and (min-width: 1200px) {
.three-boxes{
padding-top: 12.556vw;
padding-bottom: 12.556vw;
}
.two-boxes{
padding-top: 8.371vw;
padding-bottom: 8.371vw;
}
.one-box{
padding-top: 4.185vw;
padding-bottom: 4.185vw;
}
.one-box-down{
margin-bottom: 4.185vw;
}
.two-boxes-down{
margin-bottom: 8.371vw;
}
.three-boxes-down{
margin-bottom: 12.556vw;
}
.one-box-up{
margin-top: 4.185vw;
}
.two-boxes-up{
margin-top: 8.371vw;
}
.three-boxes-up{
margin-top: 12.556vw;
}
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
.three-boxes{
padding-top: 15vw;
padding-bottom: 15vw;
}
.two-boxes{
padding-top: 10vw;
padding-bottom: 10vw;
}
.one-box{
padding-top: 5vw;
padding-bottom: 5vw;
}
.one-box-down{
margin-bottom: 5vw;
}
.two-boxes-down{
margin-bottom: 10vw;
}
.three-boxes-down{
margin-bottom: 15vw;
}
.one-box-up{
margin-top: 5vw;
}
.two-boxes-up{
margin-top: 10vw;
}
.three-boxes-up{
margin-top: 15vw;
}
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
.three-boxes{
padding-top: 15.423vw;
padding-bottom: 15.423vw;
}
.two-boxes{
padding-top: 10.282vw;
padding-bottom: 10.282vw;
}
.one-box{
padding-top: 5.141vw;
padding-bottom: 5.141vw;
}
.one-box-down{
margin-bottom: 5.141vw;
}
.two-boxes-down{
margin-bottom: 10.282vw;
}
.three-boxes-down{
margin-bottom: 15.423vw;
}
.one-box-up{
margin-top: 5.141vw;
}
.two-boxes-up{
margin-top: 10.282vw;
}
.three-boxes-up{
margin-top: 15.423vw;
}
}
@media only screen and (min-width: 576px) and (max-width: 768px) {
.three-boxes{
padding-top: 20.313vw;
padding-bottom: 20.313vw;
}
.two-boxes{
padding-top: 13.542vw;
padding-bottom: 13.542vw;
}
.one-box{
padding-top: 6.771vw;
padding-bottom: 6.771vw;
}
.one-box-down{
margin-bottom: 6.771vw;
}
.two-boxes-down{
margin-bottom: 13.542vw;
}
.three-boxes-down{
margin-bottom: 20.313vw;
}
.one-box-up{
margin-top: 6.771vw;
}
.two-boxes-up{
margin-top: 13.542vw;
}
.three-boxes-up{
margin-top: 20.313vw;
}
}
@media only screen and (max-width: 576px) {
.three-boxes{
padding-top: 29.167vw;
padding-bottom: 29.167vw;
}
.two-boxes{
padding-top: 19.444vw;
padding-bottom: 19.444vw;
}
.one-box{
padding-top: 9.722vw;
padding-bottom: 9.722vw;
}
.one-box-down{
margin-bottom: 9.722vw;
}
.two-boxes-down{
margin-bottom: 19.444vw;
}
.three-boxes-down{
margin-bottom: 29.167vw;
}
.one-box-up{
margin-top: 9.722vw;
}
.two-boxes-up{
margin-top: 19.444vw;
}
.three-boxes-up{
margin-top: 29.167vw;
}
}

View file

@ -11,6 +11,9 @@
} }
h1,h2,h3,h4,h5,h6,p,.lead{ h1,h2,h3,h4,h5,h6,p,.lead{
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto !important; hyphens: auto !important;
} }
@ -55,7 +58,7 @@ li{
/* Extra-Large Screens*/ /* Extra-Large Screens*/
/*@media only screen and (min-width: 1200px) {*/ @media only screen and (min-width: 1200px) {
h1{ h1{
font-size: 11.5vw; font-size: 11.5vw;
@ -77,7 +80,7 @@ li{
h4{ h4{
font-size: 2.121vw; font-size: 2.121vw;
line-height: 4.116vw; line-height: 2.5vw;
} }
h5{ h5{
@ -96,6 +99,7 @@ li{
p{ p{
font-size: 1.116vw; font-size: 1.116vw;
} }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) { @media only screen and (min-width: 992px) and (max-width: 1200px) {
@ -218,8 +222,8 @@ li{
@media only screen and (max-width: 576px) { @media only screen and (max-width: 576px) {
h1{ h1{
font-size: 21.5vw; font-size: 16vw;
line-height: 20.4vw !important; line-height: 20.4vw;
} }
h2{ h2{
@ -229,12 +233,12 @@ li{
h3{ h3{
font-size: 12vw; font-size: 12vw;
line-height: 80px; line-height: 16vw;
} }
h4{ h4{
font-size: 38px; font-size: 7.6vw;
line-height: 45px; line-height: 9vw;
} }
.lead{ .lead{