Browse Source

little design revamp

master
sn0w 1 month ago
parent
commit
4c4071c02e
Signed by: sn0w <sn0w@posteo.de> GPG Key ID: DDEDFB9D3FA15727

+ 349
- 0
assets/css/normalize.css View File

@@ -0,0 +1,349 @@
1
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
2
+
3
+/* Document
4
+   ========================================================================== */
5
+
6
+/**
7
+ * 1. Correct the line height in all browsers.
8
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
9
+ */
10
+
11
+html {
12
+  line-height: 1.15; /* 1 */
13
+  -webkit-text-size-adjust: 100%; /* 2 */
14
+}
15
+
16
+/* Sections
17
+   ========================================================================== */
18
+
19
+/**
20
+ * Remove the margin in all browsers.
21
+ */
22
+
23
+body {
24
+  margin: 0;
25
+}
26
+
27
+/**
28
+ * Render the `main` element consistently in IE.
29
+ */
30
+
31
+main {
32
+  display: block;
33
+}
34
+
35
+/**
36
+ * Correct the font size and margin on `h1` elements within `section` and
37
+ * `article` contexts in Chrome, Firefox, and Safari.
38
+ */
39
+
40
+h1 {
41
+  font-size: 2em;
42
+  margin: 0.67em 0;
43
+}
44
+
45
+/* Grouping content
46
+   ========================================================================== */
47
+
48
+/**
49
+ * 1. Add the correct box sizing in Firefox.
50
+ * 2. Show the overflow in Edge and IE.
51
+ */
52
+
53
+hr {
54
+  box-sizing: content-box; /* 1 */
55
+  height: 0; /* 1 */
56
+  overflow: visible; /* 2 */
57
+}
58
+
59
+/**
60
+ * 1. Correct the inheritance and scaling of font size in all browsers.
61
+ * 2. Correct the odd `em` font sizing in all browsers.
62
+ */
63
+
64
+pre {
65
+  font-family: monospace, monospace; /* 1 */
66
+  font-size: 1em; /* 2 */
67
+}
68
+
69
+/* Text-level semantics
70
+   ========================================================================== */
71
+
72
+/**
73
+ * Remove the gray background on active links in IE 10.
74
+ */
75
+
76
+a {
77
+  background-color: transparent;
78
+}
79
+
80
+/**
81
+ * 1. Remove the bottom border in Chrome 57-
82
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
83
+ */
84
+
85
+abbr[title] {
86
+  border-bottom: none; /* 1 */
87
+  text-decoration: underline; /* 2 */
88
+  text-decoration: underline dotted; /* 2 */
89
+}
90
+
91
+/**
92
+ * Add the correct font weight in Chrome, Edge, and Safari.
93
+ */
94
+
95
+b,
96
+strong {
97
+  font-weight: bolder;
98
+}
99
+
100
+/**
101
+ * 1. Correct the inheritance and scaling of font size in all browsers.
102
+ * 2. Correct the odd `em` font sizing in all browsers.
103
+ */
104
+
105
+code,
106
+kbd,
107
+samp {
108
+  font-family: monospace, monospace; /* 1 */
109
+  font-size: 1em; /* 2 */
110
+}
111
+
112
+/**
113
+ * Add the correct font size in all browsers.
114
+ */
115
+
116
+small {
117
+  font-size: 80%;
118
+}
119
+
120
+/**
121
+ * Prevent `sub` and `sup` elements from affecting the line height in
122
+ * all browsers.
123
+ */
124
+
125
+sub,
126
+sup {
127
+  font-size: 75%;
128
+  line-height: 0;
129
+  position: relative;
130
+  vertical-align: baseline;
131
+}
132
+
133
+sub {
134
+  bottom: -0.25em;
135
+}
136
+
137
+sup {
138
+  top: -0.5em;
139
+}
140
+
141
+/* Embedded content
142
+   ========================================================================== */
143
+
144
+/**
145
+ * Remove the border on images inside links in IE 10.
146
+ */
147
+
148
+img {
149
+  border-style: none;
150
+}
151
+
152
+/* Forms
153
+   ========================================================================== */
154
+
155
+/**
156
+ * 1. Change the font styles in all browsers.
157
+ * 2. Remove the margin in Firefox and Safari.
158
+ */
159
+
160
+button,
161
+input,
162
+optgroup,
163
+select,
164
+textarea {
165
+  font-family: inherit; /* 1 */
166
+  font-size: 100%; /* 1 */
167
+  line-height: 1.15; /* 1 */
168
+  margin: 0; /* 2 */
169
+}
170
+
171
+/**
172
+ * Show the overflow in IE.
173
+ * 1. Show the overflow in Edge.
174
+ */
175
+
176
+button,
177
+input { /* 1 */
178
+  overflow: visible;
179
+}
180
+
181
+/**
182
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
183
+ * 1. Remove the inheritance of text transform in Firefox.
184
+ */
185
+
186
+button,
187
+select { /* 1 */
188
+  text-transform: none;
189
+}
190
+
191
+/**
192
+ * Correct the inability to style clickable types in iOS and Safari.
193
+ */
194
+
195
+button,
196
+[type="button"],
197
+[type="reset"],
198
+[type="submit"] {
199
+  -webkit-appearance: button;
200
+}
201
+
202
+/**
203
+ * Remove the inner border and padding in Firefox.
204
+ */
205
+
206
+button::-moz-focus-inner,
207
+[type="button"]::-moz-focus-inner,
208
+[type="reset"]::-moz-focus-inner,
209
+[type="submit"]::-moz-focus-inner {
210
+  border-style: none;
211
+  padding: 0;
212
+}
213
+
214
+/**
215
+ * Restore the focus styles unset by the previous rule.
216
+ */
217
+
218
+button:-moz-focusring,
219
+[type="button"]:-moz-focusring,
220
+[type="reset"]:-moz-focusring,
221
+[type="submit"]:-moz-focusring {
222
+  outline: 1px dotted ButtonText;
223
+}
224
+
225
+/**
226
+ * Correct the padding in Firefox.
227
+ */
228
+
229
+fieldset {
230
+  padding: 0.35em 0.75em 0.625em;
231
+}
232
+
233
+/**
234
+ * 1. Correct the text wrapping in Edge and IE.
235
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
236
+ * 3. Remove the padding so developers are not caught out when they zero out
237
+ *    `fieldset` elements in all browsers.
238
+ */
239
+
240
+legend {
241
+  box-sizing: border-box; /* 1 */
242
+  color: inherit; /* 2 */
243
+  display: table; /* 1 */
244
+  max-width: 100%; /* 1 */
245
+  padding: 0; /* 3 */
246
+  white-space: normal; /* 1 */
247
+}
248
+
249
+/**
250
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
251
+ */
252
+
253
+progress {
254
+  vertical-align: baseline;
255
+}
256
+
257
+/**
258
+ * Remove the default vertical scrollbar in IE 10+.
259
+ */
260
+
261
+textarea {
262
+  overflow: auto;
263
+}
264
+
265
+/**
266
+ * 1. Add the correct box sizing in IE 10.
267
+ * 2. Remove the padding in IE 10.
268
+ */
269
+
270
+[type="checkbox"],
271
+[type="radio"] {
272
+  box-sizing: border-box; /* 1 */
273
+  padding: 0; /* 2 */
274
+}
275
+
276
+/**
277
+ * Correct the cursor style of increment and decrement buttons in Chrome.
278
+ */
279
+
280
+[type="number"]::-webkit-inner-spin-button,
281
+[type="number"]::-webkit-outer-spin-button {
282
+  height: auto;
283
+}
284
+
285
+/**
286
+ * 1. Correct the odd appearance in Chrome and Safari.
287
+ * 2. Correct the outline style in Safari.
288
+ */
289
+
290
+[type="search"] {
291
+  -webkit-appearance: textfield; /* 1 */
292
+  outline-offset: -2px; /* 2 */
293
+}
294
+
295
+/**
296
+ * Remove the inner padding in Chrome and Safari on macOS.
297
+ */
298
+
299
+[type="search"]::-webkit-search-decoration {
300
+  -webkit-appearance: none;
301
+}
302
+
303
+/**
304
+ * 1. Correct the inability to style clickable types in iOS and Safari.
305
+ * 2. Change font properties to `inherit` in Safari.
306
+ */
307
+
308
+::-webkit-file-upload-button {
309
+  -webkit-appearance: button; /* 1 */
310
+  font: inherit; /* 2 */
311
+}
312
+
313
+/* Interactive
314
+   ========================================================================== */
315
+
316
+/*
317
+ * Add the correct display in Edge, IE 10+, and Firefox.
318
+ */
319
+
320
+details {
321
+  display: block;
322
+}
323
+
324
+/*
325
+ * Add the correct display in all browsers.
326
+ */
327
+
328
+summary {
329
+  display: list-item;
330
+}
331
+
332
+/* Misc
333
+   ========================================================================== */
334
+
335
+/**
336
+ * Add the correct display in IE 10+.
337
+ */
338
+
339
+template {
340
+  display: none;
341
+}
342
+
343
+/**
344
+ * Add the correct display in IE 10.
345
+ */
346
+
347
+[hidden] {
348
+  display: none;
349
+}

