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

redesign draft 1

Browse Source
This commit is contained in:
Graham Hall
2024-01-24 12:31:31 -05:00
parent 767396c137
commit 02c52c9ea6
27 changed files with 123 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/BlogHeader.astro
+13 -9
View File
@@ -1,14 +1,13 @@
---
import FormattedDate from '@components/FormattedDate.astro'
import Calendar from './icons/Calendar.astro'
import FormattedDate from '@components/FormattedDate.astro';
interface Props {
title: String
date: String
slug: String
title: String;
date: String;
slug?: String;
}
const { title, date, slug } = Astro.props
const { title, date, slug } = Astro.props;
---
<div class="blog-header">
@@ -17,8 +16,8 @@ const { title, date, slug } = Astro.props
</h2>
<h3>
<!-- <img class="svg-icon" src={calendarIcon} alt="" /> -->
<Calendar />
<FormattedDate date={date} />
🗓️ <FormattedDate date={date} />
</h3>
</div>
@@ -30,10 +29,15 @@ const { title, date, slug } = Astro.props
text-decoration: none;
}
h2,
h2 a {
font-size: 1.4rem;
}
h3 {
display: flex;
align-items: center;
gap: 6px;
font-size: 1.1rem;
font-size: 0.9rem;
}
</style>
src/components/Footer.astro
+2 -2
View File
@@ -1,6 +1,6 @@
---
import RSSIcon from './icons/RSS.astro'
const year = new Date().getFullYear()
import RSSIcon from './icons/RSS.astro';
const year = new Date().getFullYear();
---
<footer>
src/components/FormattedDate.astro
+3 -3
View File
@@ -1,11 +1,11 @@
---
import { format, add } from 'date-fns'
import { format, add } from 'date-fns';
interface Props {
date: Date
date: Date;
}
const { date } = Astro.props
const { date } = Astro.props;
---
<span>{format(add(new Date(date), { hours: 6 }), 'MMM do, y')}</span>
src/components/Header.astro
+17 -22
View File
@@ -1,17 +1,17 @@
---
import UserIcon from './icons/UserIcon.astro'
import WebsiteIcon from './icons/Website.astro'
import UserIcon from './icons/UserIcon.astro';
import WebsiteIcon from './icons/Website.astro';
const { pathname } = Astro.url
const { pathname } = Astro.url;
const navLinks = [
{ label: 'Blog', path: '/' },
{ label: 'About', path: '/about/' },
]
{ label: '📝 Blog', path: '/' },
{ label: '👤 About', path: '/about/' },
];
---
<header>
<h1>Graham's Blog</h1>
<h1>ghall.blog</h1>
<nav>
<ul>
{
@@ -21,14 +21,6 @@ const navLinks = [
class={pathname === link.path ? 'active-nav' : null}
href={link.path}
>
{() => {
switch (link.label) {
case 'Blog':
return <WebsiteIcon class="icon" />
case 'About':
return <UserIcon class="icon" />
}
}}
<span>{link.label}</span>
</a>
</li>
@@ -50,8 +42,13 @@ const navLinks = [
align-items: center;
}
header h1 {
h1 {
text-align: center;
font-size: 1.8rem;
}
.title {
text-decoration: none;
}
nav ul {
@@ -66,6 +63,7 @@ const navLinks = [
nav ul li {
height: 40px;
align-items: center;
margin: 0;
}
nav ul li a {
@@ -78,13 +76,10 @@ const navLinks = [
}
nav ul li a::before {
content: '';
content: '❯';
position: absolute;
left: -10px;
width: 6px;
height: 6px;
border-radius: 10px;
background-color: var(--blue);
left: -12px;
color: var(--blue);
opacity: 0;
}
src/components/PostPreview.astro
+5 -5
View File
@@ -1,13 +1,13 @@
---
import BlogHeader from '@components/BlogHeader.astro'
import Tags from '@components/Tags.astro'
import BlogHeader from '@components/BlogHeader.astro';
import Tags from '@components/Tags.astro';
interface Props {
post: Object
post: Object;
}
const { post } = Astro.props
const { data, slug } = post
const { post } = Astro.props;
const { data, slug } = post;
---
<article class="post-preview">
src/components/Tags.astro
+3 -14
View File
@@ -1,12 +1,12 @@
---
const { tags } = Astro.props
const { tags } = Astro.props;
---
<div class="tag-container">
{
tags.sort().map((tag: string) => (
<a class="tag" href={`/archive/${tag}?page=1`}>
{tag}
#{tag}
</a>
))
}
@@ -18,19 +18,8 @@ const { tags } = Astro.props
}
.tag {
font-size: 0.8rem;
color: white;
padding: 4px 8px;
border-radius: 25px;
background: var(--blue);
font-size: 1rem;
line-height: 2rem;
transition: filter 0.15s;
text-decoration: none;
}
.tag:hover {
text-decoration: none;
filter: saturate(120%);
}
.tag:not(:last-child) {
src/components/icons/Calendar.astro
-1
View File
@@ -1 +0,0 @@
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_287_24406)" fill="currentColor"><path d="M18.4 3a1 1 0 1 0-2 0h2zm-2 3.6a1 1 0 1 0 2 0h-2zM7.6 3a1 1 0 0 0-2 0h2zm-2 3.6a1 1 0 0 0 2 0h-2zM3.586 20.414l-.707.707.707-.707zm16.828 0l-.707-.707.707.707zm0-15.028l.707-.707-.707.707zm-16.828 0l-.707-.707.707.707zM20 8.8V17h2V8.8h-2zM17 20H7v2h10v-2zM4 17V8.8H2V17h2zM7.001 5.8H16.998v-2H7.003v2zM21 9H3v2h18V9zm-4.6-6v3.6h2V3h-2zM5.6 3v3.6h2V3h-2zM7 20c-.971 0-1.599-.002-2.061-.064-.434-.059-.57-.153-.646-.229l-1.414 1.414c.51.51 1.138.709 1.793.797C5.3 22.002 6.085 22 7 22v-2zm-5-3c0 .915-.002 1.701.082 2.328.088.655.287 1.284.797 1.793l1.414-1.414c-.076-.076-.17-.212-.229-.646C4.002 18.6 4 17.971 4 17H2zm18 0c0 .971-.002 1.599-.064 2.061-.059.434-.153.57-.229.646l1.414 1.414c.51-.51.709-1.138.797-1.793C22.002 18.7 22 17.915 22 17h-2zm-3 5c.915 0 1.701.002 2.328-.082.655-.088 1.284-.287 1.793-.797l-1.414-1.414c-.076.076-.212.17-.646.229-.462.062-1.09.064-2.061.064v2zm5-13.2c0-.915.002-1.701-.082-2.328-.088-.655-.287-1.284-.797-1.793l-1.414 1.414c.076.076.17.212.229.646.062.462.064 1.09.064 2.061h2zm-5.001-3c.971 0 1.6.002 2.062.064.434.059.57.153.646.229l1.414-1.414c-.51-.51-1.138-.709-1.794-.797C18.7 3.798 17.914 3.8 17 3.8v2zM4 8.8c0-.971.002-1.599.064-2.061.059-.434.153-.57.229-.646L2.879 4.679c-.51.51-.709 1.138-.797 1.793C1.998 7.1 2 7.885 2 8.8h2zm3.001-5c-.915 0-1.701-.002-2.328.082-.656.088-1.285.287-1.794.797l1.414 1.414c.076-.076.212-.17.646-.229.463-.062 1.09-.064 2.062-.064v-2zM8.5 17.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4.5 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4.5 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/><path d="M17.5 17.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-9-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4.5 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4.5 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/><path d="M17.5 13.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/></g><defs><clipPath id="clip0_287_24406"><path fill="currentColor" d="M0 0H24V24H0z"/></clipPath></defs></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.9 KiB

src/components/icons/RSS.astro
-1
View File
@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 -960 960 960" width="48"><path d="M218-120q-41 0-69.5-28.5T120-218q0-41 28.5-69.5T218-316q41 0 69.5 28.5T316-218q0 41-28.5 69.5T218-120Zm492 0q0-122-46.5-229.5T537-537q-80-80-187.5-126.5T120-710v-90q141 0 264.5 53.5t216 146q92.5 92.5 146 216T800-120h-90Zm-238 0q0-158-97-259T120-480v-90q97 0 178 34t139.5 94Q496-382 529-299.5T562-120h-90Z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 422 B

src/components/icons/UserIcon.astro
-1
View File
@@ -1 +0,0 @@
<svg fill="none" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 21v-1.45c0-.977 0-1.465-.113-1.864a3 3 0 0 0-2.073-2.073c-.399-.113-.887-.113-1.864-.113h-6.9c-.977 0-1.465 0-1.864.113a3 3 0 0 0-2.073 2.073C4 18.085 4 18.573 4 19.55V21M16.2 7.06c0 2.245-1.88 4.065-4.2 4.065S7.8 9.305 7.8 7.06 9.68 2.996 12 2.996s4.2 1.82 4.2 4.064z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 452 B

src/components/icons/Website.astro
-1
View File
@@ -1 +0,0 @@
<svg fill="none" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><rect height="18" rx="2" width="18" x="3" y="3"/><path d="M3 7h18M7 11.5h10M7 16h6"/></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 260 B