mirror of
https://bjh21.me.uk/bedstead/.git
synced 2026-07-10 05:53:05 -04:00
dbf936f949
HTML doesn't allow <div> inside <h1>. I found before that using a <span> caused the background not to work. That seems to be down to CSS2 section 10.6.1, describing inline, non-replaced elements: "The height of the content area should be based on the font, but this specification does not specify how." Happily, we can just define this particular <span> to be a block element, so that it behaves like a <div> even though it's a <span>. That works fine, and because we're only using it to get a well-defined content area it doesn't matter if it's ineffective when the stylesheet is missing.
103 lines
2.0 KiB
CSS
103 lines
2.0 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: 8px;
|
|
margin-left: 32px;
|
|
max-width: 60em;
|
|
}
|
|
|
|
/* 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-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 {
|
|
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;
|
|
font-feature-settings: normal;
|
|
/* 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;
|
|
}
|