Style Sheet Code

Andrew Stracuzzi; Brian Dunphy

Style Sheet Code

//** TEXT STYLES **/
h1, h2, h3, h4, h5, h6 {
font-weight: bold;
}

h3 {
color: black important!;
}
.alertbox {
border: 8px solid #D4281C;
padding: 2rem;
}

/* Display textbox headers in parts */
.part header.textbox__header {
display: block !important;
}

/*fix weird bottom margin after images*/
.wp-nocaption{
margin-bottom: 9px !important;
}

.part header {
display: none !important;
}

.alert {
margin: -0.5rem auto 0.75rem;
display: block;
width: 6rem;
height: 6rem;
border-radius: 50%;
background-color: #D4281C;
color: #FFF;
font-size: 5rem;
text-align: center;
line-height: 4rem;
font-weight: bold;
}

//** PAGE STYLES **//
header [data-type=”author”] {
display: none !important;
}
/* Rounded Textbox */
.textbox, .textbox p, .bcc-box {
hyphens: none;
border-radius: 1.5em !important;
}
.textbox__header,.bcc-box > h3.title {
border-radius: 1.5em 1.5em 0 0 !important;
}
h2.textbox__title, h3.textbox__title, .textbox__header, .textbox__header h3, .textbox__header h4 {
margin: 0;
}
.textbox–learning-objectives .textbox__header::before,
.textbox–exercises .textbox__header::before,
.textbox–examples .textbox__header::before,
.textbox–key-takeaways .textbox__header::before {
content: “”;
display: none; /* default: block */
float: left;
background-size: 50px 50px !important;
width: 50px;
height: 50px;
margin: -10px 10px 0 0;
}

.textbox h3 {
margin-top: 0;
}

/* Learning Objectives Box */
.textbox–learning-objectives .textbox__header::before {
background: url(“IMG_URL_HERE”) no-repeat;
}

/* Question/Exercises Box */
.textbox–exercises .textbox__header::before {
background: url(“IMG_URL_HERE”) no-repeat;
}

/* Examples Box */
.textbox–examples .textbox__header::before {
background: url(“IMG_URL_HERE”) no-repeat;
}

/* Key Takeaways Box */
.textbox–key-takeaways .textbox__header::before {
background: url(“IMG_URL_HERE”) no-repeat;
}

/* No-Icon */
.textbox-no-icon::before {
display: none !important;
background: none !important;
}

/* Gallery container */
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;
}
/* Image container */
.gallery-item {
position: relative;
overflow: hidden;
text-align: center;
margin-top: 1em;
}
/* Image */
.gallery-item img {
display: block;
width: 100%;
height: auto;
}
/* Image name */
.gallery-item .image-name {
width: 100%;
margin-top: 0.5em;
padding: 10px;
background-color: rgba(0, 0, 0, 1);
color: #fff;
font-size: 16px;
text-align: center;
}
/* Download links */
.gallery-item .download-links {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
}
.gallery-item .download-link {
display: block;
margin-bottom: 5px;
color: #FFF;
text-decoration: none;
font-size: 16px;
font-weight: bold;
background-color: #000;
padding: 5px 10px;
transition: background-color 0.3s ease;
}
/* Hover styles for download links */
.gallery-item .download-link:hover {
background-color: #FFF;
color: #000;
}
/* Show download links on hover */
.gallery-item:hover .download-links {
display: block;
}
.gallery-item .download-links br {
display: none;
}

//** OER STAFF LISTING **//
.staff-listing-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.staff-listing {
display: flex;
flex-direction: column;
align-items: center;
margin: 10px;
width: 45%;
background-color: rgba(0,0,0,0.05);
border-radius: 25px;
padding: 1rem;
}
.staff-listing img {
width: 150px;
height: 150px;
object-fit: cover;
border-radius: 50%;
}
.staff-listing p {
margin: 5px;
}
.staff-details {
text-align: center;
}
.staff-name {
font-weight: bold;
font-size: 1.25rem;
margin-bottom: 5px;
}
.staff-position {
font-style: italic;
margin-bottom: 10px;
}
.staff-description {
margin-bottom: 10px;
}
.staff-contact {
font-size: 1rem;
}

/*Table Vertical Cell*/
.vertical-cell {
writing-mode: vertical-lr !important;
background-color: #5E5E5E;
color: white;
}

figure {
margin-bottom: 9px !important;
}

table li {
font-size: 0.9em !important;
font-weight: normal !important;
line-height: 1 !important;
}

table ul, ol {
margin-top: 1.5em !important;
}

/*Team Roster*/
.vertical-cell {
writing-mode: vertical-lr !important;
background-color: #5E5E5E;
color: white;
}

