tags and such
This commit is contained in:
@@ -7,23 +7,25 @@ interface Props {
|
||||
date: String
|
||||
}
|
||||
|
||||
const { title, date } = Astro.props
|
||||
const { title, date, slug } = Astro.props
|
||||
---
|
||||
|
||||
<div class="blog-header">
|
||||
<h2>{title}</h2>
|
||||
<h3>
|
||||
<!-- <img class="svg-icon" src={calendarIcon} alt="" /> -->
|
||||
<Calendar />
|
||||
<FormattedDate date={date} />
|
||||
</h3>
|
||||
</div>
|
||||
<h2>
|
||||
{slug ? <a href={`/posts/${slug}`}>{title}</a> : title}
|
||||
<h3>
|
||||
<!-- <img class="svg-icon" src={calendarIcon} alt="" /> -->
|
||||
<Calendar />
|
||||
<FormattedDate date={date} />
|
||||
</h3>
|
||||
</h2>
|
||||
|
||||
<style>
|
||||
h3 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
h3 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
import UserIcon from './icons/UserIcon.astro'
|
||||
import Website from './icons/Website.astro'
|
||||
import WebsiteIcon from './icons/Website.astro'
|
||||
|
||||
const { pathname } = Astro.url
|
||||
|
||||
@@ -24,9 +24,9 @@ const navLinks = [
|
||||
{() => {
|
||||
switch (link.label) {
|
||||
case 'Blog':
|
||||
return <Website />
|
||||
return <WebsiteIcon class="icon" />
|
||||
case 'About':
|
||||
return <UserIcon />
|
||||
return <UserIcon class="icon" />
|
||||
}
|
||||
}}
|
||||
<span>{link.label}</span>
|
||||
@@ -37,3 +37,62 @@ const navLinks = [
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
header {
|
||||
margin: 0;
|
||||
padding: 0.5rem 1rem;
|
||||
max-width: 800px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: auto;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
height: 40px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
nav ul li a {
|
||||
position: relative;
|
||||
font-size: 1.2rem;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
left: -100;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.active-nav::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -10px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 10px;
|
||||
background-color: var(--blue);
|
||||
}
|
||||
|
||||
nav ul li::before {
|
||||
content: '';
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
import BlogHeader from '@components/BlogHeader.astro'
|
||||
import Tags from '@components/Tags.astro'
|
||||
|
||||
interface Props {
|
||||
post: Object
|
||||
@@ -11,7 +12,7 @@ const { data, slug } = post
|
||||
|
||||
<article class="post-preview">
|
||||
<div>
|
||||
<BlogHeader title={post.data.title} date={post.data.pubDate} />
|
||||
<a href={`/posts/${slug}`}>Read Post</a>
|
||||
<BlogHeader title={post.data.title} date={data.pubDate} slug={slug} />
|
||||
<Tags tags={data.tags} />
|
||||
</div>
|
||||
</article>
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
---
|
||||
const { tags } = Astro.props
|
||||
---
|
||||
|
||||
<div class="tag-container">
|
||||
{
|
||||
tags.sort().map((tag: string) => (
|
||||
<a class="tag" href={`/archive/${tag}`}>
|
||||
{tag}
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.tag-container {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text);
|
||||
padding: 4px 8px;
|
||||
border-radius: 25px;
|
||||
background: var(--blue);
|
||||
}
|
||||
|
||||
.tag:not(:last-child) {
|
||||
margin-right: 6px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: "An Update on my AI Dating Profile"
|
||||
pubDate: 2023-01-14
|
||||
title: 'An Update on my AI Dating Profile'
|
||||
pubDate: '2023-01-14'
|
||||
tags: ['Life', 'Tech']
|
||||
---
|
||||
|
||||
Back in early December I posted about [how I created a dating profile using AI](https://ghall.blog/posts/creating-a-dating-profile-with-ai). I haven't forgotten about my promise to follow up on the results from that very unscientific experiment. Though I stated I'd commit to using my AI profile for a week, I quickly realized that was not a reasonable amount of time. So a week, turned into 2, which turned into just over a month, and I finally reached a point where I feel like a follow up is warranted.
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: "Ask The Darn Question!"
|
||||
pubDate: 2022-11-05
|
||||
title: 'Ask The Darn Question!'
|
||||
pubDate: '2022-11-05'
|
||||
tags: ['Web Dev', 'Mental Health']
|
||||
---
|
||||
|
||||
One of the areas I struggle with when it comes to working in a professional web development environment is asking questions. Whether it’s a problem I’m stuck on, or something about the codebase I don’t quite understand, I’m more likely to end up banging my head against the wall trying to find the answers myself than reach out and ask someone a question.
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: "Building ghall.dev 3.0"
|
||||
pubDate: 2022-10-16
|
||||
title: 'Building ghall.dev 3.0'
|
||||
pubDate: '2022-10-16'
|
||||
tags: ['Web Dev', 'Making Stuff']
|
||||
---
|
||||
|
||||
Welcome to my brand new website, the 3rd iteration of ghall.dev! For the last year-and-a-half this has simply been home to my portfolio, but for a while now I’ve wanted to expand from a simple, single-page site to a multi-page site with a blog (which you are of course reading right now).
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: "Coding With Depression"
|
||||
pubDate: 2022-11-11
|
||||
title: 'Coding With Depression'
|
||||
pubDate: '2022-11-11'
|
||||
tags: ['Web Dev', 'Mental Health']
|
||||
---
|
||||
|
||||
One of the reasons I started this blog, aside from wanting to share my thoughts and experiences as someone early in my web development career, was to write about mental illness as it relates to development. As you can imagine, it's not an easy topic by any means, as it's something that profoundly affects me personally on a daily basis.
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: "Creating a Dating Profile With AI"
|
||||
pubDate: 2022-12-10
|
||||
title: 'Creating a Dating Profile With AI'
|
||||
pubDate: '2022-12-10'
|
||||
tags: ['Life', 'Tech']
|
||||
---
|
||||
|
||||
I’ve been single for a few years now, and I haven’t had a whole lot of success in the dating game. I’m very introverted and socially anxious, so dating apps seemed like the way to go for me. Sadly, I’ve not had a lot of success, and since Covid it seems like the dating scene has only got worse. I’ve been feeling pretty down about it, but I decided to have a little fun and let an AI help me assemble a brand new profile.
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: "Getting Out of Your Comfort Zone"
|
||||
pubDate: 2022-12-10
|
||||
title: 'Getting Out of Your Comfort Zone'
|
||||
pubDate: '2022-12-10'
|
||||
tags: ['Life', 'Learning', 'Web Dev']
|
||||
---
|
||||
|
||||
When it comes to frameworks, I’ve been firmly stuck in the React–and React-adjacent–world. Basically, my “coding comfort zone” has been vanilla JavaScript, React, and Next.js. The world of web development is much broader than that, but I’m going to be honest, I was a little scared to branch out.
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: "Handheld Gaming"
|
||||
pubDate: 2023-01-07
|
||||
title: 'Handheld Gaming'
|
||||
pubDate: '2023-01-07'
|
||||
tags: ['Gaming']
|
||||
---
|
||||
|
||||
I don’t know if it’s the particular mood I’ve been in, the colder weather, or some combination of the 2, but something about cozying up with a handheld game console has been incredibly appealing lately. My PS5 sits under my TV, streaming the occasional movie or show, and begging me to jump into that Witcher 3 update, or continue playing Tales of Arise. Meanwhile, my Switch Lite is getting all the love.
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: "iLeopard - A Retrospective"
|
||||
pubDate: 2022-12-26
|
||||
title: 'iLeopard - A Retrospective'
|
||||
pubDate: '2022-12-26'
|
||||
tags: ['Tech', 'MacOS', 'Making Stuff']
|
||||
---
|
||||
|
||||
I few months ago I rediscovered among some old project folders the source code and markdown files for an old blog I ran in the early 2010s. With nothing to do on the afternoon of Christmas Eve, which was a brisk 15°F, I decided I wanted to search through and try to find a rather lengthy retrospective I wrote on Star Trek: The Next Generation. Now that I’ve finally started up a new blog I thought it would be fun to touch it up and republish it, since I put so many hours worth of work into it back in the day. Upsettingly, it was not there.
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: "My Favorite Little Apps, Part 2"
|
||||
pubDate: 2023-01-21
|
||||
title: 'My Favorite Little Apps, Part 2'
|
||||
pubDate: '2023-01-21'
|
||||
tags: ['MacOS', 'Apps']
|
||||
---
|
||||
|
||||
A few months ago, I wrote about [my favorite little Mac apps](/posts/my-favorite-little-apps). This post was originally published on my portfolio blog (which I have since merged with this one), so it had more of a focus on web development and productivity, so I wanted to write up a part 2 with more general-use apps I use frequently.
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: "My Favorite Little Apps"
|
||||
pubDate: 2022-11-28
|
||||
title: 'My Favorite Little Apps'
|
||||
pubDate: '2022-11-28'
|
||||
tags: ['MacOS', 'Apps']
|
||||
---
|
||||
|
||||
There are a lot of apps on my Macs that I use every day. There’s the big ones like Nova for coding, Brave for testing and dev tools, Craft for taking notes and keeping track of projects, and many more. But I wanted to pay special attention to the smaller apps that I use that just hang out in the menu bar or the background that make working in MacOS that much more seamless and enjoyable.
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: "My Gunpla Adventure"
|
||||
pubDate: 2023-01-28
|
||||
title: 'My Gunpla Adventure'
|
||||
pubDate: '2023-01-28'
|
||||
tags: ['Making Stuff']
|
||||
---
|
||||
|
||||
Back in my teenage years I used to build model kits. Mostly Star Trek, some Star Wars, and 1 or 2 model planes. It was sort of a continuation of my Lego obsession from my pre-teen days, but at some point I just kind of fell of. Fast-forward Summer 2022, I was going through a rough patch and wanted to focus on some hobbies that would get me away from the screen, and I decided to pick up model building again. Because the YouTube algorithm is a thing, as I watched more and more reviews and tutorials, I naturally ended up in a strange corner of the model kit scene called Gunpla.
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: "My MacOS Home Directory Overview"
|
||||
pubDate: 2022-12-23
|
||||
title: 'My MacOS Home Directory Overview'
|
||||
pubDate: '2022-12-23'
|
||||
tags: ['MacOS', 'Tech']
|
||||
---
|
||||
|
||||
On [the latest episode of ATP](https://atp.fm/514), Casey, John, and Marco discussed MacOS home directories. After I was done cringing at John keeping his git clones in the root level of his home directory, I started thinking about how I use my own home folder, and how I keep it organized. I won’t go into the hidden items, because I don’t think either of us want that (with hidden items included, my home directory has 34 documents, and 47 folders 😅).
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: "My Top 3 Games of 2022"
|
||||
pubDate: 2022-12-09
|
||||
title: 'My Top 3 Games of 2022'
|
||||
pubDate: '2022-12-09'
|
||||
tags: ['Gaming']
|
||||
---
|
||||
|
||||
The Game Awards were last night, so I was inspired to take some time and write about my personal game of the year. But I couldn't narrow it down to just one, so I picked 3 games which were nominated for several awards but didn't get much, if any, recognition.
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
---
|
||||
title: "Next.js 13 and Exploring New Technologies"
|
||||
pubDate: 2022-10-28
|
||||
title: 'Next.js 13 and Exploring New Technologies'
|
||||
pubDate: '2022-10-28'
|
||||
tags: ['Web Dev', 'Learning']
|
||||
---
|
||||
|
||||
Next.js 13 was launched a few days ago ([More details here!](https://nextjs.org/blog/next-13)), and I’ve been slowly working my way through the new stuff. As a relative newcomer to the world of Next.js I’m very excited by what I see, but I also don’t want to get too bogged down in what’s new because I’m already feeling a little bombarded with new stuff at my day job. Besides, it might be a while before I get to use Next.js 13 in a professional setting.
|
||||
|
||||
Yes I’m a tech nerd, and I become easily enamoured with the shiny new thing, perhaps to a fault, especially when that shiny new thing is a piece of software. I’m the guy who installs OS updates on day one—MacOS Ventura seems to be running fine so far, _knock on wood_—and I just want to just dive head-first into Next.js 13.
|
||||
Yes I’m a tech nerd, and I become easily enamored with the shiny new thing, perhaps to a fault, especially when that shiny new thing is a piece of software. I’m the guy who installs OS updates on day one—MacOS Ventura seems to be running fine so far, _knock on wood_—and I just want to just dive head-first into Next.js 13.
|
||||
|
||||
But, when you’re as new to the industry as I am, there are already so many new tools and technologies to learn it can already seem overwhelming without throwing in trying to keep up with the latest in the ever-evolving world of web development.
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: 'Nostalgia'
|
||||
pubDate: 2023-03-04
|
||||
pubDate: '2023-03-04'
|
||||
tags: ['Life', 'Gaming', 'Movies']
|
||||
---
|
||||
|
||||
I've recently been playing 2 games that would be considered "retro", but referring to them as such would make me feel old, so we'll call them "classics". These classics are Metroid Prime, via the recent remaster on Switch, and The Legend of Zelda: The Minish Cap, via the Switch Online GameBoy Advance collection. It got me thinking about how nostalgia can color our opinions of certain pieces of media, primarily when comparing media of a similar vintage.
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: "On Text Editors"
|
||||
pubDate: 2022-10-22
|
||||
title: 'On Text Editors'
|
||||
pubDate: '2022-10-22'
|
||||
tags: ['Tech', 'Apps', 'Web Dev']
|
||||
---
|
||||
|
||||
Among the various types of software tools I use every day, the one I spend a majority of my time in is a text editor. If I’m going to be spending most of my working day using one of these tools, I want it to be something that I enjoy using, and helps me work the way I like to work.
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Reflecting on Building My First App
|
||||
pubDate: 2023-02-28
|
||||
pubDate: '2023-02-28'
|
||||
tags: ['Learning', 'Making Stuff', 'MacOS', 'Programming']
|
||||
---
|
||||
|
||||
I'm primarily a web developer. Everything I build, whether it's for work or for fun, is destined for the web. I love it, building stuff for the web has been a part of my life since I first cobbled together a Star Trek fan site in my tween years. But I've also wanted to broaden my horizons a bit beyond the web, and create something for another platform I love; the Mac.
|
||||
@@ -15,8 +16,8 @@ I pushed this project aside too. Unlike my Electron app though, I wasn’t unful
|
||||
|
||||
But the thing is, web development wasn’t always my comfort zone. I used to be scared, overwhelmed, at the prospect of building for the web. Hell, it still scares me sometimes, but it’s what I know. I don’t know Swift very well yet, and I certainly am not very familiar with SwiftUI, and I often forget there was a time I was in the same boat with JavaScript (not to say I’m an expert, far from it, but I think you get my point).
|
||||
|
||||
So what did I learn that I can apply to my future endeavors to build a Mac app? Honestly, it’s something I already knew, but maybe I just needed to be reminded of: Start small, and don’t try to do everything at once.
|
||||
So what did I learn that I can apply to my future endeavors to build a Mac app? Honestly, it’s something I already knew, but maybe I just needed to be reminded of: Start small, and don’t try to do everything at once.
|
||||
|
||||
I made a mistake trying to just immerse myself in everything Swift, but, as a result, I feel like I actually learned very little. What I should have done, and will do when I’m ready to dive back in, is start at step one. I know the fundamentals of programming, but that’s like trying to speak a language when you know the grammar but not the vocabulary. So I need to just forget about SwiftUI and building functional apps, and just start with the core language and get comfortable with that. Maybe write some command line tools and work my way up from there.
|
||||
|
||||
It’s definitely hard for me when learning something new to not immediately put myself down for not being good at it on my first go. It’s unrealistic, and unproductive, but for some reason it’s my natural inclination. The boot camp format mitigated that a bit, between the structured lessons and interacting with people who were in the same boat of having no idea what the frick we were doing.
|
||||
It’s definitely hard for me when learning something new to not immediately put myself down for not being good at it on my first go. It’s unrealistic, and unproductive, but for some reason it’s my natural inclination. The boot camp format mitigated that a bit, between the structured lessons and interacting with people who were in the same boat of having no idea what the frick we were doing.
|
||||
|
||||
@@ -3,7 +3,8 @@ import { z, defineCollection } from 'astro:content'
|
||||
const blogCollection = defineCollection({
|
||||
schema: z.object({
|
||||
title: z.string(),
|
||||
pubDate: z.date(),
|
||||
pubDate: z.string().transform((str) => new Date(str)),
|
||||
tags: z.array(z.string()),
|
||||
}),
|
||||
})
|
||||
|
||||
|
||||
@@ -1,64 +0,0 @@
|
||||
---
|
||||
import { getCollection } from 'astro:content'
|
||||
const sortParam = Astro.url.search.split('=')[1]
|
||||
|
||||
import Layout from '@layouts/Layout.astro'
|
||||
import FormattedDate from '@components/FormattedDate.astro'
|
||||
|
||||
const posts = await getCollection('blog')
|
||||
|
||||
switch (sortParam) {
|
||||
case 'date-des':
|
||||
posts.sort(
|
||||
(a, b) => Date.parse(b.data.pubDate) - Date.parse(a.data.pubDate)
|
||||
)
|
||||
break
|
||||
case 'date-asc':
|
||||
posts.sort(
|
||||
(a, b) => Date.parse(a.data.pubDate) - Date.parse(b.data.pubDate)
|
||||
)
|
||||
break
|
||||
case 'title':
|
||||
posts.sort((a, b) => a.data.title - b.data.title)
|
||||
default:
|
||||
break
|
||||
}
|
||||
---
|
||||
|
||||
<Layout title="Blog Archive">
|
||||
<div class="archive-options">
|
||||
<div class="select-container">
|
||||
<select name="sort by" id="sort-by">
|
||||
<option value="title">Title (Alphabetically)</option>
|
||||
<option value="date-des">Publish Date (Newest First)</option>
|
||||
<option value="date-asc">Publish Date (Oldest First)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
{
|
||||
posts.map(({ slug, data }) => (
|
||||
<div>
|
||||
<a href={`/posts/${slug}`}>{data.title}</a> -{' '}
|
||||
<FormattedDate date={data.pubDate} />
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</Layout>
|
||||
|
||||
<script is:inline>
|
||||
const sort = location.search.split('=')[1]
|
||||
const sortEl = document.querySelector('#sort-by')
|
||||
|
||||
sortEl.value = sort || 'title'
|
||||
|
||||
sortEl.addEventListener(
|
||||
'change',
|
||||
() => (window.location.href = `/archive?sort=${sortEl.value}`)
|
||||
)
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.archive-options {
|
||||
padding: 10px 0 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,32 @@
|
||||
---
|
||||
import { getCollection } from 'astro:content'
|
||||
|
||||
import Layout from '@layouts/Layout.astro'
|
||||
import FormattedDate from '@components/FormattedDate.astro'
|
||||
|
||||
const { tag } = Astro.params
|
||||
console.log(tag)
|
||||
const posts = await getCollection('blog', ({ data }) => {
|
||||
if (tag === 'all') {
|
||||
return true
|
||||
}
|
||||
return data.tags.includes(tag)
|
||||
})
|
||||
|
||||
if (posts.length === 0) {
|
||||
return Astro.redirect('/404')
|
||||
}
|
||||
|
||||
posts.sort((a, b) => Date.parse(b.data.pubDate) - Date.parse(a.data.pubDate))
|
||||
---
|
||||
|
||||
<Layout title="Blog Archive">
|
||||
{
|
||||
posts.map(({ slug, data }) => (
|
||||
<div>
|
||||
<a href={`/posts/${slug}`}>{data.title}</a> -{' '}
|
||||
<FormattedDate date={data.pubDate} />
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</Layout>
|
||||
@@ -18,7 +18,7 @@ const posts = await getCollection('blog')
|
||||
{
|
||||
posts.length < 5 ? null : (
|
||||
<div class="more-posts">
|
||||
<a class="link-button blue-btn" href="/archive">
|
||||
<a class="link-button blue-btn" href="/archive/all">
|
||||
All Posts
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -4,6 +4,7 @@ import { getCollection } from 'astro:content'
|
||||
|
||||
import Layout from '@layouts/Layout.astro'
|
||||
import BlogHeader from '@components/BlogHeader.astro'
|
||||
import Tags from '@components/Tags.astro'
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const posts = await getCollection('blog')
|
||||
@@ -25,6 +26,7 @@ const { Content } = await post.render()
|
||||
<article>
|
||||
<Content />
|
||||
</article>
|
||||
<Tags tags={data.tags} />
|
||||
</Layout>
|
||||
|
||||
<style is:global>
|
||||
|
||||
+7
-52
@@ -39,6 +39,7 @@
|
||||
* {
|
||||
font-family: 'Manrope', sans-serif;
|
||||
color: var(--text);
|
||||
letter-spacing: 0.03rem;
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -46,57 +47,6 @@ body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
margin: 0;
|
||||
padding: 0.5rem 1rem;
|
||||
max-width: 800px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: auto;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
height: 40px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
nav ul li a {
|
||||
position: relative;
|
||||
font-size: 1.2rem;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.active-nav::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -10px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 10px;
|
||||
background-color: var(--blue);
|
||||
}
|
||||
|
||||
nav ul li::before {
|
||||
content: '';
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 1rem 3rem;
|
||||
max-width: 800px;
|
||||
@@ -117,6 +67,10 @@ h4 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 3px solid;
|
||||
border-color: var(--text);
|
||||
@@ -284,12 +238,13 @@ dialog {
|
||||
}
|
||||
|
||||
.post-preview {
|
||||
padding: 0.1rem 1rem 1.5rem;
|
||||
padding: 0.1rem 1rem 2rem;
|
||||
margin: 0 0 1.5rem 0;
|
||||
}
|
||||
|
||||
.post-preview:not(:last-of-type) {
|
||||
border-bottom: var(--border);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
svg {
|
||||
|
||||
Reference in New Issue
Block a user