Design makeover

src/components/BaseHead.astro

@@ -14,28 +14,19 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 const { title, description, image = '/placeholder-social.jpg' } = Astro.props;
 ---
 
-<!-- Global Metadata -->
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1" />
 <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 <meta name="generator" content={Astro.generator} />
-
-<!-- Canonical URL -->
 <link rel="canonical" href={canonicalURL} />
-
-<!-- Primary Meta Tags -->
 <title>{title}</title>
 <meta name="title" content={title} />
 <meta name="description" content={description} />
-
-<!-- Open Graph / Facebook -->
 <meta property="og:type" content="website" />
 <meta property="og:url" content={Astro.url} />
 <meta property="og:title" content={title} />
 <meta property="og:description" content={description} />
 <meta property="og:image" content={new URL(image, Astro.url)} />
-
-<!-- Twitter -->
 <meta property="twitter:card" content="summary_large_image" />
 <meta property="twitter:url" content={Astro.url} />
 <meta property="twitter:title" content={title} />

src/components/Footer.astro

@@ -3,11 +3,14 @@ const today = new Date();
 ---
 
 <footer>
-	&copy; {today.getFullYear()} YOUR NAME HERE. All rights reserved.
+  &copy; {today.getFullYear()} Maciej Pędzich
 </footer>
+
 <style>
   footer {
-		padding: 25px;
+    margin-top: 1.5rem;
+    padding: 1rem 0;
+    border-top: 1px solid #fff;
     text-align: center;
   }
 </style>

src/components/FormattedDate.astro

@@ -7,11 +7,5 @@ const { date } = Astro.props;
 ---
 
 <time datetime={date.toISOString()}>
-	{
+  {date.toISOString().substring(0, 10)}
-		date.toLocaleDateString('en-us', {
-			year: 'numeric',
-			month: 'short',
-			day: 'numeric',
-		})
-	}
 </time>

src/components/Header.astro

@@ -1,25 +1,49 @@
 ---
 import HeaderLink from './HeaderLink.astro';
-import { SITE_TITLE } from '../consts';
 ---
 
 <header>
-	<h2>
+  <span class="logo cmr2-text">
-		{SITE_TITLE}
+    <span>Maciej</span>
-	</h2>
+    <span>Pędzich</span>
-	<nav>
+  </span>
+  <nav class="cmr2-text" aria-label="Site navigation">
     <HeaderLink href="/">Home</HeaderLink>
     <HeaderLink href="/blog">Blog</HeaderLink>
-		<HeaderLink href="/about">About</HeaderLink>
+    <HeaderLink href="/projects">Projects</HeaderLink>
-		<HeaderLink href="https://twitter.com/astrodotbuild" target="_blank">Twitter</HeaderLink>
+    <HeaderLink href="/resume.pdf">Resume</HeaderLink>
-		<HeaderLink href="https://github.com/withastro/astro" target="_blank">GitHub</HeaderLink>
+    <HeaderLink href="mailto:contact@maciejpedzi.ch">Email me</HeaderLink>
+    <HeaderLink href="/links">Links</HeaderLink>
   </nav>
 </header>
+
 <style>
+  @media only screen and (max-width: 625px) {
+    nav.cmr2-text {
+      justify-content: left;
+    }
+  }
+
+  nav {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+  }
+
+  nav > a {
+    color: rgba(255, 255, 255, 0.4);
+    text-decoration: none;
+  }
+
   header {
     margin: 0em 0 2em;
   }
+
   h2 {
     margin: 0.5em 0;
   }
+
+  .logo {
+    font-size: 2rem;
+    margin: 1.25rem 0;
+  }
 </style>

src/components/HeaderLink.astro

@@ -12,13 +12,15 @@ const isActive = href === pathname || href === pathname.replace(/\/$/, '');
 <a href={href} class:list={[className, { active: isActive }]} {...props}>
   <slot />
 </a>
+
 <style>
-	a {
-		display: inline-block;
-		text-decoration: none;
-	}
   a.active {
-		font-weight: bolder;
+    color: #fff;
-		text-decoration: underline;
+  }
+  a.active,
+  a.active + a,
+  a:hover + a,
+  a + a:hover {
+    border-left-color: #fff;
   }
 </style>

src/layouts/BlogPost.astro

@@ -1,5 +1,6 @@
 ---
 import type { CollectionEntry } from 'astro:content';
+
 import BaseHead from '../components/BaseHead.astro';
 import Header from '../components/Header.astro';
 import Footer from '../components/Footer.astro';
@@ -7,42 +8,26 @@ import FormattedDate from '../components/FormattedDate.astro';
 
 type Props = CollectionEntry<'blog'>['data'];
 
-const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
+const { title, description, pubDate } = Astro.props;
 ---
 
 <html lang="en">
   <head>
-		<BaseHead title={title} description={description} />
+    <BaseHead title={title + ' - Maciej Pędzich'} description={description} />
     <style>
       .title {
         font-size: 2em;
-				margin: 0.25em 0 0;
+        margin: 0;
-			}
+        text-align: center;
-			hr {
-				border-top: 1px solid #ddd;
-				margin: 1rem 0;
-			}
-			.last-updated-on {
-				font-style: italic;
       }
     </style>
   </head>
-
   <body>
     <Header />
     <main>
       <article>
-				{heroImage && <img width={720} height={360} src={heroImage} alt="" />}
         <h1 class="title">{title}</h1>
         <FormattedDate date={pubDate} />
-				{
-					updatedDate && (
-						<div class="last-updated-on">
-							Last updated on <FormattedDate date={updatedDate} />
-						</div>
-					)
-				}
-				<hr />
         <slot />
       </article>
     </main>

src/pages/blog/[...slug].astro

@@ -1,21 +1,25 @@
 ---
 import { CollectionEntry, getCollection } from 'astro:content';
+
 import BlogPost from '../../layouts/BlogPost.astro';
+import TableOfContents from '../../components/TableOfContents.astro';
 
 export async function getStaticPaths() {
   const posts = await getCollection('blog');
+
   return posts.map((post) => ({
     params: { slug: post.slug },
-		props: post,
+    props: post
   }));
 }
+
 type Props = CollectionEntry<'blog'>;
 
 const post = Astro.props;
-const { Content } = await post.render();
+const { Content, headings } = await post.render();
 ---
 
 <BlogPost {...post.data}>
-	<h1>{post.data.title}</h1>
+  {headings.length > 0 && <TableOfContents headings={headings} />}
   <Content />
 </BlogPost>

src/pages/blog/index.astro

@@ -6,9 +6,9 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../../consts';
 import { getCollection } from 'astro:content';
 import FormattedDate from '../../components/FormattedDate.astro';
 
