Difference between revisions of "Team:Tuebingen/test.php"

Line 2: Line 2:
  
 
<html>
 
<html>
−
    <head>
+
      <script type='text/javascript'>
−
        <title>Draft</title>
+
−
<style type="text/css">
+
−
 
+
−
/* Central space for fine tuning */
+
−
:root {
+
−
    --lightBackgroundText: rgba(223, 220, 228, 0.9);
+
−
 
+
−
    --contentFontSize: large;
+
−
 
+
−
    --navBorderThickness: 2px;
+
−
    --navFontSize: x-large;
+
−
    --navSubFontSize: large;
+
−
    --navLinkPadding: 0.3em;
+
−
    --navLeftPadding: 1vw;
+
−
 
+
−
    --navScrollTime: 500ms;
+
−
 
+
−
    --contentPadding: 3vw;
+
−
 
+
−
    font-family: Helvetica, Arial, sans-serif;
+
−
 
+
−
    /* Setup counter for figure and table enumeration */
+
−
    counter-reset: figures tables;
+
−
}
+
−
 
+
−
.iGemSabber {
+
−
    /* rule of thumb, BG about +10 each */
+
−
    /*--lightsabber:  rgb(46, 255, 6);*/
+
−
    --lightsabber:  rgb(202, 255, 212);
+
−
    --lightsabberBg: rgba(1, 216, 34, 0.9);
+
−
}
+
−
.blueSabber {
+
−
    --lightsabber:  rgb(223, 254, 255);
+
−
    --lightsabberBg: rgba(0, 129, 160, 0.9);
+
−
}
+
−
.orangeSabber {
+
−
    --lightsabber:  rgb(254, 255, 234);
+
−
    --lightsabberBg: rgba(235, 168, 73, 0.9);
+
−
}
+
−
.redSabber {
+
−
    --lightsabber:  rgb(247, 253, 252);
+
−
    --lightsabberBg: rgba(180, 0, 0, 0.9);
+
−
}
+
−
.whiteSabber {
+
−
    --lightsabber:  rgb(252, 252, 255);
+
−
    --lightsabberBg: rgba(145, 164, 161, 0.9);
+
−
}
+
−
.purpleSabber {
+
−
    --lightsabber:  rgb(255, 238, 254);
+
−
    --lightsabberBg: rgba(200, 39, 190, 0.9);
+
−
}
+
−
 
+
−
 
+
−
body {
+
−
    /* Version 1: One picture scaled full size (watch file size) */
+
−
    background-image: url(../wiki/images/thumb/f/fe/Space_low.jpg/1599px-Space_low.jpg);
+
−
    background-size: 100% 100%;
+
−
    background-repeat: no-repeat;
+
−
    /* Version 2: Small pattern repeated */
+
−
    /*
+
−
    background-image: url(steel1.jpg);
+
−
    background-repeat: repeat;
+
−
    */
+
−
 
+
−
    background-position: right top;
+
−
    background-attachment: fixed;
+
−
 
+
−
    padding: 0;
+
−
    margin: 0;
+
−
}
+
−
 
+
−
.grailWrapper {
+
−
    background-color: var(--lightBackgroundText);
+
−
 
+
−
    display: table;
+
−
    height: 100%;
+
−
    width: 100%;
+
−
    margin: 0;
+
−
    margin: 0 auto;
+
−
    padding: 0;
+
−
 
+
−
    border-collapse: collapse;
+
−
 
+
−
    min-width: 760px;
+
−
    max-width: 1000px;
+
−
 
+
−
    font-size: var(--contentFontSize);
+
−
}
+
−
 
+
−
.header {
+
−
height: 200px;
+
−
    /* not accurate, vertical center for final logo */
+
−
    /* still needed? padding-top: 30px; */
+
−
    text-align: center;
+
−
    vertical-align: middle;
+
−
 
+
−
    font-size: 50px;
+
−
    font-family: Impact, Charcoal, sans-serif;
+
−
 
+
−
    display: table-row;
+
−
}
+
−
 
