Line 105: | Line 105: | ||
header { | header { | ||
+ | box-sizing: border-box; | ||
/*Keeps the nav bar sticking on the top*/ | /*Keeps the nav bar sticking on the top*/ | ||
position: sticky; | position: sticky; | ||
Line 113: | Line 114: | ||
z-index: 99; | z-index: 99; | ||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); } | box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); } | ||
+ | header * { | ||
+ | box-sizing: border-box; } | ||
header nav { | header nav { | ||
line-height: 60px; | line-height: 60px; | ||
Line 119: | Line 122: | ||
header nav ul { | header nav ul { | ||
list-style: none; | list-style: none; | ||
− | margin: | + | margin: 0px; |
− | padding: | + | padding: 0px; |
+ | margin-left: 0px; | ||
+ | margin-top: 0px; | ||
background-color: #252525; } | background-color: #252525; } | ||
− | |||
− | |||
header nav ul::after { | header nav ul::after { | ||
clear: both; | clear: both; | ||
Line 189: | Line 192: | ||
footer { | footer { | ||
+ | box-sizing: border-box; | ||
background-color: #252525; | background-color: #252525; | ||
border-top: 3px solid #2c6a94; | border-top: 3px solid #2c6a94; |
Revision as of 13:07, 22 June 2018
@charset "UTF-8"; /* Override iGEM wiki settings, removing everything but the top navbar. */ @import url(https://fonts.googleapis.com/css?family=Lato:400,700,700italic,900,900italic,500italic,500,400italic); @import url(https://fonts.googleapis.com/css?family=Lato:400,700,700italic,900,900italic,500italic,500,400italic);
- sideMenu,
- top_title {
display: none; }
- content {
width: 100vw; padding: 0px; border: none; color: black; margin-left: auto; margin-right: auto; background-color: #fff; position: relative; }
- globalWrapper {
font-size: inherit; padding-bottom: 0; }
- top_menu_under {
height: 0px; }
ul {
list-style-image: none; /* removes the iGEM wiki bullets */ }
/* Begin actual Virginia iGEm 2018 Code */ /* UVA Colors $background-dark-color: #232D4B; $background-light-color: #ffffff; $accent-color: #E57200; $light-accent-color: rgb(255, 191, 128); $text-light: #ffffff; $text-dark-color: #666666; $link-color: #EB5F0C;
- /
/* Cherenkov Colors $background-dark-color:#282828; $background-light-color:#C3C3D8; $accent-color: #BFFBF9; $text-light: #E8F9F9; $text-dark-color: #001C4E; $link-color: #3DD4DF;
- /
/*Passion Fruit Colors*/ /* $background-dark-color:#FAF4E0; $background-light-color:rgb(128, 39, 81); $accent-color: #F5287F; $light-accent-color: rgb(255, 142, 189); $text-light: #1E0811; $text-dark-color: #FFF0EF; $link-color: #FBB645;
- /
/*Applies to all*/
- {
font-family: "Lato"; margin: 0; padding: 0; border: 0; }
img {
width: auto; height: auto; max-height: 100%; max-width: 100%; overflow: hidden; }
body {
background-color: #f7f5e9; }
.content {
color: #817f74; padding: 3% 5%; width: auto; height: auto; } .content::after { clear: both; content: ""; display: block; } .content div.interactive { width: calc(33.33333% - 80px); float: left; margin-left: 60px; text-align: center; } .content div.text { width: calc(66.66667% - 100px); float: left; margin-left: 60px; } .content div.text h1 { padding: 3% 1%; } .content div.text p { margin: 1%; line-height: 2em; }
a {
text-decoration: none; color: #2c6a94; transition: all 0.2s ease-in-out 0s; } a:hover { color: #00c3ff; }
header {
box-sizing: border-box; /*Keeps the nav bar sticking on the top*/ position: sticky; top: 0; z-index: 99; position: sticky; top: 0; z-index: 99; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); } header * { box-sizing: border-box; } header nav { line-height: 60px; height: 60px; width: 100%; } header nav ul { list-style: none; margin: 0px; padding: 0px; margin-left: 0px; margin-top: 0px; background-color: #252525; } header nav ul::after { clear: both; content: ""; display: block; } header nav ul li { width: calc(12.5%); float: left; margin-left: 0px; float: left; position: relative; /*makes all the nav bar the same*/ line-height: 60px; height: 60px; /*a, related to link*/ } header nav ul li a, header nav ul li a:visited { /*transition time*/ -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; display: flex; align-items: center; padding: 0 20px; height: 100%; width: 100%; background: #252525; color: #fffdff; text-decoration: none; white-space: nowrap; /*adds the arrow on the nav bar, selects not only-child*/ } header nav ul li a img, header nav ul li a:visited img { margin-right: 10px; max-height: 70%; } header nav ul li a:hover, header nav ul li a:visited:hover { color: #00c3ff; text-shadow: 0px 0px 8px #00c3ff; } header nav ul li a:not(:only-child):after, header nav ul li a:visited:not(:only-child):after { padding-left: 4px; content: ' ▾'; } header nav ul li ul { position: absolute; z-index: -1; /*remains hidden*/ visibility: hidden; opacity: 0; transform: translateY(-2em); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); transition: all 0.2s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s; } header nav ul li ul::after { clear: both; content: ""; display: block; } header nav ul li ul li { width: calc(100%); float: left; margin-left: 0px; overflow: hidden; } header nav ul li:focus > ul, header nav ul li:hover > ul { z-index: 1; visibility: visible; opacity: 1; transform: translateY(0%); transition-delay: 0s, 0s, 0.3s; }
footer {
box-sizing: border-box; background-color: #252525; border-top: 3px solid #2c6a94; color: #fffdff; padding: 25px; } footer::after { clear: both; content: ""; display: block; } footer div.scroll-up { width: calc(16.66667% - 23.33333px); float: left; margin-left: 20px; line-height: 75px; height: 75px; text-align: center; } footer div.footer-name { width: calc(50% - 30px); float: left; margin-left: 20px; line-height: 75px; height: 75px; text-align: left; } footer div.footer-logo { width: calc(50% - 30px); float: left; margin-left: 20px; line-height: 75px; height: 75px; text-align: left; }
.interactive {
color: #817f74; background-size: cover; }
.category-gallery {
margin: 3% 5%; } .category-gallery::after { clear: both; content: ""; display: block; } .category-gallery div { width: calc(50% - 30px); float: left; margin-left: 20px; text-align: center; } @media only screen and (min-width: 1000px) { .category-gallery div { width: calc(16.66667% - 35px); float: left; margin-left: 30px; } } .category-gallery div a p { position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 99; /*overlay text over*/ /* float: left; margin: 10px; width: 100%; height: 170px; text-align: center;*/ } .category-gallery div a img { border-radius: 50%; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); margin-bottom: 25px; width: 90%; height: 90%; /*float:left;*/ } .category-gallery div a img:hover { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }
.petri-dish {
border-radius: 50%; background-color: #252525; width: 200; height: 200; margin: 2%; }