Team:Leiden/css/style css

root {
 --whiteish: #F7F7F7;
 --blackish: #111;
 --main: #FFB375;
 --main_darker: #FFA666;
 --accent1: #456990;
 --accent2: #49BEAA;
 --accent3: #49DCB1;
 --background: #D3D1BE;
 /* #B2B09B; */

}

/* Font things */

@font-face { 

 font-family: ProjectTitle;
 src: url('https://static.igem.org/mediawiki/2018/b/b7/T--Leiden--copperplatelightssilight.ttf');
 /* src: url('../webfonts/copperplatelightssilight.ttf'); */

}

@font-face { 

 font-family: UnderTitle;
 src: url('https://static.igem.org/mediawiki/2018/d/d6/T--Leiden--YuGothicLight.ttf');
 /* src: url('../webfonts/yugothil.ttf'); */

}

@font-face { 

 font-family: Kopje;
 src: url('https://static.igem.org/mediawiki/2018/c/ca/T--Leiden--Roboto-Medium.ttf');
 /* src: url('../webfonts/Roboto-Medium.ttf'); */
 font-weight: bold;

}

@font-face { 

 font-family: Body;
 src: url('https://static.igem.org/mediawiki/2018/0/0d/T--Leiden--Roboto-Light.ttf');
 /* src: url('../webfonts/Roboto-Light.ttf'); */

}

@font-face { 

 font-family: Body;
 src: url('https://static.igem.org/mediawiki/2018/b/bb/T--Leiden--Roboto-LightItalic.ttf');
 /* src: url('../webfonts/Roboto-LightItalic.ttf'); */
 font-style: italic;

}

/* Correct iGEM shit... */

  1. Global p, p {
 padding: 0;
 padding-bottom: 5px;
 margin: 0px;
 line-height: 1.4;

}

  1. Global p.meta {
 padding: 0;
 margin: 0;

}

  1. Global {
 top: -2px;
 width: 100%;
 position: absolute;
 background-color: var(--whiteish);
 color: var(--blackish);
 font-family: Body, sans-serif;

}

  1. globalWrapper {
 font-size: 100%;
 padding: 0;

}

  1. top_menu_under, #top_menu_14, #top_menu_inside {
 -webkit-box-sizing: content-box;
 box-sizing: content-box;

}

  1. top_menu_under {
 height: 0px;

}

a[href ^="https://"] { 

 padding: 0;

}

  1. top_menu_inside ul a, #top_menu_inside ul li.has_submenu {
 line-height: 1.5em;

}

/* Global */

sup { 

 font-size: 60%;

}

h1, h2, h3, h4, h5, h6 { 

 font-family: Kopje, sans-serif;
 margin: 0;
 padding: 0;
 padding-top: 15px;
 border: none;
 font-weight: bold;

}

h1 { 

 font-size: 2em;

}

h2 { 

 font-size: 1.5em;

}

h3 { 

 font-size: 1.17em;

}

h4 { 

 font-size: 1.12em;

}

h5 { 

 font-size: .83em;

}

h6 { 

 font-size: .75em;

}

.submenu div { 

 line-height: 1.5em;

}

body, #contentBox { 

 width: 100%;
 height: -webkit-max-content;
 height: -moz-max-content;
 height: max-content;
 padding: 0;
 margin: 0;
 line-height: normal;
 position: absolute;
 top: 10px;
 background: #C6c6c6;
 font-size: 18px;
 color: var(--blackish);
 font-family: Body, sans-serif;

}

  1. body {
 background-color: var(--whiteish);

}

li, ul { 

 margin: 0;
 line-height: normal;
 list-style-type: none;
 list-style-image: none;
 display: block;

}

  • {
 padding: 0;
 margin: 0;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 text-decoration: none;
 line-height: normal;

}

.container { 

 width: 80%;
 margin: auto;

}

.container-text { 

 width: 80%;
 max-width: 800px;
 margin: auto;
 padding: 60px 0 40px 0;

}

  1. content {
 width: 100%;
 position: relative;
 -webkit-box-shadow: 0px -2px 20px 0px #333;
 box-shadow: 0px -2px 20px 0px #333;
 z-index: 1;

}

a, a:active, a:visited, a:hover { 

 color: inherit;
 text-decoration: none;

}

/* Header */

