downloads: get rid of tab bar, show all downloads at once

classabbyamp · classabbyamp · commit c551fd6a916b · 2025-12-21T18:00:06.000-05:00
also add anchor links so certain platforms can be referred to directly

imo, this javascript-based tab layout has never really worked well
(especially if trying to link someone to e.g. the containers)
diff --git a/_includes/download_arm.html b/_includes/download_arm.html
@@ -1,6 +1,6 @@
 <div class="split-section">
   <div>
-    <h3 id="{{ page.name }}">{{ page.name }}</h3>
+    <h3 id="{{ page.name | slugify }}"><a href="#{{ page.name | slugify }}">{{ page.name }}</a></h3>
     {{ include.content | markdownify }}
   </div>
   <div>
diff --git a/_includes/download_arm_platforms.html b/_includes/download_arm_platforms.html
@@ -1,6 +1,6 @@
 <div class="split-section">
   <div>
-    <h3 id="{{ page.name }}">{{ page.name }}</h3>
+    <h3 id="{{ page.name | slugify }}"><a href="#{{ page.name | slugify }}">{{ page.name }}</a></h3>
     {{ include.content | markdownify }}
   </div>
   <div>
diff --git a/_includes/download_containers.html b/_includes/download_containers.html
@@ -1,6 +1,6 @@
 <div class="split-section">
   <div>
-    <h3 id="{{ page.name }}">{{ page.name }}</h3>
+    <h3 id="{{ page.name | slugify }}"><a href="#{{ page.name | slugify }}">{{ page.name }}</a></h3>
     {{ include.content | markdownify }}
   </div>
   <div>
diff --git a/_includes/download_pc.html b/_includes/download_pc.html
@@ -1,6 +1,6 @@
 <div class="split-section">
   <div>
-    <h3 id="{{ page.name }}">{{ page.name }}</h3>
+    <h3 id="{{ page.name | slugify }}"><a href="#{{ page.name | slugify }}">{{ page.name }}</a></h3>
     {{ include.content | markdownify }}
     <div class="alert alert-warning" role="alert">
       To install the packages for the desktop environment, DON'T choose "install
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -28,7 +28,6 @@
 		<link rel="alternate" type="application/atom+xml" title="Void Linux News feed" href="/atom.xml" />
 		<script src="/assets/js/jquery.min.js"></script>
 		<script src="/assets/js/bootstrap.min.js"></script>
-		<script src="/assets/js/tabbar.js"></script>
 	</head>
 	<body role="document">
 		<nav class="navbar navbar-default navbar-inverse navbar-sticky" role="navigation">
diff --git a/_layouts/download.html b/_layouts/download.html
@@ -5,21 +5,11 @@
 <div class="container">
   {{ content }}
 
-  <ul class="tab-bar" id="tab-bar">
-    {% for platform in site.platforms %}
-    <li>
-      <a href="#{{  platform.name }}">{{ platform.name }}</a>
-    </li>
-    {% endfor %}
-  </ul>
-
-  <div id="tab-content">
+  <div>
     {% for platform in site.platforms %}
     <div>
       {{ platform.content }}
-      <noscript>
-        <hr />
-      </noscript>
+      {% unless forloop.last %}<hr>{% endunless %}
     </div>
     {% endfor %}
   </div>
diff --git a/assets/css/misc.css b/assets/css/misc.css
@@ -185,37 +185,6 @@ h1[id], h2[id], h3[id], h4[id], h5[id], h6[id] {
 	border-color: black;
 }
 
-.tab-bar {
-  list-style: none;
-  display: flex;
-  padding: 0;
-  margin: 0;
-  border-bottom: 1px solid #ddd;
-}
-.tab-bar li {
-  padding: 1em 2em;
-  cursor: pointer;
-  border-bottom: 2px solid white;
-  transition: border-color 0.4s;
-}
-.tab-bar li:hover {
-  border-bottom: 2px solid #ddd;
-}
-.tab-bar li.active {
-  font-weight: bold;
-  border-bottom: 2px solid #478061;
-}
-@media (max-width: 500px) {
-  .tab-bar li {
-    padding: 1em;
-  }
-}
-.tab-bar li a {
-  color: inherit;
-}
-.tab-bar li a:focus {
-  text-decoration: none;
-}
 
 .split-section {
   display: flex;
@@ -287,15 +256,6 @@ h1[id], h2[id], h3[id], h4[id], h5[id], h6[id] {
   hr {
     border-top: 1px solid #888;
   }
-  .inline-download-links, .tab-bar {
-    border-bottom: 1px solid #888;
-  }
-  .tab-bar li {
-    border-bottom: 2px solid #aaa;
-  }
-  .tab-bar li:hover {
-    border-bottom: 2px solid #62b086;
-  }
   code {
     background-color: inherit;
     color: white;
diff --git a/assets/js/tabbar.js b/assets/js/tabbar.js
