feat: 💄 Migrate license info to css-shown-popup

2 files changed, 74 insertions, 13 deletions

diff --git a/talermerchantdemos/static/blog.css b/talermerchantdemos/static/blog.css
index e226ecd..63959fe 100644
--- a/talermerchantdemos/static/blog.css
+++ b/talermerchantdemos/static/blog.css
@@ -22,6 +22,62 @@
   color: var(--link-colour, var(--default-link-colour, black));
 }
 
+/* Licensing Information */
+.essay-shop-title {
+  display: inline-block;
+}
+.fsfs-license {
+  /* by default, hide it until users interact with it */
+  display: none;
+  /* when shown, it should stay at a fixed position on screen */
+  position: fixed;
+  /* Center it on screen */
+  top: 50vh;
+  left: 50vw;
+  transform: translate(-50%,-50%);
+  /* Set Minimum Size Requirements */
+  min-width: 50vw;
+  min-height: 20vh;
+  /* Padding */
+  padding: 25px 25px;
+  /* Border Rounding */
+  border-radius: 25px;
+  /* Always On-Top */
+  z-index: 500000;
+  /* Background */
+  background: #1a1a1a33;
+  backdrop-filter: blur(8px) brightness(0.7);
+  /* Cursor */
+  cursor: text;
+  /* Interactions */
+  pointer-events: visibleStroke;
+}
+.info-icon::before {
+  content: ' ';
+  /* Size & Positioning */
+  display: inline-block;
+  width: 1.2em;
+  height: 1.2em;
+  margin-right: 5px;
+  /* Set Icon */
+  background-image: url(/static/noun-info-2691045.svg);
+  /* Ensure Icon is rendered correctly */
+  background-size: contain;
+  background-position: center center;
+  background-repeat: no-repeat;
+  /* Invert it by default unless otherwise specified */
+  filter: var(--license-info-icon-filter, invert());
+  /* Use Pointer Cursor */
+  cursor: pointer;
+}
+.info-icon:active > .fsfs-license,
+.info-icon:focus > .fsfs-license,
+.info-icon:focus-within > .fsfs-license,
+.fsfs-license:focus,
+.fsfs-license:focus-within {
+  display: block;
+}
+
 /* Pay Icon */
 .payLink > .icon::before {
   content: '​'; /* Blank = CSS Won't render, which is why we put a Zero-Width-Space */
diff --git a/talermerchantdemos/templates/blog-index.html.j2 b/talermerchantdemos/templates/blog-index.html.j2
index 7c69b12..f556198 100644
--- a/talermerchantdemos/templates/blog-index.html.j2
+++ b/talermerchantdemos/templates/blog-index.html.j2
@@ -1,19 +1,24 @@
 {% extends "blog-base.html.j2" %}
 {% block main %}
-    <h2>{{ gettext("Essay Shop: Free Software, Free Society") }} </h2>
-    <div style="font-size: smaller;">
-      <p>{{ gettext("This is the latest edition of <cite>Free Software, Free Society: Selected Essays of Richard M. Stallman.</cite>") }} <br>
-      Free Software Foundation<br>
-      51 Franklin Street, Fifth Floor<br>
-      Boston, MA 02110-1335
-      <br>
-      Copyright &copy; 2002, 2010 Free Software Foundation, Inc.
-      </p>
+    <h2 class="essay-shop-title">{{ gettext("Essay Shop: Free Software, Free Society") }} </h2>
+    <a href="#" class="info-icon">
+      &ZeroWidthSpace;
+      <div style="font-size: smaller;" class="fsfs-license">
+        <p>{{ gettext("This is the latest edition of <cite>Free Software, Free Society: Selected Essays of Richard M. Stallman.</cite>") }} <br>
+        Free Software Foundation<br>
+        51 Franklin Street, Fifth Floor<br>
+        Boston, MA 02110-1335
+        <br>
+        Copyright &copy; 2002, 2010 Free Software Foundation, Inc.
+        </p>
 
-      <p>{{ gettext("Verbatim copying and distribution of this entire book are permitted worldwide, without royalty, in any medium, provided this notice is preserved. Permission is granted to copy and distribute translations of this book from the original English into another language provided the translation has been approved by the Free Software Foundation and the copyright notice and this permission notice are preserved on all copies.") }}
-      </p>
-      <p>ISBN 978-0-9831592-0-9</p>
-    </div>
+        <p>{{ gettext("Verbatim copying and distribution of this entire book are permitted worldwide, without royalty, in any medium, provided this notice is preserved. Permission is granted to copy and distribute translations of this book from the original English into another language provided the translation has been approved by the Free Software Foundation and the copyright notice and this permission notice are preserved on all copies.") }}
+        </p>
+        <p>ISBN 978-0-9831592-0-9</p>
+
+        <p>Tap outside of this box to hide</p>
+      </div>
+    </a>
 
     <h2>{{ gettext("Chapters") }} </h2>
     <div>