Difference between revisions of "Template:Freiburg/CSS"
(248 intermediate revisions by 4 users not shown) | |||
Line 1: | Line 1: | ||
+ | {{Freiburg/Javascript}} | ||
+ | |||
<html> | <html> | ||
+ | |||
<style> | <style> | ||
+ | /* =================== CSS Navigation =================== */ | ||
+ | /* Resetting css coming from wiki itself | ||
+ | /* Clearing DokuWiki elements | ||
+ | /* Declare Fonts for non-Windows machines | ||
+ | /* CSS for Menubar | ||
+ | /* Important Site setup | ||
+ | /* Background | ||
+ | /* Text Styling | ||
+ | /* Full Width Banners | ||
+ | /* Footer | ||
+ | /* Accordion - Ausklappmenues | ||
+ | /* Lightbox | ||
+ | /* Float Barrier | ||
+ | /* | ||
+ | /* Flipcard-CSS for the members-section: inline in https://2015.igem.org/Team:Freiburg/Team | ||
+ | /* CSS-slider: inline for the respective pages. e.g. https://2015.igem.org/wiki/index.php?title=Team:Freiburg/PaP/ScienceFair | ||
+ | /* CSS classes and ids for Human Practice | ||
+ | /* CSS for back-button | ||
+ | /* CSS for the upwards-blob: on wiki_content_start | ||
+ | /* CSS for Project Pages | ||
+ | /* Horizontal Menu for Paragraphs | ||
+ | /* Button for important links | ||
+ | /* =================== END: CSS Navigation =================== */ | ||
Line 13: | Line 39: | ||
margin: 0px; | margin: 0px; | ||
padding: 0px; | padding: 0px; | ||
− | background-color: # | + | background-color: #FCFCFC; |
line-height: 1.8; | line-height: 1.8; | ||
} | } | ||
Line 96: | Line 122: | ||
} | } | ||
+ | |||
+ | /* removes URL from current site from the top of the window */ | ||
+ | .firstHeading{ | ||
+ | font-size: 0; | ||
+ | border: 0; | ||
+ | margin-bottom: -8px; | ||
+ | margin-top: 0; | ||
+ | } | ||
/* ============= 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; | |
} | } | ||
− | + | ||
− | + | .urlextern { | |
− | + | background: none !important; | |
− | + | ||
− | + | ||
} | } | ||
+ | |||
+ | .link-https { | ||
+ | background: none !important; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* ============= END: Clearing DokuWiki elements ============= */ | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | /* ============= Declaring Fonts ============= */ | ||
@font-face { | @font-face { | ||
font-family: Roboto; | font-family: Roboto; | ||
− | src: url(https://static.igem.org/mediawiki/2015/c/c3/Freiburg_Roboto-Regular.ttf) format('truetype') | + | src: url(https://static.igem.org/mediawiki/2015/e/ee/Freiburg_Roboto-Regular.eot); |
− | + | src: url(https://static.igem.org/mediawiki/2015/b/bf/Freiburg_Roboto-Regular-webfont.woff) format('woff'), | |
+ | url(https://static.igem.org/mediawiki/2015/c/c3/Freiburg_Roboto-Regular.ttf) format('truetype'), | ||
+ | url('https://static.igem.org/mediawiki/2015/3/38/Freiburg_Roboto-Regular-webfont.svg#RobotoRegular') format('svg'); | ||
} | } | ||
@font-face { | @font-face { | ||
font-family: Roboto; | font-family: Roboto; | ||
− | src: url(https://static.igem.org/mediawiki/2015/6/64/Freiburg_Roboto-Light.ttf) format('truetype'); | + | src: url(https://static.igem.org/mediawiki/2015/7/7f/Freiburg_Roboto-Light.eot); |
+ | src: url(https://static.igem.org/mediawiki/2015/2/28/Freiburg_Roboto-Light-webfont.woff) format('woff'), | ||
+ | url(https://static.igem.org/mediawiki/2015/6/64/Freiburg_Roboto-Light.ttf) format('truetype'), | ||
+ | url('https://static.igem.org/mediawiki/2015/8/87/Freiburg_Roboto-Light-webfont.svg#RobotoLight') format('svg'); | ||
font-style: normal; | font-style: normal; | ||
font-weight: 300; | font-weight: 300; | ||
} | } | ||
+ | |||
@font-face { | @font-face { | ||
font-family: Roboto; | font-family: Roboto; | ||
− | src: url(https://static.igem.org/mediawiki/2015/ | + | src: url(https://static.igem.org/mediawiki/2015/c/c4/Freiburg_Roboto-LightItalic-webfont.eot); |
− | font-weight: | + | 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'), |
− | font-style: | + | 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; | ||
− | src: url(https://static.igem.org/mediawiki/2015/ | + | src: url(https://static.igem.org/mediawiki/2015/4/40/Freiburg_Roboto-Bold.eot); |
− | font-weight: | + | src: url(https://static.igem.org/mediawiki/2015/e/e4/Freiburg_Roboto-Bold-webfont.woff) format('woff'), |
− | font-style: | + | url(https://static.igem.org/mediawiki/2015/b/b9/Freiburg_Roboto-Bold.ttf) format('truetype'), |
+ | url('https://static.igem.org/mediawiki/2015/4/40/Freiburg_Roboto-Bold-webfont.svg#RobotoBold') format('svg'); | ||
+ | font-weight: bold; | ||
+ | font-style: normal; | ||
} | } | ||
+ | |||
@font-face { | @font-face { | ||
font-family: Roboto; | font-family: Roboto; | ||
− | src: url(https://static.igem.org/mediawiki/2015/2/2f/Freiburg_Roboto-BoldItalic.ttf) format('truetype'); | + | src: url(https://static.igem.org/mediawiki/2015/c/ce/Freiburg_Roboto-BoldItalic.eot); |
+ | src: url(https://static.igem.org/mediawiki/2015/8/89/Freiburg_Roboto-BoldItalic-webfont.woff) format('woff'), | ||
+ | url(https://static.igem.org/mediawiki/2015/2/2f/Freiburg_Roboto-BoldItalic.ttf) format('truetype'), | ||
+ | url('https://static.igem.org/mediawiki/2015/a/ac/Freiburg_Roboto-BoldItalic-webfont.svg#RobotoBoldItalic') format('svg'); | ||
font-weight: bold; | font-weight: bold; | ||
font-style: italic; | font-style: italic; | ||
Line 155: | Line 223: | ||
− | |||
+ | /* ============= END: Declaring Fonts ============= */ | ||
− | |||
− | + | ||
− | font-size: | + | |
− | + | ||
− | + | ||
+ | |||
+ | |||
+ | /* ============= Important Site setup ============= */ | ||
+ | |||
+ | |||
+ | /* avoid dotted outline after clicking on links */ | ||
+ | a { | ||
+ | outline: 0; | ||
+ | } | ||
+ | |||
+ | /* properties for central text box */ | ||
+ | .bodyContent{ | ||
+ | overflow: hidden; | ||
+ | box-sizing: border-box; | ||
+ | /* REMOVE WITH NEW NAVIGATION */ | ||
+ | /* Avoid layout damage due to old navigation */ | ||
+ | clear: both; | ||
+ | } | ||
+ | /*adds padding on topside - necessary for attached menubar: mauri*/ | ||
+ | .content_background_wrapper{ | ||
+ | padding-top: 100px; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* flows around all the content in the center of the screen */ | ||
+ | .page_content{ | ||
+ | margin: 20px 5px; | ||
+ | box-sizing: border-box; /* allows for efficient paositioning of the elements within */ | ||
+ | } | ||
+ | |||
+ | /* flows around text in the page_content */ | ||
+ | .content_box{ | ||
+ | border-radius: 30px 60px; | ||
+ | overflow: hidden; | ||
+ | padding: 4%; | ||
+ | margin: 2em 10px; | ||
+ | } | ||
+ | /*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 images are placed in one row and break the text. | ||
+ | /* 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 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%; | width: 100%; | ||
− | + | }*/ | |
− | + | ||
− | + | ||
+ | /* see: https://css-tricks.com/snippets/css/a-guide-to-flexbox/*/ | ||
+ | |||
+ | .flexbox{ | ||
+ | display: -moz-box; | ||
+ | display: -ms-flexbox; | ||
+ | display: -webkit-box; | ||
+ | display: -webkit-flex; | ||
+ | display: flex; | ||
+ | margin: 5% 0; | ||
+ | -moz-justify-content: space-around; | ||
+ | -ms-justify-content: space-around; | ||
+ | -webkit-justify-content: space-around; | ||
+ | justify-content: space-around; | ||
+ | -moz-flex-wrap: wrap; | ||
+ | -ms-flex-wrap: wrap; | ||
+ | -webkit-flex-wrap: wrap; | ||
+ | flex-wrap: wrap; | ||
+ | align-content: center; | ||
} | } | ||
− | + | .flexbox .thumbinner{ | |
− | + | margin: 0 5% 5% 5%; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | |||
− | |||
− | + | /* for DokuWiki image boxes this prevents a zickzack positioning of the flexbox childs when wrap occurs */ | |
− | + | a.media{ | |
− | + | margin: 0 auto; | |
− | + | ||
− | + | ||
} | } | ||
− | + | /* contains images where text shall float around */ | |
− | + | .image_box .thumb2 .thumbinner .thumbcaption{ | |
− | + | margin: 0.4em 0; | |
− | + | overflow: hidden; | |
− | + | font-size: 70%; | |
+ | text-align: justify; | ||
+ | } | ||
+ | |||
+ | .image_box.left{ | ||
float: left; | float: left; | ||
− | margin- | + | margin-right: 3%; |
} | } | ||
− | + | ||
− | + | .image_box.right{ | |
− | margin-left: | + | float: right; |
+ | margin-left: 3% | ||
} | } | ||
− | + | @media screen and (max-width: 600px){ | |
− | + | ||
− | display: | + | .image_box{ |
− | font- | + | 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 */ | ||
+ | .level1, | ||
+ | .level2{ | ||
+ | overflow: hidden; | ||
} | } | ||
− | + | ||
− | + | /* references coming from DokuWiki */ | |
− | + | .footnotes{ | |
− | + | width: 90%; | |
− | + | margin: 2em auto 0 auto; | |
} | } | ||
− | + | ||
− | + | .fn_top{ | |
− | + | font-size: 70% | |
− | + | ||
− | + | ||
} | } | ||
− | + | ||
− | + | /* styling tables coming from dokuwiki */ | |
+ | .content_box .table{ | ||
+ | margin: 2em 5%; | ||
} | } | ||
− | /* | + | /* the element that can be used to style the table */ |
+ | .content_box .table .inline{ | ||
+ | font-size: 90%; | ||
+ | width: 100%; | ||
+ | border-collapse: collapse; | ||
+ | } | ||
− | /* | + | /* grey background for the header line */ |
+ | .content_box .table th{ | ||
+ | background-color: #DDD; | ||
+ | } | ||
− | /* | + | /* greyish background for every second row */ |
− | + | .content_box .table tr:nth-child(odd){ | |
+ | background-color: #EEE; | ||
+ | } | ||
− | + | /* move text away from cell borders */ | |
− | + | .content_box .table td, | |
− | + | .content_box .table th{ | |
− | + | padding: 0 10px; | |
− | + | ||
− | + | ||
− | . | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | |||
− | . | + | /* hovering efects */ |
− | background: # | + | .content_box .table tr:hover{ |
− | + | background-color: #D2D4F3; | |
− | + | ||
} | } | ||
+ | /* === content_box2 for brick layout === */ | ||
+ | |||
+ | /* two content boxes in same line (sb) */ | ||
+ | .content_box2_parent { | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .content_box2_child { | ||
+ | border-radius: 30px 60px; | ||
+ | display: inline-block; | ||
+ | background-color: #FFFFFF; | ||
+ | text-align: justify; | ||
+ | vertical-align: middle; | ||
+ | box-shadow: 1px 1px 10px #888; | ||
+ | -webkit-box-shadow: 1px 1px 10px #888; | ||
+ | -moz-box-shadow: 1px 1px 10px #888; | ||
+ | padding: 4%; | ||
+ | min-height: 430px; | ||
+ | } | ||
+ | |||
+ | @media screen and (min-width: 601px){ | ||
+ | .content_box2_child{ | ||
+ | margin: 2em 1em 2em 1em; | ||
+ | width: 35%; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media screen and (max-width: 600px){ | ||
+ | .content_box2_child{ | ||
+ | margin: 1em 0 0; | ||
+ | width: auto; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | /* === Floatboxes for two column layout === */ | ||
+ | |||
+ | .floatbox{ | ||
+ | width: 48%; /* 100% - 2*48% = 4% padding*/ | ||
+ | } | ||
+ | |||
+ | @media screen and (min-width: 601px){ | ||
+ | .floatbox.left{ | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | .floatbox.right{ | ||
+ | float: right; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media screen and (max-width: 600px){ | ||
+ | .floatbox{ | ||
+ | float: none; | ||
+ | width: auto; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | /* ============= END: Important Site setup ============= */ | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | /* ============= Text Styling ============= */ | ||
+ | |||
+ | .page_content{ | ||
+ | color: #666666; | ||
+ | font-family: 'Roboto',sans-serif; | ||
+ | font-style: normal; | ||
+ | font-weight: 300; | ||
+ | font-size: 110%; | ||
+ | text-align: justify; | ||
+ | } | ||
+ | |||
+ | .page_content p{ | ||
+ | line-height: 1.8em; | ||
+ | margin-bottom: 2em; /*move next paragraph away vertically */ | ||
+ | } | ||
+ | |||
+ | h1, h2, h3{ | ||
+ | |||
+ | font-family: "Roboto", sans-serif; | ||
+ | color: #C5162F; | ||
+ | clear: both; | ||
+ | font-weight: 400; | ||
+ | line-height: 1.2; | ||
+ | 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; | ||
+ | } | ||
+ | |||
+ | /* flows around text in the page_content */ | ||
+ | .content_box{ | ||
+ | background-color: #FFFFFF; | ||
+ | text-align: justify; | ||
+ | box-shadow: 1px 1px 10px #888; | ||
+ | -webkit-box-shadow: 1px 1px 10px #888; | ||
+ | -moz-box-shadow: 1px 1px 10px #888; | ||
+ | } | ||
+ | |||
+ | /* properties for central text box */ | ||
+ | #bodyContent{ | ||
+ | /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcfcfc+13,0051a2+100 */ | ||
+ | background: rgb(252,252,252); /* Old browsers */ | ||
+ | background: -moz-linear-gradient(-45deg, rgba(252,252,252,1) 13%, rgba(0,81,162,1) 100%); /* FF3.6+ */ | ||
+ | background: -webkit-gradient(linear, left top, right bottom, color-stop(13%,rgba(252,252,252,1)), color-stop(100%,rgba(0,81,162,1))); /* Chrome,Safari4+ */ | ||
+ | background: -webkit-linear-gradient(-45deg, rgba(252,252,252,1) 13%,rgba(0,81,162,1) 100%); /* Chrome10+,Safari5.1+ */ | ||
+ | background: -o-linear-gradient(-45deg, rgba(252,252,252,1) 13%,rgba(0,81,162,1) 100%); /* Opera 11.10+ */ | ||
+ | background: -ms-linear-gradient(-45deg, rgba(252,252,252,1) 13%,rgba(0,81,162,1) 100%); /* IE10+ */ | ||
+ | background: linear-gradient(135deg, rgba(252,252,252,1) 13%,rgba(0,81,162,1) 100%); /* W3C */ | ||
+ | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#0051a2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ | ||
+ | } | ||
+ | |||
+ | /* references coming from DokuWiki */ | ||
+ | .footnotes{ | ||
+ | font-size: 80%; | ||
+ | font-style: italic; | ||
+ | } | ||
+ | |||
+ | /* KOMMENTARFUNKTION */ | ||
+ | .kommentar{ | ||
+ | display:none; | ||
+ | background-color: red; | ||
+ | color: black; | ||
+ | border: 2px solid black; | ||
+ | width: 100%; | ||
+ | clear: both; | ||
+ | } | ||
+ | .kommentar_stefan{ | ||
+ | display:none; | ||
+ | background-color: #ff1493; | ||
+ | color: black; | ||
+ | font-size: 14px; | ||
+ | font-family: "Comic Sans MS"; | ||
+ | border: 2px solid black; | ||
+ | width: 100%; | ||
+ | clear: both; | ||
+ | } | ||
+ | |||
+ | .todo_box{ | ||
+ | display:none; | ||
+ | background-color: lightblue; | ||
+ | border: 1px dashed; | ||
+ | display: table; | ||
+ | } | ||
+ | |||
+ | /* Links */ | ||
+ | #red_link { | ||
+ | color: #C5162F; | ||
+ | } | ||
+ | |||
+ | /* ============= END: Text Styling ============= */ | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | /* ============= 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 272: | Line 625: | ||
.background_image_left{ | .background_image_left{ | ||
− | + | display: none; | |
+ | left:0; | ||
+ | bottom: -20px; | ||
} | } | ||
.background_image_right{ | .background_image_right{ | ||
− | + | top: 120px; | |
− | right: 0; | + | right:0; |
} | } | ||
+ | /* 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 291: | Line 652: | ||
} | } | ||
− | /* | + | /* 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 322: | 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 331: | Line 673: | ||
} | } | ||
} | } | ||
+ | */ | ||
+ | /* === END: Background: Responsive Design === */ | ||
+ | /* ============= END: Background ============= */ | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
Line 396: | Line 713: | ||
/* ============= END: Full Width Banners ============= */ | /* ============= END: Full Width Banners ============= */ | ||
− | + | ||
− | + | ||
− | */ | + | |
− | . | + | |
− | + | /* =================== Footer =================== */ | |
− | + | ||
− | + | .content_footer{ | |
− | + | background: #0051A2 scroll; | |
+ | width: 100%; | ||
+ | height: 75px; | ||
} | } | ||
− | . | + | .contacts{ |
− | width: | + | width: 320px; |
− | + | margin: 0 auto; | |
− | + | display: flex; | |
− | - | + | justify-content: space-around; |
− | + | display: -webkit-flex; /*Safari*/ | |
− | + | -webkit-justify-content: space-around; /* Safari 6.1+ */ | |
− | + | ||
− | -webkit- | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | #uni a img, | |
− | + | #bioss a img, | |
+ | #facebook a img, | ||
+ | #email a img, | ||
+ | #zbsa a img{ | ||
+ | max-height: 40px | ||
} | } | ||
− | + | #uni, | |
− | + | #bioss, | |
− | + | #facebook, | |
− | + | #email, | |
− | - | + | #zbsa{ |
− | - | + | padding-top: 15px; |
− | + | padding-right:10px; | |
− | + | ||
} | } | ||
− | + | /* gap between social links and uni links */ | |
− | + | #facebook{ | |
− | + | padding-right: 40px; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | @media screen and (max-width:400px){ | |
− | + | #uni, | |
− | + | #zbsa{ | |
− | + | display: none; | |
− | + | } | |
− | + | ||
} | } | ||
− | . | + | |
− | width: | + | /* The html for the footer is included in wiki_content-end! */ |
− | + | ||
+ | /* =================== END: Footer =================== */ | ||
+ | |||
+ | /* =================== Accordion =====================*/ | ||
+ | /*----- Accordion -----*/ | ||
+ | .accordion, .accordion * { | ||
+ | -webkit-box-sizing:border-box; | ||
+ | -moz-box-sizing:border-box; | ||
+ | box-sizing:border-box; | ||
+ | } | ||
+ | |||
+ | .accordion { | ||
+ | overflow:hidden; | ||
+ | box-shadow:0px 1px 3px rgba(0,0,0,0.25); | ||
+ | border-radius:20px; | ||
+ | background:#EEE; | ||
+ | } | ||
+ | |||
+ | /*----- Section Titles -----*/ | ||
+ | .accordion-section-title { | ||
+ | width:100%; | ||
+ | padding:15px; | ||
+ | display:inline-block; | ||
+ | border-bottom:1px solid #1a1a1a; | ||
+ | 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; | ||
+ | /* Type */ | ||
+ | font-size:1.200em; | ||
+ | text-shadow:0px 1px 0px #1a1a1a; | ||
+ | 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 { |
− | + | background:rgb(0, 81, 162) url("https://static.igem.org/mediawiki/2015/2/20/Freiburg_arrow_sprite.png") no-repeat scroll 20px -25px; | |
− | + | /* Type */ | |
− | + | text-decoration:none; | |
} | } | ||
− | . | + | |
− | + | .accordion-section:last-child .accordion-section-title { | |
+ | border-bottom:none; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | /*----- Section Content -----*/ | ||
+ | .accordion-section-content { | ||
+ | padding:15px; | ||
+ | display:none; | ||
} | } | ||
− | . | + | /* ================= END: Accordion =================*/ |
− | + | ||
− | + | /* =============== LIghtbox =========================*/ | |
+ | |||
+ | /* from http://webdesign.tutsplus.com/articles/super-simple-lightbox-with-css-and-jquery--webdesign-3528 */ | ||
+ | |||
+ | #lightbox { | ||
+ | position:fixed; /* keeps the lightbox window in the current viewport */ | ||
+ | top:0; | ||
+ | left:0; | ||
+ | width:100%; | ||
+ | height:100%; | ||
+ | background: rgba(0,0,0,.7); | ||
+ | text-align:center; | ||
+ | z-index: 9999; | ||
} | } | ||
− | |||
− | |||
− | |||
+ | #lightbox p { | ||
+ | text-align:right; | ||
+ | color:#fff; | ||
+ | margin-right:20px; | ||
+ | font-size:12px; | ||
+ | } | ||
− | /* ======================= | + | #lightbox img { |
− | . | + | box-shadow:0 0 25px #111; |
− | + | -webkit-box-shadow:0 0 25px #111; | |
+ | -moz-box-shadow:0 0 25px #111; | ||
+ | max-width: 95vw; | ||
+ | max-height: 95vh; | ||
+ | background-color: white; | ||
+ | } | ||
+ | |||
+ | /* =============== END: Lightbox =========================*/ | ||
+ | |||
+ | /* =============== BEGIN: FloatBarrier =========================*/ | ||
+ | |||
+ | .float_barrier{ | ||
+ | overflow: hidden; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | /* =============== END: FloatBarrier =========================*/ | ||
+ | |||
+ | #head { | ||
+ | height: 0px; | ||
+ | } | ||
+ | |||
+ | /* ============== BEGIN:CSS classes and ids for Human Practice =============*/ | ||
+ | #recipe { | ||
+ | width: 80%; | ||
+ | } | ||
+ | /* ============== END:CSS classes and ids for Human Practice =============*/ | ||
+ | |||
+ | |||
+ | /* ============== BEGIN:CSS for back-button =============*/ | ||
+ | .button_back { | ||
+ | margin-left: -14%; | ||
+ | margin-top: 5%; | ||
+ | padding: 3px 5px 5px 0px; | ||
+ | width: 10%; | ||
+ | line-height: 1.5em; | ||
+ | text-align: center; | ||
+ | background-color: #0051A2; | ||
+ | border-radius: 30px 15px 15px 30px; | ||
+ | border: 1px groove #004081; | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | .white_link { | ||
+ | color: #FFF; | ||
+ | } | ||
+ | /* ============== END:CSS for back-button =============*/ | ||
+ | |||
+ | </style> | ||
+ | |||
+ | <!-- INITIALIZE UPWARDS BLOB, SO ITS TOP REFERENCES TO DOCUMENT TOP --> | ||
+ | |||
+ | <style> | ||
+ | |||
+ | /* upwards navigation blob */ | ||
+ | |||
+ | #upwards_blob{ | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* min-width is chosen so the blob does just not interfere with the content box */ | ||
+ | /* 1021 content_box-width + 46 blob-width + 20 scrollbar + some buffer space */ | ||
+ | @media screen and (min-width: 1144px){ | ||
+ | #upwards_blob{ | ||
+ | transition: transform 0.5s ease; | ||
+ | display: inline; | ||
+ | position: absolute; | ||
+ | top: 900px; | ||
+ | right: 30px; | ||
+ | z-index: 1000; | ||
+ | transform: translateY(130px); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | |||
+ | <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; | border-radius: 30px 60px; | ||
overflow: hidden; | overflow: hidden; | ||
− | padding: | + | padding: 4%; |
margin: 2em 0; | margin: 2em 0; | ||
− | + | margin-bottom: 0; | |
text-align: justify; | 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; | 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> | </style> | ||
+ | |||
+ | |||
</html> | </html> |
Latest revision as of 01:45, 19 September 2015