diff --git a/content/notes/dark-mode/index.md b/content/notes/dark-mode/index.md index 2307527f..d17e8dad 100644 --- a/content/notes/dark-mode/index.md +++ b/content/notes/dark-mode/index.md @@ -10,7 +10,7 @@ tags: - Tutorial css: | div#content div.embed iframe { - height: 200px; + height: 190px; width: 100%; max-width: 650px; display: block; @@ -38,7 +38,7 @@ I've written a simple implementation below, which... ...meaning that any CSS selectors beginning with `body.dark` or `body.light` will only apply when the respective mode is active. A good place to start is by separating any color rules --- your background, text, links, etc. --- into a different section of your CSS. Using [SASS or SCSS](https://sass-lang.com/) makes this a whole lot [easier with nesting](https://sass-lang.com/guide#topic-3) but is not required; this was written with a [KISS](https://getyarn.io/yarn-clip/embed/eed08f4f-d1c9-4cc0-b041-f280a5dbf0a5?autoplay=false) mentality. -{{< iframe src="https://jakejarvis.github.io/dark-mode-example/" width="650" height="200" >}} +{{< iframe src="https://jakejarvis.github.io/dark-mode-example/" width="650" height="275" title="Dark Mode Example" >}} A _very_ barebones example is embedded above ([view the source here](https://github.com/jakejarvis/dark-mode-example)) or you can try it out on this site by clicking the 💡 lightbulb in the upper right corner of this page. You'll notice that the dark theme sticks when refreshing this page, navigating between other pages, or if you were to return to this example weeks from now. @@ -167,9 +167,10 @@ A _very_ barebones example is embedded above ([view the source here](https://git

Welcome to the dark side 🌓

+

View the source code.

- + diff --git a/layouts/_default/single.amp.html b/layouts/_default/single.amp.html index 978afb74..4b5eacc3 100644 --- a/layouts/_default/single.amp.html +++ b/layouts/_default/single.amp.html @@ -89,24 +89,35 @@ padding-left: 1em; } article { + max-width: {{ printf "%d%s" .Site.Params.pageMaxWidth "px" }}; + margin: 0 auto; + padding: 0 15px; line-height: 1.8; - padding: 0 20px; } h1.title { - text-align: center; font-size: 2em; line-height: 1.3; - margin-top: 0.6em; - margin-bottom: 0.25em; + margin-top: 0.4em; + margin-bottom: 0.4em; + margin-left: -0.03em; } - p.meta { - text-align: center; - margin: 0.25em; - color: #757575; - } - p.meta a { + h1.title a { + color: inherit; text-decoration: none; - color: #444444; + } + div#meta { + font-size: 0.9em; + line-height: 1.3; + letter-spacing: 0.04em; + margin-top: 1.5em; + color: #5e5e5e; + } + div#meta a { + text-decoration: none; + color: inherit; + } + div#meta span.dash { + margin: 0 0.7em; } p.center, p.image, p.caption { text-align: center; @@ -126,10 +137,12 @@ border-bottom: 1px solid #e3e3e3; } nav { + max-width: {{ printf "%d%s" .Site.Params.pageMaxWidth "px" }}; + margin: 0 auto; + padding: 0 15px; display: flex; align-items: center; justify-content: space-between; - padding: 5px 20px; } nav a { text-decoration: none; @@ -138,7 +151,7 @@ display: flex; align-items: center; color: #333333; - padding: 12px 0; + padding: 15px 0; } nav a#logo svg { height: 45px; @@ -153,18 +166,17 @@ list-style: none; display: flex; align-items: center; - font-size: 1.5em; + font-size: 1.75em; line-height: 1; padding: 0; + margin: 0; } nav ul li { - width: 60px; + width: 65px; text-align: right; } footer { - display: flex; - justify-content: space-between; - padding: 20px; + padding: 20px 15px; border-top: 1px solid #e3e3e3; color: #555; line-height: 1.8; @@ -176,6 +188,13 @@ vertical-align: middle; height: 100%; } + footer div.row { + width: 100%; + max-width: {{ printf "%d%s" .Site.Params.pageMaxWidth "px" }}; + margin: 0 auto; + display: flex; + justify-content: space-between; + } div.left { text-align: left; } @@ -210,7 +229,7 @@ div.highlight span.n, div.highlight span.bp, div.highlight span.nb, div.highlight span.ni, div.highlight span.fm, div.highlight span.nl, div.highlight span.nn, div.highlight span.py, div.highlight span.nv, div.highlight span.vc, div.highlight span.vg, div.highlight span.vi, div.highlight span.vm, div.highlight span.p { color: #111111; } div.highlight span.na, div.highlight span.nc, div.highlight span.nd, div.highlight span.ne, div.highlight span.nf, div.highlight span.nx { color: #337a15; } div.highlight span.err, div.highlight span.nt, div.highlight span.o, div.highlight span.ow, div.highlight span.kn { color: #d43d2e; } - div.highlight span.l, div.highlight span.se, div.highlight span.m, div.highlight span.mb, div.highlight span.mf, div.highlight span.mh, div.highlight span.mi, div.highlight span.il, div.highlight span.mo { color: #8d4eff; } + div.highlight span.l, div.highlight span.se, div.highlight span.m, div.highlight span.mb, div.highlight span.mf, div.highlight span.mh, div.highlight span.mi, div.highlight span.il, div.highlight span.mo { color: #7e3df3; } div.highlight span.ld, div.highlight span.s, div.highlight span.sa, div.highlight span.sb, div.highlight span.sc, div.highlight span.dl, div.highlight span.sd, div.highlight span.s2, div.highlight span.sh, div.highlight span.si, div.highlight span.sx, div.highlight span.sr, div.highlight span.s1, div.highlight span.ss { color: #bd5500; } div.highlight span.c, div.highlight span.ch, div.highlight span.cm, div.highlight span.c1, div.highlight span.cs, div.highlight span.cp, div.highlight span.cpf { color: #6b6859; } div.highlight span.ge { font-style: italic; } @@ -244,11 +263,13 @@
-

{{ .Title | markdownify }}

-

- by {{ .Site.Author.name }} - on {{ .Date.Format "January 2, 2006" }} -

+
+ {{ .Date.Format "January 2, 2006" }}{{ with .OutputFormats.Get "html" }}—View Full Version{{ end }} +
+ + {{ with .OutputFormats.Get "html" }} +

{{ $.Title | markdownify }}

+ {{ end }}
{{ .Content }} @@ -256,12 +277,14 @@
{{ if eq hugo.Environment "production" }} - + {{ end }} diff --git a/layouts/shortcodes/iframe.amp.html b/layouts/shortcodes/iframe.amp.html index 8053887d..a9db70dc 100644 --- a/layouts/shortcodes/iframe.amp.html +++ b/layouts/shortcodes/iframe.amp.html @@ -1,7 +1,8 @@ + src="{{ .Get "src" }}" + {{ with .Get "title" }}title="{{ . }}"{{ end }}> diff --git a/layouts/shortcodes/iframe.html b/layouts/shortcodes/iframe.html index cf8e7683..f0448e6a 100644 --- a/layouts/shortcodes/iframe.html +++ b/layouts/shortcodes/iframe.html @@ -1,3 +1,3 @@
- +