body {
margin: 0;
padding: 1rem;
}
header {
margin: 2rem 0;
text-align: center;
}
header img {
height: 55px;
}
header nav {
display: flex;
gap: 1ch;
justify-content: center;
font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
font-weight: normal;
font-size: 0.7rem;
text-transform: uppercase;
}
ul#sites {
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 1rem;
}
ul#sites li {
list-style-type: none;
width: 100%;
display: flex;
flex-direction: column;
}
ul#sites li .metadata {
align-self: flex-end;
font-size: 0.6rem;
font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
font-weight: normal;
display: flex;
text-wrap: nowrap;
}
ul#sites li .metadata .public-key {
padding: 0.2rem;
background: white;
color: black;
}
ul#sites li .metadata .last-updated {
padding: 0.2rem;
background: black;
color: white;
}
ul#sites li .previewless {
color: black;
background-color: rgb(240, 240, 240);
padding: 0 1rem;
width: calc(100% - 2rem);
height: 75px;
display: flex;
align-items: center;
}
ul#sites li iframe.preview {
width: 100%;
border: none;
height: 150px;
border-radius: 2px 2px 0 2px;
}
@media (prefers-color-scheme: dark) {
body {
background-color: rgb(22, 22, 22);
color: white;
}
a {
color: rgb(114, 218, 255);
}
header img {
filter: invert(1);
}
ul#sites li .metadata .public-key {
padding: 0.2rem;
background: black;
color: white;
}
ul#sites li .metadata .last-updated {
padding: 0.2rem;
background: white;
color: black;
}
ul#sites li .previewless {
color: white;
background-color: rgb(40, 40, 40);
}
}