css: split style and landing layout

master
urosm 2024-09-01 17:30:44 +02:00
parent 41f6fe87a9
commit d886f42ffc
3 changed files with 36 additions and 233 deletions

View File

@ -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%;
}

View File

@ -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;
}

View File

@ -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;
}