|
|
| (3 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| − | <!-- Declare that you are going to use html code instead of wiki code -->
| |
| − | <html>
| |
| − | <!-- Start of CSS-->
| |
| − | <style type="text/css">
| |
| | | | |
| − | /* WIKI SETTINGS*/
| |
| − |
| |
| − | /* Hide first heading */
| |
| − | .firstHeading {
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | /*-- Remove borders, float content left and remove padding/margin */
| |
| − | #globalWrapper, #content{
| |
| − | background-color: transparent;
| |
| − | border: 0px;
| |
| − | float: center;
| |
| − | margin:0 auto;
| |
| − | padding: 0px;
| |
| − | width: 100%;
| |
| − | }
| |
| − |
| |
| − | /*left align Black Menu Bar */
| |
| − | #top_menu_inside {
| |
| − | margin: 0 auto;
| |
| − | }
| |
| − |
| |
| − | /* PAGE LAYOUT */
| |
| − |
| |
| − | /* page background color*/
| |
| − | body {
| |
| − | background-color: #77525B;
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* Creates a container that will wrap all of the content inside your wiki pages. */
| |
| − | #mainContainer {
| |
| − | width: auto;
| |
| − |
| |
| − | margin: 0 auto;
| |
| − | background-color: #683f49;
| |
| − | border-bottom: 6px solid #b48a27;
| |
| − | font-family: "Open Sans", Helvetica, sans-serif;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | #main {
| |
| − | background-image:url("https://static.igem.org/mediawiki/2015/2/2d/Huskyigemtrans.png");
| |
| − | background-repeat:no-repeat;
| |
| − | background-position: 20% 6%;
| |
| − | background-size: 707.25px 636.75px;
| |
| − | }
| |
| − |
| |
| − | /* Creates the container for the menu */
| |
| − | #menuContainer {
| |
| − | width: 100%;
| |
| − | background-color: #EEEDEA;
| |
| − | height: auto;
| |
| − | border-bottom: 6px solid #b48a27;
| |
| − | font-family: "Open Sans", Helvetica, sans-serif;
| |
| − | }
| |
| − |
| |
| − | /* Creates the container for the content */
| |
| − | #contentContainer {
| |
| − | margin: 0 auto;
| |
| − | height: auto;
| |
| − | text-align: left;
| |
| − | padding: 10px;
| |
| − | padding-right:24px;
| |
| − | color: white;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /*Set up height place holder for the banner*/
| |
| − | #bannerContainer {
| |
| − | height:0;
| |
| − | padding-top:32%;
| |
| − | //background-image: url("https://static.igem.org/mediawiki/2015/6/69/Igem_front_page_UW.png");
| |
| − | //background-image: url("https://static.igem.org/mediawiki/2015/7/7b/Igem_skyline_seattle.png");
| |
| − | background-image: url("https://static.igem.org/mediawiki/2015/d/d6/Igem_banner.jpg");
| |
| − | background-repeat: no-repeat;
| |
| − | background-size: 100%;
| |
| − | width: 100%;
| |
| − | margin:auto;
| |
| − | text-align:center;
| |
| − | }
| |
| − |
| |
| − | #wrapper{
| |
| − | width: 960px;
| |
| − | margin:0 auto:
| |
| − | text-align:center;
| |
| − | }
| |
| − |
| |
| − | /*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */
| |
| − |
| |
| − |
| |
| − | /*Change the styling of text for everything inside main container*/
| |
| − | #mainContainer p, p2 {
| |
| − | font-family: "Open Sans", Helvetica, sans-serif;
| |
| − | font-size: 12px;
| |
| − | color: #0e232f;
| |
| − | width: 95%;
| |
| − | line-height: 200%;
| |
| − | line-spacing: 10px;
| |
| − | }
| |
| − |
| |
| − | /*This changes the color and font family */
| |
| − | #contentContainer h2, h3, h4, h5, h6 {
| |
| − | font-family: "Uni Sans", Helvetica, sans-serif;
| |
| − | color: white;
| |
| − | line-spacing: 5px;
| |
| − | border-bottom: none;
| |
| − | font-weight: bold;
| |
| − | font-size: 25px;
| |
| − | line-height:100%;
| |
| − | padding-top: 1em;
| |
| − | padding-bottom: 1em;
| |
| − | text-align: center;
| |
| − | margin-right: 20%;
| |
| − | margin-left: 20%;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | #contentContainer h1 {
| |
| − | font-family: "Uni Sans", Helvetica, sans-serif;
| |
| − | color: white;
| |
| − | line-spacing: 5px;
| |
| − | border-bottom: none;
| |
| − | font-weight: bold;
| |
| − | font-size: 25px;
| |
| − | line-height:100%;
| |
| − | padding-top: 1em;
| |
| − | padding-bottom: 1em;
| |
| − | margin-right: 20%;
| |
| − | margin-left: 20%;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | #contentContainer p {
| |
| − | margin-right: 20%;
| |
| − | margin-left: 20%;
| |
| − | font-family: "Uni Sans", Helvetica, sans-serif;
| |
| − | color: white;
| |
| − | line-spacing: 5px;
| |
| − | border-bottom: none;
| |
| − | font-weight: normal;
| |
| − | line-height: 200%;
| |
| − | font-size: 15.5px;
| |
| − | }
| |
| − |
| |
| − | #contentContainer p1 {
| |
| − | font-family: "Uni Sans", Helvetica, sans-serif;
| |
| − | color: white;
| |
| − | line-spacing: 5px;
| |
| − | border-bottom: none;
| |
| − | font-weight: normal;
| |
| − | line-height: 200%;
| |
| − | font-size: 15.5px;
| |
| − | }
| |
| − | #contentContainer p2 {
| |
| − | margin-right: 30%;
| |
| − | margin-left: 30%;
| |
| − | font-family: "Uni Sans", Helvetica, sans-serif;
| |
| − | color: white;
| |
| − | line-spacing: 5px;
| |
| − | border-bottom: none;
| |
| − | font-weight: normal;
| |
| − | line-height: 200%;
| |
| − | font-size: 15.5px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /*Style of the links - links are different inside the menu */
| |
| − | #contentContainer a {
| |
| − | font-family: "Open Sans", sans-serif;
| |
| − | font-weight: bold;
| |
| − | color: #85754d;
| |
| − | }
| |
| − |
| |
| − | /* Styling links on hover- links are different inside the menu */
| |
| − | #contentContainer a:hover{
| |
| − | color: #85754d;
| |
| − | }
| |
| − |
| |
| − | /*Change the styling of tables */
| |
| − | #contentContainer table {
| |
| − | border: 1px solid #0e232f;
| |
| − | border-collapse: collapse;
| |
| − | width: 90%
| |
| − | margin: auto;
| |
| − | margin-bottom: 15px;
| |
| − | margin-top: 15px;
| |
| − | margin-right: 10px;
| |
| − | margin-left: 10px;
| |
| − | }
| |
| − |
| |
| − | /*Change the styling of table cells*/
| |
| − | #contentContainer td {
| |
| − | padding: 10px;
| |
| − | border: 1px solid #0e232f;
| |
| − | border-collapse: collapse;
| |
| − | vertical-align: text-top;
| |
| − | background-color: #EEEDEA;
| |
| − | }
| |
| − |
| |
| − | /*Change the styling of table headers */
| |
| − | #contentContainer th {
| |
| − | padding: 10px;
| |
| − | border: 1px solid #0e232f;
| |
| − | border-collapse: collapse;
| |
| − | vertical-align: text-top;
| |
| − | background-color: #e8d5b7;
| |
| − | }
| |
| − |
| |
| − | #links {
| |
| − | display: inline-block;
| |
| − | position: relative;
| |
| − | width: 450px;
| |
| − | height: 450px;
| |
| − | float: inherit;
| |
| − | }
| |
| − |
| |
| − | #links p {
| |
| − | text-align: right;
| |
| − | padding-top: 10px;
| |
| − | padding-bottom: 10px;
| |
| − | }
| |
| − |
| |
| − | #links a {
| |
| − | font-size: 24px;
| |
| − | font-weight: bold;
| |
| − | font-family: "Encode Sans Normal";
| |
| − | color: #4b2e83;
| |
| − | text-decoration: none;
| |
| − | }
| |
| − |
| |
| − | #links a:hover {
| |
| − | font-size: 36px;
| |
| − | }
| |
| − |
| |
| − | img {
| |
| − | float: center;
| |
| − | margin: 0px 0px 15px 20px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /*MENU STYLING */
| |
| − |
| |
| − | /*Styling for the links in the menu */
| |
| − | #menuContainer ul a {
| |
| − | color: #4b2e83;
| |
| − | text-decoration:none;
| |
| − | font-weight: bold;
| |
| − | font-size: 16px;
| |
| − | }
| |
| − |
| |
| − | /* Sets the style for lists inside menuContainer */
| |
| − | #menuContainer > ul {
| |
| − | list-style: none;
| |
| − | margin-left: auto;
| |
| − | margin-right: auto;
| |
| − | margin-bottom: 0px;
| |
| − | margin-top: -7px;
| |
| − | padding-left: 0px;
| |
| − | padding-right: 0px;
| |
| − | text-align: center;
| |
| − | z-index: 1;
| |
| − | width: auto;
| |
| − | max-width: 950px;
| |
| − | height: auto;
| |
| − | background: #ffffff;
| |
| − | font-style: bold;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | /*Styles the list items to become menu buttons */
| |
| − | #menuContainer ul li {
| |
| − | display: inline-block;
| |
| − | width: 100px;
| |
| − | padding: 21px 5px 20px 5px;
| |
| − | position: relative;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | #menuContainer ul li:hover {
| |
| − | background: #d9d9d9;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /*HIde the submenus and removes the padding */
| |
| − | #menuContainer ul li ul {
| |
| − | display: none;
| |
| − | margin-top: 20px;
| |
| − | position: absolute;
| |
| − | margin-left: -5px;
| |
| − | z-index: 1;
| |
| − | font-style: normal;
| |
| − | }
| |
| − |
| |
| − | /*Shows the submenus once you hover*/
| |
| − | #menuContainer ul li:hover ul {
| |
| − | display: block;
| |
| − | }
| |
| − |
| |
| − | /*style the submenu buttons*/
| |
| − | #menuContainer ul li ul li {
| |
| − | display: block;
| |
| − | background: #0E232F;
| |
| − | padding: 10px 5px 10px 5px;
| |
| − | }
| |
| − |
| |
| − | #menuContainer ul li ul li:hover {
| |
| − | background: #444444;
| |
| − | color: #fff;
| |
| − | }
| |
| − |
| |
| − | #menuContainer li ul a {
| |
| − | color: #ffffff;
| |
| − | text-decoration:none;
| |
| − | font-weight: bold;
| |
| − | font-size: 12px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | /*CLASSES */
| |
| − | /*Clear class for all the pages, adds spacing too*/
| |
| − | .clear{
| |
| − | clear:both;
| |
| − | height: 10px;
| |
| − | }
| |
| − |
| |
| − | /* highlight box for special messages */
| |
| − | .highlightBox {
| |
| − | width:500px;
| |
| − | margin:auto;
| |
| − | background-color: #E8D5B7;
| |
| − | margin-bottom: 15px;
| |
| − | margin-top: 15px;
| |
| − | padding: 15px;
| |
| − | padding-top: 5px;
| |
| − | }
| |
| − | /* side bar css */
| |
| − | #sidebar {
| |
| − | width:200px;
| |
| − | float:right;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* navigation */
| |
| − | nav {
| |
| − | width:300px;
| |
| − | background-color:rgb(240,240,240);
| |
| − | border:solid 1px rgb(220,220,220);
| |
| − | padding:0 12px;
| |
| − | }
| |
| − |
| |
| − | nav.stick {
| |
| − | position: fixed;
| |
| − | top: 12px;
| |
| − | z-index: 10000;
| |
| − | margin-top:12px;
| |
| − | }
| |
| − |
| |
| − | nav ul {
| |
| − | margin:0;
| |
| − | padding:0;
| |
| − | list-style-image:url("https://static.igem.org/mediawiki/2015/e/e9/Replace_pixel_washington.png");
| |
| − | }
| |
| − |
| |
| − | nav li {
| |
| − |
| |
| − | }
| |
| − |
| |
| − | nav li a {
| |
| − |
| |
| − | color:rgb(50,50,50);
| |
| − | font-weight:700;
| |
| − | color: #000;
| |
| − | float: left;
| |
| − | }
| |
| − |
| |
| − | a.nav-active {
| |
| − | color:#ccc;
| |
| − | }
| |
| − |
| |
| − | ul#tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; margin-right: 20%; margin-left: 20%; }
| |
| − | ul#tabs li { display: inline; }
| |
| − | ul#tabs li a { color: #42454a; background-color: #dedbde; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.3em; text-decoration: none; font-size: 17px; }
| |
| − | ul#tabs li a:hover { background-color: #f1f0ee; }
| |
| − | ul#tabs li a.selected { color: #000; background-color: #f1f0ee; font-size: 18px; padding: 0.7em 0.3em 0.38em 0.3em; }
| |
| − | div.tabContent { border: 1px solid #c9c3ba; padding: 1.5em; background-color: #b7a57a; font-size: 16px; line-height:1.5em; margin-right: 20%; margin-left: 20%;}
| |
| − | div.tabContent.hide { display: none; }
| |
| − |
| |
| − |
| |
| − | .cd-nugget-info {
| |
| − | text-align: center;
| |
| − | position: absolute;
| |
| − | width: 100%;
| |
| − | height: 50px;
| |
| − | line-height: 50px;
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | }
| |
| − | .cd-nugget-info a {
| |
| − | position: relative;
| |
| − | display: inline-block;
| |
| − | padding: 0 1em;
| |
| − | font-size: 14px;
| |
| − | color: #fff;
| |
| − | background-color: #f25f5c;
| |
| − | -webkit-transition: all 0.2s;
| |
| − | -moz-transition: all 0.2s;
| |
| − | transition: all 0.2s;
| |
| − | }
| |
| − | .no-touch .cd-nugget-info a:hover {
| |
| − | opacity: .8;
| |
| − | }
| |
| − | .cd-nugget-info span {
| |
| − | vertical-align: middle;
| |
| − | display: inline-block;
| |
| − | }
| |
| − | .cd-nugget-info span svg {
| |
| − | display: block;
| |
| − | }
| |
| − | .cd-nugget-info .cd-nugget-info-arrow {
| |
| − | fill: #fff;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | main {
| |
| − | position: relative;
| |
| − | z-index: 2;
| |
| − | -webkit-transition-property: -webkit-transform;
| |
| − | -moz-transition-property: -moz-transform;
| |
| − | transition-property: transform;
| |
| − | -webkit-transition-duration: 0.3s;
| |
| − | -moz-transition-duration: 0.3s;
| |
| − | transition-duration: 0.3s;
| |
| − | }
| |
| − | main.slide-out {
| |
| − | /* the main element slides to the left when the author bio is visible */
| |
| − | -webkit-transform: translateX(-270px);
| |
| − | -moz-transform: translateX(-270px);
| |
| − | -ms-transform: translateX(-270px);
| |
| − | -o-transform: translateX(-270px);
| |
| − | transform: translateX(-270px);
| |
| − | }
| |
| − | main.slide-out .cd-overlay {
| |
| − | /* the overlay layer gets visible when the author bio slides in */
| |
| − | display: block;
| |
| − | -webkit-animation: cd-fade-in 0.3s;
| |
| − | -moz-animation: cd-fade-in 0.3s;
| |
| − | animation: cd-fade-in 0.3s;
| |
| − | }
| |
| − | @media only screen and (min-width: 768px) {
| |
| − | main.slide-out {
| |
| − | /* change in size of the author bio section */
| |
| − | -webkit-transform: translateX(-600px);
| |
| − | -moz-transform: translateX(-600px);
| |
| − | -ms-transform: translateX(-600px);
| |
| − | -o-transform: translateX(-600px);
| |
| − | transform: translateX(-600px);
| |
| − | }
| |
| − | }
| |
| − | @media only screen and (min-width: 1200px) {
| |
| − | main.slide-out {
| |
| − | -webkit-transform: translateX(-800px);
| |
| − | -moz-transform: translateX(-800px);
| |
| − | -ms-transform: translateX(-800px);
| |
| − | -o-transform: translateX(-800px);
| |
| − | transform: translateX(-800px);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | .cd-section {
| |
| − | padding: 2em 0;
| |
| − | text-align: center;
| |
| − | }
| |
| − | .cd-section .cd-container {
| |
| − | /* this modifies the .cd-container default max-width */
| |
| − | max-width: 768px;
| |
| − | }
| |
| − | .cd-section h2 {
| |
| − | font-family: "Droid Sans", sans-serif;
| |
| − | font-weight: bold;
| |
| − | text-transform: uppercase;
| |
| − | margin-bottom: 1em;
| |
| − | font-size: 20px;
| |
| − | font-size: 1.25rem;
| |
| − | }
| |
| − | .cd-section p {
| |
| − | line-height: 1.4;
| |
| − | }
| |
| − | @media only screen and (min-width: 768px) {
| |
| − | .cd-section {
| |
| − | padding: 4em;
| |
| − | }
| |
| − | .cd-section p {
| |
| − | line-height: 1.6;
| |
| − | }
| |
| − | }
| |
| − | @media only screen and (min-width: 1200px) {
| |
| − | .cd-section {
| |
| − | padding: 6em;
| |
| − | }
| |
| − | .cd-section h2 {
| |
| − | margin-bottom: 2em;
| |
| − | }
| |
| − | .cd-section p {
| |
| − | line-height: 1.8;
| |
| − | font-size: 18px;
| |
| − | font-size: 1.125rem;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | header {
| |
| − | background: #f2ecbd;
| |
| − | position: relative;
| |
| − | padding: 6em 0 2em !important;
| |
| − | }
| |
| − | header h1 {
| |
| − | font-size: 30px;
| |
| − | font-size: 1.875rem;
| |
| − | font-family: "Droid Sans", sans-serif;
| |
| − | font-weight: bold;
| |
| − | text-transform: uppercase;
| |
| − | margin-bottom: .4em;
| |
| − | color: #3e380c;
| |
| − | }
| |
| − | header p {
| |
| − | font-size: 13px;
| |
| − | font-size: 0.8125rem;
| |
| − | color: #93861d;
| |
| − | }
| |
| − |
| |
| − | .cd-placeholder-1 {
| |
| − | background: #f25f5c;
| |
| − | color: #fdeaea;
| |
| − | }
| |
| − |
| |
| − | .cd-placeholder-2 {
| |
| − | background: #FFF;
| |
| − | }
| |
| − |
| |
| − | #cd-team {
| |
| − | background: #8abeb2;
| |
| − | }
| |
| − | #cd-team .cd-container {
| |
| − | max-width: 1200px;
| |
| − | }
| |
| − | #cd-team h2 {
| |
| − | color: #1a2f2a;
| |
| − | }
| |
| − | #cd-team li {
| |
| − | margin-bottom: 2em;
| |
| − | border-radius: 0.25em;
| |
| − | box-shadow: 0 0 10px rgba(92, 75, 81, 0);
| |
| − | -webkit-transition: all 0.3s;
| |
| − | -moz-transition: all 0.3s;
| |
| − | transition: all 0.3s;
| |
| − | }
| |
| − | .no-touch #cd-team li:hover {
| |
| − | box-shadow: 0 0 10px rgba(92, 75, 81, 0.3);
| |
| − | }
| |
| − | .no-touch #cd-team li:hover .cd-img-overlay {
| |
| − | opacity: 1;
| |
| − | }
| |
| − | #cd-team figure {
| |
| − | position: relative;
| |
| − | }
| |
| − | #cd-team img {
| |
| − | display: block;
| |
| − | width: 100%;
| |
| − | border-radius: .25em .25em 0 0;
| |
| − | }
| |
| − | #cd-team .cd-img-overlay {
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | background: rgba(92, 75, 81, 0.9);
| |
| − | opacity: 0;
| |
| − | border-radius: .25em .25em 0 0;
| |
| − | -webkit-transition: opacity 0.3s;
| |
| − | -moz-transition: opacity 0.3s;
| |
| − | transition: opacity 0.3s;
| |
| − | }
| |
| − | #cd-team .cd-img-overlay span {
| |
| − | position: absolute;
| |
| − | left: 50%;
| |
| − | top: 50%;
| |
| − | bottom: auto;
| |
| − | right: auto;
| |
| − | -webkit-transform: translateX(-50%) translateY(-50%);
| |
| − | -moz-transform: translateX(-50%) translateY(-50%);
| |
| − | -ms-transform: translateX(-50%) translateY(-50%);
| |
| − | -o-transform: translateX(-50%) translateY(-50%);
| |
| − | transform: translateX(-50%) translateY(-50%);
| |
| − | color: #FFF;
| |
| − | }
| |
| − | #cd-team .cd-member-info {
| |
| − | height: 80px;
| |
| − | background: #FFF;
| |
| − | text-align: center;
| |
| − | font-family: "Droid Sans", sans-serif;
| |
| − | font-weight: bold;
| |
| − | padding-top: 20px;
| |
| − | border-radius: 0 0 .25em .25em;
| |
| − | }
| |
| − | #cd-team .cd-member-info span {
| |
| − | display: block;
| |
| − | font-family: "Droid Serif", serif;
| |
| − | font-weight: normal;
| |
| − | color: #999999;
| |
| − | font-size: 14px;
| |
| − | font-size: 0.875rem;
| |
| − | margin-top: .5em;
| |
| − | }
| |
| − | @media only screen and (min-width: 768px) {
| |
| − | #cd-team li {
| |
| − | width: 31%;
| |
| − | float: left;
| |
| − | margin-right: 3.5%;
| |
| − | }
| |
| − | #cd-team li:nth-child(3n) {
| |
| − | margin-right: 0;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | .cd-member-bio {
| |
| − | position: fixed;
| |
| − | top: 0;
| |
| − | right: 0;
| |
| − | width: 270px;
| |
| − | height: 100%;
| |
| − | overflow-y: auto;
| |
| − | /* smooth scrolling on mobile phones and tablets */
| |
| − | -webkit-overflow-scrolling: touch;
| |
| − | background: #5c4b51;
| |
| − | z-index: 1;
| |
| − | /* this how we move the author bio section off the canvas */
| |
| − | -webkit-transform: translateX(270px);
| |
| − | -moz-transform: translateX(270px);
| |
| − | -ms-transform: translateX(270px);
| |
| − | -o-transform: translateX(270px);
| |
| − | transform: translateX(270px);
| |
| − | -webkit-transition-property: -webkit-transform;
| |
| − | -moz-transition-property: -moz-transform;
| |
| − | transition-property: transform;
| |
| − | -webkit-transition-duration: 0.3s;
| |
| − | -moz-transition-duration: 0.3s;
| |
| − | transition-duration: 0.3s;
| |
| − | }
| |
| − | .cd-member-bio.slide-in {
| |
| − | /* the author bio section slides in when the user clicks on the team member picture */
| |
| − | -webkit-transform: translateX(0);
| |
| − | -moz-transform: translateX(0);
| |
| − | -ms-transform: translateX(0);
| |
| − | -o-transform: translateX(0);
| |
| − | transform: translateX(0);
| |
| − | }
| |
| − | .cd-member-bio .cd-member-bio-pict {
| |
| − | position: relative;
| |
| − | }
| |
| − | .cd-member-bio .cd-member-bio-pict::after {
| |
| − | /* gradient at the bottom of the image - same color of the background of the section */
| |
| − | content: '';
| |
| − | position: absolute;
| |
| − | bottom: 0;
| |
| − | left: 0;
| |
| − | width: 100%;
| |
| − | height: 80px;
| |
| − | background: -webkit-linear-gradient( bottom , #5c4b51, rgba(92, 75, 81, 0));
| |
| − | background: linear-gradient(to top, #5c4b51, rgba(92, 75, 81, 0));
| |
| − | }
| |
| − | .no-cssgradients .cd-member-bio .cd-member-bio-pict::after {
| |
| − | display: none;
| |
| − | }
| |
| − | .cd-member-bio img {
| |
| − | width: 100%;
| |
| − | display: block;
| |
| − | }
| |
| − | .cd-member-bio .cd-bio-content {
| |
| − | padding: 1em;
| |
| − | color: #FFF;
| |
| − | }
| |
| − | .cd-member-bio .cd-bio-content h1 {
| |
| − | font-family: "Droid Sans", sans-serif;
| |
| − | font-weight: bold;
| |
| − | text-transform: uppercase;
| |
| − | text-align: center;
| |
| − | font-size: 20px;
| |
| − | font-size: 1.25rem;
| |
| − | }
| |
| − | .cd-member-bio .cd-bio-content p {
| |
| − | font-size: 14px;
| |
| − | font-size: 0.875rem;
| |
| − | margin: 1em 0;
| |
| − | line-height: 1.4;
| |
| − | color: #d7cfd2;
| |
| − | }
| |
| − | @media only screen and (min-width: 768px) {
| |
| − | .cd-member-bio {
| |
| − | width: 600px;
| |
| − | -webkit-transform: translateX(600px);
| |
| − | -moz-transform: translateX(600px);
| |
| − | -ms-transform: translateX(600px);
| |
| − | -o-transform: translateX(600px);
| |
| − | transform: translateX(600px);
| |
| − | }
| |
| − | .cd-member-bio .cd-bio-content {
| |
| − | padding: 2em;
| |
| − | }
| |
| − | .cd-member-bio .cd-bio-content p {
| |
| − | line-height: 1.6;
| |
| − | margin: 2em 0;
| |
| − | }
| |
| − | }
| |
| − | @media only screen and (min-width: 1200px) {
| |
| − | .cd-member-bio {
| |
| − | width: 800px;
| |
| − | -webkit-transform: translateX(800px);
| |
| − | -moz-transform: translateX(800px);
| |
| − | -ms-transform: translateX(800px);
| |
| − | -o-transform: translateX(800px);
| |
| − | transform: translateX(800px);
| |
| − | }
| |
| − | .cd-member-bio .cd-member-bio-pict::after {
| |
| − | height: 150px;
| |
| − | }
| |
| − | .cd-member-bio .cd-bio-content {
| |
| − | padding: 4em;
| |
| − | /* we move the content up so the title is over the color gradient */
| |
| − | -webkit-transform: translateY(-80px);
| |
| − | -moz-transform: translateY(-80px);
| |
| − | -ms-transform: translateY(-80px);
| |
| − | -o-transform: translateY(-80px);
| |
| − | transform: translateY(-80px);
| |
| − | }
| |
| − | .cd-member-bio .cd-bio-content h1 {
| |
| − | font-size: 40px;
| |
| − | font-size: 2.5rem;
| |
| − | }
| |
| − | .cd-member-bio .cd-bio-content p {
| |
| − | font-size: 16px;
| |
| − | font-size: 1rem;
| |
| − | }
| |
| − | .no-cssgradients .cd-member-bio .cd-bio-content {
| |
| − | -webkit-transform: translateY(0);
| |
| − | -moz-transform: translateY(0);
| |
| − | -ms-transform: translateY(0);
| |
| − | -o-transform: translateY(0);
| |
| − | transform: translateY(0);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | .cd-member-bio-close {
| |
| − | width: 32px;
| |
| − | height: 32px;
| |
| − | overflow: hidden;
| |
| − | position: fixed;
| |
| − | top: 10px;
| |
| − | right: 10px;
| |
| − | background: url("../img/cd-icon-close.svg") no-repeat center center;
| |
| − | text-indent: 100%;
| |
| − | white-space: nowrap;
| |
| − | z-index: 3;
| |
| − | display: none;
| |
| − | }
| |
| − | .cd-member-bio-close.is-visible {
| |
| − | display: block;
| |
| − | -webkit-animation: cd-move-in 0.8s;
| |
| − | -moz-animation: cd-move-in 0.8s;
| |
| − | animation: cd-move-in 0.8s;
| |
| − | }
| |
| − | @media only screen and (min-width: 1200px) {
| |
| − | .cd-member-bio-close {
| |
| − | right: 20px;
| |
| − | top: 20px;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | .cd-overlay {
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | background: rgba(138, 190, 178, 0.8);
| |
| − | cursor: pointer;
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | </style>
| |
| − | <!-- End of CSS -->
| |
| − | <head>
| |
| − | <script data-require="jquery-cookie@1.3.1" data-semver="1.3.1" src="https://2015.igem.org/Template:Washington_jquary?action=raw&ctype=text/javascript" type="text/javascript"></script>
| |
| − | <script type="text/javascript">
| |
| − | $(document).ready(function () {
| |
| − | // Read the cookie and if it's defined scroll to id
| |
| − | var scroll = $.cookie('scroll');
| |
| − | if(scroll){
| |
| − | scrollToID(scroll, 1000);
| |
| − | $.removeCookie('scroll');
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | }
| |
| − |
| |
| − | // Handle event onclick, setting the cookie when the href != #
| |
| − | $('.nav a').click(function (e) {
| |
| − | e.preventDefault();
| |
| − | var id = $(this).data('id');
| |
| − | var href = $(this).attr('href');
| |
| − | if(href === '#'){
| |
| − | scrollToID(id, 1000);
| |
| − | }else{
| |
| − | $.cookie('scroll', id);
| |
| − | window.location.href = href;
| |
| − | }
| |
| − | });
| |
| − |
| |
| − | // scrollToID function
| |
| − | function scrollToID(id, speed) {
| |
| − | var offSet = 70;
| |
| − | var obj = $('#' + id).offset();
| |
| − | var targetOffset = obj.top - offSet;
| |
| − | $('html,body').animate({ scrollTop: targetOffset }, speed);
| |
| − | }
| |
| − | $(window).scroll(function(){
| |
| − | var window_top = $(window).scrollTop() + 12; // the "12" should equal the margin-top value for nav.stick
| |
| − | var div_top = $('#nav-anchor').offset().top;
| |
| − | if (window_top > div_top) {
| |
| − | $('nav').addClass('stick');
| |
| − | } else {
| |
| − | $('nav').removeClass('stick');
| |
| − | }
| |
| − | });
| |
| − |
| |
| − | });
| |
| − |
| |
| − | $(document).ready(function(e){
| |
| − | var str= location.hash;
| |
| − | var n=str.replace("_temp","");
| |
| − | $('html,body').animate({scrollTop:$(n).offset().top}, 1000);
| |
| − | });
| |
| − |
| |
| − |
| |
| − | /* to make the sidebar anchor*/
| |
| − |
| |
| − |
| |
| − | var tabLinks = new Array();
| |
| − | var contentDivs = new Array();
| |
| − |
| |
| − | function init() {
| |
| − |
| |
| − | // Grab the tab links and content divs from the page
| |
| − | var tabListItems = document.getElementById('tabs').childNodes;
| |
| − | for ( var i = 0; i < tabListItems.length; i++ ) {
| |
| − | if ( tabListItems[i].nodeName == "LI" ) {
| |
| − | var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
| |
| − | var id = getHash( tabLink.getAttribute('href') );
| |
| − | tabLinks[id] = tabLink;
| |
| − | contentDivs[id] = document.getElementById( id );
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | // Assign onclick events to the tab links, and
| |
| − | // highlight the first tab
| |
| − | var i = 0;
| |
| − |
| |
| − | for ( var id in tabLinks ) {
| |
| − | tabLinks[id].onclick = showTab;
| |
| − | tabLinks[id].onfocus = function() { this.blur() };
| |
| − | if ( i == 0 ) tabLinks[id].className = 'selected';
| |
| − | i++;
| |
| − | }
| |
| − |
| |
| − | // Hide all content divs except the first
| |
| − | var i = 0;
| |
| − |
| |
| − | for ( var id in contentDivs ) {
| |
| − | if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
| |
| − | i++;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | function showTab() {
| |
| − | var selectedId = getHash( this.getAttribute('href') );
| |
| − |
| |
| − | // Highlight the selected tab, and dim all others.
| |
| − | // Also show the selected content div, and hide all others.
| |
| − | for ( var id in contentDivs ) {
| |
| − | if ( id == selectedId ) {
| |
| − | tabLinks[id].className = 'selected';
| |
| − | contentDivs[id].className = 'tabContent';
| |
| − | } else {
| |
| − | tabLinks[id].className = '';
| |
| − | contentDivs[id].className = 'tabContent hide';
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | // Stop the browser following the link
| |
| − | return false;
| |
| − | }
| |
| − |
| |
| − | function getFirstChildWithTagName( element, tagName ) {
| |
| − | for ( var i = 0; i < element.childNodes.length; i++ ) {
| |
| − | if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | function getHash( url ) {
| |
| − | var hashPos = url.lastIndexOf ( '#' );
| |
| − | return url.substring( hashPos + 1 );
| |
| − | }
| |
| − |
| |
| − | @-webkit-keyframes cd-fade-in {
| |
| − | 0% {
| |
| − | opacity: 0;
| |
| − | }
| |
| − | 100% {
| |
| − | opacity: 1;
| |
| − | }
| |
| − | }
| |
| − | @-moz-keyframes cd-fade-in {
| |
| − | 0% {
| |
| − | opacity: 0;
| |
| − | }
| |
| − | 100% {
| |
| − | opacity: 1;
| |
| − | }
| |
| − | }
| |
| − | @keyframes cd-fade-in {
| |
| − | 0% {
| |
| − | opacity: 0;
| |
| − | }
| |
| − | 100% {
| |
| − | opacity: 1;
| |
| − | }
| |
| − | }
| |
| − | @-webkit-keyframes cd-move-in {
| |
| − | 0% {
| |
| − | -webkit-transform: translateX(100px);
| |
| − | }
| |
| − | 100% {
| |
| − | -webkit-transform: translateX(0);
| |
| − | }
| |
| − | }
| |
| − | @-moz-keyframes cd-move-in {
| |
| − | 0% {
| |
| − | -moz-transform: translateX(100px);
| |
| − | }
| |
| − | 100% {
| |
| − | -moz-transform: translateX(0);
| |
| − | }
| |
| − | }
| |
| − | @keyframes cd-move-in {
| |
| − | 0% {
| |
| − | -webkit-transform: translateX(100px);
| |
| − | -moz-transform: translateX(100px);
| |
| − | -ms-transform: translateX(100px);
| |
| − | -o-transform: translateX(100px);
| |
| − | transform: translateX(100px);
| |
| − | }
| |
| − | 100% {
| |
| − | -webkit-transform: translateX(0);
| |
| − | -moz-transform: translateX(0);
| |
| − | -ms-transform: translateX(0);
| |
| − | -o-transform: translateX(0);
| |
| − | transform: translateX(0);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | </script>
| |
| − | </head>
| |
| − | <!-- Start of the template html elements. -->
| |
| − | <div id ="mainContainer">
| |
| − | <!--This div will close on the page.-->
| |
| − | <div id="bannerContainer">
| |
| − | <br>
| |
| − | <br>
| |
| − | </div>
| |
| − | </div>
| |
| − | <!-- Start of menu -->
| |
| − | <!-- End of menu -->
| |
| − | <!-- Start of content -->
| |
| − | </html>
| |