web/www/css/web.css
2022-02-28 21:34:55 -06:00

125 lines
2 KiB
CSS

@namespace epub "http://www.idpf.org/2007/ops";
body{
font-family: georgia, serif;
font-size: 18px;
margin: 8rem auto 3rem;
max-width: 55ch;
min-height: calc(100vh - 8rem - 3rem); /* Size of header - body margin */
padding: 0 3rem;
}
body > header{
background: #fff;
border-bottom: 1px solid #999;
box-shadow: 0 0 3px #ccc;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 1000; /* Required so that SVGs don't scroll over the header */
}
body > header ul{
align-items: center;
display: flex;
list-style: none;
margin: 0;
padding: 0.5em 1em;
}
body > header li{
margin-left: 1.5em;
}
body > header li:first-child{
margin-left: 0;
margin-right: auto;
}
body > header li:first-child > a{
background: no-repeat center / 100% url("/images/logo-full.svg");
display: block;
font-size: 0;
height: 42px;
transition: transform 200ms ease;
width: 180px;
}
body > header li:first-child > a:hover{
transform: scale(1.025) rotate(1deg);
}
body > section[epub|type~="titlepage"],
body > section[epub|type~="halftitlepage"]{
min-height: auto;
}
nav + section,
section + nav,
section + section,
section + article,
article + section,
article + article{
box-sizing: border-box;
margin-top: 12em !important;
padding: 0;
}
nav[epub|type~="toc"] ol{
list-style: none;
}
@media(max-width: 96ch){
body > header{
position: fixed;
}
body > header li:first-child > a{
height: 21px;
width: 90px;
}
}
@media(max-width: 65ch){
body{
padding: 0 2rem;
}
section[epub|type~="imprint"] p{
width: 100%;
}
}
@media(prefers-color-scheme: dark){
body,
body > header{
background: #222222;
color: #ffffff;
}
/* These three link colors provide WCAG AAA compliance at 16px */
a:link{
color: #6bb9f0;
}
a:active{
color: #e6cc22;
}
a:visited{
color: #dda0dd;
}
body > header li:first-child > a,
img[epub|type~="se:image.color-depth.black-on-transparent"]{
filter: invert(1);
}
}
@media(pointer: coarse) or (pointer: none){
nav[epub|type~="toc"] ol li{
margin-bottom: 2em;
margin-top: 2em;
}
}