ayo/ayco.io-astro
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: dark mode

Browse source
This commit is contained in:
Ayo 2024-03-31 22:36:02 +02:00
parent 776fe3481e
commit 0a89762a1d
13 changed files with 70 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/components/Card.astro
View file

@ -11,14 +11,10 @@ const { href, title, rel, body, newTab = false } = Astro.props;
--- ---
<li class="link-card"> <li class="link-card">
<a rel={rel || null} href={href} target={newTab ? '_blank' : null}> <a rel={rel || null} href={href} target={newTab ? "_blank" : null}>
<h2> <h2>
{title} {title}
{ {newTab ? <span>&nbsp;&nearr;</span> : <span>&nbsp;&rarr;</span>}
newTab
? (<span>&nbsp;&nearr;</span>)
: (<span>&nbsp;&rarr;</span>)
}
</h2> </h2>
<p> <p>
{body} {body}
@ -40,10 +36,10 @@ const { href, title, rel, body, newTab = false } = Astro.props;
list-style: none; list-style: none;
display: flex; display: flex;
padding: 0.15rem; padding: 0.15rem;
background-image: var(--link-gradient);
background-size: 400%; background-size: 400%;
border-radius: 0.5rem; border-radius: 0.5rem;
background-position: 100%; background-position: 100%;
background-image: var(--link-gradient);
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1); 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; text-decoration: none;
padding: 1em 1.3em; padding: 1em 1.3em;
border-radius: 0.35rem; border-radius: 0.35rem;
color: var(--text-color);
background-color: white; background-color: white;
opacity: 0.8; color: var(--text-color-dark);
} }
h2 { h2 {
@ -77,15 +72,15 @@ const { href, title, rel, body, newTab = false } = Astro.props;
background-position: 0; 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 { .link-card:is(:hover, :focus-within) h2 span {
will-change: transform; will-change: transform;
transform: translateX(2px); transform: translateX(2px);
} }
@media (prefers-color-scheme: dark) {
.link-card > a {
background-color: var(--bg-dark);
color: var(--text-color-light);
}
}
</style> </style>

10
src/components/Footer.astro
View file

@ -1,11 +1,17 @@
--- ---
const year = new Date().getFullYear(); const year = new Date().getFullYear();
--- ---
<footer> <footer>
<ul style="list-style:none"> <ul style="list-style:none">
<li>&#169; 2022-{year} <strong>Ayo Ayco</strong>. All Rights Reserved</li> <li>&#169; 2022-{year} <strong>Ayo Ayco</strong>. All Rights Reserved</li>
<li>This website <a href="https://ayos.blog/stopped-tracking-on-my-sites">does not track users</a></li> <li>
<li>See the <a href="https://ayco.io/sh/ayco.io-astro/tree">source code</a></li> This website <a href="https://ayos.blog/stopped-tracking-on-my-sites"
>does not track users</a>
</li>
<li>
See the <a href="https://ayco.io/sh/ayco.io-astro/tree">source code</a>
</li>
</ul> </ul>
</footer> </footer>

2
src/components/Nav.astro
View file

@ -43,7 +43,7 @@ if (Astro.url.pathname !== "/") {
nav a { nav a {
display: inline-block; display: inline-block;
text-decoration: underline; text-decoration: underline;
color: var(--color-bg); color: var(--text-color-light);
padding: 0.5em 1em; padding: 0.5em 1em;
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
} }

2
src/constants/links.ts
View file

@ -17,7 +17,7 @@ export const links: Link[] = [
text: "social" text: "social"
}, },
{ {
url: "https://metapixl.com/@ayo", url: "https://metapixl.com/i/portfolio/ayo",
icon: "image", icon: "image",
text: "photos" text: "photos"
}, },

57
src/layouts/Layout.astro
View file

@ -9,10 +9,9 @@ export interface Props {
} }
const { title, description } = Astro.props; const { title, description } = Astro.props;
--- ---
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<Head title={title} description={description} /> <Head title={title} description={description} />
@ -22,15 +21,13 @@ const { title, description } = Astro.props;
<style> <style>
:root { :root {
--content-width: 700px; --content-width: 700px;
--font-size-sm: clamp(0.75rem, 0.20vw + 0.66rem, 0.8rem); --font-size-sm: clamp(0.75rem, 0.2vw + 0.66rem, 0.8rem);
--font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem); --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
--font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem); --font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
--font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem); --font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
--color-text: hsl(12, 5%, 4%);
--color-bg: hsl(10, 21%, 95%);
--color-border: hsl(17, 24%, 90%); --color-border: hsl(17, 24%, 90%);
--color-link: var(--color-brand-blue-2); --color-link: var(--color-brand-blue-3);
--color-brand-blue-1: #3054bf; --color-brand-blue-1: #3054bf;
--color-brand-blue-2: #203880; --color-brand-blue-2: #203880;
@ -41,13 +38,29 @@ const { title, description } = Astro.props;
--color-brand-complement: orange; --color-brand-complement: orange;
--ayo-gradient: linear-gradient(45deg, #3054bf, #416fff); --ayo-gradient: linear-gradient(45deg, #3054bf, #416fff);
--text-color-dark: black;
--text-color-light: #f8f9fa;
--bg-dark: #343a40;
--bg-darker: #212529;
--bg-darkest: #000;
} }
html, body, * { html,
body,
* {
font-family: system-ui, sans-serif; font-family: system-ui, sans-serif;
font-size: var(--font-size-base); font-size: var(--font-size-base);
color: var(--color-text); color: var(--text-color-dark);
background-color: var(--color-bg); background-color: var(--text-color-light);
}
@media (prefers-color-scheme: dark) {
html,
body,
* {
background: var(--bg-darker);
color: var(--text-color-light);
}
} }
@keyframes pulse { @keyframes pulse {
@ -77,13 +90,15 @@ const { title, description } = Astro.props;
} }
code { code {
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, font-family:
DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace; Menlo,
} Monaco,
Lucida Console,
a { Liberation Mono,
font-weight: bold; DejaVu Sans Mono,
color: var(--color-link); Bitstream Vera Sans Mono,
Courier New,
monospace;
} }
p, p,
@ -105,6 +120,16 @@ const { title, description } = Astro.props;
background-position-y: 100%; background-position-y: 100%;
border-radius: 0.4rem; border-radius: 0.4rem;
} }
a {
font-weight: bold;
}
@media (prefers-color-scheme: dark) {
a {
color: var(--color-brand-complement);
}
}
</style> </style>
</body> </body>
</html> </html>

