From c08b0028de43d6a34a28dc55a42fe5aa623a2c97 Mon Sep 17 00:00:00 2001
From: KZacharski <puffercatt@gmail.com>
Date: Sat, 26 Aug 2023 17:47:05 +0200
Subject: [PATCH] buttons buttons buttons

---
 .../ic_fluent_chevron_right_24_filled.svg     |  1 +
 docs/docs/introduction.html                   | 40 ++++++++++++
 docs/docs/style.css                           | 61 +++++++++++++++++++
 3 files changed, 102 insertions(+)
 create mode 100644 docs/docs/assets/ic_fluent_chevron_right_24_filled.svg

diff --git a/docs/docs/assets/ic_fluent_chevron_right_24_filled.svg b/docs/docs/assets/ic_fluent_chevron_right_24_filled.svg
new file mode 100644
index 0000000..bdc7e2d
--- /dev/null
+++ b/docs/docs/assets/ic_fluent_chevron_right_24_filled.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.293 4.293a1 1 0 0 0 0 1.414L14.586 12l-6.293 6.293a1 1 0 1 0 1.414 1.414l7-7a1 1 0 0 0 0-1.414l-7-7a1 1 0 0 0-1.414 0Z" fill="#ffffff"/></svg>
\ No newline at end of file
diff --git a/docs/docs/introduction.html b/docs/docs/introduction.html
index 927988b..85f728c 100644
--- a/docs/docs/introduction.html
+++ b/docs/docs/introduction.html
@@ -22,6 +22,46 @@
     <p>diji currently works on Linux, macOS and Windows, supporting both amd64/i386 and arm64/arm architectures (except for macOS because it doesn't currently support any 32-bit architectures). It's also possible to run it on other operating systems/architectures by building it from source which thanks to it being written in golang is very easy.</p>
     <h3>Downloading diji</h3>
     <p>Download the file corresponding with your OS and architecture from <a href="https://github.com/KZacharski/diji/releases" class="linkeffect">GitHub releases</a> then proceed to <a href="./installation.html" class="linkeffect">Installation</a>.</p>
+    
+
+    <div class="container2">
+     <!-- <div class="prev ge">
+        <a href="./index.html" style="text-decoration: none; color: white; height: 100%; width: 100%;">
+          <div style="width: 100%; height: 100%; display: flex; align-items: center;">
+          <div class="nextcontentparent">
+          <div class="getstartedcontent">
+          <img src="./assets/ic_fluent_chevron_left_24_filled.svg" height="30px" class="gep nep2">
+          <h3 class="gep nep">Homepage</h3>
+          <p class="gep gepar nepar">Previous page</p>
+        </div>
+        </div>
+        </div>
+        </a>
+        </div>-->
+        
+        
+          <div class="next ge">
+            <a href="./installation.html" style="text-decoration: none; color: white; height: 100%; width: 100%;">
+              <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: right; text-align: right;">
+              <div class="nextcontentparent">
+              <div class="getstartedcontent">
+              <div style="display: flex; justify-content: right;">
+              <img src="./assets/ic_fluent_chevron_right_24_filled.svg" height="30px" class="gep nep2">
+              </div>
+              <h3 class="gep nep">Installation</h3>
+              <p class="gep gepar nepar">Next page</p>
+            </div>
+            </div>
+            </div>
+            </a>
+            </div>
+       
+      </div>
+      </div>
+    </div>
+
+
+
   </div>
   </div>
   
diff --git a/docs/docs/style.css b/docs/docs/style.css
index 5730366..b25706f 100644
--- a/docs/docs/style.css
+++ b/docs/docs/style.css
@@ -193,12 +193,73 @@ color: white;
       "getstarted install"
       "favicon config";
   }}
+
+ /* .container2 {  display: grid;
+    
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 1fr;
+    gap: 20px 0;
+    margin-top: 30px;
+    margin-bottom: 50px;
+    grid-auto-flow: column;
+    grid-template-areas: 
+    "prev"
+    "next";
+  }
+
+  @media only screen and (min-width: 25em) {  .container2 {
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr;
+    gap: 20px 20px;
+    
+   
+    
+    margin-top: 30px;
+    grid-auto-flow: row;
+    grid-template-areas:
+      "prev next";
+  }}*/
+
+  .container2 {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr;
+    gap: 0 20px;
+    margin-top: 30px;
+    margin-bottom: 50px;
+    grid-auto-flow: row;
+    grid-template-areas:
+      "prev next";
+  }
   
   .getstarted { grid-area: getstarted; 
   background-color: rgb(0, 0, 0);
 
   
   }
+
+  .prev { grid-area: prev; 
+    background-color: rgb(0, 0, 0);
+  
+    
+    }
+    .next { grid-area: next; 
+      background-color: rgb(0, 0, 0);
+    
+      
+      }
+
+      @media only screen and (max-width: 25em) {  .nep { 
+        font-weight: 400;
+        font-size:medium;
+      }
+    .nepar {
+      display: none;
+    }
+    .nep2 {
+      height: 25px;
+    }
+    }
   
   .install { grid-area: install; 
     background-color: #000;}