Difference between revisions of "Team:DTU-Denmark/substrate"

Line 1: Line 1:
−
{{Team:DTU-Denmark/header.html}} <!-- DON'T TOUCH!!! -->
+
/* Overview
 +
1. Body
 +
2. Masthead settings
 +
3. Content left column
 +
4. Sidebar right column
 +
5. windowsize responsive
 +
6. Attribution page
 +
7. Team member page
 +
8. Notebook
 +
9. Masterhead mainpages
 +
10. Modal Pictures
 +
11. Panel
 +
*/
  
−
<html lang="en">
+
/****
−
<head>
+
1. BODY
−
     <!-- Edited by Isabella 7-9-16 14:30 in sidebar - remove xs-hidden from sidebar -->
+
*****/
−
    <!-- Edited by Isabella 26-9-16-14:22 fix white space above picture, do not edit the spaces between things this create unintentional space-->
+
body {
−
    <title>Bootstrap Example</title>
+
     overflow-x: hidden; /*prevent sidescroll on narrow devices*/
−
    <meta charset="utf-8">
+
}
−
    <meta name="viewport" content="width=device-width, initial-scale=1">
+
−
</head>
+
  
 +
/*
 +
.MYbody {
 +
    position: fixed;
 +
    overflow-x: hidden;
 +
    overflow-y: scroll;
 +
}
 +
*/
 +
a,
 +
a:visited {
 +
    color: #555;
 +
}
  
−
<!-- BODY -->
+
a:hover,
−
<body data-spy="scroll" data-target="#scrollspy" data-offset="90">
+
a:focus {
−
<div class="MYbody">
+
    color: #990000;
 +
}
  
−
<div class="masthead">
+
/***********
−
    <div class="container-fluid">
+
2. MASTHEAD
−
        <div class="row">
+
************/
−
            <div class="col-md-12 thumbnail" style="background-image:url(https://static.igem.org/mediawiki/2016/c/c2/T--DTU-Denmark--Lab-header.jpg)"> <!-- EDIT style url (this should lead to an image) -->
+
.masthead { /*control height*/
 +
    height: 300px;
 +
}
  
−
                <div class="caption">
