From a9eed9e3ea649b95111d1cf9638e166ff2bb1847 Mon Sep 17 00:00:00 2001
From: NinjaCheetah <58050615+NinjaCheetah@users.noreply.github.com>
Date: Sun, 23 Oct 2022 20:26:55 -0400
Subject: [PATCH] Improved gallery for viewing PFP variants

---
 _includes/nav.html                            |  4 +-
 graphics/general/index.html                   | 65 ++++++++++++++++++-
 .../general/ninjacheetah-2020-variations.html | 56 ----------------
 3 files changed, 65 insertions(+), 60 deletions(-)
 delete mode 100644 graphics/general/ninjacheetah-2020-variations.html

diff --git a/_includes/nav.html b/_includes/nav.html
index 0f82e4c..e8e5ac6 100644
--- a/_includes/nav.html
+++ b/_includes/nav.html
@@ -5,10 +5,10 @@
 {% endif %}
     <div class="container-fluid">
         <a class="navbar-brand" href="#">NinjaCheetah's Site</a>
-        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarPrimary" aria-controls="navbarPrimary" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
         </button>
-        <div class="collapse navbar-collapse" id="navbarText">
+        <div class="collapse navbar-collapse" id="navbarPrimary">
             <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                 <li class="nav-item">
                     <a class="nav-link" href="/">Home</a>
diff --git a/graphics/general/index.html b/graphics/general/index.html
index 122fcb3..70c57d2 100644
--- a/graphics/general/index.html
+++ b/graphics/general/index.html
@@ -16,12 +16,14 @@ layout: default
 <div class="container pb-5">
   <nav class="navbar navbar-expand-lg sticky-top bg-light navbar-light">
     <div class="container-fluid">
-      <a class="navbar-brand" href="#">Back To Top</a>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
       <div class="collapse navbar-collapse" id="navbarText">
         <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+          <li class="nav-item">
+            <a class="nav-link" href="#">Back to Top</a>
+          </li>
           <li class="nav-item">
             <a class="nav-link" href="#icons">Icons</a>
           </li>
@@ -106,7 +108,9 @@ layout: default
           <h6 class="card-subtitle mb-2 text-muted">Personal Profile Picture</h6>
           <p class="card-text">First non-Minecraft profile picture. Colors are the bisexual flag. This PFP had many variations.</p>
           <a href="/assets/graphics/ninjacheetah-2020-09-20.png" class="btn btn-primary">Open Original</a>
-          <a href="/graphics/general/ninjacheetah-2020-variations.html" class="btn btn-outline-primary">Browse Variations</a>
+          <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
+            Browse Variations
+          </button>
         </div>
       </div>
     </div>
@@ -133,4 +137,61 @@ layout: default
       </div>
     </div>
   </div>
+  <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h1 class="modal-title fs-5" id="staticBackdropLabel">2020 NinjaCheetah PFP Variations</h1>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <div id="carouselExampleCaptions" class="carousel slide text-center" data-bs-ride="false">
+            <div class="carousel-indicators">
+              <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
+              <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
+              <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
+              <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="3" aria-label="Slide 4"></button>
+            </div>
+            <div class="carousel-inner">
+              <div class="carousel-item active">
+                <img src="/assets/graphics/ninjacheetah-2020-09-20-halloween.png" class="d-block h-100" alt="...">
+                <div class="carousel-caption d-none d-md-block">
+                  <h5>Halloween Variant</h5>
+                </div>
+              </div>
+              <div class="carousel-item">
+                <img src="/assets/graphics/ninjacheetah-2020-09-20-christmas.png" class="d-block h-100" alt="...">
+                <div class="carousel-caption d-none d-md-block">
+                  <h5>Christmas Variant</h5>
+                </div>
+              </div>
+              <div class="carousel-item">
+                <img src="/assets/graphics/ninjacheetah-2020-09-20-pride.png" class="d-block h-100" alt="...">
+                <div class="carousel-caption d-none d-md-block">
+                  <h5>Pride Month Variant</h5>
+                </div>
+              </div>
+              <div class="carousel-item">
+                <img src="/assets/graphics/ninjacheetah-2020-09-20-lite.png" class="d-block h-100" alt="...">
+                <div class="carousel-caption d-none d-md-block">
+                  <h5 style="color: black">"NinjaCheetah Lite" Variant</h5>
+                </div>
+              </div>
+            </div>
+            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
+              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+              <span class="visually-hidden">Previous</span>
+            </button>
+            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
+              <span class="carousel-control-next-icon" aria-hidden="true"></span>
+              <span class="visually-hidden">Next</span>
+            </button>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
\ No newline at end of file
diff --git a/graphics/general/ninjacheetah-2020-variations.html b/graphics/general/ninjacheetah-2020-variations.html
deleted file mode 100644
index adca04d..0000000
--- a/graphics/general/ninjacheetah-2020-variations.html
+++ /dev/null
@@ -1,56 +0,0 @@
----
-title: 2020 NinjaCheetah PFP Variations
-layout: default
----
-
-<style>
-    .carousel-inner{
-        width:100%;
-    }
-    .carousel-inner img{
-        display:inline-block  !important;
-    }
-</style>
-
-<div id="carouselExampleCaptions" class="carousel slide text-center" data-bs-ride="false">
-    <div class="carousel-indicators">
-        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
-        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
-        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
-        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="3" aria-label="Slide 4"></button>
-    </div>
-    <div class="carousel-inner">
-        <div class="carousel-item active">
-            <img src="/assets/graphics/ninjacheetah-2020-09-20-halloween.png" class="d-block h-100" alt="...">
-            <div class="carousel-caption d-none d-md-block">
-                <h5>Halloween Variant</h5>
-            </div>
-        </div>
-        <div class="carousel-item">
-            <img src="/assets/graphics/ninjacheetah-2020-09-20-christmas.png" class="d-block h-100" alt="...">
-            <div class="carousel-caption d-none d-md-block">
-                <h5>Christmas Variant</h5>
-            </div>
-        </div>
-        <div class="carousel-item">
-            <img src="/assets/graphics/ninjacheetah-2020-09-20-pride.png" class="d-block h-100" alt="...">
-            <div class="carousel-caption d-none d-md-block">
-                <h5>Pride Month Variant</h5>
-            </div>
-        </div>
-        <div class="carousel-item">
-            <img src="/assets/graphics/ninjacheetah-2020-09-20-lite.png" class="d-block h-100" alt="...">
-            <div class="carousel-caption d-none d-md-block">
-                <h5 style="color: black">"NinjaCheetah Lite" Variant</h5>
-            </div>
-        </div>
-    </div>
-    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
-        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-        <span class="visually-hidden">Previous</span>
-    </button>
-    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
-        <span class="carousel-control-next-icon" aria-hidden="true"></span>
-        <span class="visually-hidden">Next</span>
-    </button>
-</div>
\ No newline at end of file