From 8ef4c272fc8b9a7377c57b2131b84f099c355231 Mon Sep 17 00:00:00 2001
From: ayoayco <ayo@ayco.io>
Date: Fri, 16 Aug 2024 15:52:07 +0200
Subject: [PATCH] feat: add email buttons

---
 src/components/blog/Footer.astro | 17 +++++++-
 src/consts.ts                    |  1 +
 src/layouts/BlogPost.astro       | 62 ++++++++++++++++++++++--------
 src/pages/blog/index.astro       | 66 +++++++++++++++++---------------
 src/styles/blog.css              |  4 +-
 5 files changed, 100 insertions(+), 50 deletions(-)

diff --git a/src/components/blog/Footer.astro b/src/components/blog/Footer.astro
index 12ef89c..4d2d6bb 100644
--- a/src/components/blog/Footer.astro
+++ b/src/components/blog/Footer.astro
@@ -1,10 +1,11 @@
 ---
-import { SITE_AUTHOR, SITE_AUTHOR_MASTODON, SITE_PROJECT_REPO } from "../../consts";
+import { SITE_AUTHOR, SITE_AUTHOR_EMAIL, SITE_AUTHOR_MASTODON, SITE_PROJECT_REPO } from "../../consts";
 const today = new Date();
 ---
 
 <footer>
-	&copy; {today.getFullYear()} {SITE_AUTHOR}. All rights reserved.
+	<p>&copy; {today.getFullYear()} {SITE_AUTHOR}. All rights reserved.</p>
+	<p>Get in touch: <a href={`mailto:${SITE_AUTHOR_EMAIL}`}>cozy at ayco.io</a></p>
 	<div class="social-links">
 		<a href={SITE_AUTHOR_MASTODON} target="_blank">
 			<span class="sr-only">Follow Ayo on Mastodon</span>
@@ -37,6 +38,18 @@ const today = new Date();
 		background: linear-gradient(var(--gray-gradient)) no-repeat;
 		color: rgb(var(--gray));
 		text-align: center;
+
+		& p {
+			margin-bottom: 0;
+
+			& a {
+				color: rgb(var(--gray));
+
+				&:hover {
+					color: rgb(var(--gray-dark));
+				}
+			}
+		}
 	}
 	.social-links {
 		display: flex;
diff --git a/src/consts.ts b/src/consts.ts
index efa8b59..16f2434 100644
--- a/src/consts.ts
+++ b/src/consts.ts
@@ -1,6 +1,7 @@
 export const SITE_TITLE = 'Cozy Blog';
 export const SITE_AUTHOR = 'Ayo Ayco';
 export const SITE_AUTHOR_URL = 'https://ayo.ayco.io';
+export const SITE_AUTHOR_EMAIL = 'cozy@ayco.io';
 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.';
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
index 5fc4831..6574cb0 100644
--- a/src/layouts/BlogPost.astro
+++ b/src/layouts/BlogPost.astro
@@ -4,7 +4,7 @@ import Header from "../components/blog/Header.astro";
 import Footer from "../components/blog/Footer.astro";
 import FormattedDate from "../components/blog/FormattedDate.astro";
 import type { CollectionEntry } from "astro:content";
-import { SITE_AUTHOR, SITE_AUTHOR_URL } from "../consts";
+import { SITE_AUTHOR, SITE_AUTHOR_URL, SITE_AUTHOR_EMAIL } from "../consts";
 
 type Props = CollectionEntry<"blog">["data"];
 
@@ -22,24 +22,51 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
 			}
 
 			& .cta-wrapper {
-				width: 100%;
+				width: 250px;
+				max-width: 100%;
 				text-align: center;
 				padding: 1em 0;
-			}
+				margin: 0 auto;
+				display: grid;
+				grid-template-columns: 1fr 1fr;
+				gap: 1rem;
 
