html {
height: 100%; /* take up all the space */
}
body {
background-image: url(bg.svg);
background-color: #00002a;
margin: 0; /* has a margin by default, we don't want that */
/* take up all the space, flex style */
display: flex;
flex-direction: column;
height: 100%;
}
header {
width: 100%;
height: 256px;
background: url(/shared/header.avif) no-repeat center;
background-color: orange; /* to be replaced with an actual image */
background-size: 2560px;
image-rendering: pixelated;
/* can take up too much space, stays the same */
flex-grow: 0;
flex-shrink: 0;
}
header a {
display: block;
width: 100%;
height: 100%;
background: none;
}
.motd {
background: darkcyan;
padding: .2em;
text-align: center;
border: 5px outset teal;
border-left: 0;
border-right: 0;
}
main {
display: block; /* is inline by default */
background-color: black;
color: white; /* all text inside is white */
border: 6px double white;
width: 100%;
max-width: 650px;
margin: 2em auto; /* centered */
padding: 1em;
box-sizing: border-box; /* border causes overflow by default */
flex-grow: 1; /* must grow */
}
/*
first and last direct elements of should not have margins,
only the 's padding
*/
main > :first-child {
margin-top: 0;
}
main > :last-child {
margin-bottom: 0;
}
p {
margin: 1em 0;
}
.feedlist {
margin: 0;
}
figure {
border: solid 1px white;
padding: 1em;
}
figure img {
width: 100%;
}
figure figcaption {
border-top: 1px solid white;
margin-top: .5em;
padding-top: .5em;
}
hr {
border-top: 1px solid white;
}
dt {
font-weight: bold;
}
dd {
margin: 1em;
}
footer {
padding: 1.5rem;
background: black;
/* copyheart sticks to the left, notbyai sticks to the right */
display: flex;
justify-content: space-between;
/* can grow too much,