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底注 */