improved card/block
This commit is contained in:
Yann Esposito (Yogsototh)
parent
861c7bcccd
commit
bce23d1cca
GPG key ID:
7B19A4C650D59646
|
|
@ -68,50 +68,48 @@
|
|||
{:style (format "background: url(%s)" (to brutalism-img))}
|
||||
[:div.container.col.middle
|
||||
[:div.row.middle
|
||||
[:div.c3]
|
||||
[:div.c6.block.bg-neutral
|
||||
[:div.col
|
||||
[:h1.tight.huge "BRUT"]
|
||||
[:h4 "A Brutalist and Minimalist CSS Framework"]
|
||||
[:p "This CSS framework is ideal to be used for "
|
||||
[:strong "private admin interfaces"]
|
||||
"."]
|
||||
[:p " Just by the look of it, it will scream: "
|
||||
[:span.hl "THIS IS NOT FOR NON-TECHNICAL PEOPLE!!!"]]]]
|
||||
[:div.c3]]]]
|
||||
cards [:div.container.row
|
||||
[:div.col.card
|
||||
[:h3 "Docs"]
|
||||
[: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."
|
||||
" Here are a few examples:"]
|
||||
[:div.row
|
||||
[:div.block
|
||||
[:p.tight "A block: "]
|
||||
[:div.card
|
||||
[:div.tb "textual btn"]
|
||||
[:br]
|
||||
[:div.btn "classic btn"]
|
||||
[:br]
|
||||
[:div.msg "Some message block"]]]
|
||||
[:div.block
|
||||
[:p.tight "Then add the class " [:code "big"] ": "]
|
||||
[:div.card.big
|
||||
[:div.tb "textual btn"]
|
||||
[:br]
|
||||
[:div.btn "classic btn"]
|
||||
[:br]
|
||||
[:div.msg "Some message block"]]]]
|
||||
[:a.btn.big.push {:href (to "h/docs.html")}
|
||||
"Docs"]]
|
||||
[:div.col.card
|
||||
[:h3 "Download"]
|
||||
[:div.block
|
||||
[:p "Download BRUT"]]
|
||||
[:a.btn.warn.big.push {:href (to "h/download.html")}
|
||||
"Download"]]]]
|
||||
[:div.col
|
||||
[: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 "
|
||||
[:strong "private admin interfaces"]
|
||||
"."]
|
||||
[:p " Just by the look of it, it will scream: "
|
||||
[:span.hl "THIS IS NOT FOR NON-TECHNICAL PEOPLE!!!"]]]
|
||||
[:div.c2]]]]
|
||||
cards [:div.container
|
||||
[:div.row
|
||||
[:div.card
|
||||
[:h3 "Docs"]
|
||||
[: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."
|
||||
" Here are a few examples:"]
|
||||
[:div.row
|
||||
[:div
|
||||
[:p.tight "A block: "]
|
||||
[:div.card
|
||||
[:div.tb "textual btn"]
|
||||
[:br]
|
||||
[:div.btn "classic btn"]
|
||||
[:br]
|
||||
[:div.msg "Some message block"]]]
|
||||
[:div
|
||||
[:p.tight "Then add the class " [:code "big"] ": "]
|
||||
[:div.card.big
|
||||
[:div.tb "textual btn"]
|
||||
[:br]
|
||||
[:div.btn "classic btn"]
|
||||
[:br]
|
||||
[:div.msg "Some message block"]]]]
|
||||
[:a.btn.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"]]]]]
|
||||
[:div
|
||||
hero
|
||||
cards]))
|
||||
|
||||
|
|
|
|||
2
brut.min.css
vendored
2
brut.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -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 class="col"><div class="hero" style="background: url(h/img/brutalism.webp)"><div class="container col middle"><div class="row middle"><div class="c3"></div><div class="c6 block bg-neutral"><div class="col"><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><div class="c3"></div></div></div></div><div class="container 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 class="block"><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 class="block"><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><div class="block"><p>Download BRUT</p></div><a class="btn warn big push" href="h/download.html">Download</a></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>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>
|
||||
|
|
@ -15,9 +15,11 @@
|
|||
|
||||
|
||||
.card { border-color: var(--nl); }
|
||||
.card > *:first-child { margin-top: 0; }
|
||||
.card > *, .block > * { margin: 1rem; }
|
||||
.card,.block {
|
||||
& > h1:first-child, & > h2:first-child, & > h3:first-child, & > h4:first-child, & > h5:first-child, & > h6:first-child { margin-top: 0; }
|
||||
& > h1, & > h2, & > h3, & > h4, & > h5 { margin-left: 0; margin-right: 0; } }
|
||||
.block { border-color: transparent; }
|
||||
.block > *:first-child { margin-top: 0; }
|
||||
|
||||
/* To be used as main image for presentation */
|
||||
.central {
|
||||
|
|
|
|||
Loading…
Reference in a new issue