diff --git a/src/components/AuthorCard/index.astro b/src/components/AuthorCard/index.astro
index a6927c4..b58f9f0 100644
--- a/src/components/AuthorCard/index.astro
+++ b/src/components/AuthorCard/index.astro
@@ -28,9 +28,7 @@ const description = await parseMarkdown(body);
 	</a>
 
 	<div class="author-bio">
-		<small>
-			{/* eslint-disable-next-line astro/no-set-html-directive */}
-			<Fragment set:html={description} />
-		</small>
+		{/* eslint-disable-next-line astro/no-set-html-directive */}
+		<Fragment set:html={description} />
 	</div>
 </div>
diff --git a/src/components/AuthorCard/styles.css b/src/components/AuthorCard/styles.css
index 90244e8..1a4a01b 100644
--- a/src/components/AuthorCard/styles.css
+++ b/src/components/AuthorCard/styles.css
@@ -1,17 +1,21 @@
 .author-card {
 	display: grid;
-	padding-inline: var(--spacing-large);
-	grid-template-columns: 1fr auto;
-	grid-template-rows: 1fr auto;
-	gap: var(--spacing-large);
+	padding-inline: var(--size-3);
+	grid-template-columns: auto 1fr;
+	grid-template-rows: auto 1fr;
+	gap: var(--size-3);
 	place-items: center;
 	grid-template-areas:
 		"avatar name"
 		"avatar bio";
-	margin: var(--spacing-large) 0;
+	margin: var(--size-3) 0;
 }
 
-.author-card .author-name * { margin: 0; }
+.author-card .author-name * {
+	margin: 0;
+	color: var(--tjs-red-6);
+	text-shadow: var(--size-1) var(--size-1) var(--gray-12);
+}
 
 .author-card .author-picture {
 	grid-area: avatar;
@@ -22,7 +26,12 @@
 	grid-area: name;
 	justify-self: start;
 }
