From 938a706466c7922d00a9e6203d832111ed3f735e Mon Sep 17 00:00:00 2001
From: Pk11 <epicpkmn11@outlook.com>
Date: Sat, 23 Jan 2021 00:40:56 -0600
Subject: [PATCH] Switch 3DS page to tabs

---
 assets/css/style.scss                         |  2 +-
 .../twilightmenu/installing-3ds-manual.md     |  2 +-
 pages/_en-US/twilightmenu/installing-3ds.md   | 29 +++++++++++++++++--
 3 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/assets/css/style.scss b/assets/css/style.scss
index ad1112f2..9b7e2025 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -83,7 +83,7 @@ img {
 	height: auto;
 }
 
-.btn, .btn a {
+.btn, .btn a, a.btn {
 	text-decoration: none;
 }
 
diff --git a/pages/_en-US/twilightmenu/installing-3ds-manual.md b/pages/_en-US/twilightmenu/installing-3ds-manual.md
index 563c19b3..75df17d3 100644
--- a/pages/_en-US/twilightmenu/installing-3ds-manual.md
+++ b/pages/_en-US/twilightmenu/installing-3ds-manual.md
@@ -1,7 +1,7 @@
 ---
 lang: en-US
 layout: redirect
-destination: installing-3ds#installing-manual
+destination: installing-3ds?tab=manual
 title: Installing (3DS, Manual)
 ---
 
diff --git a/pages/_en-US/twilightmenu/installing-3ds.md b/pages/_en-US/twilightmenu/installing-3ds.md
index 15b05b7b..0277a83c 100644
--- a/pages/_en-US/twilightmenu/installing-3ds.md
+++ b/pages/_en-US/twilightmenu/installing-3ds.md
@@ -10,7 +10,7 @@ description: How to install TWiLight Menu++ on the Nintendo 3DS
 You will first need to have Custom Firmware on your 3DS, follow [3ds.hacks.guide](https://3ds.hacks.guide) to install it
 {:.alert .alert-info}
 
-### Installing (Working Camera)
+{% capture tab-working-camera %}
 1. Open FBI and select `Remote Install`, then `Scan QR Code`
 1. Scan this QR code to install the latest version of [Universal-Updater](https://github.com/Universal-Team/Universal-Updater)<br>
    ![Universal-Updater QR code](https://db.universal-team.net/assets/images/qr/universal-updater.cia.png)
@@ -20,8 +20,9 @@ You will first need to have Custom Firmware on your 3DS, follow [3ds.hacks.guide
    - It has this icon: ![TWiLight Menu++ icon](https://raw.githubusercontent.com/DS-Homebrew/TWiLightMenu/master/booter/icon.bmp)
 1. Press <kbd class="face">A</kbd> or tap the download icon in the sidebar and select `TWiLight Menu++` to install it
    - This will take a while
+{% endcapture %}
 
-### Installing (Non-Working Camera)
+{% capture tab-non-working-camera %}
 1. Download the `Universal-Updater.cia` file from the [Universal-Updater release page](https://github.com/Universal-Team/Universal-Updater/releases)
 1. Place the `Universal-Updater.cia` file anywhere on your SD card
 1. Launch FBI on your Nintendo 3DS
@@ -33,8 +34,9 @@ You will first need to have Custom Firmware on your 3DS, follow [3ds.hacks.guide
    - It has this icon: ![TWiLight Menu++ icon](https://raw.githubusercontent.com/DS-Homebrew/TWiLightMenu/master/booter/icon.bmp)
 1. Press <kbd class="face">A</kbd> or tap the download icon in the sidebar and select `TWiLight Menu++` to install it
    - This will take a while
+{% endcapture %}
 
-### Installing (Manual)
+{% capture tab-manual %}
 1. Download the latest version of `TWiLightMenu-3DS.7z` from [the releases page](https://github.com/DS-Homebrew/TWiLightMenu/releases)
 1. Extract `TWiLightMenu-3DS.7z`
 1. Copy the `_nds` folder to your SD card root
@@ -42,3 +44,24 @@ You will first need to have Custom Firmware on your 3DS, follow [3ds.hacks.guide
 1. Copy the `roms` folder to your SD card root
 1. Copy the two `.cia` files to your SD card root
 1. On your 3DS, install the two CIAs with FBI
+{% endcapture %}
+
+<div class="tab-container">
+   <div class="pb-3">
+      <a class="tab-link btn btn-outline-secondary tab-default" href="#tab-working-camera" onclick="openTab(event, event.currentTarget)" data-tab-name="working-camera">Working Camera</a>
+      <a class="tab-link btn btn-outline-secondary" href="#tab-non-working-camera" onclick="openTab(event, event.currentTarget)" data-tab-name="non-working-camera">Non-Working Camera</a>
+      <a class="tab-link btn btn-outline-secondary" href="#tab-manual" onclick="openTab(event, event.currentTarget)" data-tab-name="manual">Manual</a>
+   </div>
+   <div id="tab-working-camera">
+      <noscript><h3>Installing (Working Camera)</h3></noscript>
+      {{ tab-working-camera | markdownify }}
+   </div>
+   <div id="tab-non-working-camera">
+      <noscript><h3>Installing (Non-Working Camera)</h3></noscript>
+      {{ tab-non-working-camera | markdownify }}
+   </div>
+   <div id="tab-manual">
+      <noscript><h3>Installing (Manual)</h3></noscript>
+      {{ tab-manual | markdownify }}
+   </div>
+</div>