hyprwm/hyprland-website
1
0
Fork 0
mirror of https://github.com/hyprwm/hyprland-website.git synced 2024-11-16 18:35:59 +01:00
Code Issues Projects Releases Packages Wiki Activity

small tweaks (#36)

Browse source 
* small navbar tweaks

* adjust title sizes

* Vaxry
This commit is contained in:
Visual-Dawg 2023-12-25 17:06:42 +02:00 committed by GitHub
parent ac58df3079
commit c569bb8f8a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 13 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/lib/components/Footer.svelte
View file

@ -24,7 +24,7 @@
<ul class="flex flex-col gap-3 font-medium">
<li>
<a href="https://github.com/vaxerski" target="_blank">
Vaxerski <span
Vaxry <span
class="bg-gradient-to-r from-primary to-blue-500 bg-clip-text text-transparent"
>[ Lead Developer ]</span
>

2
src/lib/components/Title.svelte
View file

@ -12,7 +12,7 @@
</p>
{/if}
<h1 class="mb-12 text-center text-5xl font-bold md:text-6xl">
<h1 class="mb-12 text-center text-5xl font-bold md:text-7xl lg:text-8xl">
<slot name="title">No title given!!!</slot>
</h1>

8
src/routes/Navbar.svelte
View file

@ -41,7 +41,7 @@
<nav class="nav" class:!flex={isExpanded}>
<ul
class="flex flex-col items-center gap-5 rounded-full lg:h-full lg:max-h-full lg:flex-row hover:[&_li]:text-cyan-300"
class="flex flex-col items-center gap-5 rounded-full lg:h-full lg:max-h-full lg:flex-row [&_li]:transition-colors hover:[&_li]:text-cyan-300"
>
<li>
<a
@ -60,9 +60,7 @@
<a href="/news">News</a>
</li>
</ul>
<ul
class="flex flex-row items-center gap-3 px-4 lg:ml-4 lg:mr-2 lg:rounded-full lg:border lg:border-purple-400"
>
<ul class="flex flex-row items-center gap-3 px-4">
<li>
<a href={discordLink} class="social-icon" aria-label="Join us on Discord" target="_blank">
<DiscordIcon class="h-full w-full" />
@ -118,7 +116,7 @@
height: 4rem;
display: block;
@apply rounded-full p-1 hover:bg-purple-500 hover:text-white;
@apply rounded-full p-1 transition-colors hover:bg-cyan-500 hover:text-white;
@media screen(lg) {
width: 2rem;

14
src/routes/news/[slug]/+page.svelte
View file

@ -13,18 +13,20 @@
</svelte:head>
<article
class="mt-navbar mx-auto flex max-w-4xl flex-col gap-6 px-6 pt-20 md:gap-8 md:px-8 lg:gap-28"
class="mx-auto mt-navbar flex max-w-4xl flex-col gap-6 px-6 pt-20 md:gap-8 md:px-8 lg:mt-32 lg:gap-14"
>
<Title>
<span slot="title">{data.meta.title}</span>
<time slot="subtitle" datetime={new Date(data.meta.date * 1000).toISOString()}
<hgroup class="flex flex-col gap-5 duration-1000 animate-in fade-in-0 slide-in-from-bottom-4">
<h1 class="text-4xl font-bold lg:text-6xl">{data.meta.title}</h1>
<time
class="font-medium text-slate-300"
datetime={new Date(data.meta.date * 1000).toISOString()}
>Published on {formatDate(data.meta.date * 1000)}</time
>
</Title>
</hgroup>
<!-- Post -->
<div
class="prose prose-slate prose-invert delay-500 duration-1000 animate-in fade-in-0 fill-mode-backwards lg:prose-xl prose-a:text-cyan-400 prose-img:rounded-lg"
class="prose prose-slate prose-invert transition-none delay-500 animate-in fade-in-0 fill-mode-backwards [animation-duration:2500ms] lg:prose-xl prose-a:text-cyan-400 prose-img:rounded-lg"
>
<svelte:component this={data.content} />
</div>