diff --git a/_includes/why-darkreader.html b/_includes/why-darkreader.html new file mode 100644 index 0000000..c87ae6b --- /dev/null +++ b/_includes/why-darkreader.html @@ -0,0 +1,47 @@ +
+

+ Short Answer: + Dark reader messes with the formatting of my site, and I don't like that +

+
+
+

+ Long Answer: + Philosophically, extensions like dark reader view websites as sources of + information to be consumed, and understands the most efficient way of + consuming that information as the best way of consuming that + information. +

+

+ I think this is true for a lot of websites, especially websites that are + primarily tools or repositories of raw information. For sites like these, I + encourage you to customize the fuck out of them, and browse however makes + you feel comfortable. +

+

+ But I think there's another category of website — expressive websites. + Websites that are artistic first, and communicate just as much, if not more, + through design as through words and images. +

+

+ That's the category that I hope my website falls into. And maybe you don't + like my design choices, or you think my site sucks, and that's okay. But + it's still my art and I'm proud of it, and I'd really appreciate it if you + experienced it as it is. +

+
+
+

+ Accessibility Concerns: + Some people may use tools like dark reader in order to accommodate for a + disability. To this end, reader mode is available for every + content-containing page on this site. After enabling reader mode from your + browser's UI, you will be able to change the font size, styling, and color. +

+

+ If this is a poor accommodation of your disability, or you need another + service, please reach out to me at + emi@alchemi.dev, and I will do my best + to try to meet your need. +

+
diff --git a/_layouts/hyper-accessible.liquid b/_layouts/hyper-accessible.liquid new file mode 100644 index 0000000..9f4f643 --- /dev/null +++ b/_layouts/hyper-accessible.liquid @@ -0,0 +1,20 @@ + + + + + + {{ page.title }} + + + + + {% assign sections=page.content | split: "

. . .

" %} +
+ {% for section in sections %} +
+ {{ section }} +
+ {% endfor %} +
+ + diff --git a/_layouts/landing.liquid b/_layouts/landing.liquid index 40849a2..ab35590 100644 --- a/_layouts/landing.liquid +++ b/_layouts/landing.liquid @@ -4,7 +4,8 @@ {{ site.title }} - + +
@@ -67,5 +68,17 @@ +
+

Please disable darkreader

+
+ why? + + + View an accessible version of this blurb + + {% include "why-darkreader.html" %} + +
+
diff --git a/darkreader-a11y.md b/darkreader-a11y.md new file mode 100644 index 0000000..265e833 --- /dev/null +++ b/darkreader-a11y.md @@ -0,0 +1,8 @@ +--- +layout: hyper-accessible.liquid +permalink: /darkreader-a11y +title: Why I Dislike Darkreader +--- +# Why I Dislike Darkreader + +{% include "why-darkreader.html" %} diff --git a/static/common-style.css b/static/common-style.css new file mode 100644 index 0000000..baa34c3 --- /dev/null +++ b/static/common-style.css @@ -0,0 +1,39 @@ +/* General Styling */ +body { + font-family: Fengardo Neue; + font-size: 1.2rem; +} +h1, h2, h3, h4, h5, h6 { + font-family: Avara Bold; + color: #f10385; +} + +/* Fonts */ +@font-face { + font-family: Avara Bold; + src: url(/static/avara.woff2) format("woff2"); +} + +@font-face { + font-family: Fengardo Neue; + src: url(/static/fengardo-neue.woff) format("woff"); +} + +/* Flag Styling */ +.flag { + display: grid; + grid-auto-flow: column; + width: 200px; + height: 10px; + border-radius: 3px; + overflow: hidden; +} +.flag > div { + height: 10px; +} +footer { + display: grid; + justify-items: center; + align-items: center; + padding-bottom: 50px; +} diff --git a/static/hyper-accessible-style.css b/static/hyper-accessible-style.css new file mode 100644 index 0000000..404b97e --- /dev/null +++ b/static/hyper-accessible-style.css @@ -0,0 +1,22 @@ +body { + display: grid; + justify-content: center; + align-content: center; + background-color: #181a1b; + color: white; + margin: 80px 0; +} +main { + max-width: 500px; + margin: 20px; +} +h1 { + color: #f10385; +} +section { + margin: 60px 0; +} +a { + color: #a692dd; + font-weight: bold; +} diff --git a/static/style.css b/static/landing-style.css similarity index 76% rename from static/style.css rename to static/landing-style.css index df668a1..cbca0b1 100644 --- a/static/style.css +++ b/static/landing-style.css @@ -1,21 +1,7 @@ -/* Fonts */ -@font-face { - font-family: Avara Bold; - src: url(/static/avara.woff2) format("woff2"); -} - -/* Fonts */ -@font-face { - font-family: Fengardo Neue; - src: url(/static/fengardo-neue.woff) format("woff"); -} - /* Basic styling */ body { margin: 0; color: white; - font-family: Fengardo Neue; - font-size: 1.2rem; background-color: #141016; } @@ -52,25 +38,6 @@ header p { margin: 0 20px; } -/* Flag Styling */ -.flag { - display: grid; - grid-auto-flow: column; - width: 200px; - height: 10px; - border-radius: 3px; - overflow: hidden; -} -.flag > div { - height: 10px; -} -footer { - display: grid; - justify-items: center; - align-items: center; - padding-bottom: 50px; -} - /* Styles for the cards */ #cards { display: grid; @@ -172,10 +139,6 @@ footer { } /* General Markdown Styling */ -h2 { - font-family: Avara Bold; -} - code { background-color: rgba(200, 200, 200, 0.1); padding: 2px 5px; @@ -220,3 +183,55 @@ main > section { svg { fill: currentColor; } + +/******************* + * Fuck Darkreader * + *******************/ +html[data-darkreader-mode] body > :not(#disable-darkreader-popup) { + display: none; +} +html:not([data-darkreader-mode]) #disable-darkreader-popup { + display: none; +} +html[data-darkreader-mode] #disable-darkreader-popup { + display: grid; +} +#disable-darkreader-popup { + font-family: Avara Bold; + position:absolute; + height: 100%; + width: 100%; + justify-items: center; + align-content: center; + background: radial-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.5)); +} +#darkreader-why > summary{ + list-style-type: none; + color: #AA89FD; +} +#darkreader-why > summary:hover { + text-decoration: underline; +} +#darkreader-why[open] > summary{ + display: none; +} +#darkreader-why[open] { + font-family: Fengardo Neue; + max-width: 500px; + margin: 0 40px; +} +#darkreader-why > section { + margin: 50px 0; +} +.dark-a11y { + background-color: black; + padding: 10px; + font-weight: bold; + color: white; + text-align: center; + display: block; + font-size: 1.1em; +} +.dark-a11y:not(:hover) { + text-decoration: none; +}