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

(Created page with "→‎Override iGEM wiki settings, removing everything but the top navbar.: #sideMenu, #top_title { display: none; } #content { width: 100vw; padding: 0px; border: non...")
 
Line 1: Line 1:
 +
@charset "UTF-8";
 
/* Override iGEM wiki settings, removing everything but the top navbar. */
 
/* 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,
 
#sideMenu,
 
#top_title {
 
#top_title {
Line 26: Line 29:
  
 
/* Begin actual Virginia iGEm 2018 Code */
 
/* Begin actual Virginia iGEm 2018 Code */
−
/* UVA Colors */
+
/* 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
 
/* Cherenkov Colors
−
$dark-background-color:#282828;
+
$background-dark-color:#282828;
−
$light-background-color:#C3C3D8;
+
$background-light-color:#C3C3D8;
 
$accent-color: #BFFBF9;
 
$accent-color: #BFFBF9;
 
$text-light: #E8F9F9;
 
$text-light: #E8F9F9;
−
$text-dark: #001C4E;
+
$text-dark-color: #001C4E;
 
$link-color: #3DD4DF;
 
$link-color: #3DD4DF;
 
*/
 
*/
−
/* Passion Fruit Colors
+
/*Passion Fruit Colors*/
−
$dark-background-color:#4F1832;
+
/*
−
$light-background-color:#FAF4E0;
+
$background-dark-color:#FAF4E0;
 +
$background-light-color:rgb(128, 39, 81);
 
$accent-color: #F5287F;
 
$accent-color: #F5287F;
−
$text-light: #FFF0EF;
+
$light-accent-color: rgb(255, 142, 189);
−
$text-dark: #1E0811;
+
$text-light: #1E0811;
 +
$text-dark-color: #FFF0EF;
 
$link-color: #FBB645;
 
$link-color: #FBB645;
 
*/
 
*/
−
.category-gallery div img {
+
/*Applies to all*/
−
   border-radius: 50%; }
+
* {
 +
  font-family: "Lato";
 +
  margin: 0;
 +
  padding: 0;
 +
  border: 0; }
 +
 
 +
img {
 +
   width: auto;
 +
  height: auto;
 +
  max-height: 100%;
 +
  max-width: 100%;
 +
  overflow: hidden; }
  
 
body {
 
body {
−
   margin: 0px; }
+
   background-color: #f7f5e9; }
  
−
header {
+
.content {
−
   border-bottom: 3px solid #E57200;
+
   color: #817f74;
−
   padding: 25px;
+
   padding: 3% 5%;
−
   background-color: #232D4B;
+
   width: auto;
−
   color: #ffffff; }
+
   height: auto; }
−
   header ul.nav::after {
+
   .content::after {
 
     clear: both;
 
     clear: both;
 
     content: "";
 
     content: "";
 
     display: block; }
 
     display: block; }
−
   header ul.nav li {
+
   .content div.interactive {
−
     width: calc(11.11111% - 11.11111px);
+
     width: calc(33.33333% - 80px);
 
     float: left;
 
     float: left;
−
     margin-left: 10px;
+
     margin-left: 60px;
−
     list-style: none;
+
     text-align: center; }
−
    text-align: center;
+
  .content div.text {
−
     border: 2px solid #232D4B;
+
    width: calc(66.66667% - 100px);
−
     border-radius: 4px; }
+
     float: left;
−
     header ul.nav li:hover {
+
     margin-left: 60px; }
−
       background-color: #ffbf80;
+
     .content div.text h1 {
−
       border-color: #ffbf80;
+
       padding: 3% 1%; }
−
       color: #666666; }
+
    .content div.text p {
 +
       margin: 1%;
 +
       line-height: 2em; }
  
−
.content {
+
a {
−
   padding: 20px 20px;
+
   text-decoration: none;
−
   background-color: #ffffff;
+
   color: #2c6a94;
−
   color: #666666;
+
   transition: all 0.2s ease-in-out 0s; }
−
   border-left: 10rem solid #ebebeb;
+
  a:hover {
−
  border-right: 10rem solid #ebebeb; }
+
    color: #00c3ff; }
 +
 
 +
header {
 +
   /*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 nav {
 +
    line-height: 60px;
 +
    height: 60px;
 +
    width: 100%; }
 +
    header nav ul {
 +
      list-style: none;
 +
      margin: 0;
 +
      padding: 0; }
 +
      header nav ul * {
 +
        box-sizing: border-box; }
 +
      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 {
 
footer {
−
   background-color: #232D4B;
+
   background-color: #252525;
−
   border-top: 3px solid #E57200;
+
   border-top: 3px solid #2c6a94;
−
   color: #ffffff;
+
   color: #fffdff;
 
   padding: 25px; }
 
   padding: 25px; }
 
   footer::after {
 
   footer::after {
Line 87: Line 196:
 
     content: "";
 
     content: "";
 
     display: block; }
 
     display: block; }
−
   footer div {
+
   footer div.scroll-up {
−
     width: calc(33.33333% - 26.66667px);
+
     width: calc(16.66667% - 23.33333px);
 
     float: left;
 
     float: left;
 
     margin-left: 20px;
 
     margin-left: 20px;
 +
    line-height: 75px;
 +
    height: 75px;
 
     text-align: center; }
 
     text-align: center; }
−
 
+
  footer div.footer-name {
−
a:link {
+
    width: calc(50% - 30px);
−
   color: #EB5F0C; }
+
    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 {
 
.interactive {
−
  padding: 50px;
+
   background-color: #f7f5e9;
−
  border-bottom: 3px solid #E57200;
+
   color: #817f74;
−
   background-color: #232D4B;
+
   background-size: cover; }
−
   color: #ffffff;
+
−
   height: 600px; }
+
  
−
.category-gallery::after {
+
.category-gallery {
−
  clear: both;
+
  margin: 3% 5%; }
−
  content: "";
+
  .category-gallery::after {
−
  display: block; }
+
    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); }
  
−
.category-gallery div {
+
.petri-dish {
−
   width: calc(50% - 30px);
+
   border-radius: 50%;
−
   float: left;
+
   background-color: #252525;
−
  margin-left: 20px;
+
   width: 500px;
−
   text-align: center; }
+
   height: 500px;
−
   @media only screen and (min-width: 1000px) {
+
   margin: 2%; }
−
    .category-gallery div {
+
−
      width: calc(16.66667% - 35px);
+
−
      float: left;
+
−
      margin-left: 30px; } }
+
−
   .category-gallery div img {
+
−
    border: 10px solid transparent;
+
−
    margin-bottom: 25px;
+
−
    width: 90%;
+
−
    height: 90%;
+
−
    opacity: 0.9; }
+
−
    .category-gallery div img:hover {
+
−
      border-color: #f1f1f1; }
+

Revision as of 21:05, 21 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);

  1. sideMenu,
  2. top_title {
 display: none; }
  1. content {
 width: 100vw;
 padding: 0px;
 border: none;
 color: black;
 margin-left: auto;
 margin-right: auto;
 background-color: #fff;
 position: relative; }
  1. globalWrapper {
 font-size: inherit;
 padding-bottom: 0; }
  1. 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 { 

 /*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 nav {
   line-height: 60px;
   height: 60px;
   width: 100%; }
   header nav ul {
     list-style: none;
     margin: 0;
     padding: 0; }
     header nav ul * {
       box-sizing: border-box; }
     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 { 

 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 { 

 background-color: #f7f5e9;
 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: 500px;
 height: 500px;
 margin: 2%; }