PublishingCSS:FiguringThingsOutTogether: Difference between revisions
No edit summary |
No edit summary |
||
(69 intermediate revisions by 2 users not shown) | |||
Line 7: | Line 7: | ||
*/ | */ | ||
.magnify { | |||
display: none !important; | |||
} | |||
@page { | @page { | ||
Line 47: | Line 51: | ||
from the HTML by Python (not just hidden). The CSS is only here as a reminder. | from the HTML by Python (not just hidden). The CSS is only here as a reminder. | ||
*/ | */ | ||
/* | /* | ||
Line 103: | Line 105: | ||
.layout-1 img { | .layout-1 img { | ||
border-radius: 10px; | border-radius: 10px; | ||
max-width: | max-width: 40%; | ||
max-height: 200px; | max-height: 200px; | ||
margin: 10px; | margin: 10px; | ||
Line 111: | Line 113: | ||
font-family: NotCourierSans, sans-serif; | font-family: NotCourierSans, sans-serif; | ||
font-weight: normal; | font-weight: normal; | ||
text-indent: none; | |||
font-size: 11pt; | font-size: 11pt; | ||
line-height: 13pt; | line-height: 13pt; | ||
margin-left: 10mm; | margin-left: 10mm; | ||
} | } | ||
.layout-1 h3 { | .layout-1 h3 { | ||
font-family: Louise-Regular, sans-serif; | |||
font-size: 44pt; | |||
line-height: 1em; | |||
padding-top: 20px | |||
} | } | ||
.layout-1 h4 { | .layout-1 h4 { | ||
Line 136: | Line 131: | ||
font-weight: normal; | font-weight: normal; | ||
margin: 0; | margin: 0; | ||
padding-bottom: 10px; | |||
} | } | ||
Line 144: | Line 138: | ||
display: flex; | display: flex; | ||
justify-content: flex-end; | justify-content: flex-end; | ||
margin-bottom: 1em; | |||
} | } | ||
Line 161: | Line 156: | ||
.layout-1 .block { | .layout-1 .block { | ||
border: 1px solid black; | border: 1px solid black; | ||
padding: 3mm; | padding: 0 3mm !important; | ||
} | |||
.layout-1 .block > *:first-child{ | |||
margin-top: 3mm !important; | |||
} | } | ||
/* doing this seems to mess up the layout. Pagedjs doesn't liek this */ | |||
/*.layout-1 .block *:last-child{*/ | |||
/* margin-bottom: 3mm !important;*/ | |||
/*}*/ | |||
.layout-1 hr { | .layout-1 hr { | ||
Line 171: | Line 174: | ||
} | } | ||
.pagedjs_pages .layout-1 .thumbcaption { | |||
margin: 0 10px 10px 10px; | |||
padding: 0; | |||
} | |||
/* LAYOUT 2 */ | /* LAYOUT 2 */ | ||
.pagedjs_pages .layout-2 { | .pagedjs_pages .layout-2 { | ||
columns: 2; | columns: 2; | ||
column-fill: auto; | |||
} | } | ||
Line 208: | Line 215: | ||
font-size: 44pt; | font-size: 44pt; | ||
line-height: 1em; | line-height: 1em; | ||
margin: 0; | |||
padding-bottom: 20px; | |||
padding-top: 30px; | |||
} | } | ||
Line 214: | Line 224: | ||
font-size: 18pt; | font-size: 18pt; | ||
font-weight: normal; | font-weight: normal; | ||
margin-top: 15px; | |||
margin-bottom: 0px; | |||
margin-right: 100px; | |||
padding-bottom: 10px; | padding-bottom: 10px; | ||
} | } | ||
.layout-2 .author-wrap { | |||
column-span: all; | |||
display: flex; | |||
justify-content: flex-end; | |||
margin-bottom: 1em; | |||
} | |||
.layout-2 p { | |||
margin-top: 0; | |||
} | |||
.layout-2 .author { | .layout-2 .author { | ||
Line 228: | Line 250: | ||
font-size: 18px; | font-size: 18px; | ||
padding: 10pt; | padding: 10pt; | ||
margin: 0 -20mm 0 0; /* negative margin to pull author into right page margin */ | /* margin: 0 -20mm 0 0; */ /* negative margin to pull author into right page margin */ | ||
display: inline-flex; | display: inline-flex; | ||
} | } | ||
Line 236: | Line 258: | ||
/* General styling */ | /* General styling */ | ||
body .pagedjs_pages { | body .pagedjs_pages { | ||
font-size: | font-size: 12px; | ||
} | } | ||
h2 .pagedjs_pages { | h2 .pagedjs_pages { | ||
font-size: | font-family: ; | ||
font-size: 24pt; | |||
line-height: 1em; | line-height: 1em; | ||
} | } | ||
Line 246: | Line 269: | ||
i { | i { | ||
font-family: NotoSerifItalic-Micro, serif; | font-family: NotoSerifItalic-Micro, serif; | ||
font-size: 1.1em; | |||
line-height: 1em; | |||
} | } | ||
Line 262: | Line 287: | ||
} | } | ||
.visual-footnote { | .visual-footnote img { | ||
width: | width: 100pt; | ||
height: auto; | height: auto; | ||
} | } | ||
h2 { | h2 { | ||
font-size: | font-family: Authentic,sans-serif; | ||
line-height: | font-size: 24pt; | ||
line-height: 1em; | |||
} | } | ||
.pagedjs_footnote_area .footnote { | |||
.pagedjs_pages > .pagedjs_page > .pagedjs_sheet > .pagedjs_pagebox > .pagedjs_area .pagedjs_footnote_area .footnote { | |||
font-family: Authentic,sans-serif; | font-family: Authentic,sans-serif; | ||
font-size: 7pt; | font-size: 7pt; | ||
font-weight: 90; | font-weight: 90; | ||
line-height: 8.8pt; | line-height: 8.8pt; | ||
padding-left: 2.5cm; | /*padding-left: 2.5cm;*/ | ||
/*display: block;*/ | |||
} | } | ||
Line 290: | Line 318: | ||
} | } | ||
.pagedjs_pages .full-spread-image-caption, .pagedjs_pages .thumbcaption { | .pagedjs_pages .full-spread-image-caption, .pagedjs_pages .thumbcaption { | ||
padding: 10px; | padding: 10px; | ||
Line 304: | Line 333: | ||
padding: 6pt; | padding: 6pt; | ||
border-radius: 3rem; | border-radius: 3rem; | ||
margin-bottom: 10px; | |||
margin-top: 10px; | |||
page-break-inside: avoid; | |||
} | } | ||
/* Print the background as black when hiding the foreground */ | /* Print the background as black when hiding the foreground */ | ||
.hide_foreground .hilight-h5 h5 { | .hide_foreground .hilight-h5 h5 { | ||
background-color: | background-color: black; | ||
} | |||
a { | |||
color: #000; | |||
text-decoration: underline; | |||
} | } |
Latest revision as of 20:01, 11 July 2023
/*
- Pagedjs
- Fonts
- Layouts
- General styling
*/
.magnify {
display: none !important;
}
@page {
size: 170mm 240mm;
margin: 5mm;
padding: 5mm;
margin-top: 10mm;
margin-bottom: 15mm;
}
@page layout-title {
}
@page layout1 {
margin-right: 20mm;
}
@page layout2 {
}
/*
*** PAGEDJS ***
*/
.title-image-wrap {
page: layout-title;
}
.layout-1 {
page: layout1;
}
.layout-2 {
page: layout2;
}
/*
Elements with the .hide-from-book class will be stripped completely
from the HTML by Python (not just hidden). The CSS is only here as a reminder.
*/
/*
*** FONTS ***
*/
.font-authentic {
font-family: Authentic, sans-serif;
font-weight: regular
}
.font-le-murmure {
font-family: le-murmure, sans-serif
}
.font-notcouriersans {
font-family: Authentic, sans-serif;
font-weight: regular
}
.font-solide-mirage-etroit {
font-family: SolideMirageEtroit, sans-serif
}
.font-solide-mirage-mono {
font-family: SolideMirageMono, sans-serif
}
.font-louise-regular {
font-family: Louise-Regular, sans-serif
}
.font-sligoil-micro {
font-family: Sligoil-Micro, sans-serif
}
.font-notoserif {
font-family: NotoSerifItalic-Micro, serif
}
/*
*** LAYOUTS ***
*/
/* LAYOUT 1 */
.layout-1 p {
text-indent: 10mm;
margin: 0;
padding: 0;
}
.layout-1 img {
border-radius: 10px;
max-width: 40%;
max-height: 200px;
margin: 10px;
}
.layout-1 blockquote {
font-family: NotCourierSans, sans-serif;
font-weight: normal;
text-indent: none;
font-size: 11pt;
line-height: 13pt;
margin-left: 10mm;
}
.layout-1 h3 {
font-family: Louise-Regular, sans-serif;
font-size: 44pt;
line-height: 1em;
padding-top: 20px
}
.layout-1 h4 {
font-family: Authentic, sans-serif;
font-size: 18pt;
font-weight: normal;
margin: 0;
padding-bottom: 10px;
}
.layout-1 .author-wrap {
display: flex;
justify-content: flex-end;
margin-bottom: 1em;
}
.layout-1 .author {
font-family: Authentic, sans-serif;
border-width: 1pt;
border-radius: 30pt;
border-color: black;
border-style: solid;
text-align: center;
font-size: 18px;
padding: 10pt;
margin: 0 -20mm 0 0; /* negative margin to pull author into right page margin */
display: inline-flex;
}
.layout-1 .block {
border: 1px solid black;
padding: 0 3mm !important;
}
.layout-1 .block > *:first-child{
margin-top: 3mm !important;
}
/* doing this seems to mess up the layout. Pagedjs doesn't liek this */
/*.layout-1 .block *:last-child{*/
/* margin-bottom: 3mm !important;*/
/*}*/
.layout-1 hr {
border: 0;
border-bottom: 1px solid black;
margin-left: -3mm; /* negative of the padding on .block */
margin-right: -3mm;
}
.pagedjs_pages .layout-1 .thumbcaption {
margin: 0 10px 10px 10px;
padding: 0;
}
/* LAYOUT 2 */
.pagedjs_pages .layout-2 {
columns: 2;
column-fill: auto;
}
p .pagedjs_pages .layout-2 {
margin-top: 0;
}
.layout-2 img {
border-radius: 10px;
max-width: 60%;
max-height: 150px;
}
.layout-2 h2,
.layout-2 h3,
.layout-2 h4 {
column-span: all;
}
.layout-2 blockquote {
font-family: NotCourierSans, sans-serif;
font-weight: normal;
font-size: 11pt;
line-height: 13pt;
margin-top: 5mm;
margin-bottom: 5mm;
margin-left: 5mm;
}
.layout-2 h3 {
font-family: Louise-Regular, sans-serif;
font-size: 44pt;
line-height: 1em;
margin: 0;
padding-bottom: 20px;
padding-top: 30px;
}
.layout-2 h4 {
font-family: Authentic, sans-serif;
font-size: 18pt;
font-weight: normal;
margin-top: 15px;
margin-bottom: 0px;
margin-right: 100px;
padding-bottom: 10px;
}
.layout-2 .author-wrap {
column-span: all;
display: flex;
justify-content: flex-end;
margin-bottom: 1em;
}
.layout-2 p {
margin-top: 0;
}
.layout-2 .author {
font-family: Authentic, sans-serif;
border-width: 1pt;
border-radius: 30pt;
border-color: black;
border-style: solid;
text-align: center;
font-size: 18px;
padding: 10pt;
/* margin: 0 -20mm 0 0; */ /* negative margin to pull author into right page margin */
display: inline-flex;
}
/* General styling */
body .pagedjs_pages {
font-size: 12px;
}
h2 .pagedjs_pages {
font-family: ;
font-size: 24pt;
line-height: 1em;
}
i {
font-family: NotoSerifItalic-Micro, serif;
font-size: 1.1em;
line-height: 1em;
}
/* Force line-breaks in code blocks */
pre {
white-space: break-spaces;
}
/* Turn images grayscale, only in book */
.pagedjs_pages img {
filter: grayscale(1);
}
.page-break {
page-break-after: always;
}
.visual-footnote img {
width: 100pt;
height: auto;
}
h2 {
font-family: Authentic,sans-serif;
font-size: 24pt;
line-height: 1em;
}
.pagedjs_pages > .pagedjs_page > .pagedjs_sheet > .pagedjs_pagebox > .pagedjs_area .pagedjs_footnote_area .footnote {
font-family: Authentic,sans-serif;
font-size: 7pt;
font-weight: 90;
line-height: 8.8pt;
/*padding-left: 2.5cm;*/
/*display: block;*/
}
.footnote, sup {
font-family: Authentic,sans-serif;
font-size: 8pt;
font-weight: 150;
position: relative;
top: -0.2em;
vertical-align: top;
}
.pagedjs_pages .full-spread-image-caption, .pagedjs_pages .thumbcaption {
padding: 10px;
font-family: Authentic,sans-serif;
font-size: 7pt;
font-weight: 90; /* it's better to use light/regular/bold */
line-height: 8.8pt;
text-align: center;
}
.hilight-h5 h5 {
background-color: yellow;
text-align: center;
padding: 6pt;
border-radius: 3rem;
margin-bottom: 10px;
margin-top: 10px;
page-break-inside: avoid;
}
/* Print the background as black when hiding the foreground */
.hide_foreground .hilight-h5 h5 {
background-color: black;
}
a {
color: #000;
text-decoration: underline;
}