author | Olivier Brunel
<jjk@jjacky.com> 2022-12-23 11:23:49 UTC |
committer | Olivier Brunel
<jjk@jjacky.com> 2022-12-23 11:30:53 UTC |
parent | 5b2a11fa0cd8d45d48dd428916b1cdf0bfaee9f6 |
base.htm | +135 | -13 |
diff --git a/base.htm b/base.htm index 2d54ae0..3db44ac 100644 --- a/base.htm +++ b/base.htm @@ -33,9 +33,6 @@ 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 { @@ -75,22 +72,99 @@ header nav > ul > li { margin-top: 8px; text-transform: uppercase; } -header nav ul ul li a { +header nav ul ul li a { /* h2 */ font-weight: 400; margin-left: 12px; } -header nav ul ul ul li a { +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; + height: calc(100% - 42px); + min-height: calc(100% - 42px); + 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 .highlight { + color: blue; +} +main .highlight2 { + color: red; +} +main pre { + font-family: Monaco,Consolas,Liberation Mono,Courier,monospace; + white-space: pre; + overflow: auto; +} +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%; } footer { position: fixed; bottom: 4px; - width: 100%; - padding-left: 300px; + left: 300px; + width: calc(100% - 300px); + height: 42px; + padding-top: 8px; text-align: center; } </style> @@ -124,6 +198,19 @@ footer { header nav li a { color: #55a5d9; } + main, footer { + background: #fbf4ce; + } + main { + color: #404040; + font-size: 16px; + } + main pre { + margin: 1px 0 23px; + padding: 12px; + border: 1px solid #e1e4e5; + background: #f2ecb7; + } footer { opacity: 0.4; } @@ -158,6 +245,16 @@ footer { <ul> <li><a href="#input_files">Input Files</a></li> <li><a href="#output">Output</a></li> + <li><a href="#h3">This is level 3</a></li> + <ul> + <li><a href="#h4">This is level 4</a></li> + <ul> + <li><a href="#h5">This is level 5</a></li> + <ul> + <li><a href="#h6">This is level 6</a></li> + </ul> + </ul> + </ul> </ul> <li><a href="#errors">Errors</a></li> </ul> @@ -224,17 +321,42 @@ footer { <main> <section id="welcome_to_foobar"> <h1>Welcome to Foobar !</h1> - <p>This is the documentation for <b>foobar</b>. There will be - much talk about foo, bar, and maybe even baz. + <p>This is the documentation for <strong>foobar</strong>. There will be + <em>much talk</em> about foo, bar, and <u>maybe</u> even baz. </section> <section id="common_topics"> <h1>Common Topics</h1> - <p>Here we discuss some common topics related to <b>foobar</b> - and its use. They vary, but they all matter, so let's dive into - to.</p> + <p>Here we discuss some <span class="highlight">common + topics</span> related to + <strong>foobar</strong> and its use. They vary, but <s>they all + matter</s>, so let's dive into to.</p> <section id="getting_started"> <h2>Getting Started</h2> - <p>Alright let's get started then.</p> + <p>Alright let's <span class="highlight2">get started</span> then.</p> + <p>We can test block stuff :</p> +<pre> +This is a text. +No formatting or anything there. +Now we will have to test some very long line, to see how the overflow is handled and make sure it works as expected. That is, as we expect, i.e. things don't break and a nice little scrollbar is featured. +</pre> + </section> + <section id="titles"> + <h2>This is level 2</h2> + <p>Here is text in the level.</p> + <section id="title3"> + <h3>This is level 3</h3> + <section id="title4"> + <h4>This is level 4</h4> + <section id="title5"> + <h5>This is level 5</h5> + <section id="title6"> + <h6>This is level 6</h6> + <p>We have <sup>superscript</sup> as well as + <sub>subscript</sub> also. + </section> + </section> + </section> + </section> </section> </section> </main>