many minor improvements
This commit is contained in:
parent
ee0d1756d4
commit
84007b3f8f
6 changed files with 63 additions and 49 deletions
|
@ -196,41 +196,42 @@
|
|||
[:img {:src (to brutalism-img)}]]]]
|
||||
images-section {:title "Images"
|
||||
:cards [images]}
|
||||
buttons [:div {:id "buttons"}
|
||||
[:h1 "Buttons"]
|
||||
[:h2 "Text Buttons"]
|
||||
text-buttons [:div#text-buttons
|
||||
[:h3 "Classic"]
|
||||
[:a {:class "tb"} "tb"]
|
||||
[:a {:class "tb info"} "tb info"]
|
||||
[:a {:class "tb ok"} "tb ok"]
|
||||
[:a {:class "tb warn"} "tb warn"]
|
||||
[:a {:class "tb err"} "tb err"]
|
||||
[:a {:class "tb fatal"} "tb fatal"]
|
||||
[:a.tb "tb"]
|
||||
[:a.tb.info "tb info"]
|
||||
[:a.tb.ok "tb ok"]
|
||||
[:a.tb.warn "tb warn"]
|
||||
[:a.tb.err "tb err"]
|
||||
[:a.tb.fatal "tb fatal"]]
|
||||
text-buttons-sizes [:div#text-buttons-sizes
|
||||
[:h3 "Sizes"]
|
||||
[:div {:class "block"} "Text"
|
||||
[:a {:class "tb sm"} "small"]
|
||||
[:a {:class "tb"} "normal"]
|
||||
[:a {:class "tb big"} "Big"]
|
||||
[:a {:class "tb huge"} "HUGE"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "col c2 gapless"}
|
||||
[:span " Text "
|
||||
[:a {:class "tb sm"} "tb sm"]" "]
|
||||
[:h4 "Inside some text"]
|
||||
[:div.block "Some text: "
|
||||
[:a {:class "tb sm info"} "Info"]
|
||||
[:a {:class "tb ok"} "OK"]
|
||||
[:a {:class "tb big warn"} "Warn"]
|
||||
[:a {:class "tb huge err"} "ERR"]]
|
||||
[:h4 "In a grid"]
|
||||
[:div.row.gapless
|
||||
[:div.col.c2.gapless
|
||||
[:a {:class "tb sm"} "tb sm"]
|
||||
[:a {:class "tb sm info"} "tb sm"]
|
||||
[:a {:class "tb sm ok"} "tb sm"]
|
||||
[:a {:class "tb sm warn"} "tb sm"]]
|
||||
[:div {:class "col c2 gapless"}
|
||||
[:div.col.c2.gapless
|
||||
[:a {:class "tb"} "tb"]
|
||||
[:a {:class "tb info"} "tb"]
|
||||
[:a {:class "tb ok"} "tb"]
|
||||
[:a {:class "tb warn"} "tb"]]
|
||||
[:div {:class "col c3 gapless"}
|
||||
[:div.col.c3.gapless
|
||||
[:a {:class "tb big warn"} "tb big"]
|
||||
[:a {:class "tb big err"} "tb big"]
|
||||
[:a {:class "tb big fatal"} "tb big"]]
|
||||
[:div {:class "col c5 gapless"}
|
||||
[:div.col.c5.gapless
|
||||
[:a {:class "tb huge err"} "tb huge"]
|
||||
[:a {:class "tb huge fatal"} "tb huge"]]]
|
||||
[:a {:class "tb huge fatal"} "tb huge"]]]]
|
||||
buttons [:div {:id "buttons"}
|
||||
[:h2 "Classic"]
|
||||
[:a {:class "btn"} "btn"]
|
||||
[:a {:class "btn info"} "btn info"]
|
||||
|
@ -270,7 +271,7 @@
|
|||
[:a {:class "btn std huge info"} "btn std info"]
|
||||
[:a {:class "btn std huge ok"} "btn std ok"]]]]]
|
||||
buttons-section {:title "Buttons"
|
||||
:cards [buttons]}
|
||||
:cards [text-buttons text-buttons-sizes buttons]}
|
||||
messages [:div {:class "row"}
|
||||
[:div {:class "col c6 gapless"}
|
||||
[:h2 "Basic Messages"]
|
||||
|
|
2
brut.min.css
vendored
2
brut.min.css
vendored
File diff suppressed because one or more lines are too long
27
h/docs.html
27
h/docs.html
|
@ -277,22 +277,26 @@ you should stick to the "Android Safe" set.
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</pre></details></div></div></div><div class="col"><h2>Buttons</h2><div class="row"><div class="card c6"><div id="buttons"><h1>Buttons</h1><h2>Text Buttons</h2><h3>Classic</h3><a class="tb">tb</a><a class="tb info">tb info</a><a class="tb ok">tb ok</a><a class="tb warn">tb warn</a><a class="tb err">tb err</a><a class="tb fatal">tb fatal</a><h3>Sizes</h3><div class="block">Text<a class="tb sm">small</a><a class="tb">normal</a><a class="tb big">Big</a><a class="tb huge">HUGE</a></div><div class="row"><div class="col c2 gapless"><span> Text <a class="tb sm">tb sm</a> </span><a class="tb sm info">tb sm</a><a class="tb sm ok">tb sm</a><a class="tb sm warn">tb sm</a></div><div class="col c2 gapless"><a class="tb">tb</a><a class="tb info">tb</a><a class="tb ok">tb</a><a class="tb warn">tb</a></div><div class="col c3 gapless"><a class="tb big warn">tb big</a><a class="tb big err">tb big</a><a class="tb big fatal">tb big</a></div><div class="col c5 gapless"><a class="tb huge err">tb huge</a><a class="tb huge fatal">tb huge</a></div></div><h2>Classic</h2><a class="btn">btn</a><a class="btn info">btn info</a><a class="btn ok">btn ok</a><a class="btn warn">btn warn</a><a class="btn err">btn err</a><a class="btn fatal">btn fatal</a><pre class="block">&lt;a class=&quot;btn btn-b&quot;&gt;btn-b&lt;/a&gt;</pre><h2>Sizes</h2><a class="btn sm">btn sm</a><a class="btn info">btn info</a><a class="btn big warn">btn big warn</a><a class="btn huge err">btn huge err</a><pre class="block">&lt;a class=&quot;btn sm info&quot;&gt;btn sm info&lt;/a&gt;</pre><div class="row"><div class="col c4 card"><h3>Standardized Width <code>btn std</code></h3><div class="col"><a class="btn std">btn std</a><a class="btn std info">btn std info</a><a class="btn std ok">btn std ok</a><a class="btn std warn">btn std warn</a><a class="btn std err">btn std err</a><a class="btn std fatal">btn std fatal</a></div></div><div class="col c4 card"><h3>Big</h3><div class="col"><a class="btn std big ">btn std</a><a class="btn std big info">btn std info</a><a class="btn std big ok">btn std ok</a><a class="btn std big warn">btn std warn</a></div></div><div class="col c4 card"><h3>Huge</h3><div class="col"><a class="btn std huge">btn std</a><a class="btn std huge info">btn std info</a><a class="btn std huge ok">btn std ok</a></div></div></div></div><details><summary>code</summary><pre>
|
||||
<div id="buttons">
|
||||
<h1>Buttons</h1>
|
||||
<h2>Text Buttons</h2>
|
||||
</pre></details></div></div></div><div class="col"><h2>Buttons</h2><div class="row"><div class="card c6"><div id="text-buttons"><h3>Classic</h3><a class="tb">tb</a><a class="tb info">tb info</a><a class="tb ok">tb ok</a><a class="tb warn">tb warn</a><a class="tb err">tb err</a><a class="tb fatal">tb fatal</a></div><details><summary>code</summary><pre>
|
||||
<div id="text-buttons">
|
||||
<h3>Classic</h3><a class="tb">tb</a><a class="tb info">tb
|
||||
info</a><a class="tb ok">tb ok</a><a class="tb warn">tb
|
||||
warn</a><a class="tb err">tb err</a><a class="tb fatal">tb
|
||||
fatal</a>
|
||||
<h3>Sizes</h3>
|
||||
<div class="block">
|
||||
Text<a class="tb sm">small</a><a class="tb">normal</a><a class="tb big">Big</a><a class="tb huge">HUGE</a>
|
||||
</div>
|
||||
<div class="row">
|
||||
</pre></details></div><div class="card c6"><div id="text-buttons-sizes"><h3>Sizes</h3><h4>Inside some text</h4><div class="block">Some text: <a class="tb sm info">Info</a><a class="tb ok">OK</a><a class="tb big warn">Warn</a><a class="tb huge err">ERR</a></div><h4>In a grid</h4><div class="row gapless"><div class="col c2 gapless"><a class="tb sm">tb sm</a><a class="tb sm info">tb sm</a><a class="tb sm ok">tb sm</a><a class="tb sm warn">tb sm</a></div><div class="col c2 gapless"><a class="tb">tb</a><a class="tb info">tb</a><a class="tb ok">tb</a><a class="tb warn">tb</a></div><div class="col c3 gapless"><a class="tb big warn">tb big</a><a class="tb big err">tb big</a><a class="tb big fatal">tb big</a></div><div class="col c5 gapless"><a class="tb huge err">tb huge</a><a class="tb huge fatal">tb huge</a></div></div></div><details><summary>code</summary><pre>
|
||||
<div id="text-buttons-sizes">
|
||||
<h3>Sizes</h3>
|
||||
<h4>Inside some text</h4>
|
||||
<div class="block">
|
||||
Some text: <a class="tb sm info">Info</a><a class="tb ok">OK</a><a class="tb big warn">Warn</a><a class="tb huge err">ERR</a>
|
||||
</div>
|
||||
<h4>In a grid</h4>
|
||||
<div class="row gapless">
|
||||
<div class="col c2 gapless">
|
||||
<span>Text <a class="tb sm">tb sm</a></span> <a class="tb sm info">tb sm</a><a class="tb sm ok">tb
|
||||
sm</a><a class="tb sm warn">tb sm</a>
|
||||
<a class="tb sm">tb sm</a><a class="tb sm info">tb
|
||||
sm</a><a class="tb sm ok">tb sm</a><a class="tb sm warn">tb
|
||||
sm</a>
|
||||
</div>
|
||||
<div class="col c2 gapless">
|
||||
<a class="tb">tb</a><a class="tb info">tb</a><a class="tb ok">tb</a><a class="tb warn">tb</a>
|
||||
|
@ -305,6 +309,9 @@ you should stick to the &quot;Android Safe&quot; set.
|
|||
<a class="tb huge err">tb huge</a><a class="tb huge fatal">tb huge</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</pre></details></div></div><div class="row"><div class="card c6"><div id="buttons"><h2>Classic</h2><a class="btn">btn</a><a class="btn info">btn info</a><a class="btn ok">btn ok</a><a class="btn warn">btn warn</a><a class="btn err">btn err</a><a class="btn fatal">btn fatal</a><pre class="block">&lt;a class=&quot;btn btn-b&quot;&gt;btn-b&lt;/a&gt;</pre><h2>Sizes</h2><a class="btn sm">btn sm</a><a class="btn info">btn info</a><a class="btn big warn">btn big warn</a><a class="btn huge err">btn huge err</a><pre class="block">&lt;a class=&quot;btn sm info&quot;&gt;btn sm info&lt;/a&gt;</pre><div class="row"><div class="col c4 card"><h3>Standardized Width <code>btn std</code></h3><div class="col"><a class="btn std">btn std</a><a class="btn std info">btn std info</a><a class="btn std ok">btn std ok</a><a class="btn std warn">btn std warn</a><a class="btn std err">btn std err</a><a class="btn std fatal">btn std fatal</a></div></div><div class="col c4 card"><h3>Big</h3><div class="col"><a class="btn std big ">btn std</a><a class="btn std big info">btn std info</a><a class="btn std big ok">btn std ok</a><a class="btn std big warn">btn std warn</a></div></div><div class="col c4 card"><h3>Huge</h3><div class="col"><a class="btn std huge">btn std</a><a class="btn std huge info">btn std info</a><a class="btn std huge ok">btn std ok</a></div></div></div></div><details><summary>code</summary><pre>
|
||||
<div id="buttons">
|
||||
<h2>Classic</h2><a class="btn">btn</a><a class="btn info">btn
|
||||
info</a><a class="btn ok">btn ok</a><a class="btn warn">btn
|
||||
warn</a><a class="btn err">btn err</a><a class="btn fatal">btn
|
||||
|
|
|
@ -1,7 +1,9 @@
|
|||
.tb, .btn { text-decoration: none; display: inline-block; text-align: center;}
|
||||
.tb { font-weight: bold;
|
||||
cursor: pointer;
|
||||
padding: 2px; }
|
||||
padding: 2px;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
.tb:before,.tb:after { opacity: 0.3; display: inline-block;}
|
||||
.tb:before { content: "❬"; }
|
||||
.tb:after { content: "❭"; }
|
||||
|
|
|
@ -45,10 +45,11 @@ ol {
|
|||
}
|
||||
ul > li::marker { font-size: 1.5rem; }
|
||||
summary:hover { cursor: pointer; }
|
||||
table { font-size: 1rem; }
|
||||
|
||||
.sm { font-size: 0.75rem; }
|
||||
.big { font-size: 2rem; line-height: 3.5rem;}
|
||||
.huge { font-size: 3rem; line-height: 5.5rem;}
|
||||
.sm { font-size: 0.75rem; line-height: 0.65rem; }
|
||||
.big { font-size: 2rem; line-height: 3.4rem;}
|
||||
.huge { font-size: 3rem; line-height: 5.2rem;}
|
||||
/* highligh revert the colors */
|
||||
.hl { background: var(--fg); color: var(--bg); }
|
||||
/* doc are for long text to read */
|
||||
|
|
|
@ -85,7 +85,7 @@
|
|||
|
||||
/* For smaller screens, change all columns to 100% width */
|
||||
@media (max-width:800px) {
|
||||
.row .col {
|
||||
.row > * {
|
||||
flex: 0 1 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
@ -95,3 +95,6 @@
|
|||
}
|
||||
|
||||
.no-grow { flex: 0; }
|
||||
.fixed { flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue