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

cleaner pinned style

Browse source
This commit is contained in:
Ava Gaiety W 2025-04-18 21:38:14 -06:00
parent ea66deccc6
commit 0c9216ac1b
2 changed files with 12 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
_includes/pinned.njk
View file

@ -19,18 +19,14 @@
{{ content.data.tags[0] | capitalize }}
</a>
</div>
<a href="{{ content.url }}" class="motion-safe:transition-colors block mt-4 outline-link shadow border-l-2 border-yellow hover:border-blue hover:scale-[1.02] hover:shadow-lg active:shadow active:scale-[1.01] active:border-blue rounded">
<h3 class="relative bg-overlay2 h-20 overflow-hidden rounded-tl rounded-tr text-xl text-base">
<span class="absolute z-10 inset-3">{{ content.data.title }}</span>
<img class="absolute grayscale opacity-20 contrast-50 scale-110 bottom-1/2 left-0 right-0 translate-y-1/2" src="{{ content.data.image }}" alt="" role="presentation" />
<a href="{{ content.url }}" class="motion-safe:transition-colors bg-mauve block mt-4 outline-link shadow border-l-2 border-yellow hover:border-blue hover:scale-[1.02] hover:shadow-lg active:shadow active:scale-[1.01] active:border-blue rounded">
<div class="rounded-tl rounded-tr h-16 w-full bg-center bg-105% opacity-50 saturate-0 contrast-50 overflow-hidden" style="background-image: url('{{ content.data.image }}')">
</div>
<h3 class="bg-mauve h-20 pt-3 px-3 text-xl text-base">
{{ content.data.title }}
</h3>
<div class="relative overflow-hidden h-24 rounded-bl rounded-br pt-3 text-text">
<div class="absolute scale-110 bottom-1/2 left-0 right-0 translate-y-1/2 bg-crust">
<img class="mb-40 contrast-50 grayscale opacity-10" src="{{ content.data.image }}" alt="" role="presentation" />
</div>
<div class="px-3 relative z-10">
<div class="py-2 px-3 h-24 rounded-bl rounded-br text-text bg-crust">
{{ content.data.description | markdown | safe }}
</div>
</div>
</a>
</div>

6
tailwind.config.js
View file

@ -10,6 +10,12 @@ module.exports = {
'md': '768px',
'lg': '1024px',
},
backgroundSize: {
'auto': 'auto',
'cover': 'cover',
'contain': 'contain',
'105%': '105%',
}
},
plugins: [
require("@catppuccin/tailwindcss"),