Difference between revisions of "Team:DTU-Denmark/stylesheetsub"

Revision as of 19:35, 17 July 2017 (view source) AlekH (Talk | contribs) ← Older edit		Revision as of 19:40, 17 July 2017 (view source) AlekH (Talk | contribs) Newer edit →
Line 31:		Line 31:
−	/****************************************************************************************************************/
−	/*********************************************** SETS MAIN STYLES ***********************************************/
−	/****************************************************************************************************************/
−	/***** TO OVERWRITE iGEM STYLING WHITHOUT MESSING WITH iGEM HEADER USE #windowcontent PREFIX IN CSS SYLING *****/
−
−	#windowcontent * {
−	box-sizing: border-box;
−	font-family: sans-serif, "Times New Roman", Times, serif;
−	margin: 0px;
−	padding: 0px;
−	}
−
−	#windowcontent ul, ol {
−	list-style: none;
−	}
−
−	/*makes the website span from edge to edge of the viewport*/
−
−	#windowcontent body {
−	position: relative;
−	width: 100%;
−	margin: 0px;
−	padding: 0px;
−	}
−
−	/***** centers all headlines as standard *****/
−
−	h1, h2, h3, h4, h5, h6 {
−	text-align: center;
−	}
−
−	/***** defines percentage columns used for layout so everything but the main content spans from edge to edge of the viewport *****/
−
−	.col-1 {
−	width: 08.33%;
−	}
−	.col-2 {
−	width: 16.66%;
−	}
−	.col-3 {
−	width: 25.00%;
−	}
−	.col-4 {
−	width: 33.33%;
−	}
−	.col-5 {
−	width: 41.66%;
−	}
−	.col-6 {
−	width: 50.00%;
−	}
−	.col-7 {
−	width: 58.33%;
−	}
−	.col-8 {
−	width: 66.66%;
−	}
−	.col-9 {
−	width: 75.00%;
−	}
−	.col-10 {
−	width: 83.33%;
−	}
−	.col-11 {
−	width: 91.66%;
−	}
−	.col-12 {
−	width: 100.0%;
−	}
−
−	/***** defines columns in pixels used for main content area, so user zoom will not affect the layout *****/
−
−	.colp-1 {
−	width: calc(1000px/12);
−	}
−	.colp-2 {
−	width: calc(1000px/12*2);
−	}
−	.colp-3 {
−	width: calc(1000px/12*3);
−	}
−	.colp-4 {
−	width: calc(1000px/12*4);
−	}
−	.colp-5 {
−	width: calc(1000px/12*5);
−	}
−	.colp-6 {
−	width: calc(1000px/12*6);
−	}
−	.colp-7 {
−	width: calc(1000px/12*7);
−	}
−	.colp-8 {
−	width: calc(1000px/12*8);
−	}
−	.colp-9 {
−	width: calc(1000px/12*9);
−	}
−	.colp-10 {
−	width: calc(1000px/12*10);
−	}
−	.colp-11 {
−	width: calc(1000px/12*11);
−	}
−	.colp-12 {
−	width: 1000px;
−	}
−
−	/***** makes all the columns go to the left of the page and "stack" to the right if room *****/
−
−	[class*="col-"] {
−	float: left;
−	padding: 15px;
−	}
−
−	[class*="colp-"] {
−	float: left;
−	padding: 15px;
−	}
−
−	/***** EACH ROW MUST BE 12 COLUMNS (OF THE SAME TYPE) IN TOTAL *****/
−	/************ (for example col-4, col-6, col-2 is a row) ***********/
−
−
−	/***** clears the row of other content *****/
−
−	.row::after {
−	content: "";
−	clear: both;
−	display: table;
−	}
−
−
−
−	/****************************************************************************************************************/
−	/*************************** HELPING CLASSES - OVERWRITES OTHER PREDEFINED PROPERTIES ***************************/
−	/****************************************************************************************************************/
−
−
−
−	/***** removes margin and padding *****/
−
−	#windowcontent .rmvpadmarg {
−	margin: 0px;
−	padding: 0px;
−	}
−
−	/***** removes vertical lines on links *****/
−
−	#windowcontent .rmvlinkstyle a {
−	text-decoration: none;
−	}
−
−	/***** brings element to front of page, used to bring nav bar in front of everything else *****/
−
−	#windowcontent .tofront {
−	position: relative;
−	z-index: 9999;
−	}
−
−	/***** sets the position of the element to be given a bottom border *****/
−
−	#windowcontent .bottomborder {
−	position: relative;
−	padding: 25px 0px;
−	}
−
−	/***** styles borders for h1 elements *****/
−
−	#windowcontent h1.bottomborder:after {
−	content:"";
−	background: black;
−	position: absolute;
−	left: 150px;
−	bottom: 16px;
−	height: 1px;
−	width: 700px;
−	}
−
−
−	/***** styles borders for h2 elements *****/
−
−	#windowcontent h2.bottomborder:after {
−	content:"";
−	background: black;
−	position: absolute;
−	left: 300px;
−	bottom: 18px;
−	height: 1px;
−	width: 400px;
−	}
−
−	#windowcontent .fixed {
−	position: fixed;
−	}
−
−
−	/****************************************************************************************************************/
−	/**************************************************** NAVBAR ****************************************************/
−	/****************************************************************************************************************/
−
−
−	/***** defines key properties of the nav bar *****/
−
−	#windowcontent nav {
−	margin: 0px;
−	padding: 0px;
−	overflow: hidden;
−	top: 0px;
−	width: 100%;
−	height: 40px;
−	}
−
−	/***** helps center navar. The sum of the nav bar choice widths is 1000px (5*200px) *****/
−
−	#windowcontent .navbarcenter {
−	width: 1000px;
−	margin: auto;
−	}
−
−	/***** sets color of nav bar when the page is scrolled to the top *****/
−
−	#windowcontent .navbar {
−	background-image: -webkit-linear-gradient(180deg, rgba(40,40,40,0.6), rgba(150,150,150,0.3));
−	background-image: -o-linear-gradient(180deg, rgba(40,40,40,0.6), rgba(150,150,150,0.3));
−	background-image: -moz-linear-gradient(180deg, rgba(40,40,40,0.6), rgba(150,150,150,0.3));
−	background-image: linear-gradient(180deg, rgba(40,40,40,0.6), rgba(150,150,150,0.3));
−	background-color: rgba(20,20,20,1);
−	box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.7);
−	}
−
−	/***** sets the color of the nav bar when scrolled down to the main text TRANSITIONS CANNOT BE USED HERE *****/
−
−	#windowcontent .navbar.scrolledpastnav {
−	-webkit-transition: background 1.5s;
−	transition: background 1.5s;
−	background-color: rgba(20,20,20,1);
−	box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.7);
−	}
−
−	/***** sets background of navbar choice buttons when hovered *****/
−
−	#windowcontent .dropdown:hover .dropbtn {
−	background: -webkit-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
−	background: -o-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
−	background: -moz-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
−	background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
−	}
−
−	/***** sets layout of dropdown menu when nav bar changes layout *****/
−
−	#windowcontent .dropdown-content.scrolledpastnav {
−	-webkit-transition: background 1.5s;
−	transition: background 1.5s;
−	}
−
−	/***** makes nav bar choices float next to each other *****/
−
−	#windowcontent .dropdown {
−	float: right;
−	height: 40px;
−	}
−
−	/***** layout of nav bar choice buttons *****/
−
−	#windowcontent .dropdown .dropbtn {
−	height: 40px;
−	display: inline-block;
−	color: white;
−	text-align: center;
−	padding: 10px 16px;
−	width: 200px;
−	text-decoration: none;
−	font-size: 1em;
−	font-family: sans-serif, "Times New Roman", Times, serif;
−	}
−
−	/***** hides dropdown choices, sets background and shadows. makes sure that the width is not less than the width of the nav bar choice buttons *****/
−
−	#windowcontent .dropdown-content {
−	-webkit-transition: background 1.5s; /* Safari */
−	transition: background 1.5s;
−	display: none;
−	position: absolute;
−	background-color: transparent;
−	min-width: 200px;
−	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
−	z-index: 1;
−	}
−
−	/***** displays dropdown content when nav bar choice is hovered *****/
−
−	#windowcontent .dropdown:hover .dropdown-content, #windowcontent .dropdown:focus .dropdown-content {
−	display: block;
−	}
−
−	/***** defines nav bar dropdown link layout *****/
−
−	#windowcontent .dropdown-content a {
−	color: black;
−	background-color: white;
−	padding: 12px 16px;
−	text-decoration: none;
−	display: block;
−	text-align: left;
−	}
−
−	/***** changes navbar dropdown menu color when choice is hovered *****/
−
−	#windowcontent .dropdown-content a:hover, #windowcontent .dropdown-content a:focus {
−	background-color: rgb(235,235,235);
−	}

