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,16 +1,16 @@
-@import "_home";
-@import "_404";
-
 .page {
   position: relative;
   width: 100%;
   max-width: 980px;
   margin: 0 auto;
   padding-top: 6rem;
+}
+
+@import "_home";
+@import "_404";
 
 @import "_post";
 @import "_posts";
-}
 
 .archive {
   .post-title {

assets/css/_page/_post.scss

@@ -1,6 +1,7 @@
 /** Post **/
+.post {
   .post-title {
-  margin: 0 !important;
+    margin: 0;
     font-size: 1.8rem;
     line-height: 3rem;
   }
@@ -372,5 +373,5 @@
   }
 
   @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,14 +60,19 @@
   }
 
   .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;
-    -webkit-line-clamp: 2;
+    overflow-wrap: break-word;
+  }
 
+  h1,
   h2,
   h3,
   h4,
@@ -75,16 +80,21 @@
   h6,
   p {
     font-size: 1rem;
-      margin: 0;
-      padding: .2rem 0;
-      overflow: hidden;
-      overflow-wrap: break-word;
-      text-overflow: ellipsis;
+    display: inline;
+
+    &::after {
+      content: "\A";
+      white-space: pre;
+    }
   }
 
-    a {
-      word-break: break-all;
-    }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 2;
   }
 
   .post-footer {

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>