From d1756ce60d34349478590b266375bd5d9e51fe6b Mon Sep 17 00:00:00 2001
From: Eltrac <hi@guhub.cn>
Date: Wed, 30 Apr 2025 23:42:11 +0800
Subject: feat: responsive table

- allow horizontal scroll when not having enough space on X axis
- maximun width for each cell


Former-commit-id: 2db7b66b734b78cb273f6560e364d946038b85fc
---
 assets/css/components/_markdown.scss       | 31 ++++++++++++++++++++----------
 layouts/_default/_markup/render-table.html | 24 +++++++++++++++++++++++
 2 files changed, 45 insertions(+), 10 deletions(-)
 create mode 100644 layouts/_default/_markup/render-table.html

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/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>
-- 
cgit v1.2.3


From 50ca1c0c5affbb0869b3f707d8863cd8cad73e3c Mon Sep 17 00:00:00 2001
From: Eltrac <hi@guhub.cn>
Date: Wed, 30 Apr 2025 23:48:30 +0800
Subject: feat: more responsive header image

Former-commit-id: 6f82ac0aee71747353d690c378178857925b99c0
---
 assets/css/components/_post.scss | 31 +++++++++++++++++++++++++------
 1 file changed, 25 insertions(+), 6 deletions(-)

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%;
         }
     }
 }
-- 
cgit v1.2.3