|
|
| Line 1: |
Line 1: |
| ol {
| |
| display: block;
| |
| }
| |
|
| |
|
| /*
| |
|
| |
| - 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: notcouriersans, 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: notcouriersans, sans-serif;
| |
| font-size: 36px;
| |
| font-weight: normal;
| |
| text-align: center;
| |
|
| |
| }
| |
|
| |
| h3 {
| |
| font-family: Authentic, sans-serif;
| |
| font-weight: 300;
| |
| font-size: 18px;
| |
| text-align: center;
| |
|
| |
| }
| |
|
| |
| a {
| |
| color: black;
| |
| text-decoration: none;
| |
| }
| |
|
| |
| pre {
| |
| font-family: notcourier, monospace;
| |
| font-size: 15px;
| |
| }
| |
|
| |
|
| |
| .toctitle {
| |
| font-family: notcouriersans, sans-serif;
| |
| }
| |
|
| |
| /* This is nicer/cleaner than adding the number to the links */
| |
| .toc > ul {
| |
| list-style: decimal;
| |
| font-family: notcouriersans, sans-serif;
| |
|
| |
| }
| |
|
| |
|
| |
|
| |
| p {
| |
| font-family: Authentic, sans-serif;
| |
| font-weight: 120;
| |
| font-size: 11px;
| |
| line-height: 14px;
| |
| }
| |
|
| |
| ul {
| |
| font-family: notcouriersans, sans-serif;
| |
| font-weight: normal;
| |
| font-size: 11px;
| |
| }
| |
|
| |
| ol {
| |
| font-family: notcouriersans, sans-serif;
| |
| font-weight: normal;
| |
| font-size: 11px;
| |
| }
| |
|
| |
| /* Move the footnotes to the footer */
| |
| span.footnote {
| |
| float: footnote;
| |
| font-family: notcouriersans, sans-serif;
| |
| font-weight: normal;
| |
| font-size: 9px;
| |
| }
| |
|
| |
|
| |
| .author {
| |
| font-family: notcouriersans, sans-serif;
| |
| text-align: center;
| |
| font-size: 18px;
| |
| padding: 10pt;
| |
| display: inline-flex;
| |
| }
| |
|
| |
| /*
| |
| * 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;
| |
| }
| |
|
| |
| .page-break {
| |
| page-break-before: 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: notcouriersans, 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);
| |
| }
| |