(12 intermediate revisions by the same user not shown) | |||
Line 19: | Line 19: | ||
#intro-page { | #intro-page { | ||
background-color: #121212; | background-color: #121212; | ||
+ | top: 6px; | ||
+ | position: relative; | ||
} | } | ||
Line 43: | Line 45: | ||
top: 0; | top: 0; | ||
position: absolute; | position: absolute; | ||
− | pointer-events: none | + | pointer-events: none; |
− | + | display: flex; | |
− | + | flex-direction: column; | |
− | + | align-items: center; | |
− | + | justify-content: space-between; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | # | + | #intro-page #intro #title-wrapper { |
+ | height: 65vh; | ||
display: flex; | display: flex; | ||
− | + | align-items: center; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
#intro-page #intro h1 { | #intro-page #intro h1 { | ||
− | color: | + | color: rgb(103, 155, 244); |
− | font-size: | + | font-size: 11vw; |
− | font-family: 'raleway'; | + | font-family: 'raleway', sans-serif; |
text-transform: lowercase; | text-transform: lowercase; | ||
font-weight: 600; | font-weight: 600; | ||
+ | text-align: center; | ||
+ | margin: 0; | ||
+ | z-index: 5; | ||
+ | text-shadow: 0px 0px 4px #fafafc; | ||
} | } | ||
Line 95: | Line 73: | ||
font-style: initial; | font-style: initial; | ||
font-weight: 300; | font-weight: 300; | ||
+ | } | ||
+ | |||
+ | #intro-page #intro #desc-wrapper { | ||
+ | height: 20vh; | ||
+ | display: flex; | ||
+ | align-items: center; | ||
+ | } | ||
+ | |||
+ | #intro-page #intro #desc-wrapper img { | ||
+ | width: 700px; | ||
+ | max-width: 85vw; | ||
} | } | ||
Line 223: | Line 212: | ||
padding-bottom: 40px; | padding-bottom: 40px; | ||
font-family: 'montserrat-light', sans-serif; | font-family: 'montserrat-light', sans-serif; | ||
+ | font-size: 3vw; | ||
} | } | ||
Line 234: | Line 224: | ||
#storytelling .white-bg h1 { | #storytelling .white-bg h1 { | ||
− | font-size: | + | font-size: 7vw; |
margin-block-end: 0; | margin-block-end: 0; | ||
} | } | ||
Line 358: | Line 348: | ||
font-size: 1.5em; | font-size: 1.5em; | ||
align-self: baseline; | align-self: baseline; | ||
− | width: 40vh; | + | max-width: 40vh; |
margin: 0 auto; | margin: 0 auto; | ||
} | } | ||
Line 364: | Line 354: | ||
#storytelling #statistics h1 { | #storytelling #statistics h1 { | ||
color: #6281ef; | color: #6281ef; | ||
− | font-size: | + | font-size: 8vw; |
font-family: 'montserrat-black', sans-serif; | font-family: 'montserrat-black', sans-serif; | ||
margin-block-end: 0em; | margin-block-end: 0em; | ||
margin-block-start: 0em; | margin-block-start: 0em; | ||
line-height: 1.1; | line-height: 1.1; | ||
− | |||
} | } | ||
Line 384: | Line 373: | ||
#fifthpart .list { | #fifthpart .list { | ||
− | width: 40vh; | + | max-width: 40vh; |
margin: 0 auto | margin: 0 auto | ||
} | } | ||
Line 396: | Line 385: | ||
#fifthpart .list .list-item div { | #fifthpart .list .list-item div { | ||
− | width: | + | width: 6vw; |
+ | height: 6vw; | ||
} | } | ||
#fifthpart .list .list-item div img { | #fifthpart .list .list-item div img { | ||
− | width: | + | width: 6vw; |
height: auto; | height: auto; | ||
padding: 5px; | padding: 5px; | ||
+ | box-sizing: border-box; | ||
} | } | ||
#fifthpart .list .list-item p { | #fifthpart .list .list-item p { | ||
− | width: calc( | + | width: calc(100% - 7vw); |
float: right; | float: right; | ||
margin: 0 auto; | margin: 0 auto; | ||
Line 436: | Line 427: | ||
.milkWave.rotate-wave { | .milkWave.rotate-wave { | ||
transform: rotate(180deg); | transform: rotate(180deg); | ||
− | + | top: -4px; | |
} | } | ||
Line 580: | Line 571: | ||
.animation#bacHorizontal svg { | .animation#bacHorizontal svg { | ||
− | width: | + | width: 95vw !important; |
} | } | ||
Line 672: | Line 663: | ||
@media (max-width:768px) { | @media (max-width:768px) { | ||
#intro-page #intro h1 { | #intro-page #intro h1 { | ||
− | font-size: | + | font-size: 20vw; |
+ | } | ||
+ | #intro-header svg { | ||
+ | height: 100vh; | ||
+ | } | ||
+ | #intro-page #intro #title-wrapper { | ||
+ | height: 85vh; | ||
} | } | ||
#links .row object { | #links .row object { | ||
Line 787: | Line 784: | ||
} | } | ||
} | } | ||
+ | |||
+ | .awards-container img { | ||
+ | position: absolute; | ||
+ | top: 50px; | ||
+ | left: 50px; | ||
+ | height: 200px; | ||
+ | z-index: 2; | ||
+ | } | ||
+ | |||
+ | @media screen and (max-width: 767px) { | ||
+ | .awards-container img { | ||
+ | position: absolute; | ||
+ | top: 10px; | ||
+ | left: 10px; | ||
+ | height: initial; | ||
+ | max-width: 120px; | ||
+ | width: 40vw; | ||
+ | z-index: 2; | ||
+ | } | ||
+ | } |
Latest revision as of 23:23, 18 December 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; top: 6px; position: relative; } #intro-header { height: 100vh } #intro-header svg { height: 85%; } #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; display: flex; flex-direction: column; align-items: center; justify-content: space-between; } #intro-page #intro #title-wrapper { height: 65vh; display: flex; align-items: center; } #intro-page #intro h1 { color: rgb(103, 155, 244); font-size: 11vw; font-family: 'raleway', sans-serif; text-transform: lowercase; font-weight: 600; text-align: center; margin: 0; z-index: 5; text-shadow: 0px 0px 4px #fafafc; } #intro-page #intro h1 em { font-style: initial; font-weight: 300; } #intro-page #intro #desc-wrapper { height: 20vh; display: flex; align-items: center; } #intro-page #intro #desc-wrapper img { width: 700px; max-width: 85vw; } #bubbles-container { height: 100vh; position: absolute; width: 100%; box-sizing: border-box; } .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; } .lightblue-bg b em { font-style: normal; font-family: 'montserrat-bold', sans-serif; } .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: 50px 0; } #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.9em; text-align: center; padding: 20px 0; } #storytelling .lightblue-bg p, #storytelling .brightblue-bg p, #storytelling .darkblue-bg p { text-align: left; } #storytelling p b, #storytelling h2, #storytelling h1 { font-family: 'montserrat-bold'; } #storytelling h2, #storytelling h1 { text-align: center; font-size: 2.5em; } #storytelling #fourthpart p { padding-bottom: 100px; } #storytelling #fifthpart h2 { width: fit-content; margin: 0 auto; padding-bottom: 40px; font-family: 'montserrat-light', sans-serif; font-size: 3vw; } #storytelling #fifthpart h2 b { font-family: 'montserrat-bold', sans-serif; } #storytelling h1 { font-size: 2.7em; } #storytelling .white-bg h1 { font-size: 7vw; margin-block-end: 0; } #storytelling #threebacsec .white-bg h1 { font-family: 'montserrat-light', sans-serif; font-size: 5em; } #storytelling .white-bg .bact { font-style: italic; } #storytelling .white-bg .cause { height: 100px; } #storytelling #sixthpart h1 { font-size: 6em; text-align: left; width: 65vw; padding: 0 0 50px 0; font-family: 'montserrat-light', sans-serif; margin-block-start: 0; } #storytelling #sixthpart { padding-bottom: 0; } #storytelling #seventhpart { padding-top: 0; } #storytelling #seventhpart p { padding-top: 0; margin-top: 0; } #storytelling #sixthpart h1 b { font-family: 'montserrat-bold', sans-serif; } #storytelling #threebacsec .black-bg h1 { font-family: 'montserrat-light', sans-serif; font-size: 4em; line-height: 1.2; } #storytelling #threebacsec .black-bg h1 b { font-family: 'montserrat-black', sans-serif; } .black { color: #121212; } .white { color: #fafafc; } #storytelling #secondpart, #storytelling #fourthpart, #storytelling #seventhpart, #storytelling #fish-symptoms { height: fit-content; display: flex; flex-direction: column; text-align: center !important; } #secondpart .icon { max-width: 500px; width: 60% } .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; } #storytelling #firstpart { display: block; } #storytelling #firstpart .centered { margin: 0 auto; } #storytelling #statistics { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); grid-column-gap: 0px; grid-row-gap: 0px; align-items: end; padding-top: 0px; padding-bottom: 100px; } #storytelling #statistics p { text-align: center; margin: 0 10px; font-size: 1.5em; align-self: baseline; max-width: 40vh; margin: 0 auto; } #storytelling #statistics h1 { color: #6281ef; font-size: 8vw; font-family: 'montserrat-black', sans-serif; margin-block-end: 0em; margin-block-start: 0em; line-height: 1.1; } #thirdpart, #fourthpart, #seventhpart { width: 80%; margin: 0 auto; } #storytelling #fifthpart { text-align: center !important; } #fifthpart .list { max-width: 40vh; margin: 0 auto } #fifthpart .list .list-item { height: fit-content; padding: 10px; display: flex; align-items: center; } #fifthpart .list .list-item div { width: 6vw; height: 6vw; } #fifthpart .list .list-item div img { width: 6vw; height: auto; padding: 5px; box-sizing: border-box; } #fifthpart .list .list-item p { width: calc(100% - 7vw); float: right; margin: 0 auto; padding: 5px; color: #fafafc; font-size: 1.6em; align-self: center; } #sixthpart { flex-direction: column; } .milkWave { z-index: 2; width: 100%; top: 4px; 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); top: -4px; } .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; } #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; padding-bottom: 10vh; transform: translateY(-100px); } #links .title { font-size: 2.5em; } #links .row { display: flex; justify-content: center; } #links .row object { height: 150px; padding: 40px 40px 0 40px; cursor: pointer; } #links .row .link h1 { text-transform: uppercase; line-height: 1; margin-block-end: 0; margin-block-start: 0; margin-top: -25px; font-family: 'montserrat-black', sans-serif; } .half p { width: 90% } #fixedOverlay nav #header #logo[visible=true] { opacity: 0; } #links { padding-bottom: 30px; } #links .section { padding: 0px; } b.emphasize { font-size: 1.5em; } .animation svg { width: 40vw !important; height: fit-content !important; } .animation#dive svg { width: 50vw !important; height: 30vh !important; } .animation#infection svg { width: 70vw !important; height: 70vh !important; } #sick-fish.animation svg { height: 30vh !important; } #sick-fish { padding: 50px 0; } .animation#ras-sick svg, .animation#ras-healthy svg { width: 35vw !important; height: 40vh !important; } .animation#ras-sick svg { width: 50vw !important; } .animation#fish-doodle svg { width: 53vw !important; height: 50vh !important; } .animation#threeBac svg { width: 30vw !important; height: 27vh !important; } .animation#bacHorizontal svg { width: 95vw !important; } .white-bg.smallWaves { background-color: transparent; margin-top: -150px; } #storytelling .wdt-60 { max-width: 500px; width: 40vw; } #storytelling .wd-60 { max-width: 700px; width: 40vw; } #storytelling .wd-50 { max-width: 800px; width: 50vw; } #storytelling .wdt-80 { width: 80vw; margin: 0 auto; } .animation#threeBac { display: flex; justify-content: center; } #storytelling #threebacsec .milkWave:last-of-type { top: 3px; } #storytelling #die-offs { flex-direction: column; padding-bottom: 0; } #storytelling #die-offs .wd-60 { padding-bottom: 50px; } #storytelling #die-offs img { width: 40vw; max-width: 400px; } @media screen and (max-width: 767px) { .animation svg { width: 80vw !important; } .animation#infection svg { width: 70vw !important; height: 44vh !important; } .animation#ras-sick svg, .animation#ras-healthy svg { width: 70vw !important; height: 22vh !important; } .animation#fish-doodle svg { width: 70vw !important; height: 22vh !important; } .white-bg.smallWaves { background-color: transparent; margin-top: -150px; } .animation#dive svg { width: 65vw !important; height: 23vh !important; } .animation#sick-fish svg { width: 70vw !important; height: 16vh !important; } .animation#threeBac svg { width: 59vw !important; height: 18vh !important; } #storytelling .black-bg:first-of-type .section { padding-top: 30px; padding-bottom: 10px; } } @media (max-width:768px) { #intro-page #intro h1 { font-size: 20vw; } #intro-header svg { height: 100vh; } #intro-page #intro #title-wrapper { height: 85vh; } #links .row object { height: 20vw; padding: 10px 10px 0 10px; } #links .row .link h1 { font-size: 0.8em; margin-top: -12px; } #intro-page #intro #title::after { font-size: 4em; transform: translate(-53%, -130%); } .content-header { padding-top: 50px } .content-index h1 { font-size: 3.3em; } #storytelling .white-bg .bact { font-size: 1em; } #storytelling .white-bg .cause { height: 65px; } #storytelling #fifthpart .half { width: 100%; } #storytelling #fifthpart .half h2 { font-size: 1.8em; } #fifthpart .list .list-item div { width: 60px; } #fifthpart .list .list-item div img { width: 55px; } #fifthpart .list .list-item p { font-size: 1em; width: calc(90% - 60px); } #storytelling #sixthpart h1 { font-size: 2.4em; text-align: left !important; padding: 50px 0 100px 0; } .half p { width: initial } .two-parts { flex-direction: column; } .white-bg .row { width: 90%; } #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: 1em } #storytelling .wd-50, #storytelling .wd-60, #storytelling .wdt-60 { width: 80% } #storytelling .section { max-width: calc(100% - 50px); } #fishIcon { position: initial; top: initial; } #storytelling #statistics { grid-template-columns: repeat(1, 1fr); grid-template-rows: repeat(4, 1fr); } #storytelling #statistics h1 { font-size: 4em; } #storytelling #statistics p { font-size: 1em; } #statistics *:nth-of-type(1) { order: 1; } #statistics *:nth-of-type(2) { order: 3; } #statistics *:nth-of-type(3) { order: 2; } #statistics *:nth-of-type(4) { order: 4; } #storytelling #threebacsec .white-bg h1 { font-size: 3em; } #storytelling #threebacsec .black-bg h1 { font-size: 2.5em; } }
.awards-container img { position: absolute; top: 50px; left: 50px; height: 200px; z-index: 2; } @media screen and (max-width: 767px) { .awards-container img { position: absolute; top: 10px; left: 10px; height: initial; max-width: 120px; width: 40vw; z-index: 2; } }