From 479cb7834a7f207b6614b951feeef10966ee488b Mon Sep 17 00:00:00 2001 From: "Yann Esposito (Yogsototh)" Date: Sun, 23 Oct 2022 12:10:27 +0200 Subject: [PATCH] terse color solution --- bb/brut/site.clj | 62 ++++++++++++++++++---------- brut.min.css | 2 +- h/docs.html | 102 ++++++++++++++++++++++++---------------------- index.html | 2 +- src/buttons.less | 21 +--------- src/colors.less | 60 ++++++++++----------------- src/general.less | 4 +- src/headings.less | 4 ++ src/icons.less | 8 ++-- src/messages.less | 6 --- 10 files changed, 130 insertions(+), 141 deletions(-) diff --git a/bb/brut/site.clj b/bb/brut/site.clj index 57676c4..092aaeb 100644 --- a/bb/brut/site.clj +++ b/bb/brut/site.clj @@ -1,6 +1,7 @@ (ns brut.site (:require [hiccup2.core :as h] [babashka.fs :as fs] + [clojure.string :as string] [babashka.process :refer [process]])) (defn html-pp [html-str] @@ -79,13 +80,13 @@ [:h3 "Docs"] [:p "Docs"] [:p "Docs"] - [:a.btn.err.big.push {:href (to "h/docs.html")} + [:a.btn.big.push {:href (to "h/docs.html")} "Docs"]] [:div.col.card [:h3 "Download"] [:div.block [:p "Download BRUT"]] - [:a.btn.err.big.push {:href (to "h/download.html")} + [:a.btn.warn.big.push {:href (to "h/download.html")} "Download"]]]] [:div.container.col hero @@ -188,12 +189,13 @@ [:div.card [:p "Inside a card"] [:img {:src (to brutalism-img)}]] - [:div - [:p "Directly a card"] - [:img {:src (to brutalism-img)}]] [:div.block [:p "In a block"] - [:img {:src (to brutalism-img)}]]]] + [:img {:src (to brutalism-img)}]] + [:div + [:span "Directly in the column"] + [:img {:src (to brutalism-img)}]] + ]] images-section {:title "Images" :cards [images]} text-buttons [:div#text-buttons @@ -281,27 +283,27 @@ " This is a normal message with " [:code "msg"] "."] [:div {:class "msg info"} [:strong - [:i {:class "ico"} "☞"]" Info"] + [:i.ico.big "☞"]" Info"] " This is done by adding " [:code "info"]" to the class.\n"] [:div {:class "msg ok"} [:strong - [:i {:class "ico"} "☑"]" OK"] + [:i.ico.big "☑"]" OK"] " This is done by adding " [:code "ok"]" to the class.\n"] [:div {:class "msg warn"} [:strong - [:i {:class "ico"} "☣"]" Warning"] + [:i.ico.big "☣"]" Warning"] " This is done by adding " [:code "warn"]" to the class.\n"] [:div {:class "msg err"} [:strong - [:i {:class "ico"} "☒"]" Error"] + [:i.ico.big "☒"]" Error"] " This is done by adding " [:code "err"]" to the class.\n"] [:div {:class "msg fatal"} [:strong - [:i {:class "ico"} "☠"]" Fatal"] + [:i.ico.big "☠"]" Fatal"] " This is done by adding " [:code "fatal"]" to the class.\n"]] [:div {:class "col c6 gapless"} @@ -312,30 +314,31 @@ " This is a normal message with " [:code "msg"]".\n"] [:div {:class "msg alert info"} - [:strong - [:i {:class "ico"} "☞"] " Alert Info"] - " This is done by adding " + [: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"} [:strong - [:i {:class "ico"} "☑"] + [:i.ico.big "☑"] " Alert OK"] " This is done by adding " [:code "ok"]" to the class.\n"] [:div {:class "msg alert warn"} [:strong - [:i {:class "ico"} "☣"] + [:i.ico.big "☣"] " Alert Warning"] " This is done by adding " [:code "warn"]" to the class.\n"] [:div {:class "msg alert err"} [:strong - [:i {:class "ico"} "☒"]" Alert Error"] + [:i.ico.big "☒"]" Alert Error"] " This is done by adding " [:code "err"]" to the class.\n"] [:div {:class "msg alert fatal"} [:strong - [:i {:class "ico"} "☠"]" Alert Fatal"] + [:i.ico.big "☠"]" Alert Fatal"] " This is done by adding " [:code "fatal"]" to the class.\n"]]] messages-section {:title "Messages" @@ -400,12 +403,25 @@ :cards [table]} basic-icons [:div.col.start [:h4 "Android Safe"] - [:i {:class "ico block", :style "line-height: 1.5rem"} "☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №\n"] + [:i {:class "ico block big"} "☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №\n"] [:div {:class "msg push"} - "The \"Android Safe\" icons work everywhere, tested on hundreds of devices."]] + [:p + "The \"Android Safe\" icons work everywhere, tested on hundreds of devices."] + [:p + (mapcat (fn [w i] + [w " " [:i.ico i] " "]) + (string/split + (str "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!") + #" ") + + (string/split "☎♂♀ⓧ©§®⇦⇧⇨⇩♠♣♥♦♪♛♜♝♞♟☜☞♨♭♯￥￡￠❊฿๏※₧₨₪€№" #"")) + ]]] full-icons [:div.col.start [:h4 "Total Set"] - [:i {:class "ico block", :style "line-height: 1.5rem"} + [:i {:class "ico block big"} "✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩\n"] [:div {:class "msg warn push"} "Although over 75% of Android devices we tested support all \"Total Set\" icons, " @@ -465,7 +481,9 @@ messages-section navbar-section]] [:div.col - [:h2 title] + [:h2 {:id title} + [:a {:href (str "#" title)} [:i.ico "§"]] " " + title] (for [[c1 c2] (partition 2 2 nil cards)] [:div.row [:div.card.c6 diff --git a/brut.min.css b/brut.min.css index 6531765..cda38d1 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.75);--cnt:#fff;--na:#333;--nb:#000}@media(prefers-color-scheme:dark){:root{--bg:#000;--fg:#ccc;--bg2:#333;--darken:rgba(255, 255, 255, 0.1);--nl:#666666;--n0:#808080;--n1:#999999;--n2:#b3b3b3;--shadow:rgba(200, 200, 200, 0.7);--cnt:#000;--na:#eee;--nb:#fff}}.info{filter:sepia(100%)hue-rotate(120deg)contrast(120%)saturate(3)}.ok{filter:sepia(100%)hue-rotate(40deg)contrast(120%)saturate(3)}.warn{filter:sepia(100%)hue-rotate(0)contrast(120%)saturate(3)}.err{filter:sepia(100%)hue-rotate(310deg)contrast(120%)saturate(3)}.fatal{filter:sepia(100%)hue-rotate(270deg)contrast(120%)saturate(3)}.alert{filter:invert(100%)}.alert.info{filter:sepia(100%)hue-rotate(0)brightness(80%)contrast(140%)saturate(3)invert(100%)}.alert.ok{filter:sepia(100%)hue-rotate(270deg)brightness(80%)contrast(140%)saturate(3)invert(100%)}.alert.warn{filter:sepia(100%)hue-rotate(180deg)brightness(60%)contrast(180%)saturate(3)invert(100%)}.alert.err{filter:sepia(100%)hue-rotate(140deg)brightness(100%)contrast(150%)saturate(3)invert(100%)}.alert.fatal{filter:sepia(100%)hue-rotate(80deg)brightness(80%)contrast(150%)saturate(3)invert(100%)}.alert img{filter:none}.neutral{color:var(--n0)}.bg-neutral{background:var(--nl)}a{color:var(--fg)}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}table{font-size:1rem}.sm{font-size:.75rem;line-height:.65rem}.big{font-size:2rem;line-height:3.4rem}.huge{font-size:3rem;line-height:5.2rem}.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:"❱"}.tb.info{color:var(--n2)}.tb.ok{color:var(--n2)}.tb.warn{color:var(--n2)}.tb.err{color:var(--n2)}.tb.fatal{color:var(--n2)}.btn{background:var(--n0);border:solid 2px var(--fg);color:#fff;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.info{background:var(--n2)}.btn.ok{background:var(--n2)}.btn.warn{background:var(--n2)}.btn.err{background:var(--n2)}.btn.fatal{background:var(--n2)}.btn:hover{background:var(--n1);color:#fff}.btn:active,.btn:focus{color:#fff;background:var(--n2);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)}.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:20px Arial Unicode MS,Lucida Sans Unicode;line-height:10px;vertical-align:text-top}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{background:var(--bg2);border-left:5px solid var(--darken);padding:1rem}.msg.info{background:var(--n0)}.msg.ok{background:var(--n0)}.msg.warn{background:var(--n0)}.msg.err{background:var(--n0)}.msg.fatal{background:var(--n0)} \ 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(0, 0, 0, 0.65);--y:#b58900;--o:#cb4b16;--r:#dc322f;--m:#d33682;--v:#6c71c4;--b:#268bd2;--c:#2aa198;--g:#859900;--accent:var(--y)}@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)}.info{color:var(--bg);background-color:var(--b)}.ok{color:var(--bg);background-color:var(--g)}.warn{color:var(--bg);background-color:var(--y)}.err{color:var(--bg);background-color:var(--r)}.fatal{color:var(--bg);background-color:var(--m)}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}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 diff --git a/h/docs.html b/h/docs.html index bfa94a6..ee75f9d 100644 --- a/h/docs.html +++ b/h/docs.html @@ -1,4 +1,4 @@ -BRUT - documentation

Textual content

title in h1

Some text in <p> with different styles; bold, strong, italic, emphasis, code, and if you really want something to be extremly visible use the class hl.

The text should be very dense on purpose. Forget your lessons about nice space in design here. The goal of this design is to produce professional UI applications. So no time to make it breathes. We want to make it compact and efficient.

Note we still try to keep a coherent and nice vertical rythm.

Here is some blockquote. This can give you an idea about the look and feel for them.

code
+BRUT - documentation
§ Textual content
title in h1
Some text in <p> with different styles; bold, strong, italic, emphasis, code, and if you really want something to be extremly visible use the class hl.
The text should be very dense on purpose. Forget your lessons about nice space in design here. The goal of this design is to produce professional UI applications. So no time to make it breathes. We want to make it compact and efficient.
Note we still try to keep a coherent and nice vertical rythm.
Here is some blockquote. This can give you an idea about the look and feel for them.
code
   <div id="text">
     <h1>title in h1</h1>
     <p>Some text in &lt;p&gt; with different styles; <b>bold</b>,
@@ -87,7 +87,7 @@
       <li>item 4</li>
     </ol>
   </div>
-
Grid
c12
c11
c1
c10
c2
c9
c3
c8
c4
c7
c5
c6
c6
c5
c7
c4
c8
c3
c9
c2
c10
c1
c11
c12
code
+
§ Grid
c12
c11
c1
c10
c2
c9
c3
c8
c4
c7
c5
c6
c6
c5
c7
c4
c8
c3
c9
c2
c10
c1
c11
c12
code
   <div>
     <div class="row">
       <div class="bg-neutral c12">
@@ -188,34 +188,39 @@
       </div>
     </div>
   </div>
-
Images
Images
Inside a grid
Inside a card
Directly a card
In a block
code
+
§ Images
Images
Inside a grid
Inside a card
In a block
Directly in the column
code
   <div id="images">
     <h1>Images</h1>
     <h2>Inside a grid</h2>
     <div class="row">
       <div class="card">
       <p>Inside a card</p><img src="../h/img/brutalism.webp"></img></div>
-      <div>
-      <p>Directly a card</p><img src="../h/img/brutalism.webp"></img></div>
       <div class="block">
       <p>In a block</p><img src="../h/img/brutalism.webp"></img></div>
+      <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.
code
+
§ 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
   <div class="col start">
-    <h4>Android Safe</h4><i class="ico block" style="line-height: 1.5rem">☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜
-    ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №</i>
+    <h4>Android Safe</h4><i class="ico block big">☎ ♂ ♀ ⓧ © § ® ⇦ ⇧
+    ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №</i>
     <div class="msg push">
-      The "Android Safe" icons work everywhere, tested on hundreds
-      of devices.
+      <p>The "Android Safe" icons work everywhere, tested on
+      hundreds of devices.</p>
+      <p>Inserting <i class="ico">☎</i> in <i class="ico">♂</i> the
+      <i class="ico">♀</i> middle <i class="ico">ⓧ</i> of <i class="ico">©</i> some <i class="ico">§</i> text <i class="ico">®</i> to <i class="ico">⇦</i> check <i class="ico">⇧</i> the <i class="ico">⇨</i> size. <i class="ico">⇩</i> Now <i class="ico">♠</i> this <i class="ico">♣</i> should <i class="ico">♥</i> give <i class="ico">♦</i> an <i class="ico">♪</i> idea <i class="ico">♛</i>
+      about <i class="ico">♜</i> the <i class="ico">♝</i> size
+      <i class="ico">♞</i> relatively <i class="ico">♟</i> to
+      <i class="ico">☜</i> the <i class="ico">☞</i> text. <i class="ico">♨</i> Hmmm <i class="ico">♭</i> this <i class="ico">♯</i> is <i class="ico">￥</i> quite <i class="ico">￡</i> long <i class="ico">￠</i> and <i class="ico">❊</i> boring <i class="ico">฿</i> to <i class="ico">๏</i> write <i class="ico">※</i> text <i class="ico">₧</i> in <i class="ico">₨</i> between <i class="ico">₪</i> like <i class="ico">€</i> that! <i class="ico">№</i></p>
     </div>
   </div>
-
Total Set
✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩
+

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
   <div class="col start">
-    <h4>Total Set</h4><i class="ico block" style="line-height: 1.5rem">✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘
-    ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩</i>
+    <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
@@ -224,7 +229,7 @@
       "Android Safe" set.)
     </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
