Restructure page to have a contents page on the side
This commit is contained in:
parent
b9404c206c
commit
a5341e770c
GPG Key ID:
20609519444A1269
76
styles.css
76
styles.css
@ -1,5 +1,15 @@
|
||||
@import url("https://alv.cx/styles.css");
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
max-width: none;
|
||||
margin: none;
|
||||
padding: none;
|
||||
}
|
||||
|
||||
.article {
|
||||
margin: 1em;
|
||||
}
|
||||
@ -33,9 +43,73 @@
|
||||
background-color: #86c1b9;
|
||||
}
|
||||
|
||||
#sidebar > #header { padding-bottom: 1em; color: #656565;}
|
||||
|
||||
#header > * {
|
||||
margin: 0;
|
||||
padding: 0
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#contentWrapper {
|
||||
display: flex
|
||||
}
|
||||
|
||||
|
||||
#sidebar {
|
||||
position: sticky;
|
||||
top: 10vh;
|
||||
height: 80vh;
|
||||
max-width: 30em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 20em;
|
||||
}
|
||||
|
||||
#toc {
|
||||
overflow-y: scroll;
|
||||
overflow-x: visible;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#content {
|
||||
margin: 0 auto;
|
||||
padding: 1em;
|
||||
max-width: 60em;
|
||||
}
|
||||
|
||||
#commitlog, #license { padding: 0; }
|
||||
|
||||
#sidebar,
|
||||
#toc li > a {
|
||||
color: #656565;
|
||||
}
|
||||
|
||||
#toc li { list-style: none; }
|
||||
#toc ul { margin-left: 0.75em ; padding-left: 0.75em; }
|
||||
#toc ul { border-left: 1px solid #b3b3b3;}
|
||||
#toc > ul { padding; none; padding: 0; margin: 0; border: none;max-width: 100%;}
|
||||
|
||||
#toc li > a {
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
transition: 0.5s;
|
||||
padding: 0.5em;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#toc li > a:hover {
|
||||
background: #d9d9d9;
|
||||
color: black;
|
||||
}
|
||||
|
||||
@media (max-width: 60em) {
|
||||
/* CSS that should be displayed if width is equal to or less than 60em goes here */
|
||||
#contentWrapper { flex-direction: column }
|
||||
#sidebar { position: static; width: 100%; max-width: none; }
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -9,40 +9,42 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="header">
|
||||
<p class="smallText"> tags: [
|
||||
$for(tags)$
|
||||
<a href="/.tags/$tags$.html">$tags$</a>$sep$,
|
||||
$endfor$
|
||||
]</p>
|
||||
<p class="smallText">
|
||||
written by $for(author)$$author$$sep$, $endfor$
|
||||
</p>
|
||||
<p class="smallText">
|
||||
syntax highlighting based on <a href="https://pygments.org/">Pygments'</a> default
|
||||
colors
|
||||
</p>
|
||||
<p class="smallText">
|
||||
page generated by <a href="https://git.alv.cx/alvierahman90/notes2web">notes2web</a>
|
||||
</p>
|
||||
<details id="commitLog">
|
||||
<summary class="smallText">
|
||||
Commit log (file history)
|
||||
</summary>
|
||||
$filehistory$
|
||||
</details>
|
||||
<details>
|
||||
<summary class="smallText">
|
||||
License
|
||||
</summary>
|
||||
<pre>$licenseFull$</pre>
|
||||
</details>
|
||||
<details>
|
||||
<summary class="smallText"> Table of Contents </summary>
|
||||
<div>$toc$</div>
|
||||
</details>
|
||||
</div>
|
||||
<div id="content">
|
||||
$body$
|
||||
<div id="contentWrapper">
|
||||
<div id="sidebar">
|
||||
<div id="header">
|
||||
<p class="smallText"> tags: [
|
||||
$for(tags)$
|
||||
<a href="/.tags/$tags$.html">$tags$</a>$sep$,
|
||||
$endfor$
|
||||
]</p>
|
||||
<p class="smallText">
|
||||
written by $for(author)$$author$$sep$, $endfor$
|
||||
</p>
|
||||
<p class="smallText">
|
||||
syntax highlighting based on <a href="https://pygments.org/">Pygments'</a> default
|
||||
colors
|
||||
</p>
|
||||
<p class="smallText">
|
||||
page generated by <a href="https://git.alv.cx/alvierahman90/notes2web">notes2web</a>
|
||||
</p>
|
||||
</div>
|
||||
<h3>Table of Contents</h3>
|
||||
<div id="toc">$toc$</div>
|
||||
</div>
|
||||
<div id="content">
|
||||
<details id="commitLog">
|
||||
<summary class="smallText">
|
||||
Commit log (file history)
|
||||
</summary>
|
||||
$filehistory$
|
||||
</details>
|
||||
<details id="license">
|
||||
<summary class="smallText">
|
||||
License
|
||||
</summary>
|
||||
<pre>$licenseFull$</pre>
|
||||
</details>
|
||||
$body$
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
<title>$title$</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="content">
|
||||
<h1>$h1title$</h1>
|
||||
<p>
|
||||
These are my personal notes. Correctness is not guaranteed.
|
||||
@ -21,7 +22,7 @@ Browse <a href="/notes">here</a> or by tag <a href="/.tags">here</a>.
|
||||
</div>
|
||||
|
||||
<p class="smallText"> page generated by <a href="https://github.com/alvierahman90/notes2web">notes2web</a></p>
|
||||
|
||||
</div>
|
||||
<script src="/fuse.js"> </script>
|
||||
<script> const data = $data$ </script>
|
||||
<script src="/search.js"> </script>
|
||||
|
||||
@ -7,7 +7,8 @@
|
||||
</head>
|
||||
<body>
|
||||
<h1>$h1title$</h1>
|
||||
<div id="content">
|
||||
$body$
|
||||
|
||||
<p style="font-size: 0.7em;"> page generated by <a href="https://github.com/alvierahman90/notes2web">notes2web</a></p>
|
||||
<p style="font-size: 0.7em;"> page generated by <a href="https://github.com/alvierahman90/notes2web">notes2web</a></p>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@ -1,2 +1,3 @@
|
||||
<p style="font-size: 0.7em;"> page generated by <a href="https://github.com/alvierahman90/notes2web">notes2web</a></p>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="content">
|
||||
<h1>$title$</h1>
|
||||
$extra_content$
|
||||
<div class="article"><a href="..">../</a></div>
|
||||
|
||||
@ -1,2 +1,3 @@
|
||||
</pre>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="content">
|
||||
<div id="header">
|
||||
<p class="smallText">
|
||||
page generated by <a href="https://git.alv.cx/alvierahman90/notes2web">notes2web</a>
|
||||
|
||||
Reference in New Issue
Block a user