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

Line 1: Line 1:
.firstHeading {
+
$fonts : Helvetica, Arial, sans-serif;
  display: none;
+
$dark-green : #14464a;
 +
$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: Helvetica, Arial, sans-serif;
+
font : $fonts;
  color: #14464a;
+
color: $dark-green;
 
}
 
}
  
 
#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%;
+
 
  float: left;
+
width: 20%;
 +
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;
 
 
}
 
}
  
.main-nav > ul {
+
// Content styles
  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 #14464a;
+
border-bottom : 1px solid $dark-green;
  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: #f7f7f7;
+
background-color: $light-grey;
 
}
 
}
  
 
.text-content {
 
.text-content {
  padding: 10px 0;
+
padding: 10px 0;
  margin-left: 33%;
+
margin-left: 33%;
  margin-right: 33%;
+
margin-right: 33%;
  color: #444444;
+
color: $dark-grey;
 
}
 
}
  
 
p {
 
p {
  word-spacing: 0.1em;
+
word-spacing : 0.1em;
 
}
 
}
 +
 +
// Footer
 +
 +
footer {
 +
border-top: 1px solid $dark-green;
 +
text-align: center;
 +
margin-top: 20px;
 +
margin-bottom: 30px;
 +
padding-top: 20px;
 +
padding-bottom: 20px;
 +
}
 +
 +
// Utility
  
 
.bg-light-grey {
 
.bg-light-grey {
  background-color: #f7f7f7;
+
background-color: $light-grey;
 
}
 
}
  
 
.bg-light-green {
 
.bg-light-green {
  background-color: #e0f2eb;
+
background-color: $lighter-green;
 
}
 
}
 +
  
 
.clearfix {
 
.clearfix {
  clear: both;
+
clear: both;
 
}
 
}

Revision as of 04:06, 27 June 2015

$fonts : Helvetica, Arial, sans-serif; $dark-green : #14464a; $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; }

  1. content {

width: 100%; font : $fonts; color: $dark-green; }

  1. bodyContent {

padding: 1% 5%; overflow: hidden; }

// Nav

nav { margin-bottom: 20px; }

.logo {

width: 20%; float: left;

}

.main-nav { float: left; 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; }


}

}

// Content styles

h1, h2, h3 { border-bottom : 1px solid $dark-green; padding-bottom: 5px; font-weight: 100; }

section { margin-left: -100%; width: 300%; background-color: $light-grey; }

.text-content { padding: 10px 0; margin-left: 33%; margin-right: 33%; color: $dark-grey; }

p { word-spacing : 0.1em; }

// Footer

footer { border-top: 1px solid $dark-green; text-align: center; margin-top: 20px; margin-bottom: 30px; padding-top: 20px; padding-bottom: 20px; }

// Utility

.bg-light-grey { background-color: $light-grey; }

.bg-light-green { background-color: $lighter-green; }


.clearfix { clear: both; }