Difference between revisions of "Template:Freiburg/CSS"

 
(125 intermediate revisions by 3 users not shown)
Line 19: Line 19:
 
/* Accordion - Ausklappmenues
 
/* Accordion - Ausklappmenues
 
/* Lightbox
 
/* Lightbox
 +
/* Float Barrier
 
/*
 
/*
 
/* Flipcard-CSS for the members-section: inline in https://2015.igem.org/Team:Freiburg/Team
 
/* Flipcard-CSS for the members-section: inline in https://2015.igem.org/Team:Freiburg/Team
Line 25: Line 26:
 
/* CSS for back-button
 
/* CSS for back-button
 
/* CSS for the upwards-blob: on wiki_content_start
 
/* CSS for the upwards-blob: on wiki_content_start
 +
/* CSS for Project Pages
 +
/* Horizontal Menu for Paragraphs
 +
/* Button for important links
 
/* =================== END: CSS Navigation =================== */
 
/* =================== END: CSS Navigation =================== */
  
Line 124: Line 128:
 
     border: 0;
 
     border: 0;
 
     margin-bottom: -8px;
 
     margin-bottom: -8px;
 +
    margin-top: 0;
 
}
 
}
  
Line 148: Line 153:
 
     cursor: auto;
 
     cursor: auto;
 
}
 
}
 +
 +
.urlextern {
 +
    background: none !important;
 +
}
 +
 +
.link-https {
 +
    background: none !important;
 +
}
 +
  
 
/* ============= END: Clearing DokuWiki elements ============= */
 
/* ============= END: Clearing DokuWiki elements ============= */
Line 159: Line 173:
  
 
/* ============= Declaring Fonts  ============= */
 
/* ============= Declaring Fonts  ============= */
−
 
