added slider and banner to template (#56)

* fixed css dashed for visited links * updated css visited rul * removed terminal css * updated css for single.html * fixed css dashed for visited links * updated css vsited rul * revert changes * updated margins and css * updated show and tell article
decentralized-identity · Feb 5, 2025 · 431563e · 431563e
1 parent 7885011
commit 431563e
Show file tree

Hide file tree

Showing 4 changed files with 180 additions and 16 deletions.
diff --git a/website/content/posts/beta_cohort_show_and_tell.md b/website/content/posts/beta_cohort_show_and_tell.md
@@ -1,15 +1,18 @@
 +++
 date = '2025-01-21T04:05:05-08:00'
 draft = false
-title = 'DIF Labs: Show and Tell Event – February 18, 2025'
-summary = 'Join us for the show and tell for the DIF Labs first cohort on February 18'
+title = 'DIF Labs: Show and Tell – 02/18/2025'
+summary = '3 Projects of the DIF Labs Beta Cohort Showcase Their Work For The Last 3 Months'
 tags = ["show and tell", "beta-cohort"]
+banner = "/imgs/matrix_01.jpg"
+toc = false
 +++
 
-## Event Details
+## Details 
+
 - **Date**: February 18, 2025  
 - **Time**: 11:00 AM ET  
-- **Meeting Link**: [Join the Event on Zoom](https://zoom.us/j/1234567890)
+- **[Click To Listen In!](https://www.eventbrite.com/e/1235049027889?aff=oddtdtcreator)**
 
 ---
 
@@ -23,7 +26,7 @@ The **DIF Labs Show and Tell** is the culmination of this journey—a chance to
 progress made during the cohort. This is your opportunity to see these projects in action, engage with their creators,
 and contribute to the vibrant ecosystem of decentralized identity.
 
-Please join us on Februrary 18 to hear from these projects and learn more about what they've accomplished.
+Please join us on **[Februrary 18]((https://www.eventbrite.com/e/1235049027889?aff=oddtdtcreator))** to hear from these projects and learn more about what they've accomplished.
 
 ---
 
@@ -43,13 +46,15 @@ Please join us on Februrary 18 to hear from these projects and learn more about
 - **Engage with Builders**: Learn directly from the project leads and provide valuable feedback.  
 - **Connect**: Network with industry leaders and innovators driving the future of identity.  
 
----
 
-## Signup for the Next Round or More Information
+<h2 class="pulse">
+ Signup for the Next Round or More Information
+</h2>
 
 As the Beta program concludes, DIF Labs is gearing up for its next cohort. If you’re a builder, startup, or innovator
 passionate about decentralized identity, now is the time to get involved.
 
+- **[Click To Listen In!](https://www.eventbrite.com/e/1235049027889?aff=oddtdtcreator)**
 - **Signup for the Next Cohort**: [Apply Here](https://forms.gle/c8gyHmqm14UPRGrd6)  
 - **Learn More About DIF Labs**: [Explore Here](https://identity.foundation/labs)  
 - **Join DIF Labs Discord**: [Join Here](https://discord.gg/972yqVmD)  

diff --git a/website/static/data/directory.json b/website/static/data/directory.json
@@ -34,7 +34,7 @@
             "name": "Matthew McKinney",
             "role": "Full stack marketing leader | GTM | Partnerships | startup advisor | B2B/B2C | AI + Blockchain | Head of Growth @ ArcBlock",
             "img": "/data/profiles/matthew_mckinney.jpg",
-            "profile_url": "https://www.linkedin.com/in/matthew-mckinney/"
+            "profile_url": "http://www.linkedin.com/in/mtmckinney"
         },
         {
             "name": "Nik Graf",

diff --git a/website/themes/diflabs/assets/css/main.css b/website/themes/diflabs/assets/css/main.css
@@ -57,7 +57,6 @@ nav a:hover {
     text-align: center;
     padding: 60px 20px;
     margin: 20px 0;
-    border: 1px dashed #00FF00;
 }
 
 .container {
@@ -201,11 +200,10 @@ footer {
 a {
     color: #66FF66; /* Change link color to light green */
     text-decoration: none;
-    border-bottom: 2px dashed #66FF66; /* Add dashed underline */
 }
 
 a:visited {
-    color: #ADD8E6; /* Change visited link color to yellow */
+    color: #00BF00; /* Change visited link color to yellow */
     border-bottom: 2px dashed #4F7942; /* Change underline color for visited links */
 }
 
@@ -214,6 +212,10 @@ a:hover {
     border-bottom: 2px dashed #98FB98; /* Change underline color on hover */
 }
 
+a:hover {
+    color: #66FF66;; /* Change hover color to yellow */
+}
+
 nav a:hover {
     color: #FFCC00;
 }
@@ -283,4 +285,3 @@ table {
      border: green solid 2px;
    }
 }
-
diff --git a/website/themes/diflabs/layouts/_default/single.html b/website/themes/diflabs/layouts/_default/single.html
@@ -5,12 +5,79 @@
       line-height: 1.6;
     }
 
+    /* Progress track container -- always visible */
+    #progress-track {
+      position: fixed;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 30px;  /* thicker track */
+      background: #141414; /* dark gray track */
+      margin-left: 5px; /* remove default margin */
+      margin-right: 5px; /* remove default margin */
+      z-index: 1000;
+    }
+
+    /* A duration element to show total reading time at the top */
+    #duration {
+      position: absolute;
+      left: 50%;
+      top: 0;
+      transform: translateX(-50%);
+      font-size: 1rem;
+      color: #00ff00;
+      line-height: 30px;
+    }
+
+    /* The slider handle that indicates current progress.
+       It will display the remaining time inside it. */
+    #slider {
+      position: absolute;
+      width: 50px;
+      height: 30px;
+      background: #00ff00;  /* green slider */
+      border-radius: 5px;
+      box-shadow: 0 0 4px rgba(0,0,0,0.3);
+      display: none; /* hidden at the very top */
+      text-align: center;
+      line-height: 30px;
+      color: #141414;
+      font-weight: bold;
+      font-size: 0.9rem;
+    }
+
+    /* Passed time indicator (right side) */
+    #time-right {
+      position: fixed;
+      right: 10px;
+      top: 0;
+      font-size: 1rem;
+      color: #00ff00;
+      line-height: 30px;
+      z-index: 1001;
+      display: none;
+    }
+
+    /* Banner styles */
+    .banner {
+      width: 100%; /* full width relative to the content wrapper */
+      height: 300px; /* visible container height */
+      background-attachment: fixed; /* parallax effect */
+      background-position: center;
+      background-repeat: no-repeat;
+      /* Ensure the background image is larger than container for parallax */
+      background-size: 100% 800px;
+      margin-bottom: 1.5rem;
+      border-radius: 8px;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    }
+
     .content-wrapper {
       max-width: 800px;
       margin: 2rem auto;
       padding: 1.5rem;
       border-radius: 8px;
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     }
 
     h1 {
@@ -37,7 +104,7 @@
 
     .tags span {
       display: inline-block;
-      background: #007BFF; /* Primary blue for tags */
+      background: #007BFF;
       color: #00ff00;
       font-size: 0.9rem;
       padding: 0.3rem 0.6rem;
@@ -47,19 +114,45 @@
     }
 
     .tags span:hover {
-      background: #0056b3; /* Slightly darker blue on hover */
+      background: #0056b3;
+    }
+
+    /* Pulse class for call-to-action text */
+    .pulse {
+      animation: pulse 4s infinite;
+    }
+    @keyframes pulse {
+      0% { opacity: 1; transform: scale(1); }
+      50% { opacity: 1; transform: scale(1.05); }
+      100% { opacity: 1; transform: scale(1); }
     }
   </style>
 
+  <!-- Progress Indicator Elements -->
+  <div id="progress-track">
+    <!-- At the top (scrollTop==0), show the total duration here -->
+    <div id="duration"></div>
+    <!-- The slider will slide along the track (only when scrolling) -->
+    <div id="slider"></div>
+  </div>
+  <!-- Passed time indicator appears on the right of the track when scrolling -->
+  <div id="time-right"></div>
+
+  <!-- Main content -->
   <div class="content-wrapper">
+    {{ with .Params.banner }}
+      <div class="banner" style="background-image: url('{{ . }}');"></div>
+    {{ end }}
 
     <h1>{{ .Title }}</h1>
 
     {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
     {{ $dateHuman := .Date | time.Format ":date_long" }}
     <time datetime="{{ $dateMachine }}">{{ $dateHuman }}</time>
 
-    <div class="toc">{{ .TableOfContents }}</div>
+    {{ with .Params.toc }} 
+      <div class="toc">{{ .TableOfContents }}</div>
+    {{ end }}
 
     <div class="content">
       {{ .Content }}
@@ -69,4 +162,69 @@ <h1>{{ .Title }}</h1>
       {{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }}
     </div>
   </div>
+
+  <script>
+    document.addEventListener("DOMContentLoaded", function() {
+      const progressTrack = document.getElementById('progress-track');
+      const slider = document.getElementById('slider');
+      const durationElem = document.getElementById('duration');
+      const timeRightElem = document.getElementById('time-right');
+      const contentElem = document.querySelector('.content');
+
+      // Calculate estimated total reading time in seconds (assuming 200 wpm)
+      let totalWords = 0;
+      if (contentElem) {
+        totalWords = contentElem.innerText.trim().split(/\s+/).length;
+      }
+      const totalReadingTime = (totalWords / 200) * 60;  // seconds
+
+      // Format seconds as "Xm Ys"
+      function formatTime(sec) {
+        sec = Math.max(0, sec);
+        const minutes = Math.floor(sec / 60);
+        const seconds = Math.floor(sec % 60);
+        return minutes + "m " + seconds + "s";
+      }
+
+      // At page load (scrollTop == 0), show the full duration in the center of the track
+      durationElem.innerText = "Duration: " + formatTime(totalReadingTime);
+
+      function updateProgress() {
+        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+        const docHeight = document.documentElement.scrollHeight - window.innerHeight;
+        const scrollFraction = (docHeight > 0) ? scrollTop / docHeight : 0;
+        const trackWidth = progressTrack.offsetWidth;
+
+        if (scrollTop === 0) {
+          // At the very top: show the duration element; hide the slider and passed time
+          slider.style.display = "none";
+          durationElem.style.display = "block";
+          timeRightElem.style.display = "none";
+        } else {
+          // When scrolling: hide the central duration, show the slider and passed time
+          durationElem.style.display = "none";
+          slider.style.display = "block";
+          timeRightElem.style.display = "block";
+
+          // Position the slider along the track
+          // (subtract half the slider width so its center aligns with the progress)
+          const sliderLeft = scrollFraction * trackWidth - slider.offsetWidth / 2;
+          slider.style.left = sliderLeft + "px";
+
+          // Calculate the remaining and passed reading times
+          const timePassed = totalReadingTime * scrollFraction;
+          const timeRemaining = totalReadingTime - timePassed;
+
+          // Set the slider’s text to show the remaining time (centered inside it)
+          slider.innerText = formatTime(timeRemaining);
+          // Set the passed time on the right
+          timeRightElem.innerText = "Passed: " + formatTime(timePassed);
+        }
+      }
+
+      window.addEventListener('scroll', updateProgress);
+      window.addEventListener('resize', updateProgress);
+      updateProgress();
+    });
+  </script>
 {{ end }}