add css for printing recipes
This commit is contained in:
parent
5547408e17
commit
b867f8989d
2 changed files with 42 additions and 1 deletions
|
@ -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>
|
||||
|
|
|
@ -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: "";
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue