SebinNyshkim/sebin-reference
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: update responsive image srcsets, genereate fewer images

Browse source
This commit is contained in:
Sebin Nyshkim 2023-07-21 15:40:33 +02:00
parent 9a529b62fb
commit d984651fc8
3 changed files with 108 additions and 127 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/views/AbilitiesView.vue
View file

@ -24,21 +24,21 @@ import AttackList from '@/components/AttackList.vue'
<picture>
<source
srcset="
@/assets/refs/attacks/sebin-fire_breath-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&avif&quality=75&withoutEnlargement&srcset
@/assets/refs/attacks/sebin-fire_breath-hires.png?w=640;960;1920;1330;1680&avif&quality=75&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
type="image/avif"
/>
<source
srcset="
@/assets/refs/attacks/sebin-fire_breath-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&webp&quality=100&withoutEnlargement&srcset
@/assets/refs/attacks/sebin-fire_breath-hires.png?w=640;960;1920;1330;1680&webp&quality=100&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
type="image/webp"
/>
<img
srcset="
@/assets/refs/attacks/sebin-fire_breath-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&png&withoutEnlargement&srcset
@/assets/refs/attacks/sebin-fire_breath-hires.png?w=640;960;1920;1330;1680&png&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
alt="Sebin Fire Breath"
@ -61,21 +61,21 @@ import AttackList from '@/components/AttackList.vue'
<picture>
<source
srcset="
@/assets/refs/attacks/sebin-flame_toss-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&avif&quality=75&withoutEnlargement&srcset
@/assets/refs/attacks/sebin-flame_toss-hires.png?w=640;960;1920;1330;1680&avif&quality=75&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
type="image/avif"
/>
<source
srcset="
@/assets/refs/attacks/sebin-flame_toss-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&webp&quality=100&withoutEnlargement&srcset
@/assets/refs/attacks/sebin-flame_toss-hires.png?w=640;960;1920;1330;1680&webp&quality=100&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
type="image/webp"
/>
<img
srcset="
@/assets/refs/attacks/sebin-flame_toss-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&png&withoutEnlargement&srcset
@/assets/refs/attacks/sebin-flame_toss-hires.png?w=640;960;1920;1330;1680&png&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
alt="Sebin Fire Breath"
@ -98,21 +98,21 @@ import AttackList from '@/components/AttackList.vue'
<picture>
<source
srcset="
@/assets/refs/attacks/sebin-kindled_fist-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&avif&quality=75&withoutEnlargement&srcset
@/assets/refs/attacks/sebin-kindled_fist-hires.png?w=640;960;1920;1330;1680&avif&quality=75&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
type="image/avif"
/>
<source
srcset="
@/assets/refs/attacks/sebin-kindled_fist-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&webp&quality=100&withoutEnlargement&srcset
@/assets/refs/attacks/sebin-kindled_fist-hires.png?w=640;960;1920;1330;1680&webp&quality=100&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
type="image/webp"
/>
<img
srcset="
@/assets/refs/attacks/sebin-kindled_fist-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&png&withoutEnlargement&srcset
@/assets/refs/attacks/sebin-kindled_fist-hires.png?w=640;960;1920;1330;1680&png&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
alt="Sebin Kindled Fist"
@ -134,21 +134,21 @@ import AttackList from '@/components/AttackList.vue'
<picture>
<source
srcset="
@/assets/refs/attacks/sebin-burning_twister-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&avif&quality=75&withoutEnlargement&srcset
@/assets/refs/attacks/sebin-burning_twister-hires.png?w=640;960;1920;1330;1680&avif&quality=75&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
type="image/avif"
/>
<source
srcset="
@/assets/refs/attacks/sebin-burning_twister-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&webp&quality=100&withoutEnlargement&srcset
@/assets/refs/attacks/sebin-burning_twister-hires.png?w=640;960;1920;1330;1680&webp&quality=100&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
type="image/webp"
/>
<img
srcset="
@/assets/refs/attacks/sebin-burning_twister-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&png&withoutEnlargement&srcset
@/assets/refs/attacks/sebin-burning_twister-hires.png?w=640;960;1920;1330;1680&png&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
alt="Sebin Burning Twister"

