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

16 files changed, 164 insertions, 18 deletions

diff --git a/pysite/views/main/about/__init__.py b/pysite/views/main/about/__init__.py
new file mode 100644
index 00000000..9bad5790
--- /dev/null
+++ b/pysite/views/main/about/__init__.py
@@ -0,0 +1 @@
+# coding=utf-8
diff --git a/pysite/views/main/about/index.py b/pysite/views/main/about/index.py
new file mode 100644
index 00000000..a3fecc31
--- /dev/null
+++ b/pysite/views/main/about/index.py
@@ -0,0 +1,10 @@
+# coding=utf-8
+from pysite.base_route import RouteView
+
+
+class IndexView(RouteView):
+    path = "/about/"
+    name = "about.index"
+
+    def get(self):
+        return self.render("main/about/index.html")
diff --git a/pysite/views/main/about/partners.py b/pysite/views/main/about/partners.py
new file mode 100644
index 00000000..b5e7f587
--- /dev/null
+++ b/pysite/views/main/about/partners.py
@@ -0,0 +1,20 @@
+# coding=utf-8
+import json
+from logging import getLogger
+
+from pysite.base_route import RouteView
+
+try:
+    with open("static/partners.json") as fh:
+        partners = json.load(fh)
+except Exception:
+    getLogger("Partners").exception("Failed to load partners.json")
+    categories = None
+
+
+class PartnersView(RouteView):
+    path = "/about/partners"
+    name = "about.partners"
+
+    def get(self):
+        return self.render("main/about/partners.html", partners=partners)
diff --git a/pysite/views/main/info/rules.py b/pysite/views/main/about/rules.py
index 5605ba16..805936a8 100644
--- a/pysite/views/main/info/rules.py
+++ b/pysite/views/main/about/rules.py
@@ -3,8 +3,8 @@ from pysite.base_route import RouteView
 
 
 class RulesView(RouteView):
-    path = "/info/rules"
-    name = "info.rules"
+    path = "/about/rules"
+    name = "about.rules"
 
     def get(self):
-        return self.render("main/info/rules.html")
+        return self.render("main/about/rules.html")
diff --git a/static/images/partners/code monkeys.png b/static/images/partners/code monkeys.png
new file mode 100644
index 00000000..198885a2
--- /dev/null
+++ b/static/images/partners/code monkeys.png
diff --git a/static/images/partners/dyep.png b/static/images/partners/dyep.png
new file mode 100644
index 00000000..5cb5c398
--- /dev/null
+++ b/static/images/partners/dyep.png
diff --git a/static/images/partners/hacking-coding.png b/static/images/partners/hacking-coding.png
new file mode 100644
index 00000000..80ce0ca3
--- /dev/null
+++ b/static/images/partners/hacking-coding.png
diff --git a/static/images/partners/programming.png b/static/images/partners/programming.png
new file mode 100644
index 00000000..75f4fbb1
--- /dev/null
+++ b/static/images/partners/programming.png
diff --git a/static/images/partners/stem.png b/static/images/partners/stem.png
new file mode 100644
index 00000000..24ec97a7
--- /dev/null
+++ b/static/images/partners/stem.png
diff --git a/static/partners.json b/static/partners.json
new file mode 100644
index 00000000..d3211a99
--- /dev/null
+++ b/static/partners.json
@@ -0,0 +1,27 @@
+{
+  "Do You Even Python?": {
+    "banner": "/static/images/partners/dyep.png",
+    "description": "Do You Even Python? is a server for discussions and learning about Python where you can come and chat with beginners and experienced Pythonistas alike, come and join us!",
+    "invite": "https://discord.gg/jQtfh66"
+  },
+  "STEM": {
+    "banner": "/static/images/partners/stem.png",
+    "description": "STEM is a growing server dedicated to discussion and education pertaining to subjects within the fields of Science, Technology, Engineering, and Mathematics. We aim to provide our members with an engaged, skilled, friendly community. We hope to see you soon!",
+    "invite": "https://discord.gg/XBGetGp"
+  },
+  "Code Monkeys": {
+    "banner": "/static/images/partners/code monkeys.png",
+    "description": "We at Code Monkeys are dedicated to provide a friendly environment for programmers and tech enthusiasts alike. The community here is dedicated to giving and receiving great help and advice for a variety of programming languages. Help us build a large and friendly community at Code Monkeys by joining today!",
+    "invite": "https://discord.gg/vywQPxd"
+  },
+  "Programming": {
+    "banner": "/static/images/partners/programming.png",
+    "description": "Programming was created in 2016, and is an active community around various programming languages, operating systems, as well as hardware, security, and low-level programming.",
+    "invite": "https://discord.gg/010z0Kw1A9ql5c1Qe"
+  },
+  "Hacking - Coding": {
+    "banner": "/static/images/partners/hacking-coding.png",
+    "description": "Hacking-Coding is a server for discussions about ethical hacking, programming, and infosec in general. We have over 5,000 members. People of all skill levels are welcome to join.",
+    "invite": "https://discord.gg/0kvPIGKKEACoKQ8C"
+  }
+}
\ No newline at end of file
diff --git a/static/style.css b/static/style.css
index 86dfd6ee..42afa519 100644
--- a/static/style.css
+++ b/static/style.css
@@ -119,10 +119,13 @@ footer div.uk-section div.uk-text-center {
     padding-right: 40px;
 }
 
-/*
-Rendered document fixes
- */
-
+/* Rendered document fixes */
 .document li p {
     margin-bottom: 0;
-}
\ No newline at end of file
+}
+
+/* Styling for Partners page cards */
+div#partner-cards div.uk-card-default {
+    margin-top: 2em;
+    text-align:center;
+}
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>