Update glossary template - style, hover links

Signed-off-by: dhh1128 <[email protected]>
trustoverip · Nov 25, 2021 · 6e33efd · 6e33efd
1 parent 84c0969
commit 6e33efd
Showing 1 changed file with 69 additions and 7 deletions.
diff --git a/.glossary-template.html b/.glossary-template.html
@@ -20,15 +20,20 @@
     background-image: url(https://raw.githubusercontent.com/trustoverip/ctwg/main/logo.png);
     background-repeat: no-repeat;
 }
-
 main {
-    padding: 16px;
+    padding: 16px 24px;
     color: #444;
 }
 
+@media screen and (min-width: 640px) {
+  main {
+      padding: 24px 64px;
+  }
+}
+
 dt {
     margin-top: 1.4em;
-    color: #3061a8;
+    color: #02005f;
     font-size: 125%;
     font-family: Verdana, sans-serif;
 }
@@ -41,6 +46,7 @@
     margin-left: 25%;
     margin-right: 25%;
     margin-top: 2.2em;
+    color: #666;
 }
 
 nav {
@@ -74,10 +80,6 @@
     text-decoration: none;
 }
 
-dt > a {
-    color: #02005f;
-}
-
 a:hover {
     border-bottom: solid 1px #3061a8;
 }
@@ -101,9 +103,69 @@
     margin-top: -0.9em;
 }
 
+._slf {
+    float: left;
+    padding-right: 4px;
+    padding-top: 4px;
+    margin-left: -20px;
+    cursor: pointer;
+    width:16px;
+    height:16px;
+    display: none;
+}
+
+dt:not(.letter):hover > ._slf {
+    display: inline;
+}
+
+._xl {
+    padding-right: 4px;
+    display: none;
+    cursor: pointer;
+    width:16px;
+    height:16px;
+}
+
+dt:not(.letter):hover > ._xl {
+  display: inline;
+}
   </style>
+  <script>
+var getAbsoluteUrl = (function() {
+  var a;
+  return function(url) {
+      if (!a)
+        a = document.createElement('a');
+      a.href = url;
+      return a.href;
+  };
+})();
+
+function copyUrl(url) {
+  x = getAbsoluteUrl(url);
+  navigator.clipboard.writeText(x);
+}
+
+function goto(url) {
+  window.location = url;
+}
+  </script>
 </head>
 <body>
+
+<svg style="display:none">
+  <symbol id="_slf" viewBox="0 0 16 16">
+    <path style="fill:#aaa" fill-rule="evenodd"
+          d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/>
+  </symbol>
+  <symbol id="_xl" viewBox="0 -256 1850 1850">
+    <g transform="matrix(1,0,0,-1,30.372881,1426.9492)">
+      <path style="fill:#aaa"
+            d="M 1408,608 V 288 Q 1408,169 1323.5,84.5 1239,0 1120,0 H 288 Q 169,0 84.5,84.5 0,169 0,288 v 832 Q 0,1239 84.5,1323.5 169,1408 288,1408 h 704 q 14,0 23,-9 9,-9 9,-23 v -64 q 0,-14 -9,-23 -9,-9 -23,-9 H 288 q -66,0 -113,-47 -47,-47 -47,-113 V 288 q 0,-66 47,-113 47,-47 113,-47 h 832 q 66,0 113,47 47,47 47,113 v 320 q 0,14 9,23 9,9 23,9 h 64 q 14,0 23,-9 9,-9 9,-23 z m 384,864 V 960 q 0,-26 -19,-45 -19,-19 -45,-19 -26,0 -45,19 L 1507,1091 855,439 q -10,-10 -23,-10 -13,0 -23,10 L 695,553 q -10,10 -10,23 0,13 10,23 l 652,652 -176,176 q -19,19 -19,45 0,26 19,45 19,19 45,19 h 512 q 26,0 45,-19 19,-19 19,-45 z" />
+    </g>
+  </symbol>
+</svg>
+
 <header>Glossary - General Trust Over IP Terms</header>
 %nav
 <main>