most of creating components, increase legibility of bold in article and callouts

quartz/styles/base.scss

@@ -42,6 +42,7 @@ ul,
   hyphens: auto;
 }
 
+
 .math {
   font-size: 1.1rem;
   &.math-display {
@@ -108,6 +109,10 @@ a {
       margin-top: 0;
       margin-bottom: 0;
     }
+
+    p > strong {
+      color: var(--dark);
+    }
   }
 
   & > #quartz-body {

quartz/styles/callouts.scss

@@ -14,59 +14,59 @@
 
   &[data-callout="note"] {
     --color: #448aff;
-    --border: #448aff22;
-    --bg: #448aff09;
+    --border: #448aff44;
+    --bg: #448aff10;
   }
 
   &[data-callout="abstract"] {
     --color: #00b0ff;
-    --border: #00b0ff22;
-    --bg: #00b0ff09;
+    --border: #00b0ff44;
+    --bg: #00b0ff10;
   }
 
   &[data-callout="info"],
   &[data-callout="todo"] {
     --color: #00b8d4;
-    --border: #00b8d422;
-    --bg: #00b8d409;
+    --border: #00b8d444;
+    --bg: #00b8d410;
   }
 
   &[data-callout="tip"] {
     --color: #00bfa5;
-    --border: #00bfa522;
-    --bg: #00bfa509;
+    --border: #00bfa544;
+    --bg: #00bfa510;
   }
 
   &[data-callout="success"] {
     --color: #09ad7a;
-    --border: #09ad7122;
-    --bg: #09ad7109;
+    --border: #09ad7144;
+    --bg: #09ad7110;
   }
 
   &[data-callout="question"] {
     --color: #dba642;
-    --border: #dba64222;
-    --bg: #dba64209;
+    --border: #dba64244;
+    --bg: #dba64210;
   }
 
   &[data-callout="warning"] {
     --color: #db8942;
-    --border: #db894222;
-    --bg: #db894209;
+    --border: #db894244;
+    --bg: #db894210;
   }
 
   &[data-callout="failure"],
   &[data-callout="danger"],
   &[data-callout="bug"] {
     --color: #db4242;
-    --border: #db424222;
-    --bg: #db424209;
+    --border: #db424244;
+    --bg: #db424210;
   }
 
   &[data-callout="example"] {
     --color: #7a43b5;
-    --border: #7a43b522;
-    --bg: #7a43b509;
+    --border: #7a43b544;
+    --bg: #7a43b510;
   }
 
   &[data-callout="quote"] {