Download raw (3.6 KB)

/* USEFUL CLASSES */

/* ___ FULLPAGE ___ */

/*
A div that as exactly the dimension of a page.
if there is too much content in it, it is not going to flow in the next one.
This can be used for cover, 1 page document, etc.
 */
.fullpage{
  break-before: always;
  break-after: always;
  page: fullpage;

  box-sizing: border-box;
  width: calc(var(--pagedjs-pagebox-width) - calc(var(--pagedjs-margin-left) + var(--pagedjs-margin-right)));
  height: calc(var(--pagedjs-pagebox-height) - calc(var(--pagedjs-margin-top) + var(--pagedjs-margin-bottom)));
  max-width: calc(var(--pagedjs-pagebox-width) - calc(var(--pagedjs-margin-left) + var(--pagedjs-margin-right)));

  position: relative;
  overflow: visible;
}

.layer{
  position: absolute;
  top: 0; right: 0; left: 0; bottom: 0;
}

/* ___ COLUMNS ___ */

.flowing{
  break-before: always;
  page: flowing;
}

.two-columns{   columns: 2; }
.three-columns{ columns: 3; }
.four-columns{  columns: 4; }
.five-columns{  columns: 5; }
.two-columns,
.three-columns,
.four-columns,
.five-columns{
  /* make the columns container take all available height
  on each page, so the column really stops to the bottom of each page
  (otherwise the div minimize it's height and make it looks like the columns
  are balanced even if it's in column-fill: auto)
  --> only needed for Chrome (see "Warning") */
  height: 100%;
  column-fill: auto; /*not balanced*/
  /* supported by both chome & firefox */
  /* balanced is the default in both */
}

.pagedjs_page_content > div{
  /* for the previous tricks to work
  we have to make this div take all available height
  --> only needed for Chrome (see "Warning") */
  height: 100%;
}

/*
(https://developer.mozilla.org/en-US/docs/Web/CSS/column-fill)
Warning:
There are some interoperability issues and bugs with column-fill across browsers,
due to unresolved issues in the specification.
In particular, when using column-fill: auto to fill columns sequentially,
Chrome will only consult this property if the multicol container has a size
in the block dimension (e.g., height in a horizontal writing mode). Firefox
will always consult this property, therefore filling the first column with
all of the content in cases where there is no size.
*/

.span-all-columns{ column-span: all; }


/* avoid the break inside or just after titles */
h1, h2, h3, h4, h5, h6{
  /* for column and for pages */
  break-inside: avoid;
  /* only for column
  TODO: make this work */
  -webkit-column-break-after: avoid;
}


/* ___ FOLDS ___ */

.v-folded{
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
.h-folded{
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.v-folded > .fold,
.h-folded > .fold{
  flex: 1 0 0%;
  min-width: 0;
  min-height: 0;
  position: relative;
}

body:not(.preview) .v-folded > .fold:not(:last-child){
  border-right: 1px solid grey;
}
body:not(.preview) .h-folded > .fold:not(:last-child){
  border-bottom: 1px solid grey;
}

/* ___ BLEEDS ___ */

/*
disable the in-page column that make the content
go to the next column (right side of the page)
when it reaches the bottom of the page.
this is necessary in order to use bleed
(because we make content go outside of bottom
*/
div.pagedjs_page_content{
  column-width: inherit !important;
  column-count: inherit !important;
}


/* bleed classes */
.bleed-full{
  position: absolute;
  inset: var(--bleed-overprint);
}
.bleed-top{ top: var(--bleed-overprint); }
.bleed-left{ left: var(--bleed-overprint); }
.bleed-right{ right: var(--bleed-overprint); }
.bleed-bottom{ bottom: var(--bleed-overprint); }


/* ___ MICRO-TYPO ___ */

.keep{
  white-space: nowrap;
}