silentsilas
/
playground
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

simplify templating, use flex for everything

This commit is contained in:
Silas 2024-06-05 11:42:54 -04:00
parent f600dcdd69
commit 81f2984c19
Failed to generate hash of commit
12 changed files with 117 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app.html
View File

@ -11,7 +11,7 @@
<meta property="og:description" content="Personal site of silentsilas."> <meta property="og:description" content="Personal site of silentsilas.">
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover" data-theme="forest" style="overflow-y: auto; overflow-x: hidden;"> <body data-sveltekit-preload-data="hover" data-theme="forest" style="overflow-x: hidden;">
<div style="display: contents">%sveltekit.body%</div> <div style="display: contents">%sveltekit.body%</div>
</body> </body>
</html> </html>

4
src/lib/components/Footer.svelte
View File

@ -1,6 +1,4 @@
<footer <footer class="footer footer-center p-4 bg-base-300 text-base-content border-t border-primary">
class="footer footer-center p-4 bg-base-300 text-base-content absolute bottom-0 z-50 border-t border-primary"
>
<aside> <aside>
<p> <p>
Built with 💚 by <a Built with 💚 by <a

106
src/lib/components/NavBar.svelte
View File

@ -17,69 +17,63 @@
} }
</script> </script>
<div class="flex flex-col h-screen w-screen"> <div class="navbar bg-base-300 border-b border-primary">
<div class="navbar bg-base-300 absolute top-0 z-50 border-b border-primary"> <div class="flex-1 pr-2">
<div class="flex-1 pr-2"> <div class="dropdown">
<div class="dropdown"> <div tabindex="-1" class="btn btn-ghost text-primary lg:hidden">
<div tabindex="-1" class="btn btn-ghost text-primary lg:hidden"> <svg
<svg xmlns="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" class="h-5 w-5"
class="h-5 w-5" fill="none"
fill="none" viewBox="0 0 24 24"
viewBox="0 0 24 24" stroke="currentColor"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h8m-8 6h16"
/>
</svg>
</div>
<ul
tabindex="-1"
class="menu menu-lg dropdown-content mt-3 z-10 p-2 shadow bg-base-300 rounded-box w-52"
> >
<li><a href="/thoughts" class="link-primary">Thoughts</a></li> <path
<li><a href="/poetry" class="link-primary">Poetry</a></li> stroke-linecap="round"
<li><a href="/projects" class="link-primary">Projects</a></li> stroke-linejoin="round"
<li><a href="/services" class="link-primary">Services</a></li> stroke-width="2"
</ul> d="M4 6h16M4 12h8m-8 6h16"
/>
</svg>
</div> </div>
<a class="link-primary text-xl" href="/">silentsilas</a> <ul
</div> tabindex="-1"
<div class="lg:hidden flex-none gap-2"> class="menu menu-lg dropdown-content mt-3 z-10 p-2 shadow bg-base-300 rounded-box w-52"
<div class="form-control"> >
<input
type="text"
placeholder="Search"
class="input w-24 md:w-auto"
bind:value={searchQuery}
on:input={handleSearch}
/>
</div>
</div>
<div class="navbar-end hidden lg:flex">
<div class="form-control">
<input
type="text"
placeholder="Search"
class="input md:w-auto"
bind:value={searchQuery}
on:input={handleSearch}
/>
</div>
<ul class="menu menu-horizontal px-1">
<li><a href="/thoughts" class="link-primary">Thoughts</a></li> <li><a href="/thoughts" class="link-primary">Thoughts</a></li>
<li><a href="/poetry" class="link-primary">Poetry</a></li> <li><a href="/poetry" class="link-primary">Poetry</a></li>
<li><a href="/projects" class="link-primary">Projects</a></li> <li><a href="/projects" class="link-primary">Projects</a></li>
<li><a href="/services" class="link-primary">Services</a></li> <li><a href="/services" class="link-primary">Services</a></li>
</ul> </ul>
</div> </div>
<a class="link-primary text-xl" href="/">silentsilas</a>
</div>
<div class="lg:hidden flex-none gap-2">
<div class="form-control">
<input
type="text"
placeholder="Search"
class="input w-24 md:w-auto"
bind:value={searchQuery}
on:input={handleSearch}
/>
</div>
</div>
<div class="navbar-end hidden lg:flex">
<div class="form-control">
<input
type="text"
placeholder="Search"
class="input md:w-auto"
bind:value={searchQuery}
on:input={handleSearch}
/>
</div>
<ul class="menu menu-horizontal px-1">
<li><a href="/thoughts" class="link-primary">Thoughts</a></li>
<li><a href="/poetry" class="link-primary">Poetry</a></li>
<li><a href="/projects" class="link-primary">Projects</a></li>
<li><a href="/services" class="link-primary">Services</a></li>
</ul>
</div> </div>
<slot />
<slot name="footer" />
</div> </div>

