feat: align split template in the middle

Author: peterpeterparker

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

@@ -2,14 +2,36 @@
 
 div.deckgo-slide {
   flex-flow: row wrap;
-  align-items: flex-start;
+
+  padding: 0;
+  width: 100vw;
+}
+
+div.deckgo-slide-split {
+  flex: 1;
+
+  height: 100%;
+
+  display: flex;
+  align-items: var(--slide-split-align, inherit);
+  text-align: var(--slide-split-text-align, inherit);
+
+  padding: var(--slide-padding-top, 16px) var(--slide-padding-end, 32px) var(--slide-padding-bottom, 16px) var(--slide-padding-start, 32px);
+
+  &.deckgo-slide-split-start {
+    background: var(--slide-split-background-start);
+    color: var(--slide-split-color-start);
+  }
+
+  &.deckgo-slide-split-end {
+    background: var(--slide-split-background-end);
+    color: var(--slide-split-color-end);
+  }
 }
 
 ::slotted([slot="title"]) {
   flex: 1 100%;
-}
 
-::slotted([slot="start"]), ::slotted([slot="end"]) {
-  flex: 1 auto;
-  height: 100%;
+  padding: var(--slide-padding-top, 16px) var(--slide-padding-end, 32px) var(--slide-padding-bottom, 16px) var(--slide-padding-start, 32px);
 }
+

src/components/slides/deckdeckgo-slide-split/deckdeckgo-slide-split.tsx

@@ -37,8 +37,8 @@ export class DeckdeckgoSlideSplit implements DeckdeckgoSlide {
   render() {
     return <div class="deckgo-slide">
       <slot name="title"></slot>
-      <slot name="start"></slot>
-      <slot name="end"></slot>
+      <div class="deckgo-slide-split deckgo-slide-split-start"><slot name="start"></slot></div>
+      <div class="deckgo-slide-split deckgo-slide-split-end"><slot name="end"></slot></div>
     </div>;
   }