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 @@ -
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.
+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 classhl
.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 <p> with different styles; <b>bold</b>, @@ -87,7 +87,7 @@ <li>item 4</li> </ol> </div> -Grid
c12c11c1c10c2c9c3c8c4c7c5c6c6c5c7c4c8c3c9c2c10c1c11c12code
+§ Grid
c12c11c1c10c2c9c3c8c4c7c5c6c6c5c7c4c8c3c9c2c10c1c11c12code
<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 columncode
<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>... </span><input ...</pre><span class="addon">$</span><input class="smooth" type="text"></input> </div> </div> -Tables
# Widgets Sold Revenue (£) Profit (£) 1 5 10 2 2 10 20 4 3 500 1000 200 code
+§ Tables
# Widgets Sold Revenue (£) Profit (£) 1 5 10 2 2 10 20 4 3 500 1000 200 code
<table class="table"> <thead> <tr> @@ -270,7 +275,7 @@ </tr> </tbody> </table> -Buttons
code
+§ Buttons
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 withmsg
.☞ Info This is done by addinginfo
to the class. -☑ OK This is done by addingok
to the class. -☣ Warning This is done by addingwarn
to the class. -☒ Error This is done by addingerr
to the class. -☠ Fatal This is done by addingfatal
to the class. +§ Messages
Basic Messages
Normal Message This is a normal message withmsg
.☞ Info This is done by addinginfo
to the class. +☑ OK This is done by addingok
to the class. +☣ Warning This is done by addingwarn
to the class. +☒ Error This is done by addingerr
to the class. +☠ Fatal This is done by addingfatal
to the class.Strong Alerts
Alert Message This is a normal message withmsg
. -☞ Alert Info This is done by addinginfo
to the class. -☑ Alert OK This is done by addingok
to the class. -☣ Alert Warning This is done by addingwarn
to the class. -☒ Alert Error This is done by addingerr
to the class. -☠ Alert Fatal This is done by addingfatal
to the class. +☞ Alert Info This is done by addinginfo
to the class. +☑ Alert OK This is done by addingok
to the class. +☣ Alert Warning This is done by addingwarn
to the class. +☒ Alert Error This is done by addingerr
to the class. +☠ Alert Fatal This is done by addingfatal
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
+§ Navbar
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 \ No newline at end of file +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.
BRUT \ 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); } }