---

Revision as of 19:40, 17 July 2017

/****************************************************************************************************************/ /************************************** OVERWRITES DEFAULT WIKI SETTINGS ****************************************/ /************************************************* (iGEM CODE) **************************************************/ /****************************************************************************************************************/

   /* Clear the default wiki settings */
 
   #home_logo, #sideMenu {
     display:none;
   }
   
   #sideMenu, #top_title, .patrollink  {
     display:none;
   }
   
   #content {
     width: 100%;
     padding: 0px;
     margin-top: -7px;
     margin-left: 0px;
   }

   body {
     background-color: white;
   }

   #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 {
     margin-bottom: 0px;
   }

/****************************************************************************************************************/ /************************************* PARALLAX IMAGE (WHOLE SPLASH SCREEN) *************************************/ /****************************************************************************************************************/

   /***** creates the parallax effect on main page when scrooling *****/
   
   #windowcontent .parallax { 
     position: relative;
     z-index: -1;
     background-image: url("");
     width: inherit;

     /***** height is viewport height +1.5% of viewport height (matches with the height of .parralaxfade) *****/
     height: 101.5vh;
     background-attachment: fixed;
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     min-width: 1000px;
   }

   /***** sets position and style for the headline text on main page *****/

   #windowcontent .homepageheadline {
     display: block;
     margin: auto;
     width: 700px;
     padding-top: 15vh;
   }

   /***** styles line one in the headline text on main page *****/

   #windowcontent #homepageheadline1 {
     font-size: 5em;
     color: white;
     font-family: sans-serif;
     text-shadow: 2px 2px 6px #727272;
     text-align: center;
   }

   /***** styles line two in the headline text on main page *****/

   #windowcontent #homepageheadline2 {
     font-size: 3em;
     color: white;
     font-family: sans-serif;
     text-shadow: 0px 0px 5px #727272;
     text-align: center;
   }

   /***** creates a fade from parallax image to main content. Height fits extra height in .parallax *****/

   #windowcontent .parallaxfade {
     width: inherit;
     height: 1.5vh;
     position: absolute;
     bottom: 0px;
     background: -webkit-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); /* For Safari 5.1 to 6.0 */
     background: -o-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); /* For Opera 11.1 to 12.0 */
     background: -moz-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); /* For Firefox 3.6 to 15 */
     background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,1)); /* Standard syntax (must be last) */
   }

