feat: prevent layout changes to logo on load

Calvin-LL · Aug 22, 2024 · 35c7db8 · 35c7db8
1 parent 39e11a4
commit 35c7db8
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/src/components/layout/TopBar/TopBar.astro b/src/components/layout/TopBar/TopBar.astro
@@ -65,9 +65,16 @@ import FAQButton from "./FAQButton.vue";
         display: flex;
         justify-content: center;
         align-items: center;
+        gap: 8px;
 
-        & > .animated-logo-container {
+        @media (max-width: 740px) {
+          gap: 4px;
+        }
+
+        & > .animated-logo-container,
+        & > .animated-logo-container > :global(*) {
           width: 90px;
+          aspect-ratio: 1052 / 1304;
 
           @media (max-width: 740px) {
             width: 70px;

diff --git a/src/components/shared/AnimatedLogo.vue b/src/components/shared/AnimatedLogo.vue
@@ -17,3 +17,9 @@ defineProps<{
     "
   />
 </template>
+
+<style lang="scss" scoped>
+object {
+  display: block;
+}
+</style>