+

§ 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
   <div>
     <input class="neutral" placeholder="input" type="text"></input><br></br>
     <textarea class="neutral" placeholder="textarea" rows="3"></textarea><br></br>
@@ -239,7 +244,7 @@
       <pre>... &lt;/span&gt;&lt;input ...</pre><span class="addon">$</span><input class="smooth" type="text"></input>
     </div>
   </div>
-

Tables

#Widgets SoldRevenue (£)Profit (£)
15102
210204
35001000200
code
+

§ Tables

#Widgets SoldRevenue (£)Profit (£)
15102
210204
35001000200
code
   <table class="table">
     <thead>
       <tr>
@@ -270,7 +275,7 @@
       </tr>
     </tbody>
   </table>
-

Buttons

Classic

tbtb infotb oktb warntb errtb fatal
code
+

§ Buttons

Classic

tbtb infotb oktb warntb errtb fatal
code
   <div id="text-buttons">
     <h3>Classic</h3><a class="tb">tb</a><a class="tb info">tb
     info</a><a class="tb ok">tb ok</a><a class="tb warn">tb
@@ -336,17 +341,17 @@
       </div>
     </div>
   </div>
-

Messages

Basic Messages


Normal Message This is a normal message with msg.
☞ Info This is done by adding info to the class. -
☑ OK This is done by adding ok to the class. -
☣ 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. +

