CSS improvements

Author: Andrew Hobden

domains/misc/badssl.com/index.html

@@ -10,46 +10,50 @@
   <style>
     html, body {
       background: rgb(77, 149, 218);
-
       margin: 0;
       padding: 0;
     }
     div {
       text-align: center;
     }
     #links {
-      width: 50vh;
-      max-width: 50vw;
+      width: 60vw;
+      max-width: 60vw;
       margin: 5vh auto;
       padding: 0 3vw 0 3vw;
     }
-    #links > a, #links > .browser-info {
+    #links > .link-container > a, #links > .browser-info {
       font-family: "Source Code Pro", Monaco, Consolas, "Courier New", monospace, Impact;
-      font-size: 3.5vh;
-      padding: 0.75vh 10vw 0.75vh 10vw;
-      margin: 1.5vh -10vw;
+      font-size: 16pt;
+      padding: 0.75vh 0vw 0.75vh 0vw;
+      margin-top: 1.5vh;
     }
-    #links > a {
+    #links > .link-container > a {
       text-decoration: none;
       color: white;
-      font-size: 5em;
-      font-size: 4vh;
+      font-size: 18pt;
       display: block;
       width: 100%;
       box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
       transition: all 150ms;
       font-weight: bold;
       word-wrap: break-word;
     }
-    #links > .description {
+    #links > .link-container > .description {
         text-decoration: none;
         color: white;
-        display: none;
+        max-height: 0;
+        overflow: hidden;
         width: 100%;
-        transition: all 150ms;
+        transition: all 1.5s;
+        transition-delay: 300ms;
         font-weight: bold;
+        font-size: 14pt;
         word-wrap: break-word;
     }
+    #links > .link-container:hover > .description {
+        max-height: 50vh;
+    }
     #links > .browser-info {
       margin: 3em auto 2em;
       padding: 0.75vh 0vh;
@@ -58,32 +62,16 @@
       text-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
     }
     @media (min-height: 600px) {
-      #links > a {
-        margin: 0.75vh -10vw;
+      #links > .link-container > a {
+        margin: 0.75vh 0vw;
       }
-      #links > a, #links .browser-info {
+      #links > .link-container > a, #links .browser-info {
         font-size: 20px;
         padding-top: 0.25em;
         padding-bottom: 0.25em;
       }
     }
-    #description-toggle {
-        font-family: "Source Code Pro", Monaco, Consolas, "Courier New", monospace, Impact;
-        font-size: 3.5vh;
-        padding: 0.75vh 10vw 0.75vh 10vw;
-        margin: 1.5vh -10vw 0 1.5vh;
-        text-decoration: none;
-        color: white;
-        font-size: 2.5em;
-        font-size: 2vh;
-        display: block;
-        width: 20%;
-        cursor: pointer;
-        transition: all 150ms;
-        font-weight: bold;
-        word-wrap: break-word;
-    }
-    #links > a:hover, #links > a:focus {
+    #links > .link-container > a:hover, #links > .link-container > a:focus {
       text-decoration: underline;
       text-shadow:
         0 0 20px rgba(255, 255, 255, 0.5),
@@ -108,10 +96,10 @@
     .dubious {
       background: rgb(246, 207, 47);
     }
-    #links > a.dubious {
+    #links > .link-container > a.dubious {
       color: #222;
     }
-    #links > a.dubious:hover {
+    #links > .link-container > a.dubious:hover {
       text-shadow:
         0 0 20px rgba(150, 100, 0, 0.15),
         0 0 40px rgba(150, 100, 0, 0.15),
@@ -130,27 +118,6 @@
       color: #222;
       background: rgb(243, 121, 46);
     }
-    #links > .comic-sans {
-      font-family: "Comic Sans MS", "Comic Sans", "Marker Felt";
-    }
-    #links > .more {
-      display: none;
-    }
-    #links.show-more > .more {
-      display: block;
-    }
-    #links > #reveal-more {
-      background: black;
-    }
-    #links > #reveal-more:hover {
-      cursor: pointer
-    }
-    #links.show-more > #reveal-more {
-      display: none;
-    }
-    #links > .hidden {
-      display: none;
-    }
 
     h2 {
       color: white;
@@ -223,18 +190,6 @@
     return null;
   }
 
-  function toggleDescriptions() {
-      var descriptions = document.querySelectorAll("#links > .description");
-      for (var i = 0; i < descriptions.length; i++) {
-          if (descriptions[i].style.display === "block") {
-              descriptions[i].style.display = "none"
-          } else {
-              descriptions[i].style.display = "block"
-          }
-
-      }
-  }
-
   window.addEventListener("load", function() {
     document.getElementById("ua").title = navigator.userAgent;
     document.getElementById("ua").textContent = getBrowserVersion();
@@ -246,17 +201,18 @@
   </script>
 </head>
 <body>
-  <a id="description-toggle">Show Descriptions</a>
   <div id="links">
     {% for category in site.data.categories %}
       <h2>{{ category.name }}:</h2>
       {% for subdomain_hash in site.data.subdomains %}
-        {% assign name = subdomain_hash[0] %}
-        {% assign subdomain = subdomain_hash[1] %}
-        {% if subdomain.category == category.name %}
-          <a href="https://{{ name }}.{{ site.domain }}/" style="background: {{ subdomain.background }}">{{ name }}</a>
-          <div class="description">{{ subdomain.description }}</div>
-        {% endif %}
+        <div class="link-container">
+          {% assign name = subdomain_hash[0] %}
+          {% assign subdomain = subdomain_hash[1] %}
+          {% if subdomain.category == category.name %}
+            <a href="https://{{ name }}.{{ site.domain }}/" style="background: {{ subdomain.background }}">{{ name }}</a>
+            <div class="description">{{ subdomain.description }}</div>
+          {% endif %}
+        </div>
       {% endfor %}
     {% endfor %}
     <div class="browser-info">