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> -
<span>
and <input>
tags. Example: ... </span> <input ...
$ ... </span><input ...$
+
<span>
and <input>
tags. Example: ... </span> <input ...
... </span><input ...
<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><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"></input> - <pre>... </span><input ...</pre><span class="addon">$</span><input class="smooth" type="text"></input> + <pre>... </span><span class="hl"> </span><input ...</pre> + <div class="form-block"> + <span class="addon">$</span> <input class="smooth" type="text"></input> + </div> + <pre>... </span><input ...</pre> + <div class="form-block"> + <span class="addon">$</span><input class="smooth" type="text"></input> + </div> </div> </div>
# | Widgets Sold | Revenue (£) | Profit (£) |
---|---|---|---|
1 | 5 | 10 | 2 |
2 | 10 | 20 | 4 |
3 | 500 | 1000 | 200 |
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; }