finished adding content to drawing gallery for now
This commit is contained in:
@@ -10,7 +10,9 @@
|
|||||||
|
|
||||||
{#snippet drawingGalleryEntry({d}: {d: Drawing})}
|
{#snippet drawingGalleryEntry({d}: {d: Drawing})}
|
||||||
<div class="gallery-entry">
|
<div class="gallery-entry">
|
||||||
|
<div class="gallery-entry-img-container">
|
||||||
<img src="{d.img}" alt="{d.imgAlt}">
|
<img src="{d.img}" alt="{d.imgAlt}">
|
||||||
|
</div>
|
||||||
<div class="gallery-entry-info">
|
<div class="gallery-entry-info">
|
||||||
<p class="gallery-entry-title">{d.title} <span>{d.date}</span></p>
|
<p class="gallery-entry-title">{d.title} <span>{d.date}</span></p>
|
||||||
{#each d.notes as note}
|
{#each d.notes as note}
|
||||||
@@ -32,6 +34,8 @@
|
|||||||
|
|
||||||
<p>Why do I do this, you may wonder? to pressure myself to draw more</p>
|
<p>Why do I do this, you may wonder? to pressure myself to draw more</p>
|
||||||
|
|
||||||
|
<p>If you're interested, here's a post about me <a href="/blog/2026/0205">drawing every day for 28 days</a> to learn to draw. You may recognise some of the drawings there; I picked out my favourite drawings and added them here!</p>
|
||||||
|
|
||||||
<div class="drawing-container">
|
<div class="drawing-container">
|
||||||
{#each drawings as d}
|
{#each drawings as d}
|
||||||
{@render drawingGalleryEntry({d})}
|
{@render drawingGalleryEntry({d})}
|
||||||
@@ -51,7 +55,15 @@
|
|||||||
height: 340px;
|
height: 340px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gallery-entry img, .gallery-entry-info {
|
.gallery-entry-img-container {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-entry-img-container, .gallery-entry-info {
|
||||||
|
border-radius: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-entry-img-container, .gallery-entry-info {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
@@ -60,11 +72,17 @@
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-radius: 16px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.gallery-entry img {
|
.gallery-entry img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
|
transition: scale var(--duration-animation) var(--anim-curve);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-entry:hover img {
|
||||||
|
scale: 1.2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gallery-entry:hover .gallery-entry-info {
|
.gallery-entry:hover .gallery-entry-info {
|
||||||
|
|||||||
@@ -8,19 +8,20 @@ export interface Drawing {
|
|||||||
|
|
||||||
export let drawings: Drawing[] = [
|
export let drawings: Drawing[] = [
|
||||||
{
|
{
|
||||||
title: "",
|
title: "SMILE! :D",
|
||||||
date: "2026-03-04",
|
date: "2026-03-04",
|
||||||
notes: [
|
notes: [
|
||||||
"",
|
"This is actually the construction sketch of a drawing I later went over with a fineliner and coloured pencils. However, I kind of prefer the pencil sketch.",
|
||||||
|
"This was my first attempt at a head-on perspective. I had fun drawing details like the scrunchie, the jeans, and the smile!",
|
||||||
],
|
],
|
||||||
img: "/blog/2026/0205/27-1.webp",
|
img: "/blog/2026/0205/27-1.webp",
|
||||||
imgAlt: "",
|
imgAlt: "",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "",
|
title: "Cyborg Arm",
|
||||||
date: "2026-02-27",
|
date: "2026-02-27",
|
||||||
notes: [
|
notes: [
|
||||||
"",
|
"Possibly my favourite sketch from the drawing challenge, because she looks cool, but also because her design deviates from the other characters a bit.",
|
||||||
],
|
],
|
||||||
img: "/blog/2026/0205/22.webp",
|
img: "/blog/2026/0205/22.webp",
|
||||||
imgAlt: "",
|
imgAlt: "",
|
||||||
@@ -36,19 +37,20 @@ export let drawings: Drawing[] = [
|
|||||||
imgAlt: "",
|
imgAlt: "",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "",
|
title: "Emilia",
|
||||||
date: "2026-02-23",
|
date: "2026-02-23",
|
||||||
notes: [
|
notes: [
|
||||||
"",
|
"My first character with the new style of drawing eyes I picked up from a manga drawing book!",
|
||||||
|
"I named her Emilia because she looked like a more nice and caring character.",
|
||||||
],
|
],
|
||||||
img: "/blog/2026/0205/18.webp",
|
img: "/blog/2026/0205/18.webp",
|
||||||
imgAlt: "",
|
imgAlt: "",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "",
|
title: "Elizabeth",
|
||||||
date: "2026-02-18",
|
date: "2026-02-18",
|
||||||
notes: [
|
notes: [
|
||||||
"",
|
"She's the product of me trying to re-draw the character I drew on day 1 of my drawing challenge, and I was really glad to see that I had actually improved!",
|
||||||
],
|
],
|
||||||
img: "/blog/2026/0205/13-2.webp",
|
img: "/blog/2026/0205/13-2.webp",
|
||||||
imgAlt: "",
|
imgAlt: "",
|
||||||
|
|||||||
Reference in New Issue
Block a user