From dbf936f949c9797ce95e6b0bb2668447d9a0a0e3 Mon Sep 17 00:00:00 2001 From: Ben Harris Date: Fri, 27 Sep 2024 19:07:50 +0100 Subject: [PATCH] Convert the fading

in the Web page back to a HTML doesn't allow

inside

. I found before that using a caused the background not to work. That seems to be down to CSS2 section 10.6.1, describing inline, non-replaced elements: "The height of the content area should be based on the font, but this specification does not specify how." Happily, we can just define this particular to be a block element, so that it behaves like a
even though it's a . That works fine, and because we're only using it to get a well-defined content area it doesn't matter if it's ineffective when the stylesheet is missing. --- bedstead.css | 1 + index.xhtml | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/bedstead.css b/bedstead.css index 9eb4a24..c794039 100644 --- a/bedstead.css +++ b/bedstead.css @@ -38,6 +38,7 @@ h1 { } .fade { + display: block; -webkit-mask-image: linear-gradient(to right, transparent 1em, white 3em); mask-image: linear-gradient(to right, transparent 1em, white 3em); } diff --git a/index.xhtml b/index.xhtml index bc81c34..4a2c504 100644 --- a/index.xhtml +++ b/index.xhtml @@ -12,7 +12,7 @@ -
Bedstead
+
Bedstead

Bedstead is a family of outline fonts based on the characters produced by the Mullard SAA5050 series of Teletext Character Generators. The -- 2.30.2