UI issue fix

.gitignore

@@ -19,3 +19,6 @@ pnpm-debug.log*
 
 # macOS-specific files
 .DS_Store
+
+#devcontainer-lock
+.devcontainer/devcontainer-lock.json

src/content/docs/Products/SplashKit/Documentation/Splashkit Website/Usage Examples/02-creating-usage-examples.mdx

@@ -31,99 +31,99 @@ An initial usage example includes 6 files:
 - Descriptive title for the example, in a text file
 - Screenshot of the output
 
-1. ### Choosing a Function
+### 1. Choosing a Function
 
-   The planner board has numerous usage example suggestions for various functions, however you are
-   welcomed and encouraged to come up with your own creative ideas for these. Scroll through the
-   [API Documentation](https://splashkit.io/api/) to find various functions you could use for the
-   usage example, when coming up with an idea, make sure to also check to see if anyone else has
-   already done it.
+The planner board has numerous usage example suggestions for various functions, however you are
+welcomed and encouraged to come up with your own creative ideas for these. Scroll through the
+[API Documentation](https://splashkit.io/api/) to find various functions you could use for the usage
+example, when coming up with an idea, make sure to also check to see if anyone else has already done
+it.
 
-   The goal is to create **one usage example per function** in the SplashKit library. Building out
-   these single examples for each function is the priority to round out the variety of examples
-   available.
+The goal is to create **one usage example per function** in the SplashKit library. Building out
+these single examples for each function is the priority to round out the variety of examples
+available.
 
-   If you come up with a creative idea for a function that already has an example, please share it
-   in the SplashKit group chat or reach out to your Capstone Mentor to discuss whether it's a good
-   idea to add another example for that function.
+If you come up with a creative idea for a function that already has an example, please share it in
+the SplashKit group chat or reach out to your Capstone Mentor to discuss whether it's a good idea to
+add another example for that function.
 
-2. ### Creating The Program
+### 2. Creating The Program
 
-   Create the program with as few lines of code as possible. You'll need to write the program in
-   C++, C# (using top-level statements and OOP version), and Python, all using Splashkit. Start with
-   the language you're most comfortable with, then convert it to the others.
+Create the program with as few lines of code as possible. You'll need to write the program in C++,
+C# (using top-level statements and OOP version), and Python, all using Splashkit. Start with the
+language you're most comfortable with, then convert it to the others.
 
-   Note for C# to-level: Use `using static SplashKitSDK.SplashKit;`. For the OOP version: use
-   `using SplashKitSDK;`.
+Note for C# to-level: Use `using static SplashKitSDK.SplashKit;`. For the OOP version: use
+`using SplashKitSDK;`.
 
-   #### Example
+#### Example
 
-   If C++ is your strength, begin by creating a small program like this `dec_to_hex` example:
+If C++ is your strength, begin by creating a small program like this `dec_to_hex` example:
 
-   ```cpp
-   #include "splashkit.h"
+```cpp
+#include "splashkit.h"
 
-   int main()
-   {
-       write_line("Hello! Welcome to the decimal to hexadecimal converter.");
+int main()
+{
+  write_line("Hello! Welcome to the decimal to hexadecimal converter.");
 
-       // Prompt the user for a decimal input
-       write_line("Please enter a decimal number:");
+  // Prompt the user for a decimal input
+  write_line("Please enter a decimal number:");
 
-       // Read the input as a string
-       string dec_input = read_line();
+  // Read the input as a string
+  string dec_input = read_line();
 
-       // Convert the input string to an unsigned integer
-       unsigned int dec_value = convert_to_integer(dec_input);
+  // Convert the input string to an unsigned integer
+  unsigned int dec_value = convert_to_integer(dec_input);
 
-       // Convert the decimal value to hexadecimal format
-       string hex_value = dec_to_hex(dec_value);
+  // Convert the decimal value to hexadecimal format
+  string hex_value = dec_to_hex(dec_value);
 
-       // Display the result in hexadecimal format
-       write_line("The decimal value in hexadecimal format is: " + hex_value);
+  // Display the result in hexadecimal format
+  write_line("The decimal value in hexadecimal format is: " + hex_value);
 
-       return 0;
-   }
-   ```
+  return 0;
+}
+```
 
-   This example includes meaningful comments that clearly explain each part of the program, which
-   helps readers understand both the structure and function. When converting to C#, notice that the
-   structure and comments are kept consistent, with syntax changes specific to the language:
+This example includes meaningful comments that clearly explain each part of the program, which helps
+readers understand both the structure and function. When converting to C#, notice that the structure
+and comments are kept consistent, with syntax changes specific to the language:
 
-   ```csharp
-   using static SplashKitSDK.SplashKit;
+```csharp
+using static SplashKitSDK.SplashKit;
 
-   WriteLine("Hello! Welcome to the decimal to hexadecimal converter.");
+WriteLine("Hello! Welcome to the decimal to hexadecimal converter.");
 
-   // Prompt the user for a decimal input
-   WriteLine("Please enter a decimal number:");
+// Prompt the user for a decimal input
+WriteLine("Please enter a decimal number:");
 
-   // Read the input as a string
-   string dec_input = ReadLine();
+// Read the input as a string
+string dec_input = ReadLine();
 
-   // Convert the input string to an unsigned integer
-   uint dec_value = ConvertToInteger(dec_input);
+// Convert the input string to an unsigned integer
+uint dec_value = ConvertToInteger(dec_input);
 
-   // Convert the decimal value to hexadecimal
-   string hex_value = DecToHex(dec_value);
+// Convert the decimal value to hexadecimal
+string hex_value = DecToHex(dec_value);
 
-   // Display the result
-   WriteLine("The decimal value in hexadecimal format is: " + hex_value);
-   ```
+// Display the result
+WriteLine("The decimal value in hexadecimal format is: " + hex_value);
+```
 
-3. ### Title and Screenshot
+### 3. Title and Screenshot
 
-   Provide a creative title and a screenshot of the program's output.
+Provide a creative title and a screenshot of the program's output.
 
-   **Title:** Simple Decimal to Hexadecimal Converter
+**Title:** Simple Decimal to Hexadecimal Converter
 
-   Take a screenshot of the output window and save it. If the screenshot is of the terminal window,
-   please crop out any commands used to run the program.
+Take a screenshot of the output window and save it. If the screenshot is of the terminal window,
+please crop out any commands used to run the program.
 
-4. ### Adding these files to Splashkit Starlight.io
+### 4. Adding these files to Splashkit Starlight.io
 
-   Now that you're done, you should have the following 6 files when completing an initial usage
-   example PR:
+Now that you're done, you should have the following 6 files when completing an initial usage example
+PR:
 
 <FileTree>
   - txt file - C++ file - python file - C# (top-level statements) file - C# (OOP) file - Screenshot

src/content/docs/Products/SplashKit/Documentation/Splashkit Website/Usage Examples/06-updating-examples.mdx

@@ -26,131 +26,131 @@ When updating an existing usage example with a missing language, your contributi
 
 ---
 
-1. ### Reviewing Existing Examples
+### 1. Reviewing Existing Examples
 
-   Planner cards are typically created to update existing examples with missing languages. Review
-   the planner board to find examples that need additional languages to be added.
+Planner cards are typically created to update existing examples with missing languages. Review the
+planner board to find examples that need additional languages to be added.
 
-   For instance, if an example of `dec_to_hex` exists in C++ and Python but lacks a C# version and
-   there is a planner card for it, you can add the missing C# version.
+For instance, if an example of `dec_to_hex` exists in C++ and Python but lacks a C# version and
+there is a planner card for it, you can add the missing C# version.
 
-2. ### Writing the Program in the Missing Language
+### 2. Writing the Program in the Missing Language
 
-   Write the program in the missing language while maintaining consistency with the other versions.
-   Follow similar structure, naming conventions, and commenting styles. Below is an example for
-   adding C# to an existing C++ example:
+Write the program in the missing language while maintaining consistency with the other versions.
+Follow similar structure, naming conventions, and commenting styles. Below is an example for adding
+C# to an existing C++ example:
 
-   **Original C++ Code:**
+**Original C++ Code:**
 
-   ```cpp
-   #include "splashkit.h"
+```cpp
+#include "splashkit.h"
 
-   int main()
-   {
-       write_line("Hello! Welcome to the decimal to hexadecimal converter.");
+int main()
+{
+    write_line("Hello! Welcome to the decimal to hexadecimal converter.");
 
-       // Prompt the user for a decimal input
-       write_line("Please enter a decimal number:");
+    // Prompt the user for a decimal input
+    write_line("Please enter a decimal number:");
 
-       // Read the input as a string
-       string dec_input = read_line();
+    // Read the input as a string
+    string dec_input = read_line();
 
-       // Convert the input string to an unsigned integer
-       unsigned int dec_value = convert_to_integer(dec_input);
+    // Convert the input string to an unsigned integer
+    unsigned int dec_value = convert_to_integer(dec_input);
 
-       // Convert the decimal value to hexadecimal format
-       string hex_value = dec_to_hex(dec_value);
+    // Convert the decimal value to hexadecimal format
+    string hex_value = dec_to_hex(dec_value);
 
-       // Display the result in hexadecimal format
-       write_line("The decimal value in hexadecimal format is: " + hex_value);
+    // Display the result in hexadecimal format
+    write_line("The decimal value in hexadecimal format is: " + hex_value);
 
-       return 0;
-   }
-   ```
+    return 0;
+}
+```
 
-   **C# Version (Top-level statements):**
+**C# Version (Top-level statements):**
 
-   Note, for C# top-level statements, use `using static SplashKitSDK.SplashKit;`.
+Note, for C# top-level statements, use `using static SplashKitSDK.SplashKit;`.
 
-   ```csharp
-   using static SplashKitSDK.SplashKit;
+```csharp
+using static SplashKitSDK.SplashKit;
 
-   WriteLine("Hello! Welcome to the decimal to hexadecimal converter.");
+WriteLine("Hello! Welcome to the decimal to hexadecimal converter.");
 
-   // Prompt the user for a decimal input
-   WriteLine("Please enter a decimal number:");
+// Prompt the user for a decimal input
+WriteLine("Please enter a decimal number:");
 
-   // Read the input as a string
-   string dec_input = ReadLine();
+// Read the input as a string
+string dec_input = ReadLine();
 
-   // Convert the input string to an unsigned integer
-   uint dec_value = ConvertToInteger(dec_input);
+// Convert the input string to an unsigned integer
+uint dec_value = ConvertToInteger(dec_input);
 
-   // Convert the decimal value to hexadecimal format
-   string hex_value = DecToHex(dec_value);
+// Convert the decimal value to hexadecimal format
+string hex_value = DecToHex(dec_value);
 
-   // Display the result in hexadecimal format
-   WriteLine("The decimal value in hexadecimal format is: " + hex_value);
-   ```
+// Display the result in hexadecimal format
+WriteLine("The decimal value in hexadecimal format is: " + hex_value);
+```
 
-   **C# Version (Object-Oriented Programming):**
+**C# Version (Object-Oriented Programming):**
 
-   For the object-oriented programming (OOP) version, use `using SplashKitSDK;`.
+For the object-oriented programming (OOP) version, use `using SplashKitSDK;`.
 
-   ```csharp
+```csharp
 
-   using SplashKitSDK;
+using SplashKitSDK;
 
-   namespace Program
-   {
-       public class Program
-       {
-           public static void Main()
-           {
-               SplashKit.WriteLine("Hello! Welcome to the decimal to hexadecimal converter.");
+namespace Program
+{
+    public class Program
+    {
+        public static void Main()
+        {
+            SplashKit.WriteLine("Hello! Welcome to the decimal to hexadecimal converter.");
 
-               // Prompt the user for a decimal input
-               SplashKit.WriteLine("Please enter a decimal number:");
+            // Prompt the user for a decimal input
+            SplashKit.WriteLine("Please enter a decimal number:");
 
-               // Read the input as a string
-               string dec_input = SplashKit.ReadLine();
+            // Read the input as a string
+            string dec_input = SplashKit.ReadLine();
 
-               // Convert the input string to an unsigned integer
-               uint dec_value = SplashKit.ConvertToInteger(dec_input);
+            // Convert the input string to an unsigned integer
+            uint dec_value = SplashKit.ConvertToInteger(dec_input);
 
-               // Convert the decimal value to hexadecimal format
-               string hex_value = SplashKit.DecToHex(dec_value);
+            // Convert the decimal value to hexadecimal format
+            string hex_value = SplashKit.DecToHex(dec_value);
 
-               // Display the result in hexadecimal format
-               SplashKit.WriteLine("The decimal value in hexadecimal format is: " + hex_value);
-           }
-       }
-   }
+            // Display the result in hexadecimal format
+            SplashKit.WriteLine("The decimal value in hexadecimal format is: " + hex_value);
+        }
+    }
+}
 
-   ```
+```
 
-   See how the structure and comments are consistent across all versions, with syntax changes
-   specific to the language. This consistency helps readers understand the program's structure and
-   function. If you need some help in understanding OOP and top level statements in C#, refer to the
-   [OOP Styling](/products/splashkit/documentation/splashkit-website/tutorials-documentation/04-oop-styling)
-   guide.
+See how the structure and comments are consistent across all versions, with syntax changes specific
+to the language. This consistency helps readers understand the program's structure and function. If
+you need some help in understanding OOP and top level statements in C#, refer to the
+[OOP Styling](/products/splashkit/documentation/splashkit-website/tutorials-documentation/04-oop-styling)
+guide.
 
-3. ### Naming Files for the New Language Version
+### 3. Naming Files for the New Language Version
 
-   Rename the files according to Splashkit’s conventions. Use the same naming pattern as the
-   existing example.
+Rename the files according to Splashkit’s conventions. Use the same naming pattern as the existing
+example.
 
-   For instance, if you add C# to a `write_line` example, you would name the two files as:
+For instance, if you add C# to a `write_line` example, you would name the two files as:
 
-   ```plaintext
-   write_line-1-example-top-level.cs
-   write_line-1-example-oop.cs
-   ```
+```plaintext
+write_line-1-example-top-level.cs
+write_line-1-example-oop.cs
+```
 
-4. ### Adding the New Files to the Splashkit Starlight.io Repo
+### 4. Adding the New Files to the Splashkit Starlight.io Repo
 
-   Add the new files to the `usage-example` folder under the appropriate function category,
-   following the existing file structure:
+Add the new files to the `usage-example` folder under the appropriate function category, following
+the existing file structure:
 
 <FileTree>
 

src/styles/custom.css

@@ -226,7 +226,7 @@ img.ontrack {
 /* Better table styling */
 .sl-markdown-content table {
   /* width: fit-content; */
-  width: auto;
+  width: fit-content;
   border-radius: 0.5rem;
   box-shadow: var(--sl-shadow-md);
   border: 1px solid var(--sl-color-gray-5);