+
.masthead .caption { /*control shadowing*/
−
                    <div class="col-md-5 col-sm-5 col-xs-12 title"> <!-- the approximate max number of characters ~ 400 --> <!-- EDIT -->
+
    width:100%;
−
                        <h1>Title<p class="lead">leader under the title, short introduction. Ubique moderatius efficiantur eum et, dico oporteat recusabo ius cu, pro id modus sadipscing. Maluisset patrioque eum ad, mel eius doctus accommodare eu, minimum deleniti repudiandae mel ea. Noster nostrud diceret sea no. Eos an nullam molestiae signiferumque, vel ne laudem ignota oblique. Duo te luptatum percipitur signiferumque, at dicunt iriure dolorem his.</p></h1>
+
    height: 300px;
−
                    </div>
+
    bottom: .0rem;
−
                    <div class="col-md-2 col-sm-2 hidden-xs space"></div>
+
    position: absolute;
−
                    <div class="col-md-5 col-sm-5 hidden-xs intro"> <!-- will be hidden on phones, duplicate the text to blockquote down below first section header, to show it there, when it dissapear-->
+
    background:#000;
−
                        <blockquote class="blockquote-reverse"> <!-- EDIT -->
+
    background: -webkit-linear-gradient(left, #000, rgba(0, 0, 0, 0), #000);
−
                            <p>Quote Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+
    background: -moz-linear-gradient(left, #000, rgba(0, 0, 0, 0), #000);
−
                            <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
+
    background: -o-linear-gradient(left, #000, rgba(0, 0, 0, 0), #000);
−
                        </blockquote>     
+
    background: linear-gradient(to right, #000, rgba(0, 0, 0, 0), #000);
−
                    </div>
+
}
−
                </div>
+
 
−
            </div>
+
.masthead .thumbnail {
−
        </div> <!-- /row -->
+
    height: 300px;
−
        <div class="border"></div>
+
    width: 100%;
−
     </div>
+
    background-size: cover;
−
</div> <!-- /masthead-->
+
    background-position: center;
 +
    background-repeat: no-repeat;
 +
    border: 0 none;
 +
    box-shadow: none;
 +
    margin:0;
 +
    padding:0;
 +
}
 +
       
 +
.masthead .caption > div {
 +
    margin-top: 2em;
 +
}
 +
 
 +
.masthead .caption h1 {
 +
    margin-top: -.0em;
 +
    padding-top: -.0em;
 +
}
 +
 
 +
.masthead .caption h1,
 +
.masthead .caption p {
 +
    color: #fff;
 +
}
 +
 
 +
.masthead .title h1,
 +
.masthead .title h1 > p{
 +
    text-transform: uppercase;
 +
    text-align: justify;
 +
    float: left;
 +
}
 +
 
 +
.masthead .title h1 > p {
 +
    border-top: 1px solid;
 +
    padding-top: .3em;
 +
}
 +
 
 +
.masthead .intro blockquote {
 +
    position: absolute;
 +
    margin-top: 30px;
 +
}
 +
 
 +
.masthead .intro blockquote p {
 +
    text-align: right !important;
 +
}
 +
 
 +
.masthead .intro blockquote small {
 +
    color: #fff;
 +
}
 +
 
 +
/******************
 +
3. CONTENT LEFT COLUMN
 +
******************/
 +
.colLeft blockquote {
 +
    border-left-color: #990000;
 +
}
 +
 
 +
.colLeft a.anchor:target,
 +
.colLeft div.anchor:target { /*Ensure that internal links will have the correct setoff, below the fixed header*/
 +
    display: block;
 +
    top: -125px;
 +
    position: relative;
 +
    visibility: hidden;
 +
}
 +
 
 +
.colLeft .h2 {
 +
    border-bottom-width: 2px;
 +
    font-weight: 500;
 +
}
 +
 
 +
.colLeft .h3 {
 +
    border-bottom-width: 1px;
 +
    font-weight: 500;
 +
margin-bottom: 0.4em;
 +
}
 +
#bodyContent h3 {
 +
margin-bottom: 0.5em;
 +
}
 +
 
 +
.colLeft .h2,
 +
.colLeft .h3 {
 +
    padding-bottom: 0.2em;
 +
    border-bottom-style: solid;
 +
    border-bottom-color: #990000;
 +
clear: both;
 +
}
 +
/* grid layout for achievements, notebook, and parts page */
 +
.grid-row {
 +
    clear:both;
 +
}
 +
 
 +
/*******************
 +
4. SIDEBAR RIGHT COLUMN
 +
********************/
 +
@media screen and (max-width: 1000px){
 +
    .colRight {
 +
    padding-left: 0px !important;
 +
    }
 +
}
 +
 
 +
#sidebar {
 +
    margin-top: 20px;
 +
    padding-top: 18px;
 +
    padding-bottom: 5px;
 +
     padding-left: 5px;
 +
    padding-right: 5px;
 +
    border-radius: 5px;
 +
}
 +
 
 +
#sidebar {
 +
    margin-left: 0px;
 +
}
  
−
<br>
 
−
<!-- Content -->
 
−
<div class="container">
 
−
<div class="row"> <!--Must sorround both content and sidebar-->
 
−
    <div class="col-md-9 col-sm-10 colLeft"> <!-- LEFT -->
 
−
        <div><a class="anchor" id="section-1"></a>
 
−
        <h2 class="h2">Section 1</h2>
 
−
           
 
−
            <blockquote class="visible-xs"> <!-- quote from masterhead duplicate -->
 
−
                <p>Quote Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 
−
                <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
 
−
            </blockquote>
 
−
           
 
−
<!--panel-->
 
  
−
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
+
#sidebar.nav li a {
−
     <!--Requirements for new sections
+
    color: #999;
−
     Change:
+
    font-size: .9em;
−
     <div class="panel-heading" role="tab" id="heading1"> - change number for heading1
+
     padding-top: 0.3em;
−
     <a data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1">Collapsible Group 1</a> - change number for collapse1 (two times in this row)
+
     padding-bottom: .3em;
−
     <div id="collapse1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading1"> - change number of both collapse1 and heading1 in this line
+
     background-color: transparent;
−
     All the numbers should match - all lines that need to be changed are marked
+
     text-transform: uppercase;
−
     -->
+
     border-left-width: 3px;
 +
     border-left-style: solid;
 +
     border-left-color: #fff;
 
      
 
      
−
    <!--PANEL1-->
+
}
−
    <div class="panel panel-default">
+
 
−
        <a data-toggle="collapse" href="#collapse1" aria-expanded="false" aria-controls="collapse1"> <!--change x2-->
+
#sidebar.nav li a:active,
−
            <div class="panel-heading" role="tab" id="heading1"> <!--change x1-->
+
#sidebar.nav li a:hover,
−
                <h4 class="panel-title">
+
#sidebar.nav li a:focus,
−
                    Collapsible Group 1
+
#sidebar.nav li a.nav-active:hover {
−
                </h4>
