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

3
.gitignore vendored
View File

@ -2,4 +2,5 @@ node_modules
src/css/custom-props.css
_site
.DS_Store
.cache
.cache
.idea

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

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

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

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

127
src/css/globals.css
View File

@ -1,94 +1,101 @@
body {
background-color: var(--color-neutral-800);
color: var(--color-neutral-200);
font-family: var(--font-family-mono);
font-size: var(--text-size-s);
text-underline-offset: var(--space-size-4xs);
:root {
--color-primary: var(--color-neutral-200);
--color-secondary: var(--color-neutral-800);
--color-decoration: var(--color-amber-200);
--color-subtle: var(--color-zinc-400);
}
@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,
h2,
h3,
h4,
h5 {
font-weight: bold;
line-height: 1.2;
margin: 0;
font-weight: bold;
line-height: 1.2;
margin: 0;
}
h1 {
font-size: var(--text-size-xl);
word-wrap: normal;
text-underline-offset: var(--space-size-3xs);
text-align: center;
line-height: 1.3;
font-size: var(--text-size-xl);
word-wrap: normal;
text-underline-offset: var(--space-size-3xs);
text-align: center;
line-height: 1.3;
}
h2 {
font-size: var(--text-size-l);
text-underline-offset: var(--space-size-3xs);
font-size: var(--text-size-l);
text-underline-offset: var(--space-size-3xs);
}
h3 {
font-size: var(--text-size-m);
text-underline-offset: var(--space-size-3xs);
font-size: var(--text-size-m);
text-underline-offset: var(--space-size-3xs);
}
a {
color: inherit;
text-decoration: underline;
&:hover {
text-decoration-color: var(--color-amber-200);
}
&:visited {
color: inherit;
}
text-decoration: underline;
&[target="_blank"]::after {
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;
}
&:hover {
text-decoration-color: var(--color-decoration);
}
&:visited {
color: inherit;
}
&[target="_blank"]::after {
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 {
--vertical-spacing: var(--space-size-m);
font-size: var(--text-size-s);
--vertical-spacing: var(--space-size-m);
font-size: var(--text-size-s);
}
header {
align-items: center;
display: flex;
flex-direction: row;
justify-content: space-between;
padding-top: var(--space-size-s);
padding-bottom: var(--space-size-s);
align-items: center;
display: flex;
flex-direction: row;
justify-content: space-between;
padding-top: var(--space-size-s);
padding-bottom: var(--space-size-s);
}
p {
line-height: 1.6;
max-width: 60ch;
line-height: 1.6;
max-width: 60ch;
}
footer {
padding: var(--space-size-l) 0 var(--space-size-s);
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);
padding: var(--space-size-l) 0 var(--space-size-s);
width: 100%;
}