fix: 🐛 figure safari fix

packages/common/elements/src/lib/figure/figure.ts

@@ -1,9 +1,8 @@
-import { css, BuiltInElement, html, prop } from 'dist/packages/common/web/src'
+import { BuiltInElement, html, prop } from 'dist/packages/common/web/src'
 
 @BuiltInElement('devpr-figure', 'figure')
 export class Figure extends HTMLElement {
   static observedAttributes = ['src', 'caption']
-  css = css``
 
   @prop()
   src = ''
@@ -12,15 +11,18 @@ export class Figure extends HTMLElement {
   caption = ''
 
   connectedCallback() {
+    const src = this.src || this.getAttribute('src')
+    const caption = this.caption || this.getAttribute('caption')
+
     this.innerHTML = html`
-      <img slot="image" src="${this.src}" alt="${this.caption}" />
-      <figcaption slot="caption">${this.caption}</figcaption>
+      <img slot="image" src="${src}" alt="${caption}" />
+      <figcaption slot="caption">${caption}</figcaption>
     `
 
     const image = this.querySelector('img')
     image.onload = () => {
-      // image.setAttribute('width', image.width + 'px')
-      // image.setAttribute('height', image.height + 'px')
+      image.setAttribute('width', image.width + 'px')
+      image.setAttribute('height', image.height + 'px')
     }
   }
 }

packages/website/src/app/app.element.scss

@@ -47,20 +47,26 @@ devpr-header {
     position: absolute;
     margin: 0 auto;
     bottom: 20px;
-    left: 20px;
+    right: 20px;
 
     z-index: 1;
 
     > div {
       z-index: 20;
     }
   }
+  @include tablet {
+    &#mx > article {
+      position: initial;
+    }
+  }
   @include mobile {
     &#mx > article {
-      left: 0;
+      position: initial;
     }
   }
-  #home h2 {
+
+  #mx h2 {
     opacity: 0.2;
     color: $devpr-on-surface-high;
   }
@@ -73,28 +79,42 @@ devpr-header {
     text-decoration: $devpr-header-2-text-decoration;
     line-height: #{$devpr-header-2-line-height};
   }
-  figure figcaption {
-    opacity: 0.3;
-    text-align: center;
+
+  figure {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    img {
+      width: 100%;
+      flex: 1;
+    }
+
+    figcaption {
+      opacity: 0.3;
+      text-align: center;
+    }
   }
+
   h2,
   h3 {
     margin: 0;
     text-align: center;
     font-weight: normal;
   }
+
   &__header {
-    position: sticky;
     top: 0;
     height: 80px;
-    // padding: 1em;
     display: flex;
+    position: sticky;
     justify-content: center;
     align-items: flex-end;
     padding: 0 5px 10px;
     color: $devpr-on-surface-medium;
     background: $devpr-surface;
   }
+
   &__content {
     flex: 1;
     display: flex;
@@ -132,6 +152,9 @@ devpr-header {
     }
 
     @include mobile {
+      h2 {
+        font-size: 32px;
+      }
       img {
         max-width: 240px;
         max-height: 160px;

packages/website/src/app/app.element.ts

@@ -25,6 +25,7 @@ export class AppElement extends HTMLElement {
             <div>
               <devpr-heading> DevPR </devpr-heading>
             </div>
+
             <h2>Member Experience</h2>
 
             <devpr-social></devpr-social>

packages/website/src/app/shared/member/member.ts

@@ -27,8 +27,8 @@ export class Member extends HTMLElement {
     devpr-member #lib,
     devpr-member #lang {
       content: ' ';
-      width: 100%;
-      height: 100%;
+      width: 60%;
+      height: 80%;
       position: absolute;
       padding-top: 20%;
       background-size: 80%;
@@ -95,7 +95,7 @@ export class Member extends HTMLElement {
     <div id="c-plus-plus"></div>
   `
 
-  static LIMIT = 120 // pixel movement
+  static LIMIT = 60 // pixel movement
 
   swapPositions: (pos: Record<'x' | 'y', number>) => void