From fe125306800ffe6db8d5b468406c340dfa3561f9 Mon Sep 17 00:00:00 2001
From: ayoayco <ayo@ayco.io>
Date: Fri, 16 Aug 2024 16:47:38 +0200
Subject: [PATCH] feat: new CurrentVersion component; adjust styles

---
 src/components/CurrentVersion.astro | 17 +++++++++++++++++
 src/components/Footer.astro         |  3 ++-
 src/components/blog/BaseHead.astro  |  1 +
 src/consts.ts                       |  3 ++-
 src/layouts/BlogPost.astro          | 14 ++++++++++----
 src/layouts/Layout.astro            |  2 ++
 src/styles/blog.css                 | 12 ------------
 src/styles/variables.css            | 12 ++++++++++++
 8 files changed, 46 insertions(+), 18 deletions(-)
 create mode 100644 src/components/CurrentVersion.astro
 create mode 100644 src/styles/variables.css

diff --git a/src/components/CurrentVersion.astro b/src/components/CurrentVersion.astro
new file mode 100644
index 0000000..1be778e
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 414947d..12ccb36 100644
--- a/src/components/Footer.astro
+++ b/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>
diff --git a/src/components/blog/BaseHead.astro b/src/components/blog/BaseHead.astro
index 1978c7c..725f932 100644
--- a/src/components/blog/BaseHead.astro
+++ b/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';
 
diff --git a/src/consts.ts b/src/consts.ts
index 16f2434..48ea9e1 100644
--- a/src/consts.ts
+++ b/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';
\ No newline at end of file
+// export const VERSION = 'Quivering-Quacks';
+export const VERSION = 'Purple-Pizza';
\ No newline at end of file
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
index 6574cb0..79dcc08 100644
--- a/src/layouts/BlogPost.astro
+++ b/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="/">
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 63c6287..7753643 100644
--- a/src/layouts/Layout.astro
+++ b/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
diff --git a/src/styles/blog.css b/src/styles/blog.css
index 6a9cff7..1fc1a05 100644
--- a/src/styles/blog.css
+++ b/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');
diff --git a/src/styles/variables.css b/src/styles/variables.css
new file mode 100644
index 0000000..5a72d30
--- /dev/null
+++ b/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%);
+}
+