First commit

2025-09-10 14:42:57 -04:00
commit 1d12903e4e
65 changed files with 3587 additions and 0 deletions
--- a/5/styles.css
+++ b/5/styles.css
@@ -0,0 +1,79 @@
+:root {
+  --foreground-color: #343a40;
+  --background-color: #f8f9fa;
+  --nav-background-color: #ced4da;
+}
+
+body {
+  /* Do not change: <body> includes vertical margin only */
+  margin: 2vh 0vw;
+  padding: 0;
+}
+
+header {
+  background-color: var(--nav-background-color);
+  top: 0;
+  width: 100vw;
+  display: flex;
+  justify-content: flex-end;
+  position: fixed;
+}
+
+main {
+  height: 96vh;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+main.spread {
+  justify-content: space-around;
+}
+
+main.vert {
+  flex-direction: column;
+}
+
+nav > ul {
+  list-style: none;
+  margin-right: 5vw;
+}
+
+nav > ul > li {
+  display: inline;
+}
+
+nav > ul > li > button {
+  padding: 1vh 2vw;
+  font-size: 1.2em;
+  border: none;
+  border-radius: 10px;
+  background-color: var(--background-color);
+  color: var(--foreground-color);
+}
+
+nav > ul > li > button:hover {
+  outline: 3px solid var(--foreground-color);
+}
+
+nav > ul > li > button.active {
+  background-color: var(--foreground-color);
+  color: var(--background-color);
+}
+
+/* TODO: Define rules for the nav buttons:
+
+ * The coloring will be controlled dynamically:
+ *
+ *   Start with the default background and foreground colors
+ *   If the mouse is hovering, add an outline using the foreground color
+ *   If the "active" class is present, reverse the colors
+ */
+
+/* TODO: Define rules for the main flexbox:
+ *
+ *   If the "spread" class is present, use space-around to space the images out
+ *   If the "vert" class is present, make the flexbox a column
+ */
+
+/* BONUS: Make <img> tags show up in front of the header bar */