mirror of
https://bjh21.me.uk/bedstead/.git
synced 2026-07-10 05:53:05 -04:00
dfc5e415f4
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.
106 lines
2.0 KiB
CSS
106 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 {
|
|
-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%;
|
|
}
|
|
|
|
.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.
|
|
*/
|
|
.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 {
|
|
color: #38bf66;
|
|
}
|
|
:visited {
|
|
color: #22aa5b;
|
|
}
|