Updated raw style and meta blog

src/css/minimalist.css

@@ -41,7 +41,60 @@ figure {
 figure {
     margin: 20px 0px;
 }
+li {
+    position: relative;
+    display: block;
+    padding-left: 20px;
+}
+ul > li:before {
+    content: "– ";
+    font-weight: bold;
+    opacity: 0.5;
+    float: left;
+    position: relative;
+    left: -20px;
+    width: 0;
+}
+ol {
+    counter-reset: ol;
+}
+ol > li:before {
+    content: counter(ol) ". ";
+    counter-increment: ol;
+    font-weight: bold;
+    float: left;
+    position: relative;
+    left: -20px;
+    width: 0;
+}
+img {
+    max-width: 100%;
+    max-height: 800px;
+    margin: 20px auto;
+}
+p > img, li > img {
+    max-height: 1em;
+    margin: 0;
+    vertical-align: middle;
+}
+table {
+    width: 100%;
+    margin: 20px 0;
+    border-collapse: collapse;
+    border: solid 1px;
+    display: block;
+    overflow: scroll;
+}
+td, th {
+    height: 20px;
+    padding: 0 10px;
+    text-align: left;
+    vertical-align: middle;
+    border-right: solid 1px;
+    border-left: solid 1px;
+}
 
+/* Markdown tricks */
 h1 {
     font-size: 1em;
 }
@@ -126,58 +179,6 @@ blockquote:after {
     top: 0;
     left: 0;
 }
-li {
-    position: relative;
-    display: block;
-    padding-left: 20px;
-}
-ul > li:before {
-    content: "– ";
-    font-weight: bold;
-    opacity: 0.5;
-    float: left;
-    position: relative;
-    left: -20px;
-    width: 0;
-}
-ol {
-    counter-reset: ol;
-}
-ol > li:before {
-    content: counter(ol) ". ";
-    counter-increment: ol;
-    font-weight: bold;
-    float: left;
-    position: relative;
-    left: -20px;
-    width: 0;
-}
-img {
-    max-width: 100%;
-    max-height: 800px;
-    margin: 20px auto;
-}
-p > img, li > img {
-    max-height: 1em;
-    margin: 0;
-    vertical-align: middle;
-}
-table {
-    width: 100%;
-    margin: 20px 0;
-    border-collapse: collapse;
-    border: solid 1px;
-    display: block;
-    overflow: scroll;
-}
-td, th {
-    height: 20px;
-    padding: 0 10px;
-    text-align: left;
-    vertical-align: middle;
-    border-right: solid 1px;
-    border-left: solid 1px;
-}
 navigation {
     font-weight: bold;
     display: block;
@@ -246,6 +247,9 @@ navigation > a {
     display: inline-block;
     width: 1em;
 }
+.underline {
+    text-decoration: underline;
+}
 
 /* colors theme */
 :root {
@@ -309,6 +313,7 @@ navigation > a {
 
 body > input { display:none; }
 
+/* Light theme checked */
 input#light:checked ~ .main {
     --main-background: #fefaf0; /* 0.5 lighter than #fdf6e3 */
     --main-foreground: var(--base01);
@@ -323,6 +328,7 @@ input#light:checked ~ #labels {
     color: var(--base00);
 }
 
+/* Dark theme checked */
 input#dark:checked ~ .main {
     --main-background: var(--base03); /* 0.5 darker than #002b36; */
     --main-foreground: var(--base1);
@@ -337,6 +343,7 @@ input#dark:checked ~ #labels {
     color: var(--base0);
 }
 
+/* Light raw theme checked */
 input#raw:checked ~ .main {
     --main-background: #fff;
     --main-foreground: #000;
@@ -358,7 +365,12 @@ input#raw:checked ~ #labels {
     background: #fff;
     color: #000;
 }
-
+input#raw:checked ~ .main code,
+input#raw:checked ~ .main pre
+{
+    font-family: monospace;
+}
+/* Light modern theme checked */
 input#modern:checked ~ .main {
     --main-background: #fff;
     --main-foreground: #444;
@@ -434,6 +446,7 @@ input#modern:checked ~ #labels .content {
     margin: 0 auto;
 }
 
