Tweak design to hide irrelevant section automatically.

site/assets/scss/yuzu/yuzu.scss

@@ -98,6 +98,10 @@ a:hover {
   display: block !important;
 }
 
+.show-with-js {
+  display: none;
+}
+
 // Make text nicer to read in articles
 .section.content.pt-sm > p {
   text-align: justify;
@@ -142,14 +146,15 @@ pre > code {
 }
 
 #download-buttons > a {
-  margin-top: 0.5rem;
+  margin-top: 0.75rem;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.75rem;
 }
 
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 780px) {
   #download-header {
     flex-direction: row;
     text-align: left;
+    align-items: center;
   }
 
   #download-buttons > a {

site/content/downloads.md

@@ -4,10 +4,8 @@ layout: "downloads"
 FullWidth: true
 ---
 
-<div class="columns is-desktop">
+<div class="tab-content" id="tab-windows">
-<div class="column">
+<h2 class="hide-with-js mt-5">Windows Instructions</h2>
-<h2>Windows</h2>
-
 <article class="message has-text-weight-semibold">
 <div class="message-body">
 <p style="color:cyan;margin-bottom: 0px;">yuzu requires the latest versions of Microsoft Visual C++. 
@@ -27,9 +25,8 @@ Intel and AMD users are strongly recommended to switch to Vulkan by going to `Em
 
 
 
-<div class="column">
+<div class="tab-content" id="tab-linux">
-<h2>Linux</h2>
+<h2 class="hide-with-js mt-5">Linux Instructions</h2>
-
 <article class="message has-text-weight-semibold">
 <div class="message-body">
 <p style="color:cyan;margin-bottom: 0px;">We have yuzu as an AppImage and Flatpak now! This relaxes dependency requirements for yuzu, as well as enabling it to run on a lot of older distributions.</p>
@@ -46,4 +43,3 @@ chmod a+x yuzu-*.AppImage
 
 Or with the GUI, right click the AppImage, click Properties, then Permissions, then click "Allow this file to run as a program". After that, double-click the AppImage to run it.
 </div>
-</div>

site/layouts/page/downloads.html

@@ -3,10 +3,8 @@
 
 <section class="section">
     <div class="container">
-        <div class="mb-6" id="download-header">
+        <div class="mb-3" id="download-header">
-            <div class="is-flex-grow-1">
+            <h1 class="title is-flex-grow-1 mb-0">{{ .Title }}</h1>
-                <h1 class="title">{{ .Title }}</h1>
-            </div>
             <div id="download-buttons">
                 <a href="https://github.com/yuzu-emu/liftinstall/releases/download/1.9/yuzu_install.exe" class="button dl-button is-medium is-success" id="dl-button-windows">
                     <span class="icon mr-1"><i class="fab fa-windows"></i></span> Download for Windows x64
@@ -17,7 +15,39 @@
             </div>
         </div>
 
-        <div class="content">
+        <div id="unsupported-platform-view">
+            <article class="message is-danger" id="platform-unsupported">
+                <div class="message-body has-text-white my-5">
+                    Currently, yuzu doesn't support your platform. If you are running Windows x64 or Linux x64 however,
+                    choose one of the options below.
+                </div>
+            </article>
+        </div>
+
+        <div class="show-with-js">
+            <div class="tabs " id="platform-switcher">
+                <ul>
+                    <li data-target="tab-windows">
+                        <a>
+                            <span class="icon is-small"><i class="fab fa-windows"></i></span>
+                            <span>Windows</span>
+                        </a>
+                    </li>
+                    <li data-target="tab-linux">
+                        <a>
+                            <span class="icon is-small"><i class="fab fa-linux"></i></span>
+                            <span>Linux</span>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+
+            <div class="content">
+                <h2>Instructions</h2>
+            </div>
+        </div>
+
+        <div class="content" id="platform-instructions">
             {{ .Content }}
         </div>
     </div>
@@ -25,7 +55,9 @@
 
 <section class="section pt-0">
     <div class="container">
-        <div id="no-js-view">
+        <div class="hide-with-js content">
+            <h2>Builds</h2>
+
             <article class="message is-warn">
                 <div class="message-body has-text-white mb-6">
                     Hi! We see that you have JavaScript disabled. You can still use the 
@@ -37,18 +69,9 @@
             </article>
         </div>
         
-        <div id="unsupported-platform-view">
+        <div class="show-with-js" id="package-view">
-            <article class="message is-danger" id="platform-unsupported">
-                <div class="message-body has-text-white mb-6">
-                    Yuzu doesn't support your platform. If you are running Windows x64 or Linux x64 however,
-                    choose one of the options below.
-                </div>
-            </article>
-        </div>
-        
-        <div class="columns" id="manual-package-view">
             <!-- Mainline -->
-            <div class="column content">
+            <div class="content">
                 <h2>Builds
                     <span class="tag is-info">
                         Last release was &nbsp;
@@ -82,39 +105,78 @@
 
 {{ define "scripts" }}
 <script type="text/javascript">
-    // Show JS relevant elements
+    const setTabActive = (targetId) => {
-    document.getElementById("no-js-view").style.display = "none";
+        document.querySelectorAll(".content .tab-content")
-    document.getElementById("manual-package-view").style.display = "block";
+            .forEach(element => element.style.display = "none");
 
-    function fetchReleases() {
+        document.querySelectorAll(`#${targetId}`)    
-        getRelease('mainline');
+            .forEach(element => element.style.display = "block");
+
+        document.querySelectorAll(".tabs li")    
+            .forEach(element => element.classList.remove('is-active'));
+
+        document.querySelectorAll(`[data-target="${targetId}"]`)    
+            .forEach(element => element.classList.add('is-active'));
     }
 
