Difference between revisions of "Team:TUDelft/css/custom"

Line 56: Line 56:
 
     font-weight: 300;
 
     font-weight: 300;
 
     font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
 
     font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
 +
    padding: 0;
 
}
 
}
  

Revision as of 12:55, 13 October 2017

/* Media wiki removal

                                                                    • /
  1. globalWrapper {
 opacity: 0;
 padding-bottom: 6px;
 z-index: 30;

}

  1. globalWrapper:hover {
 opacity: 1;

}

.igem_2017_menu_wrapper { 

 z-index: 10;
 display: none;

}

ul { 

 margin-left: 0;

}

  1. top_menu_under {
 height: 0px;

}

  1. top_menu_14 {
 position: initial;

}

/* GENERAL */

html {

}

.mediawiki {

}

.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 */

@media only screen and (min-width: 760px) { 

   nav {
       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;
   }

}

  1. nav-buttons,
  2. contact {
   height: 35px;
   overflow: hidden;

}

  1. contact {
   position: absolute;
   top: 0px;
   right: 0px;

}

  1. 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%;
   }

}

  1. nav i,
  2. nav span {
   line-height: 36px;
   height: 35px;

}

.navbar-fixed { 

   height: 35px;

}

  1. 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 */

  1. nav .material-icons {
   top: 0;

}

  1. 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;
   }

}

  1. menu-btn {
   display: none;
   position: fixed;
   top: 1em;
   right: 1em;
   z-index: 15;

}

  1. 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;

}

  1. 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;

}

  1. 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;

}

  1. sliding-logo img {
   background-size: contain;
   background-repeat: no-repeat;

}


/* HERO IMAGE */

  1. 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;

}

  1. fade-out {
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
   position: absolute;
   z-index: 50;

}

/*

  1. 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 {

}

  1. design p {
   top: 47%;
   left: 57%;

}

  1. design {
   background-image: url("T--TUDelft--another-background.png");

}

  1. collaborations p {
   top: 50%;
   left: 50%;
   color: rgb(183, 28, 28);
   font-size: 8em;

}

  1. collaborations {
   background-image: url("T--TUDelft--2017_world-map-adjusted.png");

} /*https://static.igem.org/mediawiki/2017/e/e8/T--TUDelft--2017_World_map_1.png*/

  1. newsletter p {
   top: 15%;
   left: 50%;
   color: #e91e63;
   font-size: 9em;

}

  1. newsletter {
   background-image: url("T--TUDelft--2017_Letter-adjusted.png");

} /*https://2017.igem.org/wiki/images/8/87/T--TUDelft--2017_Letter_watercolour.png*/


  1. acknowlegdement p {
   top: 52%;
   left: 45%;
   font-size: 4.5em;

}

  1. acknowlegdement {
   background-image: url("T--TUDelft--2017_Acknowledgement_stain_yellow_V2.png");

}

  1. contribution p {
   top: 49%;
   left: 46%;
   font-size: 8em;

}

  1. contribution {
   background-image: url("T--TUDelft--2017_contribution_stain_amber.png");

}

  1. sponsors p {
   top: 50%;
   left: 50%;

/* color: #ff9800;*/

}

  1. sponsors {
   background-image: url("");
   height: 85vh;

}

  1. IHP p {
   top: 50%;
   left: 50%;
   font-size: 8em;

}

  1. IHP {
   background-image: url("T--TUDelft--2017_tweekleurig.png");

}

  1. parts p {
   top: 56%;
   left: 38%;
   font-size: 9.5em;

}

  1. parts {
   background-image: url("T--TUDelft--2017_parts_vlek_v3.png");

}


