diff options
-rw-r--r-- | docs/style.css | 36 | ||||
-rw-r--r-- | posts/static_sites_with_bash.md | 11 |
2 files changed, 32 insertions, 15 deletions
diff --git a/docs/style.css b/docs/style.css index 1311413..9555dd2 100644 --- a/docs/style.css +++ b/docs/style.css | |||
@@ -10,7 +10,7 @@ | |||
10 | --cyan: #79ffe1; | 10 | --cyan: #79ffe1; |
11 | --pink: #d344e2; | 11 | --pink: #d344e2; |
12 | --black: #212121; | 12 | --black: #212121; |
13 | --light-black: #535353; | 13 | --light-black: #666666; |
14 | --white: #ffffff; | 14 | --white: #ffffff; |
15 | --dark-white: #eeeeee; | 15 | --dark-white: #eeeeee; |
16 | } | 16 | } |
@@ -19,7 +19,7 @@ body { font-family: 'Inter', sans-serif; } | |||
19 | @supports (font-variation-settings: normal) { | 19 | @supports (font-variation-settings: normal) { |
20 | body { | 20 | body { |
21 | font-family: 'Inter var', sans-serif; | 21 | font-family: 'Inter var', sans-serif; |
22 | font-feature-settings: 'ss01' 1, 'ss02' 1, 'kern' 1, 'liga' 1; | 22 | font-feature-settings: 'ss01' 1, 'kern' 1, 'liga' 1, 'cv05' 1; |
23 | } | 23 | } |
24 | } | 24 | } |
25 | 25 | ||
@@ -28,6 +28,7 @@ body { | |||
28 | color: var(--black); | 28 | color: var(--black); |
29 | padding: 0; | 29 | padding: 0; |
30 | padding-top: 2rem; | 30 | padding-top: 2rem; |
31 | padding-bottom: 2rem; | ||
31 | text-align: center; | 32 | text-align: center; |
32 | } | 33 | } |
33 | 34 | ||
@@ -82,7 +83,7 @@ hr { | |||
82 | } | 83 | } |
83 | 84 | ||
84 | .date { | 85 | .date { |
85 | font-feature-settings: 'ss01' 1, 'zero' 1; | 86 | font-feature-settings: 'ss01' 1, 'kern' 1; |
86 | font-weight: 400; | 87 | font-weight: 400; |
87 | font-size: 0.8rem; | 88 | font-size: 0.8rem; |
88 | color: var(--light-black); | 89 | color: var(--light-black); |
@@ -105,13 +106,13 @@ hr { | |||
105 | } | 106 | } |
106 | 107 | ||
107 | .heading { | 108 | .heading { |
108 | margin:0 auto; | 109 | margin: 0 auto; |
109 | color: var(--black); | 110 | color: var(--black); |
110 | text-align: center; | 111 | text-align: center; |
111 | font-size: 6rem; | 112 | font-size: 6rem; |
112 | font-family: 'Iosevka', monospace; | 113 | font-family: 'Iosevka', monospace; |
113 | text-shadow: 0.25rem 0rem var(--cyan), -0.25rem 0rem var(--pink); | 114 | text-shadow: 0.25rem 0rem var(--cyan), -0.25rem 0rem var(--pink); |
114 | line-height: 8.5rem; | 115 | line-height: 7rem; |
115 | } | 116 | } |
116 | 117 | ||
117 | a, a:hover, a:visited, a:active { | 118 | a, a:hover, a:visited, a:active { |
@@ -129,14 +130,14 @@ a, a:hover, a:visited, a:active { | |||
129 | .post-end-link, .post-end-link:hover, .post-end-link:visited, .post-end-link:active | 130 | .post-end-link, .post-end-link:hover, .post-end-link:visited, .post-end-link:active |
130 | { | 131 | { |
131 | text-decoration: none; | 132 | text-decoration: none; |
132 | color: var(--black); | 133 | color: var(--light-black); |
133 | text-shadow: none; | 134 | text-shadow: none; |
134 | font-size: 0.8rem; | 135 | font-size: 0.8rem; |
135 | } | 136 | } |
136 | 137 | ||
137 | .post-title { | 138 | .post-title { |
138 | text-decoration: none; | 139 | text-decoration: none; |
139 | color: var(--light-black); | 140 | color: var(--black); |
140 | text-shadow: none; | 141 | text-shadow: none; |
141 | font-weight: 800; | 142 | font-weight: 800; |
142 | font-size: 1.5rem; | 143 | font-size: 1.5rem; |
@@ -153,12 +154,16 @@ pre, code { | |||
153 | 154 | ||
154 | pre { | 155 | pre { |
155 | background-color: var(--dark-white); | 156 | background-color: var(--dark-white); |
156 | overflow: auto; | 157 | overflow: hidden; |
157 | padding: 0.8rem; | 158 | padding: 0.8rem; |
158 | border: 1px solid var(--dark-white); | 159 | border: 1px solid var(--dark-white); |
159 | border-radius: 0.2px; | 160 | border-radius: 0.2px; |
160 | } | 161 | } |
161 | 162 | ||
163 | pre:hover { | ||
164 | overflow-x: scroll; | ||
165 | } | ||
166 | |||
162 | code { | 167 | code { |
163 | color: var(--pink); | 168 | color: var(--pink); |
164 | } | 169 | } |
@@ -172,11 +177,20 @@ pre > code { | |||
172 | background: var(--cyan); | 177 | background: var(--cyan); |
173 | } | 178 | } |
174 | 179 | ||
175 | .commit-hash { | 180 | .stats { |
176 | float: right; | 181 | float: right; |
182 | color: var(--light-black); | ||
183 | } | ||
184 | |||
185 | .stats-number { | ||
177 | font-size: 0.8rem; | 186 | font-size: 0.8rem; |
178 | text-decoration: none; | 187 | font-family: 'Inter var', Monospace; |
179 | font-family: Monospace; | 188 | font-feature-settings: 'ss01' 1, 'kern' 1; |
189 | } | ||
190 | |||
191 | .stats-unit { | ||
192 | font-size: 0.5rem; | ||
193 | font-family: 'Inter var'; | ||
180 | } | 194 | } |
181 | 195 | ||
182 | .footer { | 196 | .footer { |
diff --git a/posts/static_sites_with_bash.md b/posts/static_sites_with_bash.md index d87cefd..2a1cc92 100644 --- a/posts/static_sites_with_bash.md +++ b/posts/static_sites_with_bash.md | |||
@@ -5,10 +5,12 @@ After going through a bunch of static site generators | |||
5 | my own. If you are more of the 'show me the code' kinda guy, | 5 | my own. If you are more of the 'show me the code' kinda guy, |
6 | [here](https://github.com/nerdypepper/site) you go. | 6 | [here](https://github.com/nerdypepper/site) you go. |
7 | 7 | ||
8 | **Text formatting**: I chose to write in markdown, and convert | 8 | ### Text formatting |
9 | I chose to write in markdown, and convert | ||
9 | to html with [lowdown](https://kristaps.bsd.lv/lowdown/). | 10 | to html with [lowdown](https://kristaps.bsd.lv/lowdown/). |
10 | 11 | ||
11 | **Directory structure**: I host my site on GitHub pages, so | 12 | ### Directory structure |
13 | I host my site on GitHub pages, so | ||
12 | `docs/` has to be the entry point. Markdown formatted posts | 14 | `docs/` has to be the entry point. Markdown formatted posts |
13 | go into `posts/`, get converted into html, and end up in | 15 | go into `posts/`, get converted into html, and end up in |
14 | `docs/index.html`, something like this: | 16 | `docs/index.html`, something like this: |
@@ -24,7 +26,8 @@ for f in $posts; do | |||
24 | done | 26 | done |
25 | ``` | 27 | ``` |
26 | 28 | ||
27 | **Assets**: Most static site generators recommend dropping image | 29 | ### Assets |
30 | Most static site generators recommend dropping image | ||
28 | assets into the site source itself. That does have it's | 31 | assets into the site source itself. That does have it's |
29 | merits, but I prefer hosting images separately: | 32 | merits, but I prefer hosting images separately: |
30 | 33 | ||
@@ -41,7 +44,7 @@ scp -P 443 "$1" emerald:files/"$id" | |||
41 | echo "https://files.nerdypepper.tech/$id" | 44 | echo "https://files.nerdypepper.tech/$id" |
42 | ``` | 45 | ``` |
43 | 46 | ||
44 | **Templating**: | 47 | ### Templating |
45 | [`generate.sh`](https://github.com/NerdyPepper/site/blob/master/generate.sh) | 48 | [`generate.sh`](https://github.com/NerdyPepper/site/blob/master/generate.sh) |
46 | brings the above bits and pieces together (with some extra | 49 | brings the above bits and pieces together (with some extra |
47 | cruft to avoid javascript). It uses `sed` to produce nice | 50 | cruft to avoid javascript). It uses `sed` to produce nice |