added markdown-it-attrs, started using for featured block

docs/.vuepress/components/T.vue

@@ -196,6 +196,11 @@ b, .b, strong {
   font-weight 600
 }
 
+.featured
+  border-left 1px dotted $colorPrimary
+  padding-left 1rem
+  margin-left -1rem
+
 // Lists
 // .l1, .l2, .l3, .l4, .l5, .l6, .l7, .l8
 //   li
@@ -275,13 +280,6 @@ b, .b, strong {
     @extend .l7
     @extend .c-text400
 
-  .featured
-    border-left 1px dotted $colorPrimary
-    padding-left 1em
-    margin-left -1em
-    p:not(.l1):not(.l2):not(.l3):not(.l4):not(.l5):not(.l6):not(.l7):not(.l8)
-      @extend .l4
-
 .dark-mode
   .content__default
     h1:not(.l1):not(.l2):not(.l3):not(.l4):not(.l5):not(.l6):not(.l7):not(.l8)

docs/.vuepress/config.js

@@ -75,6 +75,9 @@ module.exports = {
       renderPermalink: renderHeaderWithExplicitAnchor
     }
   },
+  extendMarkdown: md => {
+    md.use(require('markdown-it-attrs'))
+  },
   locales: {
     // The key is the path for the locale to be nested under.
     // As a special case, the default locale can use '/' as its path.

docs/.vuepress/theme/components/Hero.vue

@@ -37,7 +37,7 @@
         />
       </g>
     </svg>
-    <div id="morph" ref="morph">Ξ</div>
+    <T h1 l2 mb0><span id="morph" ref="morph">Ξ</span></T>
   </div>
 </template>
 
@@ -158,12 +158,6 @@ export default {
   left calc(50% - 25px)
   cursor pointer
 
-#morph
-  font-size 1.8em
-  margin-top -0.5em
-  margin-bottom 0.25em
-  position relative
-
 .hero
   padding 1em
   max-width 60vw

docs/.vuepress/theme/styles/theme.styl

@@ -13,7 +13,6 @@ body
   font-family system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
   -webkit-font-smoothing antialiased
   -moz-osx-font-smoothing grayscale
-  font-size $fsRegular
   line-height $lhRegular
   color $textColor
 
@@ -38,22 +37,6 @@ a
 .pointer
   cursor pointer
 
-.button
-  font-size $fsXSmall
-  background white
-  border 1px dotted $textColor
-  border-radius 18px
-  padding 0.6em 2.5em
-  cursor pointer
-  color $textColor
-  box-shadow 0 1px 4px $boxShadowColor
-  transition all 0.5s cubic-bezier(.25,.8,.25,1)
-
-  &:hover
-    border-color $colorPrimary
-    color $colorPrimary
-    box-shadow 0 4px 8px $boxShadowHoverColor
-
 
 #wrapper.home
   .hide-home
@@ -125,8 +108,6 @@ ul
     opacity 1
 
 div#wrapper:not(.home)>.content, .page
-  font-size $fsMedium
-  line-height $lhLarge
   padding-top 9em
 
   h2

docs/dapps/index.md

@@ -12,11 +12,7 @@ lang: en-US
 
 # Using Ethereum {#using-ethereum}
 
-<div class="featured">
-
-**Want to get started using Ethereum?** There are hundreds of decentralized applications (dapps) built on Ethereum that you can use today.
-
-</div>
+**Want to get started using Ethereum?** There are hundreds of decentralized applications (dapps) built on Ethereum that you can use today. {.l3 .featured}
 
 ## How to use an application built on Ethereum {#how-to-use-an-application-built-on-ethereum}
 

docs/developers/index.md

@@ -14,7 +14,7 @@ sidebarDepth: 1
 
 # Developer Resources {#developer-resources}
 
-<div class="featured">Guides, resources, and tools for developers building on Ethereum.</div>
+Guides, resources, and tools for developers building on Ethereum.{.l3 .featured}
 
 ## Getting started {#getting-started}
 

package.json

@@ -38,6 +38,7 @@
   },
   "dependencies": {
     "axios": "^0.19.0",
+    "markdown-it-attrs": "^3.0.2",
     "moment": "^2.24.0",
     "netlify-lambda": "^1.6.3",
     "random-js": "^2.1.0",

yarn.lock

@@ -6048,6 +6048,11 @@ markdown-it-anchor@^5.0.2:
   resolved "https://registry.yarnpkg.com/markdown-it-anchor/-/markdown-it-anchor-5.2.5.tgz#dbf13cfcdbffd16a510984f1263e1d479a47d27a"
   integrity sha512-xLIjLQmtym3QpoY9llBgApknl7pxAcN3WDRc2d3rwpl+/YvDZHPmKscGs+L6E05xf2KrCXPBvosWt7MZukwSpQ==
 
+markdown-it-attrs@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/markdown-it-attrs/-/markdown-it-attrs-3.0.2.tgz#55a466b2b60d755b2a77288dff175e741fc1143d"
+  integrity sha512-q45vdXU9TSWaHgFkWEFM97YHEoCmOyG9csLLdv3oVC6ARjT77u4wfng9rRtSOMb5UpxzT7zTX5GBbwm15H40dw==
+
 markdown-it-chain@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/markdown-it-chain/-/markdown-it-chain-1.3.0.tgz#ccf6fe86c10266bafb4e547380dfd7f277cc17bc"