-const posts = (await getCollection('blog')).sort(
+const posts = (
-	(a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf()
+  await getCollection('blog', (post) => import.meta.env.DEV || !post.data.draft)
-);
+).sort((a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf());
 ---
 
 <!DOCTYPE html>
@@ -16,20 +16,8 @@ const posts = (await getCollection('blog')).sort(
   <head>
     <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
     <style>
-			ul {
+      section {
-				list-style-type: none;
+        text-align: center;
-				padding: unset;
-			}
-			ul li {
-				display: flex;
-			}
-			ul li :global(time) {
-				flex: 0 0 130px;
-				font-style: italic;
-				color: #595959;
-			}
-			ul li a:visited {
-				color: #8e32dc;
       }
     </style>
   </head>
@@ -37,6 +25,7 @@ const posts = (await getCollection('blog')).sort(
     <Header />
     <main>
       <section>
+        <h2>My blog</h2>
         <ul>
           {
             posts.map((post) => (

src/pages/index.astro

@@ -2,6 +2,7 @@
 import BaseHead from '../components/BaseHead.astro';
 import Header from '../components/Header.astro';
 import Footer from '../components/Footer.astro';
+import FormattedDate from '../components/FormattedDate.astro';
 import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
 ---
 
@@ -13,38 +14,69 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
   <body>
     <Header title={SITE_TITLE} />
     <main>
-			<h1>🧑‍🚀 Hello, Astronaut!</h1>
+      <h2>Welcome to my website!</h2>
       <p>
-				Welcome to the official <a href="https://astro.build/">Astro</a> blog starter template. This
+        My name is <strong>Maciej</strong>, but if you don't know how to
-				template serves as a lightweight, minimally-styled starting point for anyone looking to build
+        pronounce it, then you can call me <strong>Mac</strong>. I'm an
-				a personal website, blog, or portfolio with Astro.
+        eighteen-year-old frontend developer from <strong>Poland</strong>.
+        Although I mainly use <strong>Vue</strong> and <strong>Nuxt</strong> for
+        my projects, I'm also familiar with <strong>Alpine</strong> and <strong
+          >Astro</strong
+        >.
       </p>
+      <h3>My blog</h3>
       <p>
-				This template comes with a few integrations already configured in your
+        It serves as a means of documenting the development process and inner
-				<code>astro.config.mjs</code> file. You can customize your setup with
+        workings of <a href="/projects">my applications</a>. Check out my latest
-				<a href="https://astro.build/integrations">Astro Integrations</a> to add tools like Tailwind,
+        posts below:
-				React, or Vue to your project.
       </p>
-			<p>Here are a few ideas on how to get started with the template:</p>
       <ul>
-				<li>Edit this page in <code>src/pages/index.astro</code></li>
+        <li>
-				<li>Edit the site header items in <code>src/components/Header.astro</code></li>
+          <FormattedDate date={new Date()} />
-				<li>Add your name to the footer in <code>src/components/Footer.astro</code></li>
+          <a href="#">Lorem Ipsum</a>
-				<li>Check out the included blog posts in <code>src/pages/blog/</code></li>
+        </li>
-				<li>Customize the blog post page layout in <code>src/layouts/BlogPost.astro</code></li>
+        <li>
+          <FormattedDate date={new Date()} />
+          <a href="#">Lorem Ipsum</a>
+        </li>
+        <li>
+          <FormattedDate date={new Date()} />
+          <a href="#">Lorem Ipsum</a>
+        </li>
       </ul>
+      <h3>Enjoy my work?</h3>
       <p>
-				Have fun! If you get stuck, remember to <a href="https://docs.astro.build/"
+        If so, then make sure to follow me on <a
-					>read the docs
+          href="https://github.com/maciejpedzich"
-				</a> or <a href="https://astro.build/chat">join us on Discord</a> to ask questions.
+          target="_blank"
-			</p>
+          rel="noopener noreferrer">GitHub</a
-			<p>
+        >, <a
-				Looking for a blog template with a bit more personality? Check out <a
+          href="https://twitter.com/MaciejPedzich"
-					href="https://github.com/Charca/astro-blog-template"
+          target="_blank"
-					>astro-blog-template
+          rel="noopener noreferrer">Twitter</a
-				</a> by <a href="https://twitter.com/Charca">Maxi Ferreira</a>.
+        >, or <a rel="me" href="https://notacult.social/@macindahaus"
+          >Mastodon</a
+        >.
       </p>
     </main>
     <Footer />
+    <style>
+      main {
+        text-align: center;
+      }
+
+      h2,
+      h3 {
+        text-transform: none;
+      }
+
+      h3 {
+        font-size: 1.25rem;
+      }
+
+      p {
+        margin: 0.5rem 0 1rem 0;
+      }
+    </style>
   </body>
 </html>

src/styles/global.css

@@ -4,64 +4,160 @@
   License MIT: https://github.com/HermanMartinus/bearblog/blob/master/LICENSE.md
  */
 body {
-	font-family: Verdana, sans-serif;
+  display: flex;
-	margin: auto;
+  flex-direction: column;
-	padding: 20px;
+  max-width: min(65ch, 90%);
-	max-width: 65ch;
+  height: 100vh;
+  font-family: Arial, Helvetica, sans-serif;
+  margin: 0 auto;
+  padding: 0;
+  background-color: #485870;
+  color: #fff;
   text-align: left;
-	background-color: #fff;
   word-wrap: break-word;
   overflow-wrap: break-word;
-	line-height: 1.5;
+  line-height: 1.8;
-	color: #444;
 }
+
 h1,
 h2,
-h3,
+h3 {
-h4,
+  margin: 0;
-h5,
+  font-weight: normal;
-h6,
+  text-transform: lowercase;
-strong,
-b {
-	color: #222;
 }
-a {
+
-	color: #3273dc;
+a,
+a:visited {
+  color: #fff;
 }
-nav a {
+
-	margin-right: 10px;
+a:hover,
+a:active {
+  color: rgba(255, 255, 255, 0.4);
 }
+
+a:focus {
+  outline: 2px solid #ccc;
+  outline-offset: 3px;
+}
+
+p {
+  text-align: left;
+}
+
+main {
+  flex: 1 1 auto;
+}
+
+a:visited {
+  color: unset;
+}
+
+ul {
+  list-style-type: none;
+  padding: unset;
+}
+
+ul li {
+  display: flex;
+  justify-content: center;
+}
+
+ul li::before {
+  content: '-';
+}
+
+ul li time {
+  flex: 0 0 112px;
+}
+
 textarea {
   width: 100%;
   font-size: 16px;
 }
+
 input {
   font-size: 16px;
 }
-content {
+
-	line-height: 1.6;
-}
 table {
   width: 100%;
 }
+
 img {
   max-width: 100%;
   height: auto;
 }
+
 code {
   padding: 2px 5px;
-	background-color: #f2f2f2;
+  background-color: #222;
 }
+
 pre {
   padding: 1rem;
 }
+
 pre > code {
   all: unset;
 }
+
 blockquote {
   border: 1px solid #999;
-	color: #222;
   padding: 2px 0px 2px 20px;
   margin: 0px;
   font-style: italic;
 }
+
+article > time {
+  display: block;
+  width: 100%;
+  text-align: center;
+}
+
+.cmr2-text {
+  display: flex;
+  justify-content: center;
+  font-weight: normal;
+  text-transform: lowercase;
+  text-align: center;
+  white-space: nowrap;
+}
+
+h1.cmr2-text {
+  margin: 22px 0;
+}
+
+.cmr2-text > span,
+.cmr2-text > a {
+  border-left-width: 0.05em;
+  border-left-style: solid;
+  text-align: center;
+}
+
+.cmr2-text > span {
+  border-left-color: #fff;
+}
+
+.cmr2-text > a {
+  border-left-color: rgba(255, 255, 255, 0.4);
+}
+
+.cmr2-text > span {
+  padding: 0 0.5em;
+}
+
+.cmr2-text > a {
+  padding: 0.05em 0.7em;
+}
+
+.cmr2-text > span:first-of-type,
+.cmr2-text > a:first-of-type {
+  border-left: none;
+}
+
+.cmr2-text > a:hover,
+.cmr2-text > a:focus {
+  color: #fff;
+}