new buttons and tweaked bg gradients

This commit is contained in:
rhiannon morris 2022-12-30 03:19:33 +01:00
parent 88b81681cb
commit cd8c51097c
8 changed files with 255 additions and 108 deletions

View File

@ -62,12 +62,12 @@ make' root (GalleryInfo {title, desc, prefix, filters, hidden}) infos = [b|@0
<summary><h2>filters</h2></summary>
<div>
<h3>show only</h3>
<ul id=require class="buttonbar bb-choice">
<ul id=require class=filterlist>
$10.requireFilters
</ul>
<h3>exclude</h3>
<ul id=exclude class="buttonbar bb-choice">
<ul id=exclude class=filterlist>
$10.excludeFilters
</ul>

View File

@ -285,7 +285,7 @@ makeTags undir tags =
if null tags then "" else [b|@0
<nav id=tags class=info-section>
<h2>tags</h2>
<ul class="buttonbar bb-links">
<ul>
$4.tagList
</ul>
</nav>

View File

@ -71,8 +71,8 @@ function clear(e) {
function toggleSingles(e) {
showSingles = !showSingles;
for (let li of document.querySelectorAll('#filters li')) {
let count = li.querySelector('label').dataset.count;
for (let li of document.querySelectorAll('.filterlist li')) {
let count = +li.querySelector('label').dataset.count;
if (count <= 1) {
li.hidden = !showSingles;
}

77
style/checked.svg Normal file
View File

@ -0,0 +1,77 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="100%"
height="100%"
viewBox="0 0 32 32"
version="1.1"
xml:space="preserve"
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;"
id="svg13"
sodipodi:docname="checked.svg"
inkscape:version="1.0.2 (e86c870879, 2021-01-15)"><defs
id="defs17" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="2419"
inkscape:window-height="1748"
id="namedview15"
showgrid="false"
inkscape:zoom="22.34375"
inkscape:cx="16"
inkscape:cy="16"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="0"
inkscape:current-layer="emoji" />
<metadata
id="metadata2">
<rdf:RDF>
<rdf:Description
rdf:about="">
<dc:title>Mutant Standard emoji 2020.04</dc:title>
</rdf:Description>
<cc:work
rdf:about="">
<cc:license
rdf:resource="http://creativecommons.org/licenses/by-nc-sa/4.0/" />
<cc:attributionName>Dzuk</cc:attributionName>
<cc:attributionURL>http://mutant.tech/</cc:attributionURL>
</cc:work>
<cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF>
</metadata>
<rect
id="large_blue_diamond"
x="0"
y="0"
width="32"
height="32"
style="fill:none;" /><g
id="outline"><path
d="M3,15l13,-13l13,13l0,2l-13,13l-13,-13l0,-2Z"
style="fill:none;stroke:#000;stroke-width:4px;"
id="path5" /></g><g
id="emoji"><path
d="M3,17l0,-2l13,-11l13,11l0,2l-13,13l-13,-13Z"
style="fill:#1598db;fill-opacity:1"
id="path8" /><path
d="M29,15l-13,13l-13,-13l13,-13l13,13Z"
style="fill:#6bddf4;fill-opacity:1"
id="path10" /></g></svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

View File

@ -1,6 +1,8 @@
@import url(/fonts/muller/muller.css);
:root {
/* old slightly-muted gradient */
/*
--gradient:
linear-gradient(135deg,
hsl(42deg, 67%, 70%),
@ -10,24 +12,38 @@
hsl(195deg, 67%, 67%),
hsl(155deg, 57%, 62%)
);
*/
/* bright colours from yummy.cricket bg */
--gradient:
linear-gradient(135deg,
hsl(42deg, 92%, 70%),
hsl(348deg, 92%, 70%),
hsl(334deg, 100%, 80%),
hsl(234deg, 100%, 76%),
hsl(195deg, 100%, 67%),
hsl(155deg, 70%, 62%)
);
--text-col: white;
--text-shadow-col: hsl(0, 0%, 0%, 75%);
--text-shadow: 2px 2px 3px var(--text-shadow-col);
--nsfw-sticker-rotate: 15deg;
--focus-box: 0 0 20px hsl(55deg, 60%, 90%, 80%);
--focus-box: 0 0 5px hsl(55deg, 60%, 90%, 80%);
--focus-text: hsl(334deg, 87%, 90%);
--shadow-col: hsl(42deg, 82%, 90%, 75%);
--border-col: var(--text-col);
--border: 3px solid var(--border-col);
--border-radius: 1.5em;
--shadow: 0 0 3em var(--shadow-col);
--background: hsla(0, 0%, 0%, 60%);
--button-bg: hsl(330deg, 40%, 16%, 100%);
--button-corner: 0.25em;
--button-bg: hsla(0deg, 0%, 0%, 20%);
--button-bg-selected: hsla(0deg, 0%, 100%, 20%);
--button-border: 1px solid hsla(0deg, 0%, 0%, 40%);
--button-border-selected: 1px solid hsla(0deg, 0%, 100%, 30%);
--button-pad: 0.15em 0.8em;
--button-radius: 1000px;
font-family: Muller;
font-size: x-large;
@ -50,7 +66,6 @@ h3 { font-size: 110%; }
.page {
background: var(--background);
border: var(--border);
box-shadow: var(--shadow);
position: relative;
padding: 2em 4em;
@ -68,9 +83,9 @@ header h1 {
a {
color: inherit;
text-decoration: dotted underline;
text-decoration-thickness: 2px;
}
a:focus {
outline: none;
color: var(--focus-text);
@ -152,12 +167,10 @@ figure > img {
.buttonbar label, .bb-links li {
margin-right: 0.5em;
padding: 0 0.35em;
border-radius: var(--button-corner);
border: 1px solid var(--text-col);
padding: var(--button-pad);
background: var(--button-bg);
text-shadow: none;
border: var(--button-border);
border-radius: var(--button-radius);
}
.buttonbar :focus ~ label, .bb-links li:focus-within {
@ -165,14 +178,14 @@ figure > img {
}
.buttonbar :checked ~ label {
color: var(--button-bg);
background: var(--text-col);
background: var(--button-bg-selected);
border-color: var(--button-border-selected);
}
summary {
summary, summary h2 {
cursor: pointer;
position: relative;
display: inline;
}
summary:focus-within {
@ -183,28 +196,16 @@ summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after {
--fg: var(--text-col);
--bg: var(--button-bg);
background: var(--bg);
color: var(--fg);
text-shadow: none;
border: 1px solid var(--fg);
border-radius: var(--button-corner);
position: absolute;
right: 0; top: 0;
padding: 2px 5px;
margin-left: 1ex;
display: inline-block;
margin-left: 1.5em;
padding: var(--button-pad);
background: var(--button-bg);
border: var(--button-border);
border-radius: var(--button-radius);
}
details summary::after { content: 'show'; }
details[open] summary::after {
content: 'hide';
--fg: var(--button-bg);
--bg: var(--text-col);
}
summary::after { content: 'show'; }
[open] summary::after { content: 'hide'; }
dt {
@ -252,18 +253,19 @@ p {
:root {
--gradient:
linear-gradient(135deg,
hsl(42deg, 27%, 25%),
hsl(348deg, 27%, 25%),
hsl(334deg, 32%, 25%),
hsl(234deg, 57%, 23%),
hsl(195deg, 27%, 20%),
hsl(155deg, 22%, 20%)
hsl(42deg, 37%, 20%),
hsl(348deg, 37%, 20%),
hsl(334deg, 42%, 20%),
hsl(234deg, 67%, 18%),
hsl(195deg, 37%, 15%),
hsl(155deg, 32%, 15%)
);
--text-col: hsl(55deg, 60%, 90%);
}
body {
--shadow-col: hsl(42deg, 82%, 90%, 20%);
--button-bg-selected: hsla(55deg, 40%, 95%, 20%);
--button-border-selected: 1px solid hsl(55deg, 60%, 90%, 40%);
--button-bg: hsla(0deg, 0%, 0%, 50%);
--button-border: 1px solid hsla(0deg, 0%, 100%, 40%);
--border-col: black;
}

View File

@ -10,12 +10,15 @@
.page { max-width: 80%; }
}
#filters {
margin: 1em 0 2em 0;
}
#filters div {
display: grid;
grid-template-columns: 15% auto;
align-items: baseline;
grid-gap: 0.5em 0.75em;
margin: 1em 0 2em 0;
grid-gap: 0.75em;
}
#filters h3 {
@ -27,70 +30,106 @@
grid-area: auto / 1;
}
#singles {
text-align: left;
grid-area: auto / 2;
.filterlist {
display: flex;
flex-flow: row wrap;
/* justify-content: space-between; */
padding: 0;
font-weight: 500;
font-size: 90%;
grid-gap: 0.5em 1em;
}
.filterlist input {
appearance: none;
}
.filterlist li:not([hidden]) {
display: block;
}
.filterlist li:focus-within {
color: var(--focus-text);
}
.filterlist label {
padding: 0.15em 0.4em;
border-radius: var(--button-radius);
background: var(--button-bg);
border: var(--button-border);
}
.filterlist label::before {
content: url('/style/unchecked.svg');
display: inline-block;
height: 1em;
width: 1em;
vertical-align: -15%;
padding-right: 0.25em;
text-shadow: none;
}
.filterlist :checked + label::before { content: url('/style/checked.svg'); }
.filterlist label:not([data-count="1"])::after {
content: attr(data-count);
font-size: 80%;
font-weight: 400;
padding: 0 0.5em;
}
.filterlist [data-count="1"] {
font-size: 85%;
padding-right: 0.8em;
}
.filterlist input {
margin: 0;
}
#filterstuff {
padding: 0;
grid-area: auto / span 2;
display: flex;
justify-content: center;
margin-top: 0;
grid-gap: 2em;
}
#filterstuff li {
list-style: none;
display: inline-block;
padding: var(--button-pad);
border-radius: var(--button-radius);
background: var(--button-bg);
border: var(--button-border);
}
#filterstuff a {
font-weight: 500;
text-decoration: none;
}
@media (max-width: 80rem) {
#filters div {
grid-template-columns: auto;
}
#filters h3 {
text-align: left;
grid-area: unset;
}
}
#filters .bb-choice {
font-weight: 400;
font-size: 90%;
margin: 0;
border-radius: 0.5em;
border: 1px solid var(--text-col);
overflow: hidden;
background: var(--text-col);
grid-gap: 1px;
}
#filterstuff {
grid-area: unset;
flex-flow: column;
grid-gap: 0.2em;
}
#filters .bb-choice:focus-within {
box-shadow: var(--focus-box);
}
#filters .bb-choice li {
margin: 0;
flex-grow: 1;
}
#filters li:focus-within {
color: var(--focus-text);
}
#filters label {
display: block;
margin: 0;
border-radius: 0;
padding: 0.15em 0.5em;
text-align: center;
border: none;
box-shadow: none;
}
#filters label[data-count]::after {
content: '(' attr(data-count) ')';
font-size: 80%;
padding-left: 0.25em;
}
#filterstuff {
grid-area: auto / span 2;
display: flex;
justify-content: center;
margin-top: 0;
gap: 2em;
}
#filterstuff li {
list-style: none;
font-weight: 400;
#filterstuff li {
border-radius: 1em;
}
}
@ -115,7 +154,7 @@
.item:not(.year-marker) {
box-shadow: var(--text-shadow);
border: var(--border-thickness) solid var(--text-col);
border: var(--border-thickness) solid var(--border-col);
border-radius: 0.5em;
background: hsl(340, 45%, 65%);
}
@ -132,7 +171,7 @@ figure {
figcaption .date, figcaption .title {
position: absolute;
width: 100%;
border: 1px solid var(--text-col);
border: 1px solid var(--border-col);
display: block;
text-align: center;
background: hsl(0, 0%, 0%, 75%);

View File

@ -17,7 +17,7 @@
width: min-content;
position: relative;
overflow: hidden;
border: var(--border-thickness) solid var(--text-col);
border: var(--border-thickness) solid var(--border-col);
border-radius: 1em;
box-shadow: var(--text-shadow);
background: hsl(340, 45%, 65%);
@ -221,3 +221,12 @@ footer {
justify-content: end;
grid-area: 1 / 3 / auto / auto;
}
#tags ul {
padding: 0;
}
#tags li {
display: inline;
margin-right: 0.75em;
}

20
style/unchecked.svg Normal file
View File

@ -0,0 +1,20 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
<metadata>
<rdf:RDF xmlns:cc="http://web.resource.org/cc/"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:dc = "http://purl.org/dc/elements/1.1/"
>
<rdf:Description rdf:about="">
<dc:title>Mutant Standard emoji 2020.04</dc:title>
</rdf:Description>
<cc:work rdf:about="">
<cc:license rdf:resource="http://creativecommons.org/licenses/by-nc-sa/4.0/"/>
<cc:attributionName>Dzuk</cc:attributionName>
<cc:attributionURL>http://mutant.tech/</cc:attributionURL>
</cc:work>
</rdf:RDF>
</metadata>
<rect id="small_white_square" x="0" y="0" width="32" height="32" style="fill:none;"/><g id="outline"><rect x="12" y="11" width="8" height="10" style="fill:none;stroke:#000;stroke-width:4px;"/></g><g id="emoji"><path d="M20,21l-8,0l0,-2l2,-2l4,0l2,2l0,2Z" style="fill:#b2b2b2;"/><rect x="12" y="11" width="8" height="8" style="fill:#fff;"/></g></svg>

After

Width:  |  Height:  |  Size: 1.4 KiB