+
    background-color: transparent;
−
            </div>
+
     list-style: circle;
−
        </a>
+
     border-left-width: 3px;
−
        <div id="collapse1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1"> <!-- change x2 -->
+
    border-left-style: solid;
−
            <div class="panel-body">
+
     border-left-color: #990000;
−
                <p>
+
}
−
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
 
−
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
#sidebar.nav li a.nav-active {
−
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
    color:black;
−
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
    border-left-width: 3px;
−
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
    border-left-style: solid;
−
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
    border-left-color: #750000;
−
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
}
−
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
 
−
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
/* Undo the affixed behavior in mobile views */
−
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
 
−
                   
+
 
−
                </p>
+
/* Apply the affixed behavior */
−
            </div>
+
/* affix-top: The affix-top class should be inline to the page. */
−
        </div>
+
#sidebar.affix-top {
−
     </div>
+
    width:200px;
−
     <!--PANEL2-->
+
/* for reference - no additional styling */
−
     <div class="panel panel-default">
+
}
−
        <a data-toggle="collapse" href="#collapse2" aria-expanded="false" aria-controls="collapse2"> <!--change x2-->
+
 
−
            <div class="panel-heading" role="tab" id="heading2"> <!--change x1-->
+
/* affix: The affix class should be fixed to the page. */
−
                <h4 class="panel-title">
+
#sidebar.affix {
−
                    Collapsible Group 1
+
    position: fixed;
−
                </h4>
+
    top: 125px;      /* same as body padding or outer navbar height */
−
            </div>
+
    width: 200px;  /* stop it from growing - anyone know how to fix this? */
−
        </a>
+
}
−
        <div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2"> <!-- change x2 -->
+
 
−
            <div class="panel-body">
+
/* affix bottom: The affix-bottom class should be positioned absolute. */
−
                <p>
+
#sidebar.affix-bottom {
−
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
     position: absolute;
−
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
    width: 200px;
−
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
}
−
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
−
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
−
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
−
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
−
                   
+
−
                </p>
+
−
            </div>
+
−
        </div>
+
−
     </div>
+
 
      
 
      
−
</div>
 
  
−
<!--/panel-->
+
/********************
−
            <p>
+
5. WINDOWSIZE RESPONSIVE
−
                Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.
+
********************/
−
            </p>
+
/*Fixes dissapear reappear of sidebar when scrolling on iPad */
−
        </div> <!-- /overview-->
+
#sidebar *:not(html) {
−
       
+
    -webkit-transform: translate3d(0, 0, 0);
−
        <div><a class="anchor" id="section-2"></a>
+
}
−
        <h2 class="h2">Section 2</h2>
+
  
−
            <img id="dog" class="enlarge" src="https://static.pexels.com/photos/47444/pexels-photo-47444-medium.jpeg" alt="Dog" width="300" height="200">
+
@media screen and (max-width: 900px) {
  
−
            <!-- The Modal -->
+
    div.colLeft {
−
            <div id="dogModal" class="modal">
+
        width: 100%;
−
              <span class="close dog">×</span>
+
    }
−
              <img class="modal-content" id="dogImg">
+
−
              <div id="dogcaption">dog</div>
+
−
            </div>
+
  
−
            <p>
+
    #sidebar {
−
                Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.
+
        position: fixed;
−
            </p>
+
        top: 70px !important;
−
            <h3 class="h3">Section 2.1</h3>
+
        width: 200px;  /* stop it from growing - anyone know how to fix this? */
−
                <p>
+
        z-index: 200;
−
Try out MathJax
+
        background-color: white;
−
                $$ a_w^\rho \quad \quad $$ <br>
+
        border-color: #790000;
 +
        border-style: solid;
 +
        border-width: 3px;
 +
    }
  
−
                When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
+
    #sidebar.affix-bottom,
−
                $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
+
    #sidebar.affix-top {
−
                    Paragraph
+
        position: fixed;
−
                </p><p>
+
    }
−
                    Paragraph
+
   
−
                </p>
+
    #scrollspy {
−
            <h3 class="h3">Section 2.2</h3>
+
        display: none;
−
                <p>
+
    }
−
                    Paragraph
+
}
−
                </p><p>
+
 
−
                    Paragraph
+
/***************
−
                </p>
+
6. ATTRIBUTION PAGE
−
            <h3 class="h3">Section 2.3</h3>
+
****************/
−
                <p>
+
 
−
                    Paragraph
+
.sponsor-image {
−
                </p><p>
+
    width: 100%;
−
                    Paragraph
+
    margin-bottom: 40px;
−
                </p>
+
}
−
        </div>
