finish migrating picrew page
This commit is contained in:
parent
94384a2b16
commit
16228e4db4
@ -1,59 +0,0 @@
|
||||
---
|
||||
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>
|
||||
91
src/pages/life/self/entries/picrew.astro
Normal file
91
src/pages/life/self/entries/picrew.astro
Normal file
@ -0,0 +1,91 @@
|
||||
---
|
||||
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>
|
||||
<script>
|
||||
import "../../../../scripts/image-enlarger"
|
||||
</script>
|
||||
</BasicLayout>
|
||||
@ -1,16 +0,0 @@
|
||||
---
|
||||
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:
|
||||
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 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
|
||||
@ -1,9 +1,15 @@
|
||||
---
|
||||
import BasicLayout from "../../../layouts/BasicLayout.astro";
|
||||
import CategoryPage from "../../../components/CategoryPage.astro";
|
||||
|
||||
const pageTitle = "emma's self - category";
|
||||
|
||||
const allPosts = Object.values(import.meta.glob('./entries/*.md', {eager: true}));
|
||||
const allAstroPosts = Object.values(import.meta.glob('./entries/*.astro', {eager: true}));
|
||||
|
||||
// astro pages info
|
||||
const picrewPageTitle = "emma's picrews";
|
||||
const picrewPageDesciption = "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";
|
||||
|
||||
---
|
||||
|
||||
@ -19,6 +25,7 @@ const allPosts = Object.values(import.meta.glob('./entries/*.md', {eager: true})
|
||||
<BasicLayout>
|
||||
<h1>{pageTitle}</h1>
|
||||
<ul>
|
||||
{allAstroPosts.map((post: any) => <CategoryPage url={post.url} title={picrewPageTitle} description={picrewPageDesciption}/>)}
|
||||
{allPosts.map((post: any) => <CategoryPage url={post.url} title={post.frontmatter.title} description={post.frontmatter.description}/>)}
|
||||
</ul>
|
||||
</BasicLayout>
|
||||
|
||||
64
src/scripts/image-enlarger.js
Normal file
64
src/scripts/image-enlarger.js
Normal file
@ -0,0 +1,64 @@
|
||||
const enlargeImg = document.querySelectorAll(".enlarge");
|
||||
const body = document.querySelector("body");
|
||||
const main = document.querySelector("main");
|
||||
const nav = document.querySelector("nav");
|
||||
const header = document.querySelector("header");
|
||||
// script tag needs defer attribute as footer is included by php
|
||||
// after script tag. defer makes sure the script is loaded after
|
||||
// everything else on the page has loaded
|
||||
const footer = document.querySelector("footer");
|
||||
|
||||
enlargeImg.forEach((img) => {
|
||||
img.style.cursor = "pointer";
|
||||
|
||||
img.addEventListener("click", () => {
|
||||
// make background for image
|
||||
let div = document.createElement("div");
|
||||
div.style.display = "flex";
|
||||
div.style.flexDirection = "column";
|
||||
div.style.alignItems = "center";
|
||||
div.style.justifyContent = "center";
|
||||
div.style.height = "100vh";
|
||||
div.style.width = "auto";
|
||||
div.style.backgroundColor = "#000000";
|
||||
|
||||
// image element
|
||||
let image = document.createElement("img");
|
||||
image.src = img.src;
|
||||
image.style.height = "80%";
|
||||
image.style.width = "auto";
|
||||
div.append(image);
|
||||
|
||||
let paragraph = document.createElement("p");
|
||||
paragraph.textContent =
|
||||
"Click anywhere on the image or the black background to close. You can also press the x key on your keyboard.";
|
||||
paragraph.style.color = "#FFFFFF";
|
||||
div.append(paragraph);
|
||||
// hide current page contents
|
||||
main.style.display = "none";
|
||||
nav.style.display = "none";
|
||||
footer.style.display = "none";
|
||||
header.style.display = "none";
|
||||
|
||||
// remove display: grid from body and append div with enlarged image
|
||||
body.style.display = "block";
|
||||
body.append(div);
|
||||
|
||||
const removeDiv = () => {
|
||||
div.remove();
|
||||
body.style.display = "grid";
|
||||
main.style.display = "block";
|
||||
nav.style.display = "block";
|
||||
header.style.display = "flex";
|
||||
footer.style.display = "flex";
|
||||
};
|
||||
|
||||
div.addEventListener("click", removeDiv);
|
||||
|
||||
body.addEventListener("keydown", (e) => {
|
||||
if (e.key === "x") {
|
||||
removeDiv();
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user