Difference between revisions of "Template:Freiburg/CSS"

Revision as of 16:36, 19 September 2017

/* ========== Navigation ========== */ /* Declaring Fonts */ /* Site Setup */ /* Flexboxes */ /* Background */ /* Footer */ /* ========== Declaring Fonts ========== */ @font-face { font-family: Roboto; src: url(https://static.igem.org/mediawiki/2017/7/7c/Roboto-Thin.ttf) format('truetype'); font-style: normal; font-weight: normal; } /* ========== Declaring Fonts ========== */ /* ========== Site Setup ========== */ /* Main text box */ .bodyContent { overflow: hidden; box-sizing: border-box; clear: both; } .page_content { margin: 25px 10px; box-sizing: border-box; } .content_box { overflow: hidden; padding: 6%; margin: 2em 10px; } /* Links */ a { outline: 0; } /* unvisited link */ a:link { color: } /* visited link */ a:visted { color: } /* mouse over link */ a:hover { color: } /* selected link */ a:active: { color: } /* ========== End Site Setup ========== */ /* ========== Flexboxes ========== */ /* flexbox-container: parent - contains all children */ /* children */ /* figure: box for figures and captions */ /* figureinner: contains figures */ /* figurecaption: contains captions for the figure */ /* figures either left: image_box.left or right: image_box.right */ .figure .figureinner .figurecaption { font-size: 70%; padding: 0 10px; text-align: justify; } .flex-container img, .image_box img { max-width: 100%; } .image_box .figure, .image_box .figure .figureinner, .flex-container .figure, .flex-container .figure .figureinner { max-width: 80vw; } .flex-container { flex-direction: column; font-size: 100%; padding: 0 10px; text-align: justify; background-color: white; } .flex-container { 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; } .flex-container .figureinner { margin: 0 5% 5% 5%; } /* children wont cross */ a.media { margin: 0 auto; } /* if text should float around */ .image_box .figure .figureinner .figurecaption { margin: 0.5em 0; overflow: hidden; font-size: 70%; text-align: justify; } .image_box.left { float: left; margin-right: 5%; } .image_box.right { float: right; margin-left: 5%; } @media screen and (max-width: 600px){ .image_box{ 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 Flexboxes ========== */ /* ========== Text Style ========== */ .page_content { color: black; font-family: 'Roboto', sans-serif; font-weight: 400; font-size: 100%; text-align: justify; } .page_content p{ line-height: 1.5em; margin-bottom: 2em; } h1,h2, h3, h4, h5 { font-family: 'Roboto', sans-serif; color: crimson; clear: both; font-weight: 400; line-height: 1.5; border-bottom: 0; } h1 { font-size: 160%; } h2 { font-size: 140%; } h3 { font-size: 120%; } h4 { font-size: 110%; } h5 { font-size: 100%; } /* checkt it */ .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; /* end */ /* ========= Background ========= */ #bodyContent { background-color: red; } .footnotes{ font-size: 80%; font-style: italic; } /* ========== End Text Style ========== */ /* ========== Footer ========== */ .content_footer{ background: #af0e1b; width: 100%; height: 75px; } .contacts{ width: 320px; margin: 0 auto; display: flex; justify-content: space-around; display: -webkit-flex; /*Safari*/ -webkit-justify-content: space-around; /* Safari 6.1+ */ } #uni a img, #bioss a img, #facebook a img, #email a img,{ max-height: 40px } #uni, #bioss, #facebook, #email,{ padding-top: 15px; padding-right:10px; } /* gap between social links and uni links */ #facebook{ padding-right: 40px; } @media screen and (max-width:400px){ #uni { display: none; } }