Difference between revisions of "Team:DTU-Denmark/stylesheetmain.css"

Revision as of 08:56, 6 July 2017 (view source) Lineaastrup (Talk | contribs) ← Older edit		Revision as of 07:15, 14 July 2017 (view source) AlekH (Talk | contribs) Newer edit →
Line 1:		Line 1:
−	/*sets boxes so that the width and height properties (and min/max properties)	+	/*sets boxes so that the width and height properties (and min/max properties) includes content, padding and border, but not the margin*/
−	includes content, padding and border, but not the margin*/	+
	* {		* {
	box-sizing: border-box;		box-sizing: border-box;
Line 7:		Line 7:
	/*makes the website span from edge to edge of the viewport*/		/*makes the website span from edge to edge of the viewport*/
		+
	body {		body {
−	position: relative;	+	position: relative;
	width: 100%;		width: 100%;
	margin: 0px;		margin: 0px;
Line 15:		Line 16:
	/*centers all headlines as standard*/		/*centers all headlines as standard*/
		+
	h1, h2, h3, h4, h5, h6 {		h1, h2, h3, h4, h5, h6 {
	text-align: center;		text-align: center;
	}		}
−	/*defines percentage columns used for layout so everything	+	/*defines percentage columns used for layout so everything but the main content spans from edge to edge of the viewport*/
−	but the main content spans from edge to edge of the viewport*/	+
	.col-1 {width: 08.33%;}		.col-1 {width: 08.33%;}
	.col-2 {width: 16.66%;}		.col-2 {width: 16.66%;}
Line 34:		Line 36:
	.col-12 {width: 100.0%;}		.col-12 {width: 100.0%;}
−	/*defines columns in pixels used for main content area, so	+	/*defines columns in pixels used for main content area, so user zoom will not affect the layout*/
−	user zoom will not affect the layout*/	+
	.colp-1 {width: calc(1000px/12);}		.colp-1 {width: calc(1000px/12);}
	.colp-2 {width: calc(1000px/12*2);}		.colp-2 {width: calc(1000px/12*2);}
Line 49:		Line 51:
	.colp-12 {width: 1000px;}		.colp-12 {width: 1000px;}
−	/*makes all the columns go to the left of	+	/*makes all the columns go to the left of the page and "stack" to the right if room*/
−	the page and "stack" to the right if room*/	+
	[class*="col-"] {		[class*="col-"] {
	float: left;		float: left;
	padding: 15px;		padding: 15px;
	}		}
		+
	[class*="colp-"] {		[class*="colp-"] {
	float: left;		float: left;
Line 62:		Line 65:
	/***********EACH ROW MUST BE 12 COLUMNS TOTAL*********/		/***********EACH ROW MUST BE 12 COLUMNS TOTAL*********/
−	/*(example col-4, col-6, col-2 is a row)	+	/*(example col-4, col-6, col-2 is a row) clears the row of other content*/
−	clears the row of other content*/	+
	.row::after {		.row::after {
	content: "";		content: "";

---

Revision as of 07:15, 14 July 2017

/*sets boxes so that the width and height properties (and min/max properties) includes content, padding and border, but not the margin*/

• {

 box-sizing: border-box;
 font-family: sans-serif, "Times New Roman", Times, serif;

}

/*makes the website span from edge to edge of the viewport*/

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 TOTAL*********/

/*(example col-4, col-6, col-2 is a row) clears the row of other content*/

.row::after {

 content: "";
 clear: both;
 display: table;

}

/****************************************************************************************************************/ /******************************************* NAVBAR AND PROGRESS BAR *******************************************/ /****************************************************************************************************************/

/*defines key properties of the nav bar*/ nav {

 margin: 0px;
 padding: 0px;
 overflow: hidden;
 top: 0;
 width: 100%;
 height: 40px;

}

/*hides list*/ nav ul {

 height: 0px;
 list-style-type: none;

}

/*sets color of nav bar when the page is scrolled to the top*/ .navbar {

 -webkit-transition: background 1s; /* Safari */
 transition: background 1s;
 background-image: -webkit-linear-gradient(180deg, rgba(40,40,40,0.6), rgba(150,150,150,0.3)); /* For Safari 5.1 to 6.0 */
 background-image: -o-linear-gradient(180deg, rgba(40,40,40,0.6), rgba(150,150,150,0.3)); /* For Opera 11.1 to 12.0 */
 background-image: -moz-linear-gradient(180deg, rgba(40,40,40,0.6), rgba(150,150,150,0.3)); /* For Firefox 3.6 to 15 */
 background-image: linear-gradient(180deg, rgba(40,40,40,0.6), rgba(150,150,150,0.3)); /* Standard syntax (must be last) */
 box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.3);

}

/*sets the color of the nav bar when scrolled down to

 the main text TRANSITIONS CANNOT BE USED HERE*/

.navbar.scrolledpastnav {

 -webkit-transition: background 1.5s; /* Safari */

transition: background 1.5s; background-color: rgba(20,20,20,1);

 box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.7);

}

/*helps center navar. The sum of the nav bar choice

 widths is 1000px (5*200px)*/

.navbarcenter {

   width: 1000px;
   margin: auto;

}

/*makes nav bar choices float next to each other*/ .dropdown {

   float: right;
   height: 38px;

}

/*layout of nav bar choice buttons*/ .dropdown .dropbtn {

 height: 38px;
 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;

}

/*sets background of navbar choice buttons when hovered*/ .dropdown:hover .dropbtn { 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(0,0,0,0.2), rgba(0,0,0,0.1)); /* Standard syntax (must be last) */

}

/*hides dropdown choices, sets background and shadows. makes sure that

 the width is not less than the width of the nav bar choice buttons*/

.dropdown-content {

 -webkit-transition: background 1.5s; /* Safari */
 transition: background 1.5s;

 /*border has same height as progress bar*/
 border-top: 2px solid rgba(150,150,150,0.3);

 /*fixes layout issue with border rendering 3 px*/
 margin-top: -0.1px;
 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;

}

/*sets layout of dropdown menu when nav bar changes layout*/ .dropdown-content.scrolledpastnav {

 -webkit-transition: background 1.5s; /* Safari */
 transition: background 1.5s;

 /*border has same height as progress bar*/
 border-top: 2px solid transparent;

}

/*displays dropdown content when nav bar choice is hovered*/ .dropdown:hover .dropdown-content, .dropdown:focus .dropdown-content {

 display: block;

}

/*defines nav bar dropdown link layout*/ .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*/ .dropdown-content a:hover, .dropdown-content a:focus {

   background-color: rgb(235,235,235);

}

/*********** PROGRESS BAR ************/

/*defines progress bar layout*/ progress {

 /* Positioning */
 position: fixed;
 left: 0;
 top: 38px;

 /* Dimensions */
 width: 100%;
 height: 2px;

 /* Reset the apperance */  
 -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;

 /* Get rid of the default border in Firefox/Opera. */
 border: none;

 /* For Firefox/IE10+ */
 background-color: rgba(150,150,150,0.3);

 /* For IE10+, color of the progress bar */
 color: white;

}

/*changes progressbar when nav bar changes layout*/ progress.scrolledpastnav {

 -webkit-transition: background-color 1.5s; /* Safari */
 transition: background-color 1.5s;
 background-color: rgba(20,20,20,1);

}

/*sets progress bar background for older browsers*/ progress::-webkit-progress-bar {

 background-color: rgba(150,150,150,0.3);

}

/*sets color of progress bar value bar*/ .flat::-webkit-progress-value {

 -webkit-transition: background-color 1.5s; /* Safari */
 transition: background-color 1.5s;
 background-color: white;

}

/*sets color of progress bar value bar*/ .flat::-moz-progress-bar {

 -webkit-transition: background-color 1.5s; /* Safari */
 transition: background-color 1.5s;
 background-color: white;

}

/*sets the progress bar container (not so important for layout it seems)*/ .progress-container {

 width: 100%;
 background-color: transparent;
 position: fixed;
 top: 38px;
 left: 0;
 height: 2px;
 display: block;

}

/******** END OF PROGRESS BAR ********/

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

/*creates the parallax effect on main page when scrooling*/ .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;

}

/*sets position and style for the headline text on main page*/ .homepageheadline { position: absolute; width: 850px; height: 150px; line-height: 60px;

 text-align: center;

top: 12%; left: 50%; margin: 0px 0px 0px -425px; }

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

1. homepageheadline1 {

font-size: 5em; color: white; margin: 0px; padding: 0px; line-height: normal; font-family: sans-serif; text-shadow: 2px 2px 6px #727272; }

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

1. homepageheadline2 {

font-size: 3em; color: white; margin: 0px; padding: 0px; line-height: normal; font-family: sans-serif; text-shadow: 0px 0px 5px #727272; }

/*creates a fade from parallax image to main content

 Height fits extra height in .parallax*/

.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.5), rgba(255,255,255,1)); /* Standard syntax (must be last) */

}

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

/*styles main text area on main page*/ .maincontainer { margin: 100px auto;

 width: 1000px;
 text-align: justify;
 clear: both;
 display: table;

}

/*container for the two pictures in top of main content*/ .imgmenu {

 max-width: 100%;
 margin: 70px auto 100px auto;
 overflow: hidden;

}

/*sets container for the individual pictures*/ .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*/ .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;
 font

}

/*the different images are styled*/ .img1 {

 background-image: url("");
 opacity: 0.9;
 -webkit-filter: brightness(1.2);
 filter: brightness(1.2);
 background-position: -200px center;

} .img2 {

 background-image: url("");
 background-position: -200px -20px;

}

/*zooms picture when hovered*/ .imgmenuitem:hover .imgmenucontent, .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*/ .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*/ .imgmenuitem:hover .imgmenuoverlay, .imgmenuitem:focus .imgmenuoverlay {

 background-color: rgba(50,50,50,0.9);

}

/*sets style of the text in the overlay*/ .imgmenuoverlay a {

 color: white;
 cursor: pointer;
 text-decoration: none;

}

/*sets style of the header in the overlay*/ .imgmenuoverlay a *:first-child {

 width: 100%;
 border-bottom: 1px solid white;
 text-align: center;

}

/*styles the paragraph in the overlay*/ .imgmenuoverlay a p {

 font-size: 14px;

}

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

/*styles main footer area*/ footer {

 background: #848282;
 color: white;
 margin: 0px;
 padding: 0px;
 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*/

.footercontainer {

 width: 1000px;
 margin: auto;

}

/*centers footer content in the individual columns*/ .footercolstyle {

 align-content: center;

}

/*styles left footer column*/ .leftfootercol {

 float: left;

}

/*styles right footer column*/ .rightfootercol {

 float: right;

}

/*gives space between the "find us at" icons*/ footer img {

 margin: 10px;

}

/****************************************************************************************************************/ /*************************** HELPING CLASSES - OVERWRITES OTHER PREDEFINED PROPERTIES ***************************/ /****************************************************************************************************************/

/*removes margin and padding*/ .rmvpadmarg {

   margin: 0px;
   padding: 0px;

}

/*removes vertical lines on links*/ .rmvlinkstyle a { text-decoration: none; }

/*brings element to front of page, used to bring nav bar

 in front of everything else*/

.tofront {

 position: relative;
 z-index: 9999;

}

/*sets the position of the element to be given a bottom border*/ .bottomborder {

 position: relative;

}

/*styles borders for h1 elements*/ h1.bottomborder:after {

 content:""; 
 background: black; 
 position: absolute; 
 bottom: -5px; 
 left: 150px; 
 height: 1px; 
 width: 700px;

}

/*styles borders for h2 elements*/ h2.bottomborder:after {

 content:""; 
 background: black; 
 position: absolute; 
 bottom: -5px; 
 left: 300px; 
 height: 1px; 
 width: 400px;

}

/****************************************************************************************************************/ /********************************************* TEMPORARY ADDITIONS **********************************************/ /****************************************************************************************************************/

/*TEMPORARY checks if media keyword works

 if screensize is less than 1000px changes background color
 can be used for styling page on mobile devices later*/

/*@media only screen and (max-width: 1000px) {

   body {
       background-color: lightblue;
   }

}

• /