a few improvements
This commit is contained in:
Yann Esposito (Yogsototh)
parent
bb7b1b222d
commit
286b3670c4
GPG key ID:
7B19A4C650D59646
149
bb/brut/site.clj
149
bb/brut/site.clj
|
|
@ -65,25 +65,37 @@
|
|||
(defn mk-index [rel-pref _metas]
|
||||
(let [to (fn [path] (str rel-pref path))
|
||||
hero [:div.hero
|
||||
{:style (str "background:url('" (to brutalism-img) "')")}
|
||||
[:div.row.middle
|
||||
[:div.col.c3]
|
||||
[:div.c6.block.bg-neutral
|
||||
[:div.col
|
||||
[:h1.tight.huge "BRUT"]
|
||||
[:h4 "A Brutalist and Minimalist CSS Framework"]
|
||||
[:p "This CSS framework is ideal to be used for "
|
||||
[:strong "private admin interfaces"]
|
||||
"."]
|
||||
[:p " Just by the look of it, it will scream: "
|
||||
[:span.hl "THIS IS NOT FOR NON-TECHNICAL PEOPLE!!!"]]]]
|
||||
[:div.col.c3]
|
||||
]]
|
||||
cards [:div.row
|
||||
{:style (format "background: url(%s)" (to brutalism-img))}
|
||||
[:div.container.col.middle
|
||||
[:div.row.middle
|
||||
[:div.c3]
|
||||
[:div.c6.block.bg-neutral
|
||||
[:div.col
|
||||
[:h1.tight.huge "BRUT"]
|
||||
[:h4 "A Brutalist and Minimalist CSS Framework"]
|
||||
[:p "This CSS framework is ideal to be used for "
|
||||
[:strong "private admin interfaces"]
|
||||
"."]
|
||||
[:p " Just by the look of it, it will scream: "
|
||||
[:span.hl "THIS IS NOT FOR NON-TECHNICAL PEOPLE!!!"]]]]
|
||||
[:div.c3]]]]
|
||||
cards [:div.container.row
|
||||
[:div.col.card
|
||||
[:h3 "Docs"]
|
||||
[:p "A few quick examples to show every components. "
|
||||
"This should be quick and straightforward."]
|
||||
[:p "This CSS framework makes its best to respect some expected composability accross classes."
|
||||
" Here are a few examples:"]
|
||||
[:div.fill.card
|
||||
[:p "With headings"]
|
||||
[:h3 "this is a normal " [:code "h3"]]
|
||||
[:h3.tight.big "this is a " [:code "h3"] " with " [:code "big"]]
|
||||
[:h3.tight.y "this is a " [:code "h3"] " with " [:code "y"] "for yellow"]
|
||||
[:h3.tight.big.y "this is a " [:code "h3"] " with both " [:code "big"] " and " [:code "y"] "."]
|
||||
[:br]
|
||||
[:h3.tight "this contains a " [:code "hl"] " " [:span.hl "HL"] ]
|
||||
[:h3.tight.hl "this a " [:code "h3"] " with " [:code "hl"] ]
|
||||
]
|
||||
[:a.btn.big.push {:href (to "h/docs.html")}
|
||||
"Docs"]]
|
||||
[:div.col.card
|
||||
|
|
@ -92,7 +104,7 @@
|
|||
[:p "Download BRUT"]]
|
||||
[:a.btn.warn.big.push {:href (to "h/download.html")}
|
||||
"Download"]]]]
|
||||
[:div.container.col
|
||||
[:div.col
|
||||
hero
|
||||
cards]))
|
||||
|
||||
|
|
@ -209,6 +221,7 @@
|
|||
text-buttons [:div#text-buttons
|
||||
[:h3 "Textual buttons"]
|
||||
[:a.tb "tb"]
|
||||
[:a.tb.hl "tb hl"]
|
||||
[:a.tb.info "tb info"]
|
||||
[:a.tb.ok "tb ok"]
|
||||
[:a.tb.warn "tb warn"]
|
||||
|
|
@ -217,58 +230,71 @@
|
|||
text-buttons-sizes [:div#text-buttons-sizes
|
||||
[:h3 "Textual Buttons Sizes"]
|
||||
[:div.block
|
||||
"Some text: " [:a {:class "tb sm info"} "small button"] [:br]
|
||||
"Some text: " [:a {:class "tb sm"} "small button"] [:br]
|
||||
"Some text: " [:a {:class "tb ok"} "normal ok"] [:br]
|
||||
"Some text: " [:a {:class "tb big warn"} "big warn"] [:br]
|
||||
"Some text: " [:a {:class "tb huge err"} "huge err"]]]
|
||||
buttons [:div {:id "buttons"}
|
||||
[:h2 "Classic"]
|
||||
[:a {:class "btn"} "btn"]
|
||||
[:a {:class "btn info"} "btn info"]
|
||||
[:a {:class "btn ok"} "btn ok"]
|
||||
[:a {:class "btn warn"} "btn warn"]
|
||||
[:a {:class "btn err"} "btn err"]
|
||||
[:a {:class "btn fatal"} "btn fatal"]
|
||||
[:pre {:class "block"} "<a class="btn btn-b">btn-b</a>"]
|
||||
[:h2 "Sizes"]
|
||||
[:a {:class "btn sm"} "btn sm"]
|
||||
[:a {:class "btn info"} "btn info"]
|
||||
[:a {:class "btn big warn"} "btn big warn"]
|
||||
[:a {:class "btn huge err"} "btn huge err"]
|
||||
[:pre {:class "block"} "<a class="btn sm info">btn sm info</a>"]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "col c4 card"}
|
||||
buttons [:div.col
|
||||
[:h2 "Buttons"]
|
||||
[:div.row
|
||||
[:div.card
|
||||
[:h3 "Classic"]
|
||||
[:a.btn "btn"]
|
||||
[:a.btn.hl "btn hl"]
|
||||
[:a.btn.info "btn info"]
|
||||
[:a.btn.ok "btn ok"]
|
||||
[:a.btn.warn "btn warn"]
|
||||
[:a.btn.err "btn err"]
|
||||
[:a.btn.fatal "btn fatal"]]
|
||||
[:div.card
|
||||
[:h3 "Sizes"]
|
||||
[:a.btn.sm "btn sm"]
|
||||
[:a.btn.info "btn info"]
|
||||
[:a.btn.big.warn "btn big warn"]
|
||||
[:a.btn.huge.err "btn huge err"]]]
|
||||
[:div.row
|
||||
[:div.col.c4.card
|
||||
[:h3 "Standardized Width "
|
||||
[:code "btn std"]]
|
||||
[:div {:class "col"}
|
||||
[:a {:class "btn std"} "btn std"]
|
||||
[:a {:class "btn std info"} "btn std info"]
|
||||
[:a {:class "btn std ok"} "btn std ok"]
|
||||
[:a {:class "btn std warn"} "btn std warn"]
|
||||
[:a {:class "btn std err"} "btn std err"]
|
||||
[:a {:class "btn std fatal"} "btn std fatal"]]]
|
||||
[:div {:class "col c4 card"}
|
||||
[:div.col
|
||||
[:a.btn.std "btn std"]
|
||||
[:a.btn.std.hl "btn std hl"]
|
||||
[:a.btn.std.info "btn std info"]
|
||||
[:a.btn.std.ok "btn std ok"]
|
||||
[:a.btn.std.warn "btn std warn"]
|
||||
[:a.btn.std.err "btn std err"]
|
||||
[:a.btn.std.fatal "btn std fatal"]]]
|
||||
[:div.col.card.c4
|
||||
[:h3 "Big"]
|
||||
[:div {:class "col"}
|
||||
[:a {:class "btn std big "} "btn std"]
|
||||
[:a {:class "btn std big info"} "btn std info"]
|
||||
[:a {:class "btn std big ok"} "btn std ok"]
|
||||
[:a {:class "btn std big warn"} "btn std warn"]]]
|
||||
[:div {:class "col c4 card"}
|
||||
[:div.col.big
|
||||
[:a.btn.std "btn std"]
|
||||
[:a.btn.std.hl "btn std hl"]
|
||||
[:a.btn.std.info "btn std info"]
|
||||
[:a.btn.std.ok "btn std ok"]
|
||||
[:a.btn.std.warn "btn std warn"]
|
||||
[:a.btn.std.err "btn std err"]
|
||||
[:a.btn.std.fatal "btn std fatal"]]
|
||||
]
|
||||
[:div.col.card.c4
|
||||
[:h3 "Huge"]
|
||||
[:div {:class "col"}
|
||||
[:a {:class "btn std huge"} "btn std"]
|
||||
[:a {:class "btn std huge info"} "btn std info"]
|
||||
[:a {:class "btn std huge ok"} "btn std ok"]]]]]
|
||||
[:div.col.huge
|
||||
[:a.btn.std "btn std"]
|
||||
[:a.btn.std.hl "btn std hl"]
|
||||
[:a.btn.std.info "btn std info"]
|
||||
[:a.btn.std.ok "btn std ok"]
|
||||
[:a.btn.std.warn "btn std warn"]
|
||||
[:a.btn.std.err "btn std err"]
|
||||
[:a.btn.std.fatal "btn std fatal"]]]]]
|
||||
tags [:div {:id "tags"}
|
||||
[:h2 "Tags"]
|
||||
[:ul
|
||||
[:li "item-1" [:span.tag "tag"]]
|
||||
[:li "item-2" [:span.tag.info "info"]]
|
||||
[:li "item-3" [:span.tag.ok "ok"]]
|
||||
[:li "item-4" [:span.tag.warn "warn"]]
|
||||
[:li "item-5" [:span.tag.err "err"]]
|
||||
[:li "item-6" [:span.tag.fatal "fatal"]]]]
|
||||
[:li "item-2" [:span.tag.hl "hl tag"]]
|
||||
[:li "item-3" [:span.tag.info "info"]]
|
||||
[:li "item-4" [:span.tag.ok "ok"]]
|
||||
[:li "item-5" [:span.tag.warn "warn"]]
|
||||
[:li "item-6" [:span.tag.err "err"]]
|
||||
[:li "item-7" [:span.tag.fatal "fatal"]]]]
|
||||
tags-listed [:div {:id "tags-inline"}
|
||||
[:h2 "Inline Tags"]
|
||||
[:span.tag "tag"]
|
||||
|
|
@ -287,7 +313,7 @@
|
|||
[:h2 "Basic Messages"]
|
||||
[:br]
|
||||
[:div {:class "msg"}
|
||||
[:strong "Normal Message"]
|
||||
[:strong " Normal Message"]
|
||||
" This is a normal message with " [:code "msg"] "."]
|
||||
[:div {:class "msg info"}
|
||||
[:strong
|
||||
|
|
@ -464,6 +490,8 @@
|
|||
grid-section {:title "Grid"
|
||||
:cards [grid grid-gapless grid-3col]}]
|
||||
[:div.container
|
||||
[:h1 "Documentation"]
|
||||
[:p "Here a bunch of examples with their source code to make them happen."]
|
||||
(for [{:keys [title cards]} [textual-section
|
||||
grid-section
|
||||
images-section
|
||||
|
|
@ -476,7 +504,7 @@
|
|||
footer-section]]
|
||||
[:div.col
|
||||
[:h2 {:id title}
|
||||
[:a {:href (str "#" title)} [:i.ico "§"]] " "
|
||||
[:a {:href (str "#" title)} [:i.ico "[§]"]] " "
|
||||
title]
|
||||
(for [[c1 c2] (partition 2 2 nil cards)]
|
||||
[:div.row
|
||||
|
|
@ -494,7 +522,8 @@
|
|||
|
||||
(defn -main [& _args]
|
||||
(gen-page "index.html"
|
||||
{:title "BRUT"}
|
||||
{:title "BRUT"
|
||||
:gapless? true}
|
||||
mk-index)
|
||||
(gen-page "h/download.html"
|
||||
{:title "BRUT - download"
|
||||
|
|
|
|||
2
brut.min.css
vendored
2
brut.min.css
vendored
File diff suppressed because one or more lines are too long
89
h/docs.html
89
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 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>. If you really want something to be extremly visible, <strong class="hl">use the class <code class="hl">hl</code></strong>.</p><p>Links will looks like this into text: <a href="#">This is a link inside a paragraph.</a></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"><h1>Documentation</h1><p>Here a bunch of examples with their source code to make them happen.</p><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>. If you really want something to be extremly visible, <strong class="hl">use the class <code class="hl">hl</code></strong>.</p><p>Links will looks like this into text: <a href="#">This is a link inside a paragraph.</a></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>,
|
||||
|
|
@ -89,7 +89,7 @@
|
|||
<li>item 4</li>
|
||||
</ol>
|
||||
</div>
|
||||
</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><h3>With default gap</h3><div><div class="row"><div class="bg-neutral c12">c12</div></div><div class="row"><div class="bg-neutral c11">c11</div><div class="y c1">c1</div></div><div class="row"><div class="bg-neutral c10">c10</div><div class="y c2">c2</div></div><div class="row"><div class="bg-neutral c9">c9</div><div class="y c3">c3</div></div><div class="row"><div class="bg-neutral c8">c8</div><div class="y c4">c4</div></div><div class="row"><div class="bg-neutral c7">c7</div><div class="y c5">c5</div></div><div class="row"><div class="bg-neutral c6">c6</div><div class="y c6">c6</div></div><div class="row"><div class="bg-neutral c5">c5</div><div class="y c7">c7</div></div><div class="row"><div class="bg-neutral c4">c4</div><div class="y c8">c8</div></div><div class="row"><div class="bg-neutral c3">c3</div><div class="y c9">c9</div></div><div class="row"><div class="bg-neutral c2">c2</div><div class="y c10">c10</div></div><div class="row"><div class="bg-neutral c1">c1</div><div class="y c11">c11</div></div><div class="row"><div class="y c12">c12</div></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><h3>With default gap</h3><div><div class="row"><div class="bg-neutral c12">c12</div></div><div class="row"><div class="bg-neutral c11">c11</div><div class="y c1">c1</div></div><div class="row"><div class="bg-neutral c10">c10</div><div class="y c2">c2</div></div><div class="row"><div class="bg-neutral c9">c9</div><div class="y c3">c3</div></div><div class="row"><div class="bg-neutral c8">c8</div><div class="y c4">c4</div></div><div class="row"><div class="bg-neutral c7">c7</div><div class="y c5">c5</div></div><div class="row"><div class="bg-neutral c6">c6</div><div class="y c6">c6</div></div><div class="row"><div class="bg-neutral c5">c5</div><div class="y c7">c7</div></div><div class="row"><div class="bg-neutral c4">c4</div><div class="y c8">c8</div></div><div class="row"><div class="bg-neutral c3">c3</div><div class="y c9">c9</div></div><div class="row"><div class="bg-neutral c2">c2</div><div class="y c10">c10</div></div><div class="row"><div class="bg-neutral c1">c1</div><div class="y c11">c11</div></div><div class="row"><div class="y c12">c12</div></div></div></div><details><summary>code</summary><pre>
|
||||
<div>
|
||||
<h3>With default gap</h3>
|
||||
<div>
|
||||
|
|
@ -909,7 +909,7 @@
|
|||
</div><br></br>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</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>
|
||||
|
|
@ -921,7 +921,7 @@
|
|||
<div><span>Directly in the column</span><img src="../h/img/brutalism.webp"></img></div>
|
||||
</div>
|
||||
</div>
|
||||
</pre></details></div></div></div><div class="col"><h2 id="icons"><a href="#icons"><i class="ico">§</i></a> icons</h2><div class="row"><div class="card c6"><div class="col start"><h4>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 "Safe" icons should work almost everywhere.</p><p><span>Inserting </span><i class="ico">☎</i> <span>in </span><i class="ico">♂</i> <span>the </span><i class="ico">♀</i> <span>middle </span><i class="ico">ⓧ</i> <span>of </span><i class="ico">©</i> <span>some </span><i class="ico">§</i> <span>text </span><i class="ico">®</i> <span>to </span><i class="ico">⇦</i> <span>check </span><i class="ico">⇧</i> <span>the </span><i class="ico">⇨</i> <span>size. </span><i class="ico">⇩</i> <span>Now </span><i class="ico">♠</i> <span>this </span><i class="ico">♣</i> <span>should </span><i class="ico">♥</i> <span>give </span><i class="ico">♦</i> <span>an </span><i class="ico">♪</i> <span>idea </span><i class="ico">♛</i> <span>about </span><i class="ico">♜</i> <span>the </span><i class="ico">♝</i> <span>size </span><i class="ico">♞</i> <span>relatively </span><i class="ico">♟</i> <span>to </span><i class="ico">☜</i> <span>the </span><i class="ico">☞</i> <span>text. </span><i class="ico">♨</i> <span>Hmmm </span><i class="ico">♭</i> <span>this </span><i class="ico">♯</i> <span>is </span><i class="ico">￥</i> <span>quite </span><i class="ico">￡</i> <span>long </span><i class="ico">￠</i> <span>and </span><i class="ico">❊</i> <span>boring </span><i class="ico">฿</i> <span>to </span><i class="ico">๏</i> <span>write </span><i class="ico">※</i> <span>text </span><i class="ico">₧</i> <span>in </span><i class="ico">₨</i> <span>between </span><i class="ico">₪</i> <span>like </span><i class="ico">€</i> <span>that! </span><i class="ico">№</i> </p></div></div><details><summary>code</summary><pre>
|
||||
<div class="col start">
|
||||
<h4>Safe</h4><i class="ico block big">☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣
|
||||
|
|
@ -966,7 +966,7 @@
|
|||
Just a bunch of a few more unicode icons.
|
||||
</div>
|
||||
</div>
|
||||
</pre></details></div></div></div><div class="col"><h2 id="Forms"><a href="#Forms"><i class="ico">§</i></a> Forms</h2><div class="row"><div class="card c6"><div><label for="example1"></label><input id="example1" placeholder="text input" type="text" /><br /><br /><label for="textarea1"></label><textarea cols="30" id="textarea1" placeholder="textarea" rows="3"></textarea><br /><br /><div class="form-block"><span class="addon info">$</span><input placeholder="with addon" type="text" /></div><br /><br /><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><div class="form-block"><span class="addon">$</span> <input class="smooth" type="text" /></div><pre>... </span><input ...</pre><div class="form-block"><span class="addon">$</span><input class="smooth" type="text" /></div></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><label for="example1"></label><input id="example1" placeholder="text input" type="text" /><br /><br /><label for="textarea1"></label><textarea cols="30" id="textarea1" placeholder="textarea" rows="3"></textarea><br /><br /><div class="form-block"><span class="addon info">$</span><input placeholder="with addon" type="text" /></div><br /><br /><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><div class="form-block"><span class="addon">$</span> <input class="smooth" type="text" /></div><pre>... </span><input ...</pre><div class="form-block"><span class="addon">$</span><input class="smooth" type="text" /></div></div></div><details><summary>code</summary><pre>
|
||||
<div>
|
||||
<input id="example1" placeholder="text input" type="text"></input><br></br>
|
||||
<br></br>
|
||||
|
|
@ -991,7 +991,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</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>
|
||||
|
|
@ -1022,70 +1022,85 @@
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</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="tags"><h2>Tags</h2><ul><li>item-1<span class="tag">tag</span></li><li>item-2<span class="tag info">info</span></li><li>item-3<span class="tag ok">ok</span></li><li>item-4<span class="tag warn">warn</span></li><li>item-5<span class="tag err">err</span></li><li>item-6<span class="tag fatal">fatal</span></li></ul></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="tags"><h2>Tags</h2><ul><li>item-1<span class="tag">tag</span></li><li>item-2<span class="tag hl">hl tag</span></li><li>item-3<span class="tag info">info</span></li><li>item-4<span class="tag ok">ok</span></li><li>item-5<span class="tag warn">warn</span></li><li>item-6<span class="tag err">err</span></li><li>item-7<span class="tag fatal">fatal</span></li></ul></div><details><summary>code</summary><pre>
|
||||
<div id="tags">
|
||||
<h2>Tags</h2>
|
||||
<ul>
|
||||
<li>item-1<span class="tag">tag</span></li>
|
||||
<li>item-2<span class="tag info">info</span></li>
|
||||
<li>item-3<span class="tag ok">ok</span></li>
|
||||
<li>item-4<span class="tag warn">warn</span></li>
|
||||
<li>item-5<span class="tag err">err</span></li>
|
||||
<li>item-6<span class="tag fatal">fatal</span></li>
|
||||
<li>item-2<span class="tag hl">hl tag</span></li>
|
||||
<li>item-3<span class="tag info">info</span></li>
|
||||
<li>item-4<span class="tag ok">ok</span></li>
|
||||
<li>item-5<span class="tag warn">warn</span></li>
|
||||
<li>item-6<span class="tag err">err</span></li>
|
||||
<li>item-7<span class="tag fatal">fatal</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</pre></details></div><div class="card c6"><div id="tags-inline"><h2>Inline Tags</h2><span class="tag">tag</span><span class="tag hl">tag hl</span><span class="tag info">info</span><span class="tag ok">ok</span><span class="tag warn">warn</span><span class="tag err">err</span><span class="tag fatal">fatal</span></div><details><summary>code</summary><pre>
|
||||
<div id="tags-inline">
|
||||
<h2>Inline Tags</h2><span class="tag">tag</span><span class="tag hl">tag hl</span><span class="tag info">info</span><span class="tag ok">ok</span><span class="tag warn">warn</span><span class="tag err">err</span><span class="tag fatal">fatal</span>
|
||||
</div>
|
||||
</pre></details></div></div><div class="row"><div class="card c6"><div id="text-buttons"><h3>Textual buttons</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 class="row"><div class="card c6"><div id="text-buttons"><h3>Textual buttons</h3><a class="tb">tb</a><a class="tb hl">tb hl</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>Textual buttons</h3><a class="tb">tb</a><a class="tb info">tb info</a><a class="tb ok">tb ok</a><a class="tb warn">tb warn</a><a class="tb err">tb err</a><a class="tb fatal">tb fatal</a>
|
||||
<h3>Textual buttons</h3><a class="tb">tb</a><a class="tb hl">tb
|
||||
hl</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>
|
||||
</pre></details></div><div class="card c6"><div id="text-buttons-sizes"><h3>Textual Buttons Sizes</h3><div class="block">Some text: <a class="tb sm info">small button</a><br />Some text: <a class="tb ok">normal ok</a><br />Some text: <a class="tb big warn">big warn</a><br />Some text: <a class="tb huge err">huge err</a></div></div><details><summary>code</summary><pre>
|
||||
</pre></details></div><div class="card c6"><div id="text-buttons-sizes"><h3>Textual Buttons Sizes</h3><div class="block">Some text: <a class="tb sm">small button</a><br />Some text: <a class="tb ok">normal ok</a><br />Some text: <a class="tb big warn">big warn</a><br />Some text: <a class="tb huge err">huge err</a></div></div><details><summary>code</summary><pre>
|
||||
<div id="text-buttons-sizes">
|
||||
<h3>Textual Buttons Sizes</h3>
|
||||
<div class="block">
|
||||
Some text: <a class="tb sm info">small button</a><br></br>
|
||||
Some text: <a class="tb sm">small button</a><br></br>
|
||||
Some text: <a class="tb ok">normal ok</a><br></br>
|
||||
Some text: <a class="tb big warn">big warn</a><br></br>
|
||||
Some text: <a class="tb huge err">huge err</a>
|
||||
</div>
|
||||
</div>
|
||||
</pre></details></div></div><div class="row"><div class="card c6"><div id="buttons"><h2>Classic</h2><a class="btn">btn</a><a class="btn info">btn info</a><a class="btn ok">btn ok</a><a class="btn warn">btn warn</a><a class="btn err">btn err</a><a class="btn fatal">btn fatal</a><pre class="block">&lt;a class=&quot;btn btn-b&quot;&gt;btn-b&lt;/a&gt;</pre><h2>Sizes</h2><a class="btn sm">btn sm</a><a class="btn info">btn info</a><a class="btn big warn">btn big warn</a><a class="btn huge err">btn huge err</a><pre class="block">&lt;a class=&quot;btn sm info&quot;&gt;btn sm info&lt;/a&gt;</pre><div class="row"><div class="col c4 card"><h3>Standardized Width <code>btn std</code></h3><div class="col"><a class="btn std">btn std</a><a class="btn std info">btn std info</a><a class="btn std ok">btn std ok</a><a class="btn std warn">btn std warn</a><a class="btn std err">btn std err</a><a class="btn std fatal">btn std fatal</a></div></div><div class="col c4 card"><h3>Big</h3><div class="col"><a class="btn std big ">btn std</a><a class="btn std big info">btn std info</a><a class="btn std big ok">btn std ok</a><a class="btn std big warn">btn std warn</a></div></div><div class="col c4 card"><h3>Huge</h3><div class="col"><a class="btn std huge">btn std</a><a class="btn std huge info">btn std info</a><a class="btn std huge ok">btn std ok</a></div></div></div></div><details><summary>code</summary><pre>
|
||||
<div id="buttons">
|
||||
<h2>Classic</h2><a class="btn">btn</a><a class="btn info">btn
|
||||
info</a><a class="btn ok">btn ok</a><a class="btn warn">btn
|
||||
warn</a><a class="btn err">btn err</a><a class="btn fatal">btn
|
||||
fatal</a>
|
||||
<pre class="block">&amp;lt;a class=&amp;quot;btn btn-b&amp;quot;&amp;gt;btn-b&amp;lt;/a&amp;gt;</pre>
|
||||
<h2>Sizes</h2><a class="btn sm">btn sm</a><a class="btn info">btn info</a><a class="btn big warn">btn big
|
||||
warn</a><a class="btn huge err">btn huge err</a>
|
||||
<pre class="block">&amp;lt;a class=&amp;quot;btn sm info&amp;quot;&amp;gt;btn sm info&amp;lt;/a&amp;gt;</pre>
|
||||
</pre></details></div></div><div class="row"><div class="card c6"><div class="col"><h2>Buttons</h2><div class="row"><div class="card"><h3>Classic</h3><a class="btn">btn</a><a class="btn hl">btn hl</a><a class="btn info">btn info</a><a class="btn ok">btn ok</a><a class="btn warn">btn warn</a><a class="btn err">btn err</a><a class="btn fatal">btn fatal</a></div><div class="card"><h3>Sizes</h3><a class="btn sm">btn sm</a><a class="btn info">btn info</a><a class="btn big warn">btn big warn</a><a class="btn huge err">btn huge err</a></div></div><div class="row"><div class="col c4 card"><h3>Standardized Width <code>btn std</code></h3><div class="col"><a class="btn std">btn std</a><a class="btn std hl">btn std hl</a><a class="btn std info">btn std info</a><a class="btn std ok">btn std ok</a><a class="btn std warn">btn std warn</a><a class="btn std err">btn std err</a><a class="btn std fatal">btn std fatal</a></div></div><div class="col card c4"><h3>Big</h3><div class="col big"><a class="btn std">btn std</a><a class="btn std hl">btn std hl</a><a class="btn std info">btn std info</a><a class="btn std ok">btn std ok</a><a class="btn std warn">btn std warn</a><a class="btn std err">btn std err</a><a class="btn std fatal">btn std fatal</a></div></div><div class="col card c4"><h3>Huge</h3><div class="col huge"><a class="btn std">btn std</a><a class="btn std hl">btn std hl</a><a class="btn std info">btn std info</a><a class="btn std ok">btn std ok</a><a class="btn std warn">btn std warn</a><a class="btn std err">btn std err</a><a class="btn std fatal">btn std fatal</a></div></div></div></div><details><summary>code</summary><pre>
|
||||
<div class="col">
|
||||
<h2>Buttons</h2>
|
||||
<div class="row">
|
||||
<div class="card">
|
||||
<h3>Classic</h3><a class="btn">btn</a><a class="btn hl">btn
|
||||
hl</a><a class="btn info">btn info</a><a class="btn ok">btn
|
||||
ok</a><a class="btn warn">btn warn</a><a class="btn err">btn err</a><a class="btn fatal">btn fatal</a>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Sizes</h3><a class="btn sm">btn sm</a><a class="btn info">btn info</a><a class="btn big warn">btn big
|
||||
warn</a><a class="btn huge err">btn huge err</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col c4 card">
|
||||
<h3>Standardized Width <code>btn std</code></h3>
|
||||
<div class="col">
|
||||
<a class="btn std">btn std</a><a class="btn std info">btn
|
||||
std info</a><a class="btn std ok">btn std ok</a><a class="btn std warn">btn std warn</a><a class="btn std err">btn
|
||||
<a class="btn std">btn std</a><a class="btn std hl">btn
|
||||
std hl</a><a class="btn std info">btn std
|
||||
info</a><a class="btn std ok">btn std ok</a><a class="btn std warn">btn std warn</a><a class="btn std err">btn
|
||||
std err</a><a class="btn std fatal">btn std fatal</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col c4 card">
|
||||
<div class="col card c4">
|
||||
<h3>Big</h3>
|
||||
<div class="col">
|
||||
<a class="btn std big">btn std</a><a class="btn std big info">btn std info</a><a class="btn std big ok">btn std ok</a><a class="btn std big warn">btn std warn</a>
|
||||
<div class="col big">
|
||||
<a class="btn std">btn std</a><a class="btn std hl">btn
|
||||
std hl</a><a class="btn std info">btn std
|
||||
info</a><a class="btn std ok">btn std ok</a><a class="btn std warn">btn std warn</a><a class="btn std err">btn
|
||||
std err</a><a class="btn std fatal">btn std fatal</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col c4 card">
|
||||
<div class="col card c4">
|
||||
<h3>Huge</h3>
|
||||
<div class="col">
|
||||
<a class="btn std huge">btn std</a><a class="btn std huge info">btn std info</a><a class="btn std huge ok">btn std ok</a>
|
||||
<div class="col huge">
|
||||
<a class="btn std">btn std</a><a class="btn std hl">btn
|
||||
std hl</a><a class="btn std info">btn std
|
||||
info</a><a class="btn std ok">btn std ok</a><a class="btn std warn">btn std warn</a><a class="btn std err">btn
|
||||
std err</a><a class="btn std fatal">btn std fatal</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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.
|
||||
</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.
|
||||
|
|
@ -1125,7 +1140,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</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">
|
||||
|
|
@ -1133,7 +1148,7 @@
|
|||
</div>
|
||||
</nav><button class="btn-close btn sm">×</button>
|
||||
</div>
|
||||
</pre></details></div></div></div><div class="col"><h2 id="Footer"><a href="#Footer"><i class="ico">§</i></a> Footer</h2><div class="row"><div class="card c6"><footer><div class="container"><p>Made by <a href="https://yannesposito.com">Yann Esposito</a></p></div></footer><details><summary>code</summary><pre>
|
||||
</pre></details></div></div></div><div class="col"><h2 id="Footer"><a href="#Footer"><i class="ico">[§]</i></a> Footer</h2><div class="row"><div class="card c6"><footer><div class="container"><p>Made by <a href="https://yannesposito.com">Yann Esposito</a></p></div></footer><details><summary>code</summary><pre>
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p>Made by <a href="https://yannesposito.com">Yann
|
||||
|
|
|
|||
|
|
@ -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" style="background:url('h/img/brutalism.webp')"><div class="row middle"><div class="col c3"></div><div class="c6 block bg-neutral"><div class="col"><h1 class="tight huge">BRUT</h1><h4>A Brutalist and Minimalist CSS Framework</h4><p>This CSS framework is ideal to be used for <strong>private admin interfaces</strong>.</p><p> Just by the look of it, it will scream: <span class="hl">THIS IS NOT FOR NON-TECHNICAL PEOPLE!!!</span></p></div></div><div class="col c3"></div></div></div><div class="row"><div class="col card"><h3>Docs</h3><p>A few quick examples to show every components. This should be quick and straightforward.</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>
|
||||
<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 gapless"><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="col"><div class="hero" style="background: url(h/img/brutalism.webp)"><div class="container col middle"><div class="row middle"><div class="c3"></div><div class="c6 block bg-neutral"><div class="col"><h1 class="tight huge">BRUT</h1><h4>A Brutalist and Minimalist CSS Framework</h4><p>This CSS framework is ideal to be used for <strong>private admin interfaces</strong>.</p><p> Just by the look of it, it will scream: <span class="hl">THIS IS NOT FOR NON-TECHNICAL PEOPLE!!!</span></p></div></div><div class="c3"></div></div></div></div><div class="container row"><div class="col card"><h3>Docs</h3><p>A few quick examples to show every components. This should be quick and straightforward.</p><p>This CSS framework makes its best to respect some expected composability accross classes. Here are a few examples:</p><div class="fill card"><p>With headings</p><h3>this is a normal <code>h3</code></h3><h3 class="tight big">this is a <code>h3</code> with <code>big</code></h3><h3 class="tight y">this is a <code>h3</code> with <code>y</code>for yellow</h3><h3 class="tight big y">this is a <code>h3</code> with both <code>big</code> and <code>y</code>.</h3><br /><h3 class="tight">this contains a <code>hl</code> <span class="hl">HL</span></h3><h3 class="tight hl">this a <code>h3</code> with <code>hl</code></h3></div><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,6 +11,7 @@
|
|||
.tb:hover::before,.tb:hover::after { opacity: 1; }
|
||||
.tb:active:before { content: "❰"; }
|
||||
.tb:active:after { content: "❱"; }
|
||||
.tb.hl { border: none; }
|
||||
|
||||
.btn {
|
||||
border: solid 2px var(--fg);
|
||||
|
|
@ -35,8 +36,6 @@
|
|||
}
|
||||
|
||||
.btn.sm { padding: 0.5rem 1rem; }
|
||||
.btn.std { width: 12rem; }
|
||||
.btn.big.std { width: 20rem; }
|
||||
.btn.huge.std { width: 24rem; }
|
||||
.btn.std { width: 12em; }
|
||||
|
||||
.tag { padding: 2px; font-size: 0.875rem; border: solid 1px var(--fg); margin: 0 1px; }
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
--accent: var(--b);
|
||||
}
|
||||
|
||||
body.soft { filter: brightness(95%) sepia(5%);}
|
||||
body.soft { filter: brightness(85%) sepia(25%);}
|
||||
html { background: var(--bg); color: var(--fg); }
|
||||
.neutral { color: var(--n0); }
|
||||
.bg-neutral { background: var(--nl); }
|
||||
|
|
@ -34,19 +34,27 @@ p > a, li > a { color: var(--accent); }
|
|||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body { filter: invert(100%) hue-rotate(180deg);}
|
||||
body.soft { filter: brightness(85%) sepia(5%) invert(100%) hue-rotate(180deg);}
|
||||
body.soft { filter: brightness(85%) sepia(25%) invert(100%) hue-rotate(180deg);}
|
||||
img,.fill { filter: brightness(80%) invert(100%) ; }
|
||||
.msg, .btn, .b, .info, .g, .ok, .y, .warn, .r, .err, .m, .fatal, .o, .v, .c,.alert {
|
||||
filter: brightness(90%) invert(100%) hue-rotate(180deg);
|
||||
}
|
||||
}
|
||||
.hl { background: var(--fg); color: var(--bg); }
|
||||
.msg, .btn { background-color: var(--bg2) }
|
||||
.b, .info { color: var(--bg); background-color: var(--b); border-color: var(--fg); }
|
||||
.g, .ok { color: var(--bg); background-color: var(--g); border-color: var(--fg); }
|
||||
.y, .warn { color: var(--bg); background-color: var(--y); border-color: var(--fg); }
|
||||
.r, .err { color: var(--bg); background-color: var(--r); border-color: var(--fg); }
|
||||
.m, .fatal { color: var(--bg); background-color: var(--m); border-color: var(--fg); }
|
||||
.o { color: var(--bg); background-color: var(--o); border-color: var(--fg); }
|
||||
.v { color: var(--bg); background-color: var(--v); border-color: var(--fg); }
|
||||
.c { color: var(--bg); background-color: var(--c); border-color: var(--fg); }
|
||||
|
||||
.msg, .btn { background-color: var(--bg2); color: var(--fg); }
|
||||
.hl, .msg, .btn, .b, .info, .g, .ok, .y, .warn, .r, .err, .m, .fatal, .o, .v, .c,.alert {
|
||||
border-color: var(--fg);
|
||||
}
|
||||
.hl, .b, .info, .g, .ok, .y, .warn, .r, .err, .m, .fatal, .o, .v, .c,.alert {
|
||||
color: var(--bg);
|
||||
}
|
||||
|
||||
.hl { background-color: var(--fg); }
|
||||
.b, .info { background-color: var(--b); }
|
||||
.g, .ok { background-color: var(--g); }
|
||||
.y, .warn { background-color: var(--y); }
|
||||
.r, .err { background-color: var(--r); }
|
||||
.m, .fatal { background-color: var(--m); }
|
||||
.o { background-color: var(--o); }
|
||||
.v { background-color: var(--v); }
|
||||
.c { background-color: var(--c); }
|
||||
|
|
|
|||
|
|
@ -28,8 +28,7 @@ button ~ .central {
|
|||
|
||||
.hero {
|
||||
padding: 2rem;
|
||||
border: double 1rem;
|
||||
}
|
||||
|
||||
.fill { flex-grow: 1; }
|
||||
.push { justify-self: flex-end; margin-top: auto;}
|
||||
footer,.push { justify-self: flex-end; margin-top: auto;}
|
||||
|
|
|
|||
|
|
@ -44,13 +44,14 @@ ol {
|
|||
padding-inline-start: 2rem;
|
||||
}
|
||||
ul > li::marker { font-size: 1.5rem; }
|
||||
ul { padding: 0; margin-left: 1.5rem; }
|
||||
summary:hover { cursor: pointer; background: var(--bg2);}
|
||||
table { font-size: 1rem; }
|
||||
|
||||
.sm { font-size: 0.75rem; line-height: 0.65rem; }
|
||||
.big { font-size: 2rem; line-height: 2.8rem;}
|
||||
.huge { font-size: 3rem; line-height: 4.1rem;}
|
||||
.hl { border: solid 1px;
|
||||
.hl { border: solid 1px var(--fg);
|
||||
padding: 1px;
|
||||
}
|
||||
/* doc are for long text to read */
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ h1, h2, h3, h4, h5, h6 {
|
|||
a {
|
||||
color: var(--bg);
|
||||
}
|
||||
&.hl { padding: 0.5rem; }
|
||||
}
|
||||
|
||||
.tight { margin: 0; }
|
||||
|
|
@ -20,3 +21,9 @@ h3 { background: var(--n1); }
|
|||
h4 { color: var(--fg); background: var(--nl); }
|
||||
h5 { color: var(--fg); background: var(--bg2); }
|
||||
h6 { color: var(--fg); }
|
||||
h1:before { content: "≡ "; opacity: 0.3; }
|
||||
h2:before { content: "= "; opacity: 0.3; }
|
||||
h3:before { content: "- "; opacity: 0.3; }
|
||||
h4:before { content: ": "; opacity: 0.3; }
|
||||
h5:before { content: "⋅ "; opacity: 0.3; }
|
||||
h6 { padding-left: 2rem; }
|
||||
|
|
|
|||
Loading…
Reference in a new issue