-    fetchReleases();
+    const getOSGuess = () => {
+        const userAgent = navigator.userAgent.toLowerCase();
+
+        if (userAgent.includes("windows")) {
+            return "Windows";
+        } else if (
+            userAgent.includes("mac") && 
+            !userAgent.includes("mobile") && 
+            !userAgent.includes("phone")
+        ) {
+            return "Mac";
+        } else if (
+            userAgent.includes("linux") && 
+            userAgent.includes("android")
+        ) {
+            return "Linux";
+        }
+
+        return "Other";
+    }
+
+    const setupListeners = () => {
+        document.querySelectorAll(".tabs li")
+            .forEach(element => 
+                element.addEventListener('click', (event) => {
+                    setTabActive(element.dataset.target);
+                })
+            );
+    }
+
+    getRelease('mainline');
+
+    // Show JS relevant elements
+    document.querySelectorAll(".hide-with-js")
+        .forEach(element => element.style.display = "none");
+
+    document.querySelectorAll(".show-with-js")
+        .forEach(element => element.style.display = "block");
+    
+    document.querySelectorAll(".content .tab-content")
+        .forEach(element => element.style.display = "none");
 
     // Attempt autodetection of their operating system
-    var userAgent = navigator.userAgent.toLowerCase();
+    switch (getOSGuess()) {
-    var os = "Other";
-
-    if (userAgent.indexOf("windows") !== -1) {
-        os = "Windows";
-    } else if (userAgent.indexOf("mac") !== -1 && userAgent.indexOf("mobile") === -1 && userAgent.indexOf("phone") === -1) {
-        os = "Mac";
-    } else if (userAgent.indexOf("linux") !== -1 && userAgent.indexOf("android") === -1) {
-        os = "Linux";
-    }
-
-    switch (os) {
         case "Windows":
             document.getElementById("dl-button-linux").style.display = "none";
+            setTabActive('tab-windows');
             break;
         case "Linux":
             document.getElementById("dl-button-windows").style.display = "none";
+            setTabActive('tab-linux');
             break;
         default:
             document.getElementById("unsupported-platform-view").style.display = "block";
+            setTabActive('tab-windows');
             break
     }
 
+    window.addEventListener('DOMContentLoaded', setupListeners);
 </script>
 {{ end }}