Skip to content

Commit acbcdbe

Browse files
sbaumohlsbaumohl
committed
Styling update
1 parent dfe6d72 commit acbcdbe

7 files changed

Lines changed: 107 additions & 94 deletions

File tree

‎README.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
# Sbaumohl Personal Website
22

3-
Built with `npm create astro@latest -- --template blog`
3+
This is my personal website I've ship-of-theseus'd into an [Astro](https://astro.build/) and [Tailwind](https://tailwindcss.com/) website. I try to keep the style simple and minimalist, focusing more on the content over the style of the site. The site uses [Source Serif 4](`https://fonts.google.com/specimen/Source+Serif+4`).
44

5-
# Astro Starter Kit: Blog
5+
I originally built this using Gatsby and Bootstrap, which then became an Angular website, which then briefly became a NextJS website before I transitioned to Astro. Much of the git history has been annihilated simply because no one needs to see high-school-me's idea of what a good website looked like.
66

7-
```sh
8-
npm create astro@latest -- --template blog
9-
```
7+
## Running locally
8+
9+
Clone the repository, run `npm i` and then run `npm run dev`.

‎astro.config.mjs‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,4 +37,5 @@ export default defineConfig({
3737
vite: {
3838
plugins: [tailwindcss()],
3939
},
40-
});
40+
});
41+

‎src/components/Footer.astro‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,25 @@ import { NAME } from "../consts";
33
import { Icon } from "astro-icon/components";
44
const today = new Date();
55
6-
6+
const iconStyles = "text-darker-500 hover:text-darker transition-colors";
77
---
88

9-
<footer class="sm:text-lg font-semibold mt-4 px-1 py-4 text-center">
10-
<div class="flex flex-row items-center justify-center gap-x-3 mb-3">
11-
<a href="https://www.linkedin.com/in/sam-baumohl09/" class="text-darker-500 hover:text-darker transition-colors" aria-label="LinkedIn profile">
12-
<Icon name="linkedin" class="w-8 h-8" />
9+
<footer class="sm:text-lg font-semibold mt-12 px-4 py-8 text-center border-t border-darker-200">
10+
<div class="flex flex-row items-center justify-center gap-x-6 mb-6">
11+
<a href="https://www.linkedin.com/in/sam-baumohl09/" target="_blank" class={iconStyles} aria-label="LinkedIn profile">
12+
<Icon name="linkedin" class="w-9 h-9" />
1313
</a>
14-
<a href="https://github.com/sbaumohl/" class="text-darker-500 hover:text-darker transition-colors" aria-label="GitHub profile">
15-
<Icon name="github" class="w-8 h-8" />
14+
<a href="https://github.com/sbaumohl/" target="_blank" class={iconStyles} aria-label="GitHub profile">
15+
<Icon name="github" class="w-9 h-9" />
1616
</a>
17-
<button onclick="email_modal.showModal()" class="text-darker-500 hover:text-darker transition-colors" aria-label="Email address">
18-
<Icon name="mail" class="w-8 h-8" />
17+
<button onclick="email_modal.showModal()" class={iconStyles} aria-label="Email address">
18+
<Icon name="mail" class="w-9 h-9" />
1919
</button>
20-
<a href="/feed.xml" class="text-darker-500 hover:text-darker transition-colors" aria-label="RSS feed">
21-
<Icon name="square-rss-solid-full" class="w-8 h-8" />
20+
<a href="/feed.xml" class={iconStyles} target="_blank" aria-label="RSS feed">
21+
<Icon name="square-rss-solid-full" class="w-9 h-9" />
2222
</a>
2323
</div>
24-
<div>
24+
<div class="text-darker-600">
2525
&copy; {today.getFullYear()}
2626
{" " + NAME}. All rights reserved.
2727
</div>

‎src/content/blog/football-problem.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ pubDate: "Oct 1 2025"
66

77
I was eating some godforsaken amalgamation of food I call dinner when one of my housemates came downstairs to our shared living room and said something that piqued my interest.
88

9-
“The Bills beat the Chiefs. The Circle of Suck has been completed,” he stated to the three of us eating and/or watching TV. After asking for some elaboration, he explained that it was the phenomenon in a sports league where if team A beats Team B, team B beats Team C, and then Team C beats Team A, where every team in the league has been included in this circle, then it is called a completed Circle of Suck :tm: because, well, everyone sucks. After thinking about what this implies, I wondered whether it was common for a Circle of Suck to be completed in a regular NFL season, and which seasons saw a completed circle.
9+
“The Bills beat the Chiefs. The Circle of Suck has been completed,” he stated to the three of us eating and/or watching TV. After asking for some elaboration, he explained that it was the phenomenon in a sports league where if team A beats Team B, team B beats Team C, and then Team C beats Team A, where every team in the league has been included in this circle, then it is called a completed Circle of Suck™ because, well, everyone sucks. After thinking about what this implies, I wondered whether it was common for a Circle of Suck to be completed in a regular NFL season, and which seasons saw a completed circle.
1010

1111
# The Problem
1212

