From 3d6e695619b6e684a95f45cc1499f45a2478f136 Mon Sep 17 00:00:00 2001
From: Yath Seanghay <seanghay.dev@gmail.com>
Date: Thu, 7 Jan 2021 19:32:37 +0700
Subject: [PATCH] add npx script

---
 pages/index.js     |  8 ++++++++
 styles/globals.css | 30 ++++++++++++++++++++++++++++++
 2 files changed, 38 insertions(+)

diff --git a/pages/index.js b/pages/index.js
index 53e4159..3e74726 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -189,8 +189,16 @@ export default function Home() {
                                 <ReactSVG src="/github.svg"/>
                             </a>
                         </div>
+
+                        <h5>Or using command line</h5>
+                        <p className="vd-code-snippet">
+                            npx <span className="vd-cmd">vector-drawable-svg</span> <span className="vd-input">my-drawable.xml</span> <span className="vd-input">out.svg</span>
+                        </p>
+
                     </footer>
+
                 </div>
+
             </div>
         </>
     )
diff --git a/styles/globals.css b/styles/globals.css
index 0b334e3..7cea504 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -228,6 +228,7 @@ button:not(:disabled):active {
 .vd-footer {
     margin-top: 20px;
     margin-bottom: 100px;
+    text-align: center;
 }
 
 .vd-github svg {
@@ -236,12 +237,39 @@ button:not(:disabled):active {
 }
 
 
+.vd-code-snippet .vd-cmd {
+    color: var(--vd-color-primary);
+}
+
+.vd-code-snippet .vd-input {
+    color: var(--vd-color-secondary-text);
+}
+
+.vd-code-snippet {
+    background: var(--vd-color-on-surface);
+    border-radius: calc(var(--vd-size-corner-radius) / 2.5);
+    font-family: "JetBrains Mono", monospace;
+    font-weight: bold;
+    border: 1px solid rgba(255, 255,255, 0.1);
+    position: relative;
+    white-space: nowrap;
+    max-width: 600px;
+
+    padding: 14px 18px;
+    overflow-x: auto;
+}
+
 @media only screen and (max-width: 600px) {
 
+    .vd-code-snippet {
+        max-width: 300px;
+    }
+
     .vd-title {
         font-size: 1.8em;
     }
 
+
     .vd-subtitle {
         font-size: 1em;
     }
@@ -260,3 +288,5 @@ button:not(:disabled):active {
     }
 
 }
+
+