Mirror of my GitHub Pages site
www.spenser.black/
Set up basic layout
authored by
Spenser Black
and committed by
GitHub
(Jun 25, 2026, 1:07 PM UTC)
b7a00132
14546511
+116
-14
+4
src/components/ExternalLink.astro
+4
src/components/ExternalLink.astro
+21
src/layouts/BaseLayout.astro
+21
src/layouts/BaseLayout.astro
···
1
+
---
2
+
import Footer from "../components/Footer.astro";
3
+
import "../styles/global.css";
4
+
const { title } = Astro.props;
5
+
---
6
+
7
+
<html lang="en">
8
+
<head>
9
+
<meta charset="utf-8" />
10
+
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
11
+
<meta name="viewport" content="width=device-width" />
12
+
<meta name="generator" content={Astro.generator} />
13
+
<title>{title}</title>
14
+
</head>
15
+
16
+
<body>
17
+
<h1>{title}</h1>
18
+
<slot />
19
+
<Footer />
20
+
</body>
21
+
</html>
+5
-14
src/pages/index.astro
+5
-14
src/pages/index.astro
···
1
1
---
2
-
2
+
import BaseLayout from "../layouts/BaseLayout.astro";
3
+
const title = "Homepage";
3
4
---
4
5
5
-
<html lang="en">
6
-
<head>
7
-
<meta charset="utf-8" />
8
-
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
9
-
<link rel="icon" href="/favicon.ico" />
10
-
<meta name="viewport" content="width=device-width" />
11
-
<meta name="generator" content={Astro.generator} />
12
-
<title>Astro</title>
13
-
</head>
14
-
<body>
15
-
<h1>Astro</h1>
16
-
</body>
17
-
</html>
6
+
<BaseLayout title={title}>
7
+
<p>Hello, world!</p>
8
+
</BaseLayout>
+53
src/styles/global.css
+53
src/styles/global.css
···
1
+
:root {
2
+
--dark-main-bg: #333;
3
+
--dark-main-fg: #EEE;
4
+
--dark-link: #FC4;
5
+
--dark-link-visited: #FA4;
6
+
--dark-link-hover: #FD5;
7
+
8
+
--light-main-bg: #EEE;
9
+
--light-main-fg: #333;
10
+
--light-link: #E64;
11
+
--light-link-visited: #E84;
12
+
--light-link-hover: #D60;
13
+
14
+
--main-bg: var(--dark-main-bg);
15
+
--main-fg: var(--dark-main-fg);
16
+
--link: var(--dark-link);
17
+
--link-visited: var(--dark-link-visited);
18
+
--link-hover: var(--dark-link-visited);
19
+
20
+
font-family: Arial, Helvetica, sans-serif;
21
+
22
+
color: var(--main-fg);
23
+
background-color: var(--main-bg);
24
+
}
25
+
26
+
/** NOTE
27
+
* Some people disable all types of fingerprinting in their browser, which disables dark/light
28
+
* mode detection. I'm just assuming those people prefer dark mode, and making that the default
29
+
* when it's unknown.
30
+
*/
31
+
@media (prefers-color-scheme: light) {
32
+
:root {
33
+
--main-bg: var(--light-main-bg);
34
+
--main-fg: var(--light-main-fg);
35
+
--link: var(--light-link);
36
+
--link-visited: var(--light-link-visited);
37
+
--link-hover: var(--light-link-hover);
38
+
}
39
+
}
40
+
41
+
* {
42
+
transition: color 0.25s ease-out;
43
+
}
44
+
45
+
a {
46
+
color: var(--link);
47
+
}
48
+
a:visited {
49
+
color: var(--link-visited);
50
+
}
51
+
a:hover {
52
+
color: var(--link-hover);
53
+
}