ayo/cozy
ayo/cozy
1
Fork 0
Code Issues 2 Pull requests 1 Projects Releases Packages Wiki Activity Actions

feat: add email buttons

Browse source
This commit is contained in:
Ayo Ayco 2024-08-16 15:52:07 +02:00
parent 4b5bfef321
commit 8ef4c272fc
5 changed files with 100 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/components/blog/Footer.astro
View file

@ -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;

1
src/consts.ts
View file

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

62
src/layouts/BlogPost.astro
View file

@ -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 />

66
src/pages/blog/index.astro
View file

@ -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>

4
src/styles/blog.css
View file

@ -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;