feat: restyle asides on course pages

adil192 · Jan 23, 2024 · e5f7b5e · e5f7b5e
1 parent 5d06808
commit e5f7b5e
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 Here I will outline the changes I've made over time...
 
+### 20240123
+
+- Restyled the asides in course pages (in my course, they're labelled "Learning Outcomes" on each week's section)
+
 ### 20240122
 
 - Differentiated 1st and 2nd semester courses more. Specifically, 1st semester courses have a desaturated color, and their images are slightly blurred.

diff --git a/main.css b/main.css
@@ -1,6 +1,6 @@
 /* ==UserStyle==
 @name           UoM Blackboard theme
-@version        20240122.03.00
+@version        20240123.00.00
 @namespace      userstyles.world/user/adil192
 @description    Themes the blackboard UoM website to look more modern and use a consistent colour scheme.
 @author         adil192
@@ -356,6 +356,33 @@
   .liItem .details:empty, .buildList > li .details:empty {
     display: none;
   }
+  .liItem .details > .vtbegenerated, .buildList > li .details > .vtbegenerated {
+    overflow: visible;
+  }
+  .liItem .details > .vtbegenerated > div[style*="float: right;"], .buildList > li .details > .vtbegenerated > div[style*="float: right;"] {
+    background: #ede0f3 !important;
+    padding: 1rem !important;
+    margin-bottom: 1rem;
+    border-top-left-radius: 0.5rem;
+    border-bottom-left-radius: 0.5rem;
+    border: none !important;
+    position: relative;
+    padding-right: 0 !important;
+  }
+  .liItem .details > .vtbegenerated > div[style*="float: right;"]::after, .buildList > li .details > .vtbegenerated > div[style*="float: right;"]::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: -1rem;
+    width: 1rem;
+    height: 100%;
+    background: inherit;
+  }
+  .liItem .details > .vtbegenerated > div[style*="float: right;"][style*="width: 30%;"], .buildList > li .details > .vtbegenerated > div[style*="float: right;"][style*="width: 30%;"] {
+    width: 100% !important;
+    max-width: 25rem;
+    box-sizing: border-box;
+  }
   .liItem .vtbegenerated table, .buildList > li .vtbegenerated table {
     background: #ecdff2;
     color: #1d1b1e;

diff --git a/styles/_online.manchester.ac.uk.scss b/styles/_online.manchester.ac.uk.scss
@@ -301,6 +301,39 @@ img[src="#{$orig-piazza-icon}"] {
 		&:empty {
 			display: none;
 		}
+
+		> .vtbegenerated {
+			overflow: visible;
+		}
+	}
+
+	.details > .vtbegenerated > div[style*="float: right;"] {
+		$floating-color: color.mix($surface-1, $primary, 90%);
+		background: $floating-color !important;
+		padding: 1rem !important;
+		margin-bottom: 1rem;
+		border-top-left-radius: 0.5rem;
+		border-bottom-left-radius: 0.5rem;
+		border: none !important;
+
+		// make it bleed into the side
+		position: relative;
+		padding-right: 0 !important;
+		&::after {
+			content: "";
+			position: absolute;
+			top: 0;
+			right: -1rem;
+			width: 1rem;
+			height: 100%;
+			background: inherit;
+		}
+
+		&[style*="width: 30%;"] {
+			width: 100% !important;
+			max-width: 25rem;
+			box-sizing: border-box;
+		}
 	}
 
 	.vtbegenerated table {

diff --git a/styles/_version.scss b/styles/_version.scss
@@ -1,6 +1,6 @@
 /* ==UserStyle==
 @name           UoM Blackboard theme
-@version        20240122.03.00
+@version        20240123.00.00
 @namespace      userstyles.world/user/adil192
 @description    Themes the blackboard UoM website to look more modern and use a consistent colour scheme.
 @author         adil192