page containers, page avatars

src/pages/_layouts/error.html

@@ -3,8 +3,8 @@ layout: base
 body-class: border-top-wide border-primary d-flex flex-column
 ---
 
-<div class="flex-fill d-flex align-items-center justify-content-center">
-	<div class="container-tight py-6">
+<div class="page page-center">
+	<div class="container-tight py-4">
 		{% assign error = site.data.errors[page.error] %}
 		{% assign header = error.header | default: 'Oops… You just found an error page' %}
 		{% include ui/empty.html icon="settings" illustration=error.illustration icon-text=error.title title=header subtitle=error.description button-icon="arrow-left" button-text="Take me home" %}

src/pages/_layouts/single.html

@@ -3,8 +3,8 @@ layout: base
 body-class: border-top-wide border-primary d-flex flex-column
 ---
 
-<div class="flex-fill d-flex flex-column justify-content-center py-4">
-	<div class="container-{{ page.container-size | default: 'tight' }} py-6">
+<div class="page page-center">
+	<div class="container-{{ page.container-size | default: 'tight' }} py-4">
 		<div class="text-center mb-4">
 			<a href="{{ site.base }}"><img src="{{ site.base }}/static/logo.svg" height="36" alt=""></a>
 		</div>

src/scss/_variables.scss

@@ -270,6 +270,9 @@ $aspect-ratios: (
   "9x21": calc(21 / 9 * 100%),
 ) !default;
 
+// overlay
+$overlay-gradient: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .6) 100%) !default;
+
 //accordion
 $accordion-border-color: $border-color-transparent !default;
 $accordion-icon-width: 1rem !default;

src/scss/layout/_page.scss

@@ -5,6 +5,10 @@
   min-height: 100vh;
 }
 
+.page-center {
+  justify-content: center;
+}
+
 .content {
   margin-top: $content-padding-y;
   margin-bottom: $content-padding-y;
@@ -21,6 +25,41 @@
   }
 }
 
+.content-cover {
+  margin-top: -$content-padding-y;
+  margin-bottom: $content-padding-y;
+  background: no-repeat center/cover;
+  min-height: 9rem;
+
+  @include media-breakpoint-up(md) {
+    min-height: 12rem;
+  }
+
+  @include media-breakpoint-up(lg) {
+    min-height: 15rem;
+  }
+}
+
+.content-cover-overlay {
+  position: relative;
+
+  &:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: $overlay-gradient;
+  }
+}
+
+.content-white {
+  background: $card-bg;
+  border-top: 1px solid $card-border-color;
+  padding: $content-padding-y 0;
+}
+
 .content-full {
   margin: 0;
 }
@@ -70,4 +109,4 @@
 .page-subtitle {
   margin-top: .25rem;
   color: $text-muted;
-}
+}

src/scss/ui/_avatars.scss

@@ -108,3 +108,10 @@
   line-height: 1;
   margin-top: .25rem;
 }
+
+.page-avatar {
+  .content-cover ~ * & {
+    margin-top: calc(calc(-1 * calc(var(--tblr-avatar-size) / 2)) - #{$content-padding-y});
+    box-shadow: 0 0 0 .25rem $body-bg;
+  }
+}

src/scss/ui/_cards.scss

@@ -49,7 +49,7 @@
 }
 
 .card-img-overlay-dark {
-  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .6) 100%);
+  background-image: $overlay-gradient;
 }
 
 .card-inactive {
@@ -413,7 +413,10 @@ Card chart
 Card avatar
  */
 .card-avatar {
-  box-shadow: 0 0 0 .5rem $card-bg;
+  margin-left: auto;
+  margin-right: auto;
+  box-shadow: 0 0 0 .25rem $card-bg;
+  margin-top: calc(-1 * calc(var(--#{$variable-prefix}avatar-size) / 2));
 }
 
 /*