diff --git a/bb/brut/site.clj b/bb/brut/site.clj index 092aaeb..6ee6c66 100644 --- a/bb/brut/site.clj +++ b/bb/brut/site.clj @@ -113,8 +113,12 @@ ", " [:strong "strong"] ", " [:i "italic"] ", " [:em "emphasis"] - ", " [:code "code"] - ", and if you really want something to be extremly visible use the class " [:code.hl "hl"] "."] + ", " [:code "code"] ". " + "If you really want something to be extremly visible, " + [:strong.hl "use the class "[:code.hl "hl"]] + "."] + [:p "Links will looks like this into text: " + [:a {:href "#"} "This is a link inside a paragraph."]] [: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." @@ -213,26 +217,7 @@ [:a {:class "tb sm info"} "Info"] [:a {:class "tb ok"} "OK"] [:a {:class "tb big warn"} "Warn"] - [:a {:class "tb huge err"} "ERR"]] - [:h4 "In a grid"] - [:div.row.gapless - [:div.col.c2.gapless - [:a {:class "tb sm"} "tb sm"] - [:a {:class "tb sm info"} "tb sm"] - [:a {:class "tb sm ok"} "tb sm"] - [:a {:class "tb sm warn"} "tb sm"]] - [:div.col.c2.gapless - [:a {:class "tb"} "tb"] - [:a {:class "tb info"} "tb"] - [:a {:class "tb ok"} "tb"] - [:a {:class "tb warn"} "tb"]] - [:div.col.c3.gapless - [:a {:class "tb big warn"} "tb big"] - [:a {:class "tb big err"} "tb big"] - [:a {:class "tb big fatal"} "tb big"]] - [:div.col.c5.gapless - [:a {:class "tb huge err"} "tb huge"] - [:a {:class "tb huge fatal"} "tb huge"]]]] + [:a {:class "tb huge err"} "ERR"]]] buttons [:div {:id "buttons"} [:h2 "Classic"] [:a {:class "btn"} "btn"] @@ -374,8 +359,12 @@ [:a {:href "#"} "Four"]]] [:button {:class "btn-close btn sm"} "×"]] navbar-section {:title "Navbar" - :cards [navbar] - } + :cards [navbar]} + footer [:footer + [:div.container + [:p "Made by " [:a {:href "https://yannesposito.com"} "Yann Esposito"]]]] + footer-section {:title "Footer" + :cards [footer]} table [:table {:class "table"} [:thead [:tr @@ -409,7 +398,7 @@ "The \"Android Safe\" icons work everywhere, tested on hundreds of devices."] [:p (mapcat (fn [w i] - [w " " [:i.ico i] " "]) + [ [:span 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 " @@ -430,46 +419,52 @@ "\"Android Safe\" set.)"]] icons-section {:title "icons" :cards [basic-icons full-icons]} - grid [:div - [:div {:class "row"} - [:div {:class "bg-neutral c12"} "c12"]] - [:div {:class "row"} - [:div {:class "bg-neutral c11"} "c11"] - [:div {:class "light c1"} "c1"]] - [:div {:class "row"} - [:div {:class "bg-neutral c10"} "c10"] - [:div {:class "light c2"} "c2"]] - [:div {:class "row"} - [:div {:class "bg-neutral c9"} "c9"] - [:div {:class "light c3"} "c3"]] - [:div {:class "row"} - [:div {:class "bg-neutral c8"} "c8"] - [:div {:class "light c4"} "c4"]] - [:div {:class "row"} - [:div {:class "bg-neutral c7"} "c7"] - [:div {:class "light c5"} "c5"]] - [:div {:class "row"} - [:div {:class "bg-neutral c6"} "c6"] - [:div {:class "light c6"} "c6"]] - [:div {:class "row"} - [:div {:class "bg-neutral c5"} "c5"] - [:div {:class "light c7"} "c7"]] - [:div {:class "row"} - [:div {:class "bg-neutral c4"} "c4"] - [:div {:class "light c8"} "c8"]] - [:div {:class "row"} - [:div {:class "bg-neutral c3"} "c3"] - [:div {:class "light c9"} "c9"]] - [:div {:class "row"} - [:div {:class "bg-neutral c2"} "c2"] - [:div {:class "light c10"} "c10"]] - [:div {:class "row"} - [:div {:class "bg-neutral c1"} "c1"] - [:div {:class "light c11"} "c11"]] - [:div {:class "row"} - [:div {:class "light c12"} "c12"]]] + grid + [:div + [:h3 "With default gap"] + [:div + (for [i (range 12 -1 -1)] + (let [cl (str "c" i) + co-cl (str "c" (- 12 i))] + [:div.row + (when (> i 0) + [:div.bg-neutral {:class cl} cl]) + (when (> (- 12 i) 0) + [:div.y {:class co-cl} co-cl])]))]] + grid-gapless + [:div + [:h3 "Gapless"] + [:div + (for [i (range 12 -1 -1)] + (let [cl (str "c" i) + co-cl (str "c" (- 12 i))] + [:div.row.gapless + (when (> i 0) + [:div.bg-neutral {:class cl} cl]) + (when (> (- 12 i) 0) + [:div.y {:class co-cl} co-cl])]))]] + grid-3col + [:div + [:h3 "3 columns"] + [:div + (for [i (range 11 0 -1) + j (range (- 11 i) -1 -1)] + (let [k (- 12 i j) + cli (str "c" i) + clj (str "c" j) + clk (str "c" k)] + (if (= j 0) + [:br] + [:div.row + (when (> j 0) + [:div.b {:class clj} clj]) + (when (> i 0) + [:div.bg-neutral {:class cli} cli]) + (when (> k 0) + [:div.r {:class clk} clk]) + ])))]] grid-section {:title "Grid" - :cards [grid]}] + :cards [grid grid-gapless grid-3col]}] [:div.container (for [{:keys [title cards]} [textual-section grid-section @@ -479,7 +474,8 @@ tables-section buttons-section messages-section - navbar-section]] + navbar-section + footer-section]] [:div.col [:h2 {:id title} [:a {:href (str "#" title)} [:i.ico "§"]] " " diff --git a/brut.min.css b/brut.min.css index cda38d1..61c2512 100644 --- a/brut.min.css +++ b/brut.min.css @@ -1 +1 @@ -/* Copyright 2022 Yann Esposito; MIT licensed */:root{--bg:#fff;--fg:#000;--bg2:#eee;--darken:rgba(0, 0, 0, 0.1);--nl:#d9d9d9;--n0:#999;--n1:#808080;--n2:#666666;--shadow:rgba(0, 0, 0, 0.65);--y:#b58900;--o:#cb4b16;--r:#dc322f;--m:#d33682;--v:#6c71c4;--b:#268bd2;--c:#2aa198;--g:#859900;--accent:var(--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 +/* Copyright 2022 Yann Esposito; MIT licensed */:root{--bg:#fff;--fg:#000;--bg2:#eee;--darken:rgba(0, 0, 0, 0.1);--nl:#d9d9d9;--n0:#999;--n1:#808080;--n2:#666666;--shadow:rgba(0, 0, 0, 0.65);--y:#b58900;--o:#cb4b16;--r:#dc322f;--m:#d33682;--v:#6c71c4;--b:#268bd2;--c:#2aa198;--g:#859900;--accent:var(--b)}@media(prefers-color-scheme:dark){:root body{filter:invert(100%)hue-rotate(180deg)}:root body .tg,:root body .btn{filter:invert(100%)hue-rotate(180deg)}:root img{filter:brightness(80%)invert(100%)}}html{background:var(--bg);color:var(--fg)}.neutral{color:var(--n0)}.bg-neutral{background:var(--nl)}a{color:var(--fg)}p>a,li>a{color:var(--accent)}.msg,.btn{background-color:var(--bg2)}.b,.info{color:var(--bg);background-color:var(--b)}.g,.ok{color:var(--bg);background-color:var(--g)}.y,.warn{color:var(--bg);background-color:var(--y)}.r,.err{color:var(--bg);background-color:var(--r)}.m,.fatal{color:var(--bg);background-color:var(--m)}.o{color:var(--bg);background-color:var(--o)}.v{color:var(--bg);background-color:var(--v)}.c{color:var(--bg);background-color:var(--c)}html,body{font-size:12px;line-height:1.5em;min-height:100vh;margin:0;padding:0;border:0;outline:0}*{box-sizing:border-box}body,textarea,input,select{background:var(--bg);color:var(--fg);border-radius:0;font-family:Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;font-size:1rem;margin:0}img{max-width:100%}.addon,.sm,.nav,textarea,input,select{outline:0;line-height:1rem}.container{padding:0 20px;width:100%}@media(min-width:1380px){.container{margin:auto;max-width:1270px}}pre{background:var(--bg2);padding:10px;overflow:scroll}code{background:var(--darken);border:solid 1px var(--darken);padding:1px}blockquote{margin:1rem 0;padding-left:1rem;border-left:solid 1rem var(--nl)}ul{list-style-type:square;list-style-position:outside;padding-inline-start:1.5rem}ol{padding-inline-start:2rem}ul>li::marker{font-size:1.5rem}summary:hover{cursor:pointer;background:var(--bg2)}table{font-size:1rem}.sm{font-size:.75rem;line-height:.65rem}.big{font-size:2rem;line-height:2.8rem}.huge{font-size:3rem;line-height:4.1rem}.hl{background:var(--fg);color:var(--bg)}.doc{max-width:65ch;font-size:1.25rem;font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif;line-height:1.5em}.doc p{text-indent:3rem}.tb,.btn{text-decoration:none;display:inline-block;text-align:center}.tb{font-weight:700;cursor:pointer;padding:2px;vertical-align:baseline}.tb:before,.tb:after{opacity:.3;display:inline-block}.tb:before{content:"❬"}.tb:after{content:"❭"}.tb:hover{text-decoration:underline}.tb:hover::before,.tb:hover::after{opacity:1}.tb:active:before{content:"❰"}.tb:active:after{content:"❱"}.btn{border:solid 2px var(--fg);font-weight:700;cursor:pointer;display:inline-block;margin:0 4px 4px 0;padding:1rem 2rem;box-shadow:4px 4px var(--shadow);vertical-align:bottom}.btn:hover{box-shadow:4px 4px var(--fg)}.btn:active,.btn:focus{box-shadow:1px 1px #000;position:relative;top:3px;left:3px}.btn.sm{padding:.5rem 1rem}.btn.std{width:12rem}.btn.big.std{width:20rem}.btn.huge.std{width:24rem}.col,.row{display:flex;flex-direction:row;justify-content:stretch;align-items:stretch;flex-wrap:wrap;gap:1rem}.row>*{flex:1}.col>*{flex:0}.col{flex-direction:column}.start{justify-content:flex-start;align-items:flex-start}.middle{justify-content:center;align-item:center}.gapless{gap:0}.table,.c12{width:100%;flex:12}.c11{flex:11;width:91.66%}.c10{flex:10;width:83.33%}.c9{flex:9;width:75%}.c8{flex:8;width:66.66%}.c7{flex:7;width:58.33%}.c6{flex:6;width:50%}.c5{flex:5;width:41.66%}.c4{flex:4;width:33.33%}.c3{flex:3;width:25%}.c2{flex:2;width:16.66%}.c1{flex:1;width:8.33%}@media(max-width:800px){.row>*{flex:0 1 100%;width:100%}.no-mobile{display:none}}.no-grow{flex:0}.fixed{flex-grow:0;flex-shrink:0}.card,.block{padding:1rem;border:solid 1rem}.col.card,.col.block{justify-content:flex-start;align-items:flex-start}.card{border-color:var(--nl)}.block{border-color:transparent}.central{display:flex;align-items:center;justify-content:center;background-size:cover;min-height:100vh}button~.central{min-height:calc(100vh - 50px)}.hero{padding:2rem;border:double 1rem}.fill{flex-grow:1}.push{justify-self:flex-end;margin-top:auto}h1,h2,h3,h4,h5,h6{display:block;padding:.5rem;font-size:1rem;margin:0;outline:0;color:var(--bg);margin:1rem 0;border:solid 1px var(--fg)}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:var(--bg)}.tight{margin:0}h1{background:var(--fg)}h2{background:var(--n2)}h2{background:var(--n1)}h3{background:var(--n0)}h4{background:var(--nl);color:var(--fg)}h5{background:var(--bg2);color:var(--fg)}h6{color:var(--fg)}.ico{font-family:Arial Unicode MS,Lucida Sans Unicode;font-style:normal}.big.ico,.huge.ico{vertical-align:middle}label>*{display:inline}form>*{display:block;margin-bottom:10px}textarea,input,select{border:2px solid;padding:8px}textarea,input[type=text]{-webkit-appearance:none;width:13em;outline:0;border:2px solid}.addon{padding:8px 12px;border-width:2px;border-style:solid none solid solid}textarea:focus,input:focus,select:focus{border-color:var(--i1)}.nav{background:var(--bg2);border-bottom:solid 1px var(--darken)}footer{background:var(--bg2);border-top:solid 1px var(--darken)}.nav{height:3rem;padding:11px 0 15px}.nav a{text-decoration:none;opacity:.7;padding-right:1em;position:relative;top:-1px}.nav a:hover{opacity:1}.nav .pagename{opacity:1;font-weight:700;font-size:22px;top:1px}.btn.btn-close{float:right;font-size:25px;margin:-4.1rem 0;display:none;border:none;box-shadow:none;background:0 0;color:var(--fg)}@media(max-width:640px){.btn.btn-close{display:block}.nav{overflow:hidden}.pagename{margin-top:-11px}.nav:active,.nav:focus{height:auto}.nav div:before{background:var(--bg2);border-bottom:11px double;border-top:3px solid;content:'';float:right;height:.25rem;position:relative;right:0;top:8px;width:2rem}.nav a{display:block;padding:.5em 0;width:50%}}.table th,.table td{padding:.5em;text-align:left}.table tbody>:nth-child(2n-1){background:var(--bg2)}.msg{border-left:5px solid var(--darken);padding:1rem} \ No newline at end of file diff --git a/h/docs.html b/h/docs.html index ee75f9d..ddb4597 100644 --- a/h/docs.html +++ b/h/docs.html @@ -1,10 +1,12 @@ -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. If you really want something to be extremly visible, use the class hl.
Links will looks like this into text: This is a link inside a paragraph.
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>,
-    <code>code</code>, and if you really want something to be
-    extremly visible use the class <code class="hl">hl</code>.</p>
+    <code>code</code>. If you really want something to be extremly
+    visible, <strong class="hl">use the class <code class="hl">hl</code></strong>.</p>
+    <p>Links will looks like this into text: <a href="#">This is a
+    link inside a paragraph.</a></p>
     <p>The text should be <strong class="hl">very dense</strong> on
     purpose. Forget your lessons about nice space in design here.
     The goal of this design is to produce <em>professional</em> UI
@@ -87,105 +89,824 @@
       <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
With default gap
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">
-        c12
+    <h3>With default gap</h3>
+    <div>
+      <div class="row">
+        <div class="bg-neutral c12">
+          c12
+        </div>
+      </div>
+      <div class="row">
+        <div class="bg-neutral c11">
+          c11
+        </div>
+        <div class="y c1">
+          c1
+        </div>
+      </div>
+      <div class="row">
+        <div class="bg-neutral c10">
+          c10
+        </div>
+        <div class="y c2">
+          c2
+        </div>
+      </div>
+      <div class="row">
+        <div class="bg-neutral c9">
+          c9
+        </div>
+        <div class="y c3">
+          c3
+        </div>
+      </div>
+      <div class="row">
+        <div class="bg-neutral c8">
+          c8
+        </div>
+        <div class="y c4">
+          c4
+        </div>
+      </div>
+      <div class="row">
+        <div class="bg-neutral c7">
+          c7
+        </div>
+        <div class="y c5">
+          c5
+        </div>
+      </div>
+      <div class="row">
+        <div class="bg-neutral c6">
+          c6
+        </div>
+        <div class="y c6">
+          c6
+        </div>
+      </div>
+      <div class="row">
+        <div class="bg-neutral c5">
+          c5
+        </div>
+        <div class="y c7">
+          c7
+        </div>
+      </div>
+      <div class="row">
+        <div class="bg-neutral c4">
+          c4
+        </div>
+        <div class="y c8">
+          c8
+        </div>
+      </div>
+      <div class="row">
+        <div class="bg-neutral c3">
+          c3
+        </div>
+        <div class="y c9">
+          c9
+        </div>
+      </div>
+      <div class="row">
+        <div class="bg-neutral c2">
+          c2
+        </div>
+        <div class="y c10">
+          c10
+        </div>
+      </div>
+      <div class="row">
+        <div class="bg-neutral c1">
+          c1
+        </div>
+        <div class="y c11">
+          c11
+        </div>
+      </div>
+      <div class="row">
+        <div class="y c12">
+          c12
+        </div>
       </div>
     </div>
-    <div class="row">
-      <div class="bg-neutral c11">
-        c11
+  </div>
+
Gapless
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>
+    <h3>Gapless</h3>
+    <div>
+      <div class="row gapless">
+        <div class="bg-neutral c12">
+          c12
+        </div>
       </div>
-      <div class="light c1">
-        c1
+      <div class="row gapless">
+        <div class="bg-neutral c11">
+          c11
+        </div>
+        <div class="y c1">
+          c1
+        </div>
+      </div>
+      <div class="row gapless">
+        <div class="bg-neutral c10">
+          c10
+        </div>
+        <div class="y c2">
+          c2
+        </div>
+      </div>
+      <div class="row gapless">
+        <div class="bg-neutral c9">
+          c9
+        </div>
+        <div class="y c3">
+          c3
+        </div>
+      </div>
+      <div class="row gapless">
+        <div class="bg-neutral c8">
+          c8
+        </div>
+        <div class="y c4">
+          c4
+        </div>
+      </div>
+      <div class="row gapless">
+        <div class="bg-neutral c7">
+          c7
+        </div>
+        <div class="y c5">
+          c5
+        </div>
+      </div>
+      <div class="row gapless">
+        <div class="bg-neutral c6">
+          c6
+        </div>
+        <div class="y c6">
+          c6
+        </div>
+      </div>
+      <div class="row gapless">
+        <div class="bg-neutral c5">
+          c5
+        </div>
+        <div class="y c7">
+          c7
+        </div>
+      </div>
+      <div class="row gapless">
+        <div class="bg-neutral c4">
+          c4
+        </div>
+        <div class="y c8">
+          c8
+        </div>
+      </div>
+      <div class="row gapless">
+        <div class="bg-neutral c3">
+          c3
+        </div>
+        <div class="y c9">
+          c9
+        </div>
+      </div>
+      <div class="row gapless">
+        <div class="bg-neutral c2">
+          c2
+        </div>
+        <div class="y c10">
+          c10
+        </div>
+      </div>
+      <div class="row gapless">
+        <div class="bg-neutral c1">
+          c1
+        </div>
+        <div class="y c11">
+          c11
+        </div>
+      </div>
+      <div class="row gapless">
+        <div class="y c12">
+          c12
+        </div>
       </div>
     </div>
-    <div class="row">
-      <div class="bg-neutral c10">
-        c10
+  </div>
+
3 columns

c1
c10
c1

c2
c9
c1
c1
c9
c2

c3
c8
c1
c2
c8
c2
c1
c8
c3

c4
c7
c1
c3
c7
c2
c2
c7
c3
c1
c7
c4

c5
c6
c1
c4
c6
c2
c3
c6
c3
c2
c6
c4
c1
c6
c5

c6
c5
c1
c5
c5
c2
c4
c5
c3
c3
c5
c4
c2
c5
c5
c1
c5
c6

c7
c4
c1
c6
c4
c2
c5
c4
c3
c4
c4
c4
c3
c4
c5
c2
c4
c6
c1
c4
c7

c8
c3
c1
c7
c3
c2
c6
c3
c3
c5
c3
c4
c4
c3
c5
c3
c3
c6
c2
c3
c7
c1
c3
c8

c9
c2
c1
c8
c2
c2
c7
c2
c3
c6
c2
c4
c5
c2
c5
c4
c2
c6
c3
c2
c7
c2
c2
c8
c1
c2
c9

c10
c1
c1
c9
c1
c2
c8
c1
c3
c7
c1
c4
c6
c1
c5
c5
c1
c6
c4
c1
c7
c3
c1
c8
c2
c1
c9
c1
c1
c10

code
+  <div>
+    <h3>3 columns</h3>
+    <div>
+      <br></br>
+      <div class="row">
+        <div class="b c1">
+          c1
+        </div>
+        <div class="bg-neutral c10">
+          c10
+        </div>
+        <div class="r c1">
+          c1
+        </div>
+      </div><br></br>
+      <div class="row">
+        <div class="b c2">
+          c2
+        </div>
+        <div class="bg-neutral c9">
+          c9
+        </div>
+        <div class="r c1">
+          c1
+        </div>
       </div>
-      <div class="light c2">
-        c2
+      <div class="row">
+        <div class="b c1">
+          c1
+        </div>
+        <div class="bg-neutral c9">
+          c9
+        </div>
+        <div class="r c2">
+          c2
+        </div>
+      </div><br></br>
+      <div class="row">
+        <div class="b c3">
+          c3
+        </div>
+        <div class="bg-neutral c8">
+          c8
+        </div>
+        <div class="r c1">
+          c1
+        </div>
       </div>
-    </div>
-    <div class="row">
-      <div class="bg-neutral c9">
-        c9
+      <div class="row">
+        <div class="b c2">
+          c2
+        </div>
+        <div class="bg-neutral c8">
+          c8
+        </div>
+        <div class="r c2">
+          c2
+        </div>
       </div>
-      <div class="light c3">
-        c3
+      <div class="row">
+        <div class="b c1">
+          c1
+        </div>
+        <div class="bg-neutral c8">
+          c8
+        </div>
+        <div class="r c3">
+          c3
+        </div>
+      </div><br></br>
+      <div class="row">
+        <div class="b c4">
+          c4
+        </div>
+        <div class="bg-neutral c7">
+          c7
+        </div>
+        <div class="r c1">
+          c1
+        </div>
       </div>
-    </div>
-    <div class="row">
-      <div class="bg-neutral c8">
-        c8
+      <div class="row">
+        <div class="b c3">
+          c3
+        </div>
+        <div class="bg-neutral c7">
+          c7
+        </div>
+        <div class="r c2">
+          c2
+        </div>
       </div>
-      <div class="light c4">
-        c4
+      <div class="row">
+        <div class="b c2">
+          c2
+        </div>
+        <div class="bg-neutral c7">
+          c7
+        </div>
+        <div class="r c3">
+          c3
+        </div>
       </div>
-    </div>
-    <div class="row">
-      <div class="bg-neutral c7">
-        c7
+      <div class="row">
+        <div class="b c1">
+          c1
+        </div>
+        <div class="bg-neutral c7">
+          c7
+        </div>
+        <div class="r c4">
+          c4
+        </div>
+      </div><br></br>
+      <div class="row">
+        <div class="b c5">
+          c5
+        </div>
+        <div class="bg-neutral c6">
+          c6
+        </div>
+        <div class="r c1">
+          c1
+        </div>
       </div>
-      <div class="light c5">
-        c5
+      <div class="row">
+        <div class="b c4">
+          c4
+        </div>
+        <div class="bg-neutral c6">
+          c6
+        </div>
+        <div class="r c2">
+          c2
+        </div>
       </div>
-    </div>
-    <div class="row">
-      <div class="bg-neutral c6">
-        c6
+      <div class="row">
+        <div class="b c3">
+          c3
+        </div>
+        <div class="bg-neutral c6">
+          c6
+        </div>
+        <div class="r c3">
+          c3
+        </div>
       </div>
-      <div class="light c6">
-        c6
+      <div class="row">
+        <div class="b c2">
+          c2
+        </div>
+        <div class="bg-neutral c6">
+          c6
+        </div>
+        <div class="r c4">
+          c4
+        </div>
       </div>
-    </div>
-    <div class="row">
-      <div class="bg-neutral c5">
-        c5
+      <div class="row">
+        <div class="b c1">
+          c1
+        </div>
+        <div class="bg-neutral c6">
+          c6
+        </div>
+        <div class="r c5">
+          c5
+        </div>
+      </div><br></br>
+      <div class="row">
+        <div class="b c6">
+          c6
+        </div>
+        <div class="bg-neutral c5">
+          c5
+        </div>
+        <div class="r c1">
+          c1
+        </div>
       </div>
-      <div class="light c7">
-        c7
+      <div class="row">
+        <div class="b c5">
+          c5
+        </div>
+        <div class="bg-neutral c5">
+          c5
+        </div>
+        <div class="r c2">
+          c2
+        </div>
       </div>
-    </div>
-    <div class="row">
-      <div class="bg-neutral c4">
-        c4
+      <div class="row">
+        <div class="b c4">
+          c4
+        </div>
+        <div class="bg-neutral c5">
+          c5
+        </div>
+        <div class="r c3">
+          c3
+        </div>
       </div>
-      <div class="light c8">
-        c8
+      <div class="row">
+        <div class="b c3">
+          c3
+        </div>
+        <div class="bg-neutral c5">
+          c5
+        </div>
+        <div class="r c4">
+          c4
+        </div>
       </div>
-    </div>
-    <div class="row">
-      <div class="bg-neutral c3">
-        c3
+      <div class="row">
+        <div class="b c2">
+          c2
+        </div>
+        <div class="bg-neutral c5">
+          c5
+        </div>
+        <div class="r c5">
+          c5
+        </div>
       </div>
-      <div class="light c9">
-        c9
+      <div class="row">
+        <div class="b c1">
+          c1
+        </div>
+        <div class="bg-neutral c5">
+          c5
+        </div>
+        <div class="r c6">
+          c6
+        </div>
+      </div><br></br>
+      <div class="row">
+        <div class="b c7">
+          c7
+        </div>
+        <div class="bg-neutral c4">
+          c4
+        </div>
+        <div class="r c1">
+          c1
+        </div>
       </div>
-    </div>
-    <div class="row">
-      <div class="bg-neutral c2">
-        c2
+      <div class="row">
+        <div class="b c6">
+          c6
+        </div>
+        <div class="bg-neutral c4">
+          c4
+        </div>
+        <div class="r c2">
+          c2
+        </div>
       </div>
-      <div class="light c10">
-        c10
+      <div class="row">
+        <div class="b c5">
+          c5
+        </div>
+        <div class="bg-neutral c4">
+          c4
+        </div>
+        <div class="r c3">
+          c3
+        </div>
       </div>
-    </div>
-    <div class="row">
-      <div class="bg-neutral c1">
-        c1
+      <div class="row">
+        <div class="b c4">
+          c4
+        </div>
+        <div class="bg-neutral c4">
+          c4
+        </div>
+        <div class="r c4">
+          c4
+        </div>
       </div>
-      <div class="light c11">
-        c11
+      <div class="row">
+        <div class="b c3">
+          c3
+        </div>
+        <div class="bg-neutral c4">
+          c4
+        </div>
+        <div class="r c5">
+          c5
+        </div>
       </div>
-    </div>
-    <div class="row">
-      <div class="light c12">
-        c12
+      <div class="row">
+        <div class="b c2">
+          c2
+        </div>
+        <div class="bg-neutral c4">
+          c4
+        </div>
+        <div class="r c6">
+          c6
+        </div>
       </div>
+      <div class="row">
+        <div class="b c1">
+          c1
+        </div>
+        <div class="bg-neutral c4">
+          c4
+        </div>
+        <div class="r c7">
+          c7
+        </div>
+      </div><br></br>
+      <div class="row">
+        <div class="b c8">
+          c8
+        </div>
+        <div class="bg-neutral c3">
+          c3
+        </div>
+        <div class="r c1">
+          c1
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c7">
+          c7
+        </div>
+        <div class="bg-neutral c3">
+          c3
+        </div>
+        <div class="r c2">
+          c2
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c6">
+          c6
+        </div>
+        <div class="bg-neutral c3">
+          c3
+        </div>
+        <div class="r c3">
+          c3
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c5">
+          c5
+        </div>
+        <div class="bg-neutral c3">
+          c3
+        </div>
+        <div class="r c4">
+          c4
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c4">
+          c4
+        </div>
+        <div class="bg-neutral c3">
+          c3
+        </div>
+        <div class="r c5">
+          c5
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c3">
+          c3
+        </div>
+        <div class="bg-neutral c3">
+          c3
+        </div>
+        <div class="r c6">
+          c6
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c2">
+          c2
+        </div>
+        <div class="bg-neutral c3">
+          c3
+        </div>
+        <div class="r c7">
+          c7
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c1">
+          c1
+        </div>
+        <div class="bg-neutral c3">
+          c3
+        </div>
+        <div class="r c8">
+          c8
+        </div>
+      </div><br></br>
+      <div class="row">
+        <div class="b c9">
+          c9
+        </div>
+        <div class="bg-neutral c2">
+          c2
+        </div>
+        <div class="r c1">
+          c1
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c8">
+          c8
+        </div>
+        <div class="bg-neutral c2">
+          c2
+        </div>
+        <div class="r c2">
+          c2
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c7">
+          c7
+        </div>
+        <div class="bg-neutral c2">
+          c2
+        </div>
+        <div class="r c3">
+          c3
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c6">
+          c6
+        </div>
+        <div class="bg-neutral c2">
+          c2
+        </div>
+        <div class="r c4">
+          c4
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c5">
+          c5
+        </div>
+        <div class="bg-neutral c2">
+          c2
+        </div>
+        <div class="r c5">
+          c5
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c4">
+          c4
+        </div>
+        <div class="bg-neutral c2">
+          c2
+        </div>
+        <div class="r c6">
+          c6
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c3">
+          c3
+        </div>
+        <div class="bg-neutral c2">
+          c2
+        </div>
+        <div class="r c7">
+          c7
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c2">
+          c2
+        </div>
+        <div class="bg-neutral c2">
+          c2
+        </div>
+        <div class="r c8">
+          c8
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c1">
+          c1
+        </div>
+        <div class="bg-neutral c2">
+          c2
+        </div>
+        <div class="r c9">
+          c9
+        </div>
+      </div><br></br>
+      <div class="row">
+        <div class="b c10">
+          c10
+        </div>
+        <div class="bg-neutral c1">
+          c1
+        </div>
+        <div class="r c1">
+          c1
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c9">
+          c9
+        </div>
+        <div class="bg-neutral c1">
+          c1
+        </div>
+        <div class="r c2">
+          c2
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c8">
+          c8
+        </div>
+        <div class="bg-neutral c1">
+          c1
+        </div>
+        <div class="r c3">
+          c3
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c7">
+          c7
+        </div>
+        <div class="bg-neutral c1">
+          c1
+        </div>
+        <div class="r c4">
+          c4
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c6">
+          c6
+        </div>
+        <div class="bg-neutral c1">
+          c1
+        </div>
+        <div class="r c5">
+          c5
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c5">
+          c5
+        </div>
+        <div class="bg-neutral c1">
+          c1
+        </div>
+        <div class="r c6">
+          c6
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c4">
+          c4
+        </div>
+        <div class="bg-neutral c1">
+          c1
+        </div>
+        <div class="r c7">
+          c7
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c3">
+          c3
+        </div>
+        <div class="bg-neutral c1">
+          c1
+        </div>
+        <div class="r c8">
+          c8
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c2">
+          c2
+        </div>
+        <div class="bg-neutral c1">
+          c1
+        </div>
+        <div class="r c9">
+          c9
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c1">
+          c1
+        </div>
+        <div class="bg-neutral c1">
+          c1
+        </div>
+        <div class="r c10">
+          c10
+        </div>
+      </div><br></br>
     </div>
   </div>
 
§ Images
Images
Inside a grid
Inside a card
In a block
Directly in the column
code
@@ -201,18 +922,39 @@
     </div>
   </div>
 
§ icons
Android Safe
☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №
-
The "Android Safe" icons work everywhere, tested on hundreds of devices.
Inserting ☎ in ♂ the ♀ middle ⓧ of © some § text ® to ⇦ check ⇧ the ⇨ size. ⇩ Now ♠ this ♣ should ♥ give ♦ an ♪ idea ♛ about ♜ the ♝ size ♞ relatively ♟ to ☜ the ☞ text. ♨ Hmmm ♭ this ♯ is ￥ quite ￡ long ￠ and ❊ boring ฿ to ๏ write ※ text ₧ in ₨ between ₪ like € that! № 
code
+
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 big">☎ ♂ ♀ ⓧ © § ® ⇦ ⇧
     ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №</i>
     <div class="msg push">
       <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>
+      <p><span>Inserting</span> <i class="ico">☎</i>
+      <span>in</span> <i class="ico">♂</i> <span>the</span>
+      <i class="ico">♀</i> <span>middle</span> <i class="ico">ⓧ</i>
+      <span>of</span> <i class="ico">©</i> <span>some</span>
+      <i class="ico">§</i> <span>text</span> <i class="ico">®</i>
+      <span>to</span> <i class="ico">⇦</i> <span>check</span>
+      <i class="ico">⇧</i> <span>the</span> <i class="ico">⇨</i>
+      <span>size.</span> <i class="ico">⇩</i> <span>Now</span>
+      <i class="ico">♠</i> <span>this</span> <i class="ico">♣</i>
+      <span>should</span> <i class="ico">♥</i> <span>give</span>
+      <i class="ico">♦</i> <span>an</span> <i class="ico">♪</i>
+      <span>idea</span> <i class="ico">♛</i> <span>about</span>
+      <i class="ico">♜</i> <span>the</span> <i class="ico">♝</i>
+      <span>size</span> <i class="ico">♞</i>
+      <span>relatively</span> <i class="ico">♟</i> <span>to</span>
+      <i class="ico">☜</i> <span>the</span> <i class="ico">☞</i>
+      <span>text.</span> <i class="ico">♨</i> <span>Hmmm</span>
+      <i class="ico">♭</i> <span>this</span> <i class="ico">♯</i>
+      <span>is</span> <i class="ico">￥</i> <span>quite</span>
+      <i class="ico">￡</i> <span>long</span> <i class="ico">￠</i>
+      <span>and</span> <i class="ico">❊</i> <span>boring</span>
+      <i class="ico">฿</i> <span>to</span> <i class="ico">๏</i>
+      <span>write</span> <i class="ico">※</i> <span>text</span>
+      <i class="ico">₧</i> <span>in</span> <i class="ico">₨</i>
+      <span>between</span> <i class="ico">₪</i> <span>like</span>
+      <i class="ico">€</i> <span>that!</span> <i class="ico">№</i></p>
     </div>
   </div>
 
Total Set
✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩
@@ -282,31 +1024,13 @@
     warn</a><a class="tb err">tb err</a><a class="tb fatal">tb
     fatal</a>
   </div>
-

Sizes

Inside some text

Some text: InfoOKWarnERR

In a grid

tb smtb smtb smtb sm
tbtbtbtb
tb bigtb bigtb big
tb hugetb huge
code
+

Sizes

Inside some text

Some text: InfoOKWarnERR
code
   <div id="text-buttons-sizes">
     <h3>Sizes</h3>
     <h4>Inside some text</h4>
     <div class="block">
       Some text: <a class="tb sm info">Info</a><a class="tb ok">OK</a><a class="tb big warn">Warn</a><a class="tb huge err">ERR</a>
     </div>
-    <h4>In a grid</h4>
-    <div class="row gapless">
-      <div class="col c2 gapless">
-        <a class="tb sm">tb sm</a><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>
-      </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>
-      </div>
-    </div>
   </div>

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
code
   <div id="buttons">
@@ -418,4 +1142,11 @@
       </div>
     </nav><button class="btn-close btn sm">×</button>
   </div>
+
code
+  <footer>
+    <div class="container">
+      <p>Made by <a href="https://yannesposito.com">Yann
+      Esposito</a></p>
+    </div>
+  </footer>
\ No newline at end of file diff --git a/src/colors.less b/src/colors.less index ae373c2..c9c6273 100644 --- a/src/colors.less +++ b/src/colors.less @@ -14,6 +14,7 @@ --shadow: rgba(0,0,0,0.65); + /* rainbow colors */ --y: #b58900; --o: #cb4b16; --r: #dc322f; @@ -23,7 +24,7 @@ --c: #2aa198; --g: #859900; - --accent: var(--y); + --accent: var(--b); } @media (prefers-color-scheme: dark) { @@ -41,8 +42,11 @@ 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); } +.b, .info { color: var(--bg); background-color: var(--b); } +.g, .ok { color: var(--bg); background-color: var(--g); } +.y, .warn { color: var(--bg); background-color: var(--y); } +.r, .err { color: var(--bg); background-color: var(--r); } +.m, .fatal { color: var(--bg); background-color: var(--m); } +.o { color: var(--bg); background-color: var(--o); } +.v { color: var(--bg); background-color: var(--v); } +.c { color: var(--bg); background-color: var(--c); } diff --git a/src/general.less b/src/general.less index c9c87a2..5f893e1 100644 --- a/src/general.less +++ b/src/general.less @@ -44,7 +44,7 @@ ol { padding-inline-start: 2rem; } ul > li::marker { font-size: 1.5rem; } -summary:hover { cursor: pointer; } +summary:hover { cursor: pointer; background: var(--bg2);} table { font-size: 1rem; } .sm { font-size: 0.75rem; line-height: 0.65rem; }