88 lines
4.4 KiB
Plaintext
88 lines
4.4 KiB
Plaintext
---
|
|
import BasicLayout from "../../../../layouts/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 imageHeight = "300";
|
|
const imageWidth = "300";
|
|
|
|
const imageOneAlt = "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";
|
|
const imageOneCreditUrl = "https://picrew.me/en/image_maker/94097"
|
|
const imageOneCreditText = "picrew image maker by sangled"
|
|
|
|
const imageTwoAlt = "an image of emma created in picrew. the image is fem presenting and explores characteristics such as hair styles and clothing that emma sees herself wearing and expressing";
|
|
const imageTwoCreditUrl = "https://picrew.me/en/image_maker/2446448";
|
|
const imageTwoCreditText = "picrew image maker by seyimOn";
|
|
|
|
const imageThreeAlt = "an image of emma created in picrew. the image is fem presenting and explores characteristics such as hair styles, jewlery, transitioning, and features of emma like freckles";
|
|
const imageThreeCreditUrl = "https://picrew.me/en/image_maker/644129";
|
|
const imageThreeCreditText = "picrew image maker by makowka";
|
|
|
|
const imageFourAlt = "an image of emma created in picrew. the image is fem presenting and explores characteristics such as shorter, lighter hair and makeup as well as feature of emma such as her current style of glasses and freckles";
|
|
const imageFourCreditUrl = "https://picrew.me/en/image_maker/426722";
|
|
const imageFourCreditText = "picrew image maker by grgikau";
|
|
|
|
const borderColor = "#db7093";
|
|
const borderColorDark = "#474973";
|
|
|
|
const title = "emma's picrews"
|
|
---
|
|
<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>{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>{title}</h1>
|
|
<p>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</p>
|
|
<div class="picrew-gallery">
|
|
<figure>
|
|
<Image class="enlarge" src={imageOne} alt={imageOneAlt} height={imageHeight} width={imageWidth}/>
|
|
<figcaption><a href=`${imageOneCreditUrl}` target="_blank">{imageOneCreditText}</a></figcaption>
|
|
</figure>
|
|
<figure>
|
|
<Image class="enlarge" src={imageTwo} alt={imageTwoAlt} height={imageHeight} width={imageWidth}/>
|
|
<figcaption><a href=`${imageTwoCreditUrl}` target="_blank">{imageTwoCreditText}</a></figcaption>
|
|
</figure>
|
|
<figure>
|
|
<Image class="enlarge" src={imageThree} alt={imageThreeAlt} height={imageHeight} width={imageWidth}/>
|
|
<figcaption><a href=`${imageThreeCreditUrl}` target="_blank">{imageThreeCreditText}</a></figcaption>
|
|
</figure>
|
|
<figure>
|
|
<Image class="enlarge" src={imageFour} alt={imageFourAlt} height={imageHeight} width={imageWidth}/>
|
|
<figcaption><a href=`${imageFourCreditUrl}` target="_blank">{imageFourCreditText}</a></figcaption>
|
|
</figure>
|
|
</div>
|
|
</BasicLayout> |