Studio Boilerplate SCSS

/* USER VARIABLES - Change these as desired */

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

// 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';

// 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';

//---------------------------------------------------------------------
/* STUDIO CONSTANTS & STYLES */
// leave these as is unless you want different styling than the studio defaults

: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
.front-matter h1, .part h1, .chapter h1, .back-matter h1,
.front-matter h2, .part h2, .chapter h2, .back-matter h2,
.front-matter h3, .part h3, .chapter h3, .back-matter h3,
.front-matter h4, .part h4, .chapter h4, .back-matter h4,
.front-matter h5, .part h5, .chapter h5, .back-matter h5,
.front-matter h6, .part h6, .chapter h6, .back-matter h6,
.contributors .contributor__name,
.contributors .contributor__institution,
.first-character, .firstcharacter,
.textbox .textbox-caption, .bcc-box .textbox-caption,
div.textbox--sidebar.textbox--examples .textbox__header p, div.textbox--sidebar.textbox--key-takeaways .textbox__header p, div.textbox--sidebar.textbox--exercises .textbox__header p, div.textbox--sidebar.textbox--learning-objectives .textbox__header p,
div.dedication p, section.dedication p,
#half-title-page > .title, .title, .author, section.part header h1,
section.front-matter header [data-type="subtitle"], section.back-matter header [data-type="subtitle"], section.chapter header [data-type="subtitle"],
section.front-matter header [data-type="author"], section.back-matter header [data-type="author"], section.chapter header [data-type="author"],
section.chapter header h1, section.chapter header h1 span, section.front-matter header h1, section.back-matter header h1, section.chapter p,
section.chapter li, section.chapter td, section.chapter th, section.chapter span {

font-family: $primary-font, inherit !important;
}

// Set cursive font class
.cursive {
font-family: $cursive-font, sans-serif !important;
}

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

.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;
p {
hyphens: none;
font-size: inherit !important;
}

.textbox__header {
border-radius: $border-radius-large $border-radius-large 0 0 !important;
display: flex;
align-items: center;
gap: $spacing-medium;
&::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);
}
// 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;
}

/* END OF STUDIO DEFAULT STYLING */
/* ADD CUSTOM STYLES AND SNIPPETS BELOW*/
//----------------------------------------------------------