yogsototh/brutcss
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

many minor improvements

Browse source
This commit is contained in:
Yann Esposito (Yogsototh) 2022-10-10 17:03:30 +02:00
parent ee0d1756d4
commit 84007b3f8f
Signed by untrusted user who does not match committer: yogsototh
GPG key ID: 7B19A4C650D59646
6 changed files with 63 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
bb/brut/site.clj
View file

@ -196,41 +196,42 @@
[:img {:src (to brutalism-img)}]]]]
images-section {:title "Images"
:cards [images]}
text-buttons [:div#text-buttons
[:h3 "Classic"]
[: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"]
[: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.col.c2.gapless
[:a {:class "tb"} "tb"]
[:a {:class "tb info"} "tb"]
[:a {:class "tb ok"} "tb"]
[:a {:class "tb warn"} "tb"]]
[: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.col.c5.gapless
[:a {:class "tb huge err"} "tb huge"]
[:a {:class "tb huge fatal"} "tb huge"]]]]
buttons [:div {:id "buttons"}
[:h1 "Buttons"]
[:h2 "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"]
[: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"]" "]
[: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"}
[:a {:class "tb"} "tb"]
[:a {:class "tb info"} "tb"]
[:a {:class "tb ok"} "tb"]
[:a {:class "tb warn"} "tb"]]
[:div {:class "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"}
[:a {:class "tb huge err"} "tb huge"]
[:a {:class "tb huge fatal"} "tb huge"]]]
[: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
View file

File diff suppressed because one or more lines are too long

23
h/docs.html
View file

@ -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">&amp;lt;a class=&amp;quot;btn btn-b&amp;quot;&amp;gt;btn-b&amp;lt;/a&amp;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">&amp;lt;a class=&amp;quot;btn sm info&amp;quot;&amp;gt;btn sm info&amp;lt;/a&amp;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>
&lt;div id=&quot;buttons&quot;&gt;
&lt;h1&gt;Buttons&lt;/h1&gt;
&lt;h2&gt;Text Buttons&lt;/h2&gt;
</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>
&lt;div id=&quot;text-buttons&quot;&gt;
&lt;h3&gt;Classic&lt;/h3&gt;&lt;a class=&quot;tb&quot;&gt;tb&lt;/a&gt;&lt;a class=&quot;tb info&quot;&gt;tb
info&lt;/a&gt;&lt;a class=&quot;tb ok&quot;&gt;tb ok&lt;/a&gt;&lt;a class=&quot;tb warn&quot;&gt;tb
warn&lt;/a&gt;&lt;a class=&quot;tb err&quot;&gt;tb err&lt;/a&gt;&lt;a class=&quot;tb fatal&quot;&gt;tb
fatal&lt;/a&gt;
&lt;/div&gt;
</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>
&lt;div id=&quot;text-buttons-sizes&quot;&gt;
&lt;h3&gt;Sizes&lt;/h3&gt;
&lt;h4&gt;Inside some text&lt;/h4&gt;
&lt;div class=&quot;block&quot;&gt;
Text&lt;a class=&quot;tb sm&quot;&gt;small&lt;/a&gt;&lt;a class=&quot;tb&quot;&gt;normal&lt;/a&gt;&lt;a class=&quot;tb big&quot;&gt;Big&lt;/a&gt;&lt;a class=&quot;tb huge&quot;&gt;HUGE&lt;/a&gt;
Some text: &lt;a class=&quot;tb sm info&quot;&gt;Info&lt;/a&gt;&lt;a class=&quot;tb ok&quot;&gt;OK&lt;/a&gt;&lt;a class=&quot;tb big warn&quot;&gt;Warn&lt;/a&gt;&lt;a class=&quot;tb huge err&quot;&gt;ERR&lt;/a&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;h4&gt;In a grid&lt;/h4&gt;
&lt;div class=&quot;row gapless&quot;&gt;
&lt;div class=&quot;col c2 gapless&quot;&gt;
&lt;span&gt;Text &lt;a class=&quot;tb sm&quot;&gt;tb sm&lt;/a&gt;&lt;/span&gt; &lt;a class=&quot;tb sm info&quot;&gt;tb sm&lt;/a&gt;&lt;a class=&quot;tb sm ok&quot;&gt;tb
sm&lt;/a&gt;&lt;a class=&quot;tb sm warn&quot;&gt;tb sm&lt;/a&gt;
&lt;a class=&quot;tb sm&quot;&gt;tb sm&lt;/a&gt;&lt;a class=&quot;tb sm info&quot;&gt;tb
sm&lt;/a&gt;&lt;a class=&quot;tb sm ok&quot;&gt;tb sm&lt;/a&gt;&lt;a class=&quot;tb sm warn&quot;&gt;tb
sm&lt;/a&gt;
&lt;/div&gt;
&lt;div class=&quot;col c2 gapless&quot;&gt;
&lt;a class=&quot;tb&quot;&gt;tb&lt;/a&gt;&lt;a class=&quot;tb info&quot;&gt;tb&lt;/a&gt;&lt;a class=&quot;tb ok&quot;&gt;tb&lt;/a&gt;&lt;a class=&quot;tb warn&quot;&gt;tb&lt;/a&gt;
@ -305,6 +309,9 @@ you should stick to the &amp;quot;Android Safe&amp;quot; set.
&lt;a class=&quot;tb huge err&quot;&gt;tb huge&lt;/a&gt;&lt;a class=&quot;tb huge fatal&quot;&gt;tb huge&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</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">&amp;lt;a class=&amp;quot;btn btn-b&amp;quot;&amp;gt;btn-b&amp;lt;/a&amp;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">&amp;lt;a class=&amp;quot;btn sm info&amp;quot;&amp;gt;btn sm info&amp;lt;/a&amp;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>
&lt;div id=&quot;buttons&quot;&gt;
&lt;h2&gt;Classic&lt;/h2&gt;&lt;a class=&quot;btn&quot;&gt;btn&lt;/a&gt;&lt;a class=&quot;btn info&quot;&gt;btn
info&lt;/a&gt;&lt;a class=&quot;btn ok&quot;&gt;btn ok&lt;/a&gt;&lt;a class=&quot;btn warn&quot;&gt;btn
warn&lt;/a&gt;&lt;a class=&quot;btn err&quot;&gt;btn err&lt;/a&gt;&lt;a class=&quot;btn fatal&quot;&gt;btn

4
src/buttons.less
View file

@ -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: "❭"; }

7
src/general.less
View file

@ -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 */

5
src/grid.less
View file

@ -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;
}