many small fixes, that should return some homogeneity
This commit is contained in:
parent
e3ba853504
commit
f9b8bfb9ef
7 changed files with 34 additions and 100 deletions
|
@ -290,42 +290,12 @@
|
||||||
[:strong
|
[:strong
|
||||||
[:i.ico.big "☠"]" Fatal"]
|
[:i.ico.big "☠"]" Fatal"]
|
||||||
" This is done by adding "
|
" This is done by adding "
|
||||||
[:code "fatal"]" to the class.\n"]]
|
[:code "fatal"]" to the class.\n"]
|
||||||
[:div {:class "col c6 gapless"}
|
[:div {:class "msg hl"}
|
||||||
[: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"}
|
|
||||||
[:strong
|
[:strong
|
||||||
[:i.ico.big "☑"]
|
[:i.ico.big "☞"] "Highlighted"]
|
||||||
" Alert OK"]
|
|
||||||
" This is done by adding "
|
" This is done by adding "
|
||||||
[:code "ok"]" to the class.\n"]
|
[:code "hl"]" 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"]]]
|
|
||||||
messages-section {:title "Messages"
|
messages-section {:title "Messages"
|
||||||
:cards [messages]}
|
:cards [messages]}
|
||||||
forms [:div
|
forms [:div
|
||||||
|
@ -391,11 +361,11 @@
|
||||||
tables-section {:title "Tables"
|
tables-section {:title "Tables"
|
||||||
:cards [table]}
|
:cards [table]}
|
||||||
basic-icons [:div.col.start
|
basic-icons [:div.col.start
|
||||||
[:h4 "Android Safe"]
|
[:h4 "Safe"]
|
||||||
[:i {:class "ico block big"} "☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ¥£ ¢❊ ฿ ๏ ※ ₧ ₨ ₪ € №\n"]
|
[:i {:class "ico block big"} "☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ¥£ ¢❊ ฿ ๏ ※ ₧ ₨ ₪ € №\n"]
|
||||||
[:div {:class "msg push"}
|
[:div {:class "msg push"}
|
||||||
[:p
|
[:p
|
||||||
"The \"Android Safe\" icons work everywhere, tested on hundreds of devices."]
|
"The \"Safe\" icons should work almost everywhere."]
|
||||||
[:p
|
[:p
|
||||||
(mapcat (fn [w i]
|
(mapcat (fn [w i]
|
||||||
[ [:span w " "] [:i.ico i] " "])
|
[ [:span w " "] [:i.ico i] " "])
|
||||||
|
@ -412,11 +382,7 @@
|
||||||
[:h4 "Total Set"]
|
[:h4 "Total Set"]
|
||||||
[:i {:class "ico block big"}
|
[:i {:class "ico block big"}
|
||||||
"✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩\n"]
|
"✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩\n"]
|
||||||
[:div {:class "msg warn push"}
|
[:div.msg "Just a bunch of a few more unicode icons."]]
|
||||||
"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.)"]]
|
|
||||||
icons-section {:title "icons"
|
icons-section {:title "icons"
|
||||||
:cards [basic-icons full-icons]}
|
:cards [basic-icons full-icons]}
|
||||||
grid
|
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><span>Directly in the column</span><img src="../h/img/brutalism.webp"></img></div>
|
||||||
</div>
|
</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">☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ¥£ ¢❊ ฿ ๏ ※ ₧ ₨ ₪ € №
|
</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 "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>
|
</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">
|
<div class="col start">
|
||||||
<h4>Android Safe</h4><i class="ico block big">☎ ♂ ♀ ⓧ © § ® ⇦ ⇧
|
<h4>Safe</h4><i class="ico block big">☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣
|
||||||
⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ¥£ ¢❊ ฿ ๏ ※ ₧ ₨ ₪ € №</i>
|
♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ¥£ ¢❊ ฿ ๏ ※ ₧ ₨ ₪ € №</i>
|
||||||
<div class="msg push">
|
<div class="msg push">
|
||||||
<p>The "Android Safe" icons work everywhere, tested on
|
<p>The "Safe" icons should work almost everywhere.</p>
|
||||||
hundreds of devices.</p>
|
|
||||||
<p><span>Inserting</span> <i class="ico">☎</i>
|
<p><span>Inserting</span> <i class="ico">☎</i>
|
||||||
<span>in</span> <i class="ico">♂</i> <span>the</span>
|
<span>in</span> <i class="ico">♂</i> <span>the</span>
|
||||||
<i class="ico">♀</i> <span>middle</span> <i class="ico">ⓧ</i>
|
<i class="ico">♀</i> <span>middle</span> <i class="ico">ⓧ</i>
|
||||||
|
@ -958,17 +957,13 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</pre></details></div><div class="card c6"><div class="col start"><h4>Total Set</h4><i class="ico block big">✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩
|
</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">
|
<div class="col start">
|
||||||
<h4>Total Set</h4><i class="ico block big">✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢
|
<h4>Total Set</h4><i class="ico block big">✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢
|
||||||
☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩
|
☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩
|
||||||
◍ ۩</i>
|
◍ ۩</i>
|
||||||
<div class="msg warn push">
|
<div class="msg">
|
||||||
Although over 75% of Android devices we tested support all
|
Just a bunch of a few more unicode icons.
|
||||||
"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>
|
||||||
</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>
|
</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 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 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 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 hl"><strong><i class="ico big">☞</i>Highlighted</strong> This is done by adding <code>hl</code> to the class.
|
||||||
</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></div><details><summary>code</summary><pre>
|
</div></div></div><details><summary>code</summary><pre>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col c6 gapless">
|
<div class="col c6 gapless">
|
||||||
|
@ -1104,33 +1094,9 @@
|
||||||
<strong><i class="ico big">☠</i> Fatal</strong> This is
|
<strong><i class="ico big">☠</i> Fatal</strong> This is
|
||||||
done by adding <code>fatal</code> to the class.
|
done by adding <code>fatal</code> to the class.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="msg hl">
|
||||||
<div class="col c6 gapless">
|
<strong><i class="ico big">☞</i>Highlighted</strong> This
|
||||||
<h2>Strong Alerts</h2><br></br>
|
is done by adding <code>hl</code> to the class.
|
||||||
<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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -19,16 +19,16 @@
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 0 4px 4px 0;
|
margin: 0 4px 4px 0;
|
||||||
padding: 1rem 2rem;
|
padding: 1rem 2rem;
|
||||||
box-shadow: 4px 4px var(--shadow);
|
box-shadow: 4px 4px var(--nl);
|
||||||
vertical-align: bottom;
|
vertical-align: bottom;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn:hover {
|
.btn:hover {
|
||||||
box-shadow: 4px 4px var(--fg);
|
box-shadow: 4px 4px var(--n1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn:active,.btn:focus {
|
.btn:active,.btn:focus {
|
||||||
box-shadow: 1px 1px #000;
|
box-shadow: 1px 1px var(--n2);
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 3px;
|
top: 3px;
|
||||||
left: 3px;
|
left: 3px;
|
||||||
|
|
|
@ -12,7 +12,7 @@
|
||||||
--n1: darken(@neutral,10%);
|
--n1: darken(@neutral,10%);
|
||||||
--n2: darken(@neutral,20%);
|
--n2: darken(@neutral,20%);
|
||||||
|
|
||||||
--shadow: rgba(0,0,0,0.65);
|
--shadow: rgba(128,128,128,0.5);
|
||||||
|
|
||||||
/* rainbow colors */
|
/* rainbow colors */
|
||||||
--y: #b58900;
|
--y: #b58900;
|
||||||
|
@ -28,11 +28,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
:root {
|
body { filter: invert(100%) hue-rotate(180deg);}
|
||||||
body { filter: invert(100%) hue-rotate(180deg);
|
img,.fill { filter: brightness(80%) invert(100%) ; }
|
||||||
.tg,.btn { filter: invert(100%) hue-rotate(180deg); }
|
.msg, .btn, .b, .info, .g, .ok, .y, .warn, .r, .err, .m, .fatal, .o, .v, .c,.alert {
|
||||||
}
|
filter: brightness(90%) invert(100%) hue-rotate(180deg);
|
||||||
img { filter: brightness(80%) invert(100%) ; }
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
html { background: var(--bg); color: var(--fg); }
|
html { background: var(--bg); color: var(--fg); }
|
||||||
|
|
|
@ -26,5 +26,5 @@ textarea, input[type=text] {
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea:focus, input:focus, select:focus {
|
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;}
|
.big { font-size: 2rem; line-height: 2.8rem;}
|
||||||
.huge { font-size: 3rem; line-height: 4.1rem;}
|
.huge { font-size: 3rem; line-height: 4.1rem;}
|
||||||
/* highligh revert the colors */
|
/* 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 are for long text to read */
|
||||||
.doc { max-width: 65ch;
|
.doc { max-width: 65ch;
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif;
|
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;
|
line-height: 1.5em;
|
||||||
p {
|
p {
|
||||||
text-indent: 3rem;
|
text-indent: 3rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue