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

refactor: update vite-imagetools asset link directives

Browse source 
Starting with v5 vite-imagetools has removed shorthands
This commit is contained in:
Sebin Nyshkim 2023-09-01 13:06:40 +02:00
parent 89831a64a2
commit d2774e8150
6 changed files with 90 additions and 90 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/App.vue
View file

@ -62,21 +62,21 @@ provide(showModalKey, showModal)
<picture>
<source
srcset="
@/assets/sebin-smug-icon.png?w=36;40;48;56;72;80;96;112;108;120;144;168&avif&quality=75&srcset
@/assets/sebin-smug-icon.png?w=36;40;48;56;72;80;96;112;108;120;144;168&format=avif&quality=75&as=srcset
"
sizes="(min-width: 120em) 56px, (min-width: 80em) 48px, (min-width: 35em) 40px, 36px"
type="image/avif"
/>
<source
srcset="
@/assets/sebin-smug-icon.png?w=36;40;48;56;72;80;96;112;108;120;144;168&webp&quality=100&srcset
@/assets/sebin-smug-icon.png?w=36;40;48;56;72;80;96;112;108;120;144;168&format=webp&quality=100&as=srcset
"
sizes="(min-width: 120em) 56px, (min-width: 80em) 48px, (min-width: 35em) 40px, 36px"
type="image/webp"
/>
<img
class="nav-logo"
srcset="@/assets/sebin-smug-icon.png?w=36;40;48;56;72;80;96;112;108;120;144;168&png&srcset"
srcset="@/assets/sebin-smug-icon.png?w=36;40;48;56;72;80;96;112;108;120;144;168&format=png&as=srcset"
sizes="(min-width: 120em) 56px, (min-width: 80em) 48px, (min-width: 35em) 40px, 36px"
alt="Sebin Avatar"
/>

6
src/components/WelcomeHeader.vue
View file

