@@ Line 19: / Line 19: @@
 /* Accordion - Ausklappmenues
 /* Lightbox
+/* Float Barrier
 /*
 /* Flipcard-CSS for the members-section: inline in https://2015.igem.org/Team:Freiburg/Team
@@ Line 27: / Line 28: @@
 /* CSS for Project Pages
 /* Horizontal Menu for Paragraphs
+/* Button for important links
 /* =================== END: CSS Navigation =================== */
@@ Line 126: / Line 128: @@
      border: 0;
      margin-bottom: -8px;
+    margin-top: 0;
 }
@@ Line 264: / Line 267: @@
      overflow: hidden;
      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;
 }
@@ Line 279: / Line 288: @@
 }
-.image_box .thumb2 .thumbinner img{
+.flexbox img,
+.image_box img {
      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/*/
@@ Line 289: / Line 311: @@
      display: -ms-flexbox;
      display: -webkit-box;
+    display: -webkit-flex;
      display: flex;
      margin: 5% 0;
@@ Line 300: / Line 323: @@
      flex-wrap: wrap;
      align-content: center;
+}
+.flexbox .thumbinner{
+  margin: 0 5% 5% 5%;
 }
@@ Line 308: / Line 335: @@
 /* contains images where text shall float around */
-.image_box{
+.image_box .thumb2 .thumbinner .thumbcaption{
      margin: 0.4em 0;
      overflow: hidden;
@@ Line 325: / Line 352: @@
 }
-@media screen and (max-width: 450px){
+@media screen and (max-width: 600px){
 .image_box{
@@ Line 544: / Line 571: @@
 /* KOMMENTARFUNKTION */
 .kommentar{
+display:none;
      background-color: red;
      color: black;
@@ Line 551: / Line 579: @@
 }
 .kommentar_stefan{
+display:none;
      background-color: #ff1493;
      color: black;
@@ Line 561: / Line 590: @@
 .todo_box{
+display:none;
    background-color: lightblue;
    border: 1px dashed;
@@ Line 595: / Line 625: @@
 .background_image_left{
+display: none;
      left:0;
      bottom: -20px;
@@ Line 631: / Line 662: @@
      }
 }
+/*
 @media only screen and (max-width: 1020px){
-     /* style for browsers smaller than 1000px */
+     /* style for browsers smaller than 1000px
      .page_content{
          width: intrinsic;
@@ Line 640: / Line 673: @@
      }
 }
+*/
 /* === END: Background: Responsive Design === */
@@ Line 765: / 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 {
      background:rgb(0, 81, 162) url("https://static.igem.org/mediawiki/2015/2/20/Freiburg_arrow_sprite.png") no-repeat scroll 20px -25px;
@@ Line 816: / Line 856: @@
 /* =============== END: Lightbox =========================*/
+/* =============== BEGIN: FloatBarrier =========================*/
+.float_barrier{
+    overflow: hidden;
+    width: 100%;
+}
+/* =============== END: FloatBarrier =========================*/
 #head {
@@ Line 889: / Line 938: @@
      color: #000;
      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 973: / Line 1,009: @@
 /* ============= Added: Styling for results pages ================ */
-.results_headline{
+.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;
 }
-.headline_left{
-  text-align: left;
+.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>

Difference between revisions of "Template:Freiburg/CSS"

Latest revision as of 01:45, 19 September 2015