Difference between revisions of "Template:ITB INDONESIA/dev/css/style"
Line 1: | Line 1: | ||
− | + | $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 { | #content { | ||
− | + | width: 100%; | |
− | + | font : $fonts; | |
− | + | color: $dark-green; | |
} | } | ||
#bodyContent { | #bodyContent { | ||
− | + | padding: 1% 5%; | |
− | + | overflow: hidden; | |
− | } | + | } |
+ | |||
+ | // Nav | ||
nav { | nav { | ||
− | + | margin-bottom: 20px; | |
} | } | ||
.logo { | .logo { | ||
− | + | ||
− | + | width: 20%; | |
+ | float: left; | ||
+ | |||
} | } | ||
.main-nav { | .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 { | h1, h2, h3 { | ||
− | + | border-bottom : 1px solid $dark-green; | |
− | + | padding-bottom: 5px; | |
− | + | font-weight: 100; | |
} | } | ||
section { | section { | ||
− | + | margin-left: -100%; | |
− | + | width: 300%; | |
− | + | background-color: $light-grey; | |
} | } | ||
.text-content { | .text-content { | ||
− | + | padding: 10px 0; | |
− | + | margin-left: 33%; | |
− | + | margin-right: 33%; | |
− | + | color: $dark-grey; | |
} | } | ||
p { | 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 { | .bg-light-grey { | ||
− | + | background-color: $light-grey; | |
} | } | ||
.bg-light-green { | .bg-light-green { | ||
− | + | background-color: $lighter-green; | |
} | } | ||
+ | |||
.clearfix { | .clearfix { | ||
− | + | 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; }
- 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;
}