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

feat(blog): a11y & various style improvements; add author

Browse source
This commit is contained in:
Ayo Ayco 2024-08-16 10:30:20 +02:00
parent 9bddaef73b
commit 75fe8b96d2
7 changed files with 111 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/ayoayco-avatar.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 84 KiB

2
src/components/blog/BaseHead.astro
View file

@ -21,7 +21,7 @@ description = title === SITE_TITLE
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
<meta name="generator" content={Astro.generator} />
<!-- Font preloads -->

1
src/consts.ts
View file

@ -1,5 +1,6 @@
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_MASTODON = 'https://social.ayco.io/@ayo';
export const SITE_PROJECT_REPO = 'https://github.com/ayoayco/Cozy';
export const SITE_DESCRIPTION = 'The Web is Yours.';

2
src/content/blog/building-a-cozy-web.md
View file

@ -5,7 +5,7 @@ pubDate: 'Aug 14 2024'
heroImage: '/cozy.jpg'
---
> This was originally posted on [Ayo's Blog](https://ayos.blog/building-a-cozy-web).
> This was originally posted on [Ayo's Blog](https://ayos.blog/building-a-cozy-web) last Jun 1, 2023.
Have you ever clicked a link to an article, all hyped up to read the content, only to be slapped in the face with popups over popups of requests to subscribe and asking consent to track you with cookies?

56
src/layouts/BlogPost.astro
View file

@ -4,6 +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";
type Props = CollectionEntry<"blog">["data"];
@ -17,8 +18,30 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
main {
width: calc(100% - 2em);
max-width: 100%;
margin: 0;
margin: 0 auto;
}
& .cta-wrapper {
width: 100%;
text-align: center;
padding: 1em 0;
}
& 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;
}
& span.primary-btn:hover {
background-color: var(--accent);
box-shadow: 0 2px 8px var(--accent);
}
.hero-image {
width: 100%;
}
@ -26,13 +49,12 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
display: block;
margin: 0 auto;
border-radius: 12px;
box-shadow: var(--box-shadow);
}
.prose {
width: 720px;
max-width: calc(100% - 2em);
margin: auto;
padding: 1em;
padding: 0 1em;
color: rgb(var(--gray-dark));
}
.title {
@ -40,9 +62,23 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
padding: 1em 0;
text-align: center;
line-height: 1;
& .avatar {
width: 32px;
height: 32px;
border-radius: 50%;
display: inline;
/* height: calc(1rem + 6px); */
margin: 0 0.5rem;
margin-bottom: -10px;
}
& a[rel='author'] {
color: rgb(var(--black));
}
& a[rel='author']:hover {
color: var(--accent);
}
.title h1 {
margin: 0 0 0.5em 0;
}
.date {
margin-bottom: 0.5em;
@ -93,11 +129,19 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
}
</div>
<h1>{title}</h1>
<hr />
<address style="display:inline">
By <img class="avatar" src="/ayoayco-avatar.jpg" alt="Ayo Ayco's Avatar" /> <a rel="author" href={ SITE_AUTHOR_URL }>{ SITE_AUTHOR }</a>
</address>
</div>
<slot />
</div>
</article>
<hr />
<div class="cta-wrapper">
<a href="/">
<span class="primary-btn">Get Cozy!</span>
</a>
</div>
</main>
<Footer />
</body>

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

@ -17,7 +17,7 @@ const posts = (await getCollection('blog')).sort(
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
<style>
main {
width: 960px;
width: 700px;
}
ul {
display: flex;
@ -27,48 +27,54 @@ const posts = (await getCollection('blog')).sort(
margin: 0;
padding: 0;
}
ul li {
width: calc(50% - 1rem);
}
ul li * {
text-decoration: none;
transition: 0.2s ease;
}
ul li:first-child {
.card {
border: 1px solid rgb(var(--gray));
border-radius: 12px;
width: 100%;
padding: 1em;
margin-bottom: 1rem;
text-align: center;
color: rgb(var(--black));
position: relative;
background-color: white;
}
ul li:first-child img {
.card img {
width: 100%;
max-width: 800px;
}
ul li:first-child .title {
.card .title {
font-size: 2.369rem;
}
ul li img {
margin-bottom: 0.5rem;
border-radius: 12px;
}
ul li a {
display: block;
}
.title {
margin: 0;
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;
}
.card h4 a {
color: blue;
}
.card h4:hover a {
text-decoration: underline;
}
.date {
margin: 0;
color: rgb(var(--gray));
}
ul li a:hover h4,
ul li a:hover .date {
color: rgb(var(--accent));
}
ul a:hover img {
box-shadow: var(--box-shadow);
}
@media (max-width: 720px) {
ul {
gap: 0.5em;
@ -93,18 +99,23 @@ const posts = (await getCollection('blog')).sort(
<ul>
{
posts.map((post) => (
<li>
<a href={`/blog/${post.slug}/`}>
{
<li class="card">
{/* {
post.data.heroImage
? <img width={720} height={360} src={post.data.heroImage} alt="" />
: <img width={720} height={360} src="/blog-placeholder-4.jpg" alt="" />
}
<h4 class="title">{post.data.title}</h4>
<p class="date">
} */}
<small class="date">
<FormattedDate date={post.data.pubDate} />
</p>
</small>
<h4 class="title">
<a href={`/blog/${post.slug}/`}>
{post.data.title}
</a>
</h4>
<p class="description">
{post.data.description}
</p>
</li>
))
}

29
src/styles/blog.css
View file

@ -48,10 +48,10 @@ body {
}
main {
width: 720px;
width: 700px;
max-width: calc(100% - 2em);
margin: auto;
padding: 3em 1em;
padding: 1em;
}
h1,
@ -66,25 +66,25 @@ h6 {
}
h1 {
font-size: 3.052em;
}
h2 {
font-size: 2.441em;
}
h3 {
h2 {
font-size: 1.953em;
}
h4 {
h3 {
font-size: 1.563em;
}
h5 {
h4 {
font-size: 1.25em;
}
h5 {
font-size: 1.15em;
}
strong,
b {
font-weight: 700;
@ -101,7 +101,8 @@ a:hover {
p,
ul,
ol,
table {
table,
pre.astro-code {
margin-bottom: 1em;
}
@ -111,7 +112,7 @@ table {
& ul,
& ol,
& table {
margin-bottom: 2em;
margin-bottom: 1em;
}
}
@ -150,10 +151,10 @@ pre>code {
}
blockquote {
border-left: 4px solid var(--accent);
padding: 0 0 0 20px;
border-left: 2px solid var(--accent);
padding: 0 0 0 1em;
margin: 0px;
font-size: 1.333em;
font-size: 1em;
}
hr {