Skip to content

GitLab

Commit 67014774 authored by ak's avatar ak
Browse files

Is#12 - Better Table of Contents Output

parent 96b03e0f
Pipeline #2175 passed with stage
in 17 seconds
Hide whitespace changes
Inline Side-by-side
Showing with 122 additions and 151 deletions
assets/css/post.css
View file @ 67014774
......@@ -324,7 +324,7 @@ figure:hover img:hover, figure:focus img:focus{
transition-delay: 1s;
}
#TOC::after{
#TOC::before{
font-size: 1rem;
font-family: 'Texturina';
color: goldenrod;
......@@ -339,18 +339,15 @@ figure:hover img:hover, figure:focus img:focus{
min-height: 5vh;
width: 100%;
background-color: darkslategray;
/* position: sticky; */
position: fixed;
bottom: 0;
left: 0;
/* transition: 0.5s ease-in;
transition-delay: 1s; */
transition: 0.5s ease-in;
}
#TOC:hover, #TOC:focus{
padding: 1em;
border-radius: 1em;
font-size: 1em;
font-size: 1.2em;
transition-delay: 0s;
bottom: 0;
left: 0;
......@@ -369,6 +366,7 @@ figure:hover img:hover, figure:focus img:focus{
}
#TOC li{
font-size: smaller;
display: inline-block;
vertical-align: top;
}
......@@ -406,27 +404,9 @@ figure:hover img:hover, figure:focus img:focus{
border-radius: 1em;
}
/* #BEFORE{
text-align: right;
font-family: 'Texturina';
margin: 0;
padding-top: 0.5em;
padding-bottom: 0.5em;
padding-right: 0.5em;
line-height: 1;
min-height: 1.5em;
vertical-align: middle;
font-size: 1.5em;
width: 100%;
background-color: goldenrod;
position: sticky;
bottom: 0;
right: 10vw;
z-index: +1;
} */
#BEFORE a {
padding-left: 1vw;
paddint-right: 1vw;
font: optional bolder;
display: inline-block;
}
......@@ -460,22 +440,31 @@ display: inline-block;
@media screen and (max-width: 650px) {
html {
/* html {
font-size: smaller;
} */
header h1{
font-size: 2em;
}
#BEFORE{
font-size: 1em;
overflow: hidden;
text-overflow: ellipsis;
}
#BEFORE a {
display: inline-block;
}
#TOC li {
font-size: larger;
#TOC li {
display: block;
width: 100%;
overflow: visible;
}
#TOC li a{
#TOC li a{
display: block;
white-space: nowrap;
width: 100%;
......
assets/css/root.css
View file @ 67014774
......@@ -343,15 +343,13 @@ figure:hover img:hover, figure:focus img:focus{
#TOC{
margin: 0;
padding: 0;
line-height: 1.2;
font-size: 0;
min-height: 2em;
min-height: 5vh;
width: 100%;
background-color: darkslategray;
position: fixed;
position: fixed;
bottom: 0;
left: 0;
padding: 1em;
transition: 0.5s ease-in;
}
......@@ -416,6 +414,7 @@ figure:hover img:hover, figure:focus img:focus{
#BEFORE a {
padding-left: 1vw;
padding-right: 1vw;
font-weight: bolder;
display: inline-block;
}
......@@ -443,16 +442,15 @@ figure:hover img:hover, figure:focus img:focus{
@media screen and (max-width: 650px) {
html {
/* html {
font-size: smaller;
}
} */
/* #BEFORE{
font-size: smaller;
} */
#TOC li {
font-size: larger;
#TOC li {
display: block;
width: 100%;
overflow: visible;
......
assets/css/topic.css
View file @ 67014774
......@@ -324,7 +324,7 @@ figure:hover img:hover, figure:focus img:focus{
transition-delay: 1s;
}
#TOC::after{
#TOC::before{
font-size: 1rem;
font-family: 'Texturina';
color: goldenrod;
......@@ -339,18 +339,15 @@ figure:hover img:hover, figure:focus img:focus{
min-height: 5vh;
width: 100%;
background-color: darkslategray;
/* position: sticky; */
position: fixed;
bottom: 0;
left: 0;
/* transition: 0.5s ease-in;
transition-delay: 1s; */
transition: 0.5s ease-in;
}
#TOC:hover, #TOC:focus{
padding: 1em;
border-radius: 1em;
font-size: 1em;
font-size: 1.2em;
transition-delay: 0s;
bottom: 0;
left: 0;
......@@ -406,27 +403,9 @@ figure:hover img:hover, figure:focus img:focus{
border-radius: 1em;
}
/* #BEFORE{
text-align: right;
font-family: 'Texturina';
margin: 0;
padding-top: 0.5em;
padding-bottom: 0.5em;
padding-right: 0.5em;
line-height: 1;
min-height: 1.5em;
vertical-align: middle;
font-size: 1.5em;
width: 100%;
background-color: goldenrod;
position: sticky;
bottom: 0;
right: 10vw;
z-index: +1;
} */
#BEFORE a {
padding-left: 1vw;
padding-right: 1vw;
font: optional bolder;
display: inline-block;
}
......@@ -460,22 +439,26 @@ display: inline-block;
@media screen and (max-width: 650px) {
html {
/* html {
font-size: smaller;
}
} */
/* #header h1 {
font-size: smaller;
} */
#BEFORE{
font-size: 1em;
}
#TOC li {
font-size: larger;
#TOC li {
display: block;
width: 100%;
overflow: visible;
}
#TOC li a{
#TOC li a{
display: block;
white-space: nowrap;
width: 100%;
......
examples/README.md
View file @ 67014774
......@@ -13,7 +13,7 @@
2021-04-30 19:38 – How to set up your post as a fancy slide show that can be remote controlled to support your on-line talk without relying on video and screen sharing, thus removing the self-referential picture-in-picture from the bigger picture.
# [Syntax](markdown_test_sheet)
2021-04-30 19:40 – Test document for markdown syntax
2021-05-05 19:31 – Test document for markdown syntax
# [Taskwarrior Integration](taskwarrior)
2021-04-30 19:38 – Integrating to the project management stack
......
examples/markdown_test_sheet/README.md
View file @ 67014774
......@@ -9,6 +9,12 @@
- [Heading 3](#heading-3)
- [Heading 1](#heading-1-1)
- [Heading 2](#heading-2-1)
- [Heading 3](#heading-3-1)
......
examples/markdown_test_sheet/index.md
View file @ 67014774
......@@ -2,7 +2,7 @@
author: ak
check: true
description: Test document for markdown syntax
edit: 2021-04-30 19:40
edit: 2021-05-05 19:31
html: true
index: /home/ak/git/pykyll/ak/markdown_test_sheet/index.md
subtitle: Markdown test sheet
......@@ -74,4 +74,16 @@ And so on
Test document for markdown syntax
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
---
\ No newline at end of file
htmlout/blog_demo/index.html
View file @ 67014774
......@@ -24,7 +24,7 @@
</ul>
</nav>
<div id="BEFORE">
<a href="../">Pykyll</a> Demo Blog
<a href="../">Pykyll</a> – Demo Blog
</div>
<h4 id="demo-blog">Demo Blog</h4>
<h1 id="baz"><a href="post_3">baz</a></h1>
......
htmlout/blog_demo/post_1/index.html
View file @ 67014774
......@@ -24,7 +24,7 @@
<p class="date">2021-05-03 16:24</p>
</header>
<div id="BEFORE">
<a href="../../">Pykyll</a> <a href="../">Demo Blog</a><a href="#" id="pagetitle">foo</a>
<a href="../#foo">Demo Blog</a> – <a href="#" id="pagetitle">foo</a>
</div>
<p>
foo post – a demo post
......
htmlout/blog_demo/post_2/index.html
View file @ 67014774
......@@ -24,7 +24,7 @@
<p class="date">2021-05-03 16:29</p>
</header>
<div id="BEFORE">
<a href="../../">Pykyll</a> <a href="../">Demo Blog</a><a href="#" id="pagetitle">bar</a>
<a href="../#bar">Demo Blog</a> – <a href="#" id="pagetitle">bar</a>
</div>
<p>
bar post for foo blog
......
htmlout/blog_demo/post_3/index.html
View file @ 67014774
......@@ -29,7 +29,7 @@
</ul>
</nav>
<div id="BEFORE">
<a href="../../">Pykyll</a> <a href="../">Demo Blog</a><a href="#" id="pagetitle">baz</a>
<a href="../#baz">Demo Blog</a> – <a href="#" id="pagetitle">baz</a>
</div>
<p>
baz post for foo blog
......
htmlout/css/post.css
View file @ 67014774
......@@ -324,7 +324,7 @@ figure:hover img:hover, figure:focus img:focus{
transition-delay: 1s;
}
#TOC::after{
#TOC::before{
font-size: 1rem;
font-family: 'Texturina';
color: goldenrod;
......@@ -339,18 +339,15 @@ figure:hover img:hover, figure:focus img:focus{
min-height: 5vh;
width: 100%;
background-color: darkslategray;
/* position: sticky; */
position: fixed;
bottom: 0;
left: 0;
/* transition: 0.5s ease-in;
transition-delay: 1s; */
transition: 0.5s ease-in;
}
#TOC:hover, #TOC:focus{
padding: 1em;
border-radius: 1em;
font-size: 1em;
font-size: 1.2em;
transition-delay: 0s;
bottom: 0;
left: 0;
......@@ -369,6 +366,7 @@ figure:hover img:hover, figure:focus img:focus{
}
#TOC li{
font-size: smaller;
display: inline-block;
vertical-align: top;
}
......@@ -406,27 +404,9 @@ figure:hover img:hover, figure:focus img:focus{
border-radius: 1em;
}
/* #BEFORE{
text-align: right;
font-family: 'Texturina';
margin: 0;
padding-top: 0.5em;
padding-bottom: 0.5em;
padding-right: 0.5em;
line-height: 1;
min-height: 1.5em;
vertical-align: middle;
font-size: 1.5em;
width: 100%;
background-color: goldenrod;
position: sticky;
bottom: 0;
right: 10vw;
z-index: +1;
} */
#BEFORE a {
padding-left: 1vw;
paddint-right: 1vw;
font: optional bolder;
display: inline-block;
}
......@@ -460,22 +440,31 @@ display: inline-block;
@media screen and (max-width: 650px) {
html {
/* html {
font-size: smaller;
} */
header h1{
font-size: 2em;
}
#BEFORE{
font-size: 1em;
overflow: hidden;
text-overflow: ellipsis;
}
#BEFORE a {
display: inline-block;
}
#TOC li {
font-size: larger;
#TOC li {
display: block;
width: 100%;
overflow: visible;
}
#TOC li a{
#TOC li a{
display: block;
white-space: nowrap;
width: 100%;
......
htmlout/css/root.css
View file @ 67014774
......@@ -343,15 +343,13 @@ figure:hover img:hover, figure:focus img:focus{
#TOC{
margin: 0;
padding: 0;
line-height: 1.2;
font-size: 0;
min-height: 2em;
min-height: 5vh;
width: 100%;
background-color: darkslategray;
position: fixed;
position: fixed;
bottom: 0;
left: 0;
padding: 1em;
transition: 0.5s ease-in;
}
......@@ -416,6 +414,7 @@ figure:hover img:hover, figure:focus img:focus{
#BEFORE a {
padding-left: 1vw;
padding-right: 1vw;
font-weight: bolder;
display: inline-block;
}
......@@ -443,16 +442,15 @@ figure:hover img:hover, figure:focus img:focus{
@media screen and (max-width: 650px) {
html {
/* html {
font-size: smaller;
}
} */
/* #BEFORE{
font-size: smaller;
} */
#TOC li {
font-size: larger;
#TOC li {
display: block;
width: 100%;
overflow: visible;
......
htmlout/css/topic.css
View file @ 67014774
......@@ -324,7 +324,7 @@ figure:hover img:hover, figure:focus img:focus{
transition-delay: 1s;
}
#TOC::after{
#TOC::before{
font-size: 1rem;
font-family: 'Texturina';
color: goldenrod;
......@@ -339,18 +339,15 @@ figure:hover img:hover, figure:focus img:focus{
min-height: 5vh;
width: 100%;
background-color: darkslategray;
/* position: sticky; */
position: fixed;
bottom: 0;
left: 0;
/* transition: 0.5s ease-in;
transition-delay: 1s; */
transition: 0.5s ease-in;
}
#TOC:hover, #TOC:focus{
padding: 1em;
border-radius: 1em;
font-size: 1em;
font-size: 1.2em;
transition-delay: 0s;
bottom: 0;
left: 0;
......@@ -406,27 +403,9 @@ figure:hover img:hover, figure:focus img:focus{
border-radius: 1em;
}
/* #BEFORE{
text-align: right;
font-family: 'Texturina';
margin: 0;
padding-top: 0.5em;
padding-bottom: 0.5em;
padding-right: 0.5em;
line-height: 1;
min-height: 1.5em;
vertical-align: middle;
font-size: 1.5em;
width: 100%;
background-color: goldenrod;
position: sticky;
bottom: 0;
right: 10vw;
z-index: +1;
} */
#BEFORE a {
padding-left: 1vw;
padding-right: 1vw;
font: optional bolder;
display: inline-block;
}
......@@ -460,22 +439,26 @@ display: inline-block;
@media screen and (max-width: 650px) {
html {
/* html {
font-size: smaller;
}
} */
/* #header h1 {
font-size: smaller;
} */
#BEFORE{
font-size: 1em;
}
#TOC li {
font-size: larger;
#TOC li {
display: block;
width: 100%;
overflow: visible;
}
#TOC li a{
#TOC li a{
display: block;
white-space: nowrap;
width: 100%;
......
htmlout/examples/index.html
View file @ 67014774
......@@ -27,7 +27,7 @@
</ul>
</nav>
<div id="BEFORE">
<a href="../">Pykyll</a> Docs
<a href="../">Pykyll</a> – Docs
</div>
<h4 id="docs">Docs</h4>
<h1 id="documentation-management"><a href="technical_information">Documentation Management</a></h1>
......@@ -37,7 +37,7 @@
<h1 id="slide-deck-example"><a href="slides">Slide Deck Example</a></h1>
<p>2021-04-30 19:38 – How to set up your post as a fancy slide show that can be remote controlled to support your on-line talk without relying on video and screen sharing, thus removing the self-referential picture-in-picture from the bigger picture.</p>
<h1 id="syntax"><a href="markdown_test_sheet">Syntax</a></h1>
<p>2021-04-30 19:40 – Test document for markdown syntax</p>
<p>2021-05-05 19:31 – Test document for markdown syntax</p>
<h1 id="taskwarrior-integration"><a href="taskwarrior">Taskwarrior Integration</a></h1>
<p>2021-04-30 19:38 – Integrating to the project management stack</p>
<h1 id="topic-types"><a href="topic_types">Topic Types</a></h1>
......
htmlout/examples/markdown_test_sheet/index.html
View file @ 67014774
......@@ -83,7 +83,7 @@
<h1 class="title">Syntax</h1>
<p class="subtitle">Markdown test sheet</p>
<p class="author">ak</p>
<p class="date">2021-04-30 19:40</p>
<p class="date">2021-05-05 19:31</p>
</header>
<nav id="TOC" role="doc-toc">
<ul>
......@@ -94,10 +94,17 @@
<li><a href="#heading-3">Heading 3</a></li>
</ul></li>
</ul></li>
<li><a href="#heading-1-1">Heading 1</a>
<ul>
<li><a href="#heading-2-1">Heading 2</a>
<ul>
<li><a href="#heading-3-1">Heading 3</a></li>
</ul></li>
</ul></li>
</ul>
</nav>
<div id="BEFORE">
<a href="../../">Pykyll</a> <a href="../">Docs</a><a href="#" id="pagetitle">Syntax</a>
<a href="../#syntax">Docs</a> – <a href="#" id="pagetitle">Syntax</a>
</div>
<p>
Test document for markdown syntax
......@@ -158,6 +165,12 @@ Test document for markdown syntax
<li><p>And here’s the third list item.</p></li>
</ul>
<p>Test document for markdown syntax</p>
<h1 id="heading-1-1">Heading 1</h1>
<h2 id="heading-2-1">Heading 2</h2>
<h3 id="heading-3-1">Heading 3</h3>
<h4 id="heading-4-1">Heading 4</h4>
<h5 id="heading-5-1">Heading 5</h5>
<h6 id="heading-6-1">Heading 6</h6>
<hr />
</body>
</html>
htmlout/examples/picture_test/index.html
View file @ 67014774
......@@ -99,7 +99,7 @@
</ul>
</nav>
<div id="BEFORE">
<a href="../../">Pykyll</a> <a href="../">Docs</a><a href="#" id="pagetitle">Pictures and More</a>
<a href="../#pictures-and-more">Docs</a> – <a href="#" id="pagetitle">Pictures and More</a>
</div>