Add bullet point and code styling.

Signed-off-by: bgravenorst <[email protected]>

Author: bgravenorst

src/pages/quickstart/styles.module.css

@@ -236,24 +236,24 @@
   border-radius: 50%;
 }
 
-.switch input:focus+.slider {
+.switch input:focus + .slider {
   box-shadow: 0 0 1px var(--ifm-color-primary-light);
 }
 
-.switch input:checked+.slider {
+.switch input:checked + .slider {
   background-color: var(--ifm-color-primary-light);
 }
 
-input:checked+.slider::before {
+input:checked + .slider::before {
   transform: translateX(16px);
 }
 
-.switch input:checked+.slider::before {
+.switch input:checked + .slider::before {
   background-color: var(--ifm-color-white);
 }
 
 /* Dark mode: Better visibility for checked switches */
-[data-theme='dark'] .switch input:checked+.slider {
+[data-theme='dark'] .switch input:checked + .slider {
   background-color: var(--ifm-color-primary);
 }
 
@@ -851,20 +851,24 @@ input:checked+.slider::before {
 .separatorLine {
   width: 100%;
   height: 1px;
-  background: linear-gradient(to right,
-      transparent 0%,
-      var(--ifm-color-emphasis-300) 50%,
-      transparent 100%);
+  background: linear-gradient(
+    to right,
+    transparent 0%,
+    var(--ifm-color-emphasis-300) 50%,
+    transparent 100%
+  );
 }
 
 /* Completion Indicator */
 .completionIndicator {
   text-align: center;
   padding: 2rem;
   margin: 4rem 1.5rem 2rem;
-  background: linear-gradient(135deg,
-      var(--ifm-color-success-light) 0%,
-      var(--ifm-color-success) 100%);
+  background: linear-gradient(
+    135deg,
+    var(--ifm-color-success-light) 0%,
+    var(--ifm-color-success) 100%
+  );
   color: white;
   border-radius: 12px;
   font-size: 18px;
@@ -874,9 +878,11 @@ input:checked+.slider::before {
 
 /* Dark mode: Better contrast for completion indicator */
 [data-theme='dark'] .completionIndicator {
-  background: linear-gradient(135deg,
-      var(--consumer-green-dark) 0%,
-      var(--institution-green-dark) 100%);
+  background: linear-gradient(
+    135deg,
+    var(--consumer-green-dark) 0%,
+    var(--institution-green-dark) 100%
+  );
   color: white;
 }
 
@@ -972,6 +978,64 @@ input:checked+.slider::before {
   }
 }
 
+/* Step Body - MDX Content Styling */
+.stepBody {
+  /* Enable proper markdown styling for MDX content */
+}
+
+/* Ensure lists display properly with bullet points */
+.stepBody ul {
+  list-style: disc;
+  list-style-position: outside;
+  padding-left: 1.5rem;
+  margin: 1rem 0;
+}
+
+.stepBody ol {
+  list-style: decimal;
+  list-style-position: outside;
+  padding-left: 1.5rem;
+  margin: 1rem 0;
+}
+
+.stepBody li {
+  margin: 0.5rem 0;
+  line-height: 1.6;
+}
+
+/* Only target inline code, not code blocks */
+.stepBody p > code,
+.stepBody li > code,
+.stepBody span > code,
+.stepBody td > code,
+.stepBody th > code,
+.stepBody h1 > code,
+.stepBody h2 > code,
+.stepBody h3 > code,
+.stepBody h4 > code,
+.stepBody h5 > code,
+.stepBody h6 > code,
+.stepBody a > code {
+  font-family: var(--font-mm-sans-mono);
+  font-size: 80%;
+  background: var(--ifm-code-background);
+  border-radius: var(--ifm-code-border-radius);
+  padding: 0.15rem 0.3rem;
+  color: var(--ifm-code-color);
+  border: 1px solid var(--ifm-color-emphasis-300);
+}
+
+/* Ensure code blocks are NOT affected */
+.stepBody pre code {
+  /* Reset any inline code styling for code blocks */
+  font-size: inherit;
+  background: inherit;
+  border-radius: inherit;
+  padding: inherit;
+  color: inherit;
+  border: none;
+}
+
 /* Media Step Styles */
 .mediaStepContainer {
   height: 100%;
@@ -1117,7 +1181,7 @@ input:checked+.slider::before {
 }
 
 /* Ensure both tab contents have identical sizing */
-.tabContent>* {
+.tabContent > * {
   width: 100% !important;
   height: 100% !important;
   flex: 1 1 auto;
@@ -1160,7 +1224,7 @@ input:checked+.slider::before {
   --w3a-ib-code-tab-background-color: var(--ifm-color-emphasis-100) !important;
 }
 
-.tabContent .hybridCodeView>* {
+.tabContent .hybridCodeView > * {
   width: 100% !important;
   height: 100%;
   flex: 1;
@@ -1270,7 +1334,7 @@ input:checked+.slider::before {
 }
 
 /* Force exact same layout for both tab types */
-.hybridTabContainer .tabContent>div {
+.hybridTabContainer .tabContent > div {
   width: 100% !important;
   height: 100% !important;
   display: flex !important;
@@ -1352,4 +1416,4 @@ input:checked+.slider::before {
     max-height: 85% !important;
     border-radius: 8px !important;
   }
-}
+}