chore: bump version number

build: update packages
build: update scaffolding to current create-vue template
2024-09-03 14:41:04 +02:00 · 2024-09-03 14:41:04 +02:00 · 2024-09-03 14:40:57 +02:00 · 2023-11-30 23:18:28 +01:00 · 2023-11-30 23:17:49 +01:00 · 2023-11-30 22:55:32 +01:00
29 changed files with 2280 additions and 5631 deletions
--- a/.browserslistrc
+++ b/.browserslistrc
@ -1,2 +1,3 @@
 defaults
 >1% and not dead
 last 2 versions
 not dead
--- a/.gitignore
+++ b/.gitignore
@ -26,3 +26,5 @@ coverage
 *.njsproj
 *.sln
 *.sw?
 *.tsbuildinfo
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -1,3 +1,7 @@
 {
-  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+  "recommendations": [
    "Vue.volar",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode"
  ]
 }
--- a/index.html
+++ b/index.html
@ -17,11 +17,12 @@
    <meta name="twitter:description" content="The official reference page for Sebin Nyshkim with picture references and in-depth character descriptions" />
    <meta name="twitter:image" content="https://ref.sebin-nyshkim.net/sebin/preview.png" />
-    <meta name="og:type" content="website" />
+    <meta property="og:type" content="website" />
-    <meta name="og:title" content="Sebin Nyshkim - Reference Page" />
+    <meta property="og:title" content="Sebin Nyshkim - Reference Page" />
-    <meta name="og:url" content="https://ref.sebin-nyshkim.net/sebin/" />
+    <meta property="og:locale" content="en_US" />
-    <meta name="og:image" content="https://ref.sebin-nyshkim.net/sebin/preview.png" />
+    <meta property="og:url" content="https://ref.sebin-nyshkim.net/sebin/" />
-    <meta name="og:description" content="The official reference page for Sebin Nyshkim with picture references and in-depth character descriptions" />
+    <meta property="og:image" content="https://ref.sebin-nyshkim.net/sebin/preview.png" />
    <meta property="og:description" content="The official reference page for Sebin Nyshkim with picture references and in-depth character descriptions" />
  </head>
  <body>
    <script type="module" src="/src/main.ts"></script>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,36 +1,38 @@
 {
  "name": "sebin-reference",
-  "version": "0.10.0",
+  "version": "0.10.7",
  "private": true,
  "scripts": {
    "dev": "vite --host",
-    "build": "run-p type-check build-only",
+    "build": "run-p type-check \"build-only {@}\" --",
    "preview": "vite preview",
    "build-only": "vite build",
-    "type-check": "vue-tsc --noEmit",
+    "type-check": "vue-tsc --build --force",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "format": "prettier --write src/"
  },
  "dependencies": {
-    "vue": "^3.2.45",
+    "vue": "^3.4.38",
-    "vue-router": "^4.1.6"
+    "vue-router": "^4.4.3"
  },
  "devDependencies": {
-    "@rushstack/eslint-patch": "^1.2.0",
+    "@rushstack/eslint-patch": "^1.10.4",
-    "@types/node": "^18.15.11",
+    "@tsconfig/node20": "^20.1.4",
-    "@vitejs/plugin-vue": "^4.1.0",
+    "@types/node": "^20.16.3",
-    "@vue/eslint-config-prettier": "^7.1.0",
+    "@vitejs/plugin-vue": "^5.1.3",
-    "@vue/eslint-config-typescript": "^11.0.2",
+    "@vue/eslint-config-prettier": "^9.0.0",
-    "@vue/tsconfig": "^0.1.3",
+    "@vue/eslint-config-typescript": "^13.0.0",
-    "autoprefixer": "^10.4.14",
+    "@vue/tsconfig": "^0.5.1",
-    "eslint": "^8.37.0",
+    "autoprefixer": "^10.4.20",
-    "eslint-plugin-vue": "^9.10.0",
+    "eslint": "^8.57.0",
    "eslint-plugin-vue": "^9.28.0",
    "normalize.css": "^8.0.1",
-    "npm-run-all": "^4.1.5",
+    "npm-run-all2": "^6.2.2",
-    "prettier": "^2.8.7",
+    "prettier": "^3.3.3",
-    "sass": "^1.60.0",
+    "sass": "^1.77.8",
-    "typescript": "^4.9.5",
+    "typescript": "~5.5.0",
-    "vite": "^4.2.1",
+    "vite": "^5.4.2",
-    "vite-imagetools": "^4.0.18",
+    "vite-imagetools": "^6.2.9",
-    "vue-tsc": "^1.2.0"
+    "vue-tsc": "^2.1.4"
  }
 }
