$on-palm: 600px !default; $on-laptop: 800px !default;
// typography @import url('fonts.googleapis.com/css?family=Inconsolata:400,700'); $inconsolata: 'Inconsolata', monospace; $font__size: 14px; $font__weight: 400; $font__line-height: 1.5;
// colors $color__black: #000000; $color__gray: eeeeee; $color__beige: f8f8f1; $color__yellow: fefeca;
@mixin media-query($device) {
@media screen and (min-width: $device) { @content; }
}
// elements
-
{ box-sizing: border-box;
}
::selection {
background: $color__yellow;
}
::-moz-selection {
background: $color__yellow;
}
hr {
color: $color__black; background-color: $color__black;
}
a {
// display: block; // width: 100%; // height: 100%; color: $color__black; text-decoration: underline; &:hover { color: $color__black; }
}
// layout html {
overflow-x: hidden; overflow-y: scroll;
}
body {
width: 100%; margin: 25px 0; padding: 0; // background: $color__beige; font-family: $inconsolata; font-size: $font__size; font-weight: $font__weight; line-height: $font__line-height;
}
.container {
max-width: 1200px; margin: 0 25px;
}
// media queries @include media-query($on-palm) {
body { margin: 50px 0 25px; } .container { margin: 0 50px; }
}
@include media-query($on-laptop) {
body { margin: 120px 0 50px; } .container { margin: 0 120px; }
}