+
 
 +
/***************
 +
7. TEAM MEMBER PAGE
 +
****************/
 
          
 
          
−
        <div><a class="anchor" id="section-3"></a>
+
.student {
−
         <h2 class="h2">Section 3</h2>
+
    margin-bottom: 3em;
−
            <p>
+
}
−
                Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.
+
          
−
            </p>
+
.student img {
 +
    margin-top: 1.5em;
 +
}
  
−
        </div>
+
/********
 +
8. NOTEBOOK
 +
********/
  
−
        <div><a class="anchor" id="section-4"></a>
+
/* Timeline */
−
        <h2 class="h2">Section 4</h2>
+
#timeline .timeline-item:after,
−
            <p>
+
#timeline .timeline-item:before {
−
                Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.
+
    content: '';
−
            </p>
+
    display: block;
−
        </div>
+
    width: 100%;
 +
    clear: both;
 +
}
 +
#timeline {
 +
    width: 100%;
 +
    margin: 30px auto;
 +
    position: relative;
 +
    padding: 0 10px;
 +
    -webkit-transition: all 0.4s ease;
 +
    -moz-transition: all 0.4s ease;
 +
    -ms-transition: all 0.4s ease;
 +
    transition: all 0.4s ease;
 +
}
 +
#timeline:before {
 +
    content: "";
 +
    width: 3px;
 +
    height: 100%;
 +
    background: #EFEFEF;
 +
    left: 50%;
 +
    top: 0;
 +
    position: absolute;
 +
}
 +
#timeline:after {
 +
    content: "";
 +
    clear: both;
 +
    display: table;
 +
    width: 100%;
 +
}
 +
#timeline .timeline-item {
 +
    margin-bottom: 50px;
 +
    position: relative;
 +
}
 +
#timeline .timeline-item .timeline-icon {
 +
    background: #EFEFEF;
 +
    width: 50px;
 +
    height: 50px; 
 +
    position: absolute;
 +
    top: 0;
 +
    left: 50%;
 +
    overflow: hidden;
 +
    margin-left: -23px;
 +
    border-radius: 100%;
 +
}
  
−
        <div><a class="anchor" id="section-5"></a>
+
#timeline .timeline-item .timeline-icon span.star {
−
        <h2 class="h2">Section 5</h2>
+
    position: relative;
−
            <p>
+
    top: 28%;
−
                Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.
+
    left: 28%;
−
            </p>
+
    color: #6C7A89;
−
        </div>
+
    font-size: x-large;
 +
}
  
−
         <div><a class="anchor" id="section-6"></a>
+
#timeline .timeline-item .timeline-content {
−
         <h2 class="h2">Section 6</h2>
+
    width: 45%;
−
            <p>
+
    background: #EFEFEF;
−
                Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.
+
    padding: 20px;
−
            </p>
+
}
−
         </div>
+
#timeline .timeline-item .timeline-content h2 {
 +
    padding: 15px;
 +
    color: #141414;
 +
    margin:-20px -20px 5px -20px;
 +
    font-weight: 300;
 +
    font-size:21px;
 +
}
 +
#timeline .timeline-item .timeline-content:before {
 +
    content: '';
 +
    position: absolute;
 +
    left: 45%;
 +
    top: 20px;
 +
    width: 0;
 +
    height: 0;
 +
    border-top: 7px solid transparent;
 +
    border-bottom: 7px solid transparent;
 +
    border-left: 7px solid #f1f1f1;
 +
}
 +
#timeline .timeline-item .timeline-content.right {
 +
    float: right;
 +
}
 +
#timeline .timeline-item .timeline-content.right:before {
 +
    content: '';
 +
    right: 45%;
 +
    left: inherit;
 +
    border-left: 0;
 +
    border-right: 7px solid #f1f1f1;
 +
}
 +
 
 +
@media screen and (max-width: 768px) {
 +
    #timeline {
 +
         margin: 30px;
 +
        padding: 0px;
 +
        width: 90%;
 +
    }
 +
    #timeline:before {
 +
        left: 0;
 +
    }
 +
    #timeline .timeline-item .timeline-content {
 +
         width: 90%;
 +
        float: right; 
 +
    }
 +
    #timeline .timeline-item .timeline-content:before, #timeline .timeline-item .timeline-content.right:before {
 +
        left: 10%;
 +
         margin-left: -6px;
 +
        border-left: 0;
 +
        border-right: 7px solid #f1f1f1;
 +
    }
 +
    #timeline .timeline-item .timeline-icon {
 +
        left: 0;
 +
    }
 +
}
  
