侧边栏和基础元素动画补充

- 在主要区块左上角添加一个侧边栏开关按钮
- 侧边栏动画实现
  - 实现了侧边栏开关和侧边栏滑入滑出动画
  - 菜单物体悬浮颜色动画
  - 菜单物体的已选中区块指示器实现
  - 子菜单的开关动画
- 补全 a 标签的样式和动画
- 重置了默认 button 样式

assets/main.css

@@ -16,6 +16,10 @@
 	
 	--color-font-base: #223b5c;
 	--color-font-base-link: #409dff;
+	--color-font-base-link-hover: #0033ff;
+	--color-font-base-link-visited: #a27aeb;
+	--color-font-base-link-visited-hover: #5a00ff;
+	--color-font-base-link-focus-bg: #33aee92b;
 	
 	--color-sidebar-background: #f6f8fa;
 	--color-font-sidebar: var(--color-font-base);
@@ -34,6 +38,10 @@
 	--color-font-menu-item-current: #3697ff;
 	--color-font-menu-item-hover: #71b3f9;
 	
+	--color-tools-button-background: #f6f8fa;
+	--color-tools-button-background-active: #eef1f4;
+	--color-font-tools-button: #c3ccd6;
+	
 }
 
 :root {
@@ -41,6 +49,7 @@
 	--sidebar-width: 19rem;
 	--sidebar-margin-width: 2rem;
 	--sidebar-margin-height: 2rem;
+	--sidebar-font-size: 0.83rem;
 	
 	--sidebar-menu-container-external-max-height: 30%;
 	
@@ -53,6 +62,16 @@
 	--sidebar-menu-item-indicator-active-width: 4px;
 	--sidebar-menu-item-indicator-focus-width: 4px;
 	
+	--main-margin-height: 2rem;
+	--main-margin-width: 2rem;
+	
+	--tools-button-padding: 0.75rem;
+	--tools-font-size: 0.83rem;
+	
+	--article-padding-height: 2rem;
+	--article-padding-width: 2rem;
+	--article-margin-top: 3rem;
+	
 }
 
 :root {
@@ -73,6 +92,20 @@
 	--font-monospace: "Fira Code", "Monaco", "Consolas", var(--font-sarasa-mono), monospace;
 }
 
+:root {
+	
+	--element-href-anima-speed: 0.1s;
+	
+	--sidebar-toggle-anima-speed: 0.4s;
+	
+	--sidebar-menu-item-anima-speed: 0.15s;
+	--sidebar-menu-item-parent-arrow-anima-speed: 0.2s;
+	--sidebar-menu-item-children-anima-speed: 0.2s;
+	
+	--tools-button-hover-anima-speed: 0.2s;
+	
+}
+
 :root {
 	--animation-speed-multiplier: 1;
 	/*	--color-background-graystyle: #3c3c3c;*/
@@ -94,6 +127,28 @@
 	display: none;
 }
 
+button {
+	appearance: none;
+	font-size: inherit;
+	font-family: inherit;
+	font-style: inherit;
+	font-variant-ligatures: inherit;
+	font-variant-caps: inherit;
+	font-variant-numeric: inherit;
+	font-variant-east-asian: inherit;
+	font-weight: inherit;
+	font-stretch: inherit;
+	color: inherit;
+	letter-spacing: normal;
+	word-spacing: normal;
+	line-height: normal;
+	text-transform: none;
+	box-sizing: border-box;
+	background: none;
+	border: none;
+	border-radius: 0.5rem;
+}
+
 small {
 	opacity: var(--object-opacity-weakness);
 }
@@ -101,6 +156,27 @@ small {
 a {
 	color: var(--color-font-base-link);
 	text-decoration: none;
+	transition:
+			color calc(var(--element-href-anima-speed) * var(--animation-speed-multiplier)),
+			background-color calc(var(--element-href-anima-speed) * var(--animation-speed-multiplier));
+	border-radius: 0.3rem;
+}
+
+a:hover {
+	color: var(--color-font-base-link-hover);
+}
+
+a:visited {
+	color: var(--color-font-base-link-visited);
+}
+
+a:visited:hover {
+	color: var(--color-font-base-link-visited-hover);
+}
+
+a:focus-visible {
+	background-color: var(--color-font-base-link-focus-bg);
+	outline: none;
 }
 
 a.no-style {
@@ -108,6 +184,19 @@ a.no-style {
 	text-decoration: inherit;
 }
 
+a.no-style:hover,
+a.no-style:visited,
+a.no-style:visited:hover {
+	color: inherit;
+	border-radius: inherit;
+	transition: inherit;
+}
+
+a.no-style:focus-visible {
+	background-color: inherit;
+}
+
+
 h1 {
 	font-size: 2.2rem;
 }
@@ -132,9 +221,8 @@ body {
 	height: 100vh;
 	overflow: hidden;
 	color: var(--color-font-base);
-	display: grid;
+	display: flex;
-	grid-template-columns: min(calc(var(--sidebar-width) + var(--sidebar-margin-width) * 2), 100vw) auto;
+	position: relative;
-	grid-template-rows: 100vh;
 }
 
 
@@ -143,13 +231,31 @@ body {
 /******************************************************************
  **       sidebar                                                **
  ******************************************************************/
+#nav-container {
+	width: 0;
+	flex-grow: 0;
+	flex-shrink: 0;
+	position: relative;
+	transition: width calc(var(--sidebar-toggle-anima-speed) * var(--animation-speed-multiplier));
+}
+
+#nav-container.show-sidebar {
+	width: min(calc(var(--sidebar-width) + var(--sidebar-margin-width) * 2), 100vw);
+}
+
 #sidebar {
-	font-size: 0.83rem;
+	width: min(var(--sidebar-width), 100vw);
+	padding: var(--sidebar-margin-height) var(--sidebar-margin-width);
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	right: 0;
+	font-size: var(--sidebar-font-size);
 	font-weight: bold;
 	display: flex;
 	flex-direction: column;
-	margin: var(--sidebar-margin-height) var(--sidebar-margin-width);
 	color: var(--color-font-sidebar);
+	overflow: hidden;
 }
 
 #sidebar .sidebar-card {