+
−
nav {
+
−
    display: block;/*table-row;*/
+
−
    padding: 0;
+
−
    margin: 0;
+
−
 
+
−
    /* make border on top and bottom of nav */
+
−
    border-width: var(--navBorderThickness);
+
−
    border-style: solid none;
+
−
    border-color: black;
+
−
 
+
−
    font-size: var(--navFontSize);
+
−
    height: calc(2 * var(--navLinkPadding) + var(--navFontSize)
+
−
        2 * var(--navBorderThickness));
+
−
 
+
−
    /*background-color: #4f4f4f;*/
+
−
    background: linear-gradient(to bottom, #4f4f4f, #6f6f6f, #4f4f4f);
+
−
}
+
−
 
+
−
.navbarFixed {
+
−
    position: fixed;
+
−
    top: 0;
+
−
    left: 0;
+
−
 
+
−
    z-index: 100;
+
−
    width: 100%;
+
−
}
+
−
 
+
−
.navbarFixed ul {
+
−
    --navLeftPadding: 5.5em;
+
−
}
+
−
 
+
−
#navIcon {
+
−
    display: absolute;
+
−
    position: fixed;
+
−
    top: 10px;
+
−
    left: 10px;
+
−
 
+
−
    height: 3em;
+
−
    margin-right: 1em;
+
−
    /*top: -0.6em;*/
+
−
 
+
−
    vertical-align: top;
+
−
    padding: 0.5em;
+
−
 
+
−
    border: 2px solid black;
+
−
    border-radius: 1.5em;
+
−
 
+
−
    background: radial-gradient(circle, #dfdeee, #6f6f6f, black);
+
−
    box-shadow: 10px 10px 5px grey;
+
−
    box-shadow: 0 0 0.8em 0.3em #000000;
+
−
    /*visibility: hidden;*/
+
−
}
+
−
 
+
−
nav ul {
+
−
    display: table;
+
−
    table-layout: fixed;
+
−
 
+
−
    margin: 0 0 0 var(--navLeftPadding);
+
−
    padding: 0;
+
−
 
+
−
    width: calc(100% - var(--navLeftPadding));
+
−
 
+
−
    list-style: none;
+
−
}
+
−
 
+
−
nav ul li {
+
−
    display: table-cell;
+
−
 
+
−
    width: 100%;
+
−
    height: calc(2 * var(--navLinkPadding) + var(--navFontSize));
+
−
 
+
−
    text-align: center;
+
−
    vertical-align: top;
+
−
}
+
−
 
+
−
nav ul li a {
+
−
    display: block;
+
−
 
+
−
    padding: var(--navLinkPadding) 0;
+
−
    text-align:center;
+
−
    vertical-align: middle;
+
−
 
+
−
    color: #fff;
+
−
text-decoration: none;
+
−
 
+
−
    border-left:4px solid black;
+
−
}
+
−
 
+
−
nav ul li:hover a, .linkActive {
+
−
    /*color: black;*/
+
−
    background: linear-gradient(to bottom, #4f4f4f, var(--lightsabberBg), #4f4f4f);
+
−
}
+
−
nav ul li:hover ul li a {
+
−
    background: none !important;
+
−
}
+
−
 
+
−
nav ul li ul li a:hover {
+
−
    text-decoration: underline;
+
−
}
+
−
 
+
−
nav li ul {
+
−
    display: block;
+
−
    height: auto;
+
−
    width: calc(100% - 18px);
+
−
 
+
−
    padding: 0 10px;
+
−
    margin: 0;
+
−
 
+
−
    position: absolute;
+
−
    left: -2px;
+
−
    top: calc(2 * var(--navLinkPadding) + var(--navFontSize) +
+
−
        2 * var(--navBorderThickness));
+
−
    z-index:1;
+
−
 
+
−
    background: linear-gradient(to right,
+
−
        black 0,
+
−
        var(--lightsabber) 1px,
+
−
        var(--lightsabber) 7px,
+
−
        black 8px,
+
−
        var(--lightsabberBg) 8px,
+
−
        var(--lightBackgroundText));
+
−
}
+
−
nav ul > li {
+
−
    position: relative;
+
−
}
+
−
nav li ul li {
+
−
    display: block;
+
−
 
+
−
    overflow: hidden;
+
−
    height:0;
+
−
    -webkit-transition: height var(--navScrollTime) ease-in;
+
−
    -moz-transition: height var(--navScrollTime) ease-in;
+
−
    -o-transition: height var(--navScrollTime) ease-in;
+
−
    transition: height var(--navScrollTime) ease-in;
+
−
}
+
−
 
+
−
nav ul > li:hover ul li {
+
−
    height: 2em;
+
−
}
+
−
 
+
−
nav ul li ul li a{
+
−
    display:block;
+
−
    height: 100%;
+
−
    width: 100%;
+
−
 
+
−
    padding: auto;
+
−
    font-size: var(--navSubFontSize);
+
−
 
+
−
    border: none;
+
−
    color:black;
+
−
}
+
−
 
+
−
.contentArea {
+
−
    display: block;
+
−
    width: var(100% - var(--contentPadding));
+
−
    margin: 0 var(--contentPadding);
+
−
    padding: 0;
+
−
    text-align: justify;
+
−
}
+
−
.contentRow {
+
−
    display: table;
+
−
    width: 100%;
+
−
    padding: 0;
+
−
    margin: 0;
+
−
    border-spacing: 1em;
+
−
    border-collapse: separate;
+
−
}
+
−
.contentCell {
+
−
    display: table-cell;
+
−
    vertical-align: top;
+
−
    padding: 0;
+
−
    margin: 0;
+
−
}
+
−
.contentSmallCell{
+
−
    width: 40%;
+
−
}
+
−
 
+
−
figure {
+
−
    display: block;
+
−
    margin: 1em;
+
−
    padding: 0.5em;
+
−
 
+
−
    width: calc(100% - var(padding));
+
−
    background-color: white;
+
−
}
+
−
figure img {
+
−
    display: block;
+
−
    --leftRightSpace: 0.8em;
+
−
    width: calc(100% - 2 * var(--leftRightSpace));
+
−
    padding: var(--leftRightSpace);
+
−
}
+
−
figure figcaption::before{
+
−
    counter-increment: figures;
+
−
    font-weight: bold;
+
−
    content: "Figure " counter(figures) ": ";
+
−
}
+
−
figure figcaption {
+
−
    width: 100%;
+
−
}
+
−
 
+
−
table {
+
−
    border-top: 3px solid black;
+
−
    border-bottom: 3px solid black;
+
−
    border-spacing: 0.4em;
+
−
    border-collapse: collapse;
+
−
    margin: 0 auto;
+
−
}
+
−
table caption::before{
+
−
    counter-increment: tables;
+
−
    font-weight: bold;
+
−
    content: "Table " counter(tables) ": ";
+
−
}
+
−
table caption {
+
−
    width: 100%;
+
−
    margin-bottom: 0.8em;
+
−
    text-align: center;
+
−
}
+
−
table td {
+
−
    padding: 0.3em;
+
−
}
+
−
table thead tr {
+
−
    font-weight: bold;
+
−
    border-bottom: 1.5px solid black;
+
−
}
+
−
 
+
−
</style>
+
−
        <script type='text/javascript' src='jquery.js' ></script>
+
−
        <script type='text/javascript'>//<![CDATA[
+
−
            $(window).ready(function() {
+
−
              $(window).scroll(function () {
+
−
                //console.log($(window).scrollTop())
+
−
                var h = $('.header').height();
+
−
                <!--img src='big.png' /-->
+
−
                if ($(window).scrollTop() > h) {
+
−
                  $('nav').addClass('navbarFixed');
+
−
                  // add navIcon if it is not existing yet
+
−
                  if ( ! $('#navIcon').length ) {
+
−
                      $('nav').prepend("<img src='../wiki/images/c/cc/Big.png' id='navIcon' />");
+
−
                  }
+
−
                } else {
+
−
                  $('nav').removeClass('navbarFixed');
+
−
                  $('#navIcon').remove();
+
−
                }
+
−
              });
+
−
            });//]]>
+
−
        </script>
+
−
    </head>
+
−
    <body>
+
−
        <div class="grailWrapper">
+
−
            <div class='header'>
+
−
                <img src="../wiki/images/c/cc/Big.png" style="width: 25%; vertical-align: middle;" />
+
−
                iGEM Tuebingen
+
−
            </div>
+
−
            <nav>
+
−
                <ul>
+
−
                    <li id='sectionTeam' class="iGemSabber">
+
−
                        <a>Team</a>
+
−
                        <ul>
+
−
                            <li><a href="#">Home</a>
+
−
                            <li><a href="#">The Team</a>
+
−
                            <li><a href="#">Advisors</a>
+
−
                        </ul>
+
−
                    </li>
+
−
                    <li id='sectionFruitforce' class="whiteSabber">
+
−
                        <a>Fruitforce</a>
+
−
                        <ul>
+
−
                            <li><a href="#">Summary</a>
+
−
                            <li><a href="#">Design</a>
+
−
                            <li><a href="#">Experiments</a>
+
−
                            <li><a href="#">Results</a>
+
−
                            <li><a href="#">Model</a>
+
−
                            <li><a href="#">Discussion</a>
+
−
                        </ul>
+
−
                    </li>
+
−
                    <li id='sectionSide' class="blueSabber">
+
−
                        <a>Side Projects</a>
+
−
                        <ul>
+
−
                            <li><a href="#">Clone Wars</a>
+
−
                            <li><a href="#">Death Star</a>
+
−
                            <li><a href="#">Interlab Study</a>
+
−
                        </ul>
+
−
                    </li>
+
−
                    <li id='sectionHR' class="redSabber">
+
−
                        <a>HR Practices</a>
+
−
                        <ul>
+
−
                            <li><a href="#">Alpha</a>
+
−
                            <li><a href="#">Bravo</a>
+
−
                            <li><a href="#">Charly</a>
+
−
                            <li><a href="#">Delta</a>
+
−
                        </ul>
+
−
                    </li>
+
−
                    <li id='sectionProcedures' class="orangeSabber">
+
−
                        <a>Procedures</a>
+
−
                        <ul>
+
−
                            <li><a href="#">Parts</a>
+
−
                            <li><a href="#">Safety</a>
+
−
                        </ul>
+
−
                    </li>
+
−
                    <li id='sectionAttributions' class="purpleSabber">
+
−
                        <a>Attributions</a>
+
−
                        <ul>
+
−
                            <li><a href="#">Collaboration</a>
+
−
                            <li><a href="#">Sponsoring</a>
+
−
                            <li><a href="#">References</a>
+
−
                        </ul>
+
−
                    </li>
+
−
                <ul>
+
−
            </nav>
+
−
        <script type='text/javascript'>
+
 
         $('#sectionProject > a').addClass('linkActive');
 
         $('#sectionProject > a').addClass('linkActive');
 
         </script>
 
         </script>
Line 591: Line 180:
 
             </div>
 
             </div>
 
         </div>
 
         </div>
−
    </body>
+
 
 +
 
 
</html>
 
</html>

Revision as of 19:44, 30 September 2016

Draft

iGEM Tuebingen

Here is a small demonstration for a block text. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor...

Take a look at this awesome illustration!

And it still keeps going!

-- Some wizzard dude.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor...

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor...

Here is a small demonstration for a block text. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor...

Uebersicht Saeuremienenarbeit:
Year Slaves Income Bribes
2009 9 $1 mio. 0
2010 90 -$1 mio. $20,000
2011 100 $10 mio. $50,000

Don't forget to refer to tables in a text. Need feature btw: Auto counters!

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,

Uebersicht Saeuremienenarbeit:
Year Slaves Income Bribes
2009 9 $1 mio. 0
2010 90 -$1 mio. $20,000
2011 100 $10 mio. $50,000