.circles { 

 background: url('https://static.igem.org/mediawiki/2018/3/3a/T--Leiden--circles1200pxplus.png') no-repeat;
 background-position: 50% 50%;
 background-size: cover;
 height: -webkit-max-content;
 height: -moz-max-content;
 height: max-content;
 min-height: calc(70vh - 10px);
 position: relative;
 top: 0;
 z-index: 3;

}

div#headercontent { 

 position: absolute;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -ms-flex-direction: column;
 flex-direction: column;
 height: -webkit-max-content;
 height: -moz-max-content;
 height: max-content;
 width: 100%;
 top: 50%;
 -webkit-transform: translateY(-50%);
 transform: translateY(-50%);
 /* border: 3px solid green; */

}

div.logo { 

 background: url('https://static.igem.org/mediawiki/2018/c/c8/T--Leiden--LogoLeidenV1.png');
 /* height: 50%; */
 height: calc(0.9 * 50vw);
 max-height: 300px;
 width: 50%;
 margin: auto;
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center bottom;

}

div#Fsos { 

 color: var(--blackish);
 font-size: 50px;
 font-family: ProjectTitle;
 display: block;
 width: max-content;
 margin: auto;
 text-align: center;
 padding-top: 20px;
 background: rgba(222, 217, 208, 0.7);
 box-shadow: 0 0 20px 5px rgba(222, 217, 208, 1);
 border-radius: 50px;

}

div#UnderTitle { 

 color: var(--blackish);
 font-size: 21.62px;
 font-family: UnderTitle;
 display: block;
 width: max-content;
 margin: auto;
 text-align: center;
 padding-left: 2px;
 background: rgba(222, 217, 208, 0.7);
 box-shadow: 0 0 20px 5px rgba(222, 217, 208, 1);
 border-radius: 20px;

}

/* Navbar */

nav { 

 position: -webkit-sticky;
 position: sticky;
 top: 18px;
 background: var(--main);
 height: 54px;
 font-size: 18px;
 -webkit-box-shadow: 0 2px 5px var(--main_darker);
 box-shadow: 0 2px 5px var(--main_darker);
 z-index: 3;

}

nav>div>ul { 

 float: right;
 display: inline-block;

}

nav>div>ul .hasdropdown { 

 padding: 15px 30px;
 float: left;

}

nav>#LogoSmall { 

 background: inherit;
 display: block;
 position: absolute;
 left: 0;
 top: 0;
 width: 145px;
 border-bottom-right-radius: 70%;
 -webkit-box-shadow: 0 2px 5px var(--main);
 box-shadow: 0 2px 5px var(--main);
 z-index: 2;

}

nav>#LogoSmall>a { 

 display: inline-block;

}

nav img { 

 height: 80px;
 width: auto;
 margin: 10px;
 z-index: 4;
 position: relative;

}

.hasdropdown { 

 position: relative;
 top: 100%

}

.dropdownContent { 

 position: absolute;
 overflow: hidden;
 top: 100%;
 right: 0;
 width: -webkit-max-content;
 width: -moz-max-content;
 width: max-content;
 max-width: 250px;
 font-size: 0.9em;
 border-bottom-left-radius: 5px;
 border-bottom-right-radius: 5px;

}

.dropdownContent li { 

 text-align: right;
 display: none;
 background-color: var(--main);
 z-index: 3;
 position: relative;

}

.dropdownContent a { 

 padding: 10px 20px;
 display: block;

}

nav li:hover { 

 background: var(--main_darker);

}

.hasNoDropdown { 

 float: left;

}

.hasNoDropdown a { 

 padding: 15px 30px;
 display: block;

}

.dropdownContentOpen li { 

 display: block;
 overflow: visible;
 opacity: 0;
 -webkit-animation: dropdown 300ms forwards;
 animation: dropdown 300ms forwards;
 z-index: 2;

}

.dropdownContentOpen li:nth-child(1) { 

 -webkit-animation-delay: 0s;
 animation-delay: 0s;

}

.dropdownContentOpen li:nth-child(2) { 

 -webkit-animation-delay: 50ms;
 animation-delay: 50ms;

}

.dropdownContentOpen li:nth-child(3) { 

 -webkit-animation-delay: 100ms;
 animation-delay: 100ms;

}

.dropdownContentOpen li:nth-child(4) { 

 -webkit-animation-delay: 150ms;
 animation-delay: 150ms;

}

.dropdownContentOpen li:nth-child(5) { 

 -webkit-animation-delay: 200ms;
 animation-delay: 200ms;

}