-.author-card .author-bio { grid-area: bio; }
+
+.author-card .author-bio {
+	grid-area: bio;
+	width: 100%;
+	place-self: start start;
+}
 
 @media (max-width: 768px) {
 	.author-card {
diff --git a/src/components/Avatar/styles.css b/src/components/Avatar/styles.css
index ac8e9f3..36188be 100644
--- a/src/components/Avatar/styles.css
+++ b/src/components/Avatar/styles.css
@@ -1,12 +1,15 @@
 .user-avatar {
-	--image-size: var(--avatar-size);
+	--image-size: var(--size-13);
 
 	display: block;
 
 	width: var(--image-size);
 	height: var(--image-size);
-	border-radius: 100vmax;
+	aspect-ratio: var(--ratio-square);
+	border-radius: var(--radius-round);
 	overflow: hidden;
+	border: solid var(--tjs-red-6) var(--size-2);
+	box-shadow: var(--size-1) var(--size-1) var(--gray-12);
 }
 
 .user-avatar img {
@@ -17,5 +20,5 @@
 }
 
 @media (max-width: 768px) {
-	.user-avatar { --image-size: var(--avatar-small-size); }
+	.user-avatar { --image-size: var(--size-12); }
 }
diff --git a/src/components/PostHeader/index.astro b/src/components/PostHeader/index.astro
index 0ca0eef..a8c35ee 100644
--- a/src/components/PostHeader/index.astro
+++ b/src/components/PostHeader/index.astro
@@ -53,32 +53,36 @@ const formatter = new Intl.DateTimeFormat('en-US', { dateStyle: 'long', timeStyl
 		</blockquote>
 
 		<aside id="post-metadata">
-			<small>
-				<span>
+			<p>
+				<small>
 					Published on <time itemprop="datePublished" class="dt-published" datetime={createdAt.toISOString()}>{formatter.format(createdAt)}</time>.
-				</span>
+				</small>
+			</p>
 
-				{updatedAt && (
-					<span>
+			{updatedAt && (
+				<p>
+					<small>
 						Updated on <time itemprop="dateModified" class="dt-updated" datetime={updatedAt.toISOString()}>{formatter.format(updatedAt)}</time>
 						{hasUpdates && (
 							<a href="#update-history" aria-label="Go to updates section">
 								<Icon name="uil:sync-exclamation" />
 							</a>
 						)}
-					</span>
-				)}
-			</small>
+					</small>
+				</p>
+			)}
 
 			{readingTime && (
-				<small>
-					<time itemprop="timeRequired" class="dt-duration" datetime={`PT${readingTime}M`}>
-						{readingTime} minute read
-					</time>
-					{wordCount && (
-						<span> &mdash; {wordCount} words</span>
-					)}
-				</small>
+				<p>
+					<small>
+						<time itemprop="timeRequired" class="dt-duration" datetime={`PT${readingTime}M`}>
+							{readingTime} minute read
+						</time>
+						{wordCount && (
+							<span> &mdash; {wordCount} words</span>
+						)}
+					</small>
+				</p>
 			)}
 		</aside>
 
diff --git a/src/components/PostHeader/styles.css b/src/components/PostHeader/styles.css
index e9860aa..bc9b6d2 100644
--- a/src/components/PostHeader/styles.css
+++ b/src/components/PostHeader/styles.css
@@ -2,29 +2,18 @@
 	width: 100%;
 	max-width: var(--max-width);
 	margin-inline: auto;
+	margin-block-end: var(--size-8);
 }
 
 #post-header-wrapper {
 	justify-self: stretch;
 	display: grid;
 	place-items: end center;
-	gap: var(--spacing-large);
+	gap: var(--size-3);
 	grid-template-rows: 1fr auto auto auto;
-	grid-template-columns: 1fr 1fr;
+	grid-template-columns: 100%;
 	grid-template-areas:
-		'title hero-image'
-		'summary hero-image'
-		'metadata metadata'
-		'share share';
-	padding: var(--spacing-large);
-	margin: var(--spacing-large);
-}
-
-#post-header-wrapper:not(:has(#hero-image)) {
-	grid-template-rows: 1fr auto auto auto;
-	grid-template-columns: 1fr;
-	grid-template-areas:
-		'title'
+		'hero-title'
 		'summary'
 		'metadata'
 		'share';
@@ -32,7 +21,7 @@
 
 #post-header h1 {
 	height: auto;
-	font-size: clamp(2rem, 5vmax, 4rem);
+	font-size: var(--font-size-fluid-3);
 	font-weight: bold;
 
 	overflow-wrap: break-word;
@@ -53,13 +42,34 @@
 	padding: 0;
 }
 
-#post-header #post-title { grid-area: title; }
+#post-header #post-title {
+	grid-area: hero-title;
+	z-index: 1;
+	place-self: end end;
+
+	background-color: white;
+	color: var(--tjs-red-6);
+	text-decoration-color: currentcolor;
+	padding: var(--size-3) var(--size-4);
+	border-start-start-radius: var(--radius-4);
+	border-end-start-radius: var(--radius-4);
+	border: var(--tjs-red-6) solid var(--size-2);
+	border-inline-end: none;
+	margin-block-end: var(--size-7);
+}
+
+#post-header-wrapper:not(:has(#hero-image)) #post-title {
+	margin-block: 0;
+	border-inline: none;
+	border-radius: 0;
+	width: 100%;
+}
 
 #post-header #hero-image {
 	width: 100%;
 	height: 100%;
 	object-fit: contain;
-	grid-area: hero-image;
+	grid-area: hero-title;
 	overflow: hidden;
 }
 
@@ -67,7 +77,8 @@
 	border: none;
 	font-size: smaller;
 	margin: 0;
-	padding: var(--spacing-large);
+	padding: var(--size-1);
+	font-style: italic;
 	grid-area: summary;
 }
 
@@ -76,17 +87,8 @@
 }
 
 #post-metadata {
-	width: 100%;
 	grid-area: metadata;
 	text-align: center;
-	display: flex;
-	flex-flow: column wrap;
-	justify-content: center;
-	gap: var(--spacing-medium);
-}
-
-#post-metadata a {
-	vertical-align: middle;
 }
 
 #post-share {
