Difference between revisions of "Template:Virginia/css/index"

Revision as of 15:58, 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 */
 padding: 0;
 margin: 0; }

/* 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 !important;
 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%; }