player link; page rendering

assets/src/assets/components.scss

@@ -1,15 +1,21 @@
 @use "vars" as v;
 
 :root {
-    --heading-height: 30rem;
+    --title-1-sz: 2rem;
+    --title-2-sz: 1.6rem;
+    --title-3-sz: 1.4rem;
+    --subtitle-1-sz: 1.8rem;
+    --subtitle-2-sz: 1.6rem;
+    --subtitle-3-sz: 1.4rem;
+
     --heading-title-bg-color: rgba(255, 255, 0, 1);
     --heading-bg-color: var(--highlight-color);
     --heading-bg-highlight-color: var(--highlight-color-2);
     --heading-font-family: default;
 
-    --preview-title-sz: #{v.$text-size-bigger};
-    --preview-subtitle-sz: #{v.$text-size-medium};
-    --preview-cover-size: 24rem;
+    --preview-title-sz: #{v.$text-size-medium};
+    --preview-subtitle-sz: #{v.$text-size};
+    --preview-cover-size: 14rem;
     --preview-cover-small-size: 10rem;
     --preview-cover-tiny-size: 4rem;
     --preview-wide-content-sz: #{v.$text-size-bigger};
@@ -34,12 +40,12 @@
     --a-sound-hv-bg: var(--highlight-color);
     --a-sound-playing-fg: var(--highlight-color-alpha);
     --a-sound-hv-fg: var(--highlight-color-2);
-    --a-sound-text-sz: #{v.$text-size-medium};
+    --a-sound-text-sz: #{v.$text-size};
 
     --a-player-url-fg: var(--highlight-color-2);
     --a-player-panel-bg: var(--highlight-color);
     --a-player-bar-bg: var(--highlight-color);
-    --a-player-bar-title-alone-sz: #{v.$text-size-bigger};
+    --a-player-bar-title-alone-sz: #{v.$text-size-medium};
 
     --button-fg: var(--highlight-color-2);
     --button-bg: var(--highlight-color);
@@ -56,26 +62,25 @@
         --section-content-sz: 1rem;
 
         --preview-title-sz: #{v.$text-size};
-        --preview-subtitle-sz: #{v.$text-size};
-        --preview-cover-size: 14rem;
-        --preview-cover-small-size: 10rem;
+        --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};
     }
 }
 
-// ---- ---- Preview & items
 // ---- headings
-.title {
+.title, .header.preview .title {
     &.is-1 { font-size: var(--title-1-sz); }
     &.is-2 { font-size: var(--title-2-sz); }
     &.is-3 { font-size: var(--title-3-sz); }
 }
 
-.subtitle {
-    &.is-1 { font-size: var(--title-1-sz); }
-    &.is-2 { font-size: var(--title-2-sz); }
-    &.is-3 { font-size: var(--title-3-sz); }
+.subtitle, .header.preview .subtitle {
+    &.is-1 { font-size: var(--subtitle-1-sz); }
+    &.is-2 { font-size: var(--subtitle-2-sz); }
+    &.is-3 { font-size: var(--subtitle-3-sz); }
 }
 
 .heading {
@@ -105,11 +110,11 @@
 @mixin button {
     .button, a.button, button.button, .nav-urls a {
         display: inline-block;
-        padding: v.$mp-2e;
+        padding: v.$mp-2;
         border: 1px var(--highlight-color-2-alpha) solid;
         justify-content: center;
         text-align: center;
-        font-size: v.$text-size-medium;
+        // font-size: v.$text-size-medium;
 
         color: var(--button-fg);
         background-color: var(--button-bg);
@@ -300,6 +305,7 @@
     }
 
     .subtitle {
+        font-size: var(--preview-title-sz);
         text-align: right;
     }
 
@@ -328,6 +334,7 @@
 // ---- wide
 .preview-wide {
     height: var(--preview-cover-size);
+    display: flex;
 
     .headings {
         height: var(--preview-cover-size)
@@ -372,6 +379,11 @@
         box-shadow: 0em 0em 1em rgba(0,0,0,0.2);
     }
 
+    .title {
+        max-height: calc( var(--preview-cover-size) / 2 );
+        overflow: hidden;
+    }
+
     .card-grid & {
         min-width: unset;
     }

assets/src/assets/public.scss

@@ -90,7 +90,13 @@
 }
 
 .label, .textarea, .input, .select {
-    font-size: v.$text-size-medium;
+    font-size: v.$text-size;
+}
+
+@media screen and (min-width: v.$screen-small) {
+    textarea {
+        height: calc( v.$text-size * 10 ) !important;
+    }
 }
 
 .navbar-item.active, .table tr.is-selected {
@@ -355,13 +361,6 @@ nav li {
     &.has-cover {
         min-height: calc( var(--header-height) / 3 );
     }
-
-    .title {
-        font-size: v.$h1-size;
-    }
-    .subtitle {
-        font-size: v.$h2-size;
-    }
 }
 
 

assets/src/assets/vendor.scss

@@ -29,4 +29,4 @@ $title-color: #000;
 // @import "~bulma/sass/elements/progress";
 @import "~bulma/sass/elements/table";
 @import "~bulma/sass/elements/tag";
-@import "~bulma/sass/elements/title";
+//@import "~bulma/sass/elements/title";

assets/src/vueLoader.js

@@ -18,7 +18,7 @@ export default class VueLoader {
     }
 
     enable(hotReload=true) {
-        hotReload && this.pageLoad.enable()
+        hotReload && this.pageLoad.enable(document.body)
         this.mount()
     }