From b81eae6d50484f1f515e045f8e9eca85c54203b5 Mon Sep 17 00:00:00 2001
From: zoe1 <zoe@fsf.org>
Date: Tue, 1 Feb 2022 18:47:23 +0100
Subject: [PATCH] test for timer

---
 2022/assets/css/custom.css | 51 ++++++++++++++++++++++++++++++++++++++
 2022/includes/banner.html  | 12 ++++++++-
 2 files changed, 62 insertions(+), 1 deletion(-)

diff --git a/2022/assets/css/custom.css b/2022/assets/css/custom.css
index 58694b7b..0c8746d5 100644
--- a/2022/assets/css/custom.css
+++ b/2022/assets/css/custom.css
@@ -653,6 +653,57 @@ hr {
 	color: #FFFFFF;
 }
 
+/* timer */
+.lp-timer {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  align-items: center;
+  display: flex;
+  
+}
+
+.timer-container {
+  color: #333;
+  margin: 0 auto;
+  text-align: center;
+}
+
+#h1 {
+  font-weight: normal;
+  letter-spacing: .125rem;
+  text-transform: uppercase;
+}
+
+#li {
+  display: inline-block;
+  font-size: 1.5em;
+  list-style-type: none;
+  padding: 1em;
+  text-transform: uppercase;
+}
+
+#li span {
+  display: block;
+  font-size: 4.5rem;
+}
+
+@media all and (max-width: 768px) {
+  h1 {
+    font-size: calc(1.5rem * var(--smaller));
+  }
+  
+  li {
+    font-size: calc(1.125rem * var(--smaller));
+  }
+  
+  li span {
+    font-size: calc(3.375rem * var(--smaller));
+  }
+}
+
+/* end timer */
+
 .lp-signup {
   margin-right: 10px;
   margin-left: 10px;
diff --git a/2022/includes/banner.html b/2022/includes/banner.html
index d03214f4..d913068b 100644
--- a/2022/includes/banner.html
+++ b/2022/includes/banner.html
@@ -33,8 +33,18 @@
                           <!-- #top-right-desktop start -->
                           <!--#include virtual="/2022/includes/join-list.html"-->
                           <!-- #top-right-desktop end -->
+            <div class="container">
+             <h1 id="headline">Countdown to LibrePlanet</h1>
+              <div id="countdown">
+               <ul>
+                <li><span id="days"></span>days</li>
+                <li><span id="hours"></span>Hours</li>
+                <li><span id="minutes"></span>Minutes</li>
+                <li><span id="seconds"></span>Seconds</li>
+               </ul>
+              </div>
+            </div>
 			</div><!-- end of lp header -->
-
 		  </div>
 		</div> <!-- end of header container -->
       </div> <!-- end of lp banner -->
-- 
2.25.1