style #43

ismism.ts/ui/bind/nav.ts

@@ -20,10 +20,9 @@ window.addEventListener("hashchange", async () => {
 	else alert(`无效 id ${h}`)
 })
 
-
 export function load(
 ) {
 	console.log("ismism-20231015")
-	console.log(`\n主义主义开发组！成员招募中！\n\n发送自我介绍至 万大可\n \n`)
+	console.log(`\n主义主义开发组！成员招募中！\n\n发送自我介绍至 万大可\n`)
 	window.dispatchEvent(new Event("hashchange"))
 }

ismism.ts/ui/index/index.html

@@ -20,10 +20,10 @@
 	<nav>
 		<menu>
 			<li><a href="">主义主义</a></li>
-			<li><a href="#soc">同城<em>俱乐部</em></a></li>
-			<li><a href="#agd">同城<em>活动</em></a></li>
-			<li><a href="#wsl">法律<em>援助</em></a></li>
-			<li><a href="#lit">理论<em>学习</em></a></li>
+			<li><a onclick="nav(this)" href="#soc">同城<em>俱乐部</em></a></li>
+			<li><a onclick="nav(this)" href="#agd">同城<em>活动</em></a></li>
+			<li><a onclick="nav(this)" href="#wsl">法律<em>援助</em></a></li>
+			<li><a onclick="nav(this)" href="#lit">理论<em>学习</em></a></li>
 			<li><a href="#pas">用户登录</a></li>
 		</menu>
 	</nav>
@@ -31,6 +31,15 @@
 	<div id="main"></div>
 </body>
 
+<script>
+	function nav(
+		t
+	) {
+		for (const e of t.parentElement.parentElement.children) e.classList.remove("active")
+		t.parentElement.classList.add("active")
+	}
+</script>
+
 <script></script>
 
 </html>

ismism.ts/ui/index/style.css

@@ -0,0 +1,124 @@
+:root {
+	--white: #fff;
+	--grayl: #f1f1f1;
+	--gray: #9e9e9e;
+	--grayd: #616161;
+	--black: #000;
+	--redl: #ffdddd;
+	--red: #f44336;
+	--greenl: #ddffdd;
+	--green: #4CAF50;
+	--amberl: #ffe9a8;
+	--amber: #ffc107;
+	--orange: #ff9800;
+	--purple: #673ab7;
+
+	--small: 12px;
+	--normal: 15px;
+	--large: 18px;
+	--title: 24px;
+}
+
+.none {
+	display: none !important;
+}
+
+html {
+	overflow-x: hidden;
+}
+
+body {
+	min-width: 360px;
+	margin: 0;
+	padding: 0;
+
+	font-family: Verdana, sans-serif;
+	font-size: var(--normal);
+	line-height: 1.5;
+
+	background: var(--grayl);
+	color: var(--black);
+}
+
+hr {
+	width: 100%;
+	border: none;
+}
+
+em {
+	font-style: normal;
+}
+
+code {
+	font-family: monospace;
+	font-size: 1em;
+}
+
+a {
+	color: inherit;
+	text-decoration: none;
+}
+
+a:focus {
+	outline: none;
+}
+
+nav {
+	overflow: scroll;
+	scrollbar-width: none;
+}
+
+nav::-webkit-scrollbar {
+	display: none;
+}
+
+nav>menu {
+	position: relative;
+	display: flex;
+	width: max-content;
+	list-style: none;
+	padding: 0;
+	margin: 0 auto;
+	border-bottom: 1px dotted var(--gray);
+	white-space: nowrap;
+	gap: 3px;
+}
+
+nav>menu>li:first-child,
+nav>menu>li:last-child {
+	display: block;
+	white-space: pre;
+	position: sticky;
+	min-width: 1ch;
+	box-shadow: 0 0 1ch 1ch var(--grayl);
+	background: var(--grayl);
+	z-index: 2;
+}
+
+nav>menu>li:first-child {
+	left: 0;
+	margin-right: 2ch;
+}
+
+nav>menu>li:last-child {
+	right: 0;
+	margin-left: 2ch;
+}
+
+nav>menu>li a {
+	display: inline-block;
+	white-space: nowrap;
+	overflow: hidden;
+	user-select: none;
+	z-index: 1;
+	color: var(--gray);
+	padding: 0 0.5ch;
+}
+
+nav>menu>li.active a {
+	color: var(--black);
+}
+
+nav li.active em {
+	color: var(--red);
+}

ismism.ts/ui/ui.ts

@@ -1,7 +1,7 @@
 const [index, template, style, bind] = await Promise.all([
 	Deno.readTextFile("./ui/index/index.html"),
 	Deno.readTextFile("./ui/index/template.html"),
-	"",
+	Deno.readTextFile("./ui/index/style.css"),
 	Deno.readTextFile("./ui/bind/bind.js"),
 ])
 const ui = index