add essays section layout

This commit is contained in:
Reorx 2022-09-09 11:30:49 +08:00
parent 7a7486c112
commit a461f6d44f
4 changed files with 111 additions and 2 deletions

View File

@ -12,7 +12,7 @@
color: var(--secondary); color: var(--secondary);
opacity: .8; opacity: .8;
padding-left: .5em; padding-left: .5em;
border-left: 3px solid var(--tertiary); border-left: 8px solid var(--signature);
} }
.post-meta, .post-meta,
@ -141,7 +141,7 @@ h6:hover .anchor {
} }
.post-content li { .post-content li {
margin-top: 10px; margin-top: .5em;
} }
.post-content li p { .post-content li p {

View File

@ -26,6 +26,10 @@
--link-hover-underline-shadow: 0 2px 0 var(--link-hover-underline-color); --link-hover-underline-shadow: 0 2px 0 var(--link-hover-underline-color);
--link-transition: all 0.3s ease; --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"); --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");
/* for type pages theming */
--signature: var(--primary);
--signature-bg: var(--secondary);
} }
@media screen and (max-width: 500px) { @media screen and (max-width: 500px) {
:root { :root {

View File

@ -0,0 +1,35 @@
/*
color candidates:
#48C0A3 青碧
#519A73 蒼黃
#1BD1A5 碧色
#7BCFA6 玉色
*/
body.type-essays {
--signature: #48C0A3;
--signature-bg: rgba(72, 192, 164, 0.427);
// 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);
.post-entry {
/* same as .post-header h2 */
.entry-title {
font-size: 24px;
line-height: 1.3;
margin-bottom: calc(var(--content-gap) / 2);
a {
color: var(--primary);
transition: var(--link-transition);
&:hover {
color: var(--link-hover-color);
box-shadow: var(--link-hover-underline-shadow);
}
}
}
.post-meta {
margin-bottom: var(--content-gap);
}
}
}

View File

@ -0,0 +1,70 @@
{{- define "main" }}
<header class="page-header">
<h1>
{{- .Title -}}
</h1>
{{- if .Description }}
<div class="post-description">
{{ .Description | markdownify }}
</div>
{{- end }}
{{- partial "inline_links.html" . -}}
</header>
{{- if .Content }}
<div class="post-content">
{{- if not (.Param "disableAnchoredHeadings") }}
{{- partial "anchored_headings.html" .Content -}}
{{- else }}{{ .Content }}{{ end }}
</div>
{{- end }}
{{- $pages := .Pages }}
{{- $pages = where $pages "Params.hidden" "!=" true }}
{{/* related issue: https://github.com/gohugoio/hugo/issues/9003 */}}
{{ $paginator := "" }}
{{ if (.Param "paginate") }}
{{- $paginator = .Paginate $pages (.Param "paginate") }}
{{ else }}
{{- $paginator = .Paginate $pages }}
{{ end }}
{{- $term := .Data.Term }}
{{- range $index, $page := $paginator.Pages }}
<article class="post-entry">
<h2 class="entry-title">
<a aria-label="post link to {{ .Title | plainify }}" href="{{ .Permalink }}">
{{- .Title }}
{{- if .Draft }}<sup><span class="entry-isdraft">&nbsp;&nbsp;[Draft]</span></sup>{{- end }}
{{- if .Weight }}<sup><span class="entry-isdraft">&nbsp;&nbsp;[Pinned]</span></sup>{{- end }}
</a>
</h2>
<div class="post-meta">
{{- if not (.Param "hideMeta") }}
{{- partial "post_meta.html" . -}}
{{- end }}
</div>
<section class="post-content">
{{ .Content }}
</section>
</article>
{{- end }}
{{- if gt $paginator.TotalPages 1 }}
<footer class="page-footer">
<nav class="pagination">
{{- if $paginator.HasPrev }}
<a class="prev" href="{{ $paginator.Prev.URL | absURL }}">« {{ i18n "prev_page" }}</a>
{{- end }}
{{- if $paginator.HasNext }}
<a class="next" href="{{ $paginator.Next.URL | absURL }}">{{ i18n "next_page" }} »</a>
{{- end }}
</nav>
</footer>
{{- end }}
{{- end }}{{- /* end main */ -}}