summaryrefslogtreecommitdiff
path: root/assets/main.scss
diff options
context:
space:
mode:
Diffstat (limited to 'assets/main.scss')
-rw-r--r--assets/main.scss248
1 files changed, 0 insertions, 248 deletions
diff --git a/assets/main.scss b/assets/main.scss
deleted file mode 100644
index cea2e5e..0000000
--- a/assets/main.scss
+++ /dev/null
@@ -1,248 +0,0 @@
1$background: #0e0c06;
2$foreground: #d4b782;
3$black: #1b1918;
4$brblack: #544b44;
5$red: #d42215;
6$green: #358c15;
7$yellow: #9a6200;
8$blue: #00458d;
9$magenta: #773dbf;
10$cyan: #008a7b;
11$white: #cfb688;
12
13html {
14 font-family: sans-serif;
15 color: $foreground;
16 background-color: $background;
17}
18
19body {
20 max-width: 920px;
21 margin: 0 auto;
22 padding: 1rem;
23 font-family: monospace;
24}
25
26h1 {
27 margin-top: 0;
28 font-size: 1.5rem;
29
30 small {
31 display: block;
32 font-size: 1rem;
33 }
34}
35
36a {
37 color: $yellow;
38 text-decoration: none;
39}
40
41a:hover {
42 color: $yellow;
43 text-decoration: underline;
44}
45
46a:visited {
47 color: $green;
48}
49
50.index {
51 display: flex;
52 flex-direction: row;
53
54 .article-list {
55 flex-grow: 1;
56 margin: auto;
57 max-width: 600px;
58
59 .article {
60 margin-bottom: 1rem;
61 }
62
63 .date {
64 display: block;
65 color: $brblack;
66 }
67 }
68
69 aside {
70 width: 40%;
71
72 img {
73 display: block;
74 margin: 0 auto 1rem;
75 border-radius: 5px;
76 }
77
78 dt {
79 font-size: 0.9rem;
80 }
81
82 dd {
83 margin-left: 0;
84
85 &:not(:last-child) {
86 margin-bottom: 0.5rem;
87 }
88 }
89 }
90
91 @media(max-width: 640px) {
92 aside {
93 display: none;
94 }
95 }
96}
97
98article {
99 margin: 0 auto;
100 max-width: 720px;
101 line-height: 1.3;
102
103 img, video, iframe {
104 // !important for asciinema frames
105 display: block !important;
106 margin: 0 auto !important;
107 max-width: 90%;
108
109 @media(max-width: 640px) {
110 max-width: calc(100% - 2rem);
111 }
112 }
113
114 .comment {
115 margin: 2rem auto 0;
116 max-width: 80%;
117 color: #333;
118 }
119}
120
121.footnotes {
122 font-size: 0.85rem;
123}
124
125footer {
126 margin-top: 2rem;
127 text-align: center;
128 font-size: 0.8rem;
129 color: #333;
130}
131
132.float-img {
133 float: right;
134 display: inline;
135 padding-left: 1rem;
136
137 @media(max-width: 640px) {
138 display: block;
139 float: none;
140 padding-left: inherit;
141 }
142}
143
144pre {
145 background-color: $black;
146 padding: 0.25rem 1rem;
147 margin: 0 -1rem;
148 max-width: 100%;
149 overflow-x: auto;
150
151 .cp {
152 color: #800;
153 }
154
155 .k {
156 color: #008;
157 }
158
159 .kt, .kd, .kc {
160 color: #44F;
161 }
162
163 .s {
164 color: #484;
165 font-style: italic;
166 }
167
168 .cm, .c1 {
169 color: #333;
170 font-style: italic;
171 }
172
173 .gi {
174 color: $green;
175 }
176
177 .gd {
178 color: $red;
179 }
180
181 .gu {
182 color: $blue;
183 }
184}
185
186summary {
187 cursor: pointer;
188 background-color: $black;
189 padding: 0.25rem 1rem;
190 margin: 0 -1rem;
191}
192
193details[open] {
194 border-bottom: 1rem solid $black;
195 margin: 0 -1rem 1rem;
196 padding: 0 1rem;
197}
198
199.text-center {
200 text-align: center;
201}
202
203blockquote {
204 border-left: 5px solid #bbb;
205 background-color: $black;
206 padding: 0 1rem;
207 margin-left: calc(-1rem - 5px);
208 margin-right: -1rem;
209
210 blockquote {
211 margin-right: 0;
212 margin-left: 0;
213 }
214}
215
216dl {
217 display: grid;
218 grid-template-columns: auto 1fr;
219 grid-gap: 0.2rem 1rem;
220
221 dt {
222 font-weight: bold;
223 grid-column-start: 1;
224 }
225
226 dd {
227 grid-column-start: 2;
228 margin: 0;
229 }
230}
231
232.alert {
233 padding: 0.5rem;
234 border: 1px solid transparent;
235 margin-bottom: 1rem;
236
237 &.alert-danger {
238 background: #f8d7da;
239 color: #721c24;
240 border-color: #f5c6cb;
241 }
242
243 &.alert-info {
244 background: #d1ecf1;
245 color: #0c5460;
246 border-color: #bee5eb;
247 }
248}