diff --git a/bb/brut/site.clj b/bb/brut/site.clj index 2a15228..d767e10 100644 --- a/bb/brut/site.clj +++ b/bb/brut/site.clj @@ -518,13 +518,13 @@ [:div.card.c6 c1 [:br] - [:details + [:details.push [:summary.bg-neutral "code"] (to-pre c1)]] (when c2 [:div.card.c6 c2 - [:details + [:details.push [:summary.bg-neutral "code"] (to-pre c2)]])])])])) diff --git a/brut.min.css b/brut.min.css index c4102bc..72a22b6 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);--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)}body.soft{filter:brightness(85%)sepia(25%)}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);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)}@media(prefers-color-scheme:dark){body{filter:invert(100%)hue-rotate(180deg)}body.soft{filter:brightness(85%)sepia(25%)invert(100%)hue-rotate(180deg)}img,.fill{filter:brightness(80%)invert(100%)}.b,.info,.g,.ok,.y,.warn,.r,.err,.m,.fatal,.o,.v,.c,.alert{filter:brightness(90%)invert(100%)hue-rotate(180deg)}}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%}.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}ul{padding:0;margin-left:1.5rem}summary:hover{cursor:pointer}table{font-size:1rem}.sm{font-size:.75rem}.big{font-size:2rem;line-height:1.5em}.huge{font-size:4rem;line-height:1.5em}.addon,.sm,.nav,textarea,input,select{outline:0;line-height:1em}.hl{border-color:var(--fg)}p>.hl,li>.hl{border:solid 1px var(--fg);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 .25em .25em 0;padding:.5rem 1rem;box-shadow:.25em .25em var(--nl);vertical-align:bottom}.btn:hover{box-shadow:.25em .25em var(--n1)}.btn:active,.btn:focus{box-shadow:.05em .05em var(--n2);position:relative;top:.2em;left:.2em}.btn.sm{padding:.5rem 1rem}.btn.std{width:12em}.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:960px){.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}button~.central{min-height:calc(100vh - 50px)}.hero{padding:2rem}.fill{flex-grow:1}footer,.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}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)}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:.3}h2:before{content:"= ";opacity:.3}h3:before{content:"- ";opacity:.3}h4:before{content:": ";opacity:.3}h5:before{content:"⋅ ";opacity:.3}h6{padding-left:2rem}.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 +/* 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)}body.soft{filter:brightness(85%)sepia(25%)}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);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)}@media(prefers-color-scheme:dark){body{filter:invert(100%)hue-rotate(180deg)}body.soft{filter:brightness(85%)sepia(25%)invert(100%)hue-rotate(180deg)}img,.fill{filter:brightness(80%)invert(100%)}.b,.info,.g,.ok,.y,.warn,.r,.err,.m,.fatal,.o,.v,.c,.alert{filter:brightness(90%)invert(100%)hue-rotate(180deg)}}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%}.container{padding:0 20px;width:100%}@media(min-width:1380px){.container{margin:auto;max-width:1270px}}pre{background:var(--bg2);padding:0;margin:0;line-height:1rem;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}ul{padding:0;margin:0 1.5rem 0 0}li{line-height:1.2rem}.action,summary:hover{cursor:pointer;background:var(--bg2)}table{font-size:1rem}.sm{font-size:.75rem}.big{font-size:2rem;line-height:1.5em}.huge{font-size:4rem;line-height:1.5em}.addon,.sm,.nav,textarea,input,select{outline:0;line-height:1em}.hl{border-color:var(--fg)}p>.hl,li>.hl{border:solid 1px var(--fg);padding:1px}.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 .25em .25em 0;padding:.5rem 1rem;box-shadow:.25em .25em var(--nl);vertical-align:bottom}.btn:hover{box-shadow:.25em .25em var(--n1)}.btn:active,.btn:focus{box-shadow:.05em .05em var(--n2);position:relative;top:.2em;left:.2em}.btn.sm{padding:.5rem 1rem}.btn.std{width:12em}.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}.col>.row{padding:0 1rem}.row>.col{padding:1rem 0}.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:960px){.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:0;border:solid 1rem;overflow:hidden}.card>ul>li>a{width:100%;display:inline-block}.card>ul>li>a:hover{background:var(--accent);color:var(--bg)}.col.card,.col.block{justify-content:flex-start;align-items:flex-start}.card{border-color:var(--nl)}.card>*:first-child{margin-top:0}.block{border-color:transparent}.block>*:first-child{margin-top:0}.central{display:flex;align-items:center;justify-content:center;background-size:cover}button~.central{min-height:calc(100vh - 50px)}.hero{padding:2rem}.fill{flex-grow:1}footer,.push{justify-self:flex-end;margin-top:auto}.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}.col.card,.row.card,.col.block,.row.block{padding:0}h1,h2,h3,h4,h5,h6{display:block;padding:0;font-size:1rem;outline:0;color:var(--bg);width:100%;margin:0 0 1rem}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)}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:.3}h2:before{content:"= ";opacity:.3}h3:before{content:"- ";opacity:.3}h4:before{content:": ";opacity:.3}h5:before{content:"⋅ ";opacity:.3}h6{padding-left:1.25rem}.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}textarea,input,select{border:2px solid;padding:2px;margin:0}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 ed9efc5..8d99e76 100644 --- a/h/docs.html +++ b/h/docs.html @@ -1,4 +1,4 @@ -
Here a bunch of examples with their source code to make them happen.
Some text in <p> with different styles; bold, strong, italic, emphasis, code
. If you really want something to be extremly visible, use the class hl
.
Links will looks like this into text: This is a link inside a paragraph.
The text should be very dense on purpose. Forget your lessons about nice space in design here. The goal of this design is to produce professional UI applications. So no time to make it breathes. We want to make it compact and efficient.
Note we still try to keep a coherent and nice vertical rythm.
Here is some blockquote. This can give you an idea about the look and feel for them.
+BRUT - documentation Documentation
Here a bunch of examples with their source code to make them happen.
[§] Textual content
title in h1
Some text in <p> with different styles; bold, strong, italic, emphasis,
code
. If you really want something to be extremly visible, use the classhl
.Links will looks like this into text: This is a link inside a paragraph.
The text should be very dense on purpose. Forget your lessons about nice space in design here. The goal of this design is to produce professional UI applications. So no time to make it breathes. We want to make it compact and efficient.
Note we still try to keep a coherent and nice vertical rythm.
Here is some blockquote. This can give you an idea about the look and feel for them.
code
<div id="text"> <h1>title in h1</h1> <p>Some text in <p> with different styles; <b>bold</b>, @@ -19,7 +19,7 @@ the look and feel for them.</p> </blockquote> </div> -Remark if you need to present a long text to read you can still use the class
doc
. Take a look at the next paragraph for example:Lorem ipsum with pretty Lorem ipsum dolor sit amet consectetur adipiscing elit, urna consequat felis vehicula class ultricies mollis dictumst, aenean non a in donec nulla. Phasellus ante pellentesque erat cum risus consequat imperdiet aliquam, integer placerat et turpis mi eros nec lobortis taciti, vehicula nisl litora tellus ligula porttitor metus.
Vivamus integer non suscipit taciti mus etiam at primis tempor sagittis sit, euismod libero facilisi aptent elementum felis blandit cursus gravida sociis erat ante, eleifend lectus nullam dapibus netus feugiat curae curabitur est ad. Massa curae fringilla porttitor quam sollicitudin iaculis aptent leo ligula euismod dictumst, orci penatibus mauris eros etiam praesent erat volutpat posuere hac. Metus fringilla nec ullamcorper odio aliquam lacinia conubia mauris tempor, etiam ultricies proin quisque lectus sociis id tristique, integer phasellus taciti pretium adipiscing tortor sagittis ligula.
The
doc
class ensure the width of the text is not too wide and use a very legible font.code
+Remark if you need to present a long text to read you can still use the class
doc
. Take a look at the next paragraph for example:Lorem ipsum with pretty Lorem ipsum dolor sit amet consectetur adipiscing elit, urna consequat felis vehicula class ultricies mollis dictumst, aenean non a in donec nulla. Phasellus ante pellentesque erat cum risus consequat imperdiet aliquam, integer placerat et turpis mi eros nec lobortis taciti, vehicula nisl litora tellus ligula porttitor metus.
Vivamus integer non suscipit taciti mus etiam at primis tempor sagittis sit, euismod libero facilisi aptent elementum felis blandit cursus gravida sociis erat ante, eleifend lectus nullam dapibus netus feugiat curae curabitur est ad. Massa curae fringilla porttitor quam sollicitudin iaculis aptent leo ligula euismod dictumst, orci penatibus mauris eros etiam praesent erat volutpat posuere hac. Metus fringilla nec ullamcorper odio aliquam lacinia conubia mauris tempor, etiam ultricies proin quisque lectus sociis id tristique, integer phasellus taciti pretium adipiscing tortor sagittis ligula.
The
doc
class ensure the width of the text is not too wide and use a very legible font.code
<div id="doc"> <p>Remark if you need to present a long text to read you can still use the class <code>doc</code>. Take a look at the next @@ -47,7 +47,7 @@ <p>The <code>doc</code> class ensure the width of the text is not too wide and use a very legible font.</p> </div> -headings
By default there is some space before and after any heading:
h1
h2
h3
h4
h5
h6
tight headings
You can remove the space by using the class
tight
to the heading:h1 tight
h2 tight
h3 tight
h4 tight
h5 tight
h6 tight
code
+headings
By default there is some space before and after any heading:
h1
h2
h3
h4
h5
h6
tight headings
You can remove the space by using the class
tight
to the heading:h1 tight
h2 tight
h3 tight
h4 tight
h5 tight
h6 tight
code
<div> <h3>headings</h3> <p>By default there is some space before and after any @@ -68,7 +68,7 @@ <h5 class="tight">h5 tight</h5> <h6 class="tight">h6 tight</h6> </div> -itemization
ul
- item 1
- item 2
- item 3; with a very long text that should wrap to the next line in any browser. We'll see that the wrapped text should be aligned with the text of the other items. This is due to the
list-style-position: outside
.- item 4
ol
- item 1
- item 2
- item 3
- item 4
code
+itemization
ul
- item 1
- item 2
- item 3; with a very long text that should wrap to the next line in any browser. We'll see that the wrapped text should be aligned with the text of the other items. This is due to the
list-style-position: outside
.- item 4
ol
- item 1
- item 2
- item 3
- item 4
code
<div id="itemize"> <h2>itemization</h2> <h3>ul</h3> @@ -89,7 +89,7 @@ <li>item 4</li> </ol> </div> -[§] Grid
With default gap
c12c11c1c10c2c9c3c8c4c7c5c6c6c5c7c4c8c3c9c2c10c1c11c12code
+[§] Grid
With default gap
c12c11c1c10c2c9c3c8c4c7c5c6c6c5c7c4c8c3c9c2c10c1c11c12code
<div> <h3>With default gap</h3> <div> @@ -193,7 +193,7 @@ </div> </div> </div> -Gapless
c12c11c1c10c2c9c3c8c4c7c5c6c6c5c7c4c8c3c9c2c10c1c11c12code
+Gapless
c12c11c1c10c2c9c3c8c4c7c5c6c6c5c7c4c8c3c9c2c10c1c11c12code
<div> <h3>Gapless</h3> <div> @@ -297,7 +297,7 @@ </div> </div> </div> -3 columns
c1c10c1c2c9c1c1c9c2c3c8c1c2c8c2c1c8c3c4c7c1c3c7c2c2c7c3c1c7c4c5c6c1c4c6c2c3c6c3c2c6c4c1c6c5c6c5c1c5c5c2c4c5c3c3c5c4c2c5c5c1c5c6c7c4c1c6c4c2c5c4c3c4c4c4c3c4c5c2c4c6c1c4c7c8c3c1c7c3c2c6c3c3c5c3c4c4c3c5c3c3c6c2c3c7c1c3c8c9c2c1c8c2c2c7c2c3c6c2c4c5c2c5c4c2c6c3c2c7c2c2c8c1c2c9c10c1c1c9c1c2c8c1c3c7c1c4c6c1c5c5c1c6c4c1c7c3c1c8c2c1c9c1c1c10code
+3 columns
c1c10c1c2c9c1c1c9c2c3c8c1c2c8c2c1c8c3c4c7c1c3c7c2c2c7c3c1c7c4c5c6c1c4c6c2c3c6c3c2c6c4c1c6c5c6c5c1c5c5c2c4c5c3c3c5c4c2c5c5c1c5c6c7c4c1c6c4c2c5c4c3c4c4c4c3c4c5c2c4c6c1c4c7c8c3c1c7c3c2c6c3c3c5c3c4c4c3c5c3c3c6c2c3c7c1c3c8c9c2c1c8c2c2c7c2c3c6c2c4c5c2c5c4c2c6c3c2c7c2c2c8c1c2c9c10c1c1c9c1c2c8c1c3c7c1c4c6c1c5c5c1c6c4c1c7c3c1c8c2c1c9c1c1c10code
<div> <h3>3 columns</h3> <div> @@ -909,7 +909,7 @@ </div><br></br> </div> </div> -[§] Images
Images
Inside a grid
Inside a card
In a block
Directly in the columncode
+[§] Images
Images
Inside a grid
Inside a card
In a block
Directly in the columncode
<div id="images"> <h1>Images</h1> <h2>Inside a grid</h2> @@ -922,7 +922,7 @@ </div> </div>[§] icons
Safe
☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ¥£ ¢❊ ฿ ๏ ※ ₧ ₨ ₪ € № -The "Safe" icons should work almost everywhere.
Inserting ☎ in ♂ the ♀ middle ⓧ of © some § text ® to ⇦ check ⇧ the ⇨ size. ⇩ Now ♠ this ♣ should ♥ give ♦ an ♪ idea ♛ about ♜ the ♝ size ♞ relatively ♟ to ☜ the ☞ text. ♨ Hmmm ♭ this ♯ is ¥ quite £ long ¢ and ❊ boring ฿ to ๏ write ※ text ₧ in ₨ between ₪ like € that! №
code
+The "Safe" icons should work almost everywhere.
Inserting ☎ in ♂ the ♀ middle ⓧ of © some § text ® to ⇦ check ⇧ the ⇨ size. ⇩ Now ♠ this ♣ should ♥ give ♦ an ♪ idea ♛ about ♜ the ♝ size ♞ relatively ♟ to ☜ the ☞ text. ♨ Hmmm ♭ this ♯ is ¥ quite £ long ¢ and ❊ boring ฿ to ๏ write ※ text ₧ in ₨ between ₪ like € that! №
code
<div class="col start"> <h4>Safe</h4><i class="ico block big">☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ¥£ ¢❊ ฿ ๏ ※ ₧ ₨ ₪ € №</i> @@ -957,7 +957,7 @@ </div> </div>Total Set
✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩ -Just a bunch of a few more unicode icons.code
+Just a bunch of a few more unicode icons.code
<div class="col start"> <h4>Total Set</h4><i class="ico block big">✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ @@ -966,7 +966,7 @@ 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 id="example1" placeholder="text input" type="text"></input><br></br> <br></br> @@ -991,7 +991,7 @@ </div> </div> </div> -
# | Widgets Sold | Revenue (£) | Profit (£) |
---|---|---|---|
1 | 5 | 10 | 2 |
2 | 10 | 20 | 4 |
3 | 500 | 1000 | 200 |
+
# | Widgets Sold | Revenue (£) | Profit (£) |
---|---|---|---|
1 | 5 | 10 | 2 |
2 | 10 | 20 | 4 |
3 | 500 | 1000 | 200 |
<table class="table"> <thead> <tr> @@ -1022,7 +1022,7 @@ </tr> </tbody> </table> -
+
<div id="tags"> <h2>Tags</h2> <ul> @@ -1035,18 +1035,18 @@ <li>item-7<span class="tag fatal">fatal</span></li> </ul> </div> -
+
<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> -
+
<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> -
+
<div id="text-buttons-sizes"> <h3>Textual Buttons Sizes</h3> <div class="block"> @@ -1056,7 +1056,7 @@ Some text: <a class="tb huge err">huge err</a> </div> </div> -
+
<div class="col"> <h2>Buttons</h2> <div class="row"> @@ -1106,7 +1106,7 @@
err
to the class.
fatal
to the class.
hl
to the class.
-+
<div class="row"> <div class="col c6 gapless"> <h2>Basic Messages</h2><br></br> @@ -1140,7 +1140,7 @@ </div> </div> </div> -
+
<div class="navbar"> <nav class="nav" onclick="this.focus()" tabindex="-1"> <div class="container"> @@ -1148,7 +1148,7 @@ </div> </nav><button class="btn-close btn sm">×</button> </div> -
+
<footer> <div class="container"> <p>Made by <a href="https://yannesposito.com">Yann diff --git a/src/components.less b/src/components.less index 1e17d7e..063e676 100644 --- a/src/components.less +++ b/src/components.less @@ -1,9 +1,13 @@ /* card and block to put space between blocks */ + .card, .block { - padding: 1rem; + padding: 0; border: solid 1rem; overflow: hidden; } +.card > ul > li > a { width: 100%; display: inline-block; } +.card > ul > li > a:hover { background: var(--accent); color: var(--bg); } + .col.card, .col.block { justify-content: flex-start; align-items: flex-start; @@ -11,7 +15,9 @@ .card { border-color: var(--nl); } +.card > *:first-child { margin-top: 0; } .block { border-color: transparent; } +.block > *:first-child { margin-top: 0; } /* To be used as main image for presentation */ .central { @@ -32,3 +38,17 @@ button ~ .central { .fill { flex-grow: 1; } footer,.push { justify-self: flex-end; margin-top: auto;} + +/* doc are for long text to read */ +.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; + p { + text-indent: 3rem; + } + } + + +.col.card,.row.card, .col.block,.row.block { padding: 0; } diff --git a/src/forms.less b/src/forms.less index 2804729..aec1b04 100644 --- a/src/forms.less +++ b/src/forms.less @@ -4,12 +4,12 @@ label > * { form > * { display: block; - margin-bottom: 10px; } textarea, input, select { border: 2px solid; padding: 2px; + margin: 0; } textarea, input[type=text] { diff --git a/src/general.less b/src/general.less index 42685e2..bb9f69e 100644 --- a/src/general.less +++ b/src/general.less @@ -23,7 +23,9 @@ img { max-width: 100%; } } pre { background: var(--bg2); - padding: 10px; + padding: 0; + margin: 0; + line-height: 1rem; overflow: scroll; } code { background: var(--darken); @@ -39,8 +41,9 @@ ol { padding-inline-start: 2rem; } ul > li::marker { font-size: 1.5rem; } -ul { padding: 0; margin-left: 1.5rem; } -summary:hover { cursor: pointer; } +ul { padding: 0; margin: 0 1.5rem 0 0; } +li { line-height: 1.2rem; } +.action, summary:hover { cursor: pointer; background: var(--bg2); } table { font-size: 1rem; } .sm { font-size: 0.75rem; } @@ -57,14 +60,3 @@ p > .hl, li > .hl { border: solid 1px var(--fg); padding: 1px; } - -/* doc are for long text to read */ -.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; - p { - text-indent: 3rem; - } - } diff --git a/src/grid.less b/src/grid.less index b9373c9..b016de3 100644 --- a/src/grid.less +++ b/src/grid.less @@ -15,6 +15,8 @@ .col { flex-direction: column; } +.col > .row { padding: 0 1rem; } +.row > .col { padding: 1rem 0; } .start { justify-content: flex-start; align-items: flex-start; diff --git a/src/headings.less b/src/headings.less index e0cb418..c6c0918 100644 --- a/src/headings.less +++ b/src/headings.less @@ -2,12 +2,12 @@ h1, h2, h3, h4, h5, h6 { display: block; - padding: 0.5rem; + padding: 0; font-size: 1rem; - margin: 0; outline: 0; color: var(--bg); - margin: 1rem 0; + width: 100%; + margin: 0 0 1rem 0; a { color: var(--bg); } @@ -25,4 +25,4 @@ 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; } +h6 { padding-left: 1.25rem; }