aircox/static/aircox/css/admin.css

@@ -9,10 +9,11 @@
   --subtitle-2-sz: 1.4rem;
   --subtitle-3-sz: 1.2rem;
   --heading-font-family: default;
-  --heading-bg: var(--hg-color);
+  --heading-bg: var(--main-color);
   --heading-fg: var(--text-color);
   --heading-hg-fg: var(--text-color);
-  --heading-hg-bg: var(--hg-color-2);
+  --heading-hg-bg: var(--secondary-color);
+  --heading-link-hv-fg: var(--link-fg);
   --cover-w: 14rem;
   --cover-h: 14rem;
   --cover-small-w: 10rem;
@@ -91,6 +92,9 @@
   font-size: var(--title-3-sz);
 }
 
+.subtitle, .header.preview .subtitle {
+  color: var(--text-color-light);
+}
 .subtitle.is-1, .header.preview .subtitle.is-1 {
   font-size: var(--subtitle-1-sz);
 }
@@ -101,6 +105,10 @@
   font-size: var(--subtitle-3-sz);
 }
 
+.title + .subtitle {
+  padding-top: 0em !important;
+}
+
 .headings a, a.heading, a.subtitle {
   text-decoration: none !important;
 }
@@ -109,7 +117,6 @@
   display: inline-block;
 }
 .heading:not(:empty) {
-  color: var(--heading-fg);
   padding: 0.4rem;
   margin-top: 0em !important;
   vertical-align: top;
@@ -155,6 +162,9 @@
 .preview .headings a {
   color: var(--text-color);
 }
+.preview .headings a:hover {
+  color: var(--heading-link-hv-fg) !important;
+}
 .preview.tiny .content {
   font-size: 1rem;
 }
@@ -270,10 +280,6 @@
   flex-grow: 1;
 }
 
-:root {
-  --preview-card-width: 20rem;
-}
-
 .preview-card {
   display: flex;
   flex-direction: column;
@@ -282,49 +288,13 @@
   margin-bottom: auto;
   background-color: var(--preview-bg) !important;
   transition: box-shadow 0.2s;
-  /*
-  height: var(--preview-cover-size);
-  width: var(--preview-cover-size);
-
-  &.small {
-      height: var(--preview-cover-small-size);
-      width: var(--preview-cover-small-size);
-  }
-  &.tiny {
-      height: var(--preview-cover-tiny-size);
-      width: var(--preview-cover-tiny-size);
-  }
-
-  &:not(.header) {
-      box-shadow: 0em 0em 1em rgba(0,0,0,0.2);
-  }
-
-  .heading {
-      background-color: var(--preview-heading-bg-color);
-  }
-
-  .title {
-      max-height: calc( var(--preview-cover-size) / 2 );
-      overflow: hidden;
-  }
-
-  .card-grid & {
-      min-width: unset;
-  }
-
-  .actions {
-      position: absolute;
-      bottom: v.$mp-3;
-      right: v.$mp-3;
-
-      label {
-          display: none;
-      }
-  }*/
 }
 .preview-card:hover figure {
   box-shadow: 0em 0em 1.2em rgba(0, 0, 0, 0.4) !important;
 }
+.preview-card:hover a {
+  color: var(--heading-link-hv-fg);
+}
 .preview-card .headings {
   margin-top: 0.4rem;
 }
@@ -335,7 +305,7 @@
   overflow: hidden;
 }
 .preview-card .headings .subtitle {
-  font-size: 1.4rem;
+  font-size: 1.2rem;
 }
 .preview-card .card-content {
   flex-grow: 1;
@@ -343,6 +313,7 @@
 }
 .preview-card .card-content figure {
   box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.2);
+  border: 1px #c4c4c4 solid;
   height: var(--cover-h);
   width: var(--cover-w);
 }
@@ -353,12 +324,6 @@
   right: 0rem;
 }
 
-.card-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  gap: 1.2rem;
-}
-
 .list-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -366,7 +331,7 @@
   gap: 1.2rem;
 }
 