17
src/lib/components/scenes/app/AppContainer.svelte Normal file
View File

@ -0,0 +1,17 @@
<script>
import Footer from '$lib/components/Footer.svelte';
import NavBar from '$lib/components/NavBar.svelte';
</script>
<div
class="flex flex-col flex-1 overflow-auto fixed h-full w-screen bg-base-300"
style="overflow-x: hidden;"
>
<NavBar></NavBar>
<div class="flex flex-1 overflow-auto">
<slot />
</div>
<Footer></Footer>
</div>

3
src/lib/components/scenes/app/CanvasContainer.svelte
View File

@ -23,7 +23,6 @@
} }
.canvas { .canvas {
margin-top: 69px; max-width: 100vw;
margin-bottom: 53px;
} }
</style> </style>

0
src/lib/components/scenes/app/App.svelte → src/lib/components/scenes/app/World.svelte
View File

20
src/routes/(app)/+layout.svelte
View File

@ -1,20 +1,10 @@
<script lang="ts"> <script lang="ts">
import '../../app.css'; import '../../app.css';
import SearchResults from '$lib/components/SearchResults.svelte'; import SearchResults from '$lib/components/SearchResults.svelte';
import NavBar from '$lib/components/NavBar.svelte'; import AppContainer from '$lib/components/scenes/app/AppContainer.svelte';
import Footer from '$lib/components/Footer.svelte';
</script> </script>
<NavBar> <AppContainer>
<div <slot />
class="flex flex-col items-center flex-1 overflow-auto" <SearchResults />
style="margin-top: 69px; margin-bottom: 53px" </AppContainer>
>
<slot />
<SearchResults />
</div>
<slot name="footer">
<Footer />
</slot>
</NavBar>

8
src/routes/(app)/+page.svelte
View File

