Mainframe: Less complicated Tab solution

Author: lamATnginx

assets/css/v2/style.css

@@ -1418,44 +1418,38 @@ li:has(> div > blockquote) {
 
 /* MARK: Tabs
 */
-.tabs-container {
+.tab-container {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
   width: calc(100% + 2rem);
   margin-left: -1rem;
 
-  input[type="radio"] {
+  & input[type="radio"] {
     display: none;
   }
 
-  .tab-labels {
-    display: flex;
-    position: relative;
-    flex-wrap: wrap;
-    flex-direction: row;
-    margin: 0;
+  & .tab-label {
+    cursor: pointer;
+    display: inline-block;
+    order: 1;
+    padding: 10px;
+    border: 1px solid oklch(var(--color-tabs-inactive-border));
+    border-bottom: 1px solid oklch(var(--color-foreground));
+    color: oklch(var(--color-brand));
 
-    > :not(:last-child) {
+    &:not(:last-of-type) {
       border-right: none;
     }
-
-    li {
-      list-style: none;
-      border: 1px solid oklch(var(--color-tabs-inactive-border));
-      border-bottom: 1px solid oklch(var(--color-foreground));
-      color: oklch(var(--color-brand));
-      padding: 10px;
-      margin: 0;
-
-      label {
-        cursor: pointer;
-      }
-    }
   }
 
-  .tab-content {
+  & .tab-content {
     display: none;
+    order: 99;
+    flex-grow: 1;
     margin-top: 1rem;
-    margin-left: 0;
     width: 100%;
+    margin-left: 0;
 
     padding: 1rem;
     border-bottom: 1px solid oklch(var(--color-foreground));
@@ -1465,20 +1459,42 @@ li:has(> div > blockquote) {
     }
   }
 
-  .tab-labels:before {
+  & input[type="radio"]:checked + .tab-label {
+    border: none;
+    border-top: 1px solid oklch(var(--color-foreground));
+    border-left: 1px solid oklch(var(--color-foreground));
+    border-bottom: none;
+    color: oklch(var(--color-foreground));
+
+    & + * + * + .tab-label {
+      border-left: 1px solid oklch(var(--color-foreground));
+    }
+
+    &:last-of-type {
+      border-right: 1px solid oklch(var(--color-foreground));
+    }
+  }
+
+  & input[type="radio"]:checked + .tab-label + .tab-content {
+    display: block;
+  }
+
+  &:before {
     content: "";
-    position: relative;
-    width: 2rem;
+    display: block;
+    width: 1rem;
+    align-self: end;
     border-bottom: 1px solid oklch(var(--color-foreground));
   }
 
-  .tab-labels:after {
+  &:after {
     content: "";
-    position: relative;
-    bottom: 0;
-    left: 0;
+    display: block;
+    height: 1px;
+    background-color: oklch(var(--color-foreground));
     flex-grow: 1;
-    border-bottom: 1px solid oklch(var(--color-foreground));
+    align-self: end;
+    order: 1;
   }
 }
 

layouts/shortcodes/tabs.html

@@ -2,63 +2,27 @@
 {{- $tab_set_id := .Get "name" | default (printf "tabset-%s-%d" (.Page.RelPermalink) (.Page.Scratch.Get "tabset-counter") ) | anchorize -}}
 {{- $tabs := .Scratch.Get "tabs" -}}
 {{- if .Inner -}}
-  <div class="tabs-container" id="{{ $tab_set_id }}">
+  <div class="tab-container" id="{{ $tab_set_id }}">
     {{- range $i, $e := $tabs -}}
-	  {{- $id := printf "%s-tab%d" $tab_set_id $i -}}
       {{- if eq $i 0 -}}
-        <input type="radio" name="{{$tab_set_id}}" id="{{$id}}" aria-hidden="true" checked="checked">
+        <input type="radio" name="{{$tab_set_id}}" id="{{$tab_set_id}}-tab{{$i}}" aria-hidden="true" checked="checked">
       {{- else -}}
-        <input type="radio" name="{{$tab_set_id}}" id="{{$id}}" aria-hidden="true">
+        <input type="radio" name="{{$tab_set_id}}" id="{{$tab_set_id}}-tab{{$i}}" aria-hidden="true">
       {{- end -}}  
-	{{- end -}}
-	<ul class="tab-labels" role="tablist" id="{{ $tab_set_id }}">
-	  {{- range $i, $e := $tabs -}}
-	  	{{- $id := printf "%s-tab%d" $tab_set_id $i -}}
-		<li>
-		  {{- if eq $i 0 -}}
-			<label class="tab-label" role="tab" id="{{$id}}" for="{{$id}}" aria-controls="{{ $id }}" aria-selected="true" tabindex="0">
-			  {{- trim .name " " -}}
-			</label>
-		  {{- else -}}
-			<label class="tab-label" role="tab" id="{{$id}}" for="{{$id}}" aria-controls="{{ $id }}" tabindex="0">
-			  {{- trim .name " " -}}
-			</label>
-		  {{- end -}}
-		</li>
-	  {{- end -}}
-	</ul>
-	<div class="tabs-content">
-	  {{- range $i, $e := $tabs -}}
-	    {{- $id := printf "%s-panel%d" $tab_set_id $i -}}
-		<div class="tab-content" role="tabpanel" id="{{ $tab_set_id }}-panel{{ $i }}" aria-labelledby="{{ $id }}">
-		  {{ with .content }}
-			{{ . }}
-		  {{ end }}
-		</div> 
-	  {{- end -}}
-	</div> 
+      <label 
+	    class="tab-label" 
+		role="tab" 
+		for="{{$tab_set_id}}-tab{{$i}}"
+	    tabindex="0"
+	  	aria-selected="{{ if eq $i 0 }}true{{ else }}false{{ end }}" 
+	  	aria-controls="{{$tab_set_id}}-panel{{$i}}">
+        {{- trim .name " " -}}
+      </label>
+      <div class="tab-content" role="tabpanel" id="{{$tab_set_id}}-panel{{$i}}" aria-labelledby="{{$tab_set_id}}-tab{{$i}}">
+        {{ with .content }}
+          {{ . }}
+        {{ end }}
+      </div>  
+    {{- end -}}
   </div>
-{{ end }}
-<style>
-  {{- range $i, $e := $tabs -}}
-  	.tabs-container input[type="radio"]:checked:nth-of-type({{ add $i 1 }}) ~ .tab-labels li:nth-of-type({{ add $i 1 }}) {
-	  border: none;
-      border-top: 1px solid oklch(var(--color-foreground));
-      border-left: 1px solid oklch(var(--color-foreground));
-      border-bottom: none;
-      color: oklch(var(--color-foreground));
-
-	  + li {
-		border-left: 1px solid oklch(var(--color-foreground));
-	  }
-
-	  &:last-of-type {
-      	border-right: 1px solid oklch(var(--color-foreground));
-      }
-	}
-
-	.tabs-container input[type="radio"]:checked:nth-of-type({{ add $i 1 }}) ~ .tabs-content div:nth-of-type({{ add $i 1 }}) {
-	  display: block;
-	}
-  {{- end -}}
-</style>
+{{ end }}