mirror of
https://github.com/alvierahman90/gronk.git
synced 2024-11-22 07:19:53 +00:00
Restructure page to have a contents page on the side
This commit is contained in:
parent
b9404c206c
commit
a5341e770c
76
styles.css
76
styles.css
@ -1,5 +1,15 @@
|
|||||||
@import url("https://alv.cx/styles.css");
|
@import url("https://alv.cx/styles.css");
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
max-width: none;
|
||||||
|
margin: none;
|
||||||
|
padding: none;
|
||||||
|
}
|
||||||
|
|
||||||
.article {
|
.article {
|
||||||
margin: 1em;
|
margin: 1em;
|
||||||
}
|
}
|
||||||
@ -33,9 +43,73 @@
|
|||||||
background-color: #86c1b9;
|
background-color: #86c1b9;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#sidebar > #header { padding-bottom: 1em; color: #656565;}
|
||||||
|
|
||||||
#header > * {
|
#header > * {
|
||||||
margin: 0;
|
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,6 +9,8 @@
|
|||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<div id="contentWrapper">
|
||||||
|
<div id="sidebar">
|
||||||
<div id="header">
|
<div id="header">
|
||||||
<p class="smallText"> tags: [
|
<p class="smallText"> tags: [
|
||||||
$for(tags)$
|
$for(tags)$
|
||||||
@ -25,24 +27,24 @@
|
|||||||
<p class="smallText">
|
<p class="smallText">
|
||||||
page generated by <a href="https://git.alv.cx/alvierahman90/notes2web">notes2web</a>
|
page generated by <a href="https://git.alv.cx/alvierahman90/notes2web">notes2web</a>
|
||||||
</p>
|
</p>
|
||||||
|
</div>
|
||||||
|
<h3>Table of Contents</h3>
|
||||||
|
<div id="toc">$toc$</div>
|
||||||
|
</div>
|
||||||
|
<div id="content">
|
||||||
<details id="commitLog">
|
<details id="commitLog">
|
||||||
<summary class="smallText">
|
<summary class="smallText">
|
||||||
Commit log (file history)
|
Commit log (file history)
|
||||||
</summary>
|
</summary>
|
||||||
$filehistory$
|
$filehistory$
|
||||||
</details>
|
</details>
|
||||||
<details>
|
<details id="license">
|
||||||
<summary class="smallText">
|
<summary class="smallText">
|
||||||
License
|
License
|
||||||
</summary>
|
</summary>
|
||||||
<pre>$licenseFull$</pre>
|
<pre>$licenseFull$</pre>
|
||||||
</details>
|
</details>
|
||||||
<details>
|
|
||||||
<summary class="smallText"> Table of Contents </summary>
|
|
||||||
<div>$toc$</div>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
<div id="content">
|
|
||||||
$body$
|
$body$
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
@ -6,6 +6,7 @@
|
|||||||
<title>$title$</title>
|
<title>$title$</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div id="content">
|
||||||
<h1>$h1title$</h1>
|
<h1>$h1title$</h1>
|
||||||
<p>
|
<p>
|
||||||
These are my personal notes. Correctness is not guaranteed.
|
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>
|
</div>
|
||||||
|
|
||||||
<p class="smallText"> page generated by <a href="https://github.com/alvierahman90/notes2web">notes2web</a></p>
|
<p class="smallText"> page generated by <a href="https://github.com/alvierahman90/notes2web">notes2web</a></p>
|
||||||
|
</div>
|
||||||
<script src="/fuse.js"> </script>
|
<script src="/fuse.js"> </script>
|
||||||
<script> const data = $data$ </script>
|
<script> const data = $data$ </script>
|
||||||
<script src="/search.js"> </script>
|
<script src="/search.js"> </script>
|
||||||
|
@ -7,7 +7,8 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>$h1title$</h1>
|
<h1>$h1title$</h1>
|
||||||
|
<div id="content">
|
||||||
$body$
|
$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>
|
</body>
|
||||||
|
@ -1,2 +1,3 @@
|
|||||||
<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>
|
</body>
|
||||||
|
@ -7,6 +7,7 @@
|
|||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<div id="content">
|
||||||
<h1>$title$</h1>
|
<h1>$title$</h1>
|
||||||
$extra_content$
|
$extra_content$
|
||||||
<div class="article"><a href="..">../</a></div>
|
<div class="article"><a href="..">../</a></div>
|
||||||
|
@ -1,2 +1,3 @@
|
|||||||
</pre>
|
</pre>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
@ -7,6 +7,7 @@
|
|||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<div id="content">
|
||||||
<div id="header">
|
<div id="header">
|
||||||
<p class="smallText">
|
<p class="smallText">
|
||||||
page generated by <a href="https://git.alv.cx/alvierahman90/notes2web">notes2web</a>
|
page generated by <a href="https://git.alv.cx/alvierahman90/notes2web">notes2web</a>
|
||||||
|
Loading…
Reference in New Issue
Block a user