Skip to content

Commit 14a38f9

Browse files
jsardellojsardello
committed
Add styling, layout, and fonts
1 parent 1436d4f commit 14a38f9

File tree

10 files changed

+167
-32
lines changed

10 files changed

+167
-32
lines changed

‎public/fonts/Oswald-Bold.ttf‎

85.5 KB
Binary file not shown.

‎public/fonts/Spectral-Regular.ttf‎

250 KB
Binary file not shown.

‎src/components/Header.astro‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
import Navigation from './Navigation.astro';
3+
---
4+
<header>
5+
<nav>
6+
<Navigation />
7+
</nav>
8+
</header>

‎src/components/Navigation.astro‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
---
3+
<div class="nav-links">
4+
<a href="/">Home</a>
5+
<a href="/blog/">Blog</a>
6+
</div>

‎src/layouts/BaseLayout.astro‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
import Header from '../components/Header.astro';
3+
import '../styles/global.css';
4+
const { pageTitle } = Astro.props;
5+
---
6+
<html lang="en">
7+
<head>
8+
<meta charset="utf-8" />
9+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
10+
<meta name="viewport" content="width=device-width" />
11+
<meta name="generator" content={Astro.generator} />
12+
<title>{pageTitle}</title>
13+
</head>
14+
<body>
15+
<Header />
16+
<h1>{pageTitle}</h1>
17+
<slot
18+
</body>
19+
</html>

‎src/layouts/MarkdownPostLayout.astro‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
import '../styles/global.css';
3+
4+
const { frontmatter } = Astro.props;
5+
---
6+
<meta charset="utf-8" />
7+
<h1>{frontmatter.title}</h1>
8+
<p>Published on: {frontmatter.pubDate.toString().slice(0,10)}</p>
9+
<p>Written by {frontmatter.author}</p>
10+
<slot />

‎src/pages/blog.astro‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
11
---
2+
import BaseLayout from '../layouts/BaseLayout.astro';
23
3-
---
4+
const pageTitle = "Blog";
45
5-
<html lang="en">
6-
<head>
7-
<meta charset="utf-8"/>
8-
<link rel="icon" type="image/svg+xml" href="/favicon.svg"/>
9-
<meta name="viewport" content="width=device-width"/>
10-
<meta name="generator" content={Astro.generator}/>
11-
<title>Astro</title>
12-
</head>
6+
---
7+
<BaseLayout pageTitle={pageTitle}>
138
<body>
149

15-
<h1>Blog</h1>
1610
<p>This is where I drop posts about my personal life, what I'm thinking about, and how its shaping my universe.</p>
1711
<p>I think this would be a good place to comment on different world building tidbits that I enjoy. I can muse on topics in a longer format or maybe even drop a book review here and there.</p>
18-
</body>
12+
13+
<ul>
14+
<li><a href="/posts/tidbit-1/">Tidbit 1 - My First Blogpost</a></li>
15+
</ul>
16+
</body>
17+
</BaseLayout>

‎src/pages/index.astro‎

Lines changed: 12 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,17 @@
11
---
2+
import '../styles/global.css';
3+
import BaseLayout from "../layouts/BaseLayout.astro";
24
5+
const pageTitle = "My Universe";
36
---
7+
<BaseLayout pageTitle={pageTitle}>
8+
<body>
49

5-
<html lang="en">
6-
<head>
7-
<meta charset="utf-8"/>
8-
<link rel="icon" type="image/svg+xml" href="/favicon.svg"/>
9-
<meta name="viewport" content="width=device-width"/>
10-
<meta name="generator" content={Astro.generator}/>
11-
<title>Astro</title>
12-
</head>
13-
<body>
14-
<a href="/blog">Blog</a>
10+
<p>I grew up with a love for epic fantasy world building. As a kid I was captured by the magic, history, and stories in Harry Potter, Eragon, and Warcraft 3.</p>
11+
<p>Later I grew to appreciate the masters of the world building craft. The Lord of the Rings, The Cosmere, The Wheel of Time, and The Warhammer Universe.</p>
12+
<p>In the creation story in the book of Genesis, God created man in his image. God spoke and it was created. All of creation was accomplished with words. As beings created in his image we can use our words to create our own universes as well.</p>
1513

