dairydemon.net/styles.css

148 lines
2.0 KiB
CSS

/* general styling */
html {
font-family: monospace;
font-size: large;
background: linear-gradient(to bottom right, turquoise, teal);
min-height: 100%;
}
header,
footer,
article,
main nav {
border: 3px black solid;
background: turquoise;
margin: 5px;
box-shadow: 2px 2px 2px;
}
/* header and footer */
header {
display: flex;
align-items: center;
min-width: min-content;
}
footer {
text-align: center;
}
#headerimg {
border-right: 3px solid black;
width: 128px;
background-image: url("/watching.jpg");
flex: initial;
align-self: stretch;
}
#headermain {
text-align: center;
flex: auto;
}
#headermain a {
color: blue;
text-decoration: none;
text-transform: uppercase;
}
#headermain a:hover {
text-decoration: underline;
}
#homelink {
font-size: xx-large;
font-weight: bold;
}
#headermain nav {
font-size: x-large;
}
nav ul,
footer ul {
padding: 0;
}
nav ul li,
footer ul li {
display: inline;
}
nav ul li + li::before,
footer ul li + li::before {
content: " | ";
}
/* main content */
main nav {
padding: 10px;
}
article {
padding: 20px;
text-align: justify;
hyphens: auto;
/* about page is janky without this; see
* https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats#clearing_boxes_wrapped_around_a_float */
display: flow-root;
}
h1, h2, h3, h4, h5, h6 {
text-align: left;
}
ul {
padding-left: 2ch;
}
ol {
padding-left: 3ch;
}
ol ol {
list-style: lower-alpha
}
ol ol ol {
list-style: lower-roman
}
#usbimg {
width: 256px;
height: auto;
max-width: 100%;
margin-right: 10px;
margin-bottom: 10px;
float: left;
}
@media screen and (min-width: 80ch) {
/* to avoid zoom issues, grid layout is only used when mid-width is
* large enough */
body {
display: grid;
place-content: center;
}
main {
/* min-width is set due to zoom issues */
min-width: 100%;
display: flex;
align-items: start;
}
main nav {
flex: auto;
position: sticky;
top: 10px;
}
article {
/* width is set for the about page */
width: 80ch;
max-width: 80ch;
flex: auto;
}
}