PublishingCSS:HD Bulletin 1: Difference between revisions
No edit summary |
No edit summary |
||
(128 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
/* .thumb { | |||
page-break-before: always; | |||
} | |||
*/ | |||
/* | /* | ||
Line 31: | Line 36: | ||
@top-center { | @top-center { | ||
content: string(pubTitle); | content: string(pubTitle); | ||
font-size: 11px; | |||
font-family: Authentic, sans-serif; | |||
font-weight: 120; | |||
} | } | ||
} | } | ||
Line 39: | Line 47: | ||
@top-center { | @top-center { | ||
content: string(articleTitle); | content: string(articleTitle); | ||
font-size: | font-size: 11px; | ||
font-family: | font-family: Authentic, sans-serif; | ||
font-weight: 400; | |||
} | } | ||
} | } | ||
Line 48: | Line 57: | ||
content: counter(page); | content: counter(page); | ||
font-size: 36px; | font-size: 36px; | ||
font-family: | font-family: notcourier, sans-serif; | ||
} | } | ||
} | } | ||
Line 59: | Line 67: | ||
h1 { | h1 { | ||
string-set: pubTitle content(text); | string-set: pubTitle content(text); | ||
font-weight: 120; | |||
text-align: left; | |||
font-family: Authentic, sans-serif; | |||
font-size: 0px; | |||
} | } | ||
Line 66: | Line 78: | ||
counter-set: footnote-marker 0 footnote 0; | counter-set: footnote-marker 0 footnote 0; | ||
string-set: author ""; | string-set: author ""; | ||
font-family: notcourier, sans-serif; | |||
font-size: 36px; | |||
line-height: 40px; | |||
font-weight: normal; | |||
text-align: center; | |||
} | |||
h3 { | |||
font-family: Authentic, sans-serif; | |||
font-weight: 300; | |||
font-size: 18px; | |||
line-height: 22px; | |||
text-align: center; | |||
} | |||
a { | |||
color: black; | |||
text-decoration: none; | |||
} | |||
pre { | |||
font-family: notcourier, monospace; | |||
font-size: 15px; | |||
} | |||
.code { | |||
font-family: notcourier, monospace; | |||
font-size: 10px; | |||
} | |||
.thumbcaption { | |||
font-family: notcourier, sans-serif; | |||
font-weight: normal; | |||
font-size: 9px; | |||
text-align: center; | |||
} | |||
.toctitle { | |||
font-family: notcourier, sans-serif; | |||
} | |||
/* This is nicer/cleaner than adding the number to the links */ | |||
.toc > ul { | |||
list-style: decimal; | |||
font-family: notcourier, sans-serif; | |||
font-size: 14px; | |||
} | } | ||
. | .tocnumber { | ||
font-family: notcourier, sans-serif; | |||
font-size: 14px; | |||
font-family: | } | ||
font- | |||
.toctext { | |||
font-family: notcourier, sans-serif; | |||
font-size: 14px; | |||
} | } | ||
p { | p { | ||
font-family: Authentic, sans-serif; | font-family: Authentic, sans-serif; | ||
font-weight: 400; | font-weight: 120; | ||
font-size: 10px; | |||
line-height: 13px; | |||
} | |||
.pagedjs_area [data-footnote-call], .footnote { | |||
vertical-align: super; | |||
font-size: 60%; | |||
font-weight: 400; | |||
line-height: normal; | |||
content: counter(footnote); | |||
} | |||
ul { | |||
font-family: notcourier, sans-serif; | |||
font-weight: normal; | |||
font-size: 11px; | font-size: 11px; | ||
} | |||
ol { | |||
font-family: notcourier, sans-serif; | |||
font-weight: normal; | |||
font-size: 11px; | |||
} | } | ||
/* Move the footnotes to the footer */ | /* Move the footnotes to the footer */ | ||
span.footnote { | span.footnote { | ||
float: footnote; | float: footnote; | ||
padding-top: 5px; | |||
font-family: notcourier, sans-serif; | |||
font-weight: normal; | |||
font-size: 9px; | |||
} | } | ||
.author{ | .author { | ||
font-family: notcourier, sans-serif; | |||
text-align: center; | text-align: center; | ||
font-size: 16px; | |||
font-size: | |||
} | } | ||
Line 107: | Line 195: | ||
page-break-before: right; | page-break-before: right; | ||
} | } | ||
h4 { | |||
display: block; | |||
page-break-before: always; | |||
} | |||
.empty-left-page { | .empty-left-page { | ||
Line 123: | Line 218: | ||
page-break-before: left; | page-break-before: left; | ||
} | } | ||
.page-break { | |||
display: block; | |||
page-break-after: always; | |||
} | |||
/* | /* | ||
Line 169: | Line 270: | ||
.full-page-image img { | .full-page-image img { | ||
width: 100%; | width: 100%; | ||
height: 100%; | height:100%; | ||
object-fit: contain; | object-fit: contain; | ||
margin: 0 !important; | margin: 0 !important; | ||
Line 213: | Line 314: | ||
.font-notcouriersans { | .font-notcouriersans { | ||
font-family: | font-family: notcourier, sans-serif; | ||
} | } | ||
Line 235: | Line 336: | ||
font-family: NotoSerifItalic-Micro, serif | font-family: NotoSerifItalic-Micro, serif | ||
} | } | ||
/* General styling */ | /* General styling */ | ||
img { | |||
width: 100%; | |||
height: auto; | |||
} | |||
.pagedjs_pages img { | |||
filter: grayscale(1); | |||
} | |||
.smaller-image { | |||
margin-inline: auto; | |||
max-width: 40%; | |||
} | |||
.smaller-image .thumbinner { | |||
width: unset !important; | |||
} | |||
.tighter { | |||
letter-spacing: -0.2pt; | |||
} |
Latest revision as of 11:06, 19 October 2023
/* .thumb {
page-break-before: always;
}
*/
/*
- Pagedjs
- - Variables
- - Pagebreaks
- - Spreads
- Fonts
- Layouts
- General styling
*/
/*
*** PAGEDJS ***
*/
/*
* Pagedjs/paged media specific styles
*/
@page {
size: 105mm 297mm;
margin: 15mm 10mm 25mm 10mm;
bleed: 3mm;
background-color: white;
}
@page:left {
bleed-right: 0;
@top-center {
content: string(pubTitle);
font-size: 11px;
font-family: Authentic, sans-serif;
font-weight: 120;
}
}
@page:right {
bleed-left: 0;
@top-center {
content: string(articleTitle);
font-size: 11px;
font-family: Authentic, sans-serif;
font-weight: 400;
}
}
@page {
@bottom-center {
content: counter(page);
font-size: 36px;
font-family: notcourier, sans-serif;
}
}
/*
* Setting variables
*/
h1 {
string-set: pubTitle content(text);
font-weight: 120;
text-align: left;
font-family: Authentic, sans-serif;
font-size: 0px;
}
h2 {
counter-increment: countChapter;
string-set: articleTitle content(text);
counter-set: footnote-marker 0 footnote 0;
string-set: author "";
font-family: notcourier, sans-serif;
font-size: 36px;
line-height: 40px;
font-weight: normal;
text-align: center;
}
h3 {
font-family: Authentic, sans-serif;
font-weight: 300;
font-size: 18px;
line-height: 22px;
text-align: center;
}
a {
color: black;
text-decoration: none;
}
pre {
font-family: notcourier, monospace;
font-size: 15px;
}
.code {
font-family: notcourier, monospace;
font-size: 10px;
}
.thumbcaption {
font-family: notcourier, sans-serif;
font-weight: normal;
font-size: 9px;
text-align: center;
}
.toctitle {
font-family: notcourier, sans-serif;
}
/* This is nicer/cleaner than adding the number to the links */
.toc > ul {
list-style: decimal;
font-family: notcourier, sans-serif;
font-size: 14px;
}
.tocnumber {
font-family: notcourier, sans-serif;
font-size: 14px;
}
.toctext {
font-family: notcourier, sans-serif;
font-size: 14px;
}
p {
font-family: Authentic, sans-serif;
font-weight: 120;
font-size: 10px;
line-height: 13px;
}
.pagedjs_area [data-footnote-call], .footnote {
vertical-align: super;
font-size: 60%;
font-weight: 400;
line-height: normal;
content: counter(footnote);
}
ul {
font-family: notcourier, sans-serif;
font-weight: normal;
font-size: 11px;
}
ol {
font-family: notcourier, sans-serif;
font-weight: normal;
font-size: 11px;
}
/* Move the footnotes to the footer */
span.footnote {
float: footnote;
padding-top: 5px;
font-family: notcourier, sans-serif;
font-weight: normal;
font-size: 9px;
}
.author {
font-family: notcourier, sans-serif;
text-align: center;
font-size: 16px;
}
/*
* Page breaks
*/
h1 {
page-break-before: left;
}
h2 {
page-break-before: right;
}
h4 {
display: block;
page-break-before: always;
}
.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;
}
.page-break {
display: block;
page-break-after: always;
}
/*
* Spreads
*/
/*
To create a spread wrap the image in a span like so:
<span class="spread">[[File:image.jpg|thumb|Your caption.]]</span>
Wiki2print and the css below will transform the html so that two pages are
side by side with the same image repeated over both pages.
The images are translated and scaled to allow some overlap in the bleed.
The (simplified) html looks like this:
- section.full-spread-image-section
- div.full-page-image full-page-image-left
- img.thumbimage
- div.full-page-image
- img.thumbimag
- div.full-spread-image-caption
*/
.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;
}
/*
We reuse this class for a single full page image that is not part of a
spread, so we apply the object-fit to prevent warping the image.
[[File:imagejpg|thumb|class=full-page-image|Your caption]]
*/
img.full-page-image {
object-fit: cover;
}
/* 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: notcourier, sans-serif;
}
.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 */
img {
width: 100%;
height: auto;
}
.pagedjs_pages img {
filter: grayscale(1);
}
.smaller-image {
margin-inline: auto;
max-width: 40%;
}
.smaller-image .thumbinner {
width: unset !important;
}
.tighter {
letter-spacing: -0.2pt;
}