-
-
Notifications
You must be signed in to change notification settings - Fork 155
/
main.scss
91 lines (77 loc) · 2.01 KB
/
main.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
//////////////// 1. Light Colors /////////////////
$text-base-color: #434648;
$text-link-blue: #003fff;
$text-link-blue-active: #0036c7;
$bloquote-border: #c4c8cc;
$blockquote-text: #525b66;
$inline-code-text: #333638;
$inline-code-bg: #d8dbe2;
$toc-bg: #edecec;
$go-top-bg: #dfe0e397;
$go-top-bg-hover: #dfe0e3;
$black: #0d122b;
$light: #ececec;
$smoke: #d2c7c7;
$gray: #6b7886;
$white: #fff;
//////////////// 2. Dark Colors /////////////////
$dark-text-base-color: #babdc4;
$dark-text-link-blue: #77a8fd;
$dark-text-link-blue-active: #5292ff;
$dark-bloquote-border: #4a4d56;
$dark-blockquote-text: #9b9ba3;
$dark-inline-code-text: #c2c4ca;
$dark-inline-code-bg: #2d2d2d;
$dark-toc-bg: #323232;
$dark-go-top-bg: #676767b3;
$dark-go-top-bg-hover: #676767;
$dark-black: #131418;
$dark-white: #eaeaea;
$dark-light: #1b1d25;
$dark-smoke: #4a4d56;
$dark-gray: #767f87;
//////////////// 3. Fonts preferences /////////////////
$sans-family: Roboto, sans-serif;
$mono-family: Consolas, monospace;
$base-font-size: 16px;
$medium-font-size: $base-font-size * 0.938;
$small-font-size: $base-font-size * 0.875;
$base-line-height: 1.85;
// Font weight
// $light-weight: 300; // uncomment if necessary
$normal-weight: 400;
$bold-weight: 700;
// $black-weight: 900; // uncomment if necessary
//////////////// 4.Responsive design (media queries) /////////////////
$wide-size: 890px;
$narrow-size: 720px;
// Padding unit
$spacing-full: 30px;
$spacing-half: $spacing-full / 2;
// Screen sizes
$on-mobile: 768px;
$on-tablet: 769px;
$on-desktop: 1024px;
$on-widescreen: 1152px;
@mixin media-query($device) {
@media screen and (max-width: $device) {
@content;
}
}
@mixin relative-font-size($ratio) {
font-size: $base-font-size * $ratio;
}
//////////////// 5. Import all sass files /////////////////
@import "fonts";
@import "base";
@import "navbar";
@import "layout";
@import "post";
@import "code";
@import "tableOfContent";
@import "miscellaneous";
@import "dark";
@import "listpage";
{{ with .Site.Params.goToTop }}
@import "goToTop";
{{ end }}