hero09-2023

css/main.css

@@ -1,7 +1,7 @@
 :root {
   --body-bg-color: #f5f5f7;
   --body-color: black;
-  --bg-presentation: #222222;
+  --bg-presentation: rgb(34 34 34 / 67%);
   --bg-coffee: #665547;
   --max-width: 1024px;
 }
@@ -177,12 +177,12 @@ section.header {
 }
 
 .no-webp section.header {
-  background-image: url(../img/queyras_flip_1200.jpg);
+  background-image: url(../img/hero.jpg);
 }
 
 .presentation {
   height: 100%;
-  background-image: linear-gradient(90deg, var(--bg-presentation), transparent 75%);
+  background-image: linear-gradient(90deg, var(--bg-presentation), transparent 50%);
   color: white;
   padding-top: calc(2 * var(--navbar-height));
   box-sizing: border-box;

index.html

@@ -165,9 +165,10 @@ <h2>Who's watching?</h2>
                   <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve" > <metadata>Svg Vector Icons : http://www.onlinewebfonts.com/icon</metadata><g><path d="M720.1,990L237.8,507.7c-15.3-15.3-15.3-38.3,0-53.6L720.1,10l53.6,53.6L318.2,480.9l455.5,455.5L720.1,990z"/></g></svg>
                   <span>back</span>
                 </label>
+                <label for="right" class="btn-action hidden" tabindex="0" data-swipe="right"> &nbsp; </label>
               </div>
             </nav>
-            <section class="header" id="🏡" data-bg="../img/queyras_flip_1200.webp">
+            <section class="header" id="🏡" data-bg="../img/hero.webp">
               <div class="presentation">
                 <div class="container">
                   <div class="tadam">
@@ -340,7 +341,7 @@ <h2>Cheers!</h2>
           <div class="cube-content">
             <h2>Hello World 🐱‍🐉</h2>
             <div class="users">
-              <label for="front" class="btn-action hidden" tabindex="0">
+              <label for="front" class="btn-action hidden" tabindex="0" data-swipe="left">
                 <div class="users-avatar">👈</div>
                 left
               </label>

js/main.js

@@ -146,11 +146,19 @@ readData = function (data, target) {
         item.media$thumbnail = {
           url: tmp.querySelectorAll("img")[0].src.replace("s72", "s300").replace("http://", "https://"),
         };
+
+        // if (target === "#blog-wallpaper" && index === 0) {
+        //   const heroWallpaper = tmp.querySelectorAll("img")[0].src;
+        //   // document.getElementById("🏡").setAttribute = ("data-bg", `url('${heroWallpaper}')`);
+        //   document.getElementById("🏡").style.backgroundImage = `url('${heroWallpaper}')`;
+        //   console.log("1", heroWallpaper);
+        // }
       }
-    } else {
-      // increase img size & ensure HTTPS
-      item.media$thumbnail.url = item.media$thumbnail.url.replace("s72", "s300").replace("http://", "https://");
     }
+
+    // increase img size & ensure HTTPS
+    item.media$thumbnail.url = item.media$thumbnail.url.replace("s72", "s300").replace("http://", "https://");
+
     item.index = index;
     item.id = target.replace("#", "") + "_" + item.id.$t.replace("tag:blogger.com,1999:", "").replace(/\./g, "-");
     document.querySelector(target).innerHTML += eval("`" + template + "`");