hyprwm/hyprland-website
1
0
Fork 0
mirror of https://github.com/hyprwm/hyprland-website.git synced 2025-05-12 21:20:37 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

home: restyle news slice (#86)

Browse source 
* restyle news slice

* restyle news-thumb card
This commit is contained in:
lui 2025-01-25 19:44:52 +01:00 committed by GitHub
parent 46b73ec248
commit 3fd7ff6f3e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 23 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
src/lib/components/news-thumb.svelte
View file

@ -7,18 +7,26 @@
$: link = `/news/${entry.slug}`
</script>
<li class="flex gap-14" use:animateIn={{ fade: 0, slide: 24 }}>
<article class="flex flex-col gap-4 rounded">
<div class="flex flex-col gap-4 text-sm font-medium text-slate-400">
<p class="font-bold text-slate-400">{formatDate(entry.date)}</p>
</div>
<h2 class="title text-3xl font-bold hover:text-slate-200 md:text-5xl lg:text-6xl">
<a href={link}>{entry.title}</a>
</h2>
<a
href={link}
class="group flex max-w-max items-center gap-4 font-medium text-slate-300 transition-all hover:text-white"
>Read up <ArrowRight class="transition-transform group-hover:translate-x-0.5" /></a
<li class="flex" use:animateIn={{ fade: 0, slide: 24 }}>
<a href={link} class="w-full transition-transform hover:-translate-y-0.5">
<article
class="flex flex-col justify-between gap-3 rounded hover:outline-sky-500/80 md:flex-row md:rounded-3xl md:bg-gradient-to-tr md:from-cyan-500/10 md:to-transparent md:p-8 md:shadow-xl md:outline md:outline-1 md:outline-sky-500/30"
>
</article>
<div>
<div class="flex flex-col gap-4 font-medium text-slate-400">
<p class="font-bold text-slate-400">{formatDate(entry.date)}</p>
</div>
<h2 class="title text-xl font-bold hover:text-slate-200 md:text-2xl lg:text-3xl">
{entry.title}
</h2>
</div>
<p
class="group flex min-w-max max-w-max flex-row-reverse items-center justify-center gap-2 font-medium text-slate-300 transition-transform hover:text-white md:flex-col"
>
<ArrowRight
class="h-4 w-4 transition-transform group-hover:translate-y-0.5 md:h-9 md:w-9"
/> Read up
</p>
</article>
</a>
</li>

4
src/routes/home-slices/NewsSlice.svelte
View file

@ -13,7 +13,7 @@
<TitleHeading slot="title" class="">Latest news</TitleHeading>
</Title>
<ul class="flex flex-col gap-12">
<ul class="mt-8 flex flex-col gap-10">
{#each news as entry}
<NewsThumb {entry} />
{/each}
@ -27,7 +27,7 @@
width: 200%;
min-height: 500px;
height: 220%;
translate: -25% 0%;
translate: -25% 0;
margin-top: -100px;
background: url('/imgs/grain.webp'),