92
src/views/AnatomyView.vue
View file

@ -315,27 +315,27 @@ const showModal = inject<Function>(showModalKey, Function)
</p>
</section>
<RefFigure id="sebin-upper-body-ref" polaroidBorder>
<RefFigure id="sebin-upper-body-ref" cornerText>
<!-- max 3617px -->
<template #img>
<picture>
<source
srcset="
@/assets/refs/upper-body-ref.png?w=400;500;600;700;800;1000;1200;1500;1800&avif&quality=75&withoutEnlargement&srcset
@/assets/refs/upper-body-ref.png?w=400;700;1000;1200;1500;1800&avif&quality=75&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
type="image/avif"
/>
<source
srcset="
@/assets/refs/upper-body-ref.png?w=400;500;600;700;800;1000;1200;1500;1800&webp&quality=100&withoutEnlargement&srcset
@/assets/refs/upper-body-ref.png?w=400;700;1000;1200;1500;1800&webp&quality=100&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
type="image/webp"
/>
<img
srcset="
@/assets/refs/upper-body-ref.png?w=400;500;600;700;800;1000;1200;1500;1800&jpg&quality=95&withoutEnlargement&srcset
@/assets/refs/upper-body-ref.png?w=400;700;1000;1200;1500;1800&jpg&quality=95&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
alt="Sebin's upper body closeup"
@ -362,27 +362,27 @@ const showModal = inject<Function>(showModalKey, Function)
</section>
<RefGallery>
<RefFigure id="sebin-muscle-ref12" polaroidBorder>
<RefFigure id="sebin-muscle-ref12" cornerText>
<!-- max 1964px -->
<template #img>
<picture>
<source
srcset="
@/assets/refs/muscle/muscle-ref12.png?w=290;640;770;900;580;1280;1540;1800;870;0&avif&quality=75&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref12.png?w=290;770;900;580;1280;1540;1700;0&avif&quality=75&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 900px, (min-width: 80em) 770px, (min-width: 35em) 640px, 290px"
type="image/avif"
/>
<source
srcset="
@/assets/refs/muscle/muscle-ref12.png?w=290;640;770;900;580;1280;1540;1800;870;0&webp&quality=100&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref12.png?w=290;770;900;580;1280;1540;1700;0&webp&quality=100&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 900px, (min-width: 80em) 770px, (min-width: 35em) 640px, 290px"
type="image/webp"
/>
<img
srcset="
@/assets/refs/muscle/muscle-ref12.png?w=290;640;770;900;580;1280;1540;1800;870;0&jpg&quality=95&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref12.png?w=290;770;900;580;1280;1540;1700;0&jpg&quality=95&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 900px, (min-width: 80em) 770px, (min-width: 35em) 640px, 290px"
alt="Sebin flexing"
@ -395,27 +395,27 @@ const showModal = inject<Function>(showModalKey, Function)
<a href="https://twitter.com/KidRhinoBoy">Chirros</a>
</template>
</RefFigure>
<RefFigure id="sebin-muscle-ref1" polaroidBorder nsfw>
<RefFigure id="sebin-muscle-ref1" cornerText nsfw>
<!-- max 2480px -->
<template #img>
<picture>
<source
srcset="
@/assets/refs/muscle/muscle-ref1.png?w=400;500;600;700;800;1000;1200;1400;1500;1800;2100&avif&quality=75&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref1.png?w=400;700;1000;1200;1500;1800;0&avif&quality=75&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
type="image/avif"
/>
<source
srcset="
@/assets/refs/muscle/muscle-ref1.png?w=400;500;600;700;800;1000;1200;1400;1500;1800;2100&webp&quality=100&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref1.png?w=400;700;1000;1200;1500;1800;0&webp&quality=100&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
type="image/webp"
/>
<img
srcset="
@/assets/refs/muscle/muscle-ref1.png?w=400;500;600;700;800;1000;1200;1400;1500;1800;2100&jpg&quality=95&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref1.png?w=400;700;1000;1200;1500;1800;0&jpg&quality=95&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
alt="Sebin beckons"
@ -428,27 +428,27 @@ const showModal = inject<Function>(showModalKey, Function)
<a href="https://twitter.com/GrisserArt">Grisser</a>
</template>
</RefFigure>
<RefFigure id="sebin-muscle-ref2" polaroidBorder>
<RefFigure id="sebin-muscle-ref2" cornerText>
<!-- max 2953px -->
<template #img>
<picture>
<source
srcset="
@/assets/refs/muscle/muscle-ref2.png?w=415;625;750;875;1250;1500;1750;1875;2250;2625&avif&quality=75&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref2.png?w=415;625;875;1250;1500;1750;2250;2625&avif&quality=75&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 875px, (min-width: 80em) 750px, (min-width: 35em) 625px, 415px"
type="image/avif"
/>
<source
srcset="
@/assets/refs/muscle/muscle-ref2.png?w=415;625;750;875;1250;1500;1750;1875;2250;2625&webp&quality=100&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref2.png?w=415;625;875;1250;1500;1750;2250;2625&webp&quality=100&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 875px, (min-width: 80em) 750px, (min-width: 35em) 625px, 415px"
type="image/webp"
/>
<img
srcset="
@/assets/refs/muscle/muscle-ref2.png?w=415;625;750;875;1250;1500;1750;1875;2250;2625&jpg&quality=95&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref2.png?w=415;625;875;1250;1500;1750;2250;2625&jpg&quality=95&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 875px, (min-width: 80em) 750px, (min-width: 35em) 625px, 415px"
alt="Sebin jamming out to some tunes"
@ -461,27 +461,27 @@ const showModal = inject<Function>(showModalKey, Function)
<a href="https://twitter.com/artvalentinapaz">Valentina Paz</a>
</template>
</RefFigure>
<RefFigure id="sebin-muscle-ref3" polaroidBorder>
<RefFigure id="sebin-muscle-ref3" cornerText>
<!-- max 4961px -->
<template #img>
<picture>
<source
srcset="
@/assets/refs/muscle/muscle-ref3.png?w=400;500;600;700;800;1000;1200;1400;1500;1800;2100&avif&quality=75&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref3.png?w=400;800;1000;1200;1500;1800;2100&avif&quality=75&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
type="image/avif"
/>
<source
srcset="
@/assets/refs/muscle/muscle-ref3.png?w=400;500;600;700;800;1000;1200;1400;1500;1800;2100&webp&quality=100&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref3.png?w=400;800;1000;1200;1500;1800;2100&webp&quality=100&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
type="image/webp"
/>
<img
srcset="
@/assets/refs/muscle/muscle-ref3.png?w=400;500;600;700;800;1000;1200;1400;1500;1800;2100&jpg&quality=95&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref3.png?w=400;800;1000;1200;1500;1800;2100&jpg&quality=95&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
alt="Sebin flexing"
@ -494,27 +494,27 @@ const showModal = inject<Function>(showModalKey, Function)
<a href="https://www.furaffinity.net/user/Marsel-Defender"> Marsel-Defender </a>
</template>
</RefFigure>
<RefFigure id="sebin-muscle-ref4" polaroidBorder nsfw>
<RefFigure id="sebin-muscle-ref4" cornerText nsfw>
<!-- max 3000px -->
<template #img>
<picture>
<source
srcset="
@/assets/refs/muscle/muscle-ref4.png?w=400;700;840;980;800;1400;1680;1960;1200;2100;2520;0&avif&quality=75&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref4.png?w=400;980;1400;1680;1960;2100;2520;0&avif&quality=75&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 980px, (min-width: 80em) 840px, (min-width: 35em) 700px, 400px"
type="image/avif"
/>
<source
srcset="
@/assets/refs/muscle/muscle-ref4.png?w=400;700;840;980;800;1400;1680;1960;1200;2100;2520;0&webp&quality=100&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref4.png?w=400;980;1400;1680;1960;2100;2520;0&webp&quality=100&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 980px, (min-width: 80em) 840px, (min-width: 35em) 700px, 400px"
type="image/webp"
/>
<img
srcset="
@/assets/refs/muscle/muscle-ref4.png?w=400;700;840;980;800;1400;1680;1960;1200;2100;2520;0&jpg&quality=95&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref4.png?w=400;980;1400;1680;1960;2100;2520;0&jpg&quality=95&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 980px, (min-width: 80em) 840px, (min-width: 35em) 700px, 400px"
alt="Sebin soaping up"
@ -527,27 +527,27 @@ const showModal = inject<Function>(showModalKey, Function)
<a href="https://twitter.com/O_reowoof">(o)reo</a>
</template>
</RefFigure>
<RefFigure id="sebin-muscle-ref5" polaroidBorder nsfw>
<RefFigure id="sebin-muscle-ref5" cornerText nsfw>
<!-- max 2000px -->
<template #img>
<picture>
<source
srcset="
@/assets/refs/muscle/muscle-ref5.jpg?w=415;525;630;735;830;1050;0&avif&quality=75&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref5.jpg?w=415;735;1050;0&avif&quality=75&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 735px, (min-width: 80em) 630px, (min-width: 35em) 525px, 415px"
type="image/avif"
/>
<source
srcset="
@/assets/refs/muscle/muscle-ref5.jpg?w=415;525;630;735;830;1050;0&webp&quality=100&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref5.jpg?w=415;735;1050;0&webp&quality=100&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 735px, (min-width: 80em) 630px, (min-width: 35em) 525px, 415px"
type="image/webp"
/>
<img
srcset="
@/assets/refs/muscle/muscle-ref5.jpg?w=415;525;630;735;830;1050;0&jpg&quality=95&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref5.jpg?w=415;735;1050;0&jpg&quality=95&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 735px, (min-width: 80em) 630px, (min-width: 35em) 525px, 415px"
alt="Sebin bulging out"
@ -560,27 +560,27 @@ const showModal = inject<Function>(showModalKey, Function)
<a href="https://www.furaffinity.net/user/sexmuffin">SexMuffin</a>
</template>
</RefFigure>
<RefFigure id="sebin-muscle-ref6" polaroidBorder nsfw>
<RefFigure id="sebin-muscle-ref6" cornerText nsfw>
<!-- max 1500px -->
<template #img>
<picture>
<source
srcset="
@/assets/refs/muscle/muscle-ref6.png?w=400;545;655;765;800;1090;1310;1200;0&avif&quality=75&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref6.png?w=400;765;1090;1310;0&avif&quality=75&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 765px, (min-width: 80em) 655px, (min-width: 35em) 545px, 400px"
type="image/avif"
/>
<source
srcset="
@/assets/refs/muscle/muscle-ref6.png?w=400;545;655;765;800;1090;1310;1200;0&webp&quality=100&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref6.png?w=400;765;1090;1310;0&webp&quality=100&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 765px, (min-width: 80em) 655px, (min-width: 35em) 545px, 400px"
type="image/webp"
/>
<img
srcset="
@/assets/refs/muscle/muscle-ref6.png?w=400;545;655;765;800;1090;1310;1200;0&jpg&quality=95&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref6.png?w=400;765;1090;1310;0&jpg&quality=95&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 765px, (min-width: 80em) 655px, (min-width: 35em) 545px, 400px"
alt="Sebin showing you his rings"
@ -593,7 +593,7 @@ const showModal = inject<Function>(showModalKey, Function)
<a href="https://twitter.com/tehknuxlight">Knuxlight</a>
</template>
</RefFigure>
<RefFigure id="sebin-muscle-ref7" polaroidBorder>
<RefFigure id="sebin-muscle-ref7" cornerText>
<!-- max 1240px -->
<template #img>
<picture>
@ -626,7 +626,7 @@ const showModal = inject<Function>(showModalKey, Function)
<a href="https://www.furaffinity.net/user/shonuff44">ShoNuff44</a>
</template>
</RefFigure>
<RefFigure id="sebin-muscle-ref8" polaroidBorder>
<RefFigure id="sebin-muscle-ref8" cornerText>
<!-- max 1245px -->
<template #img>
<picture>
@ -659,27 +659,27 @@ const showModal = inject<Function>(showModalKey, Function)
<a href="https://twitter.com/UsurpThem">Usurp</a>
</template>
</RefFigure>
<RefFigure id="sebin-muscle-ref9" polaroidBorder>
<RefFigure id="sebin-muscle-ref9" cornerText>
<!-- max 2550px -->
<template #img>
<picture>
<source
srcset="
@/assets/refs/muscle/muscle-ref9.jpg?w=400;735;880;1120;800;1470;1760;2240;1200;2205;0&avif&quality=75&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref9.jpg?w=400;735;1470;1760;2240;1200;0&avif&quality=75&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 1120px, (min-width: 80em) 880px, (min-width: 35em) 735px, 400px"
type="image/avif"
/>
<source
srcset="
@/assets/refs/muscle/muscle-ref9.jpg?w=400;735;880;1120;800;1470;1760;2240;1200;2205;0&webp&quality=100&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref9.jpg?w=400;735;1470;1760;2240;1200;0&webp&quality=100&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 1120px, (min-width: 80em) 880px, (min-width: 35em) 735px, 400px"
type="image/webp"
/>
<img
srcset="
@/assets/refs/muscle/muscle-ref9.jpg?w=400;735;880;1120;800;1470;1760;2240;1200;2205;0&jpg&quality=95&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref9.jpg?w=400;735;1470;1760;2240;1200;0&jpg&quality=95&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 1120px, (min-width: 80em) 880px, (min-width: 35em) 735px, 400px"
alt="Sebin getting out of the pool"
@ -692,27 +692,27 @@ const showModal = inject<Function>(showModalKey, Function)
<a href="https://www.furaffinity.net/user/j-cock">j-cock</a>
</template>
</RefFigure>
<RefFigure id="sebin-muscle-ref10" polaroidBorder nsfw>
<RefFigure id="sebin-muscle-ref10" cornerText nsfw>
<!-- max 2421px -->
<template #img>
<picture>
<source
srcset="
@/assets/refs/muscle/muscle-ref10.jpg?w=380;425;510;600;760;850;1020;1200;1140;1275;1530;1800&avif&quality=75&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref10.jpg?w=380;600;850;1275;1530;1800&avif&quality=75&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 600px, (min-width: 80em) 510px, (min-width: 35em) 425px, 380px"
type="image/avif"
/>
<source
srcset="
@/assets/refs/muscle/muscle-ref10.jpg?w=380;425;510;600;760;850;1020;1200;1140;1275;1530;1800&webp&quality=100&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref10.jpg?w=380;600;850;1275;1530;1800&webp&quality=100&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 600px, (min-width: 80em) 510px, (min-width: 35em) 425px, 380px"
type="image/webp"
/>
<img
srcset="
@/assets/refs/muscle/muscle-ref10.jpg?w=380;425;510;600;760;850;1020;1200;1140;1275;1530;1800&jpg&quality=95&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref10.jpg?w=380;600;850;1275;1530;1800&jpg&quality=95&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 600px, (min-width: 80em) 510px, (min-width: 35em) 425px, 380px"
alt="Sebin getting frisky on the train"
@ -725,27 +725,27 @@ const showModal = inject<Function>(showModalKey, Function)
<a href="https://twitter.com/Wintech3112">Winty</a>
</template>
</RefFigure>
<RefFigure id="sebin-muscle-ref11" polaroidBorder>
<RefFigure id="sebin-muscle-ref11" cornerText>
<!-- max 3184px -->
<template #img>
<picture>
<source
srcset="
@/assets/refs/muscle/muscle-ref11.png?w=400;545;655;765;800;1090;1210;1530;1200;1635;1965;2295&avif&quality=75&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref11.png?w=400;765;1200;1635;1965;2295&avif&quality=75&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 765px, (min-width: 80em) 655px, (min-width: 35em) 545px, 400px"
type="image/avif"
/>
<source
srcset="
@/assets/refs/muscle/muscle-ref11.png?w=400;545;655;765;800;1090;1210;1530;1200;1635;1965;2295&webp&quality=100&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref11.png?w=400;765;1200;1635;1965;2295&webp&quality=100&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 765px, (min-width: 80em) 655px, (min-width: 35em) 545px, 400px"
type="image/webp"
/>
<img
srcset="
@/assets/refs/muscle/muscle-ref11.png?w=400;545;655;765;800;1090;1210;1530;1200;1635;1965;2295&png&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref11.png?w=400;765;1200;1635;1965;2295&png&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 765px, (min-width: 80em) 655px, (min-width: 35em) 545px, 400px"
alt="Sebin getting ready to lift"

