Tabs tidy and shortcuts (#387)

* Fix indentation

* Further simplify tabs CSS

* Ignore tab contents in shortcuts

* Remove tab paragraph wrapper

* Further simplify tab styling; prevent total collapse of tabs

* Fix highlight alignment; do not highlight top of selected tab

* Fix selected tab hover

Author: stefanv

assets/js/shortcuts.js

@@ -83,13 +83,13 @@ function remToPx(rem) {
 function setupShortcuts(shortcutDepth = 2) {
   shortcutDepth += 1; // to account for the page title
 
-  // Build a string like ".content-container h2, .content-container h3"
+  // Build a class selector for each header type, and concatenate with commas
   let classes = "";
   for (let i = 2; i <= shortcutDepth; i++) {
     if (i != 2) {
       classes += ",";
     }
-    classes += " .content-container h" + i;
+    classes += " .content-container :not([role='tabpanel']) > h" + i;
   }
 
   // Content Page Shortcuts

assets/theme-css/tabs.css

@@ -1,70 +1,60 @@
-.tabs {
-  display: block;
-  padding-bottom: 1.5rem;
-}
 .tabs :is(h1, h2, h3, h4, h5, h6) {
   margin-top: 0.5rem;
 }
 
+/* The tab list is the list of tab names */
 [role="tablist"] {
-  display: inline-block;
-  min-width: 100%;
+  display: flex;
+  flex-flow: row wrap;
+  margin-bottom: 0px;
+  padding-bottom: 0px;
 }
 
+/* The tab is the clickable element that selects between tabpanels (see below) */
 [role="tab"] {
-  box-sizing: border-box;
-  padding: 2px 2px 4px;
-  background-color: var(--pst-color-background);
   border: none;
+  padding: 0.75em 1.3em 0.9em;
+  background-color: var(--pst-color-background);
+  margin-bottom: 0;
   color: var(--pst-color-text);
-  outline: none;
   font-weight: bold;
   max-width: 22%;
-  overflow: hidden;
   text-align: left;
   cursor: pointer;
   font-size: 1rem;
 }
 
-[role="tab"]:hover,
-[role="tab"][aria-selected="true"]:hover {
+[role="tab"]:hover {
   color: var(--pst-color-secondary);
-  border-bottom-color: var(--pst-color-secondary);
-  border-bottom-size: 2px;
-  border-bottom-style: solid;
-  border-top-color: var(--pst-color-secondary);
-  border-top-size: 2px;
-  border-top-style: solid;
+  box-shadow:
+    0 -0.125rem var(--pst-color-secondary),
+    0 0.125rem var(--pst-color-secondary);
 }
 
+/* Selected tab behavior */
 [role="tab"][aria-selected="true"] {
-  border-bottom-color: var(--pst-color-primary);
-  border-bottom-style: solid;
-  border-bottom-size: 2px;
-  border-top-color: transparent;
-  border-top-style: solid;
-  border-top-size: 2px;
   color: var(--pst-color-primary);
+  box-shadow: 0 0.125rem var(--pst-color-primary);
 }
 
-[role="tab"] span.focus {
-  display: inline-block;
-  margin: 2px;
-  padding: 4px 6px;
+[role="tab"][aria-selected="true"]:hover {
+  color: var(--pst-color-secondary);
+  box-shadow:
+    0 -0.125rem var(--pst-color-secondary),
+    0 0.125rem var(--pst-color-secondary);
 }
 
+/* The tab panel is in which the tab contents appear */
 [role="tabpanel"] {
-  box-shadow:
-    0 -0.0625rem var(--pst-color-text-muted),
-    0 0.0625rem var(--pst-color-text-muted);
+  border-top: 1px solid var(--pst-color-text-muted);
+  border-bottom: 1px solid var(--pst-color-text-muted);
+  margin-top: 1px;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
   width: 100%;
   overflow: auto;
 }
 
 [role="tabpanel"].is-hidden {
   display: none;
 }
-
-[role="tabpanel"] p {
-  margin: 0;
-}

layouts/partials/panel.html

@@ -4,17 +4,17 @@
 {{- $tiles    := index $panel "tiles" }}
 <section class="panel">
   <div class="container is-max-widescreen">
-        <div class="panel-box-container">
-            {{- range $tiles }}
-            <div class="panel-box-content">
-                <p>
-                    <div class="panel-box-action">
-                       <a href="{{ .url }}" class="panel-button">{{ .buttonText }}</a>
-                    </div>
-                    <div class="panel-box-text">{{ .text | markdownify }}</div>
-                </p>
-            </div>
-            {{- end }}
-        </div>
+    <div class="panel-box-container">
+      {{- range $tiles }}
+      <div class="panel-box-content">
+        <p>
+          <div class="panel-box-action">
+            <a href="{{ .url }}" class="panel-button">{{ .buttonText }}</a>
+          </div>
+          <div class="panel-box-text">{{ .text | markdownify }}</div>
+        </p>
+      </div>
+      {{- end }}
     </div>
+  </div>
 </section>

layouts/shortcodes/tabs.html

@@ -6,15 +6,13 @@
   <div role="tablist" class="automatic">
     {{- range $idx, $tab := .Scratch.Get "tabs" }}
     <button id="{{ $groupId }}-tab-{{ $idx }}" type="button" role="tab" aria-selected="{{ cond (eq $idx 0) "true" "false" }}" aria-controls="{{ $groupId }}-tabpanel-{{ $idx }}">
-      <span class="focus">{{ .name }}</span>
+      {{ .name }}
     </button>
     {{- end }}
   </div>
   {{- range $idx, $tab := .Scratch.Get "tabs" }}
   <div id="{{ $groupId }}-tabpanel-{{ $idx }}" role="tabpanel" tabindex="0" aria-labelledby="${{ $groupId }}-tab-{{ $idx }}">
-    <p>
-      {{- .content | markdownify -}}
-    </p>
+    {{- .content | markdownify -}}
   </div>
   {{- end }}
 </div>