‎src/layouts/BlogPost.astro‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,10 @@ const processedHeadings = headings.filter(h => h.depth <= 3).map(h => {
3131
))}
3232
</div>
3333
</div>
34-
<div class="mx-auto max-w-[750px] text-wrap mb-8 col-span-10 md:col-span-6">
34+
<div class="mx-auto max-w-[750px] text-wrap mb-8 col-span-10 md:col-span-6 md:px-0 px-4">
3535
<a
3636
href="/"
37-
class="inline-flex items-center text-text-400 hover:text-text font-normal text-base sm:text-lg group transition-colors duration-150 ease-in-out pl-3 sm:pl-4"
37+
class="inline-flex items-center text-darker-600 hover:text-darker-900 font-normal text-base sm:text-lg group transition-colors"
3838
aria-label="Go back to the previous page"
3939
>
4040
<Icon
@@ -44,13 +44,12 @@ const processedHeadings = headings.filter(h => h.depth <= 3).map(h => {
4444
/>
4545
<span class="hover:underline">Back</span>
4646
</a>
47-
<div class="p-4">
48-
<h1 class="text-xl sm:text-4xl font-semibold">{title}</h1>
49-
<h2 class="sm:text-lg font-semibold mt-4">
47+
<div class="my-8 sm:my-12">
48+
<h1 class="text-4xl sm:text-6xl mb-6 font-bold tracking-tight">{title}</h1>
49+
<p class="mb-3 text-base sm:text-lg leading-relaxed">
5050
{description}
51-
</h2>
52-
<hr class="mt-1 mb-2 border-black" />
53-
<div class="text-xs sm:text-lg mb-6 flex flex-row gap-x-2">
51+
</p>
52+
<div class="text-sm text-darker-600 mb-6 flex flex-row gap-x-2">
5453
<span>Published <FormattedDate date={pubDate} /></span
5554
>&middot;
5655
{
@@ -66,7 +65,7 @@ const processedHeadings = headings.filter(h => h.depth <= 3).map(h => {
6665
<span>{author}</span>
6766
</div>
6867
<article
69-
class="prose text-black prose-neutral prose-sm sm:prose-base max-w-none text-wrap"
68+
class="prose text-black max-w-none text-wrap"
7069
>
7170
<slot />
7271
</article>

‎src/pages/index.astro‎

Lines changed: 58 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
---
22
import BasePage from "../layouts/BasePage.astro";
3-
import { Icon } from "astro-icon/components";
43
import CustomLink from "../components/CustomLink.astro";
54
import { getCollection } from "astro:content";
65
import FormattedDate from "../components/FormattedDate.astro";
@@ -9,84 +8,83 @@ const posts = (await getCollection("blog")).sort(
98
(a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf(),
109
);
1110
12-
const subheaderStyles = "text-2xl sm:text-4xl mb-4 sm:mt-12 mt-6 inline-flex";
1311
---
1412

1513
<BasePage>
1614
<div
17-
class="sm:mt-20 block mx-auto max-w-[750px] text-wrap sm:text-lg md:px-0 px-3"
15+
class="sm:mt-20 block mx-auto max-w-[750px] text-wrap sm:text-lg md:px-0 px-4"
1816
>
19-
<h1 class="text-4xl sm:text-5xl my-4 font-semibold">Sam Baumohl</h1>
20-
<p class="mb-1">
21-
I am a student at the University of Wisconsin-Madison studying
22-
Computer Sciences and Mathematics. I'm interested in software
23-
development, machine learning/AI, and technology policy. I like to
24-
read, solve problems, and work on various side projects, some of
25-
which I'll post here. Right now, I'm:
26-
</p>
27-
<ul class="ml-1 list-disc list-inside">
28-
<li>
29-
trying to survive the <a
30-
class="underline"
31-
href="/blog/uw-madison-courses/">CS major</a
32-
>
33-
</li>
34-
<li>
35-
a Coordinator at Madison's&nbsp;<CustomLink
36-
href="https://www.upl.cs.wisc.edu/"
37-
>Undergraduate Project Lab</CustomLink
38-
>
39-
</li>
40-
<li>
41-
a passionate member of the&nbsp;<CustomLink
42-
href="https://waisi.org/"
43-
>Wisconsin AI Safety Initiative (WAISI)</CustomLink
44-
>
45-
</li>
46-
</ul>
47-
<h2 class={subheaderStyles}>Blog Posts</h2>
48-
<section class="flex flex-col gap-8 mb-16 p-1">
17+
<div class="my-8 sm:my-12">
18+
<h1 class="text-5xl sm:text-6xl mb-6 font-bold tracking-tight">Sam Baumohl</h1>
19+
<p class="mb-3 text-base sm:text-lg leading-relaxed">
20+
I am a student at the University of Wisconsin-Madison studying
21+
Computer Sciences and Mathematics. I'm interested in software
22+
development, machine learning/AI, and technology policy. I like to
23+
read, solve problems, and work on various side projects, some of
24+
which I'll post here. Right now, I'm:
25+
</p>
26+
<ul class="ml-6 text-base sm:text-lg list-disc">
27+
<li>
28+
trying to survive the <a
29+
class="underline hover:text-darker-900 transition-colors"
30+
href="/blog/uw-madison-courses/">CS major</a
31+
>
32+
</li>
33+
<li>
34+
a Coordinator at Madison's&nbsp;<CustomLink
35+
href="https://www.upl.cs.wisc.edu/"
36+
>Undergraduate Project Lab</CustomLink
37+
>
38+
</li>
39+
<li>
40+
a passionate member of the&nbsp;<CustomLink
41+
href="https://waisi.org/"
42+
>Wisconsin AI Safety Initiative (WAISI)</CustomLink
43+
>
44+
</li>
45+
</ul>
46+
</div>
47+
<h2 class="text-3xl sm:text-4xl mb-8 sm:mb-10 font-bold tracking-tight sm:mt-16 mt-10">Blog Posts</h2>
48+
<section class="flex flex-col gap-6 mb-16">
4949
{
5050
posts.reverse().map((post, _) => (
51-
<a href={`/blog/${post.slug}/`}>
52-
<div class="flex flex-col md:flex-row gap-6 p-3 border border-solid border-darker-500 hover:border-darker">
53-
<div class="flex flex-col">
54-
<h4 class="font-semibold text-xl">
55-
{post.data.title}
56-
</h4>
57-
<p class="mt-1">{post.data.description}</p>
58-
<p class="mt-4">
59-
Published{" "}
60-
<FormattedDate date={post.data.pubDate} />
61-
{post.data.updatedDate && (
62-
<>
63-
&nbsp;|&nbsp;Updated{" "}
64-
<FormattedDate
65-
date={post.data.updatedDate!}
66-
/>
67-
</>
68-
)}
69-
</p>
70-
</div>
71-
</div>
51+
<a href={`/blog/${post.slug}/`} class="group">
52+
<article class="flex flex-col p-6 border border-solid border-darker-300 rounded-lg hover:border-darker-700 hover:shadow-lg transition-all duration-300 hover:-translate-y-1 bg-white hover:bg-darker-50">
53+
<h3 class="font-bold text-xl sm:text-2xl mb-3 group-hover:text-darker-900 transition-colors">
54+
{post.data.title}
55+
</h3>
56+
<p class="text-darker-700 mb-4 leading-relaxed">{post.data.description}</p>
57+
<p class="text-sm text-darker-600 mt-auto">
58+
Published{" "}
59+
<FormattedDate date={post.data.pubDate} />
60+
{post.data.updatedDate && (
61+
<>
62+
&nbsp;•&nbsp;Updated{" "}
63+
<FormattedDate
64+
date={post.data.updatedDate!}
65+
/>
66+
</>
67+
)}
68+
</p>
69+
</article>
7270
</a>
7371
))
7472
}
7573
</section>
7674
</div>
7775
</BasePage>
7876
<dialog id="email_modal" class="backdrop:bg-black/50 bg-transparent p-0 max-w-none w-full h-full">
79-
<div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 max-w-md mx-auto mt-20 text-lg">
77+
<div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-2xl p-8 max-w-md mx-auto mt-20 text-lg border border-darker-200 animate-in fade-in duration-200">
8078
<form method="dialog">
8179
<button
82-
class="absolute right-2 top-2 w-8 h-8 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 flex items-center justify-center transition-colors"
80+
class="absolute right-3 top-3 w-9 h-9 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 flex items-center justify-center transition-all duration-200 hover:rotate-90"
8381
>✕</button
8482
>
8583
</form>
86-
<h3 class="text-lg font-bold">Email Address</h3>
87-
<p class="py-4">sam (at) baumohl (dot) dev</p>
88-
<p class="text-xs">
89-
You can email me using <a class="underline" href="/pgp">PGP</a>
84+
<h3 class="text-2xl font-bold mb-4">Email Address</h3>
85+
<p class="py-4 text-xl">sam (at) baumohl (dot) dev</p>
86+
<p class="text-sm text-darker-600">
87+
You can email me using <a class="underline hover:text-darker-900 transition-colors" href="/pgp">PGP</a>
9088
</p>
9189
</div>
9290
</dialog>

‎src/styles/global.css‎

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,34 @@
55

66
@custom-variant dark (&:is(.dark *));
77

8+
@layer utilities {
9+
.prose {
10+
@apply md:text-lg text-base;
11+
}
12+
.prose hr {
13+
@apply mb-4;
14+
@apply mt-1;
15+
}
16+
17+
.prose li {
18+
margin: 0;
19+
}
20+
21+
.prose code {
22+
font-size: 12px;
23+
}
24+
}
25+
826
@layer components {
927
.prose pre {
1028
@apply overflow-y-scroll max-h-100;
1129
@apply overflow-x-scroll;
1230
max-width: 93vw;
13-
/* width:; */
1431
}
32+
}
1533

16-
/* optional cleanup for inline code formatting */
17-
.prose code::before,
18-
.prose code::after {
19-
content: none;
20-
}
34+
@utility prose {
35+
--tw-prose-bullets: var(--color-darker-950);
2136
}
2237

2338
@theme {

0 commit comments

Comments
 (0)