Add monospace font + vanity address definition

README.md

@@ -10,6 +10,11 @@ Just type [`git.io/veth`](https://git.io/veth) to use it ⚡️
 
 [![Vanity-ETH](https://i.imgur.com/lv6Gej5.png)](https://git.io/veth)
 
+## What's a vanity address?
+
+A vanity address is an address which part of it is chosen by yourself, making it look less random.
+
+Examples: `0xc0ffee254729296a45a3885639AC7E10F9d54979`, or `0x999999cf1046e68e36E1aA2E0E07105eDDD1f08E`
 
 ## Usage
 

src/App.vue

@@ -318,6 +318,13 @@
         src: local('Montserrat Bold'), local('Montserrat-Bold'), url(./assets/fonts/montserrat-bold.woff2) format('woff2')
         unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215
 
+    @font-face
+        font-family: 'Roboto Mono'
+        font-style: normal
+        font-weight: 400
+        src: local('Roboto Mono'), local('RobotoMono-Regular'), url(./assets/fonts/roboto-mono.woff2) format('woff2')
+        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
+
     @font-face
         font-family: 'icomoon'
         src: url(./assets/fonts/icomoon.woff) format('woff')

src/css/variables.sass

@@ -20,3 +20,5 @@ $error: #ff4a40
 
 $shadow: 1px 5px 10px rgba(0, 0, 0, 0.15)
 $shadow-big: 2px 10px 15px rgba(0, 0, 0, 0.15)
+
+$monospace-font: "Roboto Mono", "Courier New", "Courier", monospace

src/vue/Description.vue

@@ -3,6 +3,14 @@
         <p>
             Vanity-ETH is an open source tool using your web browser to generate Ethereum vanity addresses.
         </p>
+
+        <h2>What's a vanity address?</h2>
+        <p>
+            A vanity address is an address which part of it is chosen by yourself, making it look less random.<br>
+            Examples: <span class="monospace">0xc0ffee254729296a45a3885639AC7E10F9d54979</span>, or
+            <span class="monospace">0x999999cf1046e68e36E1aA2E0E07105eDDD1f08E</span>
+        </p>
+
         <h2>Usage</h2>
         <p>
             Enter the prefix of your choice below, then click 'generate' to start. Your browser is going to generate a
@@ -50,4 +58,7 @@
     p
         margin: 15px 0 20px
         color: $text-alt
+        .monospace
+            font-family: $monospace-font
+            font-size: 0.85em
 </style>

src/vue/Footer.vue

@@ -44,10 +44,9 @@
             margin-bottom: 20px
             color: $text
             a
-                font-family: "Courier New", "Courier", monospace
+                font-family: $monospace-font
                 margin-left: 15px
                 word-break: break-all
-                font-weight: bold
         .links
             text-align: right
             a

src/vue/Result.vue

@@ -52,11 +52,10 @@
         background-color: $panel-background-alt
 
     .output
-        font-family: "Courier New", "Courier", monospace
+        font-family: $monospace-font
         color: $text-alt
         margin-left: 15px
         word-break: break-all
-        font-weight: bold
 
     .panel > div:not(:last-child)
         margin-bottom: 15px

src/vue/Statistics.vue

@@ -112,8 +112,7 @@
             font-weight: 500
 
     .output
-        font-family: "Courier New", "Courier", monospace
-        font-size: 1.1em
+        font-family: $monospace-font
         color: $text-alt
         margin-left: 15px
         word-break: break-all