ivabus/www
1
0
Fork 0
mirror of https://github.com/ivabus/www synced 2024-11-26 08:25:06 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

23
src/layouts/index.html
View file

@ -35,13 +35,13 @@
</div>
<div class="row">
<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. We’re 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. We’re calling on all devs to build with our powerful, new unified package manager.</p>
</div>
</div>
</div>
</section>
<div class="full-width-cta-container">
{{- partial "full-width-cta.html" . -}}
{{- partial "clipboard-copy.html" . -}}
</div>
<div class="hero-bottom">
@ -49,7 +49,7 @@
<!-- Teal Impact Section -->
<section class="teal-bg impact-section">
<section class="teal-bg impact-section two-boxes">
<div class="container">
<div class="row">
<div class="col">
@ -86,8 +86,9 @@
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
<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>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">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>We’ve 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, we’ve built a tool that improves how you develop by getting out of your way so you can keep building.</p>
<p>Next we’re 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 won’t have to use our web3 features to use tea, but we think you’ll 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">
<div class="gen-art-mobile" id="m-gen-art-1"></div>
<div class="gen-art-mobile" id="m-gen-art-2"></div>
@ -180,8 +181,8 @@
<div class="container package-cta-container">
<div class="row" style="margin-bottom: 20px;">
<div class="col" style="margin: 150px 0px;">
<h3 class="text-center">Stay tuned for our full launch.</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>
<h3 class="text-center">Authenticate your GitHub for an even bigger sip</h3>
<p class="text-center">Using tea without authenticating is like playing a video game without the DLC. There’s 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>
@ -206,8 +207,8 @@
<div class="row mb-5">
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
<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>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 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>Even many developers don’t 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" "#" -}}
</div>
</div>
@ -248,8 +249,8 @@
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12" style="position:relative; z-index: 2;">
<h2>partners</h2>
<p class="lead">As we like to say at tea, teamwork makes the dream work–and by golly if we don't have a a good team.</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>
<p>At our core, tea is about building an open-source ecosystem that is fair for everyone. This is an enormous undertaking and we can’t do it alone. Here we want to thank those that have already enlisted for the Open-Source Revolution.</p>
<!-- Add in community to partners, with large metric feed. Maybe use fists icon for that -->
</div>
<div class="col">

264
src/layouts/page/careers.html
View file

