Template:ITB INDONESIA/dev/css/style
$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; }
- content {
width: 100%; font : $fonts; color: $dark-green; }
- 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;
}