/****************************************************************************************************************/ /************************************************* MAIN CONTENT *************************************************/ /****************************************************************************************************************/

   /***** styles main text area on main page *****/

   #windowcontent .maincontainer {
     margin: 100px auto;
     width: 1000px;
     text-align: justify;
     clear: both;
     display: table;
   }

   /***** container for the two pictures in top of main content *****/
   
   #windowcontent .imgmenu {
     max-width: 100%;
     margin: 70px auto 100px auto;
     overflow: hidden;
   }

   /***** sets container for the individual pictures *****/

   #windowcontent .imgmenuitem {
     position: relative;
     width: 100%;
     max-width: 700px;
     margin: 0px auto;
     height: 400px;
     border-radius: 20px;
     overflow: hidden;
     cursor: pointer;
   }

   /***** sets layout for the pictures themselves *****/
   
   #windowcontent .imgmenucontent {
     height: 100%;
     width: 100%;
     background-size: cover;
     background-repeat: no-repeat;
     -webkit-transition: all .5s;
     -moz-transition: all .5s;
     -o-transition: all .5s;
     transition: all .5s;
   }

   /***** the different images are styled *****/

   #windowcontent .img1 {
     background-image: url("");
     opacity: 0.9;
     -webkit-filter: brightness(1.2);
     filter: brightness(1.2);
     background-position: -200px center;
   }
   
   #windowcontent .img2 {
     background-image: url("");
     background-position: -200px -20px;
   }

   /***** zooms picture when hovered *****/
   
   #windowcontent .imgmenuitem:hover .imgmenucontent, #windowcontent .imgmenuitem:focus .imgmenucontent {
     -ms-transform: scale(1.1);
     -moz-transform: scale(1.1);
     -webkit-transform: scale(1.1);
     -o-transform: scale(1.1);
     transform: scale(1.1);
     opacity: 0.5;
   }

   /***** sets layout of picture overlay *****/

   #windowcontent .imgmenuoverlay {
     position: absolute;
     transition: 0.5s ease;
     background-color: rgba(50,50,50,0.6);
     padding: 16px 12px;
     width: 100%;
     height: 40%;
     bottom: 0px;
   }

   /***** changes layout of overlay on pictures when hovered *****/

   #windowcontent .imgmenuitem:hover .imgmenuoverlay, #windowcontent .imgmenuitem:focus .imgmenuoverlay {
     background-color: rgba(50,50,50,0.9);
   }

   /***** sets style of the text in the overlay *****/
   
   #windowcontent .imgmenuitem a * {
     color: white;
     cursor: pointer;
     text-decoration: none;
   }

   /***** sets style of the header in the overlay *****/

   #windowcontent .imgmenuitem a *:first-child {
     width: 100%;
     border-bottom: 1px solid white;
     text-align: center;
   }

   /***** styles the paragraph in the overlay *****/
   
   #windowcontent .imgmenuitem a p {
     font-size: 14px;
   }

/****************************************************************************************************************/ /**************************************************** FOOTER ****************************************************/ /****************************************************************************************************************/

   /***** styles main footer area *****/
   
   #windowcontent footer {
     background: #848282;
     color: white;
     width: 100%;
     min-width: 1000px;
     position: absolute;
     text-align: center;
     color: white; 
     font-size: x-small;
     font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
   }

   /***** defines a container of same width as main content that contains footer content *****/

   #windowcontent .footercontainer {
     width: 1000px;
     margin: 20px auto 25px auto;
   }

   /***** centers footer content in the individual columns *****/
   
   #windowcontent .footercolstyle * {
     align-content: center;
     text-align: center;
   }

   #windowcontent .footercolstyle a {
     padding: 0px;
   }

   /***** styles left footer column *****/
   
   #windowcontent .leftfootercol {
     float: left;
   }

   /***** styles right footer column *****/

   #windowcontent .rightfootercol {
     float: right;
   }

   /***** gives space between the "find us at" icons *****/
   
   #windowcontent footer img {
     margin: 10px;
   }