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">
<a rel={rel || null} href={href} target={newTab ? '_blank' : null}>
<a rel={rel || null} href={href} target={newTab ? "_blank" : null}>
<h2>
{title}
{
newTab
? (<span>&nbsp;&nearr;</span>)
: (<span>&nbsp;&rarr;</span>)
}
{newTab ? <span>&nbsp;&nearr;</span> : <span>&nbsp;&rarr;</span>}
</h2>
<p>
{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);
}
}
</style>

10
src/components/Footer.astro
View file

@ -1,11 +1,17 @@
---
const year = new Date().getFullYear();
---
<footer>
<ul style="list-style:none">
<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>See the <a href="https://ayco.io/sh/ayco.io-astro/tree">source code</a></li>
<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>
</footer>

2
src/components/Nav.astro
View file

@ -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);
}

2
src/constants/links.ts
View file

@ -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"
},

57
src/layouts/Layout.astro
View file

@ -9,10 +9,9 @@ export interface Props {
}
const { title, description } = Astro.props;
---
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<Head title={title} description={description} />
@ -22,15 +21,13 @@ const { title, description } = Astro.props;
<style>
:root {
--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-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
--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-link: var(--color-brand-blue-2);
--color-link: var(--color-brand-blue-3);
--color-brand-blue-1: #3054bf;
--color-brand-blue-2: #203880;
@ -41,13 +38,29 @@ const { title, description } = Astro.props;
--color-brand-complement: orange;
--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-size: var(--font-size-base);
color: var(--color-text);
background-color: var(--color-bg);
color: var(--text-color-dark);
background-color: var(--text-color-light);
}
@media (prefers-color-scheme: dark) {
html,
body,
* {
background: var(--bg-darker);
color: var(--text-color-light);
}
}
@keyframes pulse {
@ -77,13 +90,15 @@ const { title, description } = Astro.props;
}
code {
font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
}
a {
font-weight: bold;
color: var(--color-link);
font-family:
Menlo,
Monaco,
Lucida Console,
Liberation Mono,
DejaVu Sans Mono,
Bitstream Vera Sans Mono,
Courier New,
monospace;
}
p,
@ -105,6 +120,16 @@ const { title, description } = Astro.props;
background-position-y: 100%;
border-radius: 0.4rem;
}
a {
font-weight: bold;
}
@media (prefers-color-scheme: dark) {
a {
color: var(--color-brand-complement);
}
}
</style>
</body>
</html>

1
src/layouts/reset.css
View file

@ -23,6 +23,7 @@ THANKS TO JOSH COMEAU FOR HIS CUSTOM CSS RESET
html,
body {
height: 100%;
background: #fff;
}
/*
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);
font-weight: normal;
font-size: (--font-size-lg);
color: var(--color-bg);
color: var(--text-color-light);
}
.now-wrapper {

2
src/pages/index.astro
View file

@ -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 {

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

@ -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 {

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;
padding: 1rem;
border-radius: 0.4rem;
color: var(--color-bg);
color: var(--text-color-light);
}
.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;
padding: 1rem;
border-radius: 0.4rem;
color: var(--color-bg);
color: var(--text-color-light);
}
.highlighted-content code {

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

@ -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 {

2
src/pages/social.astro
View file

@ -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 {