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.
font-size: 20px;
font-feature-settings: "palt";
font-synthesis: none;
- margin-left: 24px;
+ margin: 8px;
+ margin-left: 32px;
max-width: 60em;
}
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 {
}
/* Colours that make Bedstead look better (imitating my green monitor) */
-body {
+body, .fade {
background-color: #031109;
color: #33ff88;
}
<link rel="stylesheet" href="bedstead.css" type="text/css" />
</head>
<body>
- <h1>Bedstead</h1>
+ <h1><span class="fade">Bedstead</span></h1>
<p>Bedstead is a family of outline fonts based on the characters
produced by the
Mullard SAA5050 series of Teletext Character Generators. The
~bjharris / bedstead.git / commitdiff