Abstract side paddings

shower · Mar 28, 2019 · fd85f5d · fd85f5d
1 parent 2cb0fee
commit fd85f5d
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 7 deletions.
diff --git a/styles/shower/shower.css b/styles/shower/shower.css
@@ -12,6 +12,7 @@
     --slide-height: calc(
         var(--slide-width) / var(--slide-ratio)
     );
+    --slide-side: 100px;
 
     --color-blue: #4b86c2;
     --color-blue-lighter: #6799cb;

diff --git a/styles/slide/content/code.css b/styles/slide/content/code.css
@@ -11,9 +11,13 @@
 
 .slide pre code {
     display: block;
-    margin-left: -100px;
-    padding: 0 0 0 100px;
-    width: calc(100% + 100px + 100px);
+    margin-left: calc(
+        var(--slide-side) * -1
+    );
+    padding: 0 0 0 var(--slide-side);
+    width: calc(
+        100% + var(--slide-side) * 2
+    );
     border-radius: 0;
     background-color: transparent;
     line-height: 2;

diff --git a/styles/slide/content/footer.css b/styles/slide/content/footer.css
@@ -6,7 +6,7 @@
     bottom: 0;
     left: 0;
     z-index: 1;
-    padding: 50px 100px 25px;
+    padding: 50px var(--slide-side) 25px;
     background-color: var(--color-yellow);
     transition: transform 0.3s linear;
 }

diff --git a/styles/slide/content/table.css b/styles/slide/content/table.css
@@ -1,10 +1,10 @@
 /* Table */
 
 .slide table {
-    margin-left: -100px;
+    margin-left: calc(var(--slide-side) * -1);
     margin-bottom: 1em;
     width: calc(
-        100% + 100px + 100px
+        100% + var(--slide-side) * 2
     );
     border-collapse: collapse;
     border-spacing: 0;

diff --git a/styles/slide/slide.css b/styles/slide/slide.css
@@ -35,7 +35,7 @@
     z-index: 0;
     overflow: hidden;
     box-sizing: border-box;
-    padding: 75px 100px 0;
+    padding: 75px var(--slide-side) 0;
     width: var(--slide-width);
     height: var(--slide-height);
     background-color: white;