@@ -95,28 +97,28 @@
 	flex-wrap: wrap;
 	justify-content: center;
 	align-items: center;
-	gap: var(--spacing-large);
+	gap: var(--size-3);
 }
 
 #post-share button {
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	width: var(--button-size);
-	height: var(--button-size);
-	padding: var(--spacing-medium);
+	height: var(--size-7);
+	padding: var(--size-1) var(--size-2);
 }
 
 #post-share button svg {
-	width: 100%;
 	height: 100%;
+	aspect-ratio: var(--ratio-square);
 	pointer-events: none;
 }
 
+
 @media (max-width: 650px) {
 	#post-header-wrapper {
 		grid-template-rows: 1fr auto auto auto auto;
-		grid-template-columns: 1fr;
+		grid-template-columns: 100%;
 		grid-template-areas:
 			'hero-image'
 			'title'
@@ -124,4 +126,22 @@
 			'metadata'
 			'share';
 	}
+
+	#post-header #post-title {
+		grid-area: title;
+		margin-block: calc(var(--size-3) * -1) 0;
+		border-inline: none;
+		border-radius: 0;
+	}
+
+	#post-header #hero-image {
+		grid-area: hero-image;
+	}
+}
+
+@media (min-width: 1025px) {
+	#post-header #post-title,
+	#post-header-wrapper:not(:has(#hero-image)) #post-title {
+		border: var(--tjs-red-6) solid var(--size-2);
+	}
 }
diff --git a/src/components/RefreshBanner/index.astro b/src/components/RefreshBanner/index.astro
index d55a2fc..9ab1bde 100644
--- a/src/components/RefreshBanner/index.astro
+++ b/src/components/RefreshBanner/index.astro
@@ -9,14 +9,15 @@ import './styles.css';
 	id="pwa-toast"
 	role="alert"
 	aria-labelledby="toast-message"
+	aria-live="polite"
 >
 	<div>
 		<span id="toast-message"></span>
 	</div>
-	<button id="pwa-refresh" aria-label="Reload page">
-		<Icon name="uil:refresh" title="Reload" />
+	<button id="pwa-refresh" type="button" aria-label="Reload page">
+		<Icon name="uil:refresh" title="Reload icon of two arrows forming a circle." />
 	</button>
-	<button id="pwa-close" aria-label="Close notification">
-		<Icon name="uil:check" title="Close" />
+	<button id="pwa-close" type="button" aria-label="Close notification">
+		<Icon name="uil:check" title="Close &quot;X&quot; icon." />
 	</button>
 </div>
diff --git a/src/components/RefreshBanner/script.ts b/src/components/RefreshBanner/script.ts
index 482ad5c..5599d7b 100644
--- a/src/components/RefreshBanner/script.ts
+++ b/src/components/RefreshBanner/script.ts
@@ -1,18 +1,32 @@
 import { registerSW } from 'virtual:pwa-register';
 
