fix: change spec badges

- remove the left border from inline spec badges
- add additional left and right padding

fix #691

sass/atoms/_meta.scss

@@ -5,28 +5,13 @@
   background-color: $mdn-neutral100;
   border-radius: 6px;
   margin-right: math.div($base-spacing, 4);
-  padding: 0 math.div($base-spacing, 4);
+  padding: 0 math.div($base-spacing, 2);
 
   a {
     color: $mdn-neutral100;
   }
 }
 
-.html-version,
-.optional,
-.readonly {
-  border-left: 5px solid $mdn-neutral600;
-}
-
-.optional,
-.readonly {
-  border-color: $mdn-neutral100;
-}
-
-.html-version {
-  border-color: $mdn-green600;
-}
-
 /* Specification badges */
 .spec-living,
 .spec-standard {

styleguide/content/meta/_index.md

@@ -0,0 +1,29 @@
+---
+title: Meta data element styles - MDN Minimalist
+keywords: forms, form elements, mdn minimalist, mdn, sass, library
+description: The MDN Web Docs meta data element styles
+---
+
+## Meta data element styles
+
+### Read only badge (inline)
+
+<span title="This value may not be changed." class="badge inline readonly">Read only </span>
+
+#### Code
+
+```html
+<span title="This value may not be changed." class="badge inline readonly"
+  >Read only
+</span>
+```
+
+### Optional badge (inline)
+
+<span class="badge inline optional">Optional</span>
+
+#### Code
+
+```html
+<span class="badge inline optional">Optional</span>
+```

styleguide/layouts/partials/main-nav.html

@@ -14,6 +14,9 @@
     <li>
         <a href="/forms/">Forms</a>
     </li>
+    <li>
+        <a href="/meta/">Metadata</a>
+    </li>
     <li>
         <a href="/tables/">Tables</a>
     </li>