fix: Long link overflow and set the min-width for table items

liuyib · Jan 24, 2020 · 0ef6fe0 · 0ef6fe0
1 parent 3e8874b
commit 0ef6fe0
Show file tree

Hide file tree

Showing 9 changed files with 33 additions and 14 deletions.
diff --git a/source/css/_common/components/plugins/table.styl b/source/css/_common/components/plugins/table.styl
@@ -1,13 +1,18 @@
 .table-plugin {
-  & tbody tr {
+  tr {
     transition: background-color .2s ease;
 
-    &:nth-of-type(odd) {
+    &:nth-of-type(even) {
       background-color: var(--color-gray-150);
     }
 
     &:hover {
       background-color: var(--color-gray-200);
     }
   }
+
+  th,
+  td {
+    min-width: 5rem;
+  }
 }
diff --git a/source/css/_common/components/post/post.styl b/source/css/_common/components/post/post.styl
@@ -13,7 +13,7 @@
       &__a {
         position: relative;
         color: var(--color-gray-800);
-        word-wrap();
+        break-word();
 
         &::before {
           content: '';

diff --git a/source/css/_common/components/sidebar/index.styl b/source/css/_common/components/sidebar/index.styl
@@ -53,7 +53,7 @@ if (hexo-config('sidebar.enable')) {
       max-height: 70vh;
 
       if (hexo-config('toc.wrap')) {
-        word-wrap();
+        break-word();
       } else {
         white-space: nowrap;
       }

diff --git a/source/css/_common/components/widgets/copyright.styl b/source/css/_common/components/widgets/copyright.styl
@@ -15,12 +15,12 @@
   &-notice {
     &-name {
       font-weight: $font-weight-bold;
-      word-wrap();
+      break-word();
     }
 
     &-value {
       color: var(--color-gray-800);
-      word-wrap();
+      break-all();
     }
   }
 }
diff --git a/source/css/_common/components/widgets/external-link.styl b/source/css/_common/components/widgets/external-link.styl
@@ -1,7 +1,13 @@
-.external-link i {
-  margin: 0 .1em 0 .3em;
-  font-size: .8em;
-  color: convert(hexo-config('external_link.icon.color') || '#aaa');
+.external-link {
+  i {
+    margin: 0 .1em 0 .3em;
+    font-size: .8em;
+    color: convert(hexo-config('external_link.icon.color') || '#aaa');
+  }
+
+  a {
+    break-all();
+  }
 }
 
 .footer-inner {

diff --git a/source/css/_common/components/widgets/pagination.styl b/source/css/_common/components/widgets/pagination.styl
@@ -69,7 +69,7 @@
 
       &__a {
         color: $pagination-arrow-color;
-        word-wrap();
+        break-word();
         transition: color .2s ease;
 
         &:hover {

diff --git a/source/css/_common/outline/macro.styl b/source/css/_common/outline/macro.styl
@@ -1,4 +1,5 @@
 .container {
+  break-word();
   display: flex;
   overflow: hidden; /* !!! */
   position: relative;

diff --git a/source/css/_common/scaffolding/base.styl b/source/css/_common/scaffolding/base.styl
@@ -130,11 +130,11 @@ blockquote {
 }
 
 code {
+  break-word();
   border-radius: 3px;
   padding: 1px 5px;
   font-family: $font-family-code;
   font-size: .95em;
-  word-wrap: break-word;
   color: var(--color-gray-700);
   background-color: var(--color-gray-200);
 }

diff --git a/source/css/_mixins/index.styl b/source/css/_mixins/index.styl
@@ -10,9 +10,16 @@ clearfix() {
   }
 }
 
-word-wrap() {
+break-word() {
+  white-space: normal;
   word-wrap: break-word;
-  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
+break-all() {
+  white-space: normal;
+  word-wrap: normal;
+  word-break: break-all;
 }
 
 layout-card() {