From 19641e9561f69e90a5935149e6de2e9dd1fe6343 Mon Sep 17 00:00:00 2001 From: "Yann Esposito (Yogsototh)" Date: Mon, 24 Oct 2022 17:05:36 +0200 Subject: [PATCH] Added better size rules --- .gitignore | 1 + bb/brut/site.clj | 25 +++++++++++++++++-------- brut.min.css | 2 +- h/docs.html | 24 +++++++++++++++++------- src/buttons.less | 2 +- src/colors.less | 16 ++++++++-------- src/components.less | 1 + src/forms.less | 7 +++++-- src/grid.less | 4 ++-- 9 files changed, 53 insertions(+), 29 deletions(-) diff --git a/.gitignore b/.gitignore index c743775..f795e72 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,4 @@ /sass/.sass-cache/ _build/ .direnv/ +.clj-kondo diff --git a/bb/brut/site.clj b/bb/brut/site.clj index 7207406..fb28b61 100644 --- a/bb/brut/site.clj +++ b/bb/brut/site.clj @@ -318,12 +318,19 @@ messages-section {:title "Messages" :cards [messages]} forms [:div - [:input {:class "neutral", :type "text", :placeholder "input"}] + [:label {:for "example1"}] + [:input#example1 {:type "text" :placeholder "text input"}] + [:br] + [:br] + [:label {:for "textarea1"}] + [:textarea#textarea1 {:cols "30" :rows "3", :placeholder "textarea"}] + [:br] + [:br] + [:div.form-block + [:span {:class "addon info"} "$"] + [:input {:type "text" :placeholder "with addon"}]] [:br] - [:textarea {:class "neutral", :rows "3", :placeholder "textarea"}] [:br] - [:span {:class "addon bg-info"} "$"] - [:input {:type "text"}] [:div {:class "msg"} [:strong "Be careful with addons!"] " If you do not want a space between the addon and the input make sure " @@ -331,11 +338,13 @@ [:code ""] " and " [:code ""]" tags. Example: " [:pre "... " [:span.hl " "] "a,li>a{color:var(--accent)}.msg,.btn{background-color:var(--bg2)}.b,.info{color:var(--bg);background-color:var(--b)}.g,.ok{color:var(--bg);background-color:var(--g)}.y,.warn{color:var(--bg);background-color:var(--y)}.r,.err{color:var(--bg);background-color:var(--r)}.m,.fatal{color:var(--bg);background-color:var(--m)}.o{color:var(--bg);background-color:var(--o)}.v{color:var(--bg);background-color:var(--v)}.c{color:var(--bg);background-color:var(--c)}html,body{font-size:12px;line-height:1.5em;min-height:100vh;margin:0;padding:0;border:0;outline:0}*{box-sizing:border-box}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}img{max-width:100%}.addon,.sm,.nav,textarea,input,select{outline:0;line-height:1rem}.container{padding:0 20px;width:100%}@media(min-width:1380px){.container{margin:auto;max-width:1270px}}pre{background:var(--bg2);padding:10px;overflow:scroll}code{background:var(--darken);border:solid 1px var(--darken);padding:1px}blockquote{margin:1rem 0;padding-left:1rem;border-left:solid 1rem var(--nl)}ul{list-style-type:square;list-style-position:outside;padding-inline-start:1.5rem}ol{padding-inline-start:2rem}ul>li::marker{font-size:1.5rem}summary:hover{cursor:pointer;background:var(--bg2)}table{font-size:1rem}.sm{font-size:.75rem;line-height:.65rem}.big{font-size:2rem;line-height:2.8rem}.huge{font-size:3rem;line-height:4.1rem}.hl{background:var(--fg);color:var(--bg);border:solid 1px;padding:1px}.doc{max-width:65ch;font-size:1.25rem;font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif;text-align:justify;line-height:1.5em}.doc p{text-indent:3rem}.tb,.btn,.tag{text-decoration:none;display:inline-block;text-align:center}.tb{font-weight:700;cursor:pointer;padding:2px;vertical-align:baseline}.tb:before,.tb:after{opacity:.3;display:inline-block}.tb:before{content:"❬"}.tb:after{content:"❭"}.tb:hover{text-decoration:underline}.tb:hover::before,.tb:hover::after{opacity:1}.tb:active:before{content:"❰"}.tb:active:after{content:"❱"}.btn{border:solid 2px var(--fg);font-weight:700;cursor:pointer;display:inline-block;margin:0 4px 4px 0;padding:1rem 2rem;box-shadow:4px 4px var(--nl);vertical-align:bottom}.btn:hover{box-shadow:4px 4px var(--n1)}.btn:active,.btn:focus{box-shadow:1px 1px var(--n2);position:relative;top:3px;left:3px}.btn.sm{padding:.5rem 1rem}.btn.std{width:12rem}.btn.big.std{width:20rem}.btn.huge.std{width:24rem}.tag{padding:2px;font-size:.875rem;border:solid 1px}.col,.row{display:flex;flex-direction:row;justify-content:stretch;align-items:stretch;flex-wrap:wrap;gap:1rem}.row>*{flex:1}.col>*{flex:0}.col{flex-direction:column}.start{justify-content:flex-start;align-items:flex-start}.middle{justify-content:center;align-item:center}.gapless{gap:0}.table,.c12{width:100%;flex:12}.c11{flex:11;width:91.66%}.c10{flex:10;width:83.33%}.c9{flex:9;width:75%}.c8{flex:8;width:66.66%}.c7{flex:7;width:58.33%}.c6{flex:6;width:50%}.c5{flex:5;width:41.66%}.c4{flex:4;width:33.33%}.c3{flex:3;width:25%}.c2{flex:2;width:16.66%}.c1{flex:1;width:8.33%}@media(max-width:800px){.row>*{flex:0 1 100%;width:100%}.no-mobile{display:none}}.no-grow{flex:0}.fixed{flex-grow:0;flex-shrink:0}.card,.block{padding:1rem;border:solid 1rem}.col.card,.col.block{justify-content:flex-start;align-items:flex-start}.card{border-color:var(--nl)}.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;border:double 1rem}.fill{flex-grow:1}.push{justify-self:flex-end;margin-top:auto}h1,h2,h3,h4,h5,h6{display:block;padding:.5rem;font-size:1rem;margin:0;outline:0;color:var(--bg);margin:1rem 0;border:solid 1px var(--fg)}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:var(--bg)}.tight{margin:0}h1{background:var(--fg)}h2{background:var(--n2)}h2{background:var(--n1)}h3{background:var(--n0)}h4{background:var(--nl);color:var(--fg)}h5{background:var(--bg2);color:var(--fg)}h6{color:var(--fg)}.ico{font-family:Arial Unicode MS,Lucida Sans Unicode;font-style:normal}.big.ico,.huge.ico{vertical-align:middle}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(--accent)}.nav{background:var(--bg2);border-bottom:solid 1px var(--darken)}footer{background:var(--bg2);border-top:solid 1px var(--darken)}.nav{height:3rem;padding:11px 0 15px}.nav a{text-decoration:none;opacity:.7;padding-right:1em;position:relative;top:-1px}.nav a:hover{opacity:1}.nav .pagename{opacity:1;font-weight:700;font-size:22px;top:1px}.btn.btn-close{float:right;font-size:25px;margin:-4.1rem 0;display:none;border:none;box-shadow:none;background:0 0;color:var(--fg)}@media(max-width:640px){.btn.btn-close{display:block}.nav{overflow:hidden}.pagename{margin-top:-11px}.nav:active,.nav:focus{height:auto}.nav div:before{background:var(--bg2);border-bottom:11px double;border-top:3px solid;content:'';float:right;height:.25rem;position:relative;right:0;top:8px;width:2rem}.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{border-left:5px solid var(--darken);padding:1rem} \ 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);--nl:#d9d9d9;--n0:#999;--n1:#808080;--n2:#666666;--y:#b58900;--o:#cb4b16;--r:#dc322f;--m:#d33682;--v:#6c71c4;--b:#268bd2;--c:#2aa198;--g:#859900;--accent:var(--b)}@media(prefers-color-scheme:dark){body{filter: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)}}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)}.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)}html,body{font-size:12px;line-height:1.5em;min-height:100vh;margin:0;padding:0;border:0;outline:0}*{box-sizing:border-box}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}img{max-width:100%}.addon,.sm,.nav,textarea,input,select{outline:0;line-height:1rem}.container{padding:0 20px;width:100%}@media(min-width:1380px){.container{margin:auto;max-width:1270px}}pre{background:var(--bg2);padding:10px;overflow:scroll}code{background:var(--darken);border:solid 1px var(--darken);padding:1px}blockquote{margin:1rem 0;padding-left:1rem;border-left:solid 1rem var(--nl)}ul{list-style-type:square;list-style-position:outside;padding-inline-start:1.5rem}ol{padding-inline-start:2rem}ul>li::marker{font-size:1.5rem}summary:hover{cursor:pointer;background:var(--bg2)}table{font-size:1rem}.sm{font-size:.75rem;line-height:.65rem}.big{font-size:2rem;line-height:2.8rem}.huge{font-size:3rem;line-height:4.1rem}.hl{background:var(--fg);color:var(--bg);border:solid 1px;padding:1px}.doc{max-width:65ch;font-size:1.25rem;font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif;text-align:justify;line-height:1.5em}.doc p{text-indent:3rem}.tb,.btn,.tag{text-decoration:none;display:inline-block;text-align:center}.tb{font-weight:700;cursor:pointer;padding:2px;vertical-align:baseline}.tb:before,.tb:after{opacity:.3;display:inline-block}.tb:before{content:"❬"}.tb:after{content:"❭"}.tb:hover{text-decoration:underline}.tb:hover::before,.tb:hover::after{opacity:1}.tb:active:before{content:"❰"}.tb:active:after{content:"❱"}.btn{border:solid 2px var(--fg);font-weight:700;cursor:pointer;display:inline-block;margin:0 4px 4px 0;padding:1rem 2rem;box-shadow:4px 4px var(--nl);vertical-align:bottom}.btn:hover{box-shadow:4px 4px var(--n1)}.btn:active,.btn:focus{box-shadow:1px 1px var(--n2);position:relative;top:3px;left:3px}.btn.sm{padding:.5rem 1rem}.btn.std{width:12rem}.btn.big.std{width:20rem}.btn.huge.std{width:24rem}.tag{padding:2px;font-size:.875rem;border:solid 1px var(--fg);margin:0 1px}.col,.row{display:flex;flex-direction:row;justify-content:stretch;align-items:stretch;flex-wrap:wrap;gap:1rem}.row>*{flex:1;max-height:100%}.col>*{flex:0;max-width:100%}.col{flex-direction:column}.start{justify-content:flex-start;align-items:flex-start}.middle{justify-content:center;align-item:center}.gapless{gap:0}.table,.c12{width:100%;flex:12}.c11{flex:11;width:91.66%}.c10{flex:10;width:83.33%}.c9{flex:9;width:75%}.c8{flex:8;width:66.66%}.c7{flex:7;width:58.33%}.c6{flex:6;width:50%}.c5{flex:5;width:41.66%}.c4{flex:4;width:33.33%}.c3{flex:3;width:25%}.c2{flex:2;width:16.66%}.c1{flex:1;width:8.33%}@media(max-width:800px){.row>*{flex:0 1 100%;width:100%}.no-mobile{display:none}}.no-grow{flex:0}.fixed{flex-grow:0;flex-shrink:0}.card,.block{padding:1rem;border:solid 1rem;overflow:hidden}.col.card,.col.block{justify-content:flex-start;align-items:flex-start}.card{border-color:var(--nl)}.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;border:double 1rem}.fill{flex-grow:1}.push{justify-self:flex-end;margin-top:auto}h1,h2,h3,h4,h5,h6{display:block;padding:.5rem;font-size:1rem;margin:0;outline:0;color:var(--bg);margin:1rem 0;border:solid 1px var(--fg)}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:var(--bg)}.tight{margin:0}h1{background:var(--fg)}h2{background:var(--n2)}h2{background:var(--n1)}h3{background:var(--n0)}h4{background:var(--nl);color:var(--fg)}h5{background:var(--bg2);color:var(--fg)}h6{color:var(--fg)}.ico{font-family:Arial Unicode MS,Lucida Sans Unicode;font-style:normal}.big.ico,.huge.ico{vertical-align:middle}label>*{display:inline}form>*{display:block;margin-bottom:10px}textarea,input,select{border:2px solid;padding:2px}textarea,input[type=text]{-webkit-appearance:none;width:13em;outline:0;border:2px solid}.addon{padding:2px;border-width:2px;border-style:solid none solid solid}textarea:focus,input:focus,select:focus{border-color:var(--accent)}.form-block:focus-within .addon{border-color:var(--accent)}.nav{background:var(--bg2);border-bottom:solid 1px var(--darken)}footer{background:var(--bg2);border-top:solid 1px var(--darken)}.nav{height:3rem;padding:11px 0 15px}.nav a{text-decoration:none;opacity:.7;padding-right:1em;position:relative;top:-1px}.nav a:hover{opacity:1}.nav .pagename{opacity:1;font-weight:700;font-size:22px;top:1px}.btn.btn-close{float:right;font-size:25px;margin:-4.1rem 0;display:none;border:none;box-shadow:none;background:0 0;color:var(--fg)}@media(max-width:640px){.btn.btn-close{display:block}.nav{overflow:hidden}.pagename{margin-top:-11px}.nav:active,.nav:focus{height:auto}.nav div:before{background:var(--bg2);border-bottom:11px double;border-top:3px solid;content:'';float:right;height:.25rem;position:relative;right:0;top:8px;width:2rem}.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{border-left:5px solid var(--darken);padding:1rem} \ No newline at end of file diff --git a/h/docs.html b/h/docs.html index bc2ffb0..1f5c737 100644 --- a/h/docs.html +++ b/h/docs.html @@ -966,19 +966,29 @@ Just a bunch of a few more unicode icons. </div> </div> -

§ Forms



$
Be careful with addons! If you do not want a space between the addon and the input make sure that there is no space between the <span> and <input> tags. Example: 
... </span> <input ...
$ 
... </span><input ...
$
code
+

§ Forms





$


Be careful with addons! If you do not want a space between the addon and the input make sure that there is no space between the <span> and <input> tags. Example: 
... </span> <input ...
$ 
... </span><input ...
$
code
   <div>
-    <input class="neutral" placeholder="input" type="text"></input><br></br>
-    <textarea class="neutral" placeholder="textarea" rows="3"></textarea><br></br>
-    <span class="addon bg-info">$</span><input type="text"></input>
+    <input id="example1" placeholder="text input" type="text"></input><br></br>
+    <br></br>
+    <textarea cols="30" id="textarea1" placeholder="textarea" rows="3"></textarea><br></br>
+    <br></br>
+    <div class="form-block">
+      <span class="addon info">$</span><input placeholder="with addon" type="text"></input>
+    </div><br></br>
+    <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>&lt;span&gt;</code> and
       <code>&lt;input&gt;</code> tags. Example:
-      <pre>... &lt;/span&gt;<span class="hl"> </span>&lt;input ...</pre><span class="addon">$</span>
-      <input class="smooth" type="text"></input>
-      <pre>... &lt;/span&gt;&lt;input ...</pre><span class="addon">$</span><input class="smooth" type="text"></input>
+      <pre>... &lt;/span&gt;<span class="hl"> </span>&lt;input ...</pre>
+      <div class="form-block">
+        <span class="addon">$</span> <input class="smooth" type="text"></input>
+      </div>
+      <pre>... &lt;/span&gt;&lt;input ...</pre>
+      <div class="form-block">
+        <span class="addon">$</span><input class="smooth" type="text"></input>
+      </div>
     </div>
   </div>

§ Tables

#Widgets SoldRevenue (£)Profit (£)
15102
210204
35001000200
code
diff --git a/src/buttons.less b/src/buttons.less
index 46874ce..d127466 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -39,4 +39,4 @@
 .btn.big.std { width: 20rem; }
 .btn.huge.std { width: 24rem; }
 
-.tag { padding: 2px; font-size: 0.875rem; border: solid 1px; }
+.tag { padding: 2px; font-size: 0.875rem; border: solid 1px var(--fg); margin: 0 1px; }
diff --git a/src/colors.less b/src/colors.less
index 90c1e01..ff961f4 100644
--- a/src/colors.less
+++ b/src/colors.less
@@ -39,11 +39,11 @@ a { color: var(--fg); }
 p > a, li > a { color: var(--accent); }
 
 .msg, .btn { background-color: var(--bg2) }
-.b, .info  { color: var(--bg); background-color: var(--b); }
-.g, .ok    { color: var(--bg); background-color: var(--g); }
-.y, .warn  { color: var(--bg); background-color: var(--y); }
-.r, .err   { color: var(--bg); background-color: var(--r); }
-.m, .fatal { color: var(--bg); background-color: var(--m); }
-.o  { color: var(--bg); background-color: var(--o); }
-.v  { color: var(--bg); background-color: var(--v); }
-.c  { color: var(--bg); background-color: var(--c); }
+.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); }
diff --git a/src/components.less b/src/components.less
index b8a4e0f..72ad5ee 100644
--- a/src/components.less
+++ b/src/components.less
@@ -2,6 +2,7 @@
 .card, .block {
   padding: 1rem;
   border: solid 1rem;
+  overflow: hidden;
 }
 .col.card, .col.block {
 	justify-content: flex-start;
diff --git a/src/forms.less b/src/forms.less
index 837182c..2804729 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -9,7 +9,7 @@ form > * {
 
 textarea, input, select {
 	border: 2px solid;
-	padding: 8px;
+	padding: 2px;
 }
 
 textarea, input[type=text] {
@@ -20,7 +20,7 @@ textarea, input[type=text] {
 }
 
 .addon {
-	padding: 8px 12px;
+	padding: 2px 2px;
   border-width: 2px;
   border-style: solid none solid solid;
 }
@@ -28,3 +28,6 @@ textarea, input[type=text] {
 textarea:focus, input:focus, select:focus {
 	border-color: var(--accent);
 }
+.form-block:focus-within .addon {
+	border-color: var(--accent);
+}
diff --git a/src/grid.less b/src/grid.less
index 072e1ff..3d5d9ca 100644
--- a/src/grid.less
+++ b/src/grid.less
@@ -10,8 +10,8 @@
 }
 
 
-.row > * { flex: 1; }
-.col > * { flex: 0; }
+.row > * { flex: 1; max-height: 100%; }
+.col > * { flex: 0; max-width: 100%; }
 .col {
 	flex-direction: column;
 }