still minor changes
This commit is contained in:
parent
defbbe9b07
commit
12a5979cb4
7 changed files with 11 additions and 13 deletions
2
_site/brut.min.css
vendored
2
_site/brut.min.css
vendored
File diff suppressed because one or more lines are too long
|
@ -79,7 +79,7 @@
|
||||||
<h5 class="tight">h5 tight</h5>
|
<h5 class="tight">h5 tight</h5>
|
||||||
<h6 class="tight">h6 tight</h6>
|
<h6 class="tight">h6 tight</h6>
|
||||||
</div>
|
</div>
|
||||||
</pre></details></div><div class="col card c6"><div class="inner" id="itemize"><h2>itemization</h2><div class="content"><h3>ul</h3><ul><li>item 1</li><li>item 2</li><li>item 3; with a very long text that should wrap to the next line in any browser. We'll see that the wrapped text should be aligned with the text of the other items. This is due to the <code>list-style-position: outside</code>.</li><li>item 4</li></ul></div><h3>ol</h3><div class="content"><ol><li>item 1</li><li>item 2</li><li>item 3</li><li>item 4</li></ol></div></div><details class="push stretch"><summary class="bg-neutral">code</summary><pre>
|
</pre></details></div><div class="col card c6"><div class="inner" id="itemize"><h2>itemization</h2><div class="content"><h3>ul</h3><ul><li>item 1</li><li>item 2</li><li>item 3; with a very long text that should wrap to the next line in any browser. We'll see that the wrapped text should be aligned with the text of the other items. This is due to the <code>list-style-position: outside</code>.</li><li>item 4</li></ul><h3>ol</h3><ol><li>item 1</li><li>item 2</li><li>item 3</li><li>item 4</li></ol></div></div><details class="push stretch"><summary class="bg-neutral">code</summary><pre>
|
||||||
<div class="inner" id="itemize">
|
<div class="inner" id="itemize">
|
||||||
<h2>itemization</h2>
|
<h2>itemization</h2>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
|
@ -93,9 +93,7 @@
|
||||||
due to the <code>list-style-position: outside</code>.</li>
|
due to the <code>list-style-position: outside</code>.</li>
|
||||||
<li>item 4</li>
|
<li>item 4</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
<h3>ol</h3>
|
||||||
<h3>ol</h3>
|
|
||||||
<div class="content">
|
|
||||||
<ol>
|
<ol>
|
||||||
<li>item 1</li>
|
<li>item 1</li>
|
||||||
<li>item 2</li>
|
<li>item 2</li>
|
||||||
|
|
|
@ -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.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" download="brut.min.css" href="../brut.min.css"><span>Download BRUT<span>(8041 Bytes)</span></span></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.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" download="brut.min.css" href="../brut.min.css"><span>Download BRUT<span>(8057 Bytes)</span></span></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.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><div class="hero" style="background: url(h/img/brutalism.webp)"><div class="container col middle"><div class="row middle"><div class="c2"></div><div class="c8 col block bg-neutral"><h1 class="tight huge">BRUT</h1><h4 class="big">A Brutalist and Minimalist CSS Framework</h4><p class="big">This CSS framework is ideal to be used for <strong>private admin interfaces</strong>.</p><p class="big"> Just by the look of it, it will scream: <br /><span class="hl">THIS IS NOT FOR NON-TECHNICAL PEOPLE!!!</span></p></div><div class="c2"></div></div></div></div><div class="container"><div class="col"><div class="row"><div class="col card"><h3>Examples</h3><div class="content"><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><p class="tight">A <i>card</i>:</p><div class="card"><h3>title</h3><div class="content"><div class="tb">textual btn</div><br /><div class="btn">classic btn</div><br /><div class="msg">Some message block</div></div></div></div><div><p class="tight">The same <i>card</i> with the class <code>big</code>: </p><div class="card big"><h3>title</h3><div class="content"><div class="tb">textual btn</div><br /><div class="btn">classic btn</div><br /><div class="msg">Some message block</div></div></div></div></div></div></div><div class="card"><h3>Example</h3><div class="content"><figure><img alt="A demo of brut.css with a few forms and an error message" src="h/img/brut-demo-light.webp" /><figcaption>What a real app looks like with BRUT</figcaption></figure></div></div></div><div class="row"><div class="col card"><h3>Docs</h3><div class="col content"><a class="tb big info stretch" href="h/docs.html">Docs</a></div></div><div class="col card"><h3>Download</h3><div class="col content"><a class="tb warn big stretch" download="brut.min.css" href="brut.min.css">Download (8041 Bytes)</a></div></div></div></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><div class="hero" style="background: url(h/img/brutalism.webp)"><div class="container col middle"><div class="row middle"><div class="c2"></div><div class="c8 col block bg-neutral"><h1 class="tight huge">BRUT</h1><h4 class="big">A Brutalist and Minimalist CSS Framework</h4><p class="big">This CSS framework is ideal to be used for <strong>private admin interfaces</strong>.</p><p class="big"> Just by the look of it, it will scream: <br /><span class="hl">THIS IS NOT FOR NON-TECHNICAL PEOPLE!!!</span></p></div><div class="c2"></div></div></div></div><div class="container"><div class="col"><div class="row"><div class="col card"><h3>Examples</h3><div class="content"><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><p class="tight">A <i>card</i>:</p><div class="card"><h3>title</h3><div class="content"><div class="tb">textual btn</div><br /><div class="btn">classic btn</div><br /><div class="msg">Some message block</div></div></div></div><div><p class="tight">The same <i>card</i> with the class <code>big</code>: </p><div class="card big"><h3>title</h3><div class="content"><div class="tb">textual btn</div><br /><div class="btn">classic btn</div><br /><div class="msg">Some message block</div></div></div></div></div></div></div><div class="card"><h3>Example</h3><div class="content"><figure><img alt="A demo of brut.css with a few forms and an error message" src="h/img/brut-demo-light.webp" /><figcaption>What a real app looks like with BRUT</figcaption></figure></div></div></div><div class="row"><div class="col card"><h3>Docs</h3><div class="col content"><a class="tb big info stretch" href="h/docs.html">Docs</a></div></div><div class="col card"><h3>Download</h3><div class="col content"><a class="tb warn big stretch" download="brut.min.css" href="brut.min.css">Download (8057 Bytes)</a></div></div></div></div></div></div><footer><div class="container"><p>By <a href="https://yannesposito.com">Yann Esposito</a></p></div></footer></body>
|
|
@ -230,9 +230,8 @@
|
||||||
[:li "item 3; with a very long text that should wrap to the next line in any browser."
|
[:li "item 3; with a very long text that should wrap to the next line in any browser."
|
||||||
" We'll see that the wrapped text should be aligned with the text of the other items."
|
" We'll see that the wrapped text should be aligned with the text of the other items."
|
||||||
" This is due to the " [:code "list-style-position: outside"] "."]
|
" This is due to the " [:code "list-style-position: outside"] "."]
|
||||||
[:li "item 4"]]]
|
[:li "item 4"]]
|
||||||
[:h3 "ol"]
|
[:h3 "ol"]
|
||||||
[:div.content
|
|
||||||
[:ol
|
[:ol
|
||||||
[:li "item 1"]
|
[:li "item 1"]
|
||||||
[:li "item 2"]
|
[:li "item 2"]
|
||||||
|
|
|
@ -46,7 +46,8 @@ ul { list-style-type: square;
|
||||||
padding-inline-start: 1.5rem;
|
padding-inline-start: 1.5rem;
|
||||||
}
|
}
|
||||||
ol {
|
ol {
|
||||||
padding-inline-start: 2rem;
|
padding-left: 2rem;
|
||||||
|
list-style-position: outside;
|
||||||
}
|
}
|
||||||
ul > li::marker { font-size: 1.5rem; }
|
ul > li::marker { font-size: 1.5rem; }
|
||||||
li { line-height: 1.2rem; }
|
li { line-height: 1.2rem; }
|
||||||
|
|
|
@ -15,8 +15,6 @@
|
||||||
.col {
|
.col {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
.col > .row { padding: 0 1rem; }
|
|
||||||
.row > .col { padding: 1rem 0; }
|
|
||||||
.start {
|
.start {
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
|
@ -94,6 +92,8 @@
|
||||||
.no-mobile {
|
.no-mobile {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
.row { margin-bottom: 1rem; }
|
||||||
|
.row.gapless { margin: 0; }
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-grow { flex: 0; }
|
.no-grow { flex: 0; }
|
||||||
|
|
Loading…
Reference in a new issue