Update 2 files

- /assets/css/style.scss
- /_layouts/post.html

_layouts/post.html

@@ -80,17 +80,15 @@ layout: default
 {% if page.tags %}
 <small style="display: block">tags: {% for tag in page.tags %}<a href="/search.html?keyword={{ tag | url_encode }}"><em>{{ tag }}</em></a>{% unless forloop.last %} - {% endunless %}{% endfor %} <span style="float: right;"><a href="{% if site.github %}{{ site.github.repository_url }}{% else %}https://gitlab.com/mayx/mayx.gitlab.io{% endif %}/tree/master/{{ page.path }}">查看原始文件</a></span></small>
 {% endif %}
-<br />
-<br />
 <!--[if !IE]> -->
-<p id="suggest-container"></p>
+<h4 style="border-bottom: 1px solid #e5e5e5;margin: 2em 0 5px;">推荐文章</h4>
+<p id="suggest-container">Loading...</p>
 <script>
-var suggest = $("#suggest-container")[0];
-suggest.innerHTML = "Loading...";
+var suggest = $("#suggest-container");
 $.get(BlogAPI + "/suggest?id={{ page.url }}&update=" + lastUpdated.valueOf(), function (data) {
     if (data.length) {
         getSearchJSON(function (search) {
-            suggest.innerHTML = '<b>推荐文章</b><hr style="margin: 0 0 5px"/>';
+            suggest.empty()
             const searchMap = new Map(search.map(item => [item.url, item]));
             const merged = data.map(suggestObj => {
                 const searchObj = searchMap.get(suggestObj.id);
@@ -98,12 +96,12 @@ $.get(BlogAPI + "/suggest?id={{ page.url }}&update=" + lastUpdated.valueOf(), fu
             });
             merged.forEach(element => {
                 if (element) {
-                    suggest.innerHTML += "<a href=" + element.url + ">" + element.title + "</a> - " + element.date + "<br />";
+                    suggest.append("<a href=" + element.url + ">" + element.title + "</a> - " + element.date + "<br />");
                 }
             });
         });
     } else {
-        suggest.innerHTML = "暂无推荐文章……";
+        suggest.html("暂无推荐文章……");
     }
 });
 </script>

assets/css/style.scss

@@ -34,31 +34,38 @@ a:hover {
 
 .post-content h1 {
     text-indent: -8px;
+    margin:20px 0 10px;
     border-bottom: 1px solid #e5e5e5;
 }
 
 .post-content h2 {
     text-indent: -6px;
+    margin:20px 0 10px;
     border-bottom: 1px solid #e5e5e5;
 }
 
 .post-content h3 {
+    margin:20px 0 10px;
     text-indent: -5px;
 }
 
 .post-content h4 {
+    margin:20px 0 10px;
     text-indent: -4px;
 }
 
 .post-content h5 {
+    margin:20px 0 10px;
     text-indent: -3px;
 }
 
 .post-content h6 {
+    margin:20px 0 10px;
     text-indent: -2px;
 }
 
 .post-content p {
+    margin:20px 0 10px;
     text-indent: 2em;
     margin-bottom: 5px;
 }
@@ -93,7 +100,7 @@ div.highlight {
 }
 
 div.highlight:hover button {
-    opacity: 1
+    opacity: 1;
 }
 
 div.highlight button {
@@ -102,13 +109,13 @@ div.highlight button {
     top: 0.5em;
     right: 1em;
     height: 2em;
-    transition: all 0.2s ease-out
+    transition: all 0.2s ease-out;
 }
 
 div.highlight button:active,
 div.highlight button:focus,
 div.highlight button:hover {
-    opacity: 1
+    opacity: 1;
 }
 
 .footnotes {