Adjust masthead size

galaxyproject · Apr 7, 2024 · d3da428 · d3da428
1 parent 636aed1
commit d3da428
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
diff --git a/client/src/components/Masthead/Masthead.vue b/client/src/components/Masthead/Masthead.vue
@@ -103,7 +103,7 @@ onMounted(() => {
         <BNavbarNav>
             <BNavbarBrand
                 v-b-tooltip.hover
-                class="ml-2 mr-2"
+                class="ml-2 mr-2 p-0"
                 title="Home"
                 aria-label="homepage"
                 :href="withPrefix(logoUrl)">
@@ -177,12 +177,12 @@ onMounted(() => {
                     color: var(--masthead-text-hover);
                 }
                 &.nav-icon {
-                    font-size: 1.3em;
+                    font-size: 1em;
                     .nav-note {
                         position: absolute;
-                        left: 1.9rem;
-                        top: 1.9rem;
-                        font-size: 0.6rem;
+                        left: 1.4rem;
+                        top: 1.4rem;
+                        font-size: 0.4rem;
                         font-weight: bold;
                     }
                 }
@@ -194,19 +194,20 @@ onMounted(() => {
     }
     .navbar-brand {
         cursor: pointer;
+        line-height: $masthead-height;
         img {
             filter: $text-shadow;
             display: inline;
             border: none;
-            height: 2.3rem;
+            height: 2rem;
         }
     }
     .navbar-text {
         filter: $text-shadow;
         font-weight: bold;
         font-family: Verdana, sans-serif;
         font-size: 1rem;
-        line-height: 2rem;
+        line-height: $masthead-height;
         color: var(--masthead-text-color);
     }
 }

diff --git a/client/src/style/scss/theme/blue.scss b/client/src/style/scss/theme/blue.scss
@@ -110,7 +110,7 @@ $input-color-placeholder: $text-muted;
 $body-bg: $white;
 
 // Masthead
-$masthead-height: 3rem;
+$masthead-height: 2.5rem;
 
 // Side panels
 $panel-bg-color: $brand-light;