Bug 1843821: Make small logo appear earlier in responsive mode

The small Mahara logo now appears at the smallest breakpoint at 480px 

Also fixed the placement of the user profile icon in the header so
that the image sits away from the border and more centre-aligned
within the toggle.

behatnotneeded

Change-Id: I085590cb5734124a91ee50b063448102943387f2

htdocs/theme/raw/sass/components/_toggles.scss

@@ -4,12 +4,12 @@
     .user-icon {
         padding: 0;
         position: absolute;
-        margin: 6px 0 5px 7px;
+        margin: 4px 0 4px 7px;
         z-index: 3;
         left: 90px;
         display: block;
-        width: 26px;
-        height: 26px;
+        width: 27px;
+        height: 27px;
         @include media-breakpoint-up(md) {
             left: 45px;
         }

htdocs/theme/raw/sass/layout/_header.scss

@@ -13,7 +13,7 @@
     }
 
     // CHANGE this value to switch between large and small logo
-    $screen-width-small-logo: 415px;
+    $screen-width-small-logo: 480px;
 
     .logo {
         padding: 6px 15px 6px 0;