Use PST style tables (rm uikit)

Author: jarrodmillman

assets/css/tabs.css

@@ -1,6 +1,13 @@
-.uikit-tab-wrapper-mobile {
-    display: flex;
-    flex-direction: row;
+[role="tablist"] {
+  justify-content: center;
+}
+
+table td:not([align]), table th:not([align]) {
+  text-align: inherit;
+}
+
+table td, table th {
+  vertical-align: top;
 }
 
 .tabs-section {
@@ -26,25 +33,6 @@
     margin: 15px auto;
 }
 
-.uk-tab > li {
-    padding: 0 10px;
-}
-
-.uk-nav > li > a {
-    height: 35px;
-    font-size: 13px;
-    text-transform: uppercase;
-    letter-spacing: 1.5px;
-    font-weight: 500;
-    color: rgb(108, 122, 137);
-}
-
-#tabs-content > li {
-    width: 90vw;
-    max-width: 900px;
-    margin: 50px auto;
-}
-
 @media only screen and (max-width: 1200px) {
     .tabs-section {
         margin: 30px 10px;
@@ -112,10 +100,6 @@ td.bold-text {
     min-width: 120px;
 }
 
-.scientific-domains td.bold-text {
-    color: var(--colorPrimaryDark);
-}
-
 img.cell-layout {
     border-radius: 10px;
     width: 50px;
@@ -139,7 +123,6 @@ td.full-center-text {
 td.lastrow-center-text {
     text-align: center;
     line-height: 35%;
-    border-bottom: 1px solid rgb(255, 255, 255);
 }
 
 /* Array Libraries */
@@ -151,4 +134,4 @@ img.first-column-layout {
 
 td.left-text {
     vertical-align: middle;
-}
+}

layouts/partials/head.html

@@ -4,21 +4,39 @@
     <div class="container">
         <h1 class="tabs-title">{{ $title }}</h1>
 
-        <div class="uikit-tab-wrapper">
-            <ul class="uk-flex-center uk-nav" uk-tab>
-                <li class="uk-active"><a href="#">Scientific Domains</a></li>
-                <li><a href="#">Array libraries</a></li>
-                <li><a href="#">Data Science</a></li>
-                <li><a href="#">Machine Learning</a></li>
-                <li><a href="#">Visualization</a></li>
-            </ul>
-            <ul id="tabs-content" class="uk-switcher uk-margin">
-                {{ partial "scientific-domains.html" . }}
-                {{ partial "array-libraries.html" . }}
-                {{ partial "data-science.html" . }}
-                {{ partial "machine-learning.html" . }}
-                {{ partial "visualization.html" . }}
-            </ul>
+        <div class="tabs">
+          <div role="tablist" class="automatic">
+            <button id="0-tab-0" type="button" role="tab" aria-selected="true" aria-controls="0-tabpanel-0">
+              Scientific Domains
+	    </button>
+	    <button id="0-tab-1" type="button" role="tab" aria-selected="false" aria-controls="0-tabpanel-1">
+	      Array libraries
+	    </button>
+	    <button id="0-tab-2" type="button" role="tab" aria-selected="false" aria-controls="0-tabpanel-2">
+	      Data Science
+	    </button>
+	    <button id="0-tab-3" type="button" role="tab" aria-selected="false" aria-controls="0-tabpanel-3">
+	      Machine Learning
+	    </button>
+	    <button id="0-tab-4" type="button" role="tab" aria-selected="false" aria-controls="0-tabpanel-4">
+	      Visualization
+	    </button>
+          </div>
+	  <div id="0-tabpanel-0" role="tabpanel" tabindex="0" aria-labelledby="$0-tab-0">
+	    {{ partial "scientific-domains.html" . }}
+          </div>
+          <div id="0-tabpanel-1" role="tabpanel" tabindex="0" aria-labelledby="$0-tab-1">
+            {{ partial "array-libraries.html" . }}
+          </div>
+          <div id="0-tabpanel-2" role="tabpanel" tabindex="0" aria-labelledby="$0-tab-2">
+            {{ partial "data-science.html" . }}
+          </div>
+          <div id="0-tabpanel-3" role="tabpanel" tabindex="0" aria-labelledby="$0-tab-3">
+            {{ partial "machine-learning.html" . }}
+          </div>
+          <div id="0-tabpanel-4" role="tabpanel" tabindex="0" aria-labelledby="$0-tab-4">
+            {{ partial "visualization.html" . }}
+          </div>
         </div>
     </div>
 </section>