add some more explanatory comments

add org comments
give unique title
2024-08-04 21:17:39 -05:00 · 2024-08-04 20:55:11 -05:00 · 2024-08-04 20:40:26 -05:00 · 2024-08-04 20:11:17 -05:00
2 changed files with 11 additions and 1 deletions
--- a/about.html
+++ b/about.html
@@ -6,7 +6,7 @@
 		<link rel="stylesheet" href="styles.css" />
 		<link rel="icon" href="favicon.ico" />
 		<script src="elements.js" type="text/javascript" defer></script>
-		<title>Dairy Demon</title>
+		<title>About</title>
 	</head>

 	<body>
--- a/styles.css
+++ b/styles.css
@@ -1,3 +1,4 @@
+/* general styling */
 html {
 	font-family: monospace;
 	font-size: large;
@@ -15,9 +16,11 @@ aside {
 	box-shadow: 2px 2px 2px;
 }

+/* header and footer */
 header {
 	display: flex;
 	align-items: center;
+	min-width: min-content;
 }

 footer {
@@ -69,6 +72,7 @@ footer ul li + li::before {
 	content: " | ";
 }

+/* main content */
 aside {
 	padding: 10px;
 }
@@ -77,6 +81,8 @@ 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;
 }

@@ -109,12 +115,15 @@ ol ol ol {
 }

@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;
@@ -127,6 +136,7 @@ ol ol ol {
 	}

 	article {
+		/* width is set for the about page */
 		width: 80ch;
 		max-width: 80ch;
 		flex: auto;
Author	SHA1	Message	Date
filifa	7fdb9140c7	add some more explanatory comments	2024-08-04 21:17:39 -05:00
filifa	7061f48bc5	add org comments	2024-08-04 20:55:11 -05:00
filifa	77c55d815f	give unique title	2024-08-04 20:40:26 -05:00
filifa	1b9c8e45e2	extend header width when zoomed in	2024-08-04 20:11:17 -05:00