fix: gif editable elements size and fonts

Author: peterpeterparker

docs/docs/components/app-components-gif/app-components-gif.md

@@ -58,6 +58,12 @@ The following theming options will affect this component if set on its host or p
 | --padding | | The padding of the `header` and `footer` over the gif |
 | --zIndex | 2 | The z-index of the slide |
 | --border-radius | | A radius for the border of the gif container |
+| --min-width | | The minimal width of the slotted elements header and footer |
+| --text-transform | | The text transform of the slotted elements header and footer |
+| --font-size-h2 | | The font size of the slotted elements header |
+| --font-weight-h2 | | The font weight of the slotted elements header |
+| --font-size-h3 | | The font size of the slotted elements footer |
+| --font-weight-h3 | | The font weight of the slotted elements footer |
 
 ## Note
 

docs/src/app/pages/docs/components/app-components-gif/app-components-gif.tsx

@@ -148,6 +148,36 @@ export class AppComponentsGif {
 <td></td>
 <td>A radius for the border of the gif container</td>
 </tr>
+<tr>
+<td>--min-width</td>
+<td></td>
+<td>The minimal width of the slotted elements header and footer</td>
+</tr>
+<tr>
+<td>--text-transform</td>
+<td></td>
+<td>The text transform of the slotted elements header and footer</td>
+</tr>
+<tr>
+<td>--font-size-h2</td>
+<td></td>
+<td>The font size of the slotted elements header</td>
+</tr>
+<tr>
+<td>--font-weight-h2</td>
+<td></td>
+<td>The font weight of the slotted elements header</td>
+</tr>
+<tr>
+<td>--font-size-h3</td>
+<td></td>
+<td>The font size of the slotted elements footer</td>
+</tr>
+<tr>
+<td>--font-weight-h3</td>
+<td></td>
+<td>The font weight of the slotted elements footer</td>
+</tr>
 </tbody></table>
 <h2 id="app-components-gif-note">Note</h2>
 <p>Of course, as other images added to a presentation build with <a href="https://deckdeckgo.com">DeckDeckGo</a>, gifs are lazy loaded too. </p>

studio/src/global/theme/editor/editor-deck-fonts.scss

@@ -1,10 +1,18 @@
 // Synchro with https://github.com/deckgo/deckdeckgo-starter/blob/master/src/css/font.css
 
 deckgo-deck {
-  *:not(b), h3, h4, h5, h6 {
+  *:not(b), h1, h2, h3, h4, h5, h6 {
     font-weight: 300;
   }
 
+  --font-size-h1: 3em;
+  --font-size-h2: 2em;
+  --font-size-h3: 1.4em;
+
+  --font-weight-h1: 300;
+  --font-weight-h2: 300;
+  --font-weight-h3: 300;
+
   a, strong {
     font-weight: 500;
   }

studio/src/global/theme/editor/editor-deck.scss

@@ -13,23 +13,12 @@ deckgo-deck {
     border: 1px solid var(--ion-color-light);
 
     padding: 8px;
-
-    &:focus {
-      outline: 0;
-      box-shadow: 0 0 0 3px rgba(var(--ion-color-primary-rgb), .5);
-    }
-  }
-
-  h1 {
-    min-height: calc(var(--font-size-h1) + 4px);
-  }
-
-  h2 {
-    min-height: calc(var(--font-size-h2) + 4px);
   }
 
-  h3 {
-    min-height: calc(var(--font-size-h3) + 4px);
+  deckgo-slide-gif {
+    --min-width: 75%;
+    --border-radius: 2px;
+    --text-transform: uppercase;
   }
 
   p {

webcomponents/core/src/components/extra/deckdeckgo-gif/deckdeckgo-gif.scss

@@ -18,6 +18,22 @@ div.deckgo-gif {
     background: var(--background);
     color: var(--color);
     padding: var(--padding, 8px);
+
+    min-width: var(--min-width);
+    border-radius: var(--border-radius);
+    text-transform: var(--text-transform);
+
+    overflow: hidden;
+  }
+
+  ::slotted([slot="header"]) {
+    font-size: var(--font-size-h2, inherit);
+    font-weight: var(--font-weight-h2, inherit);
+  }
+
+  ::slotted([slot="footer"]) {
+    font-size: var(--font-size-h3, inherit);
+    font-weight: var(--font-weight-h3, inherit);
   }
 
   ::slotted([slot="header"]) {