feat(#49): more slides' padding on screen larger than 1024px

Author: peterpeterparker

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

@@ -15,7 +15,7 @@ div.deckgo-slide-author {
   align-items: var(--slide-author-align, inherit);
   text-align: var(--slide-author-text-align, inherit);
 
-  padding: var(--slide-author-padding-top, 16px) var(--slide-author-padding-end, 32px) var(--slide-author-padding-bottom, 16px) var(--slide-author-padding-start, 32px);
+  padding: var(--slide-author-padding-top, var(--slide-padding-top-default)) var(--slide-author-padding-end, var(--slide-padding-end-default)) var(--slide-author-padding-bottom, var(--slide-padding-bottom-default)) var(--slide-author-padding-start, var(--slide-padding-start-default));
 
   &.deckgo-slide-author-start {
     background: var(--slide-author-background-start);
@@ -42,7 +42,7 @@ div.deckgo-slide-author {
       grid-template-columns: 50% 50%;
       grid-gap: 10px;
 
-      padding-top: var(--slide-author-social-padding-top, 32px);
+      padding-top: var(--slide-author-social-padding-top, var(--slide-padding-top-default));
     }
   }
 }

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

@@ -9,12 +9,17 @@ div.deckgo-slide {
 div.deckgo-chart-container {
   margin: var(--slide-chart-margin-top, 32px) var(--slide-chart-margin-end, 32px) var(--slide-chart-margin-bottom, 32px) var(--slide-chart-margin-start, 32px);
 
-  width: calc(100vw - var(--slide-chart-margin-end, 32px) - var(--slide-chart-margin-start, 32px));
-  height: calc(100vw - var(--slide-chart-margin-top, 32px) - var(--slide-chart-margin-bottom, 32px));
+  width: calc(100vw - var(--slide-chart-margin-end, 64px) - var(--slide-chart-margin-start, 64px));
+  height: calc(100vw - var(--slide-chart-margin-top, 64px) - var(--slide-chart-margin-bottom, 64px));
 
   display: flex;
   align-items: center;
   justify-content: center;
 
   align-self: center;
+
+  @media screen and (max-width: 1024px) {
+    width: calc(100vw - var(--slide-chart-margin-end, 32px) - var(--slide-chart-margin-start, 32px));
+    height: calc(100vw - var(--slide-chart-margin-top, 32px) - var(--slide-chart-margin-bottom, 32px));
+  }
 }

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

@@ -16,7 +16,7 @@ div.deckgo-slide-split {
   align-items: var(--slide-split-align, inherit);
   text-align: var(--slide-split-text-align, inherit);
 
-  padding: var(--slide-split-padding-top, 16px) var(--slide-split-padding-end, 32px) var(--slide-split-padding-bottom, 16px) var(--slide-split-padding-start, 32px);
+  padding: var(--slide-split-padding-top, var(--slide-padding-top-default)) var(--slide-split-padding-end, var(--slide-padding-end-default)) var(--slide-split-padding-bottom, var(--slide-padding-bottom-default)) var(--slide-split-padding-start, var(--slide-padding-start-default));
 
   &.deckgo-slide-split-start {
     background: var(--slide-split-background-start);
@@ -34,6 +34,6 @@ div.deckgo-slide-split {
 
   display: var(--slide-split-title-display, none);
 
-  padding: var(--slide-split-title-padding-top, 16px) var(--slide-split-title-padding-end, 32px) var(--slide-split-title-padding-bottom, 16px) var(--slide-split-title-padding-start, 32px);
+  padding: var(--slide-split-title-padding-top, var(--slide-padding-top-default)) var(--slide-split-title-padding-end, var(--slide-padding-end-default)) var(--slide-split-title-padding-bottom, var(--slide-padding-bottom-default)) var(--slide-split-title-padding-start, var(--slide-padding-start-default));
 }
 

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

@@ -7,10 +7,15 @@ div.deckgo-slide {
 }
 
 div.deckgo-youtube-container {
-  width: calc(100vw - var(--slide-padding-end, 32px) - var(--slide-padding-start, 32px));
-  height: calc(((100vw - var(--slide-padding-end, 32px) - var(--slide-padding-start, 32px)) * 9) / 16);
+  width: calc(100vw - var(--slide-padding-end, 64px) - var(--slide-padding-start, 64px));
+  height: calc(((100vw - var(--slide-padding-end, 64px) - var(--slide-padding-start, 64px)) * 9) / 16);
 
   display: flex;
   align-items: center;
   justify-content: center;
+
+  @media screen and (max-width: 1024px) {
+    width: calc(100vw - var(--slide-padding-end, 32px) - var(--slide-padding-start, 32px));
+    height: calc(((100vw - var(--slide-padding-end, 32px) - var(--slide-padding-start, 32px)) * 9) / 16);
+  }
 }

src/components/slides/deckdeckgo-slide.scss

@@ -3,16 +3,28 @@
   color: var(--color);
   height: 100%;
   z-index: var(--zIndex, 1);
+
+  --slide-padding-top-default: 64px;
+  --slide-padding-end-default: 64px;
+  --slide-padding-bottom-default: 64px;
+  --slide-padding-start-default: 64px;
+
+  @media screen and (max-width: 1024px) {
+    --slide-padding-top-default: 16px;
+    --slide-padding-end-default: 32px;
+    --slide-padding-bottom-default: 16px;
+    --slide-padding-start-default: 32px;
+  }
 }
 
 div.deckgo-slide {
 
   display: flex;
 
-  padding: var(--slide-padding-top, 16px) var(--slide-padding-end, 32px) var(--slide-padding-bottom, 16px) var(--slide-padding-start, 32px);
+  padding: var(--slide-padding-top, var(--slide-padding-top-default)) var(--slide-padding-end, var(--slide-padding-end-default)) var(--slide-padding-bottom, var(--slide-padding-bottom-default)) var(--slide-padding-start,var(--slide-padding-start-default));
 
-  width: calc(100vw - var(--slide-padding-start, 32px) - var(--slide-padding-end, 32px));
-  height: calc(100% - var(--slide-padding-top, 16px) - var(--slide-padding-bottom, 16px));
+  width: calc(100vw - var(--slide-padding-start, var(--slide-padding-start-default)) - var(--slide-padding-end, var(--slide-padding-end-default)));
+  height: calc(100% - var(--slide-padding-top, var(--slide-padding-top-default)) - var(--slide-padding-bottom, var(--slide-padding-bottom-default)));
 
   // Don't allow text selection
   -webkit-touch-callout: none; /* iOS Safari */
@@ -26,7 +38,7 @@ div.deckgo-slide {
 }
 
 ::slotted(ul), ::slotted(ol) {
-  padding-inline-start: var(--slide-padding-start, 32px);
+  padding-inline-start: var(--slide-padding-start, var(--slide-padding-start-default));
 }
 
 ::slotted([slot="notes"]) {