hippie/basic/_sections.scss
Stephan Hagedorn 9b2f7260ad New content
Renamed many variables
New modules for special elements
Added demo content
2017-08-21 08:06:46 +02:00

145 lines
2 KiB
SCSS

// Document
// -----------------------------------------------------------------------------
html {
height: 100%;
}
// Basic sections
// -----------------------------------------------------------------------------
body {
position: relative;
box-sizing: $box_sizing;
font-family: $primary_font_family;
font-size: $basic_size;
line-height: $basic_line;
color: $basic_font_color;
background-color: $basic_back_color;
*,
::before,
::after {
box-sizing: inherit;
}
&:hover {
.trigger__hover {
background-color: transparent;
}
}
}
article {
}
section {
}
.sec__main_center {
width: $basic_width;
@media screen and (orientation: landscape) {
@media (min-width: $screen_small) {
width: $width_small;
}
@media (min-width: $screen_medium) {
width: $width_medium;
}
@media (min-width: $screen_large) {
width: $width_large;
}
}
@media screen and (orientation: portrait) {
@media (min-width: $screen_small) {
width: $width_small;
}
}
margin: 0 auto;
padding-top: $space_3;
}
aside {
&.right + section {
margin-right: calc(#{$basic_aside_width} + #{$basic_space});
}
&.left + section {
margin-left: calc(#{$basic_aside_width} + #{$basic_space});
}
}
nav {
}
aside {
width: $basic_aside_width;
&.left {
float: left;
}
&.right {
float: right;
}
*:first-child {
margin-top: 0;
}
}
header {
}
.header__page {
overflow: auto;
}
footer {
}
// Headings
// -----------------------------------------------------------------------------
h1, h2, h3, h4, h5, h6 {
}
h1 {
@extend %head_1;
margin: $space_5 0 $space_3;
}
h2 {
@extend %head_2;
margin: $space_4 0 $space_3;
}
h3 {
@extend %head_3;
margin: $space_2 0 $space_2;
text-transform: uppercase;
}
h4 {
@extend %head_3;
margin: $space_2 0 $space_2;
text-transform: none;
}
h5 {
@extend %head_4;
margin: $space_2 0 $basic_space;
text-transform: none;
}
h6 {
@extend %basic;
margin: $basic_space 0;
text-transform: none;
font-weight: bold;
}