119
src/views/ClothingView.vue
View file

@ -9,27 +9,27 @@ import RefGallery from '@/components/RefGallery.vue'
</section>
<RefGallery>
<RefFigure id="casual-outfit" polaroidBorder>
<RefFigure id="casual-outfit" cornerText>
<!-- max 1876px -->
<template #img>
<picture>
<source
srcset="
@/assets/refs/clothes/casual/fullbody.png?w=400;650;780;910;800;1300;1560;1820;1200;0&avif&quality=75&withoutEnlargement&srcset
@/assets/refs/clothes/casual/fullbody.png?w=400;780;910;1300;1560;0&avif&quality=75&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 910px, (min-width: 80em) 780px, (min-width: 35em) 650px, 400px"
type="image/avif"
/>
<source
srcset="
@/assets/refs/clothes/casual/fullbody.png?w=400;650;780;910;800;1300;1560;1820;1200;0&webp&quality=100&withoutEnlargement&srcset
@/assets/refs/clothes/casual/fullbody.png?w=400;780;910;1300;1560;0&webp&quality=100&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 910px, (min-width: 80em) 780px, (min-width: 35em) 650px, 400px"
type="image/webp"
/>
<img
srcset="
@/assets/refs/clothes/casual/fullbody.png?w=400;650;780;910;800;1300;1560;1820;1200;0&png&withoutEnlargement&srcset
@/assets/refs/clothes/casual/fullbody.png?w=400;780;910;1300;1560;0&png&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 910px, (min-width: 80em) 780px, (min-width: 35em) 650px, 400px"
alt="Sebin in his casual outfit"
@ -38,35 +38,32 @@ import RefGallery from '@/components/RefGallery.vue'
</picture>
</template>
<template #caption>
<p>Sebin in his casual outfit</p>
<p>Black tank top, flannell shirt, shorts (w/ dangling bands), sneakers</p>
</template>
<template #caption>Sebin in his casual outfit</template>
<template #copyright>
<a href="https://twitter.com/coffeerelated">coffeerelated</a>
</template>
</RefFigure>
<RefFigure id="sebin-winter-outfit" polaroidBorder>
<RefFigure id="sebin-winter-outfit" cornerText>
<!-- max 1470px -->
<template #img>
<picture>
<source
srcset="
@/assets/refs/clothes/cold/fullbody.png?w=400;655;785;915;800;1310;1200;0&avif&quality=75&withoutEnlargement&srcset
@/assets/refs/clothes/cold/fullbody.png?w=400;785;915;1310;0&avif&quality=75&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 915px, (min-width: 80em) 785px, (min-width: 35em) 655px, 400px"
/>
<source
srcset="
@/assets/refs/clothes/cold/fullbody.png?w=400;655;785;915;800;1310;1200;0&webp&quality=100&withoutEnlargement&srcset
@/assets/refs/clothes/cold/fullbody.png?w=400;785;915;1310;0&webp&quality=100&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 915px, (min-width: 80em) 785px, (min-width: 35em) 655px, 400px"
/>
<img
srcset="
@/assets/refs/clothes/cold/fullbody.png?w=400;655;785;915;800;1310;1200;0&jpg&withoutEnlargement&srcset
@/assets/refs/clothes/cold/fullbody.png?w=400;785;915;1310;0&jpg&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 915px, (min-width: 80em) 785px, (min-width: 35em) 655px, 400px"
alt="Sebin in his cold weather outfit"
@ -75,35 +72,32 @@ import RefGallery from '@/components/RefGallery.vue'
</picture>
</template>
<template #caption>
<p>Sebin in his cold weather outfit</p>
<p>Winter coat, scarf, zip hoodie, jeans, winter boots</p>
</template>
<template #caption>Sebin in his cold weather outfit</template>
<template #copyright>
<a href="https://twitter.com/lara_belem_">Lara Belém</a>
</template>
</RefFigure>
<RefFigure id="sebin-workout-outfit-fullbody" polaroidBorder>
<RefFigure id="sebin-workout-outfit-fullbody" cornerText>
<!-- max 1758px -->
<template #img>
<picture>
<source
srcset="
@/assets/refs/clothes/workout/fullbody.png?w=400;535;640;745;800;1070;1280;1490;1200;1605;0&avif&quality=75&withoutEnlargement&srcset
@/assets/refs/clothes/workout/fullbody.png?w=400;640;800;1070;1280;1490;1605;0&avif&quality=75&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 745px, (min-width: 80em) 639px, (min-width: 35em) 532px, 400px"
/>
<source
srcset="
@/assets/refs/clothes/workout/fullbody.png?w=400;535;640;745;800;1070;1280;1490;1200;1605;0&webp&quality=100&withoutEnlargement&srcset
@/assets/refs/clothes/workout/fullbody.png?w=400;640;800;1070;1280;1490;1605;0&webp&quality=100&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 745px, (min-width: 80em) 639px, (min-width: 35em) 532px, 400px"
/>
<img
srcset="
@/assets/refs/clothes/workout/fullbody.png?w=400;535;640;745;800;1070;1280;1490;1200;1605;0&jpg&withoutEnlargement&srcset
@/assets/refs/clothes/workout/fullbody.png?w=400;640;800;1070;1280;1490;1605;0&jpg&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 745px, (min-width: 80em) 639px, (min-width: 35em) 532px, 400px"
alt="Sebin in his workout outfit (fullbody)"
@ -112,37 +106,32 @@ import RefGallery from '@/components/RefGallery.vue'
</picture>
</template>
<template #caption>
<p>Sebin in his workout outfit</p>
<p>
<strong>Full body:</strong> Snapback hat, tank top, fingerless gloves, shorts, sneakers
</p>
</template>
<template #caption>Sebin in his workout outfit (full body)</template>
<template #copyright>
<a href="https://twitter.com/turquoize_art">Atlas</a>
</template>
</RefFigure>
<RefFigure id="sebin-workout-outfit-close" polaroidBorder>
<RefFigure id="sebin-workout-outfit-close" cornerText>
<!-- max 2480px -->
<template #img>
<picture>
<source
srcset="
@/assets/refs/clothes/workout/closeup.png?w=400;500;600;700;800;1000;1200;1400;1500;1800;2100&avif&quality=75&withoutEnlargement&srcset
@/assets/refs/clothes/workout/closeup.png?w=400;600;800;1000;1200;1400;1800;0&avif&quality=75&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500x, 400px"
/>
<source
srcset="
@/assets/refs/clothes/workout/closeup.png?w=400;500;600;700;800;1000;1200;1400;1500;1800;2100&webp&quality=100&withoutEnlargement&srcset
@/assets/refs/clothes/workout/closeup.png?w=400;600;800;1000;1200;1400;1800;0&webp&quality=100&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
/>
<img
srcset="
@/assets/refs/clothes/workout/closeup.png?w=400;500;600;700;800;1000;1200;1400;1500;1800;2100&jpg&withoutEnlargement&srcset
@/assets/refs/clothes/workout/closeup.png?w=400;600;800;1000;1200;1400;1800;0&jpg&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
alt="Sebin in his workout outfit (close-up)"
@ -151,91 +140,83 @@ import RefGallery from '@/components/RefGallery.vue'
</picture>
</template>
<template #caption>
<p>Sebin in his workout outfit</p>
<p>
<strong>Close-up:</strong> Snapback hat, headphones, tank top, fingerless gloves, shorts,
smartwatch
</p>
</template>
<template #caption>Sebin in his workout outfit (close-up)</template>
<template #copyright>
<a href="https://twitter.com/purpledragonrei">Rei</a>
</template>
</RefFigure>
<RefFigure id="sebin-tracksuit-pants" polaroidBorder>
<!-- max 961px -->
<RefFigure id="sebin-tracksuit-pants" nsfw cornerText>
<!-- max 1656px -->
<template #img>
<picture>
<source
srcset="
@/assets/refs/clothes/lazy/pants.jpg?w=400;500;600;700;0&avif&quality=75&withoutEnlargement&srcset
@/assets/refs/clothes/lazy/fullbody.png?w=400;850;1210;1460;0&avif&quality=75&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
sizes="(min-width: 120em) 850px, (min-width: 80em) 730px, (min-width: 35em) 605px, 400px"
type="image/avif"
/>
<source
srcset="
@/assets/refs/clothes/lazy/pants.jpg?w=400;500;600;700;0&webp&quality=100&withoutEnlargement&srcset
@/assets/refs/clothes/lazy/fullbody.png?w=400;850;1210;1460;0&webp&quality=100&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
sizes="(min-width: 120em) 850px, (min-width: 80em) 730px, (min-width: 35em) 605px, 400px"
type="image/webp"
/>
<img
srcset="
@/assets/refs/clothes/lazy/pants.jpg?w=400;500;600;700;0&jpg&quality=95&withoutEnlargement&srcset
@/assets/refs/clothes/lazy/fullbody.png?w=400;850;1210;1460;0&jpg&quality=95&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
sizes="(min-width: 120em) 850px, (min-width: 80em) 730px, (min-width: 35em) 605px, 400px"
alt="Tracksuit pants"
loading="lazy"
/>
</picture>
</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 #caption>Sebin in leisure tracksuit pants</template>
<!-- <template #copyright></template> -->
<template #copyright>
<a href="https://twitter.com/leolynx86">Leolynx</a>
</template>
</RefFigure>
<RefFigure id="sebin-topless" polaroidBorder>
<!-- max 333px -->
<RefFigure id="sebin-topless" cornerText>
<!-- max 2119px -->
<template #img>
<picture>
<source
srcset="@/assets/refs/clothes/lazy/undies.jpg?w=0&avif&withoutEnlargement&srcset"
sizes="333px"
srcset="
@/assets/refs/clothes/lazy/undies.png?w=400;880;1028;1470;1760;0&avif&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 1028px, (min-width: 80em) 880px, (min-width: 35em) 735px, 400px"
type="image/avif"
/>
<source
srcset="@/assets/refs/clothes/lazy/undies.jpg?w=0&webp&withoutEnlargement&srcset"
sizes="333px"
srcset="
@/assets/refs/clothes/lazy/undies.png?w=400;880;1028;1470;1760;0&webp&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 1028px, (min-width: 80em) 880px, (min-width: 35em) 735px, 400px"
type="image/webp"
/>
<img
srcset="@/assets/refs/clothes/lazy/undies.jpg?w=0&withoutEnlargement&srcset"
sizes="333px"
srcset="
@/assets/refs/clothes/lazy/undies.png?w=400;880;1028;1470;1760;0&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 1028px, (min-width: 80em) 880px, (min-width: 35em) 735px, 400px"
alt="Shorts"
loading="lazy"
/>
</picture>
</template>
<template #caption>
<p>Topless w/ jockstrap/boxer briefs</p>
<p>
For even more comfort, Sebin tends to forgoe pants completely and save on laundry by only
wearing the absolute necessary.
</p>
</template>
<template #caption>Sebin in his favorite boxers</template>
<!-- <template #copyright></template> -->
<template #copyright>
<a href="https://twitter.com/Retroslime69">Retroslime69</a>
</template>
</RefFigure>
</RefGallery>
</template>