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

Merge pull request #134 from teaxyz/styling-content-tom

Browse source 
Styling content tom
This commit is contained in:
Thomas Smith 2022-10-24 22:09:43 -04:00 committed by GitHub
commit 79058110bb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 117 additions and 120 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/layouts/index.html
View file

@ -35,6 +35,7 @@
<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 open-source revolution is here. We’re calling on all devs to build with our powerful, new unified package manager.</p>
<img class="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
</div>
</div>
</div>
@ -186,16 +187,19 @@
</div>
<div class="row">
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12 one-box-down">
<h5>heading one</h5>
<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>
<h5>Map out the Tea’cosystem</h5>
<p>The more people authenticate, the clearer picture we have on just how strong the pot of tea we’re brewing is. We’ll be able to see just how many newcomers and bona-fide OSS veterans have enlisted for the revolution.</p>
<img class="mobile-grid-element" src="/Images/mobile-grid-element-one-row.svg" alt="grid">
</div>
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12 one-box-down">
<h5>heading one</h5>
<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>
<h5>Get Recognized</h5>
<p>Authenticating your GitHub enables us to quantify and reward the contributions <em>you’ve already made</em> to the Open-Source Community</p>
<img class="mobile-grid-element" src="/Images/mobile-grid-element-one-row.svg" alt="grid">
</div>
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12 one-box-down">
<h5>heading one</h5>
<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>
<h5>NFT Reward Badges</h5>
<p>Authenticating your GitHub entitles you to unique NFT reward badges, including one with rare artwork specific to how soon you authenticate.</p>
<img class="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
</div>
</div>
</div>

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

@ -1,6 +1,6 @@
{{ define "main" }}
<section>
<section class="two-boxes hero-section">
<div>
@ -13,6 +13,7 @@
<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>
<img class="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
</div>
</div>
</div>
@ -20,7 +21,6 @@
<hr>
<section>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
@ -81,18 +81,20 @@
</div>
</div>
</div>
</section>
<!-- Why Work at tea -->
<div class="row teal-bg">
<div class="container two-boxes">
<div class="row">
<div class="col">
<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>
<section class="teal-bg two-boxes">
<div class="row">
<div class="container two-boxes">
<div class="row">
<div class="col">
<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>
</section>
{{ end }}

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

@ -1,16 +1,16 @@
{{ define "main" }}
<section class="nb-man-hero">
<div class="gen-art animated-25 animatedFadeInUp fadeInUp" id="nb-gen-art-1"></div>
<div class="gen-art" id="nb-gen-art-2"></div>
<div class="section two-boxes hero-section">
<div class="container">
<div class="row">
<div class="col">
<h1>Nebraska <span id="nb-man-float">Man</span></h1>
<h1>Nebraska Man</h1>
</div>
</div>
</div>
</section>
</div>
<hr>
<section class="nb-man-about two-boxes">
<div class="container">

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

@ -5,7 +5,6 @@
<div class="row">
<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-xl-8 col-lg-8 col-md-6 col-sm-12 col-12">

12
src/layouts/page/products.html
View file

@ -1,16 +1,14 @@
{{ define "main" }}
<section class="products-hero">
<section class="two-boxes hero-section">
<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" lang="en">
<div class="container">
<div class="row">
<div class="col">
<h1 style="position:relative; z-index:3;">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 the wait is over… it’s time to take your first sip.</p>
</div>
<div class="col" style="position:relative; z-index:2;">
<h1>Products</h1>
<p class="lead" style="width:50%">Just like the perfect cup of tea, greatness takes time to steep. But the wait is over… it’s time to take your first sip.</p>
</div>
</div>
</div>

46
src/layouts/page/white-paper.html
View file

@ -1,34 +1,42 @@
{{ define "main" }}
<!-- Hero Section -->
<div class="section">
<div class="section two-boxes hero-section">
<div class="container">
<div class="row">
<div class="col">
<h1>White Paper</h1>
<p>Open‐source is about the many coming together to create something great. In the spirit of that, we’re inviting developers, speculators, and enthusiasts alike to contribute to our white paper and help brew the future of the internet. This is our revolutionary undertaking to create equitable open‐source for web3, and we want you to be a part of laying its groundwork.</p>
<p class="lead">Open‐source is about the many coming together to create something great. In the spirit of that, we’re inviting developers, speculators, and enthusiasts alike to contribute to our white paper and help brew the future of the internet. This is our revolutionary undertaking to create equitable open‐source for web3, and we want you to be a part of laying its groundwork.</p>
<img class="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
</div>
</div>
<hr>
<div class="row">
<div class="col mb-4 mt-3">
<h4>Our white paper is available in multiple languages</h4>
<p>Thanks to the tea community's generosity and time, our white paper is available in several world languages. Select your preferred language from the dropdown menu.</p>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle languages" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Choose a Language
</button>
<ul class="dropdown-menu" id="language-selector"></ul>
</div>
</div>
</div>
</div>
</div>
<section>
<hr>
<section class="two-boxes">
<div class="container">
<div class="row">
<div class="col">
<h4>Our white paper is available in multiple languages</h4>
<p>Thanks to the tea community's generosity and time, our white paper is available in several world languages. Select your preferred language from the dropdown menu.</p>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle languages" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Choose a Language
</button>
<ul class="dropdown-menu" id="language-selector"></ul>
</div>
<img class="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
</div>
</div>
</div>
</section>
<section>
<div class="container" style="padding-top: 0px !important;">
<div class="row">
<div class="col">
<div id="adobe-dc-view" style="width: 100%;"></div>
@ -36,7 +44,7 @@
<script type="text/javascript">
document.addEventListener("adobe_dc_view_sdk.ready", function(){
//Must change clientId before final merge
var adobeDCView = new AdobeDC.View({clientId: "374f4d10016d424d863bbd6ac0533849", divId: "adobe-dc-view"});
var adobeDCView = new AdobeDC.View({clientId: "fc933927b4e947c2aaf9a7b33b26f0b4", divId: "adobe-dc-view"});
adobeDCView.previewFile({
content:{location: {url: "https://tea.xyz/tea.white-paper.pdf"}},
metaData:{fileName: "tea.white-paper.pdf"}

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

@ -9,7 +9,7 @@
<h3>packages</h3>
{{- partial "sort-dropdown.html" -}}
</section>
<p>There are already plenty of packages available through tea. As the communi’tea builds the library, contributions will live here.</p>
<p style="width:60%;">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">
@ -128,7 +128,7 @@
for(const sp of sortedPackages) {
grid.appendChild(sp);
}
const isPopularity = sortBy === sortOptions.popularity;
setBtnStyles(sortOptions.popularity, isPopularity);

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

@ -67,11 +67,11 @@ div.card.card-thumbnail{
position: absolute;
background: rgba(255,255,255,0.9);
left: 0;
bottom: 1.116vw;
bottom: 0vw;
padding: 1.116vw;
text-align: left;
width: 90%;
height: 60%;
height: 40;
}
.card-thumb-label h3 {
@ -138,11 +138,11 @@ div.card.card-thumbnail{
position: absolute;
background: rgba(255,255,255,0.9);
left: 0;
bottom: 1.116vw;
bottom: 0vw;
padding: 1.116vw;
text-align: left;
width: 90%;
height: 60%;
height: 40%;
}
.card-thumb-label h3 {
@ -209,11 +209,11 @@ div.card.card-thumbnail{
position: absolute;
background: rgba(255,255,255,0.9);
left: 0;
bottom: 1.116vw;
bottom: 0vw;
padding: 1.116vw;
text-align: left;
width: 90%;
height: 60%;
height: 40%;
}
.card-thumb-label h3 {

7
src/layouts/partials/sort-dropdown.html
View file

@ -3,9 +3,9 @@
display:inline-block;
font-family: "pp-neue-machina", sans-serif;
background-color: #1a1a1a;
border: .5px solid #ffffff;
border: 1px solid #ffffff;
color: #fff;
padding-top: 0.279vw;
text-align: center;
text-decoration: none;
text-transform: uppercase;
max-width: 240px;
@ -78,7 +78,7 @@
}
</style>
<section class="sorting-container">
<div class="dropdown">
<div class="dropdown-title">SORT ORDER</div>
@ -88,4 +88,3 @@
</ul>
</div>
</section>

1
src/static/Images/mobile-grid-element-one-row.svg Normal file
View file

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 370.33 41.59"><defs><style>.cls-1{fill:#949494;}</style></defs><g id="Layer_1-2"><g><path id="Rectangle_1100" class="cls-1" d="M0,0H41.59V41.59H0V0ZM41.09,.5H.5V41.09H41.09V.5Z"/><path id="Rectangle_1102" class="cls-1" d="M41.09,0h41.59V41.59H41.09V0Zm41.09,.5H41.59V41.09h40.59V.5Z"/><path id="Rectangle_1103" class="cls-1" d="M82.19,0h41.59V41.59h-41.59V0Zm41.09,.5h-40.59V41.09h40.59V.5Z"/><path id="Rectangle_1104" class="cls-1" d="M123.28,0h41.59V41.59h-41.59V0Zm41.09,.5h-40.59V41.09h40.59V.5Z"/><path id="Rectangle_1105" class="cls-1" d="M164.37,0h41.59V41.59h-41.59V0Zm41.09,.5h-40.59V41.09h40.59V.5Z"/><path id="Rectangle_1106" class="cls-1" d="M205.46,0h41.59V41.59h-41.59V0Zm41.09,.5h-40.59V41.09h40.59V.5Z"/><path id="Rectangle_1107" class="cls-1" d="M246.55,0h41.59V41.59h-41.59V0Zm41.09,.5h-40.59V41.09h40.59V.5Z"/><path id="Rectangle_1108" class="cls-1" d="M287.65,0h41.59V41.59h-41.59V0Zm41.09,.5h-40.59V41.09h40.59V.5Z"/><path id="Rectangle_1109" class="cls-1" d="M328.74,0h41.59V41.59h-41.59V0Zm41.09,.5h-40.59V41.09h40.59V.5Z"/></g></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

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

@ -11,7 +11,7 @@
.container{
max-width: 1920px;
padding: 4.185vw 8.371vw 4.185vw 8.371vw;
padding: 4.5vw 8.371vw 4.185vw 8.371vw;
}
}
@ -26,7 +26,7 @@
.container{
max-width: 1920px;
padding: 5vw 10vw 4.185vw 10vw !important;
padding: 4.2vw 10vw 4.185vw 10vw !important;
}
.hero-float{
@ -71,12 +71,17 @@
background-color: #1a1a1a;
max-width: 1920px;
overflow-x: hidden;
margin-top: 5.5vw !important;
margin-top: 7.5vw !important;
}
section{
padding-left: 4vw !important;
padding-right: 4vw !important;
}
.container{
max-width: 1920px;
padding: 5.4vw 3vw;
padding: 5.5vw 3vw !important;
}
}
@ -136,48 +141,23 @@ mark{
color: #1a1a1a;
}
/* Homepage */
@media only screen and (min-width: 1200px) {
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
}
@media only screen and (min-width: 576px) and (max-width: 768px){
}
@media only screen and (max-width: 576px) {
.hero-subhead{
width: 100%;
}
}
@media only screen and (min-width: 1200px) {
.hero-section{
background-image: url("/Images/x-large-grid-hero.svg");
background-attachment: fixed;
background-image: url("/Images/x-large-grid.svg");
background-attachment: scroll;
background-position: top;
background-repeat: repeat;
background-size: contain;
background-size: cover;
}
.hero-bottom{
background-image: url("/Images/x-large-grid-hero.svg");
background-attachment: fixed;
background-position: center-top;
background-image: url("/Images/x-large-grid.svg");
background-attachment: scroll;
background-position: top;
background-repeat: repeat;
background-size: contain;
height: 75px;
background-size: cover;
height: 4.185vw;
}
.impact-section{
@ -190,7 +170,7 @@ mark{
.package_before{
background-image: url("/Images/xl-grid-half-right.svg");
background-attachment: fixed;
background-attachment: scroll;
background-repeat: repeat-y;
background-position: right;
background-size: cover;
@ -200,7 +180,7 @@ mark{
.package-cta{
background-image: url("/Images/x-large-grid.svg");
background-attachment: fixed;
background-attachment: scroll;
background-repeat: repeat-y;
background-size: cover;
}
@ -209,7 +189,7 @@ mark{
background-image: url("/Images/x-large-stats-grid.svg");
background-attachment: fixed;
background-position: top;
background-repeat: repeat-y;
background-repeat: repeat;
background-size: cover;
}
@ -235,8 +215,8 @@ mark{
.partners{
background-image: url("/Images/x-large-grid.svg");
background-attachment: fixed;
background-repeat: repeat-y;
background-attachment: scroll;
background-repeat: repeat;
background-size: cover;
}
@ -250,10 +230,11 @@ mark{
.hero-section{
background-image: url("/Images/large-grid.svg");
background-attachment: fixed;
background-attachment: scroll;
background-position: top;
background-repeat: repeat;
background-size: contain; }
background-size: cover;
}
.metric-block{
padding: 4.185vw;
@ -286,10 +267,10 @@ mark{
.hero-section{
background-image: url("/Images/large-grid.svg");
background-attachment: fixed;
background-attachment: scroll;
background-position: top;
background-repeat: repeat;
background-size: contain;
background-size: cover;
}
.metric-block{
@ -322,7 +303,7 @@ mark{
.hero-section{
background-image: url("/Images/medium-grid.svg");
background-attachment: fixed;
background-attachment: scroll;
background-position: top;
background-repeat: repeat;
background-size: cover;
@ -357,18 +338,19 @@ mark{
@media only screen and (max-width: 576px) {
.hero-section{
padding-right: 4vw !important;
padding-left: 4vw !important;
padding-right: 4vw;
padding-left: 4vw;
}
.hero-container{
/*
background-image: url("/Images/small-grid.svg");
background-position: top;
background-repeat: repeat-y;
background-size: cover;
background-size: cover;*/
padding-top: 21.800vw !important;
padding-bottom: 21.800vw !important;
border: 1px solid #949494;
margin-bottom: 5.4vw
}
.hero-container h1{
@ -483,4 +465,4 @@ mark{
}
.flex.column {
flex-direction: column;
}
}

6
src/static/css/package-grid.css
View file

@ -21,7 +21,7 @@
padding-top: 0vw !important;
padding-bottom: 0vw !important;
background-image: url("/Images/x-large-grid.svg");
background-attachment: fixed;
background-repeat: repeat-y;
background-size: cover;
background-attachment: scroll;
background-repeat: repeat;
background-size: contain;
}

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

@ -5,11 +5,11 @@
@media only screen and (min-width: 1200px) {
.products-hero{
background-image: url("/Images/x-large-grid-hero.svg");
background-attachment: fixed;
background-image: url("Images/x-large-grid.svg");
background-attachment: scroll;
background-position: top;
background-repeat: repeat;
background-size: contain;
background-size: cover;
}
.lead-container{
@ -42,6 +42,10 @@
display:none;
}
.lead{
width: 100% !important;
}
}
/* Products - TEA.CLI */

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

@ -222,8 +222,8 @@ li{
@media only screen and (max-width: 576px) {
.impact{
font-size: 24vw !important;
line-height: 20.4vw;
font-size: 22vw !important;
line-height: 22vw !important;
}
h1{