Convert rems to calc(rem / 16)

components/OrganizedContent.module.css

@@ -4,7 +4,7 @@
 }
 
 .wrapper h1 {
-  font-size: 1.5rem;
+  font-size: calc(24rem / 16);
   margin: 1rem 0 1rem 0;
   color: var(--blue-2);
 }
@@ -25,13 +25,18 @@
   display: flex;
   overflow: hidden;
   white-space: nowrap;
-  font-size: 0.875rem;
-  border-bottom: 1px solid var(--blue-2-25);
+  font-size: calc(14rem / 16);
+  border-bottom: calc(1rem / 16) 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);
+  padding: 0 calc(14rem / 16);
+}
+
+.navItem > div {
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .selected {
@@ -59,12 +64,12 @@
 .navLink {
   width: 100%;
   cursor: pointer;
-  padding: 0.5rem 2rem 0.5rem 0.5rem;
+  padding: calc(8rem / 16) calc(32rem / 16) calc(8rem / 16) calc(8rem / 16);
 }
 
 .selected .navLink {
   /* smaller to account for marker width */
-  padding: 0.5rem 1.15rem 0.5rem 0.5rem;
+  padding: calc(8rem / 16) calc(18rem / 16) calc(8rem / 16) calc(8rem / 16);
 }
 
 .footer {
@@ -80,7 +85,7 @@
   cursor: pointer;
   display: flex;
   color: var(--purple-2);
-  font-size: 0.75rem;
+  font-size: calc(12rem / 16);
 }
 
 .previous {
@@ -96,25 +101,25 @@
 
 .arrowHeading {
   color: var(--blue-2);
-  font-size: 0.875rem;
+  font-size: calc(14rem / 16);
   font-weight: bold;
-  border-bottom: calc(1.6rem / 16) solid var(--blue-2);
+  border-bottom: calc(2rem / 16) solid var(--blue-2);
   padding-bottom: calc(4rem / 16);
 }
 
 .arrow {
   fill: var(--blue-2);
-  margin-top: 1.7rem;
+  margin-top: calc(27rem / 16);
 }
 
 .prevArrow {
   transform: rotate(90deg);
-  padding-right: 0.5rem;
+  padding-right: calc(8rem / 16);
 }
 
 .nextArrow {
   transform: rotate(270deg);
-  padding-left: 0.5rem;
+  padding-left: calc(8rem / 16);
 }
 
 @media only screen and (max-width: calc(768rem / 16)) {

components/OrganizedContent.tsx

@@ -86,7 +86,7 @@ function Nav({ sections, currentIndex, link: Link }: NavProps) {
             key={section.id}
           >
             <span className={styles.marker} />
-            {section.title}
+            <div>{section.title}</div>
           </Link>
         );
       })}