Line 1: | Line 1: | ||
+ | /* TEMP */ | ||
+ | |||
+ | #globalWrapper { | ||
+ | background-color: orange; | ||
+ | } | ||
+ | |||
/* Media wiki removal | /* Media wiki removal | ||
Line 4: | Line 10: | ||
#globalWrapper { | #globalWrapper { | ||
− | + | padding-bottom: 0px; | |
− | padding-bottom: | + | |
z-index: 30; | z-index: 30; | ||
} | } | ||
− | # | + | #top_menu_14 { |
+ | opacity: 1; | ||
+ | transform: opacity .25 ease-in-out; | ||
+ | } | ||
+ | |||
+ | #top_menu_14:hover { | ||
opacity: 1; | opacity: 1; | ||
} | } | ||
Line 28: | Line 38: | ||
position: initial; | position: initial; | ||
} | } | ||
+ | |||
/* GENERAL */ | /* GENERAL */ | ||
Line 160: | Line 171: | ||
/* HEADER */ | /* HEADER */ | ||
+ | |||
+ | /* OVERWRITES FOR MENU BAR */ | ||
+ | |||
+ | ul { | ||
+ | list-style-image: none; | ||
+ | } | ||
+ | |||
+ | nav ul a:visited { | ||
+ | color: #fff; | ||
+ | } | ||
+ | |||
@media only screen and (min-width: 760px) { | @media only screen and (min-width: 760px) { | ||
− | nav { | + | nav, nav ul { |
height: 35px; | height: 35px; | ||
line-height: 36px; | line-height: 36px; |
Revision as of 15:11, 13 October 2017
/* TEMP */
- globalWrapper {
background-color: orange;
}
/* Media wiki removal
- /
- globalWrapper {
padding-bottom: 0px; z-index: 30;
}
- top_menu_14 {
opacity: 1; transform: opacity .25 ease-in-out;
}
- top_menu_14:hover {
opacity: 1;
}
.igem_2017_menu_wrapper {
z-index: 10; display: none;
}
ul {
margin-left: 0;
}
- top_menu_under {
height: 0px;
}
- top_menu_14 {
position: initial;
}
/* GENERAL */
html {
}
.mediawiki {
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.mediawiki p {
margin: 1em 0
}
.mediawiki h1 {
border-bottom: 1px solid #aaa;
}
.mediawiki h3 {
margin-top: 3rem;
}
.mediawiki h1, .mediawiki h2, .mediawiki h3, .mediawiki h4, .mediawiki h5, .mediawiki h6 {
color: rgb(34, 34, 34); font-weight: 300; font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; padding: 0;
}
.mediawiki p {
color: rgb(34, 34, 34);
}
/* Lists Skeleton –––––––––––––––––––––––––––––––––––––––––––––––––– */
ol.skel {
list-style: decimal inside; }
ol.skel, ul.skel {
padding-left: 0; margin-top: 0; list-style: disc inside;
} ul.skel ul.skel, ul.skel ol.skel, ol.skel ol.skel, ol.skel ul.skel {
margin: 1.5rem 0 1.5rem 3rem; font-size: 90%; list-style: circle inside;
} .skel li {
margin-bottom: 1rem; }
ul.skel ul.skel ul.skel {
margin: 1.5rem 0 1.5rem 6rem; list-style: square inside; font-size: 90%;
}
.flex {
display: -webkit-box; display: -ms-flexbox; display: flex;
}
.column {
-webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
}
.flex-left {
-ms-flex-item-align: start; align-self: flex-start;
}
.flex-box {
display: -webkit-box; display: -ms-flexbox; display: flex;
}
html, body {
max-width: 100%; overflow-x: hidden;
}
.block {
display: block;
}
@media only screen and (min-width: 600px) {
.align-center { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
} .align-center>div {
display: block;
}
.center-margin {
margin: auto; display: block;
}
.no-margin-wrapper {
padding: 0.1px;
}
.no-margin {
margin: 0;
}
.white-text-hack {
color: white; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default;
}
/* HEADER */
/* OVERWRITES FOR MENU BAR */
ul {
list-style-image: none;
}
nav ul a:visited {
color: #fff;
}
@media only screen and (min-width: 760px) {
nav, nav ul { height: 35px; line-height: 36px; }
}
@media only screen and (max-width: 1050px) {
#nav-buttons>li>a { max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -webkit-transition: all 1s; transition: all 1s; }
}
- nav-buttons,
- contact {
height: 35px; overflow: hidden;
}
- contact {
position: absolute; top: 0px; right: 0px;
}
- nav-buttons a:hover {
max-width: 300px;
}
.nav-wrapper {
width: 100%; margin: 0 auto;
}
@media only screen and (min-width: 993px) {
.nav-wrapper {}
}
@media only screen and (min-width: 1200px) {
.nav-wrapper { width: 95%; }
}
- nav i,
- nav span {
line-height: 36px; height: 35px;
}
.navbar-fixed {
height: 35px;
}
- nav i {
position: relative; top: -11px;
}
/* SAFARI ONLY CSS */
@media not all and (min-resolution:.001dpcm) { @media {
#nav i { top:0; } #safari-phone-hack i { top: -11px;}
} } @media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) { @media {
#nav i { top:0; } #safari-phone-hack i { top: -11px;}
} }
/* ENDED HACKING */
- nav .material-icons {
top: 0;
}
- contact a {
height: 35px
}
.menu-hover>span {
max-width: 0px; display: inline-block; overflow: hidden; -webkit-transition: all 1s; transition: all 1s;
}
@media only screen and (min-width: 1150px) {
.menu-hover:hover>span { max-width: 200px; }
}
- menu-btn {
display: none; position: fixed; top: 1em; right: 1em; z-index: 15;
}
- cross {
display: none;
}
@media only screen and (max-width: 760px) {
.navbar-fixed, nav, #nav-buttons { height: auto; } nav { display: none; } #nav-buttons>li { float: none; } #menu-btn { display: inline-block; } #nav-buttons>li>a>i, #contact>li>a>i { line-height: 64px; } #nav-buttons>li>a, #contact>li>a { height: 64px; } #nav-buttons>li>a { max-width: 275px; } #nav .fa { top: 0; } #contact { height: 64px; } #cross { display: inline-block; }
}
.show-nav {
display: block;
}
@media only screen and (max-width: 600px) {
img+img { margin-top: 2em; }
}
/* SLIDER */
.no-x-scrolling {
width: 100vw; height: 1px; overflow-x: hidden; overflow-y: visible;
}
.invisible {
visibility: hidden;
}
- animated-logo {
z-index: 10; position: relative; height: 0px; opacity: 0; -webkit-transition: opacity 1.5s ease 5.5s, left 1.5s ease 5.5s, top 1.5s ease 5.5s, visibility 0.5s ease, -webkit-transform 1.5s ease 5.5s; transition: opacity 1.5s ease 5.5s, left 1.5s ease 5.5s, top 1.5s ease 5.5s, visibility 0.5s ease, -webkit-transform 1.5s ease 5.5s; transition: transform 1.5s ease 5.5s, opacity 1.5s ease 5.5s, left 1.5s ease 5.5s, top 1.5s ease 5.5s, visibility 0.5s ease; transition: transform 1.5s ease 5.5s, opacity 1.5s ease 5.5s, left 1.5s ease 5.5s, top 1.5s ease 5.5s, visibility 0.5s ease, -webkit-transform 1.5s ease 5.5s; display: block; /* overflow: hidden;*/ left: 0; top: 0; width: 0;
}
- animated-logo.moved {
-webkit-transform: scale(0.30, 0.30) translate(-50%, 0); transform: scale(0.30, 0.30) translate(-50%, 0); left: 10vw; top: 3vh; opacity: 1; display: block;
}
.slider .slides {
background-color: white;
}
- sliding-logo img {
background-size: contain; background-repeat: no-repeat;
}
/* HERO IMAGE */
- frontpage-img {
margin-top: -18px; height: 90vh; z-index: -1;
}
.white {
background-color: #fff; z-index: 5; -webkit-box-shadow: 0px 0px 10px 20px #fff; box-shadow: 0px 0px 10px 20px #fff;
}
.white-shadow {
-webkit-box-shadow: 0px -40px 10px 10px white; box-shadow: 0px -40px 10px 10px white;
}
.hero {
background-color: #fff;
position: relative; background-blend-mode: multiply; height: 100vh; width: 100vw; margin-top: -18px; background-position: center; background-repeat: no-repeat; z-index: -1;
}
- fade-out {
-webkit-transform: translateY(-50%); transform: translateY(-50%); position: absolute; z-index: 50;
}
/*
- f7ede2
- /
.hero p {
white-space: nowrap; color: white; position: absolute; text-align: center; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin: 0; font-size: 12em; z-index: 70;
}
.hero p span, .hero p i {
}
- design p {
top: 47%; left: 57%;
}
- design {
background-image: url("");
}
- collaborations p {
top: 50%; left: 50%; color: rgb(183, 28, 28); font-size: 8em;
}
- collaborations {
background-image: url("");
} /*https://static.igem.org/mediawiki/2017/e/e8/T--TUDelft--2017_World_map_1.png*/
- newsletter p {
top: 15%; left: 50%; color: #e91e63; font-size: 9em;
}
- newsletter {
background-image: url("");
} /*https://2017.igem.org/wiki/images/8/87/T--TUDelft--2017_Letter_watercolour.png*/
- acknowlegdement p {
top: 52%; left: 45%; font-size: 4.5em;
}
- acknowlegdement {
background-image: url("");
}
- contribution p {
top: 49%; left: 46%; font-size: 8em;
}
- contribution {
background-image: url("");
}
- sponsors p {
top: 50%; left: 50%;
/* color: #ff9800;*/
}
- sponsors {
background-image: url(""); height: 85vh;
}
- IHP p {
top: 50%; left: 50%; font-size: 8em;
}
- IHP {
background-image: url("");
}
- parts p {
top: 56%; left: 38%; font-size: 9.5em;
}
- parts {
background-image: url("");
}
/* MAIN HOMEPAGE*/
- thisList li {
opacity: 0;
}
- sliding-logo {
z-index: 10;
}
- row1 {
height: 0;
} @media only screen and (max-width: 1050px) {
#row1 div, #row2 div, #row3 div, #row4 div, #row5 div, #row6 div { display: none; }
}
- row1 div {
z-index: 1;
}
- row1 img {
position: relative;
}
- row1-img2 {
top: -8vw; left: 80px; width: 70%
}
- row1-img3 {
top: -6vw; left: -40px; width: 40%;
}
- row1-img4 {
top: -8vw; left: -30px; width: 42%
}
- row1-img5 {
top: -9.5vw; left: 0; width: 90%;
}
- row1-img6 {
top: -1vw; left: -20px; width: 25%;
}
- row2 {
height: 0;
}
- row2 div {
z-index: 1;
}
- row2 img {
position: relative;
}
- row2-img1 {
top: -9vw; left: 105px; width: 85%
}
- row2-img2 {
top: -10vw; left: 70px; width: 45%
}
- row2-img3 {
top: -14vw; left: 0; width: 95%
}
- row2-img4 {
top: -12.5vw; left: -100px; width: 50%;
}
- row2-img5 {
top: -9vw; left: -100px; width: 50%
}
- row2-img6 {
top: -10vw; left: -200px; width: 27%;
}
- row3 {
height: 0;
}
- row3 div {
z-index: 1;
}
- row3 img {
position: relative;
}
- row3-img3 {
top: -8vw; left: -130px; width: 70%;
}
- row3-img4 {
top: -6vw; left: -90px; width: 20%;
}
- row3-img5 {
top: -9vw; left: -50px; width: 60%;
}
- row3-img6 {
top: -5.5vw; left: -100px; width: 70%;
}
- row4 {
height: 0;
}
- row4 div {
z-index: 1;
}
- row4 img {
position: relative;
}
- row4-img1 {
top: -5.5vw; left: 0px; width: 70%;
}
- row4-img2 {
top: -4vw; left: 0px; width: 56%;
}
- row4-img3 {
top: -5vw; left: 0px; width: 50%;
}
- row4-img4 {
top: -3.5vw; left: -10px; width: 40%;
}
- row4-img5 {
top: -4.5vw; left: -190px; width: 100%;
}
- row4-img6 {
top: -5vw; left: -190px; width: 50%;
}
- row5 {
height: 0;
}
- row5 div {
z-index: 1;
}
- row5 img {
position: relative;
}
- row5-img2 {
top: -9vw; left: 0; width: 33%;
}
- row5-img3 {
top: -3.5vw; left: -57px; width: 67%;
}
- row5-img4 {
top: -5vw; left: -30px; width: 80%;
}
- row5-img5 {
top: -3vw; left: 0; width: 80%;
}
- row5-img6 {
top: -9vw; left: 0; width: 80%;
}
- row6 {
height: 0;
}
- row6 div {
z-index: 1;
}
- row6 img {
position: relative;
}
- row6-img1 {
top: -3vw; left: 150px; width: 40%;
}
- row6-img2 {
top: -1vw; left: 0; width: 5%;
}
- row6-img3 {
top: -6vw; left: 0; width: 80%;
}
- row6-img4 {
top: -0vw; left: 0; width: 20%;
}
- row6-img5 {
top: -3vw; left: -80px; width: 80%;
}
- row6-img6 {
top: -9vw; left: 0; width: 80%;
}
- abvesicle {
width: 100px;
}
- vesicle-grass {
width: 100px;
}
- stuffvesicle {
width: 100px;
}
- vesicle-cas13a {
width: 100px;
}
- budding-vesicle {
width: 100px;
}
- vesicle-tdp {
width: 100px;
}
- vesiclecas13a {
width: 100px;
}
.scaleIn {
opacity: 0; -webkit-transition: opacity 1s ease 0.2s; transition: opacity 1s ease 0.2s;
}
.scaleIn.activated {
opacity: 1;
}
/* PAGE GENERALS */
- references a:hover {
text-decoration: underline;
}
a[href="#references"] {
color: rgb(34, 34, 34);
}
a[href="#references"]:hover {
color: grey;
}
/* FOOTER */
.sponsors img {
height: 6em; padding: 1em;
}
.sponsors > div {
display: inline-block;
}
.sponsors > div > a {
display: block; position: relative; top: -2.5em;
}
body {
display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 100vh; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
}
main {
-webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto;
}
/* TOC */
- toc {
padding: 0.1px;
}
- toc a {
color: rgb(34, 34, 34);
}
- toc a::before {
display: inline-block; width: 20px; height: 20px; content: ""; background-size: contain; background-position: center; position: relative; left: -3px; top: 3px; z-index: 10; background-image: url(""); opacity: 0; -webkit-transition: opacity .5s ease-out 0s; transition: opacity .5s ease-out 0s;
}
- toc a.active::before {
opacity: 1;
}
- toc li {
padding-left: 20px; text-indent: -20px;
}
/* TEAM */
- team-hero {
position: relative
}
- team-hero>img {
z-index: -1;
}
- hover1 {
position: absolute; top: 22%; left: 76%; height: 17%; width: 17%;
}
- hover1:hover>div {
width: 22em; opacity: 1;
}
- hover1 p {
width: 22em;
}
.weetje {
position: absolute; overflow: hidden; background-color: white; height: 5em; width: 0em; -webkit-transition: width 1s; transition: width 1s; opacity: 0; left: 100%; top: 30%; z-index: 2; border-radius: 2em; padding-left: 0.5em;
}
.weetje>img {
height: 5em; width: 5em; -o-object-fit: cover; object-fit: cover; padding: 1em; float: left;
}
- hover1:hover {
cursor: help;
}
- team-members>div {
padding: 40px;
}
- team-members img, #supervisors img {
-o-object-fit: cover; object-fit: cover; height: 20vw; width: 20vw;
}
.show-on-hover {
opacity: 0; z-index: 1; position: absolute; -webkit-transition: 1s; transition: 1s;
}
.show-on-hover:hover {
opacity: 1;
}
- team-members h4 {
font-size: 1em; font-weight: 800; margin-bottom: 0;
}
- team-members h4 + p {
margin-top: 0;
}
/* MEET UP */
- presenters img {
padding: 0 70px;
}
- presenters .align-center {
margin: 0px;
}
/* NEWSLETTER */
- mail {
background-color: white;
}
- mail .collapsible-body {
background-color: #eee;
}
- mail h1 {
border: 0;
}
- newsletter-collapsible .collapsible-header {
background-color: #e91e63; color: #fff; display: inherit; text-align: center; height: 100px; font-size: 45px;
}
- newsletter-collapsible li {
margin: 0;
}
/* TIMELINE */
- timeline {
position: fixed; top: 10%; left: 7%; width: .13em; height: 70vh; background-color: #9c27b0; border-radius: 20px;
}
- timeline a div {
height: .4em; width: .4em; border-radius: 50%; background-color: #9c27b0; left: -.13em;
}
- timeline a.active > div {
background-color: #4a148c;
}
- timeline a > div:hover {
background-color: #7b1fa2;
}
- timeline a>p {
position: absolute; top: -1.5em; left: -4.1em; width: 100px; color: rgb(34, 34, 34);
}
- timeline a p:hover {
text-decoration: underline;
}
- timeline div {
position: absolute;
}
- round23 {
top: 4vh
}
- round24 {
top: 14vh
}
- round25 {
top: 24vh;
}
- round26 {
top: 34vh;
}
- round27 {
top: 44vh;
}
- round28 {
top: 54vh;
}
- round29 {
top: 64vh;
}
/* NOTEBOOK */
- notebook-buttons .btn:not(.active){
background-color: rgb(255, 255, 255) !important; color: rgba(0, 0, 0, 0.87);
}
- notebook-buttons .btn {
text-transform: none;
}
- notebook-buttons {
padding: 20px 20px 0;
}
/* SPONSORS */
- sponsor-page .card {
padding: 2em;
}
- tu-delft > div {
margin-left: 14em;
}
/*
- testing::before {
content: ""; height: 50px; width: 50px; background-color: grey;
}
- tudelft > div::before {
content: ""; height: 50px; width: 50px; background-color: grey;
}
- /