fix

decentral-ninja · Nov 2, 2023 · cc57f5b · cc57f5b
1 parent aa5d75d
commit cc57f5b
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 9 deletions.
diff --git a/src/css/variables.css b/src/css/variables.css
@@ -44,4 +44,10 @@
   --line-height: 1.5;
   --outline-color: var(--color-hover);
   --p-text-align: center;
+  --spacing: 0.75em;
 }
+@media only screen and (max-width: _max-width_) {
+  :root {
+    --spacing: 0.5em;
+  }
+}
diff --git a/src/es/components/atoms/logo/Logo.js b/src/es/components/atoms/logo/Logo.js
@@ -41,15 +41,15 @@ export default class Logo extends Shadow(WebWorker()) {
         }))
       }
     }
-    this.animationiterationListener = event => {
+    this.animationiterationListener = (event, dispatch = true) => {
       // workaround for nice css transition between the two logos
       if (this.hasAttribute('favicon')) {
         // TODO: smoothen the transition ether reverse animation to initial position or change opacity before removing the animation attribute
         this.removeAttribute('animation')
       } else {
         this.setAttribute('animation', 'true')
       }
-      this.dispatchEvent(new CustomEvent(this.getAttribute('animationiteration-event-name') || this.tagName.toLowerCase() + '-animationiteration', {
+      if (dispatch) this.dispatchEvent(new CustomEvent(this.getAttribute('animationiteration-event-name') || this.tagName.toLowerCase() + '-animationiteration', {
         detail: {
           open: () => this.setAttribute('favicon', 'true'),
           close: () => this.removeAttribute('favicon'),
@@ -60,7 +60,7 @@ export default class Logo extends Shadow(WebWorker()) {
         composed: true
       }))
     }
-    this.animationiterationListener()
+    this.animationiterationListener(null, false)
   }
 
   connectedCallback () {
@@ -81,7 +81,7 @@ export default class Logo extends Shadow(WebWorker()) {
   }
 
   attributeChangedCallback (name, oldValue, newValue) {
-    if (!this.hasAttribute('favicon')) this.animationiterationListener()
+    this.animationiterationListener(null, false)
     this.setAttribute('aria-expanded', this.hasAttribute('favicon') ? 'false' : 'true')
   }
 

diff --git a/src/es/components/organisms/body/Body.js b/src/es/components/organisms/body/Body.js
@@ -57,7 +57,7 @@ export default class Body extends Shadow() {
     this.css = /* css */`
       :host {
         --show: none;
-        --margin: 0.5em;
+        --margin: var(--spacing);
         --border-radius: 0.5em;
         grid-area: body;
         background-color: var(--color-rgba-50);

diff --git a/src/es/components/organisms/footer/Footer.js b/src/es/components/organisms/footer/Footer.js
@@ -57,7 +57,7 @@ export default class Footer extends Shadow() {
     this.css = /* css */`
       :host {
         grid-area: footer;
-        padding: 0.5em;
+        padding: var(--spacing);
         font-size: 0.75em;
       }
     `

diff --git a/src/es/components/organisms/header/Header.js b/src/es/components/organisms/header/Header.js
@@ -80,7 +80,7 @@ export default class Header extends Shadow() {
     this.css = /* css */`
       :host {
         --show: show 1.5s ease-in;
-        --padding: 0.5em;
+        --padding: var(--spacing);
         --height: 3em;
         grid-area: header;
         padding: var(--padding);

diff --git a/src/es/components/pages/index.js b/src/es/components/pages/index.js
@@ -73,7 +73,7 @@ export default class Index extends Mutation() {
                              "body"
                              "footer";
         grid-template-columns: 100%;
-        grid-template-rows: minmax(var(--header-min-height , 0.5em), auto) 1fr minmax(var(--footer-min-height, 0.5em), auto);
+        grid-template-rows: minmax(var(--header-min-height , var(--spacing)), auto) 1fr minmax(var(--footer-min-height, var(--spacing)), auto);
         min-height: var(--min-height, 100dvh);
         max-height: 100vh;
       }
@@ -88,7 +88,7 @@ export default class Index extends Mutation() {
       }
       @media only screen and (max-width: _max-width_) {
         :host > section {
-          grid-template-rows: minmax(var(--header-height-mobile, var(--header-height, 0.5em)), auto) 1fr minmax(var(--footer-min-height-mobile, var(--footer-min-height, 0.5em)), auto);
+          grid-template-rows: minmax(var(--header-height-mobile, var(--header-height, var(--spacing))), auto) 1fr minmax(var(--footer-min-height-mobile, var(--footer-min-height, var(--spacing))), auto);
         }
       }
     `