Added modern style
This commit is contained in:
parent
44760e03e7
commit
754adf0b43
BIN
.project.el.gpg
BIN
.project.el.gpg
Binary file not shown.
2
build.sh
2
build.sh
|
@ -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))'
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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
131
src/posts/new-blog.org
Normal 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
|
Loading…
Reference in a new issue