fix CSS contrast ratio

Signed-off-by: Xe <me@christine.website>
This commit is contained in:
Cadey Ratio 2021-12-19 17:54:02 +00:00
parent 540ae4a3a9
commit 66fd857b56
8 changed files with 202 additions and 9 deletions

View File

@ -0,0 +1,139 @@
---
title: "Site Updates: Better Contrast Ratio and Using Xeact"
date: 2021-12-19
---
Happy holidays all! As the year rolls to a close I wanted to take a moment to
let you know of some improvements that I've done over the year to try and make
the reading experience as best as it can be.
## Better Contrast Ratio
Over the years I have gotten reports that my site is hard to read. I've been
taking them seriously but I have never really been sure what to do about them. I
think I have found the core of the problem and I have changed the site's
contrast ratio to hopefully have more contrast between the text of the website
and the background.
Here are some comparisons to before and after the change:
<div style="background-color:#000000;padding:0.5em">
<div style="background-color:#282828;color:#fbf1c7;padding:1em">
This is what my site looked like before I made the changes (dark mode).
</div>
<div style="padding:0.25em"></div>
<div style="background-color:#1d2021;color:#f9f5d7;padding:1em">
This is what my site looks like after I made the changes (dark mode).
</div>
<div style="padding:0.25em"></div>
<div style="color:#282828;background-color:#fbf1c7;padding:1em">
This is what my site looked like before I made the changes (light mode).
</div>
<div style="padding:0.25em"></div>
<div style="color:#1d2021;background-color:#f9f5d7;padding:1em">
This is what my site looks like after I made the changes (light mode).
</div>
</div>
Hopefully this should improve the contrast ratio a lot more. I've always wanted
this website to look a lot like [my emacs
config](https://cdn.christine.website/file/christine-static/blog/Screenshot+from+2021-12-19+12-06-39.png),
but these changes should hopefully reach a balance of readability and stylistic
choices to get across the vision I have for my website.
## Using Xeact
<noscript>
Sorry, but you may want to scroll past this section. At the time of writing I
don't currently have a good fallback set up for people that don't have
JavaScript enabled on their browser. If you have ideas, please [email
me](mailto:me@christine.website) and let me know them.
</noscript>
I want to use [Xeact](https://christine.website/blog/xeact-0.0.69-2021-11-18)
more in my website. I am trying to hit a balance of avoiding structural
JavaScript while also allowing me to experiment with new and interesting ways of
doing things. To this end I have created a custom HTML element that allows me to
embed the little conversation fragments that I feel makes this blog unique. They
are currently done by [a horrific hack I made to my markdown
parser](https://github.com/Xe/site/blob/540ae4a3a9735d3f55ebceb1d271e472cd7f950e/src/app/markdown.rs#L38-L65).
This also makes it hard for me to put links in the little conversation
fragments, so when you see me do that, that's because I've written something of
this form:
```markdown
[This is a test <a href="https://zombo.com">with a link</a>.](conversation://Mara/hacker)
```
[This is a test <a href="https://zombo.com">with a link</a>.](conversation://Mara/hacker)
This has become an unworkable mess. With the [html
component](https://github.com/Xe/site/blob/540ae4a3a9735d3f55ebceb1d271e472cd7f950e/static/js/conversation.js)
I made recently, I can instead write things that look like this:
```markdown
<xeblog-conv name="Mara" mood="hacker">
This is a test [with a link](https://zombo.com).
</xeblog-conv>
```
<xeblog-conv name="Mara" mood="hacker">
This is a test [with a link](https://zombo.com).
</xeblog-conv>
This lets me use Xeact in a way that allows me to enhance the experience of
using my website as well as my experience in writing it. I don't really like how
this adds JavaScript into the mix for rendering the page. I have tried to avoid
it, but this is getting unworkable for me. When I get things to the point that I
feel more comfortable with making it the default option (this may involve some
custom hacking to the CSS to make it degrade more gracefully, I don't know what
I'm doing here), I will use it more as my main way to write these asides. Until
then, I can deal with the link syntax form. I may end up writing something to
munge things into place.
This also depends on you having modern JavaScript support. I can't change
anything about that without introducing pain and suffering to my development
workflow.
<xeblog-conv name="Cadey" mood="coffee">
This also breaks people reading the RSS feed, but it's already been [pretty darn
broken](https://github.com/Xe/site/issues/388) already. Worst case this makes
people a bit confused with the RSS feed, but until I can find a good workaround
I think I can tolerate this weirdness.
I am not good with CSS.
</xeblog-conv>
## Server-side Syntax Highlighting
You may have noticed that code syntax highlighting has a notably different color
scheme to it compared to the rest of the blog as of late. This is not on
accident. I used to use [Prism](https://prismjs.com/) to do this on the client
side. This worked great, but Prism is a huge (near 1 MB) download. I really want
to avoid wasting bandwidth, so I added this at the markdown rendering step with
[syntect](https://docs.rs/syntect/latest/syntect/). The theme I use
(base16-mocha) is not perfectly aligned with my editor, but this is as close as
I can get with their default themes until I have the energy to port gruvbox into
this.
Hopefully this should work in the RSS feed too.
---
Have a good rest of the year and stay safe! I'm gonna try and take a load off
over the holidays, so I may end up posting less frequently. 2021 has been a lot.
[Please get vaccinated. I want to be able to travel for conventions without it
being so scary all the time.](conversation://Cadey/enby)

View File

@ -1,8 +1,8 @@
.gruvbox-dark { .gruvbox-dark {
background-color: #282828; background-color: #1d2021;
color: #ebdbb2 color: #f9f5d7
} }
.gruvbox-dark h1, .gruvbox-dark h1,
@ -171,8 +171,8 @@
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
.gruvbox-dark { .gruvbox-dark {
background-color: #fbf1c7; background-color: #f9f5d7;
color: #282828; color: #1d2021;
} }
.gruvbox-dark h1 a:hover, .gruvbox-dark h1 a:hover,
.gruvbox-dark h2 a:hover, .gruvbox-dark h2 a:hover,

View File

@ -53,3 +53,13 @@ img {
/* content: "<"attr(name)">"; */ /* content: "<"attr(name)">"; */
/* font-weight: bold; */ /* font-weight: bold; */
/* } */ /* } */
.warning {
background-color: #282828;
}
@media (prefers-color-scheme: light) {
.warning {
background-color: #fbf1c7;
}
}

View File

@ -12,12 +12,12 @@
} }
.snowframe { .snowframe {
background-color: #282828; background-color: #1d2021;
} }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
.snowframe { .snowframe {
background-color: #fbf1c7; background-color: #f9f5d7;
} }
} }

View File

@ -1,8 +1,8 @@
import { g, h, x } from "./xeact.min.js"; import { g, h, x } from "./xeact.min.js";
import { div, span } from "./xeact-html.min.js"; import { div, span } from "./xeact-html.min.js";
const mkConversation = (who, mood, message) => export const mkConversation = (who, mood, message, extraClasses = "") =>
h("div", {className: "conversation gruvbox-dark"}, [ h("div", {className: "conversation gruvbox-dark " + extraClasses}, [
h("div", {className: "conversation-picture conversation-smol"}, [ h("div", {className: "conversation-picture conversation-smol"}, [
h("picture", {}, [ h("picture", {}, [
h("source", {type: "image/avif", srcset: `https://cdn.christine.website/file/christine-static/stickers/${who.toLowerCase()}/${mood}.avif`}), h("source", {type: "image/avif", srcset: `https://cdn.christine.website/file/christine-static/stickers/${who.toLowerCase()}/${mood}.avif`}),

38
static/js/hnwarn.js Normal file
View File

@ -0,0 +1,38 @@
import { g, x, r, t } from "./xeact.min.js";
import { div, ahref, br } from "./xeact-html.min.js";
import { mkConversation } from "./conversation.js";
const addNag = () => {
let root = g("refererNotice");
x(root);
root.appendChild(
div(
{style: "padding:1em"},
mkConversation("Cadey", "coffee", [
t("Thank you for reading this article. If you have any questions or thoughts about its contents, please comment civilly on it and remember the human on the other side of the screen. Due to facts and circumstances surrounding our fundamentally subjective reality, I may experience things differently than you do. If this is somehow unacceptable to you, please feel free to "),
ahref("https://zombo.com", "go somewhere else"),
t(". Have a good day and be well!")
], "warning"),
br(),
br()
)
);
};
r(() => {
switch (document.referrer) {
case "https://news.ycombinator.com/":
addNag();
break;
case "https://www.reddit.com/":
addNag();
break;
case "https://old.reddit.com/":
addNag();
break;
case "https://reddit.com/":
addNag();
break;
}
});

View File

@ -5,7 +5,7 @@ self.addEventListener('install', function (event) {
event.waitUntil(preLoad()); event.waitUntil(preLoad());
}); });
const cacheName = "cache-xesite-2.3.0-3"; const cacheName = "cache-xesite-2.3.0-4";
var preLoad = function () { var preLoad = function () {
console.log('[PWA Builder] Install Event processing'); console.log('[PWA Builder] Install Event processing');

View File

@ -24,6 +24,8 @@
<link rel="canonical" href="https://christine.website/@post.link"> <link rel="canonical" href="https://christine.website/@post.link">
} }
<script type="module" src="/static/js/conversation.js"></script>
<script type="application/ld+json"> <script type="application/ld+json">
@{ @{
"@@context": "http://schema.org", "@@context": "http://schema.org",
@ -55,6 +57,9 @@
</script> </script>
} }
<div id="refererNotice"></div>
<script type="module" src="/static/js/hnwarn.js"></script>
<h1>@post.front_matter.title</h1> <h1>@post.front_matter.title</h1>
<small>A @post.read_time_estimate_minutes minute read.</small> <small>A @post.read_time_estimate_minutes minute read.</small>
@ -147,4 +152,5 @@
@} @}
@} @}
</script> </script>
@:footer_html() @:footer_html()