Renamed css, created buttons for previous and next page

Also changed the color gradient of topics heading
GarudaNvim · Oct 28, 2024 · fd84f1c · fd84f1c
1 parent 4976c6d
commit fd84f1c
Show file tree

Hide file tree

Showing 10 changed files with 224 additions and 2 deletions.
diff --git a/docs/assets/css/extra.css → docs/assets/css/fonts.css b/docs/assets/css/extra.css → docs/assets/css/fonts.css
@@ -36,7 +36,7 @@
 }
 
 .th-color {
-    background: linear-gradient(to right, #FF5C5C, #FF9B21); /* Gradient colors */
+    background: linear-gradient(to top, #FF5C5C, #FF9B21); /* Gradient colors */
     -webkit-background-clip: text;
     color: transparent;
 }

diff --git a/docs/assets/css/nav_link.css b/docs/assets/css/nav_link.css
@@ -0,0 +1,92 @@
+/*for navigation links in the bottom of the page*/
+.navigation {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 2rem;
+}
+
+.index {
+    justify-content: flex-end; /* Align items to the right */
+    margin-right: 0;
+}
+
+.nav-link {
+    text-decoration: none;
+    padding: 0.7rem;
+    border: 3px solid;
+    border-radius: 23px;
+    border-color: #3B3B3B;
+    width: 48%;
+}
+[data-md-color-scheme="default"] .nav-link {  /* Light mode color */
+    border-color: #C5C5C5;
+}
+
+.nav-link:hover {
+    border-color: white;
+}
+[data-md-color-scheme="default"] .nav-link:hover {  /* Light mode color */
+    border-color: black;
+}
+
+.index-right {
+    margin-right: 0;
+}
+
+.nav-content {
+    display: flex;
+    align-items: center;
+}
+
+.nav-text {
+    display: flex;
+    flex-direction: column; /* or use block display on spans */
+    color: white;
+}
+[data-md-color-scheme="default"] .nav-text {  /* Light mode color */
+    color: black;
+}
+
+.nav-link:hover .nav-text span{
+    color: #ED7377;
+}
+[data-md-color-scheme="default"] .nav-link:hover .nav-text span{  /* Light mode color */
+    color: #E32227;
+}
+
+.left {
+    align-items: flex-start; /* Align items to the left */
+    text-align: left; /* Optional: aligns text to the left */
+}
+
+.right {
+    justify-content: flex-end; /* Align items to the right */
+    width: 100%; /* Ensure the container takes the full width */
+    text-align: right; /* Align text to the right */
+}
+
+.left .label,
+.left .page-name {
+    display: block;
+    padding-left: 22px;
+}
+
+.right .label,
+.right .page-name {
+    display: block; /* Force items onto separate lines */
+    padding-right: 20px;
+
+}
+
+/*Font sizes*/
+.arrow {
+    font-size: 1.2rem;
+}
+
+.label {
+    font-size: 0.85rem;
+}
+
+.page-name {
+    font-size: 1.2rem;
+}
diff --git a/docs/features.md b/docs/features.md
@@ -45,3 +45,24 @@ GarudaNvim is more than just another Neovim setup – it’s a finely tuned mach
 ---
 
 Take GarudaNvim for a spin, and you’ll see – it’s the Neovim setup you didn’t know you needed. It’s efficient, it’s powerful, and yes, it’s a bit sarcastic. But when you’re coding at warp speed, you’ll get it.
+
+<div class="navigation">
+    <a href="/installation" class="nav-link">
+        <div class="nav-content">
+            <span class="arrow">⬅️</span>
+            <div class="nav-text left">
+                <span class="label">Previous</span>
+                <span class="page-name">Installation</span>
+            </div>
+        </div>
+    </a>
+    <a href="/plugins" class="nav-link">
+        <div class="nav-content">
+            <div class="nav-text right">
+                <span class="label">Next</span>
+                <span class="page-name">Plugins</span>
+            </div>
+            <span class="arrow">➡️</span>
+        </div>
+    </a>
+</div>
diff --git a/docs/index.md b/docs/index.md
@@ -86,3 +86,15 @@ Happy Coding with GarudaNvim 💻 </br>
 Welcome to the Cult (umm, I meant Club :P)
 
 P.S. – This project is the brainchild of **Priyanshu Ranjan**, a final-year student at **IIT Kharagpur**, and he’s poured his heart (and far too many late-night hours) into it.
+
+<div class="navigation index">
+    <a href="/installation" class="nav-link">
+        <div class="nav-content">
+            <div class="nav-text right">
+                <span class="label">Next</span>
+                <span class="page-name">Installation</span>
+            </div>
+            <span class="arrow">➡️</span>
+        </div>
+    </a>
+</div>
diff --git a/docs/installation.md b/docs/installation.md
@@ -30,3 +30,24 @@ rm -f uninstallGarudaNvim.sh
 </br>
 
 For more information on the script used for Installation (and Uninstallation), checkout our [Installer Repo](https://github.com/GarudaNvim/Installer)
+
+<div class="navigation">
+    <a href="/" class="nav-link">
+        <div class="nav-content">
+            <span class="arrow">⬅️</span>
+            <div class="nav-text left">
+                <span class="label">Previous</span>
+                <span class="page-name">Home</span>
+            </div>
+        </div>
+    </a>
+    <a href="/features" class="nav-link">
+        <div class="nav-content">
+            <div class="nav-text right">
+                <span class="label">Next</span>
+                <span class="page-name">Features</span>
+            </div>
+            <span class="arrow">➡️</span>
+        </div>
+    </a>
+</div>
diff --git a/docs/keymaps.md b/docs/keymaps.md
@@ -161,3 +161,24 @@ For when you need to manipulate columns of text like a true hacker.
 ## <span class="sh-font tsh-color">Additional Customization</span>
 
 GarudaNvim allows you to modify or extend these keymaps based on your workflow. We believe in the power of personalization. If these aren’t enough, feel free to dive into the `keymaps.lua` file and add more.
+
+<div class="navigation">
+    <a href="/plugins" class="nav-link">
+        <div class="nav-content">
+            <span class="arrow">⬅️</span>
+            <div class="nav-text left">
+                <span class="label">Previous</span>
+                <span class="page-name">Plugins</span>
+            </div>
+        </div>
+    </a>
+    <a href="/whichkey" class="nav-link">
+        <div class="nav-content">
+            <div class="nav-text right">
+                <span class="label">Next</span>
+                <span class="page-name">Which-Key</span>
+            </div>
+            <span class="arrow">➡️</span>
+        </div>
+    </a>
+</div>
diff --git a/docs/plugins.md b/docs/plugins.md
@@ -133,3 +133,24 @@ Plenary is a library of common utilities used by many Neovim plugins. It provide
 ---
 
 These plugins collectively enhance the functionality and workflow in GarudaNvim, making it a highly efficient and customizable Neovim distribution.
+
+<div class="navigation">
+    <a href="/features" class="nav-link">
+        <div class="nav-content">
+            <span class="arrow">⬅️</span>
+            <div class="nav-text left">
+                <span class="label">Previous</span>
+                <span class="page-name">Features</span>
+            </div>
+        </div>
+    </a>
+    <a href="/keymaps" class="nav-link">
+        <div class="nav-content">
+            <div class="nav-text right">
+                <span class="label">Next</span>
+                <span class="page-name">Keymaps</span>
+            </div>
+            <span class="arrow">➡️</span>
+        </div>
+    </a>
+</div>
diff --git a/docs/themes.md b/docs/themes.md
@@ -77,3 +77,15 @@ To tweak an existing theme, modify the respective configuration file at:
 ```
 
 In this file, you can change colors, contrasts, and more to match your preference.
+
+<div class="navigation">
+    <a href="/whichkey" class="nav-link">
+        <div class="nav-content">
+            <span class="arrow">⬅️</span>
+            <div class="nav-text left">
+                <span class="label">Previous</span>
+                <span class="page-name">Which-Key</span>
+            </div>
+        </div>
+    </a>
+</div>
diff --git a/docs/whichkey.md b/docs/whichkey.md
@@ -99,3 +99,24 @@ The setup also includes scroll mapping (`<c-d>` to scroll down, `<c-u>` to scrol
 ---
 
 This should provide a complete overview of your keybindings and additional details from your `which-key` configuration in a Markdown-friendly format.
+
+<div class="navigation">
+    <a href="/keymaps" class="nav-link">
+        <div class="nav-content">
+            <span class="arrow">⬅️</span>
+            <div class="nav-text left">
+                <span class="label">Previous</span>
+                <span class="page-name">Keymaps</span>
+            </div>
+        </div>
+    </a>
+    <a href="/themes" class="nav-link">
+        <div class="nav-content">
+            <div class="nav-text right">
+                <span class="label">Next</span>
+                <span class="page-name">Themes</span>
+            </div>
+            <span class="arrow">➡️</span>
+        </div>
+    </a>
+</div>
diff --git a/mkdocs.yml b/mkdocs.yml
@@ -52,7 +52,8 @@ plugins:
   - search
 
 extra_css:
-  - assets/css/extra.css
+  - assets/css/fonts.css
+  - assets/css/nav_link.css
 
 # Social and Metadata Information
 extra: