Resource filtering on the client, pt 1.

Here's the initial version of this system. We've got filtering,
but only by clicking checkboxes. The overall look and style are
pretty close to where we want them, but it's missing tons of
polish to be complete. The following commits will contain that polish.

1 files changed, 23 insertions, 25 deletions

diff --git a/pydis_site/static/css/resources/resources.css b/pydis_site/static/css/resources/resources.css
index 488effc3..f70cbd64 100644
--- a/pydis_site/static/css/resources/resources.css
+++ b/pydis_site/static/css/resources/resources.css
@@ -1,29 +1,27 @@
-/*.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);*/
-/*}*/
+/* Disable highlighting for all text in the filters. */
+.filter-checkbox,
+.filter-panel label,
+.card-header span {
+    user-select: none
+}
 
-/*#readingBlock {*/
-/*    background-image: linear-gradient(141deg, #911eb4 0%, #b631de 71%, #cf4bf7 100%);*/
-/*}*/
+/* Remove pointless margin in panel header */
+#filter-panel-header {
+    margin-bottom: 0;
+}
 
-/*#interactiveBlock {*/
-/*    background-image: linear-gradient(141deg, #d05600 0%, #da722a 71%, #e68846 100%);*/
-/*}*/
+/* Full width filter cards */
+#resource-filtering-panel .card .collapsible-content .card-content {
+    padding:0
+}
 
-/*#communitiesBlock {*/
-/*    background-image: linear-gradient(141deg, #3b756f 0%, #3a847c 71%, #41948b 100%);*/
-/*}*/
+/* Disable clicking on the checkbox itself. */
+/* Instead, we want to let the anchor tag handle clicks. */
+.filter-checkbox {
+    pointer-events: none;
+}
 
-/*#podcastsBlock {*/
-/*    background-image: linear-gradient(141deg, #232382 0%, #30309c 71%, #4343ad 100%);*/
-/*}*/
+/* Blurple category icons */
+i.is-primary {
+    color: #7289da;
+}