Project 2: Habit Tracker: Styling the date navigator (+60, -0)

            
                
            
            index bad0a53..f2a5fd8 100644
--- a/curriculum/section10/lectures/05_styling_date_navigator/start/static/css/main.css
+++ b/curriculum/section10/lectures/05_styling_date_navigator/end/static/css/main.css
@@ -69,3 +69,63 @@ all form elements */
   align-self: flex-end;
   border: none;
 }
+
+.dates {
+  display: flex;
+  justify-content: space-around;
+  color: #000;
+  font-size: 1.1rem;
+  margin-bottom: 2.5rem;
+}
+
+.dates__link {
+  /* Removes the default styles applied to links */
+  color: inherit;
+  text-decoration: none;
+  outline: none;
+
+  padding: 0.25rem 0.75rem;
+  border-radius: 6px;
+}
+
+/* Selects the first, second, penultimate and final elements in the dates__link section
+and hides them on small screens. As the screen gets larger, we gradually display more 
+and more of the date elements.
+
+See the media queries below */
+.dates__link:first-of-type,
+.dates__link:nth-of-type(2),
+.dates__link:last-of-type,
+.dates__link:nth-last-of-type(2) {
+  display: none;
+}
+
+/* Comes into effect when the screen is 400px wide. Reveals the second and second-to-last date link*/
+@media screen and (min-width: 25rem) {
+  .dates__link:nth-of-type(2),
+  .dates__link:nth-last-of-type(2) {
+    display: block;
+  }
+}
+
+/* Comes into effect when the screen is 560px wide. Reveals the first and last date link */
+@media screen and (min-width: 35rem) {
+  .dates__link:first-of-type,
+  .dates__link:last-of-type {
+    display: block;
+  }
+}
+
+/* Changes the background colour of the current date. This class is applied conditionally
+by logic in the jinja template */
+.dates__link--current {
+  background: #f9dba0;
+}
+
+/* Ensures the day of the week and the date number sit on top of each other and are
+centered within the allotted space */
+.date {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}