m |
m |
||
(18 intermediate revisions by the same user not shown) | |||
Line 9: | Line 9: | ||
z-index: 2; | z-index: 2; | ||
position: relative; | position: relative; | ||
+ | background-image: url(https://static.igem.org/mediawiki/2020/6/65/T--Vilnius-Lithuania--backgroundWavesRepeat.png); | ||
+ | background-size: 100%; | ||
+ | background-repeat: repeat-y; | ||
} | } | ||
.introContainer::before { | .introContainer::before { | ||
Line 15: | Line 18: | ||
} | } | ||
.introContainer .bubblePhoto { | .introContainer .bubblePhoto { | ||
− | background-image: url(../ | + | background-image: url(https://static.igem.org/mediawiki/2019/f/f1/T--Vilnius-Lithuania--cover14.jpg); |
background-attachment: fixed; | background-attachment: fixed; | ||
background-position: 0px 0px; | background-position: 0px 0px; | ||
Line 41: | Line 44: | ||
font-family: "montserrat-black"; | font-family: "montserrat-black"; | ||
font-size: 6.5vw; | font-size: 6.5vw; | ||
+ | line-height: 0.9; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
} | } | ||
Line 50: | Line 54: | ||
.introContainer .bubbleHeading > div.other { | .introContainer .bubbleHeading > div.other { | ||
color: transparent; | color: transparent; | ||
− | -webkit-text-stroke-width: | + | -webkit-text-stroke-width: 1.5px; |
-webkit-text-stroke-color: #6281EF; | -webkit-text-stroke-color: #6281EF; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
@media (min-aspect-ratio: 1/1) { | @media (min-aspect-ratio: 1/1) { | ||
Line 65: | Line 62: | ||
height: 64vh; | height: 64vh; | ||
} | } | ||
+ | } | ||
+ | |||
+ | .milkWave { | ||
+ | z-index: 2; | ||
+ | width: 100%; | ||
+ | top: 0; | ||
+ | height: calc(100vh - 18px); | ||
+ | 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); | ||
} | } | ||
main { | main { | ||
− | background- | + | background-image: url(https://static.igem.org/mediawiki/2020/4/4b/T--Vilnius-Lithuania--backgroundWavesWhiteFade.png), url(https://static.igem.org/mediawiki/2020/8/82/T--Vilnius-Lithuania--backgroundWavesWhite.png); |
+ | background-repeat: no-repeat, repeat-y; | ||
+ | background-size: 100%, 100%; | ||
justify-content: center; | justify-content: center; | ||
padding-top: 50px; | padding-top: 50px; | ||
+ | padding-bottom: 72px; | ||
z-index: unset; | z-index: unset; | ||
flex-direction: column; | flex-direction: column; | ||
align-items: center; | align-items: center; | ||
+ | } | ||
+ | @media (max-width: 800px) { | ||
+ | main .contentBlock { | ||
+ | width: 100%; | ||
+ | } | ||
+ | } | ||
+ | @media (max-width: 1024px) { | ||
+ | main .contentBlock { | ||
+ | margin-right: unset; | ||
+ | margin-left: 5vw; | ||
+ | } | ||
+ | } | ||
+ | @media (max-width: 800px) { | ||
+ | main .contentBlock { | ||
+ | margin-left: unset; | ||
+ | } | ||
} | } | ||
main .content { | main .content { | ||
margin-right: unset; | margin-right: unset; | ||
− | + | background-color: #FAFAFC; | |
− | + | ||
− | + | ||
} | } | ||
@media (max-width: 800px) { | @media (max-width: 800px) { | ||
Line 85: | Line 114: | ||
margin: unset; | margin: unset; | ||
border-radius: unset; | border-radius: unset; | ||
− | padding: 20px; | + | padding: 20px 10%; |
width: 100%; | width: 100%; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
Line 92: | Line 121: | ||
main div.table { | main div.table { | ||
margin-top: 32px; | margin-top: 32px; | ||
− | max-width: | + | max-width: calc(100% - 350px); |
− | + | ||
overflow: auto; | overflow: auto; | ||
} | } | ||
Line 108: | Line 136: | ||
main div.table::-webkit-scrollbar-corner { | main div.table::-webkit-scrollbar-corner { | ||
background: transparent; | background: transparent; | ||
+ | } | ||
+ | @media (max-aspect-ratio: 1/1) { | ||
+ | main div.table { | ||
+ | max-width: calc(90% - 40px); | ||
+ | } | ||
} | } | ||
main table, #HQ_page main table { | main table, #HQ_page main table { | ||
+ | background: none; | ||
border: unset; | border: unset; | ||
+ | border-bottom: 3px solid #eeeeee; | ||
margin: 0; | margin: 0; | ||
border-collapse: collapse; | border-collapse: collapse; | ||
text-align: center; | text-align: center; | ||
− | font-size: 0. | + | font-size: 0.7em; |
+ | } | ||
+ | main table tbody, #HQ_page main table tbody { | ||
+ | border-right: 3px solid #eeeeee; | ||
} | } | ||
main table .alt, #HQ_page main table .alt { | main table .alt, #HQ_page main table .alt { | ||
− | background-color: # | + | background-color: #eeeeee; |
} | } | ||
main table tr.divide, #HQ_page main table tr.divide { | main table tr.divide, #HQ_page main table tr.divide { | ||
− | border-top: 3px solid # | + | border-top: 3px solid #eeeeee; |
} | } | ||
main table td, #HQ_page main table td, main table th, #HQ_page main table th, #HQ_page main table td, #HQ_page #HQ_page main table td, #HQ_page main table th, #HQ_page #HQ_page main table th { | main table td, #HQ_page main table td, main table th, #HQ_page main table th, #HQ_page main table td, #HQ_page #HQ_page main table td, #HQ_page main table th, #HQ_page #HQ_page main table th { | ||
border: unset; | border: unset; | ||
− | vertical-align: | + | vertical-align: middle; |
− | background-color: # | + | background-color: #FAFAFC; |
− | color: # | + | color: #121212; |
− | padding: | + | padding: 5px; |
} | } | ||
main table td > div, #HQ_page main table td > div, main table th > div, #HQ_page main table th > div, #HQ_page main table td > div, #HQ_page #HQ_page main table td > div, #HQ_page main table th > div, #HQ_page #HQ_page main table th > div { | main table td > div, #HQ_page main table td > div, main table th > div, #HQ_page main table th > div, #HQ_page main table td > div, #HQ_page #HQ_page main table td > div, #HQ_page main table th > div, #HQ_page #HQ_page main table th > div { | ||
display: inline-block; | display: inline-block; | ||
− | width: | + | width: 11px; |
− | height: | + | height: 11px; |
border-radius: 1000px; | border-radius: 1000px; | ||
background-color: #2E64EC; | background-color: #2E64EC; | ||
Line 139: | Line 177: | ||
position: sticky; | position: sticky; | ||
left: 0px; | left: 0px; | ||
− | background: # | + | background: #FAFAFC; |
cursor: pointer; | cursor: pointer; | ||
+ | transition: color 0.3s; | ||
} | } | ||
main table tbody th:last-of-type.alt, #HQ_page main table tbody th:last-of-type.alt, #HQ_page main table tbody th:last-of-type.alt, #HQ_page #HQ_page main table tbody th:last-of-type.alt { | main table tbody th:last-of-type.alt, #HQ_page main table tbody th:last-of-type.alt, #HQ_page main table tbody th:last-of-type.alt, #HQ_page #HQ_page main table tbody th:last-of-type.alt { | ||
− | background: linear-gradient(270deg, # | + | background: linear-gradient(270deg, #eeeeee, #FAFAFC); |
} | } | ||
main table tbody th:last-of-type:hover, #HQ_page main table tbody th:last-of-type:hover, #HQ_page main table tbody th:last-of-type:hover, #HQ_page #HQ_page main table tbody th:last-of-type:hover { | main table tbody th:last-of-type:hover, #HQ_page main table tbody th:last-of-type:hover, #HQ_page main table tbody th:last-of-type:hover, #HQ_page #HQ_page main table tbody th:last-of-type:hover { | ||
− | + | color: #2E64EC; | |
} | } | ||
main table .cat, main table .excl, #HQ_page main table .cat, #HQ_page main table .excl { | main table .cat, main table .excl, #HQ_page main table .cat, #HQ_page main table .excl { | ||
− | border-left: 3px solid # | + | border-left: 3px solid #eeeeee; |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
main table thead th, #HQ_page main table thead th, #HQ_page main table thead th, #HQ_page #HQ_page main table thead th { | main table thead th, #HQ_page main table thead th, #HQ_page main table thead th, #HQ_page #HQ_page main table thead th { | ||
− | background-color: | + | background-color: unset; |
position: sticky; | position: sticky; | ||
top: 0px; | top: 0px; | ||
z-index: 2; | z-index: 2; | ||
left: unset; | left: unset; | ||
− | min-width: | + | min-width: 40px; |
+ | } | ||
+ | main table.justtable, #HQ_page main table.justtable { | ||
+ | margin: 0 2px; | ||
+ | border-bottom: 3px solid #eeeeee; | ||
+ | font-size: 0.9rem; | ||
+ | width: 99%; | ||
+ | } | ||
+ | main table.justtable td, #HQ_page main table.justtable td, main table.justtable th, #HQ_page main table.justtable th, #HQ_page main table.justtable td, #HQ_page #HQ_page main table.justtable td, #HQ_page main table.justtable th, #HQ_page #HQ_page main table.justtable th { | ||
+ | padding: 8px; | ||
+ | } | ||
+ | main table.justtable tr td, #HQ_page main table.justtable tr td { | ||
+ | background-color: #2E64EC; | ||
+ | color: transparent; | ||
+ | } | ||
+ | main table.justtable tr td:empty, #HQ_page main table.justtable tr td:empty { | ||
+ | background-color: #FAFAFC; | ||
+ | } | ||
+ | main table.justtable tr:nth-child(2n) td, #HQ_page main table.justtable tr:nth-child(2n) td { | ||
+ | background-color: #6281EF; | ||
+ | } | ||
+ | main table.justtable tr:nth-child(2n) td:empty, #HQ_page main table.justtable tr:nth-child(2n) td:empty { | ||
+ | background-color: #FAFAFC; | ||
+ | } | ||
+ | main table.justtable tr th, #HQ_page main table.justtable tr th { | ||
+ | background-color: #FAFAFC; | ||
+ | } | ||
+ | main table.justtable tbody th:last-of-type, #HQ_page main table.justtable tbody th:last-of-type, #HQ_page main table.justtable tbody th:last-of-type, #HQ_page #HQ_page main table.justtable tbody th:last-of-type { | ||
+ | cursor: unset; | ||
+ | white-space: nowrap; | ||
+ | } | ||
+ | main table.justtable tbody th:last-of-type:hover, #HQ_page main table.justtable tbody th:last-of-type:hover, #HQ_page main table.justtable tbody th:last-of-type:hover, #HQ_page #HQ_page main table.justtable tbody th:last-of-type:hover { | ||
+ | color: #121212; | ||
+ | } | ||
+ | main table.justtable tbody tr, #HQ_page main table.justtable tbody tr { | ||
+ | border: 3px solid #eeeeee; | ||
+ | border-bottom: unset; | ||
+ | } | ||
+ | main table.justtable thead tr th, #HQ_page main table.justtable thead tr th { | ||
+ | background-color: unset; | ||
+ | } | ||
+ | main .listHelpers { | ||
+ | display: flex; | ||
+ | flex-direction: column; | ||
+ | } | ||
+ | main .listHelpers > .helper { | ||
+ | display: flex; | ||
+ | flex-direction: row; | ||
+ | align-items: center; | ||
+ | } | ||
+ | main .listHelpers > .helper + .helper { | ||
+ | margin-top: 24px; | ||
+ | } | ||
+ | main .listHelpers > .helper img { | ||
+ | background-color: #FAFAFC; | ||
+ | width: 200px; | ||
+ | height: 200px; | ||
+ | border-radius: 1000px; | ||
+ | margin-right: 32px; | ||
+ | box-shadow: 5px 5px 7px #00000029; | ||
+ | } | ||
+ | @media (max-width: 600px) { | ||
+ | main .listHelpers > .helper { | ||
+ | flex-direction: column; | ||
+ | } | ||
+ | main .listHelpers > .helper img { | ||
+ | margin-right: unset; | ||
+ | margin-bottom: 16px; | ||
+ | } | ||
} | } |
Latest revision as of 17:50, 27 October 2020
body, html {
margin: 0; padding: 0; color: #222222; font-family: "lato-regular";
}
.introContainer {
z-index: 2; position: relative; background-image: url(); background-size: 100%; background-repeat: repeat-y;
} .introContainer::before {
background-image: unset; border-bottom: unset;
} .introContainer .bubblePhoto {
background-image: url(); background-attachment: fixed; background-position: 0px 0px; position: absolute; width: 64vw; height: 64vw;
} @media (min-aspect-ratio: 1/1) {
.introContainer .bubblePhoto { width: 64vh; height: 64vh; }
} .introContainer .bubbleHeading {
background-color: white; width: 64vw; height: 64vw; display: flex; flex-direction: column; justify-content: center; align-items: center;
} .introContainer .bubbleHeading > div {
color: #6281EF; font-family: "montserrat-black"; font-size: 6.5vw; line-height: 0.9; text-transform: uppercase;
} @media (min-aspect-ratio: 1/1) {
.introContainer .bubbleHeading > div { font-size: 6.5vh; }
} .introContainer .bubbleHeading > div.other {
color: transparent; -webkit-text-stroke-width: 1.5px; -webkit-text-stroke-color: #6281EF;
} @media (min-aspect-ratio: 1/1) {
.introContainer .bubbleHeading { width: 64vh; height: 64vh; }
}
.milkWave {
z-index: 2; width: 100%; top: 0; height: calc(100vh - 18px); 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);
}
main {
background-image: url(), url(
); background-repeat: no-repeat, repeat-y; background-size: 100%, 100%; justify-content: center; padding-top: 50px; padding-bottom: 72px; z-index: unset; flex-direction: column; align-items: center;
} @media (max-width: 800px) {
main .contentBlock { width: 100%; }
} @media (max-width: 1024px) {
main .contentBlock { margin-right: unset; margin-left: 5vw; }
} @media (max-width: 800px) {
main .contentBlock { margin-left: unset; }
} main .content {
margin-right: unset; background-color: #FAFAFC;
} @media (max-width: 800px) {
main .content { margin: unset; border-radius: unset; padding: 20px 10%; width: 100%; box-sizing: border-box; }
} main div.table {
margin-top: 32px; max-width: calc(100% - 350px); overflow: auto;
} main div.table::-webkit-scrollbar {
background-color: transparent; border-radius: 10px; height: 8px; width: 8px;
} main div.table::-webkit-scrollbar-thumb {
background-color: #444444; border-radius: 10px;
} main div.table::-webkit-scrollbar-corner {
background: transparent;
} @media (max-aspect-ratio: 1/1) {
main div.table { max-width: calc(90% - 40px); }
} main table, #HQ_page main table {
background: none; border: unset; border-bottom: 3px solid #eeeeee; margin: 0; border-collapse: collapse; text-align: center; font-size: 0.7em;
} main table tbody, #HQ_page main table tbody {
border-right: 3px solid #eeeeee;
} main table .alt, #HQ_page main table .alt {
background-color: #eeeeee;
} main table tr.divide, #HQ_page main table tr.divide {
border-top: 3px solid #eeeeee;
} main table td, #HQ_page main table td, main table th, #HQ_page main table th, #HQ_page main table td, #HQ_page #HQ_page main table td, #HQ_page main table th, #HQ_page #HQ_page main table th {
border: unset; vertical-align: middle; background-color: #FAFAFC; color: #121212; padding: 5px;
} main table td > div, #HQ_page main table td > div, main table th > div, #HQ_page main table th > div, #HQ_page main table td > div, #HQ_page #HQ_page main table td > div, #HQ_page main table th > div, #HQ_page #HQ_page main table th > div {
display: inline-block; width: 11px; height: 11px; border-radius: 1000px; background-color: #2E64EC;
} main table tbody th:last-of-type, #HQ_page main table tbody th:last-of-type, #HQ_page main table tbody th:last-of-type, #HQ_page #HQ_page main table tbody th:last-of-type {
position: sticky; left: 0px; background: #FAFAFC; cursor: pointer; transition: color 0.3s;
} main table tbody th:last-of-type.alt, #HQ_page main table tbody th:last-of-type.alt, #HQ_page main table tbody th:last-of-type.alt, #HQ_page #HQ_page main table tbody th:last-of-type.alt {
background: linear-gradient(270deg, #eeeeee, #FAFAFC);
} main table tbody th:last-of-type:hover, #HQ_page main table tbody th:last-of-type:hover, #HQ_page main table tbody th:last-of-type:hover, #HQ_page #HQ_page main table tbody th:last-of-type:hover {
color: #2E64EC;
} main table .cat, main table .excl, #HQ_page main table .cat, #HQ_page main table .excl {
border-left: 3px solid #eeeeee;
} main table thead th, #HQ_page main table thead th, #HQ_page main table thead th, #HQ_page #HQ_page main table thead th {
background-color: unset; position: sticky; top: 0px; z-index: 2; left: unset; min-width: 40px;
} main table.justtable, #HQ_page main table.justtable {
margin: 0 2px; border-bottom: 3px solid #eeeeee; font-size: 0.9rem; width: 99%;
} main table.justtable td, #HQ_page main table.justtable td, main table.justtable th, #HQ_page main table.justtable th, #HQ_page main table.justtable td, #HQ_page #HQ_page main table.justtable td, #HQ_page main table.justtable th, #HQ_page #HQ_page main table.justtable th {
padding: 8px;
} main table.justtable tr td, #HQ_page main table.justtable tr td {
background-color: #2E64EC; color: transparent;
} main table.justtable tr td:empty, #HQ_page main table.justtable tr td:empty {
background-color: #FAFAFC;
} main table.justtable tr:nth-child(2n) td, #HQ_page main table.justtable tr:nth-child(2n) td {
background-color: #6281EF;
} main table.justtable tr:nth-child(2n) td:empty, #HQ_page main table.justtable tr:nth-child(2n) td:empty {
background-color: #FAFAFC;
} main table.justtable tr th, #HQ_page main table.justtable tr th {
background-color: #FAFAFC;
} main table.justtable tbody th:last-of-type, #HQ_page main table.justtable tbody th:last-of-type, #HQ_page main table.justtable tbody th:last-of-type, #HQ_page #HQ_page main table.justtable tbody th:last-of-type {
cursor: unset; white-space: nowrap;
} main table.justtable tbody th:last-of-type:hover, #HQ_page main table.justtable tbody th:last-of-type:hover, #HQ_page main table.justtable tbody th:last-of-type:hover, #HQ_page #HQ_page main table.justtable tbody th:last-of-type:hover {
color: #121212;
} main table.justtable tbody tr, #HQ_page main table.justtable tbody tr {
border: 3px solid #eeeeee; border-bottom: unset;
} main table.justtable thead tr th, #HQ_page main table.justtable thead tr th {
background-color: unset;
} main .listHelpers {
display: flex; flex-direction: column;
} main .listHelpers > .helper {
display: flex; flex-direction: row; align-items: center;
} main .listHelpers > .helper + .helper {
margin-top: 24px;
} main .listHelpers > .helper img {
background-color: #FAFAFC; width: 200px; height: 200px; border-radius: 1000px; margin-right: 32px; box-shadow: 5px 5px 7px #00000029;
} @media (max-width: 600px) {
main .listHelpers > .helper { flex-direction: column; } main .listHelpers > .helper img { margin-right: unset; margin-bottom: 16px; }
}