Fix HTML examples template tabs

Tab labels now follow their drawer again. Also, to avoid tabs covering
up code or debugging logs, the tab label that's on top (and therefore
not automatically hidden behind the other drawer when that drawer
opens) will now automatically hide itself when the other drawer is
opened.

Author: Semphris

examples/template.html

@@ -76,8 +76,8 @@
       }
 
       #output-container::before {
-        position: fixed;
-        bottom: 0;
+        position: absolute;
+        bottom: 100%;
         right: 1rem;
 
         content: 'Console';
@@ -134,15 +134,19 @@
       }
 
       #source-code::before {
-        position: fixed;
-        bottom: 0;
+        position: absolute;
+        bottom: 100%;
         left: 1rem;
 
         content: 'Source code';
         font-size: 1.5rem;
         background: linear-gradient(to bottom, #789, #e0eaee);
         padding: 0.75rem 1.5rem;
         border-radius: 0.5rem 0.5rem 0 0;
+
+        /* Used for a hack to avoid tab labels showing on top of tabs; see
+           comment below for details. */
+        transition: bottom 0.25s;
       }
 
       #source-code:hover,
@@ -164,6 +168,14 @@
         overflow: scroll;
       }
 
+      /* Hack: Sinze z-index only goes one way, and both tab labels should be
+         behind each other's tab, put the former on top (higher z-index) and
+         make the latter one disappear when the former is hovered. */
+      #output-container:hover ~ #source-code::before,
+      #output-container:focus-within ~ #source-code::before {
+        bottom: -100%;
+      }
+
       @media (prefers-color-scheme: dark) {
         main > #sidebar {
           border-color: rgba(48, 54, 61, 0.7);