css: split style and landing layout

public_html/css/index.css

@@ -0,0 +1,27 @@
+/*
+ * css styling for bavbavhaus.net index
+ */
+
+
+/* layout */
+
+body {
+  width: round(down, min(160ch, 100vw), 2ch);
+  height: round(down, 100vh, 1rlh);
+  margin-left: auto;
+  margin-right: auto;
+  padding-top: 1rlh;
+  padding-bottom: 1rlh;
+}
+
+body>main {
+  width: 100%;
+  height: 100%;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+
+body>main>iframe {
+  width: 100%;
+  height: 100%;
+}

public_html/css/print.css

@@ -1,188 +0,0 @@
-/*
- * css styling for bavbavhaus.net
- *
- * A print stylesheet for html generated by `pandoc`.
- *
- */
-
-@page {
-  size: 210mm 297mm;
-  margin: 24.75mm 26.25mm 49.50mm;
-}
- 
-/* reset */
-
-:root {
-  box-sizing: border-box;
-  text-size-adjust: none;
-  -moz-text-size-adjust: none;
-  -webkit-text-size-adjust: none;
-}
-
-*, 
-*::before,
-*::after {
-  box-sizing: inherit;
-  margin: 0;
-  padding: 0;
-}
-
-/* root, * */
-
-:root {
-  font: 12pt/1.25 serif;
-}
-
-*,
-*::before,
-*::after {
-  color: inherit;
-  font: inherit;
-}
-
-/* blocks */
-
-h1, h2, h3, h4, h5, h6 {
-  text-wrap: balance;
-  font-weight: bold;
-}
-
-h1 {
-  font-size: 2rem;
-  text-align: center;
-}
-
-h2::before { content: "## "; }
-h3::before { content: "### "; }
-h4::before { content: "#### "; }
-h5::before { content: "##### "; }
-h6::before { content: "###### "; }
-
-article :is(h1, h2, h3, h4, h5, h6) {
-  margin-top: 2rem;
-}
-
-article :is(blockquote, dl, div, figure, hr, menu, ol, p, pre, ul) {
-  margin-top: 1rem;
-}
-
-article :is(blockquote, div)>:is(blockquote, div, figure, hr, menu, ol, p, pre, ul):first-child {
-  margin-top: unset;
-}
-
-blockquote,
-figcaption {
-  margin-left: 2rem;
-  margin-right: 2rem;
-}
-
-dt {
-  font-style: italic;
-}
-
-figure {
-  display: grid;
-  grid-template-rows: round(down, calc(min(160ch, 100vw)/2), 1rlh) auto;
-}
-
-figure img {
-  place-self: center;
-}
-
-hr {
-	color: unset;
-	border: unset;
-  text-align: center;
-}
-
-hr::after {
-  content: "***";
-}
-
-:is(ol, ul, menu, dd, li) :is(blockquote, div, figure, hr, menu, ol, p, pre, ul) {
-  margin-top: unset;
-}
-
-ol {
-  padding-left: 2rem;
-}
-
-ul, menu {
-  padding-left: 2rem;
-}
-
-li p + p {
-  text-indent: 4ch;
-}
-
-p {
-  text-align: justify;
-  hyphens: auto;
-}
-
-pre {
-  padding-left: 4ch;
-}
-
-img, svg {
-  max-width: 100%;
-  max-height: 100%;
-  display: block;
-}
-
-.math.diplay {
-  display: block;
-  text-align: center;
-}
-
-/* inlines */
-
-a {
-  text-decoration: unset;
-}
-
-code {
-  font-family: monospace;
-}
-
-em {
-  font-style: italic;
-}
-
-mark {
-  text-decoration: underline solid inherit 1pt;
-}
-
-strong {
-  font-weight: bold;
-}
-
-sup, sub {
-  font-size: unset;
-  vertical-align: unset;
-  line-height: 0;
-}
-
-sup::before {
-  content: "^";
-}
-
-sub::before {
-  content: "_";
-}
-
-u {
-  text-decoration: underline wavy var(--red) 1pt;
-}
-
-/* layout */
-
-main>article#recto {
-  display: none;
-}
-
-/* div.horizontal */
-
-div.horizontal>*:not(:first-child) {
-  display: none;
-}

public_html/css/style.css

@@ -6,10 +6,11 @@
  *
  */
 
+
 /* variables */
 
 :root {
-  --font-size: 9pt;
+  --font-size: 12pt;
   --line-height: 1.25;
   --font-family: monospace;
 
@@ -56,6 +57,7 @@
   box-sizing: inherit;
   margin: 0;
   padding: 0;
+  border: 0;
 }
 
 
@@ -211,7 +213,6 @@ pre::after {
   color: var(--md-formatting-color);
 }
 
-
 img, svg {
   max-width: 100%;
   max-height: 100%;
@@ -360,49 +361,6 @@ table caption::before {
 }
 
 
-/* layout */
-
-body {
-  width: round(down, min(160ch, 100vw), 2ch);
-  height: round(down, 100vh, 1rlh);
-  margin-left: auto;
-  margin-right: auto;
-  padding-top: 1rlh;
-  padding-bottom: 1rlh;
-}
-
-main {
-  width: 100%;
-  height: 100%;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-}
-
-main>article#recto {
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: 100%;
-  overflow-x: scroll;
-  scroll-snap-type: inline proximity;
-}
-
-main>article#recto>* {
-  scroll-snap-align: end;
-}
-
-main>article#verso,
-main>article#recto>article.post {
-  height: 100%;
-  display: grid;
-  grid-template-rows: auto 1fr;
-  overflow: hidden;
-}
-
-main>article#verso>div.content,
-main>article#recto>article.post>div.content {
-  overflow-y: scroll;
-}
-
 /* footnotes */
 
 a.footnote-ref sup::before {
@@ -466,3 +424,9 @@ div.horizontal>* {
   text-decoration: underline wavy var(--red) 1pt;
 }
 
+
+/* layout */
+
+article.post {
+  max-width: 80ch;
+}