Difference between revisions of "Template:Freiburg/CSS"

Line 94: Line 94:
  
 
/* ============= END: Resetting css coming from wiki itself ============= */
 
/* ============= END: Resetting css coming from wiki itself ============= */
 +
 +
 +
 +
 +
 +
 +
 +
 +
/* ============= Clearing DokuWiki elements ============= */
 +
 +
.tags{
 +
/* remove tags from bottom */
 +
    font-size: 0;
 +
}
 +
 +
acronym{
 +
/* remove text-decoration from acronyms*/
 +
    border-bottom: none;
 +
    text-decoration: none;
 +
    cursor: auto;
 +
}
 +
 +
/* ============= END: Clearing DokuWiki elements ============= */
 +
 +
 +
 +
 +
 +
  
  
Line 152: Line 181:
  
 
/* ============= END: Declare Fonts for non-Windows machines  ============= */
 
/* ============= END: Declare Fonts for non-Windows machines  ============= */
 +
 +
 +
  
  
Line 228: Line 260:
 
/* ============= END: CSS for Menubar ============= */
 
/* ============= END: CSS for Menubar ============= */
  
−
/* ============= Important Site setup ============= */
 
  
−
/* changed tiles background to scaling full-size image --jb */
 
−
/*.content_background_wrapper{
 
  
−
position: relative;
 
−
background-image: url("https://static.igem.org/mediawiki/2015/7/74/Freiburg_antibody_background.png");
 
−
background-attachment: fixed;
 
−
overflow:hidden;
 
−
}*/
 
−
/*
 
−
.content_background_wrapper{
 
−
  background: url("https://static.igem.org/mediawiki/2015/b/b4/Freiburg_wiki_background_2.png") no-repeat center center fixed;
 
−
  -webkit-background-size: cover;
 
−
  -moz-background-size: cover;
 
−
  -o-background-size: cover;
 
−
  background-size: cover;
 
−
  overflow: hidden;
 
−
  REMOVE WITH NEW NAVIGATION BAR!!! AVOIDS CONTENT SHIFTING AFTER MENU-WRAP
 
−
  clear: both;
 
−
}
 
−
*/
 
  
 +
/* ============= Important Site setup ============= */
 +
 +
/* properties for central text box */
 
.content_background_wrapper{
 
.content_background_wrapper{
 
     background: #EEEDED;
 
     background: #EEEDED;
Line 260: Line 275:
 
}
 
}
  
 +
/* flows around all the content in the center of the screen */
 +
.page_content{
 +
    margin: 20px 5px;
 +
}
 +
 +
/* flows around text in the page_content */
 +
.content_box{
 +
    border-radius: 30px 60px;
 +
    overflow: hidden;
 +
    padding: 2em;
 +
    margin: 2em 0;
 +
    background-color: #FFFFFF;
 +
    text-align: justify;
 +
    margin-bottom: 0;
 +
}
 +
 +
/* contains images */
 +
.image_box{
 +
    overflow: hidden;
 +
}
 +
 +
/* flexbox: contains the whole dokuwiki image part and renders it readable */
 +
/* flexboxes are used inside of image_boxes */
 +
/* allow placing of several images including caption in one row */
 +
.flexbox .thumb2 .thumbinner .thumbcaption { /*circumvents the iGEM tag thumbcaption*/
 +
    font-size: 70%;
 +
    padding: 0 10px;
 +
    text-align: justify;
 +
}
 +
 +
.flexbox{
 +
    display: flex;
 +
    margin: 5% 0;
 +
}
 +
 +
/* ============= END: Important Site setup ============= */
 +
 +
 +
 +
 +
 +
 +
/* ============= Background ============= */
 +
 +
/* use central position as anchor for the vertical position of the side images */
 
.central_position_wrap{
 
.central_position_wrap{
 
     position: relative;
 
     position: relative;
 
}
 
}
  
 +
/* define width and positioning of side images */
 
.background_image_left,
 
.background_image_left,
 
.background_image_right{
 
.background_image_right{
Line 279: Line 340:
 
}
 
}
  
 +
/* float the right image to the right s.t. it fits to the window border */
 
