Line 168: | Line 168: | ||
display: flex; | display: flex; | ||
padding: 20px; | padding: 20px; | ||
− | max-width: calc(100% - 330px); | + | max-width: calc(100% - 330px); |
− | + | margin: 0 auto; | |
} | } | ||
Line 351: | Line 351: | ||
z-index: 2; | z-index: 2; | ||
width: 100%; | width: 100%; | ||
− | top: | + | top: 0px; |
− | position: | + | position: relative; |
content: ""; | content: ""; | ||
pointer-events: none; | pointer-events: none; | ||
Line 360: | Line 360: | ||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
background-image: url(https://static.igem.org/mediawiki/2020/e/e7/T--Vilnius-Lithuania--milkTeam.svg); | background-image: url(https://static.igem.org/mediawiki/2020/e/e7/T--Vilnius-Lithuania--milkTeam.svg); | ||
+ | } | ||
+ | |||
+ | .milkWave.rotate-wave { | ||
+ | transform: rotate(180deg) | ||
} | } | ||
Line 370: | Line 374: | ||
text-align: center !important; | text-align: center !important; | ||
} | } | ||
+ | |||
+ | #storytelling #bact .half { | ||
+ | display: flex; | ||
+ | flex-direction: column; | ||
+ | align-items: center; | ||
+ | } | ||
+ | |||
#bact .row { | #bact .row { | ||
Line 417: | Line 428: | ||
height: 200px; | height: 200px; | ||
margin: 20px | margin: 20px | ||
+ | } | ||
+ | |||
+ | .half p { | ||
+ | width: 70% | ||
} | } | ||
Line 457: | Line 472: | ||
#storytelling p, | #storytelling p, | ||
− | + | #storytelling h1, | |
− | + | #storytelling h2, | |
− | + | #storytelling h3 { | |
text-align: center !important; | text-align: center !important; | ||
} | } | ||
Line 471: | Line 486: | ||
width: 80% | width: 80% | ||
} | } | ||
− | + | ||
− | max-width: calc(100% - 50px); | + | #storytelling .section { |
− | } | + | max-width: calc(100% - 50px); |
+ | } | ||
} | } |
Revision as of 16:15, 4 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; max-width: calc(100% - 330px); margin: 0 auto;
}
- 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'; font-size: 1.3em; text-align: initial; }
- 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: 80%; 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: 0px; position: relative; 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); }
.milkWave.rotate-wave { transform: rotate(180deg) }
.yellow { color: #fcbd1b; }
- storytelling #bact {
flex-direction: column; text-align: center !important; }
- storytelling #bact .half {
display: flex; flex-direction: column; align-items: center; }
- 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 }
.half p { width: 70% }
@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; }
#storytelling p, #storytelling h1, #storytelling h2, #storytelling h3 { text-align: center !important; }
#storytelling p { font-size: 0.8em }
.wd-50, .wdt-60 { width: 80% }
#storytelling .section { max-width: calc(100% - 50px); } }