From 52d788bd27721e927eaffba78f5ef35aff86ed59 Mon Sep 17 00:00:00 2001 From: nodejh Date: Sat, 27 Feb 2021 18:20:39 +0800 Subject: [PATCH] feat: update single page --- layouts/_default/_markup/render-heading.html | 1 + layouts/_default/_markup/render-image.html | 4 + layouts/_default/_markup/render-link.html | 1 + layouts/_default/baseof.html | 2 +- layouts/_default/single copy.html | 55 ++++ layouts/_default/single.html | 85 +++--- layouts/partials/comment.html | 4 + layouts/partials/footer.html | 1 + static/css/style.css | 266 ++++++++++--------- 9 files changed, 243 insertions(+), 176 deletions(-) create mode 100644 layouts/_default/_markup/render-heading.html create mode 100644 layouts/_default/_markup/render-image.html create mode 100644 layouts/_default/_markup/render-link.html create mode 100644 layouts/_default/single copy.html create mode 100644 layouts/partials/comment.html diff --git a/layouts/_default/_markup/render-heading.html b/layouts/_default/_markup/render-heading.html new file mode 100644 index 0000000..714cf12 --- /dev/null +++ b/layouts/_default/_markup/render-heading.html @@ -0,0 +1 @@ +{{ .Text | safeHTML }} 馃敆 \ No newline at end of file diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html new file mode 100644 index 0000000..d7c9ca1 --- /dev/null +++ b/layouts/_default/_markup/render-image.html @@ -0,0 +1,4 @@ + +

+ {{ .Text }} +

\ No newline at end of file diff --git a/layouts/_default/_markup/render-link.html b/layouts/_default/_markup/render-link.html new file mode 100644 index 0000000..e2f11e1 --- /dev/null +++ b/layouts/_default/_markup/render-link.html @@ -0,0 +1 @@ +{{ .Text | safeHTML }} \ No newline at end of file diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index dd7cccf..87b2377 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -14,6 +14,6 @@ {{ block "main" . }}{{ end }} - {{ block "footer" . }}{{ end }} + {{ partial "footer.html" . }} diff --git a/layouts/_default/single copy.html b/layouts/_default/single copy.html new file mode 100644 index 0000000..a502e05 --- /dev/null +++ b/layouts/_default/single copy.html @@ -0,0 +1,55 @@ +{{ partial "head.html" . }} + + {{ partial "navigation.html" . }} + +
+
+
+

+ {{ .Title }} +

+

+ {{ .Date.Format "Jan 2, 2006 15:04" }} + 路 {{ if lt 1 .WordCount }}{{ .WordCount }} words{{ else }}{{ .WordCount }} word{{ end }} + 路 {{ .ReadingTime }} minute read + + {{ with .Params.tags }} + {{ if ge (len .) 1 }} + {{ range . }} + {{ . }} + {{ end }} + {{ end }} + {{ end}} + +

+
+ {{ if .Site.Params.enableToc }} + {{ if .TableOfContents }} +
+ {{ .TableOfContents }} +
+ {{ end }} + {{ end }} +
+ {{ .Content }} +
+
+ + {{ if .Site.Params.enableShare }} + {{ partial "share.html" . }} + {{ end }} + + {{ if .Site.Params.enableDisqus }} + {{ partial "disqus.html" . }} + {{ end }} + + {{ if .Site.Params.showLatestPosts }} + {{ partial "latest-posts.html" . }} + {{ end }} + + {{ partial "footer.html" . }} +
+ + {{ partial "js.html" . }} + + diff --git a/layouts/_default/single.html b/layouts/_default/single.html index a502e05..6f82fcd 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,55 +1,44 @@ -{{ partial "head.html" . }} - - {{ partial "navigation.html" . }} +{{ define "main" }} -
-
-
-

- {{ .Title }} -

-

- {{ .Date.Format "Jan 2, 2006 15:04" }} - 路 {{ if lt 1 .WordCount }}{{ .WordCount }} words{{ else }}{{ .WordCount }} word{{ end }} - 路 {{ .ReadingTime }} minute read - - {{ with .Params.tags }} - {{ if ge (len .) 1 }} - {{ range . }} - {{ . }} - {{ end }} - {{ end }} - {{ end}} - -

-
- {{ if .Site.Params.enableToc }} - {{ if .TableOfContents }} -
- {{ .TableOfContents }} -
- {{ end }} - {{ end }} -
- {{ .Content }} -
-
+
+

{{ .Title }}

- {{ if .Site.Params.enableShare }} - {{ partial "share.html" . }} - {{ end }} +
+ + {{ .Date.Format "Jan 2, 2006 15:04" }} + + + 路 + + + {{ if lt 1 .WordCount }} + {{ .WordCount }} words + {{ else }} + {{ .WordCount }} word + {{ end }} + + + 路 + + + {{ .ReadingTime }} minute read + +
- {{ if .Site.Params.enableDisqus }} - {{ partial "disqus.html" . }} - {{ end }} +
+ {{ .Content }} +
- {{ if .Site.Params.showLatestPosts }} - {{ partial "latest-posts.html" . }} + {{ with .Params.tags }} +
+ {{ range . }} + {{ . }} {{ end }} +
+ {{ end}} + + {{ partial "comment.html" . }} +
- {{ partial "footer.html" . }} -
+{{ end }} - {{ partial "js.html" . }} - - diff --git a/layouts/partials/comment.html b/layouts/partials/comment.html new file mode 100644 index 0000000..a2fcd6f --- /dev/null +++ b/layouts/partials/comment.html @@ -0,0 +1,4 @@ +
+ + {{ template "_internal/disqus.html" . }} +
\ No newline at end of file diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 8c8a7c4..7a3d373 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -2,6 +2,7 @@ {{ if .Site.Social }} {{ partial "social.html" . }} {{ end }} +

