aniva/Chrysoblog
aniva
/
Chrysoblog
1
1
Fork 0
Code Issues 9 Pull Requests 2 Packages Projects Releases Wiki Activity

feat: Stylesheet improvement

This commit is contained in:
Leni Aniva 2024-09-14 18:14:02 -07:00
parent 5c51e7acb7
commit 830815f1d8
Signed by: aniva
GPG Key ID: 4D9B1C8D10EA4C50
2 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/routes/+layout.svelte
View File

@ -14,7 +14,7 @@
{#if i > 0} {#if i > 0}
<Separator orientation="vertical" /> <Separator orientation="vertical" />
{/if} {/if}
<a class:active-link={item.route === $page.url.pathname} href={item.route}>{item.name}</a> <a class="navbar-link" class:active-link={item.route === $page.url.pathname} href={item.route}>{item.name}</a>
{/each} {/each}
</div> </div>
</div> </div>
@ -23,6 +23,9 @@
<Footer /> <Footer />
<style> <style>
:global(.navbar-link) {
@apply text-lg;
}
:global(a) { :global(a) {
color: theme('colors.eucalyptus.400'); color: theme('colors.eucalyptus.400');
&:hover, &:hover,

8
src/routes/+page.svelte
View File

@ -40,17 +40,17 @@
<div id="front"> <div id="front">
<div id="floater"> <div id="floater">
<p class="floater-elem" style="color: #888">{metadata.frontDescription}</p> <p class="text-lg floater-elem" style="color: #888">{metadata.frontDescription}</p>
<div <div
class="floater-elem" class="floater-elem"
style="padding-bottom: {(1 - progress) * 50}vh" style="padding-bottom: {(1 - progress) * 50}vh"
> >
<div class="flex h-5 items-center space-x-4 text-sm"> <div class="flex h-5 items-center space-x-4 text-sm">
<a href="#bio">Bio</a> <a class="navbar-link" href="#bio">Bio</a>
{#each routes as item} {#each routes as item}
{#if item.route !== "/"} {#if item.route !== "/"}
<Separator orientation="vertical" /> <Separator orientation="vertical" />
<a href={item.route}>{item.name}</a> <a class="navbar-link" href={item.route}>{item.name}</a>
{/if} {/if}
{/each} {/each}
</div> </div>
@ -120,7 +120,7 @@
0px -5px 10px 10px rgba(200,200,200,0.4); 0px -5px 10px 10px rgba(200,200,200,0.4);
} }
#bio { #bio {
max-width: 100vh; max-width: max(50vw, 100vh);
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding-top: 20px; padding-top: 20px;