4 files changed, 126 insertions, 0 deletions
diff --git a/pydis_site/templates/content/base.html b/pydis_site/templates/content/base.html
new file mode 100644
index 00000000..21895479
--- /dev/null
+++ b/pydis_site/templates/content/base.html
@@ -0,0 +1,41 @@
+{% extends 'base/base.html' %}
+{% load static %}
+
+{% block title %}{{ page_title }}{% endblock %}
+{% block head %}
+    <meta property="og:title" content="Python Discord - {{ page_title }}" />
+    <meta property="og:type" content="website" />
+    <meta property="og:description" content="{{ page_description }}" />
+    <link rel="stylesheet" href="{% static "css/content/page.css" %}">
+{% endblock %}
+
+{% block content %}
+    {% include "base/navbar.html" %}
+
+    <section class="breadcrumb-section section">
+        <div class="container">
+            {# Article breadcrumb #}
+            <nav class="breadcrumb is-pulled-left" aria-label="breadcrumbs">
+                <ul>
+                    {% for item in breadcrumb_items %}
+                        <li><a href="{% url "content:page_category" location=item.path %}">{{ item.name }}</a></li>
+                    {% endfor %}
+                    <li class="is-active"><a href="#">{{ page_title }}</a></li>
+                </ul>
+            </nav>
+            {# Sub-Article dropdown for category pages #}
+            {% if subarticles %}
+                {% include "content/dropdown.html" %}
+            {% endif %}
+        </div>
+    </section>
+
+    <section class="section">
+        <div class="container">
+            <div class="content">
+                <h1 class="title">{{ page_title }}</h1>
+                {% block page_content %}{% endblock %}
+            </div>
+        </div>
+    </section>
+{% endblock %}
diff --git a/pydis_site/templates/content/dropdown.html b/pydis_site/templates/content/dropdown.html
new file mode 100644
index 00000000..d81e29dc
--- /dev/null
+++ b/pydis_site/templates/content/dropdown.html
@@ -0,0 +1,17 @@
+<div class="dropdown is-pulled-right is-right" id="dropdown">
+    <div class="dropdown-trigger">
+        <a aria-haspopup="true" aria-controls="subarticle-menu">
+            <span>Sub-Articles</span>
+            <span class="icon is-small">
+                <i class="fas fa-angle-down" aria-hidden="true"></i>
+            </span>
+        </a>
+    </div>
+    <div class="dropdown-menu" id="subarticle-menu" role="menu">
+        <div class="dropdown-content">
+            {% for page in subarticles|dictsort:"name" %}
+                <a href="{{ page.path }}" class="dropdown-item">{{ page.name }}</a>
+            {% endfor %}
+        </div>
+    </div>
+</div>
diff --git a/pydis_site/templates/content/listing.html b/pydis_site/templates/content/listing.html
new file mode 100644
index 00000000..ef0ef919
--- /dev/null
+++ b/pydis_site/templates/content/listing.html
@@ -0,0 +1,27 @@
+{% extends 'content/base.html' %}
+
+{% block page_content %}
+    {% for category, data in categories.items %}
+        <div class="box" style="max-width: 800px;">
+            <span class="icon is-size-4 is-medium">
+                <i class="{{ data.icon|default:"fas fa-folder" }} is-size-3 is-black has-icon-padding" aria-hidden="true"></i>
+            </span>
+
+            <a href="{% url "content:page_category" location=path|add:category %}">
+                <span class="is-size-4 has-text-weight-bold">{{ data.title }}</span>
+            </a>
+            <p class="is-italic">{{ data.description }}</p>
+        </div>
+    {% endfor %}
+    {% for page, data in pages.items %}
+        <div class="box" style="max-width: 800px;">
+            <span class="icon is-size-4 is-medium">
+                <i class="{{ data.icon|default:"fab fa-python" }} is-size-3 is-black has-icon-padding" aria-hidden="true"></i>
+            </span>
+            <a href="{% url "content:page_category" location=path|add:page %}">
+                <span class="is-size-4 has-text-weight-bold">{{ data.title }}</span>
+            </a>
+            <p class="is-italic">{{ data.description }}</p>
+        </div>
+    {% endfor %}
+{% endblock %}
diff --git a/pydis_site/templates/content/page.html b/pydis_site/templates/content/page.html
new file mode 100644
index 00000000..759286f6
--- /dev/null
+++ b/pydis_site/templates/content/page.html
@@ -0,0 +1,41 @@
+{% extends 'content/base.html' %}
+
+{% block head %}
+    {{ block.super }}
+    <link rel="stylesheet"
+      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/styles/atom-one-dark.min.css">
+    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/highlight.min.js"></script>
+    <script>hljs.initHighlightingOnLoad();</script>
+{% endblock %}
+
+{% block page_content %}
+    {% if relevant_links or toc %}
+        <div class="columns is-variable is-8">
+            <div class="column is-two-thirds">
+                {{ page|safe }}
+            </div>
+            <div class="column">
+                {% if toc %}
+                    <div class="box">
+                        <p class="menu-label">Table of Contents</p>
+                        <ul class="menu-list toc">
+                            {{ toc|safe }}
+                        </ul>
+                    </div>
+                {% endif %}
+                {% if relevant_links %}
+                    <div class="box">
+                        <p class="menu-label">Relevant links</p>
+                        <ul class="menu-list">
+                            {% for value, link in relevant_links.items %}
+                                <li><a class="has-text-link" href="{{link}}">{{ value }}</a></li>
+                            {% endfor %}
+                        </ul>
+                    </div>
+                {% endif %}
+            </div>
+        </div>
+    {% else %}
+        <div>{{ page|safe }}</div>
+    {% endif %}
+{% endblock %}