alvierahman90/gronk
1
0
Fork 0
mirror of https://github.com/alvierahman90/gronk.git synced 2024-10-22 12:21:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Restructure page to have a contents page on the side

Browse Source
This commit is contained in:
Akbar Rahman 2021-12-22 17:46:01 +00:00
parent b9404c206c
commit a5341e770c
Signed by: alvierahman90
GPG Key ID: 20609519444A1269
8 changed files with 121 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
styles.css
View File

@ -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; }
}

16
templates/article.html
View File

@ -9,6 +9,8 @@
</head>
<body>
<div id="contentWrapper">
<div id="sidebar">
<div id="header">
<p class="smallText"> tags: [
$for(tags)$
@ -25,24 +27,24 @@
<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>
<details id="license">
<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>
</div>
</body>

3
templates/home_index.html
View File

@ -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>

3
templates/index.html
View File

@ -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>
</div>
</body>

1
templates/indexfoot.html
View File

@ -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>

1
templates/indexhead.html
View File

@ -7,6 +7,7 @@
</head>
<body>
<div id="content">
<h1>$title$</h1>
$extra_content$
<div class="article"><a href="..">../</a></div>

1
templates/textarticlefoot.html
View File

@ -1,2 +1,3 @@
</pre>
</div>
</body>

1
templates/textarticlehead.html
View File

@ -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>