From f9b8bfb9efec2ef258f587829472a97bd5d7f922 Mon Sep 17 00:00:00 2001 From: "Yann Esposito (Yogsototh)" Date: Sun, 23 Oct 2022 16:35:27 +0200 Subject: [PATCH] many small fixes, that should return some homogeneity --- bb/brut/site.clj | 48 ++++++--------------------------------- brut.min.css | 2 +- h/docs.html | 58 ++++++++++-------------------------------------- src/buttons.less | 6 ++--- src/colors.less | 11 +++++---- src/forms.less | 2 +- src/general.less | 7 ++++-- 7 files changed, 34 insertions(+), 100 deletions(-) diff --git a/bb/brut/site.clj b/bb/brut/site.clj index 6ee6c66..17af3fc 100644 --- a/bb/brut/site.clj +++ b/bb/brut/site.clj @@ -290,42 +290,12 @@ [:strong [:i.ico.big "☠"]" Fatal"] " This is done by adding " - [:code "fatal"]" to the class.\n"]] - [:div {:class "col c6 gapless"} - [:h2 "Strong Alerts"] - [:br] - [:div {:class "msg alert"} - [:strong "Alert Message"] - " This is a normal message with " - [:code "msg"]".\n"] - [:div {:class "msg alert info"} - [:strong.c3 - [:i.ico.big "☞"] " Alert Info"] - [:span.c9 - " This is done by adding "] - [:code "info"]" to the class.\n"] - [:div {:class "msg alert ok"} + [:code "fatal"]" to the class.\n"] + [:div {:class "msg hl"} [:strong - [:i.ico.big "☑"] - " Alert OK"] + [:i.ico.big "☞"] "Highlighted"] " This is done by adding " - [:code "ok"]" to the class.\n"] - [:div {:class "msg alert warn"} - [:strong - [:i.ico.big "☣"] - " Alert Warning"] - " This is done by adding " - [:code "warn"]" to the class.\n"] - [:div {:class "msg alert err"} - [:strong - [:i.ico.big "☒"]" Alert Error"] - " This is done by adding " - [:code "err"]" to the class.\n"] - [:div {:class "msg alert fatal"} - [:strong - [:i.ico.big "☠"]" Alert Fatal"] - " This is done by adding " - [:code "fatal"]" to the class.\n"]]] + [:code "hl"]" to the class.\n"]]] messages-section {:title "Messages" :cards [messages]} forms [:div @@ -391,11 +361,11 @@ tables-section {:title "Tables" :cards [table]} basic-icons [:div.col.start - [:h4 "Android Safe"] + [:h4 "Safe"] [:i {:class "ico block big"} "☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №\n"] [:div {:class "msg push"} [:p - "The \"Android Safe\" icons work everywhere, tested on hundreds of devices."] + "The \"Safe\" icons should work almost everywhere."] [:p (mapcat (fn [w i] [ [:span w " "] [:i.ico i] " "]) @@ -412,11 +382,7 @@ [:h4 "Total Set"] [:i {:class "ico block big"} "✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩\n"] - [:div {:class "msg warn push"} - "Although over 75% of Android devices we tested support all \"Total Set\" icons, " - "if a substantial portion of your users use old Android devices you should stick to the " - " \"Android Safe\" set. (The \"Total Set\" does not include icons from the " - "\"Android Safe\" set.)"]] + [:div.msg "Just a bunch of a few more unicode icons."]] icons-section {:title "icons" :cards [basic-icons full-icons]} grid diff --git a/brut.min.css b/brut.min.css index 61c2512..a777b61 100644 --- a/brut.min.css +++ b/brut.min.css @@ -1 +1 @@ -/* Copyright 2022 Yann Esposito; MIT licensed */:root{--bg:#fff;--fg:#000;--bg2:#eee;--darken:rgba(0, 0, 0, 0.1);--nl:#d9d9d9;--n0:#999;--n1:#808080;--n2:#666666;--shadow:rgba(0, 0, 0, 0.65);--y:#b58900;--o:#cb4b16;--r:#dc322f;--m:#d33682;--v:#6c71c4;--b:#268bd2;--c:#2aa198;--g:#859900;--accent:var(--b)}@media(prefers-color-scheme:dark){:root body{filter:invert(100%)hue-rotate(180deg)}:root body .tg,:root body .btn{filter:invert(100%)hue-rotate(180deg)}:root img{filter:brightness(80%)invert(100%)}}html{background:var(--bg);color:var(--fg)}.neutral{color:var(--n0)}.bg-neutral{background:var(--nl)}a{color:var(--fg)}p>a,li>a{color:var(--accent)}.msg,.btn{background-color:var(--bg2)}.b,.info{color:var(--bg);background-color:var(--b)}.g,.ok{color:var(--bg);background-color:var(--g)}.y,.warn{color:var(--bg);background-color:var(--y)}.r,.err{color:var(--bg);background-color:var(--r)}.m,.fatal{color:var(--bg);background-color:var(--m)}.o{color:var(--bg);background-color:var(--o)}.v{color:var(--bg);background-color:var(--v)}.c{color:var(--bg);background-color:var(--c)}html,body{font-size:12px;line-height:1.5em;min-height:100vh;margin:0;padding:0;border:0;outline:0}*{box-sizing:border-box}body,textarea,input,select{background:var(--bg);color:var(--fg);border-radius:0;font-family:Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;font-size:1rem;margin:0}img{max-width:100%}.addon,.sm,.nav,textarea,input,select{outline:0;line-height:1rem}.container{padding:0 20px;width:100%}@media(min-width:1380px){.container{margin:auto;max-width:1270px}}pre{background:var(--bg2);padding:10px;overflow:scroll}code{background:var(--darken);border:solid 1px var(--darken);padding:1px}blockquote{margin:1rem 0;padding-left:1rem;border-left:solid 1rem var(--nl)}ul{list-style-type:square;list-style-position:outside;padding-inline-start:1.5rem}ol{padding-inline-start:2rem}ul>li::marker{font-size:1.5rem}summary:hover{cursor:pointer;background:var(--bg2)}table{font-size:1rem}.sm{font-size:.75rem;line-height:.65rem}.big{font-size:2rem;line-height:2.8rem}.huge{font-size:3rem;line-height:4.1rem}.hl{background:var(--fg);color:var(--bg)}.doc{max-width:65ch;font-size:1.25rem;font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif;line-height:1.5em}.doc p{text-indent:3rem}.tb,.btn{text-decoration:none;display:inline-block;text-align:center}.tb{font-weight:700;cursor:pointer;padding:2px;vertical-align:baseline}.tb:before,.tb:after{opacity:.3;display:inline-block}.tb:before{content:"❬"}.tb:after{content:"❭"}.tb:hover{text-decoration:underline}.tb:hover::before,.tb:hover::after{opacity:1}.tb:active:before{content:"❰"}.tb:active:after{content:"❱"}.btn{border:solid 2px var(--fg);font-weight:700;cursor:pointer;display:inline-block;margin:0 4px 4px 0;padding:1rem 2rem;box-shadow:4px 4px var(--shadow);vertical-align:bottom}.btn:hover{box-shadow:4px 4px var(--fg)}.btn:active,.btn:focus{box-shadow:1px 1px #000;position:relative;top:3px;left:3px}.btn.sm{padding:.5rem 1rem}.btn.std{width:12rem}.btn.big.std{width:20rem}.btn.huge.std{width:24rem}.col,.row{display:flex;flex-direction:row;justify-content:stretch;align-items:stretch;flex-wrap:wrap;gap:1rem}.row>*{flex:1}.col>*{flex:0}.col{flex-direction:column}.start{justify-content:flex-start;align-items:flex-start}.middle{justify-content:center;align-item:center}.gapless{gap:0}.table,.c12{width:100%;flex:12}.c11{flex:11;width:91.66%}.c10{flex:10;width:83.33%}.c9{flex:9;width:75%}.c8{flex:8;width:66.66%}.c7{flex:7;width:58.33%}.c6{flex:6;width:50%}.c5{flex:5;width:41.66%}.c4{flex:4;width:33.33%}.c3{flex:3;width:25%}.c2{flex:2;width:16.66%}.c1{flex:1;width:8.33%}@media(max-width:800px){.row>*{flex:0 1 100%;width:100%}.no-mobile{display:none}}.no-grow{flex:0}.fixed{flex-grow:0;flex-shrink:0}.card,.block{padding:1rem;border:solid 1rem}.col.card,.col.block{justify-content:flex-start;align-items:flex-start}.card{border-color:var(--nl)}.block{border-color:transparent}.central{display:flex;align-items:center;justify-content:center;background-size:cover;min-height:100vh}button~.central{min-height:calc(100vh - 50px)}.hero{padding:2rem;border:double 1rem}.fill{flex-grow:1}.push{justify-self:flex-end;margin-top:auto}h1,h2,h3,h4,h5,h6{display:block;padding:.5rem;font-size:1rem;margin:0;outline:0;color:var(--bg);margin:1rem 0;border:solid 1px var(--fg)}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:var(--bg)}.tight{margin:0}h1{background:var(--fg)}h2{background:var(--n2)}h2{background:var(--n1)}h3{background:var(--n0)}h4{background:var(--nl);color:var(--fg)}h5{background:var(--bg2);color:var(--fg)}h6{color:var(--fg)}.ico{font-family:Arial Unicode MS,Lucida Sans Unicode;font-style:normal}.big.ico,.huge.ico{vertical-align:middle}label>*{display:inline}form>*{display:block;margin-bottom:10px}textarea,input,select{border:2px solid;padding:8px}textarea,input[type=text]{-webkit-appearance:none;width:13em;outline:0;border:2px solid}.addon{padding:8px 12px;border-width:2px;border-style:solid none solid solid}textarea:focus,input:focus,select:focus{border-color:var(--i1)}.nav{background:var(--bg2);border-bottom:solid 1px var(--darken)}footer{background:var(--bg2);border-top:solid 1px var(--darken)}.nav{height:3rem;padding:11px 0 15px}.nav a{text-decoration:none;opacity:.7;padding-right:1em;position:relative;top:-1px}.nav a:hover{opacity:1}.nav .pagename{opacity:1;font-weight:700;font-size:22px;top:1px}.btn.btn-close{float:right;font-size:25px;margin:-4.1rem 0;display:none;border:none;box-shadow:none;background:0 0;color:var(--fg)}@media(max-width:640px){.btn.btn-close{display:block}.nav{overflow:hidden}.pagename{margin-top:-11px}.nav:active,.nav:focus{height:auto}.nav div:before{background:var(--bg2);border-bottom:11px double;border-top:3px solid;content:'';float:right;height:.25rem;position:relative;right:0;top:8px;width:2rem}.nav a{display:block;padding:.5em 0;width:50%}}.table th,.table td{padding:.5em;text-align:left}.table tbody>:nth-child(2n-1){background:var(--bg2)}.msg{border-left:5px solid var(--darken);padding:1rem} \ No newline at end of file +/* Copyright 2022 Yann Esposito; MIT licensed */:root{--bg:#fff;--fg:#000;--bg2:#eee;--darken:rgba(0, 0, 0, 0.1);--nl:#d9d9d9;--n0:#999;--n1:#808080;--n2:#666666;--shadow:rgba(128, 128, 128, 0.5);--y:#b58900;--o:#cb4b16;--r:#dc322f;--m:#d33682;--v:#6c71c4;--b:#268bd2;--c:#2aa198;--g:#859900;--accent:var(--b)}@media(prefers-color-scheme:dark){body{filter:invert(100%)hue-rotate(180deg)}img,.fill{filter:brightness(80%)invert(100%)}.msg,.btn,.b,.info,.g,.ok,.y,.warn,.r,.err,.m,.fatal,.o,.v,.c,.alert{filter:brightness(90%)invert(100%)hue-rotate(180deg)}}html{background:var(--bg);color:var(--fg)}.neutral{color:var(--n0)}.bg-neutral{background:var(--nl)}a{color:var(--fg)}p>a,li>a{color:var(--accent)}.msg,.btn{background-color:var(--bg2)}.b,.info{color:var(--bg);background-color:var(--b)}.g,.ok{color:var(--bg);background-color:var(--g)}.y,.warn{color:var(--bg);background-color:var(--y)}.r,.err{color:var(--bg);background-color:var(--r)}.m,.fatal{color:var(--bg);background-color:var(--m)}.o{color:var(--bg);background-color:var(--o)}.v{color:var(--bg);background-color:var(--v)}.c{color:var(--bg);background-color:var(--c)}html,body{font-size:12px;line-height:1.5em;min-height:100vh;margin:0;padding:0;border:0;outline:0}*{box-sizing:border-box}body,textarea,input,select{background:var(--bg);color:var(--fg);border-radius:0;font-family:Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;font-size:1rem;margin:0}img{max-width:100%}.addon,.sm,.nav,textarea,input,select{outline:0;line-height:1rem}.container{padding:0 20px;width:100%}@media(min-width:1380px){.container{margin:auto;max-width:1270px}}pre{background:var(--bg2);padding:10px;overflow:scroll}code{background:var(--darken);border:solid 1px var(--darken);padding:1px}blockquote{margin:1rem 0;padding-left:1rem;border-left:solid 1rem var(--nl)}ul{list-style-type:square;list-style-position:outside;padding-inline-start:1.5rem}ol{padding-inline-start:2rem}ul>li::marker{font-size:1.5rem}summary:hover{cursor:pointer;background:var(--bg2)}table{font-size:1rem}.sm{font-size:.75rem;line-height:.65rem}.big{font-size:2rem;line-height:2.8rem}.huge{font-size:3rem;line-height:4.1rem}.hl{background:var(--fg);color:var(--bg);border:solid 1px;padding:1px}.doc{max-width:65ch;font-size:1.25rem;font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif;text-align:justify;line-height:1.5em}.doc p{text-indent:3rem}.tb,.btn{text-decoration:none;display:inline-block;text-align:center}.tb{font-weight:700;cursor:pointer;padding:2px;vertical-align:baseline}.tb:before,.tb:after{opacity:.3;display:inline-block}.tb:before{content:"❬"}.tb:after{content:"❭"}.tb:hover{text-decoration:underline}.tb:hover::before,.tb:hover::after{opacity:1}.tb:active:before{content:"❰"}.tb:active:after{content:"❱"}.btn{border:solid 2px var(--fg);font-weight:700;cursor:pointer;display:inline-block;margin:0 4px 4px 0;padding:1rem 2rem;box-shadow:4px 4px var(--nl);vertical-align:bottom}.btn:hover{box-shadow:4px 4px var(--n1)}.btn:active,.btn:focus{box-shadow:1px 1px var(--n2);position:relative;top:3px;left:3px}.btn.sm{padding:.5rem 1rem}.btn.std{width:12rem}.btn.big.std{width:20rem}.btn.huge.std{width:24rem}.col,.row{display:flex;flex-direction:row;justify-content:stretch;align-items:stretch;flex-wrap:wrap;gap:1rem}.row>*{flex:1}.col>*{flex:0}.col{flex-direction:column}.start{justify-content:flex-start;align-items:flex-start}.middle{justify-content:center;align-item:center}.gapless{gap:0}.table,.c12{width:100%;flex:12}.c11{flex:11;width:91.66%}.c10{flex:10;width:83.33%}.c9{flex:9;width:75%}.c8{flex:8;width:66.66%}.c7{flex:7;width:58.33%}.c6{flex:6;width:50%}.c5{flex:5;width:41.66%}.c4{flex:4;width:33.33%}.c3{flex:3;width:25%}.c2{flex:2;width:16.66%}.c1{flex:1;width:8.33%}@media(max-width:800px){.row>*{flex:0 1 100%;width:100%}.no-mobile{display:none}}.no-grow{flex:0}.fixed{flex-grow:0;flex-shrink:0}.card,.block{padding:1rem;border:solid 1rem}.col.card,.col.block{justify-content:flex-start;align-items:flex-start}.card{border-color:var(--nl)}.block{border-color:transparent}.central{display:flex;align-items:center;justify-content:center;background-size:cover;min-height:100vh}button~.central{min-height:calc(100vh - 50px)}.hero{padding:2rem;border:double 1rem}.fill{flex-grow:1}.push{justify-self:flex-end;margin-top:auto}h1,h2,h3,h4,h5,h6{display:block;padding:.5rem;font-size:1rem;margin:0;outline:0;color:var(--bg);margin:1rem 0;border:solid 1px var(--fg)}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:var(--bg)}.tight{margin:0}h1{background:var(--fg)}h2{background:var(--n2)}h2{background:var(--n1)}h3{background:var(--n0)}h4{background:var(--nl);color:var(--fg)}h5{background:var(--bg2);color:var(--fg)}h6{color:var(--fg)}.ico{font-family:Arial Unicode MS,Lucida Sans Unicode;font-style:normal}.big.ico,.huge.ico{vertical-align:middle}label>*{display:inline}form>*{display:block;margin-bottom:10px}textarea,input,select{border:2px solid;padding:8px}textarea,input[type=text]{-webkit-appearance:none;width:13em;outline:0;border:2px solid}.addon{padding:8px 12px;border-width:2px;border-style:solid none solid solid}textarea:focus,input:focus,select:focus{border-color:var(--accent)}.nav{background:var(--bg2);border-bottom:solid 1px var(--darken)}footer{background:var(--bg2);border-top:solid 1px var(--darken)}.nav{height:3rem;padding:11px 0 15px}.nav a{text-decoration:none;opacity:.7;padding-right:1em;position:relative;top:-1px}.nav a:hover{opacity:1}.nav .pagename{opacity:1;font-weight:700;font-size:22px;top:1px}.btn.btn-close{float:right;font-size:25px;margin:-4.1rem 0;display:none;border:none;box-shadow:none;background:0 0;color:var(--fg)}@media(max-width:640px){.btn.btn-close{display:block}.nav{overflow:hidden}.pagename{margin-top:-11px}.nav:active,.nav:focus{height:auto}.nav div:before{background:var(--bg2);border-bottom:11px double;border-top:3px solid;content:'';float:right;height:.25rem;position:relative;right:0;top:8px;width:2rem}.nav a{display:block;padding:.5em 0;width:50%}}.table th,.table td{padding:.5em;text-align:left}.table tbody>:nth-child(2n-1){background:var(--bg2)}.msg{border-left:5px solid var(--darken);padding:1rem} \ No newline at end of file diff --git a/h/docs.html b/h/docs.html index ddb4597..9c2515a 100644 --- a/h/docs.html +++ b/h/docs.html @@ -921,14 +921,13 @@ <div><span>Directly in the column</span><img src="../h/img/brutalism.webp"></img></div> </div> </div> -

§ icons

Android Safe

☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € № -

The "Android Safe" icons work everywhere, tested on hundreds of devices.

Inserting ☎ in ♂ the ♀ middle ⓧ of © some § text ® to ⇦ check ⇧ the ⇨ size. ⇩ Now ♠ this ♣ should ♥ give ♦ an ♪ idea ♛ about ♜ the ♝ size ♞ relatively ♟ to ☜ the ☞ text. ♨ Hmmm ♭ this ♯ is ￥ quite ￡ long ￠ and ❊ boring ฿ to ๏ write ※ text ₧ in ₨ between ₪ like € that! №

code
+

§ icons

Safe

☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € № +

The "Safe" icons should work almost everywhere.

Inserting ☎ in ♂ the ♀ middle ⓧ of © some § text ® to ⇦ check ⇧ the ⇨ size. ⇩ Now ♠ this ♣ should ♥ give ♦ an ♪ idea ♛ about ♜ the ♝ size ♞ relatively ♟ to ☜ the ☞ text. ♨ Hmmm ♭ this ♯ is ￥ quite ￡ long ￠ and ❊ boring ฿ to ๏ write ※ text ₧ in ₨ between ₪ like € that! №

code
   <div class="col start">
-    <h4>Android Safe</h4><i class="ico block big">☎ ♂ ♀ ⓧ © § ® ⇦ ⇧
-    ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №</i>
+    <h4>Safe</h4><i class="ico block big">☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣
+    ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №</i>
     <div class="msg push">
-      <p>The "Android Safe" icons work everywhere, tested on
-      hundreds of devices.</p>
+      <p>The "Safe" icons should work almost everywhere.</p>
       <p><span>Inserting</span> <i class="ico">☎</i>
       <span>in</span> <i class="ico">♂</i> <span>the</span>
       <i class="ico">♀</i> <span>middle</span> <i class="ico">ⓧ</i>
@@ -958,17 +957,13 @@
     </div>
   </div>

Total Set

✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩ -
Although over 75% of Android devices we tested support all "Total Set" icons, if a substantial portion of your users use old Android devices you should stick to the "Android Safe" set. (The "Total Set" does not include icons from the "Android Safe" set.)
code
+
Just a bunch of a few more unicode icons.
code
   <div class="col start">
     <h4>Total Set</h4><i class="ico block big">✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢
     ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩
     ◍ ۩</i>
-    <div class="msg warn push">
-      Although over 75% of Android devices we tested support all
-      "Total Set" icons, if a substantial portion of your users use
-      old Android devices you should stick to the "Android Safe"
-      set. (The "Total Set" does not include icons from the
-      "Android Safe" set.)
+    <div class="msg">
+      Just a bunch of a few more unicode icons.
     </div>
   </div>

§ Forms



$
Be careful with addons! If you do not want a space between the addon and the input make sure that there is no space between the <span> and <input> tags. Example: 
... </span> <input ...
$ 
... </span><input ...
$
code
@@ -1070,12 +1065,7 @@
☣ Warning This is done by adding warn to the class.
☒ Error This is done by adding err to the class.
☠ Fatal This is done by adding fatal to the class. -

Strong Alerts


Alert Message This is a normal message with msg. -
☞ Alert Info This is done by adding info to the class. -
☑ Alert OK This is done by adding ok to the class. -
☣ Alert Warning This is done by adding warn to the class. -
☒ Alert Error This is done by adding err to the class. -
☠ Alert Fatal This is done by adding fatal to the class. +
☞Highlighted This is done by adding hl to the class.
code
   <div class="row">
     <div class="col c6 gapless">
@@ -1104,33 +1094,9 @@
         <strong><i class="ico big">☠</i> Fatal</strong> This is
         done by adding <code>fatal</code> to the class.
       </div>
-    </div>
-    <div class="col c6 gapless">
-      <h2>Strong Alerts</h2><br></br>
-      <div class="msg alert">
-        <strong>Alert Message</strong> This is a normal message
-        with <code>msg</code>.
-      </div>
-      <div class="msg alert info">
-        <strong class="c3"><i class="ico big">☞</i> Alert
-        Info</strong> <span class="c9">This is done by
-        adding</span> <code>info</code> to the class.
-      </div>
-      <div class="msg alert ok">
-        <strong><i class="ico big">☑</i> Alert OK</strong> This is
-        done by adding <code>ok</code> to the class.
-      </div>
-      <div class="msg alert warn">
-        <strong><i class="ico big">☣</i> Alert Warning</strong>
-        This is done by adding <code>warn</code> to the class.
-      </div>
-      <div class="msg alert err">
-        <strong><i class="ico big">☒</i> Alert Error</strong> This
-        is done by adding <code>err</code> to the class.
-      </div>
-      <div class="msg alert fatal">
-        <strong><i class="ico big">☠</i> Alert Fatal</strong> This
-        is done by adding <code>fatal</code> to the class.
+      <div class="msg hl">
+        <strong><i class="ico big">☞</i>Highlighted</strong> This
+        is done by adding <code>hl</code> to the class.
       </div>
     </div>
   </div>
diff --git a/src/buttons.less b/src/buttons.less
index f83867d..2a260b2 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -19,16 +19,16 @@
 	display: inline-block;
 	margin: 0 4px 4px 0;
 	padding: 1rem 2rem;
-	box-shadow: 4px 4px var(--shadow);
+	box-shadow: 4px 4px var(--nl);
 	vertical-align: bottom;
 }
 
 .btn:hover {
-	box-shadow: 4px 4px var(--fg);
+	box-shadow: 4px 4px var(--n1);
 }
 
 .btn:active,.btn:focus {
-	box-shadow: 1px 1px #000;
+	box-shadow: 1px 1px var(--n2);
 	position: relative;
 	top: 3px;
 	left: 3px;
diff --git a/src/colors.less b/src/colors.less
index c9c6273..f010e10 100644
--- a/src/colors.less
+++ b/src/colors.less
@@ -12,7 +12,7 @@
   --n1: darken(@neutral,10%);
   --n2: darken(@neutral,20%);
 
-  --shadow: rgba(0,0,0,0.65);
+  --shadow: rgba(128,128,128,0.5);
 
   /* rainbow colors */
   --y: #b58900;
@@ -28,11 +28,10 @@
 }
 
 @media (prefers-color-scheme: dark) {
-  :root {
-    body { filter: invert(100%) hue-rotate(180deg);
-           .tg,.btn { filter: invert(100%) hue-rotate(180deg); }
-         }
-    img { filter: brightness(80%) invert(100%) ; }
+  body { filter: invert(100%) hue-rotate(180deg);}
+  img,.fill { filter: brightness(80%) invert(100%) ; }
+  .msg, .btn, .b, .info, .g, .ok, .y, .warn, .r, .err, .m, .fatal, .o, .v, .c,.alert {
+    filter: brightness(90%) invert(100%) hue-rotate(180deg);
   }
 }
 html { background: var(--bg); color: var(--fg); }
diff --git a/src/forms.less b/src/forms.less
index 45cd6dd..837182c 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -26,5 +26,5 @@ textarea, input[type=text] {
 }
 
 textarea:focus, input:focus, select:focus {
-	border-color: var(--i1);
+	border-color: var(--accent);
 }
diff --git a/src/general.less b/src/general.less
index 5f893e1..3681607 100644
--- a/src/general.less
+++ b/src/general.less
@@ -51,14 +51,17 @@ table { font-size: 1rem; }
 .big { font-size: 2rem; line-height: 2.8rem;}
 .huge { font-size: 3rem; line-height: 4.1rem;}
 /* highligh revert the colors */
-.hl { background: var(--fg); color: var(--bg); }
+.hl { background: var(--fg); color: var(--bg);
+      border: solid 1px;
+      padding: 1px;
+    }
 /* doc are for long text to read */
 .doc { max-width: 65ch;
        font-size: 1.25rem;
        font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif;
+       text-align: justify;
        line-height: 1.5em;
        p {
            text-indent: 3rem;
        }
      }
-