CarletonComputerScienceSociety · JohnLu2004 · Aug 2, 2024 · Jul 30, 2024
diff --git a/src/components/Back/Back.scss b/src/components/Back/Back.scss
@@ -1,7 +1,7 @@
 .Back {
   display: flex;
   align-items: center;
-  color: #3a3a3a;
+  color: inherit;
   transition: all 0.15s;
   font-weight: 600;
   font-size: 0.85rem;
@@ -15,6 +15,6 @@
   }
 
   &:hover {
-    background-color: #f0f0f0;
+    background-color: inherit;
   }
 }
diff --git a/src/components/MultipleChoiceQuestion/MultipleChoiceQuestionOption.scss b/src/components/MultipleChoiceQuestion/MultipleChoiceQuestionOption.scss
@@ -6,7 +6,7 @@
   border-style: solid;
   border-radius: 0.6rem;
   border-width: 0.1rem;
-  border-color: #c0c0c07f;
+  border-color: #4e4e4e7f;
   margin: 1rem 0rem;
   transition: all 0.15s;
 
@@ -16,16 +16,16 @@
 
   &:hover {
     &[data-interactive="true"] {
-      background-color: #ededed;
-      &[data-selected="false"] {
-        cursor: pointer;
-      }
+      background-color: #474747;
+    }
+    &[data-selected="false"] {
+      cursor: pointer;
     }
   }
 
   &[data-revealed="false"] {
     &[data-selected="true"] {
-      background-color: #eaeaea;
+      background-color: #474747;
     }
   }
 

diff --git a/src/components/Page/Page.astro b/src/components/Page/Page.astro
@@ -1,7 +1,43 @@
 ---
 import "./Page.scss";
+import ThemeIcon from "../ThemeIcon/ThemeIcon.astro";
 ---
 
 <div class="Page">
+  <ThemeIcon />
   <slot />
 </div>
+
+<script type="module">
+  document.addEventListener("DOMContentLoaded", () => {
+    const toggleButton = document.getElementById("theme-toggle");
+
+    // Check if dark mode is already set in localStorage
+    const isDarkMode = localStorage.getItem("theme") === "dark";
+    if (isDarkMode) {
+      document.body.classList.add("dark-mode");
+    } else {
+      document.body.classList.add("light-mode");
+    }
+
+    // Update icon based on the theme
+    const updateIcon = () => {
+      const isDarkMode = document.body.classList.contains("dark-mode");
+      document.querySelector(".sun").style.fill = isDarkMode
+        ? "transparent"
+        : "black";
+      document.querySelector(".moon").style.fill = isDarkMode
+        ? "white"
+        : "transparent";
+    };
+
+    updateIcon();
+
+    toggleButton.addEventListener("click", () => {
+      const isDarkMode = document.body.classList.toggle("dark-mode");
+      document.body.classList.toggle("light-mode", !isDarkMode);
+      localStorage.setItem("theme", isDarkMode ? "dark" : "light");
+      updateIcon();
+    });
+  });
+</script>
diff --git a/src/components/Page/Page.scss b/src/components/Page/Page.scss
@@ -10,3 +10,21 @@ $layout-width-inner-spacing-base: 1rem;
       $layout-width-inner-spacing-base
   );
 }
