Compare commits

...

4 Commits

12 changed files with 279 additions and 125 deletions

View File

@ -40,7 +40,7 @@ $(BUILDDIR)/index.html: $(DATADIR)/index.yaml $(MAKEPAGES)
$(BUILDDIR)/%: %
$(call copy,--link)
$(call copy,--link --force)
$(BUILDDIR)/%: $(TMPDIR)/%
$(call copy,--link)

View File

@ -9,7 +9,7 @@ import Data.Char (isLower, isSpace, isDigit, isAlphaNum)
import Language.Haskell.TH
import Language.Haskell.TH.Quote
import Data.List (intersperse)
import Data.Maybe (mapMaybe)
import Data.Maybe (mapMaybe, fromMaybe)
import Data.Text.Lazy.Builder
(Builder, fromText, fromLazyText, fromString, singleton, toLazyText)
import Text.Read (readMaybe)
@ -43,7 +43,7 @@ reindentB i (toLazyText -> str) =
dropIndent = LText.drop minIndent
minIndent =
getMin $ option 0 id $ foldMap (Option . Just . Min . indentOf) ls'
getMin $ fromMaybe 0 $ foldMap (Just . Min . indentOf) ls'
indentOf = go 0 where
go n (' ' :.. cs) = go (n + 1) cs
@ -69,8 +69,8 @@ chunks = reverse . go "" [] . trimEnd where
go acc cs ('$' :. rest@(d :. _)) | isDigit d =
go "" ((Var (Reindent n), var) : lit acc : cs) rest3
where
((read . Text.unpack -> n), '.' :. rest2) = Text.span isDigit rest
(var, rest3) = splitVar rest2
(read . Text.unpack -> n, rest2) = Text.span isDigit rest
(var, rest3) = splitVar $ Text.tail rest2
-- $var: expands to that var's contents
go acc cs ('$' :. rest) =

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

@ -18,7 +18,7 @@ import Data.Traversable
-- | e.g. only nsfw images are present for a non-nsfw page
data NoEligibleImages = NoEligibleImages {title :: !Strict.Text}
newtype NoEligibleImages = NoEligibleImages {title :: Strict.Text}
deriving stock Eq deriving anyclass Exception
instance Show NoEligibleImages where
@ -50,8 +50,11 @@ make' root siteName prefix nsfw _dataDir dir
let formattedDate = formatLong date
let buttonBar = makeButtonBar title $ addIds images
let image0@(Image {path = path0, download = download0'}) : otherImages =
#all images
let allImages = #all images
let image0@(Image {path = path0, download = download0'}) = head allImages
let otherImages = tail allImages
let download0 = fromMaybe (bigFile path0) download0'
let path0' = pageFile path0
@ -249,7 +252,7 @@ makeButtonBar title images =
<ul class="buttonbar bb-choice">
$2.elems
</ul> |]
where elems = map (\(img,i) -> altButton img i) imgs
where elems = map (uncurry altButton) imgs
skipAll =
if any (isJust . #warning . fst) images then
[b|@0
@ -285,7 +288,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

@ -61,8 +61,8 @@ executable make-pages
TransformListComp,
TypeApplications
build-depends:
base >= 4.12.0.0 && < 4.15,
bytestring ^>= 0.10.8.2,
base ^>= 4.16.4,
bytestring ^>= 0.11.3.1,
containers ^>= 0.6.0.1,
filemanip ^>= 0.3.6.3,
filepath ^>= 1.4.2.1,
@ -70,7 +70,7 @@ executable make-pages
HsYAML ^>= 0.2.1.0,
optparse-applicative ^>= 0.15.1.0,
process ^>= 1.6.8.2,
template-haskell ^>= 2.16.0.0,
template-haskell ^>= 2.18.0.0,
text ^>= 1.2.3.1,
time >= 1.8.0.2 && < 1.10,
unordered-containers ^>= 0.2.11.0

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;
}

View File

@ -28,7 +28,9 @@ function setImage(id, src, width, height, href, cw, firstLoad) {
let caption = document.getElementById('cw');
let newCaption;
if (!skipAll.checked && !opened.has(id) && cw) {
let checked = skipAll ? skipAll.checked : false;
if (!checked && !opened.has(id) && cw) {
newCaption = document.getElementById('cw-template')
.content.firstElementChild.cloneNode(true);
newCaption.querySelector('#cw-text').innerHTML = cw;
@ -96,10 +98,12 @@ function setup() {
button.onchange = e => { if (button.checked) activateButton(button); };
}
skipAll.onchange = e => { if (skipAll.checked) {
let caption = document.getElementById('cw');
if (caption) { openCW(null, caption, false); }
} };
if (skipAll) {
skipAll.onchange = e => { if (skipAll.checked) {
let caption = document.getElementById('cw');
if (caption) { openCW(null, caption, false); }
} };
}
window.addEventListener('popstate', useFragment);
useFragment(true);

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