−
@font-face {
 
−
    font-family: Candara;
 
−
    src: url(https://static.igem.org/mediawiki/2015/d/dd/Freiburg_Candara.eot);
 
−
    src: url(https://static.igem.org/mediawiki/2015/6/6c/Freiburg_Candara.ttf) format('truetype');
 
−
 
−
}
 
−
@font-face {
 
−
    font-family: Candara;
 
−
    src: url(https://static.igem.org/mediawiki/2015/8/89/Freiburg_Candarab.ttf)  format('truetype');
 
−
    font-weight: bold;
 
−
    font-style: normal;
 
−
}
 
−
@font-face {
 
−
    font-family: Candara;
 
−
    src: url(https://static.igem.org/mediawiki/2015/3/3e/Freiburg_Candarai.ttf)  format('truetype');
 
−
    font-weight: normal;
 
−
    font-style: italic;
 
−
}
 
  
 
@font-face {
 
@font-face {
Line 196: Line 191:
 
    
 
    
 
}
 
}
 +
 +
@font-face {
 +
    font-family: Roboto;
 +
    src: url(https://static.igem.org/mediawiki/2015/c/c4/Freiburg_Roboto-LightItalic-webfont.eot);
 +
    src: url(https://static.igem.org/mediawiki/2015/4/4b/Freiburg_Roboto-LightItalic-webfont.woff) format('woff'),        url(https://static.igem.org/mediawiki/2015/0/0e/Freiburg_Roboto-LightItalic-webfont.ttf)  format('truetype'),
 +
    url('https://static.igem.org/mediawiki/2015/1/1d/Freiburg_Roboto-LightItalic-webfont.svg#RobotoItalic') format('svg');
 +
    font-weight: normal;
 +
    font-style: italic;
 +
}
 +
 
@font-face {
 
@font-face {
 
     font-family: Roboto;
 
     font-family: Roboto;
Line 205: Line 210:
 
     font-style: normal;
 
     font-style: normal;
 
}
 
}
−
@font-face {
+
 
−
    font-family: Roboto;
+
−
    src: url(https://static.igem.org/mediawiki/2015/0/0f/Freiburg_Roboto-Italic.eot);
+
−
    src: url(https://static.igem.org/mediawiki/2015/6/6f/Freiburg_Roboto-Italic-webfont.woff) format('woff'), url(https://static.igem.org/mediawiki/2015/2/2e/Freiburg_Roboto-Italic.ttf)  format('truetype'),
+
−
    url('https://static.igem.org/mediawiki/2015/8/8f/Freiburg_Roboto-Italic-webfont.svg#RobotoItalic') format('svg');
+
−
    font-weight: normal;
+
−
    font-style: italic;
+
−
}
+
 
@font-face {
 
@font-face {
 
     font-family: Roboto;
 
     font-family: Roboto;
Line 233: Line 231:
  
  
−
/* ============= CSS for Menubar ============= */
 
  
−
#menubar {
 
−
    font-size: 16px;
 
−
    background-color: #5781bd;
 
−
    display: table;
 
−
    width: 100%;
 
−
    height: 70px; 
 
−
    border-collapse: collapse;
 
−
    border: none;
 
  
−
}
 
  
−
/*The sub (and subsubs) items of the menu*/
+
/* ============= Important Site setup ============= */
−
#menubar ul li ul li{
+
−
    width: 200px;
+
−
    height: 30px;
+
−
    margin-top: 2px;
+
−
}
+
−
/*The first (horizontal) line of menu items*/
+
−
#menubar > ul{
+
  
−
    position: relative;
 
−
    margin-top: 25;
 
−
    left: 50%;
 
−
    display: block;
 
−
    transform: translate(-50%,0%);
 
−
}
 
  
−
#menubar ul ul {
+
/* avoid dotted outline after clicking on links */
−
    background-color: #5781bd;
+
a {
−
    display: none;
+
  outline: 0;
−
    position: absolute;
+
−
    margin-left: 0px;
+
−
    float: left;
+
−
    margin-top:0px;
+
 
}
 
}
−
#menubar ul ul li{
 
−
    display: block;
 
−
    margin-left: 0px;
 
−
}
 
−
 
−
#menubar ul li {
 
−
    width: 100px;
 
−
    display: table-cell;
 
−
    font-family: "Roboto",sans-serif;
 
−
}
 
−
 
−
#menubar ul a{
 
−
    text-decoration: none;
 
−
    color: #FFFFFF;
 
−
    font-style: bold;
 
−
    text-align: left;
 
−
}
 
−
 
−
#menubar ul a:visited{
 
−
    display: block;
 
−
    text-decoration: none;
 
−
    color: #FFFFFF;
 
−
    font-style: bold;
 
−
}
 
−
#menubar ul li:hover > ul{
 
−
    color: #EEEE00;
 
−
    display: block;
 
−
    padding-top: 0px;
 
−
    padding-left: 20px;
 
−
}
 
−
#menubar ul li:hover{
 
−
    color: #EEEE00;
 
−
}
 
−
 
−
/* ============= END: CSS for Menubar ============= */
 
−
 
−
 
−
 
−
 
−
/* ============= Important Site setup ============= */
 
  
 
/* properties for central text box */
 
/* properties for central text box */
Line 336: Line 267:
 
     overflow: hidden;
 
     overflow: hidden;
 
     padding: 4%;
 
     padding: 4%;
−
     margin: 2em 0;
+
     margin: 2em 10px;
−
    margin-bottom: 0;
+
}
 +
/*links linking to ID's have to link to a span located on top of the targeted id. This span has to be an anchor element, otherwise the menubar will float over the targeted headline*/
 +
.anchor{
 +
display: block;
 +
  height: 62px; /*same height as header*/
 +
  margin-top: -62px; /*same height as header*/
 +
  visibility: hidden;
 
}
 
}
  
 +
