mirror of
https://bjh21.me.uk/bedstead/.git
synced 2026-07-10 05:53:05 -04:00
0cd03defca
Safari badly misdisplays Bedstead in proportional mode. This is caused by a bug in WebKit, and I haven't found an acceptable workaround. Thus, I think the best thing to do is to turn off proportional spacing on the Web page entirely. I think it looks nice, but even I'll admit that it's a little too tight, and I know others prefer the monospaced version. Also, I can't think of a way that a real chip anything like the SAA5050 could produce proportionally-spaced text. It's fundamentally based on getting fed character data at a constant 1 MHz. There's no way it can ask for a character early because the previous one was narrow.
98 lines
1.8 KiB
CSS
98 lines
1.8 KiB
CSS
/* This is the stylesheet for the Bedstead Web pages. */
|
|
|
|
/* Make Bedstead usable through font-* properties. */
|
|
@import url(bedstead-faces.css);
|
|
|
|
/* Use Bedstead for everything. */
|
|
body {
|
|
font-family: Bedstead;
|
|
font-size: 20px;
|
|
font-synthesis: none;
|
|
margin: 8px;
|
|
margin-left: 32px;
|
|
max-width: 60em;
|
|
}
|
|
|
|
/* But fall back to a monospace font where appropriate. */
|
|
kbd, code, tt, pre {
|
|
font-family: Bedstead, monospace;
|
|
}
|
|
|
|
/* Don't use any leading in <pre> so that mosaic graphics work. */
|
|
pre {
|
|
line-height: 1em;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 5em;
|
|
font-stretch: expanded;
|
|
font-weight: inherit;
|
|
margin-top: 0;
|
|
margin-bottom: -0.2em;
|
|
line-height: 1.2em;
|
|
background: url(titlebg.jpg) 0% 0% / auto 100% no-repeat;
|
|
}
|
|
|
|
.fade {
|
|
display: block;
|
|
-webkit-mask-image: linear-gradient(to right, transparent 1em, white 3em);
|
|
mask-image: linear-gradient(to right, transparent 1em, white 3em);
|
|
}
|
|
|
|
h2 {
|
|
font-size: 2em;
|
|
font-stretch: ultra-condensed;
|
|
font-weight: inherit;
|
|
margin-top: 0.5em;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
h1, h2 {
|
|
margin-left: -24px;
|
|
}
|
|
|
|
ul {
|
|
list-style-type: "\2022 ";
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
/*
|
|
* When we're using text as a sample of Bedstead, it should be hidden
|
|
* from browsers without font support, and the image sample should
|
|
* be used instead.
|
|
*/
|
|
.text-sample {
|
|
font-size: 50px;
|
|
/* These may be overridden by the @media rule below. */
|
|
display: block;
|
|
speak: never;
|
|
}
|
|
.image-sample {
|
|
display: none;
|
|
}
|
|
|
|
@media braille, embossed, speech, tty, (grid) {
|
|
.text-sample {
|
|
display: none;
|
|
}
|
|
.image-sample {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
/* Colours that make Bedstead look better (imitating my green monitor) */
|
|
body, .fade {
|
|
background-color: #031109;
|
|
color: #33ff88;
|
|
}
|
|
|
|
:link, kbd, code, tt {
|
|
color: #38bf66;
|
|
}
|
|
:visited {
|
|
color: #22aa5b;
|
|
}
|