Add "Complementary" subsection in the "Applications" section (#32)

Closes #32

Author: lah7

_layouts/base.html

@@ -211,6 +211,29 @@ <h4>{{ app.name }}</h4>
                             </div>
                         </div>
                     </div>
+
+                    {% if page.apps.complementary %}
+                        <h3>Complementary</h3>
+                        <p>{{ page.apps.complementary_intro }}</p>
+                        <div class="row-fluid">
+                            <div class="row">
+                                <div class="features-grid apps">
+                                {% for app in page.apps.complementary %}
+                                    <div class="feature">
+                                        <a href="{{ app.url }}">
+                                            {% if app.logo contains "fa " %}
+                                                <span class="{{ app.logo }} fa-3x"></span>
+                                            {% else %}
+                                                <img src="{{ app.logo }}"/>
+                                            {% endif %}
+                                            <h4>{{ app.name }}</h4>
+                                        </a>
+                                    </div>
+                                    {% endfor %}
+                                </div>
+                            </div>
+                        </div>
+                    {% endif %}
                 </div>
             </div>
 

css/openrazer.css

@@ -436,6 +436,10 @@ footer p em {
 /****************************
  * Misc.
 *****************************/
+.section .row-fluid + h3 {
+    margin-top: 32px;
+}
+
 .danger > h5 {
     padding-top: 8px;
     padding-bottom: 8px;

img/apps/input-remapper.svg

@@ -326,6 +326,12 @@ apps:
           technologies:
             - Python
 
+    complementary_intro: "These applications can further extend your device's functionality, but are not related to OpenRazer."
+    complementary:
+        - name: Input Remapper
+          url: https://github.com/sezanzeb/input-remapper
+          logo: /img/apps/input-remapper.svg
+
 links:
     - label: View Source
       icon: fa-brands fa-github