From 0a89762a1d1bbb9aaf8812daaa4585d2d8a2be53 Mon Sep 17 00:00:00 2001 From: Ayo Date: Sun, 31 Mar 2024 22:36:02 +0200 Subject: [PATCH] feat: dark mode --- src/components/Card.astro | 27 ++++----- src/components/Footer.astro | 10 +++- src/components/Nav.astro | 2 +- src/constants/links.ts | 2 +- src/layouts/Layout.astro | 57 +++++++++++++------ src/layouts/reset.css | 1 + src/pages/404.astro | 2 +- src/pages/index.astro | 2 +- src/pages/now/and-then/index.astro | 2 +- src/pages/now/and-then/posts/01-19-2023.astro | 2 +- src/pages/now/and-then/posts/06-23-2023.astro | 2 +- src/pages/now/and-then/posts/09-20-2022.astro | 2 +- src/pages/social.astro | 2 +- 13 files changed, 70 insertions(+), 43 deletions(-) diff --git a/src/components/Card.astro b/src/components/Card.astro index 263d7a3..ea291f2 100644 --- a/src/components/Card.astro +++ b/src/components/Card.astro @@ -11,14 +11,10 @@ const { href, title, rel, body, newTab = false } = Astro.props; ---
  • - +

    {title} - { - newTab - ? ( ↗) - : ( →) - } + {newTab ?  ↗ :  →}

    {body} @@ -40,10 +36,10 @@ const { href, title, rel, body, newTab = false } = Astro.props; list-style: none; display: flex; padding: 0.15rem; - background-image: var(--link-gradient); background-size: 400%; border-radius: 0.5rem; background-position: 100%; + background-image: var(--link-gradient); transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1); } @@ -52,9 +48,8 @@ const { href, title, rel, body, newTab = false } = Astro.props; text-decoration: none; padding: 1em 1.3em; border-radius: 0.35rem; - color: var(--text-color); background-color: white; - opacity: 0.8; + color: var(--text-color-dark); } h2 { @@ -77,15 +72,15 @@ const { href, title, rel, body, newTab = false } = Astro.props; background-position: 0; } - .link-card:is(:hover, :focus-within) h2 { - /* - color: #4f39fa; -*/ - color: var(--color-brand-blue-2); - } - .link-card:is(:hover, :focus-within) h2 span { will-change: transform; transform: translateX(2px); } + + @media (prefers-color-scheme: dark) { + .link-card > a { + background-color: var(--bg-dark); + color: var(--text-color-light); + } + } diff --git a/src/components/Footer.astro b/src/components/Footer.astro index 00247fd..d43e86d 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -1,11 +1,17 @@ --- const year = new Date().getFullYear(); --- +

    diff --git a/src/components/Nav.astro b/src/components/Nav.astro index fb37c9c..e7fc225 100644 --- a/src/components/Nav.astro +++ b/src/components/Nav.astro @@ -43,7 +43,7 @@ if (Astro.url.pathname !== "/") { nav a { display: inline-block; text-decoration: underline; - color: var(--color-bg); + color: var(--text-color-light); padding: 0.5em 1em; font-size: var(--font-size-sm); } diff --git a/src/constants/links.ts b/src/constants/links.ts index 58de310..cb2923d 100644 --- a/src/constants/links.ts +++ b/src/constants/links.ts @@ -17,7 +17,7 @@ export const links: Link[] = [ text: "social" }, { - url: "https://metapixl.com/@ayo", + url: "https://metapixl.com/i/portfolio/ayo", icon: "image", text: "photos" }, diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 4a93afa..a69bd18 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -9,10 +9,9 @@ export interface Props { } const { title, description } = Astro.props; - --- - + @@ -22,15 +21,13 @@ const { title, description } = Astro.props; diff --git a/src/layouts/reset.css b/src/layouts/reset.css index 0cad55f..4cd4325 100644 --- a/src/layouts/reset.css +++ b/src/layouts/reset.css @@ -23,6 +23,7 @@ THANKS TO JOSH COMEAU FOR HIS CUSTOM CSS RESET html, body { height: 100%; + background: #fff; } /* Typographic tweaks! diff --git a/src/pages/404.astro b/src/pages/404.astro index 1120641..8e46b6d 100644 --- a/src/pages/404.astro +++ b/src/pages/404.astro @@ -65,7 +65,7 @@ const description = "Have you tried turning it off and on again?"; max-width: var(--content-width); font-weight: normal; font-size: (--font-size-lg); - color: var(--color-bg); + color: var(--text-color-light); } .now-wrapper { diff --git a/src/pages/index.astro b/src/pages/index.astro index d09bad8..6bd0197 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -111,7 +111,7 @@ import { stuff } from '../constants/stuff'; max-width: var(--content-width); font-weight: normal; font-size: var(--font-size-lg); - color: var(--color-bg); + color: var(--text-color-light); } .highlighted-section__content__profile-picture { diff --git a/src/pages/now/and-then/index.astro b/src/pages/now/and-then/index.astro index 734c1c0..d8b3a2e 100644 --- a/src/pages/now/and-then/index.astro +++ b/src/pages/now/and-then/index.astro @@ -41,7 +41,7 @@ const title = "Previously..."; background: #4f39fa; padding: 1rem; border-radius: 0.4rem; - color: var(--color-bg); + color: var(--text-color-light); } .highlighted-content code { diff --git a/src/pages/now/and-then/posts/01-19-2023.astro b/src/pages/now/and-then/posts/01-19-2023.astro index 0283116..905cc2b 100644 --- a/src/pages/now/and-then/posts/01-19-2023.astro +++ b/src/pages/now/and-then/posts/01-19-2023.astro @@ -68,7 +68,7 @@ const description = "I have been living now in Amsterdam for a little over a yea background: #4f39fa; padding: 1rem; border-radius: 0.4rem; - color: var(--color-bg); + color: var(--text-color-light); } .highlighted-content code { diff --git a/src/pages/now/and-then/posts/06-23-2023.astro b/src/pages/now/and-then/posts/06-23-2023.astro index 42e23e0..07ec23e 100644 --- a/src/pages/now/and-then/posts/06-23-2023.astro +++ b/src/pages/now/and-then/posts/06-23-2023.astro @@ -48,7 +48,7 @@ const description = "A project that aims to be a modern-day reading assistant" background: #4f39fa; padding: 1rem; border-radius: 0.4rem; - color: var(--color-bg); + color: var(--text-color-light); } .highlighted-content code { diff --git a/src/pages/now/and-then/posts/09-20-2022.astro b/src/pages/now/and-then/posts/09-20-2022.astro index c66f818..adaf0e3 100644 --- a/src/pages/now/and-then/posts/09-20-2022.astro +++ b/src/pages/now/and-then/posts/09-20-2022.astro @@ -53,7 +53,7 @@ const description = background: #4f39fa; padding: 1rem; border-radius: 0.4rem; - color: var(--color-bg); + color: var(--text-color-light); } .highlighted-content code { diff --git a/src/pages/social.astro b/src/pages/social.astro index c0723b4..dc3aeed 100644 --- a/src/pages/social.astro +++ b/src/pages/social.astro @@ -44,7 +44,7 @@ import Footer from "../components/Footer.astro"; background: #4f39fa; padding: 1rem; border-radius: 0.4rem; - color: var(--color-bg); + color: var(--text-color-light); } .highlighted-content code {