add css for printing recipes

This commit is contained in:
Lynne Megido 2020-03-05 19:27:35 +10:00
parent 5547408e17
commit b867f8989d
Signed by: lynnesbian
GPG key ID: F0A184B5213D9F90
2 changed files with 42 additions and 1 deletions

View file

@ -5,7 +5,7 @@
<meta charset="UTF-8">
<link rel='stylesheet' href='/assets/style.css'>
<script async src='/assets/script.js'></script>
<title>{{ page.title }}</title>
<title>{% if page.layout == "recipe" %}{{ page.name }}{% else %}{{ page.title }}{% endif %}</title>
</head>
<body>

View file

@ -40,6 +40,7 @@ h2.no-bg {
}
h1, h2, h3, h4, h5, h6 {
font-weight: 400;
page-break-after: avoid;
}
h3 {
font-size: 1.3em;
@ -204,3 +205,43 @@ footer, .subtle {
font-family: 'stars';
src: url("/assets/fonts/stars.woff") format("woff"), url("/assets/fonts/stars.woff2") format("woff2");
}
/* print css */
@page {
size: A4;
@bottom-center {
content: counter(page) " of " counter(pages);
}
}
@media print {
body {
display: block;
}
li {
padding: 0;
}
input[type="checkbox"], footer {
display: none;
}
h1.scrolling {
position: relative;
}
h1.invisible {
display: none;
}
.subrecipe-output {
height: min-content;
}
.subrecipe, p {
margin-left: 0;
margin-right: 0;
}
.subrecipe {
border-top: thin black solid;
border-bottom: thin black solid;
border-radius: 0;
}
.subrecipe .subrecipe-toggle::after {
content: "";
}
}