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

terse color solution

Browse source
This commit is contained in:
Yann Esposito (Yogsototh) 2022-10-23 12:10:27 +02:00
parent 6ac7b2f382
commit 479cb7834a
Signed by untrusted user who does not match committer: yogsototh
GPG key ID: 7B19A4C650D59646
10 changed files with 130 additions and 141 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
bb/brut/site.clj
View file

@ -1,6 +1,7 @@
(ns brut.site (ns brut.site
(:require [hiccup2.core :as h] (:require [hiccup2.core :as h]
[babashka.fs :as fs] [babashka.fs :as fs]
[clojure.string :as string]
[babashka.process :refer [process]])) [babashka.process :refer [process]]))
(defn html-pp [html-str] (defn html-pp [html-str]
@ -79,13 +80,13 @@
[:h3 "Docs"] [:h3 "Docs"]
[:p "Docs"] [:p "Docs"]
[:p "Docs"] [:p "Docs"]
[:a.btn.err.big.push {:href (to "h/docs.html")} [:a.btn.big.push {:href (to "h/docs.html")}
"Docs"]] "Docs"]]
[:div.col.card [:div.col.card
[:h3 "Download"] [:h3 "Download"]
[:div.block [:div.block
[:p "Download BRUT"]] [:p "Download BRUT"]]
[:a.btn.err.big.push {:href (to "h/download.html")} [:a.btn.warn.big.push {:href (to "h/download.html")}
"Download"]]]] "Download"]]]]
[:div.container.col [:div.container.col
hero hero
@ -188,12 +189,13 @@
[:div.card [:div.card
[:p "Inside a card"] [:p "Inside a card"]
[:img {:src (to brutalism-img)}]] [:img {:src (to brutalism-img)}]]
[:div
[:p "Directly a card"]
[:img {:src (to brutalism-img)}]]
[:div.block [:div.block
[:p "In a block"] [:p "In a block"]
[:img {:src (to brutalism-img)}]]]] [:img {:src (to brutalism-img)}]]
[:div
[:span "Directly in the column"]
[:img {:src (to brutalism-img)}]]
]]
images-section {:title "Images" images-section {:title "Images"
:cards [images]} :cards [images]}
text-buttons [:div#text-buttons text-buttons [:div#text-buttons
@ -281,27 +283,27 @@
" This is a normal message with " [:code "msg"] "."] " This is a normal message with " [:code "msg"] "."]
[:div {:class "msg info"} [:div {:class "msg info"}
[:strong [:strong
[:i {:class "ico"} "☞"]" Info"] [:i.ico.big "☞"]" Info"]
" This is done by adding " " This is done by adding "
[:code "info"]" to the class.\n"] [:code "info"]" to the class.\n"]
[:div {:class "msg ok"} [:div {:class "msg ok"}
[:strong [:strong
[:i {:class "ico"} "☑"]" OK"] [:i.ico.big "☑"]" OK"]
" This is done by adding " " This is done by adding "
[:code "ok"]" to the class.\n"] [:code "ok"]" to the class.\n"]
[:div {:class "msg warn"} [:div {:class "msg warn"}
[:strong [:strong
[:i {:class "ico"} "☣"]" Warning"] [:i.ico.big "☣"]" Warning"]
" This is done by adding " " This is done by adding "
[:code "warn"]" to the class.\n"] [:code "warn"]" to the class.\n"]
[:div {:class "msg err"} [:div {:class "msg err"}
[:strong [:strong
[:i {:class "ico"} "☒"]" Error"] [:i.ico.big "☒"]" Error"]
" This is done by adding " " This is done by adding "
[:code "err"]" to the class.\n"] [:code "err"]" to the class.\n"]
[:div {:class "msg fatal"} [:div {:class "msg fatal"}
[:strong [:strong
[:i {:class "ico"} "☠"]" 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 "col c6 gapless"}
@ -312,30 +314,31 @@
" This is a normal message with " " This is a normal message with "
[:code "msg"]".\n"] [:code "msg"]".\n"]
[:div {:class "msg alert info"} [:div {:class "msg alert info"}
[:strong [:strong.c3
[:i {:class "ico"} "☞"] " Alert Info"] [:i.ico.big "☞"] " Alert Info"]
" This is done by adding " [:span.c9
" This is done by adding "]
[:code "info"]" to the class.\n"] [:code "info"]" to the class.\n"]
[:div {:class "msg alert ok"} [:div {:class "msg alert ok"}
[:strong [:strong
[:i {:class "ico"} "☑"] [:i.ico.big "☑"]
" Alert OK"] " Alert OK"]
" This is done by adding " " This is done by adding "
[:code "ok"]" to the class.\n"] [:code "ok"]" to the class.\n"]
[:div {:class "msg alert warn"} [:div {:class "msg alert warn"}
[:strong [:strong
[:i {:class "ico"} "☣"] [:i.ico.big "☣"]
" Alert Warning"] " Alert Warning"]
" This is done by adding " " This is done by adding "
[:code "warn"]" to the class.\n"] [:code "warn"]" to the class.\n"]
[:div {:class "msg alert err"} [:div {:class "msg alert err"}
[:strong [:strong
[:i {:class "ico"} "☒"]" Alert Error"] [:i.ico.big "☒"]" Alert Error"]
" This is done by adding " " This is done by adding "
[:code "err"]" to the class.\n"] [:code "err"]" to the class.\n"]
[:div {:class "msg alert fatal"} [:div {:class "msg alert fatal"}
[:strong [:strong
[:i {:class "ico"} "☠"]" Alert Fatal"] [:i.ico.big "☠"]" Alert Fatal"]
" This is done by adding " " This is done by adding "
[:code "fatal"]" to the class.\n"]]] [:code "fatal"]" to the class.\n"]]]
messages-section {:title "Messages" messages-section {:title "Messages"
@ -400,12 +403,25 @@
:cards [table]} :cards [table]}
basic-icons [:div.col.start basic-icons [:div.col.start
[:h4 "Android Safe"] [:h4 "Android Safe"]
[:i {:class "ico block", :style "line-height: 1.5rem"} "☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №\n"] [:i {:class "ico block big"} "☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №\n"]
[:div {:class "msg push"} [:div {:class "msg push"}
"The \"Android Safe\" icons work everywhere, tested on hundreds of devices."]] [:p
"The \"Android Safe\" icons work everywhere, tested on hundreds of devices."]
[:p
(mapcat (fn [w i]
[w " " [:i.ico i] " "])
(string/split
(str "Inserting in the middle of some text to check the size."
" Now this should give an idea about the size relatively "
"to the text. Hmmm this is quite long and boring to write"
" text in between like that!")
#" ")
(string/split "☎♂♀ⓧ©§®⇦⇧⇨⇩♠♣♥♦♪♛♜♝♞♟☜☞♨♭♯￥￡￠❊฿๏※₧₨₪€№" #""))
]]]
full-icons [:div.col.start full-icons [:div.col.start
[:h4 "Total Set"] [:h4 "Total Set"]
[:i {:class "ico block", :style "line-height: 1.5rem"} [:i {:class "ico block big"}
"✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩\n"] "✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩\n"]
[:div {:class "msg warn push"} [:div {:class "msg warn push"}
"Although over 75% of Android devices we tested support all \"Total Set\" icons, " "Although over 75% of Android devices we tested support all \"Total Set\" icons, "
@ -465,7 +481,9 @@
messages-section messages-section
navbar-section]] navbar-section]]
[:div.col [:div.col
[:h2 title] [:h2 {:id title}
[:a {:href (str "#" title)} [:i.ico "§"]] " "
title]
(for [[c1 c2] (partition 2 2 nil cards)] (for [[c1 c2] (partition 2 2 nil cards)]
[:div.row [:div.row
[:div.card.c6 [:div.card.c6

2
brut.min.css vendored
View file

File diff suppressed because one or more lines are too long

102
h/docs.html
View file

@ -1,4 +1,4 @@
<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 - documentation</title><link href="../brut.min.css" rel="stylesheet" type="text/css" /></head><body class="col"><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="container"><div class="col"><h2>Textual content</h2><div class="row"><div class="card c6"><div id="text"><h1>title in h1</h1><p>Some text in &lt;p&gt; with different styles; <b>bold</b>, <strong>strong</strong>, <i>italic</i>, <em>emphasis</em>, <code>code</code>, and if you really want something to be extremly visible use the class <code class="hl">hl</code>.</p><p>The text should be <strong class="hl">very dense</strong> on purpose. Forget your lessons about nice space in design here. The goal of this design is to produce <em>professional</em> UI applications. So no time to make it breathes. We want to make it compact and efficient.</p><p>Note we still try to keep a coherent and nice vertical rythm.</p><blockquote><p>Here is some blockquote. This can give you an idea about the look and feel for them.</p></blockquote></div><details><summary>code</summary><pre> <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 - documentation</title><link href="../brut.min.css" rel="stylesheet" type="text/css" /></head><body class="col"><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="container"><div class="col"><h2 id="Textual content"><a href="#Textual content"><i class="ico">§</i></a> Textual content</h2><div class="row"><div class="card c6"><div id="text"><h1>title in h1</h1><p>Some text in &lt;p&gt; with different styles; <b>bold</b>, <strong>strong</strong>, <i>italic</i>, <em>emphasis</em>, <code>code</code>, and if you really want something to be extremly visible use the class <code class="hl">hl</code>.</p><p>The text should be <strong class="hl">very dense</strong> on purpose. Forget your lessons about nice space in design here. The goal of this design is to produce <em>professional</em> UI applications. So no time to make it breathes. We want to make it compact and efficient.</p><p>Note we still try to keep a coherent and nice vertical rythm.</p><blockquote><p>Here is some blockquote. This can give you an idea about the look and feel for them.</p></blockquote></div><details><summary>code</summary><pre>
&lt;div id=&quot;text&quot;&gt; &lt;div id=&quot;text&quot;&gt;
&lt;h1&gt;title in h1&lt;/h1&gt; &lt;h1&gt;title in h1&lt;/h1&gt;
&lt;p&gt;Some text in &amp;lt;p&amp;gt; with different styles; &lt;b&gt;bold&lt;/b&gt;, &lt;p&gt;Some text in &amp;lt;p&amp;gt; with different styles; &lt;b&gt;bold&lt;/b&gt;,
@ -87,7 +87,7 @@
&lt;li&gt;item 4&lt;/li&gt; &lt;li&gt;item 4&lt;/li&gt;
&lt;/ol&gt; &lt;/ol&gt;
&lt;/div&gt; &lt;/div&gt;
</pre></details></div></div></div><div class="col"><h2>Grid</h2><div class="row"><div class="card c6"><div><div class="row"><div class="bg-neutral c12">c12</div></div><div class="row"><div class="bg-neutral c11">c11</div><div class="light c1">c1</div></div><div class="row"><div class="bg-neutral c10">c10</div><div class="light c2">c2</div></div><div class="row"><div class="bg-neutral c9">c9</div><div class="light c3">c3</div></div><div class="row"><div class="bg-neutral c8">c8</div><div class="light c4">c4</div></div><div class="row"><div class="bg-neutral c7">c7</div><div class="light c5">c5</div></div><div class="row"><div class="bg-neutral c6">c6</div><div class="light c6">c6</div></div><div class="row"><div class="bg-neutral c5">c5</div><div class="light c7">c7</div></div><div class="row"><div class="bg-neutral c4">c4</div><div class="light c8">c8</div></div><div class="row"><div class="bg-neutral c3">c3</div><div class="light c9">c9</div></div><div class="row"><div class="bg-neutral c2">c2</div><div class="light c10">c10</div></div><div class="row"><div class="bg-neutral c1">c1</div><div class="light c11">c11</div></div><div class="row"><div class="light c12">c12</div></div></div><details><summary>code</summary><pre> </pre></details></div></div></div><div class="col"><h2 id="Grid"><a href="#Grid"><i class="ico">§</i></a> Grid</h2><div class="row"><div class="card c6"><div><div class="row"><div class="bg-neutral c12">c12</div></div><div class="row"><div class="bg-neutral c11">c11</div><div class="light c1">c1</div></div><div class="row"><div class="bg-neutral c10">c10</div><div class="light c2">c2</div></div><div class="row"><div class="bg-neutral c9">c9</div><div class="light c3">c3</div></div><div class="row"><div class="bg-neutral c8">c8</div><div class="light c4">c4</div></div><div class="row"><div class="bg-neutral c7">c7</div><div class="light c5">c5</div></div><div class="row"><div class="bg-neutral c6">c6</div><div class="light c6">c6</div></div><div class="row"><div class="bg-neutral c5">c5</div><div class="light c7">c7</div></div><div class="row"><div class="bg-neutral c4">c4</div><div class="light c8">c8</div></div><div class="row"><div class="bg-neutral c3">c3</div><div class="light c9">c9</div></div><div class="row"><div class="bg-neutral c2">c2</div><div class="light c10">c10</div></div><div class="row"><div class="bg-neutral c1">c1</div><div class="light c11">c11</div></div><div class="row"><div class="light c12">c12</div></div></div><details><summary>code</summary><pre>
&lt;div&gt; &lt;div&gt;
&lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;bg-neutral c12&quot;&gt; &lt;div class=&quot;bg-neutral c12&quot;&gt;
@ -188,34 +188,39 @@
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</pre></details></div></div></div><div class="col"><h2>Images</h2><div class="row"><div class="card c6"><div id="images"><h1>Images</h1><h2>Inside a grid</h2><div class="row"><div class="card"><p>Inside a card</p><img src="../h/img/brutalism.webp" /></div><div><p>Directly a card</p><img src="../h/img/brutalism.webp" /></div><div class="block"><p>In a block</p><img src="../h/img/brutalism.webp" /></div></div></div><details><summary>code</summary><pre> </pre></details></div></div></div><div class="col"><h2 id="Images"><a href="#Images"><i class="ico">§</i></a> Images</h2><div class="row"><div class="card c6"><div id="images"><h1>Images</h1><h2>Inside a grid</h2><div class="row"><div class="card"><p>Inside a card</p><img src="../h/img/brutalism.webp" /></div><div class="block"><p>In a block</p><img src="../h/img/brutalism.webp" /></div><div><span>Directly in the column</span><img src="../h/img/brutalism.webp" /></div></div></div><details><summary>code</summary><pre>
&lt;div id=&quot;images&quot;&gt; &lt;div id=&quot;images&quot;&gt;
&lt;h1&gt;Images&lt;/h1&gt; &lt;h1&gt;Images&lt;/h1&gt;
&lt;h2&gt;Inside a grid&lt;/h2&gt; &lt;h2&gt;Inside a grid&lt;/h2&gt;
&lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;card&quot;&gt; &lt;div class=&quot;card&quot;&gt;
&lt;p&gt;Inside a card&lt;/p&gt;&lt;img src=&quot;../h/img/brutalism.webp&quot;&gt;&lt;/img&gt;&lt;/div&gt; &lt;p&gt;Inside a card&lt;/p&gt;&lt;img src=&quot;../h/img/brutalism.webp&quot;&gt;&lt;/img&gt;&lt;/div&gt;
&lt;div&gt;
&lt;p&gt;Directly a card&lt;/p&gt;&lt;img src=&quot;../h/img/brutalism.webp&quot;&gt;&lt;/img&gt;&lt;/div&gt;
&lt;div class=&quot;block&quot;&gt; &lt;div class=&quot;block&quot;&gt;
&lt;p&gt;In a block&lt;/p&gt;&lt;img src=&quot;../h/img/brutalism.webp&quot;&gt;&lt;/img&gt;&lt;/div&gt; &lt;p&gt;In a block&lt;/p&gt;&lt;img src=&quot;../h/img/brutalism.webp&quot;&gt;&lt;/img&gt;&lt;/div&gt;
&lt;div&gt;&lt;span&gt;Directly in the column&lt;/span&gt;&lt;img src=&quot;../h/img/brutalism.webp&quot;&gt;&lt;/img&gt;&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</pre></details></div></div></div><div class="col"><h2>icons</h2><div class="row"><div class="card c6"><div class="col start"><h4>Android Safe</h4><i class="ico block" style="line-height: 1.5rem">☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € № </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">The &quot;Android Safe&quot; icons work everywhere, tested on hundreds of devices.</div></div><details><summary>code</summary><pre> </i><div class="msg push"><p>The &quot;Android Safe&quot; icons work everywhere, tested on hundreds of devices.</p><p>Inserting <i class="ico">☎</i> in <i class="ico">♂</i> the <i class="ico">♀</i> middle <i class="ico">ⓧ</i> of <i class="ico">©</i> some <i class="ico">§</i> text <i class="ico">®</i> to <i class="ico">⇦</i> check <i class="ico">⇧</i> the <i class="ico">⇨</i> size. <i class="ico">⇩</i> Now <i class="ico">♠</i> this <i class="ico">♣</i> should <i class="ico">♥</i> give <i class="ico">♦</i> an <i class="ico">♪</i> idea <i class="ico">♛</i> about <i class="ico">♜</i> the <i class="ico">♝</i> size <i class="ico">♞</i> relatively <i class="ico">♟</i> to <i class="ico">☜</i> the <i class="ico">☞</i> text. <i class="ico">♨</i> Hmmm <i class="ico">♭</i> this <i class="ico">♯</i> is <i class="ico">￥</i> quite <i class="ico">￡</i> long <i class="ico">￠</i> and <i class="ico">❊</i> boring <i class="ico">฿</i> to <i class="ico">๏</i> write <i class="ico">※</i> text <i class="ico">₧</i> in <i class="ico">₨</i> between <i class="ico">₪</i> like <i class="ico">€</i> that! <i class="ico">№</i> </p></div></div><details><summary>code</summary><pre>
&lt;div class=&quot;col start&quot;&gt; &lt;div class=&quot;col start&quot;&gt;
&lt;h4&gt;Android Safe&lt;/h4&gt;&lt;i class=&quot;ico block&quot; style=&quot;line-height: 1.5rem&quot;&gt;☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ &lt;h4&gt;Android Safe&lt;/h4&gt;&lt;i class=&quot;ico block big&quot;&gt;☎ ♂ ♀ ⓧ © § ® ⇦ ⇧
☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №&lt;/i&gt; ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №&lt;/i&gt;
&lt;div class=&quot;msg push&quot;&gt; &lt;div class=&quot;msg push&quot;&gt;
The &quot;Android Safe&quot; icons work everywhere, tested on hundreds &lt;p&gt;The &quot;Android Safe&quot; icons work everywhere, tested on
of devices. hundreds of devices.&lt;/p&gt;
&lt;p&gt;Inserting &lt;i class=&quot;ico&quot;&gt;☎&lt;/i&gt; in &lt;i class=&quot;ico&quot;&gt;♂&lt;/i&gt; the
&lt;i class=&quot;ico&quot;&gt;♀&lt;/i&gt; middle &lt;i class=&quot;ico&quot;&gt;ⓧ&lt;/i&gt; of &lt;i class=&quot;ico&quot;&gt;©&lt;/i&gt; some &lt;i class=&quot;ico&quot;&gt;§&lt;/i&gt; text &lt;i class=&quot;ico&quot;&gt;®&lt;/i&gt; to &lt;i class=&quot;ico&quot;&gt;⇦&lt;/i&gt; check &lt;i class=&quot;ico&quot;&gt;⇧&lt;/i&gt; the &lt;i class=&quot;ico&quot;&gt;⇨&lt;/i&gt; size. &lt;i class=&quot;ico&quot;&gt;⇩&lt;/i&gt; Now &lt;i class=&quot;ico&quot;&gt;♠&lt;/i&gt; this &lt;i class=&quot;ico&quot;&gt;♣&lt;/i&gt; should &lt;i class=&quot;ico&quot;&gt;♥&lt;/i&gt; give &lt;i class=&quot;ico&quot;&gt;♦&lt;/i&gt; an &lt;i class=&quot;ico&quot;&gt;♪&lt;/i&gt; idea &lt;i class=&quot;ico&quot;&gt;♛&lt;/i&gt;
about &lt;i class=&quot;ico&quot;&gt;♜&lt;/i&gt; the &lt;i class=&quot;ico&quot;&gt;♝&lt;/i&gt; size
&lt;i class=&quot;ico&quot;&gt;♞&lt;/i&gt; relatively &lt;i class=&quot;ico&quot;&gt;♟&lt;/i&gt; to
&lt;i class=&quot;ico&quot;&gt;☜&lt;/i&gt; the &lt;i class=&quot;ico&quot;&gt;☞&lt;/i&gt; text. &lt;i class=&quot;ico&quot;&gt;♨&lt;/i&gt; Hmmm &lt;i class=&quot;ico&quot;&gt;♭&lt;/i&gt; this &lt;i class=&quot;ico&quot;&gt;♯&lt;/i&gt; is &lt;i class=&quot;ico&quot;&gt;￥&lt;/i&gt; quite &lt;i class=&quot;ico&quot;&gt;￡&lt;/i&gt; long &lt;i class=&quot;ico&quot;&gt;￠&lt;/i&gt; and &lt;i class=&quot;ico&quot;&gt;❊&lt;/i&gt; boring &lt;i class=&quot;ico&quot;&gt;฿&lt;/i&gt; to &lt;i class=&quot;ico&quot;&gt;๏&lt;/i&gt; write &lt;i class=&quot;ico&quot;&gt;※&lt;/i&gt; text &lt;i class=&quot;ico&quot;&gt;₧&lt;/i&gt; in &lt;i class=&quot;ico&quot;&gt;₨&lt;/i&gt; between &lt;i class=&quot;ico&quot;&gt;₪&lt;/i&gt; like &lt;i class=&quot;ico&quot;&gt;€&lt;/i&gt; that! &lt;i class=&quot;ico&quot;&gt;№&lt;/i&gt;&lt;/p&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</pre></details></div><div class="card c6"><div class="col start"><h4>Total Set</h4><i class="ico block" style="line-height: 1.5rem">✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩ </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 &quot;Total Set&quot; icons, if a substantial portion of your users use old Android devices you should stick to the &quot;Android Safe&quot; set. (The &quot;Total Set&quot; does not include icons from the &quot;Android Safe&quot; set.)</div></div><details><summary>code</summary><pre> </i><div class="msg warn push">Although over 75% of Android devices we tested support all &quot;Total Set&quot; icons, if a substantial portion of your users use old Android devices you should stick to the &quot;Android Safe&quot; set. (The &quot;Total Set&quot; does not include icons from the &quot;Android Safe&quot; set.)</div></div><details><summary>code</summary><pre>
&lt;div class=&quot;col start&quot;&gt; &lt;div class=&quot;col start&quot;&gt;
&lt;h4&gt;Total Set&lt;/h4&gt;&lt;i class=&quot;ico block&quot; style=&quot;line-height: 1.5rem&quot;&gt;✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ &lt;h4&gt;Total Set&lt;/h4&gt;&lt;i class=&quot;ico block big&quot;&gt;✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢
⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩&lt;/i&gt; ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩
◍ ۩&lt;/i&gt;
&lt;div class=&quot;msg warn push&quot;&gt; &lt;div class=&quot;msg warn push&quot;&gt;
Although over 75% of Android devices we tested support all Although over 75% of Android devices we tested support all
&quot;Total Set&quot; icons, if a substantial portion of your users use &quot;Total Set&quot; icons, if a substantial portion of your users use
@ -224,7 +229,7 @@
&quot;Android Safe&quot; set.) &quot;Android Safe&quot; set.)
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</pre></details></div></div></div><div class="col"><h2>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>&lt;span&gt;</code> and <code>&lt;input&gt;</code> tags. Example: <pre>... &lt;/span&gt;<span class="hl"> </span>&lt;input ...</pre><span class="addon">$</span> <input class="smooth" type="text" /><pre>... &lt;/span&gt;&lt;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>&lt;span&gt;</code> and <code>&lt;input&gt;</code> tags. Example: <pre>... &lt;/span&gt;<span class="hl"> </span>&lt;input ...</pre><span class="addon">$</span> <input class="smooth" type="text" /><pre>... &lt;/span&gt;&lt;input ...</pre><span class="addon">$</span><input class="smooth" type="text" /></div></div><details><summary>code</summary><pre>
&lt;div&gt; &lt;div&gt;
&lt;input class=&quot;neutral&quot; placeholder=&quot;input&quot; type=&quot;text&quot;&gt;&lt;/input&gt;&lt;br&gt;&lt;/br&gt; &lt;input class=&quot;neutral&quot; placeholder=&quot;input&quot; type=&quot;text&quot;&gt;&lt;/input&gt;&lt;br&gt;&lt;/br&gt;
&lt;textarea class=&quot;neutral&quot; placeholder=&quot;textarea&quot; rows=&quot;3&quot;&gt;&lt;/textarea&gt;&lt;br&gt;&lt;/br&gt; &lt;textarea class=&quot;neutral&quot; placeholder=&quot;textarea&quot; rows=&quot;3&quot;&gt;&lt;/textarea&gt;&lt;br&gt;&lt;/br&gt;
@ -239,7 +244,7 @@
&lt;pre&gt;... &amp;lt;/span&amp;gt;&amp;lt;input ...&lt;/pre&gt;&lt;span class=&quot;addon&quot;&gt;$&lt;/span&gt;&lt;input class=&quot;smooth&quot; type=&quot;text&quot;&gt;&lt;/input&gt; &lt;pre&gt;... &amp;lt;/span&amp;gt;&amp;lt;input ...&lt;/pre&gt;&lt;span class=&quot;addon&quot;&gt;$&lt;/span&gt;&lt;input class=&quot;smooth&quot; type=&quot;text&quot;&gt;&lt;/input&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</pre></details></div></div></div><div class="col"><h2>Tables</h2><div class="row"><div class="card c6"><table class="table"><thead><tr><th>#</th><th>Widgets Sold</th><th>Revenue (£)</th><th>Profit (£)</th></tr></thead><tbody><tr><td>1</td><td>5</td><td>10</td><td>2</td></tr><tr><td>2</td><td>10</td><td>20</td><td>4</td></tr><tr><td>3</td><td>500</td><td>1000</td><td>200</td></tr></tbody></table><details><summary>code</summary><pre> </pre></details></div></div></div><div class="col"><h2 id="Tables"><a href="#Tables"><i class="ico">§</i></a> Tables</h2><div class="row"><div class="card c6"><table class="table"><thead><tr><th>#</th><th>Widgets Sold</th><th>Revenue (£)</th><th>Profit (£)</th></tr></thead><tbody><tr><td>1</td><td>5</td><td>10</td><td>2</td></tr><tr><td>2</td><td>10</td><td>20</td><td>4</td></tr><tr><td>3</td><td>500</td><td>1000</td><td>200</td></tr></tbody></table><details><summary>code</summary><pre>
&lt;table class=&quot;table&quot;&gt; &lt;table class=&quot;table&quot;&gt;
&lt;thead&gt; &lt;thead&gt;
&lt;tr&gt; &lt;tr&gt;
@ -270,7 +275,7 @@
&lt;/tr&gt; &lt;/tr&gt;
&lt;/tbody&gt; &lt;/tbody&gt;
&lt;/table&gt; &lt;/table&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> </pre></details></div></div></div><div class="col"><h2 id="Buttons"><a href="#Buttons"><i class="ico">§</i></a> 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;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 &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 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
@ -336,17 +341,17 @@
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</pre></details></div></div></div><div class="col"><h2>Messages</h2><div class="row"><div class="card c6"><div class="row"><div class="col c6 gapless"><h2>Basic Messages</h2><br /><div class="msg"><strong>Normal Message</strong> This is a normal message with <code>msg</code>.</div><div class="msg info"><strong><i class="ico">☞</i> Info</strong> This is done by adding <code>info</code> to the class. </pre></details></div></div></div><div class="col"><h2 id="Messages"><a href="#Messages"><i class="ico">§</i></a> Messages</h2><div class="row"><div class="card c6"><div class="row"><div class="col c6 gapless"><h2>Basic Messages</h2><br /><div class="msg"><strong>Normal Message</strong> This is a normal message with <code>msg</code>.</div><div class="msg info"><strong><i class="ico big">☞</i> Info</strong> This is done by adding <code>info</code> to the class.
</div><div class="msg ok"><strong><i class="ico">☑</i> OK</strong> This is done by adding <code>ok</code> to the class. </div><div class="msg ok"><strong><i class="ico big">☑</i> OK</strong> This is done by adding <code>ok</code> to the class.
</div><div class="msg warn"><strong><i class="ico">☣</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">☒</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">☠</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><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><i class="ico">☞</i> Alert Info</strong> This is done by adding <code>info</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">☑</i> Alert OK</strong> This is done by adding <code>ok</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">☣</i> Alert Warning</strong> This is done by adding <code>warn</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">☒</i> Alert Error</strong> This is done by adding <code>err</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">☠</i> Alert Fatal</strong> This is done by adding <code>fatal</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>
&lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col c6 gapless&quot;&gt; &lt;div class=&quot;col c6 gapless&quot;&gt;
@ -356,24 +361,24 @@
with &lt;code&gt;msg&lt;/code&gt;. with &lt;code&gt;msg&lt;/code&gt;.
&lt;/div&gt; &lt;/div&gt;
&lt;div class=&quot;msg info&quot;&gt; &lt;div class=&quot;msg info&quot;&gt;
&lt;strong&gt;&lt;i class=&quot;ico&quot;&gt;☞&lt;/i&gt; Info&lt;/strong&gt; This is done by &lt;strong&gt;&lt;i class=&quot;ico big&quot;&gt;☞&lt;/i&gt; Info&lt;/strong&gt; This is done
adding &lt;code&gt;info&lt;/code&gt; to the class. by adding &lt;code&gt;info&lt;/code&gt; to the class.
&lt;/div&gt; &lt;/div&gt;
&lt;div class=&quot;msg ok&quot;&gt; &lt;div class=&quot;msg ok&quot;&gt;
&lt;strong&gt;&lt;i class=&quot;ico&quot;&gt;☑&lt;/i&gt; OK&lt;/strong&gt; This is done by &lt;strong&gt;&lt;i class=&quot;ico big&quot;&gt;☑&lt;/i&gt; OK&lt;/strong&gt; This is done
adding &lt;code&gt;ok&lt;/code&gt; to the class. by adding &lt;code&gt;ok&lt;/code&gt; to the class.
&lt;/div&gt; &lt;/div&gt;
&lt;div class=&quot;msg warn&quot;&gt; &lt;div class=&quot;msg warn&quot;&gt;
&lt;strong&gt;&lt;i class=&quot;ico&quot;&gt;☣&lt;/i&gt; Warning&lt;/strong&gt; This is done &lt;strong&gt;&lt;i class=&quot;ico big&quot;&gt;☣&lt;/i&gt; Warning&lt;/strong&gt; This is
by adding &lt;code&gt;warn&lt;/code&gt; to the class. done by adding &lt;code&gt;warn&lt;/code&gt; to the class.
&lt;/div&gt; &lt;/div&gt;
&lt;div class=&quot;msg err&quot;&gt; &lt;div class=&quot;msg err&quot;&gt;
&lt;strong&gt;&lt;i class=&quot;ico&quot;&gt;☒&lt;/i&gt; Error&lt;/strong&gt; This is done by &lt;strong&gt;&lt;i class=&quot;ico big&quot;&gt;☒&lt;/i&gt; Error&lt;/strong&gt; This is
adding &lt;code&gt;err&lt;/code&gt; to the class. done by adding &lt;code&gt;err&lt;/code&gt; to the class.
&lt;/div&gt; &lt;/div&gt;
&lt;div class=&quot;msg fatal&quot;&gt; &lt;div class=&quot;msg fatal&quot;&gt;
&lt;strong&gt;&lt;i class=&quot;ico&quot;&gt;☠&lt;/i&gt; Fatal&lt;/strong&gt; This is done by &lt;strong&gt;&lt;i class=&quot;ico big&quot;&gt;☠&lt;/i&gt; Fatal&lt;/strong&gt; This is
adding &lt;code&gt;fatal&lt;/code&gt; to the class. done by adding &lt;code&gt;fatal&lt;/code&gt; to the class.
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class=&quot;col c6 gapless&quot;&gt; &lt;div class=&quot;col c6 gapless&quot;&gt;
@ -383,28 +388,29 @@
with &lt;code&gt;msg&lt;/code&gt;. with &lt;code&gt;msg&lt;/code&gt;.
&lt;/div&gt; &lt;/div&gt;
&lt;div class=&quot;msg alert info&quot;&gt; &lt;div class=&quot;msg alert info&quot;&gt;
&lt;strong&gt;&lt;i class=&quot;ico&quot;&gt;☞&lt;/i&gt; Alert Info&lt;/strong&gt; This is &lt;strong class=&quot;c3&quot;&gt;&lt;i class=&quot;ico big&quot;&gt;☞&lt;/i&gt; Alert
done by adding &lt;code&gt;info&lt;/code&gt; to the class. Info&lt;/strong&gt; &lt;span class=&quot;c9&quot;&gt;This is done by
adding&lt;/span&gt; &lt;code&gt;info&lt;/code&gt; to the class.
&lt;/div&gt; &lt;/div&gt;
&lt;div class=&quot;msg alert ok&quot;&gt; &lt;div class=&quot;msg alert ok&quot;&gt;
&lt;strong&gt;&lt;i class=&quot;ico&quot;&gt;☑&lt;/i&gt; Alert OK&lt;/strong&gt; This is done &lt;strong&gt;&lt;i class=&quot;ico big&quot;&gt;☑&lt;/i&gt; Alert OK&lt;/strong&gt; This is
by adding &lt;code&gt;ok&lt;/code&gt; to the class. done by adding &lt;code&gt;ok&lt;/code&gt; to the class.
&lt;/div&gt; &lt;/div&gt;
&lt;div class=&quot;msg alert warn&quot;&gt; &lt;div class=&quot;msg alert warn&quot;&gt;
&lt;strong&gt;&lt;i class=&quot;ico&quot;&gt;☣&lt;/i&gt; Alert Warning&lt;/strong&gt; This is &lt;strong&gt;&lt;i class=&quot;ico big&quot;&gt;☣&lt;/i&gt; Alert Warning&lt;/strong&gt;
done by adding &lt;code&gt;warn&lt;/code&gt; to the class. This is done by adding &lt;code&gt;warn&lt;/code&gt; to the class.
&lt;/div&gt; &lt;/div&gt;
&lt;div class=&quot;msg alert err&quot;&gt; &lt;div class=&quot;msg alert err&quot;&gt;
&lt;strong&gt;&lt;i class=&quot;ico&quot;&gt;☒&lt;/i&gt; Alert Error&lt;/strong&gt; This is &lt;strong&gt;&lt;i class=&quot;ico big&quot;&gt;☒&lt;/i&gt; Alert Error&lt;/strong&gt; This
done by adding &lt;code&gt;err&lt;/code&gt; to the class. is done by adding &lt;code&gt;err&lt;/code&gt; to the class.
&lt;/div&gt; &lt;/div&gt;
&lt;div class=&quot;msg alert fatal&quot;&gt; &lt;div class=&quot;msg alert fatal&quot;&gt;
&lt;strong&gt;&lt;i class=&quot;ico&quot;&gt;☠&lt;/i&gt; Alert Fatal&lt;/strong&gt; This is &lt;strong&gt;&lt;i class=&quot;ico big&quot;&gt;☠&lt;/i&gt; Alert Fatal&lt;/strong&gt; This
done by adding &lt;code&gt;fatal&lt;/code&gt; to the class. is done by adding &lt;code&gt;fatal&lt;/code&gt; to the class.
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</pre></details></div></div></div><div class="col"><h2>Navbar</h2><div class="row"><div class="card c6"><div class="navbar"><nav class="nav" onclick="this.focus()" tabindex="-1"><div class="container"><a class="pagename current" href="#">BRUT</a><a href="#">One</a><a href="#">Two</a><a href="#">Three</a><a href="#">Four</a></div></nav><button class="btn-close btn sm">×</button></div><details><summary>code</summary><pre> </pre></details></div></div></div><div class="col"><h2 id="Navbar"><a href="#Navbar"><i class="ico">§</i></a> Navbar</h2><div class="row"><div class="card c6"><div class="navbar"><nav class="nav" onclick="this.focus()" tabindex="-1"><div class="container"><a class="pagename current" href="#">BRUT</a><a href="#">One</a><a href="#">Two</a><a href="#">Three</a><a href="#">Four</a></div></nav><button class="btn-close btn sm">×</button></div><details><summary>code</summary><pre>
&lt;div class=&quot;navbar&quot;&gt; &lt;div class=&quot;navbar&quot;&gt;
&lt;nav class=&quot;nav&quot; onclick=&quot;this.focus()&quot; tabindex=&quot;-1&quot;&gt; &lt;nav class=&quot;nav&quot; onclick=&quot;this.focus()&quot; tabindex=&quot;-1&quot;&gt;
&lt;div class=&quot;container&quot;&gt; &lt;div class=&quot;container&quot;&gt;

2
index.html
View file

@ -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"><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="container col"><div class="hero bg-neutral"><div class="row middle"><img alt="brutalism" class="c3 no-grow" src="h/img/brutalism.webp" /><div class="col block c6"><h1 class="title">BRUT</h1><h4>A Brutalist and Minimalist CSS Framework</h4><p>This CSS framework is ideal to be used for admin interface where youwant to make it clear, this is not for any kind of end user but onlyadvanced technical people.</p></div><img alt="brutalism" class="c3 no-grow" src="h/img/brutalism.webp" /></div></div><div class="row"><div class="col card"><h3>Docs</h3><p>Docs</p><p>Docs</p><a class="btn err big push" href="h/docs.html">Docs</a></div><div class="col card"><h3>Download</h3><div class="block"><p>Download BRUT</p></div><a class="btn err big push" href="h/download.html">Download</a></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"><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="container col"><div class="hero bg-neutral"><div class="row middle"><img alt="brutalism" class="c3 no-grow" src="h/img/brutalism.webp" /><div class="col block c6"><h1 class="title">BRUT</h1><h4>A Brutalist and Minimalist CSS Framework</h4><p>This CSS framework is ideal to be used for admin interface where youwant to make it clear, this is not for any kind of end user but onlyadvanced technical people.</p></div><img alt="brutalism" class="c3 no-grow" src="h/img/brutalism.webp" /></div></div><div class="row"><div class="col card"><h3>Docs</h3><p>Docs</p><p>Docs</p><a class="btn big push" href="h/docs.html">Docs</a></div><div class="col card"><h3>Download</h3><div class="block"><p>Download BRUT</p></div><a class="btn warn big push" href="h/download.html">Download</a></div></div></div><footer><div class="container"><p>By <a href="https://yannesposito.com">Yann Esposito</a></p></div></footer></body>

21
src/buttons.less
View file

@ -11,18 +11,9 @@
.tb:hover::before,.tb:hover::after { opacity: 1; } .tb:hover::before,.tb:hover::after { opacity: 1; }
.tb:active:before { content: "❰"; } .tb:active:before { content: "❰"; }
.tb:active:after { content: "❱"; } .tb:active:after { content: "❱"; }
.tb {
&.info { color: var(--n2); }
&.ok { color: var(--n2); }
&.warn { color: var(--n2); }
&.err { color: var(--n2); }
&.fatal { color: var(--n2); }
}
.btn { .btn {
background: var(--n0);
border: solid 2px var(--fg); border: solid 2px var(--fg);
color: #fff;
font-weight: bold; font-weight: bold;
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
@ -31,22 +22,12 @@
box-shadow: 4px 4px var(--shadow); box-shadow: 4px 4px var(--shadow);
vertical-align: bottom; vertical-align: bottom;
} }
.btn {
&.info { background: var(--n2); }
&.ok { background: var(--n2); }
&.warn { background: var(--n2); }
&.err { background: var(--n2); }
&.fatal { background: var(--n2); }
}
.btn:hover { .btn:hover {
background: var(--n1); box-shadow: 4px 4px var(--fg);
color: #fff;
} }
.btn:active,.btn:focus { .btn:active,.btn:focus {
color: #fff;
background: var(--n2);
box-shadow: 1px 1px #000; box-shadow: 1px 1px #000;
position: relative; position: relative;
top: 3px; top: 3px;

60
src/colors.less
View file

@ -1,7 +1,6 @@
@neutral: #999; @neutral: #999;
@dark-neutral: darken(@neutral,10%); @dark-neutral: darken(@neutral,10%);
:root { :root {
--bg: #fff; --bg: #fff;
--fg: #000; --fg: #000;
@ -13,52 +12,37 @@
--n1: darken(@neutral,10%); --n1: darken(@neutral,10%);
--n2: darken(@neutral,20%); --n2: darken(@neutral,20%);
--shadow: rgba(0,0,0,0.75); --shadow: rgba(0,0,0,0.65);
/* alert messages */ --y: #b58900;
--o: #cb4b16;
--r: #dc322f;
--m: #d33682;
--v: #6c71c4;
--b: #268bd2;
--c: #2aa198;
--g: #859900;
--cnt: #fff; --accent: var(--y);
--na: #333;
--nb: #000;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--bg: #000; body { filter: invert(100%) hue-rotate(180deg);
--fg: #ccc; .tg,.btn { filter: invert(100%) hue-rotate(180deg); }
--bg2: #333; }
--darken: rgba(255,255,255,0.1); img { filter: brightness(80%) invert(100%) ; }
--nl: darken(@dark-neutral,10%);
--n0: @dark-neutral;
--n1: lighten(@dark-neutral,10%);
--n2: lighten(@dark-neutral,20%);
--shadow: rgba(200,200,200,0.7);
--cnt: #000;
--na: #eee;
--nb: #fff;
} }
} }
html { background: var(--bg); color: var(--fg); }
.info { filter: sepia(100%) hue-rotate(120deg) contrast(120%) saturate(3); }
.ok { filter: sepia(100%) hue-rotate(40deg) contrast(120%) saturate(3); }
.warn { filter: sepia(100%) hue-rotate(0deg) contrast(120%) saturate(3); }
.err { filter: sepia(100%) hue-rotate(310deg) contrast(120%) saturate(3); }
.fatal { filter: sepia(100%) hue-rotate(270deg) contrast(120%) saturate(3); }
.alert { filter: invert(100%); }
.alert.info { filter: sepia(100%) hue-rotate(0deg) brightness(80%) contrast(140%) saturate(3) invert(100%); }
.alert.ok { filter: sepia(100%) hue-rotate(270deg) brightness(80%) contrast(140%) saturate(3) invert(100%); }
.alert.warn { filter: sepia(100%) hue-rotate(180deg) brightness(60%) contrast(180%) saturate(3) invert(100%); }
.alert.err { filter: sepia(100%) hue-rotate(140deg) brightness(100%) contrast(150%) saturate(3) invert(100%); }
.alert.fatal { filter: sepia(100%) hue-rotate(80deg) brightness(80%) contrast(150%) saturate(3) invert(100%); }
.alert img { filter: none; }
.neutral { color: var(--n0); } .neutral { color: var(--n0); }
.bg-neutral { background: var(--nl); } .bg-neutral { background: var(--nl); }
a { color: var(--fg); } a { color: var(--fg); }
p > a, li > a { color: var(--accent); }
.msg, .btn { background-color: var(--bg2) }
.info { color: var(--bg); background-color: var(--b); }
.ok { color: var(--bg); background-color: var(--g); }
.warn { color: var(--bg); background-color: var(--y); }
.err { color: var(--bg); background-color: var(--r); }
.fatal { color: var(--bg); background-color: var(--m); }

4
src/general.less
View file

@ -48,8 +48,8 @@ summary:hover { cursor: pointer; }
table { font-size: 1rem; } table { font-size: 1rem; }
.sm { font-size: 0.75rem; line-height: 0.65rem; } .sm { font-size: 0.75rem; line-height: 0.65rem; }
.big { font-size: 2rem; line-height: 3.4rem;} .big { font-size: 2rem; line-height: 2.8rem;}
.huge { font-size: 3rem; line-height: 5.2rem;} .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); }
/* doc are for long text to read */ /* doc are for long text to read */

4
src/headings.less
View file

@ -9,7 +9,11 @@ h1, h2, h3, h4, h5, h6 {
color: var(--bg); color: var(--bg);
margin: 1rem 0; margin: 1rem 0;
border: solid 1px var(--fg); border: solid 1px var(--fg);
a {
color: var(--bg);
}
} }
.tight { margin: 0; } .tight { margin: 0; }
h1 { background: var(--fg); } h1 { background: var(--fg); }
h2 { background: var(--n2); } h2 { background: var(--n2); }

8
src/icons.less
View file

@ -1,5 +1,7 @@
.ico { .ico {
font: 20px Arial Unicode MS, Lucida Sans Unicode; font-family: Arial Unicode MS, Lucida Sans Unicode;
line-height: 10px; font-style: normal;
vertical-align: text-top; }
.big.ico, .huge.ico {
vertical-align: middle;
} }

6
src/messages.less
View file

@ -1,10 +1,4 @@
.msg { .msg {
background: var(--bg2);
border-left: 5px solid var(--darken); border-left: 5px solid var(--darken);
padding: 1rem; padding: 1rem;
&.info { background: var(--n0); }
&.ok { background: var(--n0); }
&.warn { background: var(--n0); }
&.err { background: var(--n0); }
&.fatal { background: var(--n0); }
} }