/* ================== FLEXBOXES and IMAGE_BOXES ===================*/
  
 
/* flexbox: contains the whole dokuwiki image part and renders it readable
 
/* flexbox: contains the whole dokuwiki image part and renders it readable
Line 350: Line 288:
 
}
 
}
  
−
.image_box .thumb2 .thumbinner img{
+
.flexbox img,
 +
.image_box img {
 
     max-width: 100%;
 
     max-width: 100%;
 
}
 
}
 +
 +
.image_box .thumb2,
 +
.image_box .thumb2 .thumbinner,
 +
.flexbox .thumb2,
 +
.flexbox .thumb2 .thumbinner{
 +
    max-width: 80vw;
 +
}
 +
 +
/*
 +
.image_box .thumb2 .thumbinner img{
 +
    width: 100%;
 +
}*/
  
 
/* see: https://css-tricks.com/snippets/css/a-guide-to-flexbox/*/
 
/* see: https://css-tricks.com/snippets/css/a-guide-to-flexbox/*/
 +
 
.flexbox{
 
.flexbox{
 +
    display: -moz-box;
 +
    display: -ms-flexbox;
 +
    display: -webkit-box;
 +
    display: -webkit-flex;
 
     display: flex;
 
     display: flex;
 
     margin: 5% 0;
 
     margin: 5% 0;
 +
    -moz-justify-content: space-around;
 +
    -ms-justify-content: space-around;
 +
    -webkit-justify-content: space-around;
 
     justify-content: space-around;
 
     justify-content: space-around;
 +
    -moz-flex-wrap: wrap;
 +
    -ms-flex-wrap: wrap;
 +
    -webkit-flex-wrap: wrap;
 
     flex-wrap: wrap;
 
     flex-wrap: wrap;
 
     align-content: center;
 
     align-content: center;
 +
}
 +
 +
.flexbox .thumbinner{
 +
  margin: 0 5% 5% 5%;
 
}
 
}
  
Line 369: Line 335:
  
 
/* contains images where text shall float around */
 
/* contains images where text shall float around */
−
.image_box{
+
.image_box .thumb2 .thumbinner .thumbcaption{
 
     margin: 0.4em 0;
 
     margin: 0.4em 0;
 
     overflow: hidden;
 
     overflow: hidden;
Line 385: Line 351:
 
     margin-left: 3%
 
     margin-left: 3%
 
}
 
}
 +
 +
@media screen and (max-width: 600px){
 +
 +
.image_box{
 +
    display: -moz-box;
 +
    display: -ms-flexbox;
 +
    display: flex;
 +
    display: -webkit-box;
 +
    -ms-justify-content: space-around;
 +
    -moz-justify-content: space-around;
 +
    -webkit-justify-content: space-around;
 +
    justify-content: space-around;
 +
    -moz-flex-wrap: wrap;
 +
    -ms-flex-wrap: wrap;
 +
    flex-wrap: wrap;
 +
    -webkit-flex-wrap: wrap;
 +
    align-content: center;
 +
    font-size: 70%;
 +
    padding: 0;
 +
    text-align: justify;
 +
    width: 100%;
 +
}
 +
 +
} /* end media query */
 +
 +
/* ================== END: FLEXBOXES and IMAGE_BOXES ===================*/
 +
  
 
/* prevents the floating of images out of the DokuWiki-sections */
 
/* prevents the floating of images out of the DokuWiki-sections */
Line 507: Line 500:
 
     font-style: normal;
 
     font-style: normal;
 
     font-weight: 300;
 
     font-weight: 300;
−
     font-size: 120%;
+
     font-size: 110%;
 
     text-align: justify;
 
     text-align: justify;
 
     }
 
     }
Line 520: Line 513:
 
     font-family: "Roboto", sans-serif;
 
     font-family: "Roboto", sans-serif;
 
     color: #C5162F;
 
     color: #C5162F;
−
    font-size: 25px;
 
 
     clear: both;
 
     clear: both;
 
     font-weight: 400;
 
     font-weight: 400;
 
     line-height: 1.2;
 
     line-height: 1.2;
 
     border-bottom: 0;
 
     border-bottom: 0;
 +
}
 +
 +
h1 {font-size: 150%;}
 +
 +
h2 {font-size: 120%;}
 +
 +
h3 {font-size: 110%;}
 +
 +
