diff --git a/blog/config.toml b/blog/config.toml index f91431b3..1aa5d641 100644 --- a/blog/config.toml +++ b/blog/config.toml @@ -6,6 +6,7 @@ highlight_code = true highlight_theme = "visual-studio-dark" generate_feed = true feed_filename = "rss.xml" +compile_sass = true languages = [ { code = "zh-CN" }, # Chinese (simplified) @@ -112,4 +113,4 @@ not_translated = "(Этот пост еще не переведен.)" translated_content = "Переведенное содержание:" translated_content_notice = "Это перевод сообщества поста _original.title_. Он может быть неполным, устаревшим или содержать ошибки. Пожалуйста, сообщайте о любых проблемах!" translated_by = "Перевод сделан" -word_separator = "и" \ No newline at end of file +word_separator = "и" diff --git a/blog/sass/css/edition-2/main.scss b/blog/sass/css/edition-2/main.scss new file mode 100644 index 00000000..f4712bbe --- /dev/null +++ b/blog/sass/css/edition-2/main.scss @@ -0,0 +1,980 @@ +/* + * CSS file for the second edition of os.phil-opp.com. + * + * Based on `poole`which was designed, built, and released under MIT license by @mdo. See + * https://github.com/poole/poole. + */ + +/* + * Contents + * + * Fonts + * Body resets + * Dark/Light Mode + * Custom type + * Messages + * Container + * Masthead + * Posts and pages + * Pagination + * Reverse layout + * Themes + */ + +/* Fonts */ + +@font-face { + font-family: "Iosevka"; + src: url("/fonts/iosevka-regular.woff2") format("woff2"), url("/fonts/iosevka-regular.woff") format("woff"); + font-weight: normal; + font-style: normal; + font-display: swap; +} + +/* + * Body resets + * + * Update the foundational and global aspects of the page. + */ + +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +html, +body { + margin: 0; + padding: 0; +} + +html { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + line-height: 1.5; +} + +/* Dark/Light Mode */ + +@mixin set-colors-light { + --background-color: #fff; + --text-color: #515151; + --heading-color: #313131; + --heading-code-color: #a0565c; + --link-color: #268bd2; + --hr-color-top: #eee; + --hr-color-bottom: #fff; + --code-text-color: #bf616a; + --code-background-color: #f9f9f9; + --masthead-title-color: #505050; + --strong-color: #303030; + --masthead-subtitle: #c0c0c0; + --post-title-color: #228; +} + +@mixin set-colors-dark { + --background-color: #252525; + --text-color: #f5f5f5; + --heading-color: #eee; + --heading-code-color: #eee; + --link-color: #c59ff3; + --hr-color-top: #333; + --hr-color-bottom: #000; + --code-text-color: #eeeeee; + --code-background-color: #222222; + --masthead-title-color: #b6b6b6; + --strong-color: #c0c0c0; + --masthead-subtitle: #8f8f8f; + --post-title-color: #c8c8ff; +} + +body { + @include set-colors-light(); +} + +body.dark { + @include set-colors-dark(); +} + +/* Styles for users who prefer dark mode at the OS level */ +@media (prefers-color-scheme: dark) { + /* defaults to dark theme */ + body { + @include set-colors-dark(); + } + /* Override dark mode with light mode styles if the user decides to swap */ + body.light { + @include set-colors-light(); + } +} + +body { + color: var(--text-color); + background-color: var(--background-color); + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} + +/* No `:visited` state is required by default (browsers will use `a`) */ + +a { + color: var(--link-color); + text-decoration: none; +} + +/* `:focus` is linked to `:hover` for basic accessibility */ + +a:hover, +a:focus { + text-decoration: underline; +} + +/* Headings */ +h1, +h2, +h3, +h4, +h5, +h6 { + margin-bottom: 0.5rem; + font-weight: bold; + line-height: 1.25; + color: var(--heading-color); + text-rendering: optimizeLegibility; +} +h1 { + font-size: 2rem; +} +h2 { + margin-top: 1rem; + font-size: 1.5rem; +} +h3 { + margin-top: 1.5rem; + font-size: 1.25rem; +} +h4, +h5, +h6 { + margin-top: 1rem; + font-size: 1rem; +} + +/* Body text */ +p { + margin-top: 0; + margin-bottom: 1rem; +} + +strong { + color: var(--strong-color); +} + +/* Lists */ +ul, +ol, +dl { + margin-top: 0; + margin-bottom: 1rem; +} + +/* Nested lists */ +li ul, +li ol, +li dl { + margin-bottom: 0; +} + +li ul + p, +li ol + p, +li dl + p { + margin-top: 1rem; +} + +dt { + font-weight: bold; +} +dd { + margin-bottom: 0.5rem; +} + +/* Misc */ +hr { + position: relative; + margin: 1.5rem 0; + border: 0; + border-top: 1px solid var(--hr-color-top); + border-bottom: 1px solid var(--hr-color-bottom); +} + +abbr { + font-size: 90%; + font-weight: bold; + color: #555; + text-transform: uppercase; +} +abbr[title] { + cursor: help; + border-bottom: 1px dotted #e5e5e5; +} + +/* Code */ +code, +pre { + font-family: "Iosevka", monospace; +} +code { + padding: 0.25em 0.5em; + font-size: 85%; + color: var(--code-text-color); + background-color: var(--code-background-color); + border-radius: 3px; +} +pre { + display: block; + margin-top: 0; + margin-bottom: 1rem; + padding: 0.5rem; + font-size: 0.95rem; + line-height: 1.4; + white-space: pre; + overflow: auto; + word-wrap: normal; + background-color: var(--code-background-color); +} +pre code { + padding: 0; + font-size: 100%; + color: inherit; + background-color: transparent; +} +.highlight { + margin-bottom: 1rem; + border-radius: 4px; +} +.highlight pre { + margin-bottom: 0; +} + +/* Quotes */ +blockquote { + padding: 0.5rem 1rem; + margin: 0.8rem 0; + color: #7a7a7a; + border-left: 0.25rem solid #e5e5e5; +} +blockquote p:last-child { + margin-bottom: 0; +} +@media (min-width: 30rem) { + blockquote { + padding-right: 5rem; + padding-left: 1.25rem; + } +} + +img { + display: block; + margin: 0 0 1rem; + border-radius: 5px; + max-width: 100%; + color: grey; + font-style: italic; +} + +/* Tables */ +table { + margin-bottom: 1rem; + width: 100%; + border: 1px solid #e5e5e5; + border-collapse: collapse; +} +td, +th { + padding: 0.25rem 0.5rem; + border: 1px solid #e5e5e5; +} +tbody tr:nth-child(odd) td, +tbody tr:nth-child(odd) th { + background-color: var(--code-background-color); +} + +/* + * Custom type + * + * Extend paragraphs with `.lead` for larger introductory text. + */ + +.lead { + font-size: 1.25rem; + font-weight: 300; +} + +/* + * Messages + * + * Show alert messages to users. You may add it to single elements like a `
`, + * or to a parent if there are multiple elements to show. + */ + +.message { + margin-bottom: 1rem; + padding: 1rem; + color: #717171; + background-color: var(--code-background-color); +} + +/* + * Container + * + * Center the page content. + */ + +.container { + max-width: 45rem; + padding-left: 1rem; + padding-right: 1rem; + margin-left: auto; + margin-right: auto; +} + +/* + * Masthead + * + * Super small header above the content for site name and short description. + */ + +.masthead { + padding-top: 1rem; + padding-bottom: 1rem; + margin-bottom: 1rem; +} +.masthead-title { + margin-top: 0; + margin-bottom: 0; + color: var(--masthead-title-color); +} +.masthead-title a { + color: var(--masthead-title-color); +} +.masthead small { + font-size: 75%; + font-weight: 400; + color: var(--masthead-subtitle); + letter-spacing: 0; +} + +/* + * Posts and pages + * + * Each post is wrapped in `.post` and is used on default and post layouts. Each + * page is wrapped in `.page` and is only used on the page layout. + */ + +.page { + margin-bottom: 4em; +} + +/* Blog post or page title */ +.page-title, +.post-title, +.post-title a { + color: var(--post-title-color); +} +.page-title, +.post-title { + margin-top: 0; +} + +/* Meta data line below post title */ +.post-date { + display: block; + margin-top: -0.5rem; + margin-bottom: 1rem; + color: #9a9a9a; +} + +/* Related posts */ +.related { + padding-top: 2rem; + padding-bottom: 2rem; + border-top: 1px solid #eee; +} +.related-posts { + padding-left: 0; + list-style: none; +} +.related-posts h3 { + margin-top: 0; +} +.related-posts li small { + font-size: 75%; + color: #999; +} +.related-posts li a:hover { + color: #268bd2; + text-decoration: none; +} +.related-posts li a:hover small { + color: inherit; +} + +/* + * Pagination + * + * Super lightweight (HTML-wise) blog pagination. `span`s are provide for when + * there are no more previous or next posts to show. + */ + +.pagination { + overflow: hidden; /* clearfix */ + margin-left: -1rem; + margin-right: -1rem; + font-family: "PT Sans", Helvetica, Arial, sans-serif; + color: #ccc; + text-align: center; +} + +/* Pagination items can be `span`s or `a`s */ +.pagination-item { + display: block; + padding: 1rem; + border: 1px solid #eee; +} +.pagination-item:first-child { + margin-bottom: -1px; +} + +/* Only provide a hover state for linked pagination items */ +a.pagination-item:hover { + background-color: #f5f5f5; +} + +@media (min-width: 30rem) { + .pagination { + margin: 3rem 0; + } + .pagination-item { + float: left; + width: 50%; + } + .pagination-item:first-child { + margin-bottom: 0; + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + } + .pagination-item:last-child { + margin-left: -1px; + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + } +} + +h1 code, +h2 code, +h3 code, +h4 code, +h5 code, +h6 code { + padding: 0; + color: var(--heading-code-color); + font-size: 90%; + background-color: inherit; +} + +.masthead-title { + font-size: 1.25rem; + display: inline; +} + +.masthead p { + font-size: 1.25rem; + display: inline; + margin: 0; + margin-left: 1rem; + padding: 0; + line-height: 1; +} + +.front-page-introduction { + margin-bottom: 2rem; +} + +.navigation { + float: right; +} + +.navigation img { + height: 1em; + vertical-align: baseline; + display: inline-block; + margin: 0; + padding: 0; + border-radius: 0; +} + +main img { + max-width: 100%; + margin: auto; +} + +.post { + margin-bottom: 2em; +} + +.post:last-child { + margin-bottom: 0em; +} + +.frontpage-section { + margin-bottom: 2rem; +} + +.posts { + padding: 1.5rem 1rem 0.5rem 1rem; + border-radius: 10px; + margin-bottom: 2rem; + margin-left: -0.5rem; + margin-right: -0.5rem; +} + +.posts.neutral { + border: 2px solid #999; +} + +.posts.subscribe { + border: 2px solid #aaa; +} + +.posts.edition-1 { + border: 2px solid #aaa; + background-color: #99ff0022; +} + +.posts.bare-bones { + border: 2px solid #66f; +} + +.posts.memory-management { + border: 2px solid #fc0; +} + +.posts.interrupts { + border: 2px solid #f66; +} + +.posts.multitasking { + border: 2px solid #556b2f; +} + +.posts hr { + margin: 2rem 0; +} + +.post-summary { + margin-bottom: 1rem; +} + +.post-summary p { + display: inline; +} + +.read-more { + margin-left: 5px; +} + +.no-translation { + margin-top: 0.3rem; + color: #999999; +} + +.post-category { + margin-right: 0.5rem; + text-transform: uppercase; + font-size: 0.8rem; + text-align: right; +} + +.post-category.bare-bones { + color: #55d; +} + +.post-category.memory-management { + color: #990; +} + +.post-category.interrupts { + color: #f33; +} + +.post-category.multitasking { + color: #556b2f; +} + +.post-footer-support { + margin-top: 2rem; +} + +.PageNavigation { + font-size: 0.9em; + display: table; + width: 100%; + overflow: hidden; +} + +.PageNavigation a { + display: table-cell; +} + +.PageNavigation .previous { + text-align: left; +} + +.PageNavigation .next { + text-align: right; +} + +footer.footer { + margin-top: 1rem; + margin-bottom: 1rem; +} + +.footnotes { + font-size: 85%; +} + +.footnotes li { + margin-bottom: 1rem; +} + +sup, +sub { + line-height: 0; +} + +a.anchorjs-link:hover { + text-decoration: none; +} + +#toc-aside { + display: none; +} + +#toc-inline summary { + margin-bottom: 0.2rem; +} + +aside#all-posts-link { + font-size: 90%; + margin-top: 0.5rem; +} + +@media (min-width: 80rem) { + #toc-inline { + display: none; + } + + #toc-aside { + display: block; + width: 12rem; + position: sticky; + float: left; + top: 3.5rem; + margin-top: -4rem; + margin-left: -15rem; + font-size: 90%; + line-height: 1.2; + } + + #toc-aside li > a, + #toc-aside h2 { + opacity: 0.5; + transition: opacity 0.5s; + } + + #toc-aside:hover li > a, + #toc-aside:hover h2 { + opacity: 1; + } + + #toc-aside li.active > a { + font-weight: bold; + } + + #toc-aside h2 { + font-size: 110%; + margin-bottom: 0.2rem; + } + + #toc-aside ol { + margin: 0 0 0.2rem 0; + padding: 0 0 0 1rem; + list-style: none; + } + + #toc-aside ol li a:before { + content: ""; + border-color: transparent #008eef; + border-style: solid; + border-width: 0.35em 0 0.35em 0.45em; + display: block; + height: 0; + width: 0; + left: -1em; + top: 0.9em; + position: relative; + } + + #toc-aside.coarse li ol { + display: none; + } + + aside.page-aside-right { + position: absolute; + min-width: 11rem; + max-width: 17rem; + top: 4rem; + margin-left: 45rem; + margin-right: 2rem; + font-size: 90%; + } + + aside.page-aside-right .block { + margin-bottom: 1.5rem; + } + + aside.page-aside-right h2 { + font-size: 110%; + margin-bottom: 0.2rem; + } + + aside.page-aside-right ul { + margin: 0 0 0.2rem 0; + padding: 0 0 0 1rem; + } + + aside.page-aside-right ul li { + margin-top: 0.5rem; + } + + #language-selector li { + margin-top: 0; + } + + aside#all-posts-link { + position: fixed; + top: 1.25rem; + margin-top: 0; + margin-left: -15rem; + } +} + +aside.page-aside-right time { + color: #9a9a9a; +} + +a code { + color: var(--link-color); +} + +a.zola-anchor { + opacity: 0; + position: absolute; + margin-left: -1.5em; + padding-right: 1em; + font-size: 0.6em; + vertical-align: baseline; + line-height: 2em; +} + +:hover > a.zola-anchor { + opacity: 1; + text-decoration: none; +} + +a.zola-anchor:hover { + text-decoration: none; +} + +div.note { + padding: 0.7rem 1rem; + margin: 1rem 0.2rem; + border: 2px solid #6ad46a; + border-radius: 5px; + background-color: #99ff991f; +} + +div.note p:last-child { + margin-bottom: 0; +} + +div.warning { + padding: 0.7rem 1rem; + margin: 1rem 0.2rem; + border: 2px solid orange; + border-radius: 5px; + background-color: #ffa50022; +} + +div.warning p:last-child { + margin-bottom: 0; +} + +div.warning h2 { + margin-top: 0rem; +} + +form.subscribe { + margin: 1rem; +} + +div.subscribe-fields { + display: flex; +} + +form.subscribe input { + padding: 0.5rem; + border: 1px solid #e5e5e5; +} + +form.subscribe input[type="email"] { + flex: 1; +} + +form.subscribe input[type="submit"] { + padding: 0.25rem 0.5rem; + cursor: pointer; +} + +/* Asides */ +aside.post_aside { + font-style: italic; + padding: 0rem 1rem 0rem; + margin: 0.8rem 0; + border-left: 0.1rem solid #e5e5e5; + border-right: 0.1rem solid #e5e5e5; +} + +details summary { + cursor: pointer; +} + +details summary h3, +details summary h4, +details summary h5, +details summary h6 { + display: inline; +} + +.gh-repo-box { + border: 1px solid #d1d5da; + border-radius: 3px; + padding: 16px; + margin-top: 0.5rem; + color: #586069; + font-size: 80%; +} + +.gh-repo-box .repo-link { + color: #0366d6; + font-weight: 600; + font-size: 120%; +} + +.gh-repo-box .subtitle { + margin-bottom: 16px; +} + +.gh-repo-box .stars-forks { + margin-bottom: 0; +} + +.gh-repo-box .stars-forks a { + color: #586069; +} + +.gh-repo-box .stars-forks a:hover { + color: #0366d6; + text-decoration: none; +} + +.gh-repo-box .stars-forks svg { + vertical-align: text-bottom; + fill: currentColor; +} + +.gh-repo-box .stars { + display: inline-block; +} + +.gh-repo-box .forks { + display: inline-block; + margin-left: 16px; +} + +.gh-repo-box .sponsor { + display: inline-block; + margin-left: 16px; +} + +.hidden { + display: none; +} + +.toc-comments-link { + margin-top: 0.5rem; +} + +h5 { + font-style: italic; + font-size: 0.9rem; +} +.gray { + color: gray; +} + +a strong { + color: #268bd2; +} + +.right-to-left { + direction: rtl; + font-family: Vazir; +} + +.left-to-right, +.right-to-left pre, +.right-to-left table, +.right-to-left[id="toc-aside"] { + direction: ltr; +} + +.status-update-list li { + margin-bottom: 0.5rem; +} + +.giscus { + margin-top: 1.5rem; +} + +img { + background-color: white; +} + + +.dark-mode-note { + display: none; +} +body.dark .dark-mode-note { + display: block; +} +@media (prefers-color-scheme: dark) { + /* defaults to dark theme */ + .dark-mode-note { + display: block; + } + /* Override dark mode with light mode styles if the user decides to swap */ + body.light .dark-mode-note { + display: none; + } +} diff --git a/blog/static/css/edition-2/main.css b/blog/static/css/edition-2/main.css deleted file mode 100644 index 537a15e8..00000000 --- a/blog/static/css/edition-2/main.css +++ /dev/null @@ -1,468 +0,0 @@ -h1 code, h2 code, h3 code, h4 code, h5 code, h6 code { - padding: 0; - color: #a0565c; - font-size: 90%; - background-color: inherit; -} - -.masthead-title { - font-size: 1.25rem; - display: inline; -} - -.masthead p { - font-size: 1.25rem; - display: inline; - margin: 0; - margin-left: 1rem; - padding: 0; - line-height: 1; -} - -.front-page-introduction { - margin-bottom: 2rem; -} - -.navigation { - float: right; -} - -.navigation img { - height: 1em; - vertical-align: baseline; - display: inline-block; - margin: 0; - padding: 0; - border-radius: 0; -} - -main img { - max-width: 100%; - margin: auto; -} - -.post { - margin-bottom: 2em; -} - -.post:last-child { - margin-bottom: 0em; -} - -.frontpage-section { - margin-bottom: 2rem; -} - -.posts { - padding: 1.5rem 1rem 0.5rem 1rem; - border-radius: 10px; - margin-bottom: 2rem; - margin-left: -0.5rem; - margin-right: -0.5rem; -} - -.posts.neutral { - border: 2px solid #999; -} - -.posts.subscribe { - border: 2px solid #aaa; -} - -.posts.edition-1 { - border: 2px solid #aaa; - background-color: #99ff0022; -} - -.posts.bare-bones { - border: 2px solid #66f; -} - -.posts.memory-management { - border: 2px solid #fc0 -} - -.posts.interrupts { - border: 2px solid #f66; -} - -.posts.multitasking { - border: 2px solid #556b2f; -} - -.posts hr { - margin: 2rem 0; -} - -.post-summary { - margin-bottom: 1rem; -} - -.post-summary p { - display: inline; -} - -.read-more { - margin-left: 5px; -} - -.no-translation { - margin-top: .3rem; - color: #999999; -} - -.post-category { - margin-right: 0.5rem; - text-transform: uppercase; - font-size: 0.8rem; - text-align: right; -} - -.post-category.bare-bones { - color: #55d; -} - -.post-category.memory-management { - color: #990; -} - -.post-category.interrupts { - color: #f33; -} - -.post-category.multitasking { - color: #556b2f; -} - -.post-footer-support { - margin-top: 2rem; -} - -.PageNavigation { - font-size: 0.9em; - display: table; - width: 100%; - overflow: hidden; -} - -.PageNavigation a { - display: table-cell; -} - -.PageNavigation .previous { - text-align: left; -} - -.PageNavigation .next { - text-align: right; -} - -footer.footer { - margin-top: 1rem; - margin-bottom: 1rem; -} - -.footnotes { - font-size: 85%; -} - -.footnotes li { - margin-bottom: 1rem; -} - -sup, sub { - line-height: 0; -} - -a.anchorjs-link:hover { - text-decoration: none; -} - -#toc-aside { - display: none; -} - -#toc-inline summary { - margin-bottom: .2rem; -} - -aside#all-posts-link { - font-size: 90%; - margin-top: 0.5rem; -} - -@media (min-width: 80rem) { - #toc-inline { - display: none; - } - - #toc-aside { - display: block; - width: 12rem; - position: sticky; - float: left; - top: 3.5rem; - margin-top: -4rem; - margin-left: -15rem; - font-size: 90%; - line-height: 1.2; - } - - #toc-aside li > a, #toc-aside h2 { - opacity: .5; - transition: opacity .5s; - } - - #toc-aside:hover li > a, #toc-aside:hover h2 { - opacity: 1; - } - - #toc-aside li.active > a { - font-weight: bold; - } - - #toc-aside h2 { - font-size: 110%; - margin-bottom: .2rem; - } - - #toc-aside ol { - margin: 0 0 .2rem 0; - padding: 0 0 0 1rem; - list-style:none; - } - - #toc-aside ol li a:before { - content: ""; - border-color: transparent #008eef; - border-style: solid; - border-width: 0.35em 0 0.35em 0.45em; - display: block; - height: 0; - width: 0; - left: -1em; - top: 0.9em; - position: relative; - } - - #toc-aside.coarse li ol { - display: none; - } - - aside.page-aside-right { - position: absolute; - min-width: 11rem; - max-width: 17rem; - top: 4rem; - margin-left: 45rem; - margin-right: 2rem; - font-size: 90%; - } - - aside.page-aside-right .block { - margin-bottom: 1.5rem; - } - - aside.page-aside-right h2 { - font-size: 110%; - margin-bottom: .2rem; - } - - aside.page-aside-right ul { - margin: 0 0 .2rem 0; - padding: 0 0 0 1rem; - } - - aside.page-aside-right ul li { - margin-top: .5rem; - } - - #language-selector li { - margin-top: 0; - } - - aside#all-posts-link { - position: fixed; - top: 1.25rem; - margin-top: 0; - margin-left: -15rem; - } -} - -aside.page-aside-right time { - color: #9a9a9a; -} - -a code { - color: #268bd2; -} - -a.zola-anchor { - opacity: 0; - position: absolute; - margin-left: -1.5em; - padding-right: 1em; - font-size: 0.6em; - vertical-align: baseline; - line-height: 2em; -} - -:hover>a.zola-anchor { - opacity: 1; - text-decoration: none; -} - -a.zola-anchor:hover { - text-decoration: none; -} - -div.note { - padding: .7rem 1rem; - margin: 1rem .2rem; - border: 2px solid #6ad46a; - border-radius: 5px; - background-color: #99ff991f; -} - -div.note p:last-child { - margin-bottom: 0; -} - -div.warning { - padding: .7rem 1rem; - margin: 1rem .2rem; - border: 2px solid orange; - border-radius: 5px; - background-color: #ffa50022; -} - -div.warning p:last-child { - margin-bottom: 0; -} - -form.subscribe { - margin: 1rem; -} - -div.subscribe-fields { - display: flex; -} - -form.subscribe input { - padding: .5rem; - border: 1px solid #e5e5e5; -} - -form.subscribe input[type=email] { - flex: 1; -} - -form.subscribe input[type=submit] { - padding: .25rem .5rem; - cursor: pointer; -} - -/* Asides */ -aside.post_aside { - font-style: italic; - padding: 0rem 1rem 0rem; - margin: .8rem 0; - border-left: .1rem solid #e5e5e5; - border-right: .1rem solid #e5e5e5; -} - -details summary { - cursor: pointer; -} - -details summary h3, details summary h4, details summary h5, details summary h6 { - display: inline; -} - -.gh-repo-box { - border: 1px solid #d1d5da; - border-radius: 3px; - padding: 16px; - margin-top: 0.5rem; - color: #586069; - font-size: 80%; -} - -.gh-repo-box .repo-link { - color: #0366d6; - font-weight: 600; - font-size: 120%; -} - -.gh-repo-box .subtitle { - margin-bottom: 16px; -} - -.gh-repo-box .stars-forks { - margin-bottom: 0; -} - -.gh-repo-box .stars-forks a { - color: #586069; -} - -.gh-repo-box .stars-forks a:hover { - color: #0366d6; - text-decoration: none; -} - -.gh-repo-box .stars-forks svg { - vertical-align: text-bottom; - fill: currentColor; -} - -.gh-repo-box .stars { - display: inline-block; -} - -.gh-repo-box .forks { - display: inline-block; - margin-left: 16px; -} - -.gh-repo-box .sponsor { - display: inline-block; - margin-left: 16px; -} - -.hidden { - display: none; -} - -.toc-comments-link { - margin-top: .5rem; -} - -h5 { - font-style: italic; - font-size: 0.9rem; -} -.gray { - color: gray; -} - -a strong { - color: #268bd2; -} - -.right-to-left { - direction: rtl; - font-family: Vazir; -} - -.left-to-right, .right-to-left pre, .right-to-left table, .right-to-left[id="toc-aside"] { - direction: ltr; -} - -.status-update-list li { - margin-bottom: .5rem; -} - -.giscus { - margin-top: 1.5rem; -} diff --git a/blog/static/css/edition-2/poole.css b/blog/static/css/edition-2/poole.css deleted file mode 100644 index 63ca0128..00000000 --- a/blog/static/css/edition-2/poole.css +++ /dev/null @@ -1,413 +0,0 @@ -/* - * ___ - * /\_ \ - * _____ ___ ___\//\ \ __ - * /\ '__`\ / __`\ / __`\\ \ \ /'__`\ - * \ \ \_\ \/\ \_\ \/\ \_\ \\_\ \_/\ __/ - * \ \ ,__/\ \____/\ \____//\____\ \____\ - * \ \ \/ \/___/ \/___/ \/____/\/____/ - * \ \_\ - * \/_/ - * - * Designed, built, and released under MIT license by @mdo. Learn more at - * https://github.com/poole/poole. - */ - - -/* - * Contents - * - * Body resets - * Custom type - * Messages - * Container - * Masthead - * Posts and pages - * Pagination - * Reverse layout - * Themes - */ - -@font-face { - font-family: "Iosevka"; - src: url("/fonts/iosevka-regular.woff2") format("woff2"), url("/fonts/iosevka-regular.woff") format("woff"); - font-weight: normal; - font-style: normal; - font-display: swap; -} - -/* - * Body resets - * - * Update the foundational and global aspects of the page. - */ - -* { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -html, -body { - margin: 0; - padding: 0; -} - -html { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - line-height: 1.5; -} - -body { - color: #515151; - background-color: #fff; - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; -} - -/* No `:visited` state is required by default (browsers will use `a`) */ -a { - color: #268bd2; - text-decoration: none; -} -/* `:focus` is linked to `:hover` for basic accessibility */ -a:hover, -a:focus { - text-decoration: underline; -} - -/* Headings */ -h1, h2, h3, h4, h5, h6 { - margin-bottom: .5rem; - font-weight: bold; - line-height: 1.25; - color: #313131; - text-rendering: optimizeLegibility; -} -h1 { - font-size: 2rem; -} -h2 { - margin-top: 1rem; - font-size: 1.5rem; -} -h3 { - margin-top: 1.5rem; - font-size: 1.25rem; -} -h4, h5, h6 { - margin-top: 1rem; - font-size: 1rem; -} - -/* Body text */ -p { - margin-top: 0; - margin-bottom: 1rem; -} - -strong { - color: #303030; -} - - -/* Lists */ -ul, ol, dl { - margin-top: 0; - margin-bottom: 1rem; -} - -/* Nested lists */ -li ul, li ol, li dl { - margin-bottom: 0; -} - -li ul + p, li ol + p, li dl + p { - margin-top: 1rem; -} - -dt { - font-weight: bold; -} -dd { - margin-bottom: .5rem; -} - -/* Misc */ -hr { - position: relative; - margin: 1.5rem 0; - border: 0; - border-top: 1px solid #eee; - border-bottom: 1px solid #fff; -} - -abbr { - font-size: 90%; - font-weight: bold; - color: #555; - text-transform: uppercase; -} -abbr[title] { - cursor: help; - border-bottom: 1px dotted #e5e5e5; -} - -/* Code */ -code, -pre { - font-family: "Iosevka", monospace; -} -code { - padding: .25em .5em; - font-size: 85%; - color: #bf616a; - background-color: #f9f9f9; - border-radius: 3px; -} -pre { - display: block; - margin-top: 0; - margin-bottom: 1rem; - padding: .5rem; - font-size: .95rem; - line-height: 1.4; - white-space: pre; - overflow: auto; - word-wrap: normal; - background-color: #f9f9f9; -} -pre code { - padding: 0; - font-size: 100%; - color: inherit; - background-color: transparent; -} -.highlight { - margin-bottom: 1rem; - border-radius: 4px; -} -.highlight pre { - margin-bottom: 0; -} - -/* Quotes */ -blockquote { - padding: .5rem 1rem; - margin: .8rem 0; - color: #7a7a7a; - border-left: .25rem solid #e5e5e5; -} -blockquote p:last-child { - margin-bottom: 0; -} -@media (min-width: 30rem) { - blockquote { - padding-right: 5rem; - padding-left: 1.25rem; - } -} - -img { - display: block; - margin: 0 0 1rem; - border-radius: 5px; - max-width: 100%; - color: grey; - font-style: italic; -} - -/* Tables */ -table { - margin-bottom: 1rem; - width: 100%; - border: 1px solid #e5e5e5; - border-collapse: collapse; -} -td, -th { - padding: .25rem .5rem; - border: 1px solid #e5e5e5; -} -tbody tr:nth-child(odd) td, -tbody tr:nth-child(odd) th { - background-color: #f9f9f9; -} - - -/* - * Custom type - * - * Extend paragraphs with `.lead` for larger introductory text. - */ - -.lead { - font-size: 1.25rem; - font-weight: 300; -} - - -/* - * Messages - * - * Show alert messages to users. You may add it to single elements like a `
`, - * or to a parent if there are multiple elements to show. - */ - -.message { - margin-bottom: 1rem; - padding: 1rem; - color: #717171; - background-color: #f9f9f9; -} - - -/* - * Container - * - * Center the page content. - */ - -.container { - max-width: 45rem; - padding-left: 1rem; - padding-right: 1rem; - margin-left: auto; - margin-right: auto; -} - - -/* - * Masthead - * - * Super small header above the content for site name and short description. - */ - -.masthead { - padding-top: 1rem; - padding-bottom: 1rem; - margin-bottom: 1rem; -} -.masthead-title { - margin-top: 0; - margin-bottom: 0; - color: #505050; -} -.masthead-title a { - color: #505050; -} -.masthead small { - font-size: 75%; - font-weight: 400; - color: #c0c0c0; - letter-spacing: 0; -} - - -/* - * Posts and pages - * - * Each post is wrapped in `.post` and is used on default and post layouts. Each - * page is wrapped in `.page` and is only used on the page layout. - */ - -.page { - margin-bottom: 4em; -} - -/* Blog post or page title */ -.page-title, -.post-title, -.post-title a { - color: #303030; -} -.page-title, -.post-title { - margin-top: 0; -} - -/* Meta data line below post title */ -.post-date { - display: block; - margin-top: -.5rem; - margin-bottom: 1rem; - color: #9a9a9a; -} - -/* Related posts */ -.related { - padding-top: 2rem; - padding-bottom: 2rem; - border-top: 1px solid #eee; -} -.related-posts { - padding-left: 0; - list-style: none; -} -.related-posts h3 { - margin-top: 0; -} -.related-posts li small { - font-size: 75%; - color: #999; -} -.related-posts li a:hover { - color: #268bd2; - text-decoration: none; -} -.related-posts li a:hover small { - color: inherit; -} - - -/* - * Pagination - * - * Super lightweight (HTML-wise) blog pagination. `span`s are provide for when - * there are no more previous or next posts to show. - */ - -.pagination { - overflow: hidden; /* clearfix */ - margin-left: -1rem; - margin-right: -1rem; - font-family: "PT Sans", Helvetica, Arial, sans-serif; - color: #ccc; - text-align: center; -} - -/* Pagination items can be `span`s or `a`s */ -.pagination-item { - display: block; - padding: 1rem; - border: 1px solid #eee; -} -.pagination-item:first-child { - margin-bottom: -1px; -} - -/* Only provide a hover state for linked pagination items */ -a.pagination-item:hover { - background-color: #f5f5f5; -} - -@media (min-width: 30rem) { - .pagination { - margin: 3rem 0; - } - .pagination-item { - float: left; - width: 50%; - } - .pagination-item:first-child { - margin-bottom: 0; - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - } - .pagination-item:last-child { - margin-left: -1px; - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - } -} diff --git a/blog/templates/edition-2/base.html b/blog/templates/edition-2/base.html index ca0447b5..1a2ab2e7 100644 --- a/blog/templates/edition-2/base.html +++ b/blog/templates/edition-2/base.html @@ -6,13 +6,13 @@ + {% if current_url %} {% endif %} - diff --git a/blog/templates/edition-2/index.html b/blog/templates/edition-2/index.html index 4c893f5c..bab56839 100644 --- a/blog/templates/edition-2/index.html +++ b/blog/templates/edition-2/index.html @@ -118,6 +118,8 @@
+ + {{ snippets::dark_mode_note() }} {% endblock after_main %} diff --git a/blog/templates/edition-2/page.html b/blog/templates/edition-2/page.html index ba5f3e03..e1117506 100644 --- a/blog/templates/edition-2/page.html +++ b/blog/templates/edition-2/page.html @@ -130,6 +130,8 @@ {% endfor %} {%- endif %} + + {{ snippets::dark_mode_note() }} {% endblock main %} diff --git a/blog/templates/snippets.html b/blog/templates/snippets.html index 452fed9a..96dbcf57 100644 --- a/blog/templates/snippets.html +++ b/blog/templates/snippets.html @@ -45,3 +45,12 @@ Instead of authenticating the giscus application, you can also comment directly on GitHub. {% endmacro giscus %} + +{% macro dark_mode_note() %} ++ We're still working on adjusting text colors, fixing images, and removing inconsistencies. If you have any problems, please file an issue. +
+ +{% endmacro dark_mode_note %}