author | Olivier Brunel
<jjk@jjacky.com> 2022-12-23 14:25:08 UTC |
committer | Olivier Brunel
<jjk@jjacky.com> 2022-12-23 14:25:08 UTC |
parent | 45f9609be25650cbc32b6f80f77ad9e9befcbda3 |
base.htm | +87 | -5 |
diff --git a/base.htm b/base.htm index a310eb4..4a1ed55 100644 --- a/base.htm +++ b/base.htm @@ -116,13 +116,34 @@ main .highlight { main .highlight2 { color: red; } +main .highlighted { + background: #ff0; +} main pre, main tt { font-family: Monaco,Consolas,Liberation Mono,Courier,monospace; white-space: pre; } main pre { + line-height: 16px; overflow: auto; } +main pre.lineno { + line-height: 16px; + display: block; + padding: 0 4px; + margin-top: 12px; + opacity: 0.4; + text-align: right; + float: left; + white-space: pre; +} +main pre.code { + line-height: 16px; + 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; @@ -162,6 +183,9 @@ main h6 { main blockquote { margin: 4px 23px 23px 42px; } +main ul, main ol { + padding-left: 42px; +} main footer { padding-top: 8px; text-align: center; @@ -350,11 +374,11 @@ main footer { <h2>Getting Started</h2> <p>Alright let's <span class="highlight2">get started</span> then.</p> <p>We can test block stuff :</p> - <pre> +<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> +</pre> </section> <section id="titles"> <h2>This is level 2</h2> @@ -375,15 +399,73 @@ Now we will have to test some very long line, to see how the overflow is handled </section> </section> </section> - <section id="foo"> - <h1>Foo</h1> + <section id="citations_needed"> + <h1>Citations Needed</h1> <p>Here's some <tt>typetext stuff</tt> after which will follow no less than a quote : <blockquote cite="https://source.lnk"><p>Here it is. I'm a quote.<br>No really, I was said by someone, once.<br>I swear.</p> <cite>Someone. Once.</cite></blockquote> - Of course <q>everything has been said before</a> so, there. + Of course <q>everything has been said before</q> so, there. + <section id="lists"> + <h2>Lists...</h2> + <p>It is now time, to make it a list. Or two. Maybe + more.</p> + <p>First we'll have unordered ones :</p><ul> + <li>Item 1</li> + <li>Item 2<ul> + <li>Item 1b</li> + <li>Item 1b</li> + <li>Item 1c</li> + </ul></li> + <li>Item 3</li> + <li>Item 4</li> + </ul><p>And then ordered ones :<ol> + <li>First one<ol> + <li>One bis</li> + <li>One ter</li> + </ol></li> + <li>Second one</li> + <li>Third one</li> + </ol></p> + </section> + </section> + <section id="highlights"> + <h1>Highlights</h1> + <p>It might happen that you'd want to <strong> + <span class="highlight">highlight something</span></strong>. + Right, but <span class="highlight2">more</span> than that, or + more <em>literally</em> than that.</p> + <p>Anyays, here is the <span class="highlighted"><em>real</em> + highlighted effect</span>. And let's make it work in + <tt>pre</tt>/<tt>code</tt> blocks too (unlike the others) : +<pre> +This is a line. +It continues here, +but <span class="highlighted">watch out</span> for +the highlight. +Which, also, can <span class="highlighted">spawn +multiple lines</span>. Yep. +</pre></p> + <section id="code blocks"> + <h2>Code Blocks</h2> + <p>Oh yeah, we might wanna have "code blocks". Those would + be like <tt>pre</tt> one, only a bit more styled : +<pre class="lineno">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10</pre> +<pre class="code">#include <stdlib.h> +int main(int argc, char **argv) +{ + int nb = 8; + + for(int i = nb; i > 0; --i) + printf("%d... ", i); + + printf("Hello <span class="highlighted">World</span>!\n"); +}</pre></p> + <p>Looking good? And yes, the <tt>highlighted</tt> effect + works in there too.</p> + </section> </section> <footer> Copyright © 2022 Author Name - All Rights Reserved