+
+#themeToggle {
+  border: 0;
+  background: none;
+}
+.sun {
+  fill: black;
+}
+.moon {
+  fill: transparent;
+}
+
+:global(.dark) .sun {
+  fill: transparent;
+}
+:global(.dark) .moon {
+  fill: white;
+}
diff --git a/src/components/Pagination/Pagination.astro b/src/components/Pagination/Pagination.astro
@@ -0,0 +1,94 @@
+---
+import { Fragment } from "astro/jsx-runtime";
+import "./Pagination.scss";
+const { pagination } = Astro.props;
+
+const adjacentLinks = 2;
+const maxLinks = adjacentLinks * 2 + 1;
+const lowerLimit = adjacentLinks + 1;
+const upperLimit = pagination.totalPages - adjacentLinks;
+---
+
+{
+  pagination.totalPages > 1 && (
+    <ul class="pagination">
+      {/* First page */}
+      {pagination.pageNumber !== 1 && (
+        <li class="pagination__item pagination__item--first">
+          <a class="pagination__link pagination__link--first" href={1}>
+            ««
+          </a>
+        </li>
+      )}
+
+      {/* Previous page */}
+      {pagination.hasPrev && (
+        <li class="pagination__item pagination__item--previous">
+          <a
+            href={pagination.prev.url}
+            class="pagination__link pagination__link--previous"
+          >
+            «
+          </a>
+        </li>
+      )}
+
+      {/* Page numbers */}
+      {pagination.pagers.map((page) => {
+        return (
+          <Fragment>
+            {(() => {
+              const isInRange =
+                pagination.totalPages > maxLinks
+                  ? pagination.pageNumber < lowerLimit + 1
+                    ? page.pageNumber < maxLinks + 1
+                    : pagination.pageNumber >= upperLimit
+                      ? page.pageNumber > pagination.totalPages - maxLinks
+                      : page.pageNumber >=
+                          pagination.pageNumber - adjacentLinks &&
+                        page.pageNumber <
+                          pagination.pageNumber + adjacentLinks + 1
+                  : true;
+
+              return (
+                isInRange && (
+                  <li
+                    class={`pagination__item${page.pageNumber === pagination.pageNumber ? " pagination__item--current" : ""}`}
+                  >
+                    <a href={page.url} class="pagination__link">
+                      {page.pageNumber}
+                    </a>
+                  </li>
+                )
+              );
+            })()}
+          </Fragment>
+        );
+      })}
+
+      {/* Next page */}
+      {pagination.hasNext && (
+        <li class="pagination__item pagination__item--next">
+          <a
+            href={pagination.next.url}
+            class="pagination__link pagination__link--next"
+          >
+            »
+          </a>
+        </li>
+      )}
+
+      {/* Last page */}
+      {pagination.pageNumber !== pagination.totalPages && (
+        <li class="pagination__item pagination__item--last">
+          <a
+            class="pagination__link pagination__link--last"
+            href={pagination.last.url}
+          >
+            »»
+          </a>
+        </li>
+      )}
+    </ul>
+  )
+}
diff --git a/src/components/Pagination/Pagination.scss b/src/components/Pagination/Pagination.scss
@@ -0,0 +1,22 @@
+.pagination {
+  text-align: center;
+  font-weight: bold;
+  display: flex;
+  justify-content: space-between;
+  max-width: 10rem;
+  margin: auto;
+  padding: 0;
+
+  li {
+    display: inline;
+    text-align: center;
+  }
+
+  a {
+    text-decoration: auto;
+  }
+
+  .pagination__item--current {
+    color: black;
+  }
+}
diff --git a/src/components/RowCard/RowCard.scss b/src/components/RowCard/RowCard.scss
@@ -3,10 +3,10 @@
   align-items: center;
   justify-content: space-between;
   gap: 0.75rem;
-  color: black;
+  color: inherit;
   border-radius: 0.6rem;
   border-width: 0.1rem;
-  border-color: #f1f1f1;
+  border-color: inherit;
   border-style: solid;
   padding: 0.2rem 0.6rem;
   transition: all 0.2s;
