feat: new CurrentVersion component; adjust styles

src/components/CurrentVersion.astro

@@ -0,0 +1,17 @@
+---
+import {VERSION} from '../consts'
+---
+
+<span class="current-version">{VERSION}</span>
+
+<style>
+    .current-version {
+        display: inline-block;
+        line-height: 1rem;
+        border-radius: 1rem;
+        padding: 0.2rem 0.5rem;
+        background-color: var(--accent);
+        color: white;
+        font-size: 0.9rem;
+    }
+</style>

src/components/Footer.astro

@@ -1,6 +1,7 @@
 ---
 import Icon from 'astro-iconify'
 import {VERSION} from '../consts';
+import CurrentVersion from './CurrentVersion.astro';
 ---
 
 <footer>
@@ -16,7 +17,7 @@ import {VERSION} from '../consts';
     <a href="https://github.com/ayoayco/cozy">GitHub</a> •
     <a href="https://social.ayco.io/@ayo">Mastodon</a>
     <br />
-    {VERSION}
+    <CurrentVersion />
   </section>
 
   <section class="disclaimer">All rights reserved to content owners.</section>

src/components/blog/BaseHead.astro

@@ -1,5 +1,6 @@
 ---
 import '../../styles/reset.css';
+import '../../styles/variables.css';
 import '../../styles/blog.css';
 import { SITE_TITLE, SITE_AUTHOR, SITE_DESCRIPTION } from '../../consts';
 

src/consts.ts

@@ -6,4 +6,5 @@ export const SITE_AUTHOR_MASTODON = 'https://social.ayco.io/@ayo';
 export const SITE_PROJECT_REPO = 'https://github.com/ayoayco/Cozy';
 export const SITE_DESCRIPTION = 'The Web is Yours.';
 
-export const VERSION = 'Quivering-Quacks';
+// export const VERSION = 'Quivering-Quacks';
+export const VERSION = 'Purple-Pizza';

src/layouts/BlogPost.astro

@@ -22,7 +22,7 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
 			}
 
 			& .cta-wrapper {
-				width: 250px;
+				width: 300px;
 				max-width: 100%;
 				text-align: center;
 				padding: 1em 0;
@@ -78,7 +78,7 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
 				border-radius: 12px;
 			}
 			.prose {
-				width: 720px;
+				width: 650px;
 				max-width: calc(100% - 2em);
 				margin: auto;
 				padding: 0 1em;
@@ -118,10 +118,17 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
 				main {
 					width: 100%;
 
-					.prose {
+					& .prose {
 						max-width: calc(100% - 1em);
 						padding: 0;
 					}
+
+					& .cta-wrapper {
+						width: 250px;
+						& a {
+							font-size: 0.75em;
+						}
+					}
 				}
 			}
 		</style>
@@ -162,7 +169,6 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
 					</div>
 					<slot />
 				</div>
-				<hr />
 			</article>
 			<div class="cta-wrapper">
 				<a href="/">

src/layouts/Layout.astro

@@ -1,6 +1,8 @@
 ---
 import { ArticleData } from "@extractus/article-extractor";
 import "../styles/reset.css";
+import '../styles/variables.css';
+
 import Footer from "../components/Footer.astro";
 export interface Props {
   article: ArticleData | null

src/styles/blog.css

@@ -4,18 +4,6 @@
   License MIT: https://github.com/HermanMartinus/bearblog/blob/master/LICENSE.md
  */
 
-:root {
-	--accent: #3054bf;
-	--accent-dark: #203880;
-	--black: 15, 18, 25;
-	--gray: 96, 115, 159;
-	--gray-light: 229, 233, 240;
-	--gray-dark: 34, 41, 57;
-	--gray-gradient: rgba(var(--gray-light), 50%), #fff;
-	--box-shadow: 0 2px 6px rgba(var(--gray), 25%), 0 8px 24px rgba(var(--gray), 33%),
-		0 16px 32px rgba(var(--gray), 33%);
-}
-
 @font-face {
 	font-family: 'Atkinson';
 	src: url('/fonts/atkinson-regular.woff') format('woff');

src/styles/variables.css

@@ -0,0 +1,12 @@
+:root {
+	--accent: #3054bf;
+	--accent-dark: #203880;
+	--black: 15, 18, 25;
+	--gray: 96, 115, 159;
+	--gray-light: 229, 233, 240;
+	--gray-dark: 34, 41, 57;
+	--gray-gradient: rgba(var(--gray-light), 50%), #fff;
+	--box-shadow: 0 2px 6px rgba(var(--gray), 25%), 0 8px 24px rgba(var(--gray), 33%),
+		0 16px 32px rgba(var(--gray), 33%);
+}
+