.background_image_right img{
 
.background_image_right img{
 
     float: right;
 
     float: right;
 
}
 
}
  
 +
 +
 +
/* === Background: Responsive Design === */
 +
 +
/* hide side images if screen is too small */
 
@media only screen and (max-width: 1320px){
 
@media only screen and (max-width: 1320px){
 
     .background_image_left,
 
     .background_image_left,
Line 290: Line 357:
 
}
 
}
  
−
/* was removed in favour of fit-content --jb */
+
/* adapt box width s.t. it fits the screen but has a maximum width of 1000px --jb*/
−
/* old version:
+
−
float: left;
+
−
max-width: 1000px;
+
−
    float: left;
+
−
    position: relative;
+
−
    left: 50%;
+
−
*/
+
−
 
+
−
/*
+
−
.page_content{
+
−
    display:block;
+
−
    float: left;
+
−
    position: relative;
+
−
    left: -50%;
+
−
}
+
−
*/
+
−
 
+
−
/* responsive desgin: adapt box width s.t. it fits the screen but has a maximum width of 1000px --jb*/
+
−
.page_content{
+
−
    margin: 20px 5px;
+
−
}
+
−
 
+
 
@media only screen and (min-width: 1021px){
 
@media only screen and (min-width: 1021px){
 
     /* style for browsers wider than 1000px */
 
     /* style for browsers wider than 1000px */
 +
    /* the 20px come from the scrollbar */
 
     .page_content{
 
     .page_content{
 
         width: 1000px;
 
         width: 1000px;
Line 331: Line 377:
 
}
 
}
  
 +
/* === END: Background: Responsive Design === */
  
−
 
+
/* ============= END: Background ============= */
−
/* ============= END: Important Site setup ============= */
+
−
 
+
  
  
Line 352: Line 397:
 
}
 
}
  
−
/* ============= END: Headline Styling ============= */
 
 
h1, h2, h3{
 
h1, h2, h3{
  
Line 362: Line 406:
 
     line-height: 1.2;
 
     line-height: 1.2;
 
}
 
}
 +
 +
/* ============= END: Text Styling ============= */
 +
 +
 +
  
  
Line 395: Line 444:
  
 
/* ============= END: Full Width Banners  ============= */
 
/* ============= END: Full Width Banners  ============= */
 +
 +
 +
 
/*
 
/*
 
---------------- Our Team Flipcards css ----------------
 
---------------- Our Team Flipcards css ----------------
Line 474: Line 526:
  
  
−
/* ======================= content boxes =================== */
 
−
.content_box{
 
−
    border-radius: 30px 60px;
 
−
    overflow: hidden;
 
−
    padding: 2em;
 
−
    margin: 2em 0;
 
−
    background-color: #FFFFFF;
 
−
    text-align: justify;
 
−
    margin-bottom: 0;
 
−
}
 
−
 
−
/* ====================== image boxes =================== */
 
−
.image_box{
 
−
    overflow: hidden;
 
−
}
 
−
 
−
/* =================== END of image box =================== */
 
−
 
−
.tags{
 
−
/* remove tags from bottom */
 
−
    font-size: 0;
 
−
}
 
−
 
−
acronym{
 
−
/* remove text-decoration from acronyms*/
 
−
    border-bottom: none;
 
−
    text-decoration: none;
 
−
    cursor: auto;
 
−
}
 
−
 
−
 
−
/* allow placing of several images including caption in one row */
 
−
 
−
.flexbox .thumb2 .thumbinner .thumbcaption { /*circumvents the iGEM tag thumbcaption*/
 
−
    font-size: 70%;
 
−
    padding: 0 10px;
 
−
    text-align: justify;
 
−
}
 
−
 
−
.flexbox{
 
−
    display: flex;
 
−
    margin: 5% 0;
 
−
}
 
  
 
/* =================== Footer =================== */
 
/* =================== Footer =================== */
Line 554: Line 563:
 
     padding-right: 40px;
 
     padding-right: 40px;
 
}
 
}
 +
 +
/* =================== END: Footer =================== */
 +
 +
 
</style>
 
</style>
  
 
</html>
 
</html>

Revision as of 08:01, 2 September 2015