Difference between revisions of "Template:ITB INDONESIA/dev/css/style"

Revision as of 04:06, 27 June 2015 (view source) Aerlaut (Talk | contribs) ← Older edit		Revision as of 04:09, 27 June 2015 (view source) Aerlaut (Talk | contribs) Newer edit →
Line 1:		Line 1:
−	$fonts : Helvetica, Arial, sans-serif;	+	.firstHeading {
−	$dark-green : #14464a;	+	display: none;
−	$light-green : #52b48e;	+
−	$mid-green : mix($light-green, $dark-green);	+
−	$lighter-green : lighten($light-green, 40%);	+
−	$dark-grey : #444444;	+
−	$grey : lighten($dark-grey, 20%);	+
−	$mid-grey : lighten($grey, 20%);	+
−	$light-grey : lighten($mid-grey, 30%);	+
−		+
−	$page-width : 960px;	+
−		+
−	@mixin elem-width($width) {	+
−	width : $width / $page-width;	+
	}		}
−
−	.firstHeading { display : none; }
	#content {		#content {
−	width: 100%;	+	width: 100%;
−	font : $fonts;	+	font: Helvetica, Arial, sans-serif;
−	color: $dark-green;	+	color: #14464a;
	}		}
	#bodyContent {		#bodyContent {
−	padding: 1% 5%;	+	padding: 1% 5%;
−	overflow: hidden;	+	overflow: hidden;
−	}	+	}
−		+
−	// Nav	+
	nav {		nav {
−	margin-bottom: 20px;	+	margin-bottom: 20px;
	}		}
	.logo {		.logo {
−		+	width: 20%;
−	width: 20%;	+	float: left;
−	float: left;	+
−		+
	}		}
	.main-nav {		.main-nav {
−	float: left;	+	float: left;
−	width:80%;	+	width: 80%;
−		+	}
−	a {	+
−	color: $dark-green;	+
−	text-decoration: none;	+
−	}	+
−		+
−	> ul {	+
−	font-size: 1.2em;	+
−	font-weight: 100;	+
−	margin:1% 0 1% 0;	+
−		+
−	> li {	+
−	float: left;	+
−	padding: 10px 1em;	+
−	position: relative;	+
−	list-style: none;	+
−		+
−	ul {	+
−	position: absolute;	+
−	display: none;	+
−	margin : 0 0 10px 0;	+
−	padding: 0;	+
−	background-color: $lighter-green;	+
−	width: 120%;	+
−	top: 2.4em;	+
−	left: 0;	+
−		+
−	li {	+
−	display: block;	+
−	padding: 5px 20px;	+
−	}	+
−		+
−	}	+
−		+
−	}	+
−		+
−	li:hover {	+
−	background-color : $lighter-green;	+
−	cursor: pointer;	+
−		+
−	> ul {	+
−	display: block;	+
−	}	+
−	}	+
−		+
−	}	+
−		+
−	.socmed {	+
−	border-top : 1px solid $dark-green;	+
−	padding-top: 2%;	+
−	float: left;	+
−		+
−	img {	+
−	width: 2%;	+
−	margin-right: 5px;	+
−	}	+
−		+
−		+
−	}	+
		+	.main-nav a {
		+	color: #14464a;
		+	text-decoration: none;
	}		}
