yogsototh/brutcss
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: yogsototh:89e8802803d2d251cb9e136bb5bebabe9e66fad6
Branches Tags
yogsototh:main
...
compare: yogsototh:b5f92245bf7f89d9213d57d0655995bf27835a6e
Branches Tags
yogsototh:main

2 commits
89e8802803 ... b5f92245bf

Author SHA1 Message Date
Yann Esposito (Yogsototh)
b5f92245bf
Forgot this minor main page improv 2024-07-25 14:48:15 +02:00
Yann Esposito (Yogsototh)
8653c9c1ac
A few minor improvements 2024-07-25 14:46:12 +02:00
5 changed files with 34 additions and 26 deletions
Show stats Expand all files Collapse all files

2
_site/brut.min.css vendored
View file

File diff suppressed because one or more lines are too long

18
_site/h/docs.html
View file

@ -1056,42 +1056,42 @@
Some text: <a class="tb huge err">huge err</a> Some text: <a class="tb huge err">huge err</a>
</div> </div>
</div> </div>
</pre></details></div></div><div class="row"><div class="card c6"><div class="col"><h2>Buttons</h2><div class="row"><div class="card"><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"><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"><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"><h3>Big</h3><div class="col big"><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"><h3>Huge</h3><div class="col huge"><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><br /><details class="push"><summary class="bg-neutral">code</summary><pre> </pre></details></div></div><div class="row"><div class="card c6"><div class="col"><h2>Buttons</h2><div class="row"><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 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 class="col c4 card"><h3>Standardized Width <code>btn std</code></h3><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 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 c8"><h3>Huge</h3><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 std err</a><a class="btn std fatal">btn std fatal</a></div></div></div></div><br /><details class="push"><summary class="bg-neutral">code</summary><pre>
&lt;div class=&quot;col&quot;&gt; &lt;div class=&quot;col&quot;&gt;
&lt;h2&gt;Buttons&lt;/h2&gt; &lt;h2&gt;Buttons&lt;/h2&gt;
&lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;card&quot;&gt; &lt;div class=&quot;card c4&quot;&gt;
&lt;h3&gt;Classic&lt;/h3&gt;&lt;a class=&quot;btn&quot;&gt;btn&lt;/a&gt;&lt;a class=&quot;btn hl&quot;&gt;btn &lt;h3&gt;Classic&lt;/h3&gt;&lt;a class=&quot;btn&quot;&gt;btn&lt;/a&gt;&lt;a class=&quot;btn hl&quot;&gt;btn
hl&lt;/a&gt;&lt;a class=&quot;btn info&quot;&gt;btn info&lt;/a&gt;&lt;a class=&quot;btn ok&quot;&gt;btn hl&lt;/a&gt;&lt;a class=&quot;btn info&quot;&gt;btn info&lt;/a&gt;&lt;a class=&quot;btn ok&quot;&gt;btn
ok&lt;/a&gt;&lt;a class=&quot;btn warn&quot;&gt;btn warn&lt;/a&gt;&lt;a class=&quot;btn err&quot;&gt;btn err&lt;/a&gt;&lt;a class=&quot;btn fatal&quot;&gt;btn fatal&lt;/a&gt; ok&lt;/a&gt;&lt;a class=&quot;btn warn&quot;&gt;btn warn&lt;/a&gt;&lt;a class=&quot;btn err&quot;&gt;btn err&lt;/a&gt;&lt;a class=&quot;btn fatal&quot;&gt;btn fatal&lt;/a&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class=&quot;card&quot;&gt; &lt;div class=&quot;card c4&quot;&gt;
&lt;h3&gt;Sizes&lt;/h3&gt;&lt;a class=&quot;btn sm&quot;&gt;btn sm&lt;/a&gt;&lt;a class=&quot;btn info&quot;&gt;btn info&lt;/a&gt;&lt;a class=&quot;btn big warn&quot;&gt;btn big &lt;h3&gt;Sizes&lt;/h3&gt;&lt;a class=&quot;btn sm&quot;&gt;btn sm&lt;/a&gt;&lt;a class=&quot;btn info&quot;&gt;btn info&lt;/a&gt;&lt;a class=&quot;btn big warn&quot;&gt;btn big
warn&lt;/a&gt;&lt;a class=&quot;btn huge err&quot;&gt;btn huge err&lt;/a&gt; warn&lt;/a&gt;&lt;a class=&quot;btn huge err&quot;&gt;btn huge err&lt;/a&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col c4 card&quot;&gt; &lt;div class=&quot;col c4 card&quot;&gt;
&lt;h3&gt;Standardized Width &lt;code&gt;btn std&lt;/code&gt;&lt;/h3&gt; &lt;h3&gt;Standardized Width &lt;code&gt;btn std&lt;/code&gt;&lt;/h3&gt;
&lt;div class=&quot;col&quot;&gt; &lt;div class=&quot;col mid&quot;&gt;
&lt;a class=&quot;btn std&quot;&gt;btn std&lt;/a&gt;&lt;a class=&quot;btn std hl&quot;&gt;btn &lt;a class=&quot;btn std&quot;&gt;btn std&lt;/a&gt;&lt;a class=&quot;btn std hl&quot;&gt;btn
std hl&lt;/a&gt;&lt;a class=&quot;btn std info&quot;&gt;btn std std hl&lt;/a&gt;&lt;a class=&quot;btn std info&quot;&gt;btn std
info&lt;/a&gt;&lt;a class=&quot;btn std ok&quot;&gt;btn std ok&lt;/a&gt;&lt;a class=&quot;btn std warn&quot;&gt;btn std warn&lt;/a&gt;&lt;a class=&quot;btn std err&quot;&gt;btn info&lt;/a&gt;&lt;a class=&quot;btn std ok&quot;&gt;btn std ok&lt;/a&gt;&lt;a class=&quot;btn std warn&quot;&gt;btn std warn&lt;/a&gt;&lt;a class=&quot;btn std err&quot;&gt;btn
std err&lt;/a&gt;&lt;a class=&quot;btn std fatal&quot;&gt;btn std fatal&lt;/a&gt; std err&lt;/a&gt;&lt;a class=&quot;btn std fatal&quot;&gt;btn std fatal&lt;/a&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col card c4&quot;&gt; &lt;div class=&quot;col card c4&quot;&gt;
&lt;h3&gt;Big&lt;/h3&gt; &lt;h3&gt;Big&lt;/h3&gt;
&lt;div class=&quot;col big&quot;&gt; &lt;div class=&quot;col big mid&quot;&gt;
&lt;a class=&quot;btn std&quot;&gt;btn std&lt;/a&gt;&lt;a class=&quot;btn std hl&quot;&gt;btn &lt;a class=&quot;btn std&quot;&gt;btn std&lt;/a&gt;&lt;a class=&quot;btn std hl&quot;&gt;btn
std hl&lt;/a&gt;&lt;a class=&quot;btn std info&quot;&gt;btn std std hl&lt;/a&gt;&lt;a class=&quot;btn std info&quot;&gt;btn std
info&lt;/a&gt;&lt;a class=&quot;btn std ok&quot;&gt;btn std ok&lt;/a&gt;&lt;a class=&quot;btn std warn&quot;&gt;btn std warn&lt;/a&gt;&lt;a class=&quot;btn std err&quot;&gt;btn info&lt;/a&gt;&lt;a class=&quot;btn std ok&quot;&gt;btn std ok&lt;/a&gt;&lt;a class=&quot;btn std warn&quot;&gt;btn std warn&lt;/a&gt;&lt;a class=&quot;btn std err&quot;&gt;btn
std err&lt;/a&gt;&lt;a class=&quot;btn std fatal&quot;&gt;btn std fatal&lt;/a&gt; std err&lt;/a&gt;&lt;a class=&quot;btn std fatal&quot;&gt;btn std fatal&lt;/a&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class=&quot;col card c4&quot;&gt; &lt;div class=&quot;col card c8&quot;&gt;
&lt;h3&gt;Huge&lt;/h3&gt; &lt;h3&gt;Huge&lt;/h3&gt;
&lt;div class=&quot;col huge&quot;&gt; &lt;div class=&quot;col huge mid&quot;&gt;
&lt;a class=&quot;btn std&quot;&gt;btn std&lt;/a&gt;&lt;a class=&quot;btn std hl&quot;&gt;btn &lt;a class=&quot;btn std&quot;&gt;btn std&lt;/a&gt;&lt;a class=&quot;btn std hl&quot;&gt;btn
std hl&lt;/a&gt;&lt;a class=&quot;btn std info&quot;&gt;btn std std hl&lt;/a&gt;&lt;a class=&quot;btn std info&quot;&gt;btn std
info&lt;/a&gt;&lt;a class=&quot;btn std ok&quot;&gt;btn std ok&lt;/a&gt;&lt;a class=&quot;btn std warn&quot;&gt;btn std warn&lt;/a&gt;&lt;a class=&quot;btn std err&quot;&gt;btn info&lt;/a&gt;&lt;a class=&quot;btn std ok&quot;&gt;btn std ok&lt;/a&gt;&lt;a class=&quot;btn std warn&quot;&gt;btn std warn&lt;/a&gt;&lt;a class=&quot;btn std err&quot;&gt;btn

