修复手机端自动展开菜单的问题 #15

Merged
cxykevin merged 10 commits from :main into main 2024-08-11 15:02:17 +08:00
11 changed files with 1380 additions and 90 deletions
Showing only changes of commit 19520b78ec - Show all commits

View File

@ -4,3 +4,16 @@ language = "zh-cn"
multilingual = false
src = "src"
title = "Study Area CN"
[output.html]
additional-css = [
"theme/css/icons.css",
"theme/css/mdui.css",
"theme/css/highlight.min.css",
"theme/font/icons.woff2",
]
additional-js = [
"theme/js/mdui.global.js",
"theme/js/highlight.min.js",
"theme/js/mathjax.js",
]

9
theme/css/highlight.min.css vendored Normal file
View File

@ -0,0 +1,9 @@
/*!
Theme: Default
Description: Original highlight.js style
Author: (c) Ivan Sagalaev <maniac@softwaremaniacs.org>
Maintainer: @highlightjs/core-team
Website: https://highlightjs.org/
License: see project LICENSE
Touched: 2021
*/pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{background:#f3f3f3;color:#444}.hljs-comment{color:#697070}.hljs-punctuation,.hljs-tag{color:#444a}.hljs-tag .hljs-attr,.hljs-tag .hljs-name{color:#444}.hljs-attribute,.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-name,.hljs-selector-tag{font-weight:700}.hljs-deletion,.hljs-number,.hljs-quote,.hljs-selector-class,.hljs-selector-id,.hljs-string,.hljs-template-tag,.hljs-type{color:#800}.hljs-section,.hljs-title{color:#800;font-weight:700}.hljs-link,.hljs-operator,.hljs-regexp,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-symbol,.hljs-template-variable,.hljs-variable{color:#ab5656}.hljs-literal{color:#695}.hljs-addition,.hljs-built_in,.hljs-bullet,.hljs-code{color:#397300}.hljs-meta{color:#1f7199}.hljs-meta .hljs-string{color:#38a}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}

22
theme/css/icons.css Normal file
View File

@ -0,0 +1,22 @@
/* fallback */
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(../font/icons.woff2) format('woff2');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-smoothing: antialiased;
}

1
theme/css/mdui.css Normal file

File diff suppressed because one or more lines are too long

BIN
theme/favicon.ico Normal file

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB

BIN
theme/favicon.png Executable file → Normal file

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
theme/font/icons.woff2 Normal file

Binary file not shown.

View File