1
src/layouts/reset.css
View file

@ -23,6 +23,7 @@ THANKS TO JOSH COMEAU FOR HIS CUSTOM CSS RESET
html, html,
body { body {
height: 100%; height: 100%;
background: #fff;
} }
/* /*
Typographic tweaks! Typographic tweaks!

2
src/pages/404.astro
View file

@ -65,7 +65,7 @@ const description = "Have you tried turning it off and on again?";
max-width: var(--content-width); max-width: var(--content-width);
font-weight: normal; font-weight: normal;
font-size: (--font-size-lg); font-size: (--font-size-lg);
color: var(--color-bg); color: var(--text-color-light);
} }
.now-wrapper { .now-wrapper {

2
src/pages/index.astro
View file

@ -111,7 +111,7 @@ import { stuff } from '../constants/stuff';
max-width: var(--content-width); max-width: var(--content-width);
font-weight: normal; font-weight: normal;
font-size: var(--font-size-lg); font-size: var(--font-size-lg);
color: var(--color-bg); color: var(--text-color-light);
} }
.highlighted-section__content__profile-picture { .highlighted-section__content__profile-picture {

2
src/pages/now/and-then/index.astro
View file

@ -41,7 +41,7 @@ const title = "Previously...";
background: #4f39fa; background: #4f39fa;
padding: 1rem; padding: 1rem;
border-radius: 0.4rem; border-radius: 0.4rem;
color: var(--color-bg); color: var(--text-color-light);
} }
.highlighted-content code { .highlighted-content code {

2
src/pages/now/and-then/posts/01-19-2023.astro
View file

@ -68,7 +68,7 @@ const description = "I have been living now in Amsterdam for a little over a yea
background: #4f39fa; background: #4f39fa;
padding: 1rem; padding: 1rem;
border-radius: 0.4rem; border-radius: 0.4rem;
color: var(--color-bg); color: var(--text-color-light);
} }
.highlighted-content code { .highlighted-content code {

2
src/pages/now/and-then/posts/06-23-2023.astro
View file

@ -48,7 +48,7 @@ const description = "A project that aims to be a modern-day reading assistant"
background: #4f39fa; background: #4f39fa;
padding: 1rem; padding: 1rem;
border-radius: 0.4rem; border-radius: 0.4rem;
color: var(--color-bg); color: var(--text-color-light);
} }
.highlighted-content code { .highlighted-content code {

2
src/pages/now/and-then/posts/09-20-2022.astro
View file

@ -53,7 +53,7 @@ const description =
background: #4f39fa; background: #4f39fa;
padding: 1rem; padding: 1rem;
border-radius: 0.4rem; border-radius: 0.4rem;
color: var(--color-bg); color: var(--text-color-light);
} }
.highlighted-content code { .highlighted-content code {

2
src/pages/social.astro
View file

@ -44,7 +44,7 @@ import Footer from "../components/Footer.astro";
background: #4f39fa; background: #4f39fa;
padding: 1rem; padding: 1rem;
border-radius: 0.4rem; border-radius: 0.4rem;
color: var(--color-bg); color: var(--text-color-light);
} }
.highlighted-content code { .highlighted-content code {