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

/* 
We reuse this class, but when applied like this the image is not part of a 
spread, so we apply the object-fit to prevent warping the image. 
*/
img.full-page-image {
	object-fit: cover;
}

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