@ -5,21 +5,21 @@
<picture>
<source
srcset="
@/assets/sebin-smug-icon.png?w=180;200;240;280;350;400;480;0&avif&quality=75&withoutEnlargement&srcset
@/assets/sebin-smug-icon.png?w=180;200;240;280;350;400;480;0&format=avif&quality=75&withoutEnlargement&as=srcset
"
sizes="(min-width: 120em) 280px, (min-width: 80em) 240px, (min-width: 35em) 200px, 180px"
type="image/avif"
/>
<source
srcset="
@/assets/sebin-smug-icon.png?w=180;200;240;280;350;400;480;0&webp&quality=100&withoutEnlargement&srcset
@/assets/sebin-smug-icon.png?w=180;200;240;280;350;400;480;0&format=webp&quality=100&withoutEnlargement&as=srcset
"
sizes="(min-width: 120em) 280px, (min-width: 80em) 240px, (min-width: 35em) 200px, 180px"
type="image/webp"
/>
<img
srcset="
@/assets/sebin-smug-icon.png?w=180;200;240;280;350;400;480;0&png&withoutEnlargement&srcset
@/assets/sebin-smug-icon.png?w=180;200;240;280;350;400;480;0&format=png&withoutEnlargement&as=srcset
"
sizes="(min-width: 120em) 280px, (min-width: 80em) 240px, (min-width: 35em) 200px, 180px"
alt="Sebin Avatar"

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;960;1920;1330;1680&avif&quality=75&withoutEnlargement&srcset
@/assets/refs/attacks/sebin-fire_breath-hires.png?w=640;960;1920;1330;1680&format=avif&quality=75&withoutEnlargement&as=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;960;1920;1330;1680&webp&quality=100&withoutEnlargement&srcset
@/assets/refs/attacks/sebin-fire_breath-hires.png?w=640;960;1920;1330;1680&format=webp&quality=100&withoutEnlargement&as=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;960;1920;1330;1680&png&withoutEnlargement&srcset
@/assets/refs/attacks/sebin-fire_breath-hires.png?w=640;960;1920;1330;1680&format=png&withoutEnlargement&as=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;960;1920;1330;1680&avif&quality=75&withoutEnlargement&srcset
@/assets/refs/attacks/sebin-flame_toss-hires.png?w=640;960;1920;1330;1680&format=avif&quality=75&withoutEnlargement&as=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;960;1920;1330;1680&webp&quality=100&withoutEnlargement&srcset
@/assets/refs/attacks/sebin-flame_toss-hires.png?w=640;960;1920;1330;1680&format=webp&quality=100&withoutEnlargement&as=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;960;1920;1330;1680&png&withoutEnlargement&srcset
@/assets/refs/attacks/sebin-flame_toss-hires.png?w=640;960;1920;1330;1680&format=png&withoutEnlargement&as=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;960;1920;1330;1680&avif&quality=75&withoutEnlargement&srcset
@/assets/refs/attacks/sebin-kindled_fist-hires.png?w=640;960;1920;1330;1680&format=avif&quality=75&withoutEnlargement&as=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;960;1920;1330;1680&webp&quality=100&withoutEnlargement&srcset
@/assets/refs/attacks/sebin-kindled_fist-hires.png?w=640;960;1920;1330;1680&format=webp&quality=100&withoutEnlargement&as=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;960;1920;1330;1680&png&withoutEnlargement&srcset
@/assets/refs/attacks/sebin-kindled_fist-hires.png?w=640;960;1920;1330;1680&format=png&withoutEnlargement&as=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;960;1920;1330;1680&avif&quality=75&withoutEnlargement&srcset
@/assets/refs/attacks/sebin-burning_twister-hires.png?w=640;960;1920;1330;1680&format=avif&quality=75&withoutEnlargement&as=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;960;1920;1330;1680&webp&quality=100&withoutEnlargement&srcset
@/assets/refs/attacks/sebin-burning_twister-hires.png?w=640;960;1920;1330;1680&format=webp&quality=100&withoutEnlargement&as=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;960;1920;1330;1680&png&withoutEnlargement&srcset
@/assets/refs/attacks/sebin-burning_twister-hires.png?w=640;960;1920;1330;1680&format=png&withoutEnlargement&as=srcset
"
sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
alt="Sebin Burning Twister"

102
src/views/AnatomyView.vue
View file

