Add (raw) category template

content/development/index.rst

@@ -1,9 +1,14 @@
+
+:layout: category
+:summary: Overview page for the development category.
+:spotlight_uri: development/building-mischback-de
+:spotlight_img: bar
+
 ###########
 Development
 ###########
 
 .. toctree::
-   :caption: Development
    :titlesonly:
    :glob:
 

theme/mischback/_src/style/layouts/__layouts.scss

@@ -7,3 +7,8 @@
  * text-based content.
  */
 @import "article";
+
+/* Specify styling for category overviews. This corresponds to the template
+ * ``theme/mischback/category.html``.
+ */
+@import "category";

theme/mischback/_src/style/layouts/category.scss

@@ -0,0 +1,31 @@
+/* This is the styling of the category overview pages.
+ *
+ * The corresponding template is ``theme/mischback/category.html``.
+ */
+
+.main-category {
+  display: grid;
+  grid-template:
+    ". spotlight ."
+    ". cat_body  ."
+    / 1fr calc(min($max-article-width, 100%)) 1fr;
+
+  @include for-breakpoint(layout-single-column) {
+    grid-template:
+      ". spotlight spotlight spotlight ."
+      ". cat_body  cat_body  cat_body  ."
+      / 1fr $max-article-width 3fr 20rem 1fr;
+  }
+
+  .spotlight {
+    @include content-box-visual;
+
+    grid-area: spotlight;
+  }
+
+  .category-body {
+    @include content-box-visual;
+
+    grid-area: cat_body;
+  }
+}

theme/mischback/article.html

@@ -11,11 +11,11 @@
       {% endif %}
     </div>
     {{ body }}
-      {% if theme_show_breadcrumbs %}
-      <nav class="breadcrumbs" aria-label="Bottom Breadcrumbs">
-        {% include "includes/breadcrumbs.html" %}
-      </nav>
-      {% endif %}
+    {% if theme_show_breadcrumbs %}
+    <nav class="breadcrumbs" aria-label="Bottom Breadcrumbs">
+      {% include "includes/breadcrumbs.html" %}
+    </nav>
+    {% endif %}
   </article>
 
   <aside aria-label="Article Meta">

theme/mischback/category.html

@@ -0,0 +1,25 @@
+{% extends "layout.html" %}
+
+{% block main_container %}
+<main class="main-category">
+  <section class="spotlight">
+    <header>
+      {{ title }} Spotlight
+    </header>
+    <div>
+      <a href="{{ pathto(meta.spotlight_uri) }}">spotlight</a>
+    </div>
+  </section>
+
+  <section class="category-body">
+    <div>
+      {% if theme_show_breadcrumbs %}
+      <nav class="breadcrumbs" aria-label="Top Breadcrumbs">
+        {% include "includes/breadcrumbs.html" %}
+      </nav>
+      {% endif %}
+    </div>
+    {{ body }}
+  </section>
+</main>
+{% endblock main_container %}