+/* Dark raw theme checked */
 input#darkraw:checked ~ .main {
     --main-background: #000;
     --main-foreground: #fff;
@@ -455,8 +468,12 @@ input#darkraw:checked ~ #labels {
     background: #000;
     color: #fff;
 }
-
-
+input#darkraw:checked ~ .main code,
+input#darkraw:checked ~ .main pre
+{
+    font-family: monospace;
+}
+/* Default color theme */
 body,.main {
     background: var(--main-background);
     color: var(--main-foreground);
@@ -540,9 +557,6 @@ blockquote:after, .main blockquote:after {
 }
 /* -------- */
 /* org colors */
-.underline {
-    text-decoration: underline;
-}
 .todo, .done, .main .todo, .main .done {
     background-color: var(--reveal-background);
     border: solid 1px;

src/posts/new-blog.org

@@ -107,11 +107,31 @@ So, no video, no animated gif, no image if possible or very sparse one.
 :PROPERTIES:
 :CUSTOM_ID: css
 :END:
-My CSS should be nerdy, so all title font-size should be equal to the body
-font size.
-Also, I wanted to simulate markdown notation, so my HTML will look like a
-text file.
-There are a few tricks about that.
+Regarding CSS, I always found that the default text display by navigator is
+terrible.
+So just to "fix" a minimal CSS to have something bearable it takes me about
+120 lines of CSS.
+
+By fixing I mean things like using a fixed line width for text (there is an
+optimal range to improve legibility).
+Also having correct list indentation, line-height and font-size.
+Table displaying correctly.
+
+Then I have about 90 lines of CSS to make my HTML look like text source of
+a markdown.
+
+Then I set a few CSS rules to handle the ids and classes added by
+org-export as instead of using the ubiquitous Markdown, I prefer greatly to
+use org mode files.
+I need 60 lines of CSS for them.
+
+In order to handle color themes (5 at the time of writing those lines) I
+use almost 350 line to handle those.
+
+*** CSS Theme selection
+:PROPERTIES:
+:CUSTOM_ID: css-theme-selection
+:END:
 
 One of think that wasn't straightforward while writing the CSS was about
 providing a user controlled theme.
@@ -122,10 +142,60 @@ modern standards because it is CSS only.
 The trick is to provide one checkbox per theme at the beginning of the body
 of the HTML.
 Then hide those checkbox and have label for each check box.
+
+#+begin_src html
+    ...
+  <body>
+     <input type="radio" id="light" name="theme"/>
+     <input type="radio" id="dark" name="theme"/>
+     <div id="labels">
+       Change theme:
+       <label for="light">Light</label>
+       <label for="dark">Dark</label>
+     </div>
+     <div class="main">
+     ALL YOUR CONTENT HERE
+     </div>
+   </body>
+#+end_src
+
+
 Then use the /sibling/ CSS selector =~=.
 Then put all your content in a div of class =.main= for example.
 Finally in the CSS you can write things like:
 
 #+begin_src css
-input#themeid:checked ~ .main { // style when foo is checked }
+ /* hide all radio button that are not inside another div of body */
+  body > input {
+    display: none;
+  }
+  :root {
+    --light-color: #fff;
+    --dark-color: #000;
+  }
+  input#light:checked ~ .main {
+    background-color: var(--light-color);
+    color: var(--dark-color);
+  }
+  input#dark:checked ~ .main {
+    background-color: var(--dark-color);
+    color: var(--light-color);
+  }
 #+end_src
+
+Regarding selecting the user preferred theme, there are plenty of tutorial
+on the internet, you could also simply steal my CSS.
+
+** Blog Engine - org-mode with org-publish
+:PROPERTIES:
+:CUSTOM_ID: blog-engine---org-mode-with-org-publish
+:END:
+So publishing a website is something that could go from.
+Write your own HTML each time.
+But this is quite tedious, so we generally all use a website generator.
+The next thing with the minimal possible amount of work is using org-mode
+with org-publish.
+Because a website is mostly, export all of file in org-mode format (easier
+to write and manipulate than raw HTML) to HTML.
+
+In fact, there are numerous details that make this task not this straightforward.