@ -47,7 +47,7 @@ const showModal = inject<Function>(showModalKey, Function)
<picture v-if="isNsfw">
<source
srcset="
@/assets/refs/sebin-ref-body-NSFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&avif&quality=75&withoutEnlargement&srcset
@/assets/refs/sebin-ref-body-NSFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&format=avif&quality=75&withoutEnlargement&as=srcset
"
sizes="(min-width: 120em) 2240px,
(min-width: 100em) 1920px,
@ -61,7 +61,7 @@ const showModal = inject<Function>(showModalKey, Function)
/>
<source
srcset="
@/assets/refs/sebin-ref-body-NSFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&webp&quality=100&withoutEnlargement&srcset
@/assets/refs/sebin-ref-body-NSFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&format=webp&quality=100&withoutEnlargement&as=srcset
"
sizes="(min-width: 120em) 2240px,
(min-width: 100em) 1920px,
@ -75,7 +75,7 @@ const showModal = inject<Function>(showModalKey, Function)
/>
<img
srcset="
@/assets/refs/sebin-ref-body-NSFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&png&withoutEnlargement&srcset
@/assets/refs/sebin-ref-body-NSFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&format=png&withoutEnlargement&as=srcset
"
sizes="(min-width: 120em) 2240px,
(min-width: 100em) 1920px,
@ -92,7 +92,7 @@ const showModal = inject<Function>(showModalKey, Function)
<picture v-else>
<source
srcset="
@/assets/refs/sebin-ref-body-SFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&avif&quality=75&withoutEnlargement&srcset
@/assets/refs/sebin-ref-body-SFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&format=avif&quality=75&withoutEnlargement&as=srcset
"
sizes="(min-width: 120em) 2240px,
(min-width: 100em) 1920px,
@ -106,7 +106,7 @@ const showModal = inject<Function>(showModalKey, Function)
/>
<source
srcset="
@/assets/refs/sebin-ref-body-SFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&webp&quality=100&withoutEnlargement&srcset
@/assets/refs/sebin-ref-body-SFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&format=webp&quality=100&withoutEnlargement&as=srcset
"
sizes="(min-width: 120em) 2240px,
(min-width: 100em) 1920px,
@ -120,7 +120,7 @@ const showModal = inject<Function>(showModalKey, Function)
/>
<img
srcset="
@/assets/refs/sebin-ref-body-SFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&png&withoutEnlargement&srcset
@/assets/refs/sebin-ref-body-SFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&format=png&withoutEnlargement&as=srcset
"
sizes="(min-width: 120em) 2240px,
(min-width: 100em) 1920px,
@ -213,7 +213,7 @@ const showModal = inject<Function>(showModalKey, Function)
<picture>
<source
srcset="
@/assets/refs/sebin-ref-expressions.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;0&avif&quality=75&withoutEnlargement&srcset
@/assets/refs/sebin-ref-expressions.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;0&format=avif&quality=75&withoutEnlargement&as=srcset
"
sizes="(min-width: 120em) 2240px,
(min-width: 100em) 1920px,
@ -227,7 +227,7 @@ const showModal = inject<Function>(showModalKey, Function)
/>
<source
srcset="
@/assets/refs/sebin-ref-expressions.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;0&webp&quality=100&withoutEnlargement&srcset
@/assets/refs/sebin-ref-expressions.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;0&format=webp&quality=100&withoutEnlargement&as=srcset
"
sizes="(min-width: 120em) 2240px,
(min-width: 100em) 1920px,
@ -241,7 +241,7 @@ const showModal = inject<Function>(showModalKey, Function)
/>
<img
srcset="
@/assets/refs/sebin-ref-expressions.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;0&png&withoutEnlargement&srcset
@/assets/refs/sebin-ref-expressions.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;0&format=png&withoutEnlargement&as=srcset
"
sizes="(min-width: 120em) 2240px,
(min-width: 100em) 1920px,
@ -321,21 +321,21 @@ const showModal = inject<Function>(showModalKey, Function)
<picture>
<source
srcset="
@/assets/refs/upper-body-ref.png?w=400;700;1000;1200;1500;1800&avif&quality=75&withoutEnlargement&srcset
@/assets/refs/upper-body-ref.png?w=400;700;1000;1200;1500;1800&format=avif&quality=75&withoutEnlargement&as=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;700;1000;1200;1500;1800&webp&quality=100&withoutEnlargement&srcset
@/assets/refs/upper-body-ref.png?w=400;700;1000;1200;1500;1800&format=webp&quality=100&withoutEnlargement&as=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;700;1000;1200;1500;1800&jpg&quality=95&withoutEnlargement&srcset
@/assets/refs/upper-body-ref.png?w=400;700;1000;1200;1500;1800&format=jpg&quality=95&withoutEnlargement&as=srcset
"
sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
alt="Sebin's upper body closeup"
@ -368,21 +368,21 @@ const showModal = inject<Function>(showModalKey, Function)
<picture>
<source
srcset="
@/assets/refs/muscle/muscle-ref12.png?w=290;770;900;580;1280;1540;1700;0&avif&quality=75&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref12.png?w=290;770;900;580;1280;1540;1700;0&format=avif&quality=75&withoutEnlargement&as=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;770;900;580;1280;1540;1700;0&webp&quality=100&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref12.png?w=290;770;900;580;1280;1540;1700;0&format=webp&quality=100&withoutEnlargement&as=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;770;900;580;1280;1540;1700;0&jpg&quality=95&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref12.png?w=290;770;900;580;1280;1540;1700;0&format=jpg&quality=95&withoutEnlargement&as=srcset
"
sizes="(min-width: 120em) 900px, (min-width: 80em) 770px, (min-width: 35em) 640px, 290px"
alt="Sebin flexing"
@ -401,21 +401,21 @@ const showModal = inject<Function>(showModalKey, Function)
<picture>
<source
srcset="
@/assets/refs/muscle/muscle-ref1.png?w=400;700;1000;1200;1500;1800;0&avif&quality=75&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref1.png?w=400;700;1000;1200;1500;1800;0&format=avif&quality=75&withoutEnlargement&as=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;700;1000;1200;1500;1800;0&webp&quality=100&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref1.png?w=400;700;1000;1200;1500;1800;0&format=webp&quality=100&withoutEnlargement&as=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;700;1000;1200;1500;1800;0&jpg&quality=95&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref1.png?w=400;700;1000;1200;1500;1800;0&format=jpg&quality=95&withoutEnlargement&as=srcset
"
sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
alt="Sebin beckons"
@ -434,21 +434,21 @@ const showModal = inject<Function>(showModalKey, Function)
<picture>
<source
srcset="
@/assets/refs/muscle/muscle-ref2.png?w=415;625;875;1250;1500;1750;2250;2625&avif&quality=75&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref2.png?w=415;625;875;1250;1500;1750;2250;2625&format=avif&quality=75&withoutEnlargement&as=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;875;1250;1500;1750;2250;2625&webp&quality=100&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref2.png?w=415;625;875;1250;1500;1750;2250;2625&format=webp&quality=100&withoutEnlargement&as=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;875;1250;1500;1750;2250;2625&jpg&quality=95&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref2.png?w=415;625;875;1250;1500;1750;2250;2625&format=jpg&quality=95&withoutEnlargement&as=srcset
"
sizes="(min-width: 120em) 875px, (min-width: 80em) 750px, (min-width: 35em) 625px, 415px"
alt="Sebin jamming out to some tunes"
@ -467,21 +467,21 @@ const showModal = inject<Function>(showModalKey, Function)
<picture>
<source
srcset="
@/assets/refs/muscle/muscle-ref3.png?w=400;800;1000;1200;1500;1800;2100&avif&quality=75&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref3.png?w=400;800;1000;1200;1500;1800;2100&format=avif&quality=75&withoutEnlargement&as=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;800;1000;1200;1500;1800;2100&webp&quality=100&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref3.png?w=400;800;1000;1200;1500;1800;2100&format=webp&quality=100&withoutEnlargement&as=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;800;1000;1200;1500;1800;2100&jpg&quality=95&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref3.png?w=400;800;1000;1200;1500;1800;2100&format=jpg&quality=95&withoutEnlargement&as=srcset
"
sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
alt="Sebin flexing"
@ -500,21 +500,21 @@ const showModal = inject<Function>(showModalKey, Function)
<picture>
<source
srcset="
@/assets/refs/muscle/muscle-ref4.png?w=400;980;1400;1680;1960;2100;2520;0&avif&quality=75&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref4.png?w=400;980;1400;1680;1960;2100;2520;0&format=avif&quality=75&withoutEnlargement&as=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;980;1400;1680;1960;2100;2520;0&webp&quality=100&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref4.png?w=400;980;1400;1680;1960;2100;2520;0&format=webp&quality=100&withoutEnlargement&as=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;980;1400;1680;1960;2100;2520;0&jpg&quality=95&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref4.png?w=400;980;1400;1680;1960;2100;2520;0&format=jpg&quality=95&withoutEnlargement&as=srcset
"
sizes="(min-width: 120em) 980px, (min-width: 80em) 840px, (min-width: 35em) 700px, 400px"
alt="Sebin soaping up"
@ -533,21 +533,21 @@ const showModal = inject<Function>(showModalKey, Function)
<picture>
<source
srcset="
@/assets/refs/muscle/muscle-ref5.jpg?w=415;735;1050;0&avif&quality=75&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref5.jpg?w=415;735;1050;0&format=avif&quality=75&withoutEnlargement&as=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;735;1050;0&webp&quality=100&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref5.jpg?w=415;735;1050;0&format=webp&quality=100&withoutEnlargement&as=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;735;1050;0&jpg&quality=95&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref5.jpg?w=415;735;1050;0&format=jpg&quality=95&withoutEnlargement&as=srcset
"
sizes="(min-width: 120em) 735px, (min-width: 80em) 630px, (min-width: 35em) 525px, 415px"
alt="Sebin bulging out"
@ -566,21 +566,21 @@ const showModal = inject<Function>(showModalKey, Function)
<picture>
<source
srcset="
@/assets/refs/muscle/muscle-ref6.png?w=400;765;1090;1310;0&avif&quality=75&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref6.png?w=400;765;1090;1310;0&format=avif&quality=75&withoutEnlargement&as=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;765;1090;1310;0&webp&quality=100&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref6.png?w=400;765;1090;1310;0&format=webp&quality=100&withoutEnlargement&as=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;765;1090;1310;0&jpg&quality=95&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref6.png?w=400;765;1090;1310;0&format=jpg&quality=95&withoutEnlargement&as=srcset
"
sizes="(min-width: 120em) 765px, (min-width: 80em) 655px, (min-width: 35em) 545px, 400px"
alt="Sebin showing you his rings"
@ -599,21 +599,21 @@ const showModal = inject<Function>(showModalKey, Function)
<picture>
<source
srcset="
@/assets/refs/muscle/muscle-ref7.tiff?w=415;995;0&avif&quality=75&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref7.tiff?w=415;995;0&format=avif&quality=75&withoutEnlargement&as=srcset
"
sizes="(min-width: 120em) 1240px, (min-width: 80em) 1190px, (min-width: 35em) 995px, 415px"
type="image/avif"
/>
<source
srcset="
@/assets/refs/muscle/muscle-ref7.tiff?w=415;995;0&webp&quality=100&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref7.tiff?w=415;995;0&format=webp&quality=100&withoutEnlargement&as=srcset
"
sizes="(min-width: 120em) 1240px, (min-width: 80em) 1190px, (min-width: 35em) 992px, 415px"
type="image/webp"
/>
<img
srcset="
@/assets/refs/muscle/muscle-ref7.tiff?w=415;995;0&jpg&quality=95&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref7.tiff?w=415;995;0&format=jpg&quality=95&withoutEnlargement&as=srcset
"
sizes="(min-width: 120em) 1240px, (min-width: 80em) 1190px, (min-width: 35em) 992px, 415px"
alt="Sebin ready to throw down"
@ -632,21 +632,21 @@ const showModal = inject<Function>(showModalKey, Function)
<picture>
<source
srcset="
@/assets/refs/muscle/muscle-ref8.png?w=415;1000;0&avif&quality=75&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref8.png?w=415;1000;0&format=avif&quality=75&withoutEnlargement&as=srcset
"
sizes="(min-width: 80em) 1200px, (min-width: 35em) 1000px, 415px"
type="image/avif"
/>
<source
srcset="
@/assets/refs/muscle/muscle-ref8.png?w=415;1000;0&webp&quality=100&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref8.png?w=415;1000;0&format=webp&quality=100&withoutEnlargement&as=srcset
"
sizes="(min-width: 80em) 1200px, (min-width: 35em) 1000px, 415px"
type="image/webp"
/>
<img
srcset="
@/assets/refs/muscle/muscle-ref8.png?w=415;1000;0&jpg&quality=95&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref8.png?w=415;1000;0&format=jpg&quality=95&withoutEnlargement&as=srcset
"
sizes="(min-width: 80em) 1200px, (min-width: 35em) 1000px, 415px"
alt="Sebin looking aloof (but chill)"
@ -665,21 +665,21 @@ const showModal = inject<Function>(showModalKey, Function)
<picture>
<source
srcset="
@/assets/refs/muscle/muscle-ref9.jpg?w=400;735;1470;1760;2240;1200;0&avif&quality=75&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref9.jpg?w=400;735;1470;1760;2240;1200;0&format=avif&quality=75&withoutEnlargement&as=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;1470;1760;2240;1200;0&webp&quality=100&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref9.jpg?w=400;735;1470;1760;2240;1200;0&format=webp&quality=100&withoutEnlargement&as=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;1470;1760;2240;1200;0&jpg&quality=95&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref9.jpg?w=400;735;1470;1760;2240;1200;0&format=jpg&quality=95&withoutEnlargement&as=srcset
"
sizes="(min-width: 120em) 1120px, (min-width: 80em) 880px, (min-width: 35em) 735px, 400px"
alt="Sebin getting out of the pool"
@ -698,21 +698,21 @@ const showModal = inject<Function>(showModalKey, Function)
<picture>
<source
srcset="
@/assets/refs/muscle/muscle-ref10.jpg?w=380;600;850;1275;1530;1800&avif&quality=75&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref10.jpg?w=380;600;850;1275;1530;1800&format=avif&quality=75&withoutEnlargement&as=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;600;850;1275;1530;1800&webp&quality=100&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref10.jpg?w=380;600;850;1275;1530;1800&format=webp&quality=100&withoutEnlargement&as=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;600;850;1275;1530;1800&jpg&quality=95&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref10.jpg?w=380;600;850;1275;1530;1800&format=jpg&quality=95&withoutEnlargement&as=srcset
"
sizes="(min-width: 120em) 600px, (min-width: 80em) 510px, (min-width: 35em) 425px, 380px"
alt="Sebin getting frisky on the train"
@ -731,21 +731,21 @@ const showModal = inject<Function>(showModalKey, Function)
<picture>
<source
srcset="
@/assets/refs/muscle/muscle-ref11.png?w=400;765;1200;1635;1965;2295&avif&quality=75&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref11.png?w=400;765;1200;1635;1965;2295&format=avif&quality=75&withoutEnlargement&as=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;765;1200;1635;1965;2295&webp&quality=100&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref11.png?w=400;765;1200;1635;1965;2295&format=webp&quality=100&withoutEnlargement&as=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;765;1200;1635;1965;2295&png&withoutEnlargement&srcset
@/assets/refs/muscle/muscle-ref11.png?w=400;765;1200;1635;1965;2295&format=png&withoutEnlargement&as=srcset
"
sizes="(min-width: 120em) 765px, (min-width: 80em) 655px, (min-width: 35em) 545px, 400px"
alt="Sebin getting ready to lift"
@ -770,17 +770,17 @@ const showModal = inject<Function>(showModalKey, Function)
<template #img>
<picture>
<source
srcset="@/assets/refs/sebin-ref-penis.png?w=480;720;0&avif&quality=75&srcset"
srcset="@/assets/refs/sebin-ref-penis.png?w=480;720;0&format=avif&quality=75&as=srcset"
sizes="(min-width: 45em) 1155px, (min-width: 30em) 720px, 480px"
type="image/avif"
/>
<source
srcset="@/assets/refs/sebin-ref-penis.png?w=480;720;0&webp&quality=100&srcset"
srcset="@/assets/refs/sebin-ref-penis.png?w=480;720;0&format=webp&quality=100&as=srcset"
sizes="(min-width: 45em) 1155px, (min-width: 30em) 720px, 480px"
type="image/webp"
/>
<img
srcset="@/assets/refs/sebin-ref-penis.png?w=480;720;0&png&srcset"
srcset="@/assets/refs/sebin-ref-penis.png?w=480;720;0&format=png&as=srcset"
sizes="(min-width: 45em) 1155px, (min-width: 30em) 720px, 480px"
alt="Sebin's manly parts"
loading="lazy"

