design

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 {
-            color: var(--text-color);
-        }
+        a { 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 {
-        box-shadow: 0em 0em 1.2em rgba(0, 0, 0, 0.4) !important;
+    &:hover {
+        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-medium;
+            font-size: v.$text-size-2;
         }
     }
 
@@ -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>
-    </div>
+    <slot :page="page" :podcasts="podcasts"></slot>
 </template>
 
 <script>