@ -1,206 +1,98 @@
{{ 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">
<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 style="margin-top:auto; margin-bottom:auto;">
<h1 class="display-1 mb-5">Join the <span class="teal">tea</span> party!</h1>
<p class="mb-lg-5 mb-md-5 mb-sm-5 mb-5 lead">We’re looking for the best-of-the-best to help brew the future of web3. If you’re a visionary self-starter who’s eager to be on the front lines of innovation, then take look at our list of current openings and apply accordingly. Even if you don’t 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>
<hr class="careers-divider">
<section>
<style>
@media only screen and (min-width: 600px) {
.careers-divider{
display:none;
}
}
</style>
<div>
<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, we’re 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">
<span id="aa62fd265a9f"></span>
<div class="accordion-item">
<p 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">
Package Maintainer
</button>
</p>
<div class="accordion-body">
<div>We are looking for Package Maintainers to help us review, update, and deploy packages for the tea system.</div>
<div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<br><strong>Responsibilities:</strong><br><br>
<ul>
<li>Collaborate with Package Manager teammates to determine priorities. </li>
<li>Build source code and compile packages for distribution. </li>
<li>Include testing code and documentation to help teammates troubleshoot issues. </li>
<li>Track security and breaking changes for packages in our ecosystem to ensure quick remediations. </li>
<li>Attend meetings, brainstorming sessions and regular standups for enhancing your knowledge of new technologies. </li>
<li>Stay on top of technology trends and developments, especially changes related to package dependencies. </li>
<li>Ensure that all technology practices adhere to applicable standards. </li>
</ul>
<p>This is a full-time remote contractor position.</p><br>
<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 class="accordion-item">
<p 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">
Blockchain Architect
</button>
</p>
<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 network’s needs and goals, including:
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<br>
<ul>
<li>Select and/or build all components of the blockchain technology stack.</li>
<li>Ensure scalable connectivity of on-chain and off-chain software solutions.</li>
<li>Support the launch and growth of the developer community through various initiatives including public engagement and documentation publishing.</li>
</ul>
<p>This is a full-time remote position.</p><br>
<a class="btn btn-primary mb-3" href="https://tea.breezy.hr/p/dc187fdab65e-blockchain-architect"
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="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Senior Blockchain Developer
</button>
</p>
<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 network’s needs and goals.<br></div>
<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 tea’s 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 class="container">
<div class="row">
<div class="col">
<h1>Careers</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>
</div>
</section>
<style>
.accordion-item:last-of-type .accordion-button.collapsed {
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
</style>
<hr>
<section>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" id="jobOne" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body two-boxes">
<div class="one-box-down">
<p>Employment type: <span id="typeOne"></span></p>
<p>Department: <span id="deptOne"></span></p>
<p>Location: <span id="locOne"></span></p>
</div>
<hr class="one-box-down">
<div class="one-box-down" id="descOne"></div>
<div>
<a href="" id="linkOne">
<button class="detail-btn-large"><i class="icon-enter-arrow"></i>VIEW ALL DETAILS</button>
</a>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" id="jobTwo" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body two-boxes">
<div class="one-box-down">
<p>Employment type: <span id="typeTwo"></span></p>
<p>Department: <span id="deptTwo"></span></p>
<p>Location: <span id="locTwo"></span></p>
</div>
<hr class="one-box-down">
<div class="one-box-down" id="descTwo"></div>
<div>
<a href="" id="linkTwo">
<button class="detail-btn-large"><i class="icon-enter-arrow"></i>VIEW ALL DETAILS</button>
</a>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Accordion Item #3
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
<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>
</div>
</div>
</div>
</section>
<!-- Why Work at tea -->
<div class="row" style="background-color:#23282C;">
<div class="container mb-5 mt-5">
<div class="row">
<h3 class="text-center display-4 mb-5">Why work at tea?</h3>
</div>
<div class="row teal-bg">
<div class="container two-boxes">
<div class="row">
<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>
<!-- 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 }}

2
src/layouts/page/keep-what-is-yours.html
View file

@ -480,7 +480,7 @@
</div>
<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">
<img src="/Images/instagram-iconAsset 1.svg" alt="" class="community-icon">
</div>

68
src/layouts/page/lisbon.html Normal file
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 }}

6
src/layouts/page/nebraska-man.html
View file

@ -16,8 +16,8 @@
<div class="container">
<div class="row">
<div class="col">
<h2>the battle for the internet has just begun</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. 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>
<h3>the battle for the internet has just begun</h3>
<p class="lead">We’ve 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>
@ -33,7 +33,7 @@
</div>
<div class="col-lg-8 col-md-8 col-sm-12 col-12 my-auto">
<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 Man’s 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>

144
src/layouts/page/package-detail.html
View file

@ -3,12 +3,12 @@
<section>
<div class="container">
<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>
</div>
<div class="col">
<div class="col-xl-8 col-lg-8 col-md-6 col-sm-12 col-12">
<h3>{{- .Title -}}</h3>
{{ range where $.Site.Data.packages "name" .Title }}
<p>{{- .desc -}}</p>
@ -21,7 +21,145 @@
</div>
</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>

2
src/layouts/page/pioneer-a-better-internet.html
View file

@ -407,7 +407,7 @@ their Github account. So don’t delay, get it while it’s hot.</p>
</div>
<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">
<img src="/Images/instagram-iconAsset 1.svg" alt="" class="community-icon">
</div>

29
src/layouts/page/products.html
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-2"></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="col">
<h1>Products</h1>
<div class="lead-container">
<p class="lead animated-5 animatedFadeInUp fadeInUp">Just like the perfect cup or tea, greatness needs time to steep. But we’re happy to announce that the wait is over… it’s 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… it’s time to take your first sip.</p>
</div>
</div>
</div>
@ -22,8 +22,8 @@
<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 cli</h3>
<p>Our command-line interface is beautiful in it’s simplicity. Like that cup of lemon-ginger, we’ve designed our CLI or be snappy and to-the-point. There’s 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>
<h3>tea.cli</h3>
<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>
</div>
<div class="col my-auto">
@ -39,26 +39,9 @@
<div class="container product-container">
<div class="row">
<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>
<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='/tea-protocol/'" class="detail-btn-large"><i class="icon-enter-arrow"></i>VIEW ALL DETAILS</button>
<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='/white-paper/'" class="detail-btn-large"><i class="icon-enter-arrow"></i>READ OUR WHITE PAPER</button>
</div>
<div class="col">
<img src="/Images/tea_cli_mockup_no_background.png" alt="tea-cli preview" style="width:100%;">

