Re-implemented design via iro-design

1 files changed, 22 insertions, 24 deletions

diff --git a/templates/base.html b/templates/base.html
index 4d0be21..be796de 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -75,41 +75,39 @@ ${layouts/page()}
     </main>
 
     <footer class="c-footer">
-        <div class="l-container l-container--pad-y u-pb0" aria-hidden="true">
-            <pre class="c-footer__ascii u-dn@sm-lo">${partials/ascii_fox()}</pre>
-            <pre class="c-footer__ascii u-dn@sm-hi">${partials/ascii_fox_small()}</pre>
+        <div class="l-container l-container--pad-y u-pb-0" aria-hidden="true">
+            <pre class="c-footer__ascii u-d-none@sm-lo">${partials/ascii_fox()}</pre>
+            <pre class="c-footer__ascii u-d-none@sm-hi">${partials/ascii_fox_small()}</pre>
         </div>
     </footer>
 
-    <div class="c-lightbox">
-        <div class="c-lightbox__bg"></div>
-
-        <div class="c-lightbox__infobar">
-            <div class="o-badge c-lightbox__count"></div>
-
-            <button class="c-lightbox__close">
-                <svg class="c-card__block o-icon" width="1em" height="1em" aria-hidden="true">
+    <div class="o-backdrop js-lightbox u-d-none t-dark">
+        <div class="o-lightbox">
+            <button class="o-lightbox__close-btn o-action-button o-action-button--quiet o-action-button--round">
+                <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
                     <use href="/symbols.svg#icon-x"></use>
                 </svg>
             </button>
-        </div>
 
-        <button class="c-lightbox__prev">
-            <svg class="c-card__block o-icon" width="1em" height="1em" aria-hidden="true">
-                <use href="/symbols.svg#icon-chevron-left"></use>
-            </svg>
-        </button>
+            <img class="o-lightbox__img" />
 
-        <button class="c-lightbox__next">
-            <svg class="c-card__block o-icon" width="1em" height="1em" aria-hidden="true">
-                <use href="/symbols.svg#icon-chevron-right"></use>
-            </svg>
-        </button>
+            <button class="o-lightbox__prev-btn o-action-button o-action-button--quiet o-action-button--round">
+                <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
+                    <use href="/symbols.svg#icon-chevron-left"></use>
+                </svg>
+            </button>
 
-        <img class="c-lightbox__img" />
+            <button class="o-lightbox__next-btn o-action-button o-action-button--quiet o-action-button--round">
+                <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
+                    <use href="/symbols.svg#icon-chevron-right"></use>
+                </svg>
+            </button>
+
+            <footer class="o-lightbox__footer"></footer>
+        </div>
     </div>
 
-    <script src="/lightbox.js"></script>
+    <script src="/main.js"></script>
     <!--script src="/snow.js"></script-->
 </body>