Merge pull request #1914 from yadvirkaur/overlayLogo

Fix: Ensure consistent logo display across Bani Overlay layouts

Author: Gauravjeetsingh

www/obs/index.html

@@ -205,7 +205,7 @@
         }
       }
 
-      document.querySelectorAll('.content-top, .content-bottom').forEach(el => {
+      document.querySelectorAll('.content-top, .content-bars-bottom').forEach(el => {
         // Clear styles added by other overrides
         document.querySelectorAll('span.o-gurbani, span.o-translation').forEach(spanEl => {
           spanEl.style.backgroundColor = 'transparent';
@@ -305,6 +305,9 @@
         <div><span class="gurmukhi o-gurbani"> </span></div>
         <div><span class="o-translation"> </span></div>
       </div>
+      <div class="logo-wrapper" >
+        <img alt="SikhiToTheMax" src="./sikhi-max-logo-white.png" class="sttm-logo-white" />
+      </div>
     </div>
     <div class="other-layouts">
       <div class="content-top">
@@ -321,7 +324,6 @@
           </div>
         </div>
         <div class="logo-wrapper">
-          <img alt="SikhiToTheMax" src="./sikhi-max-logo.png" class="sttm-logo" />
           <img alt="SikhiToTheMax" src="./sikhi-max-logo-white.png" class="sttm-logo-white" />
         </div>
       </div>

www/src/scss/obs/styles.scss

@@ -89,10 +89,6 @@ body {
 }
 
 .layout-top {
-  .content-top {
-    padding-top: 3vh;
-  }
-
   .o-gurbani,
   .o-translation {
     padding: 0.5% 3vw;
@@ -109,16 +105,6 @@ body {
     position: absolute;
   }
 
-  .content-top {
-    .content-bar {
-      padding-top: 8px;
-    }
-  }
-
-  .content-bottom {
-    padding-bottom: 3vh;
-  }
-
   .o-gurbani,
   .o-translation {
     padding: 0.5% 3vw;
@@ -143,7 +129,6 @@ body {
     width: auto;
   }
   .logo-wrapper {
-    border-radius: 2px;
     top: 2vh;
   }
 
@@ -185,14 +170,12 @@ body {
   }
 
   .logo-wrapper {
-    background: transparent;
     display: block;
     height: 100px;
     position: relative;
+    right: 0;
     width: 100%;
-    .sttm-logo {
-      display: none;
-    }
+
     .sttm-logo-white {
       display: block;
       margin: auto;
@@ -244,11 +227,15 @@ body {
   }
 
   .logo-wrapper {
-    border-radius: 0;
     bottom: 0;
     height: 100%;
     position: absolute;
     right: 0;
+
+    .sttm-logo-white {
+      display: block;
+      margin: auto;
+    }
   }
 }
 
@@ -354,23 +341,16 @@ body {
 }
 
 .logo-wrapper {
-  align-items: center;
-  background: #fff;
-  border-radius: 5px;
   display: inline-flex;
-  justify-content: center;
+  filter: drop-shadow(1px 1px rgba(0, 0, 0, 1));
   padding: 2vh 2vw;
   position: fixed;
   right: 2vh;
 
-  .sttm-logo,
   .sttm-logo-white {
+    display: block;
     width: 12vw;
   }
-
-  .sttm-logo-white {
-    display: none;
-  }
 }
 
 .logo-off {