From e13e6582acc9bc9386e5744bf1eba2d67372e52a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciej=20P=C4=99dzich?= <dnalop.me@gmail.com>
Date: Wed, 26 Apr 2023 10:23:17 +0200
Subject: [PATCH] Design makeover

---
 src/components/BaseHead.astro      |  15 +--
 src/components/Footer.astro        |  13 ++-
 src/components/FormattedDate.astro |  10 +-
 src/components/Header.astro        |  58 +++++++---
 src/components/HeaderLink.astro    |  20 ++--
 src/layouts/BlogPost.astro         |  61 ++++------
 src/pages/blog/[...slug].astro     |  20 ++--
 src/pages/blog/index.astro         |  71 +++++-------
 src/pages/index.astro              | 112 ++++++++++++-------
 src/styles/global.css              | 174 ++++++++++++++++++++++-------
 10 files changed, 337 insertions(+), 217 deletions(-)

diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
index 7113e39..88db36b 100644
--- a/src/components/BaseHead.astro
+++ b/src/components/BaseHead.astro
@@ -4,9 +4,9 @@
 import '../styles/global.css';
 
 export interface Props {
-	title: string;
-	description: string;
-	image?: string;
+  title: string;
+  description: string;
+  image?: string;
 }
 
 const canonicalURL = new URL(Astro.url.pathname, Astro.site);
@@ -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} />
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 08395a4..3d57acb 100644
--- a/src/components/Footer.astro
+++ b/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;
-		text-align: center;
-	}
+  footer {
+    margin-top: 1.5rem;
+    padding: 1rem 0;
+    border-top: 1px solid #fff;
+    text-align: center;
+  }
 </style>
diff --git a/src/components/FormattedDate.astro b/src/components/FormattedDate.astro
index 1a40fbc..51f6cef 100644
--- a/src/components/FormattedDate.astro
+++ b/src/components/FormattedDate.astro
@@ -1,17 +1,11 @@
 ---
 export interface Props {
-	date: Date;
+  date: Date;
 }
 
 const { date } = Astro.props;
 ---
 
 <time datetime={date.toISOString()}>
-	{
-		date.toLocaleDateString('en-us', {
-			year: 'numeric',
-			month: 'short',
-			day: 'numeric',
-		})
-	}
+  {date.toISOString().substring(0, 10)}
 </time>
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 4d3da1f..aa907b1 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -1,25 +1,49 @@
 ---
 import HeaderLink from './HeaderLink.astro';
-import { SITE_TITLE } from '../consts';
 ---
 
 <header>
-	<h2>
-		{SITE_TITLE}
-	</h2>
-	<nav>
-		<HeaderLink href="/">Home</HeaderLink>
-		<HeaderLink href="/blog">Blog</HeaderLink>
-		<HeaderLink href="/about">About</HeaderLink>
-		<HeaderLink href="https://twitter.com/astrodotbuild" target="_blank">Twitter</HeaderLink>
-		<HeaderLink href="https://github.com/withastro/astro" target="_blank">GitHub</HeaderLink>
-	</nav>
+  <span class="logo cmr2-text">
+    <span>Maciej</span>
+    <span>Pędzich</span>
+  </span>
+  <nav class="cmr2-text" aria-label="Site navigation">
+    <HeaderLink href="/">Home</HeaderLink>
+    <HeaderLink href="/blog">Blog</HeaderLink>
+    <HeaderLink href="/projects">Projects</HeaderLink>
+    <HeaderLink href="/resume.pdf">Resume</HeaderLink>
+    <HeaderLink href="mailto:contact@maciejpedzi.ch">Email me</HeaderLink>
+    <HeaderLink href="/links">Links</HeaderLink>
+  </nav>
 </header>
+
 <style>
