package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "main": "index.js",
   "scripts": {
-    "start": "eleventy --serve --incremental",
+    "start": "eleventy --serve ",
     "build": "ELEVENTY_PRODUCTION=true eleventy",
     "prebuild": "rm -rf ./public"
   },
@@ -13,9 +13,9 @@
   "description": "",
   "type": "module",
   "dependencies": {
-    "@11ty/eleventy": "^3.1.1",
+    "@11ty/eleventy": "^3.0.0",
-    "@11ty/eleventy-img": "^6.0.4",
+    "@11ty/eleventy-img": "^6.0.1",
-    "@11ty/eleventy-navigation": "^1.0.4",
+    "@11ty/eleventy-navigation": "^1.0.1",
     "@11ty/eleventy-plugin-webc": "^0.11.2"
   }
 }

src/components/filter-list.webc

@@ -32,22 +32,17 @@
   :host {
     --clr-love: oklch(60% 0.25 10deg);
     --clr-yes: oklch(65% 0.2 140deg);
-    --clr-maybe: oklch(65% 0.15 70deg);
+    --clr-maybe: oklch(75% 0.15 85deg);
-    --clr-no: oklch(40% 0.2 40deg);
+    --clr-no: oklch(40% 0.15 30deg);
     --clr-tag: oklch(65% 0.15 245deg);
   }
 
   :host {
-    --gradient-dir: to bottom right;
-    --gradient-base: var(--clr-box-background);
-    --gradient-start: oklch(from var(--gradient-base) calc(l + 0.2) c h);
-    --gradient-end: oklch(from var(--gradient-base) l c h);
-
     position: relative;
     background: linear-gradient(
-      var(--gradient-dir),
+      to bottom right,
-      var(--gradient-start) 0%,
+      var(--clr-box-gradient-start) 0%,
-      var(--gradient-end) 50%
+      var(--clr-box-gradient-end) 50%
     );
 
     font-size: 0.75em;
@@ -66,15 +61,13 @@
   }
 
   :host::before {
-    --gradient-start: oklch(from var(--gradient-base) calc(l + 0.1) c h);
-
     content: '';
     position: absolute;
     inset: var(--border-thin);
     background: linear-gradient(
-      var(--gradient-dir),
+      to bottom right,
-      var(--gradient-start) 0%,
+      var(--clr-quick-info-bg-start) 0%,
-      var(--gradient-end) 50%
+      var(--clr-quick-info-bg-end) 50%
     );
     border-radius: inherit;
     z-index: -1;
@@ -95,55 +88,37 @@
     display: none;
   }
 
