PublishingCSS:HD Bulletin 1

/* 

- 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);
  }
}

@page:right {
  bleed-left: 0;
  
  @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 
 */

/*
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: 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 */