From df39953f4066578844960901e7decc252beef642 Mon Sep 17 00:00:00 2001 From: BHznJNs <441768875@qq.com> Date: Mon, 12 Feb 2024 21:47:22 +0800 Subject: [PATCH] style updated & build script updated --- .index/static+English_1 | 2 +- build.config.js | 7 +++++++ builder/indexTemplate.js | 1 + builder/rss/rssFileGenerator.js | 11 +++++++---- dist/style.min.css | 2 +- index.html | 1 + src/styles/article/media.css | 8 +++++++- 7 files changed, 25 insertions(+), 7 deletions(-) diff --git a/.index/static+English_1 b/.index/static+English_1 index b0388b4..5d374fe 100644 --- a/.index/static+English_1 +++ b/.index/static+English_1 @@ -1 +1 @@ -{"total":1,"current":1,"content":["Syntax Tutorials/","Introduction.md","Installation.md","First Blog.md"]} \ No newline at end of file +{"total":1,"current":1,"content":["Syntax Tutorials/","Introduction.md","Installation.md","First Blog.md","Identification File.md","Configuration.md"]} \ No newline at end of file diff --git a/build.config.js b/build.config.js index b642d17..bf7d937 100644 --- a/build.config.js +++ b/build.config.js @@ -13,6 +13,13 @@ export default { */ title: "Markdown Blog Template Documentation", + /** + * description: String + * the description for the site, is necessary for RSS. + * 网站的描述，对于 RSS 功能是必要的。 + */ + description: "A markdown static blog site.", + /** * footer: String * the footer for this site, can be deleted if you do not need it diff --git a/builder/indexTemplate.js b/builder/indexTemplate.js index 8fbd196..4f54122 100644 --- a/builder/indexTemplate.js +++ b/builder/indexTemplate.js @@ -10,6 +10,7 @@ const HTMLHeader = `\ +${config.description ? ` ` : ""} ${config.title ? config.title : "MarkdownBlog"} diff --git a/builder/rss/rssFileGenerator.js b/builder/rss/rssFileGenerator.js index 15fc04c..374275c 100644 --- a/builder/rss/rssFileGenerator.js +++ b/builder/rss/rssFileGenerator.js @@ -1,12 +1,15 @@ +import config from "../../build.config.js" + // input: [RssItem] // output: RssXmlString export default function(items) { - const RssTemplateBefore = ` + const RssTemplateBefore = `\ + -BHznJNs' Blog -https://bhznjns.github.io/markdown-blog/#static/ -一个 Markdown 静态博客站。 +${config.title ? config.title : "Markdown Blog"} +${config.homepage ? config.homepage : "https://bhznjns.github.io/markdown-blog-template"} +${config.description ? `${config.description}` : ""} ` const RssTemplateAfter = ` ` diff --git a/dist/style.min.css b/dist/style.min.css index b63b9f1..09a43ac 100644 --- a/dist/style.min.css +++ b/dist/style.min.css @@ -1 +1 @@ -body:not(.dark){--default-tx-color:#333;--quote-tx-color:#4a4a4a;--hovered-tx-color:#000;--default-bg-color:#fff;--chart-bg-color:#fff;--quote-bg-color:#f5f5f5;--fab-bg-color:#fff;--hovered-bg-color:#eee;--allpage-bg-color:#f7f7f7;--shallow-bd-color:#e0e0e0;--deep-bd-color:#9e9e9e;--btn-bd-color:#f5f5f5;--default-link-unvisited-color:#1976d2;--default-link-visited-color:#ff1493;--default-inline-code-color:#000;--default-inline-code-bg-color:#eee;--default-block-code-bg-color:#0d1117}body.dark{--default-tx-color:#f7f7f7;--quote-tx-color:#ececec;--hovered-tx-color:#fff;--default-bg-color:#161616;--chart-bg-color:#252525;--quote-bg-color:#3e3e3e;--fab-bg-color:#424242;--hovered-bg-color:#333;--allpage-bg-color:#000;--shallow-bd-color:#616161;--deep-bd-color:#bdbdbd;--btn-bd-color:#616161;--default-link-unvisited-color:#64b5f6;--default-link-visited-color:#ff69b4;--default-inline-code-color:#eee;--default-inline-code-bg-color:#333;--default-block-code-bg-color:#202225}nav{display:flex;flex-wrap:wrap;justify-content:space-between;margin:1rem var(--page-horizonal-padding) 0;padding:0 8px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.dark #homepage img,.dark #rss-icon img{filter:invert(100%)}nav .icon-btn img{aspect-ratio:1}#homepage{margin-right:6px}#homepage img{padding-right:.4rem}#homepage span{font-size:1.2rem;font-weight:700}#rss-icon{margin-right:6px}nav a:before{content:none;display:unset}.dark #dark-btn,body:not(.dark) #light-btn{display:none}main{background-color:var(--default-bg-color);border-radius:1rem;box-shadow:var(--shadow-lg);color:var(--default-tx-color);margin:2rem var(--page-horizonal-padding) 4rem;padding:1rem 2rem;transition:background .6s}@media screen and (max-width:767px){main{border-radius:.75rem;box-shadow:var(--shadow-md-2);padding:1rem 1.6rem}}main ul{list-style-type:none;padding:0}main[data-is-root=true] #previous-dir{display:none}main[data-is-root=true] #newest{display:block}ul#newest{display:none}main ul li{border:2px solid var(--deep-bd-color);border-radius:4px;color:var(--default-tx-color);cursor:pointer;margin-bottom:8px;padding:6px 1rem;transition:color background .3s .3s}.dark main ul li{border-color:var(--shallow-bd-color)}main ul li:hover{background-color:var(--hovered-bg-color);color:var(--hovered-tx-color)}main.disabled{opacity:.85}#article-list :not(li),main.disabled{pointer-events:none}h1,h2,h3,h4,h5,h6,p{color:inherit;overflow-wrap:break-word;transition:color .3s .15s}h1{font-size:2em}h2{font-size:1.8em}h3{font-size:1.6em}h4{font-size:1.4em}h5{font-size:1.2em}h6{font-size:1.1em}code:not(pre code){background-color:var(--default-inline-code-bg-color);border-radius:8px;box-shadow:none!important;color:var(--default-inline-code-color);font-family:Consolas,monospace;margin:0 4px;padding:2px 8px;transition:color .3s .15s,background .3s .15s}a:before{content:"🔗";display:inline-block}a:link{color:var(--default-link-unvisited-color)}a:visited{color:var(--default-link-visited-color)}u{background-image:linear-gradient(to right,var(--default-tx-color),var(--default-tx-color));background-position:bottom;background-repeat:no-repeat;background-size:100% 1px;bottom:0;position:relative;text-decoration:none;transition:bottom .3s .05s,padding .3s .05s,background-size .3s}u:hover{background-size:100% 3px;bottom:1px;padding-bottom:2px}del{background-image:linear-gradient(to right,var(--default-tx-color),var(--default-tx-color));background-position:0;background-repeat:no-repeat;background-size:100% 2px;padding:0 2px;text-decoration:none;transition:background-size .3s}del:hover{background-size:100% 4px}span.dim{opacity:.7}.dark span.dim{opacity:.8}hr{border:none;border-bottom:2px solid var(--deep-bd-color);color:transparent;margin:0 6vw .6rem;padding:.3rem 0;transition:margin .3s}hr:hover{margin-left:2vw;margin-right:2vw}ruby{position:relative}ruby:before{background-color:var(--default-bg-color);border-radius:4px;bottom:calc(1em + 4px);content:attr(data-notation);left:50%;opacity:0;padding:2px 6px;pointer-events:none;position:absolute;transform:translateX(-50%);transition:opacity .3s .05s;white-space:nowrap;z-index:1}ruby rt,ruby:hover:before{opacity:1}ruby rt{font-size:9px;position:relative;top:0;transition:opacity .3s}ruby:hover rt{opacity:0}li,ol,ul{--border-radius-value:6px;color:inherit;transition:color .3s .15s}ol{padding-left:1em}ol,ul{overflow-wrap:break-word}ul{margin-left:1em;padding-left:1.625em}ol li,ul li{margin-bottom:.25em;transition:color .3s,background .3s}ul>li{border-bottom-left-radius:var(--border-radius-value);border-top-left-radius:var(--border-radius-value);padding-left:5px}ul>li:hover{background-color:var(--hovered-bg-color)}ul>li::marker{color:var(--default-tx-color);font-size:1.25em;transition:color .3s}ul>li:hover::marker{color:var(--deep-bd-color)}ol{list-style:none;overflow-x:hidden}ol>li{border-radius:var(--border-radius-value);counter-increment:list-item;margin-bottom:0;overflow-wrap:anywhere;padding:4px}ol>li:hover{background-color:var(--hovered-bg-color)}ol>li:before{background-color:var(--default-tx-color);border-radius:var(--border-radius-value);color:var(--default-bg-color);content:counter(list-item);font-weight:400;margin-right:.5em;padding:0 .375em;transition:inherit}@media screen and (min-width:960px){div.math{font-size:1.3em!important}}div.math{box-sizing:border-box;color:var(--default-tx-color);font-size:1.2em;line-height:1.75;margin:0 auto;max-width:100%;overflow-x:auto;overflow-y:hidden;padding:2px .5rem 6px;white-space:nowrap;width:-moz-max-content;width:max-content}span.math{font-size:1.125em}span.math img{height:calc(1em + 16px);vertical-align:middle}.table{border:1px solid var(--shallow-bd-color);border-radius:8px;box-shadow:var(--shadow-sm);box-sizing:border-box;margin-bottom:1rem;overflow-x:auto;overflow-y:hidden;transition:box-shadow .3s;width:100%}.table:hover{box-shadow:var(--shadow-md-1)}.dark .table{border-width:2px}table{border-collapse:separate;border-spacing:0;color:var(--default-tx-color);min-width:100%;width:-moz-fit-content;width:fit-content}@media screen and (max-width:767px){body:not(.dark) .table{border-left:none;border-right:none}.table{border-radius:0;border-width:2px;margin-left:-1.6rem;margin-right:-1.6rem;width:calc(100% + 3.2rem)}}thead{font-weight:700}td:first-child,th:first-child{padding-right:0!important}td,th{font-size:.85em;min-width:6em;padding:8px 18px!important;text-align:left}th{opacity:.85}td{border-top:2px solid var(--shallow-bd-color)}div.media-container{background-color:var(--default-bg-color);border-radius:8px;box-shadow:var(--shadow-md-1);margin:1rem 2rem;max-height:80vh;overflow-x:hidden;overflow-y:auto;transition:box-shadow .3s}@media screen and (max-width:767px){div.media-container:not(blockquote div.media-container){border-radius:0;margin-left:-1.6rem;margin-right:-1.6rem;width:calc(100% + 3.2rem)}blockquote>div.media-container{border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-1rem;margin-right:0}}@media screen and (min-width:960px){div.media-container:not(blockquote div.media-container){border-radius:16px;margin-left:4rem;margin-right:4rem}}div.media-container:hover{box-shadow:var(--shadow-md-2)}div.media-container audio,div.media-container iframe,div.media-container img,div.media-container video{vertical-align:bottom;width:100%}div.media-container img{cursor:pointer}div.media-container img.load-error{cursor:auto;display:inline-block;height:16rem;max-height:40vh;position:relative}div.media-container img.load-error:before{background-color:#f5f5f5;background-image:url(imgs/broken-image.svg);background-position:50% calc(50% - 8px);background-repeat:no-repeat;background-size:85% 85%;color:transparent;content:"";height:100%;left:0;position:absolute;top:0;width:100%}div.media-container img.load-error:after{background-color:rgba(0,0,0,.65);border-top-right-radius:6px;bottom:0;color:#fff;content:attr(alt);font-size:.875rem;left:0;line-height:2;max-width:100%;overflow:hidden;padding:1px .6rem;position:absolute;text-align:start;text-overflow:ellipsis;white-space:nowrap}.dark div.media-container img.load-error:before{background-color:#dfddda;filter:invert(1)}.dark div.media-container img.load-error:after{background-color:hsla(0,0%,100%,.85);color:#000}div.media-container iframe{background-color:var(--default-bg-color);border:none;height:50vh}div.media-container .echarts-container{height:600px;max-height:60vh;width:100%}div.media-container .flowchart-container,div.media-container .ganttchart-container,div.media-container .sequencechart-container{background-color:var(--chart-bg-color);padding:8px;transition:background .3s .15s}.flowchart-container svg,.sequencechart-container svg{width:100%}.railroad-container svg{background-color:var(--chart-bg-color)!important;width:100%}body.dark .flowchart-container svg,body.dark .sequencechart-container svg{filter:invert(.85)}div.media-container .qrcode-container{margin:0 auto}audio::-webkit-media-controls-panel{background-color:var(--default-bg-color)}audio::-webkit-media-controls-current-time-display,audio::-webkit-media-controls-time-remaining-display{color:var(--default-tx-color)}@media (prefers-color-scheme:light){.dark audio::-webkit-media-controls-mute-button,.dark audio::-webkit-media-controls-play-button,.dark audio::-webkit-media-controls-timeline,.dark audio::-webkit-media-controls-volume-slider{filter:invert(.85)}}@media (prefers-color-scheme:dark){body:not(.dark) audio::-webkit-media-controls-current-time-display,body:not(.dark) audio::-webkit-media-controls-time-remaining-display{text-shadow:0 0 1px var(--default-tx-color)}body:not(.dark) audio::-webkit-media-controls-mute-button,body:not(.dark) audio::-webkit-media-controls-play-button,body:not(.dark) audio::-webkit-media-controls-timeline,body:not(.dark) audio::-webkit-media-controls-volume-slider{filter:invert(.85)}}@media screen and (max-width:767px){pre.code-block:not(blockquote pre.code-block){margin-left:-1.6rem!important;margin-right:-1.6rem!important;width:calc(100% + 3.2rem)}pre.code-block code:not(blockquote pre.code-block code){border-radius:0!important}blockquote>pre.code-block{border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-1rem;margin-right:0}blockquote>pre.code-block code{border-bottom-left-radius:0!important;border-top-left-radius:0!important;margin-left:0!important}}pre.code-block{position:relative}pre.code-block:before{color:hsla(0,0%,100%,.85);content:attr(data-language);font-size:.75em;font-weight:700;padding-top:2px;position:absolute;right:8px;top:0;z-index:1}pre.code-block code{background-color:var(--default-block-code-bg-color);border-radius:8px;box-shadow:var(--shadow-md-1);display:block;font-family:Lucida Console,Consolas,monospace;font-size:1em;overflow-x:auto;padding:calc(1em + 4px) 1rem 1rem;transition:box-shadow .3s}pre.code-block code:hover{box-shadow:var(--shadow-md-2)}pre.code-block code.nohighlight{color:#f7f7f7}pre.code-block code span{opacity:1!important}div.details{margin:1rem 0}div.details details{border-radius:8px;padding:0 1rem;transition:background .3s,padding .3s .05s,box-shadow .3s .05s}@media screen and (max-width:767px){div.details .details-children-container>.details-children{padding:0 1.6rem!important}div.details .details-children>div.media-container:last-child,div.details .details-children>pre:last-child{margin-bottom:0}blockquote>.details{margin-left:-1rem}blockquote>.details details{border-bottom-right-radius:8px;border-top-right-radius:8px}blockquote>.details .details-children-container{border-bottom-left-radius:0;margin:0}blockquote>.details .details-children pre code{border-radius:0}blockquote>.details .details-children div.media-container,blockquote>.details .details-children pre{border-radius:0;margin-left:-1.6rem;margin-right:-1.6rem}}body:not(.dark) details[open]{background-color:var(--default-bg-color)}div.details details[open]{box-shadow:var(--shadow-sm);padding-bottom:.6rem;padding-top:.6rem}.dark div.details details[open]{background-color:var(--shallow-bd-color)}div.details details summary{color:var(--default-tx-color);cursor:pointer;font-size:1.2em;outline:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}div.details details summary:focus-visible{outline:auto}div.details .details-children-container{border:2px solid transparent;border-top:none;display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .3s .15s,border .3s .15s}div.details .details-children-container>.details-children{min-height:0;overflow:hidden;padding:0 1rem}div.details details[open]+.details-children-container{border-bottom-left-radius:8px;border-bottom-right-radius:8px;border-color:var(--shallow-bd-color);grid-template-rows:1fr}@media screen and (max-width:767px){blockquote{margin-left:1rem!important;margin-right:0!important}}blockquote{background-color:var(--quote-bg-color);border-bottom-right-radius:8px;border-top-right-radius:8px;color:var(--quote-tx-color);margin-right:1rem;padding:.1px 1rem;position:relative;transition:color .3s .15s,background .3s .15s}blockquote code:not(pre code){filter:invert(15%)}blockquote:before{background-color:var(--deep-bd-color);content:" ";cursor:pointer;display:block;height:100%;left:0;max-width:8px;position:absolute;top:0;transition:width .3s,transform .3s .05s;width:.125em;z-index:1}blockquote:hover:before{transform:translateX(-3px);width:.375em}body:not(.dark) blockquote>.details .details-children{border-color:todo}article{--gap-from-catalog:2rem;background-color:var(--default-bg-color);border-radius:1rem;box-shadow:var(--shadow-lg);box-sizing:border-box;color:var(--default-tx-color);margin:2rem var(--page-horizonal-padding) 4rem;padding:1rem 2rem;transition:margin .45s,border-radius .3s .2s,opacity .45s,background .6s}article:empty{display:none!important}article.with-catalog{border-bottom-right-radius:0;border-top-right-radius:0;margin-left:auto;margin-right:0;min-width:calc(64vw - var(--gap-from-catalog));width:calc(100vw - 360px - var(--gap-from-catalog))}@media screen and (max-width:767px){article{border-radius:.75rem;box-shadow:var(--shadow-md-2);padding:1rem 1.6rem}article.with-catalog{border-radius:.75rem;margin-left:var(--page-horizonal-padding);margin-right:var(--page-horizonal-padding);opacity:.6;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:auto}}.icon-btn{align-items:center;background-color:var(--default-bg-color);border:1px solid var(--btn-bd-color);border-radius:8px;box-shadow:var(--shadow-sm);color:var(--default-tx-color)!important;cursor:pointer;display:inline-flex;height:2rem;padding:6px .5rem;text-decoration:none!important;transition:background .3s,box-shadow .3s}.icon-btn:hover{background-color:var(--hovered-bg-color);box-shadow:var(--shadow-md-1)}.dark .icon-btn{border-width:3px}.icon-btn img{aspect-ratio:1;height:1.6rem;transition:filter .3s .15s}.icon-btn span{transition:color .3s .15s,transform .3s}.underline-through .underline-target{background-image:linear-gradient(to right,var(--default-tx-color),var(--default-tx-color));background-position:100% 100%;background-repeat:no-repeat;background-size:0 2px;bottom:0;padding-bottom:2px;position:relative;transition:bottom .3s,background-size .3s}.underline-through:hover .underline-target{background-position:0 100%;background-size:100% 2px;bottom:2px}.underline-side .underline-target{transition:transform .3s}.underline-side:hover .underline-target{transform:translateY(-3px)}.underline-side .underline-target:before{border-bottom:2px solid var(--default-tx-color);bottom:-2px;content:" ";display:block;position:absolute;transition:width .3s;width:0}.underline-side:hover .underline-target:before{width:100%}.underline-side.left .underline-target:before{left:0}.underline-side.right .underline-target:before{right:0}paging-view{align-items:center;display:flex;gap:1rem;justify-content:flex-end}paging-view.hidden{display:none}paging-view .icon-btn{font-weight:700;height:2.4rem}paging-view .icon-btn:disabled{opacity:.6;pointer-events:none}paging-view .icon-btn:hover span{transform:translateY(-2px)}paging-view #next-btn span:before{left:unset;right:0}paging-view label{align-items:center;display:flex;gap:4px}body{--page-horizonal-padding:10vw;--shadow-sm:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12)!important;--shadow-md-1:0 3px 3px -2px rgba(0,0,0,.2),0 3px 4px 0 rgba(0,0,0,.14),0 1px 8px 0 rgba(0,0,0,.12)!important;--shadow-md-2:0 3px 5px -1px rgba(0,0,0,.2),0 5px 8px 0 rgba(0,0,0,.14),0 1px 14px 0 rgba(0,0,0,.12)!important;--shadow-lg:0 4px 5px -2px rgba(0,0,0,.2),0 7px 10px 1px rgba(0,0,0,.14),0 2px 16px 1px rgba(0,0,0,.12)!important;background-color:var(--allpage-bg-color);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Helvetica Neue,Helvetica,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei UI,Microsoft YaHei,Source Han Sans CN,sans-serif;margin:0;transition:background .6s,color .3s}@media screen and (max-width:767px){body{--page-horizonal-padding:1.6rem}}@media screen and (min-width:1024px){:root{font-size:17px}body{--page-horizonal-padding:16vw}}body.dark{--shadow-sm:none!important;--shadow-md-1:none!important;--shadow-md-2:none!important;--shadow-lg:none!important}label{-webkit-user-select:none;-moz-user-select:none;user-select:none}input{background-color:var(--quote-bg-color);border:none;border-radius:4px;color:var(--default-tx-color);font-size:16px;height:32px;outline:none;overflow:hidden;padding:0 6px;width:3em}label input{margin-left:4px}footer{color:var(--default-tx-color);margin-bottom:48px;padding:0 6px;text-align:center} \ No newline at end of file +body:not(.dark){--default-tx-color:#333;--quote-tx-color:#4a4a4a;--hovered-tx-color:#000;--default-bg-color:#fff;--chart-bg-color:#fff;--quote-bg-color:#f5f5f5;--fab-bg-color:#fff;--hovered-bg-color:#eee;--allpage-bg-color:#f7f7f7;--shallow-bd-color:#e0e0e0;--deep-bd-color:#9e9e9e;--btn-bd-color:#f5f5f5;--default-link-unvisited-color:#1976d2;--default-link-visited-color:#ff1493;--default-inline-code-color:#000;--default-inline-code-bg-color:#eee;--default-block-code-bg-color:#0d1117}body.dark{--default-tx-color:#f7f7f7;--quote-tx-color:#ececec;--hovered-tx-color:#fff;--default-bg-color:#161616;--chart-bg-color:#252525;--quote-bg-color:#3e3e3e;--fab-bg-color:#424242;--hovered-bg-color:#333;--allpage-bg-color:#000;--shallow-bd-color:#616161;--deep-bd-color:#bdbdbd;--btn-bd-color:#616161;--default-link-unvisited-color:#64b5f6;--default-link-visited-color:#ff69b4;--default-inline-code-color:#eee;--default-inline-code-bg-color:#333;--default-block-code-bg-color:#202225}nav{display:flex;flex-wrap:wrap;justify-content:space-between;margin:1rem var(--page-horizonal-padding) 0;padding:0 8px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.dark #homepage img,.dark #rss-icon img{filter:invert(100%)}nav .icon-btn img{aspect-ratio:1}#homepage{margin-right:6px}#homepage img{padding-right:.4rem}#homepage span{font-size:1.2rem;font-weight:700}#rss-icon{margin-right:6px}nav a:before{content:none;display:unset}.dark #dark-btn,body:not(.dark) #light-btn{display:none}main{background-color:var(--default-bg-color);border-radius:1rem;box-shadow:var(--shadow-lg);color:var(--default-tx-color);margin:2rem var(--page-horizonal-padding) 4rem;padding:1rem 2rem;transition:background .6s}@media screen and (max-width:767px){main{border-radius:.75rem;box-shadow:var(--shadow-md-2);padding:1rem 1.6rem}}main ul{list-style-type:none;padding:0}main[data-is-root=true] #previous-dir{display:none}main[data-is-root=true] #newest{display:block}ul#newest{display:none}main ul li{border:2px solid var(--deep-bd-color);border-radius:4px;color:var(--default-tx-color);cursor:pointer;margin-bottom:8px;padding:6px 1rem;transition:color background .3s .3s}.dark main ul li{border-color:var(--shallow-bd-color)}main ul li:hover{background-color:var(--hovered-bg-color);color:var(--hovered-tx-color)}main.disabled{opacity:.85}#article-list :not(li),main.disabled{pointer-events:none}h1,h2,h3,h4,h5,h6,p{color:inherit;overflow-wrap:break-word;transition:color .3s .15s}h1{font-size:2em}h2{font-size:1.8em}h3{font-size:1.6em}h4{font-size:1.4em}h5{font-size:1.2em}h6{font-size:1.1em}code:not(pre code){background-color:var(--default-inline-code-bg-color);border-radius:8px;box-shadow:none!important;color:var(--default-inline-code-color);font-family:Consolas,monospace;margin:0 4px;padding:2px 8px;transition:color .3s .15s,background .3s .15s}a:before{content:"🔗";display:inline-block}a:link{color:var(--default-link-unvisited-color)}a:visited{color:var(--default-link-visited-color)}u{background-image:linear-gradient(to right,var(--default-tx-color),var(--default-tx-color));background-position:bottom;background-repeat:no-repeat;background-size:100% 1px;bottom:0;position:relative;text-decoration:none;transition:bottom .3s .05s,padding .3s .05s,background-size .3s}u:hover{background-size:100% 3px;bottom:1px;padding-bottom:2px}del{background-image:linear-gradient(to right,var(--default-tx-color),var(--default-tx-color));background-position:0;background-repeat:no-repeat;background-size:100% 2px;padding:0 2px;text-decoration:none;transition:background-size .3s}del:hover{background-size:100% 4px}span.dim{opacity:.7}.dark span.dim{opacity:.8}hr{border:none;border-bottom:2px solid var(--deep-bd-color);color:transparent;margin:0 6vw .6rem;padding:.3rem 0;transition:margin .3s}hr:hover{margin-left:2vw;margin-right:2vw}ruby{position:relative}ruby:before{background-color:var(--default-bg-color);border-radius:4px;bottom:calc(1em + 4px);content:attr(data-notation);left:50%;opacity:0;padding:2px 6px;pointer-events:none;position:absolute;transform:translateX(-50%);transition:opacity .3s .05s;white-space:nowrap;z-index:1}ruby rt,ruby:hover:before{opacity:1}ruby rt{font-size:9px;position:relative;top:0;transition:opacity .3s}ruby:hover rt{opacity:0}li,ol,ul{--border-radius-value:6px;color:inherit;transition:color .3s .15s}ol{padding-left:1em}ol,ul{overflow-wrap:break-word}ul{margin-left:1em;padding-left:1.625em}ol li,ul li{margin-bottom:.25em;transition:color .3s,background .3s}ul>li{border-bottom-left-radius:var(--border-radius-value);border-top-left-radius:var(--border-radius-value);padding-left:5px}ul>li:hover{background-color:var(--hovered-bg-color)}ul>li::marker{color:var(--default-tx-color);font-size:1.25em;transition:color .3s}ul>li:hover::marker{color:var(--deep-bd-color)}ol{list-style:none;overflow-x:hidden}ol>li{border-radius:var(--border-radius-value);counter-increment:list-item;margin-bottom:0;overflow-wrap:anywhere;padding:4px}ol>li:hover{background-color:var(--hovered-bg-color)}ol>li:before{background-color:var(--default-tx-color);border-radius:var(--border-radius-value);color:var(--default-bg-color);content:counter(list-item);font-weight:400;margin-right:.5em;padding:0 .375em;transition:inherit}@media screen and (min-width:960px){div.math{font-size:1.3em!important}}div.math{box-sizing:border-box;color:var(--default-tx-color);font-size:1.2em;line-height:1.75;margin:0 auto;max-width:100%;overflow-x:auto;overflow-y:hidden;padding:2px .5rem 6px;white-space:nowrap;width:-moz-max-content;width:max-content}span.math{font-size:1.125em}span.math img{height:calc(1em + 16px);vertical-align:middle}.table{border:1px solid var(--shallow-bd-color);border-radius:8px;box-shadow:var(--shadow-sm);box-sizing:border-box;margin-bottom:1rem;overflow-x:auto;overflow-y:hidden;transition:box-shadow .3s;width:100%}.table:hover{box-shadow:var(--shadow-md-1)}.dark .table{border-width:2px}table{border-collapse:separate;border-spacing:0;color:var(--default-tx-color);min-width:100%;width:-moz-fit-content;width:fit-content}@media screen and (max-width:767px){body:not(.dark) .table{border-left:none;border-right:none}.table{border-radius:0;border-width:2px;margin-left:-1.6rem;margin-right:-1.6rem;width:calc(100% + 3.2rem)}}thead{font-weight:700}td:first-child,th:first-child{padding-right:0!important}td,th{font-size:.85em;min-width:6em;padding:8px 18px!important;text-align:left}th{opacity:.85}td{border-top:2px solid var(--shallow-bd-color)}div.media-container{background-color:var(--default-bg-color);border-radius:8px;box-shadow:var(--shadow-md-1);margin:1rem 2rem;max-height:80vh;overflow-x:hidden;overflow-y:auto;transition:background .3s .15s,box-shadow .3s}@media screen and (max-width:767px){div.media-container:not(blockquote div.media-container){border-radius:0;margin-left:-1.6rem;margin-right:-1.6rem;width:calc(100% + 3.2rem)}blockquote>div.media-container{border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-1rem;margin-right:0}}@media screen and (min-width:960px){div.media-container:not(blockquote div.media-container){border-radius:16px;margin-left:4rem;margin-right:4rem}}div.media-container:hover{box-shadow:var(--shadow-md-2)}div.media-container audio,div.media-container iframe,div.media-container img,div.media-container video{vertical-align:bottom;width:100%}div.media-container img{cursor:pointer}div.media-container img.load-error{cursor:auto;display:inline-block;height:16rem;max-height:40vh;position:relative}div.media-container img.load-error:before{background-color:#f5f5f5;background-image:url(imgs/broken-image.svg);background-position:50% calc(50% - 8px);background-repeat:no-repeat;background-size:85% 85%;color:transparent;content:"";height:100%;left:0;position:absolute;top:0;transition:filter .3s .15s,background .3s .15s;width:100%}div.media-container img.load-error:after{background-color:rgba(0,0,0,.65);border-top-right-radius:6px;bottom:0;color:#fff;content:attr(alt);font-size:.875rem;left:0;line-height:2;max-width:100%;overflow:hidden;padding:1px .6rem;position:absolute;text-align:start;text-overflow:ellipsis;transition:color .3s .15s,background .3s .15s;white-space:nowrap}.dark div.media-container img.load-error:before{background-color:#dfddda;filter:invert(1)}.dark div.media-container img.load-error:after{background-color:hsla(0,0%,100%,.85);color:#000}div.media-container iframe{background-color:var(--default-bg-color);border:none;height:50vh}div.media-container .echarts-container{height:600px;max-height:60vh;width:100%}div.media-container .flowchart-container,div.media-container .ganttchart-container,div.media-container .sequencechart-container{background-color:var(--chart-bg-color);padding:8px;transition:background .3s .15s}.flowchart-container svg,.sequencechart-container svg{width:100%}.railroad-container svg{background-color:var(--chart-bg-color)!important;transition:background .3s .15s;width:100%}body.dark .flowchart-container svg,body.dark .sequencechart-container svg{filter:invert(.85)}div.media-container .qrcode-container{margin:0 auto}audio::-webkit-media-controls-panel{background-color:var(--default-bg-color)}audio::-webkit-media-controls-current-time-display,audio::-webkit-media-controls-time-remaining-display{color:var(--default-tx-color)}@media (prefers-color-scheme:light){.dark audio::-webkit-media-controls-mute-button,.dark audio::-webkit-media-controls-play-button,.dark audio::-webkit-media-controls-timeline,.dark audio::-webkit-media-controls-volume-slider{filter:invert(.85)}}@media (prefers-color-scheme:dark){body:not(.dark) audio::-webkit-media-controls-current-time-display,body:not(.dark) audio::-webkit-media-controls-time-remaining-display{text-shadow:0 0 1px var(--default-tx-color)}body:not(.dark) audio::-webkit-media-controls-mute-button,body:not(.dark) audio::-webkit-media-controls-play-button,body:not(.dark) audio::-webkit-media-controls-timeline,body:not(.dark) audio::-webkit-media-controls-volume-slider{filter:invert(.85)}}@media screen and (max-width:767px){pre.code-block:not(blockquote pre.code-block){margin-left:-1.6rem!important;margin-right:-1.6rem!important;width:calc(100% + 3.2rem)}pre.code-block code:not(blockquote pre.code-block code){border-radius:0!important}blockquote>pre.code-block{border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-1rem;margin-right:0}blockquote>pre.code-block code{border-bottom-left-radius:0!important;border-top-left-radius:0!important;margin-left:0!important}}pre.code-block{position:relative}pre.code-block:before{color:hsla(0,0%,100%,.85);content:attr(data-language);font-size:.75em;font-weight:700;padding-top:2px;position:absolute;right:8px;top:0;z-index:1}pre.code-block code{background-color:var(--default-block-code-bg-color);border-radius:8px;box-shadow:var(--shadow-md-1);display:block;font-family:Lucida Console,Consolas,monospace;font-size:1em;overflow-x:auto;padding:calc(1em + 4px) 1rem 1rem;transition:box-shadow .3s}pre.code-block code:hover{box-shadow:var(--shadow-md-2)}pre.code-block code.nohighlight{color:#f7f7f7}pre.code-block code span{opacity:1!important}div.details{margin:1rem 0}div.details details{border-radius:8px;padding:0 1rem;transition:background .3s,padding .3s .05s,box-shadow .3s .05s}@media screen and (max-width:767px){div.details .details-children-container>.details-children{padding:0 1.6rem!important}div.details .details-children>div.media-container:last-child,div.details .details-children>pre:last-child{margin-bottom:0}blockquote>.details{margin-left:-1rem}blockquote>.details details{border-bottom-right-radius:8px;border-top-right-radius:8px}blockquote>.details .details-children-container{border-bottom-left-radius:0;margin:0}blockquote>.details .details-children pre code{border-radius:0}blockquote>.details .details-children div.media-container,blockquote>.details .details-children pre{border-radius:0;margin-left:-1.6rem;margin-right:-1.6rem}}body:not(.dark) details[open]{background-color:var(--default-bg-color)}div.details details[open]{box-shadow:var(--shadow-sm);padding-bottom:.6rem;padding-top:.6rem}.dark div.details details[open]{background-color:var(--shallow-bd-color)}div.details details summary{color:var(--default-tx-color);cursor:pointer;font-size:1.2em;outline:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}div.details details summary:focus-visible{outline:auto}div.details .details-children-container{border:2px solid transparent;border-top:none;display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .3s .15s,border .3s .15s}div.details .details-children-container>.details-children{min-height:0;overflow:hidden;padding:0 1rem}div.details details[open]+.details-children-container{border-bottom-left-radius:8px;border-bottom-right-radius:8px;border-color:var(--shallow-bd-color);grid-template-rows:1fr}@media screen and (max-width:767px){blockquote{margin-left:1rem!important;margin-right:0!important}}blockquote{background-color:var(--quote-bg-color);border-bottom-right-radius:8px;border-top-right-radius:8px;color:var(--quote-tx-color);margin-right:1rem;padding:.1px 1rem;position:relative;transition:color .3s .15s,background .3s .15s}blockquote code:not(pre code){filter:invert(15%)}blockquote:before{background-color:var(--deep-bd-color);content:" ";cursor:pointer;display:block;height:100%;left:0;max-width:8px;position:absolute;top:0;transition:width .3s,transform .3s .05s;width:.125em;z-index:1}blockquote:hover:before{transform:translateX(-3px);width:.375em}body:not(.dark) blockquote>.details .details-children{border-color:todo}article{--gap-from-catalog:2rem;background-color:var(--default-bg-color);border-radius:1rem;box-shadow:var(--shadow-lg);box-sizing:border-box;color:var(--default-tx-color);margin:2rem var(--page-horizonal-padding) 4rem;padding:1rem 2rem;transition:margin .45s,border-radius .3s .2s,opacity .45s,background .6s}article:empty{display:none!important}article.with-catalog{border-bottom-right-radius:0;border-top-right-radius:0;margin-left:auto;margin-right:0;min-width:calc(64vw - var(--gap-from-catalog));width:calc(100vw - 360px - var(--gap-from-catalog))}@media screen and (max-width:767px){article{border-radius:.75rem;box-shadow:var(--shadow-md-2);padding:1rem 1.6rem}article.with-catalog{border-radius:.75rem;margin-left:var(--page-horizonal-padding);margin-right:var(--page-horizonal-padding);opacity:.6;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:auto}}.icon-btn{align-items:center;background-color:var(--default-bg-color);border:1px solid var(--btn-bd-color);border-radius:8px;box-shadow:var(--shadow-sm);color:var(--default-tx-color)!important;cursor:pointer;display:inline-flex;height:2rem;padding:6px .5rem;text-decoration:none!important;transition:background .3s,box-shadow .3s}.icon-btn:hover{background-color:var(--hovered-bg-color);box-shadow:var(--shadow-md-1)}.dark .icon-btn{border-width:3px}.icon-btn img{aspect-ratio:1;height:1.6rem;transition:filter .3s .15s}.icon-btn span{transition:color .3s .15s,transform .3s}.underline-through .underline-target{background-image:linear-gradient(to right,var(--default-tx-color),var(--default-tx-color));background-position:100% 100%;background-repeat:no-repeat;background-size:0 2px;bottom:0;padding-bottom:2px;position:relative;transition:bottom .3s,background-size .3s}.underline-through:hover .underline-target{background-position:0 100%;background-size:100% 2px;bottom:2px}.underline-side .underline-target{transition:transform .3s}.underline-side:hover .underline-target{transform:translateY(-3px)}.underline-side .underline-target:before{border-bottom:2px solid var(--default-tx-color);bottom:-2px;content:" ";display:block;position:absolute;transition:width .3s;width:0}.underline-side:hover .underline-target:before{width:100%}.underline-side.left .underline-target:before{left:0}.underline-side.right .underline-target:before{right:0}paging-view{align-items:center;display:flex;gap:1rem;justify-content:flex-end}paging-view.hidden{display:none}paging-view .icon-btn{font-weight:700;height:2.4rem}paging-view .icon-btn:disabled{opacity:.6;pointer-events:none}paging-view .icon-btn:hover span{transform:translateY(-2px)}paging-view #next-btn span:before{left:unset;right:0}paging-view label{align-items:center;display:flex;gap:4px}body{--page-horizonal-padding:10vw;--shadow-sm:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12)!important;--shadow-md-1:0 3px 3px -2px rgba(0,0,0,.2),0 3px 4px 0 rgba(0,0,0,.14),0 1px 8px 0 rgba(0,0,0,.12)!important;--shadow-md-2:0 3px 5px -1px rgba(0,0,0,.2),0 5px 8px 0 rgba(0,0,0,.14),0 1px 14px 0 rgba(0,0,0,.12)!important;--shadow-lg:0 4px 5px -2px rgba(0,0,0,.2),0 7px 10px 1px rgba(0,0,0,.14),0 2px 16px 1px rgba(0,0,0,.12)!important;background-color:var(--allpage-bg-color);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Helvetica Neue,Helvetica,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei UI,Microsoft YaHei,Source Han Sans CN,sans-serif;margin:0;transition:background .6s,color .3s}@media screen and (max-width:767px){body{--page-horizonal-padding:1.6rem}}@media screen and (min-width:1024px){:root{font-size:17px}body{--page-horizonal-padding:16vw}}body.dark{--shadow-sm:none!important;--shadow-md-1:none!important;--shadow-md-2:none!important;--shadow-lg:none!important}label{-webkit-user-select:none;-moz-user-select:none;user-select:none}input{background-color:var(--quote-bg-color);border:none;border-radius:4px;color:var(--default-tx-color);font-size:16px;height:32px;outline:none;overflow:hidden;padding:0 6px;width:3em}label input{margin-left:4px}footer{color:var(--default-tx-color);margin-bottom:48px;padding:0 6px;text-align:center} \ No newline at end of file diff --git a/index.html b/index.html index c6b0b1a..70a5141 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@ + Markdown Blog Template Documentation diff --git a/src/styles/article/media.css b/src/styles/article/media.css index 3c38465..6aff095 100644 --- a/src/styles/article/media.css +++ b/src/styles/article/media.css @@ -6,7 +6,8 @@ div.media-container { box-shadow: var(--shadow-md-1); overflow-x: hidden; overflow-y: auto; - transition: box-shadow .3s; + transition: background .3s .15s, + box-shadow .3s; } @media screen and (max-width: 767px) { /* Mobile phone style */ @@ -72,6 +73,8 @@ div.media-container img.load-error::before { background-repeat: no-repeat; background-position: 50% calc(50% - 8px); background-size: 85% 85%; + transition: filter .3s .15s, + background .3s .15s; } div.media-container img.load-error::after { position: absolute; @@ -89,6 +92,8 @@ div.media-container img.load-error::after { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + transition: color .3s .15s, + background .3s .15s; } .dark div.media-container img.load-error::before { @@ -129,6 +134,7 @@ div.media-container .ganttchart-container { .railroad-container svg { width: 100%; background-color: var(--chart-bg-color) !important; + transition: background .3s .15s; } body.dark .flowchart-container svg, body.dark .sequencechart-container svg {