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 ============= */ | ||
+ | |||
+ | /* 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: | ||
} | } | ||
− | /* | + | /* adapt box width s.t. it fits the screen but has a maximum width of 1000px --jb*/ |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
@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: | + | |
− | + | ||
Line 352: | Line 397: | ||
} | } | ||
− | |||
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: | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
/* =================== 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