restructure

styles/default.css

@@ -0,0 +1,147 @@
+/* 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("/images/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;
+	}
+}