134 moar design tweaks (#140)

* #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

docs/great-houses/house-of-daos.mdx

@@ -6,6 +6,7 @@ title: 💫 House of DAOs
 
 <details>
 
+
 <summary>🤨👉Wait, WTF are DAOs???👈</summary>
 <br />
 
@@ -40,16 +41,17 @@ These are the frameworks for launching DAOs on the Ethereum network:
 
 ## 🛠️Other Infrastructure
 
--   **[Sourcecred](https://sourcecred.io/)** - A tool for communities to measure and reward value creation.
--   **[AraCred](https://aracred.github.io/)** - A middleware for bridging Sourcecred cred into Aragon DAO tokens.
--   **[Collab.land](https://collab.land/)** - A bot helping manage memberships in token curated communities.
--   **[Uniswap](https://uniswap.org/)** - Automated market-making, for making your token tradeable.
--   **[Etherize](https://etherize.io/)** - Summon a legal wrapper for your DAO.
--   **[Otonomos](https://otonomos.com/)** - Otonomos helps the crypto community form offchain and onchain legal entities.
-
+- **[Sourcecred](https://sourcecred.io/)** - A tool for communities to measure and reward value creation.
+- **[AraCred](https://aracred.github.io/)** - A middleware for bridging Sourcecred cred into Aragon DAO tokens.
+- **[Collab.land](https://collab.land/)** - A bot helping manage memberships in token curated communities.
+- **[Uniswap](https://uniswap.org/)** - Automated market-making, for making your token tradeable.
+- **[Etherize](https://etherize.io/)** - Summon a legal wrapper for your DAO.
+- **[Otonomos](https://otonomos.com/)** - Otonomos helps the crypto community form offchain and onchain legal entities.
 
 ## 🥰Friendly DAOs
+
 This is by no means an extensive list of DAOs. These are the DAOs that we share at least one member with, DAOs that we trust.
+
 #### 💪Builder DAOs
 
 - ⚪ **[Deep Work](https://deepwork.studio/)** - Deep Work is a distributed product design studio that helps highly technical teams move to product market fit, faster.
@@ -127,4 +129,12 @@ These are some of the books that might come in handy when interested in building
 - Next up: House of dApps? House of DeFiance? House of Tokens? 😱 Frontrun me?
 
 ## Subscribe?
-<iframe src="https://metagame.substack.com/embed" width="480" height="320" style="border:1px solid #EEE; background:white;" frameborder="0" scrolling="no"></iframe>
+
+<iframe
+  width='480'
+  height='320'
+  src='https://metagame.substack.com/embed'
+  frameborder='0'
+  scrolling='no'
+  style={{ background: 'white' }}
+></iframe>

src/css/custom.css

@@ -18,10 +18,12 @@
   --ifm-color-primary-lightest: #ff4da0;
   --mf-button-primary: #b72886;
   --mf-button-nav: #5a32e6;
+  --mf-color-primary-rgb: 27, 13, 42;
   --mf-color-secondary: #261942;
   --mf-color-secondary-rgb: 38, 25, 66;
   --mf-color-text-body: #a5b9f6;
   --mf-color-link-hover: #392373;
+  --mf-color-link-rgb: 255, 0, 119;
   --mf-font-body: 'IBM Plex Sans';
   --ifm-code-font-size: 95%;
   --ifm-font-size-base: 17px;
@@ -58,7 +60,7 @@ body,
 
 @media (min-width: 995px) {
   .main-wrapper > [class^='docPage'] {
-    backdrop-filter: blur(15px);
+    backdrop-filter: blur(5px);
   }
 }
 .inner-wrapper.home {
@@ -139,19 +141,71 @@ body,
 
 @media (min-width: 995px) {
   .main-wrapper [role='complementary'] [class^='sidebar'] {
+    position: relative;
     border-radius: 6px;
     backdrop-filter: blur(7px);
-    background-color: rgba(var(--mf-color-secondary-rgb), 0.5);
+    background-color: rgba(255, 255, 255, 0.08);
     box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
-    transition: height 0.3s ease-in-out;
+    transition: box-shadow 0.3s ease-in-out;
     margin-top: 10rem;
     width: 100%;
     max-width: 250px;
     height: auto;
     padding: 5px;
+    overflow: hidden;
+    z-index: 2;
   }
   [class^='sidebar'] a {
     font-size: 0.8rem;
+    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 {
+    content: '';
+    position: absolute;
+    display: none;
+    top: 0;
+    left: -120%;
+    width: 100%;
+    height: 100%;
+    filter: blur(15px);
+
+    background: linear-gradient(
+      45deg,
+      transparent,
+      rgba(255, 255, 255, 0),
+      rgba(255, 255, 255, 0.07),
+      rgba(255, 255, 255, 0),
+      transparent
+    );
+    transition: all 0.6s 0.4s ease-in-out;
+    z-index: 1;
+  }
+  .main-wrapper [role='complementary'] [class^='sidebar']:after {
+    content: '';
+    position: absolute;
+    /* display: block; */
+    top: 0;
+    left: -120%;
+    width: 100%;
+    height: 100%;
+    filter: blur(15px);
+    background: linear-gradient(
+      45deg,
+      transparent,
+      rgba(255, 255, 255, 0),
+      rgba(255, 255, 255, 0.12),
+      rgba(255, 255, 255, 0),
+      transparent
+    );
+    transition: all 0.4s 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%;
   }
 }
 
@@ -230,6 +284,66 @@ body,
 .markdown h2 {
   font-size: 1.4rem;
 }
+
+.pagination-nav__link {
+  position: relative;
+  background: rgba(255, 255, 255, 0.08);
+  backdrop-filter: blur(7px);
+  border: 0;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
+  overflow: hidden;
+  transition: box-shadow 0.2s ease, background-color 0.2s 0.3s ease-in-out,
+    color 0.5s 0.2s ease;
+  z-index: 2;
+}
+.pagination-nav__link:after {
+  content: '';
+  position: absolute;
+  display: block;
+  top: 0;
+  left: -100%;
+  width: 50%;
+  height: 100%;
+  background: linear-gradient(
+    45deg,
+    transparent,
+    rgba(255, 255, 255, 0),
+    rgba(255, 255, 255, 0.1),
+    rgba(255, 255, 255, 0),
+    transparent
+  );
+  transition: all 0.4s 0.1s ease-in-out;
+  z-index: 2;
+}
+.pagination-nav__link:before {
+  content: '';
+  position: absolute;
+  /* display: none; */
+  top: 0;
+  left: -150%;
+  width: 150%;
+  height: 300%;
+  /* transform: rotate(-45deg); */
+  background: linear-gradient(
+    45deg,
+    transparent,
+    rgba(255, 255, 255, 0),
+    rgba(255, 255, 255, 0.1),
+    rgba(255, 255, 255, 0),
+    transparent
+  );
+  transition: position 0.4s 0.2s ease-in-out;
+  z-index: 3;
+}
+.pagination-nav__link:hover {
+  background: rgba(255, 255, 255, 0.12);
+  color: #ff3392;
+}
+.pagination-nav__link:hover:after,
+.pagination-nav__link:hover:before {
+  left: 100%;
+}
+
 .pagination-nav__link .pagination-nav__label {
   font-size: 0.8rem;
 }
@@ -311,10 +425,10 @@ a:hover,
   background-color: transparent;
 }
 
-.pagination-nav__link {
+/* .pagination-nav__link {
   border-color: var(--mf-button-nav);
   transition: all 0.2s ease-in-out;
-}
+} */
 
 .navbar .navbar__items.navbar__items--right {
   flex-grow: 0;

src/pages/styles.module.css

@@ -25,7 +25,7 @@
 }
 @media screen and (min-width: 1366px) {
   .heroBanner {
-    padding: 3rem 0 2rem;
+    padding: 3rem 0 0;
   }
   .heroSubtitle {
     font-size: 1.5rem;