fix: overflow-x on mobile

7 files changed, 27 insertions, 22 deletions

diff --git a/assets/sass/_partial/_footer/_social.scss b/assets/sass/_partial/_footer/_social.scss
index b763345..be330b1 100644
--- a/assets/sass/_partial/_footer/_social.scss
+++ b/assets/sass/_partial/_footer/_social.scss
@@ -2,12 +2,13 @@
 // Social
 // =============================
 
-// donot use social-links keyword,Otherwise it will be intercepted by Adblock. 
+// donot use social-links keyword,Otherwise it will be intercepted by Adblock.
 .icon-links {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
+  padding: 0 1em;
 
   .iconfont {
     font-size: $social-icon-font-size;
diff --git a/assets/sass/_partial/_post/_content.scss b/assets/sass/_partial/_post/_content.scss
index c7c7177..fe63847 100644
--- a/assets/sass/_partial/_post/_content.scss
+++ b/assets/sass/_partial/_post/_content.scss
@@ -9,6 +9,7 @@
   @import 'content/code';
   @import 'content/image';
   @import 'content/blockquote';
+  @import 'content/table';
 
   @for $i from 1 through 6 {
     h#{$i} {
@@ -47,25 +48,6 @@
     width: 100%;
   }
 
-  > table {
-      border: none;
-      width: 100%;
-
-    td {
-      background-color: #F0E4E4;
-      border: 3px solid #FFF;
-      padding: 5px 15px;
-    }
-
-    th {
-      text-align: left;
-      background-color: #A65B5B;
-      color: #FFF;
-      border: 3px solid #FFF;
-      padding: 5px 15px;
-    }
-  }
-
   .post-summary {
     margin-bottom: 1em;
   }
@@ -107,7 +89,7 @@
     padding-left: 1.5rem;
   }
 
-  .MJXc-display {
+  .MJXc-display, .katex-display {
     overflow-x: auto;
     overflow-y: hidden;
   }
diff --git a/assets/sass/_partial/_post/_copyright.scss b/assets/sass/_partial/_post/_copyright.scss
index de85c01..86d4036 100644
--- a/assets/sass/_partial/_post/_copyright.scss
+++ b/assets/sass/_partial/_post/_copyright.scss
@@ -4,7 +4,6 @@
   border: 1px solid #e1e1e1;
   border-left: solid;
   margin-top: 3em;
-  width: 100%;
 
   .copyright-item {
     margin: 5px 0;
diff --git a/assets/sass/_partial/_post/_footnote.scss b/assets/sass/_partial/_post/_footnote.scss
index 26808d7..a54d1bc 100644
--- a/assets/sass/_partial/_post/_footnote.scss
+++ b/assets/sass/_partial/_post/_footnote.scss
@@ -37,6 +37,7 @@
   bottom: 100%;
   border-radius: 0.5em;
   border: 1px solid rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
   background: #f6f6f6;
   opacity: 0;
   visibility: hidden;
diff --git a/assets/sass/_partial/_post/_header.scss b/assets/sass/_partial/_post/_header.scss
index 2d3ccf3..dfff945 100644
--- a/assets/sass/_partial/_post/_header.scss
+++ b/assets/sass/_partial/_post/_header.scss
@@ -33,6 +33,7 @@
     margin-top: 1em;
     display: flex;
     align-items: center;
+    flex-flow: wrap;
 
     .post-meta-author {
       a {
diff --git a/assets/sass/_partial/_post/content/_code.scss b/assets/sass/_partial/_post/content/_code.scss
index 797624c..8796e45 100644
--- a/assets/sass/_partial/_post/content/_code.scss
+++ b/assets/sass/_partial/_post/content/_code.scss
@@ -11,6 +11,7 @@ code {
 }
 
 code, pre {
+  overflow-x: auto;
   font-size: $code-font-size;
   font-family: $code-font-family;
 }
diff --git a/assets/sass/_partial/_post/content/_table.scss b/assets/sass/_partial/_post/content/_table.scss
new file mode 100644
index 0000000..fd0debb
--- /dev/null
+++ b/assets/sass/_partial/_post/content/_table.scss
@@ -0,0 +1,20 @@
+table {
+  display: block;
+  border: none;
+  width: 100%;
+  overflow-x: auto;
+
+  td {
+    background-color: #f0e4e4;
+    border: 3px solid #fff;
+    padding: 5px 15px;
+  }
+
+  th {
+    text-align: left;
+    background-color: #a65b5b;
+    color: #fff;
+    border: 3px solid #fff;
+    padding: 5px 15px;
+  }
+}