| author | Olivier Brunel
<jjk@jjacky.com> 2023-01-14 19:15:09 UTC |
| committer | Olivier Brunel
<jjk@jjacky.com> 2023-01-14 19:15:09 UTC |
| parent | c951cb8578840fc2977dccf8cb1a8b84b0e3d880 |
| css/common.css | +26 | -22 |
| css/dark.css | +44 | -49 |
| css/light.css | +35 | -47 |
| css/struct.css | +73 | -90 |
| src/main.c | +15 | -12 |
diff --git a/css/common.css b/css/common.css index 0242801..821daaa 100644 --- a/css/common.css +++ b/css/common.css @@ -1,36 +1,37 @@ main { font-size: 16px; } -main pre { +main section.content pre { margin: 8px 0 8px; padding: 12px; } -main pre code { +main section.content pre code { background: url(data:type/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAoCAYAAAA/tpB3AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5AoRDygzCsVT7gAAABZJREFUCNdjYGBg4GJiYGBgoB1BDwAAHrQAMUi3bMoAAAAASUVORK5CYII=) 0 0 repeat #f2ecb7; } -main blockquote :first-child::before { +main section.content blockquote :first-child::before { content: url(data:type/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAgCAYAAABU1PscAAABRElEQVRYw+3WTytEURjH8c/4l1JTpKxsyEbYWFkpG+UVKOWFeAts7eytbJSysLLVxIKNFAslwhSlUQabUdM0xm0e967Ot+7inPN8z+13z73nXBKJRCIRoJSxbggrmMMInlHBIWoF+KEAQ9jAaJuxe2zhJUe/Iz0ZahZ/uTmMYT1nPxxg/I/xWQzn6IcD1IIha//wkEIBKhlq+nP0wwHOsYuvDjWvOfod6c1Yd9O4ZjDQZvwAbzn6oRVofpKbqLf0P+GxAD8cAO7w0NJ3WqAfDlBCuan9gaMC/XCA+cbJ+sMRqgX6oQCTWGtqX2O/QL8tfRlqyljGUlPgW2y3+SDz8Lv6mRvEQmPbm25ZqQvs/LHtRf3wCkxgtaWvij2cZJg36ocD/Pw91nGJY5zhM+O8UT/8Ck01TswrvHcxb9RPJBKJRDF8AyNbWk4WFTIzAAAAAElFTkSuQmCC); float: left; } -main blockquote cite { +main section.content blockquote cite { font-style: italic; padding-left: 8px; } -main blockquote cite::before { +main section.content blockquote cite::before { content: "— "; } -main q { +main section.content q { font-style: italic; } -main section a { +main section.content a { text-decoration: underline; } -main section h1 a::before, main section h2 a::before, main section h3 a::before, -main section h4 a::before, main section h5 a::before, main section h6 a::before { +main section.content h1 a::before, main section.content h2 a::before, +main section.content h3 a::before, main section.content h4 a::before, +main section.content h5 a::before, main section.content h6 a::before { content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAiCAYAAABWQVnHAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5AoRDzABQAmaNwAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAABOUlEQVRIx+2UsU4CQRCGvyUk+ABeBxWUVlbSHckk+AA+go/lI9hr8Udb6OwFC8VKOivMJWczlyybPdDQ3laX2Zl/Z79/50JVVZyyepy4OgHo/yXJzB6AURTaSLoGCMdsNLMnYAoMovAOWEiaHRTw4ktg60W40BCogU2rQFT8IqlM9l6BcSvEqO1tWhxdASD0WoBNgbModvcfGycNMEkTM3sHbszsMcoZAD/Aup+xKvhmQ33osbHnPQOFu1D2kjt/SZoAG6A2s1pS0+XI4RXAsmHT9+AQ+JQ08+Q1cA58J20j6SJlMHZgDVkkzYF7SSMzW7nnO+AtBzHk6Eq69c/amSxcuNWFQcbSPWC5g0JZlitnAPCRPNki9xL3BKqqak66ygzM8lDx3jT6Q0lHdn5s1EP3V+4EOgEAfgElA4h8m56jlAAAAABJRU5ErkJggg==); } -main section h1 a, main section h2 a, main section h3 a, -main section h4 a, main section h5 a, main section h6 a { +main section.content h1 a, main section.content h2 a, main section.content h3 a, +main section.content h4 a, main section.content h5 a, main section.content h6 a { display: none; max-width: 16px; max-height: 24px; @@ -38,7 +39,9 @@ main section h4 a, main section h5 a, main section h6 a { vertical-align: middle; text-transform: none; } -h1:hover a, h2:hover a, h3:hover a, h4:hover a, h5:hover a, h6:hover a { +main section.content h1:hover a, main section.content h2:hover a, +main section.content h3:hover a, main section.content h4:hover a, +main section.content h5:hover a, main section.content h6:hover a { display: inline-block; text-decoration: none !important; } @@ -56,7 +59,7 @@ main section h5 a:hover::after, main section h6 a:hover::after { color: #fff; border-radius: 4px; } -main kbd { +main section.content kbd { display: inline-block; height: 24px; padding: 0 4px; @@ -64,7 +67,8 @@ main kbd { border-radius: 4px; font-weight: 700; } -main span.mbl, main span.mbr, main.mbw { +main section.content span.mbl, main section.content span.mbr, +main section.content span.mbw { display: inline-block; height: 24px; min-width: 16px; @@ -72,32 +76,32 @@ main span.mbl, main span.mbr, main.mbw { margin: -2px 0 -2px; vertical-align: middle; } -main span.mbl::before { +main section.content span.mbl::before { content: url(data:type/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAYCAMAAADEfo0+AAAAe1BMVEUAAACoqKj9/f2zs7O1tbWRkZGlpaWsrKybm5u2traNjY2Wlpanp6empqaYmJiPj4+3t7f5+fmjo6P19fXu7u6ZmZnx8fHi4uLm5ube3t7q6uqwsLC0tLS7u7u4uLi/v7/W1tbDw8PLy8vPz8/T09Pa2trHx8eIiIhERkShhqFGAAAAAXRSTlMAQObYZgAAAI5JREFUGNNV0EcCwjAMRFEB6R2DKSGQUBLp/idEjsG23m7+cgAMIsJWwR8Z235pumDTnkUbv+lg7CIfTqvSbTquxsGFfjWXLlwsdOFs+XC1EHAWOEwCh4/A4S1weAkcFoHDU0CI8zGQx1Cpe0BVAO0j0PIfiR4cnZjLdHP7abQ9VRVZnaZ1VvjfO42o7edfH3EoHZS6XE4AAAAASUVORK5CYII=); } -main span.mbr::before { +main section.content span.mbr::before { content: url(data:type/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAYCAMAAADEfo0+AAAAe1BMVEUAAACoqKj9/f2zs7O1tbWRkZGlpaWsrKybm5u2traNjY2Wlpanp6empqaYmJiPj4+3t7f5+fmjo6P19fXu7u6ZmZnx8fHi4uLm5ube3t7q6uqwsLC0tLS7u7u4uLi/v7/W1tbDw8PLy8vPz8/T09Pa2trHx8eIiIhERkShhqFGAAAAAXRSTlMAQObYZgAAAI9JREFUGNNV0NkWgjAMRdGozFOxWgdEcYLk/7/Q0EpL9tNd5/ECzLRCIoJF20zdlsinTbRn5Eu0O8zIl/Jk+dAPR4uWUo6d5QNenBDOTghXJ4RRQMCnwOErcPgIHN4Ch0ng8BIQ4nxYyWOo9H1FVwDqsaL4j8T0nknmy0xz+2uMO1UXWZ2mdVbo8LtBNK2dP/2+KB2shyfVAAAAAElFTkSuQmCC); } -main span.mbw::before { +main section.content span.mbw::before { content: url(data:type/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAYCAMAAADEfo0+AAAAe1BMVEUAAACzs7OoqKisrKyRkZGlpaX9/f22trabm5uNjY2mpqanp6ePj4+1tbWYmJi3t7eWlpajo6OZmZmwsLD5+fnu7u7x8fHi4uLW1tbm5ube3t7T09Pq6ur19fW4uLi7u7u0tLTa2trPz8+/v7/Dw8PLy8vHx8eIiIhERkS4354xAAAAAXRSTlMAQObYZgAAAKdJREFUGNNV0NkagiAUhdHjPAECzWWlWdL7P2Fno/nJumHzXx4iMMI5YeivVVOX592k2vkfy/1CxvjL6L6KJAd9ZF+GVxP144Eh4B170kPHEPAOmtwFEPxw5E6A4AeHKyD4wWEABD84nAHBDw43QPCDwyvA4RPgMAU4vAOO0mLcKFJqzHPDNETisSH4HpntVzbDyazaLZSdj2qqsk6Suqw2d7fO2fnmP7kAJW9a/HbiAAAAAElFTkSuQmCC); } -main span.button { +main section.content span.button { border-radius: 3px; padding: 4px; font-size: 90%; } -main div.box > :first-child::before { +main section.content div.box > :first-child::before { content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAQCAYAAAD9L+QYAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5AoRDyIoek9yiAAAAKtJREFUOMvdlEEKwjAQRTMiXQrZeJteoiv3niXH6GXSTY9Q6AnqEaTw3IwoZVpjogh++JBkkp9J8ifO/R0ADwQg8kDUMV8i3AAT65iAJld45jXmtzbQq1hmPAIn5WicwKeKByPD/ineG/Gwprdb9OuMJ6p/Ir5PWHwEzvd2iQXjijOuSgsx9Vo6Y04rIpWIVM651oh3JVYcgINyyLbiRhFdlPlF9PXy/+THdQMVLLdebRX1uQAAAABJRU5ErkJggg==); } -main div.box > :first-child { +main section.content div.box > :first-child { font-weight: 700; } -main footer.page { +main section.content footer.page { margin-top: 16px; opacity: 0.8; font-size: 80%; } -main footer.page .generated { +main section.content footer.page .generated { opacity: 0.8; font-size: 90%; } diff --git a/css/dark.css b/css/dark.css index 787cdcf..60bf20a 100644 --- a/css/dark.css +++ b/css/dark.css @@ -2,118 +2,113 @@ :root { color-scheme: dark; } - main header section { + header.toc section { background: #17679B; } - main header section h1 { + header.toc section h1 { color: #ccc6c6; } - main header section h2 { + header.toc section h2 { color: #56b5ee; } - main header nav { + header.toc nav { background: #343131; } - main header nav ul li a:hover { + header.toc nav ul li a:hover { background: #4e4a4a; } - main header nav ul li a { + header.toc nav ul li a { color: #b3b3b3; - /*color: #55a5d9;*/ } - main header nav > ul > li > a { /* PAGE */ + main header.toc ul.toc.page > li > a { color: #55a5d9; } - main section > ul.toc > li > a { - color: #112fa2; - } - main header nav > ul > li > ul > li > a { /* h1 */ + main header.toc ul.toc.page ul.h1 > li > a { color: #a3a802; } - main section > ul.toc > li > ul > li > a { - color: #6c2104; - } - main section > ul.toc > li > ul > li > ul > li > a, - main section > ul.toc > li > ul > li > ul > li > ul > li > a, - main section > ul.toc > li > ul > li > ul > li > ul > li > ul > li > a, - main section > ul.toc > li > ul > li > ul > li > ul > li > ul > li > ul > li > a, - main section > ul.toc > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > a { - color: #0f0b37; + main header.toc ul.toc.page ul.h2 > li > a, + main header.toc ul.toc.page ul.h3 > li > a, + main header.toc ul.toc.page ul.h4 > li > a, + main header.toc ul.toc.page ul.h5 > li > a, + main header.toc ul.toc.page ul.h6 > li > a { + color: #979aae; } - main, main footer.page { + main, main section.content footer.page { background: #80732d; } - main { + main, + main section.content ul.toc ul.h2 > li > a, + main section.content ul.toc ul.h3 > li > a, + main section.content ul.toc ul.h4 > li > a, + main section.content ul.toc ul.h5 > li > a, + main section.content ul.toc ul.h6 > li > a { color: #0f0b37; } - main .highlight { - color: blue; - } - main .highlight2 { - color: #4f0; + main section.content a:hover { + color: blue !important; } - main .highlighted { + main section.content .highlighted { background: #d0d016; } - main pre { + main section.content pre { border: 1px solid #495457; background: #999463; } - main pre.lineno + pre > span { + main section.content pre.lineno + pre > span { background: #086abf; color: #eee; } - main section a { - color: blue; + main section.content a { + color: #211ca8; } - main section a:visited { - color: purple; + main section.content a:visited { + color: #420314; } - main kbd { + main section.content kbd { border: 1px solid #888; background-image: linear-gradient(#999 0%,#aaa 10%,#777 10%,#888 30%,#bbb 85%,#aaa 85%,#444 100%); } - main span.button { + main section.content span.button { border: 1px solid #555; background-image: linear-gradient(#bbb 0%,#bbb 1%,#b2b2b2 1%,#a7a7a7 50%,#999 50%,#8b8b8b 99%,#bbb 99%,#bbb 100%); } - main div.box > :first-child { + main section.content div.box > :first-child { color: #eee; } - main div.box.hint { + main section.content div.box.hint { background: #68bd7e; } - main div.box.hint > :first-child { + main section.content div.box.hint > :first-child { background: #13821b; } - main div.box.info { + main section.content div.box.info { background: #58b8ce; } - main div.box.info > :first-child { + main section.content div.box.info > :first-child { background: #086abf; } - main div.box.warn { + main section.content div.box.warn { background: #bd7e4f; } - main div.box.warn > :first-child { + main section.content div.box.warn > :first-child { background: #973c3c; } - main div.box.note { + main section.content div.box.note { background: #c4c4c4; } - main div.box.note > :first-child { + main section.content div.box.note > :first-child { background: #575656; } - main #navbuttons a { + main section.content #navbuttons a { background: #9f9d1b; border: 1px solid #232323; color: inherit; box-shadow: inset 0 1px 2px -1px hsla(0,0%,100%,.5),inset 0 -2px 0 0 #232323; } - main footer.page { + main section.content footer.page { border-top: 2px solid #515151; } - main pre code { + main section.content pre code { background: url(data:type/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAgCAYAAADT5RIaAAAAFklEQVQI12NgYGDgZWJgYGCgDkFtAAAWnAAsyj4TxgAAAABJRU5ErkJggg==) 0 0 repeat #a09329; } } diff --git a/css/light.css b/css/light.css index 480dde8..f983e81 100644 --- a/css/light.css +++ b/css/light.css @@ -1,116 +1,104 @@ :root { color-scheme: light; } -main header section { +header.toc section { background: #2980B9; } -main header section h1 { +header.toc section h1 { color: #fcfcfc; } -main header section h2 { +header.toc section h2 { color: #56b5ee; } -main header nav { +header.toc nav { background: #343131; } -main header nav ul li a:hover { +header.toc nav ul li a:hover { background: #4e4a4a; } -main header nav ul li a { +header.toc nav ul li a { color: #b3b3b3; } -main header nav > ul > li > a { /* PAGE */ +header.toc ul.toc.page > li > a { color: #55a5d9; } -main section > ul.toc > li > a { - color: #2949ac; -} -main header nav > ul > li > ul > li > a { /* h1 */ +header.toc ul.toc.page ul.h1 > li > a { color: #a3a802; } -main section > ul.toc > li > ul > li > a { - color: #7b681b; -} -main section > ul.toc > li > ul > li > ul > li > a, -main section > ul.toc > li > ul > li > ul > li > ul > li > a, -main section > ul.toc > li > ul > li > ul > li > ul > li > ul > li > a, -main section > ul.toc > li > ul > li > ul > li > ul > li > ul > li > ul > li > a, -main section > ul.toc > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > a { +main section.content ul.toc ul.h2 > li > a, +main section.content ul.toc ul.h3 > li > a, +main section.content ul.toc ul.h4 > li > a, +main section.content ul.toc ul.h5 > li > a, +main section.content ul.toc ul.h6 > li > a { color: #404040; } -main section > ul.toc a:hover { - color: blue; +main section.content a:hover { + color: blue !important; } -main, main footer.page { +main, main section.content footer.page { background: #fbf4ce; } main { color: #404040; } -main .highlight { - color: blue; -} -main .highlight2 { - color: red; -} -main .highlighted { +main section.content .highlighted { background: #ff0; } -main pre { +main section.content pre { border: 1px solid #e1e4e5; background: #f2ecb7; } -main pre.lineno + pre > span { +main section.content pre.lineno + pre > span { background: #217ed0; color: #eee; } -main section a { - color: blue; +main section.content a { + color: #1a1acc; } -main section a:visited { +main section.content a:visited { color: purple; } -main kbd { +main section.content kbd { border: 1px solid #888; background-image: linear-gradient(#ddd 0%,#eee 10%,#bbb 10%,#ccc 30%,#fff 85%,#eee 85%,#888 100%); } -main span.button { +main section.content span.button { border: 1px solid #555; background-image: linear-gradient(#fff 0%,#fff 1%,#f2f2f2 1%,#ebebeb 50%,#ddd 50%,#cfcfcf 99%,#fff 99%,#fff 100%); } -main div.box > :first-child { +main section.content div.box > :first-child { color: #eee; } -main div.box.hint { +main section.content div.box.hint { background: #91ffad; } -main div.box.hint > :first-child { +main section.content div.box.hint > :first-child { background: #24ae2d; } -main div.box.info { +main section.content div.box.info { background: #71e1fb; } -main div.box.info > :first-child { +main section.content div.box.info > :first-child { background: #217ed0; } -main div.box.warn { +main section.content div.box.warn { background: #fdbf91; } -main div.box.warn > :first-child { +main section.content div.box.warn > :first-child { background: #df5b5b; } -main div.box.note { +main section.content div.box.note { background: #c4bfb0; } -main div.box.note > :first-child { +main section.content div.box.note > :first-child { background: #5c5353; } -main #navbuttons a { +main section.content #navbuttons a { background: #f0efb6; border: 1px solid #232323; color: inherit; box-shadow: inset 0 1px 2px -1px hsla(0,0%,100%,.5),inset 0 -2px 0 0 #232323; } -main footer.page { +main section.content footer.page { border-top: 1px solid #979518; } diff --git a/css/struct.css b/css/struct.css index 22e4b8b..5cb36ae 100644 --- a/css/struct.css +++ b/css/struct.css @@ -18,37 +18,33 @@ time, mark, audio, video { html, body { height: 100%; } -main header { +header.toc { width: 300px; float: left; } -main > section { +main section.content { margin-left: 300px; } -main > section > header { +main section.content header.manpage { width: 100%; } -main > section > header > div, -main > section > footer > div { +main section.content header.manpage div, +main section.content footer.manpage div { width: 100%; position: absolute; } -main > section > header > div + div, -main > section > footer > div + div { +main section.content header.manpage div.middle, +main section.content footer.manpage div.middle { text-align: center; - width: 100%; - position: absolute; } -main > section > header > div + div + div, -main > section > footer > div + div + div { +main section.content header.manpage div.right, +main section.content footer.manpage div.right { text-align: right; - width: 100%; - position: absolute; } -main > section > header { +main section.content header.manpage { margin-bottom: 23px; } -main > section > footer { +main section.content footer.manpage { margin-top: 23px; } @supports (display: grid) { @@ -58,47 +54,47 @@ main > section > footer { grid-template-columns: 300px 1fr; height: 100%; } - main header { + header.toc { grid-area: toc; overflow: scroll; width: inherit; float: inherit; } - main > section { + section.content { + grid-area: page; + position: relative; + } + main section.content { margin-left: inherit; } - main > section > header, main > section > footer { + main section.content header.manpage, main section.content footer.manpage { display: grid; grid-template-areas: "left middle right"; grid-template-columns: 1fr 2fr 1fr; } - main > section > header > div, - main > section > footer > div, - main > section > header > div + div, - main > section > footer > div + div, - main > section > header > div + div + div, - main > section > footer > div + div + div { + main section.content header.manpage div, + main section.content footer.manpage div { width: inherit; position: inherit; } } -main header section { +header.toc section { position: sticky; top: 0; z-index: 1; height: 88px; } -main header section h1 { +header.toc section h1 { text-align: center; font-size: 1.42em; font-weight: 800; } -main header section h2 { +header.toc section h2 { margin-top: 8px; text-align: center; font-weight: 700; } -main header nav { +header.toc nav { position: relative; padding: 8px; padding-bottom: 42px; /* 23 (section h1 margin-top) + 19 */ @@ -106,29 +102,28 @@ main header nav { overflow: hidden scroll; overscroll-behavior-y: contain; } -main header nav li a { +header.toc nav li a { line-height: 1.1em; padding: 4px 6px; white-space: nowrap; } -main header nav li a { +header.toc nav li a { display: inline-block; width: 100%; } -main section ul.toc, main section ul.toc ul { +main section.content ul.toc { padding-left: 8px; } -main section ul.toc li { +main section.content ul.toc li { display: block; } -main section ul.toc li a { +main section.content ul.toc li a { text-decoration: none; } -main section ul.toc > li { +main section.content ul.toc.page > li { margin-top: 23px; } -main header nav > ul > li > a, -main section ul.toc > li > a { /* PAGE */ +ul.toc.page > li > a { margin-top: 8px; font-weight: 600; text-transform: uppercase; @@ -136,36 +131,29 @@ main section ul.toc > li > a { /* PAGE */ main section ul.toc > li > a { font-size: 110%; } -main header nav > ul > li > ul > li > a, -main section > ul.toc > li > ul > li > a { /* h1 */ +ul.toc.page ul.h1 > li > a { text-transform: uppercase; font-weight: 600; padding-left: 12px; } -main header nav > ul > li > ul > li > ul > li > a, -main section > ul.toc > li > ul > li > ul > li > a { /* h2 */ +ul.toc.page ul.h2 > li > a { font-weight: 400; padding-left: 24px; } -main header nav > ul > li > ul > li > ul > li > ul > li > a, -main section > ul.toc > li > ul > li > ul > li > ul > li > a { /* h3 */ +ul.toc.page ul.h3 > li > a { padding-left: 36px; } -main header nav > ul > li > ul > li > ul > li > ul > li > ul > li > a, -main section > ul.toc > li > ul > li > ul > li > ul > li > ul > li > a { /* h4 */ +ul.toc.page ul.h4 > li > a { padding-left: 48px; } -main header nav > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > a, -main section > ul.toc > li > ul > li > ul > li > ul > li > ul > li > ul > li > a { /* h5 */ +ul.toc.page ul.h5 > li > a { padding-left: 60px; } -main header nav > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > a, -main section > ul.toc > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > a { /* h6 */ +ul.toc.page ul.h6 > li > a { padding-left: 72px; } -main > section { - grid-area: page; - position: relative; +section.content { + display: block; padding: 23px 42px 0 42px; min-height: 100%; overflow: hidden scroll; @@ -186,21 +174,21 @@ main u { main s { text-decoration: line-through; } -main li.taskOff::marker { +main section.content li.taskOff::marker { content: "☐ "; } -main li.taskOn::marker { +main section.content li.taskOn::marker { content: "☒ "; } -main pre, main code, main kbd { +main section.content pre, main section.content code, main section.content kbd { font-family: Monaco,Consolas,Liberation Mono,Courier,monospace; white-space: pre; } -main pre { +main section.content pre { line-height: 20px; overflow: auto; } -main pre.lineno { +main section.content pre.lineno { display: block; padding: 0 4px; margin-top: 12px; @@ -211,12 +199,12 @@ main pre.lineno { clear: both; overflow: hidden; } -main pre.lineno + pre { +main section.content pre.lineno + pre { padding: 0; border: none; background: none; } -main pre.lineno + pre > span { +main section.content pre.lineno + pre > span { position: absolute; margin-left: -8px; margin-top: -2px; @@ -224,91 +212,86 @@ main pre.lineno + pre > span { font-weight: 600; font-size: 90%; } -main pre code { +main section.content pre code { display: block; padding: 0; margin: 12px 12px 0px 2px; overflow: hidden; } -main div.box pre { +main section.content div.box pre { width: 90%; margin: auto; } -main section h1 { +main header.toc > section h1 { + padding-top: 23px; +} +main section.content h1 { text-transform: uppercase; padding-top: 23px; padding-bottom: 15px; font-weight: 800; font-size: 175%; } -main header section h1 { - text-transform: inherit; - padding-bottom: inherit; -} -main section h2 { +main section.content h2 { padding-top: 15px; padding-bottom: 8px; font-weight: 700; font-size: 150%; } -main header section h2 { - padding-top: inherit; - padding-bottom: inherit; - font-size: inherit; -} -main section h3, main section h4, main section h5, main section h6 { +main section.content h3, main section.content h4, +main section.content h5, main section.content h6 { font-weight: 600; } -main section h3 { +main section.content h3 { padding-top: 15px; padding-bottom: 8px; font-size: 130%; } -main section h4 { +main section.content h4 { padding-top: 15px; padding-bottom: 8px; font-size: 110%; } -main section h5 { +main section.content h5 { padding-top: 15px; padding-bottom: 8px; font-size: 95%; } -main section h6 { +main section.content h6 { padding-top: 15px; padding-bottom: 8px; font-size: 80%; } -main blockquote { +main section.content blockquote { margin: 4px 23px 23px 42px; } -main div.indent { +main section.content div.indent { margin: -8px 23px 4px 42px; } -main section ul, main section ol { +main section.content ul, main section.content ol { padding-left: 42px; } -main div.box { +main section.content div.box { margin: 8px 0 15px 0; padding: 0 0 5px 0; line-height: 15px; } -main div.box > :first-child { +main section.content div.box > :first-child { display: block; margin: 0px; padding: 4px; } -main div.box p { +main section.content div.box p { margin: 4px 11px; } -main div.box div.box { +main section.content div.box div.box { width: 90%; margin: auto; } -main #navbuttons { +main section.content #navbuttons { height: 23px; } -main #navbuttons a { +main section.content #navbuttons a { border-radius: 4px; padding: 4px 12px 8px; text-align: center; @@ -317,20 +300,20 @@ main #navbuttons a { text-decoration: none; user-select: none; } -main #navbuttons a.prev::before { +main section.content #navbuttons a.prev::before { content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAMAAABhEH5lAAAANlBMVEUAAABAQEBAQEBAQEBAQEBAQEBAQEBBQUFAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAWW5SEAAAAEnRSTlMA/fC9r2kXAjMN34F3ZlUu6B40Y5wGAAAAVElEQVQY08XPSw6AIAwEUIbS8lFE739Zq6luGtbM8iXTTMOCZGECiCX/MhIQTyCNz+SRrUc1MWKVvR5KYCN6pUFDRtqq4Sql9IYJ+aI/70f4qdOHblOhAuUcC5KnAAAAAElFTkSuQmCC); } -main #navbuttons a.next { +main section.content #navbuttons a.next { float: right; margin-top: -4px; } -main #navbuttons a.next::after { +main section.content #navbuttons a.next::after { content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASBAMAAACk4JNkAAAAJFBMVEUAAABAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEC4lvDfAAAAC3RSTlMAx711ZjlFPh3zLASjkrYAAABDSURBVAjXY6AUsGhvcgAzOKR3797YAGIx7t5mvVsAxPLevZ159xYQS3v3zgLrTSDW7tTQBcy7ESyELEIHwhSEyQjbAAH1HsMY8tCHAAAAAElFTkSuQmCC); } -main footer.page { +main section.content footer.page { display: inherit; } -main footer.page { +main section.content footer.page { padding: 8px 23px; margin: 0 -23px; } diff --git a/src/main.c b/src/main.c index b7e5924..7d0be3c 100644 --- a/src/main.c +++ b/src/main.c @@ -395,7 +395,7 @@ enter_block(MD_BLOCKTYPE type, void *details, void *ctx_) return ERR_PARSER_ENTER_BLOCK; if (!(ctx->options & OPT_NO_TOC)) { - if (!raw_str(ctx, "<header><section><h1>") + if (!raw_str(ctx, "<header class=\"toc\"><section><h1>") || !escape_text(ctx, ctx->doc.title, strlen(ctx->doc.title)) || !raw_str(ctx, "</h1>") || (ctx->doc.subtitle && (!raw_str(ctx, "<h2>") @@ -404,7 +404,7 @@ enter_block(MD_BLOCKTYPE type, void *details, void *ctx_) strlen(ctx->doc.subtitle)) || !raw_str(ctx, "</h2>")) ) - || !raw_str(ctx, "</section><nav><ul>")) + || !raw_str(ctx, "</section><nav><ul class=\"toc page\">")) return ERR_PARSER_ENTER_BLOCK; for (int i = 0; i < ctx->nb_pages; ++i) { @@ -424,7 +424,7 @@ enter_block(MD_BLOCKTYPE type, void *details, void *ctx_) if (ctx->doc.flags & DOC_FULL_TOC) { /* starting it? */ if (i == 1) { - if (!raw_str(ctx, "<ul class=\"toc\">")) + if (!raw_str(ctx, "<ul class=\"toc page\">")) return ERR_PARSER_TOC; } /* adding page title */ @@ -445,7 +445,7 @@ enter_block(MD_BLOCKTYPE type, void *details, void *ctx_) ctx->otoc = ctx->sa_out.len; /* open it */ - if (!raw_str(ctx, "<ul>")) + if (!raw_str(ctx, "<ul class=\"toc h1\">")) return ERR_PARSER_TOC; ctx->toc_lvl = 1; @@ -456,19 +456,19 @@ enter_block(MD_BLOCKTYPE type, void *details, void *ctx_) return ERR_PARSER_ENTER_BLOCK; } - if (!raw_str(ctx, "<section>") + if (!raw_str(ctx, "<section class=\"content\">") || (ctx->doc.oheader && !(ctx->options & OPT_WIDE_INC) && !raw_str(ctx, ctx->sa.s + ctx->doc.oheader))) return ERR_PARSER_ENTER_BLOCK; if (p->nameoff) { - if (!raw_str(ctx, "<header><div>") + if (!raw_str(ctx, "<header class=\"manpage\"><div class=\"left\">") || !escape_text(ctx, ctx->sa.s + p->nameoff, strlen(ctx->sa.s + p->nameoff)) - || !raw_str(ctx, "</div><div>") + || !raw_str(ctx, "</div><div class=\"middle\">") || !escape_text(ctx, ctx->sa.s + p->titleoff, strlen(ctx->sa.s + p->titleoff)) - || !raw_str(ctx, "</div><div>") + || !raw_str(ctx, "</div><div class=\"right\">") || !escape_text(ctx, ctx->sa.s + p->nameoff, strlen(ctx->sa.s + p->nameoff)) || !raw_str(ctx, "</div></header>")) @@ -561,7 +561,10 @@ enter_block(MD_BLOCKTYPE type, void *details, void *ctx_) if (!(ctx->options & OPT_NO_TOC)) { /* TOC */ for ( ; ctx->toc_lvl < d->level; ++ctx->toc_lvl) { - if (!raw_str(ctx, "<ul>")) + char n = '1' + ctx->toc_lvl; + if (!raw_str(ctx, "<ul class=\"toc h") + || !raw_text(ctx, &n, 1) + || !raw_str(ctx, "\">")) return ERR_PARSER_TOC; } for ( ; ctx->toc_lvl > d->level; --ctx->toc_lvl) { @@ -671,13 +674,13 @@ leave_block(MD_BLOCKTYPE type, void *details, void *ctx_) if ((ctx->doc.flags & DOC_HAS_TITLE) && !raw_str(ctx, "</section>")) return ERR_PARSER_LEAVE_BLOCK; if (p->nameoff) { - if (!raw_str(ctx, "<footer><div>") + if (!raw_str(ctx, "<footer class=\"manpage\"><div class=\"left\">") || !escape_text(ctx, ctx->sa.s + p->veroff, strlen(ctx->sa.s + p->veroff)) - || !raw_str(ctx, "</div><div>") + || !raw_str(ctx, "</div><div class=\"middle\">") || !escape_text(ctx, ctx->sa.s + p->dateoff, strlen(ctx->sa.s + p->dateoff)) - || !raw_str(ctx, "</div><div>") + || !raw_str(ctx, "</div><div class=\"right\">") || !escape_text(ctx, ctx->sa.s + p->nameoff, strlen(ctx->sa.s + p->nameoff)) || !raw_str(ctx, "</div></footer>"))