refactor: use gallery component proper

This commit is contained in:
Sebin Nyshkim 2022-01-06 18:58:39 +01:00
parent ae949c98ea
commit 9cca827347

View file

@ -2,70 +2,120 @@
<prose> <prose>
<h2>Clothing Styles</h2> <h2>Clothing Styles</h2>
<h3>Casual Wear</h3>
<ref-gallery> <ref-gallery>
<figure> <ref-figure polaroidBorder>
<img src="@/assets/refs/clothes/casual/fullbody.png" alt="Full Body" /> <template #img>
<figcaption> <img
src="@/assets/refs/clothes/casual/fullbody.png"
alt="Sebin in his casual outfit"
/>
</template>
<template #caption>
<p>Sebin in his casual outfit</p>
<p> <p>
Black tank top, flannell shirt, shorts (w/ dangling bands), sneakers Black tank top, flannell shirt, shorts (w/ dangling bands), sneakers
</p> </p>
<p> </template>
By <a href="https://twitter.com/coffeerelated">coffeerelated</a>
</p>
</figcaption>
</figure>
</ref-gallery>
<h3>Cold Weather</h3> <template #copyright
<ref-gallery> ><a href="https://twitter.com/coffeerelated"
<figure> >coffeerelated</a
<img src="@/assets/refs/clothes/cold/fullbody.png" alt="Full Body" /> ></template
<figcaption> >
</ref-figure>
<ref-figure polaroidBorder>
<template #img
><img
src="@/assets/refs/clothes/cold/fullbody.png"
alt="Sebin in his cold weather outfit"
/></template>
<template #caption>
<p>Sebin in his cold weather outfit</p>
<p>Winter coat, scarf, zip hoodie, jeans, winter boots</p> <p>Winter coat, scarf, zip hoodie, jeans, winter boots</p>
<p>By <a href="https://twitter.com/lara_belem_">Lara Belém</a></p> </template>
</figcaption>
</figure>
</ref-gallery>
<h3>Workout</h3> <template #copyright
<ref-gallery> ><a href="https://twitter.com/lara_belem_">Lara Belém</a></template
<figure> >
<img src="@/assets/refs/clothes/workout/fullbody.png" alt="Full Body" /> </ref-figure>
<figcaption>
<ref-figure polaroidBorder>
<template #img
><img
src="@/assets/refs/clothes/workout/fullbody.png"
alt="Sebin in his workout outfit"
/></template>
<template #caption>
<p>Sebin in his workout outfit</p>
<p> <p>
<strong>Full body:</strong> Snapback hat, tank top, fingerless <strong>Full body:</strong> Snapback hat, tank top, fingerless
gloves, shorts, sneakers gloves, shorts, sneakers
</p> </p>
<p>By <a href="https://twitter.com/turquoize_art">Atlas</a></p> </template>
</figcaption>
</figure> <template #copyright
<figure> ><a href="https://twitter.com/turquoize_art">Atlas</a></template
<img src="@/assets/refs/clothes/workout/closeup.jpg" alt="Close-up" /> >
<figcaption> </ref-figure>
<ref-figure polaroidBorder>
<template #img
><img
src="@/assets/refs/clothes/workout/closeup.jpg"
alt="Sebin in his workout outfit"
/></template>
<template #caption>
<p>Sebin in his workout outfit</p>
<p> <p>
<strong>Close-up:</strong> Snapback hat, headphones, tank top, <strong>Close-up:</strong> Snapback hat, headphones, tank top,
fingerless gloves, shorts, smartwatch fingerless gloves, shorts, smartwatch
</p> </p>
<p>By <a href="https://twitter.com/purpledragonrei">Rei</a></p> </template>
</figcaption>
</figure>
</ref-gallery>
<h3>"Doesn't need to leave the house today" Style</h3> <template #copyright
<ref-gallery> ><a href="https://twitter.com/purpledragonrei">Rei</a></template
<figure> >
<img src="@/assets/refs/clothes/lazy/pants.jpg" alt="Tank Top" /> </ref-figure>
<figcaption>
<p>Tracksuit pants (optional)</p> <ref-figure polaroidBorder>
</figcaption> <template #img
</figure> ><img
<figure> src="@/assets/refs/clothes/lazy/pants.jpg"
<img src="@/assets/refs/clothes/lazy/undies.jpg" alt="Shorts" /> alt="Tracksuit pants"
<figcaption> /></template>
<template #caption>
<p>Tracksuit pants</p>
<p>
Sebin likes to wear comfortable clothes at home when he doesn't need
to leave the house or is enjoying some leisure time after work or on
weekends.
</p>
</template>
<!-- <template #copyright></template> -->
</ref-figure>
<ref-figure polaroidBorder>
<template #img>
<img src="@/assets/refs/clothes/lazy/undies.jpg" alt="Shorts"
/></template>
<template #caption>
<p>Topless w/ jockstrap/boxer briefs</p> <p>Topless w/ jockstrap/boxer briefs</p>
</figcaption> <p>
</figure> For even more comfort, Sebin tends to forgoe pants completely and
save on laundry by only wearing the absolute necessary.
</p>
</template>
<!-- <template #copyright></template> -->
</ref-figure>
</ref-gallery> </ref-gallery>
</prose> </prose>
</template> </template>
@ -73,9 +123,10 @@
<script> <script>
import Prose from "@/components/Prose.vue"; import Prose from "@/components/Prose.vue";
import RefGallery from "@/components/Gallery.vue"; import RefGallery from "@/components/Gallery.vue";
import RefFigure from "@/components/Figure.vue";
export default { export default {
components: { Prose, RefGallery }, components: { Prose, RefGallery, RefFigure },
}; };
</script> </script>