style: left fixed internal toc

2025-11-07 23:48:36 -05:00 · 2025-11-07 23:48:36 -05:00 · 321d6a798b
commit 321d6a798b
parent b87fb9dfbc
2 changed files with 61 additions and 0 deletions
--- a/assets/css/index.css
+++ b/assets/css/index.css
@ -498,3 +498,55 @@ div nav {
 div.tutnav p {
    text-align: center;
 }
+
+div.toc a {
+    text-decoration: none;
+}
+
+div.toc > ul > li, div.toc > ul  {
+    list-style-type: none;
+    padding: 0px;
+    margin: 0px;
+}
+
+div.toc > ul > li::marker {
+    content: "";
+}
+
+div.toc li::marker {
+    content: "» ";
+    font-weight: bold;
+}
+
+.vertical-text {
+    margin-top: 35px;
+    writing-mode: vertical-lr;
+    text-orientation: upright;
+}
+
+.vertical-text a {
+    text-decoration: none;
+}
+
+.toc-container {
+    display: flex;
+    gap: 20px;
+    margin:0px;
+    padding:0px;
+}
+
+.top-container {
+    margin:0px;
+    padding:0px;
+    position: fixed;
+    top: 10px;
+    left: 10px;
+    width: 300px;
+}
+
+.top-container h1 {
+    margin:0px;
+    padding:0px;
+    padding-left: 5px;
+    padding-top: 10px;
+}
--- a/layouts/tutorial.shtml
+++ b/layouts/tutorial.shtml
@ -3,6 +3,15 @@
 </head>
 <body id="body">
 	<h1 :text="$page.title"></h1>
+
+	<div class="top-container" >
+	     <h1>Flow</h1>
+	     <div class="toc-container">
+	     <div class="vertical-text"> <a href="#body" :text="$page.title"></a></div>
+	     <div class="toc" :html="$page.toc()"></div>
+	     </div>
+	</div>
+
 	<div :html="$page.content()"></div>

 	<div>