From https://once.com/writebook

app/assets/stylesheets/layout.css

@@ -0,0 +1,86 @@
+body {
+  display: grid;
+  grid-template-rows: auto auto 1fr auto var(--block-space);
+}
+
+:where(#main) {
+  container-type: inline-size;
+  font-size: var(--font-medium-responsive);
+  inline-size: 67ch;
+  margin-inline: auto;
+  max-inline-size: 100vw;
+  padding-block-end: clamp(var(--block-space), 5%, calc(var(--block-space) * 3));
+  padding-inline: clamp(var(--inline-space), 5%, calc(var(--inline-space) * 3));
+  text-align: center;
+
+  @media (max-width: 70ch) {
+    padding-inline: var(--inline-space);
+  }
+
+  @media print {
+    font-size: 11pt;
+    inline-size: unset;
+    line-height: 1.3;
+    margin: 0;
+    orphans: 3;
+    padding: 0;
+    text-align: justify;
+    text-justify: distribute;
+    widows: 2;
+  }
+}
+
+:where(#footer) {
+  max-inline-size: 100vw;
+  view-transition-name: footer;
+
+  > nav {
+    padding-inline: var(--inline-space);
+    view-transition-name: footer-nav;
+  }
+
+  &:has(.new-book-btn) {
+    inset-block-end: 0;
+    pointer-events: none;
+    position: sticky;
+  }
+}
+
+:where(#header) {
+  max-inline-size: 100vw;
+  view-transition-name: header;
+
+  > nav {
+    view-transition-name: nav;
+  }
+
+  > * {
+    align-items: center;
+    display: flex;
+    gap: 1ch;
+    justify-content: center;
+    padding: var(--block-space-half) var(--inline-space);
+  }
+
+  .btn {
+    flex-shrink: 0;
+  }
+}
+
+:where(#toolbar) {
+  display: flex;
+  inset: 0 0 auto;
+  justify-content: center;
+  min-width: 0;
+  overflow: hidden;
+  padding-inline: var(--inline-space);
+  position: sticky;
+  view-transition-name: toolbar;
+  z-index: 1;
+}
+
+:is(#header, #footer, #toolbar) {
+  @media print {
+    display: none;
+  }
+}