diff --git a/bb/brut/site.clj b/bb/brut/site.clj index edf8ebb..66c9d86 100644 --- a/bb/brut/site.clj +++ b/bb/brut/site.clj @@ -4,9 +4,12 @@ [babashka.process :refer [process]])) (defn html-pp [html-str] - (:out - @(process ["tidy" "-i" "-utf8"] {:in html-str - :out :string}))) + (let [xhtml (:out @(process ["tidy" "-i" "-asxhtml" "-quiet" "-utf8"] + {:in html-str + :out :string}))] + (:out @(process ["hxselect" "-c" "body"] + {:in xhtml + :out :string})))) (def brutalism-img "h/img/brutalism.webp") @@ -48,8 +51,7 @@ (footer))]))) (defn gen-page [file-path metas content-fn] - (let [{:keys [title]} metas - depth (or (some-> file-path + (let [depth (or (some-> file-path fs/parent fs/components count) @@ -103,70 +105,78 @@ (defn mk-docs [rel-pref _metas] (let [to (fn [path] (str rel-pref path)) - txt - [:div {:id "textual"} - [:h1 "title in h1"] - [:p "Some text in

with different styles; " - [:b "bold"] - ", " [:strong "strong"] - ", " [:i "italic"] - ", " [:em "emphasis"] - ", " [:code "code"] - ", and if you really want something to be extremly visible use the class " [:code.hl "hl"] "." - ] - [:p "The text should be " [:strong.hl "very dense"] " on purpose." - " Forget your lessons about nice space in design here." - " The goal of this design is to produce " [:em "professional"] " UI applications." - " So no time to make it breathes." - " We want to make it compact and efficient."] - [:p "Not we still try to keep a coherent and nice vertical rythm."] - [:p "Remark if you need to present a long text to read you can still use the class " [:code "doc"] "." - " Take a look at the next paragraph for example: "] - [:blockquote.doc - "Lorem ipsum with pretty Lorem ipsum dolor sit amet consectetur adipiscing elit, urna consequat felis -vehicula class ultricies mollis dictumst, aenean non a in donec nulla. -Phasellus ante pellentesque erat cum risus consequat imperdiet aliquam, integer -placerat et turpis mi eros nec lobortis taciti, vehicula nisl litora tellus -ligula porttitor metus. + txt [:div {:id "text"} + [:h1 "title in h1"] + [:p "Some text in

with different styles; " + [:b "bold"] + ", " [:strong "strong"] + ", " [:i "italic"] + ", " [:em "emphasis"] + ", " [:code "code"] + ", and if you really want something to be extremly visible use the class " [:code.hl "hl"] "."] + [:p "The text should be " [:strong.hl "very dense"] " on purpose." + " Forget your lessons about nice space in design here." + " The goal of this design is to produce " [:em "professional"] " UI applications." + " So no time to make it breathes." + " We want to make it compact and efficient."] + [:p "Note we still try to keep a coherent and nice vertical rythm."] + [:blockquote + [:p "Here is some blockquote." + " This can give you an idea about the look and feel for them."]]] + doc [:div {:id "doc"} + [:p "Remark if you need to present a long text to read you can still use the class " [:code "doc"] "." + " Take a look at the next paragraph for example: "] + [:div.doc + [:p + "Lorem ipsum with pretty Lorem ipsum dolor sit amet consectetur adipiscing elit," + " urna consequat felis vehicula class ultricies mollis dictumst, aenean non a in donec nulla." + " Phasellus ante pellentesque erat cum risus consequat imperdiet aliquam, integer" + " placerat et turpis mi eros nec lobortis taciti, vehicula nisl litora tellus ligula porttitor metus."] + [:p + "Vivamus integer non suscipit taciti mus etiam at primis tempor sagittis sit," + " euismod libero facilisi aptent elementum felis blandit cursus gravida sociis" + " erat ante, eleifend lectus nullam dapibus netus feugiat curae curabitur est ad." + " Massa curae fringilla porttitor quam sollicitudin iaculis aptent leo ligula" + " euismod dictumst, orci penatibus mauris eros etiam praesent erat volutpat" + " posuere hac." + " Metus fringilla nec ullamcorper odio aliquam lacinia conubia mauris tempor," + " etiam ultricies proin quisque lectus sociis id tristique, integer phasellus" + " taciti pretium adipiscing tortor sagittis ligula."] + [:p + "Mollis pretium lorem primis senectus habitasse lectus scelerisque donec," + " ultricies tortor suspendisse adipiscing fusce morbi volutpat pellentesque," + " consectetur mi risus molestie curae malesuada cum." + " Dignissim lacus convallis massa mauris enim ad mattis magnis senectus montes," + " mollis taciti phasellus accumsan bibendum semper blandit suspendisse faucibus" + " nibh est, metus lobortis morbi cras magna vivamus per risus fermentum." + " Dapibus imperdiet praesent magnis ridiculus congue gravida curabitur dictum" + " sagittis, enim et magna sit inceptos sodales parturient pharetra mollis, aenean" + " vel nostra tellus commodo pretium sapien sociosqu."]] + [:p "The " [:code "doc"] " class ensure the width of the text is not too wide and use a very legible font."] + [:blockquote + "Some blockquote"] + ] + itemize [:div {:id "itemize"} + [:h2 "itemization"] + [:h3 "ul"] + [:ul + [:li "item 1"] + [:li "item 2"] + [:li "item 3; with a very long text that should wrap to the next line in any browser." + " We'll see that the wrapped text should be aligned with the text of the other items." + " This is due to the " [:code "list-style-position: outside"] "." + ] + [:li "item 4"]] + [:h3 "ol"] + [:ol + [:li "item 1"] + [:li "item 2"] + [:li "item 3"] + [:li "item 4"]]] + textual-section {:title "Textual content" + :cards [txt doc itemize] + } -Vivamus integer non suscipit taciti mus etiam at primis tempor sagittis sit, -euismod libero facilisi aptent elementum felis blandit cursus gravida sociis -erat ante, eleifend lectus nullam dapibus netus feugiat curae curabitur est ad. -Massa curae fringilla porttitor quam sollicitudin iaculis aptent leo ligula -euismod dictumst, orci penatibus mauris eros etiam praesent erat volutpat -posuere hac. -Metus fringilla nec ullamcorper odio aliquam lacinia conubia mauris tempor, -etiam ultricies proin quisque lectus sociis id tristique, integer phasellus -taciti pretium adipiscing tortor sagittis ligula. - -Mollis pretium lorem primis senectus habitasse lectus scelerisque donec, -ultricies tortor suspendisse adipiscing fusce morbi volutpat pellentesque, -consectetur mi risus molestie curae malesuada cum. -Dignissim lacus convallis massa mauris enim ad mattis magnis senectus montes, -mollis taciti phasellus accumsan bibendum semper blandit suspendisse faucibus -nibh est, metus lobortis morbi cras magna vivamus per risus fermentum. -Dapibus imperdiet praesent magnis ridiculus congue gravida curabitur dictum -sagittis, enim et magna sit inceptos sodales parturient pharetra mollis, aenean -vel nostra tellus commodo pretium sapien sociosqu."] - [:p "The " [:code "doc"] " class ensure the width of the text is not too wide and use a very legible font."] - [:blockquote - "Some blockquote"] - [:h2 "itemization"] - [:h3 "ul"] - [:ul - [:li "item 1"] - [:li "item 2"] - [:li "item 3; with a very long text that should wrap to the next line in any browser." - " We'll see that the wrapped text should be aligned with the text of the other items." - " This is due to the " [:code "list-style-position: outside"] "." - ] - [:li "item 4"]] - [:h3 "ol"] - [:ol - [:li "item 1"] - [:li "item 2"] - [:li "item 3"] - [:li "item 4"]]] images [:div {:id "images"} [:h1 "Images"] [:h2 "Inside a grid"] @@ -180,6 +190,8 @@ vel nostra tellus commodo pretium sapien sociosqu."] [:div.block [:p "In a block"] [:img {:src (to brutalism-img)}]]]] + images-section {:title "Images" + :cards [images]} buttons [:div {:id "buttons"} [:h1 "Buttons"] [:h2 "Text Buttons"] @@ -253,6 +265,8 @@ vel nostra tellus commodo pretium sapien sociosqu."] [:a {:class "btn std huge"} "btn std"] [:a {:class "btn std huge info"} "btn std info"] [:a {:class "btn std huge ok"} "btn std ok"]]]]] + buttons-section {:title "Buttons" + :cards [buttons]} docs [:div [:h1 "Messages"] [:div {:class "row"} @@ -459,8 +473,17 @@ vel nostra tellus commodo pretium sapien sociosqu."] [:br] [:pre "<h1>Level One Heading</h1>"]]]] [:div.container - (for [b [txt images buttons docs]] - (conj b (to-pre b)))])) + (for [{:keys [title cards]} [textual-section images-section buttons-section]] + [:div + [:h2 title] + [:div.col + (for [c cards] + [:div.card + c + [:details + [:summary "code"] + (to-pre c)]] + )]])])) (defn -main [& _args] (gen-page "index.html" diff --git a/brut.min.css b/brut.min.css index 426eefd..f1610dd 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(128, 128, 128, 0.3);--cnt:#000;--na:#eee;--nb:#fff}}.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}.sm{font-size:.75rem}.big{font-size:2rem;line-height:3.5rem}.huge{font-size:3rem;line-height:5.5rem}.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}.tb,.btn{text-decoration:none;display:inline-block;text-align:center}.tb{font-weight:700;cursor:pointer;padding:2px}.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(--fg);background:var(--bg2)}.tb.ok{color:var(--fg);background:var(--nl)}.tb.warn{background:var(--n0);color:var(--bg)}.tb.err{background:var(--n2);color:var(--bg)}.tb.fatal{background:var(--fg);color:var(--bg)}.btn{background:var(--n0);border:solid 2px #000;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{color:var(--fg);background:var(--bg2)}.btn.ok{color:var(--fg);background:var(--nl)}.btn.warn{background:var(--n0);color:var(--bg)}.btn.err{background:var(--n2);color:var(--bg)}.btn.fatal{background:var(--fg);color:var(--bg)}.btn:hover{background:var(--n1);color:#fff}.btn.err:hover,.btn.fatal:hover,.btn.err:active,.btn.fatal:active,.btn.err:focus,.btn.fatal:focus{background:var(--fg)}.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 .col{flex:0 1 100%;width:100%}.no-mobile{display:none}}.no-grow{flex: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: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(--bg2)}.msg.ok{background:var(--nl)}.msg.warn{background:var(--n0);color:var(--bg)}.msg.err{background:var(--n2);color:var(--bg)}.msg.fatal{background:var(--fg);color:var(--bg)} \ 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.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(128, 128, 128, 0.3);--cnt:#000;--na:#eee;--nb:#fff}}.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}.sm{font-size:.75rem}.big{font-size:2rem;line-height:3.5rem}.huge{font-size:3rem;line-height:5.5rem}.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}.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(--fg);background:var(--bg2)}.tb.ok{color:var(--fg);background:var(--nl)}.tb.warn{background:var(--n0);color:var(--bg)}.tb.err{background:var(--n2);color:var(--bg)}.tb.fatal{background:var(--fg);color:var(--bg)}.btn{background:var(--n0);border:solid 2px #000;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{color:var(--fg);background:var(--bg2)}.btn.ok{color:var(--fg);background:var(--nl)}.btn.warn{background:var(--n0);color:var(--bg)}.btn.err{background:var(--n2);color:var(--bg)}.btn.fatal{background:var(--fg);color:var(--bg)}.btn:hover{background:var(--n1);color:#fff}.btn.err:hover,.btn.fatal:hover,.btn.err:active,.btn.fatal:active,.btn.err:focus,.btn.fatal:focus{background:var(--fg)}.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 .col{flex:0 1 100%;width:100%}.no-mobile{display:none}}.no-grow{flex: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: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(--bg2)}.msg.ok{background:var(--nl)}.msg.warn{background:var(--n0);color:var(--bg)}.msg.err{background:var(--n2);color:var(--bg)}.msg.fatal{background:var(--fg);color:var(--bg)} \ No newline at end of file diff --git a/h/g-docs.html b/h/g-docs.html index 6ff24c0..23d0867 100644 --- a/h/g-docs.html +++ b/h/g-docs.html @@ -1,36 +1,5 @@ -BRUT - documentation

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.

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

Remark if you need to present a long text to read you can still use the class doc. Take a look at the next paragraph for example:

Lorem ipsum with pretty Lorem ipsum dolor sit amet consectetur adipiscing elit, urna consequat felis -vehicula class ultricies mollis dictumst, aenean non a in donec nulla. -Phasellus ante pellentesque erat cum risus consequat imperdiet aliquam, integer -placerat et turpis mi eros nec lobortis taciti, vehicula nisl litora tellus -ligula porttitor metus. - -Vivamus integer non suscipit taciti mus etiam at primis tempor sagittis sit, -euismod libero facilisi aptent elementum felis blandit cursus gravida sociis -erat ante, eleifend lectus nullam dapibus netus feugiat curae curabitur est ad. -Massa curae fringilla porttitor quam sollicitudin iaculis aptent leo ligula -euismod dictumst, orci penatibus mauris eros etiam praesent erat volutpat -posuere hac. -Metus fringilla nec ullamcorper odio aliquam lacinia conubia mauris tempor, -etiam ultricies proin quisque lectus sociis id tristique, integer phasellus -taciti pretium adipiscing tortor sagittis ligula. - -Mollis pretium lorem primis senectus habitasse lectus scelerisque donec, -ultricies tortor suspendisse adipiscing fusce morbi volutpat pellentesque, -consectetur mi risus molestie curae malesuada cum. -Dignissim lacus convallis massa mauris enim ad mattis magnis senectus montes, -mollis taciti phasellus accumsan bibendum semper blandit suspendisse faucibus -nibh est, metus lobortis morbi cras magna vivamus per risus fermentum. -Dapibus imperdiet praesent magnis ridiculus congue gravida curabitur dictum -sagittis, enim et magna sit inceptos sodales parturient pharetra mollis, aenean -vel nostra tellus commodo pretium sapien sociosqu.

The doc class ensure the width of the text is not too wide and use a very legible font.

Some blockquote

itemization

ul

ol

  1. item 1
  2. item 2
  3. item 3
  4. item 4
<!DOCTYPE html>
-<html>
-<head>
-  <meta name="generator" content=
-  "HTML Tidy for HTML5 for Apple macOS version 5.8.0">
-  <title></title>
-</head>
-<body>
-  <div id="textual">
+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>,
     <strong>strong</strong>, <i>italic</i>, <em>emphasis</em>,
@@ -41,46 +10,57 @@ vel nostra tellus commodo pretium sapien sociosqu.
The doc<
     The goal of this design is to produce <em>professional</em> UI
     applications. So no time to make it breathes. We want to make
     it compact and efficient.</p>
-    <p>Not we still try to keep a coherent and nice vertical
+    <p>Note we still try to keep a coherent and nice vertical
     rythm.</p>
+    <blockquote>
+      <p>Here is some blockquote. This can give you an idea about
+      the look and feel for them.</p>
+    </blockquote>
+  </div>
+
Remark if you need to present a long text to read you can still use the class doc. Take a look at the next paragraph for example: 
Lorem ipsum with pretty  Lorem ipsum dolor sit amet consectetur adipiscing elit, urna consequat felis vehicula class ultricies mollis dictumst, aenean non a in donec nulla. Phasellus ante pellentesque erat cum risus consequat imperdiet aliquam, integer placerat et turpis mi eros nec lobortis taciti, vehicula nisl litora tellus ligula porttitor metus.
Vivamus integer non suscipit taciti mus etiam at primis tempor sagittis sit, euismod libero facilisi aptent elementum felis blandit cursus gravida sociis erat ante, eleifend lectus nullam dapibus netus feugiat curae curabitur est ad. Massa curae fringilla porttitor quam sollicitudin iaculis aptent leo ligula euismod dictumst, orci penatibus mauris eros etiam praesent erat volutpat posuere hac. Metus fringilla nec ullamcorper odio aliquam lacinia conubia mauris tempor, etiam ultricies proin quisque lectus sociis id tristique, integer phasellus taciti pretium adipiscing tortor sagittis ligula.
Mollis pretium lorem primis senectus habitasse lectus scelerisque donec, ultricies tortor suspendisse adipiscing fusce morbi volutpat pellentesque, consectetur mi risus molestie curae malesuada cum. Dignissim lacus convallis massa mauris enim ad mattis magnis senectus montes, mollis taciti phasellus accumsan bibendum semper blandit suspendisse faucibus nibh est, metus lobortis morbi cras magna vivamus per risus fermentum. Dapibus imperdiet praesent magnis ridiculus congue gravida curabitur dictum sagittis, enim et magna sit inceptos sodales parturient pharetra mollis, aenean vel nostra tellus commodo pretium sapien sociosqu.
The doc class ensure the width of the text is not too wide and use a very legible font.
Some blockquote
code
+  <div id="doc">
     <p>Remark if you need to present a long text to read you can
     still use the class <code>doc</code>. Take a look at the next
     paragraph for example:</p>
-    <blockquote class="doc">
-      Lorem ipsum with pretty Lorem ipsum dolor sit amet
+    <div class="doc">
+      <p>Lorem ipsum with pretty Lorem ipsum dolor sit amet
       consectetur adipiscing elit, urna consequat felis vehicula
       class ultricies mollis dictumst, aenean non a in donec nulla.
       Phasellus ante pellentesque erat cum risus consequat
       imperdiet aliquam, integer placerat et turpis mi eros nec
       lobortis taciti, vehicula nisl litora tellus ligula porttitor
-      metus. Vivamus integer non suscipit taciti mus etiam at
-      primis tempor sagittis sit, euismod libero facilisi aptent
-      elementum felis blandit cursus gravida sociis erat ante,
-      eleifend lectus nullam dapibus netus feugiat curae curabitur
-      est ad. Massa curae fringilla porttitor quam sollicitudin
-      iaculis aptent leo ligula euismod dictumst, orci penatibus
-      mauris eros etiam praesent erat volutpat posuere hac. Metus
+      metus.</p>
+      <p>Vivamus integer non suscipit taciti mus etiam at primis
+      tempor sagittis sit, euismod libero facilisi aptent elementum
+      felis blandit cursus gravida sociis erat ante, eleifend
+      lectus nullam dapibus netus feugiat curae curabitur est ad.
+      Massa curae fringilla porttitor quam sollicitudin iaculis
+      aptent leo ligula euismod dictumst, orci penatibus mauris
+      eros etiam praesent erat volutpat posuere hac. Metus
       fringilla nec ullamcorper odio aliquam lacinia conubia mauris
       tempor, etiam ultricies proin quisque lectus sociis id
       tristique, integer phasellus taciti pretium adipiscing tortor
-      sagittis ligula. Mollis pretium lorem primis senectus
-      habitasse lectus scelerisque donec, ultricies tortor
-      suspendisse adipiscing fusce morbi volutpat pellentesque,
-      consectetur mi risus molestie curae malesuada cum. Dignissim
-      lacus convallis massa mauris enim ad mattis magnis senectus
-      montes, mollis taciti phasellus accumsan bibendum semper
-      blandit suspendisse faucibus nibh est, metus lobortis morbi
-      cras magna vivamus per risus fermentum. Dapibus imperdiet
-      praesent magnis ridiculus congue gravida curabitur dictum
-      sagittis, enim et magna sit inceptos sodales parturient
-      pharetra mollis, aenean vel nostra tellus commodo pretium
-      sapien sociosqu.
-    </blockquote>
+      sagittis ligula.</p>
+      <p>Mollis pretium lorem primis senectus habitasse lectus
+      scelerisque donec, ultricies tortor suspendisse adipiscing
+      fusce morbi volutpat pellentesque, consectetur mi risus
+      molestie curae malesuada cum. Dignissim lacus convallis massa
+      mauris enim ad mattis magnis senectus montes, mollis taciti
+      phasellus accumsan bibendum semper blandit suspendisse
+      faucibus nibh est, metus lobortis morbi cras magna vivamus
+      per risus fermentum. Dapibus imperdiet praesent magnis
+      ridiculus congue gravida curabitur dictum sagittis, enim et
+      magna sit inceptos sodales parturient pharetra mollis, aenean
+      vel nostra tellus commodo pretium sapien sociosqu.</p>
+    </div>
     <p>The <code>doc</code> class ensure the width of the text is
     not too wide and use a very legible font.</p>
     <blockquote>
       Some blockquote
     </blockquote>
+  </div>
+
itemization
ul
  • item 1
  • item 2
  • item 3; with a very long text that should wrap to the next line in any browser. We'll see that the wrapped text should be aligned with the text of the other items. This is due to the list-style-position: outside.
  • item 4
ol
  1. item 1
  2. item 2
  3. item 3
  4. item 4
code
+  <div id="itemize">
     <h2>itemization</h2>
     <h3>ul</h3>
     <ul>
@@ -100,39 +80,20 @@ vel nostra tellus commodo pretium sapien sociosqu.
The doc<
       <li>item 4</li>
     </ol>
   </div>
-</body>
-</html>
-
Images
Inside a grid
Inside a card
Directly a card
In a block
<!DOCTYPE html>
-<html>
-<head>
-  <meta name="generator" content=
-  "HTML Tidy for HTML5 for Apple macOS version 5.8.0">
-  <title></title>
-</head>
-<body>
+
Images
Images
Inside a grid
Inside a card
Directly a card
In a block
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"></div>
+      <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"></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"></div>
+      <p>In a block</p><img src="../h/img/brutalism.webp"></img></div>
     </div>
   </div>
-</body>
-</html>
-
Buttons
Text Buttons
Classic
tbtb infotb oktb warntb errtb fatal
Sizes
TextsmallnormalBigHUGE
 Text tb sm tb smtb smtb sm
tbtbtbtb
tb bigtb bigtb big
tb hugetb huge
Classic
btnbtn infobtn okbtn warnbtn errbtn fatal
&lt;a class=&quot;btn btn-b&quot;&gt;btn-b&lt;/a&gt;
Sizes
btn smbtn infobtn big warnbtn huge err
&lt;a class=&quot;btn sm info&quot;&gt;btn sm info&lt;/a&gt;
Standardized Width btn std
btn stdbtn std infobtn std okbtn std warnbtn std errbtn std fatal
Big
btn stdbtn std infobtn std okbtn std warn
Huge
btn stdbtn std infobtn std ok
<!DOCTYPE html>
-<html>
-<head>
-  <meta name="generator" content=
-  "HTML Tidy for HTML5 for Apple macOS version 5.8.0">
-  <title></title>
-</head>
-<body>
+
Buttons
code
   <div id="buttons">
     <h1>Buttons</h1>
     <h2>Text Buttons</h2>
@@ -142,455 +103,53 @@ vel nostra tellus commodo pretium sapien sociosqu.
The doc<
     fatal</a>
     <h3>Sizes</h3>
     <div class="block">
-      Text<a class="tb sm">small</a><a class=
-      "tb">normal</a><a class="tb big">Big</a><a class=
-      "tb huge">HUGE</a>
+      Text<a class="tb sm">small</a><a class="tb">normal</a><a class="tb big">Big</a><a class="tb huge">HUGE</a>
     </div>
     <div class="row">
       <div class="col c2 gapless">
-        <span>Text <a class="tb sm">tb sm</a></span> <a class=
-        "tb sm info">tb sm</a><a class="tb sm ok">tb
+        <span>Text <a class="tb sm">tb sm</a></span> <a class="tb sm info">tb sm</a><a class="tb sm ok">tb
         sm</a><a class="tb sm warn">tb sm</a>
       </div>
       <div class="col c2 gapless">
-        <a class="tb">tb</a><a class="tb info">tb</a><a class=
-        "tb ok">tb</a><a class="tb warn">tb</a>
+        <a class="tb">tb</a><a class="tb info">tb</a><a class="tb ok">tb</a><a class="tb warn">tb</a>
       </div>
       <div class="col c3 gapless">
         <a class="tb big warn">tb big</a><a class="tb big err">tb
         big</a><a class="tb big fatal">tb big</a>
       </div>
       <div class="col c5 gapless">
-        <a class="tb huge err">tb huge</a><a class=
-        "tb huge fatal">tb huge</a>
+        <a class="tb huge err">tb huge</a><a class="tb huge fatal">tb huge</a>
       </div>
     </div>
     <h2>Classic</h2><a class="btn">btn</a><a class="btn info">btn
     info</a><a class="btn ok">btn ok</a><a class="btn warn">btn
     warn</a><a class="btn err">btn err</a><a class="btn fatal">btn
     fatal</a>
-    <pre class=
-    "block">&amp;lt;a class=&amp;quot;btn btn-b&amp;quot;&amp;gt;btn-b&amp;lt;/a&amp;gt;</pre>
-    <h2>Sizes</h2><a class="btn sm">btn sm</a><a class=
-    "btn info">btn info</a><a class="btn big warn">btn big
+    <pre class="block">&amp;lt;a class=&amp;quot;btn btn-b&amp;quot;&amp;gt;btn-b&amp;lt;/a&amp;gt;</pre>
+    <h2>Sizes</h2><a class="btn sm">btn sm</a><a class="btn info">btn info</a><a class="btn big warn">btn big
     warn</a><a class="btn huge err">btn huge err</a>
-    <pre class=
-    "block">&amp;lt;a class=&amp;quot;btn sm info&amp;quot;&amp;gt;btn sm info&amp;lt;/a&amp;gt;</pre>
+    <pre class="block">&amp;lt;a class=&amp;quot;btn sm info&amp;quot;&amp;gt;btn sm info&amp;lt;/a&amp;gt;</pre>
     <div class="row">
       <div class="col c4 card">
         <h3>Standardized Width <code>btn std</code></h3>
         <div class="col">
           <a class="btn std">btn std</a><a class="btn std info">btn
-          std info</a><a class="btn std ok">btn std ok</a><a class=
-          "btn std warn">btn std warn</a><a class="btn std err">btn
+          std info</a><a class="btn std ok">btn std ok</a><a class="btn std warn">btn std warn</a><a class="btn std err">btn
           std err</a><a class="btn std fatal">btn std fatal</a>
         </div>
       </div>
       <div class="col c4 card">
         <h3>Big</h3>
         <div class="col">
-          <a class="btn std big">btn std</a><a class=
-          "btn std big info">btn std info</a><a class=
-          "btn std big ok">btn std ok</a><a class=
-          "btn std big warn">btn std warn</a>
+          <a class="btn std big">btn std</a><a class="btn std big info">btn std info</a><a class="btn std big ok">btn std ok</a><a class="btn std big warn">btn std warn</a>
         </div>
       </div>
       <div class="col c4 card">
         <h3>Huge</h3>
         <div class="col">
-          <a class="btn std huge">btn std</a><a class=
-          "btn std huge info">btn std info</a><a class=
-          "btn std huge ok">btn std ok</a>
+          <a class="btn std huge">btn std</a><a class="btn std huge info">btn std info</a><a class="btn std huge ok">btn std ok</a>
         </div>
       </div>
     </div>
   </div>
-</body>
-</html>
-
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 MessageThis is a normal message with msg.
-
☞ Alert InfoThis is done by adding info to the class.
-
☑ Alert OKThis is done by adding ok to the class.
-
☣ Alert WarningThis is done by adding warn to the class.
-
☒ Alert ErrorThis is done by adding err to the class.
-
☒ Alert FatalThis is done by adding fatal to the class.
-
&lt;div class=&quot;msg&quot;&gt;
-  &lt;strong&gt;Alert headline!&lt;/strong&gt;
-  Message text
-&lt;/div&gt;
Forms


$
&lt;input type=&quot;text&quot;&gt;
-
&lt;textarea rows=&quot;3&quot;&gt;
-
&lt;span class=&quot;addon&quot;&gt;$&lt;/span&gt;&lt;input type=&quot;text&quot;&gt;
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 &lt;/span&gt; and &lt;input&gt; tags. Example: 
... &lt;/span&gt; &lt;input ...
$
... &lt;/span&gt;&lt;input ...
$
Navbars

&lt;nav class=&quot;nav&quot; tabindex=&quot;-1&quot; onclick=&quot;this.focus()&quot;&gt;
-    &lt;div class=&quot;container&quot;&gt;
-        &lt;a class=&quot;pagename current&quot; href=&quot;#&quot;&gt;BRUT&lt;/a&gt;
-        &lt;a href=&quot;#&quot;&gt;One&lt;/a&gt;
-        &lt;a href=&quot;#&quot;&gt;Two&lt;/a&gt;
-        &lt;a href=&quot;#&quot;&gt;Three&lt;/a&gt;
-    &lt;/div&gt;
-&lt;/nav&gt;
-&lt;button class=&quot;btn-close btn sm&quot;&gt;×&lt;/button&gt;
Tables
#Widgets SoldRevenue (£)Profit (£)
15102
210204
35001000200


&lt;table class=&quot;table&quot;&gt;
-  &lt;thead&gt;
-    &lt;tr&gt;
-      &lt;th&gt;#&lt;/th&gt;
-      &lt;th&gt;Widgets Sold&lt;/th&gt;
-    &lt;/tr&gt;
-  &lt;/thead&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;
-      &lt;td&gt;1&lt;/td&gt;
-      &lt;td&gt;5&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-      &lt;td&gt;2&lt;/td&gt;
-      &lt;td&gt;10&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-      &lt;td&gt;3&lt;/td&gt;
-      &lt;td&gt;500&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
-&lt;/table&gt;
-
Icons
Android Safe
☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №
-
The &quot;Android Safe&quot; icons work everywhere, tested on hundreds of devices.
-
Total Set
✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩
-
Although over 75% of Android devices we tested
-support all &quot;Total Set&quot; icons, if a substantial
-portion of your users use old Android devices
-you should stick to the &quot;Android Safe&quot; set.
-(The &quot;Total Set&quot; does not include icons from the &quot;Android Safe&quot; set.)
-
&lt;i class=&quot;ico&quot;&gt;Copy and paste icons from above here!&lt;/i&gt;
Grids
c12
c11
c1
c10
c2
c9
c3
c8
c4
c7
c5
c6
c6
c5
c7
c4
c8
c3
c9
c2
c10
c1
c11
c12

&lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;c12&quot;&gt;12&lt;/div&gt;
&lt;/div&gt;
-
&lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;c4&quot;&gt;4&lt;/div&gt;
    &lt;div class=&quot;c8&quot;&gt;8&lt;/div&gt;
&lt;/div&gt;
-
Headings
By default there is some space before and after any heading:
h1
h2
h3
h4
h5
h6

You can remove the space by using the class tight to the heading:
h1 tight
h2 tight
h3 tight
h4 tight
h5 tight
h6 tight

&lt;h1&gt;Level One Heading&lt;/h1&gt;
<!DOCTYPE html>
-<html>
-<head>
-  <meta name="generator" content=
-  "HTML Tidy for HTML5 for Apple macOS version 5.8.0">
-  <title></title>
-</head>
-<body>
-  <div>
-    <h1>Messages</h1>
-    <div class="row">
-      <div class="col c6 gapless">
-        <h2>Basic Messages</h2><br>
-        <div class="msg">
-          <strong>Normal Message</strong> This is a normal message
-          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.
-        </div>
-        <div class="msg ok">
-          <strong><i class="ico">☑</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.
-        </div>
-        <div class="msg err">
-          <strong><i class="ico">☒</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.
-        </div>
-      </div>
-      <div class="col c6 gapless">
-        <h2>Strong Alerts</h2><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><i class="ico">☞</i> Alert Info</strong>This is
-          done by adding <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.
-        </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.
-        </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.
-        </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.
-        </div>
-      </div>
-    </div>
-    <pre>&amp;lt;div class=&amp;quot;msg&amp;quot;&amp;gt;
-  &amp;lt;strong&amp;gt;Alert headline!&amp;lt;/strong&amp;gt;
-  Message text
-&amp;lt;/div&amp;gt;</pre>
-    <div>
-      <h1>Forms</h1><input class="neutral" placeholder="input"
-      type="text"><br>
-      <textarea class="neutral" placeholder="textarea" rows=
-      "3"></textarea><br>
-      <span class="addon bg-info">$</span><input type="text"><br>
-      <pre>&amp;lt;input type=&amp;quot;text&amp;quot;&amp;gt;
-<br>&amp;lt;textarea rows=&amp;quot;3&amp;quot;&amp;gt;
-<br>&amp;lt;span class=&amp;quot;addon&amp;quot;&amp;gt;$&amp;lt;/span&amp;gt;&amp;lt;input type=&amp;quot;text&amp;quot;&amp;gt;</pre>
-      <div class="msg">
-        <strong>Be careful with addons!</strong> If you do not want
-        a space between the addon and the input make sure that
-        there is no space between the
-        <code>&amp;lt;/span&amp;gt;</code> and
-        <code>&amp;lt;input&amp;gt;</code> tags. Example:
-        <pre>... &amp;lt;/span&amp;gt; &amp;lt;input ...</pre><span class="addon">$</span><input class="smooth"
-        type="text">
-        <pre>... &amp;lt;/span&amp;gt;&amp;lt;input ...</pre><span class="addon">$</span><input class="smooth"
-        type="text">
-      </div>
-    </div>
-    <div class="navbar">
-      <h1>Navbars</h1>
-      <nav class="nav" onclick="this.focus()" tabindex="-1">
-        <div class="container">
-          <a class="pagename current" href="#">BRUT</a><a href=
-          "#">One</a><a href="#">Two</a><a href=
-          "#">Three</a><a href="#">Four</a>
-        </div>
-      </nav><button class="btn-close btn sm">×</button><br>
-      <pre>&amp;lt;nav class=&amp;quot;nav&amp;quot; tabindex=&amp;quot;-1&amp;quot; onclick=&amp;quot;this.focus()&amp;quot;&amp;gt;
-    &amp;lt;div class=&amp;quot;container&amp;quot;&amp;gt;
-        &amp;lt;a class=&amp;quot;pagename current&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;BRUT&amp;lt;/a&amp;gt;
-        &amp;lt;a href=&amp;quot;#&amp;quot;&amp;gt;One&amp;lt;/a&amp;gt;
-        &amp;lt;a href=&amp;quot;#&amp;quot;&amp;gt;Two&amp;lt;/a&amp;gt;
-        &amp;lt;a href=&amp;quot;#&amp;quot;&amp;gt;Three&amp;lt;/a&amp;gt;
-    &amp;lt;/div&amp;gt;
-&amp;lt;/nav&amp;gt;
-&amp;lt;button class=&amp;quot;btn-close btn sm&amp;quot;&amp;gt;×&amp;lt;/button&amp;gt;</pre>
-    </div>
-    <div>
-      <h1>Tables</h1>
-      <table class="table">
-        <thead>
-          <tr>
-            <th>#</th>
-            <th>Widgets Sold</th>
-            <th>Revenue (£)</th>
-            <th>Profit (£)</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>1</td>
-            <td>5</td>
-            <td>10</td>
-            <td>2</td>
-          </tr>
-          <tr>
-            <td>2</td>
-            <td>10</td>
-            <td>20</td>
-            <td>4</td>
-          </tr>
-          <tr>
-            <td>3</td>
-            <td>500</td>
-            <td>1000</td>
-            <td>200</td>
-          </tr>
-        </tbody>
-      </table><br>
-      <br>
-      <pre>&amp;lt;table class=&amp;quot;table&amp;quot;&amp;gt;
-  &amp;lt;thead&amp;gt;
-    &amp;lt;tr&amp;gt;
-      &amp;lt;th&amp;gt;#&amp;lt;/th&amp;gt;
-      &amp;lt;th&amp;gt;Widgets Sold&amp;lt;/th&amp;gt;
-    &amp;lt;/tr&amp;gt;
-  &amp;lt;/thead&amp;gt;
-  &amp;lt;tbody&amp;gt;
-    &amp;lt;tr&amp;gt;
-      &amp;lt;td&amp;gt;1&amp;lt;/td&amp;gt;
-      &amp;lt;td&amp;gt;5&amp;lt;/td&amp;gt;
-    &amp;lt;/tr&amp;gt;
-    &amp;lt;tr&amp;gt;
-      &amp;lt;td&amp;gt;2&amp;lt;/td&amp;gt;
-      &amp;lt;td&amp;gt;10&amp;lt;/td&amp;gt;
-    &amp;lt;/tr&amp;gt;
-    &amp;lt;tr&amp;gt;
-      &amp;lt;td&amp;gt;3&amp;lt;/td&amp;gt;
-      &amp;lt;td&amp;gt;500&amp;lt;/td&amp;gt;
-    &amp;lt;/tr&amp;gt;
-  &amp;lt;/tbody&amp;gt;
-&amp;lt;/table&amp;gt;
-</pre>
-    </div>
-    <h1>Icons</h1>
-    <div class="icons">
-      <div class="row">
-        <div class="c6">
-          <div class="col card">
-            <div class="block">
-              <b>Android Safe</b>
-            </div><i class="ico block" style=
-            "line-height: 1.5rem">☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛
-            ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №</i>
-            <div class="msg push">
-              The &amp;quot;Android Safe&amp;quot; icons work
-              everywhere, tested on hundreds of devices.
-            </div>
-          </div>
-        </div>
-        <div class="c6">
-          <div class="col card">
-            <div class="block">
-              <b>Total Set</b>
-            </div><i class="ico block" style=
-            "line-height: 1.5rem">✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼
-            ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍
-            ۩</i>
-            <div class="msg warn push">
-              Although over 75% of Android devices we tested
-              support all &amp;quot;Total Set&amp;quot; icons, if a
-              substantial portion of your users use old Android
-              devices you should stick to the &amp;quot;Android
-              Safe&amp;quot; set. (The &amp;quot;Total
-              Set&amp;quot; does not include icons from the
-              &amp;quot;Android Safe&amp;quot; set.)
-            </div>
-          </div>
-        </div>
-      </div>
-      <pre>&amp;lt;i class=&amp;quot;ico&amp;quot;&amp;gt;Copy and paste icons from above here!&amp;lt;/i&amp;gt;</pre>
-      <h1>Grids</h1>
-      <div class="row">
-        <div class="bg-neutral c12">
-          c12
-        </div>
-      </div>
-      <div class="row">
-        <div class="bg-neutral c11">
-          c11
-        </div>
-        <div class="light c1">
-          c1
-        </div>
-      </div>
-      <div class="row">
-        <div class="bg-neutral c10">
-          c10
-        </div>
-        <div class="light c2">
-          c2
-        </div>
-      </div>
-      <div class="row">
-        <div class="bg-neutral c9">
-          c9
-        </div>
-        <div class="light c3">
-          c3
-        </div>
-      </div>
-      <div class="row">
-        <div class="bg-neutral c8">
-          c8
-        </div>
-        <div class="light c4">
-          c4
-        </div>
-      </div>
-      <div class="row">
-        <div class="bg-neutral c7">
-          c7
-        </div>
-        <div class="light c5">
-          c5
-        </div>
-      </div>
-      <div class="row">
-        <div class="bg-neutral c6">
-          c6
-        </div>
-        <div class="light c6">
-          c6
-        </div>
-      </div>
-      <div class="row">
-        <div class="bg-neutral c5">
-          c5
-        </div>
-        <div class="light c7">
-          c7
-        </div>
-      </div>
-      <div class="row">
-        <div class="bg-neutral c4">
-          c4
-        </div>
-        <div class="light c8">
-          c8
-        </div>
-      </div>
-      <div class="row">
-        <div class="bg-neutral c3">
-          c3
-        </div>
-        <div class="light c9">
-          c9
-        </div>
-      </div>
-      <div class="row">
-        <div class="bg-neutral c2">
-          c2
-        </div>
-        <div class="light c10">
-          c10
-        </div>
-      </div>
-      <div class="row">
-        <div class="bg-neutral c1">
-          c1
-        </div>
-        <div class="light c11">
-          c11
-        </div>
-      </div>
-      <div class="row">
-        <div class="light c12">
-          c12
-        </div>
-      </div><br>
-      <pre>&amp;lt;div class=&amp;quot;row&amp;quot;&amp;gt;<br>    &amp;lt;div class=&amp;quot;c12&amp;quot;&amp;gt;12&amp;lt;/div&amp;gt;<br>&amp;lt;/div&amp;gt;
-<br>&amp;lt;div class=&amp;quot;row&amp;quot;&amp;gt;<br>    &amp;lt;div class=&amp;quot;c4&amp;quot;&amp;gt;4&amp;lt;/div&amp;gt;<br>    &amp;lt;div class=&amp;quot;c8&amp;quot;&amp;gt;8&amp;lt;/div&amp;gt;<br>&amp;lt;/div&amp;gt;
-</pre>
-    </div>
-    <h1>Headings</h1>
-    <div class="headings">
-      <p>By default there is some space before and after any
-      heading:</p>
-      <h1>h1</h1>
-      <h2>h2</h2>
-      <h3>h3</h3>
-      <h4>h4</h4>
-      <h5>h5</h5>
-      <h6>h6</h6><br>
-      <p>You can remove the space by using the class
-      <code>tight</code> to the heading:</p>
-      <h1 class="tight">h1 tight</h1>
-      <h2 class="tight">h2 tight</h2>
-      <h3 class="tight">h3 tight</h3>
-      <h4 class="tight">h4 tight</h4>
-      <h5 class="tight">h5 tight</h5>
-      <h6 class="tight">h6 tight</h6><br>
-      <pre>&amp;lt;h1&amp;gt;Level One Heading&amp;lt;/h1&amp;gt;</pre>
-    </div>
-  </div>
-</body>
-</html>
-

\ No newline at end of file
+
\ No newline at end of file diff --git a/shell.nix b/shell.nix index 59505ff..3ca1d69 100644 --- a/shell.nix +++ b/shell.nix @@ -6,6 +6,7 @@ mkShell { minify babashka html-tidy + html-xml-utils ]; shellHook = '' echo "shell with lessc and minify" diff --git a/src/general.less b/src/general.less index 44f3cd9..cef98a5 100644 --- a/src/general.less +++ b/src/general.less @@ -44,6 +44,7 @@ ol { padding-inline-start: 2rem; } ul > li::marker { font-size: 1.5rem; } +summary:hover { cursor: pointer; } .sm { font-size: 0.75rem; } .big { font-size: 2rem; line-height: 3.5rem;} @@ -51,4 +52,11 @@ ul > li::marker { font-size: 1.5rem; } /* highligh revert the colors */ .hl { background: var(--fg); color: var(--bg); } /* 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; } +.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; + p { + text-indent: 3rem; + } + }