h4 {font-size: 100%; color: black; font-weight: 400;}
 +
 +
.grey_titletext {
 +
    text-align: center;
 +
    color: #888;
 +
    font-size: 300%;
 +
    text-shadow: 
 +
        1px 0px 1px #ccc, 0px 1px 1px #eee,
 +
        2px 1px 1px #ccc, 1px 2px 1px #eee,
 +
        3px 2px 1px #ccc, 2px 3px 1px #eee,
 +
        4px 3px 1px #ccc, 3px 4px 1px #eee,
 +
        5px 4px 1px #ccc, 4px 5px 1px #eee,
 +
        6px 5px 1px #ccc, 5px 6px 1px #eee,
 +
        7px 6px 1px #ccc;
 
}
 
}
  
Line 557: Line 571:
 
/* KOMMENTARFUNKTION */
 
/* KOMMENTARFUNKTION */
 
.kommentar{
 
.kommentar{
 +
display:none;
 
     background-color: red;
 
     background-color: red;
 
     color: black;
 
     color: black;
Line 564: Line 579:
 
}
 
}
 
.kommentar_stefan{
 
.kommentar_stefan{
 +
display:none;
 
     background-color: #ff1493;
 
     background-color: #ff1493;
 
     color: black;
 
     color: black;
Line 571: Line 587:
 
     width: 100%;
 
     width: 100%;
 
     clear: both;
 
     clear: both;
 +
}
 +
 +
.todo_box{
 +
display:none;
 +
  background-color: lightblue;
 +
  border: 1px dashed;
 +
display: table;
 
}
 
}
  
Line 602: Line 625:
  
 
.background_image_left{
 
.background_image_left{
 +
display: none;
 
     left:0;
 
     left:0;
 
     bottom: -20px;
 
     bottom: -20px;
Line 638: Line 662:
 
     }
 
     }
 
}
 
}
 +
 +
/*
 
@media only screen and (max-width: 1020px){
 
@media only screen and (max-width: 1020px){
−
     /* style for browsers smaller than 1000px */
+
     /* style for browsers smaller than 1000px
 
     .page_content{
 
     .page_content{
 
         width: intrinsic;
 
         width: intrinsic;
Line 647: Line 673:
 
     }
 
     }
 
}
 
}
−
 
+
*/
 
/* === END: Background: Responsive Design === */
 
/* === END: Background: Responsive Design === */
  
Line 711: Line 737:
 
#bioss a img,
 
#bioss a img,
 
#facebook a img,
 
#facebook a img,
−
#email a img{
+
#email a img,
 +
#zbsa a img{
 
     max-height: 40px
 
     max-height: 40px
 
}
 
}
Line 718: Line 745:
 
#bioss,
 
#bioss,
 
#facebook,
 
#facebook,
−
#email{
+
#email,
 +
#zbsa{
 
     padding-top: 15px;
 
     padding-top: 15px;
 
     padding-right:10px;
 
     padding-right:10px;
Line 726: Line 754:
 
#facebook{
 
#facebook{
 
     padding-right: 40px;
 
     padding-right: 40px;
 +
}
 +
 +
@media screen and (max-width:400px){
 +
    #uni,
 +
    #zbsa{
 +
        display: none;
 +
    }
 
}
 
}
  
Line 753: Line 788:
 
     display:inline-block;
 
     display:inline-block;
 
     border-bottom:1px solid #1a1a1a;
 
     border-bottom:1px solid #1a1a1a;
−
     background:#0051a2;
+
     background: rgb(0, 81, 162) url("https://static.igem.org/mediawiki/2015/2/20/Freiburg_arrow_sprite.png") no-repeat scroll 20px 15px;
 
     transition:all linear 0.15s;
 
     transition:all linear 0.15s;
 
     /* Type */
 
     /* Type */
Line 759: Line 794:
 
     text-shadow:0px 1px 0px #1a1a1a;
 
     text-shadow:0px 1px 0px #1a1a1a;
 
     color:#fff;
 
     color:#fff;
 +
    text-decoration: none;
 +
    padding-left: 50px;
 
}
 
}
 
   
 
   
 +
