From dccd5487d903366f3e598801f9244e833d1522f1 Mon Sep 17 00:00:00 2001
From: Jan Willem Henckel <farly.de@gmail.com>
Date: Mon, 26 Sep 2022 14:35:32 +0200
Subject: [PATCH 1/4] fix show full date instead of only the year

---
 index.html | 2 +-
 script.js  | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 872b92e..926c60a 100644
--- a/index.html
+++ b/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>
diff --git a/script.js b/script.js
index 76dbe2b..c1b6875 100644
--- a/script.js
+++ b/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;

From 25cca8aead671a0d8f565d8629ebce9eb163baca Mon Sep 17 00:00:00 2001
From: Jan Willem Henckel <farly.de@gmail.com>
Date: Mon, 26 Sep 2022 14:43:04 +0200
Subject: [PATCH 2/4] move max-width to custom property

---
 styles.css | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/styles.css b/styles.css
index ce3289d..1265b5a 100644
--- a/styles.css
+++ b/styles.css
@@ -1,4 +1,16 @@
+:root {
+  --max-width: 60ch;
+}
+
 body {
+  font-family: system-ui;
+  color: rgb(0, 0, 0, 0.9);
   margin: 0 auto;
-  width: min(100% - 2rem, 60ch);
+  width: min(100% - 2rem, var(--max-width));
+}
+
+footer {
+  margin-top: 2rem;
+  font-size: 0.8rem;
+  color: rgb(0, 0, 0, 0.6);
 }

From dd7e7dfb71f4d241572402611ef5ab151fded04f Mon Sep 17 00:00:00 2001
From: Jan Willem Henckel <farly.de@gmail.com>
Date: Mon, 26 Sep 2022 14:43:25 +0200
Subject: [PATCH 3/4] create more custom properties

---
 styles.css | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/styles.css b/styles.css
index 1265b5a..7a25952 100644
--- a/styles.css
+++ b/styles.css
@@ -1,16 +1,20 @@
 :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 {
-  font-family: system-ui;
-  color: rgb(0, 0, 0, 0.9);
+  font-family: var(--font);
+  color: var(--color-text);
   margin: 0 auto;
-  width: min(100% - 2rem, var(--max-width));
+  width: min(100% - var(--body-padding), var(--max-width));
 }
 
 footer {
   margin-top: 2rem;
   font-size: 0.8rem;
-  color: rgb(0, 0, 0, 0.6);
+  color: var(--color-text-light);
 }

From d5723b5693dadbff93474039df99571405dc6aa9 Mon Sep 17 00:00:00 2001
From: Jan Willem Henckel <farly.de@gmail.com>
Date: Mon, 26 Sep 2022 14:45:02 +0200
Subject: [PATCH 4/4] change property order

---
 styles.css | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/styles.css b/styles.css
index 7a25952..7b1f65c 100644
--- a/styles.css
+++ b/styles.css
@@ -2,19 +2,20 @@
   --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 {
-  font-family: var(--font);
-  color: var(--color-text);
+  width: min(var(--max-width), 100% - var(--body-padding));
   margin: 0 auto;
-  width: min(100% - var(--body-padding), var(--max-width));
+  color: var(--color-text);
+  font-family: var(--font);
 }
 
 footer {
   margin-top: 2rem;
-  font-size: 0.8rem;
   color: var(--color-text-light);
+  font-size: 0.8rem;
 }