refactor(article): add default padding (#166)

* refactor(article): add default padding

closes https://github.com/CaiJimmy/hugo-theme-stack/issues/165

* fix(article): video iframe margin

* fix: remove youtube iframe border

1 files changed, 35 insertions, 14 deletions

diff --git a/assets/scss/partials/layout/article.scss b/assets/scss/partials/layout/article.scss
index 3fd6a46..3dce3e6 100644
--- a/assets/scss/partials/layout/article.scss
+++ b/assets/scss/partials/layout/article.scss
@@ -187,12 +187,11 @@
 .article-content {
     font-family: var(--article-font-family);
     font-size: var(--article-font-size);
+    padding: 0 var(--card-padding);
     line-height: var(--article-line-height);
 
-    & > p,
-    & > div {
+    & > p {
         margin: 1.5em 0;
-        padding: 0 var(--card-padding);
     }
 
     h1,
@@ -201,12 +200,12 @@
     h4,
     h5,
     h6 {
-        padding: 0 calc(var(--card-padding) - var(--heading-border-size));
+        margin-left: calc((var(--card-padding)) * -1);
+        padding-left: calc(var(--card-padding) - var(--heading-border-size));
         border-left: var(--heading-border-size) solid var(--accent-color);
     }
 
     figure {
-        margin: 0 auto;
         text-align: center;
 
         figcaption {
@@ -217,17 +216,12 @@
 
     blockquote {
         position: relative;
-        margin: 10px 0;
+        margin: 1.5em 0;
         border-left: var(--blockquote-border-size) solid var(--card-separator-color);
         padding: 15px calc(var(--card-padding) - var(--blockquote-border-size));
         background-color: var(--blockquote-background-color);
     }
 
-    & > ul,
-    & > ol {
-        margin: 1em var(--card-padding);
-    }
-
     hr {
         width: 100px;
         margin: 40px auto;
@@ -250,7 +244,7 @@
         display: flex;
         flex-direction: row;
         justify-content: center;
-        margin: 20px 0;
+        margin: 1.5em 0;
 
         figure {
             margin: 0;
@@ -280,9 +274,7 @@
     }
 
     table {
-        margin: 0 var(--card-padding);
         width: 100%;
-        max-width: calc(100% - var(--card-padding) * 2);
         border-collapse: collapse;
         border-spacing: 0;
         margin-bottom: 1.5em;
@@ -307,4 +299,33 @@
     .twitter-tweet {
         color: var(--card-text-color-main);
     }
+
+    .video-wrapper {
+        position: relative;
+        width: 100%;
+        height: 0;
+        padding-bottom: 56.25%;
+        overflow: hidden;
+
+        & > iframe {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            left: 0;
+            top: 0;
+            border: 0;
+        }
+    }
+
+    /// Negative margins
+    blockquote,
+    figure,
+    .gallery,
+    pre,
+    .video-wrapper,
+    .s_video_simple {
+        margin-left: calc((var(--card-padding)) * -1);
+        margin-right: calc((var(--card-padding)) * -1);
+        width: calc(100% + var(--card-padding) * 2);
+    }
 }