-			& span.primary-btn {
-				background-color: rgba(var(--black), 95%);
-				box-shadow: 0 2px 8px rgba(var(--black), 5%);
-				color: white;
-				border-radius: 5px;
-				display: inline-block;
-				text-align: center;
-				padding: 0 0.5em;
-			}
+				& a {
+					text-decoration: none;
+					color: rgb(var(--black));
+					text-transform: uppercase;
+					transition: 0.2s ease;
 
-			& span.primary-btn:hover {
-				background-color: var(--accent);
-				box-shadow: 0 2px 8px var(--accent);
+					&:has(span) {
+						border-radius: 5px;
+						display: inline-block;
+						text-align: center;
+						padding: calc(0.5em + 4px) 0.5em 0.5em;
+						line-height: 1em;
+					}
+
+					&:has(span.secondary-btn) {
+						border: 1px solid rgba(var(--black), 95%);
+					}
+
+					&:has(span.primary-btn) {
+						background-color: rgba(var(--black), 95%);
+						box-shadow: 0 2px 8px rgba(var(--black), 5%);
+						color: white;
+					}
+
+					&:has(span.primary-btn:hover) {
+						background-color: var(--accent);
+						box-shadow: 0 2px 8px var(--accent);
+					}
+
+					&:has(span.secondary-btn:hover) { 
+						border-color: var(--accent);
+						color: var(--accent);
+						box-shadow: 0 2px 8px var(--accent);
+					}
+
+				}
 			}
 
 			.hero-image {
@@ -135,12 +162,15 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
 					</div>
 					<slot />
 				</div>
+				<hr />
 			</article>
-			<hr />
 			<div class="cta-wrapper">
 				<a href="/">
 					<span class="primary-btn">Get Cozy!</span>
 				</a>
+				<a href={`mailto:${SITE_AUTHOR_EMAIL}`}>
+					<span class="secondary-btn">Email Us</span>
+				</a>
 			</div>
 		</main>
 		<Footer />
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 71f95d9..52a2ca9 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -41,34 +41,46 @@ const posts = (await getCollection('blog')).sort(
 				color: rgb(var(--black));
 				position: relative;
 				background-color: white;
-			}
 
-			.card img {
-				width: 100%;
-				max-width: 800px;
-			}
+				& img {
+					width: 100%;
+					max-width: 800px;
+				}
 
-			.card .title {
-				font-size: 2.369rem;
-				margin: 1rem;
-				color: rgb(var(--black));
-				line-height: 1;
-			}
+				& .title {
+					font-size: 2.369rem;
+					margin: 1rem;
+					color: rgb(var(--black));
+					line-height: 1;
+				}
 
-			.card h4 a::after {
-				position: absolute;
-				left: 0;
-				top: 0;
-				right: 0;
-				bottom: 0;
-				cursor: pointer;
-			}
+				& .description {
+					margin-bottom: 0;
+				}
 
-			.card h4 a {
-				color: blue;
-			}
-			.card h4:hover a {
-				text-decoration: underline;
+				& h4 a::after {
+					position: absolute;
+					left: 0;
+					top: 0;
+					right: 0;
+					bottom: 0;
+					cursor: pointer;
+				}
+
+				& h4 {
+					text-decoration: underline !important;
+					color: var(--accent);
+					text-decoration-thickness: 2px !important;
+
+					& a {
+						color: rgb(var(--black));
+						text-decoration: none;
+					}
+
+					&:hover a {
+						color: var(--accent);
+					}
+				}
 			}
 
 			.date {
@@ -83,12 +95,6 @@ const posts = (await getCollection('blog')).sort(
 					width: 100%;
 					text-align: center;
 				}
-				ul li:first-child {
-					margin-bottom: 0;
-				}
-				ul li:first-child .title {
-					font-size: 1.563em;
-				}
 			}
 		</style>
 	</head>
diff --git a/src/styles/blog.css b/src/styles/blog.css
index 5351abc..6a9cff7 100644
--- a/src/styles/blog.css
+++ b/src/styles/blog.css
@@ -5,8 +5,8 @@
  */
 
 :root {
-	--accent: #2337ff;
-	--accent-dark: #000d8a;
+	--accent: #3054bf;
+	--accent-dark: #203880;
 	--black: 15, 18, 25;
 	--gray: 96, 115, 159;
 	--gray-light: 229, 233, 240;