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

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);
+    }
 }

layouts/shortcodes/bilibili.html

@@ -12,13 +12,12 @@
     <p>当前视频av或BV号：{{ $vid }}，视频分P：{{ $videopage }}</p>
 {{ end }}
 
-<div style="position: relative; width: 100%; height: 0; padding-bottom: 56.25%;">
+<div class="video-wrapper">
     <iframe src="//player.bilibili.com/player.html?{{ $basicQuery | safeURL }}&{{ $videoQuery | safeURL }}"
             scrolling="no"
             frameborder="no"
             framespacing="0"
             allowfullscreen="true"
-            style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"
     >
     </iframe>
 </div>

layouts/shortcodes/tencent.html

@@ -1,10 +1,10 @@
 {{ $vid := .Get 0 }}
-<div style="position: relative; width: 100%; height: 0; padding-bottom: 56.25%;">
+<div class="video-wrapper">
     <iframe src="http://v.qq.com/txp/iframe/player.html?vid={{ $vid }}&auto=0" 
             scrolling="no" 
             frameborder="no"
             framespacing="0" 
-            allowfullscreen="true" 
-            style="position: absolute; width: 100%; height: 100%;">
+            allowfullscreen="true"
+    >
     </iframe>
 </div>

layouts/shortcodes/youtube.html

@@ -2,8 +2,12 @@
 {{- if not $pc.Disable -}}
 {{- $ytHost := cond $pc.PrivacyEnhanced  "www.youtube-nocookie.com" "www.youtube.com" -}}
 {{- $id := .Get "id" | default (.Get 0) -}}
-{{- $class := .Get "class" | default (.Get 1) }}
-<div {{ with $class }}class="{{ . }}"{{ else }}style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"{{ end }}>
-  <iframe loading="lazy" src="https://{{ $ytHost }}/embed/{{ $id }}{{ with .Get "autoplay" }}{{ if eq . "true" }}?autoplay=1{{ end }}{{ end }}" {{ if not $class }}style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" {{ end }}allowfullscreen title="YouTube Video"></iframe>
+<div class="video-wrapper">
+    <iframe loading="lazy" 
+            src="https://{{ $ytHost }}/embed/{{ $id }}{{ with .Get "autoplay" }}{{ if eq . "true" }}?autoplay=1{{ end }}{{ end }}" 
+            allowfullscreen 
+            title="YouTube Video"
+    >
+    </iframe>
 </div>
 {{ end -}}