Added Countdown for DMA on home page

src/_data/contributors.json

@@ -227,7 +227,7 @@
     "countries": ["Brazil🇧🇷", "France🇫🇷"],
     "avatar": "gericci.jpg",
     "what": "Web Designer and front-end developer, working for an accessible web",
-    "mastodon": "https://mastodon.social/@gericci/",
+    "mastodon": "https://indieweb.social/@gericci",
     "github": "https://github.com/gericci",
     "website": "https://gericci.me/"
   },

src/_includes/partials/aside.njk

@@ -1,11 +1,12 @@
 
 {% block aside %}
   <aside>
+  {% include "partials/dma-countdown.njk" %}
   {% if permalink != '/blog/' %}
     <div class="blog">
       <h2>Recent updates</h2>
       {% include "partials/post-list.njk" %}
-      <p><a href="/blog">Read more news</a></p>
+      <p><a href="/blog" class="action-button">Read more news</a></p>
     </div>
     {% endif %}
     {% include "partials/promo.njk" %}

src/_includes/partials/dma-countdown.njk

@@ -0,0 +1,73 @@
+<div class="dma-countdown">
+  <h2>Digital Markets Act Countdown</h2>
+  <p id="deadline">The deadline is March 6</p>
+  <div class="timer">
+    <p id="dayCd">
+      <span id="remaining-days">00</span> days
+    </p>
+    <p id="timeCd">
+      <span id="remaining-hours">
+        00
+      </span>h:<span id="remaining-mins">
+        00
+      </span>m:<span id="remaining-secs">
+        00
+      </span>s
+    </p>
+  </div>
+  <p><a href="">Read more about the Digital Markets Act</a></p>
+</div>
+
+
+<script>
+  const noscript = document.getElementById('deadline');
+  const deadline = '2024-03-06';
+  const timer = document.querySelector('div.timer');
+  const dayCd = document.getElementById('dayCd');
+  const timeCd = document.getElementById('timeCd');
+  const cdDays = document.getElementById('remaining-days');
+  const cdHours = document.getElementById('remaining-hours');
+  const cdMins = document.getElementById('remaining-mins');
+  const cdSecs = document.getElementById('remaining-secs');
+
+  // If Js on
+  noscript.style.display = "none";
+  timer.style.display = "flex";
+
+  function countDown(endtime) {
+    const total = Date.parse(endtime) - Date.parse(new Date());
+    const seconds = Math.floor((total / 1000) % 60);
+    const minutes = Math.floor( (total/1000/60) % 60 );
+    const hours = Math.floor( (total/(1000*60*60)) % 24 );
+    const days = Math.floor( total/(1000*60*60*24) );
+
+    cdDays.innerText = days;
+    cdHours.innerText = ('0' + hours).slice(-2);
+    cdMins.innerText = ('0' + minutes).slice(-2);
+    cdSecs.innerText = ('0' + seconds).slice(-2);
+
+    return {
+      days,
+      hours,
+      minutes,
+      seconds
+    };
+  }
+
+  function initializeClock(endtime) {
+    countDown(endtime);
+    const timeinterval = setInterval(() => {
+      const t = countDown(endtime);
+
+      if (t.days <= 0) {
+        dayCd.style.display = "none";
+      }
+
+      if (t.total <= 0) {
+        clearInterval(timeinterval);
+      }
+    },1000);
+  }
+
+  initializeClock(deadline);
+</script>

src/css/main.css

@@ -414,6 +414,8 @@ aside h3 {
   line-height: 1.1;
 }
 
+aside div.blog {margin-top: 0;}
+
 div.promo {
   display: flex;
   gap: 1rem 0;
@@ -799,6 +801,42 @@ div.contact-entry {
   padding: 0 1.5rem;
 }
 
+/* DMA Countdown blockquote*/
+
+div.dma-countdown {
+  color: var(--text-inv);
+  background-color: var(--main-color);
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+div.dma-countdown h2 {
+  font-size: 1.7em;
+  line-height: 1.2;
+  text-transform: initial;
+}
+#deadline {font-size: 1.3em;}
+
+div.timer {
+  --flow-space: 1.5rem;
+  display: none;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: calc(95% + 1.5rem);
+  color: var(--body-text);
+  background-color: var(--main-light);
+  padding: 1.5rem;
+}
+
+#timeCd {font-size: 1.5em;}
+#main-home p#dayCd {
+  font-size: calc(1.5em + 1vw);
+  font-variation-settings: var(--fvs-black);
+  line-height: 1;
+}
+#remaining-days {
+  display: block;
+  font-size: 2em;
+}
 
 
 /* ------------------------  LINKS/LISTS ---------------------------- */
@@ -1027,7 +1065,6 @@ div.prom-banner div:nth-child(4) {
   margin-top: 2rem;
   margin-bottom: 0.5rem;
   display: flex;
-  justify-content: flex-end;
   grid-column: 2 / 2;
   max-width: 30em;
 }

src/css/queries.css

@@ -59,6 +59,15 @@
   }
 }
 
+@media screen and (min-width: 500px) and (max-width: 1300px) {
+  div.timer {
+    flex-direction: row;
+    align-items: center;
+    gap: 3rem;
+  }
+  #timeCd {--flow-space: 0; font-size: 2.5em;}
+}
+
 @media screen and (min-width: 500px) {
   header nav li {
     font-size: 1.2em;
@@ -333,4 +342,12 @@
     font-size: 1.2em;
   }
 
+  aside > div.dma-countdown {
+    display: block;
+  }
+  main > div.dma-countdown {
+    display: none;
+  }
+  div.timer {width: calc(100% + 1.5rem);}
+
 }

