aircox/models/article.py

@@ -8,6 +8,7 @@ __all__ = ("Article",)
 
 class Article(Page):
     detail_url_name = "article-detail"
+    template_prefix = "article"
 
     objects = ProgramChildQuerySet.as_manager()
 

aircox/models/page.py

@@ -279,7 +279,7 @@ class StaticPage(BasePage):
         return super().get_absolute_url()
 
 
-class Comment(models.Model):
+class Comment(Renderable, models.Model):
     page = models.ForeignKey(
         Page,
         models.CASCADE,
@@ -292,7 +292,7 @@ class Comment(models.Model):
     date = models.DateTimeField(auto_now_add=True)
     content = models.TextField(_("content"), max_length=1024)
 
-    item_template_name = "aircox/widgets/comment_item.html"
+    template_prefix = "comment"
 
     @cached_property
     def parent(self):

aircox/templates/admin/index.html

@@ -1,5 +1,5 @@
 {% extends "admin/index.html" %}
-{% load i18n thumbnail %}
+{% load i18n thumbnail aircox %}
 
 
 {% block app %}
@@ -62,7 +62,9 @@
                 <span>{% translate "Latest comments" %}</span>
             </h1>
             {% if comments %}
-            {% include "aircox/widgets/page_list.html" with object_list=comments with_title=True %}
+                {% for object in comments %}
+                {% page_widget "preview" object with_title=True %}
+                {% endfor %}
                 <div class="has-text-centered">
                     <a href="{% url "admin:aircox_comment_changelist" %}" class="float-center">{% translate "All comments" %}</a>
                 </div>

aircox/templates/aircox/base.html

@@ -48,41 +48,26 @@ Usefull context:
             })
         </script>
         <div id="app">
-            {% block top-nav-container %}
-            <nav class="app-nav" role="navigation" aria-label="main navigation">
             <div class="container">
+                {% block nav %}
+                <nav class="nav primary" role="navigation" aria-label="main navigation">
+                    {% block nav-primary %}
+                    <a class="navbar-brand" href="{% url "home" %}">
+                        <img src="{{ station.logo.url }}">
+                    </a>
                     <div class="navbar-menu">
-                        <div class="navbar-start">
+                        {% block nav-primary-menu %}
-                            {% block top-nav %}
+                        {% nav_items "top" css_class="nav-item" active_class="active" as items %}
-                            {% nav_items "top" css_class="navbar-item" active_class="is-active" as items %}
                         {% for item, render in items %}
                         {{ render }}
                         {% endfor %}
                         {% endblock %}
                     </div>
-                        {% comment %}
-                        <div class="navbar-end">
-                            {% block top-nav-tools %}
                     {% endblock %}
-                            {% block top-nav-end %}
-                            <div class="navbar-item">
-                                <form action="{% url 'page-list' %}" method="GET">
-                                    <div class="control has-icons-left">
-                                        <span class="icon is-small is-left">
-                                            <i class="fa fa-search"></i>
-                                        </span>
-                                        <input type="text" name="q" class="input"
-                                            placeholder="{% translate "Search" %}" />
-                                    </div>
-                                </form>
-                            </div>
-                            {% endblock %}
-                        </div>
-                        {% endcomment %}
-                    </div>
-                </div>
                 </nav>
                 {% endblock %}
+                {% block secondary-nav %}{% endblock %}
+            </div>
 
             {% block main-container %}
             <main class="page">

aircox/templates/aircox/basepage_list.html

@@ -1,4 +1,4 @@
-{% extends "aircox/base.html" %}
+{% extends "./base.html" %}
 
 {% comment %}Display a list of BasePages{% endcomment %}
 {% load i18n aircox %}
@@ -24,14 +24,6 @@
 
 
 {% block content-container %}
-{% block secondary-nav-container %}
-<section class="container">
-    <nav class="secondary-nav">
-        {% block secondary-nav %}{% endblock %}
-    </nav>
-</section>
-{% endblock %}
-
 {{ block.super }}
 
 <div class="container">

aircox/templates/aircox/diffusion_list.html

@@ -12,12 +12,6 @@
 {% endif %}
 {% endblock %}
 
