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

Line 29: Line 29:
 
   padding: 0;
 
   padding: 0;
 
   margin: 0; }
 
   margin: 0; }
−
 
−
#mw-content-text > p {
 
−
  width: 0px;
 
−
  height: 0px; }
 
−
 
−
#igem-navbar-placeholder {
 
−
  height: 14px;
 
−
  position: fixed;
 
−
  display: block;
 
−
  background-color: #383838;
 
−
  border-bottom: solid black 2px;
 
−
  color: white;
 
−
  z-index: 9999;
 
−
  width: 100%;
 
−
  font-size: 0.75em;
 
−
  margin: 0;
 
−
  padding: 0; }
 
−
  #igem-navbar-placeholder p {
 
−
    margin: 0; }
 
  
 
/* Begin actual Virginia iGEm 2018 Code */
 
/* Begin actual Virginia iGEm 2018 Code */
Line 78: Line 59:
 
*/
 
*/
 
/*Applies to all*/
 
/*Applies to all*/
−
body, #mw-content-text {
+
* {
 
   font-family: "Lato";
 
   font-family: "Lato";
 
   margin: 0;
 
   margin: 0;
Line 99: Line 80:
 
   overflow: hidden; }
 
   overflow: hidden; }
  
−
#main {
+
#content {
−
  height: 100%;
+
 
   color: #817f74;
 
   color: #817f74;
 
   padding: 1% 1%;
 
   padding: 1% 1%;
Line 107: Line 87:
 
   position: relative;
 
   position: relative;
 
   background-color: #f7f5e9; }
 
   background-color: #f7f5e9; }
−
   #main::after {
+
   #content::after {
 
     clear: both;
 
     clear: both;
 
     content: "";
 
     content: "";
 
     display: block; }
 
     display: block; }
−
   #main div#media {
+
   #content div#media {
 
     width: calc(33.33333% - 80px);
 
     width: calc(33.33333% - 80px);
 
     float: left;
 
     float: left;
Line 119: Line 99:
 
     top: 40px;
 
     top: 40px;
 
     bottom: 20px; }
 
     bottom: 20px; }
−
   #main div#text {
+
   #content div#text {
 
     width: calc(66.66667% - 100px);
 
     width: calc(66.66667% - 100px);
 
     float: left;
 
     float: left;
 
     margin-left: 60px; }
 
     margin-left: 60px; }
−
     #main div#text h1 {
+
     #content div#text h1 {
 
       padding: 3% 1%; }
 
       padding: 3% 1%; }
−
     #main div#text p {
+
     #content div#text p {
 
       margin: 1%;
 
       margin: 1%;
 
       line-height: 2em; }
 
       line-height: 2em; }
Line 177: Line 157:
 
   -o-transition: 0.5s; }
 
   -o-transition: 0.5s; }
  
−
#virginia-header {
+
header {
 
   /*Keeps the nav bar sticking on the top*/
 
   /*Keeps the nav bar sticking on the top*/
 
   position: sticky;
 
   position: sticky;
−
   top: 16px;
+
   top: 0;
 
   z-index: 999; }
 
   z-index: 999; }
−
   #virginia-header, #virginia-header * {
+
   header, header * {
 
     box-sizing: border-box; }
 
     box-sizing: border-box; }
−
   #virginia-header #navbar {
+
   header nav {
 
     height: 3rem;
 
     height: 3rem;
 
     width: 100%;
 
     width: 100%;
 
     display: block;
 
     display: block;
 
     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); }
−
     #virginia-header #navbar ul {
+
     header nav ul {
 
       list-style: none;
 
       list-style: none;
−
      margin: 0px;
 
−
      padding: 0px;
 
 
       background-color: #252525; }
 
       background-color: #252525; }
−
       #virginia-header #navbar ul::after {
+
       header nav ul::after {
 
         clear: both;
 
         clear: both;
 
         content: "";
 
         content: "";
 
         display: block; }
 
         display: block; }
−
       #virginia-header #navbar ul li {
+
       header nav ul li {
 
         width: calc(12.5%);
 
         width: calc(12.5%);
 
         float: left;
 
         float: left;
Line 207: Line 185:
 
         height: 3rem;
 
         height: 3rem;
 
         /*a, related to link*/ }
 
         /*a, related to link*/ }
−
         #virginia-header #navbar ul li a, #virginia-header #navbar ul li a:visited {
+
         header nav ul li a, header nav ul li a:visited {
 
           display: flex;
 
           display: flex;
 
           align-items: center;
 
           align-items: center;
Line 218: Line 196:
 
           transition: all 0.2s ease-in-out;
 
           transition: all 0.2s ease-in-out;
 
           /*adds the arrow to dropdowns, selects not only-child*/ }
 
           /*adds the arrow to dropdowns, selects not only-child*/ }
