5.0
This commit is contained in:
nanxiaobei
parent
320629ba2c
commit
f1387bfc37
15 changed files with 843 additions and 713 deletions
658
assets/app.css
Normal file
658
assets/app.css
Normal file
|
|
@ -0,0 +1,658 @@
|
|||
/*
|
||||
* Paper
|
||||
* A simple, clean, flexible Hugo theme
|
||||
* https://github.com/nanxiaobei/hugo-paper
|
||||
* Designed by 南小北 (https://lee.so/)
|
||||
* Updated in 2021.8.20
|
||||
*/
|
||||
|
||||
/* Theme
|
||||
-------------------------------------------------- */
|
||||
:root {
|
||||
--gap: 3.5rem;
|
||||
--y-gap: 8rem;
|
||||
--wide: 140rem;
|
||||
--narrow: 80rem;
|
||||
--side: calc((var(--wide) - var(--narrow)) / 2);
|
||||
--header: 8rem;
|
||||
--footer: 8rem;
|
||||
|
||||
--light: 255, 255, 255;
|
||||
--dark: 22, 22, 22;
|
||||
--hljs-bg: #111;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--light: 22, 22, 22;
|
||||
--dark: 255, 255, 255;
|
||||
--hljs-bg: #282828;
|
||||
}
|
||||
|
||||
html {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
body {
|
||||
--white: rgba(var(--light), 1);
|
||||
--black: rgba(var(--dark), 1);
|
||||
|
||||
--pro: rgba(var(--dark), 1);
|
||||
--lit: rgba(var(--dark), 0.64);
|
||||
--air: rgba(var(--dark), 0.48);
|
||||
--fog: rgba(var(--dark), 0.12);
|
||||
|
||||
margin: 0;
|
||||
padding-inline: var(--gap);
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
|
||||
'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
font-size: 2rem;
|
||||
line-height: 1.8;
|
||||
color: var(--pro);
|
||||
word-break: break-word;
|
||||
background: var(--white);
|
||||
transition: background 0.4s ease-out;
|
||||
}
|
||||
|
||||
.not-ready,
|
||||
.not-ready *,
|
||||
.not-ready *::before {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
html {
|
||||
font-size: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Reset
|
||||
-------------------------------------------------- */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0;
|
||||
font-size: inherit;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
strong,
|
||||
b {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
textarea {
|
||||
padding: 0;
|
||||
font: inherit;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
button,
|
||||
input[type='button'],
|
||||
input[type='submit'] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
input:-webkit-autofill,
|
||||
textarea:-webkit-autofill {
|
||||
box-shadow: 0 0 0 6rem var(--white) inset;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* Header
|
||||
-------------------------------------------------- */
|
||||
.header {
|
||||
display: flex;
|
||||
max-width: var(--wide);
|
||||
height: var(--header);
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.header a {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
min-width: calc(var(--side) - var(--gap));
|
||||
margin-right: var(--gap);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.site-name {
|
||||
padding-bottom: 0.6rem;
|
||||
font-size: 3.5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.btn-theme {
|
||||
width: 3rem;
|
||||
margin-left: 2rem;
|
||||
overflow: hidden;
|
||||
font-size: 3rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-theme::before {
|
||||
white-space: nowrap;
|
||||
content: '☀️🌕🌖🌗🌘🌑🌙';
|
||||
transition: transform 0.4s steps(6);
|
||||
}
|
||||
|
||||
.dark .btn-theme::before {
|
||||
transform: translateX(-18rem);
|
||||
}
|
||||
|
||||
.menu {
|
||||
display: flex;
|
||||
margin-right: var(--gap);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.menu a + a {
|
||||
margin-left: var(--gap);
|
||||
}
|
||||
|
||||
.social-icon {
|
||||
width: 3rem;
|
||||
margin-left: 3rem;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.social-icon:first-of-type {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.social-icon.twitter {
|
||||
background-image: url('/twitter.svg');
|
||||
}
|
||||
|
||||
.social-icon.github {
|
||||
background-image: url('/github.svg');
|
||||
}
|
||||
|
||||
.social-icon.instagram {
|
||||
background-image: url('/instagram.svg');
|
||||
}
|
||||
|
||||
.dark .social-icon {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
.logo {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
[data-menu='true'] {
|
||||
--header: 16rem;
|
||||
}
|
||||
|
||||
[data-menu='true'] .header {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
[data-menu='true'] .header > * {
|
||||
height: calc(var(--header) / 2);
|
||||
}
|
||||
|
||||
[data-menu='true'] .menu {
|
||||
position: absolute;
|
||||
inset: auto 0 0;
|
||||
margin-right: 0;
|
||||
border-bottom: 1px solid var(--fog);
|
||||
}
|
||||
}
|
||||
|
||||
/* Main
|
||||
-------------------------------------------------- */
|
||||
.main {
|
||||
max-width: var(--narrow);
|
||||
min-height: calc(100vh - var(--header) - var(--footer));
|
||||
padding-block: var(--y-gap);
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin-bottom: calc(var(--y-gap) - 1rem);
|
||||
font-size: 4rem;
|
||||
font-weight: 400;
|
||||
color: var(--air);
|
||||
}
|
||||
|
||||
.page-nav {
|
||||
display: flex;
|
||||
margin-top: 5rem;
|
||||
}
|
||||
|
||||
.page-nav a {
|
||||
line-height: 5.5rem;
|
||||
color: var(--white);
|
||||
background: var(--black);
|
||||
border-radius: 0.5rem;
|
||||
padding-inline: 2.5rem;
|
||||
}
|
||||
|
||||
.page-nav .next {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* Post entry
|
||||
-------------------------------------------------- */
|
||||
.post-entry {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-block: 2rem;
|
||||
transition: transform 0.1s;
|
||||
}
|
||||
|
||||
.post-entry:first-of-type {
|
||||
margin-top: -2rem;
|
||||
}
|
||||
|
||||
.post-entry:active {
|
||||
transform: scale(0.99);
|
||||
}
|
||||
|
||||
.post-entry h2 {
|
||||
padding-right: 2rem;
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.post-entry time {
|
||||
flex-shrink: 0;
|
||||
font-size: 1.8rem;
|
||||
color: var(--air);
|
||||
}
|
||||
|
||||
.post-entry a {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
/* Post single
|
||||
-------------------------------------------------- */
|
||||
.post-title {
|
||||
display: flex;
|
||||
margin-bottom: calc(var(--y-gap) + 1rem);
|
||||
}
|
||||
|
||||
.post-title aside {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
width: var(--side);
|
||||
padding-right: var(--gap);
|
||||
margin-left: calc(var(--side) * -1);
|
||||
font-size: 1.5rem;
|
||||
color: var(--air);
|
||||
transform: translateY(0.4rem);
|
||||
}
|
||||
|
||||
.post-title h1 {
|
||||
font-size: 5rem;
|
||||
transform: translateX(-0.3rem);
|
||||
}
|
||||
|
||||
.post-tags {
|
||||
margin-top: 7rem;
|
||||
}
|
||||
|
||||
.post-tags a {
|
||||
display: inline-block;
|
||||
padding-inline: 2rem;
|
||||
line-height: 5rem;
|
||||
color: var(--lit);
|
||||
border: 1px solid var(--fog);
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.post-tags a + a {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.post-nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: var(--y-gap);
|
||||
color: var(--white);
|
||||
background: var(--black);
|
||||
margin-inline: calc(var(--gap) * -1);
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.post-nav a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 50%;
|
||||
padding: var(--gap);
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.post-nav a span + span {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.post-nav .prev {
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.post-nav .next {
|
||||
justify-content: flex-end;
|
||||
padding-left: 1rem;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.post-comments {
|
||||
margin-top: var(--y-gap);
|
||||
}
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
.post-title {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.post-title aside {
|
||||
flex-direction: row;
|
||||
width: auto;
|
||||
padding-right: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-left: 0;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.post-title aside span::before {
|
||||
content: '·';
|
||||
margin-inline: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post content
|
||||
-------------------------------------------------- */
|
||||
.post-content {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
.post-content h1,
|
||||
.post-content h2,
|
||||
.post-content h3,
|
||||
.post-content h4,
|
||||
.post-content h5,
|
||||
.post-content h6 {
|
||||
margin-block: 3rem;
|
||||
}
|
||||
|
||||
.post-content h1 {
|
||||
margin-top: var(--y-gap);
|
||||
font-size: 5rem;
|
||||
}
|
||||
|
||||
.post-content h2 {
|
||||
margin-top: 6rem;
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
.post-content h3 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.post-content h4 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.post-content h5 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.post-content h6 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.post-content a {
|
||||
padding-bottom: 1px;
|
||||
border-bottom: 1.5px solid var(--pro);
|
||||
}
|
||||
|
||||
.post-content a code {
|
||||
margin-inline: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.post-content del {
|
||||
text-decoration: none;
|
||||
background: linear-gradient(to right, var(--pro) 100%, transparent 0) 0 50% / 1px 1px repeat-x;
|
||||
}
|
||||
|
||||
.post-content p,
|
||||
.post-content ul,
|
||||
.post-content ol,
|
||||
.post-content dl {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.post-content ul,
|
||||
.post-content ol {
|
||||
padding-left: 2.5rem;
|
||||
}
|
||||
|
||||
.post-content li {
|
||||
margin-top: 0.6rem;
|
||||
}
|
||||
|
||||
.post-content li p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.post-content dl {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post-content dt {
|
||||
width: 25%;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.post-content dd {
|
||||
width: 75%;
|
||||
padding-left: 1.3rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.post-content dt ~ dt,
|
||||
.post-content dd ~ dd {
|
||||
margin-top: 1.3rem;
|
||||
}
|
||||
|
||||
.post-content table {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.post-content table th,
|
||||
.post-content table:not(.highlighttable) td {
|
||||
min-width: 10rem;
|
||||
padding: 1.5rem 1rem;
|
||||
line-height: 1.5;
|
||||
border-bottom: 1px solid var(--fog);
|
||||
}
|
||||
|
||||
.post-content table th {
|
||||
font-size: 1.6rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.post-content table:not(.highlighttable) td code:only-of-type {
|
||||
margin-inline: 0;
|
||||
}
|
||||
|
||||
.post-content .highlight,
|
||||
.post-content pre {
|
||||
margin: 0 calc(var(--gap) * -1) 4rem;
|
||||
overflow-x: auto;
|
||||
background: var(--hljs-bg) !important;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.post-content ul pre {
|
||||
margin-left: calc(var(--gap) * -2);
|
||||
}
|
||||
|
||||
.post-content .highlight pre {
|
||||
margin-inline: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* table */
|
||||
.post-content .highlighttable {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.post-content .highlighttable td:first-of-type {
|
||||
width: 5rem;
|
||||
}
|
||||
|
||||
.post-content .highlighttable td .linenodiv {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
.post-content .highlighttable td .linenodiv pre,
|
||||
.post-content .highlighttable td .highlight {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.post-content .highlighttable td .highlight pre code::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* inline */
|
||||
.post-content .highlight span {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.post-content code {
|
||||
padding: 0.5rem 1rem;
|
||||
margin-inline: 0.5rem;
|
||||
font-family: Menlo, Monaco, 'Courier New', Courier, monospace;
|
||||
font-size: 0.8em;
|
||||
line-height: 1.5;
|
||||
background: rgba(var(--dark), 0.06);
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
|
||||
.post-content pre code {
|
||||
display: block;
|
||||
padding: var(--gap);
|
||||
margin-inline: 0;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.post-content blockquote {
|
||||
padding: 0 0 0 calc(var(--gap) - 0.4rem);
|
||||
margin: 0 0 0 calc(var(--gap) * -1);
|
||||
border-left: 0.4rem solid var(--pro);
|
||||
}
|
||||
|
||||
.post-content hr {
|
||||
height: 1px;
|
||||
margin-block: 8rem;
|
||||
background: var(--fog);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.post-content iframe {
|
||||
width: 100%;
|
||||
background: var(--black);
|
||||
}
|
||||
|
||||
/* Footer
|
||||
-------------------------------------------------- */
|
||||
.footer {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
max-width: var(--narrow);
|
||||
min-height: var(--footer);
|
||||
font-size: 1.6rem;
|
||||
color: var(--lit);
|
||||
border-top: 1px solid var(--fog);
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.footer p + p::before {
|
||||
content: '·';
|
||||
margin-inline: 0.6rem;
|
||||
}
|
||||
|
||||
.footer a:hover {
|
||||
color: var(--pro);
|
||||
border-bottom: 1px solid var(--pro);
|
||||
}
|
||||
|
||||
/* 404
|
||||
-------------------------------------------------- */
|
||||
.not-found {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 70vh;
|
||||
font-size: 16rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
1
assets/custom.css
Normal file
1
assets/custom.css
Normal file
|
|
@ -0,0 +1 @@
|
|||
/* Place custom css here. */
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
{{- partial "header.html" . }}
|
||||
{{ partial "header.html" . }}
|
||||
<div class="not-found">404</div>
|
||||
{{- partial "footer.html" . }}
|
||||
{{ partial "footer.html" . }}
|
||||
|
|
|
|||
|
|
@ -1,45 +1,32 @@
|
|||
{{- partial "header.html" . }}
|
||||
{{ partial "header.html" . }}
|
||||
|
||||
{{- $scope := .Site }}
|
||||
{{- if .Title }}
|
||||
<header class="page-header"><h1>{{ .Title }}</h1></header>{{ $scope = . }}
|
||||
{{ if .Title }}
|
||||
<h1 class="page-title">{{ .Title }}</h1>
|
||||
{{ end }}
|
||||
|
||||
{{- $paginator := .Paginate (where $scope.RegularPages ".Params.type" "!=" "page") }}
|
||||
{{ $pages := union .RegularPages .Sections }}
|
||||
{{ if .IsHome }}
|
||||
{{ $pages = where site.RegularPages "Type" "in" site.Params.mainSections }}
|
||||
{{ end }}
|
||||
{{ $paginator := .Paginate $pages }}
|
||||
|
||||
{{- range $index, $page := $paginator.Pages }}
|
||||
|
||||
{{- $class := "post-entry" }}
|
||||
{{- if (and $.IsHome (eq $paginator.PageNumber 1) (eq $index 0)) }}
|
||||
{{- $class = "first-entry" }}
|
||||
{{- else if .Data.Term }}
|
||||
{{- $class = "post-entry tag-entry" }}
|
||||
{{- end }}
|
||||
<article class="{{ $class }}">
|
||||
<header class="entry-header">
|
||||
{{ range $index, $page := $paginator.Pages }}
|
||||
<article class="post-entry">
|
||||
<h2>{{ .Title }}</h2>
|
||||
</header>
|
||||
<section class="entry-content">
|
||||
<p>{{ .Summary | plainify | htmlUnescape }}...</p>
|
||||
</section>
|
||||
<footer class="entry-footer">
|
||||
<time>{{ .Date.Format "January 2, 2006" }}</time>
|
||||
</footer>
|
||||
<a class="entry-link" href="{{ .Permalink }}"></a>
|
||||
<a href="{{ .Permalink }}"></a>
|
||||
</article>
|
||||
{{- end }}
|
||||
{{ end }}
|
||||
|
||||
{{- if gt $paginator.TotalPages 1 }}
|
||||
<footer class="page-footer">
|
||||
<nav class="pagination">
|
||||
{{- if $paginator.HasPrev }}
|
||||
{{ if gt $paginator.TotalPages 1 }}
|
||||
<nav class="page-nav">
|
||||
{{ if $paginator.HasPrev }}
|
||||
<a class="prev" href="{{ $paginator.Prev.URL }}">← {{ i18n "prev_page" }}</a>
|
||||
{{- end }}
|
||||
{{- if $paginator.HasNext }}
|
||||
{{ end }}
|
||||
{{ if $paginator.HasNext }}
|
||||
<a class="next" href="{{ $paginator.Next.URL }}">{{ i18n "next_page" }} →</a>
|
||||
{{- end }}
|
||||
{{ end }}
|
||||
</nav>
|
||||
</footer>
|
||||
{{- end }}
|
||||
{{ end }}
|
||||
|
||||
{{- partial "footer.html" . }}
|
||||
{{ partial "footer.html" . }}
|
||||
|
|
|
|||
|
|
@ -1,45 +1,50 @@
|
|||
{{- partial "header.html" . }}
|
||||
{{ partial "header.html" . }}
|
||||
|
||||
<article class="post-single">
|
||||
<header class="post-header">
|
||||
<h1 class="post-title">{{ .Title }}</h1>
|
||||
<div class="post-meta">
|
||||
{{- if or .Params.Author .Site.Author.name }}
|
||||
{{- .Params.Author | default .Site.Author.name }} · {{ end }}
|
||||
{{- .Date.Format "January 2, 2006" -}}
|
||||
</div>
|
||||
<header class="post-title">
|
||||
<aside>
|
||||
<time>{{ .Date.Format "January 2, 2006" }}</time>
|
||||
{{ if or .Params.Author site.Author.name }}
|
||||
<span>{{ .Params.Author | default site.Author.name }}</span>
|
||||
{{ end }}
|
||||
</aside>
|
||||
|
||||
<h1>{{ .Title }}</h1>
|
||||
</header>
|
||||
<div class="post-content">{{ .Content }}</div>
|
||||
{{- if .Params.tags }}
|
||||
<footer class="post-footer">
|
||||
<ul class="post-tags">
|
||||
{{- range .Params.tags }}
|
||||
{{- $href := print (absURL "tags/") (urlize .) }}
|
||||
<li><a href="{{ $href }}">{{ . }}</a></li>
|
||||
{{- end }}
|
||||
</ul>
|
||||
|
||||
<section class="post-content">{{ .Content }}</section>
|
||||
|
||||
{{ if .Params.tags }}
|
||||
<footer class="post-tags">
|
||||
{{ range .Params.tags }}
|
||||
{{ $href := print (absURL "tags/") (urlize .) }}
|
||||
<a href="{{ $href }}">{{ . }}</a>
|
||||
{{ end }}
|
||||
</footer>
|
||||
{{- end }}
|
||||
<!-- Comments area start -->
|
||||
{{- if not (eq .Params.comments false) }}
|
||||
{{- if .Site.DisqusShortname }}
|
||||
<div id="disqus_thread"></div>
|
||||
{{ end }}
|
||||
|
||||
{{ $pages := where site.RegularPages "Type" "in" site.Params.mainSections }}
|
||||
{{ if and (gt (len $pages) 1) (in $pages . ) }}
|
||||
<nav class="post-nav">
|
||||
{{ with $pages.Next . }}
|
||||
<a class="prev" href="{{ .Permalink }}"><span>←</span><span>{{ .Name }}</span></a>
|
||||
{{ end }}
|
||||
{{ with $pages.Prev . }}
|
||||
<a class="next" href="{{ .Permalink }}"><span>{{ .Name }}</span><span>→</span></a>
|
||||
{{ end }}
|
||||
</nav>
|
||||
{{ end }}
|
||||
|
||||
{{ if and site.DisqusShortname (not (eq .Params.comments false)) }}
|
||||
<div id="disqus_thread" class="post-comments"></div>
|
||||
<script>
|
||||
var disqus_shortname = '{{ .Site.DisqusShortname }}';
|
||||
(function() {
|
||||
var d = document, s = d.createElement('script');
|
||||
s.src = 'https://' + disqus_shortname + '.disqus.com/embed.js';
|
||||
s.setAttribute('data-timestamp', +new Date());
|
||||
(d.head || d.body).appendChild(s);
|
||||
})();
|
||||
var disqusShortname = '{{ site.DisqusShortname }}';
|
||||
var script = document.createElement('script');
|
||||
script.src = 'https://' + disqusShortname + '.disqus.com/embed.js';
|
||||
script.setAttribute('data-timestamp', +new Date());
|
||||
document.head.appendChild(script);
|
||||
</script>
|
||||
<noscript>
|
||||
Please enable JavaScript to view the
|
||||
<a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a>
|
||||
</noscript>
|
||||
<!-- Comments area end -->
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
{{ end }}
|
||||
</article>
|
||||
|
||||
{{- partial "footer.html" . }}
|
||||
{{ partial "footer.html" . }}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,8 @@
|
|||
</main>
|
||||
<footer class="footer">
|
||||
<span>© {{ now.Year }} <a href="{{ "" | absURL }}">{{ .Site.Title }}</a></span>
|
||||
<span>·</span>
|
||||
<span>Powered by <a href="https://gohugo.io/" rel="noopener" target="_blank">Hugo️️</a>️</span>
|
||||
<span>·</span>
|
||||
<span>Theme️ <a href="https://github.com/nanxiaobei/hugo-paper" rel="noopener" target="_blank">Paper</a></span>
|
||||
<p>© {{ now.Year }} <a href="{{ "" | absURL }}">{{ site.Title }}</a></p>
|
||||
<p>Powered by <a href="https://gohugo.io/" rel="noopener" target="_blank">Hugo️️</a>️</p>
|
||||
<p><a href="https://github.com/nanxiaobei/hugo-paper" rel="noopener" target="_blank">Paper 5.0</a></p>
|
||||
</footer>
|
||||
<script src="{{ "highlight.min.js" | absURL }}"></script>
|
||||
<script>
|
||||
hljs.initHighlightingOnLoad();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,105 +1,114 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{ .Site.LanguageCode }}">
|
||||
<html lang="{{ site.LanguageCode }}">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
|
||||
<!-- Title -->
|
||||
<title>{{ if not .IsHome }}{{ .Title }} - {{ end }}{{ .Site.Title }}</title>
|
||||
<title>{{ if not .IsHome }}{{ .Title }} - {{ end }}{{ site.Title }}</title>
|
||||
|
||||
<!-- Meta -->
|
||||
{{- if eq .Kind "page" }}
|
||||
{{ if eq .Kind "page" }}
|
||||
<meta name="description" content="{{ .Summary }}">
|
||||
<meta name="author" content="{{ .Params.Author | default .Site.Author.name }}">
|
||||
{{- else }}
|
||||
<meta name="description" content="{{ .Site.Params.description }}">
|
||||
<meta name="author" content="{{ .Site.Author.name }}">
|
||||
{{- end }}
|
||||
<!-- Styles -->
|
||||
<link href="{{ "an-old-hope.min.css" | absURL }}" rel="stylesheet">
|
||||
<link href="{{ "style.css" | absURL }}" rel="stylesheet">
|
||||
<link href="{{ "custom.css" | absURL }}" rel="stylesheet">
|
||||
<meta name="author" content="{{ .Params.Author | default site.Author.name }}">
|
||||
{{ else }}
|
||||
<meta name="description" content="{{ site.Params.description }}">
|
||||
<meta name="author" content="{{ site.Author.name }}">
|
||||
{{ end }}
|
||||
|
||||
<!-- Styles & Scripts -->
|
||||
{{ $app_css := resources.Get "app.css" }}
|
||||
{{ $custom_css := resources.Get "custom.css" }}
|
||||
{{ $css := slice $app_css $custom_css | resources.Concat "app.css" | minify }}
|
||||
<link rel="preload stylesheet" as="style" href="{{ $css.Permalink }}">
|
||||
|
||||
{{ if and .IsPage (not site.Params.disableHLJS) }}
|
||||
<link rel="preload stylesheet" as="style" href="{{ `an-old-hope.min.css` | absURL }}">
|
||||
<script defer src="{{ `highlight.min.js` | absURL }}" onload="hljs.initHighlightingOnLoad();"></script>
|
||||
{{ end }}
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="{{ "apple-touch-icon.png" | absURL }}">
|
||||
<link rel="icon" href="{{ "favicon.ico" | absURL }}">
|
||||
<link rel="icon" href="{{ `favicon.ico` | absURL }}">
|
||||
<link rel="apple-touch-icon" href="{{ `apple-touch-icon.png` | absURL }}">
|
||||
|
||||
<!-- Generator -->
|
||||
{{- hugo.Generator }}
|
||||
{{ hugo.Generator }}
|
||||
|
||||
<!-- RSS -->
|
||||
{{ range .AlternativeOutputFormats -}}
|
||||
{{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
|
||||
{{ end -}}
|
||||
{{ range .AlternativeOutputFormats }}
|
||||
<link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink }}" title="{{ site.Title }}">
|
||||
{{ end }}
|
||||
|
||||
<!-- Misc -->
|
||||
{{- if eq (getenv "HUGO_ENV") "production" | or (eq .Site.Params.env "production") }}
|
||||
{{- template "_internal/google_analytics_async.html" . }}
|
||||
{{- template "_internal/opengraph.html" . }}
|
||||
{{- end }}
|
||||
<!-- Script -->
|
||||
<script>
|
||||
function setTheme() {
|
||||
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
document.body.classList.add('dark');
|
||||
return;
|
||||
}
|
||||
|
||||
const time = new Date();
|
||||
const prev = localStorage.getItem('date');
|
||||
const date = String(time.getMonth() + 1) + '.' + String(time.getDate());
|
||||
|
||||
const now = time.getTime();
|
||||
let sunrise;
|
||||
let sunset;
|
||||
|
||||
function setBodyClass() {
|
||||
if (now > sunrise && now < sunset) return;
|
||||
document.body.classList.add('dark');
|
||||
}
|
||||
|
||||
if (date !== prev) {
|
||||
fetch('https://api.ipgeolocation.io/astronomy?apiKey=5ed37d85103e4defa5df4c5298ed5215')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
sunrise = data.sunrise.split(':').map(Number);
|
||||
sunset = data.sunset.split(':').map(Number);
|
||||
})
|
||||
.catch(() => {
|
||||
sunrise = [7, 0];
|
||||
sunset = [19, 0];
|
||||
})
|
||||
.finally(() => {
|
||||
sunrise = time.setHours(sunrise[0], sunrise[1], 0);
|
||||
sunset = time.setHours(sunset[0], sunset[1], 0);
|
||||
setBodyClass();
|
||||
localStorage.setItem('sunrise', sunrise);
|
||||
localStorage.setItem('sunset', sunset);
|
||||
});
|
||||
localStorage.setItem('date', date);
|
||||
} else {
|
||||
sunrise = Number(localStorage.getItem('sunrise'));
|
||||
sunset = Number(localStorage.getItem('sunset'));
|
||||
setBodyClass();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
{{ if hugo.IsProduction | eq site.Params.env "production" }}
|
||||
{{ template "_internal/google_analytics_async.html" . }}
|
||||
{{ template "_internal/google_news.html" . }}
|
||||
{{ template "_internal/opengraph.html" . }}
|
||||
{{ template "_internal/schema.html" . }}
|
||||
{{ template "_internal/twitter_cards.html" . }}
|
||||
{{ end }}
|
||||
</head>
|
||||
<body class="{{ if eq .Kind `page` }}single{{ else }}list{{ if .IsHome }} home{{ end }}{{ end }}">
|
||||
<script>
|
||||
setTheme();
|
||||
</script>
|
||||
|
||||
<body class="not-ready" data-menu="{{ isset site.Menus `main` }}">
|
||||
<header class="header">
|
||||
<nav class="nav">
|
||||
{{- if .IsHome }}
|
||||
<h1 class="logo"><a href="{{ "" | absURL }}">{{ .Site.Title }}</a></h1>
|
||||
{{- else }}
|
||||
<p class="logo"><a href="{{ "" | absURL }}">{{ .Site.Title }}</a></p>
|
||||
{{- end }}
|
||||
{{- if .Site.Menus.main }}
|
||||
<ul class="menu">
|
||||
{{- range .Site.Menus.main }}
|
||||
<li>
|
||||
{{ $tag := cond .IsHome "h1" "p" }}
|
||||
{{ printf `
|
||||
<%s class="logo">
|
||||
<a class="site-name" href="%s">%s</a>
|
||||
<a class="btn-theme"></a>
|
||||
</%s>
|
||||
` $tag ("" | absURL) site.Title $tag | safeHTML }}
|
||||
|
||||
<script>
|
||||
const bodyClass = document.body.classList;
|
||||
const schemeDark = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
const buttonDark = document.querySelector('.btn-theme');
|
||||
|
||||
const setDark = () => {
|
||||
bodyClass.add('dark');
|
||||
localStorage.setItem('dark', 'true');
|
||||
};
|
||||
|
||||
const setLight = () => {
|
||||
bodyClass.remove('dark');
|
||||
localStorage.removeItem('dark');
|
||||
};
|
||||
|
||||
if (schemeDark.matches || localStorage.getItem('dark')) setDark();
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
bodyClass.remove('not-ready');
|
||||
});
|
||||
|
||||
schemeDark.addEventListener('change', event => {
|
||||
event.matches ? setDark() : setLight();
|
||||
});
|
||||
|
||||
buttonDark.addEventListener('click', () => {
|
||||
bodyClass.contains('dark') ? setLight() : setDark();
|
||||
});
|
||||
</script>
|
||||
|
||||
{{ if site.Menus.main }}
|
||||
<nav class="menu">
|
||||
{{ range site.Menus.main }}
|
||||
<a href="{{ .URL }}">{{ .Name }}</a>
|
||||
</li>
|
||||
{{- end }}
|
||||
</ul>
|
||||
{{- end }}
|
||||
{{ end }}
|
||||
</nav>
|
||||
{{ end }}
|
||||
|
||||
{{ if site.Params.twitter }}
|
||||
<a class="social-icon twitter" href="https://twitter.com/{{ site.Params.twitter }}" target="_blank"></a>
|
||||
{{ end }}
|
||||
|
||||
{{ if site.Params.github }}
|
||||
<a class="social-icon github" href="https://github.com/{{ site.Params.github }}" target="_blank"></a>
|
||||
{{ end }}
|
||||
|
||||
{{ if site.Params.instagram }}
|
||||
<a class="social-icon instagram" href="https://www.instagram.com/{{ site.Params.instagram }}/" target="_blank"></a>
|
||||
{{ end }}
|
||||
|
||||
</header>
|
||||
<main class="main">
|
||||
|
|
|
|||
|
|
@ -6,7 +6,10 @@
|
|||
{{ else }}
|
||||
{{ errorf "missing value for param 'content': %s" .Position }}
|
||||
{{ end }}
|
||||
<p><details {{ if (eq (.Get "openByDefault") true) }} open=true {{ end }}>
|
||||
|
||||
<p>
|
||||
<details {{ if (eq (.Get "openByDefault") true) }}open=true{{ end }}>
|
||||
<summary markdown="span">{{ .Get "summary" | markdownify }}</summary>
|
||||
{{ .Get "content" | markdownify }}
|
||||
</details></p>
|
||||
</details>
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
/* Place a custom css file in your own project to use this. */
|
||||
1
static/github.svg
Normal file
1
static/github.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg viewBox="-0.7 -0.9 17.4 17.4" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" /></svg>
|
||||
|
After Width: | Height: | Size: 658 B |
2
static/highlight.min.js
vendored
2
static/highlight.min.js
vendored
File diff suppressed because one or more lines are too long
1
static/instagram.svg
Normal file
1
static/instagram.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg viewBox="-1.5 -2.8 53 53" xmlns="http://www.w3.org/2000/svg"><path d="M25 1c-6.52 0-7.34.03-9.9.14-2.55.12-4.3.53-5.82 1.12a11.76 11.76 0 0 0-4.25 2.77 11.76 11.76 0 0 0-2.77 4.25c-.6 1.52-1 3.27-1.12 5.82C1.03 17.66 1 18.48 1 25c0 6.5.03 7.33.14 9.88.12 2.56.53 4.3 1.12 5.83a11.76 11.76 0 0 0 2.77 4.25 11.76 11.76 0 0 0 4.25 2.77c1.52.59 3.27 1 5.82 1.11 2.56.12 3.38.14 9.9.14 6.5 0 7.33-.02 9.88-.14 2.56-.12 4.3-.52 5.83-1.11a11.76 11.76 0 0 0 4.25-2.77 11.76 11.76 0 0 0 2.77-4.25c.59-1.53 1-3.27 1.11-5.83.12-2.55.14-3.37.14-9.89 0-6.51-.02-7.33-.14-9.89-.12-2.55-.52-4.3-1.11-5.82a11.76 11.76 0 0 0-2.77-4.25 11.76 11.76 0 0 0-4.25-2.77c-1.53-.6-3.27-1-5.83-1.12A170.2 170.2 0 0 0 25 1zm0 4.32c6.4 0 7.16.03 9.69.14 2.34.11 3.6.5 4.45.83 1.12.43 1.92.95 2.76 1.8a7.43 7.43 0 0 1 1.8 2.75c.32.85.72 2.12.82 4.46.12 2.53.14 3.29.14 9.7 0 6.4-.02 7.16-.14 9.69-.1 2.34-.5 3.6-.82 4.45a7.43 7.43 0 0 1-1.8 2.76 7.43 7.43 0 0 1-2.76 1.8c-.84.32-2.11.72-4.45.82-2.53.12-3.3.14-9.7.14-6.4 0-7.16-.02-9.7-.14-2.33-.1-3.6-.5-4.45-.82a7.43 7.43 0 0 1-2.76-1.8 7.43 7.43 0 0 1-1.8-2.76c-.32-.84-.71-2.11-.82-4.45a166.5 166.5 0 0 1-.14-9.7c0-6.4.03-7.16.14-9.7.11-2.33.5-3.6.83-4.45a7.43 7.43 0 0 1 1.8-2.76 7.43 7.43 0 0 1 2.75-1.8c.85-.32 2.12-.71 4.46-.82 2.53-.11 3.29-.14 9.7-.14zm0 7.35a12.32 12.32 0 1 0 0 24.64 12.32 12.32 0 0 0 0-24.64zM25 33a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm15.68-20.8a2.88 2.88 0 1 0-5.76 0 2.88 2.88 0 0 0 5.76 0z" /></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
529
static/style.css
529
static/style.css
|
|
@ -1,529 +0,0 @@
|
|||
/*
|
||||
* Paper
|
||||
* A simple, clean, flexible Hugo theme
|
||||
* https://github.com/nanxiaobei/hugo-paper
|
||||
* Designed by MR.LEE (https://mrlee.me/)
|
||||
* Updated in 2020.6.12
|
||||
*/
|
||||
|
||||
/* Theme
|
||||
-------------------------------------------------- */
|
||||
:root {
|
||||
--gap: 24px;
|
||||
--content-gap: 40px;
|
||||
--nav-width: 1024px;
|
||||
--main-width: 640px;
|
||||
--header-height: 60px;
|
||||
--footer-height: 60px;
|
||||
--radius: 8px;
|
||||
|
||||
--theme: #fff;
|
||||
--entry: #fff;
|
||||
--primary: rgba(0, 0, 0, 0.88);
|
||||
--secondary: rgba(0, 0, 0, 0.56);
|
||||
--tertiary: rgba(0, 0, 0, 0.16);
|
||||
--content: rgba(0, 0, 0, 0.88);
|
||||
|
||||
--hljs-bg: #1c1d21;
|
||||
--code-bg: #f5f5f5;
|
||||
--border: #eee;
|
||||
}
|
||||
.dark {
|
||||
--theme: #1d1e20;
|
||||
--entry: #2e2e33;
|
||||
--primary: rgba(255, 255, 255, 0.84);
|
||||
--secondary: rgba(255, 255, 255, 0.56);
|
||||
--tertiary: rgba(255, 255, 255, 0.16);
|
||||
--content: rgba(255, 255, 255, 0.64);
|
||||
|
||||
--hljs-bg: #2e2e33;
|
||||
--code-bg: #37383e;
|
||||
--border: #5b5d67;
|
||||
}
|
||||
.list {
|
||||
background: var(--code-bg);
|
||||
}
|
||||
.dark.list {
|
||||
background: var(--theme);
|
||||
}
|
||||
/* Reset
|
||||
-------------------------------------------------- */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
color: var(--primary);
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
|
||||
'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
font-size: 18px;
|
||||
line-height: 1.8;
|
||||
word-break: break-word;
|
||||
background: var(--theme);
|
||||
}
|
||||
article,
|
||||
aside,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
color: var(--primary);
|
||||
line-height: 1.2;
|
||||
}
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
strong,
|
||||
b {
|
||||
font-weight: 500;
|
||||
}
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
a {
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
button,
|
||||
input,
|
||||
textarea {
|
||||
padding: 0;
|
||||
font: inherit;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
button,
|
||||
input[type='button'],
|
||||
input[type='submit'] {
|
||||
cursor: pointer;
|
||||
}
|
||||
input,
|
||||
textarea {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
}
|
||||
input:-webkit-autofill,
|
||||
textarea:-webkit-autofill {
|
||||
box-shadow: 0 0 0 50px var(--theme) inset;
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
/* Header
|
||||
-------------------------------------------------- */
|
||||
.nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
max-width: calc(var(--nav-width) + var(--gap) * 2);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.nav a {
|
||||
display: block;
|
||||
line-height: var(--header-height);
|
||||
}
|
||||
.logo,
|
||||
.menu {
|
||||
margin-left: var(--gap);
|
||||
margin-right: var(--gap);
|
||||
}
|
||||
.logo a {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.menu {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
word-break: keep-all;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.menu li + li {
|
||||
margin-left: var(--gap);
|
||||
}
|
||||
.menu a {
|
||||
font-size: 16px;
|
||||
}
|
||||
/* Main
|
||||
-------------------------------------------------- */
|
||||
.main {
|
||||
position: relative;
|
||||
min-height: calc(100vh - var(--header-height) - var(--footer-height));
|
||||
max-width: calc(var(--main-width) + var(--gap) * 2);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: var(--gap);
|
||||
}
|
||||
.page-header {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.page-header h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
.pagination {
|
||||
display: flex;
|
||||
}
|
||||
.pagination a {
|
||||
color: var(--theme);
|
||||
font-size: 13px;
|
||||
line-height: 36px;
|
||||
background: var(--primary);
|
||||
border-radius: calc(36px / 2);
|
||||
}
|
||||
.pagination .prev {
|
||||
padding-left: 16px;
|
||||
padding-right: 18px;
|
||||
}
|
||||
.pagination .next {
|
||||
margin-left: auto;
|
||||
padding-left: 18px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
/* Post entry
|
||||
-------------------------------------------------- */
|
||||
.first-entry {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: 320px;
|
||||
margin-bottom: var(--header-height);
|
||||
}
|
||||
.first-entry .entry-header {
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
.first-entry .entry-header h2 {
|
||||
font-size: 40px;
|
||||
}
|
||||
.first-entry .entry-content {
|
||||
margin-top: 14px;
|
||||
margin-bottom: 14px;
|
||||
font-size: 16px;
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
.first-entry .entry-footer {
|
||||
font-size: 14px;
|
||||
}
|
||||
.post-entry {
|
||||
position: relative;
|
||||
margin-bottom: var(--gap);
|
||||
padding: var(--gap);
|
||||
background: var(--entry);
|
||||
border-radius: var(--radius);
|
||||
transition: transform 0.1s;
|
||||
}
|
||||
.post-entry:active {
|
||||
transform: scale(0.96);
|
||||
}
|
||||
.tag-entry .entry-content,
|
||||
.tag-entry .entry-footer {
|
||||
display: none;
|
||||
}
|
||||
.entry-header h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
.entry-content {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
color: var(--secondary);
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
.entry-footer {
|
||||
color: var(--secondary);
|
||||
font-size: 13px;
|
||||
}
|
||||
.entry-link {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
/* Post single
|
||||
-------------------------------------------------- */
|
||||
.post-header {
|
||||
margin-top: 24px;
|
||||
margin-bottom: var(--content-gap);
|
||||
}
|
||||
.post-title {
|
||||
margin-bottom: 2px;
|
||||
font-size: 40px;
|
||||
transform: translateX(-2px);
|
||||
}
|
||||
.post-meta {
|
||||
color: var(--secondary);
|
||||
font-size: 14px;
|
||||
}
|
||||
.post-content {
|
||||
color: var(--content);
|
||||
}
|
||||
.post-content h1 {
|
||||
margin-top: 40px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.post-content h2 {
|
||||
margin-top: 32px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.post-content h3,
|
||||
.post-content h4,
|
||||
.post-content h5,
|
||||
.post-content h6 {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.post-content h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
.post-content h2 {
|
||||
font-size: 32px;
|
||||
}
|
||||
.post-content h3 {
|
||||
font-size: 24px;
|
||||
}
|
||||
.post-content h4 {
|
||||
font-size: 16px;
|
||||
}
|
||||
.post-content h5 {
|
||||
font-size: 14px;
|
||||
}
|
||||
.post-content h6 {
|
||||
font-size: 12px;
|
||||
}
|
||||
.post-content a {
|
||||
box-shadow: 0 1px 0 var(--primary);
|
||||
}
|
||||
.post-content a code {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: 0 -1px 0 var(--primary) inset;
|
||||
}
|
||||
.post-content del {
|
||||
text-decoration: none;
|
||||
background: linear-gradient(to right, var(--primary) 100%, transparent 0) 0 50% / 1px 1px repeat-x;
|
||||
}
|
||||
.post-content p,
|
||||
.post-content ul,
|
||||
.post-content ol,
|
||||
.post-content dl {
|
||||
margin-bottom: var(--content-gap);
|
||||
}
|
||||
.post-content ul,
|
||||
.post-content ol {
|
||||
padding-left: 20px;
|
||||
}
|
||||
.post-content li {
|
||||
margin-top: 5px;
|
||||
}
|
||||
.post-content li p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.post-content dl {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0;
|
||||
}
|
||||
.post-content dt {
|
||||
width: 25%;
|
||||
font-weight: 700;
|
||||
}
|
||||
.post-content dd {
|
||||
width: 75%;
|
||||
margin-left: 0;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.post-content dt ~ dt,
|
||||
.post-content dd ~ dd {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.post-content table {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.post-content table th,
|
||||
.post-content table:not(.highlighttable) td {
|
||||
min-width: 80px;
|
||||
padding: 12px 8px;
|
||||
line-height: 1.5;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.post-content table th {
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
.post-content table:not(.highlighttable) td code:only-child {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
.post-content .highlight,
|
||||
.post-content pre {
|
||||
margin-left: calc(var(--gap) * -1);
|
||||
margin-right: calc(var(--gap) * -1);
|
||||
margin-bottom: 32px;
|
||||
background: var(--hljs-bg) !important;
|
||||
border-radius: var(--radius);
|
||||
overflow-x: auto;
|
||||
}
|
||||
.post-content ul pre {
|
||||
margin-left: calc(var(--gap) * -2);
|
||||
}
|
||||
.post-content .highlight pre {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
/* table */
|
||||
.post-content .highlighttable {
|
||||
table-layout: fixed;
|
||||
}
|
||||
.post-content .highlighttable td:first-child {
|
||||
width: 40px;
|
||||
}
|
||||
.post-content .highlighttable td .linenodiv {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
.post-content .highlighttable td .linenodiv pre,
|
||||
.post-content .highlighttable td .highlight {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.post-content .highlighttable td .highlight pre code::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
/* inline */
|
||||
.post-content .highlight span {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.post-content code {
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
padding: 4px 6px;
|
||||
font-family: Menlo, Monaco, 'Courier New', Courier, monospace;
|
||||
font-size: 0.78em;
|
||||
line-height: 1.5;
|
||||
background: var(--code-bg);
|
||||
border-radius: 2px;
|
||||
}
|
||||
.post-content pre code {
|
||||
display: block;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding: var(--gap);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
}
|
||||
.post-content blockquote {
|
||||
margin: 0 0 0 calc(var(--gap) * -1);
|
||||
padding: 0 0 0 21px;
|
||||
border-left: 3px solid var(--primary);
|
||||
}
|
||||
.post-content hr {
|
||||
height: 1px;
|
||||
margin-top: 56px;
|
||||
margin-bottom: 56px;
|
||||
background: var(--tertiary);
|
||||
border-top: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
.post-content iframe {
|
||||
max-width: 100%;
|
||||
}
|
||||
.post-footer {
|
||||
margin-top: 56px;
|
||||
}
|
||||
.post-tags li {
|
||||
display: inline-block;
|
||||
}
|
||||
.post-tags li + li {
|
||||
margin-left: 3px;
|
||||
}
|
||||
.post-tags a {
|
||||
display: block;
|
||||
padding-left: 14px;
|
||||
padding-right: 14px;
|
||||
color: var(--secondary);
|
||||
font-size: 14px;
|
||||
line-height: 34px;
|
||||
background: var(--code-bg);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.post-tags a:hover {
|
||||
background: var(--border);
|
||||
}
|
||||
/* Footer
|
||||
-------------------------------------------------- */
|
||||
.footer {
|
||||
max-width: calc(var(--main-width) + var(--gap) * 2);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: calc((var(--footer-height) - var(--gap)) / 2) var(--gap);
|
||||
color: var(--secondary);
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
}
|
||||
.footer span {
|
||||
margin-left: 1px;
|
||||
margin-right: 1px;
|
||||
}
|
||||
.footer a {
|
||||
color: inherit;
|
||||
}
|
||||
.footer a:hover {
|
||||
color: var(--primary);
|
||||
border-bottom: 1px solid var(--primary);
|
||||
}
|
||||
/* 404
|
||||
-------------------------------------------------- */
|
||||
.not-found {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 80%;
|
||||
font-size: 160px;
|
||||
font-weight: 700;
|
||||
}
|
||||
1
static/twitter.svg
Normal file
1
static/twitter.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg viewBox="0.9 0.5 22.8 22.8" xmlns="http://www.w3.org/2000/svg"><g><path d="M23.643 4.937c-.835.37-1.732.62-2.675.733.962-.576 1.7-1.49 2.048-2.578-.9.534-1.897.922-2.958 1.13-.85-.904-2.06-1.47-3.4-1.47-2.572 0-4.658 2.086-4.658 4.66 0 .364.042.718.12 1.06-3.873-.195-7.304-2.05-9.602-4.868-.4.69-.63 1.49-.63 2.342 0 1.616.823 3.043 2.072 3.878-.764-.025-1.482-.234-2.11-.583v.06c0 2.257 1.605 4.14 3.737 4.568-.392.106-.803.162-1.227.162-.3 0-.593-.028-.877-.082.593 1.85 2.313 3.198 4.352 3.234-1.595 1.25-3.604 1.995-5.786 1.995-.376 0-.747-.022-1.112-.065 2.062 1.323 4.51 2.093 7.14 2.093 8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602.91-.658 1.7-1.477 2.323-2.41z" /></g></svg>
|
||||
|
After Width: | Height: | Size: 703 B |
|
|
@ -12,7 +12,7 @@ min_version = "0.57.1"
|
|||
|
||||
[author]
|
||||
name = "nanxiaobei"
|
||||
homepage = "https://mrlee.me/"
|
||||
homepage = "https://lee.so/"
|
||||
|
||||
# If porting an existing theme
|
||||
[original]
|
||||
|
|
|
|||
Loading…
Reference in a new issue