Fix some styling for the nav and footer

components/OrganizedContent.module.css

@@ -1,22 +1,58 @@
-.organizedContent {
-  display: flex; 
+.wrapper {
+  display: flex;
+  line-height: calc(24 / 16);
 }
 
-.organizedContent h1 {
+.wrapper h1 {
   font-size: 1.5rem;
   margin: 1rem 0 1rem 0;
   color: var(--blue-2);
 }
 
-.nav {
-  margin: 1rem 2rem 0 0.5rem;
+.content {
+  display: flex;
+  flex-direction: column;
 }
 
-.navOption {
+.nav {
+  margin: calc(8rem / 16) calc(32rem / 16) 0 0;
+  color: var(--purple-2);
+  font-weight: 500;
+}
+
+.navItem {
   display: flex;
   overflow: hidden;
   white-space: nowrap;
   font-size: 0.875rem;
+  border-bottom: 1px solid var(--blue-2-25);
+  align-items: center;
+  height: calc(40rem / 16);
+  width: calc(284rem / 16);
+  padding-left: calc(14rem / 16);
+  padding-right: calc(38rem / 16);
+}
+
+.selected {
+  background-color: var(--blue-1-05);
+  color: var(--blue-2);
+  font-weight: bold;
+}
+
+.readAll {
+  font-weight: bold;
+}
+
+.marker {
+  display: none;
+  background-color: var(--blue-2);
+  height: calc(24rem / 16);
+  width: calc(4rem / 16);
+  margin-right: 1rem;
+}
+
+.selected .marker {
+  display: inline;
 }
 
 .navLink {
@@ -25,61 +61,44 @@
   padding: 0.5rem 2rem 0.5rem 0.5rem;
 }
 
-.navLinkSelected {
+.selected .navLink {
   /* smaller to account for marker width */
-  padding: 0.5rem 1.15rem 0.5rem 0.5rem; 
-}
-
-.readAll {
-  font-weight: bold;
-}
-
-.divider {
-  border-bottom: 1px solid var(--blue-2);
-  opacity: 0.25;
-  width: 100%,
-}
-
-.selectedHeadingArea > .navOption {
-  color: var(--blue-2);
-  font-weight: bold;
-}
-
-.selectedHeadingArea {
-  background-color: var(--blue-1-05);
-}
-
-.selectedMarker {
-  background-color: var(--blue-2);
-  width: calc(4rem / 16);
-  margin: 0.4rem 0.1rem 0.4rem 0.5rem;
+  padding: 0.5rem 1.15rem 0.5rem 0.5rem;
 }
 
 .footer {
-  margin-top: 1rem;
+  margin-top: auto;
   display: flex;
   justify-content: space-between;
 }
 
-.footerSection {
-  display: flex; 
+.previous,
+.next {
+  flex: 1;
+  display: flex;
+  cursor: pointer;
+  display: flex;
+  color: var(--purple-2);
+  font-size: 0.75rem;
+}
+
+.previous {
+  margin-right: calc(8rem / 16);
+}
+
+.next {
+  justify-content: flex-end;
+  justify-self: flex-end;
+  text-align: end;
+  margin-left: calc(8rem / 16);
 }
 
 .arrowHeading {
   color: var(--blue-2);
   font-size: 0.875rem;
   font-weight: bold;
-  text-decoration: underline;
-  text-underline-offset: 0.5rem;
-  text-decoration-thickness: 0.1rem;
-}
-
-.prevNext {
-  font-size: 0.75rem;
-}
-
-.nextText {
-  text-align: end;
+  border-bottom: calc(1.6rem / 16) solid var(--blue-2);
+  padding-bottom: calc(4rem / 16);
 }
 
 .arrow {
@@ -90,7 +109,6 @@
 .prevArrow {
   transform: rotate(90deg);
   padding-right: 0.5rem;
-  
 }
 
 .nextArrow {
@@ -98,15 +116,6 @@
   padding-left: 0.5rem;
 }
 
-.footerSection {
-  cursor: pointer;
-  display: flex; 
-}
-
-.footerDivider {
-  width: 1rem;
-}
-
 @media only screen and (max-width: calc(768rem / 16)) {
   .nav {
     display: none;

components/OrganizedContent.tsx

@@ -36,15 +36,17 @@ export function OrganizedContent(props: Props) {
   const isReadAll = section.id === READ_ALL_ID;
 
   return (
-    <div className={styles.organizedContent}>
+    <div className={styles.wrapper}>
       <Nav sections={sections} currentIndex={currentIndex} link={props.link} />
-      <div>
+      <div className={styles.content}>
         {isReadAll ? (
           <section.Content />
         ) : (
           <>
-            <h1>{section.title}</h1>
-            <section.Content />
+            <div>
+              <h1>{section.title}</h1>
+              <section.Content />
+            </div>
             <Footer
               sections={sections}
               currentIndex={currentIndex}
@@ -66,35 +68,28 @@ interface NavProps {
 function Nav({ sections, currentIndex, link: Link }: NavProps) {
   return (
     <div className={styles.nav}>
-      {sections.map((section, index) => (
-        <div
-          className={index === currentIndex ? styles.selectedHeadingArea : ""}
-          key={section.id}
-        >
-          <div
-            className={
-              styles.navOption +
-              " " +
-              (section.title === "Read All" ? styles.readAll : "")
-            }
+      {sections.map((section, index) => {
+        const classNames = [styles.navItem];
+
+        if (index === currentIndex) {
+          classNames.push(styles.selected);
+        }
+
+        if (section.id === READ_ALL_ID) {
+          classNames.push(styles.readAll);
+        }
+
+        return (
+          <Link
+            className={classNames.join(" ")}
+            id={section.id}
+            key={section.id}
           >
-            {index === currentIndex && (
-              <span className={styles.selectedMarker} />
-            )}
-            <Link
-              className={
-                styles.navLink +
-                " " +
-                (index === currentIndex ? styles.navLinkSelected : "")
-              }
-              id={section.id}
-            >
-              {section.title}
-            </Link>
-          </div>
-          <div className={styles.divider}></div>
-        </div>
-      ))}
+            <span className={styles.marker} />
+            {section.title}
+          </Link>
+        );
+      })}
     </div>
   );
 }
@@ -119,28 +114,21 @@ function Footer({ sections, currentIndex, link: Link }: FooterProps) {
   return (
     <div className={styles.footer}>
       {prevSection && (
-        <Link id={prevSection.id}>
-          <div className={styles.footerSection}>
-            <Arrow direction="left" />
-            <div>
-              <div className={styles.prevNext}>Previous</div>
-              <div className={styles.arrowHeading}>{prevSection.title}</div>
-            </div>
+        <Link className={styles.previous} id={prevSection.id}>
+          <Arrow direction="left" />
+          <div>
+            <div>Previous</div>
+            <div className={styles.arrowHeading}>{prevSection.title}</div>
           </div>
         </Link>
       )}
-      <div className={styles.footerDivider}></div>
       {nextSection && (
-        <Link id={nextSection.id}>
-          <div className={styles.footerSection}>
-            <div>
-              <div className={styles.prevNext + " " + styles.nextText}>
-                Next
-              </div>
-              <div className={styles.arrowHeading}>{nextSection.title}</div>
-            </div>
-            <Arrow direction="right" />
+        <Link className={styles.next} id={nextSection.id}>
+          <div>
+            <div>Next</div>
+            <div className={styles.arrowHeading}>{nextSection.title}</div>
           </div>
+          <Arrow direction="right" />
         </Link>
       )}
     </div>

pages/_app.css

@@ -12,6 +12,7 @@ body {
   --blue-1-05: #5caff90d;
   --blue-1-20: #5caff934;
   --blue-2: #1482e3;
+  --blue-2-25: #1482e340;
   --purple-1: #525284;
   --purple-2: #2a2a62;
   --gradient-blue-green: linear-gradient(