Difference between revisions of "Template:Cologne-Duesseldorf/css"

Line 1: Line 1:
−
{{Template:Cologne-Duesseldorf/css}}
+
<html>
 +
<style>
  
−
<html >
+
/******Wiki Styles*************************************/
−
<head>
+
−
  <meta charset="UTF-8">
+
−
  <meta name="viewport" content="width=device-width, initial-scale=1">
+
−
  <title>Create a Sidebar Menu</title>
+
−
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
−
</head>
+
  
−
<body>
+
html {
−
  <html>
+
font-size: 16px;
−
<head>
+
}
−
<title>SideBar Menu</title>
+
body {
−
<link rel="stylesheet" type="text/css" href="style.css">
+
background-color: #fff;
−
</head>
+
font: medium sans-serif;
−
<body>
+
color: black;
 +
margin: 0;
 +
/*margin-top: 20px;*/
 +
margin-top: 18px;
 +
padding: 0;
 +
}
 +
#globalWrapper {
 +
position: relative;
 +
font-size: 100%;
 +
width: 100%;
 +
margin: 0;
 +
padding: 0;
 +
}
 +
#top_menu_under {
 +
display: none;
 +
position: relative;
 +
width: 100%;
 +
height: 0;
 +
}
 +
/*the igem menu bar*/
  
−
<div id="sidebar">
+
#top_menu_14 {
−
<ul>
+
position: fixed;
−
<!-- Home -->
+
width: 100%;
−
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf">Home</a></li>
+
top: 0px;
−
+
left: 0px;
−
<!-- Team -->
+
height: 16px;
−
<li class="sub"><a href="#">Team</a></li>
+
background-color: #383838;
−
<ul>
+
border-bottom: 2px solid black;
−
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Team">Team</a></li>
+
z-index: 9999;
−
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Collaborations">Collaborations</a></li>
+
}
−
</ul>
+
#content {
−
+
width: 100%;
−
+
padding: 0;
−
<!-- Project -->
+
margin: 0;
−
<li class="sub"><a href="#">Project</a></li>
+
border: none;
−
<ul>
+
color: inherit;
−
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Description">Description</a></li>
+
background-color: inherit;
−
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Design">Design</a></li>
+
position: relative;
−
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Experiments">Experiments</a></li>
+
}
−
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Notebook">Notebook</a></li>
+
#top_title {
−
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/InterLab">InterLab</a></li>
+
display: none;
−
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Contribution">Contribution</a></li>
+
}
−
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Model">Model</a></li>
+
#sideMenu {
−
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Results">Results</a></li>
+
display: none;
−
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Demonstrate">Demonstrate</a></li>
+
width: 170px;
−
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Improve">Improve</a></li>
+
position: absolute;
−
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Attributions">Attributions</a></li>
+
top: 20px;
−
</ul>
+
left: 1020px;
−
<li class="sub"><a href="#">Parts</a></li>
+
z-index: 10;
−
<ul>
+
padding-top: 0px;
−
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Parts">Parts</a></li>
+
padding-bottom: 15px;
−
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Basic_Part">Basic Parts</a></li>
+
padding-left: 15px;
−
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Composite_Part">Composite Parts</a></li>
+
padding-right: 15px;
−
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Part_Collection">Part Collection</a></li>
+
background-color: white;
−
</ul>
+
text-align: left;
−
+
}
−
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Safety">Safety</a></li>
+
}
 +
.pop_why_cover {
 +
display: none;
 +
z-index: 100;
 +
margin-top: -65px;
 +
margin-left: -40px;
 +
width: 980px;
 +
height: 2100px;
 +
float: left;
 +
position: absolute;
 +
opacity: 0.5;
 +
background-color: #b2b2b2;
 +
}
 +
.pop_why_box {
 +
display: none;
 +
left: 250px;
 +
top: 0px;
 +
background-color: white;
 +
padding: 15px;
 +
width: 500px;
 +
position: absolute;
 +
border: 3px solid #4e606e;
 +
border-radius: 3px;
 +
z-index: 100;
 +
}
  
−
<!-- Human Practices -->
+
#footer {
−
<li class="sub"><a href="#">Human Practices</a></li>
+
font-size:100%;
−
<ul>
+
}
−
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/HP/Silver">Silver</a></li>
+
−
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/HP/Gold_Integrated">Integrated Practices</a></li>
+
−
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Engagement">Public Engagement</a></li>
+
−
</ul>
+
−
+
−
<!-- Awards -->
+
−
<li class="sub"><a href="#">Awards</a></li>
+
−
<ul>
+
−
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Applied_Design">Applied Design</a></li>
+
−
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Entrepreneurship">Entrepreneurship</a></li>
+
−
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Hardware">Hardware</a></li>
+
−
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Measurement">Measurement</a></li>
+
−
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Model">Model</a></li>
+
−
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Plant">Plant</a></li>
+
−
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Software">Software</a></li>
+
−
</ul>
+
−
<!-- Judging Form -->
+
−
<li><a href="https://igem.org/2017_Judging_Form?team=Cologne-Duesseldorf">Judging Form</a></li>
+
  
