| author | Olivier Brunel
<jjk@jjacky.com> 2022-12-27 19:42:53 UTC |
| committer | Olivier Brunel
<jjk@jjacky.com> 2022-12-27 20:49:34 UTC |
| parent | c724f41408d8dcee2c86a3ebb7fae6253aa874ea |
| base.htm | +7 | -438 |
| dark.css | +7 | -3 |
| light.css | +5 | -2 |
| struct.css | +13 | -8 |
diff --git a/base.htm b/base.htm index 4f595ed..9e4b899 100644 --- a/base.htm +++ b/base.htm @@ -8,444 +8,10 @@ <meta name="theme-color" media="(prefers-color-scheme: light)" content="white"> <meta name="theme-color" media="(prefers-color-scheme: dark)" content="gray"> <title>Foobar Documentation</title> -<style> -html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, -blockquote, pre, a, abbr, acronym, address, big, cite, code, del, em, img, -ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, -center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, -tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, -figure, figcaption, footer, header, menu, nav, output, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - text-decoration: none; -} -*, *::before, *::after { - box-sizing:border-box; -} -html, body { - height: 100%; -} -header { - position: fixed; - width: 300px; - height: 100%; - padding-top: 88px; -} -header section { - height: 88px; - margin-top: -88px; -} -header section h1 { - margin-top: 23px; - text-align: center; - font-size: 1.42em; - font-weight: 800; -} -header section h2 { - margin-top: 8px; - text-align: center; - font-weight: 700; -} -header nav { - position: relative; - padding: 8px; - padding-bottom: 42px; /* 23 (section h1 margin-top) + 19 */ - height: 100%; - min-height: 100%; - overflow: hidden scroll; -} -header nav li a { - line-height: 1.1em; - font-weight: 600; - padding: 4px 6px; - white-space: nowrap; -} -header nav li a { - display: inline-block; - width: 100%; -} -header nav > ul > li { - margin-top: 8px; - text-transform: uppercase; -} -header nav ul ul li a { /* h2 */ - font-weight: 400; - margin-left: 12px; -} -header nav ul ul ul li a { /* h3 */ - margin-left: 24px; -} -header nav ul ul ul ul li a { /* h4 */ - margin-left: 36px; -} -header nav ul ul ul ul ul li a { /* h5 */ - margin-left: 48px; -} -header nav ul ul ul ul ul ul li a { /* h6 */ - margin-left: 60px; -} -main { - position: relative; - margin-left: 300px; - padding: 23px 42px 0 42px; - min-height: 100%; - overflow: hidden scroll; -} -main p { - padding: 8px 0; -} -main strong { - font-weight: 800; -} -main em { - font-style: italic; -} -main u { - text-decoration: underline; -} -main s { - text-decoration: line-through; -} -main pre, main code, main tt, main kbd { - font-family: Monaco,Consolas,Liberation Mono,Courier,monospace; - white-space: pre; -} -main pre, main code { - line-height: 16px; - overflow: auto; -} -main pre.lineno { - display: block; - padding: 0 4px; - margin-top: 12px; - opacity: 0.4; - text-align: right; - float: left; - overflow: hidden; -} -main code { - display: block; - padding: 0; - margin: 12px 12px 0px 2px; - background: url(data:type/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAgCAYAAADT5RIaAAAAFklEQVQI12NgYGDgZWJgYGCgDkFtAAAWnAAsyj4TxgAAAABJRU5ErkJggg==) 0 0 repeat; - overflow: hidden; -} -main h1 { - text-transform: uppercase; - padding-top: 23px; - padding-bottom: 15px; - font-weight: 800; - font-size: 175%; -} -main h2 { - padding-top: 15px; - padding-bottom: 8px; - font-weight: 700; - font-size: 150%; -} -main h3, main h4, main h5, main h6 { - font-weight: 600; -} -main h3 { - padding-top: 15px; - padding-bottom: 8px; - font-size: 130%; -} -main h4 { - padding-top: 15px; - padding-bottom: 8px; - font-size: 110%; -} -main h5 { - padding-top: 15px; - padding-bottom: 8px; - font-size: 95%; -} -main h6 { - padding-top: 15px; - padding-bottom: 8px; - font-size: 80%; -} -main blockquote { - margin: 4px 23px 23px 42px; -} -main ul, main ol { - padding-left: 42px; -} -main div.box { - margin: 0px; - padding: 0px; - line-height: 15px; -} -main div.box :first-child { - display: block; - margin: 0px; - padding: 4px; -} -main div.box p { - margin: 4px 11px; -} -main footer { - padding-top: 8px; - text-align: center; -} -</style> -<style> - main { - font-size: 16px; - } - main pre { - margin: 1px 0 23px; - padding: 12px; - } - main 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 { - font-style: italic; - padding-left: 8px; - } - main blockquote cite::before { - content: "— "; - } - main q { - font-style: italic; - } - main a { - text-decoration: underline; - } - main kbd { - display: inline-block; - height: 24px; - padding: 0 4px; - margin: -2px 0 -2px; - border-radius: 4px; - font-weight: 700; - } - main span.mbl, main span.mbr, main.mbw { - display: inline-block; - height: 24px; - min-width: 16px; - padding: 0; - margin: -2px 0 -2px; - vertical-align: middle; - } - main 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 { - 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 { - content: url(data:type/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAYCAMAAADEfo0+AAAAe1BMVEUAAACzs7OoqKisrKyRkZGlpaX9/f22trabm5uNjY2mpqanp6ePj4+1tbWYmJi3t7eWlpajo6OZmZmwsLD5+fnu7u7x8fHi4uLW1tbm5ube3t7T09Pq6ur19fW4uLi7u7u0tLTa2trPz8+/v7/Dw8PLy8vHx8eIiIhERkS4354xAAAAAXRSTlMAQObYZgAAAKdJREFUGNNV0NkagiAUhdHjPAECzWWlWdL7P2Fno/nJumHzXx4iMMI5YeivVVOX592k2vkfy/1CxvjL6L6KJAd9ZF+GVxP144Eh4B170kPHEPAOmtwFEPxw5E6A4AeHKyD4wWEABD84nAHBDw43QPCDwyvA4RPgMAU4vAOO0mLcKFJqzHPDNETisSH4HpntVzbDyazaLZSdj2qqsk6Suqw2d7fO2fnmP7kAJW9a/HbiAAAAAElFTkSuQmCC); - } - main span.button { - border-radius: 3px; - padding: 4px; - font-size: 90%; - } - main div.box :first-child::before { - content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAApUlEQVQ4y82TwQnDMAxFpVJyLPiSbbJETr13Fo+RZZxLRghkgnSEEni9ONS0sg1tDv3wwfjbX7Iki/wVAAd4IPBCiHuudrkHVvJYgb50eaOO7cMkpv0eeQGukYuRiUsNvBFpSvTJ0P2un0Sk+6Le3WEG58yBFrjt61r7Qqbij0gLIX3CaPgOqtqoaiMig6GPtTbOwCVyLraxMEj3yPIgHTLKv3ymJySzt16bW/sWAAAAAElFTkSuQmCC); - } - main div.box :first-child { - font-weight: 700; - } - main footer { - margin-top: 16px; - border-top: 2px solid #2d70aa; - opacity: 0.8; - font-size: 80%; - } - main footer .generated { - opacity: 0.8; - font-size: 90%; - } -</style> -<style> -:root { - color-scheme: light; -} -header { - background: #2980B9; -} -header section h1 { - color: #fcfcfc; -} -header section h2 { - color: #56b5ee; -} -header nav { - background: #343131; -} -header nav ul li:hover { - background: #4e4a4a; -} -header nav ul ul li a { - color: #b3b3b3; -} -header nav li a { - color: #55a5d9; -} -main, main footer { - background: #fbf4ce; -} -main { - color: #404040; -} -main .highlight { - color: blue; -} -main .highlight2 { - color: red; -} -main .highlighted { - background: #ff0; -} -main pre { - border: 1px solid #e1e4e5; - background: #f2ecb7; -} -main a { - color: blue; -} -main a:visited { - color: purple; -} -main 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 { - 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 { - color: #eee; -} -main div.box.hint { - background: #91ffad; -} -main div.box.hint :first-child { - background: #24ae2d; -} -main div.box.info { - background: #71e1fb; -} -main div.box.info :first-child { - background: #217ed0; -} -main div.box.warn { - background: #fdbf91; -} -main div.box.warn :first-child { - background: #df5b5b; -} -main div.box.note { - background: #c4bfb0; -} -main div.box.note :first-child { - background: #5c5353; -} -main footer { - border-top: 2px solid #2d70aa; -} -</style> -<style> -@media (prefers-color-scheme: dark) { - :root { - color-scheme: dark; - } - header { - background: #17679B; - } - header section h1 { - color: #fcfcfc; - } - header section h2 { - color: #56b5ee; - } - header nav { - background: #343131; - } - header nav ul li:hover { - background: #4e4a4a; - } - header nav ul ul li a { - color: #b3b3b3; - } - header nav li a { - color: #55a5d9; - } - main, main footer { - background: #80732d; - } - main { - color: #0f0b37; - } - main .highlight { - color: blue; - } - main .highlight2 { - color: #4f0; - } - main .highlighted { - background: #d0d016; - } - main pre { - border: 1px solid #495457; - background: #999463; - } - main a { - color: blue; - } - main a:visited { - color: purple; - } - main 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 { - 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 { - color: #eee; - } - main div.box.hint { - background: #68bd7e; - } - main div.box.hint :first-child { - background: #13821b; - } - main div.box.info { - background: #58b8ce; - } - main div.box.info :first-child { - background: #086abf; - } - main div.box.warn { - background: #bd7e4f; - } - main div.box.warn :first-child { - background: #973c3c; - } - main div.box.note { - background: #c4c4c4; - } - main div.box.note :first-child { - background: #575656; - } - main footer { - border-top: 2px solid #2d70aa; - } -} -</style> +<link rel="stylesheet" href="struct.css"> +<link rel="stylesheet" href="common.css"> +<link rel="stylesheet" href="light.css"> +<link rel="stylesheet" href="dark.css"> </head> <body> <header> @@ -455,6 +21,8 @@ main footer { </section> <nav> <ul> + <li><a href="base.htm">Foobar Documentation</a></li> + <ul> <li><a href="#welcome_to_foobar">Welcome to Foobar !</a></li> <li><a href="#common_topics">Common Topics</a></li> <ul> @@ -489,6 +57,7 @@ main footer { <li><a href="#mouse_buttons">Mouse buttons</a></li> </ul> <li><a href="#boxes">Boxes</a></li> + </ul> </ul> </nav> </header> diff --git a/dark.css b/dark.css index 0e099fc..b716c35 100644 --- a/dark.css +++ b/dark.css @@ -6,7 +6,7 @@ background: #17679B; } header section h1 { - color: #fcfcfc; + color: #ccc6c6; } header section h2 { color: #56b5ee; @@ -17,12 +17,16 @@ header nav ul li:hover { background: #4e4a4a; } - header nav ul ul li a { + header nav ul li a { color: #b3b3b3; + /*color: #55a5d9;*/ } - header nav li a { + header nav > ul > li > a { /* PAGE */ color: #55a5d9; } + header nav > ul > ul > li > a { /* h1 */ + color: #a3a802; + } main, main footer { background: #80732d; } diff --git a/light.css b/light.css index bdb66d9..02c63f9 100644 --- a/light.css +++ b/light.css @@ -16,12 +16,15 @@ header nav { header nav ul li:hover { background: #4e4a4a; } -header nav ul ul li a { +header nav ul li a { color: #b3b3b3; } -header nav li a { +header nav > ul > li > a { /* PAGE */ color: #55a5d9; } +header nav > ul > ul > li > a { /* h1 */ + color: #a3a802; +} main, main footer { background: #fbf4ce; } diff --git a/struct.css b/struct.css index 6287523..4dfda4d 100644 --- a/struct.css +++ b/struct.css @@ -49,7 +49,7 @@ header nav { } header nav li a { line-height: 1.1em; - font-weight: 600; + font-weight: 400; padding: 4px 6px; white-space: nowrap; } @@ -57,26 +57,31 @@ header nav li a { display: inline-block; width: 100%; } -header nav > ul > li { +header nav > ul > li > a { /* PAGE */ margin-top: 8px; + font-weight: 600; text-transform: uppercase; } -header nav ul ul li a { /* h2 */ - font-weight: 400; +header nav > ul > ul > li > a { /* h1 */ + text-transform: uppercase; + font-weight: 600; margin-left: 12px; } -header nav ul ul ul li a { /* h3 */ +header nav > ul > ul > ul > li > a { /* h2 */ margin-left: 24px; } -header nav ul ul ul ul li a { /* h4 */ +header nav > ul > ul > ul > ul > li > a { /* h3 */ margin-left: 36px; } -header nav ul ul ul ul ul li a { /* h5 */ +header nav > ul > ul > ul > ul > ul > li > a { /* h4 */ margin-left: 48px; } -header nav ul ul ul ul ul ul li a { /* h6 */ +header nav > ul > ul > ul > ul > ul > ul > li > a { /* h5 */ margin-left: 60px; } +header nav > ul > ul > ul > ul > ul > ul > ul > li > a { /* h6 */ + margin-left: 72px; +} main { position: relative; margin-left: 300px;