feat: add email buttons
This commit is contained in:
parent
4b5bfef321
commit
8ef4c272fc
5 changed files with 100 additions and 50 deletions
|
|
@ -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>
|
||||
© {today.getFullYear()} {SITE_AUTHOR}. All rights reserved.
|
||||
<p>© {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,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.';
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
background-color: rgba(var(--black), 95%);
|
||||
box-shadow: 0 2px 8px rgba(var(--black), 5%);
|
||||
color: white;
|
||||
& a {
|
||||
text-decoration: none;
|
||||
color: rgb(var(--black));
|
||||
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 />
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
color: blue;
|
||||
& 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);
|
||||
}
|
||||
}
|
||||
.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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue