@pimaonline/pimaonline-themepack 2.1.5

package/dist/plugins/global-homepage-overrides/global-homepage-overrides.css

@@ -0,0 +1,539 @@
+.grid-row {
+	display: flex;
+	flex-flow: row wrap;
+	justify-content: space-between;
+}
+
+@media screen and (min-width:730px) {
+	.grid-row {
+		display: flex;
+		flex-flow: row wrap;
+		justify-content: space-between;
+	}
+}
+
+.grid-col-2 {
+	flex-basis: 100%;
+	margin-bottom: 5px;
+}
+
+@media screen and (min-width:730px) {
+	.grid-col-2 {
+		flex-basis: 49.5%;
+		margin-bottom: 0;
+	}
+}
+
+.grid-col-6 {
+	flex-basis: 30%;
+}
+
+@media screen and (min-width:730px) {
+	.grid-col-6 {
+		flex-basis: 14%;
+		margin-bottom: 0;
+	}
+}
+
+@media screen and (min-width:990px) {
+	.grid-col-6 {
+		flex-basis: 14%;
+		margin-bottom: 0;
+	}
+}
+
+.virtual-student-center {
+	margin-bottom: 15px;
+}
+
+.virtual-student-center-img {
+    text-align: center;
+}
+
+.virtual-student-center-img img {
+	background-color: rgba(51,51,51,0.08);
+    padding: 15px 20px;
+    border-radius: 15px;
+	width: 90px;
+}
+
+.virtual-student-center-img a img:hover {
+	background-color: rgba(51,51,51,0.15);
+	-moz-transition: all .5s ease;
+	-webkist-transition: all .5s ease;
+	-ms-transition: all .5s ease;
+	-o-transition: all .5s ease;
+	transition: all .5s ease;
+}
+
+.virtual-student-center-link {
+	text-align: center;
+	padding: 5px;
+}
+
+
+.virtual-student-center-link a {
+	display: inline-block;
+	line-height: 1.25;
+}
+
+/* Quicklinks widget */
+p.pcc-ql-info {
+	font-size: 0.755rem;
+	margin: 0 !important;
+}
+
+ul#pcc-ql-container {
+	background-color: rgba(0, 0, 0, .01);
+	border-top: 1px solid rgba(13, 13, 13, 0.03);
+	box-shadow: 0px 0px 2px 0px rgba(13, 13, 13, .2) inset;
+	display: grid;
+	grid-template-columns: 1fr;
+	grid-auto-flow: column;
+	position: relative;
+	grid-gap: 30px;
+	list-style-type: none !important;
+	margin: 0 0 1rem 0; /*For D2L*/
+	padding: 5px;
+	overflow-x: scroll;
+	scroll-behavior: smooth;
+}
+
+@media screen and (min-width: 413px) {
+	ul#pcc-ql-container {
+	    grid-gap: 30px;
+        padding: 5px 0 5px 10px;
+	}
+}
+
+ul#pcc-ql-container::after {
+    content: '';
+    padding: 1px;
+}
+
+/* remove list marker */
+ul#pcc-ql-container li.pcc-ql-item::marker,
+ul#pcc-ql-container li.pcc-ql-item::before {
+	content: none;
+}
+
+ul#pcc-ql-container li.pcc-ql-item .pcc-ql-icon {
+	display: block;
+	text-align: center;
+}
+
+ul#pcc-ql-container li.pcc-ql-item .pcc-ql-icon img {
+	background-color: rgba(51, 51, 51, 0.08);
+	box-sizing: border-box;
+	border-radius: 15px;
+	padding: 20px 25px;
+	width: 90px;
+}
+
+ul#pcc-ql-container li.pcc-ql-item .pcc-ql-icon img:hover {
+	background-color: rgba(51, 51, 51, 0.15);
+	cursor: pointer;
+	-moz-transition: all 0.3s ease;
+	-webkit-transition: all 0.3s ease;
+	-ms-transition: all 0.3s ease;
+	-o-transition: all 0.3s ease;
+	transition: all 0.3s ease;
+}
+
+ul#pcc-ql-container li.pcc-ql-item a:any-link {
+	text-decoration: none;
+}
+
+ul#pcc-ql-container li.pcc-ql-item a:any-link:focus {
+	text-decoration: underline;
+}
+
+ul#pcc-ql-container li.pcc-ql-item h3 {
+	font-size: 0.8rem;
+	font-weight: 400;
+	line-height: 1.2;
+	text-align: center;
+	text-decoration: none;
+	width: min-content;
+}
+
+ul#pcc-ql-container li.pcc-ql-item h3 .pcc-ql-title:hover {
+	text-decoration: underline;
+}
+
+#pcc-ql-controls {
+	display: flex;
+	gap: 40px;
+	padding: 20px;
+	justify-content: center;
+	text-align: center;
+}
+
+#pcc-ql-controls button {
+	display: block;
+	margin: 0;
+	min-width: 80px;
+}
+
+#pcc-ql-controls button:hover {
+	cursor: pointer;
+}
+
+#pcc-ql-controls button span {
+	font-size: 1.5rem;
+}
+/*//*/
+
+.tech-support-widget {
+	margin: 0 auto;
+	max-width: 920px;
+	padding: 10px;
+}
+
+.tech-support-widget-header {
+
+}
+
+.tech-support-widget-cell {
+	background-color: rgba(4,85,148,.05);
+	border-top: 3px solid rgba(4,85,148,1);
+    min-height: 430px;
+	padding: 15px;
+}
+
+.icon-online-online {
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 350 350'%3E%3Ctitle%3Efacetoface%3C/title%3E%3Cg id='Icons'%3E%3Cpath d='M249.43,345.68H239.19V330.25a48.65,48.65,0,0,0-48.6-48.59H160.71a48.65,48.65,0,0,0-48.58,48.59v15.43H101.88V330.25a58.9,58.9,0,0,1,58.83-58.84h29.88a58.9,58.9,0,0,1,58.84,58.84v15.43Z'/%3E%3Cpolygon points='140.86 345.68 130.62 345.68 130.62 317.19 140.86 317.19 140.86 345.68 140.86 345.68'/%3E%3Cpolygon points='220.7 345.68 210.45 345.68 210.45 317.19 220.7 317.19 220.7 345.68 220.7 345.68'/%3E%3Cpath d='M175.66,182.84a28,28,0,0,0-28,28c0,16.38,13.58,37.52,28,37.52s28-21.14,28-37.52a28,28,0,0,0-28-28Zm0,75.78c-21.2,0-38.26-26.13-38.26-47.77a38.26,38.26,0,1,1,76.51,0c0,21.64-17.06,47.77-38.25,47.77Z'/%3E%3Cpolygon points='38.64 343.7 28.39 343.7 28.39 301.76 38.64 301.76 38.64 343.7 38.64 343.7'/%3E%3Cpath d='M70.26,167.12a25.41,25.41,0,0,0-25.37,25.39c0,14.9,12.31,34.13,25.37,34.13s25.39-19.23,25.39-34.13a25.42,25.42,0,0,0-25.39-25.39Zm0,69.76c-19.74,0-35.62-24.27-35.62-44.37a35.63,35.63,0,1,1,71.26,0c0,20.1-15.9,44.37-35.64,44.37Z'/%3E%3Cpath d='M12.19,345.68H1.94V302.42a54.63,54.63,0,0,1,54.57-54.57H84c18.1,0,32.79,6.53,40.31,17.89l-8.54,5.65c-5.51-8.32-17.4-13.29-31.77-13.29H56.51a44.37,44.37,0,0,0-44.32,44.32v43.26Z'/%3E%3Cpolygon points='323.1 345.68 312.85 345.68 312.85 301.76 323.1 301.76 323.1 345.68 323.1 345.68'/%3E%3Cpath d='M281.22,167.12a25.41,25.41,0,0,0-25.37,25.39c0,14.9,12.31,34.13,25.37,34.13s25.39-19.23,25.39-34.13a25.43,25.43,0,0,0-25.39-25.39Zm0,69.76c-19.73,0-35.62-24.27-35.62-44.37a35.63,35.63,0,1,1,71.26,0c0,20.1-15.9,44.37-35.64,44.37Z'/%3E%3Cpath d='M349.55,345.68H339.3V302.42A44.37,44.37,0,0,0,295,258.1H267.47c-14.38,0-26.26,5-31.76,13.29l-8.55-5.65c7.52-11.36,22.21-17.89,40.31-17.89H295a54.63,54.63,0,0,1,54.57,54.57v43.26Z'/%3E%3Cpolygon points='180.12 157.89 169.88 157.89 169.88 9.44 180.12 9.44 180.12 157.89 180.12 157.89'/%3E%3Cpath d='M175,109.83c-49.65,0-94.86-19.71-118-51.43l8.29-6C86.54,81.49,128.57,99.58,175,99.58c47.08,0,90.69-19.32,111.08-49.2l8.47,5.79C272,89.26,226.14,109.83,175,109.83Z'/%3E%3Cpath d='M95.3,145.62l-10.19-1.05C93.7,62,130.68,4.32,175,4.32c43.33,0,80.12,56.11,89.48,136.44l-10.19,1.17C245.7,68.14,212.36,14.57,175,14.57c-38.27,0-71.79,55.11-79.7,131.05Z'/%3E%3Cpath d='M338.53,241.76,329,238.1a164,164,0,0,0,10.79-58.77c0-90.85-73.91-164.76-164.75-164.76S10.25,88.48,10.25,179.33a164,164,0,0,0,9.8,56.12l-9.64,3.49A174.62,174.62,0,0,1,0,179.33c0-96.5,78.5-175,175-175s175,78.51,175,175a173.92,173.92,0,0,1-11.47,62.43Z'/%3E%3C/g%3E%3C/svg%3E");
+	background-repeat: no-repeat;
+	width: 45px;
+    background-size: 45px;
+    height: 45px;
+    display: block;
+    margin: 0 auto;
+	margin-bottom: 5px;
+}
+
+.icon-face-to-face-hybrid {
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 350 350'%3E%3Ctitle%3Eraising-hand%3C/title%3E%3Cg id='Icons'%3E%3Cpath d='M150.81,55.54A21.44,21.44,0,0,0,129.4,77c0,12.59,10.37,28.82,21.41,28.82S172.24,89.55,172.24,77a21.45,21.45,0,0,0-21.43-21.42Zm0,59c-16.72,0-30.19-20.56-30.19-37.59A30.2,30.2,0,0,1,181,77c0,17-13.47,37.59-30.2,37.59Z'/%3E%3Cpath d='M108.54,243.38A15.6,15.6,0,0,1,93,227.8V170a46.28,46.28,0,0,1,46.23-46.22h23.25a47.94,47.94,0,0,1,6.5.45,15.86,15.86,0,0,1,5.14,1.11l-3.67,8a7.55,7.55,0,0,0-1.54-.24l-1.15-.15a39.55,39.55,0,0,0-5.28-.36H139.19A37.49,37.49,0,0,0,101.73,170V227.8a6.81,6.81,0,1,0,13.61,0V183.55h8.78V227.8a15.61,15.61,0,0,1-15.58,15.58Z'/%3E%3Cpolygon points='155.19 345.61 146.42 345.61 146.42 227.8 155.19 227.8 155.19 345.61 155.19 345.61'/%3E%3Cpath d='M150.81,350H125.75a10.42,10.42,0,0,1-10.41-10.4V169.38h8.78V339.6a1.62,1.62,0,0,0,1.63,1.63h25.06V350Z'/%3E%3Cpath d='M175.89,350H146.42V227.8h8.77V341.23h20.7a1.63,1.63,0,0,0,1.62-1.63V240.09h8.77V339.6A10.42,10.42,0,0,1,175.89,350Z'/%3E%3Cpath d='M69.38,85.05a18.85,18.85,0,0,0-18.83,18.82c0,11.14,9.13,25.51,18.83,25.51S88.2,115,88.2,103.87A18.84,18.84,0,0,0,69.38,85.05Zm0,53.1c-15.29,0-27.6-18.75-27.6-34.28a27.6,27.6,0,0,1,55.2,0c0,15.53-12.31,34.28-27.6,34.28Z'/%3E%3Cpath d='M31.34,254.06a14.46,14.46,0,0,1-14.45-14.45V187.55a42.08,42.08,0,0,1,42-42H79.84a41.29,41.29,0,0,1,5.93.42,14.28,14.28,0,0,1,4.72,1l-3.66,8a9.77,9.77,0,0,0-1.27-.19l-1-.12a33.48,33.48,0,0,0-4.71-.33H58.92a33.29,33.29,0,0,0-33.26,33.26v52.06a5.69,5.69,0,0,0,11.37,0V199.79H45.8v39.82a14.47,14.47,0,0,1-14.46,14.45Z'/%3E%3Cpolygon points='73.77 345.61 64.99 345.61 64.99 239.61 73.77 239.61 73.77 345.61 73.77 345.61'/%3E%3Cpath d='M69.38,350H46.83a9.8,9.8,0,0,1-9.8-9.8V187H45.8V340.2a1,1,0,0,0,1,1H69.38V350Z'/%3E%3Cpath d='M91.93,350H65V239.61h8.78V341.23H91.93a1,1,0,0,0,1-1V250.66h8.77V340.2a9.8,9.8,0,0,1-9.8,9.8Z'/%3E%3Cpath d='M241.2,26.83a24,24,0,0,0-23.94,23.94c0,14,11.62,32.06,23.94,32.06s23.93-18.07,23.93-32.06A24,24,0,0,0,241.2,26.83Zm0,64.77c-18.12,0-32.71-22.34-32.71-40.83a32.71,32.71,0,1,1,65.41,0c0,18.49-14.59,40.83-32.7,40.83Z'/%3E%3Cpath d='M194.81,233a16.69,16.69,0,0,1-16.68-16.67V152.81a50.36,50.36,0,0,1,50.31-50.29H254A45.88,45.88,0,0,0,299.79,56.7v-40h8.77v40A54.66,54.66,0,0,1,254,111.3H228.44a41.57,41.57,0,0,0-41.54,41.51v63.51a7.9,7.9,0,0,0,15.79,0V167.76h8.77v48.56A16.68,16.68,0,0,1,194.81,233Z'/%3E%3Cpath d='M268.72,350H241.2v-8.77h27.52a2.22,2.22,0,0,0,2.22-2.22V150.85a24,24,0,0,1,11.44-20.55,87.8,87.8,0,0,0,42-75.19V17.05a7.9,7.9,0,1,0-15.78,0h-8.77a16.66,16.66,0,1,1,33.32,0V55.11A96.57,96.57,0,0,1,287,137.78a15.22,15.22,0,0,0-7.29,13.07V339a11,11,0,0,1-11,11Z'/%3E%3Cpolygon points='245.59 345.61 236.81 345.61 236.81 216.32 245.59 216.32 245.59 345.61 245.59 345.61'/%3E%3Cpath d='M245.59,350H213.68a11,11,0,0,1-11-11V152.2h8.77V339a2.22,2.22,0,0,0,2.22,2.22h23.13V216.32h8.78V350Z'/%3E%3Cpolygon points='294.84 350 21.28 350 21.28 341.23 294.84 341.23 294.84 350 294.84 350'/%3E%3C/g%3E%3C/svg%3E");
+	background-repeat: no-repeat;
+	width: 45px;
+    background-size: 45px;
+    height: 45px;
+    display: block;
+    margin: 0 auto;
+	margin-bottom: 5px;
+}
+
+.tech-support-widget-cell ul {
+	padding-left: 20px;
+}
+
+.tech-support-widget-cell ul li {
+}
+
+.tech-support-widget-cell h3 {
+	margin: 0;
+	text-align: center;
+}
+
+.tech-support-widget-cell a {
+	text-decoration: none;
+}
+
+.tech-support-widget-cell a button {
+    background-color: #006fbf;
+	color: rgba(255,255,255,1);
+    border: none;
+    border-bottom: 2px solid #00388c;
+	border-radius: 3px;
+	display: block;
+	margin: 0 auto;
+	padding: 10px;
+}
+
+.tech-support-widget-cell a button:hover {
+    background-color: #005694;
+	border-bottom: 2px solid #005694;
+	cursor: pointer;
+}
+
+.tech-support-widget-footer {
+
+}
+
+a.btn {
+    background-color: #006fbf;
+    border-radius: 6px;
+    color: white;
+    padding: 8px 20px;
+    text-decoration: none
+}
+
+a.btn:hover {
+    background-color: #005694;
+    cursor: pointer;
+    text-decoration: none;
+}
+
+/*Widgets*/
+
+/*Logo*/
+
+.gmail-widget-logo {
+    text-align: center;
+    width: 100%;
+    padding: 0;
+}
+
+.gmail-logo {
+    max-width: 100%;
+    max-height: 100%;
+    margin: 0px 0px 10px 0px;
+}
+
+.nettutor-widget-logo {
+    text-align: center;
+    max-width: 100%;
+    padding: 0;
+}
+
+.nettutor-logo {
+    max-width: 100%;
+    max-height: 100%;
+    margin: 0px 0px 8px 0px;
+}
+
+/*Text*/
+
+.main-text {
+    text-align: center;
+    margin-top: 0 auto;
+    margin-bottom: 0px;
+    line-height: 1;
+    font-size: 14px;
+}
+
+.main-text-left {
+	margin-bottom: 0 auto !important;
+	margin-top: 0 auto !important;
+	font-size: 14px;
+	text-align: left;
+	line-height: 1;
+}
+
+/*Margins*/
+
+.small-margin {
+    margin: 0 0 5px 0;
+}
+
+.no-margin
+{
+    margin: 0 auto;
+}
+
+
+/*Button and Links*/
+
+.d2l-widget-button {
+    text-align: center;
+    width: 100%;
+    margin-top: 10px;
+    margin-bottom: 25px;
+}
+
+.d2l-widget-button-gmail {
+    text-align: center;
+    width: 100%;
+    margin-top: 20px;
+    margin-bottom: 0px;
+}
+
+.d2l-widget-button-gmail a.button {
+  color: rgba(255,255,255,1) !important;
+}
+
+.d2l-widget-button a.button {
+  color: rgba(255,255,255,1) !important;
+}
+
+a.button {
+    background-color: #006FBF;
+    border: 1px solid #005694;
+    border-radius: .3rem;
+    text-decoration: none;
+    color: #ffffff;
+    font-size: 12px;
+    font-weight: 700;
+    padding: 5px 15px;
+    display: inline-block;
+
+}
+
+a.button:visited {
+    background-color: #006FBF;
+    border: 1px solid #005694;
+    border-radius: .3rem;
+    color: #fff;
+}
+
+a.button:hover {
+    background-color: #005694;
+    color: #fff;
+    text-decoration: none;
+}
+
+/* Course Quicklinks */
+.ece-ql-container * {
+	box-sizing: border-box;	
+	margin: 0;
+	padding: 0;
+}
+
+.ece-ql-container {
+	background-color: rgba(255, 255, 255, 1);		
+	margin: 0px auto;
+	max-width: 720px;
+	padding: 0px;
+}
+
+.ece-ql-grid {
+	display: grid;
+	grid-template-columns: 1fr 1fr 1fr;
+	grid-auto-flow: column;
+	grid-gap: 5px;
+	list-style-type: none;
+	
+	margin: 10px auto 0;
+	max-width: 550px;
+  padding: 0;
+}
+
+.ece-ql-grid .ece-ql-item {
+	display: flex;
+	flex-direction: column-reverse;
+	gap: 10px;
+	
+	align-items: center;
+	background-color: whitesmoke;
+	justify-content: start;
+	margin: 0 auto;	
+	padding: 10px;
+	text-decoration: none;
+	height: 100%;
+}
+
+.ece-ql-grid .ece-ql-item img {
+	background-color: transparent;
+	box-sizing: content-box;	
+	padding: 5px 10px;
+}
+
+a.ece-ql-item span.ece-ql-btn {
+	color: rgba(0, 111, 191, 1);
+	font-family: 'Lato', sans-serif;
+  font-weight: 700;
+  font-size: 15px;	
+	text-align: center;
+}
+
+.ece-ql-grid .ece-ql-item img.icon-start-here {
+	max-width: 30px;
+}	
+
+.ece-ql-grid .ece-ql-item img.icon-schedule {
+	max-width: 60px;
+}	
+
+.ece-ql-grid .ece-ql-item img.icon-grades {
+	max-width: 45px;
+}
+
+/* Begin queries */
+
+@media screen and (min-width: 510px) {
+	.ece-ql-container {
+		background-color: rgba(0, 0, 0, .01);	
+		border-bottom: 8px solid rgba(13, 13, 13, .1);
+		box-shadow: inset 0px 0px 2px 0px rgba(13, 13, 13, .2);	
+		margin: 0px auto;
+		max-width: 720px;
+		padding: 30px 10px 10px;
+	}	
+	
+	.ece-ql-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));		
+		grid-gap: 24px;
+	}	
+	
+	.ece-ql-grid .ece-ql-item {
+		background-color: transparent;
+		box-shadow: none;
+		flex-direction: column;
+		min-width: revert;
+		padding: 5px;
+	} 
+
+	.ece-ql-grid .ece-ql-item img {
+		background-color: transparent;
+	}
+	
+	a.ece-ql-item span.ece-ql-btn {
+		background-color: transparent;
+		border-radius: 8px;
+		color: #006fbf;
+		padding: 3px 8px;
+	} 
+	
+	.ece-ql-grid .ece-ql-item img.icon-start-here {
+		max-width: 40px;
+	}	
+
+	.ece-ql-grid .ece-ql-item img.icon-schedule {
+		max-width: 85px;
+	}	
+
+	.ece-ql-grid .ece-ql-item img.icon-grades {
+		max-width: 60px;
+	}	
+			
+}
+
+@media (min-width: 1024px) {
+  .ece-ql-grid a.ece-ql-item:hover img {
+    transform: scale(1.1) translate(0, -20px);
+    transition: all 0.3s ease-in-out;
+  }
+
+  .ece-ql-grid .ece-ql-item,
+  .ece-ql-grid .ece-ql-item img,
+  .ece-ql-grid .ece-ql-item .ece-ql-btn {
+    transition: all 0.3s ease-in-out;
+  } 
+  
+  .ece-ql-grid a.ece-ql-item:hover .ece-ql-btn {
+    transform: scale(1.15) translate(0, -25px);
+    transition: all 0.35s ease-in-out;
+    letter-spacing: 0px;
+  }  
+  
+	.ece-ql-grid a.ece-ql-item:hover .ece-ql-btn {
+		background-color: rgba(64, 64, 64, .1);
+	}	  
+  
+	/* Triangle thing */
+	a.ece-ql-item:hover span.ece-ql-btn:after {
+		content: "";
+		position: absolute;
+		
+		border-top: 10px solid  rgba(64, 64, 64, .1);
+		border-bottom: 10px solid transparent;
+		border-left: 10px solid transparent;
+		border-right: 10px solid transparent;
+		height: 0px;
+		width: 0px;
+		right: 40%;
+		bottom: -20px;
+		transition-delay: all 1s;
+	}	  
+}

package/dist/plugins/global-homepage-overrides/global-homepage-overrides.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script>
+      let parentDoc = window.parent.document;
+
+      let scriptIsLoaded = parentDoc.head.querySelectorAll("script[src='https://d2l.pima.edu/shared/webdev/course-files/plugins/global-homepage-overrides/global-homepage-overrides.js']").length > 0;
+
+      if (!scriptIsLoaded) {
+        let script = parentDoc.createElement("script");
+        script.type = "text/javascript";
+        script.src = "https://d2l.pima.edu/shared/webdev/course-files/plugins/global-homepage-overrides/global-homepage-overrides.js";
+        parentDoc.head.appendChild(script);
+      }
+    </script>
+  </head>
+  <body></body>
+</html>

package/dist/plugins/global-homepage-overrides/global-homepage-overrides.js

@@ -0,0 +1,53 @@
+// This script uses a forEach loop to place a custom stylesheet into every shadow dom (#shadow-root) component,
+/// then while still in the loop runs scripts through each component
+
+window.parent.addEventListener("load", function () {
+
+  // Find all shadow-dom components and create an array
+  let sRoots = document.querySelectorAll("d2l-html-block");
+
+  // Loop through array
+  sRoots.forEach((each) => {
+
+    // Set the root element of each shadow component to a variable
+    let sRoot = each.shadowRoot.querySelector(".d2l-html-block-rendered");
+    
+    // Create link element
+    let link = document.createElement("link");
+    link.type = "text/css";
+    link.rel = "stylesheet";
+    link.href = "https://d2l.pima.edu/shared/webdev/course-files/plugins/global-homepage-overrides/global-homepage-overrides.css";
+    
+    // Append link element to root element
+    sRoot.append(link);
+
+    // BEGIN SCRIPTS *note: still going through forEach loop
+
+    // PCC Quicklinks
+    /// if the element has both scroll-right/left
+    if (each.shadowRoot.getElementById("pcc-ql-scroll-right") && each.shadowRoot.getElementById("pcc-ql-scroll-left"))  {
+
+      const buttonRight = each.shadowRoot.getElementById("pcc-ql-scroll-right");
+      const buttonLeft = each.shadowRoot.getElementById("pcc-ql-scroll-left");
+      const mediaQuery = window.matchMedia("(min-width: 413px)");
+    
+      buttonRight.onclick = function () {
+        if (mediaQuery.matches) {
+          each.shadowRoot.getElementById("pcc-ql-container").scrollLeft += 490;
+        } else {
+          each.shadowRoot.getElementById("pcc-ql-container").scrollLeft += 300;
+        }
+      };
+    
+      buttonLeft.onclick = function () {
+        if (mediaQuery.matches) {
+          each.shadowRoot.getElementById("pcc-ql-container").scrollLeft -= 490;
+        } else {
+          each.shadowRoot.getElementById("pcc-ql-container").scrollLeft -= 300;
+        }
+      };
+    };
+
+
+  }) 
+});