Killing Oldframe

assets/css/v2/style.css

@@ -1419,142 +1419,69 @@ li:has(> div > blockquote) {
 /* MARK: Tabs
 */
 .tabs-container {
-  /* border-bottom: 1px solid black; */
-  white-space: nowrap;
-  position: relative;
-
-  /* Move to gutter */
   width: calc(100% + 2rem);
   margin-left: -1rem;
 
-  &::after {
-    content: "";
-    position: absolute;
-    display: block;
-    border-bottom: 1px solid oklch(var(--color-foreground));
-    bottom: 0;
-    right: 0;
-    width: 2rem;
+  input[type="radio"] {
+    display: none;
   }
-}
 
-.nav-tabs {
-  overflow-x: scroll;
-  overflow-y: hidden;
-  height: 100%;
-  scrollbar-width: none;
+  .tab-labels {
+    display: flex;
+    position: relative;
+    flex-wrap: wrap;
+    flex-direction: row;
+    margin: 0;
 
-  list-style: none;
-  display: flex;
-  justify-content: start;
-  margin: 0;
-  padding: 0 2rem;
-  position: relative;
+    > :not(:last-child) {
+      border-right: none;
+    }
 
-  > :not(:last-child) {
-    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;
 
-  &::before {
-    /* Horizontal line before tab blocks */
-    content: "";
-    position: absolute;
-    display: block;
-    border-bottom: 1px solid oklch(var(--color-foreground));
-    bottom: 0;
-    left: 0;
-    width: 2rem;
+      label {
+        cursor: pointer;
+      }
+    }
   }
 
-  &::after {
-    /* Horizontal line after tab blocks */
-    content: "";
-    position: relative;
-    display: block;
-    border-bottom: 1px solid oklch(var(--color-foreground));
-    bottom: 0;
-    left: 0;
+  .tab-content {
+    display: none;
+    margin-top: 1rem;
+    margin-left: 0;
     width: 100%;
-  }
-
-  --scrollbar-width: 1px;
-  --mask-height: 32px;
-  --mask-image-content: linear-gradient(
-    to right,
-    transparent,
-    oklch(var(--color-foreground)) var(--mask-height),
-    oklch(var(--color-foreground)) calc(100% - var(--mask-height)),
-    transparent
-  );
-
-  --mask-size-content: 100% calc(100% - var(--scrollbar-width));
-
-  --mask-image-scrollbar: linear-gradient(
-    oklch(var(--color-foreground)),
-    oklch(var(--color-foreground))
-  );
-  --mask-size-scrollbar: 100% var(--scrollbar-width);
-  mask-image: var(--mask-image-content), var(--mask-image-scrollbar);
-  mask-size: var(--mask-size-content), var(--mask-size-scrollbar);
-  mask-position: 0 0, 0 100%;
-  mask-repeat: no-repeat, no-repeat;
-}
-
-.nav-item {
-  border: 1px solid oklch(var(--color-tabs-inactive-border));
-  border-bottom: 1px solid oklch(var(--color-foreground));
-  padding: 10px;
-  margin-bottom: 0;
-
-  a {
-    text-decoration: none;
-  }
 
-  .active {
-    color: oklch(var(--color-foreground));
-  }
-}
-
-.nav-item:has(.active) {
-  /* Change the border colors of li that is has a child with a class "active" */
-  border-top: 1px solid oklch(var(--color-foreground));
-  border-left: 1px solid oklch(var(--color-foreground));
-  border-bottom: none;
+    padding: 1rem;
+    border-bottom: 1px solid oklch(var(--color-foreground));
 
-  /* Change the border of next child */
-  + li {
-    border-left: 1px solid oklch(var(--color-foreground));
+    & > * {
+      margin: 0 0 var(--flow-gap) 0;
+    }
   }
-}
-
-.nav-item:last-child:has(.active) {
-  /* If on last tab, change the right border since it does not have a next sibling */
-  border-right: 1px solid oklch(var(--color-foreground));
-}
 
-.tab-content {
-  border-bottom: 1px solid oklch(var(--color-foreground));
-  padding-bottom: 1rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-
-  /* Move to gutter */
-  width: calc(100% + 2rem);
-  margin-left: -1rem;
-
-  .tab-pane {
-    display: none;
+  .tab-labels:before {
+    content: "";
+    position: relative;
+    width: 2rem;
+    border-bottom: 1px solid oklch(var(--color-foreground));
   }
 
-  .active {
-    display: block !important;
+  .tab-labels:after {
+    content: "";
+    position: relative;
+    bottom: 0;
+    left: 0;
+    flex-grow: 1;
+    border-bottom: 1px solid oklch(var(--color-foreground));
   }
 }
 
-.tab-content > div > * {
-  margin: 0 0 var(--flow-gap) 0;
-}
-
 /* MARK: Codeblocks
 */
 code {

layouts/shortcodes/tabs.html

@@ -1,51 +1,64 @@
 {{- .Page.Scratch.Add "tabset-counter" 1 -}}
 {{- $tab_set_id := .Get "name" | default (printf "tabset-%s-%d" (.Page.RelPermalink) (.Page.Scratch.Get "tabset-counter") ) | anchorize -}}
 {{- $tabs := .Scratch.Get "tabs" -}}
-{{- if .Inner -}}{{- /* We don't use the inner content, but Hugo will complain if we don't reference it. */ -}}{{- end -}}
-<div class="tabs-container">
-	<ul class="nav nav-tabs" id="{{ $tab_set_id }}" role="tablist">
-		{{- range $i, $e := $tabs -}}
-		{{- $id := printf "%s-%d" $tab_set_id $i -}}
-		{{- if (eq $i 0) -}}
-			<li class="nav-item"><a data-toggle="tab" class="nav-link active" href="#{{ $id }}" role="tab" aria-controls="{{ $id }}" aria-selected="true">{{- trim .name " " -}}</a></li>
-		{{ else }}
-			<li class="nav-item"><a data-toggle="tab" class="nav-link" href="#{{ $id }}" role="tab" aria-controls="{{ $id }}">{{- trim .name " " -}}</a></li>
-		{{- end -}}
+{{- if .Inner -}}
+  <div class="tabs-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">
+      {{- else -}}
+        <input type="radio" name="{{$tab_set_id}}" id="{{$id}}" 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>
-<div class="tab-content" id="{{ $tab_set_id }}">
-{{- range $i, $e := $tabs -}}
-{{- $id := printf "%s-%d" $tab_set_id $i -}}
-{{- if (eq $i 0) -}}
-  <div id="{{ $id }}" class="tab-pane show active" role="tabpanel" aria-labelledby="{{ $id }}">
-{{ else }}
-  <div id="{{ $id }}" class="tab-pane" role="tabpanel" aria-labelledby="{{ $id }}">
+	<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> 
+  </div>
 {{ end }}
-	{{- with .content -}}
-		{{- . -}}
-	{{- else -}}
-		{{- if eq $.Page.BundleType "leaf" -}}
-			{{- /* find the file somewhere inside the bundle. Note the use of double asterisk */ -}}
-			{{- with $.Page.Resources.GetMatch (printf "**%s*" .include) -}}
-				{{- if ne .ResourceType "page" -}}
-				{{- /* Assume it is a file that needs code highlighting. */ -}}
-				{{- $codelang := $e.codelang | default ( path.Ext .Name | strings.TrimPrefix ".") -}}
-				{{- highlight .Content $codelang "" -}}
-				{{- else -}}
-					{{- .Content -}}
-				{{- end -}}
-			{{- end -}}
-		{{- else -}}
-		{{- $path := path.Join $.Page.File.Dir .include -}}
-		{{- $page := site.GetPage "page" $path -}}
-		{{- with $page -}}
-			{{- .Content -}}
-		{{- else -}}
-		{{- errorf "[%s] tabs include not found for path %q" site.Language.Lang $path -}}
-		{{- end -}}
-		{{- end -}}
-	{{- end -}}
-</div>
-{{- end -}}
-</div>
+<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>