(49 intermediate revisions by the same user not shown) | |||
Line 14: | Line 14: | ||
#content {margin-left: 0px; margin-top: -9px; padding: 0px; width: 100%;} | #content {margin-left: 0px; margin-top: -9px; padding: 0px; width: 100%;} | ||
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 {margin-bottom: 0px;} | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 {margin-bottom: 0px;} | ||
− | #globalWrapper{padding-bottom: 0;} | + | #globalWrapper{padding-bottom: 0 !important;} |
body {background-color: white;} | body {background-color: white;} | ||
Line 68: | Line 68: | ||
h1, h2, h3, h4, h5, h6 { | h1, h2, h3, h4, h5, h6 { | ||
+ | line-height: 1em; | ||
letter-spacing: 0.075em; | letter-spacing: 0.075em; | ||
+ | } | ||
+ | |||
+ | .red { | ||
+ | color: #e91b63 !important; | ||
+ | } | ||
+ | |||
+ | h2 { | ||
+ | font-size: 2em; | ||
+ | } | ||
+ | |||
+ | p { | ||
+ | margin-top: 0 !important; | ||
+ | margin-bottom: 0 !important; | ||
} | } | ||
.content p { | .content p { | ||
− | margin-top: | + | margin-top: 0.6em !important; |
+ | margin-bottom: 2em !important; | ||
padding-left: 1em !important; | padding-left: 1em !important; | ||
} | } | ||
Line 80: | Line 95: | ||
} | } | ||
− | li { | + | ul li { |
list-style: none; | list-style: none; | ||
} | } | ||
Line 95: | Line 110: | ||
} | } | ||
− | .content li:before { | + | .content ul li:before { |
content: ''; display: inline-block; | content: ''; display: inline-block; | ||
height: 3em; width: 3em; | height: 3em; width: 3em; | ||
Line 142: | Line 157: | ||
width: 100%; | width: 100%; | ||
position: fixed; | position: fixed; | ||
+ | top: 16px; /* Height of iGEM navbar */ | ||
z-index: 10001; | z-index: 10001; | ||
-ms-flex-line-pack: center; | -ms-flex-line-pack: center; | ||
Line 147: | Line 163: | ||
-ms-flex-wrap: wrap; | -ms-flex-wrap: wrap; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
− | + | /* margin: -1px 0px 0px 0px; */ /* needs -1px top margin now for some reason...? */ | |
background-color: var(--navbar-div-color, #adaabe94); | background-color: var(--navbar-div-color, #adaabe94); | ||
color: var(--navbar-txt-color, white); | color: var(--navbar-txt-color, white); | ||
font-size: 17px; | font-size: 17px; | ||
+ | font-size: calc(14px + (17 - 14) * ((100vw - 1020px) / (1600 - 1020))) !important; | ||
line-height: 100%; | line-height: 100%; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
Line 204: | Line 221: | ||
.topnav .nav-links-container a:not(.nav-logo) { | .topnav .nav-links-container a:not(.nav-logo) { | ||
padding: 14px 16px; /* Might need to change */ | padding: 14px 16px; /* Might need to change */ | ||
+ | /* font-size: calc(14px + (17 - 14) * ((100vw - 1020px) / (1600 - 1020))) !important; */ | ||
} | } | ||
Line 236: | Line 254: | ||
min-width: 160px; | min-width: 160px; | ||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); | ||
− | + | /* z-index: -1; */ | |
background-color: var(--navbar-div-color, #adaabe94); | background-color: var(--navbar-div-color, #adaabe94); | ||
} | } | ||
Line 385: | Line 403: | ||
background-color: #EEEEEE; | background-color: #EEEEEE; | ||
border-radius: 5px; | border-radius: 5px; | ||
+ | } | ||
+ | |||
+ | .toc-container h3 { | ||
+ | text-align: center; | ||
} | } | ||
Line 524: | Line 546: | ||
padding: 0 1em; | padding: 0 1em; | ||
margin: 0 2.5vw; | margin: 0 2.5vw; | ||
+ | } | ||
+ | |||
+ | .flex-col:not(.noMin) { | ||
min-width: 15em; | min-width: 15em; | ||
} | } | ||
Line 533: | Line 558: | ||
.flex-col p:not(.image-inpage-title) { | .flex-col p:not(.image-inpage-title) { | ||
− | + | /* text-align: left !important; */ | |
} | } | ||
Line 570: | Line 595: | ||
justify-content: center !important; | justify-content: center !important; | ||
text-align: center !important; | text-align: center !important; | ||
+ | } | ||
+ | |||
+ | .center-vert { | ||
+ | display: flex; | ||
+ | align-items: center; | ||
} | } | ||
Line 578: | Line 608: | ||
.content-divider { | .content-divider { | ||
justify-content: center; | justify-content: center; | ||
+ | margin: 5vh auto; | ||
} | } | ||
Line 596: | Line 627: | ||
background: #333; | background: #333; | ||
width: 60%; | width: 60%; | ||
+ | margin-top: 2em; | ||
margin-left: 20%; | margin-left: 20%; | ||
} | } | ||
Line 631: | Line 663: | ||
} | } | ||
+ | .hex-header h2 { | ||
+ | margin-bottom: 0 !important; | ||
+ | } | ||
+ | |||
+ | .hex-header h2:before { | ||
+ | content: ''; display: inline-block; | ||
+ | height: 3em; width: 3em; | ||
+ | background-image: url(https://static.igem.org/mediawiki/2018/8/8d/T--UCSC--Hexagon.png); | ||
+ | background-size: contain; background-repeat: no-repeat; | ||
+ | vertical-align: middle; | ||
+ | } | ||
+ | |||
+ | .hex-header.bigHex h2:before { | ||
+ | height: 5em; width: 5em; | ||
+ | } | ||
+ | |||
+ | .hex-header.hex0 h2:before { | ||
+ | background-image: url(https://static.igem.org/mediawiki/2018/d/da/T--UCSC--Hexagon-0.png); | ||
+ | } | ||
+ | |||
+ | .hex-header.hex1 h2:before { | ||
+ | background-image: url(https://static.igem.org/mediawiki/2018/7/79/T--UCSC--Hexagon-1.png); | ||
+ | } | ||
+ | |||
+ | .hex-header.hex2 h2:before { | ||
+ | background-image: url(https://static.igem.org/mediawiki/2018/5/5f/T--UCSC--Hexagon-2.png); | ||
+ | } | ||
+ | |||
+ | .hex-header.hex3 h2:before { | ||
+ | background-image: url(https://static.igem.org/mediawiki/2018/1/13/T--UCSC--Hexagon-3.png); | ||
+ | } | ||
+ | |||
+ | .imageCont { | ||
+ | max-width: 95%; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | } | ||
+ | |||
+ | .imageCont.floatR, .imageCont.floatL { | ||
+ | max-width: 60%; | ||
+ | } | ||
+ | |||
+ | .imageCont p { | ||
+ | text-align: center !important; | ||
+ | font-size: 85% !important; | ||
+ | } | ||
.image-inpage { | .image-inpage { | ||
Line 642: | Line 720: | ||
} | } | ||
− | .image-inpage.floatR { | + | .image-inpage.vert { |
+ | min-width: 0; | ||
+ | max-height: 30vh; | ||
+ | min-height: 100px; | ||
+ | width: auto; | ||
+ | } | ||
+ | |||
+ | .image-inpage.floatR, .floatR { | ||
float: right; | float: right; | ||
− | margin-right: 0; | + | margin-right: 0 !important; |
− | margin-left: 1em; | + | margin-left: 1em !important; |
} | } | ||
− | .image-inpage.floatL { | + | .image-inpage.floatL, .floatL { |
float: left; | float: left; | ||
− | margin-right: 1em; | + | margin-right: 1em !important; |
− | margin-left: 0; | + | margin-left: 0 !important; |
} | } | ||
.image-inpage.large { | .image-inpage.large { | ||
− | max-width: | + | max-width: 100%; |
+ | } | ||
+ | |||
+ | .image-inpage.large.vert { | ||
+ | max-height: 60vh; | ||
+ | width: auto; | ||
} | } | ||
Line 675: | Line 765: | ||
text-align: left !important; | text-align: left !important; | ||
font-size: .75em; | font-size: .75em; | ||
+ | } | ||
+ | |||
+ | .image-p, .content .image-p, .flex-col .image-p { | ||
+ | background-color: #464646; | ||
+ | color: white !important; | ||
+ | text-align: center !important; | ||
+ | border-radius: 40px; | ||
+ | padding: 0.5em 1.5em !important; | ||
+ | font-size: calc(14px + (18 - 14) * ((100vw - 800px) / (1600 - 800))) !important; | ||
} | } | ||
Line 822: | Line 921: | ||
margin: auto; | margin: auto; | ||
overflow:hidden; | overflow:hidden; | ||
− | border-top:3px solid black; | + | border-top: 3px solid black; |
− | border-bottom:3px solid black; | + | border-bottom: 3px solid black; |
− | border-left:1.5px solid black; | + | border-left: 1.5px solid black; |
border-right: 1.5px solid black; | border-right: 1.5px solid black; | ||
background-color: var(--main-bg-color); | background-color: var(--main-bg-color); | ||
Line 946: | Line 1,045: | ||
.FullNames { | .FullNames { | ||
text-align: center !important; | text-align: center !important; | ||
− | font-size:1.3em !important; | + | font-size: 1.3em !important; |
− | color: black; | + | color: black !important; |
margin-top: -15px !important; | margin-top: -15px !important; | ||
font-family: var(--main-txt-font) !important; | font-family: var(--main-txt-font) !important; | ||
Line 955: | Line 1,054: | ||
.PersDesc { | .PersDesc { | ||
text-align: center !important; | text-align: center !important; | ||
− | font-size:1.15em !important; | + | font-size: 1.15em !important; |
− | margin-top:5px !important; | + | margin-top: 5px !important; |
− | color: black; | + | margin-bottom: 0.5em !important; |
+ | /* color: black !important; */ | ||
font-family: var(--main-txt-font) !important; | font-family: var(--main-txt-font) !important; | ||
/* font-family: 'roboto' !important; */ | /* font-family: 'roboto' !important; */ | ||
Line 992: | Line 1,092: | ||
justify-content: center; | justify-content: center; | ||
background: black; | background: black; | ||
+ | padding: 12px 0; | ||
font-family: var(--main-txt-font) !important; | font-family: var(--main-txt-font) !important; | ||
/* font-family: 'roboto' !important; */ | /* font-family: 'roboto' !important; */ | ||
Line 1,051: | Line 1,152: | ||
text-align: center !important; | text-align: center !important; | ||
font-size: 17px !important; | font-size: 17px !important; | ||
+ | } | ||
+ | |||
+ | .mobile-show { | ||
+ | display: none; | ||
} | } | ||
Line 1,057: | Line 1,162: | ||
/* When the screen is less than x pixels wide, hide all navbar links. Show the link that should open and close the topnav (.menu-icon). If changing max-width, make sure to change JavaScript dropdown conditions in UCSC/NavBar as well! */ | /* When the screen is less than x pixels wide, hide all navbar links. Show the link that should open and close the topnav (.menu-icon). If changing max-width, make sure to change JavaScript dropdown conditions in UCSC/NavBar as well! */ | ||
− | @media screen and (max-width: | + | @media screen and (max-width: 1200px) { |
.topnav .nav-logo { | .topnav .nav-logo { | ||
margin-left: 5px; | margin-left: 5px; | ||
Line 1,152: | Line 1,257: | ||
@media screen and (max-width: 800px) { | @media screen and (max-width: 800px) { | ||
− | .image-inpage.floatL, .image-inpage.floatR { | + | .mobile-show { |
+ | display: inherit; | ||
+ | } | ||
+ | |||
+ | .mobile-hide { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | ul:not(.dropdown-contentshow) { | ||
+ | margin-left: 2px !important; | ||
+ | } | ||
+ | |||
+ | .image-inpage.floatL, .image-inpage.floatR, .floatL, .floatR { | ||
float: none; | float: none; | ||
− | margin-right: auto; | + | margin-right: auto !important; |
− | margin-left: auto; | + | margin-left: auto !important; |
} | } | ||
Latest revision as of 00:45, 18 October 2018