@media screen and (max-width: 600px){
 +
    .accordion-section-title {
 +
        background: rgb(0, 81, 162);
 +
        padding-left: 15px;
 +
    }
 +
}
 +
 
.accordion-section-title.active, .accordion-section-title:hover {
 
.accordion-section-title.active, .accordion-section-title:hover {
−
     background:#72A6DB;
+
     background:rgb(0, 81, 162) url("https://static.igem.org/mediawiki/2015/2/20/Freiburg_arrow_sprite.png") no-repeat scroll 20px -25px;
 
     /* Type */
 
     /* Type */
 
     text-decoration:none;
 
     text-decoration:none;
Line 781: Line 825:
  
 
/* =============== LIghtbox =========================*/
 
/* =============== LIghtbox =========================*/
 +
 +
/* from http://webdesign.tutsplus.com/articles/super-simple-lightbox-with-css-and-jquery--webdesign-3528 */
  
 
#lightbox {
 
#lightbox {
−
position:fixed; /* keeps the lightbox window in the current viewport */
+
    position:fixed; /* keeps the lightbox window in the current viewport */
 
     top:0;  
 
     top:0;  
 
     left:0;  
 
     left:0;  
Line 804: Line 850:
 
     -webkit-box-shadow:0 0 25px #111;
 
     -webkit-box-shadow:0 0 25px #111;
 
     -moz-box-shadow:0 0 25px #111;
 
     -moz-box-shadow:0 0 25px #111;
−
     max-width:940px;
+
     max-width: 95vw;
−
     max-height: 800px;
+
     max-height: 95vh;
 +
    background-color: white;
 
}
 
}
  
 
/* =============== END: Lightbox =========================*/
 
/* =============== END: Lightbox =========================*/
 +
 +
/* =============== BEGIN: FloatBarrier =========================*/
 +
 +
.float_barrier{
 +
    overflow: hidden;
 +
    width: 100%;
 +
}
 +
 +
/* =============== END: FloatBarrier =========================*/
  
 
#head {
 
#head {
Line 851: Line 907:
 
     display: none;
 
     display: none;
 
}
 
}
 +
  
 
/* min-width is chosen so the blob does just not interfere with the content box */
 
/* min-width is chosen so the blob does just not interfere with the content box */
Line 869: Line 926:
  
 
<div id="upwards_blob"><a href="#globalWrapper"><img src="https://static.igem.org/mediawiki/2015/9/93/Freiburg_upwards_blob.png"></a></div>
 
<div id="upwards_blob"><a href="#globalWrapper"><img src="https://static.igem.org/mediawiki/2015/9/93/Freiburg_upwards_blob.png"></a></div>
 +
 +
<style>
 +
/* ============= BEGIN: CSS for Project Pages ================ */
 +
.content_text {
 +
    border-radius: 30px 60px;
 +
    overflow: hidden;
 +
    padding: 4%;
 +
    margin: 2em 0;
 +
    margin-bottom: 0;
 +
    text-align: justify;
 +
    color: #000;
 +
    width: 50%;
 +
}
 +
 +
.rightshift {
 +
    margin-right: -5%;
 +
    margin-left: 8%;
 +
}
 +
 +
.leftshift {
 +
    margin-left: -5%;
 +
    margin-right: 8%;
 +
}
 +
 +
.reference_box {
 +
    overflow: hidden;
 +
    border: 1px solid rgb(0, 0, 0);
 +
    border-radius: 10px;
 +
    background-color: #EEE;
 +
    text-align: justify;
 +
    box-shadow: 1px 1px 10px #888;
 +
    padding: 1% 2% 3%;
 +
    margin-top: 2em;
 +
    margin-right: auto;
 +
    margin-left: auto;
 +
    width: 80%;
 +
}
 +
 +
