From: Ben Harris Date: Sat, 26 Feb 2022 23:17:59 +0000 (+0000) Subject: New title for Web page and some other tweaks X-Git-Tag: bedstead-002.004~3 X-Git-Url: https://www.chiark.greenend.org.uk/ucgi/~bjharris/git?a=commitdiff_plain;h=dfc5e415f4f5e31957bfbfd7639474f48f3ff2da;p=bedstead.git New title for Web page and some other tweaks The new title is a fade from a (manipulated) photo of the word "Bedstead" displayed by my Beeb on a CRT monitor into the title text in Bedstead Extended. The other visible tweak is to increase the left margin so that the headings have some clearance from the left edge of the window. At the same time, I've set the other margins explicitly to the 8px that Firefox and Chromium use by default. --- diff --git a/bedstead.css b/bedstead.css index 89df7ce..2b1cf0e 100644 --- a/bedstead.css +++ b/bedstead.css @@ -9,7 +9,8 @@ body { font-size: 20px; font-feature-settings: "palt"; font-synthesis: none; - margin-left: 24px; + margin: 8px; + margin-left: 32px; max-width: 60em; } @@ -26,9 +27,19 @@ pre { h1 { font-size: 5em; + font-stretch: expanded; font-weight: inherit; margin-top: 0; margin-bottom: -0.2em; + line-height: 1.2em; + background-image: url(titlebg.jpg); + background-repeat: no-repeat; + background-size: auto 100%; +} + +.fade { + -webkit-mask-image: linear-gradient(to right, transparent 1em, white 3em); + mask-image: linear-gradient(to right, transparent 1em, white 3em); } h2 { @@ -81,7 +92,7 @@ img { } /* Colours that make Bedstead look better (imitating my green monitor) */ -body { +body, .fade { background-color: #031109; color: #33ff88; } diff --git a/index.xhtml b/index.xhtml index 9065b32..ecdc070 100644 --- a/index.xhtml +++ b/index.xhtml @@ -9,7 +9,7 @@ -

Bedstead

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