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

buncha of styling changes/fixes, add more projects and refine the mobile experience, add opengraph metadata, add footer that links to source code

Browse Source
This commit is contained in:
Silas
2024-06-04 22:49:05 -04:00
parent 1e5eba3d46
commit 7c9b327a36
29 changed files with 670 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/lib/components/Footer.svelte Normal file
View File

@@ -0,0 +1,13 @@
<footer
class="footer footer-center p-4 bg-base-300 text-base-content sticky bottom-0 z-50 border-t border-primary"
>
<aside>
<p>
Built with 💚 by <a
href="https://git.silentsilas.com/silentsilas/playground"
target="_blank"
class="link-primary">silentsilas</a
>
</p>
</aside>
</footer>

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

@@ -18,7 +18,7 @@
</script>
<div class="flex flex-col h-screen">
<div class="navbar bg-base-300 sticky top-0 z-50">
<div class="navbar bg-base-300 sticky 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">
@@ -39,12 +39,12 @@
</div>
<ul
tabindex="-1"
class="menu menu-sm dropdown-content mt-3 z-10 p-2 shadow bg-base-300 rounded-box w-52"
class="menu menu-lg dropdown-content mt-3 z-10 p-2 shadow bg-base-300 rounded-box w-52"
>
<li><a href="/thoughts">Thoughts</a></li>
<li><a href="/poetry">Poetry</a></li>
<li><a href="/projects">Projects</a></li>
<li><a href="/services">Services</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="/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>
@@ -54,7 +54,7 @@
<input
type="text"
placeholder="Search"
class="input input-bordered w-24 md:w-auto"
class="input w-24 md:w-auto"
bind:value={searchQuery}
on:input={handleSearch}
/>
@@ -65,19 +65,21 @@
<input
type="text"
placeholder="Search"
class="input input-bordered md:w-auto"
class="input md:w-auto"
bind:value={searchQuery}
on:input={handleSearch}
/>
</div>
<ul class="menu menu-horizontal px-1">
<li><a href="/thoughts">Thoughts</a></li>
<li><a href="/poetry">Poetry</a></li>
<li><a href="/projects">Projects</a></li>
<li><a href="/services">Services</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="/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>

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

@@ -1,9 +1,13 @@
<!-- src/lib/CanvasLayout.svelte -->
<script lang="ts">
import { Canvas } from '@threlte/core';
function preventRightClick(event: MouseEvent) {
event.preventDefault();
}
</script>
<div class="canvas">
<div class="canvas" on:contextmenu|preventDefault={preventRightClick} role="application">
<Canvas>
<slot />
</Canvas>

21
src/lib/components/scenes/app/MenuItem.svelte
View File

@@ -5,25 +5,21 @@
export let position: [number, number, number] = [0, 0, 0];
export let range: number = 100;
export let clickHandler: (() => void) | undefined = undefined;
export let htmlContent: HTMLElement | string = 'Hello!';
export let href: string = '/';
export let active: boolean = false;
let isHovering = false;
let isPointerDown = false;
const onClick = () => {
console.log('clicked!');
if (clickHandler) {
clickHandler();
}
};
const isExternal = href.startsWith('http');
</script>
<HTML position.x={position[0]} position.y={position[1]} position.z={position[2]}>
<a
{href}
<button
type="button"
on:pointerenter={() => (isHovering = true)}
on:pointerleave={() => {
isPointerDown = false;
@@ -35,13 +31,12 @@
isPointerDown = false;
isHovering = false;
}}
target={isExternal ? '_blank' : ''}
on:click={onClick}
class="bg-green-700 px-3 py-3 text-white opacity-50 hover:opacity-90 active:opacity-100"
style="transform: translate(-50%, 50%); display: block;"
class="bg-base-300 border border-primary px-3 py-3 text-white md:opacity-50 hover:opacity-90 active:opacity-100"
style="transform: translate(-50%, 50%); display: block; width: 170px;"
>
{htmlContent}
</a>
<slot />
</button>
</HTML>
<Attractor
@@ -49,6 +44,6 @@
position.y={position[1]}
position.z={position[2]}
{range}
strength={isHovering ? 1 : 0}
strength={isHovering || isPointerDown || active ? 1 : 0}
gravityType={'static'}
/>

7
src/lib/components/scenes/app/Overlay.svelte
View File

@@ -1,5 +1,5 @@
<div class="overlay container" id="overlay">
<slot name="overlay" />
<div class="overlay container prose bg-base-300/80 border border-primary" id="overlay">
<slot />
</div>
<style>
@@ -10,8 +10,5 @@
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: rgba(16, 56, 30, 0.9);
}
</style>