feat: add tooltip styling, make options expandable, general fixes

docs/style.css

@@ -6,29 +6,56 @@ html {
   margin-top: 1rem;
 }
 
-#installation {
+.version-select {
   overflow: hidden;
 }
-#installation header > h3 {
+
+.version-select__snippet h3 {
   margin: 1rem 2.5rem 1rem 0;
 }
 /* Make the ✔ / ❌ Emoji appear next to the button */
-#installation header button {
+.version-select__snippet__btn {
   position: relative;
-  margin-left: auto;
+  margin: 0 2px 0 auto;
   overflow: visible;
 }
-#installation header button span {
+.version-select__snippet__btn span {
   position: absolute;
   left: -2rem;
   display: inline-block;
   transform: scale(1.3);
 }
+
+.version-select__options {
+  margin-right: 1rem;
+}
+.version-select__options > label {
+  white-space: pre;
+}
+.version-select__options__additional > * {
+  margin-top: 1rem;
+  display: inline-block;
+}
+.version-select__options__additional summary {
+  display: block;
+  cursor: pointer;
+  font-weight: 600;
+}
+.version-select__options__additional summary:focus {
+  outline: none;
+}
+.version-select__options__additional summary:focus span {
+  text-decoration: underline;
+}
+
 /* Fixed layout so columns don't jump when content changes */
-#installation table {
+.version-select__info {
   table-layout: fixed;
 }
-#installation table th {
+.version-select__info caption {
+  text-align: left;
+}
+.version-select__info th {
   border: none;
   vertical-align: top;
   width: 35%;
@@ -58,6 +85,19 @@ body > footer {
 .translucent {
   opacity: 0.4;
 }
+.tooltip {
+  position: relative;
+  cursor: help;
+}
+.tooltip::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: -4px;
+  width: 100%;
+  border-width: 0 0 1.5px;
+  border-style: dotted;
+}
 
 /* For the bounce transitions of code snippet and copy success Emoji */
 .v-enter,

docs/versionpicker.html

@@ -1,8 +1,8 @@
 <!-- Start interactive version picker -->
-<div id="installation" v-cloak>
-  <header class="row">
+<div id="installation" class="version-select" v-cloak>
+  <header class="row version-select__snippet">
     <h3>Paste this into the <code>&lt;head&gt;</code> of your HTML:</h3>
-    <button type="button" @click="copyToClipboard">
+    <button type="button" class="version-select__snippet__btn" @click="copyToClipboard">
       <transition>
         <span v-if="copyStatus === 'success'" class="emoji">✔</span>
         <span v-else-if="copyStatus === 'failed'" class="emoji">❌</span>
@@ -15,44 +15,47 @@
     <pre :key="selectedVersion.fileSnippet"><code>{{selectedVersion.fileSnippet}}</code></pre>
   </transition>
 
-  <h3>Version options:</h3>
-  <form action="./" method="post" @submit.prevent>
+  <h3>Options</h3>
+  <form action="./" method="post" @submit.prevent class="version-select__options">
     <label>
       <input type="radio" value="dark" checked name="theme" v-model="versionOptions.theme" />
       Dark theme&nbsp;<span class="emoji">🌙</span>
       <span
         v-if="!versionOptions.isStandalone"
-        class="emoji translucent"
+        class="tooltip emoji translucent"
         title="Selected theme may be overwritten by theme settings on user's device"
       >
-        / ☀
-      </span>
+        / ☀</span>
     </label>
     <label>
       <input type="radio" value="light" name="theme" v-model="versionOptions.theme" />
       Light theme&nbsp;<span class="emoji">☀</span>
       <span
         v-if="!versionOptions.isStandalone"
-        class="emoji translucent"
+        class="tooltip emoji translucent"
         title="Selected theme may be overwritten by theme settings on user's device"
       >
-        / 🌙
-      </span>
-    </label>
-    <br /><br />
-    <label>
-      <input type="checkbox" checked v-model="versionOptions.isStandalone" />
-      Enforce theme? (ignore <code>prefers-color-scheme</code>)
-    </label>
-    <br /><br />
-    <label>
-      <input type="checkbox" v-model="versionOptions.isLegacy" />
-      Support Internet Explorer and other legacy browsers?
+        / 🌙</span>
     </label>
+    <details class="version-select__options__additional">
+      <summary><span>Additional options</span></summary>
+      <label>
+        <input type="checkbox" checked v-model="versionOptions.isStandalone" />
+        Enforce theme? (ignore <code>prefers-color-scheme</code>)
+      </label>
+      <br />
+      <label>
+        <input type="checkbox" v-model="versionOptions.isLegacy" />
+        Support Internet Explorer and other legacy browsers?
+      </label>
+    </details>
+
   </form>
 
-  <h3>Version info:</h3>
-  <table>
+  <table class="version-select__info">
+    <caption>
+      <h3>Version info</h3>
+    </caption>
     <tbody>
       <tr>
         <th>File</th>
@@ -104,12 +107,11 @@
           </template>
           <template v-else>
             All current browsers (<a href="https://caniuse.com/#feat=css-variables"
-              >support for CSS Custom Properties</a
-            >)
+              >support for CSS Custom Properties</a>)
           </template>
         </td>
       </tr>
     </tbody>
   </table>
 </div>
-<!-- End interactive version picker -->
+<!-- End interactive version picker -->