Add Hyperlegible and add a seperator to the footer

This commit is contained in:
Fries 2023-05-01 22:33:45 -07:00
parent 03946ad938
commit 9501067414
5 changed files with 41 additions and 26 deletions

View file

@ -10,6 +10,7 @@
"astro": "astro" "astro": "astro"
}, },
"dependencies": { "dependencies": {
"@fontsource/atkinson-hyperlegible": "^4.5.11",
"astro": "^2.1.0" "astro": "^2.1.0"
} }
} }

View file

@ -1,9 +1,11 @@
lockfileVersion: 5.4 lockfileVersion: 5.4
specifiers: specifiers:
'@fontsource/atkinson-hyperlegible': ^4.5.11
astro: ^2.1.0 astro: ^2.1.0
dependencies: dependencies:
'@fontsource/atkinson-hyperlegible': 4.5.11
astro: 2.3.0 astro: 2.3.0
packages: packages:
@ -539,6 +541,10 @@ packages:
dev: false dev: false
optional: true optional: true
/@fontsource/atkinson-hyperlegible/4.5.11:
resolution: {integrity: sha512-ounnhVVjseNci+G0dGPBwUY7RYM2h8FsfyhzvpUnQYKeiuUcRtGahCswnrKPrvSXNRCl1uqnRSxP3ahJ4miYIQ==}
dev: false
/@jridgewell/gen-mapping/0.3.3: /@jridgewell/gen-mapping/0.3.3:
resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==} resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==}
engines: {node: '>=6.0.0'} engines: {node: '>=6.0.0'}

View file

@ -1,3 +1,4 @@
<footer aria-label="my websites footer"> <footer aria-label="my websites footer">
<hr>
<a href="https://git.solarpunk.moe/fries/fries-website">Source Code</a> <a href="https://git.solarpunk.moe/fries/fries-website">Source Code</a>
</footer> </footer>

View file

@ -4,6 +4,7 @@ export interface Props {
} }
const { title } = Astro.props; const { title } = Astro.props;
import '@fontsource/atkinson-hyperlegible';
import Footer from "../components/Footer.astro"; import Footer from "../components/Footer.astro";
import Navigation from "../components/Navigation.astro"; import Navigation from "../components/Navigation.astro";
import "../styles/global.css"; import "../styles/global.css";

View file

@ -1,38 +1,44 @@
@media (prefers-color-scheme: light) {
:root {
--background-color: #eff1f5;
--text-color: #1e1e2e;
--link-color: #1a1adc;
}
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: #1e1e2e;
--text-color: #cdd6f4;
--link-color: #8cb8ff;
}
}
body { body {
font-family: sans-serif; font-family: "Atkinson Hyperlegible", sans-serif;
text-align: center; text-align: center;
} }
section { section,
footer {
max-width: 600px; max-width: 600px;
margin: auto; margin: auto;
} }
p { p {
font-size: 20px; font-size: 22px;
}
a {
font-size: 20px;
}
@media (prefers-color-scheme: light) {
body {
background-color: #eff1f5;
color: #1e1e2e;
}
a {
color: #1a1adc;
}
} }
@media (prefers-color-scheme: dark) { a {
body { font-size: 22px;
background-color: #1e1e2e; color: var(--link-color);
color: #cdd6f4; }
}
body {
a { background-color: var(--background-color);
color: #8cb8ff; color: var(--text-color)
} }
hr {
color: var(--text-color);
} }