fix(link): fix long words and URLs style bug

assets/css/_core/_base.scss

@@ -30,6 +30,7 @@ body {
   line-height: 1.5rem;
   background-color: $global-background-color;
   color: $global-font-color;
+  overflow-wrap: break-word;
 
   &::before {
     content: "";
@@ -59,6 +60,7 @@ body {
 a {
   color: $global-link-color;
   text-decoration: none;
+  word-break: break-all;
   transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
 
   &:hover {

assets/css/_page/_index.scss

@@ -1,17 +1,17 @@
-@import "_home";
-@import "_404";
-
 .page {
   position: relative;
   width: 100%;
   max-width: 980px;
   margin: 0 auto;
   padding-top: 6rem;
-
-  @import "_post";
-  @import "_posts";
 }
 
+@import "_home";
+@import "_404";
+
+@import "_post";
+@import "_posts";
+
 .archive {
   .post-title {
     text-align: right;

assets/css/_page/_post.scss

@@ -1,376 +1,377 @@
 /** Post **/
-.post-title {
+.post {
-  margin: 0 !important;
+  .post-title {
-  font-size: 1.8rem;
+    margin: 0;
-  line-height: 3rem;
+    font-size: 1.8rem;
-}
+    line-height: 3rem;
-
-.post-meta {
-  font-size: .88rem;
-  color: $global-font-secondary-color;
-
-  span {
-    display: inline-block;
   }
 
-  .dark-theme & {
+  .post-meta {
-    color: $global-font-secondary-color-dark;
+    font-size: .88rem;
-  }
-
-  a {
-    color: $post-link-color;
-
-    .dark-theme & {
-      color: $post-link-color-dark;
-    }
-
-    &:hover {
-      color: $post-link-hover-color;
-
-      .dark-theme & {
-        color: $post-link-hover-color-dark;
-      }
-    }
-  }
-
-  .author {
-    font-size: 1.05rem;
-  }
-}
-
-.post-featured-image {
-  padding-top: .6rem;
-
-  img {
-    display: block;
-    max-width: 100%;
-    height: auto;
-    margin: 0 auto;
-    overflow: hidden;
-  }
-}
-
-@import "../_partial/_post/toc";
-
-.post-content {
-  .post-dummy-target:target {
-    display: inline-block;
-    position: relative;
-    top: -5.6rem;
-    visibility: hidden;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-weight: bold;
-
-    .dark-theme & {
-      font-weight: bolder;
-    }
-  }
-
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    padding-top: .8rem;
-    padding-bottom: .3rem;
-  }
-
-  h2::before {
-    content: "#";
-    margin-right: .3125rem;
-    color: $post-link-color;
-
-    .dark-theme & {
-      color: $post-link-color-dark;
-    }
-  }
-
-  h3::before,
-  h4::before,
-  h5::before,
-  h6::before {
-    content: "|";
-    margin-right: .3125rem;
-    color: $post-link-color;
-
-    .dark-theme & {
-      color: $post-link-color-dark;
-    }
-  }
-
-  p {
-    font-size: 1rem;
-    margin: .5rem 0;
-  }
-
-  a {
-    color: $post-link-color;
-
-    .dark-theme & {
-      color: $post-link-color-dark;
-    }
-  }
-
-  a:hover {
-    color: $post-link-hover-color;
-
-    .dark-theme &:hover {
-      color: $post-link-hover-color-dark;
-      font-weight: bold;
-    }
-  }
-
-  ul {
-    padding-left: 2rem;
-    list-style-type: disc;
-  }
-
-  ruby {
-    background: $code-background-color;
-
-    rt {
-      color: $global-font-secondary-color;
-    }
-
-    .dark-theme & {
-      background: $code-background-color-dark;
-
-      rt {
-        color: $global-font-secondary-color-dark;
-      }
-    }
-  }
-
-  .table-wrapper {
-    overflow-x: auto;
-
-    &::-webkit-scrollbar {
-      background-color: $table-background-color;
-
-      .dark-theme & {
-        background-color: $table-background-color-dark;
-      }
-    }
-
-    > table {
-      width: 100%;
-      max-width: 100%;
-      margin: .625rem 0;
-      border-spacing: 0;
-      background: $table-background-color;
-
-      .dark-theme & {
-        background: $table-background-color-dark;
-      }
-
-      thead {
-        background: $table-thead-color;
-
-        .dark-theme & {
-          background-color: $table-thead-color-dark;
-        }
-      }
-
-      th, td {
-        padding: .3rem 1rem;
-        border: 1px double $global-border-color;
-
-        .dark-theme & {
-          border: 1px double $global-border-color-dark;
-        }
-      }
-    }
-  }
-
-  figure {
-    text-align: center;
-  }
-
-  .image-caption:not(:empty) {
-    min-width: 20%;
-    max-width: 80%;
-    display: inline-block;
-    padding: .625rem;
-    margin: 0 auto;
-    border-bottom: 1px solid #d9d9d9;
-    font-size: .875rem;
-    color: #969696;
-    line-height: 1.7;
-  }
-
-  img {
-    display: block;
-    max-width: 100%;
-    height: auto;
-    margin: 0 auto;
-    overflow: hidden;
-  }
-
-  blockquote {
-    font-size: 1rem;
-    display: block;
-    border-width: 1px 0;
-    border-style: solid;
-    border-color: $global-border-color;
-    padding: 1.5em 1.2em 0.5em 1.2em;
-    margin: 0 0 2em 0;
-    position: relative;
-
-    &::before {
-      content: '\201C';
-      position: absolute;
-      top: 0em;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      width: 3rem;
-      height: 2rem;
-      font: 6em/1.08em 'PT Sans', sans-serif;
-      color: $post-link-color;
-      text-align: center;
-
-      .dark-theme & {
-        color: $post-link-color-dark;
-      }
-    }
-
-    &::after {
-      content: '#blockquote' attr(cite);
-      display: block;
-      text-align: right;
-      font-size: 0.875em;
-      color: $post-link-color;
-
-      .dark-theme & {
-        color: $post-link-color-dark;
-      }
-    }
-
-    .dark-theme & {
-      border-color: $global-border-color-dark;
-    }
-  }
-
-  .footnotes {
     color: $global-font-secondary-color;
 
+    span {
+      display: inline-block;
+    }
+
     .dark-theme & {
       color: $global-font-secondary-color-dark;
     }
-  }
 
-  @import "../_partial/_post/code";
+    a {
-  @import "../_partial/_post/admonition";
+      color: $post-link-color;
 
-  .mermaid {
+      .dark-theme & {
-    width: 100%;
+        color: $post-link-color-dark;
-    margin: 3% auto;
+      }
-    text-align: center;
 
-    @import "../_mermaid/neutral/index";
+      &:hover {
+        color: $post-link-hover-color;
 
-    .dark-theme & {
+        .dark-theme & {
-      @import "../_mermaid/dark/index";
+          color: $post-link-hover-color-dark;
+        }
+      }
+    }
+
+    .author {
+      font-size: 1.05rem;
     }
   }
 
-  @import "../_aplayer/dark.scss";
+  .post-featured-image {
+    padding-top: .6rem;
 
-  .echarts {
+    img {
-    width: 100%;
+      display: block;
-    height: 30rem;
+      max-width: 100%;
-    margin: 3% auto;
+      height: auto;
-    text-align: center;
+      margin: 0 auto;
-  }
+      overflow: hidden;
-
-  .bilibili {
-    position: relative;
-    width: 100%;
-    height: 0;
-    padding-bottom: 75%;
-    margin: 3% auto;
-    text-align: center;
-
-    iframe {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      left: 0;
-      top: 0;
     }
   }
 
-  hr {
+  @import "../_partial/_post/toc";
-    margin: 1rem 0;
-    position: relative;
-    border-top: 1px dashed $global-border-color;
-    border-bottom: none;
 
-    .dark-theme & {
+  .post-content {
-      border-top: 1px dashed $global-border-color-dark;
+    .post-dummy-target:target {
+      display: inline-block;
+      position: relative;
+      top: -5.6rem;
+      visibility: hidden;
     }
-  }
 
-  kbd {
+    h1,
-    display: inline-block;
+    h2,
-    padding: .25rem;
+    h3,
-    background-color: $global-background-color;
+    h4,
-    border: 1px solid $global-border-color;
+    h5,
-    border-bottom-color: $global-border-color;
+    h6 {
-    border-radius: 3px;
-    -webkit-box-shadow: inset 0 -1px 0 $global-border-color;
-    box-shadow: inset 0 -1px 0 $global-border-color;
-    font-size: .8rem;
-    font-family: $code-font-family;
-    color: $code-color;
-
-    .dark-theme & {
-      background-color: $global-background-color-dark;
-      border: 1px solid $global-border-color-dark;
-      border-bottom-color: $global-border-color-dark;
-      -webkit-box-shadow: inset 0 -1px 0 $global-border-color-dark;
-      box-shadow: inset 0 -1px 0 $global-border-color-dark;
-      color: $code-color-dark;
-    }
-  }
-
-  .typeit {
-    .code {
-      padding: .375rem;
-      font-size: .875rem;
-      font-family: $code-font-family;
       font-weight: bold;
-      word-break: break-all;
+
+      .dark-theme & {
+        font-weight: bolder;
+      }
+    }
+
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      padding-top: .8rem;
+      padding-bottom: .3rem;
+    }
+
+    h2::before {
+      content: "#";
+      margin-right: .3125rem;
+      color: $post-link-color;
+
+      .dark-theme & {
+        color: $post-link-color-dark;
+      }
+    }
+
+    h3::before,
+    h4::before,
+    h5::before,
+    h6::before {
+      content: "|";
+      margin-right: .3125rem;
+      color: $post-link-color;
+
+      .dark-theme & {
+        color: $post-link-color-dark;
+      }
+    }
+
+    p {
+      font-size: 1rem;
+      margin: .5rem 0;
+    }
+
+    a {
+      color: $post-link-color;
+
+      .dark-theme & {
+        color: $post-link-color-dark;
+      }
+    }
+
+    a:hover {
+      color: $post-link-hover-color;
+
+      .dark-theme &:hover {
+        color: $post-link-hover-color-dark;
+        font-weight: bold;
+      }
+    }
+
+    ul {
+      padding-left: 2rem;
+      list-style-type: disc;
+    }
+
+    ruby {
+      background: $code-background-color;
+
+      rt {
+        color: $global-font-secondary-color;
+      }
+
+      .dark-theme & {
+        background: $code-background-color-dark;
+
+        rt {
+          color: $global-font-secondary-color-dark;
+        }
+      }
+    }
+
+    .table-wrapper {
+      overflow-x: auto;
+
+      &::-webkit-scrollbar {
+        background-color: $table-background-color;
+
+        .dark-theme & {
+          background-color: $table-background-color-dark;
+        }
+      }
+
+      > table {
+        width: 100%;
+        max-width: 100%;
+        margin: .625rem 0;
+        border-spacing: 0;
+        background: $table-background-color;
+
+        .dark-theme & {
+          background: $table-background-color-dark;
+        }
+
+        thead {
+          background: $table-thead-color;
+
+          .dark-theme & {
+            background-color: $table-thead-color-dark;
+          }
+        }
+
+        th, td {
+          padding: .3rem 1rem;
+          border: 1px double $global-border-color;
+
+          .dark-theme & {
+            border: 1px double $global-border-color-dark;
+          }
+        }
+      }
+    }
+
+    figure {
+      text-align: center;
+    }
+
+    .image-caption:not(:empty) {
+      min-width: 20%;
+      max-width: 80%;
+      display: inline-block;
+      padding: .625rem;
+      margin: 0 auto;
+      border-bottom: 1px solid #d9d9d9;
+      font-size: .875rem;
+      color: #969696;
+      line-height: 1.7;
+    }
+
+    img {
+      display: block;
+      max-width: 100%;
+      height: auto;
+      margin: 0 auto;
+      overflow: hidden;
+    }
+
+    blockquote {
+      font-size: 1rem;
+      display: block;
+      border-width: 1px 0;
+      border-style: solid;
+      border-color: $global-border-color;
+      padding: 1.5em 1.2em 0.5em 1.2em;
+      margin: 0 0 2em 0;
+      position: relative;
+
+      &::before {
+        content: '\201C';
+        position: absolute;
+        top: 0em;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 3rem;
+        height: 2rem;
+        font: 6em/1.08em 'PT Sans', sans-serif;
+        color: $post-link-color;
+        text-align: center;
+
+        .dark-theme & {
+          color: $post-link-color-dark;
+        }
+      }
+
+      &::after {
+        content: '#blockquote' attr(cite);
+        display: block;
+        text-align: right;
+        font-size: 0.875em;
+        color: $post-link-color;
+
+        .dark-theme & {
+          color: $post-link-color-dark;
+        }
+      }
+
+      .dark-theme & {
+        border-color: $global-border-color-dark;
+      }
+    }
+
+    .footnotes {
+      color: $global-font-secondary-color;
+
+      .dark-theme & {
+        color: $global-font-secondary-color-dark;
+      }
+    }
+
+    @import "../_partial/_post/code";
+    @import "../_partial/_post/admonition";
+
+    .mermaid {
+      width: 100%;
+      margin: 3% auto;
+      text-align: center;
+
+      @import "../_mermaid/neutral/index";
+
+      .dark-theme & {
+        @import "../_mermaid/dark/index";
+      }
+    }
+
+    @import "../_aplayer/dark.scss";
+
+    .echarts {
+      width: 100%;
+      height: 30rem;
+      margin: 3% auto;
+      text-align: center;
+    }
+
+    .bilibili {
+      position: relative;
+      width: 100%;
+      height: 0;
+      padding-bottom: 75%;
+      margin: 3% auto;
+      text-align: center;
+
+      iframe {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+      }
+    }
+
+    hr {
+      margin: 1rem 0;
+      position: relative;
+      border-top: 1px dashed $global-border-color;
+      border-bottom: none;
+
+      .dark-theme & {
+        border-top: 1px dashed $global-border-color-dark;
+      }
+    }
+
+    kbd {
+      display: inline-block;
+      padding: .25rem;
+      background-color: $global-background-color;
+      border: 1px solid $global-border-color;
+      border-bottom-color: $global-border-color;
+      border-radius: 3px;
+      -webkit-box-shadow: inset 0 -1px 0 $global-border-color;
+      box-shadow: inset 0 -1px 0 $global-border-color;
+      font-size: .8rem;
+      font-family: $code-font-family;
+      color: $code-color;
+
+      .dark-theme & {
+        background-color: $global-background-color-dark;
+        border: 1px solid $global-border-color-dark;
+        border-bottom-color: $global-border-color-dark;
+        -webkit-box-shadow: inset 0 -1px 0 $global-border-color-dark;
+        box-shadow: inset 0 -1px 0 $global-border-color-dark;
+        color: $code-color-dark;
+      }
+    }
+
+    .typeit {
+      .code {
+        padding: .375rem;
+        font-size: .875rem;
+        font-family: $code-font-family;
+        font-weight: bold;
+        word-break: break-all;
+      }
+    }
+
+    .align-left {
+      text-align: left;
+    }
+
+    .align-center {
+      text-align: center;
+    }
+
+    .align-right {
+      text-align: right;
+    }
+
+    .float-left {
+      float: left;
+    }
+
+    .float-right {
+      float: right;
     }
   }
 
-  .align-left {
+  @import "../_partial/_post/footer";
-    text-align: left;
+  @import "../_partial/_post/comment";
-  }
-
-  .align-center {
-    text-align: center;
-  }
-
-  .align-right {
-    text-align: right;
-  }
-
-  .float-left {
-    float: left;
-  }
-
-  .float-right {
-    float: right;
-  }
 }
-
-@import "../_partial/_post/footer";
-
-@import "../_partial/_post/comment";

assets/css/_page/_posts.scss

@@ -9,7 +9,7 @@
   }
 }
 
-.post {
+.summary {
   padding-top: 1rem;
   padding-bottom: .8rem;
   color: $global-font-color;
@@ -36,7 +36,7 @@
     }
   }
 
-  .post-list-title {
+  .post-title {
     font-size: 1.6rem;
   }
 
@@ -60,33 +60,43 @@
   }
 
   .post-content {
+    display: -moz-box;
     display: -webkit-box;
+    -moz-box-orient: vertical;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
     margin-top: .3rem;
     width: 100%;
-    max-height: 10rem;
+    overflow: hidden;
     text-overflow: ellipsis;
-    -webkit-box-orient: vertical;
+    overflow-wrap: break-word;
-    -webkit-line-clamp: 2;
+  }
 
-    h2,
+  h1,
-    h3,
+  h2,
-    h4,
+  h3,
-    h5,
+  h4,
-    h6,
+  h5,
-    p {
+  h6,
-      font-size: 1rem;
+  p {
-      margin: 0;
+    font-size: 1rem;
-      padding: .2rem 0;
+    display: inline;
-      overflow: hidden;
-      overflow-wrap: break-word;
-      text-overflow: ellipsis;
-    }
 
-    a {
+    &::after {
-      word-break: break-all;
+      content: "\A";
+      white-space: pre;
     }
   }
 
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 2;
+  }
+
   .post-footer {
     margin-top: .5rem;
     display: flex;
@@ -130,4 +140,4 @@
       }
     }
   }
-}
+}

assets/css/_page/_tags.scss

@@ -5,7 +5,7 @@
     display: inline-block;
     position: relative;
     margin: 5px 10px;
-    word-wrap: break-word;
+    overflow-wrap: break-word;
     transition-duration: .3s;
     transition-property: transform;
     transition-timing-function: ease-out;

assets/css/_partial/_post/_toc.scss

@@ -5,7 +5,7 @@
   margin-left: 1000px;
   padding: 0 .8rem;
   border-left: 1px solid $global-border-color;
-  word-wrap: break-word;
+  overflow-wrap: break-word;
   box-sizing: border-box;
   top: 12rem;
 

layouts/_default/summary.html

@@ -1,4 +1,4 @@
-<article class="post" itemscope itemtype="http://schema.org/Article">
+<article class="post summary" itemscope itemtype="http://schema.org/Article">
     {{- /* Featured image */ -}}
     {{- with .Params.featured_image -}}
         <div class="post-featured-image-preview">
@@ -8,7 +8,7 @@
     {{- end -}}
 
     {{- /* Title */ -}}
-    <h1 class="post-title post-list-title" itemprop="name headline">
+    <h1 class="post-title" itemprop="name headline">
         <a href="{{ .Permalink }}">{{ .Title }}</a>
     </h1>
 

layouts/index.html

@@ -1,7 +1,7 @@
 {{- define "content" -}}
     {{- /* Home mode [post] */ -}}
     {{- if eq .Site.Params.home_mode "post" -}}
-        <div class="page">
+        <div class="page home">
             {{- /* Profile */ -}}
             {{- partial "home/profile.html" . -}}
 

layouts/posts/single.html

@@ -1,7 +1,7 @@
 {{- define "title" }}{{ .Title }} | {{ .Site.Title }}{{ end -}}
 
 {{- define "content" -}}
-    <article class="page">
+    <article class="page post">
         {{- /* Title */ -}}
         <h1 class="post-title animated flipInX">{{ .Title }}</h1>