−
</ul>
 
−
</div>
 
−
 
−
 
−
 
−
<div id="sidebar-btn">
 
−
<i class="fa fa-bars"></i>
 
−
</div>
 
−
<div id="overlay"></div>
 
−
<div id="container">
 
−
<div id="paper">
 
−
<section id="header">
 
−
<img src="https://static.igem.org/mediawiki/2017/0/0d/T--Cologne-Duesseldorf--artico-logo-cities.svg">
 
−
</section>
 
−
<section id="article">
 
−
<h3>Designing a Customizable Synthetic Cell Compartment Toolbox</h3>
 
−
<hr>
 
−
<p>
 
−
Synthetic organisms provide a wide range of applications with the potential to tackle
 
−
the biggest challenges humanity faces. Their creation is therefore one of the major
 
−
goals in synthetic biology. Many breakthroughs have been achieved in the last
 
−
decade, however, the creation of a fully synthetic cell is yet a milestone to reach for.
 
−
<br>
 
−
A common approach tries to build up artificial cells from scratch, whereas we want to
 
−
start by engineering artificial compartments through orthogonalization. For designing
 
−
these new compartments we plan to establish an open source toolbox accessible to
 
−
the community at large. This will make it possible to boot up a compartment perfectly
 
−
tailored for a specific application, which will enable cheaper and more efficient
 
−
production of biofuels, pharmaceuticals, or high value chemicals.
 
−
<br>
 
−
By integrating enzymes or biosynthetic pathways into semi-permeable organelles we
 
−
gain higher concentrations of enzymes and metabolites and provide a basis for the
 
−
ideal operation of specialized enzymes. Furthermore, toxic or unstable intermediates
 
−
can be sustained and naturally incompatible reactions can take place
 
−
simultaneously.
 
−
<br>
 
−
We have chosen yeast peroxisomes as our chassis for designing this synthetic organelle, which are very resistant, have a useful import mechanism and are expendable under optimal conditions.
 
−
</p>
 
−
</section>
 
−
<section id="sec">
 
−
<h3>Designing a Customizable Synthetic Cell Compartment Toolbox</h3>
 
−
<hr>
 
−
<p>
 
−
Synthetic organisms provide a wide range of applications with the potential to tackle
 
−
the biggest challenges humanity faces. Their creation is therefore one of the major
 
−
goals in synthetic biology. Many breakthroughs have been achieved in the last
 
−
decade, however, the creation of a fully synthetic cell is yet a milestone to reach for.
 
−
<br>
 
−
A common approach tries to build up artificial cells from scratch, whereas we want to
 
−
start by engineering artificial compartments through orthogonalization. For designing
 
−
these new compartments we plan to establish an open source toolbox accessible to
 
−
the community at large. This will make it possible to boot up a compartment perfectly
 
−
tailored for a specific application, which will enable cheaper and more efficient
 
−
production of biofuels, pharmaceuticals, or high value chemicals.
 
−
<br>
 
−
By integrating enzymes or biosynthetic pathways into semi-permeable organelles we
 
−
gain higher concentrations of enzymes and metabolites and provide a basis for the
 
−
ideal operation of specialized enzymes. Furthermore, toxic or unstable intermediates
 
−
can be sustained and naturally incompatible reactions can take place
 
−
simultaneously.
 
−
<br>
 
−
We have chosen yeast peroxisomes as our chassis for designing this synthetic organelle, which are very resistant, have a useful import mechanism and are expendable under optimal conditions.
 
−
</p>
 
−
</section>
 
−
</div>
 
−
</div>
 
−
<section id="footer">
 
−
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
 
−
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
 
−
<a href="#"><i class="fa fa-youtube-play" aria-hidden="true"></i></a>
 
−
<a href="#"><i class="fa fa-envelope" aria-hidden="true"></i></a>
 
−
<a href="#"><i class="fa fa-university" aria-hidden="true"></i><a>
 
−
</section>
 
−
 
−
 
  
−
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+
/*************WIKI FONTS**************/
−
<script>
+
 
 +
#HQ_page h1,
 +
h2,
 +
h3,
 +
h4,
 +
h5,
 +
h6 {
 +
color: #149375;
 +
border: none;
 +
font-weight: normal;
 +
font-style: normal;
 +
text-rendering: optimizeLegibility;
 +
font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
 +
}
 +
