Merge pull request #9 from ZhaoZuohong/dev

样式调整与功能补全

assets/style-refractored.scss

@@ -15,6 +15,71 @@ body{
     font-size: 16px;
     line-height: 24px;
     color: rgb(33, 37, 41);
+
+    code {
+        font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono", Menlo, Monaco, Consolas, "Microsoft YaHei", monospace;
+    }
+
+    :not(pre) > code {
+        font-size: 14px;
+        background-color: #e3e6e8;
+        padding: 2px 4px;
+        border-radius: 3px;
+    }
+
+    .highlight {
+        padding: 0;
+        width: 100%;
+        font-size: 13px;
+        margin-bottom: 16px;
+        overflow-x: auto;
+
+        pre {
+            margin: 0;
+            padding: 0;
+        }
+    }
+
+    blockquote {
+        position: relative;
+        overflow: hidden;
+        margin: 0 16px 16px 16px;
+        padding: 16px 0 0 16px;
+        color: #525960;
+
+        &::before {
+            content: "";
+            display: block;
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            width: 4px;
+            border-radius: 2px;
+            background: #c8ccd0;
+        }
+
+        mark { // fix color for mark inside blockquote
+            color: inherit;
+        }
+    }
+
+    overflow-wrap: break-word;
+
+    summary {
+        margin-bottom: 4px;
+    }
+
+    details {
+        margin-bottom: 16px;
+    }
+}
+
+a {
+    color: #0059b3;
+    &:visited {
+        color: #430085;
+    }
 }
 
 .page{
@@ -158,7 +223,6 @@ $gray: #919EB1;
     .avatar{
         max-height: 45px;
         float: left;
-        margin-bottom: 10px;
     }
 
     .intro{
@@ -172,11 +236,17 @@ $gray: #919EB1;
             font-size: 24px;
         }
 
+        div:nth-child(2) {
+            word-break: break-all;
+            line-height: 18px;
+        }
+
         .tag{
             font-size: 80%;
             margin-left: 0px;
             margin-right: 10px;
             color: #6c757d!important;
+            white-space: nowrap;
         
             &::before{
                 content:"#";
@@ -184,6 +254,8 @@ $gray: #919EB1;
             }
         }
     }
+
+    margin-bottom: 24px;
 }
 /* END - user name, avatar & tags */
 

layouts/partials/after-content-js.html

@@ -78,6 +78,10 @@ document.addEventListener("scroll", () => {
             }).then((html_string) => {
                 const parser = new DOMParser();
                 const next_page = parser.parseFromString(html_string, "text/html");
+                {{ if .Site.Params.heti }}
+                const heti = new Heti(next_page);
+                heti.autoSpacing();
+                {{ end }}
                 const rows = next_page.querySelectorAll(".moment-row");
                 const container = document.querySelector(".page > .container");
                 rows.forEach((r) => {
@@ -94,3 +98,11 @@ document.addEventListener("scroll", () => {
 })
 </script>
 {{ end }}
+
+
+{{ if .Site.Params.heti }}
+<script>
+const heti = new Heti(document);
+heti.autoSpacing();
+</script>
+{{ end }}

layouts/partials/head.html

@@ -55,6 +55,13 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/pangu/4.0.7/pangu.min.js"></script>
 {{ end }}
 
+
+{{ if .Site.Params.heti }}
+<link rel="stylesheet" href="/style/heti.min.css">
+<script src="/scripts/heti-addon.min.js"></script>
+{{ end }}
+
+
 <!-- website title -->
 <title>{{ .Site.Params.title }}</title>
 

layouts/partials/row.html

@@ -55,7 +55,7 @@
 
                 <div style="padding-left: 5px; padding-right: 5px;">
                     {{/* Main text content */}}
-                    <div class="context">
+                    <div class="context heti">
                         {{ .Content }}
                     </div>
                     
@@ -125,4 +125,4 @@
         </div>
     </div>
 
-</div>
+</div>

layouts/shortcodes/details.html

@@ -0,0 +1,4 @@
+<details>
+  <summary>{{ (.Get 0) | markdownify }}</summary>
+  {{ .Inner | markdownify }}
+</details>