Improve big buttons
This commit is contained in:
parent
6ae3dd0b16
commit
051953311a
4 changed files with 10 additions and 10 deletions
|
@ -78,8 +78,8 @@
|
||||||
cards [:div.row
|
cards [:div.row
|
||||||
[:div.col.card
|
[:div.col.card
|
||||||
[:h3 "Docs"]
|
[:h3 "Docs"]
|
||||||
[:p "Docs"]
|
[:p "A few quick examples to show every components. "
|
||||||
[:p "Docs"]
|
"This should be quick and straightforward."]
|
||||||
[:a.btn.big.push {:href (to "h/docs.html")}
|
[:a.btn.big.push {:href (to "h/docs.html")}
|
||||||
"Docs"]]
|
"Docs"]]
|
||||||
[: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>Docs</p><p>Docs</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 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>
|
|
@ -17,21 +17,21 @@
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 0 4px 4px 0;
|
margin: 0 0.25em 0.25em 0;
|
||||||
padding: 1rem 2rem;
|
padding: 1rem 2rem;
|
||||||
box-shadow: 4px 4px var(--nl);
|
box-shadow: 0.25em 0.25em var(--nl);
|
||||||
vertical-align: bottom;
|
vertical-align: bottom;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn:hover {
|
.btn:hover {
|
||||||
box-shadow: 4px 4px var(--n1);
|
box-shadow: 0.25em 0.25em var(--n1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn:active,.btn:focus {
|
.btn:active,.btn:focus {
|
||||||
box-shadow: 1px 1px var(--n2);
|
box-shadow: 0.05em 0.05em var(--n2);
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 3px;
|
top: 0.2em;
|
||||||
left: 3px;
|
left: 0.2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn.sm { padding: 0.5rem 1rem; }
|
.btn.sm { padding: 0.5rem 1rem; }
|
||||||
|
|
Loading…
Reference in a new issue