aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAkshay <[email protected]>2020-01-26 06:30:55 +0000
committerAkshay <[email protected]>2020-01-26 06:30:55 +0000
commitcaa0dcc8c629d99ae4951f9b6c0ea61e599d3859 (patch)
tree0a01e7a14bbaefd11d0ac8d2a9097e290f037076
parent7624df0688ebc50715d44ff87897845f8872dad5 (diff)
rework styles, better kerning
-rw-r--r--docs/style.css36
-rw-r--r--posts/static_sites_with_bash.md11
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
117a, a:hover, a:visited, a:active { 118a, 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
154pre { 155pre {
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
163pre:hover {
164 overflow-x: scroll;
165}
166
162code { 167code {
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
5my own. If you are more of the 'show me the code' kinda guy, 5my 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
9I chose to write in markdown, and convert
9to html with [lowdown](https://kristaps.bsd.lv/lowdown/). 10to html with [lowdown](https://kristaps.bsd.lv/lowdown/).
10 11
11**Directory structure**: I host my site on GitHub pages, so 12### Directory structure
13I 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
13go into `posts/`, get converted into html, and end up in 15go 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
24done 26done
25``` 27```
26 28
27**Assets**: Most static site generators recommend dropping image 29### Assets
30Most static site generators recommend dropping image
28assets into the site source itself. That does have it's 31assets into the site source itself. That does have it's
29merits, but I prefer hosting images separately: 32merits, but I prefer hosting images separately:
30 33
@@ -41,7 +44,7 @@ scp -P 443 "$1" emerald:files/"$id"
41echo "https://files.nerdypepper.tech/$id" 44echo "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)
46brings the above bits and pieces together (with some extra 49brings the above bits and pieces together (with some extra
47cruft to avoid javascript). It uses `sed` to produce nice 50cruft to avoid javascript). It uses `sed` to produce nice