-@media screen and (max-width: 800px) {
+@media screen and (max-width: 900px) {
   .list-grid {
     grid-template-columns: 1fr;
   }

aircox/static/aircox/css/chunk-common.css

@@ -6972,6 +6972,7 @@ input.half-field:not(:active):not(:hover) {
 :root {
   --body-bg: #fff;
   --text-color: black;
+  --text-color-light: #555;
   --main-color: #EFCA08;
   --main-color-light: #F4da51;
   --main-color-dark: #F49F0A;

aircox/static/aircox/css/public.css

@@ -9,10 +9,11 @@
   --subtitle-2-sz: 1.4rem;
   --subtitle-3-sz: 1.2rem;
   --heading-font-family: default;
-  --heading-bg: var(--hg-color);
+  --heading-bg: var(--main-color);
   --heading-fg: var(--text-color);
   --heading-hg-fg: var(--text-color);
-  --heading-hg-bg: var(--hg-color-2);
+  --heading-hg-bg: var(--secondary-color);
+  --heading-link-hv-fg: var(--link-fg);
   --cover-w: 14rem;
   --cover-h: 14rem;
   --cover-small-w: 10rem;
@@ -91,6 +92,9 @@
   font-size: var(--title-3-sz);
 }
 
+.subtitle, .header.preview .subtitle {
+  color: var(--text-color-light);
+}
 .subtitle.is-1, .header.preview .subtitle.is-1 {
   font-size: var(--subtitle-1-sz);
 }
@@ -101,6 +105,10 @@
   font-size: var(--subtitle-3-sz);
 }
 
+.title + .subtitle {
+  padding-top: 0em !important;
+}
+
 .headings a, a.heading, a.subtitle {
   text-decoration: none !important;
 }
@@ -109,7 +117,6 @@
   display: inline-block;
 }
 .heading:not(:empty) {
-  color: var(--heading-fg);
   padding: 0.4rem;
   margin-top: 0em !important;
   vertical-align: top;
@@ -155,6 +162,9 @@
 .preview .headings a {
   color: var(--text-color);
 }
+.preview .headings a:hover {
+  color: var(--heading-link-hv-fg) !important;
+}
 .preview.tiny .content {
   font-size: 1rem;
 }
@@ -270,10 +280,6 @@
   flex-grow: 1;
 }
 
-:root {
-  --preview-card-width: 20rem;
-}
-
 .preview-card {
   display: flex;
   flex-direction: column;
@@ -282,49 +288,13 @@
   margin-bottom: auto;
   background-color: var(--preview-bg) !important;
   transition: box-shadow 0.2s;
-  /*
-  height: var(--preview-cover-size);
-  width: var(--preview-cover-size);
-
-  &.small {
-      height: var(--preview-cover-small-size);
-      width: var(--preview-cover-small-size);
-  }
-  &.tiny {
-      height: var(--preview-cover-tiny-size);
-      width: var(--preview-cover-tiny-size);
-  }
-
-  &:not(.header) {
-      box-shadow: 0em 0em 1em rgba(0,0,0,0.2);
-  }
-
-  .heading {
-      background-color: var(--preview-heading-bg-color);
-  }
-
-  .title {
-      max-height: calc( var(--preview-cover-size) / 2 );
-      overflow: hidden;
-  }
-
-  .card-grid & {
-      min-width: unset;
-  }
-
-  .actions {
-      position: absolute;
-      bottom: v.$mp-3;
-      right: v.$mp-3;
-
-      label {
-          display: none;
-      }
-  }*/
 }
 .preview-card:hover figure {
   box-shadow: 0em 0em 1.2em rgba(0, 0, 0, 0.4) !important;
 }
+.preview-card:hover a {
+  color: var(--heading-link-hv-fg);
+}
 .preview-card .headings {
   margin-top: 0.4rem;
 }
@@ -335,7 +305,7 @@
   overflow: hidden;
 }
 .preview-card .headings .subtitle {
-  font-size: 1.4rem;
+  font-size: 1.2rem;
 }
 .preview-card .card-content {
   flex-grow: 1;
@@ -343,6 +313,7 @@
 }
 .preview-card .card-content figure {
   box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.2);
