diff --git a/assets/css/common/main.css b/assets/css/common/main.css index 004de15..893081f 100644 --- a/assets/css/common/main.css +++ b/assets/css/common/main.css @@ -4,8 +4,18 @@ min-height: calc(100vh - var(--header-height) - var(--footer-height)); max-width: calc(var(--main-width) + var(--gap) * 2); margin: auto; - padding: var(--gap); - padding-bottom: 0; + padding: var(--content-gap) var(--gap) 0; +} + +@media screen and (max-width: 500px) { + .main { + padding-top: 0; + } +} + +/* same as .post-header */ +.page-header { + margin: var(--content-gap) 0 calc(var(--content-gap) * 1.5); } .mark-line { @@ -14,7 +24,7 @@ } mark { margin: 0 -0.4em; - padding: 0.1em 0.4em; + padding: 0em 0.4em; border-radius: 0.8em 0.3em; background: transparent; background-image: linear-gradient( @@ -27,6 +37,70 @@ mark { box-decoration-break: clone; } +/* for home and section page */ +.first-entry { + position: relative; + min-height: 320px; + margin: var(--gap) 0 calc(var(--gap) * 2) 0; +} + +.first-entry .entry-header { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + margin: var(--gap) 0 calc(var(--gap) * 2); +} + +.first-entry .entry-header h1 { + font-size: 34px; + line-height: 1.3; +} + +.first-entry .entry-content { + margin: 14px 0; + font-size: 17px; + color: var(--primary); + line-height: 1.6em; + display: block; + overflow: initial; /* fix edge get cut */ +} + +@media screen and (max-width: 500px) { + .first-entry .entry-header h1 { + font-size: 30px; + } + .first-entry .entry-content { + font-size: 16px; + } +} + +.first-entry .entry-content p { + margin-bottom: .8em; +} +.first-entry .entry-content ul, +.first-entry .entry-content ol { + margin: .8em 0; +} +.first-entry .entry-content li p { + margin-bottom: .5em; +} + +.first-entry .entry-footer { + font-size: 14px; +} + +.inline-links a { + font-weight: 500; + color: var(--primary); + box-shadow: var(--link-underline-shadow); + transition: var(--link-transition); +} +.inline-links a:hover { + color: var(--link-hover-color); + box-shadow: var(--link-hover-underline-shadow); +} + + /* for post page */ .main.post { max-width: calc(var(--post-width) + var(--gap) * 2); diff --git a/assets/css/common/post-entry.css b/assets/css/common/post-entry.css index 81ba641..e433cc1 100644 --- a/assets/css/common/post-entry.css +++ b/assets/css/common/post-entry.css @@ -1,46 +1,3 @@ -.first-entry { - position: relative; - min-height: 320px; - margin: var(--gap) 0 calc(var(--gap) * 2) 0; -} - -.first-entry .entry-header { - overflow: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; - margin: var(--gap) 0 calc(var(--gap) * 2); -} - -.first-entry .entry-header h1 { - font-size: 34px; - line-height: 1.3; -} -@media screen and (max-width: 400px) { - .first-entry .entry-header h1 { - font-size: 30px; - } -} - -.first-entry .entry-content { - margin: 14px 0; - font-size: 17px; - color: var(--primary); - line-height: 1.6em; - display: block; - overflow: initial; /* fix edge get cut */ -} - -.first-entry .entry-content p { - margin-bottom: .8em; -} -.first-entry .entry-content li p { - margin-bottom: .5em; -} - -.first-entry .entry-footer { - font-size: 14px; -} - .home-info .entry-content { -webkit-line-clamp: unset; } diff --git a/assets/css/common/post-single.css b/assets/css/common/post-single.css index 1efd99a..7095192 100644 --- a/assets/css/common/post-single.css +++ b/assets/css/common/post-single.css @@ -1,11 +1,10 @@ -.page-header, .post-header { - margin: 32px 0; + margin: var(--content-gap) 0 calc(var(--content-gap) * 1.5); } .post-title { font-size: 40px; - margin: var(--content-gap) 0; + margin-bottom: var(--content-gap); } .post-description { @@ -401,6 +400,8 @@ h6:hover .anchor { .post-footer { margin-top: calc(var(--content-gap) * 1.5); + padding-bottom: calc(var(--content-gap) * 2); + border-bottom: 3px solid var(--tertiary); } .share-buttons { @@ -453,7 +454,7 @@ h6:hover .anchor { } .paginav { - margin: var(--content-gap) 0; + margin-top: var(--content-gap); display: flex; line-height: 30px; border-radius: var(--radius); @@ -574,10 +575,7 @@ h6:hover .anchor { } .comments { - border-top: 1px solid var(--tertiary); -} -.comments { - margin: 40px 0 20px; + margin: var(--content-gap) 0; } .comments .title { margin: 20px 0; @@ -593,6 +591,7 @@ h6:hover .anchor { vertical-align: super; } +/* footnotes */ .footnotes { font-size: .8em; color: var(--primary-dim); diff --git a/assets/css/core/reset.css b/assets/css/core/reset.css index 7053b0b..994d3ed 100644 --- a/assets/css/core/reset.css +++ b/assets/css/core/reset.css @@ -117,7 +117,7 @@ img { background: 0 0; } -.list:not(.dark)::-webkit-scrollbar-track { +.list-page:not(.dark)::-webkit-scrollbar-track { background: var(--code-bg); } @@ -127,7 +127,7 @@ img { border-radius: var(--radius); } -.list:not(.dark)::-webkit-scrollbar-thumb { +.list-page:not(.dark)::-webkit-scrollbar-thumb { border: 5px solid var(--code-bg); } diff --git a/assets/css/core/theme-vars.css b/assets/css/core/theme-vars.css index 7980b48..d67a361 100644 --- a/assets/css/core/theme-vars.css +++ b/assets/css/core/theme-vars.css @@ -27,6 +27,12 @@ --link-transition: all 0.3s ease; --line-yellow: url("data:image/svg+xml;charset=utf-8,%3Csvg preserveAspectRatio='none' width='120' height='6' viewBox='0 0 120 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M119 0.8C60 4 50-0.5 1 1.5' stroke='%23fc0' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); } +@media screen and (max-width: 500px) { + :root { + --header-height: 52px; + } + +} .dark { --theme: rgb(29, 30, 32); @@ -47,10 +53,10 @@ --link-hover-underline-shadow: 0 2px 0 var(--link-hover-underline-color); } -.list { +.list-page { background: var(--code-bg); } -.dark.list { +.dark.list-page { background: var(--theme); } diff --git a/assets/css/core/zmedia.css b/assets/css/core/zmedia.css index 1cc6c6e..d600c80 100644 --- a/assets/css/core/zmedia.css +++ b/assets/css/core/zmedia.css @@ -39,7 +39,7 @@ /* footer */ @media screen and (max-width: 900px) { - .list .top-link { + .list-page .top-link { transform: translateY(-5rem); } } diff --git a/assets/css/extended/newsletter.scss b/assets/css/extended/newsletter.scss new file mode 100644 index 0000000..a1a8fef --- /dev/null +++ b/assets/css/extended/newsletter.scss @@ -0,0 +1,300 @@ +/* +color candidates: +#CB3A56 茜色 +#F05654 銀紅 +#F20C00 石榴紅 +#FF2D51 火紅 +*/ + +$medium: 960px; +$small: 500px; + +body.type-newsletter { + --signature: #CB3A56; + --signature-bg: rgba(203, 58, 87, 0.239); + --signature-bg-dim: rgba(203, 58, 87, 0.147); + --main-border: 5px solid var(--signature); + --icon-length: 50px; + --icon-font-size: 32px; + + // override theme-vars + --link-hover-color: var(--signature); + --link-hover-underline-color: var(--signature); + --link-hover-underline-shadow: 0 2px 0 var(--link-hover-underline-color); + + @media screen and (max-width: $small) { + --icon-length: 40px; + --icon-font-size: 24px; + } + + /* a links in section/archives page content and regular page post-content */ + &.kind-section .main .content a, + &.layout-archives .main .content a, + &.kind-page .post-content a { + font-weight: 500; + color: var(--primary); + box-shadow: var(--link-underline-shadow); + // transition: var(--link-transition); + &:hover { + color: var(--link-hover-color); + box-shadow: var(--link-hover-underline-shadow); + } + } + + /* shared */ + .sub-form { + display: flex; + flex-direction: column; + margin: calc(var(--content-gap) * 1.5) 0; + form { + display: flex; + line-height: 1.2em; + flex-wrap: wrap; + } + input { + border: 3px solid var(--signature-bg-dim); + color: var(--secondary); + border-radius: 0px; + appearance: none; + outline: none; + background-color: var(--theme); + flex-grow: 1; + padding: 9px 15px; + transition: var(--link-transition); + + &:focus { + color: var(--primary); + border-color: var(--signature); + } + } + button { + display: block; + background-color: var(--signature); + color: var(--theme); + padding: 12px 15px; + margin-left: var(--content-gap); + white-space: nowrap; + } + } + @media screen and (max-width: $small) { + .sub-form { + button { + margin-left: 0; + margin-top: calc(var(--content-gap)/2); + flex-grow: 1; + } + } + } +} + +body.type-newsletter.kind-section, +body.type-newsletter.layout-archives { + /* section/archives page */ + + .main { + border: var(--main-border); + background-color: var(--theme); + margin-top: var(--content-gap); + padding-top: 0; + padding-bottom: var(--icon-length); + min-height: calc(100vh - var(--header-height) - var(--footer-height) - var(--content-gap)); + max-width: var(--nav-width); + + @media screen and (max-width: $medium) { + margin-left: var(--gap); + margin-right: var(--gap); + } + } + + .main-icon { + position: absolute; + left: 0; top: 0; + width: var(--icon-length); + height: var(--icon-length); + line-height: calc(var(--icon-length) - 3px); + border-right: var(--main-border); + border-bottom: var(--main-border); + background-color: var(--signature); + color: var(--theme); + font-size: var(--icon-font-size); + text-align: center; + } + + .main { + .content { + max-width: calc(var(--post-width)); + margin: var(--icon-length) auto 0; + } + + .first-entry { + margin-bottom: 0; + } + + h1 { + text-align: center; + margin-bottom: 10px; + } + .subtitle { + text-align: center; + color: var(--secondary); + line-height: 1.2em; + margin-bottom: var(--content-gap); + } + + h2 { + margin: 40px 0 20px; + + } + + .list { + display: flex; + flex-direction: column; + margin-bottom: var(--content-gap); + + .item { + display: flex; + border-bottom: 1px solid var(--tertiary-bg); + padding: 8px 0; + + .date, .issueno { + font-size: .9em; + color: var(--secondary); + } + .date { + width: 150px; + } + .title { + flex-grow: 1; + font-weight: 500; + a { + display: block; + width: 100%; + box-shadow: none; + } + a:hover { + color: var(--signature); + } + em { + color: var(--secondary); + font-style: normal; + font-size: .8em; + margin-inline-start: 1em; + vertical-align: top; + } + } + .issueno { + width: 50px; + text-align: right; + } + } + } + @media screen and (max-width: $small) { + .list { + .item { + flex-wrap: wrap; + .date { + flex-grow: 1; + order: 1; + } + .issueno { + order: 2; + } + .title { + order: 3; + flex-grow: 1; + } + } + } + } + } +} + +/* regular page */ +body.type-newsletter.kind-page { + .newsletter-brand { + --icon-length: 50px; + --padding: 15px; + display: flex; + background-color: var(--signature-bg-dim); + transition: var(--link-transition); + font-size: 32px; + margin-bottom: var(--content-gap); + line-height: var(--icon-length); + box-shadow: none; // reset + + .icon, .name { + height: var(--icon-length); + } + .icon { + width: var(--icon-length); + color: var(--theme); + text-align: center; + background-color: var(--signature); + } + .name { + padding: 0 var(--padding); + font-weight: bolder; + color: var(--signature); + } + .remark { + color: var(--signature); + font-weight: 300; + transition: var(--link-transition); + } + .arrow { + margin-left: auto; + color: transparent; + display: flex; + align-items: center; + padding-right: var(--padding); + transition: var(--link-transition); + } + + &:hover, &:active { + box-shadow: none; // reset + background-color: var(--signature-bg); + .arrow { + color: var(--signature); + } + .remark { + color: transparent; + } + } + } + @media screen and (max-width: $small) { + .newsletter-brand { + font-size: 24px; + .remark { + margin-left: auto; + padding-right: var(--padding); + } + .arrow { + display: none; + } + } + } + + .post-title { + font-size: 36px; + } + .post-footer { + border-bottom-color: var(--signature); + } + + .newsletter-sub { + margin-top: calc(var(--content-gap) * 1.5); + background-color: var(--signature-bg-dim); + padding: 1em; + .notice { + font-size: .8em; + color: var(--signature); + line-height: 1.6; + } + .sub-form { + margin: 1em 0; + input { + border-color: var(--signature-bg); + } + } + } +} diff --git a/layouts/_default/archives.html b/layouts/_default/archives.html index 966da8a..dd53699 100644 --- a/layouts/_default/archives.html +++ b/layouts/_default/archives.html @@ -9,7 +9,13 @@ {{- end }} -{{- $pages := where site.AllPages "Type" "in" site.Params.mainSections }} +{{/* get pages from the current page's section */}} +{{/* in this way, archives.html could be used for section archives other than the only one archives of the whole site */}} +{{- $sections := site.Params.mainSections }} +{{- if .Section }} + {{- $sections = slice .Section }} +{{- end }} +{{- $pages := where (where site.RegularPages "Section" "in" $sections) "Params.hidden" "!=" true }} {{- range $pages.GroupByPublishDate "2006" }} {{- if ne .Key "0001" }} @@ -22,7 +28,6 @@

{{- .Key }}  {{ len .Pages }}

{{- range .Pages }} - {{- if eq .Kind "page" }}

{{- .Title | markdownify }} @@ -34,7 +39,6 @@

{{- end }} - {{- end }}
{{- end }} diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 513450b..1413f56 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -8,11 +8,11 @@ {{- partialCached "header.html" . .Page -}}
diff --git a/layouts/_default/list.html b/layouts/_default/list.html index e2c248c..654297b 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -13,6 +13,14 @@ {{ .Description | markdownify }} {{- end }} +
+ {{- with .Param "archivesSlug" }} + Archives + {{- end }} + {{ with .OutputFormats.Get "rss" -}} + • RSS + {{ end -}} +
{{- end }} @@ -27,7 +35,8 @@ {{- $pages := .Pages }} {{- if .IsHome }} - {{- $pages = where site.RegularPages "Type" "in" site.Params.mainSections }} + {{/* get all regular pages instead of pages in a section */}} + {{- $pages = where site.RegularPages "Section" "in" site.Params.mainSections }} {{- end }} {{- $pages = where $pages "Params.hidden" "!=" true }} diff --git a/layouts/_default/rss.xml b/layouts/_default/rss.xml index 5a6386f..f151df5 100644 --- a/layouts/_default/rss.xml +++ b/layouts/_default/rss.xml @@ -1,15 +1,15 @@ -{{- $pctx := . -}} -{{- if .IsHome -}}{{ $pctx = site }}{{- end -}} -{{- $pages := slice -}} -{{- if or $.IsHome $.IsSection -}} -{{- $pages = where $pctx.RegularPages "Type" "in" site.Params.mainSections }} -{{- else -}} -{{- $pages = $pctx.Pages -}} -{{- end -}} +{{- $pages := .Pages -}} +{{- if $.IsHome -}} + {{/* get all regular pages instead of pages in a section */}} + {{- $pages = where site.RegularPages "Section" "in" site.Params.mainSections -}} +{{- end }} +{{- $pages = where $pages "Params.hidden" "!=" true -}} + {{- $limit := site.Config.Services.RSS.Limit -}} {{- if ge $limit 1 -}} {{- $pages = $pages | first $limit -}} {{- end -}} + {{- printf "" | safeHTML }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index c71f66d..fa4c86d 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,15 +1,24 @@ {{- define "main" }} +{{- $isNewsletter := eq .Type "newsletter" }}
{{ partial "breadcrumbs.html" . }} + + {{- if $isNewsletter -}} + {{- partial "newsletter_brand.html" . }} + {{- end -}}

- {{ .Title }} - {{- if .Draft }}  [draft]{{- end }} + {{- if $isNewsletter -}} + {{- replace .Title (.Param "titlePrefix") (.Param "titlePrefixReplace") -}} + {{- else -}} + {{- .Title -}} + {{- end -}} + {{- if .Draft -}}  [draft]{{- end -}}

{{- if .Description }}
- {{ .Description }} + {{- .Description -}}
{{- end }} {{- if not (.Param "hideMeta") }} @@ -43,6 +52,15 @@ {{- if (.Param "ShowPostNavLinks") }} {{- partial "post_nav_links.html" . }} {{- end }} + + {{- if $isNewsletter }} + + {{- end }} {{- if not (.Param "noComments") }} diff --git a/layouts/newsletter/archives.html b/layouts/newsletter/archives.html new file mode 100644 index 0000000..ae19b5a --- /dev/null +++ b/layouts/newsletter/archives.html @@ -0,0 +1,33 @@ +{{- define "main" }} +
＠
+ +
+

{{ .Title }}

+ {{- partial "newsletter_sub_form.html"}} + + {{/* get pages from the current page's section */}} + {{- $sections := slice .Section }} + {{- $pages := where (where site.RegularPages "Section" "in" $sections) "Params.hidden" "!=" true }} + + {{/* TODO statistics */}} +
+ {{- range $pages }} +
+
+ {{- if not .Date.IsZero -}} + {{ .Date | time.Format (default "January 2, 2006" site.Params.DateFormat) }} + {{- end }} +
+
+ {{- .Title }} + {{- if .Draft }}[Draft]{{- end }} + {{- if .Weight }}[Pinned]{{- end }} + +
+
{{ with .Param "issueno" }}#{{ . }}{{ end }}
+
+ {{- end }} +
+ +
+{{ end }} diff --git a/layouts/newsletter/section.html b/layouts/newsletter/section.html new file mode 100644 index 0000000..04c3eed --- /dev/null +++ b/layouts/newsletter/section.html @@ -0,0 +1,50 @@ +{{/* section is AKA list */}} + +{{- define "main" }} +
＠
+ +
+

{{ .Title }}

+ {{ with .Param "subtitle" }}
{{ . }}
{{ end }} + +
+
{{ .Description | markdownify }}
+ {{- partial "newsletter_sub_form.html"}} +
+ + {{ $pages := where .Pages "Params.hidden" "!=" true }} + {{ if $pages }} +

最新通讯

+ +
+ {{- range first 5 $pages }} +
+
+ {{- if not .Date.IsZero -}} + {{ .Date | time.Format (default "January 2, 2006" site.Params.DateFormat) }} + {{- end }} +
+
+ {{- .Title }} + {{- if .Draft }}[Draft]{{- end }} + {{- if .Weight }}[Pinned]{{- end }} + +
+
{{ with .Param "issueno" }}#{{ . }}{{ end }}
+
+ {{- end }} +
+ {{ end }} + +

相关链接

+
+ {{- with .Param "archivesSlug" }} + Archives + {{- end }} + {{ with .OutputFormats.Get "rss" -}} + • RSS + {{ end -}} +
+ +
+{{ end }} diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 1889a85..165afb4 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -47,10 +47,11 @@ {{- /* order is important */}} {{- $core := (slice $theme_vars $reset $common $commonHighlight $media) | resources.Concat "assets/css/core.css" }} {{- $extended := (resources.Match "css/extended/*.css") | resources.Concat "assets/css/extended.css" }} +{{- $extendedScss := (resources.Match "css/extended/*.scss") | resources.Concat "assets/css/extended.scss" | resources.ToCSS }} {{- /* bundle all required css */}} {{- /* Add extended css after theme style */ -}} -{{- $stylesheet := (slice $core $extended) | resources.Concat "assets/css/stylesheet.css" | minify }} +{{- $stylesheet := (slice $core $extended $extendedScss) | resources.Concat "assets/css/stylesheet.css" | minify }} {{- if not site.Params.assets.disableFingerprinting }} {{- $stylesheet := $stylesheet | fingerprint }} @@ -125,15 +126,15 @@ --border: rgb(51, 51, 51); } - .list { + .list-page { background: var(--theme); } - .list:not(.dark)::-webkit-scrollbar-track { + .list-page:not(.dark)::-webkit-scrollbar-track { background: 0 0; } - .list:not(.dark)::-webkit-scrollbar-thumb { + .list-page:not(.dark)::-webkit-scrollbar-thumb { border-color: var(--theme); } } diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 1061d5b..01f2b41 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -133,7 +133,7 @@ function toggleThemeListener() { {{- .Pre }} diff --git a/layouts/partials/newsletter_brand.html b/layouts/partials/newsletter_brand.html new file mode 100644 index 0000000..03c10ee --- /dev/null +++ b/layouts/partials/newsletter_brand.html @@ -0,0 +1,8 @@ + diff --git a/layouts/partials/newsletter_sub_form.html b/layouts/partials/newsletter_sub_form.html new file mode 100644 index 0000000..3cee447 --- /dev/null +++ b/layouts/partials/newsletter_sub_form.html @@ -0,0 +1,8 @@ +{{/* Add `layouts/partials/newsletter_sub_form.html` in your own code to customize the form */}} + +
+
+ + +
+
diff --git a/layouts/partials/post_nav_links.html b/layouts/partials/post_nav_links.html index 2d1eaa9..05e68a3 100644 --- a/layouts/partials/post_nav_links.html +++ b/layouts/partials/post_nav_links.html @@ -1,4 +1,10 @@ -{{- $pages := where site.RegularPages "Type" "in" site.Params.mainSections }} +{{/* get pages from the current page's section */}} +{{- $sections := site.Params.mainSections }} +{{- if .Section }} + {{- $sections = slice .Section }} +{{- end }} +{{- $pages := where (where site.RegularPages "Section" "in" $sections) "Params.hidden" "!=" true }} + {{- if and (gt (len $pages) 1) (in $pages . ) }}