added a demo img
This commit is contained in:
Yann Esposito (Yogsototh)
parent
b5f92245bf
commit
ccb771f1bb
GPG key ID:
7B19A4C650D59646
6 changed files with 43 additions and 33 deletions
BIN
_site/h/img/brut-demo-dark.webp
Normal file
BIN
_site/h/img/brut-demo-dark.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
_site/h/img/brut-demo-light.webp
Normal file
BIN
_site/h/img/brut-demo-light.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
|
|
@ -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 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>
|
||||
<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="col"><div class="row"><div class="col card"><h3>Examples</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></div><div class="col card"><h3>Example</h3><img alt="A demo of brut.css with a few forms and an error message" src="h/img/brut-demo-light.webp" style="border:solid 10px #777; padding: 10px; width: 80%; align-self: center" /></div></div><div class="row"><div class="col card"><h3>Docs</h3><a class="tb big info stretch" href="h/docs.html">Docs</a></div><div class="col card"><h3>Download</h3><a class="tb warn big stretch" href="h/download.html">Download</a></div></div></div></div></div><footer><div class="container"><p>By <a href="https://yannesposito.com">Yann Esposito</a></p></div></footer></body>
|
||||
|
|
@ -12,8 +12,9 @@
|
|||
{:in xhtml
|
||||
:out :string}))))
|
||||
|
||||
(def brutalism-img
|
||||
"h/img/brutalism.webp")
|
||||
(def brutalism-img "h/img/brutalism.webp")
|
||||
(def demo-light-img "h/img/brut-demo-light.webp")
|
||||
(def demo-dark-img "h/img/brut-demo-dark.webp")
|
||||
|
||||
(defn nav [rel-pref]
|
||||
(let [to (fn [path] (str rel-pref path))]
|
||||
|
|
@ -84,9 +85,10 @@
|
|||
[:span.hl "THIS IS NOT FOR NON-TECHNICAL PEOPLE!!!"]]]
|
||||
[:div.c2]]]]
|
||||
cards [:div.container
|
||||
[:div.col
|
||||
[:div.row
|
||||
[:div.col.card
|
||||
[:h3 "Docs"]
|
||||
[:h3 "Examples"]
|
||||
[:p "A few quick examples to show every components. "
|
||||
"This should be quick and straightforward."]
|
||||
[:p "This CSS framework makes its best to respect some expected composability accross classes."
|
||||
|
|
@ -107,13 +109,21 @@
|
|||
[:br]
|
||||
[:div.btn "classic btn"]
|
||||
[:br]
|
||||
[:div.msg "Some message block"]]]]
|
||||
[:a.tb.big.push.info.stretch {:href (to "h/docs.html")}
|
||||
[:div.msg "Some message block"]]]]]
|
||||
[:div.col.card
|
||||
[:h3 "Example"]
|
||||
[:img
|
||||
{:src (to demo-light-img)
|
||||
:style "border:solid 10px #777; padding: 10px; width: 80%; align-self: center"
|
||||
:alt "A demo of brut.css with a few forms and an error message"}]]]
|
||||
[:div.row
|
||||
[:div.col.card
|
||||
[:h3 "Docs"]
|
||||
[:a.tb.big.info.stretch {:href (to "h/docs.html")}
|
||||
"Docs"]]
|
||||
[:div.col.card
|
||||
[:h3 "Download"]
|
||||
[:p "Download BRUT"]
|
||||
[:a.tb.warn.big.push.stretch {:href (to "h/download.html")} "Download"]]]]]
|
||||
[:a.tb.warn.big.stretch {:href (to "h/download.html")} "Download"]]]]]]
|
||||
[:div
|
||||
hero
|
||||
cards]))
|
||||
|
|
|
|||
BIN
h/img/brut-demo-dark.webp
Normal file
BIN
h/img/brut-demo-dark.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
h/img/brut-demo-light.webp
Normal file
BIN
h/img/brut-demo-light.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Loading…
Reference in a new issue