page headers

assets/src/assets/styles.scss

@@ -157,6 +157,19 @@ body {
     background-color: $body-background-color;
 }
 
+
+@media screen and (max-width: $screen-wider) {
+    body { font-size: 1.2em; }
+}
+
+@media screen and (max-width: $screen-normal) {
+    body { font-size: 1em; }
+
+    :root {
+        --header-height: 20rem;
+    }
+}
+
 section > .toolbar {
     background-color: rgba(0,0,0,0.05);
     padding: 1em;
@@ -277,11 +290,13 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
 
 
 .schedules {
-    margin-top: calc(0rem - $mp-3) !important;
+    margin: 0;
     padding-top: 0;
 }
 
 .schedule {
+    margin-bottom: $mp-2;
+
     .day {
         font-weight: $weight-bold;
         margin-right: $mp-3;
@@ -638,7 +653,7 @@ nav li {
     .headings {
         background-size: cover;
 
-        * { margin: 0em; }
+        > * { margin: 0em; }
         .column { padding: 0em; }
 
         a {
@@ -647,6 +662,12 @@ nav li {
     }
 }
 
+@media screen and (max-width: $screen-small) {
+    .preview .content {
+        display: none;
+    }
+}
+
 .preview-cover {
     background-size: cover;
     background-color: transparent !important;
@@ -744,6 +765,10 @@ nav li {
 .preview-wide {
     height: var(--preview-cover-size);
 
+    .headings {
+        height: var(--preview-cover-size)
+    }
+
     &:not(.header) .headings {
         box-shadow: 0em 0em 1em rgba(0,0,0,0.2);
     }
@@ -756,7 +781,7 @@ nav li {
     }
 
     & .content {
-        font-size: $text-size-big;
+        font-size: $text-size-bigger;
         flex-grow: 1;
     }
 }
@@ -803,10 +828,22 @@ nav li {
 
 
 .header {
-    background-size: cover;
+    &.preview-header {
+        display: flex;
+        align-items: start;
+        gap: $mp-3;
+        min-height: unset;
+        padding-top: $mp-3 !important;
 
-    .preview-card {
-        max-width: unset;
+        .headings {
+            flex-grow: 1;
+            padding-top: 0 !important;
+        }
+
+    }
+    img {
+        height: var(--preview-cover-size);
+        max-width: calc(var(--preview-cover-size) * 2);
     }
 
     .title {
@@ -815,18 +852,6 @@ nav li {
     .subtitle {
         font-size: $h2-size;
     }
-    .content {
-        display: inline !important;
-        font-size: $text-size-medium;
-        font-weight: $weight-bolder;
-        text-align: right;
-
-
-        p {
-            margin-bottom: $mp-3
-        }
-    }
-
 }
 
 
@@ -857,7 +882,7 @@ nav li {
         position: absolute;
         display: flex;
         flex-direction: column;
-        top: calc(var(--preview-cover-size) - $text-size-medium);
+        top: 50%;
 
         &.prev { left: -$mp-3e; }
         &.next { right: -$mp-3e; }