Resolve #75 by adding provider dropdown (#131)

* feat: github nav button, resolve #75

* fix: PR issues

* fix: invert when in light mode (easy way to cheat img)

Author: MichaelHillcox

_data/topnav.yml

@@ -8,5 +8,7 @@ links:
     page: develop.md
   - title: discuss
     page: discuss.md
+  - title: Docs
+    url: https://docs.fabricmc.net/
   - title: wiki
     url: https://fabricmc.net/wiki/

_includes/header.html

@@ -20,9 +20,13 @@
         <div class="trigger">
           {% for link in site.data.topnav.links %}
             {% if link.page %}
-              <a class="page-link" href="{% link {{ link.page }} %}">{{ link.title | escape | capitalize }}</a>
+              <a class="page-link" href="{% link {{ link.page }} %}">
+                {{ link.title | escape | capitalize }}
+              </a>
             {% else %}
-              <a class="page-link" href="{{ link.url }}">{{ link.title | escape | capitalize }}</a>
+              <a class="page-link" href="{{ link.url }}">
+                {{ link.title | escape | capitalize }}
+              </a>
             {% endif %}
           {% endfor %}
         </div>

_sass/fabric.scss

@@ -12,6 +12,10 @@
 
 .site-nav {
 	margin-top: 12px;
+
+	.page-link img {
+		vertical-align: center;
+	}
 }
 
 .page-content {
@@ -207,4 +211,63 @@ p {
 			object-fit: cover;
 		}
 	}
+}
+
+.download-api-container {
+	display: flex;
+	position: relative;
+
+	@media (prefers-color-scheme: light) {
+		img {
+			filter: invert(1);
+		}
+	}
+
+	> a {
+		flex: 1;
+		border-radius: 5px 0 0 5px;
+	}
+
+	.download-api {
+		cursor: pointer;
+		display: flex;
+		flex-direction: column;
+
+		.button {
+			border-left: none;
+			border-radius: 0 5px 5px 0;
+		}
+
+		&:focus-within .download-api-dropdown {
+			opacity: 1;
+			visibility: visible;
+			transform: translateY(0);
+		}
+
+		.download-api-dropdown {
+			position: absolute;
+			width: calc(100% - 2rem - 4px);
+			background: $background-color;
+			border: 2px solid $button-color;
+			border-radius: 5px;
+			top: calc(100% + 1rem); // Match gapping on the button row
+			right: 0;
+			display: flex;
+			flex-direction: column;
+			gap: .5rem;
+			padding: 1rem;
+			opacity: 0;
+			visibility: hidden;
+			transform: translateY(1rem);
+			transition: visibility .25s ease-in-out,
+			transform .25s ease-in-out,
+			opacity .25s ease-in-out;
+
+			a {
+				display: flex;
+				gap: .75rem;
+				align-items: center;
+			}
+		}
+	}
 }

assets/icons/curseforge-logo.svg

@@ -19,7 +19,31 @@ layout: default
             <section>
                <p class="component-body">The Fabric Loader download above is the bare minimum. Combine it with Fabric API to get all the important extra APIs mods use. It has to be put into the mods folder like any other mod.</p>
             </section>
-            <a class="button secondary" href="https://www.curseforge.com/minecraft/mc-mods/fabric-api/files">Download Fabric API</a>
+            <div class="download-api-container">
+                <a class="button secondary" href="https://www.curseforge.com/minecraft/mc-mods/fabric-api/files">
+                    <img alt="CurseForge logo" src="/assets/icons/curseforge-logo.svg" width="20" />
+                    Download Fabric API
+                </a>
+                <div class="download-api" tabindex="-1">
+                    <div class="button secondary">
+                        <span>▼</span>
+                    </div>
+                    <div class="download-api-dropdown">
+                        <a href="https://www.curseforge.com/minecraft/mc-mods/fabric-api/files">
+                            <img alt="CurseForge logo" src="/assets/icons/curseforge-logo.svg" width="20" />
+                            CurseForge
+                        </a>
+                        <a href="https://modrinth.com/mod/fabric-api/versions">
+                            <img alt="Modrinth logo" src="/assets/icons/modrinth-logo.svg" width="20" />
+                            Modrinth
+                        </a>
+                        <a href="https://github.com/FabricMC/fabric/releases">
+                            <img alt="Github logo" src="/assets/icons/github-logo.svg" width="20" />
+                            GitHub
+                        </a>
+                    </div>
+                </div>
+            </div>
          </article>
          <article class="column">
             <h3>Develop</h3>