Merge branch 'master' of https://github.com/BigCoke233/geek-death-project

Former-commit-id: f45282217dcd0aa1899ad3849f0f27ff7a6d9f06

3 files changed, 70 insertions, 16 deletions

diff --git a/assets/css/components/_markdown.scss b/assets/css/components/_markdown.scss
index d1e1c50d..4378d398 100644
--- a/assets/css/components/_markdown.scss
+++ b/assets/css/components/_markdown.scss
@@ -109,17 +109,28 @@ $em-text-color: #889E73;
     background-color: rgba(255, 235, 0, .5)
   }
 
-  table {
-      border-collapse: collapse;
-      border-top: 2px solid var(--border-color);
+  .table-container {
       overflow-x: auto;
-      width: 100%;
-      tr {
-          border-bottom: 1px solid var(--border-color);
-      }
-      td, th {
-          padding: 0.5rem 1rem;
-          line-height: 1.5;
+      -webkit-overflow-scrolling: touch;
+
+      table {
+          border-collapse: collapse;
+          table-layout: fixed;
+          min-width: 100%;
+          width: max-content;
+
+          border-top: 2px solid var(--border-color);
+
+          tr {
+              border-bottom: 1px solid var(--border-color);
+          }
+          td, th {
+              max-width: 200px;
+              padding: 0.5rem 1rem;
+              line-height: 1.5;
+              white-space: normal;
+              word-wrap: break-word;
+          }
       }
   }
 
diff --git a/assets/css/components/_post.scss b/assets/css/components/_post.scss
index 4497a7cc..4c05841a 100644
--- a/assets/css/components/_post.scss
+++ b/assets/css/components/_post.scss
@@ -59,18 +59,37 @@
 
         position: absolute;
         z-index: 5;
-        right: 1rem;
-        top: 1rem;
-        width: 5rem;
+        right: 0.25rem;
+        top: 0.25rem;
+        width: 3rem;
+        padding: 0.5rem;
+
+        @media screen and (min-width: 640px) {
+            right: 0.5rem;
+            top: 0.5rem;
+            width: 4rem;
+            padding: 1rem;
+        }
 
-        .title-image {
-            width: 100%;
+        @media screen and (min-width: 768px) {
+            width: 6rem;
+            left: calc(50vw + var(--page-width) / 2 - 7rem);
+            top: calc(var(--page-margin-y) - 2rem);
         }
 
         @media screen and (min-width: 768px) {
+            width: 6rem;
+            left: calc(50vw + var(--page-width) / 2 - 7rem);
+            top: calc(var(--page-margin-y) - 2rem);
+        }
+
+        @media screen and (min-width: 1200px) {
             width: 8rem;
             left: calc(50vw + var(--page-width) / 2 - 5rem);
-            top: calc(var(--page-margin-y) - 2rem);
+        }
+
+        .title-image {
+            width: 100%;
         }
     }
 }
diff --git a/layouts/_default/_markup/render-table.html b/layouts/_default/_markup/render-table.html
new file mode 100644
index 00000000..75196aeb
--- /dev/null
+++ b/layouts/_default/_markup/render-table.html
@@ -0,0 +1,24 @@
+<div class="table-container">
+  <table>
+    {{- if .THead }}
+    <thead>
+      {{- range .THead }}
+      <tr>
+        {{- range . }}
+        <th{{ with .Alignment }} style="text-align:{{ . }}"{{ end }}>{{ .Text | safeHTML }}</th>
+        {{- end }}
+      </tr>
+      {{- end }}
+    </thead>
+    {{- end }}
+    <tbody>
+      {{- range .TBody }}
+      <tr>
+        {{- range . }}
+        <td{{ with .Alignment }} style="text-align:{{ . }}"{{ end }}>{{ .Text | safeHTML }}</td>
+        {{- end }}
+      </tr>
+      {{- end }}
+    </tbody>
+  </table>
+</div>