fix: Fixing line numbering in docs (#4619)

* fix: Fixing line numbering in docs

* fix: Fixing indentation size

* Fixing styles

---------

Co-authored-by: Karl <karl.carstensen@gmail.com>

Author: yhakbar

docs-starlight/src/components/Header.astro

@@ -39,24 +39,24 @@ try {
 	<!-- Logo -->
 	<a href="/" class="hover:cursor-pointer">
 		<Image
-			src={TerragruntLogo}
 			alt="Terragrunt Logo"
 			height={40}
 			loading="eager"
+			src={TerragruntLogo}
 		/>
 	</a>
 	<!-- Right Menu -->
 	<div class="flex items-center gap-6">
 		<div class="hidden lg:flex items-center gap-6 border-r border-stroke-dark pr-6">
 			<!-- Socials -->
 			<div class="flex items-center gap-4 text-gray-1">
-				<a href="https://github.com/gruntwork-io/terragrunt" class="flex items-center gap-2 hover:cursor-pointer hover:text-[var(--sl-color-gray-1)] transition .25s ease-in-out" target="_blank" rel="noopener noreferrer">
+				<a href="https://github.com/gruntwork-io/terragrunt" class="social-icon flex items-center gap-2 transition .25s ease-in-out" target="_blank" rel="noopener noreferrer">
 					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
 						<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/>
 					</svg>
 					<span class="text-sm font-sans">{starCountDisplay}</span>
 				</a>
-				<a href="https://discord.com/invite/YENaT9h8jh" class="flex items-center gap-2 hover:cursor-pointer hover:text-[var(--sl-color-gray-1)] transition .25s ease-in-out" target="_blank" rel="noopener noreferrer">
+				<a href="https://discord.com/invite/YENaT9h8jh" class="social-icon flex items-center gap-2 transition .25s ease-in-out" target="_blank" rel="noopener noreferrer">
 					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-discord" viewBox="0 0 16 16">
 						<path d="M13.545 2.907a13.2 13.2 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.2 12.2 0 0 0-3.658 0 8 8 0 0 0-.412-.833.05.05 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.04.04 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032q.003.022.021.037a13.3 13.3 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019q.463-.63.818-1.329a.05.05 0 0 0-.01-.059l-.018-.011a9 9 0 0 1-1.248-.595.05.05 0 0 1-.02-.066l.015-.019q.127-.095.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.05.05 0 0 1 .053.007q.121.1.248.195a.05.05 0 0 1-.004.085 8 8 0 0 1-1.249.594.05.05 0 0 0-.03.03.05.05 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.2 13.2 0 0 0 4.001-2.02.05.05 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.03.03 0 0 0-.02-.019m-8.198 7.307c-.789 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612m5.316 0c-.788 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612"/>
 					</svg>

docs-starlight/src/components/dv-Navbar.astro

@@ -56,14 +56,14 @@ try {
         <div class="flex items-center gap-6">
             <div class="hidden lg:flex items-center gap-6 border-r border-stroke-dark pr-6">
                 <!-- Socials -->
-                <div class="flex items-center gap-4 text-gray-1">
-                    <a href="https://github.com/gruntwork-io/terragrunt" class="flex items-center gap-2 hover:cursor-pointer hover:text-[var(--sl-color-gray-1)] transition .25s ease-in-out" target="_blank" rel="noopener noreferrer">
+                <div class="flex items-center gap-4">
+                    <a href="https://github.com/gruntwork-io/terragrunt" class="social-icon flex items-center gap-2 transition .25s ease-in-out" target="_blank" rel="noopener noreferrer">
                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
                             <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/>
                         </svg>
                         <span class="text-sm font-sans">{starCountDisplay}</span>
                     </a>
-                    <a href="https://discord.com/invite/YENaT9h8jh" class="flex items-center gap-2 hover:cursor-pointer hover:text-[var(--sl-color-gray-1)] transition .25s ease-in-out" target="_blank" rel="noopener noreferrer">
+                    <a href="https://discord.com/invite/YENaT9h8jh" class="social-icon flex items-center gap-2 transition .25s ease-in-out" target="_blank" rel="noopener noreferrer">
                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-discord" viewBox="0 0 16 16">
                             <path d="M13.545 2.907a13.2 13.2 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.2 12.2 0 0 0-3.658 0 8 8 0 0 0-.412-.833.05.05 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.04.04 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032q.003.022.021.037a13.3 13.3 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019q.463-.63.818-1.329a.05.05 0 0 0-.01-.059l-.018-.011a9 9 0 0 1-1.248-.595.05.05 0 0 1-.02-.066l.015-.019q.127-.095.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.05.05 0 0 1 .053.007q.121.1.248.195a.05.05 0 0 1-.004.085 8 8 0 0 1-1.249.594.05.05 0 0 0-.03.03.05.05 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.2 13.2 0 0 0 4.001-2.02.05.05 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.03.03 0 0 0-.02-.019m-8.198 7.307c-.789 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612m5.316 0c-.788 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612"/>
                         </svg>

docs-starlight/src/content/docs/01-getting-started/01-quick-start.mdx

@@ -322,7 +322,7 @@ You can also see what to expect in your filesystem at each step [here](https://g
    - Stores downloaded modules and providers
    - Stores generated files (in this case, the `hi.txt` file will be created under `.terragrunt-cache/[HASH]/[HASH]/hi.txt` rather than directly in the `foo` or `bar` directories)
 
-   With this configuration, the `hi.txt` files will be created directly in the `foo` and `bar` directories instead of the `.terragrunt-cache` directory. 
+   With this configuration, the `hi.txt` files will be created directly in the `foo` and `bar` directories instead of the `.terragrunt-cache` directory.
 
    The `.terragrunt-cache` directory is typically added to `.gitignore` files, similar to the `.terraform` directory that OpenTofu generates. You can safely delete this folder at any time, and Terragrunt will recreate it as necessary.
 

docs-starlight/src/styles/global.css

@@ -1,5 +1,4 @@
 @layer base, starlight, theme, components, utilities;
-@import "tailwindcss/preflight.css" layer(base);
 @import '@astrojs/starlight-tailwind';
 @import "tailwindcss/theme.css" layer(theme);
 @import "tailwindcss/utilities.css" layer(utilities);
@@ -109,6 +108,16 @@ header {
   padding: 0 !important;
 }
 
+.social-icon {
+  color: var(--color-gray-1) !important;
+  cursor: pointer;
+}
+
+.social-icon:hover {
+  color: var(--sl-color-gray-1) !important;
+  cursor: pointer;
+}
+
 * {
   box-sizing: border-box;
 }
@@ -121,6 +130,49 @@ body {
   padding: 0;
 }
 
+/* List styling to ensure proper rendering */
+ol {
+  list-style-type: decimal;
+  margin: 1em 0;
+  padding-left: 3em;
+}
+
+ol ol {
+  list-style-type: lower-alpha;
+  margin: 0.5em 0;
+  padding-left: 2.5em;
+}
+
+ol ol ol {
+  list-style-type: lower-roman;
+  margin: 0.5em 0;
+  padding-left: 2.5em;
+}
+
+/* Override numbering for sl-steps lists which have their own numbering */
+ol.sl-steps {
+  list-style-type: none;
+}
+
+ol.sl-steps ol {
+  list-style-type: none;
+}
+
+ol.sl-steps ol ol {
+  list-style-type: none;
+}
+
+li {
+  margin: 0.5em 0;
+  line-height: 1.6;
+}
+
+/* Ensure list items have proper spacing and alignment */
+ol li {
+  display: list-item;
+  text-align: left;
+}
+
 /* Hide scrollbar for Chrome, Safari and Opera */
 .no-scrollbar::-webkit-scrollbar {
     display: none;