Curriculum styling

3 files changed, 56 insertions, 0 deletions

diff --git a/js/curriculum.js b/js/curriculum.js
index f6d6b35..4594f41 100644
--- a/js/curriculum.js
+++ b/js/curriculum.js
@@ -37,6 +37,9 @@ define(['courses'], function(courses) {
         // navigation
         var cmenu = document.getElementById("curriculum-menu");
         cmenu.appendChild(makeCoursesList(function(course_item, course) {
+            // types: bc, major, bep
+            course_item.dataset.type = course.type || 'major';
+
             course_item.textContent = course.id + ' ' + course.name;
         }));
     };
diff --git a/style/curriculum.less b/style/curriculum.less
new file mode 100644
index 0000000..5f02380
--- /dev/null
+++ b/style/curriculum.less
@@ -0,0 +1,51 @@
+@import "colors.less";
+
+body[data-page="curriculum"] #curriculum-menu {
+    /* reset list styles */
+    ul {
+        padding: 0;
+        margin: 0;
+    }
+    li {
+        list-style: none;
+        padding: 3px;
+        margin: 0;
+    }
+    .year {
+        display: block;
+        background: @color-complement-0;
+    }
+    .quartile {
+        background: @color-complement-1;
+        display: flex;
+
+        & > li {
+            flex: 1;
+            width: 100%;
+        }
+    }
+    .courses {
+        background: @color-complement-2;
+
+        & > li {
+            background: @color-complement-3;
+            margin: 2px inherit;
+            white-space: nowrap;
+            overflow: hidden;
+
+            &[data-type="bc"] {
+                background-color: #FFC000;
+            }
+            &[data-type="major"] {
+                background-color: #31859B;
+            }
+            &[data-type="elective"] {
+                background-color: #AB9AC0;
+            }
+            &[data-type="bep"] {
+                background-color: #C00000;
+            }
+        }
+    }
+}
+/* vim: set sw=4 et ts=4: */
diff --git a/style/main.less b/style/main.less
index 0ad9c47..90edbcd 100644
--- a/style/main.less
+++ b/style/main.less
@@ -54,6 +54,8 @@ body[data-page="home"] {
     }
 }
 
+@import "curriculum.less";
+
 /* footer */
 footer {
     background: @color-secondary-1-4;