§ Messages

Basic Messages


Normal Message This is a normal message with msg.
☞ Info This is done by adding info to the class. +
☑ OK This is done by adding ok to the class. +
☣ 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. +
☞ 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.
code
   <div class="row">
     <div class="col c6 gapless">
@@ -356,24 +361,24 @@
         with <code>msg</code>.
       </div>
       <div class="msg info">
-        <strong><i class="ico">☞</i> Info</strong> This is done by
-        adding <code>info</code> to the class.
+        <strong><i class="ico big">☞</i> Info</strong> This is done
+        by adding <code>info</code> to the class.
       </div>
       <div class="msg ok">
-        <strong><i class="ico">☑</i> OK</strong> This is done by
-        adding <code>ok</code> to the class.
+        <strong><i class="ico big">☑</i> OK</strong> This is done
+        by adding <code>ok</code> to the class.
       </div>
       <div class="msg warn">
-        <strong><i class="ico">☣</i> Warning</strong> This is done
-        by adding <code>warn</code> to the class.
+        <strong><i class="ico big">☣</i> Warning</strong> This is
+        done by adding <code>warn</code> to the class.
       </div>
       <div class="msg err">
-        <strong><i class="ico">☒</i> Error</strong> This is done by
-        adding <code>err</code> to the class.
+        <strong><i class="ico big">☒</i> Error</strong> This is
+        done by adding <code>err</code> to the class.
       </div>
       <div class="msg fatal">