-{% block filters-item %}
-<span class="control">
-    <input type="date">
-</span>
-{% endblock %}
-
 {% block header %}
 {% with "./widgets/dated_list_header.html" as header_template_name %}
     {{ block.super }}
@@ -25,7 +19,9 @@
 {% endblock %}
 
 {% block secondary-nav %}
-{% include "./widgets/dates_menu.html" with url_name="diffusion-list" %}
+<nav class="nav secondary">
+    {% include "./widgets/dates_menu.html" with url_name="diffusion-list" %}
+</nav>
 {% endblock %}
 
 {% block pages_list %}

aircox/templates/aircox/home.html

@@ -1,23 +1,12 @@
 {% extends "aircox/page_list.html" %}
-{% comment %}Home page{% endcomment %}
 {% load i18n aircox %}
 
 {% block head_title %}{{ station.name }}{% endblock %}
 
-
 {% block content-container %}
+{{ block.super }}
+
 {% if next_diffs %}
-<section class="container card-grid">
-    {% for obj in next_diffs|slice:"1:4" %}
-        {% if object != diffusion %}
-            {% page_widget "card" obj.episode diffusion=obj timetable=True %}
-        {% endif %}
-    {% endfor %}
-</section>
-{% endif %}
-
-
-{% if object_list %}
 <section class="container">
     <h2 class="title is-3 p-2">
         {% with station.name as station %}
@@ -27,6 +16,28 @@
         {% endwith %}
     </h2>
 
+    <div class="mb-3">
+    {% with next_diffs.0 as obj %}
+        {% page_widget "wide" obj.episode diffusion=obj timetable=True %}
+    {% endwith %}
+    </div>
+
+    <div class="card-grid">
+        {% for obj in next_diffs|slice:"1:4" %}
+            {% if object != diffusion %}
+                {% page_widget "card" obj.episode diffusion=obj timetable=True %}
+            {% endif %}
+        {% endfor %}
+    </div>
+</section>
+{% endif %}
+
+
+{% if object_list %}
+<section class="container">
+    <h2 class="title is-3 p-2">
+    </h2>
+
     <div role="list">
         {% for object in object_list %}
         {% page_widget "item" object.episode diffusion=object timetable=True open=True %}
@@ -37,30 +48,4 @@
 {% endif %}
 {% endblock %}
 
-
-
-
 {% block pages_list %}{% endblock %}
-
-
-{% block sidebar %}
-<section>
-    <h4 class="title is-4">{% translate "Previously on air" %}</h4>
-    {% with has_cover=False %}
-    {% with logs as object_list %}
-    {% include "aircox/widgets/log_list.html" %}
-    {% endwith %}
-    {% endwith %}
-</section>
-
-<section>
-    <h4 class="title is-4">{% translate "Last publications" %}</h4>
-    {% with hide_schedule=True %}
-    {% with has_headline=False %}
-    {% for object in last_publications %}
-    {% include object.item_template_name|default:'aircox/widgets/page_item.html' %}
-    {% endfor %}
-    {% endwith %}
-    {% endwith %}
-</section>
-{% endblock %}

aircox/templates/aircox/log_list.html

@@ -23,7 +23,9 @@
 
 
 {% block secondary-nav %}
-{% include "./widgets/dates_menu.html" with url_name="log-list" %}
+<nav class="nav secondary">
+    {% include "./widgets/dates_menu.html" with url_name="log-list" %}
+</nav>
 {% endblock %}
 
 

aircox/templates/aircox/page_detail.html

@@ -32,14 +32,10 @@ Context:
 {{ block.super }}
 
 {% block comments %}
-{% if comments or comment_form %}
+{% if comments %}
-<section class="container mt-6">
+<section class="container">
-<a-dropdown item-class="title is-3" button-class="button dropdown-trigger">
+    <h2 class="title">{% translate "Comments" %}</h2>
-    <template #item>
-        {% translate "Comments" %}
-    </template>
 
-    <template #default>
     {% for comment in comments %}
     <div class="media box">
         <div class="media-content">