79
src/layouts/page/tea-cli.html
View file

@ -1,28 +1,37 @@
{{ define "main" }}
<div class="teacli-gen-art-1"></div>
<div class="teacli-gen-art-2"></div>
<section class="tea-cli">
<div class="container tea-cli-container">
<div class="container tea-cli-container two-boxes">
<div class="row">
<div class="col my-auto">
<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>
</section>
{{- partial "full-width-cta-split.html" . -}}
<style>
<section class="teal-bg">
<div class="container tea-cli-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="col">
<p class="black text-center">TOTAL DOWNLOADS</p>
<p class="black text-center tea-cli-data"><span id="tea-cli-downloads">612,085</span></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>
<h3 class="black text-center">Oh @#$%... the documentation <em>is</em> the script!?"</h3>
<p class="black text-center">–Our latest developer discovering <strong>Executable Markdown</strong></p>
</div>
</div>
</div>
@ -36,11 +45,51 @@
</style>
<section>
<div class="container">
<h2>Versions</h2>
<div class="container two-boxes">
<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. We’re 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 tea’s 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>
<hr>
{{- partial "tea-cli-accordion.html" . -}}
</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 }}

2
src/layouts/page/tea-qr.html
View file

@ -82,7 +82,7 @@
</div>
<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">
<img src="/Images/instagram-iconAsset 1.svg" alt="" class="community-icon">
</div>

153
src/layouts/partials/clipboard-copy.html Normal file
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>

169
src/layouts/partials/clipboard-modal.html Normal file
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>

35
src/layouts/partials/footer.html
View file

@ -1,10 +1,12 @@
<hr>
<div id="myData"></div>
<section class="footer" id="community">
<div class="container">
<div class="row footer-top">
<div class="col-lg-8 footer-content">
<h4>Equitable open-source for <span id="cycle">web3</span></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>
<h4>Changing the way you build. And what happens after you build it.</h4>
<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="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
</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://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://www.instagram.com/tea.xyz/"><i class="icon-instagram social-icon"></i>Instagram</a>
</ul>
</div>
</div>
</div>
<div class="row mb-4">
<h4>subscribe to our email list</h4>
<h4>sign up for tea'mails</h4>
<hr>
<div class="col">
<div class="input-group">
@ -162,3 +163,29 @@ integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+
},
});
</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>

5
src/layouts/partials/head.html
View file

@ -63,6 +63,7 @@
<link rel="stylesheet" href="/css/products.css">
<link rel="stylesheet" href="/css/accordion.css">
<link rel="stylesheet" href="/css/nebraska-man.css">
<link rel="stylesheet" href="/css/spacing.css">
<link
rel="stylesheet"
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:title" content="tea.">
<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:type" content="website" />
<meta property="og:title" content="tea.xyz" />
<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 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, we’re brewing something to change that by enabling developers (you) to continue doing what you love, while earning what you deserve.">

1
src/layouts/partials/package-grid.html
View file

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

12
src/layouts/partials/package-thumbnail.html
View file

@ -1,6 +1,6 @@
<div class="card card-thumbnail" style="width: 100%">
<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">
<i class="icon-tea-logo-iconasset-1"></i>
<h3>{{- .name -}}</h3>
@ -47,6 +47,16 @@ div.card.card-thumbnail{
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) {
.card-thumb-label i{

4
src/static/css/homepage.css
View file

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

36
src/static/css/products.css
View file

@ -12,11 +12,6 @@
background-size: contain;
}
.products-hero h1{
position: relative;
z-index: 2;
}
.lead-container{
padding-left: 25vw;
padding-right: 25vw;
@ -61,11 +56,6 @@
background-size: contain;
}
.products-hero h1{
position: relative;
z-index: 2;
}
.lead-container{
padding-left: 25vw;
padding-right: 25vw;
@ -138,3 +128,29 @@
height: 7vw;
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;
}
}

18
src/static/css/typography.css
View file

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