v5.5.0

closes https://github.com/TryGhost/Casper/issues/942

assets/css/screen.css

@@ -1296,27 +1296,26 @@ is laid out on top of. Canvas just defines the grid, we don't
 use it for applying any other styles. */
 
 .gh-canvas {
+    --gap: max(4vmin, 20px);
+    --main: min(var(--content-width, 720px), 100% - var(--gap) * 2);
+    --wide: minmax(0, calc((var(--container-width, 1200px) - var(--content-width, 720px)) / 2));
+    --full: minmax(var(--gap), 1fr);
+
     display: grid;
     grid-template-columns:
-        [full-start]
+        [full-start] var(--full)
-        minmax(max(4vmin, 20px), auto)
+        [wide-start] var(--wide)
-            [wide-start]
+        [main-start] var(--main) [main-end]
-            minmax(auto, 240px)
+        var(--wide) [wide-end]
-                [main-start]
+        var(--full) [full-end];
-                    min(720px, calc(100% - max(8vmin, 40px)))
-                [main-end]
-            minmax(auto, 240px)
-            [wide-end]
-        minmax(max(4vmin, 20px), auto)
-        [full-end]
-    ;
 }
 
 .gh-canvas > * {
     grid-column: main-start / main-end;
 }
 
-.kg-width-wide {
+.kg-width-wide,
+.kg-content-wide > div {
     grid-column: wide-start / wide-end;
 }
 
@@ -2119,8 +2118,7 @@ html.dark-mode figcaption a {
     color: #fff;
 }
 
-html.dark-mode .gh-head,
+html.dark-mode body:not(.has-cover) .gh-head {
-html.dark-mode .has-cover:not(.home-template) .gh-head {
     background: var(--color-darkmode);
     color: #fff;
 }
@@ -2288,8 +2286,8 @@ html.dark-mode .footer-cta-title {
 }
 
 @media (max-width: 767px) {
-    html.dark-mode .gh-head-open #gh-head,
+    html.dark-mode .gh-head-open:not(.has-cover) #gh-head,
-    html.dark-mode .gh-head-open #gh-head .gh-head-actions {
+    html.dark-mode .gh-head-open:not(.has-cover) #gh-head .gh-head-actions {
         background: var(--color-darkmode);
     }
 }
@@ -2312,8 +2310,7 @@ html.dark-mode .footer-cta-title {
         color: #fff;
     }
 
-    html.auto-color .gh-head,
+    html.auto-color body:not(.has-cover) .gh-head {
-    html.auto-color .has-cover:not(.home-template) .gh-head {
         background: var(--color-darkmode);
         color: #fff;
     }
@@ -2481,8 +2478,8 @@ html.dark-mode .footer-cta-title {
     }
 
     @media (max-width: 767px) {
-        html.auto-color .gh-head-open #gh-head,
+        html.auto-color .gh-head-open:not(.has-cover) #gh-head,
-        html.auto-color .gh-head-open #gh-head .gh-head-actions {
+        html.auto-color .gh-head-open:not(.has-cover) #gh-head .gh-head-actions {
             background: var(--color-darkmode);
         }
     }

package.json

@@ -2,7 +2,7 @@
     "name": "casper",
     "description": "A clean, minimal default theme for the Ghost publishing platform",
     "demo": "https://demo.ghost.io",
-    "version": "5.4.11",
+    "version": "5.5.0",
     "engines": {
         "ghost": ">=5.0.0"
     },