add css comments

Signed-off-by: sirutBuasai <sirutbuasai27@outlook.com>

Author: sirutBuasai

docs/README.md

@@ -13,13 +13,7 @@ pip install -r docs/requirements.txt
 Start the development server with live reload:
 
 ```bash
-mkdocs serve
-```
-
-Build the static site:
-
-```bash
-mkdocs build
+mkdocs serve --livereload
 ```
 
 ## Tutorials Setup (Local Only)
@@ -31,6 +25,7 @@ git clone https://github.com/aws-samples/sample-aws-deep-learning-containers.git
 ```
 
 This step is only required for local development. GitHub Actions automatically clones this repository during production deployment.
+For any changes required to the tutorial pages, create a new PR in [aws-samples/sample-aws-deep-learning-containers](https://github.com/aws-samples/sample-aws-deep-learning-containers.git).
 
 ## Navigation
 

docs/mkdocs/stylesheets/extra.css

@@ -1,3 +1,7 @@
+/* ==========================================================================
+   AWS Color Palette
+   ========================================================================== */
+
 :root {
   --aws-white:           #ffffff;
   --aws-paper:           #f1f3f3;
@@ -11,11 +15,19 @@
 
   --lightmode-text: var(--aws-squid-ink);
   --darkmode-text: var(--aws-white);
+}
+
+/* ==========================================================================
+   Light Mode
+   ========================================================================== */
+
+/* Theme colors */
+[data-md-color-scheme="default"] {
   --md-primary-fg-color: var(--aws-sky);
   --md-accent-fg-color: var(--aws-smile);
 }
 
-/* Light mode - dark text and icon */
+/* Header, tabs, and search text/icons */
 .md-tabs__link,
 .md-header__title,
 .md-search__input::placeholder,
@@ -27,15 +39,29 @@
   color: var(--lightmode-text) !important;
   fill: var(--lightmode-text) !important;
 }
+
+/* Search input text */
 .md-search__input {
   color: var(--lightmode-text) !important;
 }
+
+/* Header logo */
 [data-md-color-scheme="default"] .md-header__button.md-logo img,
 [data-md-color-scheme="default"] .md-header__button.md-logo svg {
   content: url('../../assets/logos/AWS_logo_RGB.svg');
 }
 
-/* Dark mode - light text and icon */
+/* ==========================================================================
+   Dark Mode
+   ========================================================================== */
+
+/* Theme colors */
+[data-md-color-scheme="slate"] {
+  --md-primary-fg-color: var(--aws-sky);
+  --md-accent-fg-color: var(--aws-smile);
+}
+
+/* Header, tabs, and search text/icons */
 [data-md-color-scheme="slate"] .md-tabs__link,
 [data-md-color-scheme="slate"] .md-header__title,
 [data-md-color-scheme="slate"] .md-search__input::placeholder,
@@ -47,9 +73,13 @@
   color: var(--darkmode-text) !important;
   fill: var(--darkmode-text) !important;
 }
+
+/* Search input text */
 [data-md-color-scheme="slate"] .md-search__input {
   color: var(--darkmode-text) !important;
 }
+
+/* Header logo */
 [data-md-color-scheme="slate"] .md-header__button.md-logo img,
 [data-md-color-scheme="slate"] .md-header__button.md-logo svg {
   content: url('../../assets/logos/AWS_logo_RGB_REV.svg');