Few fixes, better composability of colors
This commit is contained in:
parent
cb938464cb
commit
bb7b1b222d
5 changed files with 17 additions and 15 deletions
|
@ -64,16 +64,20 @@
|
||||||
|
|
||||||
(defn mk-index [rel-pref _metas]
|
(defn mk-index [rel-pref _metas]
|
||||||
(let [to (fn [path] (str rel-pref path))
|
(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
|
[:div.row.middle
|
||||||
[:img.c3.no-grow {:src (to brutalism-img) :alt "brutalism"}]
|
[:div.col.c3]
|
||||||
[:div.col.block.c6
|
[:div.c6.block.bg-neutral
|
||||||
[:h1.title "BRUT"]
|
[:div.col
|
||||||
[:h4 "A Brutalist and Minimalist CSS Framework"]
|
[:h1.tight.huge "BRUT"]
|
||||||
[:p (str "This CSS framework is ideal to be used for admin interface where you"
|
[:h4 "A Brutalist and Minimalist CSS Framework"]
|
||||||
"want to make it clear, this is not for any kind of end user but only"
|
[:p "This CSS framework is ideal to be used for "
|
||||||
"advanced technical people.")]]
|
[:strong "private admin interfaces"]
|
||||||
[:img.c3.no-grow {:src (to brutalism-img) :alt "brutalism"}]
|
"."]
|
||||||
|
[: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
|
cards [:div.row
|
||||||
[:div.col.card
|
[:div.col.card
|
||||||
|
|
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"><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('h/img/brutalism.webp')"><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>
|
|
@ -40,7 +40,7 @@ p > a, li > a { color: var(--accent); }
|
||||||
filter: brightness(90%) invert(100%) hue-rotate(180deg);
|
filter: brightness(90%) invert(100%) hue-rotate(180deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.hl { background: var(--fg); color: var(--bg); }
|
||||||
.msg, .btn { background-color: var(--bg2) }
|
.msg, .btn { background-color: var(--bg2) }
|
||||||
.b, .info { color: var(--bg); background-color: var(--b); border-color: var(--fg); }
|
.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); }
|
.g, .ok { color: var(--bg); background-color: var(--g); border-color: var(--fg); }
|
||||||
|
|
|
@ -50,9 +50,7 @@ table { font-size: 1rem; }
|
||||||
.sm { font-size: 0.75rem; line-height: 0.65rem; }
|
.sm { font-size: 0.75rem; line-height: 0.65rem; }
|
||||||
.big { font-size: 2rem; line-height: 2.8rem;}
|
.big { font-size: 2rem; line-height: 2.8rem;}
|
||||||
.huge { font-size: 3rem; line-height: 4.1rem;}
|
.huge { font-size: 3rem; line-height: 4.1rem;}
|
||||||
/* highligh revert the colors */
|
.hl { border: solid 1px;
|
||||||
.hl { background: var(--fg); color: var(--bg);
|
|
||||||
border: solid 1px;
|
|
||||||
padding: 1px;
|
padding: 1px;
|
||||||
}
|
}
|
||||||
/* doc are for long text to read */
|
/* doc are for long text to read */
|
||||||
|
|
Loading…
Reference in a new issue