−
        <div><a class="anchor" id="section-7"></a>
 
−
        <h2 class="h2">Section 7</h2>
 
−
            <p>
 
−
                Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.
 
−
            </p>
 
−
        </div>
 
−
    </div> <!-- /LEFT -->
 
 
      
 
      
−
     <!-- RIGHT-->
+
/* Labels */
−
     <div class="col-md-3 col-sm-2 colRight" id="scrollspy">
+
#timeline .label-main {
−
        <ul class="nav" id="sidebar">
+
     background-color: #6C7A89;
−
            <li><a href="#section-1">Section 1</a></li>
+
    color:#FFF;
−
            <li><a href="#section-2">Section 2</a></li>
+
    font-size:14px;
−
            <li><a href="#section-3">Section 3</a></li>
+
    margin-left:-30px;
−
            <li><a href="#section-4">Section 4</a></li>
+
     border-radius:0;
−
            <li><a href="#section-5">Section 5</a></li>
+
    font-weight:400;
−
            <li><a href="#section-6">Section 6</a></li>
+
}
−
            <li><a href="#section-7">Section 7</a></li>
+
#full-schedule .label-main {
−
        </ul>
+
    background-color: #6C7A89;
−
     </div> <!-- /RIGHT -->
+
    color:#FFF;font-size:14px;
 +
    margin-left:0px;
 +
    border-radius:0;
 +
    font-weight:400;
 +
}
 +
 
 +
/***********
 +
9. MASTHEAD
 +
************/
 +
.masthead-main { /*control height*/
 +
    height: 200px;
 +
}
 +
 
 +
.masthead-main .caption { /*control shadowing*/
 +
    width:100%;
 +
    height: 200px;
 +
    bottom: .0rem;
 +
    position: absolute;
 +
    background:#000;
 +
    background: -webkit-linear-gradient(left, #000, rgba(0, 0, 0, 0), #000);
 +
    background: -moz-linear-gradient(left, #000, rgba(0, 0, 0, 0), #000);
 +
    background: -o-linear-gradient(left, #000, rgba(0, 0, 0, 0), #000);
 +
    background: linear-gradient(to right, #000, rgba(0, 0, 0, 0), #000);
 +
}
 +
 
 +
.masthead-main .thumbnail {
 +
    height: 200px;
 +
    width: 100%;
 +
    background-size: cover;
 +
    background-position: center;
 +
    background-repeat: no-repeat;
 +
    border: 0 none;
 +
    box-shadow: none;
 +
    margin:0;
 +
    padding:0;
 +
}
 +
 
 +
.masthead-main h1.title {
 +
    text-transform: uppercase;
 +
    text-align: justify;
 +
color: white;
 +
}
 +
 
 +
/***********
 +
10. MODAL PICTURES
 +
************/
 +
 
 +
.modal-img {
 +
cursor: pointer;
 +
}
 +
 
 +
/* The Modal (background) */
 +
.modal {
 +
    display: none; /* Hidden by default */
 +
    position: fixed; /* Stay in place */
 +
    z-index: 1; /* Sit on top */
 +
    padding-top: 100px; /* Location of the box */
 +
    left: 0;
 +
    top: 0;
 +
    width: 100%; /* Full width */
 +
     height: 100%; /* Full height */
 +
    overflow: auto; /* Enable scroll if needed */
 +
    background-color: rgb(0,0,0); /* Fallback color */
 +
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
 +
}
 +
 
 +
/* Modal Content (Image) */
 +
.modal-content {
 +
    margin: auto;
 +
    display: block;
 +
    width: 80%;
 +
    max-width: 700px;
 +
}
 +
 
 +
/* Caption of Modal Image (Image Text) - Same Width as the Image */
 +
#caption {
 +
    margin: auto;
 +
    display: block;
 +
    width: 80%;
 +
    max-width: 700px;
 +
    text-align: center;
 +
    color: #ccc;
 +
    padding: 10px 0;
 +
    height: 150px;
 +
}
 +
 
 +
/* Add Animation - Zoom in the Modal */
 +
.modal-content, #caption {
 +
    -webkit-animation-name: zoom;
 +
    -webkit-animation-duration: 0.6s;
 +
    animation-name: zoom;
 +
    animation-duration: 0.6s;
 +
}
 +
 
 +
@-webkit-keyframes zoom {
 +
    from {-webkit-transform:scale(0)}
 +
    to {-webkit-transform:scale(1)}
 +
}
 +
 
 +
@keyframes zoom {
 +
    from {transform:scale(0)}
 +
    to {transform:scale(1)}
 +
}
 +
 
 +
/* The Close Button */
 +
.close {
 +
    position: absolute;
 +
    top: 15px;
 +
    right: 35px;
 +
    color: #f1f1f1;
 +
    font-size: 40px;
 +
    font-weight: bold;
 +
    transition: 0.3s;
 +
}
 +
 
 +
.close:hover,
 +
.close:focus {
 +
    color: #bbb;
 +
    text-decoration: none;
 +
    cursor: pointer;
 +
}
 +
 
 +
/* 100% Image Width on Smaller Screens */
 +
@media only screen and (max-width: 700px){
 +
    .modal-content {
 +
        width: 100%;
 +
    }
 +
}
  
−
</div> <!-- /.row -->
+
/****
−
</div> <!-- /CONTENT-->   
+
11. PANEL
−
</div> <!-- /BODY-->
+
****/
  
−
</body>
+
.panel div.panel-heading {
 +
background-color: #990000
 +
}
  
−
<!--script for functionality of sidebar, DON'T TOUCH!!! -->
+
.panel h4.panel-title {
−
<script type="text/javascript" src="https://2016.igem.org/Team:DTU-Denmark/sidebar-js?action=raw&ctype=text/javascript"></script>
+
color: #fff;
−
</html>
+
}
  
−
<!-- DON'T TOUCH!!! -->
+
.panel h4.panel-title:hover,
−
{{Team:DTU-Denmark/footer}}
+
.panel h4.panel-title:focus {
 +
font-weight: 400;
 +
}

Revision as of 18:47, 16 October 2016

/* Overview 1. Body 2. Masthead settings 3. Content left column 4. Sidebar right column 5. windowsize responsive 6. Attribution page 7. Team member page 8. Notebook 9. Masterhead mainpages 10. Modal Pictures 11. Panel

  • /

/**** 1. BODY

          • /

body { 

   overflow-x: hidden; /*prevent sidescroll on narrow devices*/

}

/* .MYbody { 

   position: fixed;
   overflow-x: hidden;
   overflow-y: scroll;

}

  • /

a, a:visited { 

   color: #555;

}

a:hover, a:focus { 

   color: #990000;

}

/*********** 2. MASTHEAD

                        • /

.masthead { /*control height*/ 

   height: 300px;

}