@@ -54,23 +50,20 @@ Context:
         </div>
     </div>
     {% endfor %}
+</section>
+{% endif %}
 
-        {% if comment_form %}
+{% if comment_form %}
+<section class="container">
     <form method="POST">
-            <h5 class="title is-5">{% translate "Post a comment" %}</h5>
+        <h2 class="title">{% translate "Post a comment" %}</h2>
         {% csrf_token %}
         {% render_honeypot_field "website" %}
 
         {% for field in comment_form %}
-            <div class="field is-horizontal">
-                <div class="field-label is-normal">
-                    <label class="label">
-                        {{ field.label_tag }}
-                    </label>
-                </div>
-                <div class="field-body">
         <div class="field">
-                        <p class="control is-expanded">{{ field }}</p>
+            <label class="label">{{ field.label_tag }}</label>
+            <div class="control">{{ field }}</div>
             {% if field.errors %}
             <p class="help is-danger">{{ field.errors }}</p>
             {% endif %}
@@ -78,17 +71,13 @@ Context:
             <p class="help">{{ field.help_text|safe }}</p>
             {% endif %}
         </div>
-                </div>
-            </div>
         {% endfor %}
+
         <div class="has-text-right">
-                <button type="reset" class="button is-danger">{% translate "Reset" %}</button>
+            <button type="reset" class="button is-danger mr-3">{% translate "Reset" %}</button>
             <button type="submit" class="button is-success">{% translate "Post comment" %}</button>
         </div>
     </form>
-        {% endif %}
-    </template>
-</a-dropdown>
 </section>
 {% endif %}
 

aircox/templates/aircox/widgets/article.html

@@ -0,0 +1,4 @@
+{% extends "./page.html" %}
+{% load humanize %}
+
+{% block subtitle %}{{ object.pub_date.date }}{% endblock %}

aircox/templates/aircox/widgets/card.html

@@ -2,7 +2,12 @@
 {% load i18n %}
 
 {% block tag-class %}{{ block.super }} preview-card{% endblock %}
-{% block tag-style %}{{ block.super }}{% if cover %} background-image: url({{ cover }});{% endif %}{% endblock %}
+{% block tag-extra %}
+    {{ block.super }}
+    {% if cover %}
+    style="background-image: url({{ cover }});"
+    {% endif %}
+{% endblock %}
 {% block headings-class %}{{ block.super }} preview-card-headings{% endblock %}
 
 {% block inner %}

aircox/templates/aircox/widgets/comment.html

