gaiety/portfolio
gaiety/portfolio
1
1
Fork 0
Code Activity

blog on homepage

Browse source
This commit is contained in:
Ava Gaiety W 2025-06-12 23:33:23 -06:00
parent 38b3e28f8c
commit e93c0f266e
2 changed files with 43 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
_includes/pinned.njk
View file

@ -1,7 +1,7 @@
{% include "base-header.html" %}
<main class="max-w-7xl mx-auto px-2">
<div class="relative max-w-lg mx-auto divide-y-2 divide-yellow lg:max-w-7xl">
<div class="relative max-w-lg mx-auto lg:max-w-7xl flex flex-col gap-12">
<div class="pt-2 px-4 sm:pt-8 sm:px-8 sm:pb-4 bg-base/75 shadow-lg shadow-yellow/50 rounded border-2 border-base border-l-yellow sm:rounded-tl-none sm:rounded-tr-none">
<h1 class="font-serif mt-2 mb-8 text-4xl tracking-tight fancy-heading flex flex-row gap-1 motion-safe:animate-fade">
<span>{{ title | markdown | safe }}</span><div class="typing"></div>
@ -11,7 +11,7 @@
</div>
</div>
<div class="mt-16 grid gap-16 pt-16 lg:grid-cols-3 lg:gap-x-5 lg:gap-y-12">
<div class="grid gap-16 lg:grid-cols-3 lg:gap-x-5 lg:gap-y-12">
{%- for content in collections.pinned | reverse -%}
<div class="motion-safe:animate-fade-up motion-safe:animate-delay-[{{loop.index * 100}}ms] animate-once">
<div>
@ -34,6 +34,30 @@
</div>
{%- endfor -%}
</div>
<div class="flex flex-col gap-2">
{%- set top = 3 -%}
{%- for content in collections.posts | reverse -%}
{%- if (loop.index <= top) and (top <= loop.length) -%}
<a href="{{ content.url }}" class="flex flex-row h-[4em] blog-link relative" >
{%- if content.data.coverImage -%}
<img src="{{ content.data.coverImage }}" alt="{{ content.data.imageDescription }}" class="w-40 h-full object-cover saturate-50 contrast-50 hover:saturate-100 hover:contrast-100 fancy-pinned-blog-image rounded-tl rounded-bl" />
{%- else -%}
<div class="w-40 h-full rounded-tl rounded-bl bg-gradient-to-r from-mauve via-sky to-transparent opacity-50"></div>
{%- endif -%}
<div class="flex flex-col gap-1 absolute left-40">
<h2 class="text-md text-blue line-clamp-2 outline-link">
{{ content.data.title }}
</h2>
<div class="text-xs hidden sm:block text-subtext1 line-clamp-2">
{{ content.data.description }}
</div>
</div>
</a>
{%- endif -%}
{%- endfor -%}
<p class="text-subtext0">...read more in the <a href="/blog" class="link outline-link">blog</a></p>
</div>
</div>
</main>

17
styles.css
View file

@ -71,6 +71,23 @@
}
}
.fancy-pinned-blog-image {
mask-image: linear-gradient(to right,
white,
rgba(255, 255, 255, 0)
);
position: relative;
}
.blog-link h2 {
text-decoration: underline;
}
.blog-link:focus h2,
.blog-link:hover h2 {
text-decoration: none;
}
.fancy-blockquote {
max-width: 30rem;
font-size: 1.4rem;