Added an About category with Partners view (#1pv7h) (#50)

* Added Partners view, and Navbar item

* Moved info/rules to about/rules and fixed references

* Added Partner images, and populated the partners page

* Fixed responsiveness on smaller displays

Added like 2 characters to the column tag, to enable stacking of columns if the display
width is lower than 960 pixels.

* Fixed indentation

* Updated Code Monkeys Banner

Added the shiny new CM Banner, and rearranged the partner cards.

* Fixed newlines at end of HTML files

* Partners page updated to generate from JSON file

• The templates/main/about/partners.html file now uses the
static/partners.json file to generate the Partner cards.

• Flexboxes are nice.

* Rearranged containers on Partners page

I have no idea how flexboxes work :DDD

* Updated Partners page to fix styling issues

* Moved tag styling to the appropriate CSS file

* Changed code style of stylesheet :D

* Addresses Lemon's code style issues

• Partner cards now have id="partner-card", which is selected with a CSS
selector for styling, rather than styling all card objects.
• Removed nonbreaking spaces that PyCharm didn't tell me about
• Indented conditional HTML content to match Jinja conditionals
• Fixed unclosed image tag

* Removed div bloating, and increased specifity of CSS selection

5 files changed, 95 insertions, 10 deletions

diff --git a/templates/main/about/index.html b/templates/main/about/index.html
new file mode 100644
index 00000000..47db8f4e
--- /dev/null
+++ b/templates/main/about/index.html
@@ -0,0 +1,34 @@
+{% extends "main/base.html" %}
+{% block title %}About{% endblock %}
+{% block og_title %}About{% endblock %}
+{% block og_description %}Partners links, and information about the server{% endblock %}
+{% block content %}
+    <div class="uk-section">
+        <div class="uk-container uk-container-small">
+            <article class="uk-article">
+                <h1 class="uk-article-title hover-title" id="top">
+                    About
+
+                    <a href="#top" class="uk-text-primary" title="Permanent link to this header">
+                        <i class="fas fa-paragraph" data-fa-transform="shrink-8"></i>
+                    </a>
+                </h1>
+                <p class="uk-article-meta">
+                    Learn about the server, find links to our Partners, and more!
+                </p>
+                <p>
+                    <strong>Server Partners</strong>
+                    <a href="{{ url_for('main.about.partners') }}"><i class="fas fa-link"></i></a>
+                    <br />
+                    <span class="uk-text-meta">Links to our Partner servers!</span>
+                </p>
+                <p>
+                    <strong>Server Rules</strong>
+                    <a href="{{ url_for('main.about.rules') }}"><i class="fas fa-link"></i></a>
+                    <br />
+                    <span class="uk-text-meta">Rules and infraction information for our server</span>
+                </p>
+            </article>
+        </div>
+    </div>
+{% endblock %}
diff --git a/templates/main/about/partners.html b/templates/main/about/partners.html
new file mode 100644
index 00000000..83803265
--- /dev/null
+++ b/templates/main/about/partners.html
@@ -0,0 +1,46 @@
+{% extends "main/base.html" %}
+{% block title %}Partners{% endblock %}
+{% block og_title %}Partners{% endblock %}
+{% block og_description %}List and Links to Partner servers{% endblock %}
+{% block content %}
+    <div class="uk-section">
+        <div class="uk-container uk-container-small">
+            <article class="uk-article">
+                <h1 class="uk-article-title hover-title" id="top">
+                    Partners
+                    <a href="#top" class="uk-text-primary" title="Permanent link to this header">
+                        <i class="fas fa-paragraph" data-fa-transform="shrink-8"></i>
+                    </a>
+                </h1>
+                <div class="uk-column-1-2@m uk-column-divider" id="partner-cards">
+                    {% if partners is none %}
+                        <div class="uk-alert-danger" uk-alert>
+                            <p>
+                                We were unable to load the <code>partners.json</code> file. If you see this, please
+                                notify us!
+                            </p>
+                        </div>
+                    {% else %}
+                        {% for partner_name, partner_data in partners.items() %}
+                            <div class="uk-card-default uk-card-hover uk-inline">
+                                <div class="uk-card-media-top">
+                                    <a href="{{ partner_data['invite'] }}">
+                                        <img src="{{ partner_data['banner'] }}" alt="{{ partner_name }}"/>
+                                    </a>
+                                </div>
+                                <div class="uk-card-body">
+                                    <p>{{ partner_data['description'] }}</p>
+                                </div>
+                                <div class="uk-card-footer">
+                                    <a href="{{ partner_data['invite'] }}" class="uk-button uk-button-text">
+                                        Join the server
+                                    </a>
+                                </div>
+                            </div>
+                        {% endfor %}
+                    {% endif %}
+                </div>
+            </article>
+        </div>
+    </div>
+{% endblock %}
diff --git a/templates/main/info/rules.html b/templates/main/about/rules.html
index e4ff0609..e4ff0609 100644
--- a/templates/main/info/rules.html
+++ b/templates/main/about/rules.html
diff --git a/templates/main/info/index.html b/templates/main/info/index.html
index 2d72d48f..07e1a4d8 100644
--- a/templates/main/info/index.html
+++ b/templates/main/info/index.html
@@ -37,13 +37,6 @@
                     <br />
                     <span class="uk-text-meta">A page full of useful resources for learning and working with Python</span>
                 </p>
-
-                <p>
-                    <strong>Server Rules</strong> &nbsp;
-                    <a href="{{ url_for('main.info.rules') }}"><i class="fas fa-link"></i></a>
-                    <br />
-                    <span class="uk-text-meta">Rules and infraction information for our server</span>
-                </p>
             </article>
         </div>
     </div>
diff --git a/templates/main/navigation.html b/templates/main/navigation.html
index 214451d8..a615468e 100644
--- a/templates/main/navigation.html
+++ b/templates/main/navigation.html
@@ -66,10 +66,22 @@
                                 <li><a href="{{ url_for('main.info.resources') }}">Resources</a></li>
                             {% endif %}
 
-                            {% if current_page == "info/rules" %}
-                                <li class="uk-active"><a href="{{ url_for('main.info.rules') }}">Server Rules</a></li>
+                            {% if current_page.startswith("about") %}
+                                <li class="uk-nav-header uk-active"><a href="{{ url_for('main.about.index') }}">About</a></li>
                             {% else %}
-                                <li><a href="{{ url_for('main.info.rules') }}">Server Rules</a></li>
+                                <li class="uk-nav-header"><a href="{{ url_for('main.about.index') }}">About</a></li>
+                            {% endif %}
+
+                            {% if current_page == "about/partners" %}
+                                <li class="uk-active"><a href="{{ url_for('main.about.partners') }}">Partners</a></li>
+                            {% else %}
+                                <li><a href="{{ url_for('main.about.partners') }}">Partners</a></li>
+                            {% endif %}
+
+                            {% if current_page == "about/rules" %}
+                                <li class="uk-active"><a href="{{ url_for('main.about.rules') }}">Server Rules</a></li>
+                            {% else %}
+                                <li><a href="{{ url_for('main.about.rules') }}">Server Rules</a></li>
                             {% endif %}
 
                             <li class="uk-nav-divider"></li>