-  :host .filter-button label {
+  :host .filter-button input:checked + label {
-    --gradient-base: var(--clr-button);
+    --box-shadow-size: 0.25em;
-    --gradient-start: oklch(from var(--gradient-base) calc(l + 0.2) c h);
+    --button-top: 0.25em;
-    --gradient-end: oklch(from var(--gradient-base) l c h);
+  }
 
-    position: relative;
+  :host .filter-button label {
     display: block;
 
-    background: linear-gradient(
+    position: relative;
-      var(--gradient-dir),
+    top: var(--button-top, 0);
-      var(--gradient-start) 0%,
-      var(--gradient-end) 50%
-    );
 
-    color: white;
+    background-color: var(--clr-button);
-    font-size: 1em;
+
-    font-weight: bold;
+    font-weight: 700;
+    text-decoration: none;
     text-align: center;
+    color: var(--theme-c-primary-100);
 
-    box-shadow: 0.125em 0.125em 0.5em var(--clr-box-shadow);
+    margin: 0.5em 0;
-
+    border-radius: 0.25em;
-    border: none;
-    border-radius: 0.5em;
     padding: 0.5em 1em;
 
-    overflow: hidden;
+    box-shadow: 0 var(--box-shadow-size, 0.5em) 0 0 oklch(from var(--clr-button) calc(l - 0.3) c h);
-    z-index: 1;
 
-    transition: all 0.2s ease-in-out;
+    transition: all 0.1s ease-out;
   }
 
-  :host .filter-button label::before {
+  :host .filter-button label:hover {
-    --gradient-start: oklch(from var(--gradient-base) calc(l + 0.1) c h);
+    --box-shadow-size: 0.75em;
-
+    --button-top: -0.25em;
-    content: '';
+    cursor: pointer;
-    position: absolute;
-    inset: var(--border-thin);
-    background: linear-gradient(
-      var(--gradient-dir),
-      var(--gradient-start) 0%,
-      var(--gradient-end) 50%
-    );
-    border-radius: inherit;
-    z-index: -1;
-  }
-
-  :host .filter-button input:checked + label {
-    --gradient-dir: to top left;
-    --clr-box-background: oklch(from var(--clr-button) calc(l * 0.825) c h);
   }
 
   :host .filter-button label[for='button-love'] {
@@ -170,7 +145,7 @@
     margin: 0;
     padding: 0;
 
-    overflow-y: scroll;
+    overflow: scroll;
   }
 
   :host .item {

src/components/head/page-head-base.webc

@@ -14,8 +14,6 @@
     --border-thin: 0.0625em;
     --border-radius: 0.75em;
 
-    --timing-func: cubic-bezier(0.68, -0.55, 0.27, 1.55);
-
     @media (min-height: 64em) {
       --page-spacing: 3em;
     }

src/components/head/page-head-colors.webc

@@ -45,9 +45,8 @@
 
     --clr-color-box-background: var(--theme-c-primary-200);
 
-    --clr-quick-info-background: var(--theme-c-primary-150);
+    --clr-quick-info-bg-start: var(--theme-c-primary-100);
-    --clr-quick-info-gradient-start: oklch(from var(--clr-quick-info-background) calc(l + 0.1) c h);
+    --clr-quick-info-bg-end: var(--theme-c-primary-150);
-    --clr-quick-info-gradient-end: oklch(from var(--clr-quick-info-background) l c h);
 
     @media (prefers-color-scheme: dark) {
       --clr-page-background: var(--theme-c-primary-850);
@@ -63,7 +62,8 @@
 
       --clr-color-box-background: var(--theme-c-primary-700);
 
-      --clr-quick-info-background: var(--theme-c-primary-750);
+      --clr-quick-info-bg-start: var(--theme-c-primary-700);
+      --clr-quick-info-bg-end: var(--theme-c-primary-750);
     }
   }
 

src/components/head/page-head-script.webc

@@ -1,70 +0,0 @@
-<script>
-  const storageHandler = {
-    get(target, prop) {
-      switch (prop) {
-        case 'setItem':
-          return function (...args) {
-            const [key, value] = args;
-            // Add additional logic here, such as logging or validation
-            console.log(`Setting key "${key}" to value "${value}"`);
-            updateDom(key, value);
-            target[key] = value;
-          };
-
-        case 'getItem':
-          return function (...args) {
-            const [key] = args;
-            // Add additional logic here, such as logging or validation
-            console.log(`Getting key "${key}"`);
-            return target[key];
-          };
-
-        case 'removeItem':
-          return function (...args) {
-            const [key] = args;
-            // Add additional logic here, such as logging or validation
-            console.log(`Removing key "${key}"`);
-            delete target[key];
-          };
-
-        case 'clear':
-          return function () {
-            // Add additional logic here, such as logging or validation
-            console.log('Clearing all sessionStorage');
-            for (let key in target) {
-              if (target.hasOwnProperty(key)) {
-                delete target[key];
-              }
-            }
-          };
-        default:
-          return target[prop];
-      }
-    },
-    set(target, prop, value) {
-      // Add additional logic here, such as validation or constraints
-      console.log(`Setting key "${prop}" to value "${value}"`);
-      target[prop] = value;
-      return true;
-    },
-    deleteProperty(target, prop) {
-      // Add additional logic here, such as logging or validation
-      console.log(`Deleting key "${prop}"`);
-      delete target[prop];
-      return true;
-    }
-  };
-
-  const storeProxy = new Proxy(sessionStorage, storageHandler);
-
-  const updateDom = (key, value) => {
-    if (key === 'isHorny') {
-      value ? document.body.classList.add('nsfw') : document.body.classList.remove('nsfw');
-    }
-  };
-
-  // Usage example:
-  storeProxy.getItem('isHorny') === 'true'
-    ? document.body.classList.add('nsfw')
-    : document.body.classList.remove('nsfw');
-</script>

src/components/head/page-head-style.webc

@@ -16,10 +16,6 @@
     min-height: 100dvh;
   }
 
-  body.scroll-lock {
-    overflow: hidden;
-  }
-
   h1,
   h2,
   h3,

src/components/nsfw-barrier.webc

@@ -1,44 +0,0 @@
-<script>
-  const nsfwButton = document.querySelector('#nsfw-toggle');
-
-  nsfwButton.addEventListener('click', () => {
-    const isInHornyJail = storeProxy.getItem('isInHornyJail') === 'true';
-    const isHorny = storeProxy.getItem('isHorny') === 'true';
-
-    if (isInHornyJail) {
-      storeProxy.setItem('isHorny', !isHorny);
-    } else {
-      open();
-    }
-  });
-</script>
-
-<div webc:root="override">
-  <div class="message">
-    <div webc:type="11ty" 11ty:type="md">
-      <slot name="message"></slot>
-    </div>
-  </div>
-
-  <ref-button id="nsfw-toggle" command="show-modal" commandfor="nsfw-warning">
-    Reveal/Hide
-  </ref-button>
-
-  <div class="nsfw-content">
-    <div webc:type="11ty" 11ty:type="md">
-      <slot></slot>
-    </div>
-  </div>
-</div>
-
-<style webc:scoped="nsfw-barrier">
-  :host {
-    .nsfw & .nsfw-content {
-      display: block;
-    }
-  }
-
-  :host .nsfw-content {
-    display: none;
-  }
-</style>

src/components/popup-modal.webc

@@ -1,186 +0,0 @@
-<script>
-  const dialog = document.querySelector('dialog');
-  const yesButton = document.querySelector('button.positive');
-  const noButton = document.querySelector('button.negative');
-
-  const open = () => {
-    dialog.showModal();
-    document.body.classList.toggle('scroll-lock');
-    document.body.inert = true;
-  };
-
-  const close = (result) => {
-    document.body.classList.toggle('scroll-lock');
-    document.body.inert = false;
-    storeProxy.setItem('isHorny', result);
-    if (result && storeProxy.getItem('isInHornyJail') !== 'true') {
-      storeProxy.setItem('isInHornyJail', true);
-    }
-    dialog.close();
-  };
-
-  dialog.addEventListener('cancel', (e) => {
-    e.preventDefault();
-    close(storeProxy.getItem('isHorny'));
-  });
-
-  yesButton.addEventListener('click', (e) => {
-    e.preventDefault();
-    close(true);
-  });
-
-  noButton.addEventListener('click', (e) => {
-    e.preventDefault();
-    close(false);
-  });
-</script>
-
-<dialog :id="id" webc:root="override">
-  <form method="dialog" class="content">
-    <h2 class="heading">
-      <slot name="heading"></slot>
-    </h2>
-
-    <div class="message">
-      <slot name="message"></slot>
-    </div>
-
-    <div class="actions">
-      <ref-button class="positive">Yes, show me the goods 👀</ref-button>
-      <ref-button class="negative">NO, STAHP 😱</ref-button>
-    </div>
-  </form>
-</dialog>
-
-<style webc:scoped="modal">
-  :host {
-    --clr-yes: oklch(65% 0.2 140deg);
-    --clr-no: oklch(40% 0.2 40deg);
-  }
-
-  :host {
-    display: none;
-
-    background: linear-gradient(
-      to bottom right,
-      var(--clr-box-gradient-start) 0%,
-      var(--clr-box-gradient-end) 50%
-    );
-    color: var(--clr-text);
-
-    width: 30em;
-
-    margin: auto;
-    border: none;
-    border-radius: 1.5em;
-    padding: 1rem;
-
-    overflow: hidden;
-    z-index: 1;
-
-    opacity: 0;
-
-    transition: all 0.75s ease-in-out allow-discrete;
-    animation: fade-in 0.5s;
-    animation-timing-function: var(--timing-func);
-    transition: all 0.5s;
-    transition-timing-function: var(--timing-func);
-  }
-
-  :host::before {
-    content: '';
-    position: absolute;
-    inset: var(--border-thin);
-    background-color: var(--clr-box-background);
-    border-radius: inherit;
-    z-index: -1;
-  }
-
-  :host[open] {
-    opacity: 1;
-    display: block;
-  }
-
-  :host::backdrop {
-    backdrop-filter: blur(0rem);
-    background-color: oklch(from black l c h / 0.5);
-
-    opacity: 0;
-
-    transition: all 0.75s ease-in-out allow-discrete;
-    animation: backdrop-fade-in 0.5s;
-  }
-
-  :host[open]::backdrop {
-    backdrop-filter: blur(1rem);
-    opacity: 1;
-  }
-
-  :host .content {
-    display: flex;
-    flex-flow: column nowrap;
-    justify-content: center;
-    text-align: center;
-    gap: 1.5rem;
-  }
-
-  :host .content > * {
-    flex: 1 1 auto;
-  }
-
-  :host .heading {
-    margin: 1.875rem 0 0 0;
-  }
-
-  :host .message {
-    flex: 1 1 100%;
-  }
-
-  :host .actions {
-    display: flex;
-    flex-flow: column nowrap;
-    gap: 1em;
-  }
-
-  :host .positive {
-    --gradient-base: var(--clr-yes);
-  }
-
-  :host .negative {
-    --gradient-base: var(--clr-no);
-  }
-
-  @starting-style {
-    :host {
-      display: none;
-      opacity: 0;
-    }
-
-    :host::backdrop {
-      backdrop-filter: blur(0rem);
-      opacity: 0;
-    }
-  }
-
-  @keyframes fade-in {
-    from {
-      opacity: 0;
-      scale: 0;
-    }
-    to {
-      opacity: 1;
-      scale: 1;
-    }
-  }
-
-  @keyframes backdrop-fade-in {
-    from {
-      backdrop-filter: blur(0rem);
-      opacity: 0;
-    }
-    to {
-      backdrop-filter: blur(1rem);
-      opacity: 1;
-    }
-  }
-</style>

src/components/quick-info.webc

@@ -5,15 +5,11 @@
 
 <style webc:scoped="quick-info">
   :host {
-    --gradient-dir: to bottom right;
-    --gradient-start: var(--clr-box-gradient-start);
-    --gradient-end: var(--clr-box-gradient-end);
-
     position: relative;
     background: linear-gradient(
-      var(--gradient-dir),
+      to bottom right,
-      var(--gradient-start) 0%,
+      var(--clr-box-gradient-start) 0%,
-      var(--gradient-end) 50%
+      var(--clr-box-gradient-end) 50%
     );
 
     box-shadow: 0.125em 0.125em 0.5em var(--clr-box-shadow);
@@ -26,16 +22,13 @@
   }
 
   :host::before {
-    --gradient-start: var(--clr-quick-info-gradient-start);
-    --gradient-end: var(--clr-quick-info-gradient-end);
-
     content: '';
     position: absolute;
     inset: var(--border-thin);
     background: linear-gradient(
-      var(--gradient-dir),
+      to bottom right,
-      var(--gradient-start) 0%,
+      var(--clr-quick-info-bg-start) 0%,
-      var(--gradient-end) 50%
+      var(--clr-quick-info-bg-end) 50%
     );
     border-radius: inherit;
     z-index: -1;

src/components/ref-button.webc

@@ -1,50 +0,0 @@
-<button webc:root="override"><slot></slot></button>
-
-<style webc:scoped="button">
-  :host {
-    --gradient-dir: to bottom right;
-    --gradient-base: var(--clr-box-background);
-    --gradient-start: oklch(from var(--gradient-base) calc(l + 0.2) c h);
-    --gradient-end: oklch(from var(--gradient-base) l c h);
-
-    position: relative;
-
-    background: linear-gradient(
-      var(--gradient-dir),
-      var(--gradient-start) 0%,
-      var(--gradient-end) 50%
-    );
-
-    color: var(--clr-text);
-    font-size: 1em;
-    font-weight: bold;
-
-    box-shadow: 0.125em 0.125em 0.5em var(--clr-box-shadow);
-
-    border: none;
-    border-radius: 0.5em;
-    padding: 0.5em 1em;
-
-    overflow: hidden;
-    z-index: 1;
-  }
-
-  :host::before {
-    --gradient-start: oklch(from var(--gradient-base) calc(l + 0.1) c h);
-
-    content: '';
-    position: absolute;
-    inset: var(--border-thin);
-    background: linear-gradient(
-      var(--gradient-dir),
-      var(--gradient-start) 0%,
-      var(--gradient-end) 50%
-    );
-    border-radius: inherit;
-    z-index: -1;
-  }
-
-  :host:active {
-    --gradient-dir: to top left;
-  }
-</style>

src/components/ref-gallery.webc

@@ -121,10 +121,6 @@
   }
 
   :host :where(.prev, .next, .indicator-btn) {
-    --gradient-dir: to bottom right;
-    --gradient-start: var(--clr-box-gradient-start);
-    --gradient-end: var(--clr-box-gradient-end);
-
     position: relative;
 
     font-size: 1.25em;
@@ -132,9 +128,9 @@
     cursor: pointer;
 
     background: linear-gradient(
-      var(--gradient-dir),
+      to bottom right,
-      var(--gradient-start) 0%,
+      var(--clr-box-gradient-start) 0%,
-      var(--gradient-end) 50%
+      var(--clr-box-gradient-end) 50%
     );
 
     box-shadow: 0.125em 0.125em 0.5em var(--clr-box-shadow);
@@ -147,21 +143,21 @@
   }
 
   :host :where(.prev, .next, .indicator-btn):active::after {
-    --gradient-dir: to top left;
+    background: linear-gradient(
+      to top left,
+      var(--clr-quick-info-bg-start) 0%,
+      var(--clr-quick-info-bg-end) 50%
+    );
   }
 
   :host :where(.prev, .next, .indicator-btn)::after {
-    --gradient-dir: to bottom right;
-    --gradient-start: var(--clr-quick-info-gradient-start);
-    --gradient-end: var(--clr-quick-info-gradient-end);
-
     content: '';
     position: absolute;
     inset: var(--border-thin);
     background: linear-gradient(
-      var(--gradient-dir),
+      to bottom right,
-      var(--gradient-start) 0%,
+      var(--clr-quick-info-bg-start) 0%,
-      var(--gradient-end) 50%
+      var(--clr-quick-info-bg-end) 50%
     );
     border-radius: inherit;
     z-index: -1;
@@ -259,6 +255,10 @@
   }
 
   :host .indicator-btn[aria-current='true']::after {
-    --gradient-dir: to top left;
+    background: linear-gradient(
+      to top left,
+      var(--clr-quick-info-bg-start) 0%,
+      var(--clr-quick-info-bg-end) 50%
+    );
   }
 </style>

src/components/ref-img.webc

@@ -7,15 +7,6 @@
     :width="width"
     sizes="1000px"
   ></eleventy-image>
-  <eleventy-image
-    class="image nsfw"
-    :class="(dropshadow ? 'dropshadow' : '')"
-    :src="`src/img/${char}/${src.replace(/^(.*?)(\.[^.]+)$/, '$1-nsfw$2')}`"
-    :alt="`${alt} by ${artist}`"
-    :width="width"
-    sizes="1000px"
-    webc:if="nsfw"
-  ></eleventy-image>
   <figcaption class="caption">
     <template webc:nokeep @text="alt"></template>
     &copy;
@@ -27,35 +18,19 @@
   :host {
     display: grid;
     grid-template-rows: [image-start] 1fr [image-end caption-start] auto [caption-end];
-    grid-template-columns: [image-start] 1fr [image-end];
     place-content: center;
     row-gap: 1rem;
 
     margin-block: 0;
     margin-inline: auto;
 
-    .nsfw &:has(.image.nsfw) {
-      & .image {
-        display: none;
-      }
-
-      & .image.nsfw {
-        display: block;
-      }
-    }
-
-    .nsfw &:not(:has(.image.nsfw)) {
-      & .image {
-        display: block;
-      }
-    }
   }
 
-  :host :where(picture, img) {
+  :host :first-child {
     grid-area: image;
   }
 
-  :host .image {
+  :host img {
     display: block;
     width: 100%;
     height: 100%;
@@ -64,16 +39,12 @@
     border-radius: 1em;
   }
 
-  :host .image.nsfw {
-    display: none;
-  }
-
   :host .dropshadow {
     filter: drop-shadow(0.5em 0.25em 0.375em oklch(0 0 0 / 0.5));
   }
 
   :host .caption {
-    grid-area: caption / image;
+    grid-area: caption;
     text-align: center;
   }
 </style>

src/layouts/base.webc

@@ -9,7 +9,6 @@
     <template webc:is="page-head-fonts" webc:nokeep></template>
     <template webc:is="page-head-colors" webc:nokeep></template>
     <template webc:is="page-head-style" webc:nokeep></template>
-    <template webc:is="page-head-script" webc:nokeep></template>
 
     <link rel="stylesheet" :href="getBundleFileUrl('css')" webc:keep />
     <script type="module" :src="getBundleFileUrl('js')" webc:keep></script>

src/layouts/character.webc

@@ -2,11 +2,6 @@
 layout: base.webc
 ---
 
-<popup-modal id="nsfw-warning" :open="isOpen">
-  <template webc:nokeep slot="heading">Whoa, Nelly!</template>
-  <template webc:nokeep slot="message">Here be kinky dragons!</template>
-</popup-modal>
-
 <main :class="firstName.toLowerCase()">
   <profile>
     <eleventy-image

src/sebin/anatomy.md

@@ -59,7 +59,6 @@ gallery: [
     :@width="[1000]"
     :@char="$data.firstName.toLowerCase()"
     :@dropshadow="true"
-    :@nsfw="true"
 ></ref-img>
 
 <colors :@colors="$data.getColors()"></colors>
@@ -86,7 +85,6 @@ Sebin has a muscular build that he keeps in shape with regular exercise.
     :@width="[1000]"
     :@char="$data.firstName.toLowerCase()"
     :@dropshadow="true"
-    :@nsfw="true"
 ></ref-img>
 
 <quick-info>
@@ -149,14 +147,6 @@ An assortment of additional references how Sebin can be drawn.
   ></ref-img>
 </ref-gallery>
 
-<nsfw-barrier>
-<div slot="message">
-
-## Danger Zone
-
-Here be kinky dragons 👀💦
-</div>
-
 ## Penis
 
 <ref-img
@@ -174,4 +164,3 @@ Here be kinky dragons 👀💦
 </quick-info>
 
 Despite his reptilian appearance, Sebin has nipples, a feature of the human side of his family. Furthermore, his external testicles represent another humanized feature. Where relatives of his ilk possess a slit in which the penis lies protectively, Sebin possesses a pouch-like sheath from which the tip of the penis protrudes slightly. The shape of his shaft is predominantly humanoid, but it is surrounded by ridges and has no equivalent of a foreskin. When aroused, the coal-black shaft swells and pushes out of the sheath until fully erect, the sheath wrapping around the root of the shaft like a ring. However, he can also push it out in a flaccid state, e.g. when needing to pass water.
-</nsfw-barrier>

src/sebin/index.md

@@ -26,15 +26,10 @@ Besides snacking, Sebin also likes to eat hearty and savory things. He doesn't d
 
 Sebin rarely says no to a good beer with friends, just as he rarely says no to a bar tour to try new and interesting cocktails.
 
-<nsfw-barrier>
+## test
-<div slot="message">
 
-## But wait! There's more…
+<nsfw-barrier></nsfw-barrier>
-
-Discover Sebin's kinkier side 😏
-</div>
 
 ## Kinks
 
 <filter-list :@data="$data.kinks"></filter-list>
-</nsfw-barrier>