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
154 changed files with 8103 additions and 33828 deletions
--- a/.browserslistrc
+++ b/.browserslistrc
@ -1,3 +1,3 @@
-> 1%
+defaults
+>1% and not dead
 last 2 versions
-not dead
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@ -0,0 +1,15 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  extends: [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript',
+    '@vue/eslint-config-prettier'
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  }
+}
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -1,14 +0,0 @@
-module.exports = {
-  root: true,
-  env: {
-    node: true,
-  },
-  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
-  parserOptions: {
-    parser: "babel-eslint",
-  },
-  rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
-  },
-};
--- a/.gitignore
+++ b/.gitignore
@ -1,20 +1,30 @@
-.DS_Store
-node_modules
-/dist
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/

 # Editor directories and files
+.vscode/*
+!.vscode/extensions.json
 .idea
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
+
+*.tsbuildinfo
--- a/.jshintrc
+++ b/.jshintrc
@ -1,3 +0,0 @@
-{
-  "esversion": 9
-}
--- a/.prettierrc.json
+++ b/.prettierrc.json
@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "printWidth": 100,
+  "trailingComma": "none"
+}
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "Vue.volar",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode"
+  ]
+}
--- a/.vscode/sftp.json
+++ b/.vscode/sftp.json
@ -1,15 +0,0 @@
-{
-  "name": "sebin-reference",
-  "protocol": "sftp",
-  "port": 22,
-  "host": "sebin-ref",
-  "username": "sebin",
-  "privateKeyPath": "~/.ssh/id_sebin",
-  "passphrase": "HeyImGrump20!6",
-  "remotePath": "sebin-ref",
-  "watcher": {
-    "files": "dist/**",
-    "autoUpload": true,
-    "autoDelete": true
-  }
-}
--- a/README.md
+++ b/README.md
@ -1,24 +1,55 @@
-# sebin-reference
+# Sebin Reference Page

-## Project setup
-```
+The official reference page of Sebin Nyshkim, the anthro dragon.
+
+This page is primarily targeted at artists commissioned to draw Sebin. The idea is to have a single point of truth to easily point to.
+
+The benefit of this is two-fold:
+
+* Lack of attachments in Fur Affinity notes
+* Participating in art raffles on Twitter without cluttering up the media tab with the same image over and over again
+
+Furthermore, this page serves both for the development of Sebin as an independent character as well as a training ground for learning various new web technologies fitting such a project.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
+
+If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+
+1. Disable the built-in TypeScript Extension
+    1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
+    2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
+2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
 npm install
 ```

-### Compiles and hot-reloads for development
-```
-npm run serve
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
 ```

-### Compiles and minifies for production
-```
+### Type-Check, Compile and Minify for Production
+
+```sh
 npm run build
 ```

-### Lints and fixes files
-```
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
 npm run lint
 ```
-
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
--- a/babel.config.js
+++ b/babel.config.js
@ -1,3 +0,0 @@
-module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"],
-};
--- a/card/header/furaffinity/index.html
+++ b/card/header/furaffinity/index.html
@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Document</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <main class="flex">
+    <div class="image">
+      <img src="../../../src/assets/sebin-smug-icon.png" alt="Sebin Smug Icon" />
+    </div>
+    <div class="headings">
+      <h1>Sebin Nyshkim</h1>
+      <h2>
+        <span class="contact">
+          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
+          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M503.5 204.6L502.8 202.8L433.1 21.02C431.7 17.45 429.2 14.43 425.9 12.38C423.5 10.83 420.8 9.865 417.9 9.57C415 9.275 412.2 9.653 409.5 10.68C406.8 11.7 404.4 13.34 402.4 15.46C400.5 17.58 399.1 20.13 398.3 22.9L351.3 166.9H160.8L113.7 22.9C112.9 20.13 111.5 17.59 109.6 15.47C107.6 13.35 105.2 11.72 102.5 10.7C99.86 9.675 96.98 9.295 94.12 9.587C91.26 9.878 88.51 10.83 86.08 12.38C82.84 14.43 80.33 17.45 78.92 21.02L9.267 202.8L8.543 204.6C-1.484 230.8-2.72 259.6 5.023 286.6C12.77 313.5 29.07 337.3 51.47 354.2L51.74 354.4L52.33 354.8L158.3 434.3L210.9 474L242.9 498.2C246.6 500.1 251.2 502.5 255.9 502.5C260.6 502.5 265.2 500.1 268.9 498.2L300.9 474L353.5 434.3L460.2 354.4L460.5 354.1C482.9 337.2 499.2 313.5 506.1 286.6C514.7 259.6 513.5 230.8 503.5 204.6z"/></svg>
+          <span class="handle">SebinNyshkim</span>
+        </span>
+
+        <span class="contact">
+          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>
+          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M248,8C111.033,8,0,119.033,0,256S111.033,504,248,504,496,392.967,496,256,384.967,8,248,8ZM362.952,176.66c-3.732,39.215-19.881,134.378-28.1,178.3-3.476,18.584-10.322,24.816-16.948,25.425-14.4,1.326-25.338-9.517-39.287-18.661-21.827-14.308-34.158-23.215-55.346-37.177-24.485-16.135-8.612-25,5.342-39.5,3.652-3.793,67.107-61.51,68.335-66.746.153-.655.3-3.1-1.154-4.384s-3.59-.849-5.135-.5q-3.283.746-104.608,69.142-14.845,10.194-26.894,9.934c-8.855-.191-25.888-5.006-38.551-9.123-15.531-5.048-27.875-7.717-26.8-16.291q.84-6.7,18.45-13.7,108.446-47.248,144.628-62.3c68.872-28.647,83.183-33.623,92.511-33.789,2.052-.034,6.639.474,9.61,2.885a10.452,10.452,0,0,1,3.53,6.716A43.765,43.765,0,0,1,362.952,176.66Z"/></svg>
+          <span class="handle">@SebinNyshkim</span>
+        </span>
+
+        <span class="contact">
+          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7-62.52-28.7-228.56-28.4-290.48 0 0 0-63.72 28.5-63.72 125.7 0 115.7-6.6 259.4 105.63 289.1 40.51 10.7 75.32 13 103.33 11.4 50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.54 102.54 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7 56.12-6.7 105-41.3 111.23-72.9 9.8-49.8 9-121.5 9-121.5zm-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175 25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5 11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1 23.71 27.3 18.4 53 18.4 175z"/></svg>
+          <span class="handle">@SebinNyshkim@meow.social</span>
+        </span>
+
+        <span class="contact">
+          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"/></svg>
+          <span class="handle">Sebin Nyshkim#8877</span>
+        </span>
+      </h2>
+    </div>
+  </main>
+  <!-- Open in browser and set mobile view to 2048x1072 with DPR: 2 and take screenshot -->
+</body>
+</html>
--- a/card/header/furaffinity/style.css
+++ b/card/header/furaffinity/style.css
@ -0,0 +1,139 @@
+@import "../../../src/assets/fonts/exo/exo.css";
+
+:root {
+  font-size: 20px;
+  color: #fff;
+
+  --theme-c-muted-blue: #22759d;
+  --theme-c-amaranth: #e93f3f;
+  --theme-c-deep-purple: #33124a;
+  --theme-c-charcoal: #303030;
+
+  --container-box-shadow: 1vw 1vw 4vw rgba(0, 0, 0, 0.7);
+  --welcome-header-mainline-font-size: 25vh;
+  --welcome-header-subline-font-size: 10vh;
+
+  --icon-size: calc(var(--welcome-header-subline-font-size) * 1.25);
+
+  --page-background: radial-gradient(circle at bottom right,
+      var(--theme-c-amaranth) 5%,
+      transparent 50%),
+    radial-gradient(circle at top left,
+      var(--theme-c-muted-blue) 5%,
+      var(--theme-c-deep-purple) 100%);
+}
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  box-sizing: border-box;
+  /* line-height: 1.5; */
+}
+
+body {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+
+  min-height: 100vh;
+}
+
+main::before,
+main::after {
+  content: "";
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+main::before {
+  background: url(../../../src/assets/subtle-prism.svg);
+  mix-blend-mode: multiply;
+  z-index: -1;
+  transform: scale(1.5);
+}
+
+main::after {
+  background: var(--page-background);
+  z-index: -2;
+}
+
+.flex {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+
+  flex: 0 0 50vw;
+  padding: 0 2vw;
+}
+
+.flex > * {
+  flex: 0 0 auto;
+}
+
+.image {
+  flex: 0 0 60vh;
+  max-height: 100vh;
+}
+
+.image img {
+  display: block;
+  width: 100%;
+  border-radius: 100%;
+  border: 3vh solid #fff;  box-shadow: var(--container-box-shadow);
+}
+
+.headings {
+  flex: 0 1 45vw;
+  margin: 0;
+  padding: 0 1vw;
+}
+
+.headings :where(h1, h2) {
+  font-family: "Exo", sans-serif;
+  text-align: center;
+  font-style: italic;
+  margin: 0;
+}
+
+.headings h1 {
+  font-size: var(--welcome-header-mainline-font-size);
+  font-weight: 900;
+}
+
+.headings h2 {
+  font-size: var(--welcome-header-subline-font-size);
+  font-weight: 300;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-evenly;
+  line-height: 1.75;
+}
+
+.headings .contact {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.headings .icon,
+.headings .handle {
+  flex: 0 0 auto;
+}
+
+.headings .icon {
+  flex: 0 0 var(--icon-size);
+  width: var(--icon-size);
+  height: var(--icon-size);
+  margin: 0 0.375em 0 0;
+}
+
+.headings .icon {
+  fill: #fff;
+}
--- a/card/header/mastodon/index.html
+++ b/card/header/mastodon/index.html
@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Document</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <main class="flex">
+    <div class="image">
+      <img src="../../../src/assets/sebin-smug-icon.png" alt="Sebin Smug Icon" />
+    </div>
+    <div class="headings">
+      <h1>Sebin Nyshkim</h1>
+      <h2>
+        <span class="contact">
+          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
+          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M503.5 204.6L502.8 202.8L433.1 21.02C431.7 17.45 429.2 14.43 425.9 12.38C423.5 10.83 420.8 9.865 417.9 9.57C415 9.275 412.2 9.653 409.5 10.68C406.8 11.7 404.4 13.34 402.4 15.46C400.5 17.58 399.1 20.13 398.3 22.9L351.3 166.9H160.8L113.7 22.9C112.9 20.13 111.5 17.59 109.6 15.47C107.6 13.35 105.2 11.72 102.5 10.7C99.86 9.675 96.98 9.295 94.12 9.587C91.26 9.878 88.51 10.83 86.08 12.38C82.84 14.43 80.33 17.45 78.92 21.02L9.267 202.8L8.543 204.6C-1.484 230.8-2.72 259.6 5.023 286.6C12.77 313.5 29.07 337.3 51.47 354.2L51.74 354.4L52.33 354.8L158.3 434.3L210.9 474L242.9 498.2C246.6 500.1 251.2 502.5 255.9 502.5C260.6 502.5 265.2 500.1 268.9 498.2L300.9 474L353.5 434.3L460.2 354.4L460.5 354.1C482.9 337.2 499.2 313.5 506.1 286.6C514.7 259.6 513.5 230.8 503.5 204.6z"/></svg>
+          <span class="handle">SebinNyshkim</span>
+        </span>
+
+        <span class="contact">
+          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>
+          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M248,8C111.033,8,0,119.033,0,256S111.033,504,248,504,496,392.967,496,256,384.967,8,248,8ZM362.952,176.66c-3.732,39.215-19.881,134.378-28.1,178.3-3.476,18.584-10.322,24.816-16.948,25.425-14.4,1.326-25.338-9.517-39.287-18.661-21.827-14.308-34.158-23.215-55.346-37.177-24.485-16.135-8.612-25,5.342-39.5,3.652-3.793,67.107-61.51,68.335-66.746.153-.655.3-3.1-1.154-4.384s-3.59-.849-5.135-.5q-3.283.746-104.608,69.142-14.845,10.194-26.894,9.934c-8.855-.191-25.888-5.006-38.551-9.123-15.531-5.048-27.875-7.717-26.8-16.291q.84-6.7,18.45-13.7,108.446-47.248,144.628-62.3c68.872-28.647,83.183-33.623,92.511-33.789,2.052-.034,6.639.474,9.61,2.885a10.452,10.452,0,0,1,3.53,6.716A43.765,43.765,0,0,1,362.952,176.66Z"/></svg>
+          <span class="handle">@SebinNyshkim</span>
+        </span>
+
+        <span class="contact">
+          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7-62.52-28.7-228.56-28.4-290.48 0 0 0-63.72 28.5-63.72 125.7 0 115.7-6.6 259.4 105.63 289.1 40.51 10.7 75.32 13 103.33 11.4 50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.54 102.54 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7 56.12-6.7 105-41.3 111.23-72.9 9.8-49.8 9-121.5 9-121.5zm-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175 25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5 11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1 23.71 27.3 18.4 53 18.4 175z"/></svg>
+          <span class="handle">@SebinNyshkim@meow.social</span>
+        </span>
+
+        <span class="contact">
+          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"/></svg>
+          <span class="handle">Sebin Nyshkim#8877</span>
+        </span>
+      </h2>
+    </div>
+  </main>
+  <!-- Open in browser and set mobile view to 2048x1072 with DPR: 2 and take screenshot -->
+</body>
+</html>
--- a/card/header/mastodon/style.css
+++ b/card/header/mastodon/style.css
@ -0,0 +1,139 @@
+@import "../../../src/assets/fonts/exo/exo.css";
+
+:root {
+  font-size: 20px;
+  color: #fff;
+
+  --theme-c-muted-blue: #22759d;
+  --theme-c-amaranth: #e93f3f;
+  --theme-c-deep-purple: #33124a;
+  --theme-c-charcoal: #303030;
+
+  --container-box-shadow: 1vw 1vw 4vw rgba(0, 0, 0, 0.7);
+  --welcome-header-mainline-font-size: 6vw;
+  --welcome-header-subline-font-size: 2vw;
+
+  --icon-size: calc(var(--welcome-header-subline-font-size) * 1.25);
+
+  --page-background: radial-gradient(circle at bottom right,
+      var(--theme-c-amaranth) 5%,
+      transparent 50%),
+    radial-gradient(circle at top left,
+      var(--theme-c-muted-blue) 5%,
+      var(--theme-c-deep-purple) 100%);
+}
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  box-sizing: border-box;
+  /* line-height: 1.5; */
+}
+
+body {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+
+  min-height: 100vh;
+}
+
+main::before,
+main::after {
+  content: "";
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+main::before {
+  background: url(../../../src/assets/subtle-prism.svg);
+  mix-blend-mode: multiply;
+  z-index: -1;
+  transform: scale(1.5);
+}
+
+main::after {
+  background: var(--page-background);
+  z-index: -2;
+}
+
+.flex {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+
+  flex: 0 0 72vw;
+}
+
+.flex>* {
+  flex: 0 0 auto;
+}
+
+.image {
+  flex: 0 0 60vh;
+  max-height: 100vh;
+}
+
+.image img {
+  display: block;
+  width: 100%;
+  border-radius: 100%;
+  border: 1vw solid #fff;
+  box-shadow: var(--container-box-shadow);
+}
+
+.headings {
+  flex: 0 0 50vw;
+  margin: 0;
+}
+
+.headings :where(h1, h2) {
+  font-family: "Exo", sans-serif;
+  text-align: center;
+  font-style: italic;
+  margin: 0;
+}
+
+.headings h1 {
+  font-size: var(--welcome-header-mainline-font-size);
+  font-weight: 900;
+  line-height: 1.75;
+}
+
+.headings h2 {
+  font-size: var(--welcome-header-subline-font-size);
+  font-weight: 300;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-evenly;
+  line-height: 1.75;
+}
+
+.headings .contact {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.headings .icon,
+.headings .handle {
+  flex: 0 0 auto;
+}
+
+.headings .icon {
+  flex: 0 0 var(--icon-size);
+  width: var(--icon-size);
+  height: var(--icon-size);
+  margin: 0 0.375em 0 0;
+}
+
+.headings .icon {
+  fill: #fff;
+}
--- a/card/header/twitter/index.html
+++ b/card/header/twitter/index.html
@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Document</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <main class="flex">
+    <div class="image">
+      <img src="../../../src/assets/sebin-smug-icon.png" alt="Sebin Smug Icon" />
+    </div>
+    <div class="headings">
+      <h1>Sebin Nyshkim</h1>
+      <h2>
+        <span class="contact">
+          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
+          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M503.5 204.6L502.8 202.8L433.1 21.02C431.7 17.45 429.2 14.43 425.9 12.38C423.5 10.83 420.8 9.865 417.9 9.57C415 9.275 412.2 9.653 409.5 10.68C406.8 11.7 404.4 13.34 402.4 15.46C400.5 17.58 399.1 20.13 398.3 22.9L351.3 166.9H160.8L113.7 22.9C112.9 20.13 111.5 17.59 109.6 15.47C107.6 13.35 105.2 11.72 102.5 10.7C99.86 9.675 96.98 9.295 94.12 9.587C91.26 9.878 88.51 10.83 86.08 12.38C82.84 14.43 80.33 17.45 78.92 21.02L9.267 202.8L8.543 204.6C-1.484 230.8-2.72 259.6 5.023 286.6C12.77 313.5 29.07 337.3 51.47 354.2L51.74 354.4L52.33 354.8L158.3 434.3L210.9 474L242.9 498.2C246.6 500.1 251.2 502.5 255.9 502.5C260.6 502.5 265.2 500.1 268.9 498.2L300.9 474L353.5 434.3L460.2 354.4L460.5 354.1C482.9 337.2 499.2 313.5 506.1 286.6C514.7 259.6 513.5 230.8 503.5 204.6z"/></svg>
+          <span class="handle">SebinNyshkim</span>
+        </span>
+
+        <span class="contact">
+          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>
+          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M248,8C111.033,8,0,119.033,0,256S111.033,504,248,504,496,392.967,496,256,384.967,8,248,8ZM362.952,176.66c-3.732,39.215-19.881,134.378-28.1,178.3-3.476,18.584-10.322,24.816-16.948,25.425-14.4,1.326-25.338-9.517-39.287-18.661-21.827-14.308-34.158-23.215-55.346-37.177-24.485-16.135-8.612-25,5.342-39.5,3.652-3.793,67.107-61.51,68.335-66.746.153-.655.3-3.1-1.154-4.384s-3.59-.849-5.135-.5q-3.283.746-104.608,69.142-14.845,10.194-26.894,9.934c-8.855-.191-25.888-5.006-38.551-9.123-15.531-5.048-27.875-7.717-26.8-16.291q.84-6.7,18.45-13.7,108.446-47.248,144.628-62.3c68.872-28.647,83.183-33.623,92.511-33.789,2.052-.034,6.639.474,9.61,2.885a10.452,10.452,0,0,1,3.53,6.716A43.765,43.765,0,0,1,362.952,176.66Z"/></svg>
+          <span class="handle">@SebinNyshkim</span>
+        </span>
+
+        <span class="contact">
+          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7-62.52-28.7-228.56-28.4-290.48 0 0 0-63.72 28.5-63.72 125.7 0 115.7-6.6 259.4 105.63 289.1 40.51 10.7 75.32 13 103.33 11.4 50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.54 102.54 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7 56.12-6.7 105-41.3 111.23-72.9 9.8-49.8 9-121.5 9-121.5zm-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175 25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5 11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1 23.71 27.3 18.4 53 18.4 175z"/></svg>
+          <span class="handle">@SebinNyshkim@meow.social</span>
+        </span>
+
+        <span class="contact">
+          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"/></svg>
+          <span class="handle">Sebin Nyshkim#8877</span>
+        </span>
+      </h2>
+    </div>
+  </main>
+  <!-- Open in browser and set mobile view to 2048x1072 with DPR: 2 and take screenshot -->
+</body>
+</html>
--- a/card/header/twitter/style.css
+++ b/card/header/twitter/style.css
@ -0,0 +1,143 @@
+@import "../../../src/assets/fonts/exo/exo.css";
+
+:root {
+  font-size: 20px;
+  color: #fff;
+
+  --theme-c-muted-blue: #22759d;
+  --theme-c-amaranth: #e93f3f;
+  --theme-c-deep-purple: #33124a;
+  --theme-c-charcoal: #303030;
+
+  --container-box-shadow: 1vw 1vw 4vw rgba(0, 0, 0, 0.7);
+  --welcome-header-mainline-font-size: 8vw;
+  --welcome-header-subline-font-size: 2.5vw;
+
+  --icon-size: calc(var(--welcome-header-subline-font-size) * 1.25);
+
+  --page-background: radial-gradient(
+      circle at bottom right,
+      var(--theme-c-amaranth) 5%,
+      transparent 50%
+    ),
+    radial-gradient(
+      circle at top left,
+      var(--theme-c-muted-blue) 5%,
+      var(--theme-c-deep-purple) 100%
+    );
+}
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  box-sizing: border-box;
+  /* line-height: 1.5; */
+}
+
+body {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+
+  min-height: 100vh;
+}
+
+main::before,
+main::after {
+  content: "";
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+main::before {
+  background: url(../../../src/assets/subtle-prism.svg);
+  mix-blend-mode: multiply;
+  z-index: -1;
+  transform: scale(1.5);
+}
+
+main::after {
+  background: var(--page-background);
+  z-index: -2;
+}
+
+.flex {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-evenly;
+  align-items: center;
+
+  flex: 0 0 100%;
+}
+
+.flex > * {
+  flex: 0 0 auto;
+}
+
+.image {
+  flex: 0 0 60vh;
+  max-height: 100vh;
+}
+
+.image img {
+  display: block;
+  width: 100%;
+  border-radius: 100%;
+  border: 1vw solid #fff;
+  box-shadow: var(--container-box-shadow);
+}
+
+.headings {
+  flex: 0 0 60vw;
+  margin: 0;
+}
+
+.headings :where(h1, h2) {
+  font-family: "Exo", sans-serif;
+  text-align: center;
+  font-style: italic;
+  margin: 0;
+}
+
+.headings h1 {
+  font-size: var(--welcome-header-mainline-font-size);
+  font-weight: 900;
+  line-height: 1.75;
+}
+
+.headings h2 {
+  font-size: var(--welcome-header-subline-font-size);
+  font-weight: 300;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-evenly;
+  line-height: 1.75;
+}
+
+.headings .contact {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.headings .icon,
+.headings .handle {
+  flex: 0 0 auto;
+}
+
+.headings .icon {
+  flex: 0 0 var(--icon-size);
+  width: var(--icon-size);
+  height: var(--icon-size);
+  margin: 0 0.375em 0 0;
+}
+
+.headings .icon {
+  fill: #fff;
+}
--- a/card/index.html
+++ b/card/index.html
@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Document</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <main class="flex">
+    <div class="image">
+      <img src="../src/assets/sebin-smug-icon.png" alt="Sebin Smug Icon" />
+    </div>
+    <div class="headings">
+      <h1>Sebin Nyshkim</h1>
+      <h2>Character Reference Page</h2>
+    </div>
+  </main>
+  <!-- Open in browser and set mobile view to 2048x1072 with DPR: 2 and take screenshot -->
+</body>
+</html>
--- a/card/style.css
+++ b/card/style.css
@ -0,0 +1,112 @@
+@import "../src/assets/fonts/exo/exo.css";
+
+:root {
+  font-size: 20px;
+  color: #fff;
+
+  --theme-c-muted-blue: #22759d;
+  --theme-c-amaranth: #e93f3f;
+  --theme-c-deep-purple: #33124a;
+  --theme-c-charcoal: #303030;
+
+  --container-box-shadow: 1vw 1vw 4vw rgba(0, 0, 0, 0.7);
+  --welcome-header-mainline-font-size: 8vw;
+  --welcome-header-subline-font-size: 3.5vw;
+
+  --page-background: radial-gradient(
+      circle at bottom right,
+      var(--theme-c-amaranth) 5%,
+      transparent 50%
+    ),
+    radial-gradient(
+      circle at top left,
+      var(--theme-c-muted-blue) 5%,
+      var(--theme-c-deep-purple) 100%
+    );
+}
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  box-sizing: border-box;
+}
+
+body {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+
+  min-height: 100vh;
+}
+
+main::before,
+main::after {
+  content: "";
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+main::before {
+  background: url(../src/assets/subtle-prism.svg);
+  mix-blend-mode: multiply;
+  z-index: -1;
+  transform: scale(1.5);
+}
+
+main::after {
+  background: var(--page-background);
+  z-index: -2;
+}
+
+.flex {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-evenly;
+  align-items: center;
+
+  flex: 0 0 100%;
+}
+
+.flex > * {
+  flex: 0 0 auto;
+}
+
+.image {
+  flex: 0 0 60vh;
+  max-height: 100vh;
+}
+
+.image img {
+  display: block;
+  width: 100%;
+  border-radius: 100%;
+  border: 1vw solid #fff;
+  box-shadow: var(--container-box-shadow);
+}
+
+.headings {
+  flex: 0 0 60vw;
+  margin: 0;
+}
+
+.headings :where(h1, h2) {
+  font-family: "Exo", sans-serif;
+  text-align: center;
+  font-style: italic;
+  margin: 0;
+}
+
+.headings h1 {
+  font-size: var(--welcome-header-mainline-font-size);
+  font-weight: 900;
+}
+
+.headings h2 {
+  font-size: var(--welcome-header-subline-font-size);
+  font-weight: 300;
+}
--- a/env.d.ts
+++ b/env.d.ts
@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/index.html
+++ b/index.html
@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <link rel="favicon" href="favicon.png" type="image/png" />
+    <link rel="icon" href="favicon.png" type="image/png" />
+    <title>Sebin Nyshkim - Reference Page</title>
+
+    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#22759d" />
+    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#195673" />
+
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@SebinNyshkim" />
+    <meta name="twitter:creator" content="@SebinNyshkim" />
+    <meta name="twitter:title" content="Sebin Nyshkim - Reference Page" />
+    <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 property="og:type" content="website" />
+    <meta property="og:title" content="Sebin Nyshkim - Reference Page" />
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:url" content="https://ref.sebin-nyshkim.net/sebin/" />
+    <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>
+  </body>
+</html>
--- a/jsconfig.json
+++ b/jsconfig.json
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,32 +1,38 @@
 {
  "name": "sebin-reference",
-  "version": "0.6.1",
+  "version": "0.10.7",
  "private": true,
  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "dev": "vite --host",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build --force",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "format": "prettier --write src/"
  },
  "dependencies": {
-    "core-js": "^3.11.0",
-    "normalize.css": "^8.0.1",
-    "vue": "^2.6.12",
-    "vue-scrollto": "^2.20.0"
+    "vue": "^3.4.38",
+    "vue-router": "^4.4.3"
  },
  "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-vue": "^6.2.2",
-    "image-webpack-loader": "^6.0.0",
-    "lodash": "^4.17.21",
-    "prettier": "^2.2.1",
-    "sass": "^1.26.5",
-    "sass-loader": "^8.0.2",
-    "vue-template-compiler": "^2.6.11"
+    "@rushstack/eslint-patch": "^1.10.4",
+    "@tsconfig/node20": "^20.1.4",
+    "@types/node": "^20.16.3",
+    "@vitejs/plugin-vue": "^5.1.3",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/eslint-config-typescript": "^13.0.0",
+    "@vue/tsconfig": "^0.5.1",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.28.0",
+    "normalize.css": "^8.0.1",
+    "npm-run-all2": "^6.2.2",
+    "prettier": "^3.3.3",
+    "sass": "^1.77.8",
+    "typescript": "~5.5.0",
+    "vite": "^5.4.2",
+    "vite-imagetools": "^6.2.9",
+    "vue-tsc": "^2.1.4"
  }
 }
--- a/public/.htaccess
+++ b/public/.htaccess
@ -0,0 +1,8 @@
+<IfModule mod_rewrite.c>
+  RewriteEngine On
+  RewriteBase /
+  RewriteRule ^index\.html$ - [L]
+  RewriteCond %{REQUEST_FILENAME} !-f
+  RewriteCond %{REQUEST_FILENAME} !-d
+  RewriteRule . /sebin/index.html [L]
+</IfModule>
--- a/public/index.html
+++ b/public/index.html
@ -1,19 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="<%= htmlWebpackPlugin.options.links.favicon.rel %>" href="<%= htmlWebpackPlugin.options.links.favicon.href %>" type="<%= htmlWebpackPlugin.options.links.favicon.type %>">
-    <link rel="<%= htmlWebpackPlugin.options.links.icon.rel %>" href="<%= htmlWebpackPlugin.options.links.icon.href %>" type="<%= htmlWebpackPlugin.options.links.icon.type %>">
-    <title><%= htmlWebpackPlugin.options.title %></title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div class="bubbles"></div>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>
--- a/public/preview.jpg
+++ b/public/preview.jpg
--- a/public/preview.png
+++ b/public/preview.png
--- a/public/sebin-ref-full-NSFW-hires.jpg
+++ b/public/sebin-ref-full-NSFW-hires.jpg
--- a/public/sebin-ref-full-SFW-hires.jpg
+++ b/public/sebin-ref-full-SFW-hires.jpg
--- a/src/App.vue
+++ b/src/App.vue
@ -1,876 +1,99 @@
-<template>
-  <div id="app">
-    <nsfw-warning v-show="isWarn">
-      <template #heading>
-        ⚠️⚠️⚠️<br />
-        Whoa, Nelly!
-      </template>
+<script setup lang="ts">
+import { ref, provide } from 'vue'
+import { RouterView } from 'vue-router'
+import { modalResultKey, nsfwKey, showModalKey } from '@/keys'
+import { version } from '../package.json'
+import RefModal from '@/components/RefModal.vue'
+import ButtonGroup from '@/components/ButtonGroup.vue'
+import Button from '@/components/RefButton.vue'
+import SiteHeader from '@/components/SiteHeader.vue'
+import SiteFooter from '@/components/SiteFooter.vue'
+import SiteNavigation from '@/components/SiteNavigation.vue'

-      <template #message>
-        By enabling NSFW mode you confirm that you are of legal age to view
-        adult content.
-      </template>
+const isNsfw = ref(false)
+const isConfirmedHorny = ref(false)

-      <template #yes>Yes, show me the goods 👀</template>
-      <template #no>NO, STAHP 😱</template>
-    </nsfw-warning>
+const nsfwmodal = ref<InstanceType<typeof RefModal>>()

-    <ref-header
-      mainHeading="Sebin Nyshkim"
-      subHeading="Character Reference Page"
-    />
+const showModal = (): void => {
+  if (!isConfirmedHorny.value) {
+    nsfwmodal.value?.showModal()

-    <main>
-      <section id="general">
-        <h2>General</h2>
-        <data-table class="prose" :dataset="getSebinData.generic" />
-      </section>
-
-      <section id="anatomy">
-        <h2>Anatomy</h2>
-
-        <ref-figure>
-          <template #img>
-            <div>
-              <img
-                v-if="nsfw"
-                src="@img/sebin-ref-body-NSFW.png"
-                alt="Sebin Full Body Ref"
-              />
-              <img
-                v-else
-                src="@img/sebin-ref-body-SFW.png"
-                alt="Sebin Full Body Ref"
-              />
-            </div>
-          </template>
-          <template #caption>
-            <label>Sebin Full Body Reference</label>
-          </template>
-          <template #copyright>
-            <a href="https://twitter.com/draftgon">draftgon</a>
-          </template>
-        </ref-figure>
-
-        <data-table class="prose" :dataset="getSebinData.colors" />
-
-        <div class="prose">
-          <quick-facts>
-            <ul>
-              <li>Bipedal plantigrade</li>
-              <li>
-                Red scales, yellow chest-plates running from underneath chin,
-                over torso, between legs, underside of tail
-              </li>
-              <li>Athletic to body builder physique</li>
-              <li>Sharp, black claws on fingers and toes</li>
-              <li>Brown spikes running over back and top-side of tail</li>
-              <li>Tail about 1 meter in length</li>
-            </ul>
-          </quick-facts>
-
-          <p>
-            Sebin is a bipedal plantigrade. His body is mostly covered by red
-            scales with yellow chest plates running from below his chin over his
-            torso all the way down between his legs and underside of his tail.
-            His physique is athletic to muscular. His fingers and toes are
-            equipped sharp black claws. Brown spikes run along his spine down to
-            the tip of his tail. His tail is about one meter in length.
-          </p>
-        </div>
-
-        <h3 id="wings">Wings</h3>
-        <div class="prose">
-          <quick-facts>
-            <ul>
-              <li>Wingspan 3-4 meters</li>
-              <li>Closed when on the ground</li>
-              <li>Function like a second pair of arms</li>
-              <li>Pointy talon on end of "hand"</li>
-            </ul>
-          </quick-facts>
-
-          <p>
-            His wing span is around 3-4 meters. He has them closed when on the
-            ground. His wings function like a second pair of arms, at which ends
-            are hand-like limbs with a black talon on top and finger-like
-            extensions, in between which are the membranes of his wings. He can
-            use his wings to fly short distances. Longer distances become
-            difficult due to fatigue of having to carry his own weight with his
-            wings alone.
-          </p>
-        </div>
-
-        <h3 id="head">Head</h3>
-        <ref-figure>
-          <template #img>
-            <div>
-              <img
-                src="@img/sebin-ref-expressions.png"
-                alt="Sebin's Expressions"
-              />
-            </div>
-          </template>
-          <template #caption>
-            <label>Sebin's Expressions</label>
-          </template>
-          <template #copyright>
-            <a href="https://twitter.com/draftgon">draftgon</a>
-          </template>
-        </ref-figure>
-
-        <div class="prose">
-          <quick-facts>
-            <ul>
-              <li>
-                Round pupils, green iris. Yellow spikes on cheeks, as well as
-                for eyebrows
-              </li>
-              <li>Black horns with slight curve downwards</li>
-              <li>Blue hair, different styles; short style preferred</li>
-              <li>Long, pointy, movable ears</li>
-              <li>Very sharp teeth</li>
-              <li>Tongue with pointy tip</li>
-            </ul>
-          </quick-facts>
-
-          <p>
-            He has round pupils instead of the slit ones typical for reptilians.
-            He has short yellow spikes above his eyes that resemble eyebrows, as
-            well as spikes along the jawline of his cheeks. He has black horns
-            growing out of his head which are mostly straight but slightly curve
-            downwards. His hair is blue and he wears it in varying styles. He
-            has long pointy ears which he can move to determine the origin of
-            sounds around him. He also uses them to express emotion. His teeth
-            are very sharp. In his throat are glands that produce a mixture that
-            allows him to breathe fire. His tongue has a pointy tip.
-          </p>
-        </div>
-
-        <h3 id="upperbody">Upper Body</h3>
-        <div class="prose">
-          <quick-facts>
-            <ul>
-              <li>Strong upper body, lush pecs, defined abs, black nipples</li>
-              <li>
-                Any muscle mass from athletic to body builder is fine, with a
-                preference towards body builder
-              </li>
-            </ul>
-          </quick-facts>
-
-          <p>
-            Sebin started working out at the age of 17. Being in top shape is
-            very important to him. His favorite workouts are weight-lifting
-            (dumbbells as well as barbells), lat pulldown, leg press, straight
-            arm pulldown and cable pull. He works out three times a week with
-            one day in between workout days for rest, switching body regions
-            each workout day.
-          </p>
-        </div>
-
-        <ref-figure>
-          <template #img>
-            <div>
-              <img
-                src="@img/upper-body-ref.jpg"
-                alt="Sebin's upper body closeup"
-              />
-            </div>
-          </template>
-          <template #caption>
-            <label>Sebin's upper body closeup</label>
-          </template>
-          <template #copyright>
-            <a href="https://twitter.com/NidtheDragon">NidtheDragon</a>
-          </template>
-        </ref-figure>
-
-        <div class="prose">
-          <p>
-            Sebin is very focused on evenly distributed muscle mass but pays
-            special attention to his back, chest and arms. This is so his fire
-            breath doesn't get weak and he can throw fire projectiles farther. A
-            strong back ensures his wings continue to carry him so he can stay
-            airbourne for extended periods of time.
-          </p>
-        </div>
-
-        <h3>Additional Muscle References</h3>
-        <div class="prose" v-show="!nsfw">
-          <div class="nsfw-bar">
-            <div class="nsfw-bar__content flex flex--row flex--nowrap">
-              <div>
-                <strong>
-                  Some of these additional references are NSFW. Please enable
-                  NSFW mode to reveal them.
-                </strong>
-              </div>
-              <nsfw-switch
-                id="nsfw-switch-muscle"
-                v-model="nsfw"
-                @change="showWarning()"
-              />
-            </div>
-          </div>
-        </div>
-
-        <ref-gallery v-show="nsfw">
-          <figure>
-            <img src="@img/muscle-ref/muscle-ref1.jpg" />
-            <figcaption>
-              By <a href="https://twitter.com/GrisserArt">Grisser</a>
-            </figcaption>
-          </figure>
-          <figure>
-            <img src="@img/muscle-ref/muscle-ref2.jpg" />
-            <figcaption>
-              By <a href="https://twitter.com/artvalentinapaz">Valentina Paz</a>
-            </figcaption>
-          </figure>
-          <figure>
-            <img src="@img/muscle-ref/muscle-ref3.jpg" />
-            <figcaption>
-              By
-              <a href="https://www.furaffinity.net/user/Marsel-Defender">
-                Marsel-Defender
-              </a>
-            </figcaption>
-          </figure>
-          <figure>
-            <img src="@img/muscle-ref/muscle-ref4.png" />
-            <figcaption>
-              By
-              <a href="https://www.furaffinity.net/user/sirboburto">
-                SirBoburto
-              </a>
-            </figcaption>
-          </figure>
-          <figure>
-            <img src="@img/muscle-ref/muscle-ref5.jpg" />
-            <figcaption>
-              By <a href="https://twitter.com/MuskyMuffin">SexMuffin</a>
-            </figcaption>
-          </figure>
-          <figure>
-            <img src="@img/muscle-ref/muscle-ref6.jpg" />
-            <figcaption>
-              By <a href="https://twitter.com/tehknuxlight">Knuxlight</a>
-            </figcaption>
-          </figure>
-          <figure>
-            <img src="@img/muscle-ref/muscle-ref7.jpg" />
-            <figcaption>
-              By
-              <a href="https://www.furaffinity.net/user/shonuff44">ShoNuff44</a>
-            </figcaption>
-          </figure>
-          <figure>
-            <img src="@img/muscle-ref/muscle-ref8.jpg" />
-            <figcaption>
-              By <a href="https://www.furaffinity.net/user/j-cock">j-cock</a>
-            </figcaption>
-          </figure>
-          <figure>
-            <img src="@img/muscle-ref/muscle-ref9.jpg" />
-            <figcaption>
-              By <a href="https://www.furaffinity.net/user/j-cock">j-cock</a>
-            </figcaption>
-          </figure>
-          <figure>
-            <img src="@img/muscle-ref/muscle-ref10.jpg" />
-            <figcaption>
-              By <a href="https://www.furaffinity.net/user/j-cock">j-cock</a>
-            </figcaption>
-          </figure>
-          <figure>
-            <img src="@img/muscle-ref/muscle-ref11.jpg" />
-            <figcaption>
-              By
-              <a href="https://www.furaffinity.net/user/Marsel-Defender">
-                Marsel-Defender
-              </a>
-            </figcaption>
-          </figure>
-        </ref-gallery>
-
-        <h3 v-show="nsfw" id="penis">Penis</h3>
-        <ref-figure v-show="nsfw">
-          <template #img>
-            <div>
-              <img src="@img/sebin-ref-penis.png" alt="Sebin's manly parts" />
-            </div>
-          </template>
-          <template #caption>
-            <label>Sebin's manly parts</label>
-          </template>
-          <template #copyright>
-            <a href="https://twitter.com/draftgon">draftgon</a>
-          </template>
-        </ref-figure>
-
-        <data-table class="prose" v-show="nsfw" :dataset="getSebinData.penis" />
-
-        <div class="prose" v-show="nsfw">
-          <quick-facts>
-            <ul>
-              <li>Human-shaped with ridges</li>
-              <li>Ring-like sheath surrounding shaft</li>
-              <li>
-                Extends from sheath when erect, lives inside sheath when not
-                erect
-              </li>
-              <li>External balls</li>
-            </ul>
-          </quick-facts>
-
-          <p>
-            Despite his majorly reptilian appearance he has nipples, a feature
-            of the human side of his family, which also shows with his external
-            testicles. Rather than a slit which houses his penis he has a
-            pouch-like sheath, with the tip slightly peeking out of it when not
-            aroused. His penis is mainly humanoid in shape but is surrounded by
-            several ridges. He can take it out of its pouch while it's still
-            soft (e.g. for passing water). When aroused his charcoal black shaft
-            pushes out from the sheath, its base girded by the sheath like a
-            ring.
-          </p>
-        </div>
-      </section>
-
-      <section id="clothes">
-        <h2>Clothing Styles</h2>
-
-        <div class="prose">
-          <p>
-            <strong>
-              The following photos are for illustration purposes only. The
-              clothing shown is not to be taken literally. The design may
-              differ!
-            </strong>
-          </p>
-        </div>
-
-        <h3>Casual Wear</h3>
-        <ref-gallery>
-          <figure>
-            <img src="@img/clothes-ref/warm/tank-top.jpg" alt="Tank Top" />
-            <figcaption>
-              <p>Loose Tank Top</p>
-            </figcaption>
-          </figure>
-          <figure>
-            <img src="@img/clothes-ref/warm/shorts.jpg" alt="Shorts" />
-            <figcaption>
-              <p>Short shorts with dangling bands</p>
-            </figcaption>
-          </figure>
-          <figure>
-            <img src="@img/clothes-ref/warm/hoodie.jpg" alt="Hoodie" />
-            <figcaption>
-              <p>Long sleeve top tied around waist</p>
-            </figcaption>
-          </figure>
-          <figure>
-            <img src="@img/clothes-ref/warm/sneakers.jpg" alt="Sneakers" />
-            <figcaption>
-              <p>Sneakers (Air Jordan style)</p>
-            </figcaption>
-          </figure>
-        </ref-gallery>
-
-        <h3>Cold Weather</h3>
-        <ref-gallery>
-          <figure>
-            <img src="@img/clothes-ref/cold/coat.jpg" alt="Coat" />
-            <figcaption>
-              <p>Coat</p>
-            </figcaption>
-          </figure>
-          <figure>
-            <img src="@img/clothes-ref/cold/scarf.jpg" alt="Scarf" />
-            <figcaption>
-              <p>Checkered scarf with short cords</p>
-            </figcaption>
-          </figure>
-          <figure>
-            <img src="@img/clothes-ref/cold/hoodie.jpg" alt="Hoodie" />
-            <figcaption>
-              <p>Hoodie</p>
-            </figcaption>
-          </figure>
-          <figure>
-            <img src="@img/clothes-ref/cold/jeans.jpg" alt="Jeans" />
-            <figcaption>
-              <p>Loose fit Jeans</p>
-            </figcaption>
-          </figure>
-          <figure>
-            <img src="@img/clothes-ref/cold/boots.jpg" alt="Boots" />
-            <figcaption>
-              <p>Boots</p>
-            </figcaption>
-          </figure>
-        </ref-gallery>
-
-        <h3>Workout</h3>
-        <ref-gallery>
-          <figure>
-            <img src="@img/clothes-ref/workout/fullbody.png" alt="Full Body" />
-            <figcaption>
-              <p>
-                <strong>Full body:</strong> Snapback hat, tank top, fingerless
-                gloves, shorts, sneakers
-              </p>
-              <p>By <a href="https://twitter.com/turquoize_art">Atlas</a></p>
-            </figcaption>
-          </figure>
-          <figure>
-            <img src="@img/clothes-ref/workout/closeup.jpg" alt="Close-up" />
-            <figcaption>
-              <p>
-                <strong>Close-up:</strong> Snapback hat, headphones, tank top,
-                fingerless gloves, shorts, smartwatch
-              </p>
-              <p>By <a href="https://twitter.com/purpledragonrei">Rei</a></p>
-            </figcaption>
-          </figure>
-        </ref-gallery>
-
-        <h3>"Doesn't need to leave the house today" Style</h3>
-        <ref-gallery>
-          <figure>
-            <img src="@img/clothes-ref/lazy/pants.jpg" alt="Tank Top" />
-            <figcaption>
-              <p>Tracksuit pants (optional)</p>
-            </figcaption>
-          </figure>
-          <figure>
-            <img src="@img/clothes-ref/lazy/undies.jpg" alt="Shorts" />
-            <figcaption>
-              <p>Topless w/ jockstrap/boxer briefs</p>
-            </figcaption>
-          </figure>
-        </ref-gallery>
-      </section>
-
-      <section id="abilities">
-        <h2>Abilities</h2>
-        <div class="prose">
-          <p>
-            Since Sebin is a fire dragon there’s a myriad of abilities he has at
-            his disposal to defend himself.
-          </p>
-        </div>
-
-        <h3>Attacks</h3>
-
-        <div class="attacks">
-          <div class="row">
-            <div class="col">
-              <img
-                src="@img/attacks/sebin-fire_breath-hires.png"
-                alt="Sebin Fire Breath"
-              />
-            </div>
-            <div class="col">
-              <p><strong>Fire Breath</strong></p>
-              <p>
-                Like most fire dragons, Sebin can breathe fire. In order to do
-                this, he takes a deep breath to enrich the oxygen in his lungs
-                with gases, which, together with special glands in his mouth,
-                produce a combustible mixture. The resulting jet of fire,
-                reaching several hundred degrees Celsius, spreads out on its way
-                to its target, scorching everything in its path.
-              </p>
-            </div>
-          </div>
-
-          <div class="row">
-            <div class="col">
-              <img
-                src="@img/attacks/sebin-flame_toss-hires.png"
-                alt="Sebin Flame Toss"
-              />
-            </div>
-            <div class="col">
-              <p><strong>Flame Toss</strong></p>
-              <p>
-                By spitting fire into his hands, Sebin can form it into a ball
-                and use it as a projectile. His scales are fireproof and can
-                withstand the high temperatures. Due to their high
-                concentration, the projectiles explode upon impact. By combining
-                two fireballs the explosion radius increases dramatically.
-              </p>
-            </div>
-          </div>
-
-          <div class="row">
-            <div class="col">
-              <img
-                src="@img/attacks/sebin-kindled_fist-hires.png"
-                alt="Sebin Kindled Fist"
-              />
-            </div>
-            <div class="col">
-              <p><strong>Kindled Fist</strong></p>
-              <p>
-                Apart from throwing projectiles, Sebin can also use the
-                fireballs to wrap his fists in fire. This allows him to inflict
-                severe burns on his opponent with each blow. In addition, he can
-                release the fire from his fists with aimed blows and hurl it at
-                his opponents.
-              </p>
-            </div>
-          </div>
-
-          <div class="row">
-            <div class="col">
-              <img
-                src="@img/attacks/sebin-burning_twister-hires.png"
-                alt="Sebin Burning Twister"
-              />
-            </div>
-            <div class="col">
-              <p><strong>Burning Twister</strong></p>
-              <p>
-                A technique used in aerial combat, Sebin uses his fire breath to
-                engulf his body in flames while spinning to become a fire
-                tornado that singes opponents.
-              </p>
-            </div>
-          </div>
-        </div>
-
-        <h2>Overdrive Form</h2>
-        <ref-figure>
-          <template #img>
-            <div>
-              <img
-                src="@img/sebin-overdrive_ref-hires.jpg"
-                alt="Sebin in Overdrive"
-              />
-            </div>
-          </template>
-          <template #caption>
-            <label>Sebin in Overdrive</label>
-          </template>
-          <template #copyright>
-            <a href="https://twitter.com/CVictorrosso">CVictorrosso</a>
-          </template>
-        </ref-figure>
-
-        <div class="prose">
-          <p>
-            Sebin can enter an Overdrive Form which greatly increases his
-            strength and abilities but it comes at a cost.
-          </p>
-
-          <p>
-            He enters Overdrive by engulfing himself in a pillar of flames which
-            transforms his exterior physique. During Overdrive transformation
-            his hair ignites and flickers with blue flames. The corners of his
-            eyes flicker with long green flames. His arms and legs become part
-            carbon black and are crossed by several glowing veins which pulsate
-            like flowing lava. Fire in this form burns several degrees hotter
-            than usual because his body becomes a living blast furnace, which is
-            why his limbs have to be of more fire-proof material to withstand
-            the increased heat.
-          </p>
-
-          <p>
-            To complete the transformation he inhales the flames from the pillar
-            surrounding him which heats up his body from within. Even if Sebin
-            is a fire dragon who can sustain high degrees of heat he is
-            essentially overheating himself from the inside. Because of this he
-            can't maintain this form for more than a few hours before he does
-            permanent damage to his own body.
-          </p>
-
-          <p>
-            Direct body contact with Sebin during overdrive causes 3rd degree
-            burns as he emits an extreme temperature, although less than he
-            keeps inside his body. His immediate surroundings are likely to burn
-            or melt.
-          </p>
-        </div>
-
-        <h3>Attacks</h3>
-        <div class="prose">
-          <table>
-            <tr>
-              <td><strong>Fire Breath</strong> (improved)</td>
-              <td>
-                The reach of Sebin's Fire Breath increases as well as the
-                frequency at which he can fire shots from his mouth.
-              </td>
-            </tr>
-            <tr>
-              <td><strong>Flame Toss</strong> (improved)</td>
-              <td>
-                Overdrive Form eliminates the need for Sebin to spit fire into
-                his palms. It instead enables him to fire the shots directly
-                from the palm of his hands, as the firey veins crossing his arms
-                act as an orifice to do so. The explosion radius of the burning
-                projectiles that explode on impact is greatly increased.
-              </td>
-            </tr>
-            <tr>
-              <td><strong>Kindled Fist</strong> (improved)</td>
-              <td>
-                As his arms and legs are infused with fire his punches and kicks
-                exert trails of flames while doing so. Landing a punch or kick
-                sears enemies.
-              </td>
-            </tr>
-            <!-- <tr>
-              <td><strong>Searing Discus</strong></td>
-              <td>
-                Overdrive allows Sebin to form rings of fire by igniting flames
-                from his fingertips and swirling them in a circle motion. He can
-                use them for both close quarters or ranged combat.
-              </td>
-            </tr> -->
-            <tr>
-              <td><strong>Combustion Flare</strong></td>
-              <td>
-                Clinking both of his wrists against each other like flints
-                unleashes a devestating fire blast from both of his fire-infused
-                hands. A secure foothold is needed to prevent Sebin from being
-                thrown back by the recoil of the attack. Using this technique in
-                the air is therefore highly risky.
-              </td>
-            </tr>
-            <tr>
-              <td><strong>Blazing Pandemonium</strong></td>
-              <td>
-                A heavy impact into the ground from a great height with both
-                fists, tearing deep cracks in the ground around the impact
-                crater. Combined with <strong><em>Kindled Fist</em></strong>
-                the heat in Sebin's arms are forced through the newly created
-                furrows, transforming the scene into an inferno.
-              </td>
-            </tr>
-            <tr>
-              <td><strong>Scorching Edge</strong></td>
-              <td>
-                A fiery blade towering several meters into the air that Sebin
-                sends careening towards his enemies from his fire-infused legs
-                with a backflip kick, leaving a swath of destruction in its
-                wake. Upon impact the force of the attack is distributed
-                sideways.
-              </td>
-            </tr>
-            <tr>
-              <td><strong>Circling Fire Shield</strong></td>
-              <td>
-                A rather defensive technique. By spinning around with stretched
-                out arms Sebin creates fire balls, which he usually hurls
-                towards enemies, that circle around his body diagonally. They
-                act as a shield while he can still move his arms relatively
-                freely. Enemies would be well advised to keep their distance to
-                this spinning shield, as the fire balls will still explode on
-                contact.
-              </td>
-            </tr>
-          </table>
-        </div>
-      </section>
-    </main>
-
-    <ref-footer />
-  </div>
-</template>
-
-<script>
-import QuickFacts from "@components/QuickFacts.vue";
-import DataTable from "@components/DataTable.vue";
-import RefGallery from "@components/Gallery.vue";
-import RefFigure from "@components/Figure.vue";
-import RefHeader from "@components/Header.vue";
-import RefFooter from "@components/Footer.vue";
-import NsfwSwitch from "@components/NsfwSwitch.vue";
-import NsfwWarning from "@components/NsfwWarning.vue";
-
-import Sebin from "@mixins/Sebin.js";
-import Helper from "@mixins/Helper.js";
-
-export default {
-  name: "app",
-  components: {
-    QuickFacts,
-    DataTable,
-    RefGallery,
-    RefFigure,
-    RefHeader,
-    RefFooter,
-    NsfwSwitch,
-    NsfwWarning
-  },
-  data() {
-    return {
-      nsfw: false,
-      isWarn: false,
-      isConfirmedHorny: false,
-      version: require("../package.json").version
-    };
-  },
-  mixins: [Sebin, Helper],
-  methods: {
-    showWarning() {
-      if (!this.isConfirmedHorny) {
-        this.isWarn = true;
-
-        setTimeout(() => {
-          this.nsfw = false;
-        }, 1);
-      }
-    }
+    setTimeout(() => {
+      isNsfw.value = false
+    }, 1)
+  } else {
+    isNsfw.value = !isNsfw.value
  }
-};
+}
+
+const modalResult = (value: boolean): void => {
+  isNsfw.value = value
+  isConfirmedHorny.value = value
+  nsfwmodal.value?.close()
+}
+
+provide(modalResultKey, modalResult)
+provide(nsfwKey, isNsfw)
+provide(showModalKey, showModal)
 </script>

-<style lang="scss">
-@import "@scss/base.scss";
-@import "~normalize.css";
+<template>
+  <RefModal id="nsfw-warning" ref="nsfwmodal">
+    <template #heading>
+      ⚠️⚠️⚠️<br />
+      Whoa, Nelly!
+    </template>

-#app {
-  color: $copy-color;
-  font-size: 1.125em;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  transition: all ease-in-out 0.25s;
+    <template #message>
+      By enabling NSFW mode you confirm that you are of legal age to view adult content.
+    </template>

-  @media (min-width: 50em) {
-    font-size: 1.25em;
-  }
+    <template #buttons>
+      <ButtonGroup col>
+        <Button positive @click.prevent="modalResult(true)"> Yes, show me the goods 👀 </Button>
+        <Button negative @click.prevent="modalResult(false)"> NO, STAHP 😱 </Button>
+      </ButtonGroup>
+    </template>
+  </RefModal>

-  @media (min-width: 125em) {
-    font-size: 1.5em;
-  }
-}
+  <SiteHeader>
+    <!-- max 500px -->
+    <picture>
+      <source
+        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&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&format=png&as=srcset"
+        sizes="(min-width: 120em) 56px, (min-width: 80em) 48px, (min-width: 35em) 40px, 36px"
+        alt="Sebin Avatar"
+      />
+    </picture>

-main {
-  h2,
-  h3,
-  p {
-    max-width: 45rem;
-    margin-left: auto;
-    margin-right: auto;
+    <SiteNavigation />
+  </SiteHeader>

-    @media (min-width: 125em) {
-      max-width: 55rem;
-    }
-  }
+  <main>
+    <RouterView />
+  </main>

-  .prose {
-    max-width: 45rem;
-    margin-left: auto;
-    margin-right: auto;
-
-    @media (min-width: 125em) {
-      max-width: 55rem;
-    }
-  }
-
-  @include mq-mobile {
-    h2,
-    h3,
-    p,
-    .quickfacts {
-      margin-left: 1rem;
-      margin-right: 1rem;
-    }
-  }
-}
-
-section {
-  h2 {
-    border-bottom: 0.0625em $copy-color solid;
-  }
-
-  h3 {
-    border-bottom: 0.125em $copy-color dotted;
-  }
-}
-
-.attacks {
-  display: flex;
-  flex-flow: row wrap;
-  align-items: center;
-
-  width: 100%;
-  margin: auto;
-
-  @include mq-desktop {
-    max-width: 45rem;
-  }
-
-  @media (min-width: 70em) {
-    max-width: 70em;
-  }
-
-  .row {
-    flex: 0 1 100%;
-
-    display: flex;
-    flex-flow: row wrap;
-    align-items: center;
-
-    padding: 0.375em 0;
-
-    @include mq-desktop {
-      flex-flow: row nowrap;
-
-      &:nth-child(even) {
-        text-align: right;
-
-        .col {
-          &:first-child {
-            order: 1;
-          }
-        }
-      }
-    }
-
-    @media (min-width: 70em) {
-      text-align: left;
-      flex: 0 1 50%;
-
-      &:nth-child(even) {
-        text-align: left;
-
-        .col {
-          &:first-child {
-            order: 0;
-          }
-        }
-      }
-    }
-  }
-
-  .col {
-    flex: 1 1 auto;
-
-    &:first-child {
-      text-align: center;
-
-      img {
-        max-width: 100%;
-        max-height: 100%;
-      }
-
-      @include mq-desktop {
-        flex: 0 0 15em;
-        height: 15em;
-      }
-    }
-
-    &:last-child {
-      @include mq-desktop {
-        padding: 0 1rem;
-      }
-    }
-  }
-}
-</style>
+  <SiteFooter>
+    <p>v{{ version }} &copy; {{ new Date().getFullYear() }} Sebin Nyshkim</p>
+    <p>
+      Background Pattern &copy;
+      <a href="https://www.svgbackgrounds.com/">SVG Backgrounds</a>
+    </p>
+  </SiteFooter>
+</template>
--- a/src/assets/fonts/dosis/dosis-bold-latin.woff2
+++ b/src/assets/fonts/dosis/dosis-bold-latin.woff2
--- a/src/assets/fonts/dosis/dosis-regular-latin.woff2
+++ b/src/assets/fonts/dosis/dosis-regular-latin.woff2
--- a/src/assets/fonts/dosis/dosis.css
+++ b/src/assets/fonts/dosis/dosis.css
@ -0,0 +1,19 @@
+/* dosis-regular-latin */
+@font-face {
+	font-family: Dosis;
+	font-style: normal;
+	font-weight: 400;
+	src: local("Dosis Regular"), local("Dosis-Regular"), url(dosis-regular-latin.woff2) format("woff2");
+	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
+	font-display: swap;
+}
+/* dosis-bold-latin */
+@font-face {
+	font-family: Dosis;
+	font-style: normal;
+	font-weight: 700;
+	src: local("Dosis Bold"), local("Dosis-Bold"), url(dosis-bold-latin.woff2) format("woff2");
+	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
+	font-display: swap;
+}
+
--- a/src/assets/fonts/exo/exo-black-italic-latin.woff2
+++ b/src/assets/fonts/exo/exo-black-italic-latin.woff2
--- a/src/assets/fonts/exo/exo-black-latin.woff2
+++ b/src/assets/fonts/exo/exo-black-latin.woff2
--- a/src/assets/fonts/exo/exo-light-italic-latin.woff2
+++ b/src/assets/fonts/exo/exo-light-italic-latin.woff2
--- a/src/assets/fonts/exo/exo-light-latin.woff2
+++ b/src/assets/fonts/exo/exo-light-latin.woff2
--- a/src/assets/fonts/exo/exo.css
+++ b/src/assets/fonts/exo/exo.css
@ -0,0 +1,37 @@
+/* exo-light-latin */
+@font-face {
+	font-family: Exo;
+	font-style: normal;
+	font-weight: 300;
+	src: local("Exo Light"), local("Exo-Light"), url(exo-light-latin.woff2) format("woff2");
+	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
+	font-display: swap;
+}
+/* exo-black-latin */
+@font-face {
+	font-family: Exo;
+	font-style: normal;
+	font-weight: 900;
+	src: local("Exo Black"), local("Exo-Black"), url(exo-black-latin.woff2) format("woff2");
+	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
+	font-display: swap;
+}
+/* exo-light-italic-latin */
+@font-face {
+	font-family: Exo;
+	font-style: italic;
+	font-weight: 300;
+	src: local("Exo Light Italic"), local("Exo-LightItalic"), url(exo-light-italic-latin.woff2) format("woff2");
+	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
+	font-display: swap;
+}
+/* exo-black-italic-latin */
+@font-face {
+	font-family: Exo;
+	font-style: italic;
+	font-weight: 900;
+	src: local("Exo Black Italic"), local("Exo-BlackItalic"), url(exo-black-italic-latin.woff2) format("woff2");
+	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
+	font-display: swap;
+}
+
--- a/src/assets/fonts/permanent-marker/permanent-marker-regular-latin.woff2
+++ b/src/assets/fonts/permanent-marker/permanent-marker-regular-latin.woff2
--- a/src/assets/fonts/permanent-marker/permanent-marker.css
+++ b/src/assets/fonts/permanent-marker/permanent-marker.css
@ -0,0 +1,10 @@
+/* permanent-marker-regular-latin */
+@font-face {
+	font-family: Permanent Marker;
+	font-style: normal;
+	font-weight: 400;
+	src: local("Permanent Marker Regular"), local("PermanentMarker-Regular"), url(permanent-marker-regular-latin.woff2) format("woff2");
+	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
+	font-display: swap;
+}
+
--- a/src/assets/fonts/zilla-slab/zilla-slab-bold-latin.woff2
+++ b/src/assets/fonts/zilla-slab/zilla-slab-bold-latin.woff2
--- a/src/assets/fonts/zilla-slab/zilla-slab.css
+++ b/src/assets/fonts/zilla-slab/zilla-slab.css
@ -0,0 +1,10 @@
+/* zilla-slab-bold-latin */
+@font-face {
+	font-family: Zilla Slab;
+	font-style: normal;
+	font-weight: 700;
+	src: local("Zilla Slab Bold"), local("ZillaSlab-Bold"), url(zilla-slab-bold-latin.woff2) format("woff2");
+	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
+	font-display: swap;
+}
+
--- a/src/assets/img/attacks/sebin-burning_twister-hires.png
+++ b/src/assets/img/attacks/sebin-burning_twister-hires.png
--- a/src/assets/img/attacks/sebin-fire_breath-hires.png
+++ b/src/assets/img/attacks/sebin-fire_breath-hires.png
--- a/src/assets/img/attacks/sebin-flame_toss-hires.png
+++ b/src/assets/img/attacks/sebin-flame_toss-hires.png
--- a/src/assets/img/attacks/sebin-kindled_fist-hires.png
+++ b/src/assets/img/attacks/sebin-kindled_fist-hires.png
--- a/src/assets/img/clothes-ref/cold/boots.jpg
+++ b/src/assets/img/clothes-ref/cold/boots.jpg
--- a/src/assets/img/clothes-ref/cold/coat.jpg
+++ b/src/assets/img/clothes-ref/cold/coat.jpg
--- a/src/assets/img/clothes-ref/cold/hoodie.jpg
+++ b/src/assets/img/clothes-ref/cold/hoodie.jpg
--- a/src/assets/img/clothes-ref/cold/jeans.jpg
+++ b/src/assets/img/clothes-ref/cold/jeans.jpg
--- a/src/assets/img/clothes-ref/cold/scarf.jpg
+++ b/src/assets/img/clothes-ref/cold/scarf.jpg
--- a/src/assets/img/clothes-ref/lazy/pants.jpg
+++ b/src/assets/img/clothes-ref/lazy/pants.jpg
--- a/src/assets/img/clothes-ref/lazy/undies.jpg
+++ b/src/assets/img/clothes-ref/lazy/undies.jpg
--- a/src/assets/img/clothes-ref/warm/hoodie.jpg
+++ b/src/assets/img/clothes-ref/warm/hoodie.jpg
--- a/src/assets/img/clothes-ref/warm/shorts.jpg
+++ b/src/assets/img/clothes-ref/warm/shorts.jpg
--- a/src/assets/img/clothes-ref/warm/sneakers.jpg
+++ b/src/assets/img/clothes-ref/warm/sneakers.jpg
--- a/src/assets/img/clothes-ref/warm/tank-top.jpg
+++ b/src/assets/img/clothes-ref/warm/tank-top.jpg
--- a/src/assets/img/clothes-ref/workout/closeup.jpg
+++ b/src/assets/img/clothes-ref/workout/closeup.jpg
--- a/src/assets/img/clothes-ref/workout/closeup.png
+++ b/src/assets/img/clothes-ref/workout/closeup.png
--- a/src/assets/img/muscle-ref/muscle-ref1.jpg
+++ b/src/assets/img/muscle-ref/muscle-ref1.jpg
--- a/src/assets/img/muscle-ref/muscle-ref10.jpg
+++ b/src/assets/img/muscle-ref/muscle-ref10.jpg
--- a/src/assets/img/muscle-ref/muscle-ref11.jpg
+++ b/src/assets/img/muscle-ref/muscle-ref11.jpg
--- a/src/assets/img/muscle-ref/muscle-ref2.jpg
+++ b/src/assets/img/muscle-ref/muscle-ref2.jpg
--- a/src/assets/img/muscle-ref/muscle-ref3.jpg
+++ b/src/assets/img/muscle-ref/muscle-ref3.jpg
--- a/src/assets/img/muscle-ref/muscle-ref4.png
+++ b/src/assets/img/muscle-ref/muscle-ref4.png
--- a/src/assets/img/muscle-ref/muscle-ref5.jpg
+++ b/src/assets/img/muscle-ref/muscle-ref5.jpg
--- a/src/assets/img/muscle-ref/muscle-ref6.jpg
+++ b/src/assets/img/muscle-ref/muscle-ref6.jpg
--- a/src/assets/img/muscle-ref/muscle-ref7.jpg
+++ b/src/assets/img/muscle-ref/muscle-ref7.jpg
--- a/src/assets/img/muscle-ref/muscle-ref8.jpg
+++ b/src/assets/img/muscle-ref/muscle-ref8.jpg
--- a/src/assets/img/muscle-ref/muscle-ref9.jpg
+++ b/src/assets/img/muscle-ref/muscle-ref9.jpg
--- a/src/assets/img/upper-body-ref.jpg
+++ b/src/assets/img/upper-body-ref.jpg
--- a/src/assets/refs/attacks/sebin-burning_twister-hires.png
+++ b/src/assets/refs/attacks/sebin-burning_twister-hires.png
--- a/src/assets/refs/attacks/sebin-fire_breath-hires.png
+++ b/src/assets/refs/attacks/sebin-fire_breath-hires.png
--- a/src/assets/refs/attacks/sebin-flame_toss-hires.png
+++ b/src/assets/refs/attacks/sebin-flame_toss-hires.png
--- a/src/assets/refs/attacks/sebin-kindled_fist-hires.png
+++ b/src/assets/refs/attacks/sebin-kindled_fist-hires.png
--- a/src/assets/refs/clothes/casual/fullbody.png
+++ b/src/assets/refs/clothes/casual/fullbody.png
--- a/src/assets/refs/clothes/cold/fullbody.png
+++ b/src/assets/refs/clothes/cold/fullbody.png
--- a/src/assets/refs/clothes/lazy/fullbody.png
+++ b/src/assets/refs/clothes/lazy/fullbody.png
--- a/src/assets/refs/clothes/lazy/undies.png
+++ b/src/assets/refs/clothes/lazy/undies.png
--- a/src/assets/refs/clothes/workout/closeup.png
+++ b/src/assets/refs/clothes/workout/closeup.png
--- a/src/assets/img/clothes-ref/workout/fullbody.png
+++ b/src/assets/img/clothes-ref/workout/fullbody.png
--- a/src/assets/refs/muscle/muscle-ref1.png
+++ b/src/assets/refs/muscle/muscle-ref1.png
--- a/src/assets/refs/muscle/muscle-ref10.jpg
+++ b/src/assets/refs/muscle/muscle-ref10.jpg
--- a/src/assets/refs/muscle/muscle-ref11.png
+++ b/src/assets/refs/muscle/muscle-ref11.png
--- a/src/assets/refs/muscle/muscle-ref12.png
+++ b/src/assets/refs/muscle/muscle-ref12.png
--- a/src/assets/refs/muscle/muscle-ref2.png
+++ b/src/assets/refs/muscle/muscle-ref2.png
--- a/src/assets/refs/muscle/muscle-ref3.png
+++ b/src/assets/refs/muscle/muscle-ref3.png
--- a/src/assets/refs/muscle/muscle-ref4.png
+++ b/src/assets/refs/muscle/muscle-ref4.png
--- a/src/assets/refs/muscle/muscle-ref5.jpg
+++ b/src/assets/refs/muscle/muscle-ref5.jpg
--- a/src/assets/refs/muscle/muscle-ref6.png
+++ b/src/assets/refs/muscle/muscle-ref6.png
--- a/src/assets/refs/muscle/muscle-ref7.tiff
+++ b/src/assets/refs/muscle/muscle-ref7.tiff
--- a/src/assets/refs/muscle/muscle-ref8.png
+++ b/src/assets/refs/muscle/muscle-ref8.png
--- a/src/assets/refs/muscle/muscle-ref9.jpg
+++ b/src/assets/refs/muscle/muscle-ref9.jpg
--- a/src/assets/refs/sebin-hairstyle-short.jpg
+++ b/src/assets/refs/sebin-hairstyle-short.jpg
--- a/src/assets/refs/sebin-overdrive_ref-hires.jpg
+++ b/src/assets/refs/sebin-overdrive_ref-hires.jpg
--- a/src/assets/refs/sebin-ref-body-NSFW.png
+++ b/src/assets/refs/sebin-ref-body-NSFW.png
--- a/src/assets/refs/sebin-ref-body-SFW.png
+++ b/src/assets/refs/sebin-ref-body-SFW.png
--- a/src/assets/refs/sebin-ref-expressions.png
+++ b/src/assets/refs/sebin-ref-expressions.png
--- a/src/assets/refs/sebin-ref-penis.png
+++ b/src/assets/refs/sebin-ref-penis.png
--- a/src/assets/refs/sebin-smug-icon.png
+++ b/src/assets/refs/sebin-smug-icon.png
--- a/Show more
+++ b/Show more
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
Sebin Nyshkim	0b4813e285	chore: bump version number	2023-04-03 00:55:46 +02:00
Sebin Nyshkim	4853e1ec63	style: run linter	2023-04-03 00:55:28 +02:00
Sebin Nyshkim	de3862bf77	build: inline postcss config into vite config	2023-04-03 00:29:59 +02:00
Sebin Nyshkim	6094a2a559	feat: update prettier config	2023-04-03 00:29:40 +02:00
Sebin Nyshkim	939610ed61	build: update typescript	2023-04-03 00:03:18 +02:00
Sebin Nyshkim	5ef3d6c0f9	build: add browserslist config	2023-04-02 23:55:44 +02:00
Sebin Nyshkim	35562692e4	build: update tsconfig	2023-04-02 23:55:24 +02:00
Sebin Nyshkim	5f65a341a0	refactor: change how version is read from package.json	2023-04-02 23:46:46 +02:00
Sebin Nyshkim	e3f2e0c256	feat: migrate to native details element for quickfacts component	2023-04-02 23:35:59 +02:00
Sebin Nyshkim	51e72e2021	feat: remove no longer needed modalResultKey inject	2023-04-02 20:08:29 +02:00
Sebin Nyshkim	b8c9d8de17	feat: remove no longer needed isWarn property and injection key	2023-04-02 17:45:08 +02:00
Sebin Nyshkim	cc664a764d	feat: move modal out of views and into global app context	2023-04-02 17:42:26 +02:00
Sebin Nyshkim	d0f9434700	feat: migrate to native dialog element for modal component	2023-04-02 17:28:48 +02:00
Sebin Nyshkim	b9fe7113ed	feat: extend column styling	2023-04-02 17:27:27 +02:00
Sebin Nyshkim	0e225f95c9	fix: make sure paragraphs in footer are always center aligned	2023-04-02 17:08:38 +02:00
Sebin Nyshkim	8e0756f166	feat: add column and grid styling to button group	2023-04-02 17:07:57 +02:00
Sebin Nyshkim	e67a220223	feat: add props for button styling	2023-04-02 17:07:13 +02:00
Sebin Nyshkim	dd70061798	feat: use buttons instead of list for social links	2023-04-02 17:05:41 +02:00
Sebin Nyshkim	c7444256f1	feat: justify paragraphs, add hyphenation	2023-04-02 17:04:30 +02:00
Sebin Nyshkim	3c8b726d83	refactor: decouple social link styling from fixed elements	2023-04-02 17:03:27 +02:00
Sebin Nyshkim	a670952e15	build: add autoprefixer	2023-04-02 15:47:07 +02:00
Sebin Nyshkim	d6f94c26d4	build: update npm packages	2023-04-02 15:46:46 +02:00
Sebin Nyshkim	62795740b3	chore: bump version number	2023-01-25 19:30:20 +01:00
Sebin Nyshkim	6b0acce446	fix: make sure setActiveImage gets integer value after scroll	2023-01-25 19:28:54 +01:00
Sebin Nyshkim	a0182fe447	chore: add header template for Fur Affinity	2023-01-23 02:02:44 +01:00
Sebin Nyshkim	fe785f6ed3	chore: add header template for Mastodon	2023-01-23 02:02:35 +01:00
Sebin Nyshkim	52d2f12b75	chore: add header template for Twitter	2023-01-23 02:02:25 +01:00
Sebin Nyshkim	7a3a58d8fc	chore: bump version number	2023-01-22 17:29:52 +01:00
Sebin Nyshkim	21df633e9e	style: remove unused <script> sections from components	2023-01-22 16:55:38 +01:00
Sebin Nyshkim	014451ffa0	style: use shorter array type declarations	2023-01-22 16:55:09 +01:00
Sebin Nyshkim	6ecba14f6f	style: add explicit return value	2023-01-22 16:50:37 +01:00
Sebin Nyshkim	9893373a43	fix: increase z-index to stay on top of other page elements	2023-01-22 16:49:49 +01:00
Sebin Nyshkim	d84c415b22	feat: update RefGallery to native scrolling	2023-01-22 16:48:12 +01:00
Sebin Nyshkim	c77854667b	feat: add debounce function	2023-01-22 16:45:14 +01:00
Sebin Nyshkim	2c4c07441b	fix: update meta tag URLs	2023-01-22 16:44:42 +01:00
Sebin Nyshkim	c834b7c49e	chore: bump version number	2023-01-20 01:02:21 +01:00
Sebin Nyshkim	d000c4a4fb	feat: add social card template	2023-01-20 01:00:28 +01:00
Sebin Nyshkim	6d9515498f	refactor: remove sftp config	2023-01-20 00:59:51 +01:00
Sebin Nyshkim	88e437d001	chore: apply higher compression on full res ref sheets	2023-01-20 00:59:16 +01:00
Sebin Nyshkim	fb413a5fba	feat: update .htaccess	2023-01-20 00:58:19 +01:00
Sebin Nyshkim	9aa5579bde	feat: use bespoke social preview image	2023-01-20 00:57:53 +01:00
Sebin Nyshkim	c7baf62833	feat: serve fonts locally	2023-01-20 00:57:20 +01:00
Sebin Nyshkim	092fc92658	feat: use higher resolution image assets	2023-01-20 00:56:58 +01:00
Sebin Nyshkim	ec9e975bda	refactor: move background pattern SVG into assets dir	2023-01-20 00:54:00 +01:00
Sebin Nyshkim	9dcda9d3dd	refactor: migrate Overdrive view	2023-01-20 00:53:11 +01:00
Sebin Nyshkim	05b8e0c410	refactor: migrate Home view	2023-01-20 00:52:59 +01:00
Sebin Nyshkim	9ddc4e5a8c	refactor: migrate General view	2023-01-20 00:52:47 +01:00
Sebin Nyshkim	7670634cda	refactor: migrate Clothing view	2023-01-20 00:52:34 +01:00
Sebin Nyshkim	a9b6b815e8	refactor: migrate Anatomy view	2023-01-20 00:52:19 +01:00
Sebin Nyshkim	3a1a5942df	refactor: migrate Abilities view	2023-01-20 00:51:54 +01:00
Sebin Nyshkim	a78ad22578	refactor: migrate Welcome component	2023-01-20 00:51:18 +01:00
Sebin Nyshkim	40f5b32970	refactor: migrate QuickFacts component	2023-01-20 00:51:01 +01:00
Sebin Nyshkim	a729113b71	refactor: remove Prose component Now just a regular HTML5 section element	2023-01-20 00:50:39 +01:00
Sebin Nyshkim	600a82d3f2	refactor: migrate NsfwWarning component	2023-01-20 00:49:40 +01:00
Sebin Nyshkim	eb749e1796	refactor: migrate NsfwSwitch component	2023-01-20 00:49:22 +01:00
Sebin Nyshkim	267830b15d	refactor: migrate Navigation component	2023-01-20 00:48:52 +01:00
Sebin Nyshkim	c1b7bdbbb4	refactor: migrate Header component	2023-01-20 00:48:34 +01:00
Sebin Nyshkim	6e2a633b45	refactor: migrate Gallery component	2023-01-20 00:48:15 +01:00
Sebin Nyshkim	4384759616	refactor: rename component imports	2023-01-20 00:47:53 +01:00
Sebin Nyshkim	32c63efeaa	refactor: migrate Footer component	2023-01-20 00:43:03 +01:00
Sebin Nyshkim	81941a9e45	refactor: migrate Figure component	2023-01-20 00:36:42 +01:00
Sebin Nyshkim	b37e067efd	refactor: migrate DataTable component	2023-01-20 00:36:03 +01:00
Sebin Nyshkim	af4427cf3d	feat: add ColorTable component	2023-01-20 00:35:51 +01:00
Sebin Nyshkim	e902589427	feat: add ButtonGroup component	2023-01-20 00:35:21 +01:00
Sebin Nyshkim	5cf33f6dfa	refactor: migrate Button component	2023-01-20 00:35:05 +01:00
Sebin Nyshkim	3ba5e0aa2b	refactor: migrate AttackItem component	2023-01-20 00:34:03 +01:00
Sebin Nyshkim	97ff935b13	refactor: migrate AttackList component	2023-01-20 00:33:35 +01:00
Sebin Nyshkim	313d6f2302	refactor: migrate base App	2023-01-20 00:32:56 +01:00
Sebin Nyshkim	7aeecdb656	feat: add InjectionKey exports	2023-01-20 00:32:06 +01:00
Sebin Nyshkim	baf6161d95	feat: add typed props exports	2023-01-20 00:32:00 +01:00
Sebin Nyshkim	579e57f631	refactor: migrate vue router config	2023-01-20 00:29:34 +01:00
Sebin Nyshkim	b63a14d8ce	refactor: migrate base styles	2023-01-20 00:28:44 +01:00
Sebin Nyshkim	5b5c027ea6	refactor: migrate helper functions mixin	2023-01-20 00:25:49 +01:00
Sebin Nyshkim	6494354a6d	refactor: migrate Sebin data mixin	2023-01-20 00:23:52 +01:00
Sebin Nyshkim	90ef5eaf06	feat: migrate vue-cli based scaffold to vue-create	2023-01-19 23:59:53 +01:00
Sebin Nyshkim	10f9ae340c	chore: bump version number	2022-11-07 21:53:52 +01:00
Sebin Nyshkim	c6bb436ad8	revert: list attacks in regular header & paragraph style Attack items expect to be associated with a picture. As these won't be around for the forseeable future, use a normal list style consisting of regular headers and paragraphs until assets can be provided Refs: `3d2d876b`	2022-11-07 21:53:52 +01:00
Sebin Nyshkim	a649fdae0b	fix: add h4 to prose rules	2022-11-07 21:53:52 +01:00
Sebin Nyshkim	fa7ff4ac89	fix: add link to Mastodon profile	2022-11-07 21:53:52 +01:00
Sebin Nyshkim	81ba54ef10	chore: bump version number	2022-07-19 16:25:58 +02:00
Sebin Nyshkim	3d2d876b98	refactor: use new attack list and attack item components	2022-07-19 15:52:15 +02:00
Sebin Nyshkim	c682e2b38b	feat: introduce attack list and attack item components	2022-07-19 15:51:42 +02:00
Sebin Nyshkim	e693cf8812	chore: 🔖 bump version number	2022-06-27 18:01:05 +02:00
Sebin Nyshkim	bf06377cbd	chore: 📦 update installed packages	2022-06-27 18:00:33 +02:00
Sebin Nyshkim	4a7d131b2e	feat: ✨ add NSFW switch and warning to front page for ref sheet download buttons	2022-06-27 17:53:25 +02:00
Sebin Nyshkim	69bcfe77b6	fix: 💄 iOS Safari collappsed bottom address bar coloring	2022-06-27 17:51:30 +02:00
Sebin Nyshkim	da2f1822ae	chore: bump version number	2022-01-29 00:08:59 +01:00
Sebin Nyshkim	9a339722a4	chore: update installed packages	2022-01-29 00:08:50 +01:00
Sebin Nyshkim	c9396c3bed	feat: change default color, add color for dark mode	2022-01-29 00:06:14 +01:00
Sebin Nyshkim	c783797a99	feat: add .htaccess for in-app routing on apache-based web servers	2022-01-29 00:01:18 +01:00
Sebin Nyshkim	cbccf762bd	feat: add svg background pattern	2022-01-29 00:00:22 +01:00
Sebin Nyshkim	2bb3abab52	refactor: better use of scss features	2022-01-28 23:59:47 +01:00
Sebin Nyshkim	fd3c8f6449	feat: new paint job, code cleanup, copy hex values to clipboard when clicked	2022-01-28 23:58:50 +01:00
Sebin Nyshkim	88361c95bf	feat: new paint job	2022-01-28 23:54:58 +01:00
Sebin Nyshkim	320e8e7589	feat: improve responsive styles	2022-01-28 23:50:06 +01:00
Sebin Nyshkim	bcac65ea8d	feat: remove unused bubbles styles	2022-01-28 23:48:25 +01:00
Sebin Nyshkim	f2463b6163	feat: move app root into body element	2022-01-28 23:47:49 +01:00
Sebin Nyshkim	3eddad19c9	feat: reintroduce header and footer components	2022-01-28 23:46:24 +01:00
Sebin Nyshkim	f92043e106	fix: use new color variables	2022-01-28 23:45:49 +01:00
Sebin Nyshkim	94d7295075	feat: update color variables	2022-01-28 23:44:16 +01:00
Sebin Nyshkim	bf1aa929c1	feat: add light/dark mode media query mixin	2022-01-28 23:34:08 +01:00
Sebin Nyshkim	a4fadab6ad	feat: add dropshadow prop to figure component	2022-01-28 23:31:47 +01:00
Sebin Nyshkim	96005f3a9c	style: remove superfluous heading	2022-01-28 23:30:02 +01:00
Sebin Nyshkim	8d584f0e87	feat: add more descriptive text to home page	2022-01-28 23:29:23 +01:00
Sebin Nyshkim	8307995b6d	chore: bump version	2022-01-11 23:18:17 +01:00
Sebin Nyshkim	ca184b9e9f	fix: prevent fixed footer on mobile landscape view	2022-01-11 23:17:25 +01:00
Sebin Nyshkim	bdb5aae137	chore: bump version	2022-01-11 22:58:47 +01:00
Sebin Nyshkim	17ffad3441	fix: prevent quick-facts column styling on mobile	2022-01-11 22:57:44 +01:00
Sebin Nyshkim	be83f74658	fix: use media query mixin	2022-01-11 22:55:18 +01:00
Sebin Nyshkim	b43798b7f2	fix: increase max-height for really long lists	2022-01-11 22:54:57 +01:00
Sebin Nyshkim	254bcf3079	chore: bump version number	2022-01-11 22:04:44 +01:00
Sebin Nyshkim	3adbabc7da	perf: only process images when building for production	2022-01-11 21:56:42 +01:00
Sebin Nyshkim	d0b191706b	feat: implement scroll lock on NSFW warning modal	2022-01-11 21:55:33 +01:00
Sebin Nyshkim	0c635b5630	refactor: BEMify, better use of SCSS, collate styles	2022-01-11 21:54:09 +01:00
Sebin Nyshkim	1016d119a4	refactor: code cleanup	2022-01-11 21:37:01 +01:00
Sebin Nyshkim	f2948005e1	refactor: import specific SCSS mixins	2022-01-11 20:47:41 +01:00
Sebin Nyshkim	25e8b0ad65	refactor: move button styles in separate mixin	2022-01-11 20:43:14 +01:00
Sebin Nyshkim	087c8af8bf	refactor: remove unused footer comonent	2022-01-11 19:27:52 +01:00
Sebin Nyshkim	4815448751	feat: add contents to General page	2022-01-11 14:38:22 +01:00
Sebin Nyshkim	7d08f5b779	refactor: restructure page contents split longer quick facts into multiple shorter ones make use of variables and methods in Sebin data object	2022-01-11 14:37:59 +01:00
Sebin Nyshkim	0db25371c7	feat: add details to Sebin's data	2022-01-11 14:25:22 +01:00
Sebin Nyshkim	35c694af79	feat: add toFahrenheit() method	2022-01-11 14:24:36 +01:00
Sebin Nyshkim	428e9e788b	refactor: shorten SCSS code	2022-01-11 14:23:39 +01:00
Sebin Nyshkim	464c6eaf42	feat: add list rendering to table cells	2022-01-11 13:29:45 +01:00
Sebin Nyshkim	64ff5792c9	fix: figure markup, remove superfluous styles	2022-01-07 21:37:06 +01:00
Sebin Nyshkim	cd56735bf9	feat: update button texts	2022-01-07 21:35:04 +01:00
Sebin Nyshkim	d570bdc678	refactor: darken box-shadow instead of lighten background-color	2022-01-07 21:33:11 +01:00
Sebin Nyshkim	0c6ed999a4	feat: add color variables	2022-01-07 21:30:34 +01:00
Sebin Nyshkim	8a7d1ad9d7	fix: adjust media queries	2022-01-07 21:29:11 +01:00
Sebin Nyshkim	891c3a3dec	refactor: use button component	2022-01-07 21:27:46 +01:00
Sebin Nyshkim	3bc6fc630f	feat: update button component	2022-01-07 21:27:28 +01:00
Sebin Nyshkim	818e0d7f49	fix: increase margin between logo and navigation	2022-01-07 16:21:52 +01:00
Sebin Nyshkim	11cf46f36f	feat: add full ref image for download	2022-01-07 16:21:27 +01:00
Sebin Nyshkim	28bb7711d9	feat: add button component	2022-01-07 16:16:10 +01:00
Sebin Nyshkim	72f2c6d748	fix: missing root nsfw check	2022-01-06 23:20:32 +01:00
Sebin Nyshkim	829444a37f	fix: safari rendering inconsistencies with polaroid border compared to other browsers	2022-01-06 23:19:58 +01:00
Sebin Nyshkim	9fab037276	feat: add notch compatibility	2022-01-06 23:19:47 +01:00
Sebin Nyshkim	d6df8dd21d	fix: update browser themeColor to new main page color	2022-01-06 23:14:53 +01:00
Sebin Nyshkim	5f61510881	feat: updated anatomy description for Sebin	2022-01-06 21:22:17 +01:00
Sebin Nyshkim	61e6dbf930	fix: increase padding to prevent content being overlaid by fixed navbar	2022-01-06 21:21:48 +01:00
Sebin Nyshkim	77b91cd4c8	fix: use updated figure syntax	2022-01-06 18:59:39 +01:00
Sebin Nyshkim	9cca827347	refactor: use gallery component proper	2022-01-06 18:58:39 +01:00
Sebin Nyshkim	ae949c98ea	refactor: use figure components inside gallery component	2022-01-06 18:57:42 +01:00
Sebin Nyshkim	19ea11c7f2	refactor: use proper BEM conventions for attacks	2022-01-06 18:56:39 +01:00
Sebin Nyshkim	fc94921554	fix: change how number of images are detected	2022-01-06 18:56:07 +01:00
Sebin Nyshkim	8487906800	feat: implement cencor functionality for individual figure elements	2022-01-06 18:55:22 +01:00
Sebin Nyshkim	1aefa2d1c3	feat: add footer to main app	2022-01-06 18:54:34 +01:00
Sebin Nyshkim	3e803c1fde	feat: add ability to display images as polaroid	2022-01-06 09:09:48 +01:00
Sebin Nyshkim	ae6c1f3eab	refactor: use ems for switch styles	2022-01-06 09:08:59 +01:00
Sebin Nyshkim	6f82f8c824	feat: add font	2022-01-06 09:08:03 +01:00
Sebin Nyshkim	3175992beb	fix: scroll to top on route change	2022-01-06 09:07:49 +01:00
Sebin Nyshkim	841bfc9879	refactor: use RefFigure component	2022-01-06 06:44:05 +01:00
Sebin Nyshkim	e727071493	fix: re-introduce timeout to prevent nsfw leakage	2022-01-06 06:43:02 +01:00
Sebin Nyshkim	1ab50dca96	style: 🚨 linter go brrr	2022-01-06 04:45:45 +01:00
Sebin Nyshkim	03ef3d9f7f	fix: 🐛 update to use new Vue 3 syntax	2022-01-06 04:31:56 +01:00
Sebin Nyshkim	6823eeb92f	refactor: ♻️ move nsfw functionality into root component	2022-01-06 04:30:57 +01:00
sebin.nyshkim@icloud.com	ae5d4d2633	feat: ♻️ refactor ALL THE THINGS!!! (again) Update to Vue 3 and employ Vue Router, additional design changes and navigation changes	2022-01-04 00:39:02 +01:00
Sebin Nyshkim	e9f29b655d	chore: bump version number	2021-12-31 00:24:43 +01:00
Sebin Nyshkim	e5e89f027b	feat: add new muscle ref	2021-12-31 00:23:40 +01:00
Sebin Nyshkim	3df8d6f995	chore: 🔖 bump version number	2021-12-26 20:04:45 +01:00
Sebin Nyshkim	4bd681d632	style: 🚨 linter go brrrr	2021-12-26 20:04:13 +01:00
Sebin Nyshkim	84c1768e7d	feat: 🎨 use drawn references	2021-12-26 19:44:17 +01:00
sebin.nyshkim@icloud.com	5df66f8e57	build: bump version	2021-11-02 16:07:17 +01:00
sebin.nyshkim@icloud.com	a948fccc36	feat: add full body casual wear ref	2021-11-02 16:06:54 +01:00