+ 52
- 4
assets/css/style.css View File

@@ -1,8 +1,12 @@
1
+/*
2
+ * General site styling
3
+ */
4
+
1 5
 body {
2 6
     background-color: #000;
3 7
     color: #ccc;
4 8
 
5
-    max-width: 786px;
9
+    max-width: 1024px;
6 10
     margin-left: auto;
7 11
     margin-right: auto;
8 12
 
@@ -10,6 +14,30 @@ body {
10 14
     font-size: 14px;
11 15
 }
12 16
 
17
+.page {
18
+    max-width: 500px;
19
+    margin-left: auto;
20
+    margin-right: auto;
21
+}
22
+
23
+.post {
24
+    max-width: 786px;
25
+    margin-left: auto;
26
+    margin-right: auto;
27
+}
28
+
29
+.footer-msg {
30
+    text-align: center;
31
+}
32
+
33
+/*
34
+ * Content styling
35
+ */
36
+
37
+ul > li {
38
+    margin-bottom: 5px;
39
+}
40
+
13 41
 a {
14 42
     color: #a450d8;
15 43
 }
@@ -20,6 +48,7 @@ code > a {
20 48
 
21 49
 .logo {
22 50
     color: #a450d8;
51
+    margin-bottom: 20px;
23 52
 }
24 53
 
25 54
 .blog-listing {
@@ -29,6 +58,7 @@ code > a {
29 58
 }
30 59
 
31 60
 .blog-listing > table {
61
+    width: 100%;
32 62
     border: #a450d8 3px solid;
33 63
     border-radius: 8px;
34 64
     padding: 14px;
@@ -59,12 +89,30 @@ li > p code {
59 89
     padding: 2px;
60 90
 }
61 91
 
92
+img {
93
+    max-width: 100%;
94
+}
95
+
96
+/*
97
+ * Helper classes
98
+ */
99
+
100
+.center {
101
+    display: flex;
102
+    align-items: center;
103
+    justify-content: center;
104
+}
105
+
106
+/*
107
+ * Code coloring
108
+ */
109
+
62 110
 code span.   { background: #282a36; color: #f8f8f2; } /* Normal */
63 111
 code span.al { color: #f8f8f2; } /* Alert */
64 112
 code span.an { color: #50fa7b; } /* Annotation */
65 113
 code span.at { color: #50fa7b; } /* Attribute */
66 114
 code span.bn { color: #bd93f9; } /* BaseN */
67
-code span.bu {                 } /* BuiltIn */
115
+code span.bu { /* default */   } /* BuiltIn */
68 116
 code span.cf { color: #ff79c6; } /* ControlFlow */
69 117
 code span.ch { color: #f1fa8c; } /* Char */
70 118
 code span.cn { color: #8be9fd; font-style: italic; } /* Constant */
@@ -77,11 +125,11 @@ code span.er { color: #f8f8f2; } /* Error */
77 125
 code span.ex { color: #ff79c6; } /* Extension */
78 126
 code span.fl { color: #bd93f9; } /* Float */
79 127
 code span.fu { color: #50fa7b; } /* Function */
80
-code span.im {                 } /* Import */
128
+code span.im { /* default */   } /* Import */
81 129
 code span.in { color: #6272a4; } /* Information */
82 130
 code span.kw { color: #ff79c6; } /* Keyword */
83 131
 code span.op { color: #ff79c6; } /* Operator */
84
-code span.ot {                 } /* Other */
132
+code span.ot { /* default */   } /* Other */
85 133
 code span.pp { color: #ff79c6; } /* Preprocessor */
86 134
 code span.re { color: #ff79c6; } /* RegionMarker */
87 135
 code span.sc { color: #f1fa8c; } /* SpecialChar */

build.zsh → build.sh View File

@@ -1,10 +1,14 @@
1
-#!/bin/zsh
1
+#!/bin/bash
2 2
 
3 3
 set -e
4 4
 set -o pipefail
5
+shopt -s globstar
5 6
 
6
-render() {
7
-    echo "#> Rendering ${1} as ${2}"
7
+#
8
+# Render markdown to html
9
+#
10
+render() { # 1: md source, # 2: html target
11
+    echo "#>> Rendering ${1} as ${2}"
8 12
     cat ./partials/header.html > "${2}"
9 13
     pandoc \
10 14
         -f gfm-smart \
@@ -13,31 +17,46 @@ render() {
13 17
     cat ./partials/footer.html >> "${2}"
14 18
 }
15 19
 
20
+#
21
+# Render markdown with header and footer
22
+#
23
+render_type() { # 1: type, 2: md source, 3: html target
24
+    cat ./partials/${1}_header.md >> "${2}_tmp"
25
+    cat "${2}" >> "${2}_tmp"
26
+    cat ./partials/${1}_footer.md >> "${2}_tmp"
27
+    render "${2}_tmp" "${3}"
28
+    rm "${2}_tmp"
29
+}
30
+
31
+#
16 32
 # Drop last build
33
+#
17 34
 echo "#> Cleaning up"
35
+
18 36
 if [[ -d _public ]]; then
19 37
     rm -r _public
20 38
 fi
21 39
 mkdir -p _public/blog
22 40
 
41
+#
23 42
 # Build pages
43
+#
24 44
 echo "#> Making pages/posts"
45
+
25 46
 for page in ./content/**/*.md; do
26 47
     file="$(echo "${page}" | rev | cut -d/ -f1 | rev | sed 's/\.md//g').html"
27 48
 
28 49
     if [[ "${page}" =~ "blog" ]]; then
29
-        cat ./partials/blog_post_header.md >> "${page}_tmp"
30
-        cat "${page}" >> "${page}_tmp"
31
-        cat ./partials/blog_post_footer.md >> "${page}_tmp"
32
-        render "${page}_tmp" "./_public/blog/${file}"
33
-        rm "${page}_tmp"
50
+        render_type blog_post "${page}" "./_public/blog/${file}"
34 51
     else
35
-        render "${page}" "./_public/${file}"
52
+        render_type page "${page}" "./_public/${file}"
36 53
     fi
37 54
 done
38 55
 
56
+#
39 57
 # Build blog index
40
-echo "#> Making blog index page"
58
+#
59
+echo "#> Making blog index"
41 60
 
42 61
 cat ./partials/blog_index_header.md >> ./_public/blog/index.md
43 62
 for page in $(ls ./content/blog/*.md | sort -d -r); do
@@ -55,6 +74,7 @@ rm ./_public/blog/index.md
55 74
 
56 75
 # Copy media
57 76
 echo "#> Transferring media"
77
+
58 78
 cp -r assets _public/assets
59 79
 
60 80
 if [[ "$1" == "--serve" ]]; then

+ 0
- 2
content/blog/2017-12-25_Why-IOTA-Sucks.md View File

@@ -266,5 +266,3 @@ supports this utterly flawed coin. We're better off without it.
266 266
 
267 267
 Stop this madness.<br>
268 268
 Invest in something safe.
269
-
270
-<hr/>

+ 19
- 0
content/contact.md View File

@@ -0,0 +1,19 @@
1
+<div class="navbar-wrap center">
2
+<div class="navbar">
3
+<a href="/">/home</a>&nbsp;・&nbsp;
4
+<a href="/blog">/blog</a>&nbsp;・&nbsp;
5
+/contact
6
+</div>
7
+</div>
8
+<br>
9
+
10
+If you want to contact me for anything, here are some options:
11
+
12
+- E-Mail: `echo "c24wd0Bwb3N0ZW8uZGU=" | base64 -d`
13
+- Fediverse: `@sn0w@cofe.rocks` ([link](https://cofe.rocks/sn0w))
14
+- Matrix: `@sn0w:matrix.heldscal.la`
15
+- Discord: `FADED#0001`
16
+
17
+Using PGP for non-encrypted services is highly recommended.<br>
18
+My key is `D3D00F7849C07268ADA947BBDDEDFB9D3FA15727`.<br>
19
+Pull it from any major keyserver or `@sn0w` on [keybase](https://keybase.io/sn0w).

+ 22
- 21
content/index.md View File

@@ -1,44 +1,45 @@
1
-Hi, my name is
2
-
3
-<pre class="logo">
4
- .d888b,  88bd88b  d8888b  ?88   d8P  d8P
5
- ?8b,     88P' ?8bd8P' ?88 d88  d8P' d8P'
6
-   `?8b  d88   88P88b  d88 ?8b ,88b ,88'
7
-`?888P' d88'   88b`?8888P' `?888P'888P'
8
-</pre>
1
+<div class="navbar-wrap center">
2
+<div class="navbar">
3
+/home&nbsp;・&nbsp;
4
+<a href="/blog">/blog</a>&nbsp;・&nbsp;
5
+<a href="/contact.html">/contact</a>
6
+</div>
7
+</div>
8
+<br>
9 9
 
10
-welcome to my website!<br><br>
10
+Hi, welcome on my little website.<br>
11
+People call me sn0w around here.
11 12
 
12 13
 I'm a programmer who tries to survive in a world of broken, inefficient, and bloated software.
13 14
 When I'm not writing or reversing code, I love managing servers, drinking more coffee than any
14 15
 sane person would ever drink, and listening to metal.
15 16
 
16 17
 I sometimes write about things in [my blog](/blog).<br>
17
-Check it out if you're into that stuff.
18
-
19
-If you want to contact me you can:
20
-
21
-- Shoot a mail to `c24wd0Bwb3N0ZW8uZGU=`
22
-- DM `@sn0w@cofe.rocks`
23
-- Write `FADED#0001` on Discord
24
-
25
-Using PGP is encouraged.<br>
26
-Use `D3D00F7849C07268ADA947BBDDEDFB9D3FA15727`.
18
+Check it out if you're into tech stuff.
27 19
 
28 20
 <br>
29 21
 
30 22
 Up for a little challenge?<br>
31
-Take a look at [this](/assets/hmmm.flac).<br>
23
+Take a look at [this file](/assets/hmmm.flac).<br>
32 24
 I feel like the number 666 might be helpful.
33 25
 
34 26
 <br>
35 27
 
28
+
29
+<div class="footer-msg">
30
+
36 31
 \-\-\-\-\-\-\-\-\-\-
37 32
 
38
-Proudly handcrafted with <3, markdown, and some shell scripts.<br>
33
+Proudly handcrafted with <3, markdown, and bash.<br>
39 34
 Repo with sources [here](https://glitch.sh/sn0w/website.git).<br>
40 35
 
36
+</div>
37
+
38
+<div class="footer center">
39
+
41 40
 ![](/assets/icons/gethtmlnow.gif)
42 41
 [![](/assets/icons/neocities_button.gif)](https://neocities.org/site/snowtastic)
43 42
 [![](/assets/icons/silicon-valley.png)](https://districts.neocities.org/silicon-valley/)
44 43
 ![](/assets/icons/nojs.gif)
44
+
45
+</div>

+ 1
- 0
partials/blog_index_footer.md View File

@@ -1 +1,2 @@
1 1
 </div>
2
+</div>

+ 10
- 4
partials/blog_index_header.md View File

@@ -1,6 +1,12 @@
1
-[<< Back to homepage](/)
2
-
1
+<div class="navbar-wrap center">
2
+<div class="navbar">
3
+<a href="/">/home</a>&nbsp;・&nbsp;
4
+/blog&nbsp;・&nbsp;
5
+<a href="/contact.html">/contact</a>
6
+</div>
7
+</div>
3 8
 <br>
9
+<div class="post">
4 10
 
5 11
 Welcome to my blog!
6 12
 
@@ -15,6 +21,6 @@ However, **please** don't necro-analyze old posts for correctnes.
15 21
 
16 22
 <div class="blog-listing">
17 23
 
18
-|  | Name | Posted | Size |
19
-|:-|:-----|-------:|-----:|
24
+|  | Name | Posted At | Words |
25
+|:-|:-----|----------:|------:|
20 26
 |![](/assets/icons/back.gif)|[../](/)|-|-

+ 1
- 2
partials/blog_post_footer.md View File

@@ -1,2 +1 @@
1
-
2
-[<< Back to overview](/blog)
1
+</div>

+ 9
- 1
partials/blog_post_header.md View File

@@ -1 +1,9 @@
1
-[<< Back to overview](/blog)
1
+<div class="navbar-wrap center">
2
+<div class="navbar">
3
+<a href="/">/home</a>&nbsp;・&nbsp;
4
+<a href="/blog">/blog</a>&nbsp;・&nbsp;
5
+<a href="/contact.html">/contact</a>
6
+</div>
7
+</div>
8
+<br>
9
+<div class="post">

+ 10
- 0
partials/header.html View File

@@ -7,6 +7,16 @@
7 7
 
8 8
     <title>sn0w's website</title>
9 9
 
10
+    <link rel="stylesheet" href="/assets/css/normalize.css"/>
10 11
     <link rel="stylesheet" href="/assets/css/style.css"/>
11 12
 </head>
12 13
 <body>
14
+<br>
15
+<div class="logo-wrap center">
16
+<pre class="logo">
17
+ .d888b,  88bd88b  d8888b  ?88   d8P  d8P
18
+ ?8b,     88P' ?8bd8P' ?88 d88  d8P' d8P'
19
+   `?8b  d88   88P88b  d88 ?8b ,88b ,88'
20
+`?888P' d88'   88b`?8888P' `?888P'888P'
21
+</pre>
22
+</div>

+ 1
- 0
partials/page_footer.md View File

@@ -0,0 +1 @@
1
+</div>

+ 1
- 0
partials/page_header.md View File

@@ -0,0 +1 @@
1
+<div class="page">

Loading…
Cancel
Save