release: improve slide countdown default scss

Author: peterpeterparker

docs/docs/slides/app-slide-countdown/app-slide-countdown.md

@@ -96,14 +96,15 @@ The following theming options will affect this component if set on its host or p
 | --slide-padding-bottom | 16px | Padding bottom of the all slide |
 | --slide-padding-start | 32px | Padding left of the all slide |
 | --slide-countdown-container-padding-bottom | 64px | The bottom padding of the displayed time container |
-| --slide-countdown-digits-width | 16em | The width of two displayed digit (Example: 16:00:00, 16em is the width of a digits 00 or 16) including spacing |
-| --slide-countdown-digits-width  | 6em | The width of the (two) digits |
-| --slide-countdown-digits-height |  | The height of the (two) digits |
+| --slide-countdown-digits-max-width  | 36em | The max width of the container containing all digits |
+| --slide-countdown-digits-minmax-width  | 12em | The grid minmax value of one of the three columns of digits |
+| --slide-countdown-digits-width  | 4em | The width of one of the (two) digits |
+| --slide-countdown-digits-height | 4m | The height of the (two) digits |
 | --slide-countdown-digits-background |  | The background color of the (two) digits |
 | --slide-countdown-digits-border-radius |  | The border-radius of the (two) digits |
 | --slide-countdown-digits-box-shadow | 0 3px 4px 0 rgba(0, 0, 0, .2), inset 2px 4px 0 0 rgba(255, 255, 255, .08) | The box-shadow of the (two) digits |
 | --slide-countdown-digit-margin-right | 0.625em | The space between two digits |
-| --slide-countdown-digits-font-size | 5em | The border-radius of the (two) digits |
+| --slide-countdown-digits-font-size | 3em | The border-radius of the (two) digits |
 | --slide-countdown-digits-font-weight |  | The font-weight of the (two) digits |
 | --slide-countdown-digits-color |  | The color of the (two) digits |
 

docs/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "deckdeckgo-docs",
-  "version": "1.0.0-alpha.23",
+  "version": "1.0.0-alpha.23-1",
   "description": "The Progressive Web App alternative for simple presentations",
   "license": "MIT",
   "files": [

docs/package.json

@@ -183,18 +183,23 @@ export class AppSlideCountdown {
 <td>The bottom padding of the displayed time container</td>
 </tr>
 <tr>
-<td>--slide-countdown-digits-width</td>
-<td>16em</td>
-<td>The width of two displayed digit (Example: 16:00:00, 16em is the width of a digits 00 or 16) including spacing</td>
+<td>--slide-countdown-digits-max-width</td>
+<td>36em</td>
+<td>The max width of the container containing all digits</td>
+</tr>
+<tr>
+<td>--slide-countdown-digits-minmax-width</td>
+<td>12em</td>
+<td>The grid minmax value of one of the three columns of digits</td>
 </tr>
 <tr>
 <td>--slide-countdown-digits-width</td>
-<td>6em</td>
-<td>The width of the (two) digits</td>
+<td>4em</td>
+<td>The width of one of the (two) digits</td>
 </tr>
 <tr>
 <td>--slide-countdown-digits-height</td>
-<td></td>
+<td>4m</td>
 <td>The height of the (two) digits</td>
 </tr>
 <tr>
@@ -219,7 +224,7 @@ export class AppSlideCountdown {
 </tr>
 <tr>
 <td>--slide-countdown-digits-font-size</td>
-<td>5em</td>
+<td>3em</td>
 <td>The border-radius of the (two) digits</td>
 </tr>
 <tr>

docs/src/app/pages/docs/slides/app-slide-countdown/app-slide-countdown.tsx

@@ -1,6 +1,6 @@
 {
   "name": "@deckdeckgo/core",
-  "version": "1.0.0-beta.45",
+  "version": "1.0.0-beta.45-1",
   "description": "Add a presentation to your web application using HTML and Web Components",
   "module": "dist/index.mjs",
   "main": "dist/index.js",

webcomponents/core/package-lock.json

@@ -14,10 +14,10 @@ div.deckgo-countdown-container {
   padding-bottom: var(--slide-countdown-container-padding-bottom, 64px);
 
   width: inherit;
-  max-width: calc(3 * var(--slide-countdown-digits-width, 16em));
+  max-width: var(--slide-countdown-digits-max-width, 36em);
 
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(var(--slide-countdown-digits-width, 16em), 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(var(--slide-countdown-digits-minmax-width, 12em), 1fr));
 
   div.time-container {
     display: flex;
@@ -30,18 +30,23 @@ div.deckgo-countdown-container {
       text-align: center;
 
       div.figure {
-        width: var(--slide-countdown-digits-width, 6em);
-        height: var(--slide-countdown-digits-height);
+        width: var(--slide-countdown-digits-width, 4em);
+        height: var(--slide-countdown-digits-height, 4em);
         background: var(--slide-countdown-digits-background, #fff);
         border-radius: var(--slide-countdown-digits-border-radius, 0.5em);
         box-shadow: var(--slide-countdown-digits-box-shadow, 0 3px 4px 0 rgba(0, 0, 0, .2), inset 2px 4px 0 0 rgba(255, 255, 255, .08));
 
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+
         &:first-of-type {
           margin-right: var(--slide-countdown-digit-margin-right, 0.625em);
         }
 
         > span {
-          font-size: var(--slide-countdown-digits-font-size, 5em);
+          font-size: var(--slide-countdown-digits-font-size, 3em);
           font-weight: var(--slide-countdown-digits-font-weight);
           color: var(--slide-countdown-digits-color);
         }