@@ -245,6 +351,7 @@ body {
 	display: block;
 	padding: 0.55rem 0;
 	position: relative;
+	transition: color calc(var(--sidebar-menu-item-anima-speed) * var(--animation-speed-multiplier));
 }
 
 #sidebar > .menu-container > .menu .menu-item:hover {
@@ -252,7 +359,7 @@ body {
 }
 
 #sidebar > .menu-container > .menu .menu-item.current {
-	color: var(--color-font-menu-item-current);
+	color: var(--color-font-menu-item-current) !important;
 }
 
 #sidebar > .menu-container > .menu .menu-item.current:after {
@@ -266,20 +373,27 @@ body {
 	background: var(--color-menu-item-indicator-current);
 }
 
+#sidebar > .menu-container > .menu .menu-item:before {
+	content: "";
+	position: absolute;
+	transition: top calc(var(--sidebar-menu-item-anima-speed) * var(--animation-speed-multiplier)),
+				bottom calc(var(--sidebar-menu-item-anima-speed) * var(--animation-speed-multiplier));
+	top: 50%;
+	bottom: 50%;
+	left:calc(0px - var(--sidebar-menu-item-indicator-focus-width) * 2);
+	width: var(--sidebar-menu-item-indicator-focus-width);
+	border-radius: calc(var(--sidebar-menu-item-indicator-focus-width) / 2);
+	background: var(--color-menu-item-indicator-focus);
+}
+
 #sidebar > .menu-container > .menu .menu-item:focus-visible{
 	color: var(--color-font-menu-item-hover);
 	outline: none;
 }
 
 #sidebar > .menu-container > .menu .menu-item:focus-visible:before {
-	content: "";
-	position: absolute;
 	top: calc(var(--sidebar-menu-item-indicator-focus-width) / 2);
 	bottom: calc(var(--sidebar-menu-item-indicator-focus-width) / 2);
-	left:calc(0px - var(--sidebar-menu-item-indicator-focus-width) * 2);
-	width: var(--sidebar-menu-item-indicator-focus-width);
-	border-radius: calc(var(--sidebar-menu-item-indicator-focus-width) / 2);
-	background: var(--color-menu-item-indicator-focus);
 }
 
 #sidebar > .menu-container > .menu .menu-item-parent > *:first-child:after {
@@ -287,7 +401,7 @@ body {
 	color: var(--color-font-base-link);
 	display: inline-block;
 	margin-left: 0.5rem;
-	transition: transform calc(0.2s * var(--animation-speed-multiplier));
+	transition: transform calc(var(--sidebar-menu-item-parent-arrow-anima-speed) * var(--animation-speed-multiplier));
 }
 
 #sidebar > .menu-container > .menu .menu-item-parent.active > *:first-child:after {
@@ -302,6 +416,7 @@ body {
 	border-left-width: 1px;
 	overflow: hidden;
 	display: none;
+	transition: height calc(var(--sidebar-menu-item-children-anima-speed) * var(--animation-speed-multiplier)) ease-in-out;
 }
 
 #sidebar > .menu-container > .menu .menu-item-parent.active > .children {
@@ -312,14 +427,45 @@ body {
 /*
 /*
 /******************************************************************
- **      page content                                            **
+ **      page header                                             **
  ******************************************************************/
 #main {
 	color: var(--color-font-base);
-	padding: 1rem;
+	margin: var(--main-margin-height) var(--main-margin-width);
+	flex-grow: 1;
 	overflow: auto;
+	position: relative;
 }
 
