Difference between revisions of "Template:Freiburg/CSS"

 
(30 intermediate revisions by 3 users not shown)
Line 28: Line 28:
 
/* CSS for Project Pages
 
/* CSS for Project Pages
 
/* Horizontal Menu for Paragraphs
 
/* Horizontal Menu for Paragraphs
 +
/* Button for important links
 
/* =================== END: CSS Navigation =================== */
 
/* =================== END: CSS Navigation =================== */
  
Line 127: Line 128:
 
     border: 0;
 
     border: 0;
 
     margin-bottom: -8px;
 
     margin-bottom: -8px;
 +
    margin-top: 0;
 
}
 
}
  
Line 286: 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/*/
Line 296: Line 311:
 
     display: -ms-flexbox;
 
     display: -ms-flexbox;
 
     display: -webkit-box;
 
     display: -webkit-box;
 +
    display: -webkit-flex;
 
     display: flex;
 
     display: flex;
 
     margin: 5% 0;
 
     margin: 5% 0;
Line 336: Line 352:
 
}
 
}
  
−
@media screen and (max-width: 450px){
+
@media screen and (max-width: 600px){
  
 
.image_box{
 
.image_box{
Line 555: Line 571:
 
/* KOMMENTARFUNKTION */
 
/* KOMMENTARFUNKTION */
 
.kommentar{
 
.kommentar{
 +
display:none;
 
     background-color: red;
 
     background-color: red;
 
     color: black;
 
     color: black;
Line 562: Line 579:
 
}
 
}
 
.kommentar_stefan{
 
.kommentar_stefan{
 +
display:none;
 
     background-color: #ff1493;
 
     background-color: #ff1493;
 
     color: black;
 
     color: black;
Line 572: Line 590:
  
 
.todo_box{
 
.todo_box{
 +
display:none;
 
   background-color: lightblue;
 
   background-color: lightblue;
 
   border: 1px dashed;
 
   border: 1px dashed;
Line 606: Line 625:
  
 
.background_image_left{
 
.background_image_left{
 +
display: none;
 
     left:0;
 
     left:0;
 
     bottom: -20px;
 
     bottom: -20px;
Line 642: 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 651: Line 673:
 
     }
 
     }
 
}
 
}
−
 
+
*/
 
/* === END: Background: Responsive Design === */
 
/* === END: Background: Responsive Design === */
  
Line 776: Line 798:
 
}
 
}
 
   
 
   
 +
@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:rgb(0, 81, 162) url("https://static.igem.org/mediawiki/2015/2/20/Freiburg_arrow_sprite.png") no-repeat scroll 20px -25px;
 
     background:rgb(0, 81, 162) url("https://static.igem.org/mediawiki/2015/2/20/Freiburg_arrow_sprite.png") no-repeat scroll 20px -25px;
Line 909: Line 938:
 
     color: #000;
 
     color: #000;
 
     width: 50%;
 
     width: 50%;
−
}
 
−
 
−
.header_box {
 
−
    overflow: hidden;
 
−
    padding: 2% 0%;
 
−
    margin: auto;
 
−
    width: 70%;
 
−
    text-align: center;
 
−
    /*background-color: #FFF;
 
−
    border-radius: 30px 60px;
 
−
    box-shadow: 1px 1px 10px #888;
 
−
    -webkit-box-shadow: 1px 1px 10px #888;
 
−
    -moz-box-shadow: 1px 1px 10px #888;*/
 
 
}
 
}
  
Line 994: Line 1,010:
  
  
−
.results_page h1{
+
.content_box h1{
 
color: #C5162F;
 
color: #C5162F;
 
font-size: 40px;
 
font-size: 40px;
Line 1,002: Line 1,018:
 
font-weight: 200;
 
font-weight: 200;
 
padding-top: 0;
 
padding-top: 0;
−
text-align: right;
 
 
padding-bottom: 0;
 
padding-bottom: 0;
 
overflow: visible;
 
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{
 
.results_page h2{
 +
letter-spacing: 0px;
 
font-size: 35px;
 
font-size: 35px;
 
text-align: right;
 
text-align: right;
Line 1,016: Line 1,043:
 
}
 
}
  
−
.results_page .left{
+
.content_box h3{
−
  text-align: left;
+
font-weight: 200;
 +
 
 
}
 
}
  
−
.results_headline{
+
h2.left,
−
color: #C5162F;
+
h1.left{
−
font-size: 40px;
+
text-align: left;
−
text-align: right;
+
−
margin-bottom: 28px;
+
−
margin-top: 20px;
+
−
line-height: 45px;
+
 
}
 
}
  
−
.headline_left{
+
@media screen and (max-width: 600px){
−
  text-align: left;
+
 
 +
.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>
 
</style>
  
  
 
</html>
 
</html>

Latest revision as of 01:45, 19 September 2015