Added text/colors

leaningtech · Nov 7, 2024 · 26abffa · 26abffa
1 parent 0da259c
commit 26abffa
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 14 deletions.
diff --git a/sites/cheerpx/src/content/docs/00-overview.mdx b/sites/cheerpx/src/content/docs/00-overview.mdx
@@ -40,10 +40,10 @@ import { DISCORD_URL, VERSION } from "@/consts.ts";
 	repository](https://github.com/leaningtech/cheerpx-meta/)
 </div>
 
-<pre>
+<div style={{ textAlign: "center", margin: "0 auto", color: "#ff6347" }}>
 	&lt;script src=`https://cxrtnc.leaningtech.com/`{VERSION}
 	`/cx.js`&gt;&lt;/script&gt;
-</pre>
+</div>
 
 {/* TODO: add a img */}
 

diff --git a/sites/cheerpx/src/content/docs/10-getting-started/index.mdx b/sites/cheerpx/src/content/docs/10-getting-started/index.mdx
@@ -11,14 +11,14 @@ import { VERSION } from "@/consts.ts";
 
 ## 1. Include CheerpX on your page
 
-No installation is needed. Simply include CheerpX by adding the following script tag in the `<head>` or at the end of the `<body>` section of your HTML:
+No installation is needed. Simply include CheerpX by adding the following script tag in the `<head>` or at the end of the `<body>` section of your HTML.
 
-### Latest version of CheerpX
+**Latest version of CheerpX:**
 
-<pre>
+<div style={{ margin: "0 auto", color: "#ff6347" }}>
 	&lt;script src=`https://cxrtnc.leaningtech.com/`{VERSION}
 	`/cx.js`&gt;&lt;/script&gt;
-</pre>
+</div>
 
 The CheerpX's API is stable and breaking changes can only be introduced on a new major version. All CheerpX builds are immutable so you can trust that, if your application works today, it is going to work identically forever.
 
@@ -34,7 +34,7 @@ CheerpX is also available as an ES6 JavaScript module. If you prefer to use the
 </script>
 ```
 
-> [!tip]
+> [!note] Note
 > When using the ES6 module version, you don't have to assign the imported `CheerpX` to the global scope. This example is intended to keep compatibility with the traditional script inclusion method used in this documentation.
 
 ## 2. Create an application instance
@@ -49,6 +49,7 @@ The example below demonstrates how to set up the file system and devices using [
 	<head>
 		<meta charset="utf-8" />
 		<title>CheerpX Getting Started</title>
+		<!-- Add CheerpX and insert the latest version number -->
 		<script src="https://cxrtnc.leaningtech.com/{VERSION_NUMBER}/cx.esm.js"></script>
 		<script type="module">
 			// The read-only disk image from Leaning Technologies' fast cloud backend
@@ -83,7 +84,7 @@ The example below demonstrates how to set up the file system and devices using [
 </html>
 ```
 
-> [!tip]
+> [!note] Note
 > A virtual system image, such as `debian_large`, is a complete snapshot of an operating system's files and configurations. CheerpX uses this image to simulate a Linux environment within your browser, allowing it to execute applications as if they were running on a native Linux system. This example is inteded to quickly get you up-and-running using a pre-deployed disk image from our cloud backend, for a much more self-contained example please see the [Simple Executable tutorial](/docs/tutorials/simple-executable)
 
 ## 3. Enable cross-origin isolation
@@ -140,6 +141,7 @@ Now you can interact with the console to run commands. Make sure to give focus t
 	<head>
 		<meta charset="utf-8" />
 		<title>CheerpX Getting Started</title>
+		<!-- Add CheerpX and insert the latest version number -->
 		<script src="https://cxrtnc.leaningtech.com/{VERSION_NUMBER}/cx.esm.js"></script>
 		<script type="module">
 			// The read-only disk image from Leaning Technologies' fast cloud backend

diff --git a/sites/cheerpx/src/content/docs/13-tutorials/full_os.mdx b/sites/cheerpx/src/content/docs/13-tutorials/full_os.mdx
@@ -43,12 +43,12 @@ mkfs.ext2 -b 4096 -d cheerpXFS/ cheerpXImage.ext2 600M
 
 ## 2. Load CheerpX from your index.html
 
-## Latest version CheerpX
+**Latest version of CheerpX:**
 
-<pre>
+<div style={{ margin: "0 auto", color: "#ff6347" }}>
 	&lt;script src=`https://cxrtnc.leaningtech.com/`{VERSION}
 	`/cx.js`&gt;&lt;/script&gt;
-</pre>
+</div>
 
 Loading CheerpX is very simple. Create a new file called `index.html` and populate it with the following HTML code.
 

diff --git a/sites/cheerpx/src/content/docs/13-tutorials/simple-executable.mdx b/sites/cheerpx/src/content/docs/13-tutorials/simple-executable.mdx
@@ -85,12 +85,12 @@ This confirms that the executable is 32-bit and statically linked.
 
 Let's set up your `index.html` file to load CheerpX, run your executable, and include some basic styling to improve the page's appearance.
 
-### Latest version of CheerpX
+**Latest version of CheerpX:**
 
-<pre>
+<div style={{ color: "#ff6347" }}>
 	&lt;script src=`https://cxrtnc.leaningtech.com/`{VERSION}
 	`/cx.js`&gt;&lt;/script&gt;
-</pre>
+</div>
 
 Open `index.html` and add the following content:
 
@@ -100,6 +100,7 @@ Open `index.html` and add the following content:
 	<head>
 		<meta charset="UTF-8" />
 		<title>CheerpX Simple Executable Test</title>
+		<!-- Add CheerpX and insert the latest version number -->
 		<script src="https://cxrtnc.leaningtech.com/{VERSION_NUMBER}/cx.esm.js"></script>
 	</head>
 	<body style="height: 100%; background: black;">