fix(style): auto width problem caused by too long tags or site t… (#168)

assets/css/_core/_media.scss

@@ -11,12 +11,6 @@
 }
 
 @media only screen and (max-width: 960px) {
-  #header-desktop {
-    .header-wrapper {
-      padding: 0 1rem;
-    }
-  }
-
   .page {
     max-width: 80%;
 

assets/css/_partial/_header.scss

@@ -10,6 +10,9 @@ header {
   .header-title {
     font-size: 1.5rem;
     font-weight: bold;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
   }
 
   .menu .menu-item {
@@ -47,11 +50,18 @@ header {
   .header-wrapper {
     width: auto;
     text-align: center;
-    padding: 0 3rem;
+    padding: 0 3%;
     display: flex;
     justify-content: space-between;
 
+    .header-title {
+      max-width: 30%;
+    }
+
     .menu {
+      overflow: hidden;
+      white-space: nowrap;
+
       .menu-item {
         margin: 0 .5rem;
 
@@ -93,6 +103,10 @@ header {
       padding-left: 1rem;
       box-sizing: border-box;
 
+      .header-title {
+        max-width: 80%;
+      }
+
       .menu-toggle {
         cursor: pointer;
         line-height: 4rem;

assets/css/_partial/_single/_footer.scss

@@ -77,6 +77,14 @@
     font-size: 0.9rem;
   }
 
+  .post-tags {
+    max-width: 65%;
+
+    * {
+      display: inline;
+    }
+  }
+
   .post-nav {
     &::before,
     &::after {

layouts/partials/single/footer.html

@@ -42,7 +42,7 @@
     </div>
 
     <div class="post-info-more">
-        <section>
+        <section class="post-tags">
             {{- with .Params.tags -}}
                 <i class="fas fa-tags fa-fw"></i>&nbsp;
                 {{- range $index, $value := . -}}