−	// Content styles	+	.main-nav > ul {
		+	font-size: 1.2em;
		+	font-weight: 100;
		+	margin: 1% 0 1% 0;
		+	}
		+
		+	.main-nav > ul > li {
		+	float: left;
		+	padding: 10px 1em;
		+	position: relative;
		+	list-style: none;
		+	}
		+
		+	.main-nav > ul > li ul {
		+	position: absolute;
		+	display: none;
		+	margin: 0 0 10px 0;
		+	padding: 0;
		+	background-color: #e0f2eb;
		+	width: 120%;
		+	top: 2.4em;
		+	left: 0;
		+	}
		+
		+	.main-nav > ul > li ul li {
		+	display: block;
		+	padding: 5px 20px;
		+	}
		+
		+	.main-nav > ul li:hover {
		+	background-color: #e0f2eb;
		+	cursor: pointer;
		+	}
		+
		+	.main-nav > ul li:hover > ul {
		+	display: block;
		+	}
		+
		+	.main-nav .socmed {
		+	border-top: 1px solid #14464a;
		+	padding-top: 2%;
		+	float: left;
		+	}
		+
		+	.main-nav .socmed img {
		+	width: 2%;
		+	margin-right: 5px;
		+	}
	h1, h2, h3 {		h1, h2, h3 {
−	border-bottom : 1px solid $dark-green;	+	border-bottom: 1px solid #14464a;
−	padding-bottom: 5px;	+	padding-bottom: 5px;
−	font-weight: 100;	+	font-weight: 100;
	}		}
	section {		section {
−	margin-left: -100%;	+	margin-left: -100%;
−	width: 300%;	+	width: 300%;
−	background-color: $light-grey;	+	background-color: #f7f7f7;
	}		}
	.text-content {		.text-content {
−	padding: 10px 0;	+	padding: 10px 0;
−	margin-left: 33%;	+	margin-left: 33%;
−	margin-right: 33%;	+	margin-right: 33%;
−	color: $dark-grey;	+	color: #444444;
	}		}
	p {		p {
−	word-spacing : 0.1em;	+	word-spacing: 0.1em;
	}		}
−
−	// Footer
	footer {		footer {
−	border-top: 1px solid $dark-green;	+	border-top: 1px solid #14464a;
−	text-align: center;	+	text-align: center;
−	margin-top: 20px;	+	margin-top: 20px;
−	margin-bottom: 30px;	+	margin-bottom: 30px;
−	padding-top: 20px;	+	padding-top: 20px;
−	padding-bottom: 20px;	+	padding-bottom: 20px;
−	}	+	}
−		+
−	// Utility	+
	.bg-light-grey {		.bg-light-grey {
−	background-color: $light-grey;	+	background-color: #f7f7f7;
	}		}
	.bg-light-green {		.bg-light-green {
−	background-color: $lighter-green;	+	background-color: #e0f2eb;
	}		}
−
	.clearfix {		.clearfix {
−	clear: both;	+	clear: both;
	}		}

---

Revision as of 04:09, 27 June 2015

.firstHeading {

 display: none;

}

1. content {

 width: 100%;
 font: Helvetica, Arial, sans-serif;
 color: #14464a;

}

1. bodyContent {

 padding: 1% 5%;
 overflow: hidden;

}

nav {

 margin-bottom: 20px;

}

.logo {

 width: 20%;
 float: left;

}

.main-nav {

 float: left;
 width: 80%;

}

.main-nav a {

 color: #14464a;
 text-decoration: none;

}

.main-nav > ul {

 font-size: 1.2em;
 font-weight: 100;
 margin: 1% 0 1% 0;

}

.main-nav > ul > li {

 float: left;
 padding: 10px 1em;
 position: relative;
 list-style: none;

}

.main-nav > ul > li ul {

 position: absolute;
 display: none;
 margin: 0 0 10px 0;
 padding: 0;
 background-color: #e0f2eb;
 width: 120%;
 top: 2.4em;
 left: 0;

}

.main-nav > ul > li ul li {

 display: block;
 padding: 5px 20px;

}

.main-nav > ul li:hover {

 background-color: #e0f2eb;
 cursor: pointer;

}

.main-nav > ul li:hover > ul {

 display: block;

}

.main-nav .socmed {

 border-top: 1px solid #14464a;
 padding-top: 2%;
 float: left;

}

.main-nav .socmed img {

 width: 2%;
 margin-right: 5px;

}

h1, h2, h3 {

 border-bottom: 1px solid #14464a;
 padding-bottom: 5px;
 font-weight: 100;

}

section {

 margin-left: -100%;
 width: 300%;
 background-color: #f7f7f7;

}

.text-content {

 padding: 10px 0;
 margin-left: 33%;
 margin-right: 33%;
 color: #444444;

}

p {

 word-spacing: 0.1em;

}

footer {

 border-top: 1px solid #14464a;
 text-align: center;
 margin-top: 20px;
 margin-bottom: 30px;
 padding-top: 20px;
 padding-bottom: 20px;

}

.bg-light-grey {

 background-color: #f7f7f7;

}

.bg-light-green {

 background-color: #e0f2eb;

}

.clearfix {

 clear: both;

}