-        <strong><i class="ico">☠</i> Fatal</strong> This is done by
-        adding <code>fatal</code> to the class.
+        <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">
@@ -383,28 +388,29 @@
         with <code>msg</code>.
       </div>
       <div class="msg alert info">
-        <strong><i class="ico">☞</i> Alert Info</strong> This is
-        done by adding <code>info</code> to the class.
+        <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">☑</i> Alert OK</strong> This is done
-        by adding <code>ok</code> to the class.
+        <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">☣</i> Alert Warning</strong> This is
-        done by adding <code>warn</code> to the class.
+        <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">☒</i> Alert Error</strong> This is
-        done by adding <code>err</code> to the class.
+        <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">☠</i> Alert Fatal</strong> This is
-        done by adding <code>fatal</code> to the class.
+        <strong><i class="ico big">☠</i> Alert Fatal</strong> This
+        is done by adding <code>fatal</code> to the class.
       </div>
     </div>
   </div>
-

Navbar

code
+
code
   <div class="navbar">
     <nav class="nav" onclick="this.focus()" tabindex="-1">
       <div class="container">
diff --git a/index.html b/index.html
index 0f7ffbd..ecf6173 100644
--- a/index.html
+++ b/index.html
@@ -1 +1 @@
-BRUT
brutalism
BRUT
A Brutalist and Minimalist CSS Framework
This CSS framework is ideal to be used for admin interface where youwant to make it clear, this is not for any kind of end user but onlyadvanced technical people.
brutalism
Docs
Docs
Docs
Docs
Download
Download BRUT
Download

