lewis/lewisdale.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add light mode to the site. Still to do: manual override

Browse Source
This commit is contained in:
Lewis Dale 2023-09-23 06:38:20 +01:00
parent 0a2fa39218
commit fa906877b2
4 changed files with 71 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -3,3 +3,4 @@ src/css/custom-props.css
_site _site
.DS_Store .DS_Store
.cache .cache
.idea

2
src/css/exceptions/blog-nav.css
View File

@ -1,4 +1,4 @@
.blog-nav { .blog-nav {
border-top: 1px solid var(--color-neutral-200); border-top: 1px solid var(--color-secondary);
padding-top: var(--space-size-2xs); padding-top: var(--space-size-2xs);
} }

2
src/css/exceptions/home.css
View File

@ -22,7 +22,7 @@
} }
time { time {
color: var(--color-zinc-300); color: var(--color-subtle);
display: block; display: block;
font-size: var(--text-size-s); font-size: var(--text-size-s);
font-style: italic; font-style: italic;

127
src/css/globals.css
View File

@ -1,94 +1,101 @@
body { :root {
background-color: var(--color-neutral-800); --color-primary: var(--color-neutral-200);
color: var(--color-neutral-200); --color-secondary: var(--color-neutral-800);
font-family: var(--font-family-mono); --color-decoration: var(--color-amber-200);
font-size: var(--text-size-s); --color-subtle: var(--color-zinc-400);
text-underline-offset: var(--space-size-4xs);
} }
@media (prefers-color-scheme: light) {
:root {
--color-secondary: var(--color-neutral-100);
--color-primary: var(--color-neutral-800);
--color-decoration: var(--color-amber-800);
--color-subtle: var(--color-zinc-500);
}
}
body {
background-color: var(--color-secondary);
color: var(--color-primary);
font-family: var(--font-family-mono);
font-size: var(--text-size-s);
text-underline-offset: var(--space-size-4xs);
}
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5 { h5 {
font-weight: bold; font-weight: bold;
line-height: 1.2; line-height: 1.2;
margin: 0; margin: 0;
} }
h1 { h1 {
font-size: var(--text-size-xl); font-size: var(--text-size-xl);
word-wrap: normal; word-wrap: normal;
text-underline-offset: var(--space-size-3xs); text-underline-offset: var(--space-size-3xs);
text-align: center; text-align: center;
line-height: 1.3; line-height: 1.3;
} }
h2 { h2 {
font-size: var(--text-size-l); font-size: var(--text-size-l);
text-underline-offset: var(--space-size-3xs); text-underline-offset: var(--space-size-3xs);
} }
h3 { h3 {
font-size: var(--text-size-m); font-size: var(--text-size-m);
text-underline-offset: var(--space-size-3xs); text-underline-offset: var(--space-size-3xs);
} }
a { a {
color: inherit;
text-decoration: underline;
&:hover {
text-decoration-color: var(--color-amber-200);
}
&:visited {
color: inherit; color: inherit;
} text-decoration: underline;
&[target="_blank"]::after { &:hover {
content: " \f08e"; text-decoration-color: var(--color-decoration);
font-family: "font awesome 6 free"; }
font-style: normal;
font-variant: normal; &:visited {
text-rendering: auto; color: inherit;
font-weight: 900; }
-webkit-font-smoothing: antialiased;
font-size: var(--text-size-xs); &[target="_blank"]::after {
vertical-align: super; content: " \f08e";
} font-family: "font awesome 6 free";
font-style: normal;
font-variant: normal;
text-rendering: auto;
font-weight: 900;
-webkit-font-smoothing: antialiased;
font-size: var(--text-size-xs);
vertical-align: super;
}
} }
nav { nav {
--vertical-spacing: var(--space-size-m); --vertical-spacing: var(--space-size-m);
font-size: var(--text-size-s); font-size: var(--text-size-s);
} }
header { header {
align-items: center; align-items: center;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
padding-top: var(--space-size-s); padding-top: var(--space-size-s);
padding-bottom: var(--space-size-s); padding-bottom: var(--space-size-s);
} }
p { p {
line-height: 1.6; line-height: 1.6;
max-width: 60ch; max-width: 60ch;
} }
footer { footer {
padding: var(--space-size-l) 0 var(--space-size-s); padding: var(--space-size-l) 0 var(--space-size-s);
width: 100%; width: 100%;
}
aside {
background-color: var(--color-slate-800);
border: 5px solid var(--color-slate-600);
border-radius: 10px;
height: fit-content;
max-width: 50ch;
padding: var(--space-size-xs);
} }