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"
},
"dependencies": {
"@fontsource/atkinson-hyperlegible": "^4.5.11",
"astro": "^2.1.0"
}
}

View file

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

View file

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

View file

@ -4,6 +4,7 @@ export interface Props {
}
const { title } = Astro.props;
import '@fontsource/atkinson-hyperlegible';
import Footer from "../components/Footer.astro";
import Navigation from "../components/Navigation.astro";
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 {
font-family: sans-serif;
font-family: "Atkinson Hyperlegible", sans-serif;
text-align: center;
}
section {
section,
footer {
max-width: 600px;
margin: auto;
}
p {
font-size: 20px;
}
a {
font-size: 20px;
font-size: 22px;
}
a {
font-size: 22px;
color: var(--link-color);
}
@media (prefers-color-scheme: light) {
body {
background-color: #eff1f5;
color: #1e1e2e;
background-color: var(--background-color);
color: var(--text-color)
}
a {
color: #1a1adc;
}
}
@media (prefers-color-scheme: dark) {
body {
background-color: #1e1e2e;
color: #cdd6f4;
}
a {
color: #8cb8ff;
}
hr {
color: var(--text-color);
}