+  border: 1px #c4c4c4 solid;
   height: var(--cover-h);
   width: var(--cover-w);
 }
@@ -353,12 +324,6 @@
   right: 0rem;
 }
 
-.card-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  gap: 1.2rem;
-}
-
 .list-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -366,7 +331,7 @@
   gap: 1.2rem;
 }
 
-@media screen and (max-width: 800px) {
+@media screen and (max-width: 900px) {
   .list-grid {
     grid-template-columns: 1fr;
   }
@@ -7362,14 +7327,12 @@ a.tag:hover {
 }
 .page section.container {
   margin-top: 0.6rem;
+  margin-bottom: 1.2rem;
 }
 .page section.container > .title {
   font-size: var(--title-2-sz);
   clear: both;
-  margin-bottom: 1.2rem;
+  margin: 0.6rem 0;
-}
-.page section.container:not(:last-child) {
-  margin-bottom: 0.6rem;
 }
 
 .dropdown-item {

aircox/static/aircox/js/chunk-common.js

@@ -225,7 +225,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \**********************************************************************************************************************************************************************************************************************************************************************/
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   render: function() { return /* binding */ render; }\n/* harmony export */ });\n/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.esm-bundler.js\");\n\nfunction render(_ctx, _cache, $props, $setup, $data, $options) {\n  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"div\", null, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, \"default\", {\n    page: _ctx.page,\n    podcasts: $data.podcasts\n  })]);\n}\n\n//# sourceURL=webpack://aircox-assets/./src/components/AEpisode.vue?./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use%5B0%5D!./node_modules/vue-loader/dist/templateLoader.js??ruleSet%5B1%5D.rules%5B3%5D!./node_modules/vue-loader/dist/index.js??ruleSet%5B0%5D.use%5B0%5D");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   render: function() { return /* binding */ render; }\n/* harmony export */ });\n/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.esm-bundler.js\");\n\nfunction render(_ctx, _cache, $props, $setup, $data, $options) {\n  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, \"default\", {\n    page: _ctx.page,\n    podcasts: $data.podcasts\n  });\n}\n\n//# sourceURL=webpack://aircox-assets/./src/components/AEpisode.vue?./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use%5B0%5D!./node_modules/vue-loader/dist/templateLoader.js??ruleSet%5B1%5D.rules%5B3%5D!./node_modules/vue-loader/dist/index.js??ruleSet%5B0%5D.use%5B0%5D");
 
 /***/ }),
 

aircox/templates/aircox/article_detail.html

@@ -1,30 +1,2 @@
 {% extends "aircox/page_detail.html" %}
 {% comment %}Detail page for regular articles{% endcomment %}
-{% load i18n %}
-
-{% block sidebar %}
-{{ block.super }}
-
-{% if sidebar_object_list %}
-<section>
-    {% comment %}Translators: in page detail sidebar{% endcomment %}
-    <h4 class="title is-4">{% translate "Latest news" %}</h4>
-
-    {% for object in sidebar_object_list %}
-    {% include "aircox/widgets/page_item.html" %}
-    {% endfor %}
-
-    <br>
-    <nav class="pagination is-centered">
-        <ul class="pagination-list">
-            <li>
-                <a href="{% url "article-list" %}" class="pagination-link"
-                    aria-label="{% translate "Show all news" %}">
-                    {% translate "More news" %}
-                </a>
-            </li>
-        </ul>
-    </nav>
-</section>
-{% endif %}
-{% endblock %}

aircox/templates/aircox/episode_detail.html

@@ -4,7 +4,6 @@
 
 
 {% block content-container %}
-{{ block.container }}
 
 <a-episode :page="{title: &quot;{{ page.title }}&quot;, podcasts: {{ object.podcasts|json }}}">
 <template v-slot="{podcasts,page}">
