Update to site

sass/inuitcss/objects/_lozenges.scss

@@ -0,0 +1,47 @@
+@charset "UTF-8";
+@if $use-lozenges == true{
+
+/*------------------------------------*\
+    $LOZENGES
+\*------------------------------------*/
+/**
+ * Create pill- and lozenge-like runs of text, e.g.:
+ *
+   <p>This <span class=pill>here</span> is a pill!</p>
+ *
+   <p>This <span class=loz>here</span> is also a lozenge!</p>
+ *
+ * Pills have fully rounded ends, lozenges have only their corners rounded.
+ *
+ * Demo: jsfiddle.net/inuitcss/N3pGm
+ *
+ */
+.pill{
+    display:inline-block;
+    /**
+     * These numbers set in ems mean that, at its narrowest, a lozenge will be
+     * the same width as the `line-height` set on the `html` element.
+     * This allows us to use the `.loz` in almost any `font-size` we wish.
+     */
+    min-width:    ($line-height-ratio * 0.666667) * 1em;
+    padding-right:($line-height-ratio * 0.166667) * 1em;
+    padding-left: ($line-height-ratio * 0.166667) * 1em;
+              /* =1.50em */
+    text-align:center;
+    background-color:$base-ui-color;
+    color:#fff; /* Override this color in your theme stylesheet */
+
+    /**
+     * Normally we’d use border-radius:100%; but instead here we just use an
+     * overly large number; `border-radius:100%;` would create an oval on
+     * non-square elements whereas we just want to round the ends of an element.
+     */
+    border-radius:100px;
+}
+
+.loz{
+    @extend .pill;
+    border-radius:$brand-round;
+}
+
+}//endif