src/components/nsfw-barrier.webc

@@ -1,8 +1,7 @@
 <script>
-  const nsfwButtonBtns = document.querySelectorAll('.nsfw-toggle');
+  const nsfwButton = document.querySelector('#nsfw-toggle');
 
-  nsfwButtonBtns.forEach((btn) =>
-    btn.addEventListener('click', () => {
+  nsfwButton.addEventListener('click', () => {
     const isInHornyJail = storeProxy.getItem('isInHornyJail') === 'true';
     const isHorny = storeProxy.getItem('isHorny') === 'true';
 
@@ -11,8 +10,7 @@
     } else {
       open();
     }
-    })
-  );
+  });
 </script>
 
 <div webc:root="override">
@@ -22,9 +20,8 @@
     </div>
   </div>
 
-  <ref-button class="nsfw-toggle" command="show-modal" commandfor="nsfw-warning">
-    <span>Show NSFW</span>
-    <span class="nsfw-label">Hide NSFW</span>
+  <ref-button id="nsfw-toggle" command="show-modal" commandfor="nsfw-warning">
+    Reveal/Hide
   </ref-button>
 
   <div class="nsfw-content">
@@ -36,22 +33,12 @@
 
 <style webc:scoped="nsfw-barrier">
   :host {
-    .nsfw & :where(.nsfw-content) {
+    .nsfw & .nsfw-content {
       display: block;
     }
-    .nsfw & .nsfw-toggle .nsfw-label {
-      display: block;
-    }
-    .nsfw & .nsfw-toggle :not(.nsfw-label) {
-      display: none;
-    }
   }
 
-  :host .nsfw-toggle {
-    text-align: end;
-  }
-
-  :host :where(.nsfw-content, .nsfw-label) {
+  :host .nsfw-content {
     display: none;
   }
 </style>

src/components/popup-modal.webc

@@ -134,7 +134,6 @@
 
   :host .message {
     flex: 1 1 100%;
-    text-wrap: balance;
   }
 
   :host .actions {

src/components/ref-img.webc

@@ -21,7 +21,6 @@
     ©
     <a :href="href" target="_blank" @text="artist"></a>
   </figcaption>
-  <nsfw-barrier webc:if="nsfw"></nsfw-barrier>
 </figure>
 
 <style webc:scoped="ref-image">
@@ -52,12 +51,6 @@
     }
   }
 
-  :host .nsfw-barrier {
-    grid-area: image;
-    justify-self: end;
-    align-self: end;
-  }
-
   :host :where(picture, img) {
     grid-area: image;
   }

src/layouts/character.webc

@@ -3,13 +3,8 @@ layout: base.webc
 ---
 
 <popup-modal id="nsfw-warning" :open="isOpen">
-  <template webc:nokeep slot="heading">
-    🔞 Whoa, Nelly! 🔞
-  </template>
-  <template webc:nokeep slot="message">
-    <p>Entering the kinky zone!</p>
-    <p>You confirm that you are of legal age to view adult content!</p>
-  </template>
+  <template webc:nokeep slot="heading">Whoa, Nelly!</template>
+  <template webc:nokeep slot="message">Here be kinky dragons!</template>
 </popup-modal>
 
 <main :class="firstName.toLowerCase()">

src/viktor/anatomy.md

@@ -5,13 +5,12 @@ eleventyNavigation:
 ---
 
 <ref-img
-    :@src="`ref-back.png`"
+    :@src="`ref-SFW.png`"
     :@alt="`Viktor Ref`"
     :@artist="`sabertoofs`"
     :@href="`https://bsky.app/profile/sabertoofs.bsky.social`"
     :@char="$data.firstName.toLowerCase()"
     :@dropshadow="true"
-    :@nsfw="true"
 ></ref-img>
 
 <colors :@colors="$data.getColors()"></colors>
@@ -23,13 +22,12 @@ His forehead, nose, chest, belly and crotch are of light desert sand colors that
 His cheeks, shoulders, back and thighs, in contrast, stand out with a rich walnut brown, which is also found on the sides of his tail. From the back of his head, down his spine and across the top of his tail is a continuous strip of deep dark cedar brown. Arms and legs are distinguished by a light earthy brown.
 
 <ref-img
-    :@src="`ref-front.png`"
+    :@src="`pinup-SFW.png`"
     :@alt="`Viktor Ref`"
     :@artist="`sabertoofs`"
     :@href="`https://bsky.app/profile/sabertoofs.bsky.social`"
     :@char="$data.firstName.toLowerCase()"
     :@dropshadow="true"
-    :@nsfw="true"
 ></ref-img>
 
 His entire body is speckled with scattered aquamarine spots, which come in pairs of one large and one small spot. The only exceptions are the spots on his cheeks and behind his lower cheek horns, which come in threes and his the top side of his snout, which sports a big single spot. Mouth, tongue, nostrils and any other tissue of his body also feature this color.