From 17c18033027d60066581930514ac2ad51611c36c Mon Sep 17 00:00:00 2001 From: denizk0461 Date: Sat, 31 Jan 2026 15:27:41 +0100 Subject: [PATCH] moved stylised button to outlined-button.svelte; added drawing gallery (currently hidden) --- src/lib/components/outlined-button.svelte | 38 +++++ src/routes/+layout.svelte | 20 +-- .../garden/drawing-gallery/+page.svelte | 151 ++++++++++++++++++ .../garden/drawing-gallery/drawing-data.ts | 31 ++++ src/routes/projects/projectn5/+page.svelte | 10 -- .../drawing-gallery/2026/breadgirl.webp | Bin 0 -> 36370 bytes static/garden/drawing-gallery/2026/girl.webp | Bin 0 -> 31192 bytes 7 files changed, 224 insertions(+), 26 deletions(-) create mode 100644 src/lib/components/outlined-button.svelte create mode 100644 src/routes/garden/drawing-gallery/+page.svelte create mode 100644 src/routes/garden/drawing-gallery/drawing-data.ts create mode 100644 static/garden/drawing-gallery/2026/breadgirl.webp create mode 100644 static/garden/drawing-gallery/2026/girl.webp diff --git a/src/lib/components/outlined-button.svelte b/src/lib/components/outlined-button.svelte new file mode 100644 index 0000000..1ed547c --- /dev/null +++ b/src/lib/components/outlined-button.svelte @@ -0,0 +1,38 @@ + + +{#if fullWidth} + +{:else} + +{/if} + + \ No newline at end of file diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index ec36a3b..a57d864 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -100,6 +100,7 @@ --color-text-img: invert(98%) sepia(1%) saturate(4643%) hue-rotate(297deg) brightness(115%) contrast(76%); --color-text-dark: #1e1e1e; --color-highlight: #51B86B; + --color-highlight-dark: color-mix(in srgb, var(--color-highlight) 60%, black); --color-highlight-alt: #d03b4a; --color-header: color-mix(in srgb, var(--color-highlight) 80%, black); --color-header-highlight: color-mix(in srgb, #6d1e26 80%, transparent); @@ -107,6 +108,7 @@ --color-background: #111111; --color-background-highlight: color-mix(in srgb, var(--color-highlight) 10%, transparent); --color-background-highlight-hover: color-mix(in srgb, var(--color-highlight) 60%, transparent); + --color-background-highlight-hover-dark: color-mix(in srgb, var(--color-highlight-dark) 60%, transparent); --color-waters: #242424; @@ -189,23 +191,9 @@ } button { - font-family: var(--font-mono); - font-size: var(--font-size-mono); - padding: 8px; background-color: transparent; - border: dashed 2px var(--color-highlight); - color: var(--color-highlight); - font-weight: 700; - cursor: pointer; - transition: background-color 0.05s ease-out; - } - - button:hover { - background-color: var(--color-background-highlight); - } - - .button-fullwidth { - width: 100%; + border: none; + padding: 0; } /* #region Headers */ diff --git a/src/routes/garden/drawing-gallery/+page.svelte b/src/routes/garden/drawing-gallery/+page.svelte new file mode 100644 index 0000000..1e7164e --- /dev/null +++ b/src/routes/garden/drawing-gallery/+page.svelte @@ -0,0 +1,151 @@ + + + + Drawing Gallery | denizk0461 + + +{#snippet drawing({ drawing }: { drawing: DrawingData })} + +{/snippet} + +{#snippet inspector({ index }: { index: number })} + {#if index == -1} +

click on an image to view details about it

+ {:else} + + {drawings[index].altText} + +

{drawings[index].date}

+
+ {#each drawings[index].notes as n} +

{n}

+ {/each} + {/if} +{/snippet} + + + + +

I'm trying this to motivate myself to draw more now. Let's see where this takes us.

+ +
+
+ {#each drawings as d} + {@render drawing({drawing: d})} + {/each} +
+
+ {@render inspector({ index: selectedDrawingIndex })} +
+
+ + + \ No newline at end of file diff --git a/src/routes/garden/drawing-gallery/drawing-data.ts b/src/routes/garden/drawing-gallery/drawing-data.ts new file mode 100644 index 0000000..5e92265 --- /dev/null +++ b/src/routes/garden/drawing-gallery/drawing-data.ts @@ -0,0 +1,31 @@ +export interface DrawingData { + fileName: string; + altText: string; + + // Format: yyyy-MM-dd + date: string; + + notes: string[]; +} + +export let drawings: DrawingData[] = [ + { + fileName: "2026/breadgirl.webp", + altText: "An anime-style girl chewing on a piece of bread. She wears a ponytail and a sleeveless top.", + date: "2026-01-30", + notes: [ + "I drew her during a game of Wizard. I initially wanted to make her chew on a whole loaf but I wasn't sure if I could draw that.", + "Wasn't really sure how to convey that her mouth is full, but in retrospect, I could have exaggerated the bow in her lower eyelids to do so.", + "I like her eyes. Her head could be taller, actually.", + ], + }, + { + fileName: "2026/girl.webp", + altText: "An anime-style girl's head. She has a ponytail and is looking towards the left with a concentrated gaze.", + date: "2026-01-29", + notes: [ + "Her nose is a bit high but I do like her focused gaze. I think I nailed the eyes, to be honest, at least the left one, considering the drawing is just 3x4cm.", + "I'm super happy with this, especially since it was my first try drawing in a long time and I only used a ballpoint pen (non-erasable!).", + ], + }, +]; \ No newline at end of file diff --git a/src/routes/projects/projectn5/+page.svelte b/src/routes/projects/projectn5/+page.svelte index 99bf3c9..2d20434 100644 --- a/src/routes/projects/projectn5/+page.svelte +++ b/src/routes/projects/projectn5/+page.svelte @@ -1,13 +1,10 @@