add colors

client/src/curriculum/index.scss

@@ -1,9 +1,32 @@
 .curriculum-content-container {
+  --cur-color: #fcefe2;
+  --cur-color-topic-standards: #d5f4f5;
+  --cur-color-topic-styling: #fff8d6;
+  --cur-color-topic-scripting: #eff5d5;
+  --cur-color-topic-tooling: #d5e4f5;
+  --cur-color-topic-practices: #f5dfd5;
+
   .curriculum-content {
     .modules {
       input[type="radio"]:not(:checked) ~ ol {
         display: none;
       }
     }
+
+    .module-list-item {
+      display: flex;
+      flex-direction: column;
+
+      > header {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .topic-icon {
+          width: 6rem;
+          height: 6rem;
+        }
+      }
+    }
   }
 }

client/src/curriculum/modules-list.tsx

@@ -22,11 +22,15 @@ export function ModulesList({ modules }: { modules: ModuleIndexEntry[] }) {
     <ol>
       {modules.map((c, j) => {
         return (
-          <li key={j}>
-            {c.topic && <TopicIcon topic={c.topic} />}
-            <a href={c.url}>{c.title}</a>
-            <p>{c.summary}</p>
-            <p>{c.topic}</p>
+          <li key={j} className="module-list-item">
+            <header>
+              {c.topic && <TopicIcon topic={c.topic} />}
+              <a href={c.url}>{c.title}</a>
+            </header>
+            <section>
+              <p>{c.summary}</p>
+              <p>{c.topic}</p>
+            </section>
           </li>
         );
       })}

client/src/curriculum/topic-icon.tsx

@@ -18,15 +18,15 @@ enum Topic {
 export function TopicIcon({ topic }: { topic: Topic }) {
   switch (topic) {
     case Topic.WebStandards:
-      return <StandardsSVG className="topic-icon" />;
+      return <StandardsSVG className="topic-icon topic-standards" />;
     case Topic.Styling:
-      return <StylingSVG className="topic-icon" />;
+      return <StylingSVG className="topic-icon topic-styling" />;
     case Topic.Scripting:
-      return <ScriptingSVG className="topic-icon" />;
+      return <ScriptingSVG className="topic-icon topic-scripting" />;
     case Topic.Tooling:
-      return <ToolingSVG className="topic-icon" />;
+      return <ToolingSVG className="topic-icon topic-tooling" />;
     case Topic.BestPractices:
-      return <PracticesSVG className="topic-icon" />;
+      return <PracticesSVG className="topic-icon topic-practices" />;
     default:
       return <></>;
   }