refactor: use built-in style instead of custom

Author: kungfux

_posts/2022/2022-02-06-make-sure-your-tests-can-fail.md

@@ -17,7 +17,7 @@ Over the past few months, I've encountered a recurring situation during code rev
 ## Case study
 Let me share an example so we can go through it together. Imagine a test that needs to verify that some data in the list appears ordered in the UI.
 
-<pre class="align-center">
+<pre class="d-flex justify-content-center">
 🛒Shopping list
   ☑️ Apples
   ☑️ Bread
@@ -97,4 +97,4 @@ This is something we have to deal with. No one is going to write tests for tests
 ## Conclusion
 Here are some recommendations to follow when creating tests:
 - Make sure that the code you create does what you think it should do.
-- Run the test under conditions where you expect it to fail to prove that it can.
+- Run the test under conditions where you expect it to fail to prove that it can.

assets/css/jekyll-theme-chirpy.scss

@@ -23,32 +23,30 @@
 }
 
 /*
- * Post styles
+ * Page styles
  */
 
-// Schemas and code blocks styles
-div.highlighter-rouge {
-  max-height: 70vh;
-  overflow-y: auto;
-}
-
-// Custom alignment styles
-.align-center {
-  display: flex;
-  justify-content: center;
-}
-
-// Progress bar
+ // Back-to-top progress bar
 #progress-circle {
   margin: -1px -1px;
   top: -2.75rem;
   position: relative;
   transform: rotate(-90deg);
-}
 
-#progress-circle circle {
+  circle {
   stroke: var(--toc-highlight);
   stroke-dasharray: 2 * 3.14 * 20;
   stroke-dashoffset: 2 * 3.14 * 20;
   transition: stroke-dashoffset 0.2s;
+  }
+}
+
+/*
+ * Post styles
+ */
+
+// Schemas and code blocks styles
+div.highlighter-rouge {
+  max-height: 70vh;
+  overflow-y: auto;
 }