fix(code): inline code overflow-wrap (#280)

pogor-dev · Apr 28, 2020 · 072b962 · 072b962
1 parent 16a4e94
commit 072b962
Show file tree

Hide file tree

Showing 11 changed files with 17 additions and 11 deletions.
diff --git a/assets/css/_core/_base.scss b/assets/css/_core/_base.scss
@@ -32,7 +32,7 @@ html {
 body {
   background-color: $global-background-color;
   color: $global-font-color;
-  overflow-wrap: break-word;
+  @include overflow-wrap(break-word);
   scrollbar-color: auto;
 
   &[theme=dark] {

diff --git a/assets/css/_mixin/_compatibility.scss b/assets/css/_mixin/_compatibility.scss
@@ -85,3 +85,8 @@
   -moz-appearance: $value;
   -webkit-appearance: $value;
 }
+
+@mixin overflow-wrap($value) {
+  word-wrap: $value;
+  overflow-wrap: $value;
+}
diff --git a/assets/css/_mixin/_summary.scss b/assets/css/_mixin/_summary.scss
@@ -44,7 +44,7 @@
       width: 100%;
       overflow: hidden;
       text-overflow: ellipsis;
-      overflow-wrap: break-word;
+      @include overflow-wrap(break-word);
       color: $global-font-secondary-color;
 
       [theme=dark] & {

diff --git a/assets/css/_page/_single.scss b/assets/css/_page/_single.scss
@@ -128,8 +128,7 @@
     @include link(false, false);
 
     a {
-      word-break: break-all;
-      word-break: break-word;
+      @include overflow-wrap(break-word);
 
       [theme=dark] & b, [theme=dark] & strong {
         color: $single-link-color-dark;

diff --git a/assets/css/_partial/_archive/_tags.scss b/assets/css/_partial/_archive/_tags.scss
@@ -7,7 +7,7 @@
     display: inline-block;
     position: relative;
     margin: 5px 10px;
-    overflow-wrap: break-word;
+    @include overflow-wrap(break-word);
     @include transition(all ease-out 0.3s);
 
     &:active,

diff --git a/assets/css/_partial/_header.scss b/assets/css/_partial/_header.scss
@@ -384,7 +384,7 @@ header {
           -webkit-line-clamp: 2;
           overflow: hidden;
           text-overflow: ellipsis;
-          overflow-wrap: break-word;
+          @include overflow-wrap(break-word);
           color: $global-font-secondary-color;
 
           [theme=dark] & {

diff --git a/assets/css/_partial/_single/_code.scss b/assets/css/_partial/_single/_code.scss
@@ -1,9 +1,11 @@
 code {
   display:inline-block;
+  max-width: 100%;
+  padding: 0 .4rem;
+  @include overflow-wrap(break-word);
   font-size: $code-font-size;
   font-family: $code-font-family;
   color: $code-color;
-  padding: 0 .4rem;
 
   [theme=dark] & {
     color: $code-color-dark;

diff --git a/assets/css/_partial/_single/_toc.scss b/assets/css/_partial/_single/_toc.scss
@@ -53,7 +53,7 @@
   width: $MAX_LENGTH;
   padding: 0 .8rem;
   border-left: 4px solid $global-border-color;
-  overflow-wrap: break-word;
+  @include overflow-wrap(break-word);
   box-sizing: border-box;
   top: if($header-normal-mode-desktop, 5rem, 10rem);
   left: $MAX_LENGTH;

diff --git a/resources/_gen/assets/scss/css/style.template.scss_788c4a23da05f3aa3e03b28055a2e5f9.content b/resources/_gen/assets/scss/css/style.template.scss_788c4a23da05f3aa3e03b28055a2e5f9.content
diff --git a/resources/_gen/assets/scss/css/style.template.scss_84a735b886b24531b6e80c5fb2060510.content b/resources/_gen/assets/scss/css/style.template.scss_84a735b886b24531b6e80c5fb2060510.content
diff --git a/resources/_gen/assets/scss/css/style.template.scss_d40178ffcb058d725849178b0a7a43cc.content b/resources/_gen/assets/scss/css/style.template.scss_d40178ffcb058d725849178b0a7a43cc.content