"

Style Code Sheet

/* 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/6098/2025/04/Icon_Objectives_White.png’;
$examples-icon: ‘https://ecampusontario.pressbooks.pub/app/uploads/sites/6098/2025/05/Icon_Team_White.png’;
$exercises-icon: ‘https://ecampusontario.pressbooks.pub/app/uploads/sites/6098/2025/05/Icon_Link_White.png’;
$key-takeaways-icon: ‘https://ecampusontario.pressbooks.pub/app/uploads/sites/6098/2025/05/Icon_Documents_White.png’;
$knowledge-check-icon: ‘https://ecampusontario.pressbooks.pub/app/uploads/sites/6098/2025/04/Icon_Knowledge_Check_Black.png’;
$video-box-icon: ‘https://ecampusontario.pressbooks.pub/app/uploads/sites/6098/2025/05/Icon_Video_Black.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;

}

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

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

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

.textbox–video-box .textbox__header::before {
background-image: url($video-box-icon);
}

/* Knowledge Check Box */
.textbox–knowledge-check {
padding: 0 !important;
border: none !important;
}

.textbox–knowledge-check .textbox__header {
background-color: #ffbe00;
padding: 1.7777777778em 1.7777777778em 1.7777777778em 1.7777777778em;
}

.textbox–knowledge-check .textbox__title {
color: black;
}

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

/* Video Box */
.textbox–video-box {
padding: 0 !important;
border: none !important;
}

.textbox–video-box .textbox__header {
background-color: #ffbe00;
padding: 1.7777777778em 1.7777777778em 1.7777777778em 1.7777777778em;
}

.textbox–video-box .textbox__title {
color: black;
}

.textbox–video-box .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 Video 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 #227dac; //Step content border color
padding: 15px;
margin: 30px 0;
display: flex;
flex-direction: column;
border-radius: 10px;
position: relative;
background-color: #efefef; //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: #227dac; //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 */

/*Box Chart*/

.box-chart {
margin: 0 auto;
margin-top: 10px;
}

.box-chart > .title {
text-align: center;
}

.box-row {
display: flex;
flex-direction: row;
margin-bottom: 10px
}

.box-container-rounded {
padding: 10px;
margin-right: 10px;
flex: 1;
}

@media screen and (max-width: 500px) {
.box-row {
flex-direction: column;
margin-bottom: 0;
}

.box-container-rounded {
margin-right: 0;
margin-bottom: 10px;
}
}

/*End of Box Chart*/

License

Icon for the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License

Shifting Perspectives: Insights into Mental Health and Homelessness Copyright © 2025 by Fanshawe College Field Placement Students is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License, except where otherwise noted.