mirror of
https://bjh21.me.uk/bedstead/.git
synced 2026-07-09 13:33:06 -04:00
06903fb652
Bedstead's standard weight is 500, reflecting the fact that it's naturally quite heavy. CSS defaults to 400, so we were depending on CSS's font-matching rules to fall back from 400 to 500. That's fine at the moment, where there is no 400-weight version. But Bedstead could be made lighter, and indeed the code to do it already exists. And I hope that somewhere in the future is a variable Bedstead that might allow for lighter weights. So for future-proofing I think the CSS should specify the weight that it actually wants. Obviously I can update my CSS if I ever introduce a 400 weight, but other people might reasonably use my CSS as an example and I shouldn't lead them into trouble.
119 lines
2.3 KiB
CSS
119 lines
2.3 KiB
CSS
/*
|
|
* This is the stylesheet for the Bedstead Web pages.
|
|
*
|
|
* SPDX-License-Identifier: CC0-1.0
|
|
*/
|
|
|
|
/* Make Bedstead usable through font-* properties. */
|
|
@import url(bedstead-faces.css);
|
|
|
|
/* Use Bedstead for everything. */
|
|
body {
|
|
font-family: Bedstead;
|
|
font-size: 1.25rem; /* 20px for normal default font size of 16px. */
|
|
font-synthesis: none;
|
|
font-weight: 500;
|
|
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%;
|
|
}
|
|
|
|
input:not([type="image" i], [type="range" i], [type="checkbox" i],
|
|
[type="radio" i]) {
|
|
appearance: none;
|
|
font: inherit;
|
|
color: inherit;
|
|
background: inherit;
|
|
border: 0.1em solid;
|
|
margin: 0.5em 0.2em 0.4em 0.3em;
|
|
padding: 0.4em 0.3em 0.5em 0.2em;
|
|
line-height: 1;
|
|
}
|
|
|
|
.smallprint {
|
|
font-size: 0.5em;
|
|
}
|
|
|
|
/*
|
|
* 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: 2.5em;
|
|
/* 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, .smallprint {
|
|
color: #38bf66;
|
|
}
|
|
:visited {
|
|
color: #22aa5b;
|
|
}
|