Added modern style

This commit is contained in:
Yann Esposito (Yogsototh) 2019-08-16 16:42:56 +02:00
parent 44760e03e7
commit 754adf0b43
Signed by untrusted user who does not match committer: yogsototh
GPG Key ID: 7B19A4C650D59646
6 changed files with 214 additions and 7 deletions

Binary file not shown.

View File

@ -1,3 +1,3 @@
#!/usr/bin/env bash
emacs --load .project.el.gpg --eval '(progn (org-publish "blog" t) (evil-quit))'
emacs --load .project.el.gpg --eval '(progn (delete-directory org-publish-timestamp-directory t) (org-publish "blog" t) (evil-quit))'

View File

@ -351,7 +351,7 @@ input#raw:checked ~ .main {
--color-h4: #000;
--color-h5: #000;
--color-h6: #000;
--color-link: #33d;
--color-link: var(--magenta);
font-family: monospace;
}
input#raw:checked ~ #labels {
@ -359,6 +359,81 @@ input#raw:checked ~ #labels {
color: #000;
}
input#modern:checked ~ .main {
--main-background: #fff;
--main-foreground: #444;
--second-foreground: #666;
--reveal-background: #eee;
--soft-foreground: #888;
--border-color: #ddd;
--todo-txt: #000;
--color-link: var(--magenta);
font-family: "Helvetica Neue", sans-serif;
font-weight: 300;
font-size: 16px;
line-height: 24px;
}
input#modern:checked ~ .main .content,
input#modern:checked ~ .main #content {
margin: 0 auto;
}
input#modern:checked ~ .main h1,
input#modern:checked ~ .main h2 {
font-family: "Hoefler Text", Georgia, serif;
font-style: italic;
font-size: 2em;
margin: 1em 0;
}
input#modern:checked ~ .main h3,
input#modern:checked ~ .main h4,
input#modern:checked ~ .main h5,
input#modern:checked ~ .main h6 {
font-weight: 200;
font-size: 1.5em;
margin: 1em 0;
}
input#modern:checked ~ .main #preamble h1 {
font-size: 4em;
}
input#modern:checked ~ .main h1::before,
input#modern:checked ~ .main h2::before,
input#modern:checked ~ .main h3::before,
input#modern:checked ~ .main h4::before,
input#modern:checked ~ .main h5::before,
input#modern:checked ~ .main h6::before {
content: "";
}
input#modern:checked ~ .main pre {
font-size: 14px;
line-height; 21px;
border-left: solid 4px var(--soft-foreground);
padding-left: 1em;
}
input#modern:checked ~ .main pre::before,
input#modern:checked ~ .main pre::after {
content: "";
}
input#modern:checked ~ .main #preamble,
input#modern:checked ~ .main #postamble {
background-color: var(--cyan);
padding: 2em 0;
}
input#modern:checked ~ .main #postamble code {
background-color: transparent;
}
input#modern:checked ~ .main #preamble *,
input#modern:checked ~ .main #postamble * {
color: #fff;
}
input#modern:checked ~ #labels {
background: var(--cyan);
color: #fff;
}
input#modern:checked ~ #labels .content {
margin: 0 auto;
}
input#darkraw:checked ~ .main {
--main-background: #000;
--main-foreground: #fff;
@ -373,7 +448,7 @@ input#darkraw:checked ~ .main {
--color-h4: #fff;
--color-h5: #fff;
--color-h6: #fff;
--color-link: #dd3;
--color-link: var(--yellow);
font-family: monospace;
}
input#darkraw:checked ~ #labels {

View File

