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

moar styling fixes to hopefully fix issue with chromium android

This commit is contained in:
Silas 2024-06-05 01:24:48 -04:00
parent c24cca4b92
commit f600dcdd69
Failed to generate hash of commit
12 changed files with 35 additions and 40 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: hidden;"> <body data-sveltekit-preload-data="hover" data-theme="forest" style="overflow-y: auto; overflow-x: hidden;">
<div style="display: contents">%sveltekit.body%</div> <div style="display: contents">%sveltekit.body%</div>
</body> </body>
</html> </html>

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

@ -1,5 +1,5 @@
<footer <footer
class="footer footer-center p-4 bg-base-300 text-base-content sticky bottom-0 z-50 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>

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

@ -17,8 +17,8 @@
} }
</script> </script>
<div class="flex flex-col h-screen"> <div class="flex flex-col h-screen w-screen">
<div class="navbar bg-base-300 sticky top-0 z-50 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">

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

@ -7,7 +7,11 @@
} }
</script> </script>
<div class="canvas" on:contextmenu|preventDefault={preventRightClick} role="application"> <div
class="canvas flex flex-1"
on:contextmenu|preventDefault={preventRightClick}
role="application"
>
<Canvas> <Canvas>
<slot /> <slot />
</Canvas> </Canvas>
@ -19,12 +23,7 @@
} }
.canvas { .canvas {
width: 100%; margin-top: 69px;
height: 100%; margin-bottom: 53px;
background: rgb(0, 36, 6);
background: linear-gradient(180deg, rgba(0, 36, 6, 1) 0%, rgba(0, 0, 0, 1) 100%);
position: absolute;
justify-content: center;
align-items: center;
} }
</style> </style>

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

@ -10,5 +10,6 @@
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
z-index: 100;
} }
</style> </style>

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

@ -6,7 +6,10 @@
</script> </script>
<NavBar> <NavBar>
<div class="flex flex-col items-center flex-1 overflow-auto py-4"> <div
class="flex flex-col items-center flex-1 overflow-auto"
style="margin-top: 69px; margin-bottom: 53px"
>
<slot /> <slot />
<SearchResults /> <SearchResults />
</div> </div>