@ -69,8 +69,8 @@
</script> </script>
{#if results.length <= 0} {#if results.length <= 0}
<div class="container mx-auto flex flex-col justify-center items-center flex-1 my-4"> <div class="mx-auto container flex flex-col flex-1 my-4">
<div class="justify-center items-center text-center mb-4"> <div class="my-4 text-center" style="height: 60px">
{#if visible && currentGreeting} {#if visible && currentGreeting}
<div transition:fade={{ duration: 1200 }}> <div transition:fade={{ duration: 1200 }}>
<span class="font-bold text-primary">{currentGreeting.greeting}</span> <span class="font-bold text-primary">{currentGreeting.greeting}</span>
@ -83,7 +83,7 @@
</p> </p>
{/if} {/if}
</div> </div>
<div class="text-center prose px-4"> <div class="prose p-4" style="align-self: center">
<p> <p>
The name's Silas. I write code for a living, and sometimes for fun. I use <a The name's Silas. I write code for a living, and sometimes for fun. I use <a
href="https://elixir-lang.org/" href="https://elixir-lang.org/"
@ -110,7 +110,7 @@
of them run any analytics or log your activity, but the software/servers may be outdated, so of them run any analytics or log your activity, but the software/servers may be outdated, so
use at your own risk. use at your own risk.
</p> </p>
<p>Shalom.</p> <p class="text-center">Shalom.</p>
</div> </div>
</div> </div>
{/if} {/if}

30
src/routes/(app)/poetry/+page.svelte
View File

@ -66,20 +66,20 @@
</li> </li>
{/each} {/each}
</ul> </ul>
{#if total > 1}
<nav class="join justify-end py-10">
<button
class="join-item btn-primary btn btn-outline"
on:click={() => navigate(currentPage - 1)}
disabled={currentPage === 1}>Prev</button
>
<div class="join-item content-center px-10">{currentPage} of {totalPages}</div>
<button
class="join-item btn btn-primary btn-outline"
on:click={() => navigate(currentPage + 1)}
disabled={currentPage === totalPages}>Next</button
>
</nav>
{/if}
</div> </div>
{#if total > 1}
<nav class="join justify-end py-10">
<button
class="join-item btn-primary btn btn-outline"
on:click={() => navigate(currentPage - 1)}
disabled={currentPage === 1}>Prev</button
>
<div class="join-item content-center px-10">{currentPage} of {totalPages}</div>
<button
class="join-item btn btn-primary btn-outline"
on:click={() => navigate(currentPage + 1)}
disabled={currentPage === totalPages}>Next</button
>
</nav>
{/if}
{/if} {/if}

30
src/routes/(app)/thoughts/+page.svelte
View File

@ -66,20 +66,20 @@
</li> </li>
{/each} {/each}
</ul> </ul>
{#if total > 1}
<nav class="join justify-end py-4">
<button
class="join-item btn-primary btn btn-outline"
on:click={() => navigate(currentPage - 1)}
disabled={currentPage === 1}>Prev</button
>
<div class="join-item content-center px-10">{currentPage} of {totalPages}</div>
<button
class="join-item btn btn-primary btn-outline"
on:click={() => navigate(currentPage + 1)}
disabled={currentPage === totalPages}>Next</button
>
</nav>
{/if}
</div> </div>
{#if total > 1}
<nav class="join justify-end py-4">
<button
class="join-item btn-primary btn btn-outline"
on:click={() => navigate(currentPage - 1)}
disabled={currentPage === 1}>Prev</button
>
<div class="join-item content-center px-10">{currentPage} of {totalPages}</div>
<button
class="join-item btn btn-primary btn-outline"
on:click={() => navigate(currentPage + 1)}
disabled={currentPage === totalPages}>Next</button
>
</nav>
{/if}
{/if} {/if}

12
src/routes/projects/+layout.svelte
View File

@ -2,12 +2,10 @@
import Footer from '$lib/components/Footer.svelte'; import Footer from '$lib/components/Footer.svelte';
import NavBar from '$lib/components/NavBar.svelte'; import NavBar from '$lib/components/NavBar.svelte';
import SearchResults from '$lib/components/SearchResults.svelte'; import SearchResults from '$lib/components/SearchResults.svelte';
import AppContainer from '$lib/components/scenes/app/AppContainer.svelte';
</script> </script>
<div class="flex items-center flex-1 overflow-auto"> <AppContainer>
<NavBar> <slot />
<slot /> <SearchResults />
<SearchResults /> </AppContainer>
</NavBar>
<Footer />
</div>

6
src/routes/projects/+page.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import MenuItem from '$lib/components/scenes/app/MenuItem.svelte'; import MenuItem from '$lib/components/scenes/app/MenuItem.svelte';
import App from '$lib/components/scenes/app/App.svelte'; import World from '$lib/components/scenes/app/World.svelte';
import CanvasContainer from '$lib/components/scenes/app/CanvasContainer.svelte'; import CanvasContainer from '$lib/components/scenes/app/CanvasContainer.svelte';
import '../../app.css'; import '../../app.css';
@ -87,7 +87,7 @@
{#if results.length <= 0} {#if results.length <= 0}
<CanvasContainer> <CanvasContainer>
<App> <World>
{#each projects as project, i} {#each projects as project, i}
<MenuItem <MenuItem
clickHandler={() => handleMenuClick(i)} clickHandler={() => handleMenuClick(i)}
@ -95,7 +95,7 @@
active={i === selected}>{project.title}</MenuItem active={i === selected}>{project.title}</MenuItem
> >
{/each} {/each}
</App> </World>
</CanvasContainer> </CanvasContainer>
{#if open} {#if open}
<Overlay> <Overlay>