added drawing gallery page, not linked anywhere yet
This commit is contained in:
108
src/routes/art/drawings/+page.svelte
Normal file
108
src/routes/art/drawings/+page.svelte
Normal file
@@ -0,0 +1,108 @@
|
||||
<script lang="ts">
|
||||
import Banner2 from "$lib/banner2.svelte";
|
||||
import Content from "$lib/viewport/content.svelte";
|
||||
import { type Drawing, drawings } from "./drawings";
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Drawing Gallery | denizk0461</title>
|
||||
</svelte:head>
|
||||
|
||||
{#snippet drawingGalleryEntry({d}: {d: Drawing})}
|
||||
<div class="gallery-entry">
|
||||
<img src="{d.img}" alt="{d.imgAlt}">
|
||||
<div class="gallery-entry-info">
|
||||
<p class="gallery-entry-title">{d.title} <span>{d.date}</span></p>
|
||||
{#each d.notes as note}
|
||||
<p class="gallery-entry-note">{note}</p>
|
||||
{/each}
|
||||
<a href="{d.img}">view full-size</a>
|
||||
</div>
|
||||
</div>
|
||||
{/snippet}
|
||||
|
||||
<Content>
|
||||
<Banner2
|
||||
title="Drawing Gallery"
|
||||
subtitle=""
|
||||
banner="banner.webp"
|
||||
bannerAlt="Several Faber-Castell Polychromos colour pencils lined up with markings next to them in the same colour on a sheet of paper." />
|
||||
|
||||
<div class="drawing-container">
|
||||
{#each drawings as d}
|
||||
{@render drawingGalleryEntry({d})}
|
||||
{/each}
|
||||
</div>
|
||||
</Content>
|
||||
|
||||
<style>
|
||||
.drawing-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.gallery-entry {
|
||||
position: relative;
|
||||
height: 340px;
|
||||
}
|
||||
|
||||
.gallery-entry img, .gallery-entry-info {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.gallery-entry img {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.gallery-entry:hover .gallery-entry-info {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.gallery-entry-info {
|
||||
opacity: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: opacity var(--duration-animation) var(--anim-curve);
|
||||
/* pointer-events: none; */
|
||||
background-color: var(--color-header-highlight);
|
||||
padding: 12px 8px;
|
||||
gap: 4px;
|
||||
box-sizing: border-box;
|
||||
justify-content: center;
|
||||
outline: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
|
||||
}
|
||||
|
||||
.gallery-entry-info * {
|
||||
margin: 0;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.gallery-entry-title {
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.gallery-entry-title span {
|
||||
font-size: 0.8rem;
|
||||
line-height: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.gallery-entry-note, .gallery-entry-info a {
|
||||
font-size: 1.0rem;
|
||||
line-height: 1.3rem;
|
||||
}
|
||||
|
||||
/* .gallery-entry-info a {
|
||||
pointer-events: all;
|
||||
} */
|
||||
</style>
|
||||
77
src/routes/art/drawings/drawings.ts
Normal file
77
src/routes/art/drawings/drawings.ts
Normal file
@@ -0,0 +1,77 @@
|
||||
export interface Drawing {
|
||||
title: string;
|
||||
date: string;
|
||||
notes: string[];
|
||||
img: string;
|
||||
imgAlt: string;
|
||||
}
|
||||
|
||||
export let drawings: Drawing[] = [
|
||||
{
|
||||
title: "",
|
||||
date: "2026-03-04",
|
||||
notes: [
|
||||
"",
|
||||
],
|
||||
img: "/blog/2026/0205/27-1.webp",
|
||||
imgAlt: "",
|
||||
},
|
||||
{
|
||||
title: "",
|
||||
date: "2026-02-27",
|
||||
notes: [
|
||||
"",
|
||||
],
|
||||
img: "/blog/2026/0205/22.webp",
|
||||
imgAlt: "",
|
||||
},
|
||||
{
|
||||
title: "Porter Robinson fanart",
|
||||
date: "2026-02-26",
|
||||
notes: [
|
||||
"I drew the Worlds hand for practice and then decided to draw Po-Uta's head as well. I realised then that learning to draw gave me the ability to draw fanart.",
|
||||
"I had never considered that possibility before.",
|
||||
],
|
||||
img: "/blog/2026/0205/21.webp",
|
||||
imgAlt: "",
|
||||
},
|
||||
{
|
||||
title: "",
|
||||
date: "2026-02-23",
|
||||
notes: [
|
||||
"",
|
||||
],
|
||||
img: "/blog/2026/0205/18.webp",
|
||||
imgAlt: "",
|
||||
},
|
||||
{
|
||||
title: "",
|
||||
date: "2026-02-18",
|
||||
notes: [
|
||||
"",
|
||||
],
|
||||
img: "/blog/2026/0205/13-2.webp",
|
||||
imgAlt: "",
|
||||
},
|
||||
{
|
||||
title: "bread girl",
|
||||
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 didn't know how to draw that.",
|
||||
"Wasn't really sure how to convey that her mouth is full either, 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.",
|
||||
],
|
||||
img: "2026/breadgirl.webp",
|
||||
imgAlt: "An anime-style girl chewing on a piece of bread. She wears a ponytail and a sleeveless top.",
|
||||
},
|
||||
{
|
||||
title: "test",
|
||||
date: "2026-01-29",
|
||||
notes: [
|
||||
"A small sketch (only like 4cm wide) that I drew with a ballpoint pen on pink paper. The fact that I was able to sketch this, without any prior practice, plus an intrinsic want to be able to draw made me seriously consider learning to draw.",
|
||||
"Having learned just a little bit about drawing, I can say now (a month and a half later) that this isn't great, but it served its purpose of making me start to draw!",
|
||||
],
|
||||
img: "/blog/2026/0129/girl.webp",
|
||||
imgAlt: "sample alt text",
|
||||
},
|
||||
];
|
||||
Reference in New Issue
Block a user