Line 138: | Line 138: | ||
align-items: center; | align-items: center; | ||
flex-direction: column; | flex-direction: column; | ||
− | + | padding: 20px | |
} | } | ||
Line 168: | Line 168: | ||
display: flex; | display: flex; | ||
padding: 20px; | padding: 20px; | ||
+ | |||
+ | } | ||
+ | |||
+ | #storytelling .black-bg:first-of-type .section { | ||
+ | padding-bottom: 50px; | ||
+ | padding-top: 100px; | ||
} | } | ||
Line 202: | Line 208: | ||
#storytelling p.center { | #storytelling p.center { | ||
text-align: center !important; | text-align: center !important; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
Line 228: | Line 229: | ||
#storytelling h1 { | #storytelling h1 { | ||
font-family: 'montserrat-bold'; | font-family: 'montserrat-bold'; | ||
+ | } | ||
+ | |||
+ | #storytelling h2, | ||
+ | #storytelling h1 { | ||
+ | text-align: center; | ||
} | } | ||
Line 278: | Line 284: | ||
width: 300px; | width: 300px; | ||
border-radius: 50px; | border-radius: 50px; | ||
+ | margin: 0 auto; | ||
+ | max-width: 100%; | ||
} | } | ||
Line 306: | Line 314: | ||
#fifthpart .list { | #fifthpart .list { | ||
− | width: | + | width: 50%; |
margin: 0 auto | margin: 0 auto | ||
} | } | ||
Line 409: | Line 417: | ||
@media (max-width:768px) { | @media (max-width:768px) { | ||
#intro-page #intro h1 { | #intro-page #intro h1 { | ||
− | font-size: | + | font-size: 4.5em; |
} | } | ||
Line 423: | Line 431: | ||
.content-index h1 { | .content-index h1 { | ||
font-size: 3.3em; | font-size: 3.3em; | ||
+ | } | ||
+ | |||
+ | .half { | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | .two-parts { | ||
+ | flex-direction: column; | ||
+ | } | ||
+ | |||
+ | #fifthpart .list { | ||
+ | width: 80% | ||
+ | } | ||
+ | |||
+ | #links .row .icon { | ||
+ | width: 100px; | ||
+ | height: 100px; | ||
+ | margin: 5px; | ||
+ | padding: 10px; | ||
} | } | ||
} | } |
Revision as of 14:18, 3 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: 100vh; 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; padding: 20px }
.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; }
- storytelling .section {
display: flex; padding: 20px;
}
- storytelling .black-bg:first-of-type .section {
padding-bottom: 50px; padding-top: 100px; }
- storytelling p br {
display: initial; }
/*
.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; }
- storytelling p.center {
text-align: center !important; }
- storytelling .centered {
display: flex; justify-content: center; align-items: center; }
- storytelling #fish-icon {
border-radius: 50px; text-align: center !important; }
- storytelling p {
font-family: 'montserrat-light'; }
- storytelling p b,
- storytelling h2,
- storytelling h1 {
font-family: 'montserrat-bold'; }
- storytelling h2,
- storytelling h1 {
text-align: center; }
.black { color: #121212;
}
.white { color: #fafafc; }
- storytelling #secondpart {
height: fit-content; display: flex; flex-direction: column; text-align: center !important; }
- 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; margin: 0 auto; max-width: 100%; }
.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; }
- storytelling #fifthpart {
text-align: center !important; }
- fifthpart .list {
width: 50%; 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; }
- storytelling #bact {
flex-direction: column; text-align: center !important; }
- bact .row {
display: inherit;
}
.white-bg .wdt-60 { text-align: center; }
- storytelling #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: 4.5em; }
#intro-page #intro #title::after { font-size: 4em; transform: translate(-53%, -130%); }
.content-header { padding-top: 50px }
.content-index h1 { font-size: 3.3em; }
.half { width: 100%; }
.two-parts { flex-direction: column; }
#fifthpart .list { width: 80% }
#links .row .icon { width: 100px; height: 100px; margin: 5px; padding: 10px; } }