3 files changed, 85 insertions, 35 deletions
diff --git a/pydis_site/static/css/resources/resources.css b/pydis_site/static/css/resources/resources.css
index cf4cb472..488effc3 100644
--- a/pydis_site/static/css/resources/resources.css
+++ b/pydis_site/static/css/resources/resources.css
@@ -1,29 +1,29 @@
-.box, .tile.is-parent {
-    transition: 0.1s ease-out;
-}
-.box {
-    min-height: 15vh;
-}
-.tile.is-parent:hover .box {
-    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
-}
-.tile.is-parent:hover {
-    padding: 0.65rem 0.85rem 0.85rem 0.65rem;
-    filter: saturate(1.1) brightness(1.1);
-}
+/*.box, .tile.is-parent {*/
+/*    transition: 0.1s ease-out;*/
+/*}*/
+/*.box {*/
+/*    min-height: 15vh;*/
+/*}*/
+/*.tile.is-parent:hover .box {*/
+/*    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);*/
+/*}*/
+/*.tile.is-parent:hover {*/
+/*    padding: 0.65rem 0.85rem 0.85rem 0.65rem;*/
+/*    filter: saturate(1.1) brightness(1.1);*/
+/*}*/
 
-#readingBlock {
-    background-image: linear-gradient(141deg, #911eb4 0%, #b631de 71%, #cf4bf7 100%);
-}
+/*#readingBlock {*/
+/*    background-image: linear-gradient(141deg, #911eb4 0%, #b631de 71%, #cf4bf7 100%);*/
+/*}*/
 
-#interactiveBlock {
-    background-image: linear-gradient(141deg, #d05600 0%, #da722a 71%, #e68846 100%);
-}
+/*#interactiveBlock {*/
+/*    background-image: linear-gradient(141deg, #d05600 0%, #da722a 71%, #e68846 100%);*/
+/*}*/
 
-#communitiesBlock {
-    background-image: linear-gradient(141deg, #3b756f 0%, #3a847c 71%, #41948b 100%);
-}
+/*#communitiesBlock {*/
+/*    background-image: linear-gradient(141deg, #3b756f 0%, #3a847c 71%, #41948b 100%);*/
+/*}*/
 
-#podcastsBlock {
-    background-image: linear-gradient(141deg, #232382 0%, #30309c 71%, #4343ad 100%);
-}
+/*#podcastsBlock {*/
+/*    background-image: linear-gradient(141deg, #232382 0%, #30309c 71%, #4343ad 100%);*/
+/*}*/
diff --git a/pydis_site/static/css/resources/resources_list.css b/pydis_site/static/css/resources/resources_list.css
index 33129c87..c2151bee 100644
--- a/pydis_site/static/css/resources/resources_list.css
+++ b/pydis_site/static/css/resources/resources_list.css
@@ -34,22 +34,24 @@ i.resource-icon.is-youtube-red:hover {
     color: #f80000;
 }
 
-i.resource-icon.is-amazon-orange {
-    color: #FF9900;
+i.resource-icon.is-goodreads-cream,
+i.resource-icon.is-black {
+    color: #2c3334;
 }
 
-i.resource-icon.is-amazon-orange:hover {
-    color: #ffb71a;
+i.resource-icon.is-goodreads-cream:hover,
+i.resource-icon.is-black:hover {
+    color: #475d6d;
 }
 
-i.resource-icon.is-black {
-    color: #000000;
+i.has-icon-padding {
+    padding: 0 10px 25px 0;
 }
 
-i.resource-icon.is-black {
-    color: #191919;
+#tab-content p {
+    display: none;
 }
 
-i.has-icon-padding {
-    padding: 0 10px 25px 0;
+#tab-content p.is-active {
+display: block;
 }
diff --git a/pydis_site/static/js/resources.js b/pydis_site/static/js/resources.js
new file mode 100644
index 00000000..5c353f97
--- /dev/null
+++ b/pydis_site/static/js/resources.js
@@ -0,0 +1,48 @@
+"use strict";
+const initialParams = new URLSearchParams(window.location.search);
+const checkboxOptions = ['topic', 'type', 'payment', 'complexity'];
+
+const createQuerySelect = (opt) => {
+    return "input[name=" + opt + "]"
+}
+
+checkboxOptions.forEach((option) => {
+    document.querySelectorAll(createQuerySelect(option)).forEach((checkbox) => {
+        if (initialParams.get(option).includes(checkbox.value)) {
+            checkbox.checked = true
+        }
+    });
+});
+
+function buildQueryParams() {
+    let params = new URLSearchParams(window.location.search);
+    checkboxOptions.forEach((option) => {
+        let tempOut = ""
+        document.querySelectorAll(createQuerySelect(option)).forEach((checkbox) => {
+            if (checkbox.checked) {
+                tempOut += checkbox.value + ",";
+            }
+        });
+        params.set(option, tempOut);
+    });
+
+    window.location.search = params;
+}
+
+function clearQueryParams() {
+    checkboxOptions.forEach((option) => {
+        document.querySelectorAll(createQuerySelect(option)).forEach((checkbox) => {
+            checkbox.checked = false;
+        });
+    });
+}
+
+function selectAllQueryParams(column) {
+    checkboxOptions.forEach((option) => {
+        document.querySelectorAll(createQuerySelect(option)).forEach((checkbox) => {
+            if (checkbox.className == column) {
+                checkbox.checked = true;
+            }
+        });
+    });
+}