--- a/src/App.vue
+++ b/src/App.vue
@ -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"
      />
--- a/src/assets/refs/clothes/lazy/fullbody.png
+++ b/src/assets/refs/clothes/lazy/fullbody.png
--- a/src/assets/refs/clothes/lazy/pants.jpg
+++ b/src/assets/refs/clothes/lazy/pants.jpg
--- a/src/assets/refs/clothes/lazy/undies.jpg
+++ b/src/assets/refs/clothes/lazy/undies.jpg
--- a/src/assets/refs/clothes/lazy/undies.png
+++ b/src/assets/refs/clothes/lazy/undies.png
--- a/src/components/FilterButton.vue
+++ b/src/components/FilterButton.vue
@ -0,0 +1,161 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { Ratings } from '@/interfaces'
 interface Props {
  modelValue: number[]
  name?: string
  value: Ratings
 }
 interface Emits {
  (e: 'update:modelValue', value: number[]): void
 }
 const props = defineProps<Props>()
 const emit = defineEmits<Emits>()
 const checked = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  }
 })
 </script>
 <template>
  <div class="filter-button">
    <input
      class="filter-button__input"
      type="checkbox"
      :name="name"
      :id="Ratings[value].toLowerCase()"
      :value="value"
      v-model="checked"
    />
    <label
      :for="Ratings[value].toLowerCase()"
      class="filter-button__label"
      :class="[Ratings[value].toLowerCase()]"
    >
      {{ Ratings[value] }}
    </label>
  </div>
 </template>
 <style lang="scss">
 .filter-button {
  flex: 1 1 0;
  &__input {
    display: none;
  }
  &__input:checked + &__label {
    top: 0.25rem;
    box-shadow: 0 0.25rem 0 0 var(--color-button-box-shadow);
    &.love {
      box-shadow: 0 0.25rem 0 0 var(--theme-c-love-dark);
    }
    &.yes {
      box-shadow: 0 0.25rem 0 0 var(--theme-c-yes-dark);
    }
    &.maybe {
      box-shadow: 0 0.25rem 0 0 var(--theme-c-maybe-dark);
    }
    &.no {
      box-shadow: 0 0.25rem 0 0 var(--theme-c-no-dark);
    }
  }
  &__label {
    display: block;
    position: relative;
    top: 0;
    background-color: var(--color-button);
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    margin: 0.5rem 0;
    border-radius: 0.25rem;
    padding: 0.5rem 1rem;
    box-shadow: 0 0.5rem 0 0 var(--color-button-box-shadow);
    transition: all 0.1s ease-out;
    &:hover {
      cursor: pointer;
      top: -0.25rem;
      box-shadow: 0 0.75rem 0 0 var(--color-button-box-shadow);
    }
    &:active {
      top: 0.25rem;
      box-shadow: 0 0.25rem 0 0 var(--color-button-box-shadow);
    }
    &.love {
      background-color: var(--theme-c-love);
      box-shadow: 0 0.5rem 0 0 var(--theme-c-love-dark);
      &:hover {
        box-shadow: 0 0.75rem 0 0 var(--theme-c-love-dark);
      }
      &:active {
        box-shadow: 0 0.25rem 0 0 var(--theme-c-love-dark);
      }
    }
    &.yes {
      background-color: var(--theme-c-yes);
      box-shadow: 0 0.5rem 0 0 var(--theme-c-yes-dark);
      &:hover {
        box-shadow: 0 0.75rem 0 0 var(--theme-c-yes-dark);
      }
      &:active {
        box-shadow: 0 0.25rem 0 0 var(--theme-c-yes-dark);
      }
    }
    &.maybe {
      background-color: var(--theme-c-maybe);
      box-shadow: 0 0.5rem 0 0 var(--theme-c-maybe-dark);
      &:hover {
        box-shadow: 0 0.75rem 0 0 var(--theme-c-maybe-dark);
      }
      &:active {
        box-shadow: 0 0.25rem 0 0 var(--theme-c-maybe-dark);
      }
    }
    &.no {
      background-color: var(--theme-c-no);
      box-shadow: 0 0.5rem 0 0 var(--theme-c-no-dark);
      &:hover {
        box-shadow: 0 0.75rem 0 0 var(--theme-c-no-dark);
      }
      &:active {
        box-shadow: 0 0.25rem 0 0 var(--theme-c-no-dark);
      }
    }
  }
 }
 </style>
