Styling

index.html

@@ -67,7 +67,7 @@ <h2>What not to do?</h2>
     </main>
 
     <footer>
-      <p>© <span data-js="year"></span> — How to survive in the forest 🌳</p>
+      <p>© <span data-js="date"></span> — How to survive in the forest 🌳</p>
     </footer>
   </body>
 </html>

script.js

@@ -1,3 +1,3 @@
-const yearElement = document.querySelector('[data-js="year"]');
-const year = new Date().getFullYear();
-yearElement.textContent = year;
+const dateElement = document.querySelector('[data-js="date"]');
+const date = new Date().toLocaleDateString("en-US");
+dateElement.textContent = date;

styles.css

@@ -1,4 +1,21 @@
+:root {
+  --font: system-ui;
+  --max-width: 60ch;
+  --body-padding: 2rem;
+
+  --color-text: rgb(0, 0, 0, 0.9);
+  --color-text-light: rgb(0, 0, 0, 0.6);
+}
+
 body {
+  width: min(var(--max-width), 100% - var(--body-padding));
   margin: 0 auto;
-  width: min(100% - 2rem, 60ch);
+  color: var(--color-text);
+  font-family: var(--font);
+}
+
+footer {
+  margin-top: 2rem;
+  color: var(--color-text-light);
+  font-size: 0.8rem;
 }