#content h1,
 +
h2,
 +
h3,
 +
h4,
 +
h5,
 +
h6 {
 +
font-weight: normal;
 +
}
 +
#bodyContent h1,
 +
h2,
 +
h3,
 +
h4,
 +
h5,
 +
h6 {
 +
margin: 0 0 0.5rem 0;
 +
}
 +
#bodyContent h1,
 +
#bodyContent h2 {
 +
margin: 0 0 0.5rem 0;
 +
}
 +
#bodyContent h3,
 +
#bodyContent h4,
 +
#bodyContent h5 {
 +
margin: 0 0 0.5rem 0;
 +
}
 +
 
 +
#HQ_page p {
 +
font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
 +
font-size: 16px;
 +
text-align: justify;
 +
}
 +
 
 +
#HQ_page table {
 +
    border: none;
 +
    border-collapse: collapse;
 +
    width: 100%;
 +
margin: 0;
 +
 
 +
}
 +
table {
 +
background: white;
 +
font-size: 100%;
 +
color: black;
 +
}
 +
 
 +
#HQ_page th {
 +
    background-color: white;
 +
    padding: 0;
 +
    color: black;
 +
    border: none;
 +
    border-collapse: collapse;
 +
    vertical-align: text-top;
 +
}
 +
 
 +
#HQ_page td {
 +
    padding: 0;
 +
    border: none;
 +
    border-collapse: collapse;
 +
    vertical-align: text-top;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
 
 +
/****************** SITE STYLES ******
 +
*************************************/
 +
 
 +
 
 +
 
 +
 
 +
body{
 +
margin:0px;
 +
padding:0px;
 +
font-family:Roboto;
 +
background: #149375;
 +
overflow-x: hidden;
 +
}
 +
 
 +
body.inactive{
 +
background-color: rgba(0,0,0,0.5);
 +
}
 +
 
 +
#container h1,
 +
h2,
 +
h3,
 +
h4,
 +
h5,
 +
h6 {
 +
padding: 0;
 +
overflow: hidden;
 +
background: none;
 +
line-height: 1.4;
 +
}
 +
#container h1 {
 +
    font-size: 2rem;
 +
    margin-top: 0;
 +
    margin-bottom: .5rem
 +
}
 +
#container h2 {
 +
    font-size: 1.83rem;
 +
    margin-top: 0;
 +
    margin-bottom: .5rem
 +
}
 +
#container h3 {
 +
    font-size: 1.66rem;
 +
    margin-top: 0;
 +
    margin-bottom: .5rem
 +
}
 +
#container h4 {
 +
    font-size: 1.5rem;
 +
    margin-top: 0;
 +
    margin-bottom: .5rem
 +
}
 +
#container h5 {
 +
    font-size: 1.33rem;
 +
    margin-top: 0;
 +
    margin-bottom: .5rem
 +
}
 +
#container h6 {
 +
    font-size: 1.16rem;
 +
    margin-top: 0;
 +
    margin-bottom: .5rem
 +
}
 +
 
 +
#container p {
 +
margin: 0;
 +
  line-height: 1.7;
 +
}
 +
#container a {
 +
text-decoration: none;
 +
font-weight: normal;
 +
color: #149375;
 +
background: none;
 +
}
 +
#container a:link {
 +
color: #149375;
 +
}
 +
#container a:visited {
 +
color: #149375;
 +
}
 +
#container a:hover,
 +
#container a:focus {
 +
color: #149375;
 +
text-decoration: none;
 +
}
 +
#container a:active {
 +
color: #149375;
 +
}
 +
 
 +
#sidebar{
 +
z-index: 3;
 +
background:#151718;
 +
width:250px;
 +
height:100%;
 +
display:block;
 +
position:fixed;
 +
top: 18px;
 +
transition:0.5s linear;
 +
visibility: hidden;
 +
opacity: 0;
 +
transition: all 0.5s ease;
 +
overflow-y: auto;
 +
}
 +
 
 +
#sidebar.visible{
 +
visibility: visible;
 +
opacity: 1;
 +
}
 +
 
 +
#sidebar ul{
 +
margin:0px;
 +
padding:0px;
 +
}
 +
 
 +
#sidebar ul li{
 +
list-style:none;
 +
}
 +
 
 +
#sidebar ul li a{
 +
background:#1C1E1F;
 +
color:#ccc;
 +
border-bottom:1px solid #111;
 +
display:block;
 +
width:230px;
 +
padding:10px;
 +
text-decoration: none;
 +
}
 +
 
 +
#sidebar ul li a:hover{
 +
background-color: rgba(255,255,255,0.3)
 +
}
 +
 
 +
