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

Cleaning up and improvements

Browse source
This commit is contained in:
Yann Esposito (Yogsototh) 2022-10-26 19:55:44 +02:00
parent 5144b0637b
commit 1e29408400
Signed by untrusted user who does not match committer: yogsototh
GPG key ID: 7B19A4C650D59646
7 changed files with 26 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
bb/brut/site.clj
View file

@ -86,16 +86,23 @@
"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.fill.card
[:p "With headings"]
[:h3 "this is a normal " [:code "h3"]]
[:h3.tight.big "this is a " [:code "h3"] " with " [:code "big"]]
[:h3.tight.y "this is a " [:code "h3"] " with " [:code "y"] "for yellow"]
[:h3.tight.big.y "this is a " [:code "h3"] " with both " [:code "big"] " and " [:code "y"] "."]
[:br]
[:h3.tight "this contains a " [:code "hl"] " " [:span.hl "HL"] ]
[:h3.tight.hl "this a " [:code "h3"] " with " [:code "hl"] ]
]
[: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

2
brut.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
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 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="fill card"><p>With headings</p><h3>this is a normal <code>h3</code></h3><h3 class="tight big">this is a <code>h3</code> with <code>big</code></h3><h3 class="tight y">this is a <code>h3</code> with <code>y</code>for yellow</h3><h3 class="tight big y">this is a <code>h3</code> with both <code>big</code> and <code>y</code>.</h3><br /><h3 class="tight">this contains a <code>hl</code> <span class="hl">HL</span></h3><h3 class="tight hl">this a <code>h3</code> with <code>hl</code></h3></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 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>

1
src/buttons.less
View file

@ -11,7 +11,6 @@
.tb:hover::before,.tb:hover::after { opacity: 1; }
.tb:active:before { content: "❰"; }
.tb:active:after { content: "❱"; }
.tb.hl { border: none; }
.btn {
border: solid 2px var(--fg);

8
src/general.less
View file

@ -51,9 +51,13 @@ table { font-size: 1rem; }
.sm { font-size: 0.75rem; line-height: 0.65rem; }
.big { font-size: 2rem; line-height: 2.8rem;}
.huge { font-size: 3rem; line-height: 4.1rem;}
.hl { border: solid 1px var(--fg);
padding: 1px;
.hl { border-color: var(--fg);
}
p > .hl, li > .hl {
border: solid 1px var(--fg);
padding: 1px;
}
/* doc are for long text to read */
.doc { max-width: 65ch;
font-size: 1.25rem;

2
src/grid.less
View file

@ -84,7 +84,7 @@
}
/* For smaller screens, change all columns to 100% width */
@media (max-width:800px) {
@media (max-width:960px) {
.row > * {
flex: 0 1 100%;
width: 100%;

1
src/headings.less
View file

@ -11,7 +11,6 @@ h1, h2, h3, h4, h5, h6 {
a {
color: var(--bg);
}
&.hl { padding: 0.5rem; }
}
.tight { margin: 0; }