-	header {
-		margin: 0em 0 2em;
-	}
-	h2 {
-		margin: 0.5em 0;
-	}
+  @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>
diff --git a/src/components/HeaderLink.astro b/src/components/HeaderLink.astro
index 3dd439b..77501bb 100644
--- a/src/components/HeaderLink.astro
+++ b/src/components/HeaderLink.astro
@@ -10,15 +10,17 @@ const isActive = href === pathname || href === pathname.replace(/\/$/, '');
 ---
 
 <a href={href} class:list={[className, { active: isActive }]} {...props}>
-	<slot />
+  <slot />
 </a>
+
 <style>
-	a {
-		display: inline-block;
-		text-decoration: none;
-	}
-	a.active {
-		font-weight: bolder;
-		text-decoration: underline;
-	}
+  a.active {
+    color: #fff;
+  }
+  a.active,
+  a.active + a,
+  a:hover + a,
+  a + a:hover {
+    border-left-color: #fff;
+  }
 </style>
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
index a9526d0..0ccb988 100644
--- a/src/layouts/BlogPost.astro
+++ b/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,45 +8,29 @@ 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} />
-		<style>
-			.title {
-				font-size: 2em;
-				margin: 0.25em 0 0;
-			}
-			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>
-		<Footer />
-	</body>
+  <head>
+    <BaseHead title={title + ' - Maciej Pędzich'} description={description} />
+    <style>
+      .title {
+        font-size: 2em;
+        margin: 0;
+        text-align: center;
+      }
+    </style>
+  </head>
+  <body>
+    <Header />
+    <main>
+      <article>
+        <h1 class="title">{title}</h1>
+        <FormattedDate date={pubDate} />
+        <slot />
+      </article>
+    </main>
+    <Footer />
+  </body>
 </html>
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
index 0d656a1..1af04a9 100644
--- a/src/pages/blog/[...slug].astro
+++ b/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,
-	}));
+  const posts = await getCollection('blog');
+
+  return posts.map((post) => ({
+    params: { slug: post.slug },
+    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>
-	<Content />
+  {headings.length > 0 && <TableOfContents headings={headings} />}
+  <Content />
 </BlogPost>
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 47126e7..77cfc35 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -6,49 +6,38 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../../consts';
 import { getCollection } from 'astro:content';
 import FormattedDate from '../../components/FormattedDate.astro';
 
-const posts = (await getCollection('blog')).sort(
-	(a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf()
-);
+const posts = (
+  await getCollection('blog', (post) => import.meta.env.DEV || !post.data.draft)
+).sort((a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf());
 ---
 
 <!DOCTYPE html>
 <html lang="en">
-	<head>
-		<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
-		<style>
-			ul {
-				list-style-type: none;
-				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>
-	<body>
-		<Header />
-		<main>
-			<section>
-				<ul>
-					{
-						posts.map((post) => (
-							<li>
-								<FormattedDate date={post.data.pubDate} />
-								<a href={`/blog/${post.slug}/`}>{post.data.title}</a>
-							</li>
-						))
-					}
-				</ul>
-			</section>
-		</main>
-		<Footer />
-	</body>
+  <head>
+    <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
+    <style>
+      section {
+        text-align: center;
+      }
+    </style>
+  </head>
+  <body>
+    <Header />
+    <main>
+      <section>
+        <h2>My blog</h2>
+        <ul>
+          {
+            posts.map((post) => (
+              <li>
+                <FormattedDate date={post.data.pubDate} />
+                <a href={`/blog/${post.slug}/`}>{post.data.title}</a>
+              </li>
+            ))
+          }
+        </ul>
+      </section>
+    </main>
+    <Footer />
+  </body>
 </html>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 26f070d..6df80bb 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -2,49 +2,81 @@
 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';
 ---
 
 <!DOCTYPE html>
 <html lang="en">
-	<head>
-		<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
-	</head>
-	<body>
-		<Header title={SITE_TITLE} />
-		<main>
-			<h1>🧑‍🚀 Hello, Astronaut!</h1>
-			<p>
-				Welcome to the official <a href="https://astro.build/">Astro</a> blog starter template. This
-				template serves as a lightweight, minimally-styled starting point for anyone looking to build
-				a personal website, blog, or portfolio with Astro.
-			</p>
-			<p>
-				This template comes with a few integrations already configured in your
-				<code>astro.config.mjs</code> file. You can customize your setup with
-				<a href="https://astro.build/integrations">Astro Integrations</a> to add tools like Tailwind,
-				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>Edit the site header items in <code>src/components/Header.astro</code></li>
-				<li>Add your name to the footer in <code>src/components/Footer.astro</code></li>
-				<li>Check out the included blog posts in <code>src/pages/blog/</code></li>
-				<li>Customize the blog post page layout in <code>src/layouts/BlogPost.astro</code></li>
-			</ul>
-			<p>
-				Have fun! If you get stuck, remember to <a href="https://docs.astro.build/"
-					>read the docs
-				</a> or <a href="https://astro.build/chat">join us on Discord</a> to ask questions.
-			</p>
-			<p>
-				Looking for a blog template with a bit more personality? Check out <a
-					href="https://github.com/Charca/astro-blog-template"
-					>astro-blog-template
-				</a> by <a href="https://twitter.com/Charca">Maxi Ferreira</a>.
-			</p>
-		</main>
-		<Footer />
-	</body>
+  <head>
+    <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
+  </head>
+  <body>
+    <Header title={SITE_TITLE} />
+    <main>
+      <h2>Welcome to my website!</h2>
+      <p>
+        My name is <strong>Maciej</strong>, but if you don't know how to
+        pronounce it, then you can call me <strong>Mac</strong>. I'm an
+        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>
+        It serves as a means of documenting the development process and inner
+        workings of <a href="/projects">my applications</a>. Check out my latest
+        posts below:
+      </p>
+      <ul>
+        <li>
+          <FormattedDate date={new Date()} />
+          <a href="#">Lorem Ipsum</a>
+        </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>
+        If so, then make sure to follow me on <a
+          href="https://github.com/maciejpedzich"
+          target="_blank"
+          rel="noopener noreferrer">GitHub</a
+        >, <a
+          href="https://twitter.com/MaciejPedzich"
+          target="_blank"
+          rel="noopener noreferrer">Twitter</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>
diff --git a/src/styles/global.css b/src/styles/global.css
index 999782f..81a9533 100644
--- a/src/styles/global.css
+++ b/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;
-	margin: auto;
-	padding: 20px;
-	max-width: 65ch;
-	text-align: left;
-	background-color: #fff;
-	word-wrap: break-word;
-	overflow-wrap: break-word;
-	line-height: 1.5;
-	color: #444;
+  display: flex;
+  flex-direction: column;
+  max-width: min(65ch, 90%);
+  height: 100vh;
+  font-family: Arial, Helvetica, sans-serif;
+  margin: 0 auto;
+  padding: 0;
+  background-color: #485870;
+  color: #fff;
+  text-align: left;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  line-height: 1.8;
 }
+
 h1,
 h2,
-h3,
-h4,
-h5,
-h6,
-strong,
-b {
-	color: #222;
+h3 {
+  margin: 0;
+  font-weight: normal;
+  text-transform: lowercase;
 }
-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;
+  width: 100%;
+  font-size: 16px;
 }
+
 input {
-	font-size: 16px;
-}
-content {
-	line-height: 1.6;
+  font-size: 16px;
 }
+
 table {
-	width: 100%;
+  width: 100%;
 }
+
 img {
-	max-width: 100%;
-	height: auto;
+  max-width: 100%;
+  height: auto;
 }
+
 code {
-	padding: 2px 5px;
-	background-color: #f2f2f2;
+  padding: 2px 5px;
+  background-color: #222;
 }
+
 pre {
-	padding: 1rem;
+  padding: 1rem;
 }
+
 pre > code {
-	all: unset;
+  all: unset;
 }
+
 blockquote {
-	border: 1px solid #999;
-	color: #222;
-	padding: 2px 0px 2px 20px;
-	margin: 0px;
-	font-style: italic;
+  border: 1px solid #999;
+  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;
 }