−
           #virginia-header #navbar ul li a img, #virginia-header #navbar ul li a:visited img {
+
           header nav ul li a img, header nav ul li a:visited img {
 
             display: inline-block;
 
             display: inline-block;
 
             padding: 0.5rem;
 
             padding: 0.5rem;
Line 224: Line 202:
 
             height: auto;
 
             height: auto;
 
             width: auto; }
 
             width: auto; }
−
           #virginia-header #navbar ul li a:hover, #virginia-header #navbar ul li a:visited:hover {
+
           header nav ul li a:hover, header nav ul li a:visited:hover {
 
             color: #00c3ff;
 
             color: #00c3ff;
 
             text-shadow: 0px 0px 8px #00c3ff; }
 
             text-shadow: 0px 0px 8px #00c3ff; }
−
           #virginia-header #navbar ul li a:not(:only-child):after, #virginia-header #navbar ul li a:visited:not(:only-child):after {
+
           header nav ul li a:not(:only-child):after, header nav ul li a:visited:not(:only-child):after {
 
             padding-left: 4px;
 
             padding-left: 4px;
 
             content: ' ▾'; }
 
             content: ' ▾'; }
−
         #virginia-header #navbar ul li ul {
+
         header nav ul li ul {
 
           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);
 
           position: absolute;
 
           position: absolute;
Line 238: Line 216:
 
           transform: translateY(-2em);
 
           transform: translateY(-2em);
 
           transition: all 0.2s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s; }
 
           transition: all 0.2s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s; }
−
           #virginia-header #navbar ul li ul::after {
+
           header nav ul li ul::after {
 
             clear: both;
 
             clear: both;
 
             content: "";
 
             content: "";
 
             display: block; }
 
             display: block; }
−
           #virginia-header #navbar ul li ul li {
+
           header nav ul li ul li {
 
             width: calc(100%);
 
             width: calc(100%);
 
             float: left;
 
             float: left;
 
             margin-left: 0px;
 
             margin-left: 0px;
 
             overflow: hidden; }
 
             overflow: hidden; }
−
         #virginia-header #navbar ul li:focus > ul, #virginia-header #navbar ul li:hover > ul {
+
         header nav ul li:focus > ul, header nav ul li:hover > ul {
 
           z-index: 1;
 
           z-index: 1;
 
           visibility: visible;
 
           visibility: visible;
Line 254: Line 232:
 
           transition-delay: 0s, 0s, 0.3s; }
 
           transition-delay: 0s, 0s, 0.3s; }
  
−
#virginia-footer {
+
footer {
 
   box-sizing: border-box;
 
   box-sizing: border-box;
 
   background-color: #252525;
 
   background-color: #252525;
Line 260: Line 238:
 
   color: #fffdff;
 
   color: #fffdff;
 
   padding: 25px; }
 
   padding: 25px; }
−
   #virginia-footer::after {
+
   footer::after {
 
     clear: both;
 
     clear: both;
 
     content: "";
 
     content: "";
 
     display: block; }
 
     display: block; }
−
   #virginia-footer div.footer-name {
+
   footer div.footer-name {
 
     width: calc(41.66667%);
 
     width: calc(41.66667%);
 
     float: left;
 
     float: left;
Line 270: Line 248:
 
     line-height: 6rem;
 
     line-height: 6rem;
 
     height: 6rem; }
 
     height: 6rem; }
−
     #virginia-footer div.footer-name * {
+
     footer div.footer-name * {
 
       float: left;
 
       float: left;
 
       margin: auto 1rem; }
 
       margin: auto 1rem; }
−
   #virginia-footer div.spacer {
+
   footer div.spacer {
 
     width: calc(33.33333%);
 
     width: calc(33.33333%);
 
     float: left;
 
     float: left;
Line 279: Line 257:
 
     line-height: 6rem;
 
     line-height: 6rem;
 
     height: 6rem; }
 
     height: 6rem; }
−
   #virginia-footer div.social-container {