.masthead .caption { /*control shadowing*/ 

   width:100%;
   height: 300px;
   bottom: .0rem;
   position: absolute;
   background:#000;
   background: -webkit-linear-gradient(left, #000, rgba(0, 0, 0, 0), #000);
   background: -moz-linear-gradient(left, #000, rgba(0, 0, 0, 0), #000);
   background: -o-linear-gradient(left, #000, rgba(0, 0, 0, 0), #000);
   background: linear-gradient(to right, #000, rgba(0, 0, 0, 0), #000);

}

.masthead .thumbnail { 

   height: 300px;
   width: 100%;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   border: 0 none;
   box-shadow: none;
   margin:0;
   padding:0;

}

.masthead .caption > div { 

   margin-top: 2em;

}

.masthead .caption h1 { 

   margin-top: -.0em;
   padding-top: -.0em;

}

.masthead .caption h1, .masthead .caption p { 

   color: #fff;

}

.masthead .title h1, .masthead .title h1 > p{ 

   text-transform: uppercase;
   text-align: justify;
   float: left;

}

.masthead .title h1 > p { 

   border-top: 1px solid;
   padding-top: .3em;

}

.masthead .intro blockquote { 

   position: absolute;
   margin-top: 30px;

}

.masthead .intro blockquote p { 

   text-align: right !important;

}

.masthead .intro blockquote small { 

   color: #fff;

}

/****************** 3. CONTENT LEFT COLUMN

                                    • /

.colLeft blockquote { 

   border-left-color: #990000;

}

.colLeft a.anchor:target, .colLeft div.anchor:target { /*Ensure that internal links will have the correct setoff, below the fixed header*/ 

   display: block;
   top: -125px;
   position: relative;
   visibility: hidden;

}

.colLeft .h2 { 

   border-bottom-width: 2px;
   font-weight: 500;

}

.colLeft .h3 { 

   border-bottom-width: 1px;
   font-weight: 500;

margin-bottom: 0.4em; }

  1. bodyContent h3 {

margin-bottom: 0.5em; }

.colLeft .h2, .colLeft .h3 { 

   padding-bottom: 0.2em;
   border-bottom-style: solid;
   border-bottom-color: #990000;

clear: both; } /* grid layout for achievements, notebook, and parts page */ .grid-row { 

   clear:both;

}

/******************* 4. SIDEBAR RIGHT COLUMN

                                        • /

@media screen and (max-width: 1000px){ 

   .colRight {
   padding-left: 0px !important;
   }

}

  1. sidebar {
   margin-top: 20px;
   padding-top: 18px;
   padding-bottom: 5px;
   padding-left: 5px;
   padding-right: 5px;
   border-radius: 5px;

}

  1. sidebar {
   margin-left: 0px;

}


  1. sidebar.nav li a {
   color: #999;
   font-size: .9em;
   padding-top: 0.3em;
   padding-bottom: .3em;
   background-color: transparent;
   text-transform: uppercase;
   border-left-width: 3px;
   border-left-style: solid;
   border-left-color: #fff;

}

  1. sidebar.nav li a:active,
  2. sidebar.nav li a:hover,
  3. sidebar.nav li a:focus,
  4. sidebar.nav li a.nav-active:hover {
   background-color: transparent;
   list-style: circle;
   border-left-width: 3px;
   border-left-style: solid;
   border-left-color: #990000;

}

  1. sidebar.nav li a.nav-active {
   color:black;
   border-left-width: 3px;
   border-left-style: solid;
   border-left-color: #750000;

}

/* Undo the affixed behavior in mobile views */


/* Apply the affixed behavior */ /* affix-top: The affix-top class should be inline to the page. */

  1. sidebar.affix-top {
   width:200px;

/* for reference - no additional styling */ }

/* affix: The affix class should be fixed to the page. */

  1. sidebar.affix {
   position: fixed;
   top: 125px;      /* same as body padding or outer navbar height */
   width: 200px;   /* stop it from growing - anyone know how to fix this? */

}

/* affix bottom: The affix-bottom class should be positioned absolute. */

  1. sidebar.affix-bottom {
   position: absolute;
   width: 200px;

}


/******************** 5. WINDOWSIZE RESPONSIVE

                                        • /

/*Fixes dissapear reappear of sidebar when scrolling on iPad */

  1. sidebar *:not(html) { 
   -webkit-transform: translate3d(0, 0, 0);

}

@media screen and (max-width: 900px) { 

   div.colLeft {
       width: 100%;
   }

   #sidebar {
       position: fixed;
       top: 70px !important; 
       width: 200px;   /* stop it from growing - anyone know how to fix this? */
       z-index: 200;
       background-color: white;
       border-color: #790000;
       border-style: solid;
       border-width: 3px;
   }

   #sidebar.affix-bottom,
   #sidebar.affix-top {
       position: fixed;
   }
   
   #scrollspy {
       display: none;
   }

}