.h1_fancy {
 +
    text-align: center;
 +
    color: #888;
 +
    font-size: 300%;
 +
    text-shadow: 
 +
        1px 0px 1px #ccc, 0px 1px 1px #eee,
 +
        2px 1px 1px #ccc, 1px 2px 1px #eee,
 +
        3px 2px 1px #ccc, 2px 3px 1px #eee,
 +
        4px 3px 1px #ccc, 3px 4px 1px #eee,
 +
        5px 4px 1px #ccc, 4px 5px 1px #eee,
 +
        6px 5px 1px #ccc, 5px 6px 1px #eee,
 +
        7px 6px 1px #ccc;
 +
}
 +
/* ============= END: CSS for Project Pages ================ */
 +
 +
 +
/* ============= BEGIN: Horizontal Menu for Paragraphs ================ */
 +
.horizontal_menu {
 +
    margin: 0px auto;
 +
}
 +
 +
.horizontal_menu ul{
 +
    margin: 0px auto;
 +
    padding: 0px;
 +
    list-style: none;
 +
    text-align: center;
 +
}
 +
 +
.horizontal_menu li {
 +
    margin: 0px 5px auto;
 +
    padding: 1%;
 +
    display: inline;
 +
    text-align: center;
 +
    border: 2px groove #0051A2;
 +
    border-radius: 10px;
 +
    background-color: #0051A2;
 +
}
 +
 +
.horizontal_menu a {
 +
    color: #FFF;
 +
}
 +
/* ============= END: Horizontal Menu for Paragraphs ================ */
 +
 +
/* ============= Added: Styling for results pages ================ */
 +
 +
 +
.content_box h1{
 +
color: #C5162F;
 +
font-size: 40px;
 +
margin-bottom: 28px;
 +
margin-top: 20px;
 +
line-height: 45px;
 +
font-weight: 200;
 +
padding-top: 0;
 +
padding-bottom: 0;
 +
overflow: visible;
 +
text-align: center;
 +
}
 +
 +
.results_page h1{
 +
text-align: right;
 +
}
 +
 +
.content_box h2 {
 +
    font-size: 140%;
 +
    font-weight: 200;
 +
    letter-spacing: 0.5px;
 +
}
 +
 +
.results_page h2{
 +
letter-spacing: 0px;
 +
font-size: 35px;
 +
text-align: right;
 +
margin-bottom: 28px;
 +
margin-top: 20px;
 +
line-height: 45px;
 +
font-weight: 200;
 +
}
 +
 +
.content_box h3{
 +
font-weight: 200;
 +
 +
}
 +
 +
h2.left,
 +
h1.left{
 +
text-align: left;
 +
}
 +
 +
@media screen and (max-width: 600px){
 +
 +
.results_page h1{
 +
font-size: 120%;
 +
margin-bottom: 10px;
 +
margin-top: 8px;
 +
line-height: 150%;
 +
}
 +
 +
.results_page h2{
 +
font-size: 100%;
 +
margin-bottom: 10px;
 +
margin-top: 8px;
 +
line-height: 110%;
 +
}
 +
 +
/*========================= Style for Important Links Button =======================*/
 +
.link_button_arrow{
 +
background-image: url("https://static.igem.org/mediawiki/2015/f/ff/Freiburg_submenu_arrow.png");
 +
background-repeat: no-repeat;
 +
background-position: 3% 50%;
 +
background-size: 10px 13px;
 +
}
 +
 +
.link_button {
 +
margin: 0px auto;
 +
padding: 0px 5px 0px 10px;
 +
width: 200px;
 +
line-height: 16px;
 +
text-align: center;
 +
background-color: #888;
 +
font-size: 14pt;
 +
border-radius: 2px;
 +
color: #FFF;
 +
opacity: 0.8;
 +
box-shadow: 1px 1px 1px 2px #777;
 +
}
 +
 +
.link_button a:hover {
 +
    text-decoration: underline;
 +
}
 +
 +
.link_button a {
 +
    color: #FFF;
 +
}
 +
</style>
  
  
 
</html>
 
</html>

Latest revision as of 01:45, 19 September 2015