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

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

@ -17,8 +17,7 @@
} }
</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">
@ -78,8 +77,3 @@
</ul> </ul>
</div> </div>
</div> </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 { .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

16
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
class="flex flex-col items-center flex-1 overflow-auto"
style="margin-top: 69px; margin-bottom: 53px"
>
<slot /> <slot />
<SearchResults /> <SearchResults />
</div> </AppContainer>
<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}

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

@ -66,7 +66,6 @@
</li> </li>
{/each} {/each}
</ul> </ul>
</div>
{#if total > 1} {#if total > 1}
<nav class="join justify-end py-10"> <nav class="join justify-end py-10">
<button <button
@ -82,4 +81,5 @@
> >
</nav> </nav>
{/if} {/if}
</div>
{/if} {/if}

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

@ -66,7 +66,6 @@
</li> </li>
{/each} {/each}
</ul> </ul>
</div>
{#if total > 1} {#if total > 1}
<nav class="join justify-end py-4"> <nav class="join justify-end py-4">
<button <button
@ -82,4 +81,5 @@
> >
</nav> </nav>
{/if} {/if}
</div>
{/if} {/if}

8
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 />
</NavBar> </AppContainer>
<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>