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(); const today = new Date();
--- ---
<footer> <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"> <div class="social-links">
<a href={SITE_AUTHOR_MASTODON} target="_blank"> <a href={SITE_AUTHOR_MASTODON} target="_blank">
<span class="sr-only">Follow Ayo on Mastodon</span> <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; background: linear-gradient(var(--gray-gradient)) no-repeat;
color: rgb(var(--gray)); color: rgb(var(--gray));
text-align: center; text-align: center;
& p {
margin-bottom: 0;
& a {
color: rgb(var(--gray));
&:hover {
color: rgb(var(--gray-dark));
}
}
}
} }
.social-links { .social-links {
display: flex; display: flex;

1
src/consts.ts
View file

@ -1,6 +1,7 @@
export const SITE_TITLE = 'Cozy Blog'; export const SITE_TITLE = 'Cozy Blog';
export const SITE_AUTHOR = 'Ayo Ayco'; export const SITE_AUTHOR = 'Ayo Ayco';
export const SITE_AUTHOR_URL = 'https://ayo.ayco.io'; 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_AUTHOR_MASTODON = 'https://social.ayco.io/@ayo';
export const SITE_PROJECT_REPO = 'https://github.com/ayoayco/Cozy'; export const SITE_PROJECT_REPO = 'https://github.com/ayoayco/Cozy';
export const SITE_DESCRIPTION = 'The Web is Yours.'; 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 Footer from "../components/blog/Footer.astro";
import FormattedDate from "../components/blog/FormattedDate.astro"; import FormattedDate from "../components/blog/FormattedDate.astro";
import type { CollectionEntry } from "astro:content"; 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"]; type Props = CollectionEntry<"blog">["data"];
@ -22,24 +22,51 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
} }
& .cta-wrapper { & .cta-wrapper {
width: 100%; width: 250px;
max-width: 100%;
text-align: center; text-align: center;
padding: 1em 0; 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;
border-radius: 5px; transition: 0.2s ease;
display: inline-block;
text-align: center;
padding: 0 0.5em;
}
& span.primary-btn:hover { &:has(span) {
background-color: var(--accent); border-radius: 5px;
box-shadow: 0 2px 8px var(--accent); 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 { .hero-image {
@ -135,12 +162,15 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
</div> </div>
<slot /> <slot />
</div> </div>
<hr />
</article> </article>
<hr />
<div class="cta-wrapper"> <div class="cta-wrapper">
<a href="/"> <a href="/">
<span class="primary-btn">Get Cozy!</span> <span class="primary-btn">Get Cozy!</span>
</a> </a>
<a href={`mailto:${SITE_AUTHOR_EMAIL}`}>
<span class="secondary-btn">Email Us</span>
</a>
</div> </div>
</main> </main>
<Footer /> <Footer />

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

@ -41,34 +41,46 @@ const posts = (await getCollection('blog')).sort(
color: rgb(var(--black)); color: rgb(var(--black));
position: relative; position: relative;
background-color: white; background-color: white;
}
.card img { & img {
width: 100%; width: 100%;
max-width: 800px; max-width: 800px;
} }
.card .title { & .title {
font-size: 2.369rem; font-size: 2.369rem;
margin: 1rem; margin: 1rem;
color: rgb(var(--black)); color: rgb(var(--black));
line-height: 1; line-height: 1;
} }
.card h4 a::after { & .description {
position: absolute; margin-bottom: 0;
left: 0; }
top: 0;
right: 0;
bottom: 0;
cursor: pointer;
}
.card h4 a { & h4 a::after {
color: blue; position: absolute;
} left: 0;
.card h4:hover a { top: 0;
text-decoration: underline; 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 { .date {
@ -83,12 +95,6 @@ const posts = (await getCollection('blog')).sort(
width: 100%; width: 100%;
text-align: center; text-align: center;
} }
ul li:first-child {
margin-bottom: 0;
}
ul li:first-child .title {
font-size: 1.563em;
}
} }
</style> </style>
</head> </head>

4
src/styles/blog.css
View file

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