\ No newline at end of file
+BRUT
brutalism
BRUT
A Brutalist and Minimalist CSS Framework
This CSS framework is ideal to be used for admin interface where youwant to make it clear, this is not for any kind of end user but onlyadvanced technical people.
brutalism
Docs
Docs
Docs
Docs
Download
Download BRUT
Download

\ No newline at end of file
diff --git a/src/buttons.less b/src/buttons.less
index dac717d..f83867d 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -11,18 +11,9 @@
 .tb:hover::before,.tb:hover::after { opacity: 1; }
 .tb:active:before { content: "❰"; }
 .tb:active:after { content: "❱"; }
-.tb {
-    &.info  { color: var(--n2); }
-    &.ok    { color: var(--n2); }
-    &.warn  { color: var(--n2); }
-    &.err   { color: var(--n2); }
-    &.fatal { color: var(--n2); }
-}
 
 .btn {
-	background: var(--n0);
 	border: solid 2px var(--fg);
-	color: #fff;
 	font-weight: bold;
 	cursor: pointer;
 	display: inline-block;
@@ -31,22 +22,12 @@
 	box-shadow: 4px 4px var(--shadow);
 	vertical-align: bottom;
 }
-.btn {
-    &.info  { background: var(--n2); }
-    &.ok    { background: var(--n2); }
-    &.warn  { background: var(--n2); }
-    &.err   { background: var(--n2); }
-    &.fatal { background: var(--n2); }
-}
 
 .btn:hover {
-	background: var(--n1);
-	color: #fff;
+	box-shadow: 4px 4px var(--fg);
 }
 
 .btn:active,.btn:focus {
-	color: #fff;
-	background: var(--n2);
 	box-shadow: 1px 1px #000;
 	position: relative;
 	top: 3px;
diff --git a/src/colors.less b/src/colors.less
index 9d06b87..ae373c2 100644
--- a/src/colors.less
+++ b/src/colors.less
@@ -1,7 +1,6 @@
 @neutral: #999;
 @dark-neutral: darken(@neutral,10%);
 
-
 :root {
   --bg: #fff;
   --fg: #000;
@@ -13,52 +12,37 @@
   --n1: darken(@neutral,10%);
   --n2: darken(@neutral,20%);
 
-  --shadow: rgba(0,0,0,0.75);
+  --shadow: rgba(0,0,0,0.65);
 
-  /* alert messages */
+  --y: #b58900;
+  --o: #cb4b16;
+  --r: #dc322f;
+  --m: #d33682;
+  --v: #6c71c4;
+  --b: #268bd2;
+  --c: #2aa198;
+  --g: #859900;
 
-  --cnt: #fff;
-  --na: #333;
-  --nb: #000;
+  --accent: var(--y);
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --bg: #000;
-    --fg: #ccc;
-    --bg2: #333;
-    --darken: rgba(255,255,255,0.1);
-
-    --nl: darken(@dark-neutral,10%);
-    --n0: @dark-neutral;
-    --n1: lighten(@dark-neutral,10%);
-    --n2: lighten(@dark-neutral,20%);
-
-    --shadow: rgba(200,200,200,0.7);
-
-    --cnt: #000;
-    --na: #eee;
-    --nb: #fff;
+    body { filter: invert(100%) hue-rotate(180deg);
+           .tg,.btn { filter: invert(100%) hue-rotate(180deg); }
+         }
+    img { filter: brightness(80%) invert(100%) ; }
   }
 }
