feat: landing split centered on small devices

CHANGELOG.md

@@ -11,6 +11,7 @@
 ### Web Components: New Templates
 
 - slide-playground: v1.0.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/slides/playground/CHANGELOG.md))
+- slide-split: v1.2.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/slides/split/CHANGELOG.md))
 
 ### Web Components
 

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

@@ -160,5 +160,7 @@ The following theming options will affect this component if set on its host or p
 | --slide-split-text-align           | inherit | Modify for example to center if you want to align the text in the middle                                         |
 | --slide-split-title-display        | none    | The `slot` title is per default hidden even if you provide it. If you wish to displays it, modify this attribute |
 | --zIndex                           | 1       | The z-index of the slide                                                                                         |
+| --slide-split-display-start        | flex    | Start side display property                                                                                      |
+| --slide-split-display-end          | flex    | End side display property                                                                                        |
 
 [deckdeckgo]: https://deckdeckgo.com

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

@@ -321,6 +321,16 @@ export class AppSlideContent {
                 <td>1</td>
                 <td>The z-index of the slide</td>
               </tr>
+              <tr>
+                <td>--slide-split-display-start</td>
+                <td>flex</td>
+                <td>Start side display property</td>
+              </tr>
+              <tr>
+                <td>--slide-split-display-end</td>
+                <td>flex</td>
+                <td>End side display property</td>
+              </tr>
             </tbody>
           </table>
         </main>

studio/package.json

@@ -36,7 +36,7 @@
     "@deckdeckgo/slide-playground": "^1.0.1",
     "@deckdeckgo/slide-poll": "^1.0.1",
     "@deckdeckgo/slide-qrcode": "^1.0.3",
-    "@deckdeckgo/slide-split": "^1.1.4",
+    "@deckdeckgo/slide-split": "^1.2.0",
     "@deckdeckgo/slide-title": "^1.0.1",
     "@deckdeckgo/slide-utils": "^1.1.0",
     "@deckdeckgo/slide-youtube": "^1.0.1",

studio/src/app/components/landing/app-landing-deck/app-landing-deck.scss

@@ -50,16 +50,18 @@ app-landing-deck {
         width: 100%;
       }
 
-      @media (max-width: 576px) {
+      @media (max-width: 768px) {
         div[slot="start"] {
           h2 {
             padding: 0;
           }
         }
 
         &:first-of-type {
-          div[slot="end"] {
-            display: none;
+          --slide-split-display-end: none;
+
+          div[slot="start"] {
+            text-align: center;
           }
         }
       }

webcomponents/slides/split/CHANGELOG.md

@@ -1,6 +1,12 @@
+# 1.2.0 (2020-06-23)
+
+### Style
+
+- split display in `start` and `end`
+
 # 1.1.4 (2020-05-11)
 
-### Feat
+### Features
 
 - update Stencil for Gatsby build
 

webcomponents/slides/split/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deckdeckgo/slide-split",
-  "version": "1.1.4",
+  "version": "1.2.0",
   "description": "The Split template is a simple slide to display the content in two columns on a slide of your presentation",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

webcomponents/slides/split/src/components/slide/deckdeckgo-slide-split.scss

@@ -27,19 +27,20 @@ div.deckgo-slide-split {
       ) / 2
   );
 
-  display: flex;
   align-items: var(--slide-split-align, inherit);
   text-align: var(--slide-split-text-align, inherit);
 
   padding: var(--slide-split-padding-top, 0) var(--slide-split-padding-end, var(--slide-padding-end-default)) var(--slide-split-padding-bottom, 0)
     var(--slide-split-padding-start, var(--slide-padding-start-default));
 
   &.deckgo-slide-split-start {
+    display: var(--slide-split-display-start, flex);
     background: var(--slide-split-background-start);
     color: var(--slide-split-color-start);
   }
 
   &.deckgo-slide-split-end {
+    display: var(--slide-split-display-end, flex);
     background: var(--slide-split-background-end);
     color: var(--slide-split-color-end);
   }