Updated raw style and meta blog
This commit is contained in:
parent
754adf0b43
commit
0061126c6d
2 changed files with 148 additions and 64 deletions
|
@ -41,7 +41,60 @@ figure {
|
||||||
figure {
|
figure {
|
||||||
margin: 20px 0px;
|
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 {
|
h1 {
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
}
|
}
|
||||||
|
@ -126,58 +179,6 @@ blockquote:after {
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 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 {
|
navigation {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
display: block;
|
display: block;
|
||||||
|
@ -246,6 +247,9 @@ navigation > a {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1em;
|
width: 1em;
|
||||||
}
|
}
|
||||||
|
.underline {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
/* colors theme */
|
/* colors theme */
|
||||||
:root {
|
:root {
|
||||||
|
@ -309,6 +313,7 @@ navigation > a {
|
||||||
|
|
||||||
body > input { display:none; }
|
body > input { display:none; }
|
||||||
|
|
||||||
|
/* Light theme checked */
|
||||||
input#light:checked ~ .main {
|
input#light:checked ~ .main {
|
||||||
--main-background: #fefaf0; /* 0.5 lighter than #fdf6e3 */
|
--main-background: #fefaf0; /* 0.5 lighter than #fdf6e3 */
|
||||||
--main-foreground: var(--base01);
|
--main-foreground: var(--base01);
|
||||||
|
@ -323,6 +328,7 @@ input#light:checked ~ #labels {
|
||||||
color: var(--base00);
|
color: var(--base00);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Dark theme checked */
|
||||||
input#dark:checked ~ .main {
|
input#dark:checked ~ .main {
|
||||||
--main-background: var(--base03); /* 0.5 darker than #002b36; */
|
--main-background: var(--base03); /* 0.5 darker than #002b36; */
|
||||||
--main-foreground: var(--base1);
|
--main-foreground: var(--base1);
|
||||||
|
@ -337,6 +343,7 @@ input#dark:checked ~ #labels {
|
||||||
color: var(--base0);
|
color: var(--base0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Light raw theme checked */
|
||||||
input#raw:checked ~ .main {
|
input#raw:checked ~ .main {
|
||||||
--main-background: #fff;
|
--main-background: #fff;
|
||||||
--main-foreground: #000;
|
--main-foreground: #000;
|
||||||
|
@ -358,7 +365,12 @@ input#raw:checked ~ #labels {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
color: #000;
|
color: #000;
|
||||||
}
|
}
|
||||||
|
input#raw:checked ~ .main code,
|
||||||
|
input#raw:checked ~ .main pre
|
||||||
|
{
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
/* Light modern theme checked */
|
||||||
input#modern:checked ~ .main {
|
input#modern:checked ~ .main {
|
||||||
--main-background: #fff;
|
--main-background: #fff;
|
||||||
--main-foreground: #444;
|
--main-foreground: #444;
|
||||||
|
@ -434,6 +446,7 @@ input#modern:checked ~ #labels .content {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Dark raw theme checked */
|
||||||
input#darkraw:checked ~ .main {
|
input#darkraw:checked ~ .main {
|
||||||
--main-background: #000;
|
--main-background: #000;
|
||||||
--main-foreground: #fff;
|
--main-foreground: #fff;
|
||||||
|
@ -455,8 +468,12 @@ input#darkraw:checked ~ #labels {
|
||||||
background: #000;
|
background: #000;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
input#darkraw:checked ~ .main code,
|
||||||
|
input#darkraw:checked ~ .main pre
|
||||||
|
{
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
/* Default color theme */
|
||||||
body,.main {
|
body,.main {
|
||||||
background: var(--main-background);
|
background: var(--main-background);
|
||||||
color: var(--main-foreground);
|
color: var(--main-foreground);
|
||||||
|
@ -540,9 +557,6 @@ blockquote:after, .main blockquote:after {
|
||||||
}
|
}
|
||||||
/* -------- */
|
/* -------- */
|
||||||
/* org colors */
|
/* org colors */
|
||||||
.underline {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
.todo, .done, .main .todo, .main .done {
|
.todo, .done, .main .todo, .main .done {
|
||||||
background-color: var(--reveal-background);
|
background-color: var(--reveal-background);
|
||||||
border: solid 1px;
|
border: solid 1px;
|
||||||
|
|
|
@ -107,11 +107,31 @@ So, no video, no animated gif, no image if possible or very sparse one.
|
||||||
:PROPERTIES:
|
:PROPERTIES:
|
||||||
:CUSTOM_ID: css
|
:CUSTOM_ID: css
|
||||||
:END:
|
:END:
|
||||||
My CSS should be nerdy, so all title font-size should be equal to the body
|
Regarding CSS, I always found that the default text display by navigator is
|
||||||
font size.
|
terrible.
|
||||||
Also, I wanted to simulate markdown notation, so my HTML will look like a
|
So just to "fix" a minimal CSS to have something bearable it takes me about
|
||||||
text file.
|
120 lines of CSS.
|
||||||
There are a few tricks about that.
|
|
||||||
|
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
|
One of think that wasn't straightforward while writing the CSS was about
|
||||||
providing a user controlled theme.
|
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
|
The trick is to provide one checkbox per theme at the beginning of the body
|
||||||
of the HTML.
|
of the HTML.
|
||||||
Then hide those checkbox and have label for each check box.
|
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 use the /sibling/ CSS selector =~=.
|
||||||
Then put all your content in a div of class =.main= for example.
|
Then put all your content in a div of class =.main= for example.
|
||||||
Finally in the CSS you can write things like:
|
Finally in the CSS you can write things like:
|
||||||
|
|
||||||
#+begin_src css
|
#+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
|
#+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.
|
||||||
|
|
Loading…
Reference in a new issue