From 8653c9c1ac23ed1695bfdc6017f7b55b2efa4d40 Mon Sep 17 00:00:00 2001 From: "Yann Esposito (Yogsototh)" Date: Thu, 25 Jul 2024 14:46:12 +0200 Subject: [PATCH] A few minor improvements --- _site/brut.min.css | 2 +- _site/h/docs.html | 18 +++++++++--------- _site/index.html | 2 +- bb/brut/site.clj | 34 +++++++++++++++++++--------------- src/components.less | 4 ++++ 5 files changed, 34 insertions(+), 26 deletions(-) diff --git a/_site/brut.min.css b/_site/brut.min.css index f6463ee..a7182a0 100644 --- a/_site/brut.min.css +++ b/_site/brut.min.css @@ -1 +1 @@ -/* Copyright 2023 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;--y:#b58900;--o:#cb4b16;--r:#dc322f;--m:#d33682;--v:#6c71c4;--b:#268bd2;--c:#2aa198;--g:#859900;--accent:var(--b)}body.soft{filter:brightness(85%)sepia(25%)}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);color:var(--fg)}.hl,.msg,.btn,.b,.info,.g,.ok,.y,.warn,.r,.err,.m,.fatal,.o,.v,.c,.alert{border-color:var(--fg)}.hl,.b,.info,.g,.ok,.y,.warn,.r,.err,.m,.fatal,.o,.v,.c,.alert{color:var(--bg)}.hl{background-color:var(--fg)}.b,.info{background-color:var(--b)}.g,.ok{background-color:var(--g)}.y,.warn{background-color:var(--y)}.r,.err{background-color:var(--r)}.m,.fatal{background-color:var(--m)}.o{background-color:var(--o)}.v{background-color:var(--v)}.c{background-color:var(--c)}@media(prefers-color-scheme:dark){body{filter:invert(100%)hue-rotate(180deg)}body.soft{filter:brightness(85%)sepia(25%)invert(100%)hue-rotate(180deg)}img,.fill{filter:brightness(80%)invert(100%)}.b,.info,.g,.ok,.y,.warn,.r,.err,.m,.fatal,.o,.v,.c,.alert{filter:brightness(90%)invert(100%)hue-rotate(180deg)}}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%}.container{padding:0 20px;width:100%}@media(min-width:1380px){.container{margin:auto;max-width:1270px}}pre{background:var(--bg2);padding:0;margin:0;line-height:1rem;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}ul{padding:0;margin:0 1.5rem 0 0}li{line-height:1.2rem}.action,summary:hover{cursor:pointer;background:var(--bg2)}table{font-size:1rem}.sm{font-size:.75rem}.big{font-size:2rem;line-height:1.5em}.huge{font-size:4rem;line-height:1.5em}.addon,.sm,.nav,textarea,input,select{outline:0;line-height:1em}.hl{border-color:var(--fg)}p>.hl,li>.hl{border:solid 1px var(--fg);padding:1px}.tb,.btn,.tag{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 .25em .25em 0;padding:.5rem 1rem;box-shadow:.25em .25em var(--nl);vertical-align:bottom}.btn:hover{box-shadow:.25em .25em var(--n1)}.btn:active,.btn:focus{box-shadow:.05em .05em var(--n2);position:relative;top:.2em;left:.2em}.btn.sm{padding:.5rem 1rem}.btn.std{width:12em}.tag{padding:2px;font-size:.875rem;border:solid 1px var(--fg);margin:0 1px}.col,.row{display:flex;flex-direction:row;justify-content:stretch;align-items:stretch;flex-wrap:wrap;gap:1rem}.row>*{flex:1;max-height:100%}.col>*{flex:0;max-width:100%}.col{flex-direction:column}.col>.row{padding:0 1rem}.row>.col{padding:1rem 0}.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:960px){.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:0;border:solid 1rem;overflow:hidden}.card>ul>li>a{width:100%;display:inline-block}.card>ul>li>a:hover{background:var(--accent);color:var(--bg)}.col.card,.col.block{justify-content:flex-start;align-items:flex-start}.card{border-color:var(--nl)}.card>*,.block>*{margin:1rem}.card>h1:first-child,.block>h1:first-child,.card>h2:first-child,.block>h2:first-child,.card>h3:first-child,.block>h3:first-child,.card>h4:first-child,.block>h4:first-child,.card>h5:first-child,.block>h5:first-child,.card>h6:first-child,.block>h6:first-child{margin-top:0}.card>h1,.block>h1,.card>h2,.block>h2,.card>h3,.block>h3,.card>h4,.block>h4,.card>h5,.block>h5{margin-left:0;margin-right:0}.block{border-color:transparent}.central{display:flex;align-items:center;justify-content:center;background-size:cover}button~.central{min-height:calc(100vh - 50px)}.hero{padding:2rem}.fill{flex-grow:1}footer,.push{justify-self:flex-end;margin-top:auto}.doc{max-width:65ch;font-size:1.25rem;font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif;text-align:justify;line-height:1.5em}.doc p{text-indent:3rem}.col.card,.row.card,.col.block,.row.block{padding:0}h1,h2,h3,h4,h5,h6{display:block;padding:0;font-size:1rem;outline:0;color:var(--bg);width:100%;margin:0 0 1rem}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)}h3{background:var(--n1)}h4{color:var(--fg);background:var(--nl)}h5{color:var(--fg);background:var(--bg2)}h6{color:var(--fg)}h1:before{content:"≡ ";opacity:.3}h2:before{content:"= ";opacity:.3}h3:before{content:"- ";opacity:.3}h4:before{content:": ";opacity:.3}h5:before{content:"⋅ ";opacity:.3}h6{padding-left:1.25rem}.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}textarea,input,select{border:2px solid;padding:2px;margin:0}textarea,input[type=text]{-webkit-appearance:none;width:13em;outline:0;border:2px solid}.addon{padding:2px;border-width:2px;border-style:solid none solid solid}textarea:focus,input:focus,select:focus{border-color:var(--accent)}.form-block:focus-within .addon{border-color:var(--accent)}.nav{background:var(--bg2);border-bottom:solid 1px var(--darken)}footer{background:var(--bg2);border-top:solid 1px var(--darken)}.nav{height:3rem;padding:11px 0 15px}.nav a{text-decoration:none;opacity:.7;padding-right:1em;position:relative;top:-1px}.nav a:hover{opacity:1}.nav .pagename{opacity:1;font-weight:700;font-size:22px;top:1px}.btn.btn-close{float:right;font-size:25px;margin:-4.1rem 0;display:none;border:none;box-shadow:none;background:0 0;color:var(--fg)}@media(max-width:640px){.btn.btn-close{display:block}.nav{overflow:hidden}.pagename{margin-top:-11px}.nav:active,.nav:focus{height:auto}.nav div:before{background:var(--bg2);border-bottom:11px double;border-top:3px solid;content:'';float:right;height:.25rem;position:relative;right:0;top:8px;width:2rem}.nav a{display:block;padding:.5em 0;width:50%}}.table th,.table td{padding:.5em;text-align:left}.table tbody>:nth-child(2n-1){background:var(--bg2)}.msg{border-left:5px solid var(--darken);padding:1rem} \ No newline at end of file +/* Copyright 2024 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;--y:#b58900;--o:#cb4b16;--r:#dc322f;--m:#d33682;--v:#6c71c4;--b:#268bd2;--c:#2aa198;--g:#859900;--accent:var(--b)}body.soft{filter:brightness(85%)sepia(25%)}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);color:var(--fg)}.hl,.msg,.btn,.b,.info,.g,.ok,.y,.warn,.r,.err,.m,.fatal,.o,.v,.c,.alert{border-color:var(--fg)}.hl,.b,.info,.g,.ok,.y,.warn,.r,.err,.m,.fatal,.o,.v,.c,.alert{color:var(--bg)}.hl a,.b a,.info a,.g a,.ok a,.y a,.warn a,.r a,.err a,.m a,.fatal a,.o a,.v a,.c a,.alert a{color:var(--bg)}.hl{background-color:var(--fg)}.b,.info{background-color:var(--b)}.g,.ok{background-color:var(--g)}.y,.warn{background-color:var(--y)}.r,.err{background-color:var(--r)}.m,.fatal{background-color:var(--m)}.o{background-color:var(--o)}.v{background-color:var(--v)}.c{background-color:var(--c)}@media(prefers-color-scheme:dark){body{filter:invert(100%)hue-rotate(180deg)}body.soft{filter:brightness(85%)sepia(25%)invert(100%)hue-rotate(180deg)}img,.fill{filter:brightness(80%)invert(100%)}.b,.info,.g,.ok,.y,.warn,.r,.err,.m,.fatal,.o,.v,.c,.alert{filter:brightness(90%)invert(100%)hue-rotate(180deg)}}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%}.container{padding:0 20px;width:100%}@media(min-width:1380px){.container{margin:auto;max-width:1270px}}pre{background:var(--darken);padding:10px;margin:0;line-height:1rem;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}ul{padding:0;margin:0 1.5rem 0 0}li{line-height:1.2rem}.action,summary:hover{cursor:pointer;background:var(--bg2)}table{font-size:1rem}.sm{font-size:.75rem}.big{font-size:2rem;line-height:1.5em}.huge{font-size:4rem;line-height:1.5em}.addon,.sm,.nav,textarea,input,select{outline:0;line-height:1em}.hl{border-color:var(--fg)}p>.hl,li>.hl{border:solid 1px var(--fg);padding:1px}.tb,.btn,.tag{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 .25em .25em 0;padding:.5rem 1rem;box-shadow:.25em .25em var(--nl);vertical-align:bottom}.btn:hover{box-shadow:.25em .25em var(--n1)}.btn:active,.btn:focus{box-shadow:.05em .05em var(--n2);position:relative;top:.2em;left:.2em}.btn.sm{padding:.5rem 1rem}.btn.std{width:12em}.tag{padding:2px;font-size:.875rem;border:solid 1px var(--fg);margin:0 1px}.col,.row{display:flex;flex-direction:row;justify-content:stretch;align-items:stretch;flex-wrap:wrap;gap:1rem}.row>*{flex:1;max-height:100%}.col>*{flex:0;max-width:100%}.col{flex-direction:column}.col>.row{padding:0 1rem}.row>.col{padding:1rem 0}.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:960px){.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:0;border:solid 1rem;overflow:hidden}.card>ul>li>a{width:100%;display:inline-block}.card>ul>li>a:hover{background:var(--accent);color:var(--bg)}.col.card,.col.block{justify-content:flex-start;align-items:flex-start}.card{border-color:var(--nl)}.card>*,.block>*{margin:1rem}.card>h1:first-child,.block>h1:first-child,.card>h2:first-child,.block>h2:first-child,.card>h3:first-child,.block>h3:first-child,.card>h4:first-child,.block>h4:first-child,.card>h5:first-child,.block>h5:first-child,.card>h6:first-child,.block>h6:first-child{margin-top:0}.card>h1,.block>h1,.card>h2,.block>h2,.card>h3,.block>h3,.card>h4,.block>h4,.card>h5,.block>h5{margin-left:0;margin-right:0}.block{border-color:transparent}.central{display:flex;align-items:center;justify-content:center;background-size:cover}button~.central{min-height:calc(100vh - 50px)}.hero{padding:2rem}.fill{flex-grow:1}footer,.push{justify-self:flex-end;margin-top:auto}.start{align-self:end}.end{align-self:end}.mid{align-self:center}.stretch{align-self:stretch}.doc{max-width:65ch;font-size:1.25rem;font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif;text-align:justify;line-height:1.5em}.doc p{text-indent:3rem}.col.card,.row.card,.col.block,.row.block{padding:0}h1,h2,h3,h4,h5,h6{display:block;padding:0;font-size:1rem;outline:0;color:var(--bg);width:100%;margin:0 0 1rem}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)}h3{background:var(--n1)}h4{color:var(--fg);background:var(--nl)}h5{color:var(--fg);background:var(--bg2)}h6{color:var(--fg)}h1:before{content:"≡ ";opacity:.3}h2:before{content:"= ";opacity:.3}h3:before{content:"- ";opacity:.3}h4:before{content:": ";opacity:.3}h5:before{content:"⋅ ";opacity:.3}h6{padding-left:1.25rem}.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}textarea,input,select{border:2px solid;padding:2px;margin:0}textarea,input[type=text]{-webkit-appearance:none;width:13em;outline:0;border:2px solid}.addon{padding:2px;border-width:2px;border-style:solid none solid solid}textarea:focus,input:focus,select:focus{border-color:var(--accent)}.form-block:focus-within .addon{border-color:var(--accent)}.nav{background:var(--bg2);border-bottom:solid 1px var(--darken)}footer{background:var(--bg2);border-top:solid 1px var(--darken)}.nav{height:3rem;padding:11px 0 15px}.nav a{text-decoration:none;opacity:.7;padding-right:1em;position:relative;top:-1px}.nav a:hover{opacity:1}.nav .pagename{opacity:1;font-weight:700;font-size:22px;top:1px}.btn.btn-close{float:right;font-size:25px;margin:-4.1rem 0;display:none;border:none;box-shadow:none;background:0 0;color:var(--fg)}@media(max-width:640px){.btn.btn-close{display:block}.nav{overflow:hidden}.pagename{margin-top:-11px}.nav:active,.nav:focus{height:auto}.nav div:before{background:var(--bg2);border-bottom:11px double;border-top:3px solid;content:'';float:right;height:.25rem;position:relative;right:0;top:8px;width:2rem}.nav a{display:block;padding:.5em 0;width:50%}}.table th,.table td{padding:.5em;text-align:left}.table tbody>:nth-child(2n-1){background:var(--bg2)}.msg{border-left:5px solid var(--darken);padding:1rem} \ No newline at end of file diff --git a/_site/h/docs.html b/_site/h/docs.html index 8d99e76..bfb860e 100644 --- a/_site/h/docs.html +++ b/_site/h/docs.html @@ -1056,42 +1056,42 @@ Some text: <a class="tb huge err">huge err</a> </div> </div> -

Buttons

Classic

btnbtn hlbtn infobtn okbtn warnbtn errbtn fatal

Sizes

btn smbtn infobtn big warnbtn huge err

Standardized Width btn std

btn stdbtn std hlbtn std infobtn std okbtn std warnbtn std errbtn std fatal

Big

btn stdbtn std hlbtn std infobtn std okbtn std warnbtn std errbtn std fatal

Huge

btn stdbtn std hlbtn std infobtn std okbtn std warnbtn std errbtn std fatal

code
+

Buttons

Classic

btnbtn hlbtn infobtn okbtn warnbtn errbtn fatal

Sizes

btn smbtn infobtn big warnbtn huge err

Standardized Width btn std

btn stdbtn std hlbtn std infobtn std okbtn std warnbtn std errbtn std fatal

Big

btn stdbtn std hlbtn std infobtn std okbtn std warnbtn std errbtn std fatal

Huge

btn stdbtn std hlbtn std infobtn std okbtn std warnbtn std errbtn std fatal

code
   <div class="col">
     <h2>Buttons</h2>
     <div class="row">
-      <div class="card">
+      <div class="card c4">
         <h3>Classic</h3><a class="btn">btn</a><a class="btn hl">btn
         hl</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>
       </div>
-      <div class="card">
+      <div class="card c4">
         <h3>Sizes</h3><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>
       </div>
-    </div>
-    <div class="row">
       <div class="col c4 card">
         <h3>Standardized Width <code>btn std</code></h3>
-        <div class="col">
+        <div class="col mid">
           <a class="btn std">btn std</a><a class="btn std hl">btn
           std hl</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 err</a><a class="btn std fatal">btn std fatal</a>
         </div>
       </div>
+    </div>
+    <div class="row">
       <div class="col card c4">
         <h3>Big</h3>
-        <div class="col big">
+        <div class="col big mid">
           <a class="btn std">btn std</a><a class="btn std hl">btn
           std hl</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 err</a><a class="btn std fatal">btn std fatal</a>
         </div>
       </div>
-      <div class="col card c4">
+      <div class="col card c8">
         <h3>Huge</h3>
-        <div class="col huge">
+        <div class="col huge mid">
           <a class="btn std">btn std</a><a class="btn std hl">btn
           std hl</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
diff --git a/_site/index.html b/_site/index.html
index 7b98d38..2bd5087 100644
--- a/_site/index.html
+++ b/_site/index.html
@@ -1 +1 @@
-BRUT
BRUT
A Brutalist and Minimalist CSS Framework
This CSS framework is ideal to be used for private admin interfaces.
 Just by the look of it, it will scream: THIS IS NOT FOR NON-TECHNICAL PEOPLE!!!
Docs
A few quick examples to show every components. This should be quick and straightforward.
This CSS framework makes its best to respect some expected composability accross classes. Here are a few examples:
A block: 
textual btn

classic btn

Some message block
Then add the class big: 
textual btn

classic btn

Some message block
Docs
Download
Download BRUT
Download

\ No newline at end of file
+BRUT
BRUT
A Brutalist and Minimalist CSS Framework
This CSS framework is ideal to be used for private admin interfaces.
 Just by the look of it, it will scream: 
THIS IS NOT FOR NON-TECHNICAL PEOPLE!!!
Docs
A few quick examples to show every components. This should be quick and straightforward.
This CSS framework makes its best to respect some expected composability accross classes. Here are a few examples:
A block: 
textual btn

classic btn

Some message block
Then add the class big: 
textual btn

classic btn

Some message block
Docs
Download
Download BRUT
Download

\ No newline at end of file
diff --git a/bb/brut/site.clj b/bb/brut/site.clj
index 9b1b44a..cfe8762 100644
--- a/bb/brut/site.clj
+++ b/bb/brut/site.clj
@@ -75,16 +75,17 @@
                 [:div.c2]
                 [:div.c8.col.block.bg-neutral
                  [:h1.tight.huge "BRUT"]
-                 [:h4 "A Brutalist and Minimalist CSS Framework"]
-                 [:p "This CSS framework is ideal to be used for "
+                 [:h4.big "A Brutalist and Minimalist CSS Framework"]
+                 [:p.big "This CSS framework is ideal to be used for "
                   [:strong "private admin interfaces"]
                   "."]
-                 [:p " Just by the look of it, it will scream: "
+                 [:p.big " Just by the look of it, it will scream: "
+                  [:br]
                   [:span.hl "THIS IS NOT FOR NON-TECHNICAL PEOPLE!!!"]]]
                 [:div.c2]]]]
         cards [:div.container
                [:div.row
-                [:div.card
+                [:div.col.card
                  [:h3 "Docs"]
                  [:p "A few quick examples to show every components. "
                   "This should be quick and straightforward."]
@@ -107,12 +108,12 @@
                     [:div.btn "classic btn"]
                     [:br]
                     [:div.msg "Some message block"]]]]
-                 [:a.btn.big.push {:href (to "h/docs.html")}
+                 [:a.tb.big.push {:href (to "h/docs.html")}
                   "Docs"]]
                 [:div.col.card
                  [:h3 "Download"]
                  [:p "Download BRUT"]
-                 [:a.btn.warn.big.push {:href (to "h/download.html")} "Download"]]]]]
+                 [:a.tb.warn.big.push.stretch {:href (to "h/download.html")} "Download"]]]]]
     [:div
      hero
      cards]))
@@ -246,7 +247,7 @@
         buttons [:div.col
                  [:h2 "Buttons"]
                  [:div.row
-                  [:div.card
+                  [:div.card.c4
                    [:h3 "Classic"]
                    [:a.btn       "btn"]
                    [:a.btn.hl    "btn hl"]
@@ -255,17 +256,16 @@
                    [:a.btn.warn  "btn warn"]
                    [:a.btn.err   "btn err"]
                    [:a.btn.fatal "btn fatal"]]
-                  [:div.card
+                  [:div.card.c4
                    [:h3 "Sizes"]
                    [:a.btn.sm       "btn sm"]
                    [:a.btn.info     "btn info"]
                    [:a.btn.big.warn "btn big warn"]
-                   [:a.btn.huge.err "btn huge err"]]]
-                 [:div.row
+                   [:a.btn.huge.err "btn huge err"]]
                   [:div.col.c4.card
                    [:h3 "Standardized Width "
                     [:code "btn std"]]
-                   [:div.col
+                   [:div.col.mid
                     [:a.btn.std       "btn std"]
                     [:a.btn.std.hl    "btn std hl"]
                     [:a.btn.std.info  "btn std info"]
@@ -273,9 +273,12 @@
                     [:a.btn.std.warn  "btn std warn"]
                     [:a.btn.std.err   "btn std err"]
                     [:a.btn.std.fatal "btn std fatal"]]]
+
+                  ]
+                 [:div.row
                   [:div.col.card.c4
                    [:h3 "Big"]
-                   [:div.col.big
+                   [:div.col.big.mid
                     [:a.btn.std       "btn std"]
                     [:a.btn.std.hl    "btn std hl"]
                     [:a.btn.std.info  "btn std info"]
@@ -284,16 +287,17 @@
                     [:a.btn.std.err   "btn std err"]
                     [:a.btn.std.fatal "btn std fatal"]]
                    ]
-                  [:div.col.card.c4
+                  [:div.col.card.c8
                    [:h3 "Huge"]
-                   [:div.col.huge
+                   [:div.col.huge.mid
                     [:a.btn.std       "btn std"]
                     [:a.btn.std.hl    "btn std hl"]
                     [:a.btn.std.info  "btn std info"]
                     [:a.btn.std.ok    "btn std ok"]
                     [:a.btn.std.warn  "btn std warn"]
                     [:a.btn.std.err   "btn std err"]
-                    [:a.btn.std.fatal "btn std fatal"]]]]]
+                    [:a.btn.std.fatal "btn std fatal"]]]]
+                 ]
         tags [:div {:id "tags"}
               [:h2 "Tags"]
               [:ul
diff --git a/src/components.less b/src/components.less
index b1ca580..e40693a 100644
--- a/src/components.less
+++ b/src/components.less
@@ -40,6 +40,10 @@ button ~ .central {
 
 .fill { flex-grow: 1; }
 footer,.push { justify-self: flex-end; margin-top: auto;}
+.start   { align-self: end; }
+.end     { align-self: end; }
+.mid     { align-self: center; }
+.stretch { align-self: stretch; }
 
 /* doc are for long text to read */
 .doc { max-width: 65ch;