add alternate versions for accessibility
This commit is contained in:
parent
c97d19663e
commit
8f6a3c77b6
3 changed files with 87 additions and 4 deletions
7
Makefile
7
Makefile
|
@ -2,7 +2,8 @@ FONTS = $(shell find fonts -type f)
|
||||||
CSS = style.css
|
CSS = style.css
|
||||||
PAGES = index.html
|
PAGES = index.html
|
||||||
IMAGES = \
|
IMAGES = \
|
||||||
mlem.gif icon.png niss_uwu_bg.png \
|
mlem.gif mlem_static.png icon.png \
|
||||||
|
niss_uwu_bg_dim.png niss_uwu_bg.png \
|
||||||
star_small.png sparkles_large.png niss_wave_large.png \
|
star_small.png sparkles_large.png niss_wave_large.png \
|
||||||
shortcake_large.png
|
shortcake_large.png
|
||||||
|
|
||||||
|
@ -44,6 +45,10 @@ $(BUILDDIR)/%_large.png: %.svg
|
||||||
@mkdir -p $(dir $@)
|
@mkdir -p $(dir $@)
|
||||||
@inkscape -e $@ -h 30 $< >/dev/null
|
@inkscape -e $@ -h 30 $< >/dev/null
|
||||||
|
|
||||||
|
$(BUILDDIR)/%_dim.png: %.png
|
||||||
|
@echo $(notdir $@)
|
||||||
|
@convert -channel A -evaluate Multiply 0.75 $< $@
|
||||||
|
|
||||||
clean:
|
clean:
|
||||||
$(RM) -r $(TMPDIR) $(BUILDDIR)
|
$(RM) -r $(TMPDIR) $(BUILDDIR)
|
||||||
|
|
||||||
|
|
|
@ -16,7 +16,10 @@
|
||||||
<div id=mlem>
|
<div id=mlem>
|
||||||
<p class='mlem-text niss'>“mlem”</p>
|
<p class='mlem-text niss'>“mlem”</p>
|
||||||
<p class='mlem-text nisse'>“mlem also”</p>
|
<p class='mlem-text nisse'>“mlem also”</p>
|
||||||
|
<picture>
|
||||||
|
<source srcset=mlem_static.png media='(prefers-reduced-motion)'>
|
||||||
<img src=mlem.gif alt='niss & nisse'>
|
<img src=mlem.gif alt='niss & nisse'>
|
||||||
|
</picture>
|
||||||
</div>
|
</div>
|
||||||
<h2>
|
<h2>
|
||||||
a
|
a
|
||||||
|
|
79
style.css
79
style.css
|
@ -9,11 +9,12 @@ body {
|
||||||
hsl(234deg, 100%, 76%),
|
hsl(234deg, 100%, 76%),
|
||||||
hsl(195deg, 100%, 67%)
|
hsl(195deg, 100%, 67%)
|
||||||
);
|
);
|
||||||
|
--bg-image: url(niss_uwu_bg.png);
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background:
|
background:
|
||||||
url(niss_uwu_bg.png) top center fixed,
|
var(--bg-image) top center fixed,
|
||||||
var(--gradient) fixed;
|
var(--gradient) fixed;
|
||||||
background-blend-mode: overlay;
|
background-blend-mode: overlay;
|
||||||
}
|
}
|
||||||
|
@ -65,7 +66,7 @@ h1 {
|
||||||
}
|
}
|
||||||
.niss { bottom: 100%; left: 20px; }
|
.niss { bottom: 100%; left: 20px; }
|
||||||
.nisse { bottom: 85%; right: 0; }
|
.nisse { bottom: 85%; right: 0; }
|
||||||
#mlem img {
|
#mlem picture {
|
||||||
filter: drop-shadow(0 0 30px hsla(52deg, 85%, 95%, 75%));
|
filter: drop-shadow(0 0 30px hsla(52deg, 85%, 95%, 75%));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -171,3 +172,77 @@ footer a {
|
||||||
background-blend-mode: initial;
|
background-blend-mode: initial;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/******************************/
|
||||||
|
/* actual accessibility stuff */
|
||||||
|
/******************************/
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
/* see also the alternate source in #mlem > picture */
|
||||||
|
.mlem-text {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ~the "not actually supported by browsers yet" zone~ */
|
||||||
|
@media (prefers-contrast: high) {
|
||||||
|
body {
|
||||||
|
--gradient:
|
||||||
|
linear-gradient(to bottom,
|
||||||
|
hsl(42deg, 56%, 55%),
|
||||||
|
hsl(348deg, 56%, 55%),
|
||||||
|
hsl(334deg, 60%, 43%),
|
||||||
|
hsl(234deg, 60%, 40%),
|
||||||
|
hsl(195deg, 60%, 44%)
|
||||||
|
);
|
||||||
|
--bg-image: url(niss_uwu_bg_dim.png);
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
background: hsla(0, 0%, 0%, 60%);
|
||||||
|
border-color: hsla(0, 0%, 0%, 30%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cake::before, .cake::after,
|
||||||
|
header rt::before, header rt::after,
|
||||||
|
section h2::before, section h2::after {
|
||||||
|
mix-blend-mode: screen;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: underline;
|
||||||
|
text-decoration-thickness: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
background: hsla(0, 0%, 0%, 50%);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer a {
|
||||||
|
color: hsl(254deg, 100%, 85%);
|
||||||
|
}
|
||||||
|
|
||||||
|
footer .emojo {
|
||||||
|
background: hsla(52deg, 85%, 95%, 75%);
|
||||||
|
padding: 2px;
|
||||||
|
border-radius: 1000px;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mlem picture {
|
||||||
|
filter: drop-shadow(0 0 20px hsla(52deg, 85%, 95%, 35%));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-transparency) {
|
||||||
|
body {
|
||||||
|
background: var(--gradient) fixed;
|
||||||
|
background-blend-mode: initial;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Add table
Reference in a new issue