From 4af66af9c37139c39682f32861e2cd46c9ba79fc Mon Sep 17 00:00:00 2001 From: Eyre_S Date: Wed, 24 Nov 2021 01:08:24 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=9F=BA=E7=A1=80=20markdown?= =?UTF-8?q?=20=E6=A0=B7=E5=BC=8F=E8=A1=A8=E5=92=8C=20highlight.js=20?= =?UTF-8?q?=E5=BC=95=E5=85=A5=EF=BC=8C=E6=9B=B4=E6=96=B0=20toolbar=20?= =?UTF-8?q?=E6=8A=80=E6=9C=AF=E7=BB=93=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...read-card-markdown-compat-highlight-js.css | 27 +++ assets/bread-card-markdown.css | 179 ++++++++++++++++++ assets/main.css | 24 ++- assets/main.js | 2 + constant.php | 2 +- src/Data/SiteMeta.php | 5 + template/footer.php | 1 + template/main.php | 4 +- 8 files changed, 235 insertions(+), 9 deletions(-) create mode 100644 assets/bread-card-markdown-compat-highlight-js.css create mode 100644 assets/bread-card-markdown.css diff --git a/assets/bread-card-markdown-compat-highlight-js.css b/assets/bread-card-markdown-compat-highlight-js.css new file mode 100644 index 0000000..1ce2f09 --- /dev/null +++ b/assets/bread-card-markdown-compat-highlight-js.css @@ -0,0 +1,27 @@ +/****************************************************************************** + ############################################################################## + ##### ##### + ##### Markdown StyleSheet of ui design BreadCard ##### + ##### compatibility layer ##### + ##### for highlight.js ##### + ##### ##### + ##### @author: Sukazyo Workshop ##### + ##### @version： 1.0 ##### + ##### ##### + ############################################################################## + ******************************************************************************/ + +:root { + --bcm-color-highlight-bg: #223b5c; /* user define */ +} + +pre { + background: var(--bcm-color-highlight-bg); +} + +.hljs, +code.hljs, +pre code.hljs { + background: var(--bcm-color-highlight-bg); + padding: 0.2rem 1.2rem 0.6rem; +} diff --git a/assets/bread-card-markdown.css b/assets/bread-card-markdown.css new file mode 100644 index 0000000..9c8e3e2 --- /dev/null +++ b/assets/bread-card-markdown.css @@ -0,0 +1,179 @@ +/****************************************************************************** + ############################################################################## + ##### ##### + ##### Markdown StyleSheet of ui design BreadCard ##### + ##### ##### + ##### @author: Sukazyo Workshop ##### + ##### @version： 1.0 ##### + ##### ##### + ############################################################################## + ******************************************************************************/ + +:root { + + --bcm-color-font-base: #223b5c; + --bcm-color-font-base-link: #409dff; + --bcm-color-font-base-link-hover: #0033ff; + --bcm-color-font-base-link-visited: #a27aeb; + --bcm-color-font-base-link-visited-hover: #5a00ff; + --bcm-color-font-base-link-focus-bg: #33aee92b; + + --bcm-color-blockquote-focus: #e2e5e8; + --bcm-color-blockquote-foreground: #949da9; + + --bcm-color-list-item-marker-std: #949da9; + + --bcm-color-seperator: #e2e5e8; + +} + +:root { + --bcm-element-href-anima-speed: 0.1s; +} + +html { + color: var(--bcm-color-font-base); +} + +/*article * {*/ +/* margin-bottom: 1rem;*/ +/*}*/ + +a { + color: var(--bcm-color-font-base-link); + text-decoration: none; + transition: + color var(--bcm-element-href-anima-speed), + background-color var(--bcm-element-href-anima-speed); + border-radius: 0.3rem; +} + +a:hover { + color: var(--bcm-color-font-base-link-hover); +} + +a:visited { + color: var(--bcm-color-font-base-link-visited); +} + +a:visited:hover { + color: var(--bcm-color-font-base-link-visited-hover); +} + +a:focus-visible { + background-color: var(--bcm-color-font-base-link-focus-bg); + outline: none; +} + +hr { + background-color: var(--bcm-color-seperator); + height: 0.25rem; + border-radius: 1rem; + width: 70%; + border: none; +} + +hr { + margin-block-start: 3rem; + margin-block-end: 3rem; +} + +p, +h1, h2, h3, h4, h5, h6, +ul, ol, table { + margin-block-start: 1.6rem; + margin-block-end: 1.6rem; + + line-height: 1.6; +} + +ul ul, +ol ul, +ul ol, +ol ol { + margin-block-start: inherit; + margin-block-end: inherit; +} + +ul, ol { + padding-inline-start: 1.2rem; +} + +li::marker { + color: var(--bcm-color-list-item-marker-std); +} + +ol > li::marker { + font-size: 0.65rem; +} + +blockquote { + margin-block-start: 2.6rem; + margin-block-end: 2.6rem; +} + +blockquote { + position: relative; + margin-inline-start: 0; + margin-inline-end: 0; + padding-left: 0.88rem; + color: var(--bcm-color-blockquote-foreground); +} + +blockquote:before { + content: ""; + position: absolute; + top: -0.5rem; + bottom: -0.5rem; + left: 0; + width: 0.25rem; + border-radius: 0.5rem; + background: var(--bcm-color-blockquote-focus); +} + +code { + padding: 0.2rem; + border-radius: 0.3rem; + background: #f1f1f1; + font-size: 0.85rem; +} + +pre { + margin: 0 1.4rem; + padding: 0.7rem 0; + border-radius: 0.5rem; + display: block; + background: #223b5c; + color: aliceblue; + overflow: hidden; + font-size: 14px; +} + +pre code { + display: block; + background: #223b5c; + overflow-x: scroll; + padding: 0.2rem 1.2rem 0.6rem; + line-height: 1.4; + font-size: inherit; +} + +pre code::-webkit-scrollbar { + -webkit-appearance: none; + height: 0.25rem; + border-radius: 0.5rem; + background: none; +} + +pre code::-webkit-scrollbar-thumb { + height: 0.25rem; + border-radius: 0.5rem; + background: var(--color-scrollbar-main-foreground); +} + +pre code::-webkit-scrollbar-track { + height: 0.25rem; + border-radius: 0.5rem; + background: none; + margin: 0.7rem; +} \ No newline at end of file diff --git a/assets/main.css b/assets/main.css index 93ff7c6..29b1b61 100644 --- a/assets/main.css +++ b/assets/main.css @@ -75,7 +75,9 @@ --article-padding-height: 2rem; --article-padding-width: 2rem; - --article-margin-top: 3rem; + /*--article-margin-top: 3rem;*/ + --article-margin-top: 0; + --article-margin-bottom: 30vh; --article-width-max: 800px; } @@ -266,6 +268,7 @@ body { flex-direction: column; color: var(--color-font-sidebar); overflow: hidden; + z-index: 99; } #sidebar .sidebar-card { @@ -361,6 +364,7 @@ body { display: block; padding: 0.55rem 0; position: relative; + -webkit-tap-highlight-color: transparent; transition: color calc(var(--sidebar-menu-item-anima-speed) * var(--animation-speed-multiplier)); } @@ -458,12 +462,18 @@ body { ******************************************************************/ #main { color: var(--color-font-base); - margin: var(--main-margin-height) var(--main-margin-width); + margin: 0 var(--main-margin-width); flex-grow: 1; overflow: auto; position: relative; } +#main > #main-heading { + padding-top: var(--main-margin-height); + position: sticky; + top: 0; +} + #main::-webkit-scrollbar { width: var(--main-scrollbar-width); border-radius: calc(var(--main-scrollbar-width) / 2); @@ -480,15 +490,16 @@ body { width: var(--main-scrollbar-width); border-radius: calc(var(--main-scrollbar-width) / 2); background: var(--color-scrollbar-main-background); + margin: var(--main-margin-height); } #page-tools { - position: absolute; - top: 0; - left: 0; color: var(--color-font-tools-button); + /*background-color: #ffffff;*/ + border-radius: 0.5rem; font-size: var(--tools-font-size); font-weight: bold; + z-index: 100; } #page-tools > button { @@ -512,7 +523,8 @@ body { ** page content ** ******************************************************************/ #article { - margin: var(--article-margin-top) auto 0; + margin: var(--article-margin-top) auto var(--article-margin-bottom); padding: var(--article-padding-height) var(--article-padding-width); + padding-right: calc(var(--article-padding-width)); max-width: var(--article-width-max); } diff --git a/assets/main.js b/assets/main.js index 7c84172..7de75a9 100644 --- a/assets/main.js +++ b/assets/main.js @@ -58,6 +58,8 @@ function sidebarToggle() { if (window.innerWidth > 1000) { sidebarToggle(); } EventUtil.bindEvent(itemSidebar, 'swipeleft', sidebarToggle) +// EventUtil.bindEvent(document.body, 'swipeleft', function () { if (itemSidebar.parentElement.classList.contains("show-sidebar")) { sidebarToggle(); } }); +// EventUtil.bindEvent(document.body, 'swiperight', function () { if (!itemSidebar.parentElement.classList.contains("show-sidebar")) { sidebarToggle(); } }); diff --git a/constant.php b/constant.php index 6a327b0..c0676f2 100644 --- a/constant.php +++ b/constant.php @@ -2,6 +2,6 @@ const APP_NAME = "ph-Bookshelf"; -const VERSION = "0.3.0.7"; +const VERSION = "0.3.0.8"; const CHANNEL = "suk-ws"; const BRANCH = "master"; diff --git a/src/Data/SiteMeta.php b/src/Data/SiteMeta.php index a8c55b7..a3fb68d 100644 --- a/src/Data/SiteMeta.php +++ b/src/Data/SiteMeta.php @@ -36,6 +36,10 @@ class SiteMeta { // "/assets/gitbook/gitbook-plugin-fontsettings/website.css", // "/assets/gitbook-fix.css", // "/assets/ref.css", + "//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/atom-one-dark.min.css", + "/assets/bread-card-markdown.css", + "/assets/bread-card-markdown-enhanced-listing-rainbow.css", + "/assets/bread-card-markdown-compat-highlight-js.css", "/assets/main.css", ); } @@ -46,6 +50,7 @@ class SiteMeta { // "/assets/gitbook-fix.js", // "https://cdn.jsdelivr.net/npm/marked/marked.min.js", // "/assets/ref.js", + "//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js", "/assets/utils-touchscreen-event.js", "/assets/main.js", ); diff --git a/template/footer.php b/template/footer.php index 9594066..62d0b2a 100644 --- a/template/footer.php +++ b/template/footer.php @@ -10,6 +10,7 @@ diff --git a/template/main.php b/template/main.php index 087be11..bb3ec54 100644 --- a/template/main.php +++ b/template/main.php @@ -1,7 +1,7 @@
-
+
-
+