@@ -13,7 +12,7 @@
     {% if object.podcasts %}
     {% spaceless %}
     <section class="container no-border">
-        <h3 class="title is-3">{% translate "Podcasts" %}</h3>
+        <h3 class="title">{% translate "Podcasts" %}</h3>
         <a-playlist v-if="page" :set="podcasts"
             name="{{ page.title }}"
             list-class="menu-list" item-class="menu-item"
@@ -26,7 +25,7 @@
 
     {% if tracks %}
     <section class="container">
-        <h3 class="title is-3">{% translate "Playlist" %}</h3>
+        <h3 class="title">{% translate "Playlist" %}</h3>
         <table class="table is-hoverable is-fullwidth">
             <thead>
                 <tr>
@@ -48,8 +47,6 @@
         </table>
     </section>
     {% endif %}
-
-
 </template>
 </a-episode>
 {% endblock %}

aircox/templates/aircox/home.html

@@ -55,7 +55,7 @@
 
 {% if podcasts %}
 <section class="container">
-    <h2 class="title is-3 p-2">{% translate "Last podcasts" %}</h2>
+    <h2 class="title">{% translate "Last podcasts" %}</h2>
     {% include "./widgets/carousel.html" with objects=podcasts url_name="podcast-list" url_label=_("All podcasts") %}
 </section>
 {% endif %}

aircox/templates/aircox/page_detail.html

@@ -46,7 +46,7 @@ Context:
 {% if related_objects %}
 <section class="container">
     {% with models=object|verbose_name:True %}
-    <h3 class="title is-3">{% blocktranslate %}Related {{models}}{% endblocktranslate %}</h3>
+    <h3 class="title">{% blocktranslate %}Related {{models}}{% endblocktranslate %}</h3>
 
     {% include "./widgets/carousel.html" with objects=related_objects url_name=object.list_url_name url_category=object.category %}
     {% endwith %}

aircox/templates/aircox/program_detail.html

@@ -37,7 +37,7 @@
 
 {% if episodes %}
 <section class="container">
-    <h3 class="title is-3">{% translate "Last Episodes" %}</h3>
+    <h3 class="title">{% translate "Last Episodes" %}</h3>
     {% include "./widgets/carousel.html" with objects=episodes url_name="episode-list" url_parent=object url_label=_("All episodes") %}
 </section>
 {% endif %}
@@ -45,7 +45,7 @@
 
 {% if articles %}
 <section class="container">
-    <h3 class="title is-3">{% translate "Last Articles" %}</h3>
+    <h3 class="title">{% translate "Last Articles" %}</h3>
     {% include "./widgets/carousel.html" with objects=articles url_name="article-list" url_parent=object url_label=_("All articles") %}
 </section>
 {% endif %}

aircox/urls.py

