diff options
| author | nsfisis <nsfisis@gmail.com> | 2022-11-19 14:23:32 +0900 |
|---|---|---|
| committer | nsfisis <nsfisis@gmail.com> | 2022-11-19 14:25:59 +0900 |
| commit | 6209453817da9922f28bac1bb1522c6d380630ab (patch) | |
| tree | 19e0699e751af387d549d6720ca215c8065b3c0c /public/style.css | |
| parent | 0cafa073914b5e0b162b735a7f8445fb2aa8a604 (diff) | |
| download | blog.nsfisis.dev-6209453817da9922f28bac1bb1522c6d380630ab.tar.gz blog.nsfisis.dev-6209453817da9922f28bac1bb1522c6d380630ab.tar.zst blog.nsfisis.dev-6209453817da9922f28bac1bb1522c6d380630ab.zip | |
Hugo to Asciidoctor
Diffstat (limited to 'public/style.css')
| -rw-r--r-- | public/style.css | 480 |
1 files changed, 480 insertions, 0 deletions
diff --git a/public/style.css b/public/style.css new file mode 100644 index 0000000..ef2dea5 --- /dev/null +++ b/public/style.css @@ -0,0 +1,480 @@ +/* + * 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); + + --code-bg: #f5f5f5; + --border: #eee; +} +.list { + background: var(--code-bg); +} +/* 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: bold; +} +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 +-------------------------------------------------- */ +.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; + border-radius: var(--radius); + overflow-x: auto; +} +.post-content ul pre { + margin-left: calc(var(--gap) * -2); +} +.post-content .highlight pre { + margin: 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); + 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-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; +} |
