From 6a21a9d0948079c2fc2d6b1ed9e61a303bcfdc0a Mon Sep 17 00:00:00 2001
From: bkfox <thomas bkfox net>
Date: Wed, 22 Nov 2023 21:09:59 +0100
Subject: [PATCH] design

---
 aircox/filters.py                           |   2 +-
 aircox/models/episode.py                    |  10 +-
 aircox/models/page.py                       |   8 +-
 aircox/static/aircox/css/chunk-common.css   | 123 +++++++----------
 aircox/templates/aircox/base.html           |   6 +-
 aircox/templates/aircox/home.html           |  20 ++-
 aircox/templates/aircox/page_detail.html    |  15 +-
 aircox/templates/aircox/page_list.html      |   9 ++
 aircox/templates/aircox/program_detail.html |   9 +-
 aircox/templates/aircox/widgets/header.html |  19 +--
 aircox/templates/aircox/widgets/log.html    |   5 +-
 aircox/views/home.py                        |   4 +-
 aircox/views/page.py                        |  13 +-
 assets/src/assets/styles.scss               | 144 +++++++++-----------
 14 files changed, 183 insertions(+), 204 deletions(-)

diff --git a/aircox/filters.py b/aircox/filters.py
index 3c541aa..2d584f1 100644
--- a/aircox/filters.py
+++ b/aircox/filters.py
@@ -10,7 +10,7 @@ class PageFilters(filters.FilterSet):
     class Meta:
         model = Page
         fields = {
-            "category__id": ["in"],
+            "category__id": ["in", "exact"],
             "pub_date": ["exact", "gte", "lte"],
         }
 
diff --git a/aircox/models/episode.py b/aircox/models/episode.py
index 5f8867b..1183e2c 100644
--- a/aircox/models/episode.py
+++ b/aircox/models/episode.py
@@ -17,7 +17,11 @@ class Episode(Page):
 
     @property
     def program(self):
-        return getattr(self.parent, "program", None)
+        return self.parent_subclass
+
+    @program.setter
+    def program(self, value):
+        self.parent = value
 
     @cached_property
     def podcasts(self):
@@ -40,10 +44,6 @@ class Episode(Page):
             podcasts[index]["page_title"] = self.title
         return podcasts
 
-    @program.setter
-    def program(self, value):
-        self.parent = value
-
     class Meta:
         verbose_name = _("Episode")
         verbose_name_plural = _("Episodes")
diff --git a/aircox/models/page.py b/aircox/models/page.py
index 7e3572c..d541377 100644
--- a/aircox/models/page.py
+++ b/aircox/models/page.py
@@ -221,6 +221,12 @@ class Page(BasePage):
 
     objects = PageQuerySet.as_manager()
 
+    @cached_property
+    def parent_subclass(self):
+        if self.parent_id:
+            return Page.objects.get_subclass(id=self.parent_id)
+        return None
+
     class Meta:
         verbose_name = _("Publication")
         verbose_name_plural = _("Publications")
@@ -300,7 +306,7 @@ class Comment(Renderable, models.Model):
         return Page.objects.select_subclasses().filter(id=self.page_id).first()
 
     def get_absolute_url(self):
-        return self.parent.get_absolute_url()
+        return self.parent.get_absolute_url() + f"#comment-{self.pk}"
 
     class Meta:
         verbose_name = _("Comment")
diff --git a/aircox/static/aircox/css/chunk-common.css b/aircox/static/aircox/css/chunk-common.css
index ba6e6ee..5583f3e 100644
--- a/aircox/static/aircox/css/chunk-common.css
+++ b/aircox/static/aircox/css/chunk-common.css
@@ -9567,34 +9567,6 @@ a.navbar-item.is-active {
   font-weight: 100;
 }
 
