diff --git a/assets/css/404.css b/assets/css/404.css index 7954768c..41b24090 100644 --- a/assets/css/404.css +++ b/assets/css/404.css @@ -1,5 +1,3 @@ -/* 404 --------------------------------------------------- */ .not-found { position: absolute; left: 0; @@ -9,5 +7,5 @@ justify-content: center; height: 80%; font-size: 160px; - font-weight: 700; -} \ No newline at end of file + font-weight: 700 +} diff --git a/assets/css/archive.css b/assets/css/archive.css index ff711057..51d62826 100644 --- a/assets/css/archive.css +++ b/assets/css/archive.css @@ -1,60 +1,54 @@ -/* Archive --------------------------------------------------- */ .archive-posts { width: 100%; - font-size: 16px; + font-size: 16px } .archive-year { - margin-top: 40px; + margin-top: 40px } .archive-year:not(:last-of-type) { - border-bottom: 2px solid var(--border); + border-bottom: 2px solid var(--border) } .archive-month { display: flex; align-items: flex-start; - padding: 10px 0; + padding: 10px 0 } .archive-month-header { margin: 25px 0; - width: 200px; + width: 200px } .archive-month:not(:last-of-type) { - border-bottom: 1px solid var(--border); + border-bottom: 1px solid var(--border) } .archive-entry { position: relative; padding: 5px; - margin: 10px 0; + margin: 10px 0 } .archive-entry-title { margin: 5px 0; - font-weight: 400; + font-weight: 400 } +.archive-count, .archive-meta { color: var(--secondary); - font-size: 14px; + font-size: 14px } -.archive-count { - color: var(--secondary); - font-size: 14px; -} - -@media (max-width: 800px) { +@media (max-width:800px) { .archive-month { - flex-direction: column; + flex-direction: column } .archive-year { - margin-top: 20px; + margin-top: 20px } -} \ No newline at end of file +} diff --git a/assets/css/footer.css b/assets/css/footer.css index cdc64cd9..73393f9e 100644 --- a/assets/css/footer.css +++ b/assets/css/footer.css @@ -1,32 +1,32 @@ -/* Footer --------------------------------------------------- */ -.footer { - max-width: calc(var(--main-width) + var(--gap) * 2); - margin: auto; - padding: calc((var(--footer-height) - (var(--gap)) - 10px) / 2) var(--gap); - color: var(--secondary); +.footer, +.top-link { font-size: 12px; + color: var(--secondary) +} + +.footer { + max-width: calc(var(--main-width) + var(--gap)*2); + margin: auto; + padding: calc((var(--footer-height) - (var(--gap)) - 10px)/2) var(--gap); text-align: center; - line-height: 24px; + line-height: 24px } .footer span { margin-inline-start: 1px; - margin-inline-end: 1px; + margin-inline-end: 1px } .footer a { color: inherit; - border-bottom: 1px solid var(--secondary); + border-bottom: 1px solid var(--secondary) } .footer a:hover { - color: var(--primary); - border-bottom: 1px solid var(--primary); + border-bottom: 1px solid var(--primary) } .top-link { - font-size: 12px; visibility: hidden; opacity: 0; position: fixed; @@ -37,18 +37,17 @@ width: 42px; height: 42px; padding: 12px; - color: var(--secondary); border-radius: 64px; fill: currentColor; fill-opacity: 80%; - transition: visibility 0.5s, - opacity 0.8s linear; + transition: visibility .5s, opacity .8s linear } +.footer a:hover, .top-link:hover { - color: var(--primary); + color: var(--primary) } .top-link:focus { - outline: none; + outline: 0 } diff --git a/assets/css/header.css b/assets/css/header.css index 47b45f82..ab879c21 100644 --- a/assets/css/header.css +++ b/assets/css/header.css @@ -1,30 +1,28 @@ -/* Header --------------------------------------------------- */ .nav { display: flex; flex-wrap: wrap; justify-content: space-between; - max-width: calc(var(--nav-width) + var(--gap) * 2); + max-width: calc(var(--nav-width) + var(--gap)*2); margin-inline-start: auto; margin-inline-end: auto; - line-height: var(--header-height); + line-height: var(--header-height) } .nav a { - display: block; + display: block } .logo, .menu { display: flex; margin: auto var(--gap); - flex-wrap: inherit; + flex-wrap: inherit } .logo a { font-size: 24px; font-weight: 700; - margin-inline-end: 10px; + margin-inline-end: 10px } .logo a img { @@ -33,59 +31,56 @@ pointer-events: none; transform: translate(0, -10%); border-radius: 6px; - margin-inline-end: 8px; + margin-inline-end: 8px } .theme-toggle svg { height: 18px; user-select: none; - cursor: pointer; + cursor: pointer } body.dark #moon { vertical-align: middle; - display: none; + display: none } body:not(.dark) #sun { - display: none; + display: none } .menu { list-style: none; word-break: keep-all; overflow-x: auto; - white-space: nowrap; + white-space: nowrap } .menu li+li { - margin-inline-start: var(--gap); + margin-inline-start: var(--gap) } .menu a { - font-size: 16px; + font-size: 16px } .menu .active { font-weight: 500; - border-bottom: 2px solid currentColor; + border-bottom: 2px solid currentColor } -.lang-switch ul { - display: inline-flex; +.lang-switch li, +.lang-switch ul, +.logo-switches { + display: inline-flex } .lang-switch a { font-size: 16px; font-weight: 500; - margin: 0 8px; -} - -.lang-switch li { - display: inline-flex; + margin: 0 8px } .logo-switches { - display: inline-flex; - flex-wrap: inherit; + flex-wrap: inherit } diff --git a/assets/css/main.css b/assets/css/main.css index 6fac98b9..4f9e4ae1 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1,29 +1,27 @@ -/* Main --------------------------------------------------- */ .main { position: relative; min-height: calc(100vh - var(--header-height) - var(--footer-height)); - max-width: calc(var(--main-width) + var(--gap) * 2); + max-width: calc(var(--main-width) + var(--gap)*2); margin: auto; - padding: var(--gap); + padding: var(--gap) } -@media screen and (max-width: 400px) { +@media screen and (max-width:400px) { .main { - min-height: calc(100vh - var(--header-height) - var(--footer-height) - 24px); + min-height: calc(100vh - var(--header-height) - var(--footer-height) - 24px) } } .page-header { - margin-bottom: 24px; + margin-bottom: 24px } .page-header h1 { - font-size: 40px; + font-size: 40px } .pagination { - display: flex; + display: flex } .pagination a { @@ -31,27 +29,27 @@ font-size: 13px; line-height: 36px; background: var(--primary); - border-radius: calc(36px / 2); - padding: 0 16px; + border-radius: calc(36px/2); + padding: 0 16px } .pagination .next { - margin-inline-start: auto; + margin-inline-start: auto } .social-icons { - padding: 12px 0; + padding: 12px 0 } .social-icons a:not(:last-of-type) { - margin-inline-end: 12px; + margin-inline-end: 12px } .social-icons a svg { height: 26px; - width: 26px; + width: 26px } code { - direction: ltr; + direction: ltr } diff --git a/assets/css/post-entry.css b/assets/css/post-entry.css index 13f30f59..5208beef 100644 --- a/assets/css/post-entry.css +++ b/assets/css/post-entry.css @@ -1,17 +1,15 @@ -/* Post entry --------------------------------------------------- */ .first-entry { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 320px; - margin: var(--gap) 0 calc(var(--gap) * 2) 0; + margin: var(--gap) 0 calc(var(--gap)*2) 0 } -@media screen and (max-width: 600px) { +@media screen and (max-width:600px) { .first-entry { - min-height: 260px; + min-height: 260px } } @@ -19,25 +17,25 @@ overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; - -webkit-line-clamp: 3; + -webkit-line-clamp: 3 } .first-entry .entry-header h2 { - font-size: 34px; + font-size: 34px } .first-entry .entry-content { margin: 14px 0; font-size: 16px; - -webkit-line-clamp: 3; + -webkit-line-clamp: 3 } .first-entry .entry-footer { - font-size: 14px; + font-size: 14px } .home-info .entry-content { - -webkit-line-clamp: unset; + -webkit-line-clamp: unset } .post-entry { @@ -46,19 +44,19 @@ padding: var(--gap); background: var(--entry); border-radius: var(--radius); - transition: transform 0.1s; + transition: transform .1s } .post-entry:active { - transform: scale(0.96); + transform: scale(.96) } .tag-entry .entry-cover { - display: none; + display: none } .entry-header h2 { - font-size: 24px; + font-size: 24px } .entry-content { @@ -69,12 +67,12 @@ overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; - -webkit-line-clamp: 2; + -webkit-line-clamp: 2 } .entry-footer { color: var(--secondary); - font-size: 13px; + font-size: 13px } .entry-link { @@ -82,29 +80,31 @@ left: 0; right: 0; top: 0; - bottom: 0; + bottom: 0 +} + +.entry-cover, +.entry-isdraft { + font-size: 14px; + color: var(--secondary) } .entry-isdraft { - display: inline; - color: var(--secondary); - font-size: 14px; + display: inline } .entry-cover { margin-bottom: var(--gap); - text-align: center; - font-size: 14px; - color: var(--secondary); + text-align: center } .entry-cover img { border-radius: var(--radius); pointer-events: none; - width: 100%; + width: 100% } .entry-cover a { color: var(--secondary); - box-shadow: 0 1px 0 var(--primary); + box-shadow: 0 1px 0 var(--primary) } diff --git a/assets/css/post-single.css b/assets/css/post-single.css index 6e888462..7db01f2d 100644 --- a/assets/css/post-single.css +++ b/assets/css/post-single.css @@ -1,5 +1,3 @@ -/* Post single --------------------------------------------------- */ .post-header { margin: 24px auto var(--content-gap) auto } @@ -7,119 +5,120 @@ .post-title { margin-bottom: 2px; font-size: 40px; - transform: translateX(-2px); + transform: translateX(-2px) } .post-meta { color: var(--secondary); font-size: 14px; display: flex; - flex-wrap: wrap; + flex-wrap: wrap } .post-meta .i18n_list li { display: inline-flex; list-style: none; margin: auto 3px; - box-shadow: 0 1px 0 var(--secondary); + box-shadow: 0 1px 0 var(--secondary) } .post-content { - color: var(--content); + color: var(--content) } .post-content h3, .post-content h4, .post-content h5, .post-content h6 { - margin: 24px 0 16px 0; + margin: 24px 0 16px } .post-content h1 { - margin: 40px auto 32px auto; - font-size: 40px; + margin: 40px auto 32px; + font-size: 40px } .post-content h2 { - margin: 32px auto 24px auto; - font-size: 32px; + margin: 32px auto 24px; + font-size: 32px } .post-content h3 { - font-size: 24px; + font-size: 24px } .post-content h4 { - font-size: 16px; + font-size: 16px } .post-content h5 { - font-size: 14px; + font-size: 14px } .post-content h6 { - font-size: 12px; + font-size: 12px } -.post-content a { - box-shadow: 0 1px 0 var(--primary); +.post-content a, +.toc a:hover { + box-shadow: 0 1px 0 var(--primary) } .post-content a code { margin: auto 0; border-radius: 0; - box-shadow: 0 -1px 0 var(--primary) inset; + 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; + background: linear-gradient(to right, var(--primary) 100%, transparent 0) 0 50%/1px 1px repeat-x } -.post-content p, -.post-content ul, +.post-content dl, .post-content ol, -.post-content dl { - margin-bottom: var(--content-gap); +.post-content p, +.post-content ul { + margin-bottom: var(--content-gap) } -.post-content ul, -.post-content ol { - padding-inline-start: 20px; +.post-content ol, +.post-content ul { + padding-inline-start: 20px } .post-content li { - margin-top: 5px; + margin-top: 5px } .post-content li p { - margin-bottom: 0; + margin-bottom: 0 } .post-content dl { display: flex; flex-wrap: wrap; - margin: 0; + margin: 0 } .post-content dt { width: 25%; - font-weight: 700; + font-weight: 700 } .post-content dd { width: 75%; margin-inline-start: 0; - padding-inline-start: 10px; + padding-inline-start: 10px } -.post-content dt~dt, -.post-content dd~dd { - margin-top: 10px; +.post-content dd~dd, +.post-content dt~dt { + margin-top: 10px } .post-content table { - margin-bottom: 32px; + margin-bottom: 32px } .post-content table th, @@ -127,23 +126,23 @@ min-width: 80px; padding: 12px 8px; line-height: 1.5; - border-bottom: 1px solid var(--border); + border-bottom: 1px solid var(--border) } .post-content table th { font-size: 14px; - text-align: start; + text-align: start } .post-content table:not(.highlighttable) td code:only-child { - margin: auto 0; + margin: auto 0 } .post-content .highlight, .post-content pre { - margin: auto calc(var(--gap) * -1) 32px calc(var(--gap) * -1); + margin: auto calc(var(--gap)*-1) 32px; background: var(--hljs-bg) !important; - border-radius: var(--radius); + border-radius: var(--radius) } .post-content li>.highlight { @@ -151,128 +150,127 @@ } .post-content ul pre { - margin-inline-start: calc(var(--gap) * -2); + margin-inline-start: calc(var(--gap)*-2) } .post-content .highlight pre { - margin: 0; + margin: 0 } -/* table */ .post-content .highlighttable { - table-layout: fixed; + table-layout: fixed } .post-content .highlighttable td:first-child { - width: 40px; + width: 40px } .post-content .highlighttable td .linenodiv { - padding-inline-end: 0 !important; + padding-inline-end: 0 !important } -.post-content .highlighttable td .linenodiv pre, -.post-content .highlighttable td .highlight { - margin-bottom: 0; +.post-content .highlighttable td .highlight, +.post-content .highlighttable td .linenodiv pre { + margin-bottom: 0 } .post-content .highlighttable td .highlight pre code::-webkit-scrollbar { - display: none; + display: none } -/* inline */ .post-content .highlight span { - background: transparent !important; + background: 0 0 !important } .post-content code { margin: auto 4px; padding: 4px 6px; font-family: Menlo, Monaco, 'Courier New', Courier, monospace; - font-size: 0.78em; + font-size: .78em; line-height: 1.5; background: var(--code-bg); - border-radius: 2px; + border-radius: 2px } .post-content pre code { display: block; margin: auto 0; padding: 10px; - color: rgba(255, 255, 255, 0.8); - background: transparent; + color: rgba(255, 255, 255, .8); + background: 0 0; border-radius: 0; - overflow-x: auto; + overflow-x: auto } .post-content blockquote { - margin: 0 calc(var(--gap) * -1); + margin: 0 calc(var(--gap)*-1); padding: 0 32px; - border-inline-start: 2px solid var(--primary); + border-inline-start: 2px solid var(--primary) } .post-content hr { - margin: 30px calc(var(--gap) * -1); + margin: 30px calc(var(--gap)*-1); height: 2px; background: var(--tertiary); border-top: 0; - border-bottom: 0; + border-bottom: 0 } .post-content iframe { - max-width: 100%; + max-width: 100% } .post-content img { - border-radius: 4px; + border-radius: 4px } .toc { margin-bottom: 40px; border: 1px solid var(--border); border-radius: var(--radius); - padding: .5em; + padding: .5em } .toc details summary { cursor: zoom-in; - margin-inline-start: 20px; + margin-inline-start: 20px } .toc details[open] summary { - cursor: zoom-out; + cursor: zoom-out } .toc .details { display: inline; - font-weight: 500; + font-weight: 500 } .toc blockquote { margin: 0 20px; - padding: 10px 20px; -} - -.toc a:hover { - box-shadow: 0 1px 0 var(--primary); + padding: 10px 20px } .toc li ul { - margin-inline-start: var(--gap); + margin-inline-start: var(--gap) } .toc summary:focus { - outline: none; + outline: 0 } .post-footer { - margin-top: 56px; + margin-top: 56px } .post-tags li { display: inline-block; margin-inline-end: 3px; - margin-bottom: 5px; + margin-bottom: 5px +} + +.post-tags a, +.share-buttons { + border: 1px solid var(--tertiary) } .post-tags a { @@ -283,40 +281,38 @@ font-size: 14px; line-height: 34px; background: var(--code-bg); - border-radius: 4px; - border: 1px solid var(--tertiary); + border-radius: 4px } .post-tags a:hover { - background: var(--border); + background: var(--border) } .share-buttons { margin-top: var(--gap); - border: 1px solid var(--tertiary); padding-inline-start: var(--radius); border-radius: var(--radius); display: flex; - overflow-x: auto; + overflow-x: auto } .share-buttons a { - margin-top: 10px; + margin-top: 10px } .share-buttons a:not(:last-of-type) { - margin-inline-end: 12px; + margin-inline-end: 12px } .share-buttons a svg { height: 30px; width: 30px; fill: currentColor; - transition: transform 0.1s; + transition: transform .1s } .share-buttons svg:hover { - transform: scale(0.96); + transform: scale(.96) } h1:hover .anchor, @@ -328,12 +324,12 @@ h6:hover .anchor { display: inline-flex; color: var(--secondary); margin-inline-start: 8px; - font-weight: 500; + font-weight: 500 } -@media screen and (max-width: 600px) { +@media screen and (max-width:600px) { .post-content blockquote { - margin: 0 calc(var(--gap) * -1); - padding: 0 21px; + margin: 0 calc(var(--gap)*-1); + padding: 0 21px } } diff --git a/assets/css/profile-mode.css b/assets/css/profile-mode.css index 77108f74..d59f7363 100644 --- a/assets/css/profile-mode.css +++ b/assets/css/profile-mode.css @@ -1,41 +1,43 @@ +.buttons, +.main .profile { + display: flex; + justify-content: center +} + .main .profile { position: absolute; left: 0; right: 0; - display: flex; align-items: center; - justify-content: center; height: 80%; - text-align: center; + text-align: center } .profile .profile_inner h1 { - padding: 12px 0; + padding: 12px 0 } .profile .profile_inner span { padding: 10px 0; - font-size: 18px; + font-size: 18px } .profile img { display: inline-table; border-radius: 50%; - pointer-events: none; + pointer-events: none } -@media screen and (max-width: 600px) { +@media screen and (max-width:600px) { .profile img { - transform: scale(0.85); + transform: scale(.85) } } .buttons { - display: flex; flex-wrap: wrap; - justify-content: center; max-width: 400px; - margin: 0 auto; + margin: 0 auto } .button { @@ -43,13 +45,13 @@ border-radius: var(--radius); margin: 8px; padding: 6px; - transition: transform 0.1s; + transition: transform .1s } .button-inner { - padding: 0 8px; + padding: 0 8px } .button:active { - transform: scale(0.96); + transform: scale(.96) } diff --git a/assets/css/reset.css b/assets/css/reset.css index 41ce0e10..96409248 100644 --- a/assets/css/reset.css +++ b/assets/css/reset.css @@ -1,24 +1,30 @@ -/* Reset --------------------------------------------------- */ *, -*::before, -*::after { - box-sizing: border-box; +::after, +::before { + box-sizing: border-box } html { - -webkit-tap-highlight-color: transparent; + -webkit-tap-highlight-color: transparent +} + +a, +body, +h1, +h2, +h3, +h4, +h5, +h6 { + color: var(--primary) } body { - margin: 0; - color: var(--primary); - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, - 'Open Sans', 'Helvetica Neue', sans-serif; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 18px; line-height: 1.6; word-break: break-word; - background: var(--theme); + background: var(--theme) } article, @@ -30,8 +36,9 @@ header, hgroup, main, nav, -section { - display: block; +section, +table { + display: block } h1, @@ -40,38 +47,40 @@ h3, h4, h5, h6 { - margin-top: 0; - margin-bottom: 0; - color: var(--primary); - line-height: 1.2; + line-height: 1.2 } +h1, +h2, +h3, +h4, +h5, +h6, p { margin-top: 0; - margin-bottom: 0; + margin-bottom: 0 } ul { - margin: 0; - padding: 0; + padding: 0 } a { - color: var(--primary); - text-decoration: none; + text-decoration: none } -figure { - margin: 0; +body, +figure, +ul { + margin: 0 } table { width: 100%; border-collapse: collapse; border-spacing: 0; - display: block; overflow-x: scroll; - word-break: keep-all; + word-break: keep-all } button, @@ -79,59 +88,57 @@ input, textarea { padding: 0; font: inherit; - background: transparent; + background: 0 0; border: 0; - -webkit-appearance: none; -} - -button, -input[type='button'], -input[type='submit'] { - cursor: pointer; + -webkit-appearance: none } input, textarea { - padding: 0; - border: 0; - outline: 0; + outline: 0 +} + +button, +input[type=button], +input[type=submit] { + cursor: pointer } input:-webkit-autofill, textarea:-webkit-autofill { - box-shadow: 0 0 0 50px var(--theme) inset; + box-shadow: 0 0 0 50px var(--theme) inset } img { display: block; - max-width: 100%; + max-width: 100% } -*::-webkit-scrollbar { +::-webkit-scrollbar { width: 10px; - height: 6px; + height: 6px } -*::-webkit-scrollbar-track { - background: var(--theme); +::-webkit-scrollbar-track { + background: var(--theme) } .list:not(.dark)::-webkit-scrollbar-track { - background: var(--code-bg); + background: var(--code-bg) } -*::-webkit-scrollbar-thumb { +::-webkit-scrollbar-thumb { background: var(--tertiary); - border-radius: var(--radius); + border-radius: var(--radius) } -*::-webkit-scrollbar-thumb:hover { - background: var(--secondary); +::-webkit-scrollbar-thumb:hover { + background: var(--secondary) } -@media screen and (max-width: 800px) { - *::-webkit-scrollbar { +@media screen and (max-width:800px) { + ::-webkit-scrollbar { width: 8px; - height: 2px; + height: 2px } } diff --git a/assets/css/terms.css b/assets/css/terms.css index 1fc9807b..82db4453 100644 --- a/assets/css/terms.css +++ b/assets/css/terms.css @@ -1,7 +1,7 @@ .terms-tags li { display: inline-block; margin: 10px; - font-weight: 500; + font-weight: 500 } .terms-tags a { @@ -9,10 +9,10 @@ padding: 3px 10px; background: var(--tertiary); border-radius: 6px; - transition: transform 0.1s; + transition: transform .1s } .terms-tags a:hover { background: var(--tertiary); - transform: scale(0.96); -} \ No newline at end of file + transform: scale(.96) +} diff --git a/assets/css/theme-vars.css b/assets/css/theme-vars.css index 8e152ffb..47c061ce 100644 --- a/assets/css/theme-vars.css +++ b/assets/css/theme-vars.css @@ -1,5 +1,3 @@ -/* Theme --------------------------------------------------- */ :root { --gap: 24px; --content-gap: 20px; @@ -8,22 +6,20 @@ --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; + --border: #eee } -@media screen and (max-width: 600px) { +@media screen and (max-width:600px) { :root { - --gap: 14px; + --gap: 14px } } @@ -34,16 +30,15 @@ --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; + --border: #5b5d67 } .list { - background: var(--code-bg); + background: var(--code-bg) } .dark.list { - background: var(--theme); -} \ No newline at end of file + background: var(--theme) +}