@@ -15,7 +15,7 @@
   cursor: grab;
 
   &:hover {
-    background-color: rgba(248, 248, 248, 0.753);
+    background-color: rgba(107, 107, 107, 0.753);
     .RowCard__icon {
       color: #e30614;
     }
@@ -28,7 +28,7 @@
   }
 
   &__icon {
-    background-color: #f2f2f2;
+    background-color: inherit;
     padding: 0.3rem 0.6rem;
     border-radius: 0.5rem;
     font-size: 1.4rem;

diff --git a/src/components/Sidebar/Sidebar.scss b/src/components/Sidebar/Sidebar.scss
@@ -4,7 +4,7 @@
   width: 14rem;
   height: 100vh;
   overflow: hidden;
-  background-color: #fafafa;
+  background-color: inherit;
   border-right: 0.1rem solid #f3f3f3;
   display: flex;
   padding: 0.5rem;
@@ -26,7 +26,7 @@
     padding-top: -0.3rem;
     font-size: 0.9rem;
     font-weight: 600;
-    color: #000000;
+    color: inherit;
   }
 
   &__sections {
@@ -48,7 +48,7 @@
     &--enabled {
       cursor: pointer;
       &:hover {
-        background-color: #f0f0f0;
+        background-color: inherit;
         .Sidebar__item__icon {
           color: #e30614;
         }
@@ -61,19 +61,19 @@
     }
 
     &--active {
-      background-color: #f3f3f3;
+      background-color: inherit;
     }
 
     &__icon {
       font-size: 1.5rem;
-      color: #000000;
+      color: inherit;
     }
 
     &__title {
       padding-left: 0.75rem;
       font-size: 1rem;
       font-weight: 500;
-      color: #000000;
+      color: inherit;
     }
   }
 
@@ -97,38 +97,9 @@
   width: 100vw;
   z-index: 1;
   position: fixed;
-  background-color: #ffffff;
+  background-color: inherit;
   bottom: 0;
   justify-content: center;
   border-top-width: 0.1rem;
   border-color: #f1f1f1;
-  border-style: solid;
-  @media (max-width: 768px) {
-    display: flex;
-  }
-
-  &__inner {
-    display: flex;
-    justify-content: space-between;
-    min-width: 14rem;
-    padding: 0.5rem;
-    gap: 1rem;
-  }
-}
-
-@media (max-width: 768px) {
-  .Sidebar__item {
-    flex-direction: column;
-    justify-content: center;
-    gap: 0.3rem;
-    min-width: 3rem;
-  }
-  .Sidebar__item__icon {
-    font-size: 2rem;
-  }
-  .Sidebar__item__title {
-    font-size: 0.6rem;
-    padding-left: 0rem;
-    text-align: center;
-  }
 }
diff --git a/src/components/Them b/src/components/Them
diff --git a/src/components/ThemeIcon/ThemeIcon.astro b/src/components/ThemeIcon/ThemeIcon.astro
@@ -0,0 +1,18 @@
+---
+import "./ThemeIcon.scss";
+---
+
+<div id="theme-toggle">
+  <svg width="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path
+      class="sun"
+      fill-rule="evenodd"
+      d="M12 17.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm12-7a.8.8 0 0 1-.8.8h-2.4a.8.8 0 0 1 0-1.6h2.4a.8.8 0 0 1 .8.8zM4 12a.8.8 0 0 1-.8.8H.8a.8.8 0 0 1 0-1.6h2.5a.8.8 0 0 1 .8.8zm16.5-8.5a.8.8 0 0 1 0 1l-1.8 1.8a.8.8 0 0 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM6.3 17.7a.8.8 0 0 1 0 1l-1.7 1.8a.8.8 0 1 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM12 0a.8.8 0 0 1 .8.8v2.5a.8.8 0 0 1-1.6 0V.8A.8.8 0 0 1 12 0zm0 20a.8.8 0 0 1 .8.8v2.4a.8.8 0 0 1-1.6 0v-2.4a.8.8 0 0 1 .8-.8zM3.5 3.5a.8.8 0 0 1 1 0l1.8 1.8a.8.8 0 1 1-1 1L3.5 4.6a.8.8 0 0 1 0-1zm14.2 14.2a.8.8 0 0 1 1 0l1.8 1.7a.8.8 0 0 1-1 1l-1.8-1.7a.8.8 0 0 1 0-1z"
+    ></path>
+    <path
+      class="moon"
+      fill-rule="evenodd"
+      d="M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z"
+    ></path>
+  </svg>
+</div>
diff --git a/src/components/ThemeIcon/ThemeIcon.scss b/src/components/ThemeIcon/ThemeIcon.scss
@@ -0,0 +1,17 @@
+#themeToggle {
+  border: 0;
+  background: none;
+}
+.sun {
+  fill: black;
+}
+.moon {
+  fill: transparent;
+}
+
+:global(.light-mode) .sun {
+  fill: transparent;
+}
+:global(.dark-mode) .moon {
+  fill: white;
+}
diff --git a/src/content/questions/comp2804/2019-fall-final/1/index.md b/src/content/questions/comp2804/2019-fall-final/1/index.md
@@ -8,4 +8,7 @@ solution: comp2804/2019-fall-final/1/solution.md
 tags:
   - comp2804
   - comp2804-final
+  - comp2804-counting-bitstrings-of-length-n-(3.1.1)
+  - comp2804-permutations-and-binomial-coefficients-(3.6.2)
+  - comp2804-the-product-rule-(3.1)
 ---