--- a/src/components/FilterListTag.vue
+++ b/src/components/FilterListTag.vue
@ -0,0 +1,77 @@
 <script setup lang="ts">
 interface Props {
  type: string
 }
 defineProps<Props>()
 </script>
 <template>
  <span class="filter-list__tag" :class="type.toLowerCase()">
    <span>{{ type }}</span>
  </span>
 </template>
 <style lang="scss">
 .filter-list {
  &__tag {
    flex: 0 0 0;
    span {
      display: block;
      font-size: 0.75rem;
      font-weight: bold;
      text-align: center;
      background: rgba(#f5f5f5, 0.7);
      border: 1px solid #f5f5f5;
      border-radius: 1em;
      padding: 0 0.5em;
    }
    &.love span {
      background: var(--theme-c-love);
      border: 1px solid var(--theme-c-love-dark);
    }
    &.yes span {
      background: var(--theme-c-yes);
      border: 1px solid var(--theme-c-yes-dark);
    }
    &.maybe span {
      background: var(--theme-c-maybe);
      border: 1px solid var(--theme-c-maybe-dark);
    }
    &.no span {
      background: var(--theme-c-no);
      border: 1px solid var(--theme-c-no-dark);
    }
    &.category {
      flex: 0 0 3rem;
    }
    &.receive {
      flex: 0 0 3.125rem;
      span {
        background: var(--theme-c-receive);
        border: 1px solid var(--theme-c-receive);
      }
    }
    &.give {
      flex: 0 0 2.125rem;
      span {
        background: var(--theme-c-give);
        border: 1px solid var(--theme-c-give);
      }
    }
  }
 }
 </style>
--- a/src/components/FilteredList.vue
+++ b/src/components/FilteredList.vue
@ -0,0 +1,127 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { Ratings, Role } from '@/interfaces'
 import type { Kink } from '@/interfaces'
 import FilterButton from '@/components/FilterButton.vue'
 import FilterListTag from '@/components/FilterListTag.vue'
 interface Props {
  data: Kink[]
 }
 const props = defineProps<Props>()
 const filterOptions = ref<number[]>([])
 const filteredItems = computed(() =>
  [...props.data]
    .sort((a, b) => a.rating - b.rating)
    .filter((kink) => filterOptions.value.some((filterNum) => kink.rating === filterNum))
 )
 </script>
 <template>
  <div class="filter-list">
    <div class="filter-list__filters">
      <FilterButton name="rating" :value="Ratings.Love" v-model="filterOptions" />
      <FilterButton name="rating" :value="Ratings.Yes" v-model="filterOptions" />
      <FilterButton name="rating" :value="Ratings.Maybe" v-model="filterOptions" />
      <FilterButton name="rating" :value="Ratings.No" v-model="filterOptions" />
    </div>
    <div class="filter-list__list-container">
      <template v-if="filterOptions.length > 0">
        <ul class="filter-list__list">
          <li v-for="(item, idx) in filteredItems" :key="idx" class="filter-list__item">
            <FilterListTag
              v-if="filterOptions.length > 1"
              class="category"
              :type="Ratings[item.rating]"
            />
            <span class="filter-list__item-name">
              <span>{{ item.name }}</span>
            </span>
            <FilterListTag
              v-if="((item.role ?? 0) & Role.Receive) === Role.Receive"
              :type="Role[Role.Receive]"
            />
            <FilterListTag
              v-if="((item.role ?? 0) & Role.Give) === Role.Give"
              :type="Role[Role.Give]"
            />
          </li>
        </ul>
      </template>
      <template v-else>
        <p class="filter-list__intro-msg">Select one of the categories above</p>
      </template>
    </div>
  </div>
 </template>
 <style lang="scss">
 .filter-list {
  background: var(--quickfacts-background);
  border-radius: 1rem;
  box-shadow: var(--container-box-shadow);
  overflow: hidden;
  &__options {
    display: flex;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  &__filters {
    display: flex;
    gap: 0.75rem;
    border-collapse: collapse;
    padding: 0.5rem 0.75rem;
  }
  &__intro-msg {
    font-size: 2rem;
    font-weight: bold;
    font-style: italic;
    text-align: center;
    hyphens: none;
  }
  &__list-container {
    border-top: 0.125rem solid var(--color-quickfacts-border);
    border-collapse: collapse;
  }
  &__list {
    max-height: 30rem;
    margin: 0;
    padding: 0;
    overflow: scroll;
  }
  &__item {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.875rem;
    &:hover {
      background: rgba(#000, 0.3);
    }
  }
  &__item-name {
    flex: 1 0 0;
    line-height: 2;
  }
 }
 </style>
--- a/src/components/RefFigure.vue
+++ b/src/components/RefFigure.vue
@ -4,6 +4,7 @@ import { nsfwKey, showModalKey } from '@/keys'
 import RefToggle from '@/components/RefToggle.vue'
 interface Props {
  cornerText?: boolean
  polaroidBorder?: boolean
  dropshadow?: boolean
  nsfw?: boolean
@ -18,7 +19,13 @@ defineProps<Props>()
 <template>
  <figure class="figure">
-    <div class="figure__border" :class="{ 'figure__border--polaroid': polaroidBorder }">
+    <div
      class="figure__border"
      :class="{
        'figure__border--polaroid': polaroidBorder,
        'figure__border--cornertext': cornerText
      }"
    >
      <template v-if="!nsfw || isNsfw">
        <div class="figure__image" :class="{ 'figure__image--dropshadow': dropshadow }">
          <slot name="img"></slot>
@ -48,18 +55,14 @@ defineProps<Props>()
        </div>
      </template>
-      <figcaption class="figure__meta">
+      <template v-if="!nsfw || isNsfw">
-        <template v-if="!nsfw || isNsfw">
+        <figcaption class="figure__meta">
          <div class="caption">
            <slot name="caption"></slot>
          </div>
          <div class="copyright">© <slot name="copyright"></slot></div>
-        </template>
+        </figcaption>
-
+      </template>
        <template v-else>
          <p>😳 2 hot 4 u 🍆</p>
        </template>
      </figcaption>
    </div>
  </figure>
 </template>
@ -93,6 +96,40 @@ defineProps<Props>()
    }
  }
  &__border--cornertext {
    position: relative;
  }
  &__border--cornertext img,
  &__border--cornertext &__cencor {
    margin: 1rem 0;
    border-radius: 1rem;
    filter: drop-shadow(0 0 0.625rem black);
  }
  &__border--cornertext &__meta {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.7);
    font-size: 0.75rem;
    margin: 0 0 1.35rem 0;
    border-radius: 1em 0 1rem 0;
    padding: 0.25rem 0.75rem;
    .caption,
    .copyright {
      display: inline;
    }
    .caption {
      margin: 0 0.125rem 0 0;
    }
  }
  &__border--polaroid &__meta {
    font-family: 'Permanent Marker', fantasy;
    color: var(--color-figure-polaroid-text);
--- a/src/components/RefToggle.vue
+++ b/src/components/RefToggle.vue
@ -7,8 +7,12 @@ interface Props {
  name?: string
 }
 interface Emits {
  (e: 'update:modelValue', value: boolean): void
 }
 const props = defineProps<Props>()
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits<Emits>()
 const checked = computed({
  get() {
--- a/src/components/WelcomeHeader.vue
+++ b/src/components/WelcomeHeader.vue
@ -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"
--- a/src/interfaces.ts
+++ b/src/interfaces.ts
@ -5,8 +5,21 @@ interface ColorDict {
 interface Kink {
  name: string
-  receive: boolean
+  rating: number
-  give: boolean
+  role?: Role
 }
 export enum Ratings {
  Love,
  Yes,
  Maybe,
  No
 }
 export enum Role {
  Give = 1,
  Receive = 2,
  Both = Give | Receive
 }
 export type { ColorDict, Kink }
--- a/src/scss/base.scss
+++ b/src/scss/base.scss
@ -1,4 +1,4 @@
-@import "fontfaces";
+@import 'fontfaces';
 /* theme colors */
 :root {
@ -28,6 +28,18 @@
  --theme-c-white: #ffffff;
  --theme-c-black: #000000;
  --theme-c-love: #e00f60;
  --theme-c-yes: #2faf2a;
  --theme-c-maybe: #daa520;
  --theme-c-no: #8b0000;
  --theme-c-receive: #448dc9;
  --theme-c-give: #4a7d91;
  --theme-c-love-dark: #9b0a41;
  --theme-c-yes-dark: #1f771c;
  --theme-c-maybe-dark: #997416;
  --theme-c-no-dark: #530000;
  --theme-c-dull-red-translucent: #c64c35bf;
  --theme-c-indian-yellow-translucent: #eda958bf;
  --theme-c-dusky-blue-translucent: #4b608fbf;
@ -100,8 +112,8 @@
 /* general purpose variables */
 :root {
-  --font-family-copy: "Dosis", sans-serif;
+  --font-family-copy: 'Dosis', sans-serif;
-  --font-family-headings: "Zilla Slab", sans-serif;
+  --font-family-headings: 'Zilla Slab', sans-serif;
  --font-size: 18px;
  --font-size-h1: 3rem;
@ -128,8 +140,7 @@
  --page-background: var(--theme-b-page-background-light);
  --header-background: var(--theme-b-navigation-background-light);
-  --header-margin: 1rem var(--container-spacing-right-safe) 1rem
+  --header-margin: 1rem var(--container-spacing-right-safe) 1rem var(--container-spacing-left-safe);
    var(--container-spacing-left-safe);
  --navigation-justify-content: flex-start;
  --quickfacts-background: var(--theme-b-page-background-light);
@ -172,8 +183,7 @@
  --social-links-flex-flow: row wrap;
  --social-links-flex: 1 1 50%;
-  --footer-padding: var(--container-spacing-top-safe) 0
+  --footer-padding: var(--container-spacing-top-safe) 0 var(--container-spacing-bottom-safe) 0;
    var(--container-spacing-bottom-safe) 0;
 }
 /* semantic color variables for this project */
@ -231,8 +241,8 @@
    --table-cell-padding: 0.5rem 1rem;
-    --figure-cencor-width: 20rem;
+    --figure-cencor-width: max(50vw, 20rem);
-    --figure-cencor-height: 20rem;
+    --figure-cencor-height: max(50vh, 30rem);
    --gallery-size: 1.5rem;
    --gallery-arrow-position: 2rem;
--- a/src/sebin.ts
+++ b/src/sebin.ts
@ -1,3 +1,5 @@
 import { Ratings, Role } from '@/interfaces'
 export const firstName = 'Sebin',
  middleName = 'Antario',
  lastName = 'Nyshkim',
@ -31,21 +33,50 @@ export const firstName = 'Sebin',
    girth: 5 // cm
  },
  kinks = [
-    { name: 'Oral', receive: true, give: true },
+    { name: 'Absorption', rating: Ratings.No },
-    { name: 'Anal', receive: true, give: true },
+    { name: 'Anal', rating: Ratings.Love, role: Role.Both },
-    { name: 'Facial', receive: true, give: true },
+    { name: 'Auto-Fellatio', rating: Ratings.Yes },
-    { name: 'Creampie', receive: true, give: true },
+    { name: 'Biting', rating: Ratings.Yes, role: Role.Both },
-    { name: 'Bukkake', receive: true, give: true },
+    { name: 'Bukkake', rating: Ratings.Yes, role: Role.Give },
-    { name: 'Biting', receive: true, give: true },
+    { name: 'Chastity', rating: Ratings.No },
-    { name: 'Nipple Play', receive: true, give: true },
+    { name: 'Chubby', rating: Ratings.Maybe },
-    { name: 'Rough', receive: true, give: true },
+    { name: 'Clothed Sex', rating: Ratings.Yes },
-    { name: 'Toys', receive: true, give: true },
+    { name: 'Cock Slapping', rating: Ratings.Yes, role: Role.Give },
-
+    { name: 'Coiling', rating: Ratings.Maybe, role: Role.Give },
-    { name: 'Frotting', receive: true, give: true },
+    { name: 'Competition', rating: Ratings.Maybe, role: Role.Give },
-    { name: 'Muscle Worship', receive: true, give: true },
+    { name: 'Creampie', rating: Ratings.Yes, role: Role.Give },
-    { name: 'Filled Condoms', receive: true, give: true },
+    { name: 'Crushing (Living/Objects)', rating: Ratings.No },
-    { name: 'Growth/Macro', receive: true, give: true },
+    { name: 'Cum From Mouth/Nose', rating: Ratings.Yes, role: Role.Give },
-    { name: 'Size Difference', receive: true, give: true },
+    { name: 'Cum Inflation (Light/Medium)', rating: Ratings.Yes },
-    { name: 'Underwear', receive: true, give: true },
+    { name: 'Deep-throat', rating: Ratings.Yes, role: Role.Receive },
-    { name: 'Chubbies', receive: true, give: true }
+    { name: 'Dirty Talking', rating: Ratings.Yes },
    { name: 'Excessive Cum', rating: Ratings.Love, role: Role.Both },
    { name: 'Face-Fucking', rating: Ratings.Yes, role: Role.Give },
    { name: 'Facial', rating: Ratings.Yes, role: Role.Give },
    { name: 'Feet', rating: Ratings.No },
    { name: 'Filled Condoms', rating: Ratings.Yes },
    { name: 'Foreplay', rating: Ratings.Yes, role: Role.Both },
    { name: 'Frotting', rating: Ratings.Yes },
    { name: 'Gangbangs', rating: Ratings.Yes },
    { name: 'Growth', rating: Ratings.Love, role: Role.Receive },
    { name: 'Handjobs', rating: Ratings.Yes, role: Role.Both },
    { name: 'Hotdogging', rating: Ratings.Yes, role: Role.Give },
    { name: 'Kissing', rating: Ratings.Yes, role: Role.Both },
    { name: 'Macro', rating: Ratings.Love },
    { name: 'Milking', rating: Ratings.Yes },
    { name: 'Muscle Growth', rating: Ratings.Love, role: Role.Both },
    { name: 'Muscle Worship', rating: Ratings.Yes, role: Role.Both },
    { name: 'Nipple Play', rating: Ratings.Yes, role: Role.Both },
    { name: 'Oral', rating: Ratings.Love, role: Role.Both },
    { name: 'Rough', rating: Ratings.Yes, role: Role.Both },
    { name: 'Sheath Play', rating: Ratings.Yes, role: Role.Both },
    { name: 'Size Difference', rating: Ratings.Love },
    { name: 'Slime/Goo Characters', rating: Ratings.Yes },
    { name: 'Spanking', rating: Ratings.Maybe, role: Role.Give },
    { name: 'Tailsex', rating: Ratings.Yes, role: Role.Both },
    { name: 'Toys', rating: Ratings.Yes, role: Role.Both },
    { name: 'Underwear', rating: Ratings.Love },
    { name: 'Unsanitary', rating: Ratings.No },
    { name: 'Verbal Abuse', rating: Ratings.Maybe, role: Role.Give },
    { name: 'Vore', rating: Ratings.No }
  ]
--- a/src/views/AbilitiesView.vue
+++ b/src/views/AbilitiesView.vue
@ -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&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;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&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;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&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;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&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;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&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;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&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;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&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;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&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;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&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;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&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;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&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;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&format=png&withoutEnlargement&as=srcset
            "
            sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
            alt="Sebin Burning Twister"
--- a/src/views/AnatomyView.vue
+++ b/src/views/AnatomyView.vue
@ -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,
@ -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&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;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&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;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&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"
@ -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&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;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&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;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&format=jpg&quality=95&withoutEnlargement&as=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&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;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&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;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&format=jpg&quality=95&withoutEnlargement&as=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&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;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&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;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&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"
@ -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&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;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&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;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&format=jpg&quality=95&withoutEnlargement&as=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&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;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&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;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&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"
@ -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&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;525;630;735;830;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;525;630;735;830;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"
@ -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&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;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&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;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&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"
@ -593,27 +593,27 @@ 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>
          <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"
@ -626,27 +626,27 @@ 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>
          <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)"
@ -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&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;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&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;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&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"
@ -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&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;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&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;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&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"
@ -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&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;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&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;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&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"
--- a/src/views/ClothingView.vue
+++ b/src/views/ClothingView.vue
@ -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&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;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&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;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&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"
@ -38,35 +38,32 @@ import RefGallery from '@/components/RefGallery.vue'
        </picture>
      </template>
-      <template #caption>
+      <template #caption>Sebin in his casual outfit</template>
        <p>Sebin in his casual outfit</p>
        <p>Black tank top, flannell shirt, shorts (w/ dangling bands), sneakers</p>
      </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&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;655;785;915;800;1310;1200;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;655;785;915;800;1310;1200;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"
@ -75,35 +72,32 @@ import RefGallery from '@/components/RefGallery.vue'
        </picture>
      </template>
-      <template #caption>
+      <template #caption>Sebin in his cold weather outfit</template>
        <p>Sebin in his cold weather outfit</p>
        <p>Winter coat, scarf, zip hoodie, jeans, winter boots</p>
      </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&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;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&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;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&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)"
@ -112,37 +106,32 @@ import RefGallery from '@/components/RefGallery.vue'
        </picture>
      </template>
-      <template #caption>
+      <template #caption>Sebin in his workout outfit (full body)</template>
        <p>Sebin in his workout outfit</p>
        <p>
          <strong>Full body:</strong> Snapback hat, tank top, fingerless gloves, shorts, sneakers
        </p>
      </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&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;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&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;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&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)"
@ -151,91 +140,83 @@ import RefGallery from '@/components/RefGallery.vue'
        </picture>
      </template>
-      <template #caption>
+      <template #caption>Sebin in his workout outfit (close-up)</template>
        <p>Sebin in his workout outfit</p>
        <p>
          <strong>Close-up:</strong> Snapback hat, headphones, tank top, fingerless gloves, shorts,
          smartwatch
        </p>
      </template>
      <template #copyright>
        <a href="https://twitter.com/purpledragonrei">Rei</a>
      </template>
    </RefFigure>
-    <RefFigure id="sebin-tracksuit-pants" polaroidBorder>
+    <RefFigure id="sebin-tracksuit-pants" nsfw cornerText>
-      <!-- max 961px -->
+      <!-- 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&format=avif&quality=75&withoutEnlargement&as=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&format=webp&quality=100&withoutEnlargement&as=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&format=jpg&quality=95&withoutEnlargement&as=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>
+      <template #caption>Sebin in leisure tracksuit pants</template>
        <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> -->
+      <template #copyright>
        <a href="https://twitter.com/leolynx86">Leolynx</a>
      </template>
    </RefFigure>
-    <RefFigure id="sebin-topless" polaroidBorder>
+    <RefFigure id="sebin-topless" cornerText>
-      <!-- max 333px -->
+      <!-- max 2119px -->
      <template #img>
        <picture>
          <source
-            srcset="@/assets/refs/clothes/lazy/undies.jpg?w=0&avif&withoutEnlargement&srcset"
+            srcset="
-            sizes="333px"
+              @/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.jpg?w=0&webp&withoutEnlargement&srcset"
+            srcset="
-            sizes="333px"
+              @/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.jpg?w=0&withoutEnlargement&srcset"
+            srcset="
-            sizes="333px"
+              @/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"
            loading="lazy"
          />
        </picture>
      </template>
-      <template #caption>
+      <template #caption>Sebin in his favorite boxers</template>
        <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 #copyright></template> -->
+      <template #copyright>
        <a href="https://twitter.com/Retroslime69">Retroslime69</a>
      </template>
    </RefFigure>
  </RefGallery>
 </template>
--- a/src/views/GeneralView.vue
+++ b/src/views/GeneralView.vue
@ -17,10 +17,10 @@ import {
 } from '@/sebin'
 import { dateFormat, getAge, toImperial, toLbs } from '@/helpers'
 import { nsfwKey, showModalKey } from '@/keys'
 import type { Kink } from '@/interfaces'
 import DataTable from '@/components/DataTable.vue'
 import QuickFacts from '@/components/QuickFacts.vue'
 import RefToggle from '@/components/RefToggle.vue'
 import FilteredList from '@/components/FilteredList.vue'
 const generalHeadings = ['Key', 'Value']
 const generalData = [
@ -39,14 +39,6 @@ const nsfwData = [
  ['Position', position]
 ]
 const kinksHeadings = ['Kink', 'Receive', 'Give']
 const kinksData = kinks.map((kink: Kink): string[] => {
  const receive = kink.receive ? '✅' : '🚫'
  const give = kink.give ? '✅' : '🚫'
  return [kink.name, receive, give]
 })
 const isNsfw = inject<boolean>(nsfwKey, false)
 const showModal = inject<Function>(showModalKey, Function)
 </script>
@ -197,7 +189,9 @@ const showModal = inject<Function>(showModalKey, Function)
        wants it. After all he is well endowed enough to peddle it around.
      </p>
-      <DataTable class="kinks" :headings="kinksHeadings" :data="kinksData" />
+      <h3>Kinks</h3>
      <FilteredList :data="kinks" />
    </template>
    <template v-else>
--- a/src/views/OverdriveView.vue
+++ b/src/views/OverdriveView.vue
@ -9,27 +9,27 @@ import RefFigure from '@/components/RefFigure.vue'
    <h1>Overdrive Form</h1>
  </section>
-  <RefFigure id="overdrive-ref" polaroidBorder>
+  <RefFigure id="overdrive-ref" cornerText>
    <!-- max 1080px -->
    <template #img>
      <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"
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@ -0,0 +1,14 @@
 {
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["globals.d.ts", "env.d.ts", "src/**/*", "src/**/*.vue", "package.json"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
 }
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,16 +1,11 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.web.json",
+  "files": [],
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "references": [
    {
      "path": "./tsconfig.node.json"
    },
    {
      "path": "./tsconfig.app.json"
    }
  ]
 }
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@ -1,8 +1,20 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.node.json",
+  "extends": "@tsconfig/node20/tsconfig.json",
-  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"],
+  "include": [
    "globals.d.ts",
    "vite.config.*",
    "vitest.config.*",
    "cypress.config.*",
    "nightwatch.conf.*",
    "playwright.config.*"
  ],
  "compilerOptions": {
    "composite": true,
    "noEmit": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "types": ["node"]
  }
 }
--- a/vite.config.mts
+++ b/vite.config.mts
@ -2,6 +2,7 @@ import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
 import { imagetools } from 'vite-imagetools'
 import autoprefixer from 'autoprefixer'
 import vue from '@vitejs/plugin-vue'
 // https://vitejs.dev/config/
@ -16,7 +17,7 @@ export default defineConfig({
  css: {
    devSourcemap: true,
    postcss: {
-      plugins: [require('autoprefixer')]
+      plugins: [autoprefixer({})]
    }
  }
 })
Author	SHA1	Message	Date
Sebin Nyshkim	15d487ec6f	chore: bump version number	2024-09-03 14:41:04 +02:00
Sebin Nyshkim	d716e192bb	build: update packages	2024-09-03 14:41:04 +02:00
Sebin Nyshkim	6aa34c1648	build: update scaffolding to current create-vue template	2024-09-03 14:40:57 +02:00
Sebin Nyshkim	34823665c6	chore: bump version number	2023-11-30 23:18:28 +01:00
Sebin Nyshkim	134e2c79cc	fix: wrong order of v-if evaluation	2023-11-30 23:17:49 +01:00
Sebin Nyshkim	b0abfd8311	chore: bump version number	2023-11-30 22:55:32 +01:00
Sebin Nyshkim	61cd15fd5b	build: update npm packages	2023-11-30 22:55:05 +01:00
Sebin Nyshkim	f3f94be6ae	build: update browserslist definitions	2023-11-30 22:54:18 +01:00
Sebin Nyshkim	61147be693	build: update browserslist definition file	2023-11-30 22:53:41 +01:00
Sebin Nyshkim	6a1474eb52	build: update npm packages	2023-10-19 01:54:10 +02:00
Sebin Nyshkim	f4b1003801	chore: bump version number	2023-09-01 13:13:07 +02:00
Sebin Nyshkim	5d94323bdd	feat: update overdrive ref image to new border style	2023-09-01 13:12:30 +02:00
Sebin Nyshkim	d2774e8150	refactor: update vite-imagetools asset link directives Starting with v5 vite-imagetools has removed shorthands	2023-09-01 13:06:40 +02:00
Sebin Nyshkim	89831a64a2	build: add package.json to list of includes	2023-09-01 13:04:08 +02:00
Sebin Nyshkim	4c8d576f13	build: migrate autoprefixer from CJS require to ES module import	2023-09-01 12:30:33 +02:00
Sebin Nyshkim	0c8a3b0348	build: update scaffolding to current create-vue template	2023-09-01 12:29:06 +02:00
Sebin Nyshkim	0335006ee5	build: update packages to latest versions	2023-09-01 12:28:40 +02:00
Sebin Nyshkim	07bd197c29	refactor: add types for emits	2023-09-01 12:11:51 +02:00
Sebin Nyshkim	a0b2062137	chore: bump version number	2023-07-22 02:15:08 +02:00
Sebin Nyshkim	d5cf84e592	refactor: move buttons and tags to separate components	2023-07-22 02:14:22 +02:00
Sebin Nyshkim	cd9c1d950d	feat: add FilterListTag component	2023-07-22 02:12:52 +02:00
Sebin Nyshkim	665f2c6b35	feat: add FilterButton component	2023-07-22 02:12:09 +02:00
Sebin Nyshkim	30a573e9cf	feat: reorganize list tag positioning	2023-07-22 01:28:08 +02:00
Sebin Nyshkim	ddde6df30b	fix: remove duplicate entry	2023-07-22 01:18:40 +02:00
Sebin Nyshkim	d5703cc274	chore: bump version number	2023-07-21 15:41:23 +02:00
Sebin Nyshkim	778142c4c1	build: update npm packages	2023-07-21 15:41:08 +02:00
Sebin Nyshkim	d984651fc8	feat: update responsive image srcsets, genereate fewer images	2023-07-21 15:40:33 +02:00
Sebin Nyshkim	9a529b62fb	feat: update figure cencor size constraints	2023-07-21 15:15:23 +02:00
Sebin Nyshkim	c143956e9f	feat: add new RefFigure style	2023-07-21 15:14:56 +02:00
Sebin Nyshkim	120a1a03e3	feat: replace placeholder images with artwork	2023-07-21 15:13:17 +02:00
Sebin Nyshkim	08e01502c5	fix: eliminate unintended side-effects in computed property	2023-07-20 19:15:38 +02:00
Sebin Nyshkim	314255dc31	chore: bump version number	2023-07-18 21:53:14 +02:00
Sebin Nyshkim	1b036d3278	feat: replace DataTable component with new FilteredList component	2023-07-18 21:51:32 +02:00
Sebin Nyshkim	b450849075	feat: expand css color variables	2023-07-18 21:51:14 +02:00
Sebin Nyshkim	f100c524af	feat: add FilteredList component	2023-07-18 21:50:06 +02:00
Sebin Nyshkim	d196c1e680	feat: update interface definitions	2023-07-18 21:48:41 +02:00
Sebin Nyshkim	f147510c04	feat: expand Sebin data object	2023-07-18 21:48:18 +02:00
Sebin Nyshkim	6cf6e6d045	chore: bump version number	2023-07-17 14:49:13 +02:00
Sebin Nyshkim	ff665a6cea	build: update npm packages	2023-07-17 14:45:00 +02:00
Sebin Nyshkim	a2e2c1f791	fix: wrong open graph meta tag attributes	2023-07-17 14:36:42 +02:00