diff --git a/README.md b/README.md index 721e455..272ff30 100755 --- a/README.md +++ b/README.md @@ -1,34 +1,35 @@ -

Paper

- -
+# Paper v4.1 A simple, clean, flexible Hugo theme. -Version: 4.0 +☄️ Fast | 💅 Fluent | 🍧 Smooth -
+--- ## Overview Demo: https://nanxiaobei.github.io/hugo-paper/ -Hugo: https://themes.gohugo.io/hugo-paper/ +

+ + paper + +

-![Screen shot](https://raw.githubusercontent.com/nanxiaobei/hugo-paper/master/images/screenshot.png) - -## Features - -- Blazing fast -- Fluent design -- Smooth taste +Hugo themes: https://themes.gohugo.io/hugo-paper/ ## Install Inside the folder of your Hugo site, run: ```bash -$ cd themes -$ git clone https://github.com/nanxiaobei/hugo-paper +git submodule add https://github.com/nanxiaobei/hugo-paper themes/paper +``` + +Then change `theme` in `config.toml`: + +```toml +theme = "paper" ``` For more information read the official [guide](https://gohugo.io/themes/installing-and-using-themes/) of Hugo. diff --git a/static/style.css b/static/style.css new file mode 100644 index 0000000..172d0d0 --- /dev/null +++ b/static/style.css @@ -0,0 +1,517 @@ +/* + * Paper + * A simple, clean, flexible Hugo theme + * https://github.com/nanxiaobei/hugo-paper + * Designed by MR.LEE (https://mrlee.me/) + * Updated in 2019.8.20 + */ + +/* Variables +-------------------------------------------------- */ +:root { + --gap: 24px; + --content-gap: 40px; + --nav-width: 1024px; + --main-width: 640px; + --header-height: 60px; + --footer-height: 60px; + + --radius: 8px; + + --primary: rgba(0, 0, 0, 0.88); + --secondary: rgba(0, 0, 0, 0.56); + --tertiary: rgba(0, 0, 0, 0.16); + + --hljs: #1c1d21; + --code: #f5f5f5; + --border: #eee; +} +/* 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; +} +article, +aside, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section { + display: block; +} +h1, +h2, +h3, +h4, +h5, +h6 { + margin-top: 0; + margin-bottom: 0; + 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 { + 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 #fff 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); +} +.nav .logo:only-child { + margin-left: 50%; + transform: translateX(-50%); +} +.logo a { + font-size: 24px; + font-weight: 700; +} +.menu { + display: flex; + list-style: none; + overflow-x: auto; +} +.menu li + li { + margin-left: var(--gap); +} +/* Body +-------------------------------------------------- */ +.list { + background: linear-gradient(135deg, #ccc, #ddd, #eee, #ddd, #eee); +} +.list::before { + content: ""; + position: absolute; + z-index: -1; + left: 0; + right: 0; + top: 0; + bottom: 0; +} +/* 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-top: 8px; + margin-bottom: 40px; +} +.page-header h1 { + font-size: 32px; + font-weight: 400; +} +.pagination { + display: flex; +} +.pagination a { + color: #fff; + 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); + overflow: hidden; +} +.first-entry .entry-header h2 { + font-size: 40px; +} +.first-entry .entry-content { + max-height: 75px; + 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: rgba(255, 255, 255, 0.72); + border-radius: var(--radius); + overflow: hidden; + transition: box-shadow 0.2s; +} +.post-entry:active { + background: rgba(255, 255, 255, 0.96); + transform: scale(0.96); + transition: 0.1s; +} +.entry-header h2 { + font-size: 24px; +} +.entry-content { + max-height: 44px; + margin-top: 8px; + margin-bottom: 8px; + color: var(--secondary); + font-size: 14px; + line-height: 1.6; + overflow: hidden; + text-overflow: ellipsis; + 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: 48px; +} +.post-title { + margin-bottom: 4px; + font-size: 40px; + transform: translateX(-1px); +} +.post-meta { + color: var(--secondary); + font-size: 14px; +} +.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 { + width: 100%; + margin-bottom: 32px; + border-collapse: collapse; + border-spacing: 0; +} +.post-content th, +.post-content td { + min-width: 80px; + padding: 12px 8px; + line-height: 1.5; + word-break: break-word; + border-bottom: 1px solid var(--border); +} +.post-content th { + font-size: 14px; + text-align: left; +} +.post-content td code:only-child { + margin-left: 0; + margin-right: 0; +} +.post-content pre, +.post-content .highlight { + margin: 0 calc(var(--gap) * -1) 32px; + background: var(--hljs) !important; + border-radius: var(--radius); +} +.post-content pre code { + margin-left: 0; + margin-right: 0; + padding: var(--gap); + white-space: inherit; + background: transparent; +} +.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; + white-space: pre-wrap; + background: var(--code); + border-radius: 2px; +} + +.post-content .highlight table, +.post-content .highlight pre { + margin-bottom: 0; +} +.post-content .highlight table { + width: auto; +} +.post-content .highlight pre { + margin-left: 0; + margin-right: 0; +} +.post-content .highlight table td { + min-width: auto; + padding: 0; + border-bottom: 0; +} +.post-content .highlight table td:first-child pre code { + padding-right: 16px; + color: var(--tertiary); + text-align: right; +} +.post-content .highlight table td:last-child pre code { + padding-left: 0; + overflow: hidden; +} +.post-content .highlight .ln { + margin-right: 16px; + color: var(--tertiary); +} + +.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: 48px; + margin-bottom: 48px; + 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); + border-radius: 2px; +} +.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; +}