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.">
%sveltekit.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>
</body>
</html>

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

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

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

@ -17,69 +17,63 @@
}
</script>
<div class="flex flex-col h-screen w-screen">
<div class="navbar bg-base-300 absolute top-0 z-50 border-b border-primary">
<div class="flex-1 pr-2">
<div class="dropdown">
<div tabindex="-1" class="btn btn-ghost text-primary lg:hidden">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
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"
<div class="navbar bg-base-300 border-b border-primary">
<div class="flex-1 pr-2">
<div class="dropdown">
<div tabindex="-1" class="btn btn-ghost text-primary lg:hidden">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<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>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h8m-8 6h16"
/>
</svg>
</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">
<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>
<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>
<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>
<slot />
<slot name="footer" />
</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 {
margin-top: 69px;
margin-bottom: 53px;
max-width: 100vw;
}
</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">
import '../../app.css';
import SearchResults from '$lib/components/SearchResults.svelte';
import NavBar from '$lib/components/NavBar.svelte';
import Footer from '$lib/components/Footer.svelte';
import AppContainer from '$lib/components/scenes/app/AppContainer.svelte';
</script>
<NavBar>
<div
class="flex flex-col items-center flex-1 overflow-auto"
style="margin-top: 69px; margin-bottom: 53px"
>
<slot />
<SearchResults />
</div>
<slot name="footer">
<Footer />
</slot>
</NavBar>
<AppContainer>
<slot />
<SearchResults />
</AppContainer>

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

@ -69,8 +69,8 @@
</script>
{#if results.length <= 0}
<div class="container mx-auto flex flex-col justify-center items-center flex-1 my-4">
<div class="justify-center items-center text-center mb-4">
<div class="mx-auto container flex flex-col flex-1 my-4">
<div class="my-4 text-center" style="height: 60px">
{#if visible && currentGreeting}
<div transition:fade={{ duration: 1200 }}>
<span class="font-bold text-primary">{currentGreeting.greeting}</span>
@ -83,7 +83,7 @@
</p>
{/if}
</div>
<div class="text-center prose px-4">
<div class="prose p-4" style="align-self: center">
<p>
The name's Silas. I write code for a living, and sometimes for fun. I use <a
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
use at your own risk.
</p>
<p>Shalom.</p>
<p class="text-center">Shalom.</p>
</div>
</div>
{/if}

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

@ -66,20 +66,20 @@
</li>
{/each}
</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>
{#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}

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

@ -66,20 +66,20 @@
</li>
{/each}
</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>
{#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}

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

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

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

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