elections2021: Move countdown to top

elections2021/templates/elections2021/elections2021_home_page.html

@@ -21,6 +21,39 @@
 {% block content %}
 
 <div class="container container--default">
+
+  {% if page.elections_date %}
+    <section class="my-16 container-padding--zero lg:container-padding--auto">
+      <aside class="bg-black text-white px-4 py-12 lg:py-16 lg:px-24 ">
+        <div class="flex flex-col lg:flex-row items-center">
+          <h1 class="head-alt-md md:head-alt-xl flex-grow text-center lg:text-left mb-8 lg:mb-0">Do voleb<br>nám zbývá</h1>
+          <div class="__js-root ">
+            <div class="flip-clock">
+              <span id="flip-card-days-6" class="flip-clock__piece flip">
+                <span class="flip-clock__card flip-card text-6xl md:text-7xl lg:text-9xl">
+                  <b class="flip-card__top">{{ countdown_days }}</b>
+                  <b data-value="{{ countdown_days }}" class="flip-card__bottom"></b>
+                  <b data-value="00" class="flip-card__back"></b>
+                  <b data-value="00" class="flip-card__back-bottom"></b>
+                </span>
+                <span class="flip-clock__slot font-alt text-2xl md:text-3xl lg:text-4xl">Dní</span>
+              </span>
+              <span id="flip-card-hours-6" class="flip-clock__piece flip">
+                <span class="flip-clock__card flip-card text-6xl md:text-7xl lg:text-9xl">
+                  <b class="flip-card__top">{{ countdown_hours }}</b>
+                  <b data-value="{{ countdown_hours }}" class="flip-card__bottom"></b>
+                  <b data-value="00" class="flip-card__back"></b>
+                  <b data-value="00" class="flip-card__back-bottom"></b>
+                </span>
+                <span class="flip-clock__slot font-alt text-2xl md:text-3xl lg:text-4xl">Hod</span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </aside>
+    </section>
+  {% endif %}
+
   <section>
     <h1 class="head-alt-md pb-4 lg:pb-8 mt-10 md:mt-8">Aktuality</h1>
     <div class="article-card-list grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-8">
@@ -134,38 +167,6 @@
   </section>
   {% endif %}
 
-  {% if page.elections_date %}
-    <section class="my-16 lg:my-28 container-padding--zero lg:container-padding--auto">
-      <aside class="bg-black text-white px-4 py-12 lg:py-16 lg:px-24 ">
-        <div class="flex flex-col lg:flex-row items-center">
-          <h1 class="head-alt-md md:head-alt-xl flex-grow text-center lg:text-left mb-8 lg:mb-0">Do voleb<br>nám zbývá</h1>
-          <div class="__js-root ">
-            <div class="flip-clock">
-              <span id="flip-card-days-6" class="flip-clock__piece flip">
-                <span class="flip-clock__card flip-card text-6xl md:text-7xl lg:text-9xl">
-                  <b class="flip-card__top">{{ countdown_days }}</b>
-                  <b data-value="{{ countdown_days }}" class="flip-card__bottom"></b>
-                  <b data-value="00" class="flip-card__back"></b>
-                  <b data-value="00" class="flip-card__back-bottom"></b>
-                </span>
-                <span class="flip-clock__slot font-alt text-2xl md:text-3xl lg:text-4xl">Dní</span>
-              </span>
-              <span id="flip-card-hours-6" class="flip-clock__piece flip">
-                <span class="flip-clock__card flip-card text-6xl md:text-7xl lg:text-9xl">
-                  <b class="flip-card__top">{{ countdown_hours }}</b>
-                  <b data-value="{{ countdown_hours }}" class="flip-card__bottom"></b>
-                  <b data-value="00" class="flip-card__back"></b>
-                  <b data-value="00" class="flip-card__back-bottom"></b>
-                </span>
-                <span class="flip-clock__slot font-alt text-2xl md:text-3xl lg:text-4xl">Hod</span>
-              </span>
-            </div>
-          </div>
-        </div>
-      </aside>
-    </section>
-  {% endif %}
-
   {% if questions %}
     <section>
       <h1 class="head-alt-md pb-4 lg:pb-8 mt-10 md:mt-24">Často kladené otázky</h1>