Merge branch 'newsletter'
* newsletter: (28 commits) newsletter section: only show list when there are pages lower nav height in mobile use content-gap instead of gap for header consistant header gaps subtle adjustments clear debug code finish newsletter archives add newsletter sub box in single enhance inline links fix rss pages query newsletter regular page responsive enlarge post footer bottom border size from 1 to 3px fix all pages query issues in: list, archives, newsletter section, post_nav_links fixup! finish newsletter section styling newsletter section page responsive finish newsletter section styling adjust first-entry ul/ol margin styling newsletter section list rename .list to .list-page styling newsletter sub form ...
This commit is contained in:
Reorx
commit
ae58c91ac4
|
|
@ -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 <mark> 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);
|
||||
|
|
|
|||
|
|
@ -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 <mark> 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
|
||||
/* footer */
|
||||
@media screen and (max-width: 900px) {
|
||||
.list .top-link {
|
||||
.list-page .top-link {
|
||||
transform: translateY(-5rem);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -9,7 +9,13 @@
|
|||
{{- end }}
|
||||
</header>
|
||||
|
||||
{{- $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 @@
|
|||
<h3 class="archive-month-header">{{- .Key }}<sup class="archive-count"> {{ len .Pages }}</sup></h3>
|
||||
<div class="archive-posts">
|
||||
{{- range .Pages }}
|
||||
{{- if eq .Kind "page" }}
|
||||
<div class="archive-entry">
|
||||
<h3 class="archive-entry-title">
|
||||
{{- .Title | markdownify }}
|
||||
|
|
@ -34,7 +39,6 @@
|
|||
<a class="entry-link" aria-label="post link to {{ .Title | plainify }}" href="{{ .Permalink }}"></a>
|
||||
</div>
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
</div>
|
||||
</div>
|
||||
{{- end }}
|
||||
|
|
|
|||
|
|
@ -8,11 +8,11 @@
|
|||
|
||||
<body class="
|
||||
{{- if (or (ne .Kind `page` ) (eq .Layout `archives`) (eq .Layout `search`)) -}}
|
||||
{{- print "list" -}}
|
||||
{{- print "list-page" -}}
|
||||
{{- end -}}
|
||||
{{- if eq site.Params.defaultTheme `dark` -}}
|
||||
{{- print " dark" }}
|
||||
{{- end -}}
|
||||
{{- end }} type-{{ .Type }} kind-{{ .Kind }} layout-{{ .Layout -}}
|
||||
" id="top">
|
||||
{{- partialCached "header.html" . .Page -}}
|
||||
<main class="main {{- if (eq .Kind `page`) -}}{{- print " post" -}}{{- end -}}">
|
||||
|
|
|
|||
|
|
@ -13,6 +13,14 @@
|
|||
{{ .Description | markdownify }}
|
||||
</div>
|
||||
{{- end }}
|
||||
<div class="inline-links">
|
||||
{{- with .Param "archivesSlug" }}
|
||||
<a href="{{ $.RelPermalink }}{{ . }}/">Archives</a>
|
||||
{{- end }}
|
||||
{{ with .OutputFormats.Get "rss" -}}
|
||||
• <a href="{{ .Permalink }}" target="_blank">RSS</a>
|
||||
{{ end -}}
|
||||
</div>
|
||||
</header>
|
||||
{{- 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 }}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 "<?xml version=\"1.0\" encoding=\"utf-8\" standalone=\"yes\"?>" | safeHTML }}
|
||||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
|
||||
<channel>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,24 @@
|
|||
{{- define "main" }}
|
||||
{{- $isNewsletter := eq .Type "newsletter" }}
|
||||
|
||||
<article class="post-single">
|
||||
<header class="post-header">
|
||||
{{ partial "breadcrumbs.html" . }}
|
||||
|
||||
{{- if $isNewsletter -}}
|
||||
{{- partial "newsletter_brand.html" . }}
|
||||
{{- end -}}
|
||||
<h1 class="post-title">
|
||||
{{ .Title }}
|
||||
{{- if .Draft }}<sup><span class="entry-isdraft"> [draft]</span></sup>{{- end }}
|
||||
{{- if $isNewsletter -}}
|
||||
{{- replace .Title (.Param "titlePrefix") (.Param "titlePrefixReplace") -}}
|
||||
{{- else -}}
|
||||
{{- .Title -}}
|
||||
{{- end -}}
|
||||
{{- if .Draft -}}<sup><span class="entry-isdraft"> [draft]</span></sup>{{- end -}}
|
||||
</h1>
|
||||
{{- if .Description }}
|
||||
<div class="post-description">
|
||||
{{ .Description }}
|
||||
{{- .Description -}}
|
||||
</div>
|
||||
{{- end }}
|
||||
{{- if not (.Param "hideMeta") }}
|
||||
|
|
@ -43,6 +52,15 @@
|
|||
{{- if (.Param "ShowPostNavLinks") }}
|
||||
{{- partial "post_nav_links.html" . }}
|
||||
{{- end }}
|
||||
|
||||
{{- if $isNewsletter }}
|
||||
<div class="newsletter-sub">
|
||||
<div class="notice">
|
||||
感谢你能读到这里，如果觉得有趣的话，欢迎在下方输入邮箱进行订阅。
|
||||
</div>
|
||||
{{- partial "newsletter_sub_form.html"}}
|
||||
</div>
|
||||
{{- end }}
|
||||
</footer>
|
||||
|
||||
{{- if not (.Param "noComments") }}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
{{- define "main" }}
|
||||
<div class="main-icon">＠</div>
|
||||
|
||||
<div class="content">
|
||||
<h1>{{ .Title }}</h1>
|
||||
{{- 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 */}}
|
||||
<div class="list">
|
||||
{{- range $pages }}
|
||||
<div class="item">
|
||||
<div class="date">
|
||||
{{- if not .Date.IsZero -}}
|
||||
{{ .Date | time.Format (default "January 2, 2006" site.Params.DateFormat) }}
|
||||
{{- end }}
|
||||
</div>
|
||||
<div class="title">
|
||||
<a href="{{ .Permalink }}">{{- .Title }}
|
||||
{{- if .Draft }}<em>[Draft]</em>{{- end }}
|
||||
{{- if .Weight }}<em>[Pinned]</em>{{- end }}
|
||||
</a>
|
||||
</div>
|
||||
<div class="issueno">{{ with .Param "issueno" }}#{{ . }}{{ end }}</div>
|
||||
</div>
|
||||
{{- end }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
{{/* section is AKA list */}}
|
||||
|
||||
{{- define "main" }}
|
||||
<div class="main-icon">＠</div>
|
||||
|
||||
<div class="content">
|
||||
<h1>{{ .Title }}</h1>
|
||||
{{ with .Param "subtitle" }}<div class="subtitle">{{ . }}</div>{{ end }}
|
||||
|
||||
<div class="first-entry">
|
||||
<section class="entry-content">{{ .Description | markdownify }}</section>
|
||||
{{- partial "newsletter_sub_form.html"}}
|
||||
</div>
|
||||
|
||||
{{ $pages := where .Pages "Params.hidden" "!=" true }}
|
||||
{{ if $pages }}
|
||||
<h2>最新通讯</h2>
|
||||
|
||||
<div class="list">
|
||||
{{- range first 5 $pages }}
|
||||
<div class="item">
|
||||
<div class="date">
|
||||
{{- if not .Date.IsZero -}}
|
||||
{{ .Date | time.Format (default "January 2, 2006" site.Params.DateFormat) }}
|
||||
{{- end }}
|
||||
</div>
|
||||
<div class="title">
|
||||
<a href="{{ .Permalink }}">{{- .Title }}
|
||||
{{- if .Draft }}<em>[Draft]</em>{{- end }}
|
||||
{{- if .Weight }}<em>[Pinned]</em>{{- end }}
|
||||
</a>
|
||||
</div>
|
||||
<div class="issueno">{{ with .Param "issueno" }}#{{ . }}{{ end }}</div>
|
||||
</div>
|
||||
{{- end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
<h2>相关链接</h2>
|
||||
<div class="inline-links">
|
||||
{{- with .Param "archivesSlug" }}
|
||||
<a href="{{ $.RelPermalink }}{{ . }}/">Archives</a>
|
||||
{{- end }}
|
||||
{{ with .OutputFormats.Get "rss" -}}
|
||||
• <a href="{{ .Permalink }}" target="_blank">RSS</a>
|
||||
{{ end -}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -133,7 +133,7 @@ function toggleThemeListener() {
|
|||
<a href="{{ $menu_item_url }}" title="{{ .Title | default .Name }} {{- cond $is_search (" (Alt + /)" | safeHTMLAttr) ("" | safeHTMLAttr ) }}"
|
||||
{{- if $is_search -}}data-no-instant{{- end -}}
|
||||
{{- cond $is_search (" accesskey=/" | safeHTMLAttr) ("" | safeHTMLAttr ) }}
|
||||
{{- if eq $menu_item_url $page_url }} class="active" {{- end }}
|
||||
{{- if strings.HasPrefix $page_url $menu_item_url }} class="active" {{- end }}
|
||||
{{- if .Params.External }} target="_blank" {{- end }}
|
||||
>
|
||||
{{- .Pre }}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
<a class="newsletter-brand" href="{{ .Parent.Permalink }}">
|
||||
<div class="icon">＠</div>
|
||||
<div class="name">{{ .Param "newsletterName" }}</div>
|
||||
{{ with .Param "issueno" }}<div class="remark">#{{ . }}</div>{{ end }}
|
||||
<div class="arrow">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
|
||||
</div>
|
||||
</a>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{{/* Add `layouts/partials/newsletter_sub_form.html` in your own code to customize the form */}}
|
||||
|
||||
<div class="sub-form">
|
||||
<form action="">
|
||||
<input type="text" name="email" placeholder="Your email address">
|
||||
<button>订阅 | Subscribe</button>
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -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 . ) }}
|
||||
<nav class="paginav">
|
||||
{{- with $pages.Next . }}
|
||||
|
|
|
|||
Loading…
Reference in New Issue