summaryrefslogtreecommitdiffstats
path: root/assets/css/_basics.scss
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css/_basics.scss')
-rw-r--r--assets/css/_basics.scss170
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
20html, 20html,
21pre, 21pre,
22code { 22code {
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
28html { 28html {
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
35body { 35body {
36 margin: 0; 36 margin: 0;
37 padding: 0; 37 padding: 0;
38} 38}
39 39
40code { 40code {
41 color: var(--code--fg); 41 color: var(--code--fg);
42} 42}
43 43
44pre { 44pre {
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
57strong { 57strong {
58 color: var(--fg-plus-2); 58 color: var(--fg-plus-2);
59 font-weight: bold; 59 font-weight: bold;
60} 60}
61 61
62ul, 62ul,
63ol { 63ol {
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
69li { 69li {
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
82ul > li::before { 82ul > li::before {
83 content: "-"; 83 content: '-';
84} 84}
85 85
86ol { 86ol {
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
98h1, 98h1,
99h2, 99h2,
100h3 { 100h3 {
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
110h1 { 110h1 {
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
116h2 { 116h2 {
117 font-size: 1em; 117 color: var(--heading--fg);
118 color: var(--heading--fg); 118 font-size: 1em;
119} 119}
120 120
121h3 { 121h3 {
122 font-size: 1em; 122 font-size: 1em;
123} 123}
124 124
125p { 125p {
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
149hr { 149hr {
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
156blockquote { 156blockquote {
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}