yogsototh/brutcss
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

improvements

Browse source
This commit is contained in:
Yann Esposito (Yogsototh) 2022-10-07 17:45:01 +02:00
parent e18109d0c1
commit 304992fe2b
Signed by untrusted user who does not match committer: yogsototh
GPG key ID: 7B19A4C650D59646
5 changed files with 40 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
brut-nocolors.min.css vendored
View file

@ -1 +1 @@
:root{--bg:#fff;--fg:#000;--bg2:#eee;--darken:rgba(0, 0, 0, 0.1);--nl:#d9d9d9;--n0:#999;--n1:#808080;--n2:#666666;--shadow:rgba(0, 0, 0, 0.75);--cnt:#fff;--na:#333;--nb:#000}@media(prefers-color-scheme:dark){:root{--bg:#000;--fg:#ccc;--bg2:#333;--darken:rgba(255, 255, 255, 0.1);--nl:#666666;--n0:#808080;--n1:#999999;--n2:#b3b3b3;--shadow:rgba(128, 128, 128, 0.3);--cnt:#000;--na:#eee;--nb:#fff}}.neutral{color:var(--n0)}.bg-neutral{background:var(--nl)}a{color:var(--fg)}html,body{font-size:12px;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:auto}@media only screen and (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}.big{font-size:2em}.huge{font-size:3em}.tb,.btn{text-decoration:none;display:inline-block}.tb{font-weight:700;cursor:pointer;padding:2px}.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{background:var(--n0);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(--n1);color:#fff}.btn:active,.btn:focus{color:#fff;background:var(--n2);box-shadow:1px 1px #000;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}.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}.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:870px){.row .col{flex:0 1 100%;width:100%}.no-mobile{display:none}}.no-grow{flex: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{padding:.5rem;font-size:1rem;margin:0;outline:0;color:var(--bg);border-top:solid 1rem var(--bg);border-bottom:solid 1rem var(--bg)}.tight{border: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: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(--i1)}.nav{background:var(--bg2);border-bottom:solid 1px var(--darken)}.nav{height:50px;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:-51px 10px;display:none;border:none;box-shadow:none;background:0 0}@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(--bg2);border-bottom:11px 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(--nl);border-left:5px solid var(--n0);padding:1rem}
:root{--bg:#fff;--fg:#000;--bg2:#eee;--darken:rgba(0, 0, 0, 0.1);--nl:#d9d9d9;--n0:#999;--n1:#808080;--n2:#666666;--shadow:rgba(0, 0, 0, 0.75);--cnt:#fff;--na:#333;--nb:#000}@media(prefers-color-scheme:dark){:root{--bg:#000;--fg:#ccc;--bg2:#333;--darken:rgba(255, 255, 255, 0.1);--nl:#666666;--n0:#808080;--n1:#999999;--n2:#b3b3b3;--shadow:rgba(128, 128, 128, 0.3);--cnt:#000;--na:#eee;--nb:#fff}}.neutral{color:var(--n0)}.bg-neutral{background:var(--nl)}a{color:var(--fg)}html,body{font-size:12px;line-height:1em;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:auto}@media only screen and (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}.sm{font-size:.75rem}.big{font-size:2rem;line-height:2rem}.huge{font-size:3rem;line-height:3rem}.tb,.btn{text-decoration:none;display:inline-block}.tb{font-weight:700;cursor:pointer;padding:2px}.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{background:var(--n0);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(--n1);color:#fff}.btn:active,.btn:focus{color:#fff;background:var(--n2);box-shadow:1px 1px #000;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}.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}.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:870px){.row .col{flex:0 1 100%;width:100%}.no-mobile{display:none}}.no-grow{flex: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{padding:.5rem;font-size:1rem;margin:0;outline:0;color:var(--bg);border-top:solid 1rem var(--bg);border-bottom:solid 1rem var(--bg)}.tight{border: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: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(--i1)}.nav{background:var(--bg2);border-bottom:solid 1px var(--darken)}.nav{height:50px;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:-51px 10px;display:none;border:none;box-shadow:none;background:0 0}@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(--bg2);border-bottom:11px 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(--nl);border-left:5px solid var(--n0);padding:1rem}

2
brut.min.css vendored
View file

File diff suppressed because one or more lines are too long

36
h/docs.html
View file

@ -58,12 +58,36 @@
<a class="tb fatal">tb fatal</a>
<h3>Sizes</h3>
<a class="tb sm">tb sm</a>
<a class="tb sm info">tb sm</a>
<a class="tb ok">tb</a>
<a class="tb big warn">tb big</a>
<a class="tb huge err">tb huge</a>
<a class="tb huge fatal">tb huge</a>
<div class="block">
Text
<a class="tb sm">small</a>
<a class="tb">normal</a>
<a class="tb big">Big</a>
<a class="tb huge">HUGE</a>
</div>
<div class="row">
<div class="col c2 gapless">
<span> Text <a class="tb sm">tb sm</a> </span>
<a class="tb sm info">tb sm</a>
<a class="tb sm ok">tb sm</a>
<a class="tb sm warn">tb sm</a>
</div>
<div class="col c2 gapless">
<a class="tb">tb</a>
<a class="tb info">tb</a>
<a class="tb ok">tb</a>
<a class="tb warn">tb</a>
</div>
<div class="col c3 gapless">
<a class="tb big warn">tb big</a>
<a class="tb big err">tb big</a>
<a class="tb big fatal">tb big</a>
</div>
<div class="col c5 gapless">
<a class="tb huge err">tb huge</a>
<a class="tb huge fatal">tb huge</a>
</div>
</div>
<h2>Classic</h2>
<a class="btn">btn</a>

8
src/buttons.less
View file

@ -3,12 +3,12 @@
cursor: pointer;
padding: 2px; }
.tb:before,.tb:after { opacity: 0.3; display: inline-block;}
.tb:before { content: "〈"; }
.tb:after { content: "〉"; }
.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: "》"; }
.tb:active:before { content: "❰"; }
.tb:active:after { content: "❱"; }
.btn {
background: var(--n0);

7
src/general.less
View file

@ -1,4 +1,4 @@
html,body { font-size: 12px; min-height: 100vh; margin: 0; padding:0; border: 0; outline: 0;}
html,body { font-size: 12px; line-height: 1em; min-height: 100vh; margin: 0; padding:0; border: 0; outline: 0;}
* { box-sizing: border-box; }
body, textarea, input, select {
background: var(--bg);
@ -35,5 +35,6 @@ code { background: var(--darken);
padding: 1px;
}
.big { font-size: 2em; }
.huge { font-size: 3em; }
.sm { font-size: 0.75rem; }
.big { font-size: 2rem; line-height: 2rem;}
.huge { font-size: 3rem; line-height: 3rem;}