Studio Boilerplate SCSS
In most cases, the following SCSS should be copied and pasted into the Custom Styles (if you don’t know how to do this, check out “Apply Custom Styles). Ensure that it is included in the PDF and EPUB styles as well as the Web styles — it is best to copy your web styles into EPUB and PDF at the end of the development process, so that any custom styling is carried over. NOTE: When including this in PDF and EPUB, the rule for .non-web at the bottom needs to be edited as instructed in the comment.
/* USER VARIABLES - Change these as desired */
// Textbox header icons
// Change the URLs to your preferred icons
// Note that the image URLs must be enclosed in single or double quotes
$learning-objectives-icon: 'https://ecampusontario.pressbooks.pub/app/uploads/sites/4472/2024/09/stars_16dp_FFFFFF_FILL0_wght400_GRAD0_opsz20.png';
$examples-icon: 'https://ecampusontario.pressbooks.pub/app/uploads/sites/4472/2024/09/target_16dp_FFFFFF_FILL0_wght400_GRAD0_opsz20.png';
$exercises-icon: 'https://ecampusontario.pressbooks.pub/app/uploads/sites/4472/2024/09/edit_square_24dp_FFFFFF_FILL0_wght400_GRAD0_opsz24.png';
$key-takeaways-icon: 'https://ecampusontario.pressbooks.pub/app/uploads/sites/4472/2024/10/business_center_100dp_FFFFFF_FILL0_wght400_GRAD0_opsz48.png';
$knowledge-check-icon: 'https://ecampusontario.pressbooks.pub/app/uploads/sites/4472/2024/09/lightbulb_16dp_FFFFFF_FILL0_wght400_GRAD0_opsz20.png';
//---------------------------------------------------------------------
/* STUDIO CONSTANTS & STYLES */
// leave these as is unless you want different styling than the studio defaults
// Border Radius
$border-radius-normal: 1em;
$border-radius-large: 2em;
$border-radius-rounded: 50%;
// Spacing & Padding
$padding-small: 10px;
$padding-medium: 15px;
$padding-large: 20px;$spacing-small: 10px;
$spacing-medium: 15px;
$spacing-large: 20px;// Breakpoints
$breakpoint-small: 576px; // Small devices (phones)
$breakpoint-medium: 768px; // Medium devices (tablets)
$breakpoint-large: 992px; // Large devices (desktops)
$breakpoint-xlarge: 1200px; // Extra-large devices// Box Shadow
$box-shadow-default: 0 4px 6px rgba(0, 0, 0, 0.1);
/* Suppress screaming caps for section headers */
section.chapter header h1,
section.part header h1 {
text-transform: none !important;
}
h1, h2, h3, h4, h5, h6 {
font-weight: bold !important;
margin: $spacing-large 0 !important;
}
/* Suppress Pressbooks rendering
of chapter titles in screaming caps */
section.chapter header h1, section.part header h1 {
text-transform: none !important;
}
/* Underline style for page headings */
section.chapter header:not(.textbox__header),
section.front-matter header:not(.textbox__header),
section.back-matter header:not(.textbox__header) {
border-bottom: 1px solid #373d3f;
margin-bottom: 3.5em;
padding-bottom: 20px !important;
}
section.front-matter header:not(.textbox__header) h1 {
margin-bottom: 0 !important;
}
.front-matter header h1 {
text-transform: none !important;
}
.back-matter header h1 {
text-transform: none !important;
}
/* Make headings bold by default */
h1, h2, h3, h4, h5, h6 {
font-weight: bold !important;
}
// Rounded Textboxes
.textbox {
border-radius: $border-radius-large !important;
font-size: inherit !important;
ul, li {
font-size: inherit !important;
}
p {
hyphens: none;
font-size: inherit !important;
}
/* Prevent Firefox from centering accordions inside textboxes */
details {
text-align: left;
padding-left: 0px;
margin-left: 0px;
}
.textbox__header {
border-radius: $border-radius-large $border-radius-large 0 0 !important;
display: flex;
align-items: center;
gap: $spacing-medium;
margin: 0;
}
.textbox__header::before {
content: '';
display: block;
width: 50px;
height: 50px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
// Remove unnecessary margins for textbox titles
h2.textbox__title, h3.textbox__title, h4.textbox__title,
.textbox__header h2, .textbox__header h3, .textbox__header h4 {
margin: 0 !important;
}}
.textbox--examples .textbox__header::before {
background-image: url($examples-icon);
}
.textbox--exercises .textbox__header::before {
background-image: url($exercises-icon);
}
.textbox--key-takeaways .textbox__header::before {
background-image: url($key-takeaways-icon);
}
.textbox--learning-objectives .textbox__header::before {
background-image: url($learning-objectives-icon);
}
.textbox--knowledge-check .textbox__header::before {
background-image: url($knowledge-check-icon);
}
/* Knowledge Check Box */
.textbox--knowledge-check {
padding: 0 !important;
border: none !important;
}
.textbox--knowledge-check .textbox__header {
background-color: black;
padding: 1.7777777778em 1.7777777778em 1.7777777778em 1.7777777778em;
}
.textbox--knowledge-check .textbox__title {
color: white;
}
.textbox--knowledge-check .textbox__content {
margin: 0;
padding: 1.7777777778em 1.7777777778em 1.7777777778em 1.7777777778em;
background-color: #efefef;
border-radius: 0 0 $border-radius-large $border-radius-large !important;
}
/* End of Knowledge Check Box */
// Table Styles
table {
table-layout: fixed;
li {
font-size: 0.9em !important;
font-weight: normal !important;
line-height: 1 !important;
}
ul, ol {
margin-top: $spacing-large !important;
}td, th {
word-break: normal !important;
overflow-wrap: normal !important;
}
}
// Lightbox Images
.lity-content img {
background-color: white;
}
// Rounded Images
.rounded-image {
border-radius: $border-radius-large;
}
/////////Clean-up Mobile Image Alignments
.alignright,
.alignleft {
@media (max-width: 700px) {
float: none !important;
margin: 15px auto !important;
}}
// Don't show elements that are print-only
.non-web {
display: none; //CHANGE THIS TO display: block; IN PDF AND EPUB
}
/* END OF STUDIO DEFAULT STYLING */
/* ADD CUSTOM STYLES AND SNIPPETS BELOW*/
//----------------------------------------------------------
/*Fancy Accordion*/
.fancy-accordion-wrapper {
margin-bottom: 60px;
position: relative;
}
.fancy-accordion {
margin-bottom: -45px;
border-radius: 15px;
border: 1px solid #0b6396;
background-color: #fff;
color: #000;
padding: 0;
overflow: visible;
}
.fancy-accordion > summary, .fancy-accordion > .summary {
padding: 10px;
font-size: 1.25em;
text-indent: 30px;
background-color: #0b6396;
list-style: none;
color: #fff;
border: none;
cursor: pointer;
border-radius: 10px 10px 10px 10px; }
.fancy-accordion > .summary {
border-radius: 10px 10px 0px 0px;
font-weight: bold;
}
details.fancy-accordion[open] > summary {
border-radius: 10px 10px 0 0;
}
.fancy-accordion > .collapsed {
padding: 20px;
margin-bottom: 10px;
}
details.fancy-accordion > .collapsed {
display: none;
}
details.fancy-accordion[open] > .collapsed {
display: block;
animation: details-show 750ms ease-in-out;
}
// The Rotating Marker
details.fancy-accordion > summary::marker {
display: none;
content: ""; }
details.fancy-accordion > summary::before {
content: "▶";
left: -0.6em;
position: absolute;
transform: rotate();
transform-origin: 70% 50%;
transition: 0.2s transform ease; }
details.fancy-accordion[open] > summary:before {
transform: rotate(90deg);
transform: ease 1s; }
// The Sliding Summary
@keyframes details-show {
from {
opacity: 0;
transform: var(--details-translate, translateY(-0.5em)); } }
details[open] iframe {
animation: refresh 0.2s;
}
@keyframes refresh {
from {
transform: scale(0.99);
}
to {
transform: scale(1);
}
}
/* End of Fancy Accordion */
/* Step Boxes */
.stepbox {
border: 2px solid #b3272d; //Step content border color
padding: 15px;
margin: 30px 0;
display: flex;
flex-direction: column;
border-radius: 10px;
position: relative;
background-color: #ededed; //Step content background color
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.step-number h2, .step-number h3, .step-number h4 {
margin: 0;
}.step-number > :first-child {
font-size: 1.3em; //optionally resize the font
color: white; //heading color
margin: 0 !important;
padding: 0 !important;
}
.step-number {
//font-size: 1.5em; //use this to adjust the font size
color: white;
background-color: #b3272d; //Step number background color
width: fit-content;
z-index: 1;
line-height: 40px;
text-align: center;
border-radius: 2em;
display: flex;
align-items: center;
justify-content: center;
margin-top: -32px;
margin-left: -30px;
padding: 2px 15px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
/* End of Step Boxes */
/*Hide interactive content*/.interactive-content, .web-only { display: none;}/*Suppress text justify*/p { text-align: left;}/*Prevent textboxes from breaking across pages*/.textbox { page-break-inside: avoid;}/* Image alignment for PDF */
p img.alignright, img.alignright, .wp-caption.alignright {
prince-float: right !important;
margin-left: 1em;
margin-bottom: 1em;
max-width: 40%; /* Adjust as needed */
}
p img.alignleft, img.alignleft, .wp-caption.alignleft {
prince-float: left !important;
margin-right: 1em;
margin-bottom: 1em;
max-width: 40%;
}
//REPLACE FANCY ACCORDION CODE WITH THE FOLLOWING:
/*Fancy Accordion*/
.fancy-accordion-wrapper {
margin-bottom: 60px;
position: relative;
}
.fancy-accordion {
margin-bottom: -45px;
border-radius: 15px;
border: 1px solid #000000;
background-color: #fff;
color: #000;
padding: 0;
overflow: visible;
}
.fancy-accordion > .summary {
padding: 10px;
font-size: 1em;
text-indent: 30px;
background-color: #b3272d;
list-style: none;
color: #fff;
border: none;
cursor: pointer;
border-radius: 10px 10px 0px 0px;
}
.fancy-accordion > .collapsed {
padding: 20px;
margin-bottom: 10px;
}
/* End of Fancy Accordion */
Optional Boilerplate Styles
The following styles can be added for further customization, allowing the use of additional fonts, or specifying a colour palette using variables.
// Colours
// Note that colours for textboxes should be set in the Theme Options, not here
// You can use these colours inside style attributes in your page HTML like this:
// style="color: var(--primary-color) !important;"
// (Note the use of 'var()' and the replacement of '$' with '--')
// and don't forget to use !important rule
$primary-color: #b3272d; // Fanshawe Red
$secondary-color: #646469; // Dark Gray
$primary-color-light: #e2231a; // Light Red
$secondary-color-light: #ededed; // Light Gray
// Fonts
// Note that changing the primary font will change the default font for the entire book!!
// List of available fonts with examples can be found at:
// https://ecampusontario.pressbooks.pub/oerstudiotrainingguide/chapter/custom-fonts/
// You can use these fonts in your page code like this:
// style="font-family: var(--secondary-font), sans-serif !important;"
// (Note the use of 'var()' and the replacement of '$' with '--')
// and don't forget the !important rule
$primary-font: 'Montserrat'; //changing this affects the default font for the whole book
$secondary-font: 'Oswald';
$cursive-font: 'McLaren';
$ornamental-font: 'El Messiri';
:root {
--primary-color: #{$primary-color};
--secondary-color: #{$secondary-color};
--primary-color-light: #{$primary-color-light};
--secondary-color-light: #{$secondary-color-light};
--primary-font: #{$primary-font};
--secondary-font: #{$secondary-font};
--cursive-font: #{$cursive-font};
--ornamental-font: #{$ornamental-font};
}
// Import Google fonts
@import url('https://fonts.googleapis.com/css2?family=Akaya+Kanadaka&family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Coming+Soon&family=El+Messiri:wght@400..700&family=Gaegu&family=Krub:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=McLaren&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&family=Public+Sans:ital,wght@0,100..900;1,100..900&family=Radio+Canada:ital,wght@0,300..700;1,300..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Space+Grotesk:wght@300..700&display=swap');
//Logic to override theme primary font if custom value is set
body {
font-family: $primary-font !important;
}
#main *:not(mjx-container *, mjx-math *){
font-family: inherit, !important;
}
// Set cursive font class
.cursive {
font-family: $cursive-font, sans-serif !important;
}