/* MAIN HOMEPAGE*/


  1. thisList li {
   opacity: 0;

}

  1. sliding-logo {
   z-index: 10;

}

  1. row1 {
   height: 0;

} @media only screen and (max-width: 1050px) { 

   #row1 div, #row2 div, #row3 div, #row4 div, #row5 div, #row6 div {
       display: none;
   }

}

  1. row1 div {
   z-index: 1;

}

  1. row1 img {
   position: relative;

}

  1. row1-img2 {
   top: -8vw;
   left: 80px;
   width: 70%

}


  1. row1-img3 {
   top: -6vw;
   left: -40px;
   width: 40%;

}

  1. row1-img4 {
   top: -8vw;
   left: -30px;
   width: 42%

}

  1. row1-img5 {
   top: -9.5vw;
   left: 0;
   width: 90%;

}

  1. row1-img6 {
   top: -1vw;
   left: -20px;
   width: 25%;

}

  1. row2 {
   height: 0;

}

  1. row2 div {
   z-index: 1;

}

  1. row2 img {
   position: relative;

}


  1. row2-img1 {
   top: -9vw;
   left: 105px;
   width: 85%

}

  1. row2-img2 {
   top: -10vw;
   left: 70px;
   width: 45%

}

  1. row2-img3 {
   top: -14vw;
   left: 0;
   width: 95%

}

  1. row2-img4 {
   top: -12.5vw;
   left: -100px;
   width: 50%;

}

  1. row2-img5 {
   top: -9vw;
   left: -100px;
   width: 50%

}

  1. row2-img6 {
   top: -10vw;
   left: -200px;
   width: 27%;

}


  1. row3 {
   height: 0;

}

  1. row3 div {
   z-index: 1;

}

  1. row3 img {
   position: relative;

}

  1. row3-img3 {
   top: -8vw;
   left: -130px;
   width: 70%;

}

  1. row3-img4 {
   top: -6vw;
   left: -90px;
   width: 20%;

}

  1. row3-img5 {
   top: -9vw;
   left: -50px;
   width: 60%;

}

  1. row3-img6 {
   top: -5.5vw;
   left: -100px;
   width: 70%;

}

  1. row4 {
   height: 0;

}

  1. row4 div {
   z-index: 1;

}

  1. row4 img {
   position: relative;

}

  1. row4-img1 {
   top: -5.5vw;
   left: 0px;
   width: 70%;

}

  1. row4-img2 {
   top: -4vw;
   left: 0px;
   width: 56%;

}

  1. row4-img3 {
   top: -5vw;
   left: 0px;
   width: 50%;

}

  1. row4-img4 {
   top: -3.5vw;
   left: -10px;
   width: 40%;

}


  1. row4-img5 {
   top: -4.5vw;
   left: -190px;
   width: 100%;

}

  1. row4-img6 {
   top: -5vw;
   left: -190px;
   width: 50%;

}

  1. row5 {
   height: 0;

}

  1. row5 div {
   z-index: 1;

}

  1. row5 img {
   position: relative;

}

  1. row5-img2 {
   top: -9vw;
   left: 0;
   width: 33%;

}

  1. row5-img3 {
   top: -3.5vw;
   left: -57px;
   width: 67%;

}

  1. row5-img4 {
   top: -5vw;
   left: -30px;
   width: 80%;

}

  1. row5-img5 {
   top: -3vw;
   left: 0;
   width: 80%;

}

  1. row5-img6 {
   top: -9vw;
   left: 0;
   width: 80%;

}

  1. row6 {
   height: 0;

}

  1. row6 div {
   z-index: 1;

}

  1. row6 img {
   position: relative;

}

  1. row6-img1 {
   top: -3vw;
   left: 150px;
   width: 40%;

}

  1. row6-img2 {
   top: -1vw;
   left: 0;
   width: 5%;

}

  1. row6-img3 {
   top: -6vw;
   left: 0;
   width: 80%;

}

  1. row6-img4 {
   top: -0vw;
   left: 0;
   width: 20%;

}

  1. row6-img5 {
   top: -3vw;
   left: -80px;
   width: 80%;

}

  1. row6-img6 {
   top: -9vw;
   left: 0;
   width: 80%;

}

  1. abvesicle {
   width: 100px;

}

  1. vesicle-grass {
   width: 100px;

}

  1. stuffvesicle {
   width: 100px;

}

  1. vesicle-cas13a {
   width: 100px;

}

  1. budding-vesicle {
   width: 100px;

}

  1. vesicle-tdp {
   width: 100px;

}

  1. 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 */

  1. 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 */

  1. toc {
   padding: 0.1px;

}

  1. toc a {
   color: rgb(34, 34, 34);

}

  1. 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("T--TUDelft--2017_vesicle.png");
   opacity: 0;
   -webkit-transition: opacity .5s ease-out 0s;
   transition: opacity .5s ease-out 0s;

}

  1. toc a.active::before {
   opacity: 1;

}

  1. toc li {
   padding-left: 20px;
   text-indent: -20px;

}


