diff options
Diffstat (limited to 'static/style.css')
| -rw-r--r-- | static/style.css | 598 |
1 files changed, 165 insertions, 433 deletions
diff --git a/static/style.css b/static/style.css index 203a798..92b99c3 100644 --- a/static/style.css +++ b/static/style.css @@ -1,480 +1,212 @@ -/* - * 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: max(50%, 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 { +html { box-sizing: border-box; } -html { - -webkit-tap-highlight-color: transparent; + +*, *:before, *:after { + box-sizing: inherit; } + body { + font-family: 'Yu Gothic', 'Meiryo', 'Noto Sans JP', sans-serif; + color: #000; + background-color: #fff; + line-height: 1.6; 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; + padding: 0; } -p { - margin-top: 0; - margin-bottom: 0; + +@media screen and (max-width: 768px) { + body { + padding: 0 1rem; + } } -strong, -b { - font-weight: bold; + +header.header { + background-color: #f5f5f5; + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 20%; } -ul { - margin: 0; - padding: 0; + +main { + max-width: 900px; + margin: 2rem auto; } -a { - color: var(--primary); - text-decoration: none; + +footer { + background-color: #f5f5f5; + padding: 1rem 20%; + text-align: center; } -figure { + +nav { + font-size: 1.5rem; + font-weight: bold; + padding: 0; 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 { + +nav ul { + list-style-type: none; padding: 0; - border: 0; - outline: 0; -} -input:-webkit-autofill, -textarea:-webkit-autofill { - box-shadow: 0 0 0 50px var(--theme) inset; + margin: 0; + display: flex; } -img { - display: block; - max-width: 100%; + +nav ul li { + margin: 0 1rem; } -/* Header --------------------------------------------------- */ -.nav { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - max-width: calc(var(--nav-width) + var(--gap) * 2); - margin-left: auto; + +nav ul li:first-child { margin-right: auto; } -.nav a { - display: block; - line-height: var(--header-height); + +nav ul li a { + border: none; + color: #000; } -.logo, -.menu { - margin-left: var(--gap); - margin-right: var(--gap); + +h1, h2, h3, h4, h5, h6 { + font-weight: bold; } -.logo a { - font-size: 24px; - font-weight: 700; + +p { + font-size: 1rem; + line-height: 1.6; + margin-bottom: 1rem; } -.menu { - display: flex; - list-style: none; - word-break: keep-all; - overflow-x: auto; + +a { + text-decoration: none; + color: #000; + border-bottom: 1px solid #000; } -.menu li + li { - margin-left: var(--gap); + +a:hover { + color: #666; } -.menu a { - font-size: 16px; + +pre { + background-color: #f5f5f5; + padding: 1rem; + overflow-x: auto; + font-family: 'Courier New', Courier, monospace; + font-size: 0.9rem; } -/* 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); + +blockquote { + background-color: #f5f5f5; + border-left: 5px solid #000; + padding: 1rem; + margin: 1rem 0; } -.page-header { - margin-bottom: 24px; + +.tag { + display: inline-block; + background-color: #f5f5f5; + padding: 2px 6px; + border-radius: 3px; + font-size: 0.9rem; + margin-right: 5px; + margin-bottom: 5px; } -.page-header h1 { - font-size: 40px; + +.tag a { + border: none; } -.pagination { - display: flex; + +code { + background-color: #f5f5f5; + padding: 1px 4px; + font-family: 'Courier New', Courier, monospace; + font-size: 0.9rem; + border-radius: 2px; } -.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; + +li.revision { + list-style: inside; } + +h1 { + font-size: 2.0rem; +} + +.post-content h2, .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; + border-bottom: 1px solid #000; + margin-bottom: 1rem; } -.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 h2 a, +.post-content h3 a, +.post-content h4 a, +.post-content h5 a, +.post-content h6 a { + border: none; } -.post-content dt ~ dt, -.post-content dd ~ dd { - margin-top: 10px; + +.post-content h2:before { + content: "#"; + padding-right: 0.3rem; + color: #333; + font-weight: bold; } -.post-content table { - margin-bottom: 32px; + +.post-content h3:before { + content: "##"; + padding-right: 0.3rem; + color: #333; + font-weight: bold; } -.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 h4:before { + content: "###"; + padding-right: 0.3rem; + color: #333; + font-weight: bold; } -.post-content table th { - font-size: 14px; - text-align: left; + +.post-content h5:before { + content: "####"; + padding-right: 0.3rem; + color: #333; + font-weight: bold; } -.post-content table:not(.highlighttable) td code:only-child { - margin-left: 0; - margin-right: 0; + +.post-content h6:before { + content: "#####"; + padding-right: 0.3rem; + color: #333; + font-weight: bold; } -.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; + +article.post-entry { + background-color: #f5f5f5; + border-radius: 10px; + padding: 1.5rem; + margin: 2rem 0; } -.post-content ul pre { - margin-left: calc(var(--gap) * -2); + +.post-entry header { + border: none; } -.post-content .highlight pre { + +.post-entry header h2 { 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; +.post-entry section { + color: #666; } -.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; + +.post-entry footer { + background-color: #f5f5f5; + padding: 0; + text-align: left; + color: #666; } |