graham/ghall.space
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design tweaks

Browse Source
This commit is contained in:
Graham Hall
2024-03-01 23:11:17 -05:00
parent 4cdc973448
commit 605af08295
27 changed files with 88 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/BlogHeader.astro
+6 -10
View File
@@ -1,5 +1,6 @@
---
import FormattedDate from '@components/FormattedDate.astro';
import { format, add } from 'date-fns';
import { Icon } from 'astro-icon/components';
interface Props {
title: String;
@@ -15,18 +16,12 @@ const { title, date, slug } = Astro.props;
{slug ? <a href={`/posts/${slug}`}>{title}</a> : title}
</h2>
<h3>
🗓️ <FormattedDate date={date} />
<Icon size={24} class="calendar-icon" name="calendar" />
<span>{format(add(new Date(date), { hours: 6 }), 'MMM do, y')}</span>
</h3>
</div>
<style>
a {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
h2,
h2 a {
font-size: 1.4rem;
@@ -36,6 +31,7 @@ const { title, date, slug } = Astro.props;
display: flex;
align-items: center;
gap: 6px;
font-size: 0.9rem;
font-weight: lighter;
font-size: 0.3em;
}
</style>
src/components/Footer.astro
+2
View File
@@ -1,5 +1,7 @@
---
const year = new Date().getFullYear();
interface Props {}
---
<footer>
src/components/FormattedDate.astro
-11
View File
@@ -1,11 +0,0 @@
---
import { format, add } from 'date-fns';
interface Props {
date: Date;
}
const { date } = Astro.props;
---
<span>{format(add(new Date(date), { hours: 6 }), 'MMM do, y')}</span>
src/components/Header.astro
+8 -4
View File
@@ -1,12 +1,15 @@
---
import { Icon } from 'astro-icon/components';
import type { NavLink } from 'src/types';
const { pathname } = Astro.url;
interface Props {}
const navLinks: NavLink[] = [
{ label: '📝 Blog', path: '/' },
{ label: '👤 About', path: '/about/' },
{ label: '🕐 Now', path: '/now/' },
{ label: 'Blog', icon: 'pen', path: '/' },
{ label: 'About', icon: 'person', path: '/about/' },
{ label: 'Now', icon: 'clock', path: '/now/' },
];
---
@@ -21,6 +24,7 @@ const navLinks: NavLink[] = [
class={pathname === link.path ? 'active-nav' : null}
href={link.path}
>
<Icon size={26} name={link.icon} />
<span>{link.label}</span>
</a>
</li>
@@ -76,7 +80,7 @@ const navLinks: NavLink[] = [
}
nav ul li a::before {
content: '❯';
content: '•';
position: absolute;
left: -12px;
color: var(--blue);
src/components/PostPreview.astro
+1 -1
View File
@@ -1,5 +1,5 @@
---
import { Tag } from 'src/content/config';
import { Tag } from 'src/types';
import BlogHeader from '@components/BlogHeader.astro';
import Tags from '@components/Tags.astro';
src/components/Tags.astro
+1 -1
View File
@@ -1,5 +1,5 @@
---
import { Tag } from 'src/content/config';
import { Tag } from 'src/types';
interface Props {
tags: Tag[];
src/content/blog/2024/ramblings-on-the-macintosh.md
+1 -1
View File
@@ -1,7 +1,7 @@
---
title: 'Ramblings On The Macintosh'
pubDate: '2/18/24'
tags: ['Life', 'MacOS', 'Tech']
tags: [Life, MacOS, Tech]
---
2024 marks the 40th anniversary of the Macintosh. You've probably heard this a million times already this year, I'm pretty late to the party for writing a Macintosh retrospective, but I wanted to write this post anyway because of how important the Mac is to me. I might not be where I am today, especially not career-wise, if it weren't for the Macintosh.
src/layouts/Layout.astro
+4 -3
View File
@@ -6,11 +6,12 @@ import Footer from '@components/Footer.astro';
export interface Props {
title: string;
frontmatter?: {
title: string;
};
}
const title = Astro.props.title || Astro.props.frontmatter.title;
console.log(Astro.props);
const title = Astro.props.title || Astro.props.frontmatter?.title || 'Unknown';
---
<!DOCTYPE html>
src/pages/now.md
+11 -1
View File
@@ -5,7 +5,7 @@ title: Now
Hey there, this is my [/now page](https://nownownow.com/about)!
_Last updated: February 25, 2024_
_Last updated: February 28, 2024_
## 🔨 Making
@@ -28,3 +28,13 @@ _Last updated: February 25, 2024_
## 📺 Watching
- Nothing at the moment...
## 💻 Using
- MacBook Air M2 - Midnight
- 24GB RAM
- 512GB SSD
- LG UltraFine 27"
- Nuphy Air75 v2
- With retro Mac-style keycaps
- Apple Magic Trackpad/Logitech A72 (depending on my mood)
src/styles/fonts/ChicagoFLF.ttf
BIN
View File
Binary file not shown.
src/styles/fonts/Poppins-Regular.ttf
Executable
BIN
View File
Binary file not shown.
src/styles/global.css
+10 -13
View File
@@ -1,8 +1,7 @@
@font-face {
font-family: CrimsonText;
src: url(./fonts/CrimsonText-Regular.ttf) format('truetype');
src: url(./fonts/Poppins-Regular.ttf) format('truetype');
font-style: normal;
font-display: block;
}
@font-face {
@@ -37,11 +36,15 @@
* {
/* font-family: 'CrimsonText', serif; */
font-family: 'CrimsonText', serif;
font-size: 1.2rem;
font-size: 1.1rem;
color: var(--text);
letter-spacing: 0.03rem;
}
html {
color-scheme: dark light;
}
body {
background-color: var(--background);
margin: 0;
@@ -79,7 +82,7 @@ blockquote {
}
hr {
border-top: 1px solid var(--text);
border-top: 1px solid var(--border);
margin: 2rem 0;
}
@@ -102,8 +105,7 @@ sup > a {
a {
color: var(--blue);
text-decoration: underline;
text-decoration-style: dotted;
text-decoration: none;
}
a:hover {
@@ -263,11 +265,6 @@ dialog {
margin: 0 0 1.5rem 0;
}
.post-preview:not(:last-of-type) {
border-bottom: var(--border);
margin: 0;
}
svg {
color: var(--text);
}
@@ -278,7 +275,7 @@ svg {
display: block;
width: 134px;
height: 45px;
background-image: url(Written-By-Human-Not-By-AI-Badge-white.svg);
background-image: url(svg/Written-By-Human-Not-By-AI-Badge-white.svg);
background-repeat: no-repeat;
background-position: center;
/* border: 1px solid red; */
@@ -286,6 +283,6 @@ svg {
@media (prefers-color-scheme: dark) {
.not-by-ai {
background-image: url(Written-By-Human-Not-By-AI-Badge-black.svg);
background-image: url(svg/Written-By-Human-Not-By-AI-Badge-black.svg);
}
}
src/styles/Written-By-Human-Not-By-AI-Badge-black.svg → src/styles/svg/Written-By-Human-Not-By-AI-Badge-black.svg
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

src/styles/Written-By-Human-Not-By-AI-Badge-white.svg → src/styles/svg/Written-By-Human-Not-By-AI-Badge-white.svg
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

src/styles/svg/icons/calendar.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 4h-.8c-1.12 0-1.68 0-2.108.218a1.999 1.999 0 0 0-.874.874C4 5.52 4 6.08 4 7.2V8m4-4h8M8 4V2m8 2h.8c1.12 0 1.68 0 2.107.218c.377.192.683.497.875.874c.218.427.218.987.218 2.105V8m-4-4V2M4 8v8.8c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874c.427.218.987.218 2.105.218h9.606c1.118 0 1.677 0 2.104-.218c.377-.192.683-.498.875-.874c.218-.428.218-.986.218-2.104V8M4 8h16m-4 8h.002v.002H16zm-4 0h.002v.002H12zm-4 0h.002v.002H8zm8.002-4v.002H16V12zM12 12h.002v.002H12zm-4 0h.002v.002H8z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 678 B

src/styles/svg/icons/clock.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 7v5h5m-5 9a9 9 0 1 1 0-18a9 9 0 0 1 0 18"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 245 B

src/styles/svg/icons/pen.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 20h16M4 20v-4l8-8M4 20h4l8-8m-4-4l2.869-2.869l.001-.001c.395-.395.593-.593.821-.667a1 1 0 0 1 .618 0c.228.074.425.272.82.666l1.74 1.74c.396.396.594.594.668.822a1 1 0 0 1 0 .618c-.074.228-.272.426-.668.822h0L16 12.001m-4-4l4 4"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 429 B

src/styles/svg/icons/person.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21a7 7 0 1 0-14 0m7-10a4 4 0 1 1 0-8a4 4 0 0 1 0 8"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 255 B

src/types.ts
+1
View File
@@ -1,6 +1,7 @@
// navigation links
export type NavLink = {
label: string;
icon: string;
path: string;
};