/
_base.scss
112 lines (89 loc) Β· 1.47 KB
/
_base.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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
/**
* Base Variables
*/
$font-header: 'Space Mono', monospace;
$font-body: 'Inconsolata', monospace;
$font-post: 'Lora', serif;
$color-alpha: #9f8f68;
$color-alpha--light: #f5f3ef;
$color-black: #0a0a0a;
$color-grey: #f8f9f9;
$color-white: #fff;
$mq-xs: 20em;
$mq-sm: 30em;
$mq-md: 54em;
$mq-lg: 64em;
$mq-xl: 76.5em;
$mq-xxl: 114em;
/**
* Base Settings/Overwrite Normalize
*/
*, *:before, *:after {
box-sizing: border-box;
}
body {
font-family: $font-body;
font-feature-settings: 'liga' 0;
font-size: 100%;
line-height: 1.6;
@media (min-width: $mq-xs) {
font-size: 102.5%;
}
@media (min-width: $mq-sm) {
font-size: 105%;
}
@media (min-width: $mq-md) {
font-size: 107.5%;
}
@media (min-width: $mq-lg) {
font-size: 110%;
}
@media (min-width: $mq-xl) {
font-size: 115%;
}
@media (min-width: $mq-xxl) {
font-size: 125%;
}
}
h1, h2 {
margin: 0;
font-family: $font-header;
}
h1 {
$fontSize: 3em;
@media (min-width: $mq-md) {
font-size: $fontSize;
}
@media (min-width: $mq-xl) {
font-size: $fontSize + 0.5em;
}
}
p {
margin: 0 0 0.75em;
}
a {
color: $color-black;
text-decoration: none;
transition: color 0.4s ease-in-out;
&:hover,
&:active,
&:focus {
color: $color-alpha;
}
}
figure {
margin: 0;
}
ol, ul {
margin: 0;
padding: 0;
list-style-type: none;
}
/**
* Text Selection
*/
::selection {
color: $color-white;
background-color: $color-alpha;
text-shadow: none;
}