/*************** 6. ATTRIBUTION PAGE

                                • /

.sponsor-image { 

   width: 100%;
   margin-bottom: 40px;

}

/*************** 7. TEAM MEMBER PAGE

                                • /

.student { 

   margin-bottom: 3em;

}

.student img { 

   margin-top: 1.5em;

}

/******** 8. NOTEBOOK

                • /

/* Timeline */

  1. timeline .timeline-item:after,
  2. timeline .timeline-item:before {
   content: ;
   display: block;
   width: 100%;
   clear: both;

}

  1. timeline {
   width: 100%;
   margin: 30px auto;
   position: relative;
   padding: 0 10px;
   -webkit-transition: all 0.4s ease;
   -moz-transition: all 0.4s ease;
   -ms-transition: all 0.4s ease;
   transition: all 0.4s ease;

}

  1. timeline:before {
   content: "";
   width: 3px;
   height: 100%;
   background: #EFEFEF;
   left: 50%;
   top: 0; 
   position: absolute;

}

  1. timeline:after {
   content: "";
   clear: both;
   display: table;
   width: 100%;

}

  1. timeline .timeline-item {
   margin-bottom: 50px;
   position: relative;

}

  1. timeline .timeline-item .timeline-icon {
   background: #EFEFEF;
   width: 50px;
   height: 50px;  
   position: absolute;
   top: 0;
   left: 50%;
   overflow: hidden;
   margin-left: -23px;
   border-radius: 100%;

}

  1. timeline .timeline-item .timeline-icon span.star {
   position: relative;
   top: 28%;
   left: 28%;
   color: #6C7A89;
   font-size: x-large;

}

  1. timeline .timeline-item .timeline-content {
   width: 45%;
   background: #EFEFEF;
   padding: 20px;

}

  1. timeline .timeline-item .timeline-content h2 {
   padding: 15px;
   color: #141414;
   margin:-20px -20px 5px -20px;
   font-weight: 300;
   font-size:21px;

}

  1. timeline .timeline-item .timeline-content:before {
   content: ;
   position: absolute;
   left: 45%;
   top: 20px; 
   width: 0;
   height: 0;
   border-top: 7px solid transparent;
   border-bottom: 7px solid transparent; 
   border-left: 7px solid #f1f1f1;

}

  1. timeline .timeline-item .timeline-content.right {
   float: right;

}

  1. timeline .timeline-item .timeline-content.right:before {
   content: ;
   right: 45%;
   left: inherit;
   border-left: 0;
   border-right: 7px solid #f1f1f1;

}

