Line 1: | Line 1: | ||
body, | body, | ||
html { | html { | ||
− | + | margin: 0; | |
− | + | padding: 0; | |
− | + | color: #121212; | |
− | + | font-family: 'lato-regular'; | |
} | } | ||
.container { | .container { | ||
− | + | width: 100%; | |
− | + | height: calc(100vh - 14px) | |
} | } | ||
#waves { | #waves { | ||
− | + | transform: rotate(180deg); | |
− | + | background-color: #fafafc | |
} | } | ||
#intro-page { | #intro-page { | ||
− | + | background-color: #121212; | |
} | } | ||
#intro-header { | #intro-header { | ||
− | + | height: 100vh | |
} | } | ||
#intro-header svg { | #intro-header svg { | ||
− | + | height: 90%; | |
} | } | ||
#intro-page #intro-header { | #intro-page #intro-header { | ||
− | + | width: 100%; | |
− | + | margin: 0 auto; | |
− | + | position: absolute; | |
− | + | z-index: 4; | |
− | + | pointer-events: none | |
} | } | ||
#intro-page #intro { | #intro-page #intro { | ||
− | + | z-index: 4; | |
− | + | height: calc(100vh - 14px); | |
− | + | width: 100%; | |
− | + | top: 0; | |
− | + | position: absolute; | |
− | + | pointer-events: none | |
} | } | ||
#text-wrapper { | #text-wrapper { | ||
− | + | position: absolute; | |
− | + | top: 50%; | |
− | + | left: 50%; | |
− | + | transform: translate(-50%, 20%); | |
− | + | width: 100%; | |
− | + | z-index: 4; | |
− | + | pointer-events: none | |
} | } | ||
#desc-wrapper { | #desc-wrapper { | ||
− | + | padding-top: 30px; | |
− | + | display: block; | |
− | + | width: fit-content; | |
− | + | margin: 0 auto; | |
} | } | ||
#center-desc { | #center-desc { | ||
− | + | display: flex; | |
− | + | justify-content: center; | |
− | + | width: -webkit-fit-content; | |
} | } | ||
#desc-wrapper span { | #desc-wrapper span { | ||
− | + | color: white; | |
− | + | font-family: "lato-regular"; | |
− | + | font-size: 3em; | |
− | + | text-align: right; | |
} | } | ||
.container h1 { | .container h1 { | ||
− | + | text-transform: uppercase; | |
− | + | font-size: 70px; | |
− | + | font-family: "lato-heavy"; | |
− | + | text-align: center; | |
− | + | margin: 0; | |
} | } | ||
#intro-page #intro h1 { | #intro-page #intro h1 { | ||
− | + | color: #FAFAFC; | |
− | + | font-size: 12em; | |
− | + | font-family: 'raleway'; | |
− | + | text-transform: lowercase; | |
− | + | font-weight: 600; | |
} | } | ||
+ | |||
#intro-page #intro h1 em { | #intro-page #intro h1 em { | ||
font-style: initial; | font-style: initial; | ||
font-weight: 300; | font-weight: 300; | ||
} | } | ||
− | |||
#bubbles-container { | #bubbles-container { | ||
− | + | height: 100vh; | |
− | + | position: absolute; | |
− | + | width: 100%; | |
− | + | box-sizing: border-box; | |
} | } | ||
#problem-page, | #problem-page, | ||
#links-page { | #links-page { | ||
− | + | background-color: #FAFAFC; | |
} | } | ||
#problem-page #problem-header h1, | #problem-page #problem-header h1, | ||
#links-page #links-header h1 { | #links-page #links-header h1 { | ||
− | + | color: #6281EF | |
} | } | ||
#solution-page { | #solution-page { | ||
− | + | background-color: #121212; | |
} | } | ||
#solution-page #solution-header h1 { | #solution-page #solution-header h1 { | ||
− | + | color: #FFC43B | |
} | } | ||
.big-section { | .big-section { | ||
− | + | line-height: 1.7 | |
} | } | ||
.black-bg { | .black-bg { | ||
− | + | background-color: #121212; | |
− | + | ||
} | } | ||
.white-bg { | .white-bg { | ||
− | + | background-color: #fafafc; | |
− | + | display: flex; | |
− | + | justify-content: center; | |
− | + | align-items: center; | |
− | + | flex-direction: column; | |
} | } | ||
+ | |||
.smallWaves { | .smallWaves { | ||
position: relative; | position: relative; | ||
Line 144: | Line 144: | ||
.lightblue-bg { | .lightblue-bg { | ||
− | + | background-color: #6281ef; | |
− | + | display: flex; | |
− | + | justify-content: center; | |
− | + | align-items: center; | |
− | + | flex-direction: column; | |
} | } | ||
.brightblue-bg { | .brightblue-bg { | ||
− | + | background-color: #3356ce; | |
− | + | display: flex; | |
− | + | justify-content: center; | |
− | + | align-items: center; | |
− | + | flex-direction: column; | |
} | } | ||
.darkblue-bg { | .darkblue-bg { | ||
− | + | background-color: #11348f; | |
− | + | display: flex; | |
− | + | justify-content: center; | |
− | + | align-items: center; | |
− | + | flex-direction: column; | |
} | } | ||
#storytelling .section { | #storytelling .section { | ||
− | + | display: flex; | |
− | + | padding: 20px; | |
− | + | max-width: calc(100% - 330px); | |
− | + | margin: 0 auto; | |
− | + | ||
} | } | ||
#storytelling .black-bg:first-of-type .section { | #storytelling .black-bg:first-of-type .section { | ||
− | + | padding-bottom: 50px; | |
− | + | padding-top: 100px; | |
} | } | ||
#storytelling p br { | #storytelling p br { | ||
− | + | display: initial; | |
} | } | ||
.half { | .half { | ||
− | + | width: 50%; | |
− | + | padding: 20px; | |
− | + | box-sizing: border-box; | |
} | } | ||
#storytelling p.center { | #storytelling p.center { | ||
− | + | text-align: center !important; | |
} | } | ||
#storytelling .centered { | #storytelling .centered { | ||
− | + | display: flex; | |
− | + | justify-content: center; | |
− | + | align-items: center; | |
} | } | ||
− | #storytelling #fish-icon { | + | #storytelling #fish-icon svg { |
− | + | height: 300px !important; | |
− | + | ||
} | } | ||
#storytelling p { | #storytelling p { | ||
− | + | font-family: 'montserrat-light'; | |
− | + | font-size: 1.3em; | |
− | + | text-align: initial; | |
} | } | ||
Line 214: | Line 212: | ||
#storytelling h2, | #storytelling h2, | ||
#storytelling h1 { | #storytelling h1 { | ||
− | + | font-family: 'montserrat-bold'; | |
} | } | ||
#storytelling h2, | #storytelling h2, | ||
#storytelling h1 { | #storytelling h1 { | ||
− | + | text-align: center; | |
} | } | ||
.black { | .black { | ||
− | + | color: #121212; | |
− | + | ||
} | } | ||
.white { | .white { | ||
− | + | color: #fafafc; | |
} | } | ||
− | |||
#storytelling #secondpart { | #storytelling #secondpart { | ||
− | + | height: fit-content; | |
− | + | display: flex; | |
− | + | flex-direction: column; | |
− | + | text-align: center !important; | |
} | } | ||
#secondpart .icon { | #secondpart .icon { | ||
− | + | max-width: 500px; | |
− | + | width: 60% | |
} | } | ||
.wdt-60 { | .wdt-60 { | ||
− | + | max-width: 400px; | |
− | + | width: 60%; | |
} | } | ||
.wd-60 { | .wd-60 { | ||
− | + | max-width: 700px; | |
− | + | width: 60%; | |
} | } | ||
.wd-50 { | .wd-50 { | ||
− | + | max-width: 500px; | |
− | + | width: 50%; | |
} | } | ||
.wdt-80 { | .wdt-80 { | ||
− | + | width: 80%; | |
− | + | margin: 0 auto; | |
} | } | ||
.icon { | .icon { | ||
− | + | padding: 20px; | |
− | + | box-sizing: border-box; | |
− | + | height: 300px; | |
− | + | width: 300px; | |
− | + | border-radius: 50px; | |
− | + | margin: 0 auto; | |
− | + | max-width: 100%; | |
} | } | ||
.icon.white { | .icon.white { | ||
− | + | background-color: #fafafc; | |
− | + | color: #121212; | |
} | } | ||
.icon.dark { | .icon.dark { | ||
− | + | background-color: rgba(255, 255, 255, 0.1); | |
− | + | color: #fafafc; | |
} | } | ||
+ | |||
#fishIcon { | #fishIcon { | ||
position: sticky; | position: sticky; | ||
Line 289: | Line 286: | ||
h1 { | h1 { | ||
− | + | color: #fafafc; | |
+ | } | ||
+ | |||
+ | #storytelling #firstpart { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | #storytelling #firstpart .centered { | ||
+ | margin: 0 auto; | ||
+ | } | ||
+ | |||
+ | #storytelling #statistics { | ||
+ | padding: 20px; | ||
+ | } | ||
+ | |||
+ | #storytelling #statistics p { | ||
+ | text-align: center; | ||
+ | margin: 0 auto; | ||
+ | } | ||
+ | |||
+ | #storytelling #statistics h1 { | ||
+ | color: #6281ef; | ||
+ | font-size: 5em; | ||
+ | font-family: 'montserrat-black', sans-serif; | ||
+ | margin-block-end: 0em; | ||
+ | margin-block-start: 0em; | ||
+ | line-height: 1.1; | ||
+ | opacity: 81%; | ||
} | } | ||
Line 295: | Line 319: | ||
#fourthpart, | #fourthpart, | ||
#seventhpart { | #seventhpart { | ||
− | + | width: 80%; | |
− | + | margin: 0 auto; | |
} | } | ||
#storytelling #fifthpart { | #storytelling #fifthpart { | ||
− | + | text-align: center !important; | |
} | } | ||
#fifthpart .list { | #fifthpart .list { | ||
− | + | width: 80%; | |
− | + | margin: 0 auto | |
} | } | ||
#fifthpart .list .list-item { | #fifthpart .list .list-item { | ||
− | + | height: 60px; | |
− | + | padding: 10px; | |
− | + | display: flex; | |
− | + | align-items: center; | |
} | } | ||
#fifthpart .list .list-item div { | #fifthpart .list .list-item div { | ||
− | + | width: 60px; | |
− | + | } | |
− | + | ||
− | + | #fifthpart .list .list-item div img { | |
+ | width: 50px; | ||
+ | height: 50px; | ||
+ | padding: 5px; | ||
} | } | ||
#fifthpart .list .list-item p { | #fifthpart .list .list-item p { | ||
− | + | width: calc(100% - 60px); | |
− | + | float: right; | |
− | + | margin: 0; | |
− | + | padding: 5px; | |
− | + | color: #fafafc; | |
} | } | ||
#sixthpart { | #sixthpart { | ||
− | + | flex-direction: column; | |
} | } | ||
.milkWave { | .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); | |
− | + | height: 150px | |
} | } | ||
.milkWave.rotate-wave { | .milkWave.rotate-wave { | ||
− | + | transform: rotate(180deg) | |
} | } | ||
.milkWave svg { | .milkWave svg { | ||
− | + | height: 150px; | |
} | } | ||
+ | |||
.milkWave.small { | .milkWave.small { | ||
position: absolute; | position: absolute; | ||
Line 361: | Line 389: | ||
.yellow { | .yellow { | ||
− | + | color: #fcbd1b; | |
} | } | ||
#storytelling #bact { | #storytelling #bact { | ||
− | + | flex-direction: column; | |
− | + | text-align: center !important; | |
} | } | ||
#storytelling #bact .half { | #storytelling #bact .half { | ||
− | + | display: flex; | |
− | + | flex-direction: column; | |
− | + | align-items: center; | |
} | } | ||
− | |||
#bact .row { | #bact .row { | ||
− | + | display: inherit; | |
− | + | ||
} | } | ||
.white-bg .wdt-60 { | .white-bg .wdt-60 { | ||
− | + | text-align: center; | |
} | } | ||
#storytelling #fish-symptoms { | #storytelling #fish-symptoms { | ||
− | + | align-items: inherit !important; | |
} | } | ||
#fish-symptoms .icon { | #fish-symptoms .icon { | ||
− | + | margin: 0 auto | |
} | } | ||
#fish-symptoms p { | #fish-symptoms p { | ||
− | + | margin-top: 50px | |
} | } | ||
#fish-symptoms p:first-child { | #fish-symptoms p:first-child { | ||
− | + | margin-top: 0px | |
} | } | ||
.title { | .title { | ||
− | + | text-transform: uppercase | |
} | } | ||
#links .nf { | #links .nf { | ||
− | + | display: inherit | |
} | } | ||
#links .title { | #links .title { | ||
− | + | font-size: 2.5em; | |
} | } | ||
#links .row { | #links .row { | ||
− | + | display: flex; | |
− | + | justify-content: center; | |
} | } | ||
#links .row .icon { | #links .row .icon { | ||
− | + | width: 200px; | |
− | + | height: 200px; | |
− | + | margin: 20px | |
} | } | ||
.half p { | .half p { | ||
− | + | width: 70% | |
} | } | ||
@media (max-width:768px) { | @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%; | |
− | + | } | |
− | + | .half p { | |
− | + | width: initial | |
− | + | } | |
− | + | .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); | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
#fishIcon { | #fishIcon { | ||
position: initial; | position: initial; | ||
Line 493: | Line 507: | ||
} | } | ||
} | } | ||
− | #fixedOverlay nav #header #logo[visible=true]{ | + | |
− | + | #fixedOverlay nav #header #logo[visible=true] { | |
+ | opacity: 0; | ||
} | } |
Revision as of 13:20, 10 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 h1 em {
font-style: initial; font-weight: 300;
}
- 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;
}
.smallWaves {
position: relative; height: 200px;
}
.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;
}
.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 svg {
height: 300px !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;
}
- fishIcon {
position: sticky; top: 20px;
}
h1 {
color: #fafafc;
}
- storytelling #firstpart {
display: block;
}
- storytelling #firstpart .centered {
margin: 0 auto;
}
- storytelling #statistics {
padding: 20px;
}
- storytelling #statistics p {
text-align: center; margin: 0 auto;
}
- storytelling #statistics h1 {
color: #6281ef; font-size: 5em; font-family: 'montserrat-black', sans-serif; margin-block-end: 0em; margin-block-start: 0em; line-height: 1.1; opacity: 81%;
}
- 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;
}
- fifthpart .list .list-item div img {
width: 50px; height: 50px; padding: 5px;
}
- 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); height: 150px
}
.milkWave.rotate-wave {
transform: rotate(180deg)
}
.milkWave svg {
height: 150px;
}
.milkWave.small {
position: absolute;
}
.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%; } .half p { width: initial } .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); } #fishIcon { position: initial; top: initial; }
}
- fixedOverlay nav #header #logo[visible=true] {
opacity: 0;
}