Threaded Mode | Linear Mode

chromos · (This post was last modified: 09-25-2018 03:52 PM by chromos.)

Some simple and quick ideas in css style (you can see it here: http://chromos.cz/_exported/hp_prime/myHtmlPage.html)

PHP Code:

body {
  font-family: Verdana, Geneva, sans-serif;
  margin: 1em;
}

.example {
    font-family: "Prime Sans Mono", "Prime Sans", monospace;
    background-color: tomato;
    color: white;
    padding: 10px;
    margin: 1em 0;
}
.syntax {
    font-family: "Prime Sans Mono", "Prime Sans", monospace;
    background-color: LightSkyBlue;
    color: black;
  padding: 10px;
}

.seealso {
    font-variant: small-caps;
    background-color: LightSalmon;
    font-weight: bold;
    padding: 10px;
    border: 4px solid #cf704a;
}

ol {
    background: #ff9999;
    padding: 20px;
}

ul {
    /*background: #3399ff;*/
    padding: 5px;
    list-style-type: square;
    /*list-style-position: inside;*/
}

ol li {
    background: #ffe5e5;
    padding: 10px;
    margin-left: 35px;
}

ul li {
    background: #cce5ff;
    margin: 5px;
    padding: 10px;
}

.level1 {
  margin-left:0;
}

.level2, .level3, .level4, .level5, .level6 {
  margin-left:1em;
}

/*
.level3 {
  margin-left:2em;
}
.level4 {
  margin-left:3em;
}
.level5 {
  margin-left:4em;
}
.level6 {
  margin-left:5em;
}
*/

body {counter-reset: h1}
h1 {counter-reset: h2; margin-top: 2em}
h2 {counter-reset: h3; margin-top: 2em}
h3 {counter-reset: h4; margin-top: 2em}
h4 {counter-reset: h5; margin-top: 2em}
h5 {counter-reset: h6}

h1::before {counter-increment: h1; content: counter(h1) ". "}
h2::before {counter-increment: h2; content: counter(h1) "." counter(h2) ". "}
h3::before {counter-increment: h3; content: counter(h1) "." counter(h2) "." counter(h3) ". "}
/*
h4::before {counter-increment: h4; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". "}
h5::before {counter-increment: h5; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "}
h6:before {counter-increment: h6; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "}
*/

h1.nocount::before, h2.nocount::before, h3.nocount::before, h4.nocount::before, h5.nocount::before, h6.nocount::before {content: ""; counter-increment: none}
  
.seealso p::before {
    content: "? ";
} 

Notes:
1) In html file, there should be <head> before <meta>.
2) There is many duplicated 'id's in html file, see w3.org validator.