na

app/assets/stylesheets/application.css

@@ -210,6 +210,7 @@ main {
     font-size: var(--fs-lg);
     font-weight: 700;
     line-height: 1;
+    color: var(--clr-black);
     padding: 0.888888888888889em 1.333333333333333em;
     border-radius: 400px;
   }
@@ -238,6 +239,71 @@ main {
   color: var(--clr-black);
 }
 
+
+.reveal__container {
+  background-color: var(--clr-black);
+  border-radius: 400px;  
+  position: relative;
+  height: 62px;
+  --opacity: 1.0;
+
+
+  &::before {
+    content: attr(data-label);
+    color: var(--clr-white);
+    position: absolute;
+    font-size: var(--fs-lg);
+    font-weight: 700;
+    top: 50%;
+    left: 50%;
+    z-index: inherit;
+    transform: translate(-50%, -50%);
+    opacity: var(--opacity);
+  }
+
+  & input {
+    position: absolute;
+    inset: 0 0 0 0;
+    margin: 0;
+  }
+}
+input[type=range] {
+  appearance: none;
+  width: 100%;
+  background-color: transparent;
+  
+  height: 62px; 
+  box-sizing: border-box;
+  border: 8px solid transparent;  
+}
+
+::-webkit-slider-thumb {
+  appearance: none;
+  width: 46px; 
+  height: 46px; 
+  border-radius: 50%;
+  background-color: var(--clr-white); 
+  cursor: pointer;
+  background-image: url('ico-arrow-right.svg');
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: 42px 42px;
+  border: none;
+}
+
+::-moz-range-thumb {
+  width: 46px; 
+  height: 46px; 
+  border-radius: 50%;
+  background-color: var(--clr-white); 
+  cursor: pointer;
+  background-image: url('ico-arrow-right.svg');
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: 42px 42px;
+  border: none;
+}
+
 .icon__container {
   position: absolute;
   z-index: -1;
@@ -356,7 +422,7 @@ ul.card__stack {
   & img {
     display: block;
     width: 100%;
-    aspect-ratio: 0.754545454545455;    
+    aspect-ratio: 0.731818181818182;    
     height: auto;
     border-radius: 8px;
   }
@@ -460,7 +526,7 @@ ul.card__stack {
     margin-bottom: 40px;
     
     & img {
-      aspect-ratio: 0.754545454545455;    
+      aspect-ratio: 0.725;    
     }
   }
 

app/javascript/application.js

@@ -1,4 +1,3 @@
-
 // Choose language confirmation button
 document.querySelectorAll('#confirm_btn').forEach((confirm_btn) => {
   confirm_btn.addEventListener('click', (e) => {    
@@ -7,19 +6,73 @@ document.querySelectorAll('#confirm_btn').forEach((confirm_btn) => {
 })
 
 // Copy link to clipboard
-document.querySelectorAll('[data-share-url]').forEach((share_btn) => {
-  
-  share_btn.addEventListener('click', (e) => {    
-    
+document.querySelectorAll('[data-share-url]').forEach((share_btn) => {  
+  share_btn.addEventListener('click', (e) => {        
     navigator.clipboard.writeText(e.currentTarget.getAttribute('data-share-url'))
     alert('URL copied to clipboard!')
   })
 })
 
-
 // Open all external links in ny tab
 for (const link of document.links) {
   if (link.hostname.replace(/^www\./i, "") != window.location.hostname.replace(/^www\./i, "") && (link.protocol == 'https:' || link.protocol == 'http:'))
     link.target = '_blank'
 }
 
+
+const input_range = document.getElementsByClassName('reveal')[0]
+const max_value = 200
+const speed = 12
+
+var curr_value
+var raf_id
+
+if (input_range) {
+  input_range.min = 0;
+  input_range.max = max_value;
+}
+    
+function unlockStartHandler() {
+  window.cancelAnimationFrame(raf_id);    
+  curr_value = +this.value;
+}
+
+function unlockEndHandler() {    
+  curr_value = +this.value;
+    
+  if (curr_value >= this.max) {
+    alert('Unlocked');
+    
+    // reset 
+    this.value = 0;
+    this.closest('.reveal__container').style.setProperty('--opacity', 1);
+  } else {
+    raf_id = window.requestAnimationFrame(animateHandler);
+  }
+}
+
+// handle range animation
+function animateHandler() {
+    
+  input_range.value = curr_value;
+  input_range.closest('.reveal__container').style.setProperty('--opacity', 1 - (input_range.value/input_range.max));
+  
+  // continue?
+  if (curr_value > -1) {
+    window.requestAnimationFrame(animateHandler);   
+  }
+  
+  // decrement
+  curr_value = curr_value - speed;
+}
+
+if (input_range) {
+  input_range.addEventListener('mousedown', unlockStartHandler, false)
+  input_range.addEventListener('mousestart', unlockStartHandler, false)
+  input_range.addEventListener('mouseup', unlockEndHandler, false)
+  input_range.addEventListener('touchend', unlockEndHandler, false)
+
+  input_range.addEventListener("input", (e) => {
+    e.currentTarget.closest('.reveal__container').style.setProperty('--opacity', 1 - (e.currentTarget.value/e.currentTarget.max))
+  }) 
+}

app/views/site/tmpl_article.html.erb

@@ -10,8 +10,13 @@
       <% asset = attachment.asset %>
       
       <%= tag.figure class: 'link__image' do %>
-        <%= image_tag rails_storage_proxy_url(asset.file.variant(resize_to_fill: [355,440])),
-                          alt: asset.title,                          
+        <%= image_tag rails_storage_proxy_url(asset.file.variant(resize_to_fill: [334,456])),
+                          alt: asset.title,
+                          srcset: "
+                            #{rails_storage_proxy_url(asset.file.variant(resize_to_fill: [668,913]))} 668w,
+                            #{rails_storage_proxy_url(asset.file.variant(resize_to_fill: [1002,1369]))} 1002w
+                          ",
+                          sizes: "",
                           loading: 'lazy' if asset&.file&.image? %>
       <% end %>
     

app/views/site/tmpl_list.html.erb

@@ -18,13 +18,13 @@
 
   <ul class="cards__ctas">
     <li>
-      <button type="button" class="button__base" data-share-url="<%= root_url %>">
-        <%= t 'Drag to reveal' %>
-      </button>
+      <div class="reveal__container" data-label="<%= t 'drag_to_reveal' %>">
+        <input type="range" value="0" class="reveal">
+      </div>
     </li>
     <li>
-      <button type="button" class="button__base button__base-light" data-share-url="<%= root_url %>">
-        <%= t 'Shuffle cards' %>
+      <button type="button" class="button__base button__base-light">
+        <%= t 'shuffle_cards' %>
       </button>
     </li>
   </ul>