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