@@ -46,7 +46,9 @@ urls = [
         name="article-list",
     ),
     path(
-        _("articles/c/<slug:category_slug>/"), views.ArticleListView.as_view(model=models.Article), name="article-list"
+        _("articles/c/<slug:category_slug>/"),
+        views.ArticleListView.as_view(model=models.Article),
+        name="article-list",
     ),
     path(
         _("articles/<slug:slug>/"),

aircox/views/article.py

@@ -7,13 +7,8 @@ __all__ = ["ArticleDetailView", "ArticleListView"]
 class ArticleDetailView(PageDetailView):
     model = Article
 
-    def get_sidebar_queryset(self):
-        qs = Article.objects.published().select_related("cover").order_by("-pub_date")
-        return qs
-
 
 class ArticleListView(PageListView):
     model = Article
-    has_headline = True
     parent_model = Program
     attach_to_value = StaticPage.Target.ARTICLES

aircox/views/page.py

@@ -1,4 +1,4 @@
-from django.http import Http404, HttpResponse
+from django.http import HttpResponse
 from django.utils.translation import gettext_lazy as _
 from django.views.generic import DetailView, ListView
 from django.urls import reverse
@@ -7,7 +7,6 @@ from honeypot.decorators import check_honeypot
 from ..filters import PageFilters
 from ..forms import CommentForm
 from ..models import Comment, Category
-from ..utils import Redirect
 from .base import BaseView
 from .mixins import AttachedToMixin, FiltersMixin, ParentMixin
 
@@ -22,6 +21,13 @@ __all__ = [
 class BasePageMixin:
     category = None
 
+    def get_queryset(self):
+        query = super().get_queryset().select_subclasses()
+        user = self.request.user
+        if not user.is_staff:
+            query = query.published()
+        return query.select_related("cover")
+
     def get_category(self, page, **kwargs):
         if page:
             if getattr(page, "category_id", None):
@@ -53,7 +59,7 @@ class BasePageListView(AttachedToMixin, BasePageMixin, ParentMixin, BaseView, Li
         return super().get(*args, **kwargs)
 
     def get_queryset(self):
-        query = super().get_queryset().select_subclasses().published().select_related("cover")
+        query = super().get_queryset()
         if self.category:
             query = query.filter(category=self.category)
         return query
@@ -81,9 +87,6 @@ class BasePageDetailView(BasePageMixin, BaseView, DetailView):
     template_name = "aircox/basepage_detail.html"
     context_object_name = "page"
 
-    def get(self, *args, **kwargs):
-        return super().get(*args, **kwargs)
-
     def get_context_data(self, **kwargs):
         if self.object.cover:
             kwargs.setdefault("cover", self.object.cover.url)
@@ -91,27 +94,11 @@ class BasePageDetailView(BasePageMixin, BaseView, DetailView):
             kwargs.setdefault("title", self.object.display_title)
         return super().get_context_data(**kwargs)
 
-    def get_queryset(self):
-        return super().get_queryset().select_related("cover")
-
-    # This should not exists: it allows mapping not published pages
-    # or it should be only used for trashed pages.
-    def not_published_redirect(self, page):
-        """When a page is not published, redirect to the returned url instead
-        of an HTTP 404 code."""
-        return None
-
     def get_object(self):
         if getattr(self, "object", None):
             return self.object
 
         obj = super().get_object()
-        if not obj.is_published:
-            redirect_url = self.not_published_redirect(obj)
-            if redirect_url:
-                raise Redirect(redirect_url)
-            raise Http404("%s not found" % self.model._meta.verbose_name)
-
         self.category = self.get_category(obj)
         return obj
 

assets/src/assets/common.scss

@@ -15,6 +15,7 @@ input.half-field:not(:active):not(:hover) {
 :root {
     --body-bg: #fff;
     --text-color: black;
+    --text-color-light: #555;
 
     --main-color: #EFCA08;
     --main-color-light: #F4da51;

assets/src/assets/components.scss

@@ -9,10 +9,11 @@
     --subtitle-3-sz: 1.2rem;
 
     --heading-font-family: default;
-    --heading-bg: var(--hg-color);
+    --heading-bg: var(--main-color);
     --heading-fg: var(--text-color);
     --heading-hg-fg: var(--text-color);
-    --heading-hg-bg: var(--hg-color-2);
+    --heading-hg-bg: var(--secondary-color);
+    --heading-link-hv-fg: var(--link-fg);
 
     --cover-w: 14rem;
     --cover-h: 14rem;
@@ -103,11 +104,17 @@
 }
 
 .subtitle, .header.preview .subtitle {
+    color: var(--text-color-light);
+
     &.is-1 { font-size: var(--subtitle-1-sz); }
     &.is-2 { font-size: var(--subtitle-2-sz); }
     &.is-3 { font-size: var(--subtitle-3-sz); }
 }
 
+.title + .subtitle {
+    padding-top: 0em !important;
+}
+
 .headings a, a.heading, a.subtitle {
     text-decoration: none !important;
 }
@@ -117,7 +124,7 @@
 
     &:not(:empty) {
         // border-bottom: 1px var(--heading-bg) solid;
-        color: var(--heading-fg);
+        // color: var(--heading-fg);
         padding: v.$mp-2;
         margin-top: 0em !important;
         vertical-align: top;
@@ -245,9 +252,8 @@
         > * { margin: 0em; }
         .column { padding: 0em; }
 
-        a {
+        a { color: var(--text-color); }
-            color: var(--text-color);
+        a:hover { color: var(--heading-link-hv-fg) !important; }
-        }
     }
 
     &.tiny {
@@ -400,10 +406,6 @@
 
 
 // ---- card
-:root {
-    --preview-card-width: 20rem;
-}
-
 .preview-card {
     display: flex;
     flex-direction: column;
@@ -412,11 +414,16 @@
     margin-bottom: auto;
 
     background-color: var(--preview-bg) !important;
-
     transition: box-shadow 0.2s;
 
-    &:hover figure {
+    &:hover {
-        box-shadow: 0em 0em 1.2em rgba(0, 0, 0, 0.4) !important;
+        figure {
+            box-shadow: 0em 0em 1.2em rgba(0, 0, 0, 0.4) !important;
+        }
+
+        a {
+            color: var(--heading-link-hv-fg);
+        }
     }
 
     .headings {
@@ -427,14 +434,11 @@
         }
 
         .title {
-//            background-color: var(--preview-heading-bg-color);
-//            max-height: 5rem;
             overflow: hidden;
         }
 
         .subtitle {
-//            background-color: var(--main-color-light);
+            font-size: v.$text-size-2;
-            font-size: v.$text-size-medium;
         }
     }
 
@@ -444,6 +448,7 @@
 
         figure {
             box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.2);
+            border: 1px #c4c4c4 solid;
             height: var(--cover-h);
             width: var(--cover-w);
         }
@@ -456,56 +461,10 @@
         }
 
     }
-
-    /*
-    height: var(--preview-cover-size);
-    width: var(--preview-cover-size);
-
-    &.small {
-        height: var(--preview-cover-small-size);
-        width: var(--preview-cover-small-size);
-    }
-    &.tiny {
-        height: var(--preview-cover-tiny-size);
-        width: var(--preview-cover-tiny-size);
-    }
-
-    &:not(.header) {
-        box-shadow: 0em 0em 1em rgba(0,0,0,0.2);
-    }
-
-    .heading {
-        background-color: var(--preview-heading-bg-color);
-    }
-
-    .title {
-        max-height: calc( var(--preview-cover-size) / 2 );
-        overflow: hidden;
-    }
-
-    .card-grid & {
-        min-width: unset;
-    }
-
-    .actions {
-        position: absolute;
-        bottom: v.$mp-3;
-        right: v.$mp-3;
-
-        label {
-            display: none;
-        }
-    }*/
 }
 
 
 // ---- grid
-.card-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    gap: v.$mp-4;
-}
-
 .list-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;

assets/src/assets/public.scss

@@ -20,16 +20,14 @@
 
     section.container {
         margin-top: v.$mp-3;
+        margin-bottom: v.$mp-4;
 
         > .title {
             font-size: var(--title-2-sz);
             clear: both;
-            margin-bottom: v.$mp-4;
+            margin: v.$mp-3 0;
         }
 
-        &:not(:last-child) {
-            margin-bottom: v.$mp-3;
-        }
     }
 }
 

assets/src/assets/vars.scss

@@ -45,9 +45,8 @@ $weight-bolder: 500;
 $weight-bold: 700;
 
 $screen-very-small: 400px;
-//TODO: switch small & smaller
 $screen-small: 600px;
-$screen-smaller: 800px;
+$screen-smaller: 900px;
 $screen-normal: 1024px;
 $screen-wider: 1280px;
 $screen-wide: 1380px;

assets/src/components/AEpisode.vue

@@ -1,7 +1,5 @@
 <template>
-    <div>
+    <slot :page="page" :podcasts="podcasts"></slot>
-        <slot :page="page" :podcasts="podcasts"></slot>
-    </div>
 </template>
 
 <script>