Add projects page for including download links to our mods

So far just adding active ones, will add others after testing on the live site

_config.yml

@@ -45,6 +45,7 @@ sass:
 header_pages:
 - about.md
 - docs/index.md
+- projects.md
 
 # Exclude from processing.
 # The following items will not be processed, by default.

_includes/project.html

@@ -0,0 +1,36 @@
+<div class="uk-card uk-card-default uk-card-body uk-card-hover uk-card-small">
+    <div uk-grid data-uk-grid-margin class="">
+        <div class="uk-width-1-1@s uk-width-1-4@m uk-text-center">
+            <img src="/assets/images/projects/{{include.name}}.png"/>
+        </div>
+        <div class="uk-width-1-1@s uk-width-1-2@m">
+            <h3 id="{{include.name}}" class="project-title">{{include.title | default: include.name}}</h3>
+            <p>{{include.description}}</p>
+        </div>
+        <div class="uk-width-1-1@s uk-width-1-4@m project-links">
+            <a href="https://www.curseforge.com/minecraft/mc-mods/{{include.curseforge | default: include.name}}" 
+               class="uk-width-1-1 uk-button uk-button-success uk-button-small uk-text-bold">
+                CurseForge
+            </a>
+            {% unless include.modrinth == false %}
+                <a href="https://modrinth.com/mod/{{include.modrinth | default: include.name}}"
+                   class="uk-width-1-1 uk-button uk-button-success uk-button-small uk-text-bold">
+                    Modrinth
+                </a>
+            {% endunless %}
+            {% assign github-author = include.github-author | default: "SlimeKnights" %}
+            {% assign github-project = include.github | default: include.name %}
+            {% assign github-url = "https://github.com/" | append: github-author | append: "/" | append: github-project %}
+            {% unless include.inactive %}
+                <a href="{{github-url}}/issues"
+                   class="uk-width-1-1 uk-button uk-button-danger uk-button-small">
+                    Report a Bug
+                </a>
+            {% endunless %}
+            <a href="{{github-url}}"
+               class="uk-width-1-1 uk-button uk-button-default uk-button-small">
+                Source Code
+            </a>
+        </div>
+    </div>
+</div>

assets/css/slimeknights.scss

@@ -52,4 +52,28 @@ h2 {
 /* Highlight link header */
 :target {
     background-color: rgba(255, 255, 0, 0.28);
+}
+
+/* Project page */
+.project-list > .uk-card:not(:last-child) {
+    margin-bottom: 15px;
+}
+.project-links .uk-button {
+    &.uk-button-primary, &.uk-button-danger {
+        color: #fff !important;
+    }
+
+    &:not(:last-child) {
+        margin-bottom: 5px;
+    }
+}
+.project-title {
+    margin-bottom: -10px;
+}
+
+/* Green button */
+.uk-button-success {
+    background-color: #32a852;
+    color: #fff !important;
+    border: 1px solid transparent;
 }

projects.md

@@ -0,0 +1,38 @@
+---
+layout: page
+title: Projects
+permalink: /projects/
+---
+
+This page lists download links for all SlimeKnights mods.
+
+## Active Projects
+
+<div class="project-list">
+    {% include project.html
+      name="tinkers-construct" title="Tinkers' Construct"
+      github="TinkersConstruct"
+      description="Tinkers' Construct is a mod about putting tools together in a wide variety of ways, then modifying them until they turn into something else."
+    %}
+    {% include project.html
+      name="tinkers-things" title="Tinkers' Things"
+      github="TinkersThings" curseforge="tinkers-json-things"
+      description="Official addon for Tinkers' Construct adding a variety of content written purely in JSON."
+    %}
+    {% include project.html
+      name="natura" title="Natura"
+      github="Natura" github-author="progwml6"
+      description="Natura is a mod that aims to spice up the world with interesting worldgen."
+    %}
+    {% include project.html
+      name="tinkers-mechworks" title="Tinkers' Mechworks"
+      github="TinkersMechworks"
+      description="Tinkers' Mechworks is a mod that adds various redstone machines such as drawbridges."
+    %}
+    {% include project.html
+      name="mantle"
+      title="Mantle"
+      github="Mantle"
+      description="Mantle is a mod containing shared code for SlimeKnights mods. Why? For science and slime, why else?"
+    %}
+</div>