bugfix: add styles missing in production build

Author: kungfux

_posts/2018/2018-08-05-web-application-to-search-for-requirements.md

@@ -139,7 +139,7 @@ The application supports a variety of user inputs.
 | Text        | Contains phrase     | `web api`                   |
 | Text        | Contains words list | `api,performance`           |
 | Hierarchy*  |                     | `10.0-1`, `10.0-2.0-1`      |
-{: align="center" }
+{: .m-auto }
 
 Hierarchy is a special notation that establishes the connection between parent/child requirements, so when used, the application should return the list of closest parent/child requirements that are connected.
 

_posts/2021/2021-10-15-choosing-a-selector-strategy.md

@@ -21,7 +21,7 @@ What is a selector? In terms of web automation testing, a selector refers to the
 | CSS           | `.signIn`                      |
 | XPath         | `//button[@id='submitButton']` |
 | Link text     | `link=Sign In`                 |
-{: align="center" }
+{: .m-auto }
 
 When it comes to deciding which selector to use for a project, there are a few key things that are usually considered to make a "good" selector:
 1. **Unique**: The selector should be able to uniquely identify an element on the page.

assets/css/jekyll-theme-chirpy.scss

@@ -2,7 +2,8 @@
 ---
 
 @import 'main
-{%- if jekyll.environment == 'production' -%}
+{%- if jekyll.environment == ' production
+  ' -%}
   .bundle
 {%- endif -%}
 ';
@@ -26,18 +27,18 @@
  * Page styles
  */
 
- // Back-to-top progress bar
+// Back-to-top progress bar
 #progress-circle {
   margin: -1px -1px;
   top: -2.75rem;
   position: relative;
   transform: rotate(-90deg);
 
   circle {
-  stroke: var(--toc-highlight);
-  stroke-dasharray: 2 * 3.14 * 20;
-  stroke-dashoffset: 2 * 3.14 * 20;
-  transition: stroke-dashoffset 0.2s;
+    stroke: var(--toc-highlight);
+    stroke-dasharray: 2 * 3.14 * 20;
+    stroke-dashoffset: 2 * 3.14 * 20;
+    transition: stroke-dashoffset 0.2s;
   }
 }
 
@@ -50,3 +51,19 @@ div.highlighter-rouge {
   max-height: 70vh;
   overflow-y: auto;
 }
+
+/*
+ * Bootstrap
+ */
+
+.d-flex {
+  display: flex;
+}
+
+.justify-content-center {
+  justify-content: center;
+}
+
+.m-auto {
+  margin: auto;
+}