From 83479076db951895593bbb9de3baf1f8eaff16a6 Mon Sep 17 00:00:00 2001
From: Nokome Bentley <nokome@stenci.la>
Date: Tue, 18 Feb 2020 10:19:23 +1300
Subject: [PATCH] fix(Bootstrap theme): Do not use mixins from shared; docs

---
 src/themes/bootstrap/README.md  |  9 +++++++--
 src/themes/bootstrap/styles.css | 30 +++++++++++++++++++++++++-----
 2 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/themes/bootstrap/README.md b/src/themes/bootstrap/README.md
index c8236ec04..4d5674ea1 100644
--- a/src/themes/bootstrap/README.md
+++ b/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.
diff --git a/src/themes/bootstrap/styles.css b/src/themes/bootstrap/styles.css
index a5230ff2d..c9e3963a8 100644
--- a/src/themes/bootstrap/styles.css
+++ b/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;