16-
17-
<h1>My Universe</h1>
18-
19-
<p>I've grown up with a love for epic fantasy world building. As a kid I was captured by the magic, history, and stories in Harry Potter, Eragon, and Warcraft 3</p>
20-
<p>Later I grew to appreciate the masters of the world building craft. Lord of the Rings, The Cosmere, The Wheel of Time, and The Warhammer Universe</p>
21-
<p>In the creation story in the book of Genesis, God created man in his image. God spoke and it was created. All of creation was accomplished with words. As beings created in his image we can use our words to create our own universes as well</p>
22-
23-
<p>Along the way I've picked up my favorite pieces, added my own ideas, and crafted my own characters and stories. This site is the place where my fantasy universe will take shape</p>
24-
<p></p>
25-
</body>
26-
</html>
14+
<p>Along the way I've picked up my favorite pieces, added my own ideas, and crafted my own characters and stories. This site is the place where my fantasy universe will take shape.</p>
15+
<p></p>
16+
</body>
17+
</BaseLayout>

‎src/pages/posts/tidbit-1.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
---
2+
layout: ../../layouts/MarkdownPostLayout.astro
3+
title: 'Tidbit 1 - My First Blog Post'
4+
pubDate: '2025-08-01'
5+
description: 'Just a little tidbit from my most recently finished book; Liar\''s Oath'
6+
author: 'Jackson Sardello'
7+
---
8+
9+
This is my first blog post! I just finished reading *Liar's Oath* by *Elizabeth Moon* and I wanted to share a tidbit of world building that I found enjoyable.
10+
11+
Magic in Moon's universe is explained super in-depth. The characters themselves live in an era where magical training has largely been lost. In addition, Gird (the main character of the first prequel) has somehow ascended into some form of divinity and his power is just starting to be utilized by his followers.
12+
13+
The tidbit I find interesting is how magic is both a genetic resource and also a gift given to by the gods. Peasants have long has a splinter of magic in the form of being able to take away pain and transfer it to stone. "Mageborn" have their magical gifting transferred along their bloodlines. Also, there might be a distinction between the regular mageborn and the "royal magery" wielded by the king and his bloodline.
14+
15+
This is contrasted against the followers of Gird, and the priests of other gods who seem to have their power granted to them based on their faithfulness and devotion to their god.
16+
17+
I don't think I've seen the two different origins of magic blended into one world before. And there's your tidbit!

‎src/styles/global.css‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
html {
2+
background-color: #f1f5f9;
3+
font-family: sans-serif;
4+
}
5+
6+
@font-face {
7+
font-family: 'Spectral';
8+
src: url('/fonts/Spectral-Regular.ttf') format('truetype');
9+
font-weight: normal;
10+
font-style: normal;
11+
font-display: swap;
12+
}
13+
14+
@font-face {
15+
font-family: 'League Gothic Condensed';
16+
src: url('/fonts/Oswald-Bold.ttf') format('truetype');
17+
font-weight: normal;
18+
font-style: normal;
19+
font-display: swap;
20+
}
21+
22+
h1 {
23+
margin: 1rem 0;
24+
font-size: 2.5rem;
25+
font-family: 'League Gothic Condensed', sans-serif;
26+
}
27+
p {
28+
font-family: 'Spectral', serif;
29+
}
30+
31+
body {
32+
margin: 0 auto;
33+
width: 100%;
34+
max-width: 80ch;
35+
padding: 1rem;
36+
line-height: 1.5;
37+
}
38+
39+
* {
40+
box-sizing: border-box;
41+
}
42+
43+
.nav-links {
44+
width: 100%;
45+
top: 5rem;
46+
left: 48px;
47+
background-color: #ff9776;
48+
display: none;
49+
margin: 0;
50+
}
51+
52+
.nav-links a {
53+
display: block;
54+
text-align: center;
55+
padding: 10px 0;
56+
text-decoration: none;
57+
font-size: 1.2rem;
58+
font-weight: bold;
59+
text-transform: uppercase;
60+
}
61+
62+
.nav-links a:hover,
63+
.nav-links a:focus {
64+
background-color: #ff9776;
65+
}
66+
67+
.expanded {
68+
display: unset;
69+
}
70+
71+
@media screen and (min-width: 636px) {
72+
.nav-links {
73+
margin-left: 5em;
74+
display: block;
75+
position: static;
76+
width: auto;
77+
background: none;
78+
}
79+
80+
.nav-links a {
81+
display: inline-block;
82+
padding: 15px 20px;
83+
}
84+
85+
}

0 commit comments

Comments
 (0)