-#article {
+#page-tools {
-	padding: 5rem;
+	position: absolute;
+	top: 0;
+	left: 0;
+	color: var(--color-font-tools-button);
+	font-size: var(--tools-font-size);
+	font-weight: bold;
+}
+
+#page-tools > button {
+	background-color: var(--color-tools-button-background);
+	padding: 0;
+	height: 2.2rem;
+	width: 2.2rem;
+	transition: background-color var(--tools-button-hover-anima-speed);
+}
+
+#page-tools > button:hover {
+	background-color: var(--color-tools-button-background-active);
+}
+
+
+
+/*
+/*
+/******************************************************************
+ **      page content                                            **
+ ******************************************************************/
+#article {
+	margin-top: var(--article-margin-top);
+	padding: var(--article-padding-height) var(--article-padding-width);
 }

assets/main.js

@@ -1,10 +1,45 @@
 
+const cssVar = getComputedStyle(document.querySelector(":root"));
+
+const animationSpeedMultiplier = parseFloat(cssVar.getPropertyValue("--animation-speed-multiplier"));
+const menuItemChildrenAnimaSpeed = parseFloat(cssVar.getPropertyValue("--sidebar-menu-item-anima-speed")) * 1000 * animationSpeedMultiplier;
+
+const itemSidebar = document.getElementById("sidebar");
+
 for (const node of document.getElementsByTagName("noscript")) {
 	node.parentNode.removeChild(node);
 }
 
 for (const node of document.getElementsByClassName("menu-item-parent")) {
-	node.firstElementChild.onclick = function () {
+	const children = node.getElementsByClassName("children")[0];
+	node.firstElementChild.onclick = async function () {
 		node.classList.toggle("active");
+		if (node.classList.contains("active")) {
+			const height = children.clientHeight;
+			children.style.height = "0px";
+			await sleep(1);
+			children.style.height = height + "px";
+			await sleep(menuItemChildrenAnimaSpeed);
+			children.style.height = "";
+		} else {
+			children.style.display = "block";
+			const height = children.clientHeight;
+			children.style.height = height + "px";
+			await sleep(1);
+			children.style.height = "0px";
+			await sleep(menuItemChildrenAnimaSpeed);
+			children.style.height = "";
+			children.style.display = "";
+		}
 	}
 }
+
+function sleep(ms) {
+	return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+document.getElementById("sidebar-show").onclick = sidebarToggle;
+function sidebarToggle() {
+	itemSidebar.parentElement.classList.toggle("show-sidebar");
+}
+sidebarToggle();

constant.php

@@ -2,6 +2,6 @@
 
 const APP_NAME = "ph-Bookshelf";
 
-const VERSION = "0.3-dev1";
+const VERSION = "0.3.0.1";
 const CHANNEL = "workshop-origin";
 const BRANCH = "master";

template/demo.html

@@ -1,10 +1,10 @@
-<nav id="sidebar">
+<div id="nav-container"><nav id="sidebar">
 	<noscript id="noscript-warn">For now, javascript must be enabled to view this site!!</noscript>
 	<address id="site-title">ph-Bookshelf BEDROCK Demo supports looooooooog title</address>
 	<div id="menu-container" class="menu-container sidebar-card">
 		<div id="menu-links" class="menu">
-			<a class="no-style menu-item" href="https://sukazyo.cc/">Workshop MetaBoard</a>
+			<a class="no-style menu-item" href="https://sukazyo.cc/" target="_blank">Workshop MetaBoard</a>
-			<a class="no-style menu-item" href="https://srv.sukazyo.cc/">Workshop Services</a>
+			<a class="no-style menu-item" href="https://srv.sukazyo.cc/" target="_blank">Workshop Services</a>
 		</div>
 		<div id="menu-pages" class="menu">
 			<a class="no-style menu-item" href="#">Something?</a>
@@ -38,14 +38,17 @@
 			<a class="no-style menu-item" href="#">Something?</a>
 		</div>
 		<div id="menu-about" class="menu">
-			<a class="no-style menu-item" href="https://github.com/suk-ws/ph-Bookshelf">
+			<a class="no-style menu-item" href="https://github.com/suk-ws/ph-Bookshelf" target="_blank">
 				<span>Published by ph-Bookshelf</span><br>
 				<small>0.3-dev</small>
 			</a>
 		</div>
 	</div>
-</nav>
+</nav></div>
 <main id="main">
+	<div id="page-tools">
+		<button id="sidebar-show">☰</button>
+	</div>
 	<article id="article">
 		<h1>Hello World</h1>
 		<p>Template or something here.</p>
@@ -53,6 +56,9 @@
 		<p>Template or something here.</p>
 		<a href="https://book.sukazyo.cc/">https://book.sukazyo.cc/</a>
 		<p>Template or something here.</p>
+		<a href="https://boawdok.sukazyo.cc/">https://book.sukazyo.cc/</a>
+		<a href="https://bdadxook.sukazyo.cc/">https://book.sukazyo.cc/</a>
+		<a href="https://book.sukazyo222.cc/">https://book.sukazyo.cc/</a>
 		<p>Template or something here.</p>
 		<div id="test-overflow">
 			<p>Template or something here.</p>