From 0498fc62fc4aba7a268e450e80f090f24015c849 Mon Sep 17 00:00:00 2001 From: Maxi Ferreira Date: Wed, 1 Dec 2021 09:17:42 -0800 Subject: [PATCH] Dark mode --- TODO | 1 + public/robots.txt | 2 +- src/components/BaseHead.astro | 11 +++++ src/components/Footer.astro | 6 +-- src/components/Logo.astro | 2 +- src/components/Nav.astro | 4 +- src/components/ThemeToggleButton.svelte | 65 +++++++++++++++++++++++++ src/pages/about.astro | 5 +- src/pages/blog/[slug].astro | 2 +- src/pages/blog/index.astro | 2 +- src/pages/index.astro | 9 +++- src/styles/global.css | 50 +++++++++++++++++-- 12 files changed, 145 insertions(+), 14 deletions(-) create mode 100644 src/components/ThemeToggleButton.svelte diff --git a/TODO b/TODO index b573592..4ea3440 100644 --- a/TODO +++ b/TODO @@ -8,3 +8,4 @@ [x] Reading time [x] Bio component [x] Add social image +[ ] Add hero image to one of the posts diff --git a/public/robots.txt b/public/robots.txt index 1f53798..c2a49f4 100644 --- a/public/robots.txt +++ b/public/robots.txt @@ -1,2 +1,2 @@ User-agent: * -Disallow: / +Allow: / diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro index 7f7807b..7ff1b59 100644 --- a/src/components/BaseHead.astro +++ b/src/components/BaseHead.astro @@ -41,3 +41,14 @@ const socialUrl = Astro.site.href + 'assets/social.png' + + + diff --git a/src/components/Footer.astro b/src/components/Footer.astro index e6d0b08..f8dedf1 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -1,14 +1,14 @@ diff --git a/src/components/Nav.astro b/src/components/Nav.astro index 0de3a9e..f5091bb 100644 --- a/src/components/Nav.astro +++ b/src/components/Nav.astro @@ -1,4 +1,5 @@ --- +import ThemeToggleButton from './ThemeToggleButton.svelte'; const { current = '' } = Astro.props; --- @@ -34,7 +35,7 @@ const { current = '' } = Astro.props; bottom: 0; width: 100%; height: 2px; - background: #AAA; + background: var(--text-secondary); transform: scaleX(0); } @@ -52,4 +53,5 @@ const { current = '' } = Astro.props; home about blog + diff --git a/src/components/ThemeToggleButton.svelte b/src/components/ThemeToggleButton.svelte new file mode 100644 index 0000000..a15dd2c --- /dev/null +++ b/src/components/ThemeToggleButton.svelte @@ -0,0 +1,65 @@ + + + +
+ {#each themes as t, i} + + {/each} +
diff --git a/src/pages/about.astro b/src/pages/about.astro index 63d4d75..4ce50b5 100644 --- a/src/pages/about.astro +++ b/src/pages/about.astro @@ -12,7 +12,10 @@ const permalink = `${Astro.site.href}about`;
Illustration of a notebook
- Illustration by Icons 8 from Ouch! + Illustration by + Icons 8 + from + Ouch!

Text placeholder via Jeffsum.

diff --git a/src/pages/blog/[slug].astro b/src/pages/blog/[slug].astro index 4603536..1a025fc 100644 --- a/src/pages/blog/[slug].astro +++ b/src/pages/blog/[slug].astro @@ -41,7 +41,7 @@ const permalink = `${Astro.site.href}${slug}`; } header p { - color: #AAA; + color: var(--text-secondary); text-transform: uppercase; font-family: var(--font-family-sans); font-weight: 600; diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro index 82b9c4b..52b2e09 100644 --- a/src/pages/blog/index.astro +++ b/src/pages/blog/index.astro @@ -40,7 +40,7 @@ allPosts = allPosts.sort((a, b) => new Date(b.publishDate).valueOf() - new Date( } .post-item-date { - color: #AAA; + color: var(--text-secondary); text-align: left; text-transform: uppercase; margin-right: 16px; diff --git a/src/pages/index.astro b/src/pages/index.astro index de4744e..4f98668 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -10,13 +10,16 @@ const permalink = Astro.site.href;

Welcome to your new Astro Blog

-

Check out the docs on GitHub to get started.

+

Check out the docs on GitHub to get started.

Illustration of person reading a book
- Illustration by Icons 8 from Ouch! + Illustration by + Icons 8 + from + Ouch!
@@ -54,11 +57,13 @@ const permalink = Astro.site.href; figcaption { font-size: .8em; font-style: italic; + text-align: left; } img { width: 100%; max-width: 550px; + margin-bottom: 1em; } @media (max-width: 1200px) { diff --git a/src/styles/global.css b/src/styles/global.css index 20fce27..3c2015c 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -1,16 +1,18 @@ :root { --background-body: #fff; --text-main: #36393b; + --text-secondary: #6b6f72; --primary-color: #548E9B; --font-family-serif: Merriweather, serif; --font-family-sans: 'Fira Sans', sans-serif; } -/* :root { - --background-body: #36393b; +:root.theme-dark { + --background-body: #202122; --text-main: #fff; + --text-secondary: #ccc; --primary-color: #548E9B; -} */ +} *, *:before, *:after { box-sizing: border-box; @@ -189,6 +191,48 @@ td { margin: 1em 0; } +.theme-toggle { + display: inline-flex; + align-items: center; + height: 100%; + padding: 0.33em 0.67em; + padding-top: 8px; + margin-left: 10px; + gap: 0.6em; + border-radius: 99em; + background-color: var(--theme-code-inline-bg); +} + +.theme-toggle > label:focus-within { + outline: 2px solid transparent; + box-shadow: 0 0 0 0.08em var(--theme-accent), 0 0 0 0.12em white; +} + +.theme-toggle > label { + color: var(--theme-code-inline-text); + position: relative; + display: flex; + align-items: center; + justify-content: center; + opacity: 0.5; + cursor: pointer; +} + +.theme-toggle .checked { + color: var(--theme-accent); + opacity: 1; +} + +input[name='theme-toggle'] { + position: absolute; + opacity: 0; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: -1; +} + @media (max-width: 1020px) { h1 { font-size: 3em;