flex improvements
This commit is contained in:
Yann Esposito (Yogsototh)
parent
8350d1780f
commit
9230e92585
GPG key ID:
7B19A4C650D59646
|
|
@ -22,15 +22,18 @@
|
||||||
"Yann Esposito"]]]])
|
"Yann Esposito"]]]])
|
||||||
|
|
||||||
(defn mk-page [rel-pref metas content]
|
(defn mk-page [rel-pref metas content]
|
||||||
(let [{:keys [title footer?]
|
(let [{:keys [title footer? gapless?]
|
||||||
:or {footer? true}} metas]
|
:or {footer? true
|
||||||
|
gapless? false}} metas]
|
||||||
(h/html
|
(h/html
|
||||||
[:head
|
[:head
|
||||||
[:meta {:http-equiv "Content-Type" :content "text/html; charset=UTF-8"}]
|
[:meta {:http-equiv "Content-Type" :content "text/html; charset=UTF-8"}]
|
||||||
[:meta {:name "viewport" :content "width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"}]
|
[:meta {:name "viewport" :content "width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"}]
|
||||||
[:title title]
|
[:title title]
|
||||||
[:link {:href (str rel-pref "brut-nocolors.min.css") :rel "stylesheet" :type "text/css"}]]
|
[:link {:href (str rel-pref "brut-nocolors.min.css") :rel "stylesheet" :type "text/css"}]]
|
||||||
[:body.col
|
[(if gapless?
|
||||||
|
:body.col.gapless
|
||||||
|
:body.col)
|
||||||
(nav rel-pref)
|
(nav rel-pref)
|
||||||
content
|
content
|
||||||
(when footer?
|
(when footer?
|
||||||
|
|
@ -51,31 +54,32 @@
|
||||||
(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.bg-neutral
|
||||||
[:div.row
|
[:div.row.middle
|
||||||
[:div.block.c3 [:img {:src (to "h/img/brutalism.webp") :alt "brutalism"}]]
|
[:img.c3.no-grow {:src (to "h/img/brutalism.webp") :alt "brutalism"}]
|
||||||
[:div.block.c6
|
[:div.col.block.c6
|
||||||
[:h1.title "BRUT"]
|
[:h1.title "BRUT"]
|
||||||
[:h4 "A Brutalist and Minimalist CSS Framework"]
|
[:h4 "A Brutalist and Minimalist CSS Framework"]
|
||||||
[:p (str "This CSS framework is ideal to be used for admin interface where you"
|
[: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"
|
"want to make it clear, this is not for any kind of end user but only"
|
||||||
"advanced technical people.")]]
|
"advanced technical people.")]]
|
||||||
[:div.block.c3 [:img {:src (to "h/img/brutalism.webp") :alt "brutalism"}]]]]
|
[:img.c3.no-grow {:src (to "h/img/brutalism.webp") :alt "brutalism"}]
|
||||||
|
]]
|
||||||
cards [:div.row
|
cards [:div.row
|
||||||
[:div.row.block
|
[:div.col.card
|
||||||
[:div.col.card
|
[:h3 "Docs"]
|
||||||
[:h3 "Docs"]
|
[:p "Docs"]
|
||||||
[:p "Docs"]
|
[:p "Docs"]
|
||||||
[:p "Docs"]
|
[:a.btn.err.big.push {:href (to "h/docs.html")}
|
||||||
[:a.btn.err.big.push {:href (to "h/docs.html")}
|
"Docs"]]
|
||||||
"Docs"]]]
|
[:div.col.card
|
||||||
[:div.row.block
|
[:h3 "Download"]
|
||||||
[:div.col.card
|
[:div.block
|
||||||
[:h3 "Download"]
|
[:p "Download BRUT"]]
|
||||||
[:div.block
|
[:a.btn.err.big.push {:href (to "h/download.html")}
|
||||||
[:p "Download BRUT"]]
|
"Download"]]]]
|
||||||
[:a.btn.err.big.push {:href (to "h/download.html")}
|
[:div.container.col
|
||||||
"Download"]]]]]
|
hero
|
||||||
[:div hero cards]))
|
cards]))
|
||||||
|
|
||||||
(defn mk-download [rel-pref _metas]
|
(defn mk-download [rel-pref _metas]
|
||||||
(let [to (fn [path] (str rel-pref path))]
|
(let [to (fn [path] (str rel-pref path))]
|
||||||
|
|
@ -91,5 +95,6 @@
|
||||||
mk-index)
|
mk-index)
|
||||||
(gen-page "h/download.html"
|
(gen-page "h/download.html"
|
||||||
{:title "BRUT - download"
|
{:title "BRUT - download"
|
||||||
:footer? false}
|
:footer? false
|
||||||
|
:gapless? true}
|
||||||
mk-download))
|
mk-download))
|
||||||
|
|
|
||||||
2
brut-nocolors.min.css
vendored
2
brut-nocolors.min.css
vendored
|
|
@ -1 +1 @@
|
||||||
:root{--bg:#fff;--fg:#000;--bg2:#eee;--darken:rgba(0, 0, 0, 0.1);--nl:#d9d9d9;--n0:#999;--n1:#8c8c8c;--n2:#808080;--shadow:rgba(0, 0, 0, 0.75);--cnt:#fff;--na:#333;--nb:#000}@media(prefers-color-scheme:dark){:root{--bg:#000;--fg:#ccc;--bg2:#333;--darken:rgba(255, 255, 255, 0.1);--nl:#666666;--n0:#808080;--n1:#8c8c8c;--n2:#999999;--shadow:rgba(128, 128, 128, 0.3);--cnt:#000;--na:#eee;--nb:#fff}}.neutral{color:var(--n0)}.bg-neutral{background:var(--nl)}a{color:var(--fg)}html,body{font-size:12px;min-height:100vh;margin:0;padding:0;border:0;outline:0}*{box-sizing:border-box}body,textarea,input,select{background:var(--bg);color:var(--fg);border-radius:0;font-family:Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;font-size:1rem;margin:0}img{max-width:100%}.addon,.sm,.nav,textarea,input,select{outline:0}.container{padding:0 20px;width:auto}@media only screen and (min-width:1310px){.container{margin:auto;width:1270px}}pre{background:var(--bg2);padding:10px}code{background:var(--darken);border:solid 1px var(--darken);padding:1px}.big{font-size:2em}.huge{font-size:3em}.tb,.btn{text-decoration:none}.tb{font-weight:700;cursor:pointer;padding:2px}.tb:before,.tb:after{opacity:.3;display:inline-block}.tb:before{content:"〈"}.tb:after{content:"〉"}.tb:hover{text-decoration:underline}.tb:hover::before,.tb:hover::after{opacity:1}.tb:active:before{content:"《"}.tb:active:after{content:"》"}.btn{background:var(--n0);border:solid 2px #000;color:#fff;font-weight:700;cursor:pointer;display:inline-block;margin:2px 0;padding:1rem 2rem;box-shadow:4px 4px var(--shadow);text-align:center}.btn:hover{background:var(--n1);color:#fff}.btn:active,.btn:focus{color:#fff;background:var(--n2);box-shadow:1px 1px #000;position:relative;top:3px;left:3px}.btn.sm{padding:.5rem 1rem}.btn.std{width:12rem}.btn.big.std{width:20rem}.btn.huge.std{width:24rem}.col,.row{display:flex;flex-direction:row;justify-content:stretch;align-items:stretch;flex-wrap:wrap}.row>*{flex:1}.col>*{flex:0}.col{flex-direction:column}.table,.c12{width:100%;flex:12}.c11{flex:11;width:91.66%}.c10{flex:10;width:83.33%}.c9{flex:9;width:75%}.c8{flex:8;width:66.66%}.c7{flex:7;width:58.33%}.c6{flex:6;width:50%}.c5{flex:5;width:41.66%}.c4{flex:4;width:33.33%}.c3{flex:3;width:25%}.c2{flex:2;width:16.66%}.c1{flex:1;width:8.33%}@media(max-width:870px){.row .col{flex:0 1 100%;width:100%}}.card,.block{padding:5px;border:solid 2px}.col.card,.col.block{justify-content:flex-start;align-items:flex-start}.card{border-color:var(--nl)}.block{border-color:transparent}.central{display:flex;align-items:center;justify-content:center;background-size:cover;min-height:100vh}button~.central{min-height:calc(100vh - 50px)}.hero{padding:2rem;outline-style:double;outline-width:.5rem;margin:1rem}.fill{flex-grow:1}.push{justify-self:flex-end;margin-top:auto}h1,h2,h3,h4,h5,h6{display:table;padding:.25rem;font-size:1rem;margin:0;border:0;outline:0}h1:before,h2:before,h3:before,h4:before,h5:before,h6:before{content:"== "}h1:after,h2:after,h3:after,h4:after,h5:after,h6:after{content:" =="}h1{background:var(--fg);color:var(--bg)}h2{background:var(--n0);color:var(--bg)}h3{text-decoration:underline}h4{text-decoration:underline;text-decoration-color:var(--n0)}.ico{font:20px Arial Unicode MS,Lucida Sans Unicode;line-height:10px;vertical-align:top}label>*{display:inline}form>*{display:block;margin-bottom:10px}textarea,input,select{border:2px solid;padding:8px}textarea,input[type=text]{-webkit-appearance:none;width:13em;outline:0;border:2px solid}.addon{padding:8px 12px;border-width:2px;border-style:solid none solid solid}textarea:focus,input:focus,select:focus{border-color:var(--i1)}.nav{background:var(--bg2);border-bottom:solid 1px var(--darken)}.nav{height:50px;padding:11px 0 15px}.nav a{text-decoration:none;opacity:.7;padding-right:1em;position:relative;top:-1px}.nav a:hover{opacity:1}.nav .pagename{opacity:1;font-weight:700;font-size:22px;top:1px}.btn.btn-close{float:right;font-size:25px;margin:-51px 10px;display:none;border:none;box-shadow:none;background:0 0}@media(max-width:500px){.btn.btn-close{display:block}.nav{overflow:hidden}.pagename{margin-top:-11px}.nav:active,.nav:focus{height:auto}.nav div:before{background:var(--bg2);border-bottom:11px double;border-top:3px solid;content:'';float:right;height:4px;position:relative;right:3px;top:14px;width:20px}.nav a{display:block;padding:.5em 0;width:50%}}.table th,.table td{padding:.5em;text-align:left}.table tbody>:nth-child(2n-1){background:var(--bg2)}.msg{background:var(--nl);border-left:5px solid var(--n0);padding:1.5em}
|
:root{--bg:#fff;--fg:#000;--bg2:#eee;--darken:rgba(0, 0, 0, 0.1);--nl:#d9d9d9;--n0:#999;--n1:#8c8c8c;--n2:#808080;--shadow:rgba(0, 0, 0, 0.75);--cnt:#fff;--na:#333;--nb:#000}@media(prefers-color-scheme:dark){:root{--bg:#000;--fg:#ccc;--bg2:#333;--darken:rgba(255, 255, 255, 0.1);--nl:#666666;--n0:#808080;--n1:#8c8c8c;--n2:#999999;--shadow:rgba(128, 128, 128, 0.3);--cnt:#000;--na:#eee;--nb:#fff}}.neutral{color:var(--n0)}.bg-neutral{background:var(--nl)}a{color:var(--fg)}html,body{font-size:12px;min-height:100vh;margin:0;padding:0;border:0;outline:0}*{box-sizing:border-box}body,textarea,input,select{background:var(--bg);color:var(--fg);border-radius:0;font-family:Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;font-size:1rem;margin:0}img{max-width:100%}.addon,.sm,.nav,textarea,input,select{outline:0;line-height:1rem}.container{padding:0 20px;width:auto}@media only screen and (min-width:1310px){.container{margin:auto;width:1270px}}pre{background:var(--bg2);padding:10px}code{background:var(--darken);border:solid 1px var(--darken);padding:1px}.big{font-size:2em}.huge{font-size:3em}.tb,.btn{text-decoration:none}.tb{font-weight:700;cursor:pointer;padding:2px}.tb:before,.tb:after{opacity:.3;display:inline-block}.tb:before{content:"〈"}.tb:after{content:"〉"}.tb:hover{text-decoration:underline}.tb:hover::before,.tb:hover::after{opacity:1}.tb:active:before{content:"《"}.tb:active:after{content:"》"}.btn{background:var(--n0);border:solid 2px #000;color:#fff;font-weight:700;cursor:pointer;display:inline-block;margin:2px 0;padding:1rem 2rem;box-shadow:4px 4px var(--shadow);text-align:center}.btn:hover{background:var(--n1);color:#fff}.btn:active,.btn:focus{color:#fff;background:var(--n2);box-shadow:1px 1px #000;position:relative;top:3px;left:3px}.btn.sm{padding:.5rem 1rem}.btn.std{width:12rem}.btn.big.std{width:20rem}.btn.huge.std{width:24rem}.col,.row{display:flex;flex-direction:row;justify-content:stretch;align-items:stretch;flex-wrap:wrap;gap:1rem}.row>*{flex:1}.col>*{flex:0}.col{flex-direction:column}.middle{justify-content:center;align-item:center}.gapless{gap:0}.table,.c12{width:100%;flex:12}.c11{flex:11;width:91.66%}.c10{flex:10;width:83.33%}.c9{flex:9;width:75%}.c8{flex:8;width:66.66%}.c7{flex:7;width:58.33%}.c6{flex:6;width:50%}.c5{flex:5;width:41.66%}.c4{flex:4;width:33.33%}.c3{flex:3;width:25%}.c2{flex:2;width:16.66%}.c1{flex:1;width:8.33%}@media(max-width:870px){.row .col{flex:0 1 100%;width:100%}.no-mobile{display:none}}.no-grow{flex:0}.card,.block{padding:1rem;border:solid 1rem}.col.card,.col.block{justify-content:flex-start;align-items:flex-start}.card{border-color:var(--nl)}.block{border-color:transparent}.central{display:flex;align-items:center;justify-content:center;background-size:cover;min-height:100vh}button~.central{min-height:calc(100vh - 50px)}.hero{padding:2rem;border:double 1rem}.fill{flex-grow:1}.push{justify-self:flex-end;margin-top:auto}h1,h2,h3,h4,h5,h6{display:table;padding:.5rem;font-size:1rem;margin:0;border:0;outline:0}h1:before,h2:before,h3:before,h4:before,h5:before,h6:before{content:"== "}h1:after,h2:after,h3:after,h4:after,h5:after,h6:after{content:" =="}h1{background:var(--fg);color:var(--bg)}h2{background:var(--n0);color:var(--bg)}h3{text-decoration:underline}h4{text-decoration:underline;text-decoration-color:var(--n0)}.ico{font:20px Arial Unicode MS,Lucida Sans Unicode;line-height:10px;vertical-align:top}label>*{display:inline}form>*{display:block;margin-bottom:10px}textarea,input,select{border:2px solid;padding:8px}textarea,input[type=text]{-webkit-appearance:none;width:13em;outline:0;border:2px solid}.addon{padding:8px 12px;border-width:2px;border-style:solid none solid solid}textarea:focus,input:focus,select:focus{border-color:var(--i1)}.nav{background:var(--bg2);border-bottom:solid 1px var(--darken)}.nav{height:50px;padding:11px 0 15px}.nav a{text-decoration:none;opacity:.7;padding-right:1em;position:relative;top:-1px}.nav a:hover{opacity:1}.nav .pagename{opacity:1;font-weight:700;font-size:22px;top:1px}.btn.btn-close{float:right;font-size:25px;margin:-51px 10px;display:none;border:none;box-shadow:none;background:0 0}@media(max-width:500px){.btn.btn-close{display:block}.nav{overflow:hidden}.pagename{margin-top:-11px}.nav:active,.nav:focus{height:auto}.nav div:before{background:var(--bg2);border-bottom:11px double;border-top:3px solid;content:'';float:right;height:4px;position:relative;right:3px;top:14px;width:20px}.nav a{display:block;padding:.5em 0;width:50%}}.table th,.table td{padding:.5em;text-align:left}.table tbody>:nth-child(2n-1){background:var(--bg2)}.msg{background:var(--nl);border-left:5px solid var(--n0);padding:1rem}
|
||||||
2
brut.min.css
vendored
2
brut.min.css
vendored
File diff suppressed because one or more lines are too long
29
h/docs.html
29
h/docs.html
|
|
@ -84,8 +84,7 @@
|
||||||
<pre class="block"><a class="btn sm info">btn sm info</a></pre>
|
<pre class="block"><a class="btn sm info">btn sm info</a></pre>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col c4">
|
<div class="col c4 card">
|
||||||
<div class="card">
|
|
||||||
<h3>Standardized Width <code>btn std</code></h3>
|
<h3>Standardized Width <code>btn std</code></h3>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<a class="btn std">btn std</a>
|
<a class="btn std">btn std</a>
|
||||||
|
|
@ -95,10 +94,8 @@
|
||||||
<a class="btn std err">btn std err</a>
|
<a class="btn std err">btn std err</a>
|
||||||
<a class="btn std fatal">btn std fatal</a>
|
<a class="btn std fatal">btn std fatal</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col c4">
|
<div class="col c4 card">
|
||||||
<div class="card">
|
|
||||||
<h3>Big</h3>
|
<h3>Big</h3>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<a class="btn std big ">btn std</a>
|
<a class="btn std big ">btn std</a>
|
||||||
|
|
@ -106,24 +103,22 @@
|
||||||
<a class="btn std big ok">btn std ok</a>
|
<a class="btn std big ok">btn std ok</a>
|
||||||
<a class="btn std big warn">btn std warn</a>
|
<a class="btn std big warn">btn std warn</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col c4">
|
<div class="col c4 card">
|
||||||
<div class="card">
|
|
||||||
<h3>Huge</h3>
|
<h3>Huge</h3>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<a class="btn std huge">btn std</a>
|
<a class="btn std huge">btn std</a>
|
||||||
<a class="btn std huge info">btn std info</a>
|
<a class="btn std huge info">btn std info</a>
|
||||||
<a class="btn std huge ok">btn std ok</a>
|
<a class="btn std huge ok">btn std ok</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h1>Messages</h1>
|
<h1>Messages</h1>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col c6">
|
<div class="col c6 gapless">
|
||||||
<h2>Basic Messages</h2>
|
<h2>Basic Messages</h2>
|
||||||
|
<br/>
|
||||||
<div class="msg">
|
<div class="msg">
|
||||||
<strong>Normal Message</strong>
|
<strong>Normal Message</strong>
|
||||||
This is a normal message with <code>msg</code>.
|
This is a normal message with <code>msg</code>.
|
||||||
|
|
@ -149,31 +144,31 @@
|
||||||
This is done by adding <code>fatal</code> to the class.
|
This is done by adding <code>fatal</code> to the class.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col c6">
|
<div class="col c6 gapless">
|
||||||
<h2>Strong Alerts</h2>
|
<h2>Strong Alerts</h2>
|
||||||
|
<br/>
|
||||||
<div class="msg alert">
|
<div class="msg alert">
|
||||||
<strong>Alert Message</strong>
|
<strong>Alert Message</strong>
|
||||||
This is a normal message with <code>msg</code>.
|
This is a normal message with <code>msg</code>.
|
||||||
</div>
|
</div>
|
||||||
<div class="msg alert info">
|
<div class="msg alert info">
|
||||||
<strong><i class="ico">☞</i>Alert Info</strong>
|
<strong><i class="ico">☞</i> Alert Info</strong>
|
||||||
This is done by adding <code>info</code> to the class.
|
This is done by adding <code>info</code> to the class.
|
||||||
</div>
|
</div>
|
||||||
<div class="msg alert ok">
|
<div class="msg alert ok">
|
||||||
<strong><i class="ico">☑</i>Alert OK</strong>
|
<strong><i class="ico">☑</i> Alert OK</strong>
|
||||||
This is done by adding <code>ok</code> to the class.
|
This is done by adding <code>ok</code> to the class.
|
||||||
</div>
|
</div>
|
||||||
<div class="msg alert warn">
|
<div class="msg alert warn">
|
||||||
<strong><i class="ico">☣</i>Alert Warning</strong>
|
<strong><i class="ico">☣</i> Alert Warning</strong>
|
||||||
This is done by adding <code>warn</code> to the class.
|
This is done by adding <code>warn</code> to the class.
|
||||||
</div>
|
</div>
|
||||||
<div class="msg alert err">
|
<div class="msg alert err">
|
||||||
<strong><i class="ico">☒</i>Alert Error</strong>
|
<strong><i class="ico">☒</i> Alert Error</strong>
|
||||||
This is done by adding <code>err</code> to the class.
|
This is done by adding <code>err</code> to the class.
|
||||||
</div>
|
</div>
|
||||||
<div class="msg alert fatal">
|
<div class="msg alert fatal">
|
||||||
<strong><i class="ico">☒</i>Alert Fatal</strong>
|
<strong><i class="ico">☒</i> Alert Fatal</strong>
|
||||||
This is done by adding <code>fatal</code> to the class.
|
This is done by adding <code>fatal</code> to the class.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -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 - download</title><link href="../brut-nocolors.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="central fill" style="background:url('../h/img/brutalism.webp')"><a class="btn warn huge" href="../brut.min.css">Download BRUT</a></div></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 - download</title><link href="../brut-nocolors.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="central fill" style="background:url('../h/img/brutalism.webp')"><a class="btn warn huge" href="../brut.min.css">Download BRUT</a></div></body>
|
||||||
|
|
@ -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-nocolors.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><div class="hero bg-neutral"><div class="row"><div class="block c3"><img alt="brutalism" src="h/img/brutalism.webp" /></div><div class="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><div class="block c3"><img alt="brutalism" src="h/img/brutalism.webp" /></div></div></div><div class="row"><div class="row block"><div class="col card"><h3>Docs</h3><p>Docs</p><p>Docs</p><a class="btn err big push" href="h/docs.html">Docs</a></div></div><div class="row block"><div class="col card"><h3>Download</h3><div class="block"><p>Download BRUT</p></div><a class="btn err big push" href="h/download.html">Download</a></div></div></div></div><div class="row"><div class="block"><span>By <a href="https://yannesposito.com">Yann Esposito</a></span></div></div></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-nocolors.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 err 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 err big push" href="h/download.html">Download</a></div></div></div><div class="row"><div class="block"><span>By <a href="https://yannesposito.com">Yann Esposito</a></span></div></div></body>
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
/* card and block to put space between blocks */
|
/* card and block to put space between blocks */
|
||||||
.card, .block {
|
.card, .block {
|
||||||
padding: 5px;
|
padding: 1rem;
|
||||||
border: solid 2px;
|
border: solid 1rem;
|
||||||
}
|
}
|
||||||
.col.card, .col.block {
|
.col.card, .col.block {
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
|
|
@ -28,9 +28,7 @@ button ~ .central {
|
||||||
|
|
||||||
.hero {
|
.hero {
|
||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
outline-style: double;
|
border: double 1rem;
|
||||||
outline-width: 0.5rem;
|
|
||||||
margin: 1rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.fill { flex-grow: 1; }
|
.fill { flex-grow: 1; }
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,7 @@ img { max-width: 100%; }
|
||||||
|
|
||||||
.addon, .sm, .nav, textarea, input, select {
|
.addon, .sm, .nav, textarea, input, select {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
|
line-height: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
|
|
|
||||||
|
|
@ -6,13 +6,18 @@
|
||||||
justify-content: stretch;
|
justify-content: stretch;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
gap: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.row > * { flex: 1; }
|
.row > * { flex: 1; }
|
||||||
.col > * { flex: 0; }
|
.col > * { flex: 0; }
|
||||||
.col {
|
.col {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
.middle { justify-content: center; align-item: center; }
|
||||||
|
|
||||||
|
.gapless { gap: 0; }
|
||||||
|
|
||||||
.table, .c12 {
|
.table, .c12 {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -80,4 +85,9 @@
|
||||||
flex: 0 1 100%;
|
flex: 0 1 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
.no-mobile {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.no-grow { flex: 0; }
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
h1, h2, h3, h4, h5, h6 {
|
||||||
display: table;
|
display: table;
|
||||||
padding: 0.25rem;
|
padding: 0.5rem;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
.msg {
|
.msg {
|
||||||
background: var(--nl);
|
background: var(--nl);
|
||||||
border-left: 5px solid var(--n0);
|
border-left: 5px solid var(--n0);
|
||||||
padding: 1.5em;
|
padding: 1rem;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue