Add an anti-darkreader rant

This commit is contained in:
Emi Simpson 2021-11-10 15:21:24 -05:00
parent 1df4b83e5e
commit 773c962e13
Signed by: Emi
GPG Key ID: A12F2C2FFDC3D847
7 changed files with 202 additions and 38 deletions

View File

@ -0,0 +1,47 @@
<section>
<p>
<b>Short Answer:</b>
Dark reader messes with the formatting of my site, and I don't like that
</p>
</section>
<section>
<p>
<b>Long Answer:</b>
Philosophically, extensions like dark reader view websites as sources of
information to be consumed, and understands the <i>most efficient</i> way of
consuming that information as the <i>best</i> way of consuming that
information.
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
</section>
<section>
<p>
<b>Accessibility Concerns:</b>
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.
</p>
<p>
If this is a poor accommodation of your disability, or you need another
service, please reach out to me at
<a href="mailto:emi@alchemi.dev">emi@alchemi.dev</a>, and I will do my best
to try to meet your need.
</p>
</section>

View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=525">
<title>{{ page.title }}</title>
<link rel="stylesheet" href="{{ site.base_url }}/static/common-style.css"/>
<link rel="stylesheet" href="{{ site.base_url }}/static/hyper-accessible-style.css"/>
</head>
<body>
{% assign sections=page.content | split: "<p>. . .</p>" %}
<main style="--section-count: {{sections | size}}">
{% for section in sections %}
<section style="--section-number: {{ forloop.index }}">
{{ section }}
</section>
{% endfor %}
</main>
</body>
</html>

View File

@ -4,7 +4,8 @@
<meta charset="utf-8">
<meta name="viewport" content="width=525">
<title>{{ site.title }}</title>
<link rel="stylesheet" href="{{ site.base_url }}/static/style.css"/>
<link rel="stylesheet" href="{{ site.base_url }}/static/landing-style.css"/>
<link rel="stylesheet" href="{{ site.base_url }}/static/common-style.css"/>
</head>
<body>
<header>
@ -67,5 +68,17 @@
</div>
</footer>
</main>
<div id="disable-darkreader-popup">
<h2>Please disable darkreader</h2>
<details id="darkreader-why">
<summary>why?</summary>
<a class="dark-a11y" href="{{site.base_url}}/darkreader-a11y">
View an accessible version of this blurb
</a>
{% include "why-darkreader.html" %}
</details>
</div>
</body>
</html>

8
darkreader-a11y.md Normal file
View File

@ -0,0 +1,8 @@
---
layout: hyper-accessible.liquid
permalink: /darkreader-a11y
title: Why I Dislike Darkreader
---
# Why I Dislike Darkreader
{% include "why-darkreader.html" %}

39
static/common-style.css Normal file
View File

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

View File

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

View File

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