diff options
Diffstat (limited to 'assets/css/_basics.scss')
-rw-r--r-- | assets/css/_basics.scss | 172 |
1 files changed, 172 insertions, 0 deletions
diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss new file mode 100644 index 0000000..3adf64c --- /dev/null +++ b/assets/css/_basics.scss | |||
@@ -0,0 +1,172 @@ | |||
1 | @font-face { | ||
2 | font-family: "Iosevka Term SS09"; | ||
3 | font-style: normal; | ||
4 | font-weight: normal; | ||
5 | src: url("/iosevka-term-ss09-regular.woff2") format("woff2"); | ||
6 | } | ||
7 | |||
8 | @font-face { | ||
9 | font-family: "Iosevka Term SS09"; | ||
10 | font-style: normal; | ||
11 | font-weight: bold; | ||
12 | src: url("/iosevka-term-ss09-bold.woff2") format("woff2"); | ||
13 | } | ||
14 | |||
15 | ::selection { | ||
16 | color: var(--select-fg); | ||
17 | background-color: var(--select-bg); | ||
18 | } | ||
19 | |||
20 | html, | ||
21 | pre, | ||
22 | code { | ||
23 | font-family: "Iosevka Term SS09", "Lucida Console", "Courier New", Courier, | ||
24 | monospace; | ||
25 | font-feature-settings: "calt" 0, "dlig" 1; | ||
26 | } | ||
27 | |||
28 | html { | ||
29 | font-size: px-to-em($font-size, 16px); | ||
30 | line-height: $line-height; | ||
31 | background-color: var(--bg); | ||
32 | color: var(--fg); | ||
33 | } | ||
34 | |||
35 | body { | ||
36 | margin: 2em; | ||
37 | padding: 0; | ||
38 | |||
39 | @media (max-width: $breakpoint-sm) { | ||
40 | margin: 1em; | ||
41 | } | ||
42 | } | ||
43 | |||
44 | main { | ||
45 | max-width: 70ch; | ||
46 | margin: 0 auto; | ||
47 | } | ||
48 | |||
49 | code { | ||
50 | color: var(--code-fg); | ||
51 | } | ||
52 | |||
53 | pre { | ||
54 | margin: 0; | ||
55 | color: var(--code-block-fg); | ||
56 | font-size: $code-block-font-size; | ||
57 | line-height: $code-block-line-height; | ||
58 | |||
59 | strong { | ||
60 | font-weight: normal; | ||
61 | } | ||
62 | } | ||
63 | |||
64 | strong { | ||
65 | color: var(--fg-plus); | ||
66 | font-weight: bold; | ||
67 | } | ||
68 | |||
69 | ul, | ||
70 | ol { | ||
71 | margin: ($line-height * 1rem) 0 0; | ||
72 | padding: 0; | ||
73 | list-style: none; | ||
74 | } | ||
75 | |||
76 | li { | ||
77 | position: relative; | ||
78 | padding-left: $subcontent-indent; | ||
79 | |||
80 | &::before { | ||
81 | position: absolute; | ||
82 | display: inline-block; | ||
83 | width: $subcontent-indent; | ||
84 | margin-left: -1 * $subcontent-indent; | ||
85 | color: var(--fg-minus); | ||
86 | } | ||
87 | } | ||
88 | |||
89 | ul > li::before { | ||
90 | content: "-"; | ||
91 | } | ||
92 | |||
93 | ol { | ||
94 | counter-reset: cnt; | ||
95 | |||
96 | > li { | ||
97 | counter-increment: cnt; | ||
98 | |||
99 | &::before { | ||
100 | content: counter(cnt) "."; | ||
101 | } | ||
102 | } | ||
103 | } | ||
104 | |||
105 | h1, | ||
106 | h2, | ||
107 | h3 { | ||
108 | margin: ($line-height * 2rem) 0 0; | ||
109 | |||
110 | + h1, | ||
111 | + h2, | ||
112 | + h3 { | ||
113 | margin-top: $line-height * 1rem; | ||
114 | } | ||
115 | } | ||
116 | |||
117 | h1 { | ||
118 | text-transform: uppercase; | ||
119 | font-size: px-to-em($heading-font-size); | ||
120 | color: var(--heading); | ||
121 | } | ||
122 | |||
123 | h2 { | ||
124 | font-size: 1em; | ||
125 | color: var(--heading); | ||
126 | } | ||
127 | |||
128 | h3 { | ||
129 | font-size: 1em; | ||
130 | } | ||
131 | |||
132 | p { | ||
133 | margin: ($line-height * 1em) 0 0; | ||
134 | hyphens: auto; | ||
135 | } | ||
136 | |||
137 | :link, | ||
138 | :visited { | ||
139 | position: relative; | ||
140 | z-index: 1000; | ||
141 | padding: 0.1em 0.3em; | ||
142 | margin: 0 -0.3em; | ||
143 | color: var(--link-idle-fg); | ||
144 | |||
145 | &:hover { | ||
146 | background-color: var(--link-hover-bg); | ||
147 | color: var(--link-hover-fg); | ||
148 | text-decoration: none; | ||
149 | } | ||
150 | } | ||
151 | |||
152 | :visited { | ||
153 | color: var(--link-visited-fg); | ||
154 | } | ||
155 | |||
156 | hr { | ||
157 | height: 1px; | ||
158 | margin: ($line-height * 2rem) 0 ($line-height * 2rem); | ||
159 | background-color: var(--bg-plus); | ||
160 | border: 0; | ||
161 | |||
162 | @media (max-width: $breakpoint-sm) { | ||
163 | margin-left: 0; | ||
164 | } | ||
165 | } | ||
166 | |||
167 | blockquote { | ||
168 | position: relative; | ||
169 | margin: ($line-height * 1rem) 0 0; | ||
170 | padding-left: calc(#{$subcontent-indent} - 2px); | ||
171 | border-left: 2px solid var(--bg-plus); | ||
172 | } | ||