navigation & breadcrumbs

assets/src/assets/components.scss

@@ -39,9 +39,9 @@
     --a-player-bar-bg: var(--highlight-color);
     --a-player-bar-title-alone-sz: #{v.$text-size-bigger};
 
-    --button-fg: var(--text-color);
+    --button-fg: var(--highlight-color-2);
     --button-bg: var(--highlight-color);
-    --button-hg-fg: var(--highlight-color-2);
+    --button-hg-fg: var(--text-color);
     --button-hg-bg: var(--highlight-color);
     --button-active-fg: var(--highlight-color);
     --button-active-bg: var(--highlight-color-2);
@@ -102,13 +102,13 @@
 @mixin button {
     .button, a.button, button.button, .nav-urls a {
         display: inline-block;
-        padding: v.$mp-3e;
-        border-radius: 4px;
+        padding: v.$mp-2e;
         border: 1px var(--highlight-color-2-alpha) solid;
         justify-content: center;
         text-align: center;
         font-size: v.$text-size-medium;
 
+        color: var(--button-fg);
         background-color: var(--button-bg);
 
         .icon {
@@ -169,7 +169,6 @@
 }
 
 
-
 // ---- preview
 .preview {
     position: relative;
@@ -355,6 +354,15 @@
     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);
     }
@@ -389,72 +397,6 @@
 
 }
 
-// ---- page header
-.header {
-    &.preview-header {
-        //display: flex;
-        align-items: start;
-        gap: v.$mp-3;
-        min-height: unset;
-        padding-top: v.$mp-3 !important;
-
-    }
-
-    .headings {
-        width: unset;
-        flex-grow: 1;
-        padding-top: 0 !important;
-
-        display: flex;
-        flex-direction: column;
-    }
-
-    &.has-cover {
-        min-height: calc( var(--header-height) / 2 );
-    }
-
-    .title {
-        font-size: v.$h1-size;
-    }
-    .subtitle {
-        font-size: v.$h2-size;
-    }
-}
-
-
-.header-cover:not(:only-child) {
-    float: right;
-    height: var(--header-height);
-    max-width: calc(var(--header-height) * 2);
-    margin: 0 0 v.$mp-4 v.$mp-4;
-}
-.header-cover:only-child {
-    with: 100%;
-}
-
-
-
-@media screen and (max-width: v.$screen-small) {
-    .container.header {
-        width: 100%;
-
-        .headings {
-            width: 100%;
-            clear: both;
-        }
-
-        .header-cover {
-            float: none;
-            width: 100%;
-            max-width: unset;
-            height: unset;
-            margin-left: 0rem;
-            margin-right: 0rem;
-        }
-    }
-
-}
-
 
 // ---- card grid
 .card-grid {
@@ -606,6 +548,10 @@
     box-shadow: 0em -0.5em 0.5em rgba(0, 0, 0, 0.05);
 
     a { color: var(--a-player-url-fg); }
+    .button {
+        color: var(--text-black);
+        &:hover { color: var(--button-fg); }
+    }
 }
 
 .a-player-panels {

assets/src/assets/public.scss

@@ -13,8 +13,13 @@
         color: var(--highlight-color-2);
         text-decoration: none;
         padding: v.$mp-2;
+
+        &:hover {
+            color: var(--text-color);
+        }
     }
 
+
     section.container {
         padding-top: v.$mp-6;
 
@@ -74,22 +79,12 @@
     }
 
     button, .action {
-        background-color: var(--highlight-color);
         justify-content: center;
         min-width: 2rem;
 
         .not-selected { opacity: 0.6; }
-
-
         .icon { margin: 0em !important; }
-
-        label {
-            margin-left: v.$mp-2;
-        }
-
-        &:hover, .selected {
-            color: var(--highlight-color-2) !important;
-        }
+        label { margin-left: v.$mp-2; }
     }
 
 }
@@ -115,6 +110,10 @@
 }
 
 // ---- main navigation
+.navs {
+    position: relative;
+}
+
 .nav {
     display: flex;
     background-color: var(--highlight-color);
@@ -145,7 +144,7 @@
             display: inline-block;
         }
 
-        &.active {
+        &.active, &:hover {
             background-color: var(--highlight-color-2);
             color: var(--highlight-color);
         }
@@ -189,7 +188,19 @@
     }
 
     &.secondary {
+        position: absolute;
+        width: 100%;
+        z-index: 100;
+        box-shadow: 0em 0.5em 0.5em rgba(0, 0, 0, 0.05);
+
         justify-content: right;
+        display: none;
+
+        .nav-item:hover + &, &:hover {
+            display: flex;
+            top: var(--nav-primary-height);
+            left: 0rem;
+        }
 
         .nav-item {
             font-size: v.$text-size;
@@ -197,6 +208,18 @@
     }
 }
 
+// ---- breadcrumbs
+.breadcrumbs {
+    text-align: right;
+    height: calc( v.$mp-3 * 2 + v.$text-size);
+    margin-bottom: v.$mp-2;
+
+    a + a:before {
+        content: "/";
+        margin: 0 v.$mp-2;
+    }
+}
+
 
 @media screen and (max-width: v.$screen-normal) {
     .page {
@@ -324,7 +347,7 @@ nav li {
     }
 
     &.has-cover {
-        min-height: calc( var(--header-height) / 2 );
+        min-height: calc( var(--header-height) / 3 );
     }
 
     .title {

assets/src/index.js

@@ -69,6 +69,6 @@ window.aircox = {
 
     pickDate(url, date) {
         url = `${url}?date=${date.id}`
-        this.builder.fetch(url)
+        this.loader.pageLoad.load(url)
     }
 }