Difference between revisions of "Template:Freiburg/CSS"

Revision as of 16:30, 19 September 2017

<style>

/* ========== 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;
   }

}

</style>

@@ Line 1: / Line 1: @@
-<html>
-<head>
-<link rel="stylesheet" type="text/css"
-href="https://2017.igem.org/Template:Team:Freiburg/CSS?action=raw&ctype=text/css"/>
-<link rel="stylesheet" type="text/css"
-href="https://2017.igem.org/Template:Team:Freiburg/CSS:bootstrap?action=raw&ctype=text/css"/>
-<script type="text/javascript" src="https://2017.igem.org/Template:Team:Freiburg/JS:bootstrap?action=raw&ctype=text/javascript"></script>
-</head>
 <style>
@@ Line 299: / Line 287: @@
 </style>
-</html>