@ -19,24 +19,20 @@
<!-- MDUI CSS&JS -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no"/>
<meta name="renderer" content="webkit"/>
<link rel="stylesheet" href="https://unpkg.com/mdui@2/mdui.css">
<script src="https://unpkg.com/mdui@2/mdui.global.js"></script>
<!-- Material Icons Font (Filled) -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" />
<meta name="renderer" content="webkit" />
<link rel="stylesheet" href="{{ ../path_to_root }}theme/css/mdui.css">
<script src="{{ ../path_to_root }}theme/js/mdui.global.js"></script>
<link href="{{ ../path_to_root }}theme/css/icons.css" rel="stylesheet">
<meta name="description" content="Study Area CN {{ description }}">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#ffffff">
<meta name="keywords"
content="Study-area, study-area, study-area-cn Study Area CN, study area cn, 酷学园, 酷学园 CN , 酷!学园, netman, linux, mdbook">
content="Study-area, study-area, study-area-cn Study Area CN, study area cn, 酷学园, 酷学园 CN , 酷!学园, netman, linux, mdbook, rockylinux">
{{#if favicon_svg}}
<link rel="icon" href="{{ path_to_root }}favicon.svg">
<link rel="icon" href="{{ path_to_root }}favicon.png">
{{/if}}
{{#if favicon_png}}
<link rel="shortcut icon" href="{{ path_to_root }}favicon.png">
@ -47,73 +43,71 @@
{{/if}}
<!-- Highlight.js Stylesheets -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<link rel="stylesheet" href="{{ ../path_to_root }}theme/css/highlight.min.css">
<script src="{{ ../path_to_root }}theme/js/highlight.min.js"></script>
<!-- Custom theme stylesheets -->
{{#each additional_css}}
<link rel="stylesheet" href="{{ ../path_to_root }}{{ this }}">
{{/each}}
{{#if mathjax_support}}
<!-- MathJax -->
<script async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script async src="{{ ../path_to_root }}theme/js/mathjax.js"></script>
{{/if}}
<style>
ol,li{
list-style:none;
font-size:1em;
}
ol,
li {
list-style: none;
font-size: 1em;
}
.part-title{
font-weight:bold;
font-size:1.2em;
}
.part-title {
font-weight: bold;
font-size: 1.2em;
}
a {
position: relative;
text-decoration: none;
color: rgb(var(--mdui-color-primary));
}
a {
position: relative;
text-decoration: none;
color: rgb(var(--mdui-color-primary));
}
a:after {
content: "";
position: absolute;
bottom: -2px;
left: 50%;
width: 0;
height: 2px;
transition: width 0.3s ease-in-out, left 0.3s ease-in-out;
background-color: rgb(var(--mdui-color-primary))
}
a:after {
content: "";
position: absolute;
bottom: -2px;
left: 50%;
width: 0;
height: 2px;
transition: width 0.3s ease-in-out, left 0.3s ease-in-out;
background-color: rgb(var(--mdui-color-primary))
}
a:hover:after {
width: 100%;
left: 0;
}
a:hover:after {
width: 100%;
left: 0;
}
</style>
</head>
<body style="margin:0;padding:0;min-height:100%;width:100%">
<body style="margin:0;padding:0;min-height:100%;width:100%">
<mdui-layout style="height:100%">
<mdui-top-app-bar>
<mdui-button-icon icon="menu" id="open-drawer"></mdui-button-icon>
<mdui-button id="open-study-env">实验环境</mdui-button>
<mdui-top-app-bar-title>{{ book_title }}</mdui-top-app-bar-title>
<div style="flex-grow: 1"></div>
<div style="flex-grow: 1"></div>
{{#if git_repository_url}}
<mdui-button-icon icon="web" href="{{git_repository_url}}"></mdui-button-icon>
{{/if}}
{{#if print_enable}}
<mdui-button-icon href="{{ path_to_root }}print.html" title="Print this book" aria-label="Print this book" icon="print">
<mdui-button-icon href="{{ path_to_root }}print.html" title="Print this book" aria-label="Print this book"
icon="print">
</mdui-button-icon>
{{/if}}
</mdui-top-app-bar>
<mdui-navigation-drawer close-on-overlay-click class="toc-drawer">
{{#toc}}{{/toc}}
{{#toc}}{{/toc}}
</mdui-navigation-drawer>
<script>
@ -124,52 +118,49 @@
</script>
<mdui-layout-main class="example-layout-main" style="min-height: 100%">
<div class="mdui-prose" style="margin-left:20px;margin-right:20px;">
{{{ content }}}
</div>
<div class="mdui-prose" style="margin-left:20px;margin-right:20px;">
{{{ content }}}
</div>
<mdui-dialog
headline="Study Env"
close-on-esc
id="study-env-dialog"
>
<iframe src="about:blank" style="height:80%;width:99%" id="study-env-iframe"></iframe>
</mdui-dialog>
<mdui-dialog headline="Study Env" close-on-esc id="study-env-dialog">
<iframe src="about:blank" style="height:80%;width:99%" id="study-env-iframe"></iframe>
</mdui-dialog>
<script>
document.getElementById("open-study-env").addEventListener("click", () => {
document.getElementById("study-env-dialog").open = true
document.getElementById("study-env-iframe").src = "http://jslinux.cxykevin.top"
});
</script>
<script>
document.getElementById("open-study-env").addEventListener("click", () => {
document.getElementById("study-env-dialog").open = true
document.getElementById("study-env-iframe").src = "http://jslinux.cxykevin.top"
});
</script>
<div style="height:10em;margin-top:2em;margin-left:2em;margin-right:2em;display:flex">
{{#previous}}
<mdui-card clickable style="width:49%;height: 100%" href="{{ path_to_root }}{{link}}">
<div style="display:flex;font-size:1.5em">
<mdui-icon name="navigate_before" style="font-size:1.5em"></mdui-icon> 上一章
</div>
<div style="height:10em;margin-top:2em;margin-left:2em;margin-right:2em;display:flex">
{{#previous}}
<mdui-card clickable style="width:49%;height: 100%" href="{{ path_to_root }}{{link}}">
<div style="display:flex;font-size:1.5em">
<mdui-icon name="navigate_before" style="font-size:1.5em"></mdui-icon> 上一章
</div>
<div style="text-align:center;font-size:2em">
{{title}}
</div>
</mdui-card>
{{/previous}}
<div style="text-align:center;font-size:2em">
{{title}}
</div>
</mdui-card>
{{/previous}}
<div style="flex-grow:1"></div>
<div style="flex-grow:1"></div>
{{#next}}
<mdui-card clickable style="width:49%;height: 100%" href="{{ path_to_root }}{{link}}">
<div style="display:flex;font-size:1.5em">
<div style="flex-grow:1"></div>下一章<mdui-icon name="navigate_next" style="font-size:1.5em"></mdui-icon>
</div>
{{#next}}
<mdui-card clickable style="width:49%;height: 100%" href="{{ path_to_root }}{{link}}">
<div style="display:flex;font-size:1.5em">
<div style="flex-grow:1"></div>下一章<mdui-icon name="navigate_next"
style="font-size:1.5em"></mdui-icon>
</div>
<div style="text-align:center;font-size:2em">
{{title}}
</div>
</mdui-card>
{{/next}}
</div>
<div style="text-align:center;font-size:2em">
{{title}}
</div>
</mdui-card>
{{/next}}
</div>
</mdui-layout-main>
{{#if live_reload_endpoint}}
@ -217,4 +208,4 @@
<script>hljs.highlightAll();</script>
</body>
</html>
</html>

1213
theme/js/highlight.min.js vendored Normal file

File diff suppressed because one or more lines are too long

19
theme/js/mathjax.js Normal file

File diff suppressed because one or more lines are too long

22
theme/js/mdui.global.js Normal file

File diff suppressed because one or more lines are too long