change picrew page to markdown
This commit is contained in:
parent
be370cbbe9
commit
32f14ee88c
@ -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> -->
|
||||
|
||||
@ -3,13 +3,25 @@ import "../styles/global.css";
|
||||
import Header from "../components/Header.astro";
|
||||
import Navigation from "../components/Navigation.astro";
|
||||
import Footer from "../components/Footer.astro";
|
||||
---
|
||||
|
||||
const { pageTitle } = Astro.props;
|
||||
---
|
||||
<html lang="en">
|
||||
<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>{pageTitle}</title>
|
||||
</head>
|
||||
<body>
|
||||
<Header />
|
||||
<Navigation />
|
||||
<main>
|
||||
<section>
|
||||
<h1>{pageTitle}</h1>
|
||||
<slot />
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
|
||||
63
src/layouts/PicrewLayout.astro
Normal file
63
src/layouts/PicrewLayout.astro
Normal file
@ -0,0 +1,63 @@
|
||||
---
|
||||
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;
|
||||
|
||||
---
|
||||
<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>
|
||||
<figure>
|
||||
<Image src={imageTwo} alt={frontmatter.images.two.alt} height={frontmatter.images.two.height} width={frontmatter.images.two.width}/>
|
||||
<figcaption><a href=`${frontmatter.images.two.creditUrl}` target="_blank">{frontmatter.images.two.creditText}</a></figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<Image src={imageThree} alt={frontmatter.images.three.alt} height={frontmatter.images.three.height} width={frontmatter.images.three.width}/>
|
||||
<figcaption><a href=`${frontmatter.images.three.creditUrl}` target="_blank">{frontmatter.images.three.creditText}</a></figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<Image src={imageFour} alt={frontmatter.images.four.alt} height={frontmatter.images.four.height} width={frontmatter.images.four.width}/>
|
||||
<figcaption><a href=`${frontmatter.images.four.creditUrl}` target="_blank">{frontmatter.images.four.creditText}</a></figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</BasicLayout>
|
||||
|
||||
<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>
|
||||
@ -14,40 +14,7 @@ const emmaNews = [
|
||||
`<li>02-20-2025 - i've been spending time learning how to use astro instead of hand coding my site. with time there will be a lot here. i like the way content is managed in astro</li>`
|
||||
];
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
<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>{pageTitle}</title>
|
||||
<style is:global define:vars={{backgroundColor, backgroundColorNightMode, textColorNightMode, linkColorNightMode}}>
|
||||
.status {
|
||||
height: 120px;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.status .statuslol_container .statuslol {
|
||||
background: var(--backgroundColor) !important;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.status .statuslol_content p {
|
||||
color: var(--textColorNightMode);
|
||||
}
|
||||
.status .statuslol_container .statuslol {
|
||||
background: var(--backgroundColorNightMode) !important;
|
||||
}
|
||||
.status .statuslol_content .statuslol_time a {
|
||||
color: var(--linkColorNightMode) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<BasicLayout>
|
||||
<h1>welcome to {pageTitle}</h1>
|
||||
<BasicLayout pageTitle={pageTitle}>
|
||||
<p>
|
||||
you're at emma's place. coffee or tea of your choice are
|
||||
waiting for you. my cat baxter loves pets if you'd like to say
|
||||
@ -78,5 +45,27 @@ const emmaNews = [
|
||||
<Fragment set:html={emmaNews.map((news) => news)} />
|
||||
</ul>
|
||||
</BasicLayout>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<style is:global define:vars={{backgroundColor, backgroundColorNightMode, textColorNightMode, linkColorNightMode}}>
|
||||
.status {
|
||||
height: 120px;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.status .statuslol_container .statuslol {
|
||||
background: var(--backgroundColor) !important;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.status .statuslol_content p {
|
||||
color: var(--textColorNightMode);
|
||||
}
|
||||
.status .statuslol_container .statuslol {
|
||||
background: var(--backgroundColorNightMode) !important;
|
||||
}
|
||||
.status .statuslol_content .statuslol_time a {
|
||||
color: var(--linkColorNightMode) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,88 +0,0 @@
|
||||
---
|
||||
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>
|
||||
34
src/pages/life/self/entries/picrew.md
Normal file
34
src/pages/life/self/entries/picrew.md
Normal file
@ -0,0 +1,34 @@
|
||||
---
|
||||
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
|
||||
two:
|
||||
alt: "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"
|
||||
height: "300"
|
||||
width: "300"
|
||||
creditUrl: https://picrew.me/en/image_maker/2446448
|
||||
creditText: picrew image maker by seyimOn
|
||||
three:
|
||||
alt: "an image of emma created in picrew. the image is fem presenting and explores characteristics such as hair styles, jewelry, transitioning, and features of emma like freckles"
|
||||
height: "300"
|
||||
width: "300"
|
||||
creditUrl: https://picrew.me/en/image_maker/644129
|
||||
creditText: picrew image maker by makowka
|
||||
four:
|
||||
alt: "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"
|
||||
height: "300"
|
||||
width: "300"
|
||||
creditUrl: https://picrew.me/en/image_maker/426722
|
||||
creditText: picrew image maker by grgikau
|
||||
---
|
||||
|
||||
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
|
||||
@ -5,29 +5,9 @@ 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";
|
||||
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
<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>{pageTitle}</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<BasicLayout>
|
||||
<h1>{pageTitle}</h1>
|
||||
<BasicLayout pageTitle={pageTitle}>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user