🌿🌛 Checkpoint

./public/style.css:1062301/670
./src/pages/index.hbs:1062301/542

public/style.css

@@ -104,6 +104,22 @@ body {
   background-color: var(--color-bg);
 }
 
+/* Page structure */
+.wrapper {
+  min-height: var(--wrapper-height);
+  display: grid;
+  place-items: center;
+  margin-left: 2rem;
+  margin-top: 0;
+}
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Title h1 style */
 .title {
   color: var(--color-text-main);
   font-family: HK Grotesk;
@@ -114,27 +130,6 @@ body {
   margin-bottom: 1.5rem;
 }
 
-.wrapper {
-  min-height: var(--wrapper-height);
-  display: grid;
-  place-items: center;
-  margin-left: 2rem;
-  margin-top: 0;
-}
-
-.content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-/* Navigation grid */
-.navigation {
-  display: flex;
-  justify-content: flex-end;
-}
-
 /* Very light scaling for our illustration */
 .illustration {
   max-width: 100%;

src/pages/index.hbs

@@ -24,8 +24,8 @@
     <!-- import the webpage's stylesheet -->
     <link rel="stylesheet" href="/style.css" />
 
-    <!-- if we've set a custom color (search or random) we change title text color with this style block -->
-    {{#if color}}
+    <!-- this is a handlebars IF statement, checking for a custom "color" variable set in server.js -->
+    {{#if color}} 
     <style>
       .title {
         color: {{color}};
@@ -68,6 +68,7 @@
         />
       </div>
     </div>
+    <!-- the footer holds our remix button — you can use it for structure or cut it out ✂ -->
     <footer class="footer">
       <div class="links"></div>
       <a