design / mockups

assets/src/assets/components.scss

@@ -14,21 +14,31 @@
     --heading-hg-fg: var(--text-color);
     --heading-hg-bg: var(--hg-color-2);
 
+    --cover-w: 14rem;
+    --cover-h: 14rem;
+    --cover-small-w: 10rem;
+    --cover-small-h: 10rem;
+    --cover-tiny-w: 10rem;
+    --cover-tiny-h: 10rem;
+
+    --card-w: var(--cover-w);
+
+
     --preview-bg: var(--body-bg);
-    --preview-title-sz: #{v.$text-size-medium};
-    --preview-subtitle-sz: #{v.$text-size};
+    --preview-title-sz: var(--title-3-sz);
+    --preview-subtitle-sz: var(--title-3-sz);
     --preview-cover-size: 14rem;
     --preview-cover-small-size: 10rem;
     --preview-cover-tiny-size: 4rem;
     --preview-wide-content-sz: #{v.$text-size-bigger};
     --preview-heading-bg-color: var(--hg-color);
-    --header-height: var(--preview-cover-size);
+    --header-height: var(--cover-h);
 
     --a-carousel-p: #{v.$text-size-medium};
     --a-carousel-ml: calc(#{v.$mp-4} - 0.5rem);
     --a-carousel-gap: #{v.$mp-4};
     --a-carousel-nav-x: -#{v.$mp-3e};
-    --a-carousel-bg: var(--secondary-color-light);
+    --a-carousel-bg: none; // var(--secondary-color-light);
 
     --a-progress-bg: transparent;
     --a-progress-bar-bg: var(--secondary-color);
@@ -70,13 +80,17 @@
 
 @media screen and (max-width: v.$screen-wide) {
     :root {
+        --cover-w: 10rem;
+        --cover-h: 10rem;
+        --cover-small-w: 6rem;
+        --cover-small-h: 6rem;
+        --cover-tiny-w: 4rem;
+        --cover-tiny-h: 4rem;
+
         --section-content-sz: 1rem;
 
         --preview-title-sz: #{v.$text-size};
         --preview-subtitle-sz: #{v.$text-size-smaller};
-        --preview-cover-size: 10rem;
-        --preview-cover-small-size: 6rem;
-        --preview-cover-tiny-size: 4rem;
         --preview-wide-content-sz: #{v.$text-size};
     }
 }
@@ -246,10 +260,21 @@
 
 
 .preview-cover {
+    background-color: var(--preview-bg);
     background-size: cover;
-    height: var(--preview-cover-size);
-    width: var(--preview-cover-size);
-    min-width: var(--preview-cover-size);
+    background-repeat: no-repeat;
+    height: var(--cover-h);
+    max-width: calc( var(--cover-w) * 1.5 );
+    min-width: var(--cover-w);
+    overflow: hidden;
+
+    img {
+        height: var(--cover-h);
+        max-width: calc( var(--cover-w) * 1.5 );
+        min-width: var(--cover-w);
+    }
+    img.hide { visibility: hidden; }
+
 
     &.small, .preview.small & {
         min-width: unset;
@@ -316,7 +341,7 @@
         font-size: var(--preview-title-sz);
         // background-color: var(--preview-heading-bg-color);
         text-align: right;
-        min-width: 8rem;
+        min-width: 9rem;
     }
 
     .media {
@@ -375,8 +400,64 @@
 
 
 // ---- card
+:root {
+    --preview-card-width: 20rem;
+}
+
 .preview-card {
+    display: flex;
+    flex-direction: column;
+    width: var(--card-w);
     padding: 0rem !important;
+    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;
+    }
+
+    .headings {
+        margin-top: v.$mp-2;
+
+        .heading {
+            display: block !important;
+        }
+
+        .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;
+        }
+    }
+
+    .card-content {
+        flex-grow: 1;
+        position: relative;
+
+        figure {
+            box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.2);
+            height: var(--cover-h);
+            width: var(--cover-w);
+        }
+
+        .actions {
+            position: absolute;
+            padding: v.$mp-2;
+            bottom: 0rem;
+            right: 0rem;
+        }
+
+    }
+
+    /*
     height: var(--preview-cover-size);
     width: var(--preview-cover-size);
 
@@ -414,22 +495,7 @@
         label {
             display: none;
         }
-    }
-}
-
-
-.card-headings, .preview-card-headings {
-    padding-top: v.$mp-3;
-
-    & > div:not(:last-child),
-    & .column > div {
-        margin-bottom: v.$mp-3;
-    }
-
-    preview-header:not(.no-cover) & .heading {
-        margin-bottom: v.$mp-3;
-    }
-
+    }*/
 }
 
 
@@ -465,7 +531,7 @@
         // background-color: var(--a-carousel-bg);
         margin-bottom: var(--a-carousel-p);
         padding: var(--a-carousel-p) 0;
-        padding-left: var(--a-carousel-ml);
+        margin-top: calc( 0rem - var(--a-carousel-p) );
     }
 }
 
@@ -482,6 +548,10 @@
 .a-carousel-bullets-container {
     // due to a-carousel margin-left
     padding-left: var(--a-carousel-ml);
+
+    .bullet {
+        margin: v.$mp-1;
+    }
 }
 
 

assets/src/assets/public.scss

@@ -22,7 +22,7 @@
         margin-top: v.$mp-3;
 
         > .title {
-            font-size: v.$text-size-medium;
+            font-size: var(--title-2-sz);
             clear: both;
             margin-bottom: v.$mp-4;
         }

assets/src/assets/vendor.scss

@@ -10,6 +10,7 @@ $title-color: #000;
 
 @import "~bulma/sass/base/_all";
 @import "~bulma/sass/components/dropdown";
+// @import "~bulma/sass/components/card";
 @import "~bulma/sass/components/media";
 @import "~bulma/sass/components/message";
 @import "~bulma/sass/components/modal";

assets/src/components/ACarousel.vue

@@ -32,7 +32,7 @@
 
 .a-carousel-viewport {
     width: 100%;
-    overflow: hidden;
+    overflow-x: hidden;
 }
 
 .a-carousel-container {