/* jayturner.co.uk: hand-written CSS. This file is 1996, the default era.
Each theme applies only while era.js has set its data-era on . */
@import url("theme-2000.css");
@import url("theme-2010.css");
@import url("theme-2020.css");
@import url("theme-now.css");
/* Netscape Navigator's defaults: grey page, black Times, blue links. */
html {
background: #c0c0c0;
}
body {
width: min(46rem, 100% - 1rem);
margin: 1rem auto;
color: #000;
font: 1rem "Times New Roman", Times, serif;
}
nav ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0 0.5em;
margin: 0 0 1rem;
padding: 0;
list-style: none;
}
/* Separators are decoration: the "/ ''" alt text keeps screen readers quiet. */
nav li + li::before { content: "| "; content: "| " / ""; }
/* Era timeline, added to every page by era.js. Radios rather than
: arrow keys and screen readers work natively. */
.eras {
position: relative;
display: flex;
justify-content: space-between;
width: min(22rem, 100%);
margin: 0 auto 1rem;
padding: 0;
border: 0;
}
/* The line the stops sit on. */
.eras::before {
content: "";
position: absolute;
inset: 0.5rem 1rem auto;
border-top: 1px solid;
opacity: 0.4;
}
.eras legend {
margin: 0 auto 0.25rem;
padding: 0;
font-size: 0.75rem;
font-weight: bold;
}
.eras label {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
font-size: 0.75rem;
cursor: pointer;
}
.eras input {
width: 1rem;
height: 1rem;
margin: 0 0 0.25rem;
cursor: pointer;
}
main {
padding: 1rem clamp(0.75rem, 4vw, 2rem);
border: 5px ridge #808080;
}
h1 {
margin: 0;
text-align: center;
}
.tagline {
margin: 0.25rem 0 0;
font-style: italic;
text-align: center;
}
/* No :hover. Browsers didn't have it yet. */
a { color: #00e; }
a:visited { color: #551a8b; }
a:active { color: #f00; }
a[aria-current="page"] { color: inherit; font-weight: bold; text-decoration: none; }
:focus-visible {
outline: 2px dotted;
outline-offset: 2px;
}
/* What used to look like. */
table {
border: 1px outset grey;
border-spacing: 2px;
}
th, td {
padding: 0.25rem 0.5rem;
border: 1px inset grey;
text-align: left;
vertical-align: top;
}
.construction {
padding: 0.5rem;
background: repeating-linear-gradient(-45deg, #000 0 0.75rem, #fc0 0.75rem 1.5rem);
text-align: center;
}
.construction strong {
padding: 0.25rem 0.75rem;
background: #fc0;
color: #000;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.digits {
padding: 0 0.25em;
border: 1px solid #444;
background: #000;
color: #f33;
font-family: "Courier New", Courier, monospace;
letter-spacing: 0.15em;
}
footer {
font-size: 0.8125rem;
text-align: center;
}
.badges {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.375rem;
margin: 1rem 0 0.5rem;
padding: 0;
list-style: none;
}
.badges li {
padding: 0.125rem 0.375rem;
border: 2px outset grey;
background: #000;
color: #0f0;
font-size: 0.75rem;
font-weight: bold;
text-transform: uppercase;
}
.badges li:nth-child(2) { background: #000080; color: #fff; }
.badges li:nth-child(3) { background: #800000; color: #ff0; }