/* TEAM */

  1. team-hero {
   position: relative

}

  1. team-hero>img {
   z-index: -1;

}

  1. hover1 {
   position: absolute;
   top: 22%;
   left: 76%;
   height: 17%;
   width: 17%;

}

  1. hover1:hover>div {
   width: 22em;
   opacity: 1;

}

  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;

}

  1. hover1:hover {
   cursor: help;

}

  1. team-members>div {
   padding: 40px;

}

  1. 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;

}

  1. team-members h4 {
   font-size: 1em;
   font-weight: 800;
   margin-bottom: 0;

}

  1. team-members h4 + p {
   margin-top: 0;

}

/* MEET UP */

  1. presenters img {
   padding: 0 70px;

}

  1. presenters .align-center {
   margin: 0px;

}

/* NEWSLETTER */

  1. mail {
   background-color: white;

}

  1. mail .collapsible-body {
   background-color: #eee;

}

  1. mail h1 {
   border: 0;

}

  1. newsletter-collapsible .collapsible-header {
   background-color: #e91e63;
   color: #fff;
   display: inherit;
   text-align: center;
   height: 100px;
   font-size: 45px;

}

  1. newsletter-collapsible li {
   margin: 0;

}

/* TIMELINE */

  1. timeline {
   position: fixed;
   top: 10%;
   left: 7%;
   width: .13em;
   height: 70vh;
   background-color: #9c27b0;
   border-radius: 20px;

}

  1. timeline a div {
   height: .4em;
   width: .4em;
   border-radius: 50%;
   background-color: #9c27b0;
   left: -.13em;

}

  1. timeline a.active > div {
   background-color: #4a148c;

}

  1. timeline a > div:hover {
   background-color: #7b1fa2;

}

  1. timeline a>p {
   position: absolute;
   top: -1.5em;
   left: -4.1em;
   width: 100px;
   color: rgb(34, 34, 34);

}

  1. timeline a p:hover {
   text-decoration: underline;

}

  1. timeline div {
   position: absolute;

}

  1. round23 {
   top: 4vh

}

  1. round24 {
   top: 14vh

}

  1. round25 {
   top: 24vh;

}

  1. round26 {
   top: 34vh;

}

  1. round27 {
   top: 44vh;

}

  1. round28 {
   top: 54vh;

}

  1. round29 {
   top: 64vh;

}

/* NOTEBOOK */

  1. notebook-buttons .btn:not(.active){
   background-color: rgb(255, 255, 255) !important;
   color: rgba(0, 0, 0, 0.87);

}

  1. notebook-buttons .btn {
   text-transform: none;

}

  1. notebook-buttons {
   padding: 20px 20px 0;

}

/* SPONSORS */

  1. sponsor-page .card {
   padding: 2em;

}

  1. tu-delft > div {
   margin-left: 14em;

}

/*

  1. testing::before {
   content: "";
   height: 50px;
   width: 50px; 
   background-color: grey;

}

  1. tudelft > div::before {
   content: "";
   height: 50px;
   width: 50px; 
   background-color: grey;

}

  • /