{{ with .Site.Params.copyright }} {{ . | markdownify }} diff --git a/static/css/style.css b/static/css/style.css index e02cf6a..f8b2f4d 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -1,130 +1,75 @@ -/* Reset */ - -html, -body, -div, -span, -applet, -object, -iframe, -h1, -h2, -h3, -h4, -h5, -h6, -p, -blockquote, -pre, -a, -abbr, -acronym, -address, -big, -cite, -code, -del, -dfn, -em, -img, -ins, -kbd, -q, -s, -samp, -small, -strike, -strong, -sub, -tt, -var, -b, -u, -i, -center, -dl, -dt, -dd, -ol, -ul, -li, -fieldset, -form, -label, -legend, -table, -caption, -tbody, -tfoot, -thead, -tr, -th, -td, -article, -aside, -canvas, -details, -embed, -figure, -figcaption, -footer, -header, -hgroup, -menu, -nav, -output, -ruby, -section, -summary, -time, -mark, -audio, -video { - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; - margin: 0; - padding: 0; -} - body { line-height: 1; - font: normal 14px/1.5em 'Helvetica Neue', Helvetica, Arial, sans-serif; + font: normal 15px/1.5em 'Helvetica Neue', Helvetica, Arial, sans-serif; + color: #404040; + line-height: 1.75; + letter-spacing: 0.008em; } -blockquote, -q { - quotes: none; +a { + text-decoration: none; + color: #5badf0; } -blockquote:before, -blockquote:after, -q:before, -q:after { - content: none; +a:hover { + color: #0366d6; } -table { - border-collapse: collapse; - border-spacing: 0; +/* markdown content styles */ +blockquote { + margin-top: 5px; + margin-bottom: 5px; + padding-left: 1em; + margin-left: 0px; + border-left: 3px solid #eee; + color: #757575; } -*, -*:before, -*:after { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; +h1, +h2, +h3 { + font-weight: 400; } - -a { - text-decoration: none; - color: #5badf0; +p { + margin-block-start: 1.5em; + margin-block-end: 1.5em; } - -a:hover { - color: #0366d6; +p, +pre { + white-space: break-spaces; + line-break: anywhere; + word-break: break-word; +} +.markdown-image img { + max-width: 100%; +} +.anchor { + font-size: 100%; + visibility: hidden; + color:silver; +} +h1:hover a, +h2:hover a, +h3:hover a, +h4:hover a { + visibility: visible +} +.highlight pre { + padding: 7px; +} +p code { + font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace; + font-size: inherit; + background-color: rgba(0, 0, 0, 0.06); + padding: 0 2px; + border: 1px solid rgba(0, 0, 0, 0.08); + border-radius: 2px 2px; + line-height: inherit; + word-wrap: break-word; + text-indent: 0; +} +pre code { + font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace; } @@ -183,15 +128,23 @@ nav.navigation a.button { } } +/* comment */ +#comment { + margin-top: 64px; +} + +/* footer */ +#footer { + margin-top: 100px; +} + /* main content */ .main { - max-width: 580px; + width: 100%; margin: 0 auto; - padding: 24px; } - /* profile */ .profile { @@ -199,7 +152,6 @@ nav.navigation a.button { text-align: center; } - .profile .avatar { display: inline-block; width: 80px; @@ -218,12 +170,17 @@ nav.navigation a.button { .profile h2 { font-size: 20px; font-weight: 300; - color: #aaa; + color: #757575; margin-top: 10px; } - /* index post list */ +#list-page { + max-width: 580px; + margin: 0 auto; + padding: 0 24px; +} + #list-page .item { margin: 48px 0 0 0; } @@ -233,6 +190,8 @@ nav.navigation a.button { color: #333; font-size: 20px; font-weight: 400; + margin: 0; + width: 80%; } #list-page .title a { @@ -245,14 +204,16 @@ nav.navigation a.button { } #list-page .date { - float: right; - position: relative; - top: 1px; - color: #bbb; + width: 20%; + float: right; + text-align: right; + position: relative; + top: 1px; + color: #bbb; } #list-page .summary { - color: #8c8c8c; + color: #757575; margin-top: 12px; } @@ -279,4 +240,55 @@ nav.navigation a.button { } #list-page .pagination .next { float: right; -} \ No newline at end of file +} + +/* single page */ +#single { + max-width: 680px; + margin: 60px auto 0 auto; + padding: 0 64px; +} + +#single .title { + text-align: center; + font-size: 32px; + font-weight: 400; + line-height: 48px; +} + +@media (max-width: 700px) { + #single { + padding: 0 18px; + margin: 20px auto 0 auto; + } + #single .title { + font-size: 24px; + line-height: 32px; + } +} + +#single .tip { + text-align: center; + color: #8c8c8c; + margin-top: 18px; + font-size: 14px; +} +#single .tip .split { + margin: 0 4px; +} + +#single .content { + margin-top: 36px; +} + +#single .tags { + margin-top: 24px; +} +#single .tags a { + background: #f2f2f2; + padding: 4px 7px; + color: #757575; + font-size: 14px; + margin-right: 3px; +} +