many small fixes, that should return some homogeneity
This commit is contained in:
Yann Esposito (Yogsototh)
parent
e3ba853504
commit
f9b8bfb9ef
GPG key ID:
7B19A4C650D59646
|
|
@ -290,42 +290,12 @@
|
|||
[:strong
|
||||
[:i.ico.big "☠"]" Fatal"]
|
||||
" This is done by adding "
|
||||
[:code "fatal"]" to the class.\n"]]
|
||||
[:div {:class "col c6 gapless"}
|
||||
[:h2 "Strong Alerts"]
|
||||
[:br]
|
||||
[:div {:class "msg alert"}
|
||||
[:strong "Alert Message"]
|
||||
" This is a normal message with "
|
||||
[:code "msg"]".\n"]
|
||||
[:div {:class "msg alert info"}
|
||||
[:strong.c3
|
||||
[:i.ico.big "☞"] " Alert Info"]
|
||||
[:span.c9
|
||||
" This is done by adding "]
|
||||
[:code "info"]" to the class.\n"]
|
||||
[:div {:class "msg alert ok"}
|
||||
[:code "fatal"]" to the class.\n"]
|
||||
[:div {:class "msg hl"}
|
||||
[:strong
|
||||
[:i.ico.big "☑"]
|
||||
" Alert OK"]
|
||||
[:i.ico.big "☞"] "Highlighted"]
|
||||
" This is done by adding "
|
||||
[:code "ok"]" to the class.\n"]
|
||||
[:div {:class "msg alert warn"}
|
||||
[:strong
|
||||
[:i.ico.big "☣"]
|
||||
" Alert Warning"]
|
||||
" This is done by adding "
|
||||
[:code "warn"]" to the class.\n"]
|
||||
[:div {:class "msg alert err"}
|
||||
[:strong
|
||||
[:i.ico.big "☒"]" Alert Error"]
|
||||
" This is done by adding "
|
||||
[:code "err"]" to the class.\n"]
|
||||
[:div {:class "msg alert fatal"}
|
||||
[:strong
|
||||
[:i.ico.big "☠"]" Alert Fatal"]
|
||||
" This is done by adding "
|
||||
[:code "fatal"]" to the class.\n"]]]
|
||||
[:code "hl"]" to the class.\n"]]]
|
||||
messages-section {:title "Messages"
|
||||
:cards [messages]}
|
||||
forms [:div
|
||||
|
|
@ -391,11 +361,11 @@
|
|||
tables-section {:title "Tables"
|
||||
:cards [table]}
|
||||
basic-icons [:div.col.start
|
||||
[:h4 "Android Safe"]
|
||||
[:h4 "Safe"]
|
||||
[:i {:class "ico block big"} "☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №\n"]
|
||||
[:div {:class "msg push"}
|
||||
[:p
|
||||
"The \"Android Safe\" icons work everywhere, tested on hundreds of devices."]
|
||||
"The \"Safe\" icons should work almost everywhere."]
|
||||
[:p
|
||||
(mapcat (fn [w i]
|
||||
[ [:span w " "] [:i.ico i] " "])
|
||||
|
|
@ -412,11 +382,7 @@
|
|||
[:h4 "Total Set"]
|
||||
[:i {:class "ico block big"}
|
||||
"✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩\n"]
|
||||
[:div {:class "msg warn push"}
|
||||
"Although over 75% of Android devices we tested support all \"Total Set\" icons, "
|
||||
"if a substantial portion of your users use old Android devices you should stick to the "
|
||||
" \"Android Safe\" set. (The \"Total Set\" does not include icons from the "
|
||||
"\"Android Safe\" set.)"]]
|
||||
[:div.msg "Just a bunch of a few more unicode icons."]]
|
||||
icons-section {:title "icons"
|
||||
:cards [basic-icons full-icons]}
|
||||
grid
|
||||
|
|
|
|||
2
brut.min.css
vendored
2
brut.min.css
vendored
File diff suppressed because one or more lines are too long
58
h/docs.html
58
h/docs.html
|
|
@ -921,14 +921,13 @@
|
|||
<div><span>Directly in the column</span><img src="../h/img/brutalism.webp"></img></div>
|
||||
</div>
|
||||
</div>
|
||||
</pre></details></div></div></div><div class="col"><h2 id="icons"><a href="#icons"><i class="ico">§</i></a> icons</h2><div class="row"><div class="card c6"><div class="col start"><h4>Android Safe</h4><i class="ico block big">☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №
|
||||
</i><div class="msg push"><p>The "Android Safe" icons work everywhere, tested on hundreds of devices.</p><p><span>Inserting </span><i class="ico">☎</i> <span>in </span><i class="ico">♂</i> <span>the </span><i class="ico">♀</i> <span>middle </span><i class="ico">ⓧ</i> <span>of </span><i class="ico">©</i> <span>some </span><i class="ico">§</i> <span>text </span><i class="ico">®</i> <span>to </span><i class="ico">⇦</i> <span>check </span><i class="ico">⇧</i> <span>the </span><i class="ico">⇨</i> <span>size. </span><i class="ico">⇩</i> <span>Now </span><i class="ico">♠</i> <span>this </span><i class="ico">♣</i> <span>should </span><i class="ico">♥</i> <span>give </span><i class="ico">♦</i> <span>an </span><i class="ico">♪</i> <span>idea </span><i class="ico">♛</i> <span>about </span><i class="ico">♜</i> <span>the </span><i class="ico">♝</i> <span>size </span><i class="ico">♞</i> <span>relatively </span><i class="ico">♟</i> <span>to </span><i class="ico">☜</i> <span>the </span><i class="ico">☞</i> <span>text. </span><i class="ico">♨</i> <span>Hmmm </span><i class="ico">♭</i> <span>this </span><i class="ico">♯</i> <span>is </span><i class="ico">￥</i> <span>quite </span><i class="ico">￡</i> <span>long </span><i class="ico">￠</i> <span>and </span><i class="ico">❊</i> <span>boring </span><i class="ico">฿</i> <span>to </span><i class="ico">๏</i> <span>write </span><i class="ico">※</i> <span>text </span><i class="ico">₧</i> <span>in </span><i class="ico">₨</i> <span>between </span><i class="ico">₪</i> <span>like </span><i class="ico">€</i> <span>that! </span><i class="ico">№</i> </p></div></div><details><summary>code</summary><pre>
|
||||
</pre></details></div></div></div><div class="col"><h2 id="icons"><a href="#icons"><i class="ico">§</i></a> icons</h2><div class="row"><div class="card c6"><div class="col start"><h4>Safe</h4><i class="ico block big">☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №
|
||||
</i><div class="msg push"><p>The "Safe" icons should work almost everywhere.</p><p><span>Inserting </span><i class="ico">☎</i> <span>in </span><i class="ico">♂</i> <span>the </span><i class="ico">♀</i> <span>middle </span><i class="ico">ⓧ</i> <span>of </span><i class="ico">©</i> <span>some </span><i class="ico">§</i> <span>text </span><i class="ico">®</i> <span>to </span><i class="ico">⇦</i> <span>check </span><i class="ico">⇧</i> <span>the </span><i class="ico">⇨</i> <span>size. </span><i class="ico">⇩</i> <span>Now </span><i class="ico">♠</i> <span>this </span><i class="ico">♣</i> <span>should </span><i class="ico">♥</i> <span>give </span><i class="ico">♦</i> <span>an </span><i class="ico">♪</i> <span>idea </span><i class="ico">♛</i> <span>about </span><i class="ico">♜</i> <span>the </span><i class="ico">♝</i> <span>size </span><i class="ico">♞</i> <span>relatively </span><i class="ico">♟</i> <span>to </span><i class="ico">☜</i> <span>the </span><i class="ico">☞</i> <span>text. </span><i class="ico">♨</i> <span>Hmmm </span><i class="ico">♭</i> <span>this </span><i class="ico">♯</i> <span>is </span><i class="ico">￥</i> <span>quite </span><i class="ico">￡</i> <span>long </span><i class="ico">￠</i> <span>and </span><i class="ico">❊</i> <span>boring </span><i class="ico">฿</i> <span>to </span><i class="ico">๏</i> <span>write </span><i class="ico">※</i> <span>text </span><i class="ico">₧</i> <span>in </span><i class="ico">₨</i> <span>between </span><i class="ico">₪</i> <span>like </span><i class="ico">€</i> <span>that! </span><i class="ico">№</i> </p></div></div><details><summary>code</summary><pre>
|
||||
<div class="col start">
|
||||
<h4>Android Safe</h4><i class="ico block big">☎ ♂ ♀ ⓧ © § ® ⇦ ⇧
|
||||
⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №</i>
|
||||
<h4>Safe</h4><i class="ico block big">☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣
|
||||
♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №</i>
|
||||
<div class="msg push">
|
||||
<p>The "Android Safe" icons work everywhere, tested on
|
||||
hundreds of devices.</p>
|
||||
<p>The "Safe" icons should work almost everywhere.</p>
|
||||
<p><span>Inserting</span> <i class="ico">☎</i>
|
||||
<span>in</span> <i class="ico">♂</i> <span>the</span>
|
||||
<i class="ico">♀</i> <span>middle</span> <i class="ico">ⓧ</i>
|
||||
|
|
@ -958,17 +957,13 @@
|
|||
</div>
|
||||
</div>
|
||||
</pre></details></div><div class="card c6"><div class="col start"><h4>Total Set</h4><i class="ico block big">✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩
|
||||
</i><div class="msg warn push">Although over 75% of Android devices we tested support all "Total Set" icons, if a substantial portion of your users use old Android devices you should stick to the "Android Safe" set. (The "Total Set" does not include icons from the "Android Safe" set.)</div></div><details><summary>code</summary><pre>
|
||||
</i><div class="msg">Just a bunch of a few more unicode icons.</div></div><details><summary>code</summary><pre>
|
||||
<div class="col start">
|
||||
<h4>Total Set</h4><i class="ico block big">✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢
|
||||
☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩
|
||||
◍ ۩</i>
|
||||
<div class="msg warn push">
|
||||
Although over 75% of Android devices we tested support all
|
||||
"Total Set" icons, if a substantial portion of your users use
|
||||
old Android devices you should stick to the "Android Safe"
|
||||
set. (The "Total Set" does not include icons from the
|
||||
"Android Safe" set.)
|
||||
<div class="msg">
|
||||
Just a bunch of a few more unicode icons.
|
||||
</div>
|
||||
</div>
|
||||
</pre></details></div></div></div><div class="col"><h2 id="Forms"><a href="#Forms"><i class="ico">§</i></a> Forms</h2><div class="row"><div class="card c6"><div><input class="neutral" placeholder="input" type="text" /><br /><textarea class="neutral" placeholder="textarea" rows="3"></textarea><br /><span class="addon bg-info">$</span><input type="text" /><div class="msg"><strong>Be careful with addons!</strong> If you do not want a space between the addon and the input make sure that there is no space between the <code><span></code> and <code><input></code> tags. Example: <pre>... </span><span class="hl"> </span><input ...</pre><span class="addon">$</span> <input class="smooth" type="text" /><pre>... </span><input ...</pre><span class="addon">$</span><input class="smooth" type="text" /></div></div><details><summary>code</summary><pre>
|
||||
|
|
@ -1070,12 +1065,7 @@
|
|||
</div><div class="msg warn"><strong><i class="ico big">☣</i> Warning</strong> This is done by adding <code>warn</code> to the class.
|
||||
</div><div class="msg err"><strong><i class="ico big">☒</i> Error</strong> This is done by adding <code>err</code> to the class.
|
||||
</div><div class="msg fatal"><strong><i class="ico big">☠</i> Fatal</strong> This is done by adding <code>fatal</code> to the class.
|
||||
</div></div><div class="col c6 gapless"><h2>Strong Alerts</h2><br /><div class="msg alert"><strong>Alert Message</strong> This is a normal message with <code>msg</code>.
|
||||
</div><div class="msg alert info"><strong class="c3"><i class="ico big">☞</i> Alert Info</strong><span class="c9"> This is done by adding </span><code>info</code> to the class.
|
||||
</div><div class="msg alert ok"><strong><i class="ico big">☑</i> Alert OK</strong> This is done by adding <code>ok</code> to the class.
|
||||
</div><div class="msg alert warn"><strong><i class="ico big">☣</i> Alert Warning</strong> This is done by adding <code>warn</code> to the class.
|
||||
</div><div class="msg alert err"><strong><i class="ico big">☒</i> Alert Error</strong> This is done by adding <code>err</code> to the class.
|
||||
</div><div class="msg alert fatal"><strong><i class="ico big">☠</i> Alert Fatal</strong> This is done by adding <code>fatal</code> to the class.
|
||||
</div><div class="msg hl"><strong><i class="ico big">☞</i>Highlighted</strong> This is done by adding <code>hl</code> to the class.
|
||||
</div></div></div><details><summary>code</summary><pre>
|
||||
<div class="row">
|
||||
<div class="col c6 gapless">
|
||||
|
|
@ -1104,33 +1094,9 @@
|
|||
<strong><i class="ico big">☠</i> Fatal</strong> This is
|
||||
done by adding <code>fatal</code> to the class.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col c6 gapless">
|
||||
<h2>Strong Alerts</h2><br></br>
|
||||
<div class="msg alert">
|
||||
<strong>Alert Message</strong> This is a normal message
|
||||
with <code>msg</code>.
|
||||
</div>
|
||||
<div class="msg alert info">
|
||||
<strong class="c3"><i class="ico big">☞</i> Alert
|
||||
Info</strong> <span class="c9">This is done by
|
||||
adding</span> <code>info</code> to the class.
|
||||
</div>
|
||||
<div class="msg alert ok">
|
||||
<strong><i class="ico big">☑</i> Alert OK</strong> This is
|
||||
done by adding <code>ok</code> to the class.
|
||||
</div>
|
||||
<div class="msg alert warn">
|
||||
<strong><i class="ico big">☣</i> Alert Warning</strong>
|
||||
This is done by adding <code>warn</code> to the class.
|
||||
</div>
|
||||
<div class="msg alert err">
|
||||
<strong><i class="ico big">☒</i> Alert Error</strong> This
|
||||
is done by adding <code>err</code> to the class.
|
||||
</div>
|
||||
<div class="msg alert fatal">
|
||||
<strong><i class="ico big">☠</i> Alert Fatal</strong> This
|
||||
is done by adding <code>fatal</code> to the class.
|
||||
<div class="msg hl">
|
||||
<strong><i class="ico big">☞</i>Highlighted</strong> This
|
||||
is done by adding <code>hl</code> to the class.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -19,16 +19,16 @@
|
|||
display: inline-block;
|
||||
margin: 0 4px 4px 0;
|
||||
padding: 1rem 2rem;
|
||||
box-shadow: 4px 4px var(--shadow);
|
||||
box-shadow: 4px 4px var(--nl);
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
box-shadow: 4px 4px var(--fg);
|
||||
box-shadow: 4px 4px var(--n1);
|
||||
}
|
||||
|
||||
.btn:active,.btn:focus {
|
||||
box-shadow: 1px 1px #000;
|
||||
box-shadow: 1px 1px var(--n2);
|
||||
position: relative;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
--n1: darken(@neutral,10%);
|
||||
--n2: darken(@neutral,20%);
|
||||
|
||||
--shadow: rgba(0,0,0,0.65);
|
||||
--shadow: rgba(128,128,128,0.5);
|
||||
|
||||
/* rainbow colors */
|
||||
--y: #b58900;
|
||||
|
|
@ -28,11 +28,10 @@
|
|||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
body { filter: invert(100%) hue-rotate(180deg);
|
||||
.tg,.btn { filter: invert(100%) hue-rotate(180deg); }
|
||||
}
|
||||
img { filter: brightness(80%) invert(100%) ; }
|
||||
body { filter: invert(100%) hue-rotate(180deg);}
|
||||
img,.fill { filter: brightness(80%) invert(100%) ; }
|
||||
.msg, .btn, .b, .info, .g, .ok, .y, .warn, .r, .err, .m, .fatal, .o, .v, .c,.alert {
|
||||
filter: brightness(90%) invert(100%) hue-rotate(180deg);
|
||||
}
|
||||
}
|
||||
html { background: var(--bg); color: var(--fg); }
|
||||
|
|
|
|||
|
|
@ -26,5 +26,5 @@ textarea, input[type=text] {
|
|||
}
|
||||
|
||||
textarea:focus, input:focus, select:focus {
|
||||
border-color: var(--i1);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -51,14 +51,17 @@ table { font-size: 1rem; }
|
|||
.big { font-size: 2rem; line-height: 2.8rem;}
|
||||
.huge { font-size: 3rem; line-height: 4.1rem;}
|
||||
/* highligh revert the colors */
|
||||
.hl { background: var(--fg); color: var(--bg); }
|
||||
.hl { background: var(--fg); color: var(--bg);
|
||||
border: solid 1px;
|
||||
padding: 1px;
|
||||
}
|
||||
/* doc are for long text to read */
|
||||
.doc { max-width: 65ch;
|
||||
font-size: 1.25rem;
|
||||
font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif;
|
||||
text-align: justify;
|
||||
line-height: 1.5em;
|
||||
p {
|
||||
text-indent: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue