Documentation: typo fixes

docs/src/components/SideBySide.astro

@@ -16,8 +16,14 @@ function findImage(img: string) {
 ---
 
 <div class="side-by-side">
-  <Image src={findImage(img1)} alt="Control Image" />
-  <Image src={findImage(img2)} alt="Generated Result" />
+  <div>
+    <Image src={findImage(img1)} alt="Control Image" />
+    <p>Control Image</p>
+  </div>
+  <div>
+    <Image src={findImage(img2)} alt="Generated Result" />
+    <p>Generated Result</p>
+  </div>
 </div>
 
 <style>
@@ -26,7 +32,14 @@ function findImage(img: string) {
     grid-template-columns: 1fr 1fr;
     gap: 1rem;
   }
-  .side-by-side > img {
+  .side-by-side > div {
     margin-top: 0 !important;
+    font-size: smaller;
+    color: var(--sl-color-gray-4);
+  }
+  .side-by-side p {
+    margin-top: 0.3rem !important;
+    text-align: center;
+    font-style: italic;
   }
 </style>

docs/src/content/docs/index.mdx

@@ -19,13 +19,17 @@ import ExternalLink from '../../components/ExternalLink.astro';
 			- [Text Prompts](/prompts): magical things you can do inside the text box
 		</Card>
 		<Card title="Community & Links">
-			- <Icon name="discord" class="inline-icon" /> [Discord](https://discord.gg/pWyzHfHHhU)
-			- 🗪 <ExternalLink href="https://github.com/Acly/krita-ai-diffusion/discussions">Discussions</ExternalLink>
-			- 🐞 <ExternalLink href="https://github.com/Acly/krita-ai-diffusion/issues">Issues</ExternalLink>
-			- 📦 <ExternalLink href="https://github.com/Acly/krita-ai-diffusion/releases">Release change log</ExternalLink>
+			- [<Icon name="discord" class="inline-icon" /> Discord](https://discord.gg/pWyzHfHHhU)
+			- <ExternalLink href="https://github.com/Acly/krita-ai-diffusion/discussions"><Icon name="comment" class="inline-icon" /> Discussions</ExternalLink>
+			- <ExternalLink href="https://github.com/Acly/krita-ai-diffusion/issues"><Icon name="warning" class="inline-icon" /> Issues</ExternalLink>
+			- <ExternalLink href="https://github.com/Acly/krita-ai-diffusion/releases"><Icon name="seti:csv" class="inline-icon" /> Release change log</ExternalLink>
 		</Card>
 	</div>
 	<Card title="Resources">
 		Tutorials and videos made by users.
+		- _en_ [<Icon name="youtube" class="inline-icon" /> Live & Regions](https://www.youtube.com/watch?v=czqCABRlbSA) by [@IntelligentImage](https://www.youtube.com/@IntelligentImage)
+		- _en_ [<Icon name="youtube" class="inline-icon" /> Refine & ControlNet](https://www.youtube.com/watch?v=0vkZ9wvcZag) by [@nodonmai](https://www.youtube.com/@nodonmai)
+		- _en_ [<Icon name="youtube" class="inline-icon" /> Krita AI Playlist](https://www.youtube.com/playlist?list=PLOea84sp_XoHZCSErUjCoqE0Gc6pjJksf) by [@streamtabulous](https://www.youtube.com/@streamtabulous)
+		- _es_ [<Icon name="youtube" class="inline-icon" /> Introduction](https://www.youtube.com/watch?v=vxboB47oyqA&t=31s) by [@elussicreativo](https://www.youtube.com/@elussicreativo)
 	</Card>
 </div>

docs/src/content/docs/regions.mdx

@@ -107,8 +107,8 @@ Regions must be attached to paint layers or layer groups. When creating a new
 region, it is linked to the active layer by default. If the active layer already
 has a region, creating a new region will automatically create a new layer. 
 
-The area covered by a region is defined by the pixel opacity of the linked it is
-linked to. Fully transparent pixels will not be affected.
+The area covered by a region is defined by the pixel opacity of the layer it is
+linked to. Fully transparent pixels are not affected by the region.
 
 Selecting a region's text input will also make the linked layer active, and the
 text focus will follow when switching layers. Regions can be removed with the
@@ -206,7 +206,7 @@ to the root region.
 
 ## Workflows
 
-This section describes some common workflows to get started. Once setup, regions
+This section describes some common workflows to get started. Once they are set up, regions
 are flexible and multi-purpose. You can switch between and combine workflows!
 
 ### Regions from scratch
@@ -353,17 +353,18 @@ for the whole group without touching individual layers.
 ### Region hierarchies
 
 Regions can be nested. When work starts on an image, the number of regions
-should be low and their size relative to the canvas relatively large. That's
-because regardless of your canvas resolution, initial generation will use a
-lower number of pixels and too many regions slow down computation a lot.
+should be low and their size relative to the canvas large. That's because
+regardless of your canvas resolution, initial generation will use a lower number
+of pixels and too many regions slow down computation a lot.
 
-As work continues, you might want to split up subjects or describe parts more
+As work continues, you might want to split up subjects, or describe parts more
 precisely. Instead of creating further regions at the top level, you can add
 sub-regions inside existing regions. This allows to manage complexity better:
 * The UI shows text prompt and details for the current parent region and its
   direct child regions. Other regions remain hidden.
 * Generating the whole image will only use top-level regions. Refining a single
-  region will make use of its child regions.
+  region will make use of its child regions. The total number of regions for
+  each generation remains manageable.
 * Selections can apply the most relevant regions across the whole hierarchy
-  (depending on coverage).
+  depending on coverage.
 

docs/src/styles/custom.css

@@ -31,7 +31,7 @@
 /* Light mode colors. */
 :root[data-theme='light'] {
 	--sl-color-accent-low: rgb(240, 169, 142);
-	--sl-color-accent: rgb(141, 90, 68);
+	--sl-color-accent: rgb(141, 83, 68);
 	--sl-color-accent-high: #4b1500;
 	--sl-color-white: #191817;
 	--sl-color-gray-1: #292624;
@@ -49,10 +49,15 @@
 }
 
 .front-cards {
-	display: flex;
 	gap: 1rem;
 }
 
+@media screen and (min-width: 800px) {
+	.front-cards {
+		display: flex;
+	}
+}
+
 .front-cards ul {
 	list-style: none;
 	padding-left: 0;