feat: add author card to bottom of blog posts
This commit is contained in:
Ogulcan Celik
parent
995a429cb8
commit
705403fe31
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
|
|
@ -3061,6 +3061,75 @@ td:last-child {
|
|||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.author-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.1rem;
|
||||
margin-top: 3.5rem;
|
||||
padding: 1.4rem 1.5rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-lg);
|
||||
background: color-mix(in srgb, var(--bg-elevated) 60%, transparent);
|
||||
}
|
||||
|
||||
.author-photo {
|
||||
flex: none;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.author-body {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.author-name {
|
||||
margin: 0;
|
||||
color: var(--ink);
|
||||
font-size: 1.05rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.author-role {
|
||||
margin: 0.1rem 0 0;
|
||||
color: color-mix(in srgb, var(--ink) 56%, var(--muted));
|
||||
font-family: var(--mono);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.author-links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.55rem;
|
||||
margin-top: 0.8rem;
|
||||
}
|
||||
|
||||
.author-links a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
padding: 0.35rem 0.7rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-md);
|
||||
color: color-mix(in srgb, var(--ink) 78%, var(--muted));
|
||||
font-size: 0.82rem;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
transition: color 0.15s ease, border-color 0.15s ease;
|
||||
}
|
||||
|
||||
.author-links a:hover {
|
||||
color: var(--accent);
|
||||
border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
|
||||
}
|
||||
|
||||
.author-links svg {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
@media (max-width: 1040px) {
|
||||
.article-layout {
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,30 @@
|
|||
---
|
||||
const name = 'Can Celik';
|
||||
const role = 'Building Herdr';
|
||||
const photo = '/assets/author-can.jpeg';
|
||||
const x = 'https://x.com/lumendriada';
|
||||
const email = 'ogulcancelik@gmail.com';
|
||||
---
|
||||
|
||||
<aside class="author-card" aria-label="About the author">
|
||||
<img class="author-photo" src={photo} width="72" height="72" alt={name} loading="lazy" decoding="async" />
|
||||
<div class="author-body">
|
||||
<p class="author-name">{name}</p>
|
||||
<p class="author-role">{role}</p>
|
||||
<div class="author-links">
|
||||
<a href={x} target="_blank" rel="me noopener" aria-label={`${name} on X`}>
|
||||
<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true" fill="currentColor">
|
||||
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
|
||||
</svg>
|
||||
<span>X</span>
|
||||
</a>
|
||||
<a href={`mailto:${email}`} aria-label={`Email ${name}`}>
|
||||
<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="2.5" y="4.5" width="19" height="15" rx="2" />
|
||||
<path d="m3 6 9 7 9-7" />
|
||||
</svg>
|
||||
<span>Email</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
|
@ -58,7 +58,7 @@ const ogImageUrl = new URL(ogImage, 'https://herdr.dev').toString();
|
|||
document.documentElement.setAttribute("data-palette", saved || system);
|
||||
})();
|
||||
</script>
|
||||
<link rel="stylesheet" href="/css/style.css?v=39" />
|
||||
<link rel="stylesheet" href="/css/style.css?v=40" />
|
||||
</head>
|
||||
<body>
|
||||
<header class="site-header">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
import { getCollection, render } from 'astro:content';
|
||||
import MarketingLayout from '../../components/MarketingLayout.astro';
|
||||
import AuthorCard from '../../components/AuthorCard.astro';
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const posts = await getCollection('blog');
|
||||
|
|
@ -55,6 +56,7 @@ const sectionHeadings = headings.filter((heading) => heading.depth === 2);
|
|||
<div class="article-prose">
|
||||
<Content />
|
||||
</div>
|
||||
<AuthorCard />
|
||||
</article>
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
|||
Loading…
Reference in New Issue