-/*
-.page {
-    & > .cover {
-        float: right;
-        max-width: 45%;
-    }
-
-    .header {
-        margin-bottom: 1.5em;
-    }
-
-    .headline {
-        font-size: 1.4em;
-        padding: 0.2em 0em;
-    }
-
-    p { padding: 0.4em 0em; }
-    hr { background-color: $grey-light; }
-
-    .page-content {
-        h1 { font-size: $size-1; font-weight: bolder; margin-top:0.4em; margin-bottom:0.2em; }
-        h2 { font-size: $size-3; font-weight: bolder; margin-top:0.4em; margin-bottom:0.2em; }
-        h3 { font-size: $size-4; font-weight: bolder; margin-top:0.4em; margin-bottom:0.2em; }
-        h4 { font-size: $size-5; font-weight: bolder; margin-top:0.4em; margin-bottom:0.2em; }
-        h5 { font-size: $size-6; font-weight: bolder; margin-top:0.4em; margin-bottom:0.2em; }
-        h6 { font-size: $size-6; margin-top:0.4em; margin-bottom:0.2em; }
-    }
-}*/
 .player {
   z-index: 10000;
   box-shadow: 0em 1.5em 2.5em rgba(0, 0, 0, 0.6);
@@ -9649,12 +9621,22 @@ a.navbar-item.is-active {
   margin: 0em;
 }
 
-.media .subtitle {
-  margin-bottom: 0.4em;
-}
-.media .media-content .headline {
-  font-size: 1em;
-  font-weight: 400;
+:root {
+  --text-color: black;
+  --highlight-color: rgba(255, 255, 0, 1);
+  --highlight-color-alpha: rgba(255, 255, 0, 0.6);
+  --highlight-color-2: rgb(0, 0, 254);
+  --highlight-color-2-alpha: rgb(0, 0, 254, 0.6);
+  --header-height: 30em;
+  --heading-height: 30em;
+  --heading-title-bg-color: rgba(255, 255, 0, 1);
+  --heading-bg-color: var(--highlight-color);
+  --heading-bg-highlight-color: var(--highlight-color-2);
+  --preview-media-height: 10em;
+  --preview-media-cover-size: 10em;
+  --preview-cover-size: 24em;
+  --preview-cover-small-size: 10em;
+  --heading-font-family: default;
 }
 
 body {
@@ -9696,24 +9678,6 @@ aside .media .subtitle {
   display: inline-block;
 }
 
-:root {
-  --text-color: black;
-  --highlight-color: rgba(255, 255, 0, 1);
-  --highlight-color-alpha: rgba(255, 255, 0, 0.6);
-  --highlight-color-2: rgb(0, 0, 254);
-  --highlight-color-2-alpha: rgb(0, 0, 254, 0.6);
-  --header-height: 30em;
-  --heading-height: 30em;
-  --heading-title-bg-color: rgba(255, 255, 0, 1);
-  --heading-bg-color: var(--highlight-color);
-  --heading-bg-highlight-color: var(--highlight-color-2);
-  --preview-media-height: 10em;
-  --preview-media-cover-size: 10em;
-  --preview-cover-size: 24em;
-  --preview-cover-small-size: 10em;
-  --heading-font-family: default;
-}
-
 h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
   font-family: var(--heading-font-family);
 }
@@ -9726,6 +9690,21 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
   color: var(--highlight-color-2);
   text-decoration: none;
 }
+.page .content {
+  font-size: 2em;
+}
+.page section.container {
+  padding-top: 2em;
+}
+.page section.container > .title {
+  margin-top: unset;
+  padding-top: unset !important;
+  margin-bottom: 1.2em;
+}
+.page section.container:not(:first-child) {
+  margin-top: 2em;
+  border-top: 1px solid black;
+}
 
 .d-inline {
   display: inline;
@@ -9813,24 +9792,20 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
   margin-top: 0.8em;
 }
 
-.content {
-  font-size: 1.4em;
-}
-
-.heading, .headings-container > * {
+.heading {
   display: inline-block;
 }
-.heading:not(:empty), .headings-container > *:not(:empty) {
+.heading:not(:empty) {
   background-color: var(--heading-bg-color);
   padding: 0.4em;
   margin-top: 0em !important;
   vertical-align: top;
 }
-.heading:not(:empty).highlight, .headings-container > *:not(:empty).highlight {
+.heading:not(:empty).highlight {
   background-color: var(--heading-bg-highlight-color);
   color: var(--highlight-color);
 }
-.heading.title, .headings-container > *.title {
+.heading.title {
   background-color: var(--heading-title-bg-color);
 }
 
@@ -9862,15 +9837,15 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
   background-color: var(--highlight-color-2);
   color: var(--highlight-color);
 }
-.nav.primary .navbar-brand {
+.nav.primary .nav-brand {
   display: inline-block;
   margin-right: 0.8em;
   padding: 0.8em;
 }
-.nav.primary .navbar-brand img {
+.nav.primary .nav-brand img {
   width: 14em !important;
 }
-.nav.primary .navbar-menu {
+.nav.primary .nav-menu {
   display: flex;
   flex-grow: 1;
 }
@@ -9892,10 +9867,15 @@ nav li a, nav li .button {
   font-size: 1.4em;
 }
 
+.page-content {
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
+
 .preview {
   position: relative;
   background-size: cover;
-  margin-bottom: 0.8em;
+  margin-bottom: 1.2em !important;
 }
 .preview.preview-card:not(.wide) {
   max-width: 30em;
@@ -9904,7 +9884,8 @@ nav li a, nav li .button {
   width: 100%;
 }
 .preview.columns, .preview .headings.columns {
-  margin: 0em;
+  margin-left: 0em;
+  margin-right: 0em;
 }
 .preview.columns .column, .preview .headings.columns .column {
   padding: 0em;
@@ -9945,7 +9926,7 @@ nav li a, nav li .button {
 }
 .list-item .headings {
   padding-top: 0em;
-  margin-bottom: 0.8em !important;
+  margin-bottom: 1.2em !important;
   background-color: var(--heading-bg-color);
 }
 .list-item .subtitle {
@@ -9954,16 +9935,16 @@ nav li a, nav li .button {
 .list-item .media-content {
   display: flex;
   flex-direction: column;
-}
-.list-item:not(.no-cover) .list-item .media-content {
-  height: var(--preview-cover-small-size);
+  min-height: var(--preview-cover-small-size);
 }
 .list-item .media-content .content {
   flex-grow: 1;
+  margin-bottom: auto;
 }
 .list-item .media-content .actions {
-  flex-grow: 0;
+  flex-grow: unset;
   text-align: right;
+  margin-top: auto;
 }
 
 .preview-wide {
@@ -9975,7 +9956,7 @@ nav li a, nav li .button {
 .preview-wide .headings {
   width: var(--preview-cover-size);
   flex-grow: 0;
-  margin-right: 0.8em;
+  margin-right: 1.2em;
 }
 .preview-wide .content {
   font-size: 2em;
diff --git a/aircox/templates/aircox/base.html b/aircox/templates/aircox/base.html
index 76def3c..a1c21d8 100644
--- a/aircox/templates/aircox/base.html
+++ b/aircox/templates/aircox/base.html
@@ -52,10 +52,10 @@ Usefull context:
                 {% block nav %}
                 <nav class="nav primary" role="navigation" aria-label="main navigation">
                     {% block nav-primary %}
-                    <a class="navbar-brand" href="{% url "home" %}">
+                    <a class="nav-brand" href="{% url "home" %}">
                         <img src="{{ station.logo.url }}">
                     </a>
-                    <div class="navbar-menu">
+                    <div class="nav-menu">
                         {% block nav-primary-menu %}
                         {% nav_items "top" css_class="nav-item" active_class="active" as items %}
                         {% for item, render in items %}
@@ -82,7 +82,7 @@ Usefull context:
                 <div class="container content">
                 {% block content %}
                     {% if page and page.content %}
-                    <section class="page-content mb-2">{{ page.content|safe }}</section>
+                    <section class="page-content">{{ page.content|safe }}</section>
                     {% endif %}
                 {% endblock %}
                 </div>
diff --git a/aircox/templates/aircox/home.html b/aircox/templates/aircox/home.html
index b2e04ed..07d4efe 100644
--- a/aircox/templates/aircox/home.html
+++ b/aircox/templates/aircox/home.html
@@ -32,19 +32,25 @@
 </section>
 {% endif %}
 
-
-{% if object_list %}
+{% if logs %}
 <section class="container">
-    <h2 class="title is-3 p-2">
-    </h2>
+    <h2 class="title is-3 p-2">{% translate "It just happened" %}</h2>
+    {% for object in logs %}
+        {% include "./widgets/log.html" with widget="item" %}
+    {% endfor %}
+</section>
+{% endif %}
+
+{% if last_publications %}
+<section class="container">
+    <h2 class="title is-3 p-2">{% translate "Last publications" %}</h2>
 
     <div role="list">
-        {% for object in object_list %}
-        {% page_widget "item" object.episode diffusion=object timetable=True open=True %}
+        {% for object in last_publications %}
+        {% page_widget "item" object open=True %}
         {% endfor %}
     </div>
 </section>
-
 {% endif %}
 {% endblock %}
 
diff --git a/aircox/templates/aircox/page_detail.html b/aircox/templates/aircox/page_detail.html
index 1bcfd36..709ff8c 100644
--- a/aircox/templates/aircox/page_detail.html
+++ b/aircox/templates/aircox/page_detail.html
@@ -36,18 +36,9 @@ Context:
 <section class="container">
     <h2 class="title">{% translate "Comments" %}</h2>
 
-    {% for comment in comments %}
-    <div class="media box">
-        <div class="media-content">
-            <p>
-                <strong class="mr-2">{{ comment.nickname }}</strong>
-                <time datetime="{{ comment.date }}" title="{{ comment.date }}">
-                    <small>{{ comment.date|naturaltime }}</small>
-                </time>
-                <br>
-                {{ comment.content }}
-            </p>
-        </div>
+    {% for object in comments %}
+    <div id="comment-{{ object.pk }}">
+        {% page_widget "item" object %}
     </div>
     {% endfor %}
 </section>
diff --git a/aircox/templates/aircox/page_list.html b/aircox/templates/aircox/page_list.html
index defffa9..48cb479 100644
--- a/aircox/templates/aircox/page_list.html
+++ b/aircox/templates/aircox/page_list.html
@@ -2,6 +2,15 @@
 {% comment %}Display a list of Pages{% endcomment %}
 {% load i18n aircox %}
 
+{% block secondary-nav %}
+<form class="nav secondary">
+    {% for id, title in view.categories.items %}
+        <a class="nav-item{% if category_id == id %} active{% endif %}"
+            href="?category__id={{ id }}">{{ title }}</a>
+    {% endfor %}
+</form>
+{% endblock %}
+
 {% block header %}
 {% if page and not object %}
     {% with page as object %}
diff --git a/aircox/templates/aircox/program_detail.html b/aircox/templates/aircox/program_detail.html
index 64c730a..2aa6fbf 100644
--- a/aircox/templates/aircox/program_detail.html
+++ b/aircox/templates/aircox/program_detail.html
@@ -5,10 +5,10 @@
 {% include "aircox/program_sidebar.html" %}
 
 
-{% block content %}
+{% block content-container %}
 {{ block.super }}
 {% if episodes %}
-<section>
+<section class="container">
     <h4 class="title is-3">{% translate "Last Episodes" %}</h4>
     <section class="card-grid">
         {% for object in episodes|slice:":3" %}
@@ -19,8 +19,7 @@
     <nav class="has-text-right">
         <li class="nav-item">
             <a href="{% url "episode-list" parent_slug=program.slug %}"
-                class="button action"
-                aria-label="{% translate "Show all program's articles" %}">
+                class="button action">
                 {% translate "All episodes" %}
             </a>
         </li>
@@ -30,7 +29,7 @@
 
 
 {% if articles %}
-<section>
+<section class="container">
     <h4 class="title is-4">{% translate "Last Articles" %}</h4>
 
     <section class="card-grid">
diff --git a/aircox/templates/aircox/widgets/header.html b/aircox/templates/aircox/widgets/header.html
index a681500..85d8e7c 100644
--- a/aircox/templates/aircox/widgets/header.html
+++ b/aircox/templates/aircox/widgets/header.html
@@ -5,15 +5,16 @@
 
 
 {% block headings %}
-<div class="columns">
-    <div class="column">
-        {{ block.super }}
+{{ block.super }}
 
-        {% spaceless %}
-        <section class="heading content">
-            {% block content %}{{ block.content }}{% endblock %}
-        </section>
-        {% endspaceless %}
-    </div>
+{% if parent and parent.is_published %}
+<div>
+    <a href="{{ parent.get_absolute_url|escape }}" class="heading subtitle">
+        <span class="icon">
+            <i class="fa fa-angles-right"></i>
+        </span>
+        {{ parent.title }}
+    </a>
 </div>
+{% endif %}
 {% endblock %}
diff --git a/aircox/templates/aircox/widgets/log.html b/aircox/templates/aircox/widgets/log.html
index ba36d01..b7f75dc 100644
--- a/aircox/templates/aircox/widgets/log.html
+++ b/aircox/templates/aircox/widgets/log.html
@@ -1,4 +1,3 @@
-{% extends "./page.html" %}
 {% load i18n aircox %}
 {% comment %}
 List item for a log, either for a logged track or diffusion (as diffusion).
@@ -14,8 +13,8 @@ for design review.
 
 {% block outer %}
 {% if object|is_diffusion %}
-    {% include "./diffusion.html" with object=diffusion.episode %}
+    {% page_widget widget object.episode diffusion=object %}
 {% else %}
-    {% include "aircox/widgets/track_item.html" with object=object.track log=object %}
+    {% include "./track_item.html" with object=object.track log=object %}
 {% endif %}
 {% endblock %}
diff --git a/aircox/views/home.py b/aircox/views/home.py
index e4d9e8b..67932da 100644
--- a/aircox/views/home.py
+++ b/aircox/views/home.py
@@ -14,7 +14,7 @@ class HomeView(AttachedToMixin, BaseView, ListView):
     model = Diffusion
     queryset = Diffusion.objects.on_air().select_related("episode")
     logs_count = 5
-    publications_count = 5
+    publications_count = 7
 
     def get_queryset(self):
         return super().get_queryset().date(date.today())
@@ -62,7 +62,7 @@ class HomeView(AttachedToMixin, BaseView, ListView):
                 "diffusion": current_diff,
                 "logs": self.get_logs(self.object_list),
                 "next_diffs": next_diffs,
-                "last_publications": self.get_last_publications()[:5],
+                "last_publications": self.get_last_publications(),
             }
         )
         return super().get_context_data(**kwargs)
diff --git a/aircox/views/page.py b/aircox/views/page.py
index 44c7ef7..e18285d 100644
--- a/aircox/views/page.py
+++ b/aircox/views/page.py
@@ -123,12 +123,17 @@ class PageListView(FiltersMixin, BasePageListView):
         return qs
 
     def get_context_data(self, **kwargs):
-        kwargs["categories"] = (
-            self.model.objects.published()
+        self.categories = {
+            id: title
+            for title, id in self.model.objects.published()
             .filter(category__isnull=False)
             .values_list("category__title", "category__id")
             .distinct()
-        )
+        }
+        cat_id = self.request.GET.get("category__id")
+        if cat_id:
+            cat_id = int(cat_id)
+            kwargs["category_id"] = cat_id
         return super().get_context_data(**kwargs)
 
 
@@ -150,6 +155,8 @@ class PageDetailView(BasePageDetailView):
         kwargs["comments"] = Comment.objects.filter(page=self.object).order_by(
             "-date"
         )
+        if self.object.parent_subclass:
+            kwargs["parent"] = self.object.parent_subclass
         return super().get_context_data(**kwargs)
 
     @classmethod
diff --git a/assets/src/assets/styles.scss b/assets/src/assets/styles.scss
index e749887..6c4b143 100644
--- a/assets/src/assets/styles.scss
+++ b/assets/src/assets/styles.scss
@@ -149,36 +149,6 @@ a.navbar-item.is-active {
     }
 }
 
-//-- page
-/*
-.page {
-    & > .cover {
-        float: right;
-        max-width: 45%;
-    }
-
-    .header {
-        margin-bottom: 1.5em;
-    }
-
-    .headline {
-        font-size: 1.4em;
-        padding: 0.2em 0em;
-    }
-
-    p { padding: 0.4em 0em; }
-    hr { background-color: $grey-light; }
-
-    .page-content {
-        h1 { font-size: $size-1; font-weight: bolder; margin-top:0.4em; margin-bottom:0.2em; }
-        h2 { font-size: $size-3; font-weight: bolder; margin-top:0.4em; margin-bottom:0.2em; }
-        h3 { font-size: $size-4; font-weight: bolder; margin-top:0.4em; margin-bottom:0.2em; }
-        h4 { font-size: $size-5; font-weight: bolder; margin-top:0.4em; margin-bottom:0.2em; }
-        h5 { font-size: $size-6; font-weight: bolder; margin-top:0.4em; margin-bottom:0.2em; }
-        h6 { font-size: $size-6; margin-top:0.4em; margin-bottom:0.2em; }
-    }
-}*/
-
 
 //-- player
 .player {
@@ -247,18 +217,31 @@ a.navbar-item.is-active {
 
 }
 
-//-- media
-.media {
-    .subtitle {
-        margin-bottom: 0.4em;
-    }
-    .media-content .headline {
-        font-size: 1em;
-        font-weight: 400;
-    }
+//-- general
+:root {
+    --text-color: black;
+    --highlight-color: rgba(255, 255, 0, 1);
+    --highlight-color-alpha: rgba(255, 255, 0, 0.6);
+    --highlight-color-2: rgb(0, 0, 254);
+    --highlight-color-2-alpha: rgb(0, 0, 254, 0.6);
+
+    --header-height: 30em;
+
+    --heading-height: 30em;
+    --heading-title-bg-color: rgba(255, 255, 0, 1);
+    --heading-bg-color: var(--highlight-color);
+    --heading-bg-highlight-color: var(--highlight-color-2);
+
+    --preview-media-height: 10em;
+    --preview-media-cover-size: 10em;
+
+    --preview-cover-size: 24em;
+    --preview-cover-small-size: 10em;
+
+    --heading-font-family: default;
 }
 
-//-- general
+
 body {
     background-color: $body-background-color;
 }
@@ -295,31 +278,6 @@ aside {
 }
 
 
-// -- layout
-:root {
-    --text-color: black;
-    --highlight-color: rgba(255, 255, 0, 1);
-    --highlight-color-alpha: rgba(255, 255, 0, 0.6);
-    --highlight-color-2: rgb(0, 0, 254);
-    --highlight-color-2-alpha: rgb(0, 0, 254, 0.6);
-
-    --header-height: 30em;
-
-    --heading-height: 30em;
-    --heading-title-bg-color: rgba(255, 255, 0, 1);
-    --heading-bg-color: var(--highlight-color);
-    --heading-bg-highlight-color: var(--highlight-color-2);
-
-    --preview-media-height: 10em;
-    --preview-media-cover-size: 10em;
-
-    --preview-cover-size: 24em;
-    --preview-cover-small-size: 10em;
-
-    --heading-font-family: default;
-}
-
-
 // ---- main theme & layout
 h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
     font-family: var(--heading-font-family);
@@ -333,6 +291,25 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
         color: var(--highlight-color-2);
         text-decoration: none;
     }
+
+    .content {
+        font-size: $text-size-big;
+    }
+
+    section.container {
+        padding-top: $mp-6;
+
+        > .title {
+            margin-top: unset;
+            padding-top: unset !important;
+            margin-bottom: $mp-4;
+        }
+
+        &:not(:first-child) {
+            margin-top: $mp-6;
+            border-top: 1px solid black;
+        }
+    }
 }
 
 
@@ -396,12 +373,7 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
     }
 }
 
-.content {
-    font-size: $text-size-medium;
-}
-
-
-.heading, .headings-container > * {
+.heading {
     display: inline-block;
 
     &:not(:empty) {
@@ -458,7 +430,7 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
     }
 
     &.primary {
-        .navbar-brand {
+        .nav-brand {
             display: inline-block;
             margin-right: $mp-3;
             padding: $mp-3;
@@ -468,7 +440,7 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
             }
         }
 
-        .navbar-menu {
+        .nav-menu {
             display: flex;
             flex-grow: 1;
         }
@@ -497,11 +469,17 @@ nav li {
 }
 
 
+// ---- ---- detail
+.page-content {
+    margin-top: $mp-6;
+    margin-bottom: $mp-6;
+}
+
 // ---- ---- previews & page items
 .preview {
     position: relative;
     background-size: cover;
-    margin-bottom: calc($mp-3);
+    margin-bottom: $mp-4 !important;
 
     &.preview-card {
         &:not(.wide) {
@@ -514,7 +492,8 @@ nav li {
     }
 
     &.columns, .headings.columns {
-        margin: 0em;
+        margin-left: 0em;
+        margin-right: 0em;
         .column { padding: 0em; }
     }
 
@@ -557,7 +536,7 @@ nav li {
 
     .headings {
         padding-top: 0em;
-        margin-bottom: $mp-3 !important;
+        margin-bottom: $mp-4 !important;
         background-color: var(--heading-bg-color);
     }
 
@@ -568,16 +547,17 @@ nav li {
     .media-content {
         display: flex;
         flex-direction: column;
+        min-height: var(--preview-cover-small-size);
 
-        .list-item:not(.no-cover) & {
-            height: var(--preview-cover-small-size);
+        .content {
+            flex-grow: 1;
+            margin-bottom: auto;
         }
 
-        .content { flex-grow: 1; }
-
         .actions {
-            flex-grow: 0;
+            flex-grow: unset;
             text-align: right;
+            margin-top: auto;
         }
     }
 }
@@ -594,7 +574,7 @@ nav li {
     & .headings {
         width: var(--preview-cover-size);
         flex-grow: 0;
-        margin-right: $mp-3;
+        margin-right: $mp-4;
     }
 
     & .content {