From a2799fb36ec563ebc2edbbb30693628e3e1b56d6 Mon Sep 17 00:00:00 2001
From: zepp <zepp@zepps.cafe>
Date: Mon, 3 Mar 2025 11:27:49 -0500
Subject: [PATCH] further work on picrew page migration

---
 src/components/Navigation.astro         |  4 +-
 src/layouts/MarkdownGalleryLayout.astro | 16 -------
 src/layouts/PicrewLayout.astro          | 59 +++++++++++++++++++++++++
 src/pages/life/self/entries/picrew.md   |  5 +--
 src/styles/picrew.css                   | 27 -----------
 5 files changed, 63 insertions(+), 48 deletions(-)
 delete mode 100644 src/layouts/MarkdownGalleryLayout.astro
 create mode 100644 src/layouts/PicrewLayout.astro
 delete mode 100644 src/styles/picrew.css
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
index cfd6703..39ff355 100644
--- a/src/components/Navigation.astro
+++ b/src/components/Navigation.astro
@@ -7,8 +7,8 @@ const backgroundColorNightMode = "#240046";
 	<h3>life of emma</h3>
 	<ul>
 		<li>
-				<!-- <a href="/life/self/">emma's self</a> -->
-                 emma's self
+				<a href="/life/self/">emma's self</a>
+                 <!-- emma's self -->
 		</li>
 		<li>
 				<!-- <a href="/life/interests/">emma's interests</a> -->
diff --git a/src/layouts/MarkdownGalleryLayout.astro b/src/layouts/MarkdownGalleryLayout.astro
deleted file mode 100644
index 4ef0546..0000000
--- a/src/layouts/MarkdownGalleryLayout.astro
+++ /dev/null
@@ -1,16 +0,0 @@
----
-import BasicLayout from "./BasicLayout.astro";
-
-const { frontmatter } = Astro.props;
----
-<head>
-    <meta charset="utf-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>{frontmatter.title}</title>
-</head>
-
-<BasicLayout>
-    <h1>{frontmatter.title}</h1>
-    <slot />
-</BasicLayout>
\ No newline at end of file
diff --git a/src/layouts/PicrewLayout.astro b/src/layouts/PicrewLayout.astro
new file mode 100644
index 0000000..ecb8624
--- /dev/null
+++ b/src/layouts/PicrewLayout.astro
@@ -0,0 +1,59 @@
+---
+import BasicLayout from "./BasicLayout.astro";
+import { Image } from "astro:assets";
+
+import imageOne from "../images/picrews/self-one.jpg"
+import imageTwo from "../images/picrews/self-two.jpg"
+import imageThree from "../images/picrews/self-three.jpg"
+import imageFour from "../images/picrews/self-four.jpg"
+
+const borderColor = "#db7093";
+const borderColorDark = "#474973";
+
+const { frontmatter } = Astro.props;
+
+---
+<head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{frontmatter.title}</title>
+
+    <style define:vars={{borderColor, borderColorDark}}>
+            .picrew-gallery {
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: center;
+                gap: 2rem;
+                margin: 1.75rem;
+            }
+
+            .picrew-gallery img {
+                border: 4px solid var(--borderColor);
+                border-radius: 5%;
+            }
+
+            .picrew-gallery,
+            .picrew-gallery-header {
+                text-align: center;
+            }
+
+            @media (prefers-color-scheme: dark) {
+                .picrew-gallery img{
+                    border: 4px solid var(--borderColorDark);
+                }
+            }
+    </style>
+</head>
+
+<BasicLayout>
+    <h1>{frontmatter.title}</h1>
+    <slot />
+    <div class="picrew-gallery">
+        <figure>
+            <Image src={imageOne} alt={frontmatter.images.one.alt} height={frontmatter.images.one.height} width={frontmatter.images.one.width}/>
+            <figcaption><a href=`${frontmatter.images.one.creditUrl}` target="_blank">{frontmatter.images.one.creditText}</a></figcaption>
+        </figure>
+    </div>
+
+</BasicLayout>
\ No newline at end of file
diff --git a/src/pages/life/self/entries/picrew.md b/src/pages/life/self/entries/picrew.md
index 31ced7f..5aae8cb 100644
--- a/src/pages/life/self/entries/picrew.md
+++ b/src/pages/life/self/entries/picrew.md
@@ -1,17 +1,16 @@
 ---
-layout: ../../../../layouts/MarkdownLayout.astro
+layout: ../../../../layouts/PicrewLayout.astro
 
 title: emma's picrews
 description: "i've used picrew as a means to express myself in terms of outwards appearance. it has helped me better understand how i see myself. i'd like to share them"
 
 images:
   one:
-    src: "../../../../images/picrews/self-one.png"
     alt: "an image of emma created in picrew. the image is fem presenting and represent characteristics that emma sees of herself when she can be fem presenting in her physical space"
     height: "300"
     width: "300"
     creditUrl: https://picrew.me/en/image_maker/94097
-    creditText: picrew image maker</a> by sangled
+    creditText: picrew image maker by sangled
 ---
 
 picrew has been a wonderful help in figuring who i am. how i want to present when everything is right for me to do so. the below pictures all capture different parts of me, i see myself in all of them in some way. some picrews allowed me to add things that others didn't. for example, a top i really want to have one day, or the fact that i have freckles on my face. i love that picrew makes it accessible to discover my identity. it is such a friendly tool. over time i've found that people have different image makers that capture so many wonderful parts of myself, and humanity in general
diff --git a/src/styles/picrew.css b/src/styles/picrew.css
deleted file mode 100644
index f87e953..0000000
--- a/src/styles/picrew.css
+++ /dev/null
@@ -1,27 +0,0 @@
-:root {
-  --border-color: #db7093;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --border-color: #474973;
-  }
-}
-
-.picrew-gallery {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 2rem;
-  margin: 1.75rem;
-}
-
-.picrew-gallery img {
-  border: 4px solid var(--border-color);
-  border-radius: 5%;
-}
-
-.picrew-gallery,
-.picrew-gallery-header {
-  text-align: center;
-}
