feat: add email buttons

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;

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.';

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,26 +22,53 @@ 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 {
+				& a {
-				background-color: rgba(var(--black), 95%);
+					text-decoration: none;
-				box-shadow: 0 2px 8px rgba(var(--black), 5%);
+					color: rgb(var(--black));
-				color: white;
+					text-transform: uppercase;
+					transition: 0.2s ease;
+
+					&:has(span) {
 						border-radius: 5px;
 						display: inline-block;
 						text-align: center;
-				padding: 0 0.5em;
+						padding: calc(0.5em + 4px) 0.5em 0.5em;
+						line-height: 1em;
 					}
 
-			& span.primary-btn:hover {
+					&: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 {
 				width: 100%;
 			}
@@ -135,12 +162,15 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
 					</div>
 					<slot />
 				</div>
-			</article>
 				<hr />
+			</article>
 			<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 />

src/pages/blog/index.astro

@@ -41,21 +41,24 @@ const posts = (await getCollection('blog')).sort(
 				color: rgb(var(--black));
 				position: relative;
 				background-color: white;
-			}
 
-			.card img {
+				& img {
 					width: 100%;
 					max-width: 800px;
 				}
 
-			.card .title {
+				& .title {
 					font-size: 2.369rem;
 					margin: 1rem;
 					color: rgb(var(--black));
 					line-height: 1;
 				}
 
-			.card h4 a::after {
+				& .description {
+					margin-bottom: 0;
+				}
+
+				& h4 a::after {
 					position: absolute;
 					left: 0;
 					top: 0;
@@ -64,11 +67,20 @@ const posts = (await getCollection('blog')).sort(
 					cursor: pointer;
 				}
 
-			.card h4 a {
+				& h4 {
-				color: blue;
+					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);
+					}
 				}
-			.card h4:hover a {
-				text-decoration: underline;
 			}
 
 			.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>

src/styles/blog.css

@@ -5,8 +5,8 @@
  */
 
 :root {
-	--accent: #2337ff;
+	--accent: #3054bf;
-	--accent-dark: #000d8a;
+	--accent-dark: #203880;
 	--black: 15, 18, 25;
 	--gray: 96, 115, 159;
 	--gray-light: 229, 233, 240;