sebin-reference/src/views/ClothingView.vue

<script setup lang="ts">
import RefFigure from '@/components/RefFigure.vue'
import RefGallery from '@/components/RefGallery.vue'
</script>

<template>
  <section>
    <h1>Clothing Styles</h1>
  </section>

  <RefGallery>
    <RefFigure id="casual-outfit" cornerText>
      <!-- max 1876px -->
      <template #img>
        <picture>
          <source
            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;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;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"
            loading="lazy"
          />
        </picture>
      </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" cornerText>
      <!-- max 1470px -->
      <template #img>
        <picture>
          <source
            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;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;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"
            loading="lazy"
          />
        </picture>
      </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" cornerText>
      <!-- max 1758px -->
      <template #img>
        <picture>
          <source
            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;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;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)"
            loading="lazy"
          />
        </picture>
      </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" cornerText>
      <!-- max 2480px -->
      <template #img>
        <picture>
          <source
            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;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;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)"
            loading="lazy"
          />
        </picture>
      </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" nsfw cornerText>
      <!-- max 1656px -->
      <template #img>
        <picture>
          <source
            srcset="
              @/assets/refs/clothes/lazy/fullbody.png?w=400;850;1210;1460;0&avif&quality=75&withoutEnlargement&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
            "
            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
            "
            sizes="(min-width: 120em) 850px, (min-width: 80em) 730px, (min-width: 35em) 605px, 400px"
            alt="Tracksuit pants"
            loading="lazy"
          />
        </picture>
      </template>

      <template #caption>Sebin in leisure tracksuit pants</template>

      <template #copyright>
        <a href="https://twitter.com/leolynx86">Leolynx</a>
      </template>
    </RefFigure>

    <RefFigure id="sebin-topless" cornerText>
      <!-- max 2119px -->
      <template #img>
        <picture>
          <source
            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.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.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>Sebin in his favorite boxers</template>

      <template #copyright>
        <a href="https://twitter.com/Retroslime69">Retroslime69</a>
      </template>
    </RefFigure>
  </RefGallery>
</template>

<style lang="scss"></style>