FVM & Metamask tutorials (#477)

Author: enoldev

assets/scss/common/_custom.scss

@@ -401,3 +401,71 @@ iframe {
     max-width: 100%;
   }
 }
+
+
+.before-begin {
+  background-color: #f5f5f5;
+  border-top: 1px solid #eaeaea;
+  border-left: 1px solid #eaeaea;
+  border-right: 1px solid #eaeaea;
+  border-radius: 8px 8px 0px 0px;
+  margin-bottom: 20px;
+}
+
+[data-dark-mode] .before-begin {
+  background-color: #3d3d3d;
+  border-color: #6c6c6c;
+}
+
+.before-begin .title {
+  font-size: 28px;
+  font-weight: bold;
+  color: #3a3a3a;
+}
+
+[data-dark-mode] .before-begin .title {
+  color: #e0e0e0;
+}
+
+.before-begin .inner-content {
+  width: 100%;
+  border-top: 1px solid #DEDEDEFF;
+  border-radius: 0px 0px 6px 6px;
+}
+
+[data-dark-mode] .before-begin .inner-content {
+  border-top: 1px solid #ababab;
+}
+
+[data-dark-mode] .before-begin .container {
+  border-top: 1px solid #6c6c6c;
+  border-radius: 0px 0px 6px 6px;
+}
+
+.before-begin-element {
+  background-color: #fafafa;
+  border-bottom: 1px solid #DEDEDEFF;
+  color: #313131;
+  font-weight: bold;
+  font-size: 20px;
+  align-items: center;
+  width: 100%;
+  height: auto;
+  padding: 6px;
+}
+
+[data-dark-mode] .before-begin-element {
+  background-color: #696969;
+  border-bottom: 1px solid #ababab;
+  color: white;
+}
+
+.before-begin-element .title {
+  color: #525252;
+  text-transform: uppercase;
+  font-size: 14px;
+}
+
+[data-dark-mode] .before-begin-element .title {
+  color: #e0e0e0;
+}

config/_default/menus/menus.en.toml

@@ -162,17 +162,44 @@
   identifier = "tutorials-ipfs"
   [tutorials.params]
     category = "ipfs"
+    icon = "/logos/ipfs.svg"
+    iconWidth = 23
+    iconHeight = 23
     image = "/tutorials/intro-ipfs.png"
 
-
 [[tutorials]]
   name = "Building libp2p applications"
   weight = 20
   identifier = "tutorials-libp2p"
   [tutorials.params]
     category = "libp2p"
+    icon = "/logos/libp2p.png"
+    iconWidth = 22.9
+    iconHeight = 26.4
     image = "/tutorials/libp2p.png"
 
+[[tutorials]]
+  name = "Building on the FVM"
+  weight = 30
+  identifier = "tutorials-fvm"
+  [tutorials.params]
+    category = "fvm"
+    icon = "/logos/fvm.png"
+    iconWidth = 14.71
+    iconHeight = 22.30
+    image = "/tutorials/fvm.png"
+
+[[tutorials]]
+  name = "Introduction to Metamask"
+  weight = 40
+  identifier = "tutorials-metamask-intro"
+  [tutorials.params]
+    category = "web3"
+    icon = "/logos/metamask.png"
+    iconWidth = 22
+    iconHeight = 22
+    image = "/tutorials/metamask.jpeg"
+
 # [[tutorials]]
 #   name = "Working with IPLD structures"
 #   weight = 30