new buttons and tweaked bg gradients
This commit is contained in:
parent
88b81681cb
commit
cd8c51097c
8 changed files with 255 additions and 108 deletions
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
77
style/checked.svg
Normal 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 |
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
#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;
|
||||
grid-area: unset;
|
||||
}
|
||||
|
||||
#filterstuff {
|
||||
grid-area: auto / span 2;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 0;
|
||||
gap: 2em;
|
||||
grid-area: unset;
|
||||
flex-flow: column;
|
||||
grid-gap: 0.2em;
|
||||
}
|
||||
|
||||
#filterstuff li {
|
||||
list-style: none;
|
||||
font-weight: 400;
|
||||
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%);
|
||||
|
|
|
|||
|
|
@ -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
20
style/unchecked.svg
Normal 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 |
Loading…
Reference in a new issue