+
   footer div.social-container {
 
     width: calc(25%);
 
     width: calc(25%);
 
     float: left;
 
     float: left;

Revision as of 16:28, 26 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://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);

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

a { 

 text-decoration: none;
 color: #2c6a94;
 transition: all 0.2s ease-in-out; }
 a:hover {
   color: #00c3ff;
   text-shadow: 0px 0px 8px #00c3ff; }

img { 

 width: auto;
 height: auto;
 max-height: 100%;
 max-width: 100%;
 overflow: hidden; }
  1. content {
 color: #817f74;
 padding: 1% 1%;
 width: auto;
 height: auto;
 position: relative;
 background-color: #f7f5e9; }
 #content::after {
   clear: both;
   content: "";
   display: block; }
 #content div#media {
   width: calc(33.33333% - 80px);
   float: left;
   margin-left: 60px;
   text-align: center;
   position: absolute;
   top: 40px;
   bottom: 20px; }
 #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; }
  1. media {
 color: #817f74;
 width: 100%;
 height: 100%; }

/*scroll bar*/ .scrolltop { 

 display: none;
 width: 100%;
 margin: 0 auto;
 position: fixed;
 bottom: 20px;
 right: 10px; }

.scroll { 

 position: absolute;
 right: 20px;
 bottom: 20px;
 background: #b2b2b2;
 background: rgba(178, 178, 178, 0.7);
 padding: 20px;
 text-align: center;
 margin: 0 0 0 0;
 cursor: pointer;
 transition: 0.5s;
 -moz-transition: 0.5s;
 -webkit-transition: 0.5s;
 -o-transition: 0.5s; }

.scroll:hover { 

 background: #b2b2b2;
 transition: 0.5s;
 -moz-transition: 0.5s;
 -webkit-transition: 0.5s;
 -o-transition: 0.5s; }

.scroll:hover .fa { 

 padding-top: -10px; }

.scroll .fa { 

 font-size: 30px;
 margin-top: -5px;
 margin-left: 1px;
 transition: 0.5s;
 -moz-transition: 0.5s;
 -webkit-transition: 0.5s;
 -o-transition: 0.5s; }

header { 

 /*Keeps the nav bar sticking on the top*/
 position: sticky;
 top: 0;
 z-index: 999; }
 header, header * {
   box-sizing: border-box; }
 header nav {
   height: 3rem;
   width: 100%;
   display: block;
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }
   header nav ul {
     list-style: none;
     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;
       line-height: 3rem;
       height: 3rem;
       /*a, related to link*/ }
       header nav ul li a, header nav ul li a:visited {
         display: flex;
         align-items: center;
         padding: 0 20px;
         height: 100%;
         width: 100%;
         background: #252525;
         color: #fffdff;
         white-space: nowrap;
         transition: all 0.2s ease-in-out;
         /*adds the arrow to dropdowns, selects not only-child*/ }
         header nav ul li a img, header nav ul li a:visited img {
           display: inline-block;
           padding: 0.5rem;
           max-height: 100%;
           height: auto;
           width: auto; }
         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 {
         box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
         position: absolute;
         z-index: -1;
         visibility: hidden;
         opacity: 0;
         transform: translateY(-2em);
         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: 1px solid #2c6a94;
 color: #fffdff;
 padding: 25px; }
 footer::after {
   clear: both;
   content: "";
   display: block; }
 footer div.footer-name {
   width: calc(41.66667%);
   float: left;
   margin-left: 0px;
   line-height: 6rem;
   height: 6rem; }
   footer div.footer-name * {
     float: left;
     margin: auto 1rem; }
 footer div.spacer {
   width: calc(33.33333%);
   float: left;
   margin-left: 0px;
   line-height: 6rem;
   height: 6rem; }
 footer div.social-container {
   width: calc(25%);
   float: left;
   margin-left: 0px; }

/* body { 

   background-color: rgba($iconColor, 0.05);

}

  • /

/*Code courtesy of https://codepen.io/brandondward/pen/RpyaKL*/ .social-container { 

 width: calc(25% - 25px);
 float: left;
 margin-left: 20px;
 width: 400px; }

.social-icons { 

 padding: 0;
 list-style: none;
 margin: 1em; }
 .social-icons li {
   display: inline-block;
   margin: 0.15em;
   position: relative;
   font-size: 1.2em; }
 .social-icons i {
   color: #fff;
   position: absolute;
   top: 21px;
   left: 21px;
   transition: all 265ms ease-out; }
 .social-icons a {
   display: inline-block; }
   .social-icons a:before {
     transform: scale(1);
     -ms-transform: scale(1);
     -webkit-transform: scale(1);
     content: " ";
     width: 60px;
     height: 60px;
     border-radius: 100%;
     display: block;
     background: linear-gradient(45deg, #2c6a94, #00c3ff);
     transition: all 265ms ease-out; }
   .social-icons a:hover:before {
     transform: scale(0);
     transition: all 265ms ease-in; }
   .social-icons a:hover i {
     transform: scale(2.2);
     -ms-transform: scale(2.2);
     -webkit-transform: scale(2.2);
     color: #2c6a94;
     background: -webkit-linear-gradient(45deg, #2c6a94, #00c3ff);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     transition: all 265ms ease-in; }