#sidebar ul ul{
 +
display:none;
 +
}
 +
 
 +
#sidebar ul ul.active{
 +
display: block;
 +
}
 +
 
 +
#overlay{
 +
    position: fixed;
 +
    width: 100%;
 +
    height: 100%;
 +
    top: 0;
 +
    left: 250px;
 +
    right: 0;
 +
    bottom: 0;
 +
    background-color: rgba(0,0,0,0.5);
 +
    z-index: 1;
 +
    cursor: pointer;
 +
visibility: hidden;
 +
opacity: 0;
 +
transition: all 0.5s ease;
 +
}
 +
 
 +
#overlay.active{
 +
visibility: visible;
 +
opacity: 1;
 +
}
 +
 
 +
#container{
 +
transition:0.5s linear;
 +
display: flex;
 +
flex-direction: column;
 +
align-items: center;
 +
padding: 5%;
 +
}
 +
 
 +
#paper {
 +
    display: flex;
 +
flex-direction: column;
 +
    max-width: 1024px;
 +
    background: white;
 +
    box-shadow: 0 0 12px 0px rgba(0,0,0,0.4);
 +
padding: 5%;
 +
}
 +
 
 +
#sidebar-btn{
 +
    font-size: 24pt;
 +
    z-index: 2;
 +
    position: fixed;
 +
    right: 2%;
 +
    top: 4%;
 +
    display: flex;
 +
    flex-direction: row;
 +
    justify-content: center;
 +
    align-items: center;
 +
    width: 20px;
 +
    height: 20px;
 +
    cursor: pointer;
 +
    background: rgba(0,0,0,0.1);
 +
    padding: 20px;
 +
    color: white;
 +
    border: 3px solid white;
 +
    border-radius: 100%;
 +
    box-shadow: 0px 4px 12px 2px rgba(0,0,0,0.3);
 +
transition: all 0.5s ease;
 +
}
 +
 
 +
section{
 +
margin: 8px;
 +
}
 +
 
 +
section#header{
 +
justify-content: center;
 +
margin-bottom: 24px;
 +
}
 +
 
 +
section#footer{
 +
    display: flex;
 +
    flex-direction: row;
 +
    justify-content: center;
 +
    align-items: center;
 +
    height: 15vw;
 +
max-height: 250px;
 +
    margin: 0;
 +
    background: #1C1E1F;
 +
    position: absolute;
 +
    left: 0;
 +
    right: 0;
 +
}
 +
 
 +
section#footer i{
 +
color:white;
 +
padding: 20px;
 +
font-size: 5vw;
 +
}
 +
 
 +
section#footer a:hover{
 +
background: rgba(255,255,255,0.3)
 +
}
 +
 
 +
 
 +
/****************** MEDIA QUERIES **
 +
**********************************/
 +
 
 +
@media (max-width: 768px){
 +
body{
 +
background: white;
 +
}
 +
 +
#sidebar-btn {
 +
position: fixed;
 +
    left: 0;
 +
    top: 18px;
 +
    width: 100%;
 +
    height: 50px;
 +
    cursor: pointer;
 +
    background: #1C1E1F;
 +
    padding: 0;
 +
    color: white;
 +
    border: none;
 +
    border-radius: 0;
 +
    box-shadow: 0px 4px 12px 2px rgba(0,0,0,0.3);
 +
}
 +
#container {
 +
margin-top: 68px;
 +
padding: 0;
 +
}
 +
#container.inactive{
 +
transform: translate(250px,0)
 +
}
 +
#sidebar-btn.inactive{
 +
background: rgba(0,0,0,0.5);
 +
#left: 250px;
 +
}
 +
}
  
−
$(document).ready(function(){
+
@media (min-width: 1024px){
−
$('#sidebar-btn').click(function(){
+
section#footer i {
−
$('#sidebar').toggleClass('visible');
+
font-size: 3vw;
−
$('#overlay').toggleClass('active');
+
}
−
$('#container').toggleClass('inactive');
+
}
−
$('#sidebar-btn').toggleClass('inactive');
+
−
});
+
−
$('#overlay').click(function(){
+
−
$('#sidebar').toggleClass('visible');
+
−
$('#overlay').toggleClass('active');
+
−
$('#container').toggleClass('inactive');
+
−
$('#sidebar-btn').toggleClass('inactive');
+
−
});
+
−
+
−
$('#sidebar li.sub').click(function(){
+
−
$('#sidebar ul ul').toggleClass('active');
+
−
});
+
−
+
−
});
+
  
−
</script>
 
  
−
</body>
+
</style>
−
</html>
+
−
 
+
−
 
+
−
</body>
+
 
</html>
 
</html>

Revision as of 12:36, 4 May 2017