new forge migration

themes/risotto/static/css/layout.css

@@ -0,0 +1,62 @@
+/* 1rem = 16px by default */
+
+.page {
+    max-width: 64rem;
+    margin: 1rem auto;
+    display: grid;
+    grid-template-areas:
+      "header"
+      "body"
+      "aside"
+      "footer";
+    grid-template-columns: minmax(0, 1fr); /* https://css-tricks.com/preventing-a-grid-blowout/ */
+    grid-row-gap: 2rem;
+}
+
+@media (min-width: 45rem) {
+    .page {
+        grid-template-areas:
+          "header  header"
+          "body    aside"
+          "footer  footer";
+        grid-template-columns: minmax(0, 1fr) 15rem;
+        grid-column-gap: 2rem;
+    }
+}
+
+/* Header */
+.page__header {
+    grid-area: header;
+    display: flex;
+}
+
+.page__logo {
+    flex-shrink: 0;
+}
+
+.page__nav {
+    flex-grow: 1;
+}
+
+/* Body + aside */
+.page__body {
+    grid-area: body;
+    background-color: var(--off-bg);
+    box-shadow: 0 0 0 1rem var(--off-bg);
+    overflow-wrap: break-word;
+}
+
+.page__aside {
+    grid-area: aside;
+    color: var(--off-fg);
+    position: sticky;
+    top: 1rem;
+    right: 1rem;
+    overflow-y: auto;
+    max-height: 95vh;
+}
+
+/* Footer */
+.page__footer {
+    grid-area: footer;
+}