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

Few fixes, better composability of colors

Browse source
This commit is contained in:
Yann Esposito (Yogsototh) 2022-10-26 16:06:40 +02:00
parent cb938464cb
commit bb7b1b222d
Signed by untrusted user who does not match committer: yogsototh
GPG key ID: 7B19A4C650D59646
5 changed files with 17 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
bb/brut/site.clj
View file

@ -64,16 +64,20 @@
(defn mk-index [rel-pref _metas]
(let [to (fn [path] (str rel-pref path))
hero [:div.hero.bg-neutral
hero [:div.hero
{:style (str "background:url('" (to brutalism-img) "')")}
[:div.row.middle
[:img.c3.no-grow {:src (to brutalism-img) :alt "brutalism"}]
[:div.col.block.c6
[:h1.title "BRUT"]
[:h4 "A Brutalist and Minimalist CSS Framework"]
[:p (str "This CSS framework is ideal to be used for admin interface where you"
"want to make it clear, this is not for any kind of end user but only"
"advanced technical people.")]]
[:img.c3.no-grow {:src (to brutalism-img) :alt "brutalism"}]
[:div.col.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.col.c3]
]]
cards [:div.row
[: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"><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="container col"><div class="hero bg-neutral"><div class="row middle"><img alt="brutalism" class="c3 no-grow" src="h/img/brutalism.webp" /><div class="col block c6"><h1 class="title">BRUT</h1><h4>A Brutalist and Minimalist CSS Framework</h4><p>This CSS framework is ideal to be used for admin interface where youwant to make it clear, this is not for any kind of end user but onlyadvanced technical people.</p></div><img alt="brutalism" class="c3 no-grow" src="h/img/brutalism.webp" /></div></div><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><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"><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="container col"><div class="hero" style="background:url(&apos;h/img/brutalism.webp&apos;)"><div class="row middle"><div class="col 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="col c3"></div></div></div><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><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>

2
src/colors.less
View file

@ -40,7 +40,7 @@ p > a, li > a { color: var(--accent); }
filter: brightness(90%) invert(100%) hue-rotate(180deg);
}
}
.hl { background: var(--fg); color: var(--bg); }
.msg, .btn { background-color: var(--bg2) }
.b, .info { color: var(--bg); background-color: var(--b); border-color: var(--fg); }
.g, .ok { color: var(--bg); background-color: var(--g); border-color: var(--fg); }

4
src/general.less
View file

@ -50,9 +50,7 @@ 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;}
/* highligh revert the colors */
.hl { background: var(--fg); color: var(--bg);
border: solid 1px;
.hl { border: solid 1px;
padding: 1px;
}
/* doc are for long text to read */