Fixed solaryzed article, minor css change

This commit is contained in:
Yann Esposito (Yogsototh) 2020-05-02 19:31:18 +02:00
parent 67ee9e162e
commit fabd670b4c
Signed by untrusted user who does not match committer: yogsototh
GPG key ID: 7B19A4C650D59646
3 changed files with 49 additions and 46 deletions

View file

@ -17,7 +17,7 @@ code {
} }
pre { pre {
line-height: 1em; line-height: 1em;
font-size: 14px; font-size: 13px;
} }
blockquote pre { blockquote pre {
line-height: var(--lh); line-height: var(--lh);

View file

@ -64,33 +64,30 @@ There should be a forced newline.
:CUSTOM_ID: width :CUSTOM_ID: width
:END: :END:
Testing the width: I use a max width of 76 Testing the width: I use a max width of 71
#+begin_src ascii #+begin_src ascii
--------10--------20--------30--------40--------50--------60--------70----- --------10--------20--------30--------40--------50--------60--------70--
#+end_src 123456789-123456789-123456789-123456789-123456789-123456789-123456789-1
123456789-123456789-123456789-123456789-123456789-123456789-123456789-12
123456789-123456789-123456789-123456789-123456789-123456789-123456789-123
123456789-123456789-123456789-123456789-123456789-123456789-123456789-1234
123456789-123456789-123456789-123456789-123456789-123456789-123456789-12345 123456789-123456789-123456789-123456789-123456789-123456789-123456789-12345
123456789-123456789-123456789-123456789-123456789-123456789-123456789-123456 123456789-123456789-123456789-123456789-123456789-123456789-123456789-123456
123456789-123456789-123456789-123456789-123456789-123456789-123456789-1234567 123456789-123456789-123456789-123456789-123456789-123456789-123456789-1234567
123456789-123456789-123456789-123456789-123456789-123456789-123456789-12345678 123456789-123456789-123456789-123456789-123456789-123456789-123456789-12345678
123456789-123456789-123456789-123456789-123456789-123456789-123456789-123456789 123456789-123456789-123456789-123456789-123456789-123456789-123456789-123456789
123456789-123456789-123456789-123456789-123456789-123456789-123456789-123456789- 123456789-123456789-123456789-123456789-123456789-123456789-123456789-123456789-
123456789-123456789-123456789-123456789-123456789-123456789-123456789-123456789-1 a b c d e f g h i j k l m n o p q r s t u v w x y z A B C D E F G H I J
K L M N O P Q R S T U V W X Y Z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j
k l m n o p q r s t u v w x y z
#+end_src
a b c d e f g h i j k l m n o p q r s t u v w x y z A B C D E F G H I J K L a b c d e f g h i j k l m n o p q r s t u v w x y z A B C D E F G H I J
M N O P Q R S T U V W X Y Z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n K L M N O P Q R S T U V W X Y Z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j
o p q r s t u v w x y z k l m n o p q r s t u v w x y z
a0 b c d e f g h i j k l m n o p q r s t u v w x y z A B C D E F G H I J K
L M N O P Q R S T U V W X Y Z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m
n o p q r s t u v w x y z
* Math * Math
:PROPERTIES: :PROPERTIES:

View file

@ -8,22 +8,15 @@
#+OPTIONS: auto-id:t toc:t #+OPTIONS: auto-id:t toc:t
#+STARTUP: overview #+STARTUP: overview
The colorscheme of my website is the colorscheme I use for my terminal and After many years using [[https://ethanschoonover.com/solarized/][Solarized]] I changed to a new one.
most of my environment. I use it for my terminal, emacs and most of my tools.
This is inspired by both [[https://ethanschoonover.com/solarized/][Solarized]] and [[https://nordtheme.com][Nord]]. This is inspired by both [[https://ethanschoonover.com/solarized/][Solarized]] and [[https://nordtheme.com][Nord]].
I switched because I wanted a greyer theme.
So I used [[https://ethanschoonover.com/solarized/][Solarized]] for many years.
And it was really difficult finding a new one that suits my taste.
Stil I disliked the blue-green dark background.
I wanted to change that background color.
Or having a grayer background.
Ethan Shoovnover the creator of Solarized gave plenty of information about Ethan Shoovnover the creator of Solarized gave plenty of information about
how he created it. the creation of his colorscheme.
And I stumbled upon the [[https://nordtheme.com][Nord]] theme.
Also I stumbled upon the [[https://nordtheme.com][Nord]] theme.
And I really liked it. And I really liked it.
But while the colors are great, it is not as easy to switch from light to But while the colors are great, it is not as easy to switch from light to
dark theme than with solarized because Solarized has a lot of nice dark theme than with solarized because Solarized has a lot of nice
@ -42,25 +35,38 @@ slightly bigger contrast for text.
Here is the CSS you could use: Here is the CSS you could use:
#+begin_export html #+begin_export html
<style>#colors div { display: inline-block; }</style> <style>#colors div {
display: inline-block;
height: 60.0px;
width: 60.0px;
margin: 2px 0;
font-weight: bold;
line-height: 60.0px;
text-align: center; }
#colors { padding: 20px; margin: 10px 0; }
</style>
<div id="colors"> <div id="colors">
<div style="background: hsl(218.82, 20.99%, 15.88%); height: 60.0px; width: 60.0px; line-height: 60.0px; text-align: center" id="b03">b03</div> #+end_export
<div style="background: hsl(222.35, 16.5%, 20.2%); height: 60.0px; width: 60.0px; line-height: 60.0px; text-align: center" id="b02">b02</div> #+MACRO: colorbox @@html:<div style="background: $3; color:$2" id="$1">$1</div>@@
<div style="background: hsl(222.35, 8.72%, 38.24%); height: 60.0px; width: 60.0px; line-height: 60.0px; text-align: center" id="b01">b01</div> {{{colorbox(b03,white,#202631)}}}
<div style="background: hsl(221.25, 6.56%, 47.84%); height: 60.0px; width: 60.0px; line-height: 60.0px; text-align: center" id="b00">b00</div> {{{colorbox(b02,white,#2b303c)}}}
<div style="background: hsl(220.0, 6.98%, 57.84%); height: 60.0px; width: 60.0px; line-height: 60.0px; text-align: center" id="b0">b0</div> {{{colorbox(b01,white,#595e6a)}}}
<div style="background: hsl(222.86, 8.64%, 68.24%); height: 60.0px; width: 60.0px; line-height: 60.0px; text-align: center" id="b1">b1</div> {{{colorbox(b00,white,#727782)}}}
<div style="background: hsl(223.64, 26.83%, 91.96%); height: 60.0px; width: 60.0px; line-height: 60.0px; text-align: center" id="b2">b2</div> {{{colorbox(b0,black,#8c919b)}}}
<div style="background: hsl(223.64, 84.62%, 97.45%); height: 60.0px; width: 60.0px; line-height: 60.0px; text-align: center" id="b3">b3</div> {{{colorbox(b1,black,#a7abb5)}}}
<div style="background: hsl(38.48, 36.22%, 49.8%); height: 60.0px; width: 60.0px; line-height: 60.0px; text-align: center" id="y">y</div> {{{colorbox(b2,black,#e5e8f0)}}}
<div style="background: hsl(17.23, 38.52%, 47.84%); height: 60.0px; width: 60.0px; line-height: 60.0px; text-align: center" id="o">o</div> {{{colorbox(b3,black,#f3f6fe)}}}
<div style="background: hsl(8.09, 35.74%, 51.18%); height: 60.0px; width: 60.0px; line-height: 60.0px; text-align: center" id="r">r</div> {{{colorbox(y,white,#ad8c51)}}}
<div style="background: hsl(336.75, 33.06%, 52.55%); height: 60.0px; width: 60.0px; line-height: 60.0px; text-align: center" id="m">m</div> {{{colorbox(o,white,#a9664b)}}}
<div style="background: hsl(229.6, 32.75%, 55.1%); height: 60.0px; width: 60.0px; line-height: 60.0px; text-align: center" id="v">v</div> {{{colorbox(r,white,#af6256)}}}
<div style="background: hsl(205.19, 52.19%, 50.78%); height: 60.0px; width: 60.0px; line-height: 60.0px; text-align: center" id="b">b</div> {{{colorbox(m,white,#ae5e7d)}}}
<div style="background: hsl(176.09, 75.0%, 36.08%); height: 60.0px; width: 60.0px; line-height: 60.0px; text-align: center" id="c">c</div> {{{colorbox(v,white,#6774b2)}}}
<div style="background: hsl(60.91, 28.7%, 45.1%); height: 60.0px; width: 60.0px; line-height: 60.0px; text-align: center" id="g">g</div> {{{colorbox(b,white,#408cc3)}}}
{{{colorbox(c,white,#17a198)}}}
{{{colorbox(g,white,#939452)}}}
#+begin_export html
</div> </div>
#+end_export #+end_export