diff options
| author | Fuwn <[email protected]> | 2024-01-04 20:30:21 -0800 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-01-04 20:30:21 -0800 |
| commit | 6fa883da369eafcc38210a172d0bd20a7870d798 (patch) | |
| tree | 9290cc3db49a7e3592439faecb680dc28b587dcd /src | |
| parent | feat(css): new font combo (diff) | |
| download | due.moe-6fa883da369eafcc38210a172d0bd20a7870d798.tar.xz due.moe-6fa883da369eafcc38210a172d0bd20a7870d798.zip | |
feat(layout): style navigation
Diffstat (limited to 'src')
| -rw-r--r-- | src/app.css | 14 | ||||
| -rw-r--r-- | src/routes/+layout.svelte | 29 |
2 files changed, 31 insertions, 12 deletions
diff --git a/src/app.css b/src/app.css index 4dca3954..d6e507e5 100644 --- a/src/app.css +++ b/src/app.css @@ -14,7 +14,11 @@ details { } summary { - font-weight: 550; + font-weight: 500; +} + +summary small { + font-weight: normal; } ul, @@ -176,8 +180,14 @@ code { border-radius: 0; } -/* remove list dots and stuff */ ul, li::marker { content: unset !important; } + +.card-centered { + margin: 0 auto; + display: flex; + flex-direction: column; + justify-content: center; +} diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index becb8b58..f1a99fc7 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -35,17 +35,20 @@ <HeadTitle /> <div id="container"> - <div id="header"> - <p id={$settings.displayHoverNavigation ? 'hover-header' : ''}> - 「 <a href="/">Home</a> • <a href="/completed">Completed</a> • - <a href="/schedule">Anime Schedule</a> • - <a href="/updates">Manga & WN Updates</a> • - <a href="/tools">Tools</a> • {#if data.user} - <a href={`/user/${currentUserIdentity.name}`}>Profile</a> • - {/if} <a href="/settings">Settings</a> 」 + <div id="header" class="card card-centered"> + <div id={$settings.displayHoverNavigation ? 'hover-header' : ''}> + <a href="/" class="header-item">Home</a><a href="/completed" class="header-item">Completed</a> + <a href="/schedule" class="header-item">Anime Schedule</a> + <a href="/updates" class="header-item">Manga & WN Updates</a> + <a href="/tools" class="header-item">Tools</a>{#if data.user} + <a href={`/user/${currentUserIdentity.name}`} class="header-item">Profile</a> + {/if} <a href="/settings" class="header-item">Settings</a> + + <span style="opacity: 50%; font-weight: bold;">|</span> {#if data.user === undefined} <a + class="header-item" href={`https://anilist.co/api/v2/oauth/authorize?client_id=${env.PUBLIC_ANILIST_CLIENT_ID}&redirect_uri=${env.PUBLIC_ANILIST_REDIRECT_URI}&response_type=code`} on:click={() => { localStorage.setItem( @@ -57,15 +60,17 @@ Log in with AniList </a> {:else} - <a href="/api/authentication/log-out" + <a href="/api/authentication/log-out" class="header-item" >Log out<button class="smaller-button button-badge badge-info" >{currentUserIdentity.name}</button ></a > {/if} - </p> + </div> </div> + <p /> + <slot /> </div> @@ -123,4 +128,8 @@ :global(a:hover) { text-decoration: underline; } + + .header-item { + margin: 0 0.625rem; + } </style> |