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

feat: Use new entity-based cover #42

Merged
aniva merged 13 commits from home/cover into main 2025-07-06 15:05:37 -07:00
Conversation 0 Commits 13 Files Changed 11 +260 -51
3 changed files with 260 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 33ebd62026 - Show all commits

241
src/lib/Cover.svelte
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 329 KiB

6
src/lib/components/ThemeSwitch.svelte
View File

@ -20,7 +20,10 @@
} }
</script> </script>
<button class="nav-link" on:click={toggleTheme} aria-label="Toggle Theme"> <button
id="theme-switch"
class="nav-link"
on:click={toggleTheme} aria-label="Toggle Theme">
{#if $theme === "tokiwa"} {#if $theme === "tokiwa"}
<Sun /> <Sun />
{:else} {:else}
@ -30,6 +33,7 @@
<style> <style>
button { button {
flex-shrink: 0;
padding: 0; padding: 0;
font-weight: inherit; font-weight: inherit;
background: none; background: none;

64
src/routes/+page.svelte
View File

@ -64,21 +64,23 @@
</div> </div>
<div id="cover-mobile"> <div id="cover-mobile">
<div id="linkbox"> <div id="navbar">
<p class="text-2xl floater-elem" style="color: #888">{metadata.frontDescription}</p> <div>
<div id="navbar" class="h-5 items-center space-x-4 text-sm"> <p class="text-2xl floater-elem" style="color: #888">{metadata.frontDescription}</p>
<a class="nav-link" href="#bio">Bio</a> </div>
{#each routes as item} <div id="link-container" class="h-5 items-center">
{#if item.route !== "/"} <a class="nav-link" href="#bio">Bio</a>
<a {#each routes as item}
href={item.route} {#if item.route !== "/"}
class="nav-link" <a
class:disabled-link={item.disabled}>{item.name}</a> href={item.route}
{/if} class="nav-link"
{/each} class:disabled-link={item.disabled}>{item.name}</a>
<a class="icon nav-link" href="/rss.xml"><Rss /></a> {/if}
<ThemeSwitch /> {/each}
</div> <a class="icon nav-link" href="/rss.xml"><Rss /></a>
<ThemeSwitch />
</div>
</div> </div>
</div> </div>
@ -123,8 +125,6 @@
background-size: contain; background-size: contain;
background-position: center center; */ background-position: center center; */
z-index: -10; z-index: -10;
min-width: 100svw;
min-height: 100svh;
overscroll-behaviour: none; overscroll-behaviour: none;
} }
:global(#cover > svg) { :global(#cover > svg) {
@ -139,12 +139,12 @@
:global(path) { :global(path) {
filter: contrast(50%); filter: contrast(50%);
} }
:global(.shadow) { :global(.effect) {
visibility: hidden; visibility: hidden;
} }
&:hover, &:hover,
&:focus { &:focus {
:global(.shadow) { :global(.effect) {
visibility: visible; visibility: visible;
} }
:global(path) { :global(path) {
@ -159,39 +159,47 @@
display: inline-block; display: inline-block;
} }
#cover-mobile { #cover-mobile {
height: 100svh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overscroll-behavior: none; overscroll-behavior: none;
} }
#floater {
display: flex;
flex-direction: column;
justify-content: center;
margin-top: auto;
margin-left: auto;
margin-right: auto;
}
#navbar { #navbar {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
margin-top: auto;
margin-bottom: auto;
div {
padding-left: 5%;
}
}
#link-container {
display: flex;
flex-direction: column;
align-items: flex-start;
} }
@media (max-width: 700px) { @media (max-width: 700px) {
#cover { #cover {
height: 0;
width: 0;
visibility: hidden; visibility: hidden;
} }
#cover-mobile { #cover-mobile {
visibility: visible; visibility: visible;
height: 100svh;
} }
} }
@media (min-width: 701px) { @media (min-width: 701px) {
#cover { #cover {
min-width: 100svw;
min-height: 100svh;
visibility: visible; visibility: visible;
} }
#cover-mobile { #cover-mobile {
visibility: hidden; visibility: hidden;
height: 0;
width: 0;
} }
} }