Added custom styling

Author: gnbm

docs/intro/vscode-extension.md

@@ -12,33 +12,10 @@ The [WebNative Visual Studio Code extension](https://marketplace.visualstudio.co
 If you have VS Code on this computer click Install below. You can also find the extension by searching for "WebNative".
 
 <a href="vscode:extension/WebNative.webnative" target="_self">
-  <button
-    style={{
-      color: 'var(--ifm-color-content-inverse)',
-      cursor: 'pointer',
-      fontWeight: 'bold',
-      padding: 16,
-      paddingLeft: 32,
-      paddingRight: 32,
-      border: 0,
-      borderRadius: 100,
-      backgroundColor: 'var(--ifm-font-color-base)',
-    }}
-  >Install</button>
+  <button className="install-button">Install</button>
 </a>
 <a href="https://webnative.dev/introduction/getting-started/" target="_self">
-  <button
-    style={{
-      color: 'var(--ifm-font-color-base)',
-      cursor: 'pointer',
-      fontWeight: 'bold',
-      padding: 16,
-      paddingLeft: 32,
-      paddingRight: 32,
-      borderRadius: 100,
-      backgroundColor: 'var(--admonition-info-c-bg)',
-    }}
-  >Docs</button>
+  <button className="docs-button">Docs</button>
 </a>
 
 ## Additional Documentation

src/styles/custom.scss

@@ -35,7 +35,7 @@
     'Segoe UI emoji';
   --ifm-font-family-monospace: 'SFMono-Regular', 'Roboto Mono', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
 
-  --ifm-menu-link-sublist-icon: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNiIgdmlld0JveD0iMCAwIDEwIDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04Ljk5OTg4IDVMNC45OTk4OCAxTDAuOTk5ODc4IDUiIHN0cm9rZT0iIzAzMDYwQiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K');
+  --ifm-menu-link-sublist-icon: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNiIgdmlld0JveD0iMCAwIDEwIDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik08Ljk5OTg4IDVMNC45OTk4OCAxTDAuOTk5ODc4IDUiIHN0cm9rZT0iIzAzMDYwQiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K');
 
   //#region ----------- Z Indices ------------
   --z-sidebar: 2000;
@@ -225,3 +225,26 @@ iframe {
     }
   }
 }
+
+.install-button {
+  color: var(--admonition-info-c-bg);
+  cursor: pointer;
+  font-weight: bold;
+  padding: 16px;
+  padding-left: 32px;
+  padding-right: 32px;
+  border: 0;  
+  border-radius: 100px;
+  background-color: var(--ifm-font-color-base);
+}
+
+.docs-button {
+  color: var(--ifm-font-color-base);
+  cursor: pointer;
+  font-weight: bold;
+  padding: 16px;
+  padding-left: 32px;
+  padding-right: 32px;
+  border-radius: 100px;
+  background-color: var(--admonition-info-c-bg);
+}