add type- and kind- classes to body, styling newsletter single and section
This commit is contained in:
Reorx
parent
a016d83663
commit
ca373fd003
|
|
@ -0,0 +1,99 @@
|
|||
/*
|
||||
color candidates:
|
||||
#CB3A56 茜色
|
||||
#F05654 銀紅
|
||||
#F20C00 石榴紅
|
||||
#FF2D51 火紅
|
||||
*/
|
||||
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);
|
||||
--link-hover-color: var(--signature);
|
||||
|
||||
|
||||
/* regular page layout */
|
||||
}
|
||||
|
||||
body.type-newsletter.kind-section {
|
||||
/* section page layout */
|
||||
|
||||
.main {
|
||||
border: var(--main-border);
|
||||
background-color: var(--theme);
|
||||
margin-top: var(--content-gap);
|
||||
min-height: calc(100vh - var(--header-height) - var(--footer-height) - var(--content-gap));
|
||||
max-width: calc(var(--nav-width));
|
||||
}
|
||||
|
||||
.main-logo {
|
||||
position: absolute;
|
||||
left: 0; top: 0;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
line-height: 45px;
|
||||
border-right: var(--main-border);
|
||||
border-bottom: var(--main-border);
|
||||
background-color: var(--signature);
|
||||
color: var(--theme);
|
||||
font-size: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
body.type-newsletter.kind-page {
|
||||
.newsletter-brand {
|
||||
display: flex;
|
||||
background-color: var(--signature-bg-dim);
|
||||
transition: var(--link-transition);
|
||||
font-size: 32px;
|
||||
margin-bottom: calc(var(--content-gap) * 2);
|
||||
line-height: 50px;
|
||||
|
||||
.icon, .name {
|
||||
height: 50px;
|
||||
}
|
||||
.icon {
|
||||
width: 50px;
|
||||
color: var(--theme);
|
||||
text-align: center;
|
||||
background-color: var(--signature);
|
||||
}
|
||||
.name {
|
||||
padding: 0 20px;
|
||||
font-weight: bolder;
|
||||
color: var(--signature);
|
||||
}
|
||||
.issueno {
|
||||
color: var(--signature);
|
||||
font-weight: 300;
|
||||
transition: var(--link-transition);
|
||||
}
|
||||
.arrow {
|
||||
margin-left: auto;
|
||||
color: transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-right: 15px;
|
||||
transition: var(--link-transition);
|
||||
}
|
||||
|
||||
&:hover, &:active {
|
||||
background-color: var(--signature-bg);
|
||||
.arrow {
|
||||
color: var(--signature);
|
||||
}
|
||||
.issueno {
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-title {
|
||||
font-size: 36px;
|
||||
}
|
||||
.post-footer {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -12,8 +12,7 @@
|
|||
{{- end -}}
|
||||
{{- if eq site.Params.defaultTheme `dark` -}}
|
||||
{{- print " dark" }}
|
||||
{{- end -}}
|
||||
{{- block "bodyClass" . }}{{ end }}
|
||||
{{- end }} type-{{ .Type }} kind-{{ .Kind -}}
|
||||
" id="top">
|
||||
{{- partialCached "header.html" . .Page -}}
|
||||
<main class="main {{- if (eq .Kind `page`) -}}{{- print " post" -}}{{- end -}}">
|
||||
|
|
|
|||
|
|
@ -1,15 +1,31 @@
|
|||
{{- define "main" }}
|
||||
{{- $isNewsletter := eq .Type "newsletter" }}
|
||||
|
||||
<article class="post-single">
|
||||
<header class="post-header">
|
||||
{{ partial "breadcrumbs.html" . }}
|
||||
|
||||
{{- if $isNewsletter -}}
|
||||
<a class="newsletter-brand" href="{{ .Parent.Permalink }}">
|
||||
<div class="icon">＠</div>
|
||||
<div class="name">{{ .Param "newsletterName" }}</div>
|
||||
<div class="issueno">#{{ .Param "issueno" }}</div>
|
||||
<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>
|
||||
{{- 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") }}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,10 @@
|
|||
{{/* section is AKA list */}}
|
||||
{{- define "bodyClass" }} theme-newsletter{{- end }}
|
||||
|
||||
{{- define "main" }}
|
||||
<div class="main-logo">@</div>
|
||||
<div class="main-logo">＠</div>
|
||||
|
||||
<header class="page-header">
|
||||
<h1>{{ .Title }} Newsletter</h1>
|
||||
<h1>{{ .Title }}</h1>
|
||||
{{- with .Param "archivesSlug" }}
|
||||
<div>
|
||||
<a href="{{ $.RelPermalink }}{{ . }}/">Archives</a>
|
||||
|
|
|
|||
Loading…
Reference in New Issue