PublishingCSS:FiguringThingsOutTogether: Difference between revisions
No edit summary |
No edit summary |
||
Line 5: | Line 5: | ||
- Layouts | - Layouts | ||
*/ | */ | ||
Line 28: | Line 24: | ||
} | } | ||
/* | |||
*** PAGEDJS *** | |||
*/ | |||
.title-image-wrap { | .title-image-wrap { | ||
page: layout-title; | page: layout-title; | ||
Line 58: | Line 58: | ||
.font-authentic-condensed { | .font-authentic-condensed { | ||
font-family: Authentic-condensed, sans-serif; | font-family: Authentic-condensed, sans-serif; | ||
font-weight: 60 | font-weight: 60; | ||
} | } | ||
.font-authentic-condensed { | .font-authentic-condensed { | ||
font-family: Authentic-condensed, sans-serif; | font-family: Authentic-condensed, sans-serif; | ||
font-weight: 60 | font-weight: 60; | ||
} | } | ||
.font-le-murmure { | .font-le-murmure { | ||
font-family: le-murmure, sans-serif | font-family: le-murmure, sans-serif; | ||
} | } | ||
.font-notcouriersans { | .font-notcouriersans { | ||
font-family: Authentic, sans-serif | font-family: Authentic, sans-serif; | ||
} | } | ||
.font-solide-mirage-etroit { | .font-solide-mirage-etroit { | ||
font-family: SolideMirageEtroit, sans-serif | font-family: SolideMirageEtroit, sans-serif; | ||
} | } | ||
.font-solide-mirage-mono { | .font-solide-mirage-mono { | ||
font-family: SolideMirageMono, sans-serif | font-family: SolideMirageMono, sans-serif; | ||
} | } | ||
.font-louise-regular { | .font-louise-regular { | ||
font-family: Louise-Regular, sans-serif | font-family: Louise-Regular, sans-serif; | ||
} | } | ||
.font-sligoil-micro { | .font-sligoil-micro { | ||
font-family: Sligoil-Micro, sans-serif | font-family: Sligoil-Micro, sans-serif; | ||
} | } | ||
Line 104: | Line 104: | ||
text-align: center; | text-align: center; | ||
font-size: 54px; | font-size: 54px; | ||
margin-bottom: 30pt; /* space for the author float */ | margin-bottom: 30pt; /* space for the author float */ | ||
} | } | ||
Line 110: | Line 109: | ||
.layout-1 .author-wrap { | .layout-1 .author-wrap { | ||
display: flex; | display: flex; | ||
justify-content: end; | justify-content: flex-end; | ||
} | } | ||
Line 122: | Line 121: | ||
font-size: 24px; | font-size: 24px; | ||
padding: 10pt; | padding: 10pt; | ||
margin: | margin: 0 -30mm 0 0; /* negative margin to pull author into right page margin */ | ||
display: inline-flex; | display: inline-flex; | ||
} | } |
Revision as of 21:27, 14 October 2022
/*
- Pagedjs
- Fonts
- Layouts
*/
@page {
size: 170mm 240mm;
margin: 10mm;
padding: 10mm;
}
@page layout-title {
}
@page layout1 {
margin-right: 40mm;
}
@page layout2 {
}
/*
*** PAGEDJS ***
*/
.title-image-wrap {
page: layout-title;
}
.layout-1 {
page: layout1;
}
.layout-2 {
page: layout2;
}
/*
Elements with the .hide-from-book class will be stripped completely
from the HTML by Python (not just hidden). The CSS is only here as a reminder.
*/
.pagedjs_pages .hide-from-book {
display: none;
}
/*
*** FONTS ***
*/
.font-authentic {
font-family: Authentic, sans-serif
}
.font-authentic-condensed {
font-family: Authentic-condensed, sans-serif;
font-weight: 60;
}
.font-authentic-condensed {
font-family: Authentic-condensed, sans-serif;
font-weight: 60;
}
.font-le-murmure {
font-family: le-murmure, sans-serif;
}
.font-notcouriersans {
font-family: Authentic, 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;
}
/*
*** LAYOUTS ***
*/
/* LAYOUT 1 */
.layout-1 h3 {
font-family: Authentic, sans-serif;
padding: 4pt 30pt 0;
border-width: 1pt;
border-radius: 30pt;
border-color: black;
border-style: solid;
text-align: center;
font-size: 54px;
margin-bottom: 30pt; /* space for the author float */
}
.layout-1 .author-wrap {
display: flex;
justify-content: flex-end;
}
.layout-1 .author {
font-family: Authentic, sans-serif;
border-width: 1pt;
border-radius: 30pt;
border-color: black;
border-style: solid;
text-align: center;
font-size: 24px;
padding: 10pt;
margin: 0 -30mm 0 0; /* negative margin to pull author into right page margin */
display: inline-flex;
}
.layout-1 .block {
border: 1px solid black;
padding: 3mm;
}
.layout-1 hr {
border: 0;
border-bottom: 1px solid black;
margin-left: -3mm; /* negative of the padding on .block */
margin-right: -3mm;
}
/* LAYOUT 2 */
.pagedjs_pages .layout-2 {
columns: 2;
}
.layout-2 h2,
.layout-2 h3,
.layout-2 h4 {
column-span: all;
}