@-webkit-keyframes dropdown { 

 0% {
   opacity: 0;
   -webkit-transform: scale(0.6);
   transform: scale(0.6);
 }
 100% {
   opacity: 1;
   -webkit-transform: scale(1);
   transform: scale(1);
 }

}

@keyframes dropdown { 

 0% {
   opacity: 0;
   -webkit-transform: scale(0.6);
   transform: scale(0.6);
 }
 100% {
   opacity: 1;
   -webkit-transform: scale(1);
   transform: scale(1);
 }

}

  1. openSideMenu, #closeSideMenu {
 position: absolute;
 right: 0;
 top: 0;
 font-size: 30px;
 padding: 12.2px 15px 12.2px;
 display: none;
 cursor: pointer;

}

  1. closeSideMenu {
 color: var(--whiteish);
 top: 10px;
 right: 10px;

}

  1. closeSideMenu i {
 padding: 10px 15px;

}

/* footer stuffs */

footer { 

 background: var(--background);
 /* #C6C6C6; */
 padding: 30px 20px;
 min-height: -webkit-max-content;
 min-height: -moz-max-content;
 min-height: max-content;
 font-size: 14px;

}

footer>div { 

 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 justify-content: center;

}

footer #social_media, footer #contact { 

 display: inline-block;
 width: -webkit-max-content;
 width: -moz-max-content;
 width: max-content;
 position: relative;
 margin: 30px;
 text-align: center;

}

footer h1 { 

 padding-bottom: 25px;

}

footer i { 

 font-size: 50px;
 padding: 5px;
 -webkit-transition: color 0.5s 0.1s;
 transition: color 0.5s 0.1s;

}

footer #social_media a { 

 display: inline-block;

}

  1. facebook:hover {
 color: #3B5998;

}

  1. twitter:hover {
 color: #1da1f2;

}

  1. linkedin:hover {
 color: #0077B5;

}

  1. instagram:hover {
 color: #8a3ab9;

}

  1. mail:hover {
 color: #7cbb00;

}

/* References */

  1. references {
 font-size: 0.75em;

}

/* Responsiveness */

@media (max-width: 700px) { 

 .container {
   width: 100%;
   padding: 0 20px;
 }
 div#Fsos {
   font-size: calc(100vw * 0.0667 + 3.3px);
   width: 90%;
   margin: auto;
 }
 div#UnderTitle {
   font-size: calc(100vw * 0.0288 + 1.437px);
   width: 90%;
   margin: auto;
   padding: 0;
 }
 body, #contentBox {
   font-size: calc(100vw * 0.01 + 11px);
 }

}

@media (max-width: 600px) { 

 #openSideMenu {
   display: block;
   color: var(--blackish);
 }
 #sideBar {
   color: var(--whiteish);
   max-width: 300px;
   height: 100%;
   position: fixed;
   top: 0;
   right: 0px;
   background: var(--blackish);
   opacity: 0.9;
   padding-top: 100px;
   display: none;
   z-index: 1000;
 }
 nav>div>ul {
   float: left;
   padding-left: 20px;
   width: 100%;
 }
 nav>div>ul .hasdropdown {
   padding: 15px 30px;
   float: none;
   margin: auto;
 }
 .hasNoDropdown a {
   padding: 15px 30px;
   display: block;
 }
 .dropdownContentOpen {
   -webkit-animation: none;
   animation: none;
 }
 .dropdownContent {
   position: relative;
   top: 5px;
   max-width: 250px;
 }
 .dropdownContent li {
   text-align: left;
   background-color: var(--blackish);
 }
 .dropdownContent a {
   padding: 10px 10px 10px 15px;
   max-width: 210px;
 }
 nav li:hover {
   background: var(--blackish);
   color: white;
   font-size: 110%;
 }
 footer>div {
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
 }
 .countdown div#excessive {
   display: none;
 }
 .countdown div {
   font-size: 35px;
   padding: 10px;
   margin: 5px;
   -webkit-box-shadow: 0 0 7px 2px white;
   box-shadow: 0 0 7px 2px white;
 }
 .countdown span {
   font-size: 25px;
 }

}

@media (max-width: 470px) { 

 div#Fsos {
   font-size: 35px;
   width: 95%;
   margin: auto;
 }
 div#UnderTitle {
   font-size: 15px;
   width: 95%;
   margin: auto;
   padding: 0;
 }
 @media (max-width: 400px) {
   body, #contentBox {
     font-size: 15px;
   }
 }

}