noisy bg
This commit is contained in:
Thomas G. Lopes
parent
afef01f0cf
commit
3df022e16a
7 changed files with 12 additions and 59 deletions
11
src/app.css
11
src/app.css
|
|
@ -68,7 +68,7 @@
|
||||||
--secondary-foreground: oklch(0.8483 0.0382 307.9613);
|
--secondary-foreground: oklch(0.8483 0.0382 307.9613);
|
||||||
--muted: oklch(0.3234 0.0419 257.4748);
|
--muted: oklch(0.3234 0.0419 257.4748);
|
||||||
--muted-foreground: oklch(0.794 0.0372 307.1032);
|
--muted-foreground: oklch(0.794 0.0372 307.1032);
|
||||||
--accent: oklch(0.3649 0.0508 308.4911);
|
--accent: oklch(0.3649 0.0408 290.4911);
|
||||||
--accent-foreground: oklch(0.9647 0.0091 341.8035);
|
--accent-foreground: oklch(0.9647 0.0091 341.8035);
|
||||||
--destructive: oklch(0.5248 0.1368 20.8317);
|
--destructive: oklch(0.5248 0.1368 20.8317);
|
||||||
--destructive-foreground: oklch(1 0 0);
|
--destructive-foreground: oklch(1 0 0);
|
||||||
|
|
@ -218,7 +218,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
@apply bg-background text-foreground;
|
@apply bg-background text-foreground bg-noise;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -476,6 +476,13 @@
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@utility bg-noise {
|
||||||
|
background-image: url(/images/noise.png);
|
||||||
|
background-size: auto;
|
||||||
|
background-repeat: repeat;
|
||||||
|
background-size: 96px 96px;
|
||||||
|
}
|
||||||
|
|
||||||
/* Copy button */
|
/* Copy button */
|
||||||
pre:has(code) {
|
pre:has(code) {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
|
||||||
10
src/app.html
10
src/app.html
|
|
@ -8,16 +8,6 @@
|
||||||
%sveltekit.head%
|
%sveltekit.head%
|
||||||
</head>
|
</head>
|
||||||
<body data-sveltekit-preload-data="hover">
|
<body data-sveltekit-preload-data="hover">
|
||||||
<script>
|
|
||||||
// check mode-watcher-mode variable, set body bg accordingly
|
|
||||||
// TODO: make this smarter pls
|
|
||||||
const mode = localStorage.getItem('mode-watcher-mode');
|
|
||||||
if (mode === 'dark') {
|
|
||||||
document.body.style.backgroundColor = 'oklch(0.2409 0.0201 307.5346)';
|
|
||||||
} else {
|
|
||||||
// document.body.style.backgroundColor = 'oklch(0.99 0.005 280)';
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<div style="display: contents">%sveltekit.body%</div>
|
<div style="display: contents">%sveltekit.body%</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,44 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import { Button } from '$lib/components/ui/button';
|
|
||||||
import { UseClipboard } from '$lib/hooks/use-clipboard.svelte';
|
|
||||||
import { cn } from '$lib/utils/utils';
|
|
||||||
import CheckIcon from '~icons/lucide/check';
|
|
||||||
import CopyIcon from '~icons/lucide/copy';
|
|
||||||
import { scale } from 'svelte/transition';
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
code: string;
|
|
||||||
language?: string;
|
|
||||||
class?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
let { code, language, class: className }: Props = $props();
|
|
||||||
|
|
||||||
const clipboard = new UseClipboard();
|
|
||||||
|
|
||||||
function copyCode() {
|
|
||||||
clipboard.copy(code);
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class={cn('group relative', className)}>
|
|
||||||
<div class="absolute top-2 right-2 z-10">
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
class="size-8 p-0 opacity-0 transition-opacity group-hover:opacity-100"
|
|
||||||
onclick={copyCode}
|
|
||||||
>
|
|
||||||
{#if clipboard.status === 'success'}
|
|
||||||
<div in:scale={{ duration: 200, start: 0.8 }}>
|
|
||||||
<CheckIcon class="size-3.5" />
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
<CopyIcon class="size-3.5" />
|
|
||||||
{/if}
|
|
||||||
<span class="sr-only">Copy code</span>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export { default as CodeBlock } from './code-block.svelte';
|
|
||||||
|
|
@ -5,6 +5,6 @@
|
||||||
let { class: className, children, ...rest }: HTMLAttributes<HTMLDivElement> = $props();
|
let { class: className, children, ...rest }: HTMLAttributes<HTMLDivElement> = $props();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div {...rest} class={cn('bg-background col-start-2 h-screen', className)}>
|
<div {...rest} class={cn('bg-background bg-noise col-start-2 h-screen', className)}>
|
||||||
{@render children?.()}
|
{@render children?.()}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -537,7 +537,6 @@
|
||||||
{/snippet}
|
{/snippet}
|
||||||
Search ({cmdOrCtrl} + K)
|
Search ({cmdOrCtrl} + K)
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
<SearchModal bind:open={searchModalOpen} />
|
|
||||||
<Tooltip>
|
<Tooltip>
|
||||||
{#snippet trigger(tooltip)}
|
{#snippet trigger(tooltip)}
|
||||||
<Button variant="ghost" size="icon" class="size-8" href="/account" {...tooltip.trigger}>
|
<Button variant="ghost" size="icon" class="size-8" href="/account" {...tooltip.trigger}>
|
||||||
|
|
@ -808,3 +807,5 @@
|
||||||
fileName={imageModal.fileName}
|
fileName={imageModal.fileName}
|
||||||
/>
|
/>
|
||||||
</Sidebar.Root>
|
</Sidebar.Root>
|
||||||
|
|
||||||
|
<SearchModal bind:open={searchModalOpen} />
|
||||||
|
|
|
||||||
BIN
static/images/noise.png
Normal file
BIN
static/images/noise.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Loading…
Add table
Reference in a new issue