2 files changed, 84 insertions, 0 deletions
diff --git a/pydis_site/static/css/resources/resources.css b/pydis_site/static/css/resources/resources.css
new file mode 100644
index 00000000..cf4cb472
--- /dev/null
+++ b/pydis_site/static/css/resources/resources.css
@@ -0,0 +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);
+}
+
+#readingBlock {
+    background-image: linear-gradient(141deg, #911eb4 0%, #b631de 71%, #cf4bf7 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%);
+}
+
+#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
new file mode 100644
index 00000000..33129c87
--- /dev/null
+++ b/pydis_site/static/css/resources/resources_list.css
@@ -0,0 +1,55 @@
+.breadcrumb-section {
+    padding: 1rem;
+}
+
+i.resource-icon.is-orangered {
+    color: #FE640A;
+}
+
+i.resource-icon.is-orangered:hover {
+    color: #fe9840;
+}
+
+i.resource-icon.is-blurple {
+    color: #7289DA;
+}
+
+i.resource-icon.is-blurple:hover {
+    color: #93a8da;
+}
+
+i.resource-icon.is-teal {
+    color: #95DBE5;
+}
+
+i.resource-icon.is-teal:hover {
+    color: #a9f5ff;
+}
+
+i.resource-icon.is-youtube-red {
+    color: #BB0000;
+}
+
+i.resource-icon.is-youtube-red:hover {
+    color: #f80000;
+}
+
+i.resource-icon.is-amazon-orange {
+    color: #FF9900;
+}
+
+i.resource-icon.is-amazon-orange:hover {
+    color: #ffb71a;
+}
+
+i.resource-icon.is-black {
+    color: #000000;
+}
+
+i.resource-icon.is-black {
+    color: #191919;
+}
+
+i.has-icon-padding {
+    padding: 0 10px 25px 0;
+}