Fix picture frame stretching and text alignment

kubgus · Sep 9, 2024 · 515380b · 515380b
1 parent 87ea86e
commit 515380b
Showing 1 changed file with 11 additions and 5 deletions.
diff --git a/src/components/picture-frame.astro b/src/components/picture-frame.astro
@@ -48,23 +48,26 @@ const { data } = Astro.props;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
+        text-align: center;
+        width: clamp(15rem, 50vw, 20rem);
+        height: max(15rem, 25vh);
+
+        padding: 0.5rem;
 
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         gap: 1rem;
 
-        padding: 2rem 5rem;
-
         background: var(--background-dark);
         color: inherit;
 
         border: 2px solid var(--secondary-background-dark);
         border-radius: 12px;
     }
 
-    .popover:popover-open > img {
+    .popover img {
         width: 90px !important;
         height: 90px !important;
 
@@ -73,10 +76,13 @@ const { data } = Astro.props;
         background: var(--secondary-background-dark);
         border-radius: 12px;
 
-        animation: fadeIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     }
 
-    @keyframes fadeIn {
+    .popover:popover-open img {
+        animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    }
+
+    @keyframes popIn {
         from {
             scale: 0.5;
         }