From 4f35c7e0a21c5d6d96a28769c5f25f723f0996d2 Mon Sep 17 00:00:00 2001 From: "Yann Esposito (Yogsototh)" Date: Tue, 27 Sep 2022 16:15:51 +0200 Subject: [PATCH] push --- brut.min.css | 2 +- h/docs.html | 66 +++++++++++++++++++++++++++------------------ index.html | 6 ++--- src/components.less | 5 +++- 4 files changed, 48 insertions(+), 31 deletions(-) diff --git a/brut.min.css b/brut.min.css index bc6b0b8..e0ab894 100644 --- a/brut.min.css +++ b/brut.min.css @@ -1 +1 @@ -/* Copyright 2022 Yann Esposito; MIT licensed */:root{--bg:#fff;--fg:#000;--bg2:#eee;--darken:rgba(0, 0, 0, 0.1);--cn-1:#d9d9d9;--cn0:#999;--cn1:#8c8c8c;--cn2:#808080;--ci-1:#b8d9fa;--ci0:#59d;--ci1:#408cd9;--ci2:#2a7fd5;--co-1:#7fdd7f;--co0:#494;--co1:#3c873c;--co2:#347634;--cw-1:#ffd24d;--cw0:#c90;--cw1:#b38600;--cw2:#997300;--ce-1:#fa9595;--ce0:#d33;--ce1:#d32323;--ce2:#bd2020;--shadow:rgba(0, 0, 0, 0.75)}@media(prefers-color-scheme:dark){:root{--bg:#000;--fg:#ccc;--bg2:#333;--darken:rgba(255, 255, 255, 0.1);--cn-1:#666666;--cn0:#808080;--cn1:#8c8c8c;--cn2:#999999;--ci-1:#2266aa;--ci0:#2a7fd5;--ci1:#408cd9;--ci2:#4b99e7;--co-1:#255225;--co0:#347634;--co1:#3c873c;--co2:#39a439;--cw-1:#664d00;--cw0:#997300;--cw1:#b38600;--cw2:#cc9900;--ce-1:#921818;--ce0:#bd2020;--ce1:#d32323;--ce2:#e92727;--shadow:rgba(128, 128, 128, 0.3)}}.neutral{color:var(--cn-0)}.bg-neutral{background:var(--cn-1)}.info{color:var(--ci0)}.bg-info{background:var(--ci-1)}.ok{color:var(--co0)}.bg-ok{background:var(--co-1)}.warn{color:var(--cw0)}.bg-warn{background:var(--cw-1)}.err{color:var(--ce0)}.bg-err{background:var(--ce-1)}a{color:var(--fg)}html{font-size:12px}body,textarea,input,select{background:var(--bg);color:var(--fg);border-radius:0;font-family:Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;font-size:1rem;margin:0}*{box-sizing:border-box}.addon,.sm,.nav,textarea,input,select{outline:0;font-size:10px}.btn,.nav a{text-decoration:none}.container{margin:0 20px;width:auto}@media(min-width:1310px){.container{margin:auto;width:1270px}}pre{background:var(--bg2);padding:10px}code{background:var(--darken);border:solid 1px var(--darken);padding:1px}img{max-width:100%}.big{font-size:2em}.huge{font-size:3em}.tb{font-weight:700;cursor:pointer;padding:2px}.tb:before,.tb:after{opacity:.3}.tb:before{content:"〈"}.tb:after{content:"〉"}.tb:hover:before,.tb:hover:after{opacity:1}.tb:active:before{content:"《"}.tb:active:after{content:"》"}.tb.info{color:var(--ci0)}.tb.info:hover{color:var(--ci1)}.tb.info:active{color:var(--ci2)}.tb.ok{color:var(--co0)}.tb.ok:hover{color:var(--co1)}.tb.ok:active{color:var(--co2)}.tb.warn{color:var(--cw0)}.tb.warn:hover{color:var(--cw1)}.tb.warn:active{color:var(--cw2)}.tb.err{color:var(--ce0)}.tb.err:hover{color:var(--ce1)}.tb.err:active{color:var(--ce2)}.btn{background:var(--cn0);border:solid 2px #000;color:#fff;font-weight:700;cursor:pointer;display:inline-block;margin:2px 0;padding:1rem 2rem;box-shadow:4px 4px var(--shadow);text-align:center}.btn:hover{background:var(--cn1);color:#fff}.btn:active,.btn:focus{color:#fff;background:var(--cn2);box-shadow:1px 1px #000;position:relative;top:3px;left:3px}.btn.info{background:var(--ci0)}.btn.info:hover{background:var(--ci1)}.btn.info:active,.btn.info:focus{background:var(--ci2)}.btn.ok{background:var(--co0)}.btn.ok:hover{background:var(--co1)}.btn.ok:active,.btn.ok:focus{background:var(--co2)}.btn.warn{background:var(--cw0)}.btn.warn:hover{background:var(--cw1)}.btn.warn:active,.btn.warn:focus{background:var(--cw2)}.btn.err{background:var(--ce0)}.btn.err:hover{background:var(--ce1)}.btn.err:active,.btn.err:focus{background:var(--ce2)}.btn.sm{padding:.5rem 1rem}.btn.std{width:12rem}.btn.big.std{width:20rem}.btn.huge.std{width:24rem}.row{display:flex;justify-content:space-evenly;align-items:stretch;flex-wrap:wrap}.col{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;flex-wrap:wrap}.col>*,.row>*{padding:5px}.col.no-padding>*,.row.no-padding>*{padding:0}.table,.c12{width:100%}.c11{width:91.66%}.c10{width:83.33%}.c9{width:75%}.c8{width:66.66%}.c7{width:58.33%}.c6{width:50%}.c5{width:41.66%}.c4{width:33.33%}.c3{width:25%}.c2{width:16.66%}.c1{width:8.33%}@media(max-width:870px){.row .col{width:100%}}.card,.block{padding:5px;border:solid 2px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start}.col>.card,.col>.block{height:100%}.row>.card,.row>.block{width:100%}.block{border-color:transparent}.central{display:flex;align-items:center;justify-content:center;background-size:cover;min-height:100vh}button~.central{min-height:calc(100vh - 50px)}.hero{padding:2rem;outline-style:double;outline-width:.5rem;margin:1rem}h1,h2,h3,h4,h5,h6{display:table;padding:.25rem;font-size:1rem}h1{font-size:2rem}h1:before,h2:before,h3:before,h4:before,h5:before,h6:before{opacity:.3;font-size:1rem}h1:before{content:"# "}h2:before{content:"## "}h3:before{content:"### "}h4:before{content:"#### "}h5:before{content:"##### "}h6:before{content:"###### "}.ico{font:20px Arial Unicode MS,Lucida Sans Unicode;line-height:10px;vertical-align:top}label>*{display:inline}form>*{display:block;margin-bottom:10px}textarea,input,select{border:2px solid;padding:8px}textarea,input[type=text]{-webkit-appearance:none;width:13em;outline:0;border:2px solid}.addon{padding:8px 12px;border-width:2px;border-style:solid none solid solid}textarea:focus,input:focus,select:focus{border-color:var(--ci1)}.nav,.nav .current,.nav a:hover{background:#000;color:#fff}.nav{height:50px;padding:11px 0 15px}.nav a{color:#aaa;padding-right:1em;position:relative;top:-1px}.nav .pagename{font-weight:700;font-size:22px;top:1px}.btn.btn-close{background:#000;color:#aaa;float:right;font-size:25px;margin:-54px 7px;display:none}.btn.btn-close:hover{color:#fff}@media(max-width:500px){.btn.btn-close{display:block}.nav{overflow:hidden}.pagename{margin-top:-11px}.nav:active,.nav:focus{height:auto}.nav div:before{background:var(--fg);border-bottom:10px double;border-top:3px solid;content:'';float:right;height:4px;position:relative;right:3px;top:14px;width:20px}.nav a{display:block;padding:.5em 0;width:50%}}.table th,.table td{padding:.5em;text-align:left}.table tbody>:nth-child(2n-1){background:var(--bg2)}.msg{background:var(--cn-1);border-left:5px solid var(--cn0);padding:1.5em}.msg.info{color:var(--fg);background:var(--ci-1);border-color:var(--ci0)}.msg.ok{color:var(--fg);background:var(--co-1);border-color:var(--co0)}.msg.warn{color:var(--fg);background:var(--cw-1);border-color:var(--cw0)}.msg.err{color:var(--fg);background:var(--ce-1);border-color:var(--ce0)}.msg.black,.msg.black *{background:#333;border-color:#000;color:#fff}.msg.attention,.msg.attention *{background:#b74fde;border-color:#9311bb;color:#fff}.msg.fatal,.msg.fatal *{background:#df1023;border-color:#ba0000;color:#fff} \ No newline at end of file +/* Copyright 2022 Yann Esposito; MIT licensed */:root{--bg:#fff;--fg:#000;--bg2:#eee;--darken:rgba(0, 0, 0, 0.1);--cn-1:#d9d9d9;--cn0:#999;--cn1:#8c8c8c;--cn2:#808080;--ci-1:#b8d9fa;--ci0:#59d;--ci1:#408cd9;--ci2:#2a7fd5;--co-1:#7fdd7f;--co0:#494;--co1:#3c873c;--co2:#347634;--cw-1:#ffd24d;--cw0:#c90;--cw1:#b38600;--cw2:#997300;--ce-1:#fa9595;--ce0:#d33;--ce1:#d32323;--ce2:#bd2020;--shadow:rgba(0, 0, 0, 0.75)}@media(prefers-color-scheme:dark){:root{--bg:#000;--fg:#ccc;--bg2:#333;--darken:rgba(255, 255, 255, 0.1);--cn-1:#666666;--cn0:#808080;--cn1:#8c8c8c;--cn2:#999999;--ci-1:#2266aa;--ci0:#2a7fd5;--ci1:#408cd9;--ci2:#4b99e7;--co-1:#255225;--co0:#347634;--co1:#3c873c;--co2:#39a439;--cw-1:#664d00;--cw0:#997300;--cw1:#b38600;--cw2:#cc9900;--ce-1:#921818;--ce0:#bd2020;--ce1:#d32323;--ce2:#e92727;--shadow:rgba(128, 128, 128, 0.3)}}.neutral{color:var(--cn-0)}.bg-neutral{background:var(--cn-1)}.info{color:var(--ci0)}.bg-info{background:var(--ci-1)}.ok{color:var(--co0)}.bg-ok{background:var(--co-1)}.warn{color:var(--cw0)}.bg-warn{background:var(--cw-1)}.err{color:var(--ce0)}.bg-err{background:var(--ce-1)}a{color:var(--fg)}html{font-size:12px}body,textarea,input,select{background:var(--bg);color:var(--fg);border-radius:0;font-family:Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;font-size:1rem;margin:0}*{box-sizing:border-box}.addon,.sm,.nav,textarea,input,select{outline:0;font-size:10px}.btn,.nav a{text-decoration:none}.container{margin:0 20px;width:auto}@media(min-width:1310px){.container{margin:auto;width:1270px}}pre{background:var(--bg2);padding:10px}code{background:var(--darken);border:solid 1px var(--darken);padding:1px}img{max-width:100%}.big{font-size:2em}.huge{font-size:3em}.tb{font-weight:700;cursor:pointer;padding:2px}.tb:before,.tb:after{opacity:.3}.tb:before{content:"〈"}.tb:after{content:"〉"}.tb:hover:before,.tb:hover:after{opacity:1}.tb:active:before{content:"《"}.tb:active:after{content:"》"}.tb.info{color:var(--ci0)}.tb.info:hover{color:var(--ci1)}.tb.info:active{color:var(--ci2)}.tb.ok{color:var(--co0)}.tb.ok:hover{color:var(--co1)}.tb.ok:active{color:var(--co2)}.tb.warn{color:var(--cw0)}.tb.warn:hover{color:var(--cw1)}.tb.warn:active{color:var(--cw2)}.tb.err{color:var(--ce0)}.tb.err:hover{color:var(--ce1)}.tb.err:active{color:var(--ce2)}.btn{background:var(--cn0);border:solid 2px #000;color:#fff;font-weight:700;cursor:pointer;display:inline-block;margin:2px 0;padding:1rem 2rem;box-shadow:4px 4px var(--shadow);text-align:center}.btn:hover{background:var(--cn1);color:#fff}.btn:active,.btn:focus{color:#fff;background:var(--cn2);box-shadow:1px 1px #000;position:relative;top:3px;left:3px}.btn.info{background:var(--ci0)}.btn.info:hover{background:var(--ci1)}.btn.info:active,.btn.info:focus{background:var(--ci2)}.btn.ok{background:var(--co0)}.btn.ok:hover{background:var(--co1)}.btn.ok:active,.btn.ok:focus{background:var(--co2)}.btn.warn{background:var(--cw0)}.btn.warn:hover{background:var(--cw1)}.btn.warn:active,.btn.warn:focus{background:var(--cw2)}.btn.err{background:var(--ce0)}.btn.err:hover{background:var(--ce1)}.btn.err:active,.btn.err:focus{background:var(--ce2)}.btn.sm{padding:.5rem 1rem}.btn.std{width:12rem}.btn.big.std{width:20rem}.btn.huge.std{width:24rem}.row{display:flex;justify-content:space-evenly;align-items:stretch;flex-wrap:wrap}.col{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;flex-wrap:wrap}.col>*,.row>*{padding:5px}.col.no-padding>*,.row.no-padding>*{padding:0}.table,.c12{width:100%}.c11{width:91.66%}.c10{width:83.33%}.c9{width:75%}.c8{width:66.66%}.c7{width:58.33%}.c6{width:50%}.c5{width:41.66%}.c4{width:33.33%}.c3{width:25%}.c2{width:16.66%}.c1{width:8.33%}@media(max-width:870px){.row .col{width:100%}}.card,.block{padding:5px;border:solid 2px;display:flex;flex-direction:column;justify-content:start;align-items:flex-start}.col>.card,.col>.block{height:100%}.row>.card,.row>.block{width:100%}.card{border-color:var(--cn-1)}.block{border-color:transparent}.central{display:flex;align-items:center;justify-content:center;background-size:cover;min-height:100vh}button~.central{min-height:calc(100vh - 50px)}.hero{padding:2rem;outline-style:double;outline-width:.5rem;margin:1rem}.push{justify-self:flex-end;margin-top:auto}h1,h2,h3,h4,h5,h6{display:table;padding:.25rem;font-size:1rem}h1{font-size:2rem}h1:before,h2:before,h3:before,h4:before,h5:before,h6:before{opacity:.3;font-size:1rem}h1:before{content:"# "}h2:before{content:"## "}h3:before{content:"### "}h4:before{content:"#### "}h5:before{content:"##### "}h6:before{content:"###### "}.ico{font:20px Arial Unicode MS,Lucida Sans Unicode;line-height:10px;vertical-align:top}label>*{display:inline}form>*{display:block;margin-bottom:10px}textarea,input,select{border:2px solid;padding:8px}textarea,input[type=text]{-webkit-appearance:none;width:13em;outline:0;border:2px solid}.addon{padding:8px 12px;border-width:2px;border-style:solid none solid solid}textarea:focus,input:focus,select:focus{border-color:var(--ci1)}.nav,.nav .current,.nav a:hover{background:#000;color:#fff}.nav{height:50px;padding:11px 0 15px}.nav a{color:#aaa;padding-right:1em;position:relative;top:-1px}.nav .pagename{font-weight:700;font-size:22px;top:1px}.btn.btn-close{background:#000;color:#aaa;float:right;font-size:25px;margin:-54px 7px;display:none}.btn.btn-close:hover{color:#fff}@media(max-width:500px){.btn.btn-close{display:block}.nav{overflow:hidden}.pagename{margin-top:-11px}.nav:active,.nav:focus{height:auto}.nav div:before{background:var(--fg);border-bottom:10px double;border-top:3px solid;content:'';float:right;height:4px;position:relative;right:3px;top:14px;width:20px}.nav a{display:block;padding:.5em 0;width:50%}}.table th,.table td{padding:.5em;text-align:left}.table tbody>:nth-child(2n-1){background:var(--bg2)}.msg{background:var(--cn-1);border-left:5px solid var(--cn0);padding:1.5em}.msg.info{color:var(--fg);background:var(--ci-1);border-color:var(--ci0)}.msg.ok{color:var(--fg);background:var(--co-1);border-color:var(--co0)}.msg.warn{color:var(--fg);background:var(--cw-1);border-color:var(--cw0)}.msg.err{color:var(--fg);background:var(--ce-1);border-color:var(--ce0)}.msg.black,.msg.black *{background:#333;border-color:#000;color:#fff}.msg.attention,.msg.attention *{background:#b74fde;border-color:#9311bb;color:#fff}.msg.fatal,.msg.fatal *{background:#df1023;border-color:#ba0000;color:#fff} \ No newline at end of file diff --git a/h/docs.html b/h/docs.html index 53acf3e..5ce4966 100644 --- a/h/docs.html +++ b/h/docs.html @@ -82,7 +82,7 @@
-

Standardized Width btn std

+

Standardized Width btn std

btn std btn std info @@ -190,9 +190,17 @@ Four
- +
- 
<nav class="nav" tabindex="-1" onclick="this.focus()">
    <div class="container">
        <a class="pagename current" href="#">BRUT</a>
        <a href="#">One</a>
        <a href="#">Two</a> 
        <a href="#">Three</a>
    </div>
</nav>
<button class="btn-close btn btn-sm">×</button>
+ 
<nav class="nav" tabindex="-1" onclick="this.focus()">
+    <div class="container">
+        <a class="pagename current" href="#">BRUT</a>
+        <a href="#">One</a>
+        <a href="#">Two</a>
+        <a href="#">Three</a>
+    </div>
+</nav>
+<button class="btn-close btn sm">×</button>
@@ -200,27 +208,27 @@
#Widgets SoldRevenue (£)Profit (£)
15102
210204
35001000200


<table class="table">
-					<thead>
-					<tr>
-					<th>#</th>
-					<th>Widgets Sold</th>
-					</tr>
-					</thead>
-					<tbody>
-					<tr>
-					<td>1</td>
-					<td>5</td>
-					</tr>
-					<tr>
-					<td>2</td>
-					<td>10</td>
-					</tr>
-					<tr>
-					<td>3</td>
-					<td>500</td>
-					</tr>
-					</tbody>
-					</table>
+  <thead>
+    <tr>
+      <th>#</th>
+      <th>Widgets Sold</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>1</td>
+      <td>5</td>
+    </tr>
+    <tr>
+      <td>2</td>
+      <td>10</td>
+    </tr>
+    <tr>
+      <td>3</td>
+      <td>500</td>
+    </tr>
+  </tbody>
+</table>
@@ -233,7 +241,7 @@ ☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € № -
+
The "Android Safe" icons work everywhere, tested on hundreds of devices.
@@ -244,7 +252,13 @@ ✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩ -
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.)
+
+ 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.) +
diff --git a/index.html b/index.html index 7b1ba45..061a1e8 100644 --- a/index.html +++ b/index.html @@ -44,7 +44,7 @@

Don't worry it will be quick and straightforward.

Just a test

- Docs + Docs
@@ -53,7 +53,7 @@

Download BRUT

- Download + Download
@@ -62,7 +62,7 @@

To give you an idea.

- Examples + Examples
diff --git a/src/components.less b/src/components.less index 5eeb6b2..f941c2f 100644 --- a/src/components.less +++ b/src/components.less @@ -4,12 +4,13 @@ border: solid 2px; display: flex; flex-direction: column; - justify-content: space-between; + justify-content: start; align-items: flex-start; } .col > .card, .col > .block { height: 100%; } .row > .card, .row > .block { width: 100%; } +.card { border-color: var(--cn-1); } .block { border-color: transparent; } @@ -33,3 +34,5 @@ button ~ .central { outline-width: 0.5rem; margin: 1rem; } + +.push { justify-self: flex-end; margin-top: auto;}