-window.addEventListener('DOMContentLoaded', () => {
+const params = new URLSearchParams(document.location.search.substring(1));
+
+function setPwaMessage(type: 'offline' | 'refresh') {
 	const pwaToast = document.querySelector('#pwa-toast') as HTMLDivElement;
 	const pwaToastMessage = pwaToast.querySelector('#toast-message') as HTMLDivElement;
 
+	switch (type) {
+		case 'refresh':
+			pwaToastMessage.innerHTML = 'New content available, click on reload button to update.';
+			pwaToast.dataset['refresh'] = 'true';
+			break;
+		case 'offline':
+			pwaToastMessage.innerHTML = 'App ready to work offline.';
+			pwaToast.dataset['offline'] = 'true';
+			break;
+		default:
+	}
+}
+
+window.addEventListener('DOMContentLoaded', () => {
 	const refreshSW = registerSW({
 		immediate: true,
 		onOfflineReady() {
-			pwaToastMessage.innerHTML = 'Blog ready to work offline.';
-			pwaToast.dataset['offline'] = 'true';
+			setPwaMessage('offline');
 		},
 		onNeedRefresh() {
-			pwaToastMessage.innerHTML = 'New content available, click on reload button to update.';
-			pwaToast.dataset['refresh'] = 'true';
+			setPwaMessage('refresh');
 		},
 		onRegisteredSW(swScriptUrl) {
 			// eslint-disable-next-line no-console
@@ -26,14 +40,30 @@ window.addEventListener('DOMContentLoaded', () => {
 		if (target.matches('#pwa-close')) {
 			requestAnimationFrame(() => {
 				document.body.removeEventListener('click', pwaEventListener);
-				pwaToast.remove();
+				document.querySelector('#pwa-toast')?.remove();
+
+				params.delete('debug');
+
+				if (params.size > 0) {
+					document.location.search = params.toString();
+				}
 			});
 		}
 
 		if (target.matches('#pwa-refresh')) {
+			params.delete('debug');
+
+			if (params.size > 0) {
+				document.location.search = params.toString();
+			}
+
 			requestAnimationFrame(async () => refreshSW(true));
 		}
 	};
 
+	if (params.get('debug')?.startsWith('pwa-')) {
+		setPwaMessage((params.get('debug')?.replace('pwa-', '') ?? '') as 'offline' | 'refresh');
+	}
+
 	document.body.addEventListener('click', pwaEventListener);
 });
diff --git a/src/components/RefreshBanner/styles.css b/src/components/RefreshBanner/styles.css
index 60ab7c0..1407e1c 100644
--- a/src/components/RefreshBanner/styles.css
+++ b/src/components/RefreshBanner/styles.css
@@ -2,17 +2,20 @@
 	visibility: hidden;
 	position: fixed;
 	display: flex;
-	gap: var(--spacing-medium);
+	gap: var(--size-2);
 	align-items: center;
 	justify-content: space-between;
 
-	width: clamp(var(--min-width), 100%, var(--medium-width));
+	width: clamp(320px, (100% - var(--size-2) * 2), var(--max-width));
 	inset-inline: 0;
-	inset-block-end: var(--spacing-small);
-	margin-inline: auto;
-	padding: var(--spacing-medium) var(--spacing-large);
+	inset-block-end: 0;
+	margin: var(--size-2);
+	padding: var(--size-2) var(--size-3);
+	border-radius: var(--radius-3);
 
-	z-index: 1;
+	background-color: var(--gray-12);
+
+	z-index: calc(1 * infinity);
 }
 
 #pwa-toast:is([data-offline], [data-refresh]) {
@@ -27,15 +30,13 @@
 #pwa-toast button {
 	display: none;
 	place-items: center;
-	padding: var(--spacing-small);
-	width: var(--button-size);
-	height: var(--button-size);
-	cursor: pointer;
+	padding: var(--size-1);
 }
 
 #pwa-toast button svg {
 	width: 100%;
 	height: 100%;
+	aspect-ratio: var(--ratio-square);
 	pointer-events: none;
 }
 
diff --git a/src/components/SiteFooter/styles.css b/src/components/SiteFooter/styles.css
index d06f73d..8254e8d 100644
--- a/src/components/SiteFooter/styles.css
+++ b/src/components/SiteFooter/styles.css
@@ -1,4 +1,4 @@
-ul {
+#bottom-nav ul {
 	display: flex;
 	gap: 0.5rem;
 	justify-content: center;
diff --git a/src/components/SiteNav/styles.css b/src/components/SiteNav/styles.css
index 25c7867..e0fe2d6 100644
--- a/src/components/SiteNav/styles.css
+++ b/src/components/SiteNav/styles.css
@@ -1,25 +1,12 @@
-nav {
-	padding: .5rem;
-	--tw-bg-opacity: 1;
-    background-color: rgb(19 17 11 / var(--tw-bg-opacity));
+#site-nav {
+	padding: var(--size-2);
+	background-color: rgb(19 17 11);
 	font-weight: bold;
-	--tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--tw-text-opacity))
-
-}
-
-ul {
-	display: flex;
-	gap: 0.5rem;
-	justify-content: center;
-	align-items: center;
-	padding: 0.75rem;
+	color: white;
 }
 
-a {
-	display: inline-flex;
+#site-nav ul {
+	gap: var(--size-2);
 	align-items: center;
-	gap: 1rem;
-	overflow-wrap: break-word;
-	margin-left: 0.75rem
+	padding: var(--size-3);
 }
diff --git a/src/components/SkipToContent/styles.css b/src/components/SkipToContent/styles.css
index 1ef6228..0c1cb6c 100644
--- a/src/components/SkipToContent/styles.css
+++ b/src/components/SkipToContent/styles.css
@@ -1,18 +1,22 @@
 #skip-to-main {
 	position: absolute;
-	inset-inline: var(--spacing-medium);
+	inset-inline: var(--size-3);
 	inset-block-start: -100%;
 	text-align: center;
-	padding: var(--spacing-medium);
+	padding: var(--size-3);
 	z-index: calc(infinity * 1);
 	display: block;
+	background-color: var(--gray-0);
+	color: var(--gray-12);
+	font-size: var(--font-size-3);
+	font-weight: bold;
 }
 
 #skip-to-main:focus {
-	inset-block-start: var(--spacing-medium);
+	inset-block-start: var(--size-3);
 }
 
 :target {
 	scroll-snap-align: start;
-	scroll-margin: var(--spacing-large);
+	scroll-margin: var(--size-5);
 }
diff --git a/src/components/TagList/index.astro b/src/components/TagList/index.astro
index 8f663e6..41f19d9 100644
--- a/src/components/TagList/index.astro
+++ b/src/components/TagList/index.astro
@@ -1,4 +1,6 @@
 ---
+import './styles.css';
+
 interface Props {
 	title?: string,
 	tags: Record<string, string>,
@@ -9,9 +11,9 @@ const { title, tags, isOpen } = Astro.props;
 ---
 <details class="tag-list" open={isOpen}>
 	<summary>{title ?? 'Tags'}</summary>
-	<ul class="flex flex-wrap justify-start gap-2 pt-2">
+	<ul>
 		{Object.entries(tags).map(([tag, url]) => (
-			<li class="p-category tag rounded-md bg-lightGrey px-2 py-1 text-black underline underline-offset-2 decoration-2 decoration-mainRed hover:text-white hover:bg-black hover:decoration-lightRed hover:decoration-4"><a href={url}>{tag}</a></li>
+			<li class="p-category tag"><a href={url}>{tag}</a></li>
 		))}
 	</ul>
 </details>
diff --git a/src/components/TagList/styles.css b/src/components/TagList/styles.css
new file mode 100644
index 0000000..c5ba187
--- /dev/null
+++ b/src/components/TagList/styles.css
@@ -0,0 +1,11 @@
+.tag-list, .tag-list summary {
+	background: none;
+}
+
+.tag-list ul {
+	display: flex;
+	margin: 0;
+	padding-inline-start: 0;
+	list-style: none;
+	gap: var(--size-2);
+}
diff --git a/src/layouts/Base/base.css b/src/layouts/Base/base.css
index cc8a7d4..1d3abf6 100644
--- a/src/layouts/Base/base.css
+++ b/src/layouts/Base/base.css
@@ -53,5 +53,9 @@ iframe {
 	width: 100%;
 	height: auto;
 	max-height: 100%;
-	aspect-ratio: 3 / 2;
+	aspect-ratio: var(--ratio-landscape);
+}
+
+a {
+	overflow-wrap: break-word;
 }
diff --git a/src/layouts/Base/variables.css b/src/layouts/Base/variables.css
index a005776..f2c58b4 100644
--- a/src/layouts/Base/variables.css
+++ b/src/layouts/Base/variables.css
@@ -2,6 +2,9 @@
 	/* Base size */
 	--body-text: 20px;
 
+	/* Max width for part of the page to grow */
+	--max-width: 1024px;
+
 	/* Theme colors */
 	--tjs-red-0: #fec2b8;
 	--tjs-red-1: #ffad9e;