small tweaks (#36)

* 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

View File

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

View File

@ -12,7 +12,7 @@
</p> </p>
{/if} {/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> <slot name="title">No title given!!!</slot>
</h1> </h1>

View File

@ -41,7 +41,7 @@
<nav class="nav" class:!flex={isExpanded}> <nav class="nav" class:!flex={isExpanded}>
<ul <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> <li>
<a <a
@ -60,9 +60,7 @@
<a href="/news">News</a> <a href="/news">News</a>
</li> </li>
</ul> </ul>
<ul <ul class="flex flex-row items-center gap-3 px-4">
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"
>
<li> <li>
<a href={discordLink} class="social-icon" aria-label="Join us on Discord" target="_blank"> <a href={discordLink} class="social-icon" aria-label="Join us on Discord" target="_blank">
<DiscordIcon class="h-full w-full" /> <DiscordIcon class="h-full w-full" />
@ -118,7 +116,7 @@
height: 4rem; height: 4rem;
display: block; 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) { @media screen(lg) {
width: 2rem; width: 2rem;

View File

@ -13,18 +13,20 @@
</svelte:head> </svelte:head>
<article <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> <hgroup class="flex flex-col gap-5 duration-1000 animate-in fade-in-0 slide-in-from-bottom-4">
<span slot="title">{data.meta.title}</span> <h1 class="text-4xl font-bold lg:text-6xl">{data.meta.title}</h1>
<time slot="subtitle" datetime={new Date(data.meta.date * 1000).toISOString()} <time
class="font-medium text-slate-300"
datetime={new Date(data.meta.date * 1000).toISOString()}
>Published on {formatDate(data.meta.date * 1000)}</time >Published on {formatDate(data.meta.date * 1000)}</time
> >
</Title> </hgroup>
<!-- Post --> <!-- Post -->
<div <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} /> <svelte:component this={data.content} />
</div> </div>