fix(Bootstrap theme): Do not use mixins from shared; docs

src/themes/bootstrap/README.md

@@ -1,5 +1,10 @@
 # Bootstrap
 
-A theme that pulls itself up using Twitter's [Bootstrap](https://getbootstrap.com/) toolkit. Designed as an illustration of a theme built using existing CSS.
+A theme that pulls itself up using Twitter's [Bootstrap](https://getbootstrap.com/) toolkit.
 
-Being an illustrative theme, it feature gratuitous use of Bootstrap components. See [`styles.css`](styles.css) and [`index.ts`](index.ts) for comments.
+Designed as an illustration of a theme built entirely using an existing CSS stylesheet. Being an illustrative theme, it:
+
+- includes gratuitous use of Bootstrap components
+- does not use an styles or mixins from the `shared` folder.
+
+For real theme, you probably don't want to do either of these things. See [`styles.css`](styles.css) and [`index.ts`](index.ts) for further comments.

src/themes/bootstrap/styles.css

@@ -1,3 +1,9 @@
+/**
+ * This theme is designed as an illustration of deriving a theme entirely
+ * from an existing stylesheet. It does not use an styles or mixins from
+ * the `shared` folder. See README.md for more.
+ */
+
 /**
  * Import the Bootstrap CSS, from their CDN, pinned to a specific version
  *
@@ -19,21 +25,33 @@
   max-width: 70rem;
 
   :--authors {
-    /* Use a Thema mixin to make authors a comma separated, inline list */
-    @mixin list-inline ', ';
+    /* Use Bootstrap's `list-inline` class  */
+    @extend .list-inline;
 
     /* For each author... */
     :--author {
+      /* Separate authors using a comma */
+      &:after {
+        content: ', ';
+      }
+
+      &:last-child:after {
+        content: normal;
+      }
+
       /* Place a space after each given name */
       :--givenName {
-        &::after {
+        &:after {
           content: '\00a0';
         }
       }
 
       /* Display affiliations as a space separated list of Use Bootstrap label */
       :--affiliations {
-        @mixin list-inline ' ';
+        @extend .list-inline;
+
+        display: inline-block;
+        margin: -5px;
 
         :--affiliation {
           @extend .label;
@@ -43,7 +61,9 @@
 
       /* Display emails with an icon */
       :--emails {
-        @mixin list-inline ', ';
+        @extend .list-inline;
+
+        display: inline-block;
 
         :--email {
           @extend .glyphicon;