mirror of
https://github.com/suk-ws/ph-Bookshelf.git
synced 2024-12-05 01:16:53 +08:00
添加基础 markdown 样式表和 highlight.js 引入，更新 toolbar 技术结构
This commit is contained in:
parent
2ae6815eb1
commit
4af66af9c3
GPG Key ID:
EFB47D98FE082FAD
27
assets/bread-card-markdown-compat-highlight-js.css
Normal file
27
assets/bread-card-markdown-compat-highlight-js.css
Normal file
@ -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;
|
||||
}
|
||||
179
assets/bread-card-markdown.css
Normal file
179
assets/bread-card-markdown.css
Normal file
@ -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;
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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(); } });
|
||||
|
||||
|
||||
|
||||
|
||||
@ -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";
|
||||
|
||||
@ -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",
|
||||
);
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
<script>
|
||||
bookCurrentId = "<?= PageMeta::$book->getId() ?>";
|
||||
pageCurrentId = "<?= PageMeta::$page->getId() ?>";
|
||||
hljs.highlightAll();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<main id="main">
|
||||
<div id="page-tools">
|
||||
<div id="main-heading"><div id="page-tools">
|
||||
<button id="sidebar-show">☰</button>
|
||||
</div>
|
||||
</div></div>
|
||||
<article id="article">
|
||||
<?php require "./template/raw-article.php" ?>
|
||||
</article>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user