Fix nav, new webp image
This commit is contained in:
parent
10dd5bc219
commit
81eea93929
10 changed files with 53 additions and 18 deletions
2
brut-nocolors.min.css
vendored
2
brut-nocolors.min.css
vendored
|
@ -1 +1 @@
|
|||
:root{--bg:#fff;--fg:#000;--bg2:#eee;--darken:rgba(0, 0, 0, 0.1);--nl:#d9d9d9;--n0:#999;--n1:#8c8c8c;--n2:#808080;--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:#8c8c8c;--n2:#999999;--shadow:rgba(128, 128, 128, 0.3);--cnt:#000;--na:#eee;--nb:#fff}}.neutral{color:var(--cn-0)}.bg-neutral{background:var(--nl)}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}.tb,.btn,.nav a{text-decoration:none}.container{padding: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;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}.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(--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;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(--i1)}.nav,.nav .current,.nav .pagename,.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(--nl);border-left:5px solid var(--n0);padding:1.5em}
|
||||
:root{--bg:#fff;--fg:#000;--bg2:#eee;--darken:rgba(0, 0, 0, 0.1);--nl:#d9d9d9;--n0:#999;--n1:#8c8c8c;--n2:#808080;--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:#8c8c8c;--n2:#999999;--shadow:rgba(128, 128, 128, 0.3);--cnt:#000;--na:#eee;--nb:#fff}}.neutral{color:var(--cn-0)}.bg-neutral{background:var(--nl)}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}.tb,.btn,.nav a{text-decoration:none}.container{padding: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;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}.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(--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;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(--i1)}.nav{background:var(--bg2);border-bottom:solid 1px var(--darken)}.nav{height:50px;padding:11px 0 15px}.nav a{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:1.5em}
|
2
brut.min.css
vendored
2
brut.min.css
vendored
File diff suppressed because one or more lines are too long
|
@ -29,17 +29,17 @@
|
|||
<div class="c4">
|
||||
<div class="block">
|
||||
Inside a block.
|
||||
<img src="img/brutalism.jpg" alt="brutalism"/>
|
||||
<img src="img/brutalism.webp" alt="brutalism"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="c4">
|
||||
Direct in column:
|
||||
<img src="img/brutalism.jpg" alt="brutalism"/>
|
||||
<img src="img/brutalism.webp" alt="brutalism"/>
|
||||
</div>
|
||||
<div class="c4">
|
||||
<div class="card">
|
||||
Inside a card.
|
||||
<img src="img/brutalism.jpg" alt="brutalism"/>
|
||||
<img src="img/brutalism.webp" alt="brutalism"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -17,7 +17,7 @@
|
|||
</div>
|
||||
</nav>
|
||||
<button class="btn sm btn-close">×</button>
|
||||
<div class="central" style="background-image:url('img/brutalism.jpg')">
|
||||
<div class="central" style="background-image:url('img/brutalism.webp')">
|
||||
<a class="btn warn huge" href="../brut.min.css">Download BRUT</a>
|
||||
</div>
|
||||
</body>
|
||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 2.2 MiB |
BIN
h/img/brutalism.webp
Normal file
BIN
h/img/brutalism.webp
Normal file
Binary file not shown.
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
Before Width: | Height: | Size: 2.2 MiB |
|
@ -20,7 +20,7 @@
|
|||
<div class="hero bg-neutral">
|
||||
<div class="row">
|
||||
<div class="col c3">
|
||||
<img src="h/img/brutalisme.jpg" alt="brutalisme"/>
|
||||
<img src="h/img/brutalism.webp" alt="brutalism"/>
|
||||
</div>
|
||||
<div class="col c6">
|
||||
<h1 class="title">BRUT</h1>
|
||||
|
@ -32,7 +32,7 @@
|
|||
</p>
|
||||
</div>
|
||||
<div class="col c3">
|
||||
<img src="h/img/brutalisme.jpg" alt="brutalisme" style="transform:scaleX(-1)"/>
|
||||
<img src="h/img/brutalism.webp" alt="brutalisme" style="transform:scaleX(-1)"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
32
optim-img.sh
Executable file
32
optim-img.sh
Executable file
|
@ -0,0 +1,32 @@
|
|||
#!/usr/bin/env zsh
|
||||
|
||||
src="$1"
|
||||
dst="$2"
|
||||
|
||||
sizeof() {
|
||||
stat --format="%s" "$*"
|
||||
}
|
||||
|
||||
|
||||
convert "$src" -resize 800x800\> "$dst"
|
||||
|
||||
before=$(sizeof $src)
|
||||
|
||||
if [[ "${src:e}" == "gif" ]]; then
|
||||
after=$(sizeof $dst)
|
||||
dest=$dst
|
||||
else
|
||||
cwebp "$dst" -quiet -o "$dst.webp"
|
||||
after=$(sizeof $dst.webp)
|
||||
dest=$dst.webp
|
||||
fi
|
||||
|
||||
|
||||
if (( before <= after )); then
|
||||
cp -f "$src" "$dst"
|
||||
print -- "[0%] cp $before => $before"
|
||||
else
|
||||
gain=$(( ( (before - after) * 100 ) / before ))
|
||||
print -- "[$gain%] convert $before => $after"
|
||||
fi
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
.nav, .nav .current, .nav .pagename, .nav a:hover {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
.nav {
|
||||
background: var(--bg2);
|
||||
border-bottom: solid 1px var(--darken);
|
||||
}
|
||||
|
||||
.nav {
|
||||
|
@ -13,27 +13,30 @@
|
|||
}
|
||||
|
||||
.nav a {
|
||||
color: #aaa;
|
||||
opacity: 0.7;
|
||||
padding-right: 1em;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
.nav a:hover { opacity: 1; }
|
||||
|
||||
.nav .pagename {
|
||||
opacity: 1;
|
||||
font-weight: bold;
|
||||
font-size: 22px;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
.btn.btn-close {
|
||||
background: #000;
|
||||
color: #aaa;
|
||||
float: right;
|
||||
font-size: 25px;
|
||||
margin: -54px 7px;
|
||||
margin: -51px 10px;
|
||||
display: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
|
||||
}
|
||||
.btn.btn-close:hover { color: #fff; }
|
||||
|
||||
@media (max-width:500px) {
|
||||
.btn.btn-close {
|
||||
|
@ -54,8 +57,8 @@
|
|||
*/
|
||||
}
|
||||
.nav div:before {
|
||||
background: var(--fg);
|
||||
border-bottom: 10px double;
|
||||
background: var(--bg2);
|
||||
border-bottom: 11px double;
|
||||
border-top: 3px solid;
|
||||
content: '';
|
||||
float: right;
|
||||
|
|
Loading…
Reference in a new issue