| author | Olivier Brunel
<jjk@jjacky.com> 2022-12-23 09:59:33 UTC |
| committer | Olivier Brunel
<jjk@jjacky.com> 2022-12-23 09:59:33 UTC |
| parent | b0777af186b26f47864fa173e4a1c0d3d8479ee5 |
| base.htm | +159 | -19 |
diff --git a/base.htm b/base.htm index 9ee4b2f..d86eac8 100644 --- a/base.htm +++ b/base.htm @@ -21,16 +21,101 @@ time, mark, audio, video { 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%; + box-sizing: padding-box; + -moz-box-sizing: padding-box; + -webkit-box-sizing: padding-box; + 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 { + font-weight: 400; + margin-left: 12px; +} +header nav ul ul ul li a { + margin-left: 24px; +} +main, footer { + margin-left: 300px; +} </style> <style> @media (prefers-color-scheme: light) { :root { color-scheme: light; } + body { + font-family: Lato,Helvetica,Neue,Arial,Deja Vu,sans-serif; + font-size: 14px; + } + 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; + } } </style> <style> @@ -43,29 +128,84 @@ time, mark, audio, video { </head> <body> <header> - <h1>Foobar Documentation</h1> - </header> - <nav> - <ul> - <li><a href="#welcome_to_foobar">Welcome to Foobar !</a></li> - <li><a href="#common_topics">Common Topics</a></li> + <section> + <h1>Foobar Documentation</h1> + <h2>1.0.0</h2> + </section> + <nav> <ul> - <li><a href="#getting_started">Getting Started</a></li> - <li><a href="#download">Download</a></li> - <li><a href="#usage">Usage</a></li> + <li><a href="#welcome_to_foobar">Welcome to Foobar !</a></li> + <li><a href="#common_topics">Common Topics</a></li> <ul> - <li><a href="#input_files">Input Files</a></li> - <li><a href="#output">Output</a></li> + <li><a href="#getting_started">Getting Started</a></li> + <li><a href="#download">Download</a></li> + <li><a href="#usage">Usage</a></li> + <ul> + <li><a href="#input_files">Input Files</a></li> + <li><a href="#output">Output</a></li> + </ul> + <li><a href="#errors">Errors</a></li> </ul> - <li><a href="#errors">Errors</a></li> - </ul> - <li><a href="#creating_documents">Creating Documents</a></li> - <ul> - <li><a href="#metainfo">Meta Info</a></li> - <li><a href="#table_of_contents">Table of Contents</a></li> + <li><a href="#creating_documents">Creating Documents</a></li> + <ul> + <li><a href="#metainfo">Meta Info</a></li> + <li><a href="#table_of_contents">Table of Contents</a></li> + </ul> + <li><a href="#welcome_to_foobar">Welcome to Foobar !</a></li> + <li><a href="#common_topics">Common Topics</a></li> + <ul> + <li><a href="#getting_started">Getting Started</a></li> + <li><a href="#download">Download</a></li> + <li><a href="#usage">Usage</a></li> + <ul> + <li><a href="#input_files">Input Files</a></li> + <li><a href="#output">Output</a></li> + </ul> + <li><a href="#errors">Errors</a></li> + </ul> + <li><a href="#creating_documents">Creating Documents</a></li> + <ul> + <li><a href="#metainfo">Meta Info</a></li> + <li><a href="#table_of_contents">Table of Contents</a></li> + </ul> + <li><a href="#welcome_to_foobar">Welcome to Foobar !</a></li> + <li><a href="#common_topics">Common Topics</a></li> + <ul> + <li><a href="#getting_started">Getting Started</a></li> + <li><a href="#download">Download</a></li> + <li><a href="#usage">Usage</a></li> + <ul> + <li><a href="#input_files">Input Files</a></li> + <li><a href="#output">Output</a></li> + </ul> + <li><a href="#errors">Errors</a></li> + </ul> + <li><a href="#creating_documents">Creating Documents</a></li> + <ul> + <li><a href="#metainfo">Meta Info</a></li> + <li><a href="#table_of_contents">Table of Contents</a></li> + </ul> + <li><a href="#welcome_to_foobar">Welcome to Foobar !</a></li> + <li><a href="#common_topics">Common Topics</a></li> + <ul> + <li><a href="#getting_started">Getting Started</a></li> + <li><a href="#download">Download</a></li> + <li><a href="#usage">Usage</a></li> + <ul> + <li><a href="#input_files">Input Files</a></li> + <li><a href="#output">Output</a></li> + </ul> + <li><a href="#errors">Errors</a></li> + </ul> + <li><a href="#creating_documents">Creating Documents</a></li> + <ul> + <li><a href="#metainfo">Meta Info</a></li> + <li><a href="#table_of_contents">Table of Contents</a></li> + </ul> + <li><a href="#creating_documents">This Is The End</a></li> </ul> - </ul> - </nav> + </nav> + </header> <main> <section id="welcome_to_foobar"> <h1>Welcome to Foobar !</h1>