1 files changed, 56 insertions, 0 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 */