PublishingCSS:HD Bulletin 1: Difference between revisions
No edit summary |
No edit summary |
||
Line 10: | Line 10: | ||
*/ | */ | ||
/* | /* | ||
*** PAGEDJS *** | *** PAGEDJS *** | ||
*/ | |||
Pagedjs/paged media specific styles | /* | ||
*/ | * Pagedjs/paged media specific styles | ||
*/ | |||
@page { | @page { | ||
Line 43: | Line 44: | ||
} | } | ||
/* Setting variables */ | /* | ||
* Setting variables | |||
*/ | |||
h1 { | h1 { | ||
Line 61: | Line 64: | ||
} | } | ||
/* Page breaks */ | /* | ||
* Page breaks | |||
*/ | |||
h1 { | h1 { | ||
Line 87: | Line 92: | ||
} | } | ||
/* | /* | ||
* Spreads | |||
*/ | |||
.full-page-image { | .full-page-image { | ||
Line 135: | Line 138: | ||
/* | /* | ||
*** FONTS *** | *** FONTS *** | ||
* There's currently no way to add fonts through the wiki interface | |||
* So either use fonts installed on your system or load them | |||
* through a wiki2print publication plugin | |||
*/ | */ | ||
Line 170: | Line 176: | ||
font-family: NotoSerifItalic-Micro, serif | font-family: NotoSerifItalic-Micro, serif | ||
} | } | ||
/* General styling */ | /* General styling */ |
Revision as of 13:24, 6 June 2023
/*
- Pagedjs
- - Variables
- - Pagebreaks
- - Spreads
- Fonts
- Layouts
- General styling
*/
/*
*** PAGEDJS ***
*/
/*
* Pagedjs/paged media specific styles
*/
@page {
size: 105mm 297mm;
margin: 15mm 10mm 25mm 10mm;
bleed: 0;
background-color: white;
}
@page:left {
@top-center {
content: string(pubTitle);
}
}
@page:right {
@top-center {
content: string(articleTitle);
}
}
@page {
@bottom-center {
content: counter(page);
}
}
/*
* Setting variables
*/
h1 {
string-set: pubTitle content(text);
}
h2 {
counter-increment: countChapter;
string-set: articleTitle content(text);
counter-set: footnote-marker 0 footnote 0;
string-set: author "";
}
/* Move the footnotes to the footer */
span.footnote {
float: footnote;
}
/*
* Page breaks
*/
h1 {
page-break-before: left;
}
h2 {
page-break-before: right;
}
.empty-left-page {
page-break-before: left;
}
.full-spread-image-section {
page-break-before: left;
}
.full-page-image {
page-break-before: always;
}
.full-page-image.full-page-image-left {
page-break-before: left;
}
/*
* Spreads
*/
.full-page-image {
width: var(--pagedjs-width);
height: var(--pagedjs-height);
overflow: hidden;
left: calc(calc(var(--pagedjs-bleed-left) + var(--pagedjs-margin-left))*-1);
top: calc(calc(var(--pagedjs-bleed-top) + var(--pagedjs-margin-top))*-1);
position: absolute;
}
.full-page-image div {
width: calc(var(--pagedjs-width)*2 - var(--pagedjs-bleed-left) - var(--pagedjs-bleed-right));
height: var(--pagedjs-height);
display: flex;
justify-content: center;
align-items: flex-start;
}
/* compensate for bleeds */
.pagedjs_right_page .full-page-image div {
margin-left: calc( calc(-1 * var(--pagedjs-width)) + var(--pagedjs-bleed-left ) + var(--pagedjs-bleed-right ));
}
.full-page-image img {
width: 100%;
height: 100%;
object-fit: contain;
margin: 0 !important;
}
/* Position the caption */
.full-spread-image-section .full-page-image .full-spread-image-caption {
height: auto;
position: absolute;
display: block;
right: calc(calc(var(--pagedjs-bleed-right) + var(--pagedjs-margin-right)));
bottom: calc(var(--pagedjs-bleed-bottom) + var(--pagedjs-margin-bottom));
width: calc(var(--pagedjs-width) - var(--pagedjs-bleed-right) - var(--pagedjs-margin-right) - var(--pagedjs-bleed-left) - var(--pagedjs-margin-left));
}
/*
*** FONTS ***
* There's currently no way to add fonts through the wiki interface
* So either use fonts installed on your system or load them
* through a wiki2print publication plugin
*/
.font-authentic {
font-family: Authentic, sans-serif;
font-weight: 400;
}
.font-le-murmure {
font-family: le-murmure, sans-serif;
}
.font-notcouriersans {
font-family: Authentic, sans-serif;
font-weight: 400;
}
.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
}
/* General styling */