6
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"> <div class="container mx-auto flex flex-col justify-center items-center flex-1 my-4">
<div class="justify-center items-center text-center m-10"> <div class="justify-center items-center text-center mb-4">
{#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>
@ -78,7 +78,7 @@
<span class="text-gray-500">( {currentGreeting.romanisation} )</span> <span class="text-gray-500">( {currentGreeting.romanisation} )</span>
{/if} {/if}
</div> </div>
<p class="mt-2 text-gray-300" transition:fade={{ delay: 400, duration: 400 }}> <p class="text-gray-300" transition:fade={{ delay: 400, duration: 400 }}>
That's {currentGreeting.language} for hello! That's {currentGreeting.language} for hello!
</p> </p>
{/if} {/if}

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

@ -50,7 +50,7 @@
{#if results.length <= 0} {#if results.length <= 0}
<div class="container mx-auto flex flex-col items-center"> <div class="container mx-auto flex flex-col items-center">
<div class="prose"> <div class="prose mb-4">
<h1 class="py-6">Poetry</h1> <h1 class="py-6">Poetry</h1>
</div> </div>

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

@ -51,7 +51,7 @@
{#if results.length <= 0} {#if results.length <= 0}
<div class="container mx-auto flex flex-col items-center px-4"> <div class="container mx-auto flex flex-col items-center px-4">
<div class="prose"> <div class="prose">
<h1 class="py-6 pt-10">Services</h1> <h1 class="pt-6 text-center">Services</h1>
<p> <p>
I self-host a lot of services I find useful, and to rely less on third-party cloud services. I self-host a lot of services I find useful, and to rely less on third-party cloud services.
None of them run any analytics or log your activity, but the software/servers may be None of them run any analytics or log your activity, but the software/servers may be

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

@ -68,7 +68,7 @@
</ul> </ul>
</div> </div>
{#if total > 1} {#if total > 1}
<nav class="join justify-end py-10"> <nav class="join justify-end py-4">
<button <button
class="join-item btn-primary btn btn-outline" class="join-item btn-primary btn btn-outline"
on:click={() => navigate(currentPage - 1)} on:click={() => navigate(currentPage - 1)}

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

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

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

@ -29,7 +29,7 @@
title: 'Visions', title: 'Visions',
path: 'https://visions.silentsilas.com', path: 'https://visions.silentsilas.com',
source: 'https://github.com/silentsilas/visions', source: 'https://github.com/silentsilas/visions',
position: [0, -4, 0], position: [0, -6, 0],
description: description:
'An experiment with 3D vector math for a rudimentary simulation of gravity. You can change the strength of the gravity in the Controls menu.' 'An experiment with 3D vector math for a rudimentary simulation of gravity. You can change the strength of the gravity in the Controls menu.'
}, },
@ -38,7 +38,7 @@
path: '/editor', path: '/editor',
source: source:
'https://git.silentsilas.com/silentsilas/playground/src/branch/main/src/routes/editor', 'https://git.silentsilas.com/silentsilas/playground/src/branch/main/src/routes/editor',
position: [4, 0, -4], position: [4, -2, -4],
description: description:
'A 3D animation editor via Theatre.js. This is used internally by me for other ThreeJS projects.' 'A 3D animation editor via Theatre.js. This is used internally by me for other ThreeJS projects.'
}, },
@ -46,7 +46,7 @@
title: 'Headbang', title: 'Headbang',
path: 'https://smash.silentsilas.com', path: 'https://smash.silentsilas.com',
source: '#', source: '#',
position: [-4, 0, 4], position: [-4, -2, 4],
description: description:
"Bash in the heads of my ol' coworkers to the sounds of Rezz. I don't own the copyright to the music. And I also lost the source code. Epilepsy warning." "Bash in the heads of my ol' coworkers to the sounds of Rezz. I don't own the copyright to the music. And I also lost the source code. Epilepsy warning."
}, },
@ -54,7 +54,7 @@
title: 'Intended Link', title: 'Intended Link',
path: 'https://intended.link', path: 'https://intended.link',
source: 'https://git.silentsilas.com/silentsilas/Entendu', source: 'https://git.silentsilas.com/silentsilas/Entendu',
position: [-4, 4, -4], position: [-4, 2, -4],
description: description:
'Similar to Sure Dog, this is a service to securely share information to others without needing an account. Instead, you say which social media account can access the link, and only that account will be able to view what the link contains using the magic of OAuth.' 'Similar to Sure Dog, this is a service to securely share information to others without needing an account. Instead, you say which social media account can access the link, and only that account will be able to view what the link contains using the magic of OAuth.'
}, },
@ -62,7 +62,7 @@
title: 'Who Am I?', title: 'Who Am I?',
path: 'https://viz.silentsilas.com/', path: 'https://viz.silentsilas.com/',
source: 'https://git.silentsilas.com/silentsilas/audio-visualizer', source: 'https://git.silentsilas.com/silentsilas/audio-visualizer',
position: [4, 4, 4], position: [4, 2, 4],
description: description:
'An audiovisual exhibit of a poem by the same name. I recorded myself reciting the poem, and parsed a subtitle track to sync it with the audio. Objects in the scene are reactive to the audio as well.' 'An audiovisual exhibit of a poem by the same name. I recorded myself reciting the poem, and parsed a subtitle track to sync it with the audio. Objects in the scene are reactive to the audio as well.'
}, },
@ -70,7 +70,7 @@
title: 'Sure Dog', title: 'Sure Dog',
path: 'https://sure.dog/', path: 'https://sure.dog/',
source: 'https://git.silentsilas.com/silentsilas/sure', source: 'https://git.silentsilas.com/silentsilas/sure',
position: [0, 8, 0], position: [0, 6, 0],
description: description:
'Similar to Intended Link, this is a service to securely share information to others without needing an account. Instead, you send a link to whom you wish to request information from, and they can send back a link with the information you requested that only your device can view thanks to the magic of Public Key Cryptography.' 'Similar to Intended Link, this is a service to securely share information to others without needing an account. Instead, you send a link to whom you wish to request information from, and they can send back a link with the information you requested that only your device can view thanks to the magic of Public Key Cryptography.'
} }
@ -141,16 +141,6 @@
margin: 0; margin: 0;
} }
.canvas {
width: 100%;
height: 100%;
background: rgb(0, 36, 6);
background: linear-gradient(180deg, rgba(0, 36, 6, 1) 0%, rgba(0, 0, 0, 1) 100%);
position: absolute;
justify-content: center;
align-items: center;
}
.close-button { .close-button {
position: absolute; position: absolute;
top: 0; top: 0;