@@ -0,0 +1,50 @@
+{% extends "./page.html" %}
+{% load i18n humanize aircox %}
+
+{% block tag-class %}{{ block.super }} comment{% endblock %}
+
+{% block outer %}
+{% if with_title %}
+    {% with url=object.parent.get_absolute_url %}
+        {{ block.super }}
+    {% endwith %}
+{% else %}
+    {{ block.super }}
+{% endif %}
+{% endblock %}
+
+
+{% block title %}
+    {{ object.nickname }} — {{ object.date }}
+{% endblock %}
+
+{% block subtitle %}
+{% if with_title %}
+    {{ object.parent.title }}
+{% endif %}
+{% endblock %}
+
+
+{% block content %}{{ object.content }}{% endblock %}
+
+{% block actions %}
+{{ block.super }}
+
+{% if request.user.is_staff %}
+<span class="float-right">
+    <a href="{% url "admin:aircox_comment_change" object.pk %}"
+       title="{% trans "Edit comment" %}"
+       aria-label="{% trans "Edit comment" %}">
+        <span class="fa fa-edit"></span>
+    </a>
+    <a class="has-text-danger"
+       title="{% trans "Delete comment" %}"
+       aria-label="{% trans "Delete comment" %}"
+       href="{% url "admin:aircox_comment_delete" object.pk %}">
+        <span class="fa fa-trash-alt"></span>
+    </a>
+
+    {# <a href="mailto:{{ object.email }}">{{ object.nickname }}</a> #}
+</span>
+{% endif %}
+{% endblock %}

aircox/templates/aircox/widgets/dates_menu.html

@@ -11,9 +11,16 @@ An empty date results to a title or a separator
 {% endcomment %}
 {% load i18n %}
 
-<a-dropdown class="nav-item dropdown" button-class="dropdown-trigger button"
+{% for day in dates %}
+<a href="{% url url_name date=day %}" class="nav-item {% if day == date %}active{% endif %}">
+    {{ day|date:"l d" }}
+</a>
+{% endfor %}
+
+<a-dropdown class="nav-item align-right flex-grow-0 dropdown is-right"
         content-class="dropdown-menu"
-        buttonIconOpen="fa-solid fa-bars" buttonIconClose="fa-solid fa-bars">
+        button-tag="span" button-class="dropdown-trigger"
+        button-icon-open="fa-solid fa-plus" button-icon-close="fa-solid fa-minus">
     <template #default>
         <div class="dropdown-content">
             <div class="dropdown-item">
@@ -27,10 +34,3 @@ An empty date results to a title or a separator
         </div>
     </template>
 </a-dropdown>
-{% for day in dates %}
-<li class="nav-item {% if day == date %}active{% endif %}">
-    <a href="{% url url_name date=day %}" class="button">
-        {{ day|date:"l d" }}
-    </a>
-</li>
-{% endfor %}

aircox/templates/aircox/widgets/home_header.html

@@ -1,38 +0,0 @@
-{% extends "./base_header.html" %}
-{% load i18n humanize %}
-
-
-
-{% block subtitle %}
-    {% if diffusion %}
-    {{ diffusion.start|naturalday }},
-    {{ diffusion.start|date:"g:i" }}
-    {% endif %}
-{% endblock %}
-
-
-{% block headings %}
-{{ block.super }}
-{% with diffusion.episode.content|default:diffusion.episode.program.content|striptags|safe as content %}
-{% if content %}
-<div class="heading-container content">
-    {{ content|truncatewords:64|linebreaks }}
-</div>
-{% endif %}
-
-<div class="actions">
-    <button class="btn-outline-hg button">
-        <span class="icon">
-            <i class="fas fa-play"></i>
-        </span>
-        {% trans "Listen" %}
-    </button>
-    <a class="btn-outline-hg button" href="{{ diffusion.episode.get_absolute_url }}">
-        <span class="icon">
-            <i class="fas fa-external-link"></i>
-        </span>
-        {% trans "More informations" %}
-    </a>
-</div>
-{% endwith %}
-{% endblock %}

aircox/templates/aircox/widgets/item.html

@@ -1,20 +1,21 @@
+{% extends "./preview.html" %}
 {% load i18n aircox %}
 
-{% block outer %}
+{% block tag-class %}list-item is-fullwidth{% endblock %}
-<article class="preview list-item {% if not cover %}no-cover{% endif %}{% if is_primary %}is-primary{% endif %}{% block card_class %}{% endblock %}">
+{% block headings-class %} columns{% endblock %}
-{% block inner %}
 
-<a href="{{ url|escape }}" class="headings is-fullwidth columns">
 {% block headings %}
-    <div class="column">
+<div class="column">
-        <span class="heading title">{% block title %}{% endblock %}</span>
+    <a href="{{ url|escape }}" class="heading title {% block title-class %}{% endblock %}">{% block title %}{{ title|default:"" }}{% endblock %}</a>
-    </div>
+</div>
-    <div>
+<div>
-        <span class="heading subtitle">{% block subtitle %}{% endblock %}</span>
+    <span class="heading subtitle {% block subtitle-class %}{% endblock %}">{% block subtitle %}{{ subtitle|default:"" }}{% endblock %}</span>
-    </div>
+</div>
 {% endblock %}
-</a>
 
+{% block inner %}
+{% block headings-container %}{{ block.super }}{% endblock %}
+{% block content-container %}
 <div class="media">
     {% if object.cover %}
     <div class="media-left preview-cover small"
@@ -32,11 +33,10 @@
             {% endblock %}
         </section>
 
-        <div class="actions is-flex-grow-0">
+        {% block actions-container %}
-            {% block actions %}{% endblock %}
+        {{ block.super }}
+        {% endblock %}
     </div>
-    </template>
 {% endblock %}
-</div>
+
-</article>
 {% endblock %}

aircox/templates/aircox/widgets/page_list.html

@@ -8,7 +8,7 @@ Context:
 {% load i18n aircox %}
 
 {% for object in object_list %}
-{% widget object.item_template_name %}
+{% page_widget "item" object %}
 {% endfor %}
 
 {% if list_url %}

aircox/templates/aircox/widgets/preview.html

@@ -1,17 +1,30 @@
 {% load i18n %}
+{% comment %}
+Content related context:
+- object: object to display
+- cover: cover
+- title: title
+- subtitle: subtitle
+- content: content to display
+
+Styling related context:
+- tag_class: css class to set to main tag
+- tag_style: css styles to set to main tag
+- child_tag_class: css class to set to direct component node children
+
+{% endcomment %}
 
 {% block outer %}
-<article class="preview {% if not cover %}no-cover {% endif %}{% if is_active %}is-active{% endif %}{% block tag-class %}{{ tag_class|default:"" }}{% endblock %}"
+<article class="preview {% if not cover %}no-cover {% endif %}{% if is_active %}is-active{% endif %}{% block tag-class %}{{ tag_class|default:"" }}{% endblock %}" {% block tag-extra %}{% endblock %}>
-        style="{% block tag-style %}{{ tag_style }}{% endblock %}">
 {% block inner %}
     {% block headings-container %}
-    <header class="headings{% block headings-class %}{% endblock %}" >
+    <header class="headings{% block headings-class %}{% endblock %}"{% block headings-tag-extra %}{% endblock %}>
     {% block headings %}
         <div>
-            <a href="{{ url|escape }}" class="heading title">{% block title %}{{ title|default:"" }}{% endblock %}</a>
+            <a href="{{ url|escape }}" class="heading title {% block title-class %}{% endblock %}">{% block title %}{{ title|default:"" }}{% endblock %}</a>
         </div>
         <div>
-            <span class="heading subtitle">{% block subtitle %}{{ subtitle|default:"" }}{% endblock %}</span>
+            <span class="heading subtitle {% block subtitle-class %}{% endblock %}">{% block subtitle %}{{ subtitle|default:"" }}{% endblock %}</span>
         </div>
     {% endblock %}
     </header>

aircox/templates/aircox/widgets/wide.html

@@ -1,21 +1,20 @@
-{% extends "./card.html" %}
+{% extends "./preview.html" %}
 {% load i18n %}
 
-{% block tag_class %}{{ block.super }} wide{% endblock %}
+{% block tag-class %}{{ block.super }} preview-wide columns{% endblock %}
-
+{% block headings-class %}{{ block.super }} preview-card-headings{% endblock %}
-{% block inner %}
+{% block headings-tag-extra %}
-{% block headings-container %}
+    {{ block.super }}
-<header class="headings column preview-cover"
+    {% if cover %}
-    style="background-image: url({{ object.cover.url }})">
+    style="background-image: url({{ cover }});"
-    {% block headings %}{{ block.super }}{% endblock %}
+    {% endif %}
-</header>
 {% endblock %}
 
-<div class="height-full column">
-    <section class="content headings-container">
-        {% block content %}{{ block.super }}{% endblock %}
-    </section>
 
+{% block inner %}
+{% block headings-container %}{{ block.super }}{% endblock %}
+<div class="is-flex-direction-column">
+    {% block content-container %}{{ block.super }}{% endblock %}
     {% block actions-container %}{{ block.super }}{% endblock %}
 </div>
 {% endblock %}

aircox/views/home.py

@@ -5,12 +5,13 @@ from django.views.generic import ListView
 
 from ..models import Diffusion, Log, Page, StaticPage
 from .base import BaseView
+from .mixins import AttachedToMixin
 
 
-class HomeView(BaseView, ListView):
+class HomeView(AttachedToMixin, BaseView, ListView):
     template_name = "aircox/home.html"
-    model = Diffusion
     attach_to_value = StaticPage.ATTACH_TO_HOME
+    model = Diffusion
     queryset = Diffusion.objects.on_air().select_related("episode")
     logs_count = 5
     publications_count = 5

assets/src/assets/styles.scss

@@ -17,7 +17,7 @@ $mp-7: 4em;
 $text-size-small: 0.6em;
 $text-size-smaller: 0.8em;
 $text-size: 1em;
-$text-size-medium: 1.2em;
+$text-size-medium: 1.4em;
 $text-size-bigger: 1.6em;
 $text-size-big: 2em;
 
@@ -43,32 +43,7 @@ $screen-wider: 1280px;
 $screen-wide: 1380px;
 
 
-
+@import "./vendor";
-@import 'v-calendar/style.css';
-@import "~bulma/sass/utilities/_all.sass";
-
-$body-background-color: $light;
-$menu-item-hover-background-color: #dfdfdf;
-$menu-item-active-background-color: #d2d2d2;
-
-@import "~bulma/sass/base/_all";
-@import "~bulma/sass/components/_all";
-@import "~bulma/sass/form/_all";
-@import "~bulma/sass/grid/_all";
-@import "~bulma/sass/helpers/_all";
-@import "~bulma/sass/layout/_all";
-@import "~bulma/sass/elements/box";
-@import "~bulma/sass/elements/button";
-@import "~bulma/sass/elements/container";
-@import "~bulma/sass/elements/content";
-@import "~bulma/sass/elements/icon";
-// @import "~bulma/sass/elements/image";
-// @import "~bulma/sass/elements/notification";
-@import "~bulma/sass/elements/progress";
-@import "~bulma/sass/elements/table";
-@import "~bulma/sass/elements/tag";
-@import "~bulma/sass/elements/title";
-
 
 
 //-- helpers/modifiers
@@ -127,10 +102,6 @@ input.half-field:not(:active):not(:hover) {
 
 
 //-- navbar
-.navbar + .container {
-    margin-top: 1em;
-}
-
 .navbar.has-shadow, .navbar.is-fixed-bottom.has-shadow {
     box-shadow: 0em 0em 1em rgba(0,0,0,0.1);
 }
@@ -140,6 +111,10 @@ a.navbar-item.is-active {
 }
 
 .navbar {
+    & + .container {
+        margin-top: 1em;
+    }
+
     .navbar-dropdown {
         z-index: 2000;
     }
@@ -175,6 +150,7 @@ a.navbar-item.is-active {
 }
 
 //-- page
+/*
 .page {
     & > .cover {
         float: right;
@@ -201,32 +177,7 @@ a.navbar-item.is-active {
         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; }
     }
-}
+}*/
-
-
-// FIXME: remove -> only used in comment
-.media.item .headline {
-    line-height: 1.2em;
-    max-height: calc(1.2em * 3);
-    overflow: hidden;
-
-    & + .headline-overflow {
-        position: relative;
-        width: 100%;
-        height: 2em;
-        margin-top: -2em;
-    }
-
-    & + .headline-overflow:before {
-        content:'';
-        width:100%;
-        height:100%;
-        position:absolute;
-        left:0;
-        bottom:0;
-        background:linear-gradient(transparent 1em, $body-background-color);
-    }
-}
 
 
 //-- player
@@ -319,12 +270,6 @@ section > .toolbar {
 }
 
 
-main {
-    .cover.is-small { width: 10em; }
-    .cover.is-tiny { height: 2em; }
-}
-
-
 aside {
     & > section {
         margin-bottom: 2em;
@@ -350,14 +295,7 @@ aside {
 }
 
 
-.timetable {
-    width: 100%;
-    border: none;
-}
-
-
 // -- layout
-
 :root {
     --text-color: black;
     --highlight-color: rgba(255, 255, 0, 1);
@@ -389,6 +327,7 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
 
 .page {
     padding-bottom: 5em;
+
     a {
         background-color: var(--highlight-color-alpha);
         color: var(--highlight-color-2);
@@ -408,8 +347,11 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
 .p-sticky { position: sticky }
 .p-static { position: static }
 
+.align-right { text-align: right; justify-content: right; }
+
 .height-full { height: 100%; }
 .flex-push-right { margin-left: auto; }
+.flex-grow-0 { flex-grow: 0 !important; }
 
 
 .is-clickable { cursor: pointer; }
@@ -446,20 +388,18 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
     text-align: right;
 }
 
-.title.is-3 {
+.title {
+    text-transform: uppercase;
+
+    &.is-3 {
         margin-top: $mp-3;
+    }
 }
 
-.content, .navbar-item {
+.content {
     font-size: $text-size-medium;
 }
 
-.app-nav .navbar-item {
-    font-size: $text-size-medium;
-    padding-top: $mp-4;
-    padding-bottom: $mp-4;
-}
-
 
 .heading, .headings-container > * {
     display: inline-block;
@@ -497,48 +437,71 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
 }
 
 
-// ---- secondary navigation
+// ---- main navigation
-nav {
+.nav {
-    margin: $mp-3 0;
+    display: flex;
+    background-color: var(--highlight-color);
 
     .nav-item {
-        font-family: unset;
-        list-style: none;
-        display: inline-block;
-        margin-bottom: $mp-3;
-        vertical-align: unset !important;
-
-        a, .button {
         padding: $mp-3;
-            border: 1px solid hsl(0deg, 0%, 86%);
+        flex-grow: 1;
-            background-color: var(--highlight-color);
+        flex-shrink: 1;
-        }
+        text-align: center;
 
-        button, .button {
+        font-family: var(--heading-font-family);
-            vertical-align: inherit;
+        text-transform: uppercase;
-            padding-top: $mp-3;
-            padding-bottom: $mp-3;
-            height: unset !important;
-        }
 
-        &.active a, &.active button {
+        &.active {
             background-color: var(--highlight-color-2);
             color: var(--highlight-color);
         }
-
-        &:not(:last-child) {
-            margin-right: $mp-2;
     }
 
+    &.primary {
+        .navbar-brand {
+            display: inline-block;
+            margin-right: $mp-3;
+            padding: $mp-3;
+
+            img {
+                width: 14em !important;
+            }
+        }
+
+        .navbar-menu {
+            display: flex;
+            flex-grow: 1;
+        }
+
+        .nav-item {
+            font-size: $text-size-medium;
+            font-weight: $weight-bold;
+        }
+    }
+
+    &.secondary {
+        justify-content: right;
+
+        .nav-item {
+            font-size: 1.2em;
+        }
     }
 }
 
+nav li {
+    list-style: none;
+
+    a, .button {
+        font-size: $text-size-medium;
+    }
+}
 
 
 // ---- ---- previews & page items
 .preview {
     position: relative;
     background-size: cover;
+    margin-bottom: calc($mp-3);
 
     &.preview-card {
         &:not(.wide) {
@@ -563,9 +526,9 @@ nav {
         font-weight: $weight-bolder;
         font-size: $text-size-bigger;
     }
-    .content, .actions {
+    //.content, .actions {
-        font-size: $text-size-medium;
+    //    font-size: $text-size-bigger;
-    }
+    //}
 
     .headings {
         background-size: cover;
@@ -579,14 +542,15 @@ nav {
     }
 }
 
+    .preview.comment {
+        .title { font-size: $text-size-bigger; }
+        .subtitle { font-size: $text-size; }
+    }
+
 
 .list-item {
     width: 100%;
 
-    &:not(:last-child) {
-        margin-bottom: calc($mp-4 / 2);
-    }
-
     &:not(:first-child) {
         margin-top: calc($mp-4 / 2);
     }
@@ -597,6 +561,10 @@ nav {
         background-color: var(--heading-bg-color);
     }
 
+    .subtitle {
+        text-align: right;
+    }
+
     .media-content {
         display: flex;
         flex-direction: column;
@@ -616,19 +584,25 @@ nav {
 
 
 // ---- cards
-.preview-cover {
+.preview-wide {
-    background-size: cover;
     height: var(--preview-cover-size);
-    width: var(--preview-cover-size);
 
-    &.small {
+    &:not(.header) .headings {
-        min-width: unset;
+        box-shadow: 0em 0em 1em rgba(0,0,0,0.2);
-        height: var(--preview-cover-small-size);
+    }
-        width: var(--preview-cover-small-size) !important;
+
+    & .headings {
+        width: var(--preview-cover-size);
+        flex-grow: 0;
+        margin-right: $mp-3;
+    }
+
+    & .content {
+        font-size: $text-size-big;
+        flex-grow: 1;
     }
 }
 
-
 .preview-card {
     height: var(--preview-cover-size);
     min-width: var(--preview-cover-size);
@@ -653,9 +627,21 @@ nav {
 }
 
 
+.preview-cover {
+    background-size: cover;
+    height: var(--preview-cover-size);
+    width: var(--preview-cover-size);
+
+    &.small {
+        min-width: unset;
+        height: var(--preview-cover-small-size);
+        width: var(--preview-cover-small-size) !important;
+    }
+}
 
 .preview-card-headings {
     width: 100%;
+    min-width: var(--preview-cover-size);
     min-height: 100%;
 
     padding-top: $mp-3;
@@ -683,6 +669,10 @@ nav {
         height: unset;
     }
 
+    .headings {
+        padding-top: $mp-6;
+    }
+
     .headings, > .container {
         width: 100%;
     }
@@ -730,11 +720,6 @@ nav {
     gap: $mp-4;
 }
 
-@media screen and (max-width: $screen-normal) {
-    .page {
-        margin: 0em 1em;
-    }
-}
 
 @media screen and (max-width: $screen-wide) {
     .preview-card:not(.preview-header) {

assets/src/assets/vendor.scss

@@ -0,0 +1,31 @@
+@import 'v-calendar/style.css';
+@import "~bulma/sass/utilities/_all.sass";
+
+$body-background-color: $light;
+$menu-item-hover-background-color: #dfdfdf;
+$menu-item-active-background-color: #d2d2d2;
+
+@import "~bulma/sass/base/_all";
+@import "~bulma/sass/components/breadcrumb";
+@import "~bulma/sass/components/dropdown";
+@import "~bulma/sass/components/navbar";
+@import "~bulma/sass/components/media";
+@import "~bulma/sass/components/message";
+@import "~bulma/sass/components/modal";
+@import "~bulma/sass/components/pagination";
+
+@import "~bulma/sass/form/_all";
+@import "~bulma/sass/grid/_all";
+@import "~bulma/sass/helpers/_all";
+@import "~bulma/sass/layout/_all";
+@import "~bulma/sass/elements/box";
+@import "~bulma/sass/elements/button";
+@import "~bulma/sass/elements/container";
+@import "~bulma/sass/elements/content";
+@import "~bulma/sass/elements/icon";
+// @import "~bulma/sass/elements/image";
+// @import "~bulma/sass/elements/notification";
+@import "~bulma/sass/elements/progress";
+@import "~bulma/sass/elements/table";
+@import "~bulma/sass/elements/tag";
+@import "~bulma/sass/elements/title";

assets/src/components/ADropdown.vue

@@ -2,12 +2,13 @@
 <component :is="tag" :class="[itemClass, active ? activeClass : '']">
     <slot name="before-button"></slot>
     <slot name="button" :toggle="toggle" :active="active">
-        <button :class="[buttonClass]" @click="toggle()">
+        <component :is="buttonTag" :class="buttonClass" @click="toggle()">
             <span class="icon">
                 <i v-if="!active" :class="buttonIconOpen"></i>
                 <i v-if="active" :class="buttonIconClose"></i>
             </span>
-        </button>
+            {{ label }}
+        </component>
     </slot>
     <div :class="contentClass" v-show="active">
         <slot></slot>
@@ -24,6 +25,8 @@ export default {
 
     props: {
         tag: {type: String, default: "div"},
+        label: {type: String, default: ""},
+        buttonTag: {type: String, default: "button"},
         activeClass: {type: String, default: "is-active"},
         buttonClass: {type: String, default: "button"},
         buttonIconOpen: { type: String, default:"fa fa-angle-down"},

assets/src/index.js

@@ -12,7 +12,6 @@ import Builder from './appBuilder'
 import Sound from './sound'
 import {Set} from './model'
 
-import "./assets/vendor"
 import './assets/styles.scss'