From b7e6c0cd397382f396d905c8880922c938f4464c Mon Sep 17 00:00:00 2001
From: FarseaSH <yy_shao@outlook.com>
Date: Wed, 1 Sep 2021 23:49:09 +0800
Subject: [PATCH] add some styles

---
 layouts/partials/head.html |  6 ++++--
 layouts/partials/row.html  | 34 +++++++++++++++---------------
 static/css/style.css       | 43 ++++++++++++++++++++++++++++++++++----
 3 files changed, 60 insertions(+), 23 deletions(-)

diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 29b65ce..4a0b838 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -1,9 +1,11 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> -->
+
+<!-- todo change jquery -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
-<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> -->
 
 <!-- 点赞 -->
 <link href="https://cdn.bootcss.com/font-awesome/5.8.2/css/all.min.css" rel="stylesheet">
diff --git a/layouts/partials/row.html b/layouts/partials/row.html
index 54e40db..78af075 100644
--- a/layouts/partials/row.html
+++ b/layouts/partials/row.html
@@ -4,9 +4,9 @@
         <!-- 时间 -->
         <div class="pure-u-1 pure-u-sm-1-3">
             <div class="time">
-                <h2>{{ .Date.Format "Jan 2"}}{{ if in (slice 1 21 31) .Date.Day}}st{{ else if in (slice 2 22)
-                    .Date.Day}}nd{{ else if in (slice 3 23) .Date.Day}}rd{{ else }}th{{ end }}</h2>
-                <h4>{{ .Date.Format "2006"}}</h4>
+                <div class="month-day">{{ .Date.Format "Jan 2"}}{{ if in (slice 1 21 31) .Date.Day}}st{{ else if in (slice 2 22)
+                    .Date.Day}}nd{{ else if in (slice 3 23) .Date.Day}}rd{{ else }}th{{ end }}</div>
+                <div class="year">{{ .Date.Format "2006"}}</div>
             </div>
         </div>
 
@@ -22,18 +22,20 @@
 
                 <!-- 抬头 -->
                 <!-- 头像前面margin2px -->
-                <div style="margin-top: 2px;">
-                    {{ with .Params.avatar }}
-                    <img src='{{ . }}' class="avatar">
-                    {{ else }}
-                    <!-- fixme check whether the default avatar path is url or not-->
-                    <img src='{{ $.Site.BaseURL }}/{{ .Site.Params.avatar }}' class="avatar">
-                    {{ end }}
+                <div style="margin-top: 2px;" class="user-info">
+                    <div class="avatar-block">
+                        {{ with .Params.avatar }}
+                        <img src='{{ . }}' class="avatar">
+                        {{ else }}
+                        <!-- fixme check whether the default avatar path is url or not-->
+                        <img src='{{ $.Site.BaseURL }}/{{ .Site.Params.avatar }}' class="avatar">
+                        {{ end }}
+                    </div>
                     <div class="intro">
                         {{ with .Params.name }}
-                        <h4 class="text-primary name">{{ . }}</h4>
+                        <div class="name">{{ . }}</div>
                         {{ else }}
-                        <h4 class="text-primary name">{{ .Site.Params.name }}</h4>
+                        <div class="name">{{ .Site.Params.name }}</div>
                         {{ end }}
                         <div>
                             {{ $tags_filtered := slice}}
@@ -88,11 +90,9 @@
                     {{ end }}
 
                     <!-- 附注信息 -->
-                    <div>
-                        <p class="text-black-50 note">
-                            {{ .Date.Format "15:04" }} {{ .Params.note }}
-                        </p>
-                        <i class="far fa-heart" style="float: right; margin-right: 5px; color:#808080"></i>
+                    <div class="moment-note">
+                        <p class="note">{{ .Date.Format "15:04" }} {{ .Params.note }}</p>
+                        <div style="padding-right: 12px;"><i class="far fa-heart"></i></div>
                     </div>
                 </div>
                 <!-- 分隔线 -->
diff --git a/static/css/style.css b/static/css/style.css
index 5776418..c7e6f04 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -2,6 +2,13 @@
 body{
     background-color: #f5f5f5;
 }
+
+.jumbotron{
+    padding-top: 64px;
+    padding-bottom: 64px;
+    margin-bottom: 32px;
+}
+
 .page{
     max-width: 1150px;
     margin: auto;
@@ -19,9 +26,10 @@ body{
     margin: auto;
 }
 
-.moment-content{
+.moment-content {
     position: relative;
 }
+
 /* 时间 */
 .time{
     text-align: right;
@@ -41,6 +49,11 @@ body{
 }
 
 /* 抬头 */
+
+.user-info{
+    display: flex;
+}
+
 .avatar{
     max-height: 45px;
     float: left;
@@ -56,6 +69,7 @@ body{
     color:#186D9C!important;
     margin-bottom: 0;
     line-height: 1.1;
+    font-size: 24px;
 }
 
 .tag::before{
@@ -65,6 +79,7 @@ body{
     font-size: 80%;
     margin-left: 0px;
     margin-right: 10px;
+    color: #6c757d!important;
 }
 
 /* 正文 */
@@ -125,11 +140,31 @@ body{
 }
 
 /* 附注信息 */
-.note{
+.moment-note{
+    display: flex;
+    margin-bottom: 10px;
+    justify-content: space-between;
+}
+
+.moment-note .note{
     font-size: 80%;
     text-indent: 20px;
-    float: left;
-    margin-bottom: 10px;
+    color: rgb(0, 0, 0, 0.5);
+
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+.moment-note{
+    margin-right: 5px; 
+    color:#808080
+}
+
+/* hr */
+hr {
+    border-width: 0;
+    border-top: 1px solid;
+    border-color: rgb(0, 0, 0, 0.1);
 }
 
 /* footer底注 */