.vertical-cell-bottom-up {
writing-mode: vertical-rl !important;
transform: rotate(180deg) !important;
}

.team-roster-header {
background-color: #e2231a;
border: none !important;
color: white;
padding: 2em !important;
border-top-left-radius: 25px;
border-bottom-left-radius: 25px !important;
border-bottom: 6px solid white !important;
}

td.team-roster-cell {
background-color: #eeeeee;
border: none !important;
vertical-align: center;
border-bottom: 6px solid white !important;
padding: 1em;

}

td.team-roster-cell p.quote {
font-style: italic;
}

td.team-roster-cell p.quote:first-of-type:first-letter{
font-size: 28px;
font-weight: bold;
line-height: 0.2em;
}

.team-roster-cell :first-child {
border-top-left-radius: 0px !important;
}

td.team-roster-header p, td.team-roster-header span {
color: #fff !important;
}

td.team-roster-header h3, td.team-roster-header h5 {
font-weight: bold !important!;
font-size: 2em;
margin: 0 !important;
color: #fff !important;
}

th.team-roster-domain-header {
background-color: #5E5E5E;
border-top-left-radius: 25px !important;
border-top-right-radius: 25px !important;
}

.team-roster-domain-header h2 {
color: white !important;
font-weight: bold;
font-size: 2em;
margin: 0.5em;
}
/* End of Team Roster */

/* Table with alternating row colours */
table.alternating tr:nth-child(even){
background: #f5faff !important;
}
table.alternating tr td:first-child{
padding-left: 1em;
}

table.alternating tr:nth-child(odd){
background: #daeaf5 !important;
}table.alternating td {
padding-left: 1em;
}

table.alternating th {
background: #0b6396;
color: #fff;
padding-left: 1em;
}
/*Icons in textbox headers*/

h2.textbox__title {

margin: 0;

}

.textbox–learning-objectives .textbox__header::before,

.textbox–exercises .textbox__header::before,

.textbox–examples .textbox__header::before,

.textbox–key-takeaways .textbox__header::before {

content: “”;

display: block;

background-size: contain;

width: 50px;

height: 50px;

background-position: center;

}

/* Learning Objectives Box */

.textbox–learning-objectives .textbox__header::before {

background-image: url(“https://ecampusontario.pressbooks.pub/app/uploads/sites/473/2024/11/Icon_Objectives_OG-White.png”);

}

/* Question/Exercises Box */

.textbox–exercises .textbox__header::before {

background-image: url(“https://ecampusontario.pressbooks.pub/app/uploads/sites/473/2024/11/Icon_Activity_OG-White.png”);

}

/* Examples Box */

.textbox–examples .textbox__header::before {

background-image: url(“https://ecampusontario.pressbooks.pub/app/uploads/sites/473/2024/11/Icon_Examples_OG-White.png”);

}

/* Key Takeaways Box */

.textbox–key-takeaways .textbox__header::before {

background-image: url(“https://ecampusontario.pressbooks.pub/app/uploads/sites/473/2024/11/Icon_Key_OG-White.png”);

}

/* No-Icon */

.textbox-no-icon::before {

display: none !important;

background: none !important;

}

/*End of icons in textbox headers*/
//** Landing Page Styles **//
/* Book analytics button */
.book-header__description .call-to-action {
color: var(–header-color);
background-color: var(–header-bg);
text-decoration-line: none;
font-size: 1rem;
margin-top: 2rem;
display: table;
}

/* Book analytics button when hovered */
.book-header__description .call-to-action:hover {
background-color: var(–header-color);
color: var(–header-bg);
}

/*Fancy Accordion*/

.fancy-accordion-wrapper {

margin-bottom: 60px;

position: relative;

}

details.fancy-accordion {

margin-bottom: -45px;

border-radius: 15px;

border: 1px solid #0b6396;

background-color: #fff;

color: #000;

padding: 0px;

}

details.fancy-accordion > summary {

padding: 10px;

font-size: 1.25em;

text-indent: 30px;

background-color: #0b6396;;

color: #fff;

border: none;

cursor: pointer;

border-radius: 10px 10px 10px 10px; }

details.fancy-accordion[open] > summary {

border-radius: 10px 10px 0 0;

}

.collapsed {

padding: 20px;

margin-bottom: 10px; }

/* # 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.fancy-accordion[open] > *:not(summary) {

animation: details-show 750ms ease-in-out; }

/* End of Accordion */

License

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

Professional Communications Copyright © 2019 by Andrew Stracuzzi and Brian Dunphy is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License, except where otherwise noted.

License

Share This Book