36
src/views/ClothingView.vue
View file

@ -15,21 +15,21 @@ import RefGallery from '@/components/RefGallery.vue'
<picture>
<source
srcset="
@/assets/refs/clothes/casual/fullbody.png?w=400;780;910;1300;1560;0&avif&quality=75&withoutEnlargement&srcset
@/assets/refs/clothes/casual/fullbody.png?w=400;780;910;1300;1560;0&format=avif&quality=75&withoutEnlargement&as=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;780;910;1300;1560;0&webp&quality=100&withoutEnlargement&srcset
@/assets/refs/clothes/casual/fullbody.png?w=400;780;910;1300;1560;0&format=webp&quality=100&withoutEnlargement&as=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;780;910;1300;1560;0&png&withoutEnlargement&srcset
@/assets/refs/clothes/casual/fullbody.png?w=400;780;910;1300;1560;0&format=png&withoutEnlargement&as=srcset
"
sizes="(min-width: 120em) 910px, (min-width: 80em) 780px, (min-width: 35em) 650px, 400px"
alt="Sebin in his casual outfit"
@ -51,19 +51,19 @@ import RefGallery from '@/components/RefGallery.vue'
<picture>
<source
srcset="
@/assets/refs/clothes/cold/fullbody.png?w=400;785;915;1310;0&avif&quality=75&withoutEnlargement&srcset
@/assets/refs/clothes/cold/fullbody.png?w=400;785;915;1310;0&format=avif&quality=75&withoutEnlargement&as=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;785;915;1310;0&webp&quality=100&withoutEnlargement&srcset
@/assets/refs/clothes/cold/fullbody.png?w=400;785;915;1310;0&format=webp&quality=100&withoutEnlargement&as=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;785;915;1310;0&jpg&withoutEnlargement&srcset
@/assets/refs/clothes/cold/fullbody.png?w=400;785;915;1310;0&format=jpg&withoutEnlargement&as=srcset
"
sizes="(min-width: 120em) 915px, (min-width: 80em) 785px, (min-width: 35em) 655px, 400px"
alt="Sebin in his cold weather outfit"
@ -85,19 +85,19 @@ import RefGallery from '@/components/RefGallery.vue'
<picture>
<source
srcset="
@/assets/refs/clothes/workout/fullbody.png?w=400;640;800;1070;1280;1490;1605;0&avif&quality=75&withoutEnlargement&srcset
@/assets/refs/clothes/workout/fullbody.png?w=400;640;800;1070;1280;1490;1605;0&format=avif&quality=75&withoutEnlargement&as=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;640;800;1070;1280;1490;1605;0&webp&quality=100&withoutEnlargement&srcset
@/assets/refs/clothes/workout/fullbody.png?w=400;640;800;1070;1280;1490;1605;0&format=webp&quality=100&withoutEnlargement&as=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;640;800;1070;1280;1490;1605;0&jpg&withoutEnlargement&srcset
@/assets/refs/clothes/workout/fullbody.png?w=400;640;800;1070;1280;1490;1605;0&format=jpg&withoutEnlargement&as=srcset
"
sizes="(min-width: 120em) 745px, (min-width: 80em) 639px, (min-width: 35em) 532px, 400px"
alt="Sebin in his workout outfit (fullbody)"
@ -119,19 +119,19 @@ import RefGallery from '@/components/RefGallery.vue'
<picture>
<source
srcset="
@/assets/refs/clothes/workout/closeup.png?w=400;600;800;1000;1200;1400;1800;0&avif&quality=75&withoutEnlargement&srcset
@/assets/refs/clothes/workout/closeup.png?w=400;600;800;1000;1200;1400;1800;0&format=avif&quality=75&withoutEnlargement&as=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;600;800;1000;1200;1400;1800;0&webp&quality=100&withoutEnlargement&srcset
@/assets/refs/clothes/workout/closeup.png?w=400;600;800;1000;1200;1400;1800;0&format=webp&quality=100&withoutEnlargement&as=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;600;800;1000;1200;1400;1800;0&jpg&withoutEnlargement&srcset
@/assets/refs/clothes/workout/closeup.png?w=400;600;800;1000;1200;1400;1800;0&format=jpg&withoutEnlargement&as=srcset
"
sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
alt="Sebin in his workout outfit (close-up)"
@ -153,21 +153,21 @@ import RefGallery from '@/components/RefGallery.vue'
<picture>
<source
srcset="
@/assets/refs/clothes/lazy/fullbody.png?w=400;850;1210;1460;0&avif&quality=75&withoutEnlargement&srcset
@/assets/refs/clothes/lazy/fullbody.png?w=400;850;1210;1460;0&format=avif&quality=75&withoutEnlargement&as=srcset
"
sizes="(min-width: 120em) 850px, (min-width: 80em) 730px, (min-width: 35em) 605px, 400px"
type="image/avif"
/>
<source
srcset="
@/assets/refs/clothes/lazy/fullbody.png?w=400;850;1210;1460;0&webp&quality=100&withoutEnlargement&srcset
@/assets/refs/clothes/lazy/fullbody.png?w=400;850;1210;1460;0&format=webp&quality=100&withoutEnlargement&as=srcset
"
sizes="(min-width: 120em) 850px, (min-width: 80em) 730px, (min-width: 35em) 605px, 400px"
type="image/webp"
/>
<img
srcset="
@/assets/refs/clothes/lazy/fullbody.png?w=400;850;1210;1460;0&jpg&quality=95&withoutEnlargement&srcset
@/assets/refs/clothes/lazy/fullbody.png?w=400;850;1210;1460;0&format=jpg&quality=95&withoutEnlargement&as=srcset
"
sizes="(min-width: 120em) 850px, (min-width: 80em) 730px, (min-width: 35em) 605px, 400px"
alt="Tracksuit pants"
@ -189,21 +189,21 @@ import RefGallery from '@/components/RefGallery.vue'
<picture>
<source
srcset="
@/assets/refs/clothes/lazy/undies.png?w=400;880;1028;1470;1760;0&avif&withoutEnlargement&srcset
@/assets/refs/clothes/lazy/undies.png?w=400;880;1028;1470;1760;0&format=avif&withoutEnlargement&as=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.png?w=400;880;1028;1470;1760;0&webp&withoutEnlargement&srcset
@/assets/refs/clothes/lazy/undies.png?w=400;880;1028;1470;1760;0&format=webp&withoutEnlargement&as=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.png?w=400;880;1028;1470;1760;0&withoutEnlargement&srcset
@/assets/refs/clothes/lazy/undies.png?w=400;880;1028;1470;1760;0&withoutEnlargement&as=srcset
"
sizes="(min-width: 120em) 1028px, (min-width: 80em) 880px, (min-width: 35em) 735px, 400px"
alt="Shorts"

