mirror of
https://bjh21.me.uk/bedstead/.git
synced 2026-07-09 21:43:06 -04:00
41b698b29e
On browsers that support Web fonts, it seems silly to still be using images for displaying font samples. So I've tried to translate the samples into HTML. The result is a bit of a mess, but it roughly works. The images are still there, and the stylesheet tries to arrange that they get used where appropriate, and that speech synthesizers don't try to read the samples.
91 lines
1.6 KiB
CSS
91 lines
1.6 KiB
CSS
/* This is the stylesheet for the Bedstead Web pages. */
|
|
|
|
/* Make Bedstead usable through font-* properties. */
|
|
@import url(bedstead-faces.css);
|
|
|
|
/* Use Bedstead with proportional spacing for everything. */
|
|
body {
|
|
font-family: Bedstead;
|
|
font-size: 20px;
|
|
font-feature-settings: "palt";
|
|
font-synthesis: none;
|
|
margin-left: 24px;
|
|
}
|
|
|
|
/* Except where it's conventional to use a monospaced version. */
|
|
kbd, code, tt, pre {
|
|
font-family: Bedstead, monospace;
|
|
font-feature-settings: normal;
|
|
}
|
|
|
|
/* Don't use any leading in <pre> so that mosaic graphics work. */
|
|
pre {
|
|
line-height: 1em;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 5em;
|
|
font-weight: inherit;
|
|
margin-top: 0;
|
|
margin-bottom: -0.2em;
|
|
}
|
|
|
|
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%;
|
|
}
|
|
|
|
.separated {
|
|
font-feature-settings: 'ss16';
|
|
}
|
|
|
|
/*
|
|
* 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.
|
|
*/
|
|
@media braille, embossed, speech, tty, (grid) {
|
|
.text-sample {
|
|
display: none;
|
|
}
|
|
.image-sample {
|
|
display: block;
|
|
}
|
|
}
|
|
.text-sample {
|
|
font-size: 50px;
|
|
display: block;
|
|
speak: never;
|
|
}
|
|
.image-sample {
|
|
display: none;
|
|
}
|
|
|
|
/* Colours that make Bedstead look better (imitating my green monitor) */
|
|
body {
|
|
background-color: #031109;
|
|
color: #33ff88;
|
|
}
|
|
|
|
:link {
|
|
color: #38bf66;
|
|
}
|
|
:visited {
|
|
color: #22aa5b;
|
|
}
|