From 0899b44c631174095f5129afc7aa5fbbac9c3819 Mon Sep 17 00:00:00 2001
From: Helena Rasche <hexylena@galaxians.org>
Date: Fri, 24 May 2024 15:12:03 +0200
Subject: [PATCH 1/2] Fix multiple inclusion of switcher

---
 _includes/slides-youtube-selector.html | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/_includes/slides-youtube-selector.html b/_includes/slides-youtube-selector.html
index 83f18ef00ee20c..407aaa2425b1c4 100644
--- a/_includes/slides-youtube-selector.html
+++ b/_includes/slides-youtube-selector.html
@@ -1,19 +1,19 @@
 <blockquote class="agenda">
 	<div class="box-title hands-on-title" id="slides-{{ include.slides }}">{{ include.title }}</div>
 	<p class="text-muted">This content is available in multiple, equivalent formats. Choose your preferred format below.</p>
-<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
+<ul class="nav nav-pills mb-3" id="{{include.id}}-pills-tab" role="tablist">
   <li class="nav-item" role="presentation">
-    <button class="nav-link active" id="pills-home-tab" data-toggle="pill" data-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Teacher Recording</button>
+    <button class="nav-link active" id="{{include.id}}-pills-home-tab" data-toggle="pill" data-target="#{{include.id}}-pills-home" type="button" role="tab" aria-controls="{{include.id}}-pills-home" aria-selected="true">Teacher Recording</button>
   </li>
   <li class="nav-item" role="presentation">
-    <button class="nav-link" id="pills-profile-tab" data-toggle="pill" data-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Slides</button>
+    <button class="nav-link" id="{{include.id}}-pills-profile-tab" data-toggle="pill" data-target="#{{include.id}}-pills-profile" type="button" role="tab" aria-controls="{{include.id}}-pills-profile" aria-selected="false">Slides</button>
   </li>
   <li class="nav-item" role="presentation">
-    <button class="nav-link" id="pills-contact-tab" data-toggle="pill" data-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Plain Text</button>
+    <button class="nav-link" id="{{include.id}}-pills-contact-tab" data-toggle="pill" data-target="#{{include.id}}-pills-contact" type="button" role="tab" aria-controls="{{include.id}}-pills-contact" aria-selected="false">Plain Text</button>
   </li>
 </ul>
-<div class="tab-content" id="pills-tabContent">
-  <div class="tab-pane show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
+<div class="tab-content" id="{{include.id}}-pills-tabContent">
+  <div class="tab-pane show active" id="{{include.id}}-pills-home" role="tabpanel" aria-labelledby="{{include.id}}-pills-home-tab">
     <div class="embed-responsive embed-responsive-16by9">
     <iframe class="embed-responsive-item"
       credentialless
@@ -28,7 +28,7 @@
       loading="lazy"></iframe>
     </div>
   </div>
-  <div class="tab-pane" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
+  <div class="tab-pane" id="{{include.id}}-pills-profile" role="tabpanel" aria-labelledby="{{include.id}}-pills-profile-tab">
     <a href="{{ site.baseurl }}/{{ include.slides }}/slides.html">Open in new tab</a><br/>
     <div class="embed-responsive embed-responsive-16by9">
     <iframe class="embed-responsive-item"
@@ -38,7 +38,7 @@
       loading="lazy"></iframe>
     </div>
   </div>
-  <div class="tab-pane" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
+  <div class="tab-pane" id="{{include.id}}-pills-contact" role="tabpanel" aria-labelledby="{{include.id}}-pills-contact-tab">
     <a href="{{ site.baseurl }}/{{ include.slides }}/slides-plain.html">Open in new tab</a><br/>
     <div class="embed-responsive embed-responsive-16by9">
     <iframe class="embed-responsive-item"

From 2cf0c36545adffe5ec2a6a0d5876e5e3d5d948fa Mon Sep 17 00:00:00 2001
From: Helena Rasche <hexylena@galaxians.org>
Date: Fri, 24 May 2024 15:15:03 +0200
Subject: [PATCH 2/2] style tabs using event logic

---
 _includes/slides-youtube-selector.html |  2 +-
 assets/css/main.scss                   | 39 +++++++++++++++-----------
 2 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/_includes/slides-youtube-selector.html b/_includes/slides-youtube-selector.html
index 407aaa2425b1c4..54fd3f2512cee3 100644
--- a/_includes/slides-youtube-selector.html
+++ b/_includes/slides-youtube-selector.html
@@ -1,7 +1,7 @@
 <blockquote class="agenda">
 	<div class="box-title hands-on-title" id="slides-{{ include.slides }}">{{ include.title }}</div>
 	<p class="text-muted">This content is available in multiple, equivalent formats. Choose your preferred format below.</p>
-<ul class="nav nav-pills mb-3" id="{{include.id}}-pills-tab" role="tablist">
+<ul class="nav nav-tabs" id="{{include.id}}-pills-tab" role="tablist">
   <li class="nav-item" role="presentation">
     <button class="nav-link active" id="{{include.id}}-pills-home-tab" data-toggle="pill" data-target="#{{include.id}}-pills-home" type="button" role="tab" aria-controls="{{include.id}}-pills-home" aria-selected="true">Teacher Recording</button>
   </li>
diff --git a/assets/css/main.scss b/assets/css/main.scss
index 0bd7088139a75e..272e5f922e8f3c 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -1855,27 +1855,32 @@ section.event {
 	}
 
 	.nav-tabs {
-		.nav-item {
-			margin-bottom: 0;
-			padding-bottom: 0;
+		button.nav-link {
+			font-weight: 800;
 		}
+	}
 
-		button.nav-link{
-			border: none;
-			background: none;
-			font-size: 1.2rem;
-			border-top-left-radius: 0;
-			border-top-right-radius: 0;
-			font-weight: 800;
+}
+.nav-tabs {
+	.nav-item {
+		margin-bottom: 0;
+		padding-bottom: 0;
+	}
+
+	button.nav-link{
+		border: none;
+		background: none;
+		font-size: 1.2rem;
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
 
-			&:hover {
-				color: var(--hyperlink-hover);
-			}
+		&:hover {
+			color: var(--hyperlink-hover);
+		}
 
-			&.active {
-				background: var(--overview-color);
-				color: white;
-			}
+		&.active {
+			background: var(--overview-color);
+			color: white;
 		}
 	}
 }