feat(shortcode): add link shortcode (#179)

* feat(shortcode): add link shortcode

* docs: add docs for link shortcode

* docs: fix 'mailto' in link shortcode docs error

assets/css/_mixin/_index.scss

@@ -0,0 +1,2 @@
+@import "_link";
+@import "_summary";

assets/css/_mixin/_link.scss

@@ -0,0 +1,18 @@
+@mixin link($light, $dark) {
+  a {
+    color: if($light, $global-link-color, $single-link-color);
+
+    .dark-theme & {
+      color: if($dark, $global-link-color-dark, $single-link-color-dark);
+    }
+
+    &:active,
+    &:hover {
+      color: if($light, $global-link-hover-color, $single-link-hover-color);
+
+      .dark-theme & {
+        color: if($dark, $global-link-hover-color-dark, $single-link-hover-color-dark);
+      }
+    }
+  }
+}

assets/css/_mixin/_summary.scss

@@ -0,0 +1,118 @@
+@mixin summary {
+  .summary {
+    padding-top: 1rem;
+    padding-bottom: .8rem;
+    color: $global-font-color;
+    border-bottom: 1px dashed $global-border-color;
+
+    .dark-theme & {
+      color: $global-font-color-dark;
+      border-bottom: 1px dashed $global-border-color-dark;
+    }
+
+    .featured-image-preview {
+      width: 100%;
+      padding: 30% 0 0;
+      position: relative;
+      margin: 0.6rem auto;
+
+      img {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        object-fit: cover;
+      }
+    }
+
+    .single-title {
+      font-size: 1.4rem;
+      line-height: 140%;
+      margin: 0.4rem 0;
+    }
+
+    .content {
+      display: -moz-box;
+      display: -webkit-box;
+      -moz-box-orient: vertical;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 3;
+      margin-top: .3rem;
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      overflow-wrap: break-word;
+      color: $global-font-secondary-color;
+
+      .dark-theme & {
+        color: $global-font-secondary-color-dark;
+      }
+
+      h2,
+      h3,
+      h4,
+      h5,
+      h6,
+      p {
+        font-size: 1rem;
+        display: inline;
+
+        &::after {
+          content: "\A";
+          white-space: pre;
+        }
+      }
+
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        line-height: 2;
+
+        &::before {
+          content: "|";
+          margin-right: .3125rem;
+          color: $global-link-color;
+
+          .dark-theme & {
+            color: $global-link-color-dark;
+          }
+        }
+      }
+
+      h2 {
+        font-size: 1.2rem;
+
+        &::before {
+          content: "#";
+        }
+      }
+
+      @include link(true, true);
+
+      b, strong {
+        .dark-theme & {
+          color: $global-font-secondary-color-dark;
+        }
+      }
+    }
+
+    .post-footer {
+      margin-top: .4rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: .875rem;
+
+      @include link(false, false);
+
+      .post-tags {
+        padding: 0;
+
+        @include link(true, true);
+      }
+    }
+  }
+}