category pages

content/docs/_index.md

@@ -0,0 +1,6 @@
++++
+title = "Docs"
+description = "Things that are on this server, and how to use them."
+template = "category.html"
+page_template = "article.html"
++++

content/extras/_index.md

@@ -0,0 +1,6 @@
++++
+title = "Guides"
+description = "Other things that didn't fit elsewhere."
+template = "category.html"
+page_template = "article.html"
++++

content/guides/_index.md

@@ -0,0 +1,6 @@
++++
+title = "Guides"
+description = "Words telling you how to do things, for children of all ages."
+template = "category.html"
+page_template = "article.html"
++++

sass/main.scss

@@ -65,4 +65,21 @@ a, a:focus {
 
 .icon {
     width: 24px;
+}
+
+.page {
+    padding: 4px 0;
+    margin: 0 26px;
+    * {
+        margin: 0;
+    }
+    .page-title {
+        display: flex;
+        align-items: center;
+        .icon {
+            margin-right: 4px;
+            margin-left: -2px;
+        }
+    }
+    
 }

templates/article.html

@@ -0,0 +1,11 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="title">
+    <h1>{{ page.title }}</h1>
+    <p>{{ page.description }}</p>
+</div>
+
+{{ page.content | safe }}
+
+{% endblock content %}

templates/category.html

@@ -0,0 +1,19 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="title">
+    <h1><b>{{ section.title }}</b></h1>
+    <p>{{section.description}}</p>
+</div>
+<div>
+  {% for page in section.pages %}
+  <div>
+  <a class="page" href="{{ page.permalink | safe }}">
+    <h4 class="page-title"><svg class="icon" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+      <path d="M9 4.804A7.968 7.968 0 005.5 4c-1.255 0-2.443.29-3.5.804v10A7.969 7.969 0 015.5 14c1.669 0 3.218.51 4.5 1.385A7.962 7.962 0 0114.5 14c1.255 0 2.443.29 3.5.804v-10A7.968 7.968 0 0014.5 4c-1.255 0-2.443.29-3.5.804V12a1 1 0 11-2 0V4.804z" />
+    </svg> {{ page.title }}</h4></a>
+    {{ page.description }}
+    </div>
+  {% endfor %}
+</div>
+{% endblock content %}