@media screen and (max-width: 768px) { 

   #timeline {
       margin: 30px;
       padding: 0px;
       width: 90%;
   }
   #timeline:before {
       left: 0;
   }
   #timeline .timeline-item .timeline-content {
       width: 90%;
       float: right;  
   }
   #timeline .timeline-item .timeline-content:before, #timeline .timeline-item .timeline-content.right:before {
       left: 10%;
       margin-left: -6px;
       border-left: 0;
       border-right: 7px solid #f1f1f1;
   }
   #timeline .timeline-item .timeline-icon {
       left: 0;
   }

}


/* Labels */

  1. timeline .label-main {
   background-color: #6C7A89;
   color:#FFF;
   font-size:14px;
   margin-left:-30px;
   border-radius:0;
   font-weight:400;

}

  1. full-schedule .label-main {
   background-color: #6C7A89;
   color:#FFF;font-size:14px;
   margin-left:0px;
   border-radius:0;
   font-weight:400;

}

/*********** 9. MASTHEAD

                        • /

.masthead-main { /*control height*/ 

   height: 200px;

}

.masthead-main .caption { /*control shadowing*/ 

   width:100%;
   height: 200px;
   bottom: .0rem;
   position: absolute;
   background:#000;
   background: -webkit-linear-gradient(left, #000, rgba(0, 0, 0, 0), #000);
   background: -moz-linear-gradient(left, #000, rgba(0, 0, 0, 0), #000);
   background: -o-linear-gradient(left, #000, rgba(0, 0, 0, 0), #000);
   background: linear-gradient(to right, #000, rgba(0, 0, 0, 0), #000);

}

.masthead-main .thumbnail { 

   height: 200px;
   width: 100%;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   border: 0 none;
   box-shadow: none;
   margin:0;
   padding:0;

}

.masthead-main h1.title { 

   text-transform: uppercase;
   text-align: justify;

color: white; }

/*********** 10. MODAL PICTURES

                        • /

.modal-img { cursor: pointer; }

/* The Modal (background) */ .modal { 

   display: none; /* Hidden by default */
   position: fixed; /* Stay in place */
   z-index: 1; /* Sit on top */
   padding-top: 100px; /* Location of the box */
   left: 0;
   top: 0;
   width: 100%; /* Full width */
   height: 100%; /* Full height */
   overflow: auto; /* Enable scroll if needed */
   background-color: rgb(0,0,0); /* Fallback color */
   background-color: rgba(0,0,0,0.9); /* Black w/ opacity */

}

/* Modal Content (Image) */ .modal-content { 

   margin: auto;
   display: block;
   width: 80%;
   max-width: 700px;

}

/* Caption of Modal Image (Image Text) - Same Width as the Image */

  1. caption {
   margin: auto;
   display: block;
   width: 80%;
   max-width: 700px;
   text-align: center;
   color: #ccc;
   padding: 10px 0;
   height: 150px;

}

/* Add Animation - Zoom in the Modal */ .modal-content, #caption { 

   -webkit-animation-name: zoom;
   -webkit-animation-duration: 0.6s;
   animation-name: zoom;
   animation-duration: 0.6s;

}

@-webkit-keyframes zoom { 

   from {-webkit-transform:scale(0)} 
   to {-webkit-transform:scale(1)}

}

@keyframes zoom { 

   from {transform:scale(0)} 
   to {transform:scale(1)}

}

/* The Close Button */ .close { 

   position: absolute;
   top: 15px;
   right: 35px;
   color: #f1f1f1;
   font-size: 40px;
   font-weight: bold;
   transition: 0.3s;

}

.close:hover, .close:focus { 

   color: #bbb;
   text-decoration: none;
   cursor: pointer;

}

/* 100% Image Width on Smaller Screens */ @media only screen and (max-width: 700px){ 

   .modal-content {
       width: 100%;
   }

}

/**** 11. PANEL

        • /

.panel div.panel-heading { background-color: #990000 }

.panel h4.panel-title { color: #fff; }

.panel h4.panel-title:hover, .panel h4.panel-title:focus { font-weight: 400; }