134 moar design tweaks (#141)

* #134 Moar design tweaks:
* sorted alignment of content / sidebar after feedback from @peth-yursick
* tweaks to homepage including experimental (WIP) player type revisions. Thoughts / feedback requested.
* tweaks to wiki design. More MyMeta. Much WOW.

* I had an error due to unclosed tags in house-of-daos, so i fixed it.

* Some responsive tweaks to the sidebar/content alignment

* this file's not parsed so relative path doesnt work

* #134 - Font size and alignment tweaks
I also toned down the homepage to make it less tacky.

* A bit of housekeeping

* Erroneous bg color removed.

* Sidebar font size enlarged

* Fixed font issues and removed some unwanted margin & padding.

* Fixed the state of raids page - twas bleeding into the righthand sidebar.

* Some tweaks to improve display of sidebar items

* Just in case large screen.

* Fixed broken iframe

* fixed spacing issue on homepage 1366 device

* A bit of spit n polish:
* glassy pagination buttons
* better blur for the page background

* Adding a bit more glassy polish to the sidebar

* Removed the flashy flashiness of the sidebar.

* Homepage buttons as per figma designs.

src/css/custom.css

@@ -6,7 +6,7 @@
  */
 
 /* You can override the default Infima variables here. */
-@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&family=Press+Start+2P&display=swap|');
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;700&family=Press+Start+2P&display=swap|');
 
 :root {
   --ifm-color-primary: #ff0077;
@@ -155,14 +155,18 @@ body,
     overflow: hidden;
     z-index: 2;
   }
-  [class^='sidebar'] a {
-    font-size: 0.8rem;
-    transition: color 0.2s ease;
+  .main-wrapper [role='complementary'] [class^='sidebar'] a {
+    /* font-size: 0.8rem; */
+    transition: all 0.2s 0s ease-in;
+  }
+  .main-wrapper [role='complementary'] [class^='sidebar'] a:hover {
+    /* color: #ff3392; */
+    /* transition: color 0.2s ease; */
   }
   .main-wrapper [role='complementary'] [class^='sidebar']:hover {
     box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
   }
-  [class^='sidebar']:before {
+  /* [class^='sidebar']:before {
     content: '';
     position: absolute;
     display: none;
@@ -176,37 +180,37 @@ body,
       45deg,
       transparent,
       rgba(255, 255, 255, 0),
-      rgba(255, 255, 255, 0.07),
+      rgba(255, 255, 255, 0.06),
       rgba(255, 255, 255, 0),
       transparent
     );
-    transition: all 0.6s 0.4s ease-in-out;
+    transition: all 0.4s 0.3s ease-in-out;
     z-index: 1;
   }
   .main-wrapper [role='complementary'] [class^='sidebar']:after {
     content: '';
     position: absolute;
-    /* display: block; */
+    display: block;
     top: 0;
     left: -120%;
     width: 100%;
     height: 100%;
-    filter: blur(15px);
+    filter: blur(5px);
     background: linear-gradient(
       45deg,
       transparent,
       rgba(255, 255, 255, 0),
-      rgba(255, 255, 255, 0.12),
+      rgba(255, 255, 255, 0.05),
       rgba(255, 255, 255, 0),
       transparent
     );
-    transition: all 0.4s 0.1s ease-in-out;
+    transition: all 0.3s 0.1s ease-in-out;
     z-index: 1;
   }
   .main-wrapper [role='complementary'] [class^='sidebar']:hover:before,
   .main-wrapper [role='complementary'] [class^='sidebar']:hover:after {
     left: 120%;
-  }
+  } */
 }
 
 @media (min-width: 1280px) {

src/pages/styles.module.css

@@ -89,6 +89,9 @@
   justify-content: center;
   padding-bottom: 75px;
 }
+.imageWrapper a:active {
+  background: transparent;
+}
 @media (min-width: 1280px) {
   .imageWrapper {
     margin-bottom: 0;
@@ -108,14 +111,13 @@
   display: flex;
   align-items: flex-end;
   justify-content: center;
-  font-family: 'Press Start 2P', cursive;
   height: 250px;
   width: 250px;
   z-index: 3;
   top: 0;
   left: 0;
   overflow: hidden;
-  transform: translate3d(0, 0, 0);
+  text-transform: uppercase;
   transition: transform 0s 0.3s ease-in-out, opacity 0.2s 0.1s ease-in-out;
 }
 @media (min-width: 1440px) {
@@ -154,15 +156,17 @@
   }
 }
 .imageWrapper div h3 {
-  background: rgba(255, 255, 255, 0.1);
+  background: #5a32e6;
   backdrop-filter: blur(7px);
-  border-radius: 5px;
+  border-radius: 4px;
+  font-family: var(--mf-font-body);
+  font-size: 0.8rem;
+  font-weight: 700;
+  letter-spacing: 0.08rem;
   position: relative;
   color: #a5b9f6;
   display: block;
-  font-size: 0.8rem;
-  font-weight: 100;
-  padding: 8px 10px;
+  padding: 10px 15px;
   margin-bottom: 0;
   text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
   /* transform: translate3d(0, 275px, 0); */
@@ -175,7 +179,7 @@
 }
 
 .imageWrapper a:hover h3 {
-  background: rgba(255, 255, 255, 0.15);
+  background: #5a32e660;
 }
 
 .featureImage {