Difference between revisions of "Template:Chalmers-Gothenburg"
(54 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
{{Template_All_Teams}} | {{Template_All_Teams}} | ||
− | |||
<html> | <html> | ||
− | |||
− | |||
− | + | <!-- custom body font --> | |
+ | <link href='http://fonts.googleapis.com/css?family=Slabo+27px|Oswald' rel='stylesheet' type='text/css'> | ||
− | + | <link rel="stylesheet" href="https://2015.igem.org/Team:UC_San_Diego/lightboxcss?action=raw&ctype=text/css"> | |
− | + | ||
− | + | ||
− | + | ||
− | + | <script> | |
− | + | $(function(){ // document ready | |
− | + | if($(window).width() >= 1200){ | |
− | + | var stickyTop = $('#section1-menu').offset().top; // returns number | |
− | + | $(window).scroll(function(){ // scroll event | |
− | + | var windowTop = $(window).scrollTop(); // returns number | |
− | + | if (stickyTop < windowTop+60) { | |
− | + | $('#section1-menu').css({ position: 'fixed', top: 60 }); | |
− | + | $('#section1-menu').css({'margin-top':'0px'}); | |
− | + | $('#section1-toc').css({ position: 'fixed', top: 60 }); | |
− | + | } | |
− | + | else { | |
− | + | $('#section1-menu').css('position','static'); | |
− | + | $('#section1-menu').css({'margin-top':'120px'}); | |
+ | $('#section1-toc').css('position','static'); | ||
+ | } | ||
+ | }); | ||
+ | } | ||
+ | }); | ||
+ | </script> | ||
− | + | <style type="text/css"> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | /* body heading fonts */ | |
− | + | h2, h3 { font-family: Oswald, sans-serif; } | |
− | + | h4 { font-family: 'Slabo 27px', serif; } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | /* | |
− | + | * default stylesheet overrides | |
− | + | */ | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | body { | |
+ | background-color: #ffffff; | ||
+ | font-family: 'Slabo 27px', serif; | ||
+ | font-size: 13pt; | ||
+ | color: #444444; | ||
+ | } | ||
− | + | /* reset margins & paddings */ | |
− | + | html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, dl, | |
− | + | dt, dd, blockquote, address { | |
− | + | margin: 0; | |
− | + | padding: 0; | |
− | + | border: 0; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | /* center the wiki top menu */ | |
− | + | #top_menu_inside { | |
− | + | margin: auto; | |
− | + | } | |
− | + | ||
− | + | /* enable use of full browser width */ | |
− | + | #globalWrapper, #content { | |
− | + | width: 100%; | |
− | + | ||
− | + | margin: 0px; | |
− | + | padding: 0px; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | /* | |
− | + | * Custom styles | |
− | + | */ | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | #main { | |
− | + | width: 100%; | |
− | + | height: 50px; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | /* Header */ | ||
+ | #header { | ||
+ | width: 100%; | ||
+ | min-width: 1200px; | ||
+ | background-color: #e8e8e8; | ||
+ | //background-image: url(http://www.transparenttextures.com/patterns/crissxcross.png); | ||
+ | background-image: url('https://static.igem.org/mediawiki/2015/0/0a/Headerpicgbg.jpeg'); | ||
+ | background-size: 100%; | ||
+ | background-position: center; | ||
+ | border-bottom: 4px solid #018c92; | ||
+ | } | ||
− | + | #header-content { | |
+ | position: relative; | ||
+ | width: 1200px; | ||
+ | height: 210px; | ||
+ | margin: 0px auto; | ||
+ | color: #ffffff; | ||
+ | } | ||
− | + | #header-content img#logo { | |
− | + | position: absolute; | |
− | + | top: 67px; | |
− | + | left: 45px; | |
− | + | } | |
− | + | ||
− | + | #header-content img#igem { | |
− | + | position: absolute; | |
− | + | top: 67px; | |
− | + | right: 15px; | |
− | + | } | |
− | + | #header-content img#study-in-scarlet { | |
− | + | position: absolute; | |
− | + | top: 70px; | |
− | + | left: 370px; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | /* woo css */ | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | #my_content { | |
− | + | width: 1200px; | |
− | + | margin: 0px auto; | |
− | + | position: relative; | |
− | + | } | |
− | + | ||
− | + | /* Section 1 */ | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | #section1 { | |
− | + | width: 1200px; | |
− | + | margin: 0px auto; | |
− | + | position: relative; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | #section1-menu { | |
+ | float: left; | ||
+ | border-right: 1px dashed #bbb; | ||
+ | margin-top: 130px; | ||
+ | text-align: center; | ||
+ | } | ||
− | + | #section1-menu ul { | |
− | + | list-style: none; | |
− | + | margin: 0px; | |
− | + | padding-right: 25px; | |
− | + | } | |
+ | nav ul ul { | ||
+ | position:absolute; | ||
+ | left: 230px; | ||
+ | top: 0px; | ||
+ | background-color: #ef5c80; | ||
+ | display:none; | ||
+ | z-index: 1000; | ||
+ | width: 230px; | ||
+ | border-right: 4px solid #ef8c90; | ||
+ | } | ||
− | + | nav ul ul:hover + a { | |
− | + | background-color: #ef5c80; | |
− | + | color: #fff; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | nav ul li:hover ul { | ||
+ | /* When list item is hovered, display UL nested within. */ | ||
+ | display:block; | ||
+ | } | ||
− | + | #section1-menu ul>li { | |
− | + | margin-right: 15px; | |
+ | margin-left: 15px; | ||
+ | position: relative; | ||
+ | } | ||
+ | #section1-menu ul>li>a { | ||
+ | display: block; | ||
+ | width: 230px; | ||
+ | color: #333; | ||
+ | padding-top: 2px; | ||
+ | padding-bottom: 2px; | ||
+ | margin-bottom: 2px; | ||
+ | } | ||
− | + | ||
− | + | ||
+ | #section1-menu a.arrow { | ||
+ | background-image: url('https://static.igem.org/mediawiki/2015/5/57/DownArrow.png'); | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: 99% center; | ||
+ | } | ||
− | + | #section1-menu ul>li>a.active { | |
− | + | background-color: #ef5c80; | |
− | + | color: #fff; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | #section1-menu ul>li>a:hover { | |
− | + | background-color: #ef5c80; | |
+ | color: #fff; | ||
+ | text-decoration: none; | ||
+ | } | ||
− | + | #section1-menu a:active { | |
− | + | background-color: #ef5c80; | |
− | + | color: #fff; | |
+ | } | ||
− | + | #section1-content { | |
− | + | width: 640px; | |
− | + | position: absolute; | |
− | + | right: 230px; | |
− | + | color: #333333; | |
− | + | display: inline-block; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | #section1-content img.img-pull-left { | |
+ | margin-left: -45px; | ||
+ | width: 690px; | ||
+ | margin-bottom: 30px; | ||
+ | } | ||
− | + | #section1-content p { | |
− | + | margin-bottom: 30px; | |
− | + | line-height: 150%; | |
− | + | /*text-align: justify; | |
− | + | text-justify: inter-word;*/ | |
− | + | } | |
− | + | ||
− | + | ||
+ | #section1-content h2 { | ||
+ | padding-bottom: 15px; | ||
+ | color: #333333; | ||
+ | margin-top: 55px; | ||
+ | } | ||
− | + | #section1-content h3 { | |
− | + | padding-bottom: 5px; | |
− | + | color: #555555; | |
− | + | margin-top: 15px; | |
− | + | font-size: 18pt; | |
− | + | } | |
− | + | ||
− | + | ||
+ | #section1-content h4 { | ||
+ | padding-bottom: 5px; | ||
+ | color: #555555; | ||
+ | margin-top: 15px; | ||
+ | font-size: 17pt; | ||
+ | } | ||
+ | #section1-content h5 { | ||
+ | padding-bottom: 5px; | ||
+ | color: #555555; | ||
+ | margin-top: 15px; | ||
+ | font-size: 15pt; | ||
+ | } | ||
+ | #section1-content .figuretext { | ||
+ | padding-bottom: 5px; | ||
+ | color: #777; | ||
+ | margin-top: 5px; | ||
+ | font-size: 12pt; | ||
+ | } | ||
− | + | #section1-toc-container { | |
− | + | position: absolute; | |
− | + | right: 0px; | |
− | + | margin-top: 130px; | |
− | + | width: 200px; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | #section1-toc { | |
+ | border: 1px solid #bbb; | ||
+ | background-color: #eee; | ||
+ | font-size: 12pt; | ||
+ | padding: 5px; | ||
+ | box-shadow: 0 0 3px 2px rgba(0,0,0,.05); | ||
+ | position: static; | ||
+ | width: 200px; | ||
+ | padding-bottom: 15px; | ||
+ | } | ||
− | + | #section1-toc a { | |
− | + | color: #777; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | #section1 .person { | |
− | + | width: 100%; | |
− | + | margin: 10px; | |
− | + | border: 1px solid #999; | |
− | + | float: left; | |
− | + | font-size: 12pt; | |
+ | padding: 10px; | ||
+ | } | ||
− | + | #section1 .picture-container { | |
+ | max-height: 400px; | ||
+ | margin: 0px auto; | ||
+ | margin-bottom: 10px; | ||
+ | background-color: #333; | ||
+ | text-align: center; | ||
+ | } | ||
− | + | #section1 .person img { | |
+ | object-fit: cover; | ||
+ | width: 275px; | ||
+ | -ms-transform: rotate(-90deg); /* IE 9 */ | ||
+ | -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */ | ||
+ | transform: rotate(-90deg); | ||
+ | margin-top: 40px; | ||
+ | margin-bottom: 40px; | ||
+ | } | ||
+ | #section1 .person p { | ||
+ | margin-bottom: 2px; | ||
+ | } | ||
− | + | /* Sidebar */ | |
− | + | /* #sidebar { | |
− | + | background-image: url(https://static.igem.org/mediawiki/2015/2/2e/Gothenburg_concrete.png); | |
− | + | position: absolute; | |
− | + | width: 240px; | |
− | + | right: 0px; | |
+ | top: 0px; | ||
+ | padding: 15px; | ||
+ | padding-top: 45px; | ||
+ | text-align: center; | ||
+ | color: #999; | ||
+ | border: 1px solid #dddddd; | ||
+ | border-top: none; | ||
+ | } */ | ||
− | + | #sidebar { | |
+ | position: absolute; | ||
+ | width: 270px; | ||
+ | right: 0px; | ||
+ | top: 60px; | ||
+ | padding-top: 20px; | ||
+ | padding-left: 5px; | ||
+ | text-align: right; | ||
+ | color: #999; | ||
+ | /* border-left: 3px dashed #dddddd; */ | ||
+ | font-size: 13pt; | ||
+ | } | ||
− | + | #sidebar p { | |
− | + | margin: 10px; | |
− | + | } | |
+ | |||
+ | #sidebar img { | ||
+ | max-width: 170px; | ||
+ | margin: 5px; | ||
+ | } | ||
+ | |||
+ | #sidebar hr { | ||
+ | margin-top: 20px; | ||
+ | margin-bottom: 20px; | ||
+ | } | ||
+ | |||
+ | #toc { | ||
+ | float: right; | ||
+ | margin-right: -240px; | ||
+ | margin-top: 100px; | ||
+ | font-size: 12pt; | ||
+ | width: 210px; | ||
+ | } | ||
+ | |||
+ | #toc .toclevel-3 { | ||
+ | visibility: none; | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | * General | ||
+ | */ | ||
+ | |||
+ | #section1-content img.gallery-image { | ||
+ | width: 150px; | ||
+ | margin: 10px; | ||
+ | padding: 5px; | ||
+ | border: 1px solid #ddd; | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | .thumbnail { | ||
+ | position: relative; | ||
+ | width: 300px; | ||
+ | height: 400px; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | .thumbnail img { | ||
+ | position: absolute; | ||
+ | left: 50%; | ||
+ | top: 50%; | ||
+ | height: 100%; | ||
+ | width: auto; | ||
+ | -webkit-transform: translate(-50%,-50%); | ||
+ | -ms-transform: translate(-50%,-50%); | ||
+ | transform: translate(-50%,-50%); | ||
+ | } | ||
+ | .thumbnail img.portrait { | ||
+ | width: 100%; | ||
+ | height: auto; | ||
+ | } | ||
+ | |||
+ | .scarlet { | ||
+ | color: #ef5c80 !important; | ||
+ | } | ||
+ | </style> | ||
+ | |||
+ | <div id="main"> | ||
+ | |||
+ | <div id="header"> | ||
+ | <div id="header-content"> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/5/5c/Chalmers_logo.png" height="170px" id="logo" alt="iGEM-Chalmers logo"> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/8/84/Study_in_scarlet.png" id="study-in-scarlet" alt="Team Chalmers Gothenburg - A study in scarlet"> | ||
+ | <!--<img src="https://static.igem.org/mediawiki/2015/2/2c/Chalmers-igem-logo.png" height="160px" id="igem" alt="iGEM 2015 logo">--> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div id="my_content"> | ||
+ | |||
+ | <div id="section1"> | ||
+ | <div id="section1-menu"> | ||
+ | <nav> | ||
+ | <ul> | ||
+ | <li><a href="https://2015.igem.org/Team:Chalmers-Gothenburg">Home</a></li> | ||
+ | <li> | ||
+ | <ul> | ||
+ | <li><a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Students">Students</a></li> | ||
+ | <li><a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Supervisors">Supervisors</a></li> | ||
+ | <li><a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Attributions">Attributions</a></li> | ||
+ | <li><a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Gallery">Gallery</a></li> | ||
+ | </ul> | ||
+ | <a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Team" class="arrow">Team</a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <ul> | ||
+ | <li><a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Project">Introduction</a></li> | ||
+ | <li><a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Theory">Theory</a></li> | ||
+ | <li><a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Constructs">Constructs</a></li> | ||
+ | |||
+ | <li><a href="https://2015.igem.org/Team:Chalmers-Gothenburg/OtherApplications">Other Applications</a></li> | ||
+ | </ul> | ||
+ | <a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Project" class="arrow">Project</a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <ul> | ||
+ | <li><a href="https://2015.igem.org/Team:Chalmers-Gothenburg/ProjectResults">Project Results</a></li> | ||
+ | <li><a href="https://2015.igem.org/Team:Chalmers-Gothenburg/BioBricks">Bio Bricks</a></li> | ||
+ | <li><a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Medals">Medals</a></li> | ||
+ | <li><a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Results">Results</a></li> | ||
+ | </ul> | ||
+ | <a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Achievements" class="arrow">Achievements</a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <ul> | ||
+ | <li><a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Detection">Detection</a></li> | ||
+ | <li><a href="https://2015.igem.org/Team:Chalmers-Gothenburg/SafetySwitch">Safety Switch</a></li> | ||
+ | <li><a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Simulation">Simulation</a></li> | ||
+ | </ul> | ||
+ | <a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Modeling" class="arrow">Modeling</a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <ul> | ||
+ | <li><a href="https://2015.igem.org/Team:Chalmers-Gothenburg/iGEMCommunity">Collaborations</a></li> | ||
+ | <li><a href="https://2015.igem.org/Team:Chalmers-Gothenburg/NextGeneration">Next Generation</a></li> | ||
+ | <li><a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Society">Society</a></li> | ||
+ | </ul> | ||
+ | <a href="https://2015.igem.org/Team:Chalmers-Gothenburg/HumanPractices" class="arrow">Human Practices</a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <ul> | ||
+ | <li><a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Schedule">Lab Journal</a></li> | ||
+ | <li><a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Protocols">Protocols</a></li> | ||
+ | </ul> | ||
+ | <a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Notebook" class="arrow">Notebook</a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <ul> | ||
+ | <li><a href="https://2015.igem.org/Team:Chalmers-Gothenburg/LabSafety">Lab Safety</a></li> | ||
+ | <li><a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Ethics">Ethics</a></li> | ||
+ | </ul> | ||
+ | <a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Safety" class="arrow">Safety</a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <ul> | ||
+ | <li><a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Sponsors">Sponsors</a></li> | ||
+ | <li><a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Acknowledgements">Acknowledgements</a></li> | ||
+ | </ul> | ||
+ | <a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Thanks" class="arrow">Thanks!</a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </nav> | ||
+ | </div> | ||
+ | |||
+ | <div id="section1-content"> | ||
− | |||
− | |||
</html> | </html> |
Latest revision as of 03:39, 19 September 2015