1 | // Set the width of the main content area |
---|
2 | // Notice that the actual content's width is $site-width - 100px |
---|
3 | $site-width: 800px; |
---|
4 | |
---|
5 | $headline-font: 'Comfortaa', |
---|
6 | sans-serif; |
---|
7 | $content-font: 'Open Sans', |
---|
8 | sans-serif; |
---|
9 | $article-footer-font: 'Fira Code', |
---|
10 | monospace; |
---|
11 | |
---|
12 | // main colors |
---|
13 | $page-background-color: #f1f1f1; |
---|
14 | $base-color: #1d1f38; |
---|
15 | $special-color: #2D3642; |
---|
16 | $highlight-color: #5c8b59; |
---|
17 | $text-color: #222; |
---|
18 | |
---|
19 | // easy styling |
---|
20 | $nav-background-color: $special-color; |
---|
21 | $nav-text-color: $page-background-color; |
---|
22 | $algolia-search-box-color: #444; |
---|
23 | $algolia-search-box-icon-color: #888; |
---|
24 | $algolia-search-box-background-color: #fafafa; |
---|
25 | $algolia-border-color: #e4e4e4; |
---|
26 | |
---|
27 | $header-text-color: $page-background-color; |
---|
28 | $logo-color: darken($page-background-color, 1); |
---|
29 | $bubble-color: #fff; |
---|
30 | $bubble-background-color: #ccc; |
---|
31 | $bubble-hover-color: $highlight-color; |
---|
32 | |
---|
33 | $article-background-color: #fff; |
---|
34 | $meta-text-color: #999; |
---|
35 | $meta-border-color: #eee; |
---|
36 | $continue-reading-hover-color: $meta-text-color; |
---|
37 | |
---|
38 | $footer-border-color: #eee; |
---|
39 | $footer-background-color: rgba(#ffffff, 80); |
---|
40 | $footer-headline-color: #444; |
---|
41 | |
---|
42 | |
---|
43 | @mixin featuredImage() { |
---|
44 | .featured-image { |
---|
45 | position: absolute; |
---|
46 | top: 0; |
---|
47 | left: 0; |
---|
48 | width: 100%; |
---|
49 | height: 100%; |
---|
50 | z-index: 5; |
---|
51 | opacity: 0.25; |
---|
52 | } |
---|
53 | } |
---|