2
_site/index.html
View file

@ -1 +1 @@
<head><meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /><meta content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" name="viewport" /><title>BRUT</title><link href="brut.min.css" rel="stylesheet" type="text/css" /></head><body class="col gapless"><div><nav class="nav" onclick="this.focus()" tabindex="-1"><div class="container"><a class="pagename" href="index.html">BRUT</a><a href="h/docs.html">Docs</a><a href="h/download.html">Download</a><a href="https://gitea.esy.fun/yogsototh/brutcss">Code</a></div></nav><button class="btn sn btn-close">×</button></div><div><div class="hero" style="background: url(h/img/brutalism.webp)"><div class="container col middle"><div class="row middle"><div class="c2"></div><div class="c8 col block bg-neutral"><h1 class="tight huge">BRUT</h1><h4>A Brutalist and Minimalist CSS Framework</h4><p>This CSS framework is ideal to be used for <strong>private admin interfaces</strong>.</p><p> Just by the look of it, it will scream: <span class="hl">THIS IS NOT FOR NON-TECHNICAL PEOPLE!!!</span></p></div><div class="c2"></div></div></div></div><div class="container"><div class="row"><div class="card"><h3>Docs</h3><p>A few quick examples to show every components. This should be quick and straightforward.</p><p>This CSS framework makes its best to respect some expected composability accross classes. Here are a few examples:</p><div class="row"><div><p class="tight">A block: </p><div class="card"><div class="tb">textual btn</div><br /><div class="btn">classic btn</div><br /><div class="msg">Some message block</div></div></div><div><p class="tight">Then add the class <code>big</code>: </p><div class="card big"><div class="tb">textual btn</div><br /><div class="btn">classic btn</div><br /><div class="msg">Some message block</div></div></div></div><a class="btn big push" href="h/docs.html">Docs</a></div><div class="col card"><h3>Download</h3><p>Download BRUT</p><a class="btn warn big push" href="h/download.html">Download</a></div></div></div></div><footer><div class="container"><p>By <a href="https://yannesposito.com">Yann Esposito</a></p></div></footer></body> <head><meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /><meta content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" name="viewport" /><title>BRUT</title><link href="brut.min.css" rel="stylesheet" type="text/css" /></head><body class="col gapless"><div><nav class="nav" onclick="this.focus()" tabindex="-1"><div class="container"><a class="pagename" href="index.html">BRUT</a><a href="h/docs.html">Docs</a><a href="h/download.html">Download</a><a href="https://gitea.esy.fun/yogsototh/brutcss">Code</a></div></nav><button class="btn sn btn-close">×</button></div><div><div class="hero" style="background: url(h/img/brutalism.webp)"><div class="container col middle"><div class="row middle"><div class="c2"></div><div class="c8 col block bg-neutral"><h1 class="tight huge">BRUT</h1><h4 class="big">A Brutalist and Minimalist CSS Framework</h4><p class="big">This CSS framework is ideal to be used for <strong>private admin interfaces</strong>.</p><p class="big"> Just by the look of it, it will scream: <br /><span class="hl">THIS IS NOT FOR NON-TECHNICAL PEOPLE!!!</span></p></div><div class="c2"></div></div></div></div><div class="container"><div class="row"><div class="col card"><h3>Docs</h3><p>A few quick examples to show every components. This should be quick and straightforward.</p><p>This CSS framework makes its best to respect some expected composability accross classes. Here are a few examples:</p><div class="row"><div><p class="tight">A block: </p><div class="card"><div class="tb">textual btn</div><br /><div class="btn">classic btn</div><br /><div class="msg">Some message block</div></div></div><div><p class="tight">Then add the class <code>big</code>: </p><div class="card big"><div class="tb">textual btn</div><br /><div class="btn">classic btn</div><br /><div class="msg">Some message block</div></div></div></div><a class="tb big push info stretch" href="h/docs.html">Docs</a></div><div class="col card"><h3>Download</h3><p>Download BRUT</p><a class="tb warn big push stretch" href="h/download.html">Download</a></div></div></div></div><footer><div class="container"><p>By <a href="https://yannesposito.com">Yann Esposito</a></p></div></footer></body>

