feat: style mobile header

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 Here I will outline the changes I've made over time...
 
+### 20240128
+
+- Styled and fixed the Blackboard Ultra header on mobile
+
 ### 20240127
 
 - Initial stylings for the course page of the new Blackboard Ultra website, including:

main.css

@@ -1,6 +1,6 @@
 /* ==UserStyle==
 @name           UoM Blackboard theme
-@version        20240127.04.00
+@version        20240128.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
@@ -353,6 +353,30 @@
       width: calc(100% - 3rem) !important;
     }
   }
+  @media screen and (width <= 63.9375em) {
+    .base-header {
+      height: 3rem;
+      align-items: center;
+    }
+    .color-selection-live-mode.themed-background-primary-medium-down,
+    .color-selection-live-mode .themed-background-primary-medium-down,
+    .color-selection-live-mode .themed-background-primary-medium-down bb-svg-icon,
+    .color-selection-live-mode.themed-background-primary-medium-down bb-svg-icon,
+    .color-selection-live-mode .themed-background-primary-medium-down button,
+    .color-selection-live-mode.themed-background-primary-medium-down button,
+    .color-selection-live-mode.themed-background-primary-medium-down h1 {
+      background-color: #1d1b1e !important;
+      color: #e8e0e5 !important;
+    }
+    .color-selection-live-mode .themed-background-primary-medium-down .select-value::after,
+    .color-selection-live-mode.themed-background-primary-medium-down .select-value::after {
+      border-color: #e8e0e5 transparent transparent transparent;
+    }
+    #side-menu header a {
+      max-width: 7rem;
+      margin-inline: auto;
+    }
+  }
 }
 @-moz-document url-prefix("https://online.manchester.ac.uk/webapps/") {
   /* All blackboard pages */

styles/_online.manchester.ac.uk_ultra.scss

@@ -301,3 +301,28 @@ button.anchor,
         width: calc(100% - 3rem) !important;
     }
 }
+
+@media screen and (width <= 63.9375em) {
+    .base-header {
+        height: 3rem;
+        align-items: center;
+    }
+    .color-selection-live-mode.themed-background-primary-medium-down,
+    .color-selection-live-mode .themed-background-primary-medium-down,
+    .color-selection-live-mode .themed-background-primary-medium-down bb-svg-icon,
+    .color-selection-live-mode.themed-background-primary-medium-down bb-svg-icon,
+    .color-selection-live-mode .themed-background-primary-medium-down button,
+    .color-selection-live-mode.themed-background-primary-medium-down button,
+    .color-selection-live-mode.themed-background-primary-medium-down h1 {
+        background-color: $header !important;
+        color: $on-header !important;
+    }
+    .color-selection-live-mode .themed-background-primary-medium-down .select-value::after,
+    .color-selection-live-mode.themed-background-primary-medium-down .select-value::after {
+        border-color: $on-header transparent transparent transparent;
+    }
+    #side-menu header a {
+        max-width: 7rem;
+        margin-inline: auto;
+    }
+}

styles/_version.scss

@@ -1,6 +1,6 @@
 /* ==UserStyle==
 @name           UoM Blackboard theme
-@version        20240127.04.00
+@version        20240128.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