src/pages/home.html

@@ -6,6 +6,8 @@
 isHome: true
 ---
 
+{% include "partials/dma-countdown.njk" %}
+
 <p class="home-intro">
   We are a group of software engineers from all over the world who have come together to advocate for the
   <strong>future of the open web</strong> by providing regulators, legislators and policy makers the intricate technical details that they need to understand the major anti-competitive issues in our industry and how to solve them.
@@ -71,34 +73,34 @@ <h2>Our top three priorities</h2>
       <h2>Support us</h2>
       <p>Regulators in the UK, EU, Japan, Australia and the USA have begun investigating Apple's ban
         on third-party browser engines and are considering interventions to enable Web Apps to compete
-        with native. Most significantly, wording to this effect has been included in the EU's 
+        with native. Most significantly, wording to this effect has been included in the EU's
         landmark tech act, the Digital Markets Act.</p>
 
-      <p>This was not inevitable. Over the past two years, Open Web Advocacy has extensively 
-        briefed regulators and legislators about the Web's potential to counterbalance the 
+      <p>This was not inevitable. Over the past two years, Open Web Advocacy has extensively
+        briefed regulators and legislators about the Web's potential to counterbalance the
         mobile app duopoly.</p>
 
-      <p>Almost certainly as a direct result of our advocacy Apple has hired dozens of additional 
+      <p>Almost certainly as a direct result of our advocacy Apple has hired dozens of additional
         staff to work on WebKit and Safari. This extra bandwidth and regulatory pressure has directly contributed
-        to the addition of long-delayed features such as push notifications and app badging for Web Apps. 
+        to the addition of long-delayed features such as push notifications and app badging for Web Apps.
         WebKit staff numbers are secret, but we believe this is a significant percentage increase.</p>
 
       <p><strong>Competition, or at least the threat of it, works.</strong></p>
 
       <p>OWA needs your help to continue applying pressure to restore competition and to make
         universal web apps a reality. You can make a real difference to ensure the future of the
-        web by supporting this work. We rely on donations to challenge unbelievably wealthy 
+        web by supporting this work. We rely on donations to challenge unbelievably wealthy
         gatekeepers who have every incentive to hold the web back.</p>
 
-      <p>You can <a href="/donate">donate</a> or join our community on 
-        <a href="https://discord.com/invite/x53hkqrRKx">Discord</a> to get more deeply involved. Can't spare the 
-        cash or time? Keep up with what we're up to and help spread the word by following us on 
+      <p>You can <a href="/donate">donate</a> or join our community on
+        <a href="https://discord.com/invite/x53hkqrRKx">Discord</a> to get more deeply involved. Can't spare the
+        cash or time? Keep up with what we're up to and help spread the word by following us on
         <a href="https://twitter.com/OpenWebAdvocacy">Twitter</a> and/or <a href="https://mastodon.social/@owa">Mastodon</a>
         .</p>
     </div>
 
     <div class="prom-banner">
-      <p class"illustration"><img src="/images/donate.svg" alt="" /></p>
+      <p class="illustration"><img src="/images/donate.svg" alt="" /></p>
       <p>If you love what we're doing and would like to support our work, please consider
         <a href="https://www.paypal.com/donate/?hosted_button_id=3FD5DUWT4DNBG">making a donation</a> or by getting your company to support us.</p>
       <p>OWA is a registered not-for-profit fighting for the Web against heavily financed gatekeepers
@@ -112,7 +114,8 @@ <h2>Support us</h2>
     </div>
 
     <div class="action-button-row">
-      <a href="/donate/" class="action-button">Read More</a>
+      <a href="/donate/" class="action-button" aria-label="Read more on how to support Owa ">
+        Read More</a>
       <a href="/contributors/" class="action-button">About Us</a>
     </div>
   </div>
@@ -140,3 +143,57 @@ <h2>How can you help?</h2>
 ## Blog Posts
 Here are the most recent posts we have published on our blog:
 -->
+
+
+<script>
+  const noscript = document.getElementById('deadline');
+  const deadline = '2024-03-06';
+  const timer = document.querySelector('div.timer');
+  const dayCd = document.getElementById('dayCd');
+  const timeCd = document.getElementById('timeCd');
+  const cdDays = document.getElementById('remaining-days');
+  const cdHours = document.getElementById('remaining-hours');
+  const cdMins = document.getElementById('remaining-mins');
+  const cdSecs = document.getElementById('remaining-secs');
+
+  // If Js on
+  noscript.style.display = "none";
+  timer.style.display = "flex";
+
+  function countDown(endtime) {
+    const total = Date.parse(endtime) - Date.parse(new Date());
+    const seconds = Math.floor((total / 1000) % 60);
+    const minutes = Math.floor( (total/1000/60) % 60 );
+    const hours = Math.floor( (total/(1000*60*60)) % 24 );
+    const days = Math.floor( total/(1000*60*60*24) );
+
+    cdDays.innerText = days;
+    cdHours.innerText = ('0' + hours).slice(-2);
+    cdMins.innerText = ('0' + minutes).slice(-2);
+    cdSecs.innerText = ('0' + seconds).slice(-2);
+
+    return {
+      days,
+      hours,
+      minutes,
+      seconds
+    };
+  }
+
+  function initializeClock(endtime) {
+    countDown(endtime);
+    const timeinterval = setInterval(() => {
+      const t = countDown(endtime);
+
+      if (t.days <= 0) {
+        dayCd.style.display = "none";
+      }
+
+      if (t.total <= 0) {
+        clearInterval(timeinterval);
+      }
+    },1000);
+  }
+
+  initializeClock(deadline);
+</script>