34
bb/brut/site.clj
View file

@ -75,16 +75,17 @@
[:div.c2] [:div.c2]
[:div.c8.col.block.bg-neutral [:div.c8.col.block.bg-neutral
[:h1.tight.huge "BRUT"] [:h1.tight.huge "BRUT"]
[:h4 "A Brutalist and Minimalist CSS Framework"] [:h4.big "A Brutalist and Minimalist CSS Framework"]
[:p "This CSS framework is ideal to be used for " [:p.big "This CSS framework is ideal to be used for "
[:strong "private admin interfaces"] [: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!!!"]]] [:span.hl "THIS IS NOT FOR NON-TECHNICAL PEOPLE!!!"]]]
[:div.c2]]]] [:div.c2]]]]
cards [:div.container cards [:div.container
[:div.row [:div.row
[:div.card [:div.col.card
[:h3 "Docs"] [:h3 "Docs"]
[:p "A few quick examples to show every components. " [:p "A few quick examples to show every components. "
"This should be quick and straightforward."] "This should be quick and straightforward."]
@ -107,12 +108,12 @@
[:div.btn "classic btn"] [:div.btn "classic btn"]
[:br] [:br]
[:div.msg "Some message block"]]]] [:div.msg "Some message block"]]]]
[:a.btn.big.push {:href (to "h/docs.html")} [:a.tb.big.push.info.stretch {:href (to "h/docs.html")}
"Docs"]] "Docs"]]
[:div.col.card [:div.col.card
[:h3 "Download"] [:h3 "Download"]
[:p "Download BRUT"] [: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 [:div
hero hero
cards])) cards]))
@ -246,7 +247,7 @@
buttons [:div.col buttons [:div.col
[:h2 "Buttons"] [:h2 "Buttons"]
[:div.row [:div.row
[:div.card [:div.card.c4
[:h3 "Classic"] [:h3 "Classic"]
[:a.btn "btn"] [:a.btn "btn"]
[:a.btn.hl "btn hl"] [:a.btn.hl "btn hl"]
@ -255,17 +256,16 @@
[:a.btn.warn "btn warn"] [:a.btn.warn "btn warn"]
[:a.btn.err "btn err"] [:a.btn.err "btn err"]
[:a.btn.fatal "btn fatal"]] [:a.btn.fatal "btn fatal"]]
[:div.card [:div.card.c4
[:h3 "Sizes"] [:h3 "Sizes"]
[:a.btn.sm "btn sm"] [:a.btn.sm "btn sm"]
[:a.btn.info "btn info"] [:a.btn.info "btn info"]
[:a.btn.big.warn "btn big warn"] [:a.btn.big.warn "btn big warn"]
[:a.btn.huge.err "btn huge err"]]] [:a.btn.huge.err "btn huge err"]]
[:div.row
[:div.col.c4.card [:div.col.c4.card
[:h3 "Standardized Width " [:h3 "Standardized Width "
[:code "btn std"]] [:code "btn std"]]
[:div.col [:div.col.mid
[:a.btn.std "btn std"] [:a.btn.std "btn std"]
[:a.btn.std.hl "btn std hl"] [:a.btn.std.hl "btn std hl"]
[:a.btn.std.info "btn std info"] [:a.btn.std.info "btn std info"]
@ -273,9 +273,12 @@
[:a.btn.std.warn "btn std warn"] [:a.btn.std.warn "btn std warn"]
[:a.btn.std.err "btn std err"] [:a.btn.std.err "btn std err"]
[:a.btn.std.fatal "btn std fatal"]]] [:a.btn.std.fatal "btn std fatal"]]]
]
[:div.row
[:div.col.card.c4 [:div.col.card.c4
[:h3 "Big"] [:h3 "Big"]
[:div.col.big [:div.col.big.mid
[:a.btn.std "btn std"] [:a.btn.std "btn std"]
[:a.btn.std.hl "btn std hl"] [:a.btn.std.hl "btn std hl"]
[:a.btn.std.info "btn std info"] [:a.btn.std.info "btn std info"]
@ -284,16 +287,17 @@
[:a.btn.std.err "btn std err"] [:a.btn.std.err "btn std err"]
[:a.btn.std.fatal "btn std fatal"]] [:a.btn.std.fatal "btn std fatal"]]
] ]
[:div.col.card.c4 [:div.col.card.c8
[:h3 "Huge"] [:h3 "Huge"]
[:div.col.huge [:div.col.huge.mid
[:a.btn.std "btn std"] [:a.btn.std "btn std"]
[:a.btn.std.hl "btn std hl"] [:a.btn.std.hl "btn std hl"]
[:a.btn.std.info "btn std info"] [:a.btn.std.info "btn std info"]
[:a.btn.std.ok "btn std ok"] [:a.btn.std.ok "btn std ok"]
[:a.btn.std.warn "btn std warn"] [:a.btn.std.warn "btn std warn"]
[:a.btn.std.err "btn std err"] [: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"} tags [:div {:id "tags"}
[:h2 "Tags"] [:h2 "Tags"]
[:ul [:ul

4
src/components.less
View file

@ -40,6 +40,10 @@ button ~ .central {
.fill { flex-grow: 1; } .fill { flex-grow: 1; }
footer,.push { justify-self: flex-end; margin-top: auto;} 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 are for long text to read */
.doc { max-width: 65ch; .doc { max-width: 65ch;