Fix logo

intk · Dec 16, 2024 · 058d265 · 058d265
1 parent 84903db
commit 058d265
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 6 deletions.
diff --git a/server/modules/asset/ui/src/index.js b/server/modules/asset/ui/src/index.js
@@ -11,7 +11,7 @@ export default () => {
     const headerDotLottie = new DotLottie({
       autoplay: false,
       loop: true,
-      canvas: document.querySelector('.pdl-header__logo'),
+      canvas: document.querySelector('.pdl-header__logo--desktop'),
       data: headerJsonData,
     })
     headerTitle.addEventListener('mouseenter', () => {

diff --git a/server/modules/asset/ui/src/scss/_layout.scss b/server/modules/asset/ui/src/scss/_layout.scss
@@ -81,8 +81,10 @@ main,
   }
 }
 
-.pdl-header__title {
-  display: none;
+.pdl-header__title--desktop {
+  display: flex;
+  visibility: hidden;
+  position: relative;
   align-items: center;
   margin-left: 25px;
 
@@ -106,12 +108,13 @@ main,
   }
 
   @media (min-width: map-get($breakpoints, 'md')) {
-    display: flex;
+    visibility: visible;
   }
 }
 
 .pdl-header__title--mobile {
   display: block;
+  position: absolute;
   margin-left: 12px;
 
   @media (min-width: map-get($breakpoints, 'md')) {

diff --git a/server/views/layout.html b/server/views/layout.html
@@ -33,8 +33,8 @@
 {% block beforeMain %}
 <div class="pdl-wrapper {%- if data.user %} logged-in {% endif -%}">
   <header class="pdl-header">
-    <a href="/{{ data.locale }}" class="pdl-header__title">
-      <canvas class="pdl-header__logo"></canvas>
+    <a href="/{{ data.locale }}" class="pdl-header__title pdl-header__title--desktop">
+      <canvas class="pdl-header__logo pdl-header__logo--desktop"></canvas>
       <span>Public Domain Library</span>
     </a>
     <a href="/" class="pdl-header__title pdl-header__title--mobile">