6
src/views/OverdriveView.vue
View file

@ -15,21 +15,21 @@ import RefFigure from '@/components/RefFigure.vue'
<picture>
<source
srcset="
@/assets/refs/sebin-overdrive_ref-hires.jpg?w=450;500;600;900;0&avif&quality=75&withoutEnlargement&srcset
@/assets/refs/sebin-overdrive_ref-hires.jpg?w=450;500;600;900;0&format=avif&quality=75&withoutEnlargement&as=srcset
"
sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 450px"
type="image/avif"
/>
<source
srcset="
@/assets/refs/sebin-overdrive_ref-hires.jpg?w=450;500;600;900;0&webp&quality=100&withoutEnlargement&srcset
@/assets/refs/sebin-overdrive_ref-hires.jpg?w=450;500;600;900;0&format=webp&quality=100&withoutEnlargement&as=srcset
"
sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 450px"
type="image/webp"
/>
<img
srcset="
@/assets/refs/sebin-overdrive_ref-hires.jpg?w=450;500;600;900;0&jpg&quality=95&withoutEnlargement&srcset
@/assets/refs/sebin-overdrive_ref-hires.jpg?w=450;500;600;900;0&format=jpg&quality=95&withoutEnlargement&as=srcset
"
sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 450px"
alt="Sebin in Overdrive"