|
|
| Line 1: |
Line 1: |
| − | :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... */
| |
| − |
| |
| − | #Global p, p {
| |
| − | padding: 0;
| |
| − | padding-bottom: 5px;
| |
| − | margin: 0px;
| |
| − | line-height: 1.4;
| |
| − | }
| |
| − |
| |
| − | #Global p.meta {
| |
| − | padding: 0;
| |
| − | margin: 0;
| |
| − | }
| |
| − |
| |
| − | #Global {
| |
| − | top: -2px;
| |
| − | width: 100%;
| |
| − | position: absolute;
| |
| − | background-color: var(--whiteish);
| |
| − | color: var(--blackish);
| |
| − | font-family: Body, sans-serif;
| |
| − | }
| |
| − |
| |
| − | #globalWrapper {
| |
| − | font-size: 100%;
| |
| − | padding: 0;
| |
| − | }
| |
| − |
| |
| − | #top_menu_under, #top_menu_14, #top_menu_inside {
| |
| − | -webkit-box-sizing: content-box;
| |
| − | box-sizing: content-box;
| |
| − | }
| |
| − |
| |
| − | #top_menu_under {
| |
| − | height: 0px;
| |
| − | }
| |
| − |
| |
| − | a[href ^="https://"] {
| |
| − | padding: 0;
| |
| − | }
| |
| − |
| |
| − | #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;
| |
| − | }
| |
| − |
| |
| − | #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;
| |
| − | }
| |
| − |
| |
| − | #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);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | #openSideMenu, #closeSideMenu {
| |
| − | position: absolute;
| |
| − | right: 0;
| |
| − | top: 0;
| |
| − | font-size: 30px;
| |
| − | padding: 12.2px 15px 12.2px;
| |
| − | display: none;
| |
| − | cursor: pointer;
| |
| − | }
| |
| − |
| |
| − | #closeSideMenu {
| |
| − | color: var(--whiteish);
| |
| − | top: 10px;
| |
| − | right: 10px;
| |
| − | }
| |
| − |
| |
| − | #closeSideMenu i {
| |
| − | padding: 10px 15px;
| |
| − | }
| |
| − |
| |
| | /* footer stuffs */ | | /* footer stuffs */ |
| | | | |
| Line 507: |
Line 63: |
| | #mail:hover { | | #mail:hover { |
| | color: #7cbb00; | | color: #7cbb00; |
| − | }
| |
| − |
| |
| − | /* References */
| |
| − |
| |
| − | #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;
| |
| − | }
| |
| − | }
| |
| | } | | } |
