zepp/emmas.place
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

further work on picrew page migration

Browse Source
This commit is contained in:
emma 2025-03-03 11:27:49 -05:00
parent 53bddfbb63
commit a2799fb36e
5 changed files with 63 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Navigation.astro
View File

@ -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> -->

16
src/layouts/MarkdownGalleryLayout.astro
View File

@ -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>

59
src/layouts/PicrewLayout.astro Normal file
View File

@ -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>

5
src/pages/life/self/entries/picrew.md
View File

@ -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

27
src/styles/picrew.css
View File

@ -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;
}