55 lines
1.3 KiB
SCSS
55 lines
1.3 KiB
SCSS
// Define defaults for each variable.
|
|
$base-font-family: "Roboto", sans-serif !default;
|
|
$base-syntax-font: "Roboto Mono", Hack, monospace;
|
|
$base-font-size: 16px !default;
|
|
$medium-font-size: $base-font-size * 0.938 !default;
|
|
$small-font-size: $base-font-size * 0.875 !default;
|
|
$base-font-weight: 400 !default;
|
|
$base-line-height: 1.5 !default;
|
|
$spacing-unit: 30px !default;
|
|
|
|
// Element Color
|
|
$light: #ececec !default;
|
|
$grey: #3B454e !default;
|
|
$neutral: #f9f9f9 !default;
|
|
$black: #000 !default;
|
|
$white: #fff !default;
|
|
$blue: #0036c7 !default;
|
|
$blue-light: #d8deff !default;
|
|
|
|
|
|
// Width of the content area
|
|
$content-width: 780px !default;
|
|
|
|
// State of device
|
|
$on-palm: 600px !default;
|
|
$on-mobile: 500px !default;
|
|
$on-laptop: 780px !default;
|
|
|
|
// Use media queries like this:
|
|
|
|
// @include media-query($on-palm) {
|
|
// .wrapper {
|
|
// padding-right: $spacing-unit / 2;
|
|
// padding-left: $spacing-unit / 2;
|
|
// }
|
|
// }
|
|
|
|
@mixin media-query($device) {
|
|
@media screen and (max-width: $device) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin relative-font-size($ratio) {
|
|
font-size: $base-font-size * $ratio;
|
|
}
|
|
|
|
// Import Sass partials
|
|
@import
|
|
"bangsring/fonts",
|
|
"bangsring/base",
|
|
"bangsring/post",
|
|
"bangsring/layout",
|
|
"bangsring/syntax"
|
|
; |