@ -23,10 +23,11 @@ priority:
with disabilities could easily consume it
4. *nerdy*; should feel mostly like markdown text in a terminal and source code
should be syntax higlighted.
5. *org-mode friendly*; I should write my post in [[https://orgmode.org][org mode]]
6. *user friendly*; support your preferred light/dark theme by default but you
5. *user friendly*; support your preferred light/dark theme by default but you
can change it if you want.
7. *rss*; you should be able to get informed when I add a new blog post.
8. *frugal*; try to minize the resources needed to visit my website; no
6. *rss*; you should be able to get informed when I add a new blog post.
7. *frugal*; try to minize the resources needed to visit my website; no
javascript, no webfont, not too much CSS magic, not much images or really
compressed one.
I talk about more details [[file:./posts/new-blog.org][here]].

131
src/posts/new-blog.org Normal file
View File

@ -0,0 +1,131 @@
#+TITLE: New Blog
#+SUBTITLE: Peaceful and respectful design
#+AUTHOR: Yann Esposito
#+EMAIL: yann@esposito.host
#+DATE: [2019-07-28]
#+KEYWORDS: programming, blog, org-mode, web, css
#+OPTIONS: auto-id:t
* Peaceful and Respectful Website
:PROPERTIES:
:CUSTOM_ID: peaceful-and-respectful-website
:END:
There is a trend about website being quite less accessible, using more and
more resources, adding trackers, popups, videos, animations, big js
frameworks, etc...
I wanted a more peaceful and respectful website.
That website was created with the following constraints in mind by order of
priority:
1. *Respect Privacy*; no tracker of any sort (no ads, no google analytics, no
referrer for all external links, etc...)
2. *javascript free*; no js at all, yes even the theme changer
3. *Accessible*; should be easy to read on a text browser so people with
disabilities could easily consume it
4. *nerdy*; should feel mostly like markdown text in a terminal and source
code should be syntax highlighted.
5. *theme switchable*; support your preferred light/dark theme by default
but you can change it if you want.
6. *rss*; you should be able to get informed when I add a new blog post.
7. *frugal*; try to minimize the resources needed to visit my website; no
javascript, no web-font, not too much CSS magic, not much images or really
compressed one.
Some of the constraints are straightforward to get, some other not.
** Respect Privacy
:PROPERTIES:
:CUSTOM_ID: respect-privacy
:END:
The one should be easy, simply not put any 3rd party inclusion in my website.
So, no external CSS in my headers, no link to any image I do not host myself.
No 3rd party javascript.
** Javascript Free
:PROPERTIES:
:CUSTOM_ID: javascript-free
:END:
I do not really see why a content oriented website should need to execute javascript.
** Accessible
:PROPERTIES:
:CUSTOM_ID: disability-friendly
:END:
A good way to check that a website is friendly to disabled people is by
looking at it with a text browser.
If you open most website today you see that at the top of the page is
crippled with a numerous number of links/metas info used for javascript
tricks, login/logout buttons, etc...
The website should only contain, a pretty minimal menu to navigate, and the
content.
** Nerdy
:PROPERTIES:
:CUSTOM_ID: nerdy
:END:
The feel of the website should be nerdy, it should look like reading a
terminal or emacs.
It should almost feel the same as if you were using a text-browser.
For sensible people, I added a "modern" theme that should better suit
modern eye, still the first design should always be the terminal looking
one.
** Theme switchable
:PROPERTIES:
:CUSTOM_ID: theme-switchable
:END:
Even if you are not used to disability friendly browser.
The website should try to guess your preferred way to consume my website.
Recently we dark/light themes were integrated as a new CSS feature.
This website should propose your apparently preferred theme.
But you could also change it manually.
** RSS
:PROPERTIES:
:CUSTOM_ID: rss
:END:
This is another layer that help you consume my website as you prefer.
You should at least be informed a new article has been published.
** Frugal
:PROPERTIES:
:CUSTOM_ID: frugal
:END:
This one is a bit tricky.
It would mean, that visiting my website should not consume much resources.
Mainly, this would prevent using heavy medias as much as possible.
So, no video, no animated gif, no image if possible or very sparse one.
* How
:PROPERTIES:
:CUSTOM_ID: how
:END:
** CSS
: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.
One of think that wasn't straightforward while writing the CSS was about
providing a user controlled theme.
So click and change theme and without any javascript involved.
That theme changer is really the limit up to which I agree to concede to
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.
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 }
#+end_src