-
-.info  { filter: sepia(100%) hue-rotate(120deg) contrast(120%) saturate(3); }
-.ok    { filter: sepia(100%) hue-rotate(40deg)  contrast(120%) saturate(3); }
-.warn  { filter: sepia(100%) hue-rotate(0deg)   contrast(120%) saturate(3); }
-.err   { filter: sepia(100%) hue-rotate(310deg) contrast(120%) saturate(3); }
-.fatal { filter: sepia(100%) hue-rotate(270deg) contrast(120%) saturate(3); }
-
-.alert { filter: invert(100%); }
-.alert.info  { filter: sepia(100%) hue-rotate(0deg)   brightness(80%)  contrast(140%) saturate(3) invert(100%); }
-.alert.ok    { filter: sepia(100%) hue-rotate(270deg) brightness(80%)  contrast(140%) saturate(3) invert(100%); }
-.alert.warn  { filter: sepia(100%) hue-rotate(180deg) brightness(60%)  contrast(180%)  saturate(3) invert(100%); }
-.alert.err   { filter: sepia(100%) hue-rotate(140deg) brightness(100%)  contrast(150%) saturate(3) invert(100%); }
-.alert.fatal { filter: sepia(100%) hue-rotate(80deg)  brightness(80%) contrast(150%) saturate(3) invert(100%); }
-
-.alert img { filter: none; }
-
+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) }
+.info  { color: var(--bg); background-color: var(--b); }
+.ok    { color: var(--bg); background-color: var(--g); }
+.warn  { color: var(--bg); background-color: var(--y); }
+.err   { color: var(--bg); background-color: var(--r); }
+.fatal { color: var(--bg); background-color: var(--m); }
diff --git a/src/general.less b/src/general.less
index b4fbf67..c9c87a2 100644
--- a/src/general.less
+++ b/src/general.less
@@ -48,8 +48,8 @@ summary:hover { cursor: pointer; }
 table { font-size: 1rem; }
 
 .sm { font-size: 0.75rem; line-height: 0.65rem; }
-.big { font-size: 2rem; line-height: 3.4rem;}
-.huge { font-size: 3rem; line-height: 5.2rem;}
+.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); }
 /* doc are for long text to read */
diff --git a/src/headings.less b/src/headings.less
index 6f97bd3..c4098b1 100644
--- a/src/headings.less
+++ b/src/headings.less
@@ -9,7 +9,11 @@ h1, h2, h3, h4, h5, h6 {
     color: var(--bg);
     margin: 1rem 0;
     border: solid 1px var(--fg);
+    a {
+        color: var(--bg);
+    }
 }
+
 .tight { margin: 0; }
 h1 { background: var(--fg); }
 h2 { background: var(--n2); }
diff --git a/src/icons.less b/src/icons.less
index 044b10b..891e2c2 100644
--- a/src/icons.less
+++ b/src/icons.less
@@ -1,5 +1,7 @@
 .ico {
-	font: 20px Arial Unicode MS, Lucida Sans Unicode;
-	line-height: 10px;
-	vertical-align: text-top;
+	font-family: Arial Unicode MS, Lucida Sans Unicode;
+	font-style: normal;
+}
+.big.ico, .huge.ico {
+	vertical-align: middle;
 }
diff --git a/src/messages.less b/src/messages.less
index f5d6b36..e97ca30 100644
--- a/src/messages.less
+++ b/src/messages.less
@@ -1,10 +1,4 @@
 .msg {
-	background: var(--bg2);
 	border-left: 5px solid var(--darken);
 	padding: 1rem;
-    &.info { background: var(--n0); }
-    &.ok { background: var(--n0); }
-    &.warn { background: var(--n0); }
-    &.err { background: var(--n0); }
-    &.fatal { background: var(--n0); }
 }