terse color solution
This commit is contained in:
Yann Esposito (Yogsototh)
parent
6ac7b2f382
commit
479cb7834a
GPG key ID:
7B19A4C650D59646
|
|
@ -1,6 +1,7 @@
|
|||
(ns brut.site
|
||||
(:require [hiccup2.core :as h]
|
||||
[babashka.fs :as fs]
|
||||
[clojure.string :as string]
|
||||
[babashka.process :refer [process]]))
|
||||
|
||||
(defn html-pp [html-str]
|
||||
|
|
@ -79,13 +80,13 @@
|
|||
[:h3 "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"]]
|
||||
[:div.col.card
|
||||
[:h3 "Download"]
|
||||
[:div.block
|
||||
[:p "Download BRUT"]]
|
||||
[:a.btn.err.big.push {:href (to "h/download.html")}
|
||||
[:a.btn.warn.big.push {:href (to "h/download.html")}
|
||||
"Download"]]]]
|
||||
[:div.container.col
|
||||
hero
|
||||
|
|
@ -188,12 +189,13 @@
|
|||
[:div.card
|
||||
[:p "Inside a card"]
|
||||
[:img {:src (to brutalism-img)}]]
|
||||
[:div
|
||||
[:p "Directly a card"]
|
||||
[:img {:src (to brutalism-img)}]]
|
||||
[:div.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"
|
||||
:cards [images]}
|
||||
text-buttons [:div#text-buttons
|
||||
|
|
@ -281,27 +283,27 @@
|
|||
" This is a normal message with " [:code "msg"] "."]
|
||||
[:div {:class "msg info"}
|
||||
[:strong
|
||||
[:i {:class "ico"} "☞"]" Info"]
|
||||
[:i.ico.big "☞"]" Info"]
|
||||
" This is done by adding "
|
||||
[:code "info"]" to the class.\n"]
|
||||
[:div {:class "msg ok"}
|
||||
[:strong
|
||||
[:i {:class "ico"} "☑"]" OK"]
|
||||
[:i.ico.big "☑"]" OK"]
|
||||
" This is done by adding "
|
||||
[:code "ok"]" to the class.\n"]
|
||||
[:div {:class "msg warn"}
|
||||
[:strong
|
||||
[:i {:class "ico"} "☣"]" Warning"]
|
||||
[:i.ico.big "☣"]" Warning"]
|
||||
" This is done by adding "
|
||||
[:code "warn"]" to the class.\n"]
|
||||
[:div {:class "msg err"}
|
||||
[:strong
|
||||
[:i {:class "ico"} "☒"]" Error"]
|
||||
[:i.ico.big "☒"]" Error"]
|
||||
" This is done by adding "
|
||||
[:code "err"]" to the class.\n"]
|
||||
[:div {:class "msg fatal"}
|
||||
[:strong
|
||||
[:i {:class "ico"} "☠"]" Fatal"]
|
||||
[:i.ico.big "☠"]" Fatal"]
|
||||
" This is done by adding "
|
||||
[:code "fatal"]" to the class.\n"]]
|
||||
[:div {:class "col c6 gapless"}
|
||||
|
|
@ -312,30 +314,31 @@
|
|||
" This is a normal message with "
|
||||
[:code "msg"]".\n"]
|
||||
[:div {:class "msg alert info"}
|
||||
[:strong
|
||||
[:i {:class "ico"} "☞"] " Alert Info"]
|
||||
" This is done by adding "
|
||||
[: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
|
||||
[:i {:class "ico"} "☑"]
|
||||
[:i.ico.big "☑"]
|
||||
" Alert OK"]
|
||||
" This is done by adding "
|
||||
[:code "ok"]" to the class.\n"]
|
||||
[:div {:class "msg alert warn"}
|
||||
[:strong
|
||||
[:i {:class "ico"} "☣"]
|
||||
[:i.ico.big "☣"]
|
||||
" Alert Warning"]
|
||||
" This is done by adding "
|
||||
[:code "warn"]" to the class.\n"]
|
||||
[:div {:class "msg alert err"}
|
||||
[:strong
|
||||
[:i {:class "ico"} "☒"]" Alert Error"]
|
||||
[:i.ico.big "☒"]" Alert Error"]
|
||||
" This is done by adding "
|
||||
[:code "err"]" to the class.\n"]
|
||||
[:div {:class "msg alert fatal"}
|
||||
[:strong
|
||||
[:i {:class "ico"} "☠"]" Alert Fatal"]
|
||||
[:i.ico.big "☠"]" Alert Fatal"]
|
||||
" This is done by adding "
|
||||
[:code "fatal"]" to the class.\n"]]]
|
||||
messages-section {:title "Messages"
|
||||
|
|
@ -400,12 +403,25 @@
|
|||
:cards [table]}
|
||||
basic-icons [:div.col.start
|
||||
[:h4 "Android Safe"]
|
||||
[:i {:class "ico block", :style "line-height: 1.5rem"} "☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №\n"]
|
||||
[:i {:class "ico block big"} "☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №\n"]
|
||||
[: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
|
||||
[:h4 "Total Set"]
|
||||
[:i {:class "ico block", :style "line-height: 1.5rem"}
|
||||
[:i {:class "ico block big"}
|
||||
"✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩\n"]
|
||||
[:div {:class "msg warn push"}
|
||||
"Although over 75% of Android devices we tested support all \"Total Set\" icons, "
|
||||
|
|
@ -465,7 +481,9 @@
|
|||
messages-section
|
||||
navbar-section]]
|
||||
[:div.col
|
||||
[:h2 title]
|
||||
[:h2 {:id title}
|
||||
[:a {:href (str "#" title)} [:i.ico "§"]] " "
|
||||
title]
|
||||
(for [[c1 c2] (partition 2 2 nil cards)]
|
||||
[:div.row
|
||||
[:div.card.c6
|
||||
|
|
|
|||
2
brut.min.css
vendored
2
brut.min.css
vendored
File diff suppressed because one or more lines are too long
102
h/docs.html
102
h/docs.html
|
|
@ -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 <p> 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 <p> 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>
|
||||
<div id="text">
|
||||
<h1>title in h1</h1>
|
||||
<p>Some text in &lt;p&gt; with different styles; <b>bold</b>,
|
||||
|
|
@ -87,7 +87,7 @@
|
|||
<li>item 4</li>
|
||||
</ol>
|
||||
</div>
|
||||
</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>
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="bg-neutral c12">
|
||||
|
|
@ -188,34 +188,39 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
<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"></img></div>
|
||||
<div>
|
||||
<p>Directly a card</p><img src="../h/img/brutalism.webp"></img></div>
|
||||
<div class="block">
|
||||
<p>In a block</p><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>
|
||||
</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">☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №
|
||||
</i><div class="msg push">The "Android Safe" icons work everywhere, tested on hundreds of devices.</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>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>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>
|
||||
<div class="col start">
|
||||
<h4>Android Safe</h4><i class="ico block" style="line-height: 1.5rem">☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜
|
||||
☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №</i>
|
||||
<h4>Android Safe</h4><i class="ico block big">☎ ♂ ♀ ⓧ © § ® ⇦ ⇧
|
||||
⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №</i>
|
||||
<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>
|
||||
<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>
|
||||
</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 "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>
|
||||
<div class="col start">
|
||||
<h4>Total Set</h4><i class="ico block" style="line-height: 1.5rem">✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘
|
||||
⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩</i>
|
||||
<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
|
||||
|
|
@ -224,7 +229,7 @@
|
|||
"Android Safe" set.)
|
||||
</div>
|
||||
</div>
|
||||
</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><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>
|
||||
<div>
|
||||
<input class="neutral" placeholder="input" type="text"></input><br></br>
|
||||
<textarea class="neutral" placeholder="textarea" rows="3"></textarea><br></br>
|
||||
|
|
@ -239,7 +244,7 @@
|
|||
<pre>... &lt;/span&gt;&lt;input ...</pre><span class="addon">$</span><input class="smooth" type="text"></input>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -270,7 +275,7 @@
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</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>
|
||||
<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
|
||||
|
|
@ -336,17 +341,17 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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.
|
||||
</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 warn"><strong><i class="ico">☣</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 fatal"><strong><i class="ico">☠</i> Fatal</strong> This is done by adding <code>fatal</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 big">☑</i> OK</strong> This is done by adding <code>ok</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 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><i class="ico">☞</i> Alert Info</strong> This is done by adding <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 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 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 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 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 class="row">
|
||||
<div class="col c6 gapless">
|
||||
|
|
@ -356,24 +361,24 @@
|
|||
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.
|
||||
<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.
|
||||
<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.
|
||||
<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.
|
||||
<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.
|
||||
<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">
|
||||
|
|
@ -383,28 +388,29 @@
|
|||
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.
|
||||
<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.
|
||||
<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.
|
||||
<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.
|
||||
<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.
|
||||
<strong><i class="ico big">☠</i> Alert Fatal</strong> This
|
||||
is done by adding <code>fatal</code> to the class.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
<div class="navbar">
|
||||
<nav class="nav" onclick="this.focus()" tabindex="-1">
|
||||
<div class="container">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -11,18 +11,9 @@
|
|||
.tb:hover::before,.tb:hover::after { opacity: 1; }
|
||||
.tb:active:before { 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 {
|
||||
background: var(--n0);
|
||||
border: solid 2px var(--fg);
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
|
|
@ -31,22 +22,12 @@
|
|||
box-shadow: 4px 4px var(--shadow);
|
||||
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 {
|
||||
background: var(--n1);
|
||||
color: #fff;
|
||||
box-shadow: 4px 4px var(--fg);
|
||||
}
|
||||
|
||||
.btn:active,.btn:focus {
|
||||
color: #fff;
|
||||
background: var(--n2);
|
||||
box-shadow: 1px 1px #000;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
@neutral: #999;
|
||||
@dark-neutral: darken(@neutral,10%);
|
||||
|
||||
|
||||
:root {
|
||||
--bg: #fff;
|
||||
--fg: #000;
|
||||
|
|
@ -13,52 +12,37 @@
|
|||
--n1: darken(@neutral,10%);
|
||||
--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;
|
||||
--na: #333;
|
||||
--nb: #000;
|
||||
--accent: var(--y);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bg: #000;
|
||||
--fg: #ccc;
|
||||
--bg2: #333;
|
||||
--darken: rgba(255,255,255,0.1);
|
||||
|
||||
--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;
|
||||
body { filter: invert(100%) hue-rotate(180deg);
|
||||
.tg,.btn { filter: invert(100%) hue-rotate(180deg); }
|
||||
}
|
||||
img { filter: brightness(80%) invert(100%) ; }
|
||||
}
|
||||
}
|
||||
|
||||
.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; }
|
||||
|
||||
html { background: var(--bg); color: var(--fg); }
|
||||
.neutral { color: var(--n0); }
|
||||
.bg-neutral { background: var(--nl); }
|
||||
|
||||
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); }
|
||||
|
|
|
|||
|
|
@ -48,8 +48,8 @@ summary:hover { cursor: pointer; }
|
|||
table { font-size: 1rem; }
|
||||
|
||||
.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;}
|
||||
.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); }
|
||||
/* doc are for long text to read */
|
||||
|
|
|
|||
|
|
@ -9,7 +9,11 @@ h1, h2, h3, h4, h5, h6 {
|
|||
color: var(--bg);
|
||||
margin: 1rem 0;
|
||||
border: solid 1px var(--fg);
|
||||
a {
|
||||
color: var(--bg);
|
||||
}
|
||||
}
|
||||
|
||||
.tight { margin: 0; }
|
||||
h1 { background: var(--fg); }
|
||||
h2 { background: var(--n2); }
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
.ico {
|
||||
font: 20px Arial Unicode MS, Lucida Sans Unicode;
|
||||
line-height: 10px;
|
||||
vertical-align: text-top;
|
||||
font-family: Arial Unicode MS, Lucida Sans Unicode;
|
||||
font-style: normal;
|
||||
}
|
||||
.big.ico, .huge.ico {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,4 @@
|
|||
.msg {
|
||||
background: var(--bg2);
|
||||
border-left: 5px solid var(--darken);
|
||||
padding: 1rem;
|
||||
&.info { background: var(--n0); }
|
||||
&.ok { background: var(--n0); }
|
||||
&.warn { background: var(--n0); }
|
||||
&.err { background: var(--n0); }
|
||||
&.fatal { background: var(--n0); }
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue