Line 1: | Line 1: | ||
+ | body, | ||
+ | html { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | color: #121212; | ||
+ | font-family: 'lato-regular'; | ||
+ | } | ||
+ | |||
.container { | .container { | ||
width: 100%; | width: 100%; | ||
height: calc(100vh - 14px) | height: calc(100vh - 14px) | ||
+ | } | ||
+ | |||
+ | #waves { | ||
+ | transform: rotate(180deg); | ||
+ | background-color: #fafafc | ||
} | } | ||
Line 21: | Line 34: | ||
position: absolute; | position: absolute; | ||
z-index: 4; | z-index: 4; | ||
− | pointer-events:none | + | pointer-events: none |
} | } | ||
Line 30: | Line 43: | ||
top: 0; | top: 0; | ||
position: absolute; | position: absolute; | ||
− | pointer-events:none | + | pointer-events: none |
} | } | ||
Line 42: | Line 55: | ||
pointer-events: none | pointer-events: none | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
#desc-wrapper { | #desc-wrapper { | ||
Line 90: | Line 86: | ||
#intro-page #intro h1 { | #intro-page #intro h1 { | ||
color: #FAFAFC; | color: #FAFAFC; | ||
− | font-size: 12em; | + | font-size: 12em; |
− | + | font-family: 'raleway'; | |
− | + | text-transform: lowercase; | |
− | + | font-weight: 600; | |
} | } | ||
Line 103: | Line 99: | ||
#bubbles-container { | #bubbles-container { | ||
− | height: | + | height: 100%; |
position: absolute; | position: absolute; | ||
width: 100%; | width: 100%; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
− | |||
} | } | ||
− | #problem-page, #links-page { | + | #problem-page, |
+ | #links-page { | ||
background-color: #FAFAFC; | background-color: #FAFAFC; | ||
} | } | ||
Line 118: | Line 114: | ||
color: #6281EF | color: #6281EF | ||
} | } | ||
− | #solution-page{ | + | |
+ | #solution-page { | ||
background-color: #121212; | background-color: #121212; | ||
} | } | ||
− | #solution-page #solution-header h1{ | + | #solution-page #solution-header h1 { |
color: #FFC43B | color: #FFC43B | ||
} | } | ||
− | + | ||
+ | .big-section { | ||
+ | line-height: 1.7 | ||
+ | } | ||
+ | |||
+ | .black-bg { | ||
background-color: #121212; | background-color: #121212; | ||
+ | |||
+ | } | ||
+ | |||
+ | .white-bg { | ||
+ | background-color: #fafafc; | ||
+ | display: flex; | ||
+ | justify-content: center; | ||
+ | align-items: center; | ||
+ | flex-direction: column; | ||
+ | |||
+ | } | ||
+ | |||
+ | .lightblue-bg { | ||
+ | background-color: #6281ef; | ||
+ | display: flex; | ||
+ | justify-content: center; | ||
+ | align-items: center; | ||
+ | flex-direction: column; | ||
+ | } | ||
+ | |||
+ | .brightblue-bg { | ||
+ | background-color: #3356ce; | ||
+ | display: flex; | ||
+ | justify-content: center; | ||
+ | align-items: center; | ||
+ | flex-direction: column; | ||
+ | } | ||
+ | |||
+ | .darkblue-bg { | ||
+ | background-color: #11348f; | ||
+ | display: flex; | ||
+ | justify-content: center; | ||
+ | align-items: center; | ||
+ | flex-direction: column; | ||
+ | } | ||
+ | |||
+ | .section { | ||
+ | display: flex; | ||
+ | padding: 20px; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* | ||
+ | .textBox p { | ||
+ | color: #fafafc; | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | #logoText { | ||
+ | display: flex; | ||
+ | flex-direction: column; | ||
+ | justify-content: space-between; | ||
+ | } | ||
+ | |||
+ | #logoAnimation { | ||
+ | height: 300px; | ||
+ | position: sticky; | ||
+ | top: 40vh; | ||
+ | } | ||
+ | |||
+ | */ | ||
+ | .half { | ||
+ | width: 50%; | ||
+ | padding: 20px; | ||
+ | box-sizing: border-box; | ||
+ | } | ||
+ | |||
+ | #firstpart { | ||
+ | height: 60vh; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | #storytelling .centered { | ||
+ | display: flex; | ||
+ | justify-content: center; | ||
+ | align-items: center; | ||
+ | } | ||
+ | |||
+ | #fish-icon { | ||
+ | border-radius: 50px; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | p { | ||
+ | font-family: 'montserrat-light'; | ||
+ | |||
+ | } | ||
+ | |||
+ | p b, | ||
+ | h2, | ||
+ | h1 { | ||
+ | font-family: 'montserrat-bold'; | ||
+ | } | ||
+ | |||
+ | .black { | ||
+ | color: #121212; | ||
+ | |||
+ | } | ||
+ | |||
+ | .white { | ||
+ | color: #fafafc; | ||
+ | } | ||
+ | |||
+ | |||
+ | #secondpart { | ||
+ | height: fit-content; | ||
+ | display: flex; | ||
+ | flex-direction: column; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | #secondpart .icon { | ||
+ | max-width: 500px; | ||
+ | width: 60% | ||
+ | } | ||
+ | |||
+ | .wdt-60 { | ||
+ | max-width: 400px; | ||
+ | width: 60%; | ||
+ | } | ||
+ | |||
+ | .wd-60 { | ||
+ | max-width: 700px; | ||
+ | width: 60%; | ||
+ | } | ||
+ | |||
+ | .wd-50 { | ||
+ | max-width: 500px; | ||
+ | width: 50%; | ||
+ | } | ||
+ | |||
+ | .wdt-80 { | ||
+ | width: 80%; | ||
+ | margin: 0 auto; | ||
+ | } | ||
+ | |||
+ | .icon { | ||
+ | padding: 20px; | ||
+ | box-sizing: border-box; | ||
+ | height: 300px; | ||
+ | width: 300px; | ||
+ | border-radius: 50px; | ||
+ | } | ||
+ | |||
+ | .icon.white { | ||
+ | background-color: #fafafc; | ||
+ | color: #121212; | ||
+ | } | ||
+ | |||
+ | .icon.dark { | ||
+ | background-color: rgba(255, 255, 255, 0.1); | ||
+ | color: #fafafc; | ||
+ | } | ||
+ | |||
+ | h1 { | ||
+ | color: #fafafc; | ||
+ | } | ||
+ | |||
+ | #thirdpart, | ||
+ | #fourthpart, | ||
+ | #seventhpart { | ||
+ | width: 80%; | ||
+ | margin: 0 auto; | ||
+ | } | ||
+ | |||
+ | #fifthpart { | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | #fifthpart .list { | ||
+ | width: 70%; | ||
+ | margin: 0 auto | ||
+ | } | ||
+ | |||
+ | #fifthpart .list .list-item { | ||
+ | height: 60px; | ||
+ | padding: 10px; | ||
+ | display: flex; | ||
+ | align-items: center; | ||
+ | } | ||
+ | |||
+ | #fifthpart .list .list-item div { | ||
+ | width: 60px; | ||
+ | height: 60px; | ||
+ | background-color: rgba(255, 255, 255, 0.1); | ||
+ | border-radius: 40px; | ||
+ | } | ||
+ | |||
+ | #fifthpart .list .list-item p { | ||
+ | width: calc(100% - 60px); | ||
+ | float: right; | ||
+ | margin: 0; | ||
+ | padding: 5px; | ||
+ | color: #fafafc; | ||
+ | } | ||
+ | |||
+ | #sixthpart { | ||
+ | flex-direction: column; | ||
+ | } | ||
+ | |||
+ | .milkWave { | ||
+ | z-index: 2; | ||
+ | width: 100%; | ||
+ | top: 0; | ||
+ | position: absolute; | ||
+ | content: ""; | ||
+ | pointer-events: none; | ||
+ | background-position: bottom; | ||
+ | background-origin: border-box; | ||
+ | background-size: 100%; | ||
+ | background-repeat: no-repeat; | ||
+ | background-image: url(https://static.igem.org/mediawiki/2020/e/e7/T--Vilnius-Lithuania--milkTeam.svg); | ||
+ | } | ||
+ | |||
+ | .yellow { | ||
+ | color: #fcbd1b; | ||
+ | } | ||
+ | |||
+ | #bact { | ||
+ | flex-direction: column; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | #bact .row { | ||
+ | display: inherit; | ||
+ | |||
+ | } | ||
+ | |||
+ | .white-bg .wdt-60 { | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | #fish-symptoms { | ||
+ | align-items: inherit !important; | ||
+ | } | ||
+ | |||
+ | #fish-symptoms .icon { | ||
+ | margin: 0 auto | ||
+ | } | ||
+ | |||
+ | #fish-symptoms p { | ||
+ | margin-top: 50px | ||
+ | } | ||
+ | |||
+ | #fish-symptoms p:first-child { | ||
+ | margin-top: 0px | ||
+ | } | ||
+ | |||
+ | .title { | ||
+ | text-transform: uppercase | ||
+ | } | ||
+ | |||
+ | #links .nf { | ||
+ | display: inherit | ||
+ | } | ||
+ | |||
+ | #links .title { | ||
+ | font-size: 2.5em; | ||
+ | } | ||
+ | |||
+ | #links .row { | ||
+ | display: flex; | ||
+ | justify-content: center; | ||
+ | } | ||
+ | |||
+ | #links .row .icon { | ||
+ | width: 200px; | ||
+ | height: 200px; | ||
+ | margin: 20px | ||
} | } | ||
Line 133: | Line 404: | ||
font-size: 4em; | font-size: 4em; | ||
} | } | ||
+ | |||
#intro-page #intro #title::after { | #intro-page #intro #title::after { | ||
font-size: 4em; | font-size: 4em; | ||
transform: translate(-53%, -130%); | transform: translate(-53%, -130%); | ||
} | } | ||
+ | |||
.content-header { | .content-header { | ||
padding-top: 50px | padding-top: 50px | ||
} | } | ||
+ | |||
.content-index h1 { | .content-index h1 { | ||
font-size: 3.3em; | font-size: 3.3em; | ||
} | } | ||
} | } |
Revision as of 19:07, 2 October 2020
body, html { margin: 0; padding: 0; color: #121212; font-family: 'lato-regular'; }
.container { width: 100%; height: calc(100vh - 14px) }
- waves {
transform: rotate(180deg); background-color: #fafafc }
- intro-page {
background-color: #121212; }
- intro-header {
height: 100vh }
- intro-header svg {
height: 90%; }
- intro-page #intro-header {
width: 100%; margin: 0 auto; position: absolute; z-index: 4; pointer-events: none }
- intro-page #intro {
z-index: 4; height: calc(100vh - 14px); width: 100%; top: 0; position: absolute; pointer-events: none }
- text-wrapper {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, 20%); width: 100%; z-index: 4; pointer-events: none }
- desc-wrapper {
padding-top: 30px; display: block; width: fit-content; margin: 0 auto; }
- center-desc {
display: flex; justify-content: center; width: -webkit-fit-content; }
- desc-wrapper span {
color: white; font-family: "lato-regular"; font-size: 3em; text-align: right; }
.container h1 { text-transform: uppercase; font-size: 70px; font-family: "lato-heavy"; text-align: center; margin: 0; }
- intro-page #intro h1 {
color: #FAFAFC; font-size: 12em; font-family: 'raleway'; text-transform: lowercase; font-weight: 600; }
- intro-page #intro #lower {
color: transparent; stroke-color: rgba(255, 255, 255, 0.4); transform: translate(-0.3em, -0.8em); }
- bubbles-container {
height: 100%; position: absolute; width: 100%; box-sizing: border-box; }
- problem-page,
- links-page {
background-color: #FAFAFC; }
- problem-page #problem-header h1,
- links-page #links-header h1 {
color: #6281EF }
- solution-page {
background-color: #121212; }
- solution-page #solution-header h1 {
color: #FFC43B }
.big-section { line-height: 1.7 }
.black-bg { background-color: #121212;
}
.white-bg { background-color: #fafafc; display: flex; justify-content: center; align-items: center; flex-direction: column;
}
.lightblue-bg { background-color: #6281ef; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.brightblue-bg { background-color: #3356ce; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.darkblue-bg { background-color: #11348f; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.section { display: flex; padding: 20px; }
/*
.textBox p {
color: #fafafc;
margin: 0;
}
- logoText {
display: flex; flex-direction: column; justify-content: space-between; }
- logoAnimation {
height: 300px; position: sticky; top: 40vh; }
- /
.half { width: 50%; padding: 20px; box-sizing: border-box; }
- firstpart {
height: 60vh; text-align: center; }
- storytelling .centered {
display: flex; justify-content: center; align-items: center; }
- fish-icon {
border-radius: 50px; text-align: center; }
p { font-family: 'montserrat-light';
}
p b, h2, h1 { font-family: 'montserrat-bold'; }
.black { color: #121212;
}
.white { color: #fafafc; }
- secondpart {
height: fit-content; display: flex; flex-direction: column; text-align: center; }
- secondpart .icon {
max-width: 500px; width: 60% }
.wdt-60 { max-width: 400px; width: 60%; }
.wd-60 { max-width: 700px; width: 60%; }
.wd-50 { max-width: 500px; width: 50%; }
.wdt-80 { width: 80%; margin: 0 auto; }
.icon { padding: 20px; box-sizing: border-box; height: 300px; width: 300px; border-radius: 50px; }
.icon.white { background-color: #fafafc; color: #121212; }
.icon.dark { background-color: rgba(255, 255, 255, 0.1); color: #fafafc; }
h1 { color: #fafafc; }
- thirdpart,
- fourthpart,
- seventhpart {
width: 80%; margin: 0 auto; }
- fifthpart {
text-align: center; }
- fifthpart .list {
width: 70%; margin: 0 auto }
- fifthpart .list .list-item {
height: 60px; padding: 10px; display: flex; align-items: center; }
- fifthpart .list .list-item div {
width: 60px; height: 60px; background-color: rgba(255, 255, 255, 0.1); border-radius: 40px; }
- fifthpart .list .list-item p {
width: calc(100% - 60px); float: right; margin: 0; padding: 5px; color: #fafafc; }
- sixthpart {
flex-direction: column; }
.milkWave { z-index: 2; width: 100%; top: 0; position: absolute; content: ""; pointer-events: none; background-position: bottom; background-origin: border-box; background-size: 100%; background-repeat: no-repeat; background-image: url(https://static.igem.org/mediawiki/2020/e/e7/T--Vilnius-Lithuania--milkTeam.svg); }
.yellow { color: #fcbd1b; }
- bact {
flex-direction: column; text-align: center; }
- bact .row {
display: inherit;
}
.white-bg .wdt-60 { text-align: center; }
- fish-symptoms {
align-items: inherit !important; }
- fish-symptoms .icon {
margin: 0 auto }
- fish-symptoms p {
margin-top: 50px }
- fish-symptoms p:first-child {
margin-top: 0px }
.title { text-transform: uppercase }
- links .nf {
display: inherit }
- links .title {
font-size: 2.5em; }
- links .row {
display: flex; justify-content: center; }
- links .row .icon {
width: 200px; height: 200px; margin: 20px }
@media (max-width:768px) { #intro-page #intro h1 { font-size: 4em; }
#intro-page #intro #title::after { font-size: 4em; transform: translate(-53%, -130%); }
.content-header { padding-top: 50px }
.content-index h1 { font-size: 3.3em; } }