Implemented narrow reading view

Wave/Components/ArticleComponent.razor

@@ -28,15 +28,21 @@
 				}
 			</small>
 		</p>
-		@if (Article.Categories.Count > 0) {
-			<p class="flex flex-wrap gap-2 my-3">
-				@foreach (var category in Article.Categories.OrderBy(c => c.Color)) {
-					<CategoryBadgeComponent Category="category" />
-				}
-			</p>
-		}
+		<div class="flex justify-between items-end my-3">
+			@if (Article.Categories.Count > 0) {
+				<p class="flex flex-wrap gap-2">
+					@foreach (var category in Article.Categories.OrderBy(c => c.Color)) {
+						<CategoryBadgeComponent Category="category" />
+					}
+				</p>
+			} else {
+				<p> </p>
+			}
+			<ReaderToggle Label="@Localizer["ToggleReader_Label"]" />
+		</div>
 	</header>
 </SectionContent>
+
 <article class="mb-6">
     <div class="prose prose-neutral max-w-none hyphens-auto text-justify">
         @Content

Wave/Components/Layout/MainLayout.razor

@@ -26,7 +26,8 @@
 			</div>
 			<main class="flex-1">
 				<SectionOutlet SectionName="GlobalHeader" />
-				<div class="container mx-auto px-4 md:px-12 py-8">
+				<input id="narrow-reading-toggle" type="checkbox" class="narrow-reading-toggle" />
+				<div class="container mx-auto px-4 md:px-12 py-8 reading-toggle-target">
 					@Body
 				</div>
 			</main>

Wave/Components/ReaderToggle.razor

@@ -0,0 +1,13 @@
+<label for="narrow-reading-toggle" class="narrow-reading-toggle btn btn-square btn-sm swap" title="@Label" onclick="this.classList.toggle('swap-active')">
+	<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="currentColor" class="swap-on fill-current">
+		<path fill-rule="evenodd" d="M15 3.75a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0V5.56l-3.97 3.97a.75.75 0 1 1-1.06-1.06l3.97-3.97h-2.69a.75.75 0 0 1-.75-.75Zm-12 0A.75.75 0 0 1 3.75 3h4.5a.75.75 0 0 1 0 1.5H5.56l3.97 3.97a.75.75 0 0 1-1.06 1.06L4.5 5.56v2.69a.75.75 0 0 1-1.5 0v-4.5Zm11.47 11.78a.75.75 0 1 1 1.06-1.06l3.97 3.97v-2.69a.75.75 0 0 1 1.5 0v4.5a.75.75 0 0 1-.75.75h-4.5a.75.75 0 0 1 0-1.5h2.69l-3.97-3.97Zm-4.94-1.06a.75.75 0 0 1 0 1.06L5.56 19.5h2.69a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75v-4.5a.75.75 0 0 1 1.5 0v2.69l3.97-3.97a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd"/>
+	</svg>
+	<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="currentColor" class="swap-off fill-current">
+		<path fill-rule="evenodd" d="M3.22 3.22a.75.75 0 0 1 1.06 0l3.97 3.97V4.5a.75.75 0 0 1 1.5 0V9a.75.75 0 0 1-.75.75H4.5a.75.75 0 0 1 0-1.5h2.69L3.22 4.28a.75.75 0 0 1 0-1.06Zm17.56 0a.75.75 0 0 1 0 1.06l-3.97 3.97h2.69a.75.75 0 0 1 0 1.5H15a.75.75 0 0 1-.75-.75V4.5a.75.75 0 0 1 1.5 0v2.69l3.97-3.97a.75.75 0 0 1 1.06 0ZM3.75 15a.75.75 0 0 1 .75-.75H9a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-2.69l-3.97 3.97a.75.75 0 0 1-1.06-1.06l3.97-3.97H4.5a.75.75 0 0 1-.75-.75Zm10.5 0a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-2.69l3.97 3.97a.75.75 0 1 1-1.06 1.06l-3.97-3.97v2.69a.75.75 0 0 1-1.5 0V15Z" clip-rule="evenodd"/>
+	</svg>
+</label>
+
+@code {
+	[Parameter]
+	public required string Label { get; set; }
+}

Wave/Resources/Components/Pages/ArticleView.de-DE.resx

@@ -131,4 +131,7 @@
   <data name="AboutTheAuthor_Profile_Label" xml:space="preserve">
     <value>Profil</value>
   </data>
+  <data name="ToggleReader_Label" xml:space="preserve">
+    <value>Enge Leseansicht umschalten</value>
+  </data>
 </root>

Wave/Resources/Components/Pages/ArticleView.resx

@@ -131,4 +131,7 @@
   <data name="AboutTheAuthor_Profile_Label" xml:space="preserve">
     <value>Profile</value>
   </data>
+  <data name="ToggleReader_Label" xml:space="preserve">
+    <value>Toggle narrow reading view</value>
+  </data>
 </root>

Wave/wwwroot/css/main.css

@@ -32,4 +32,11 @@ @layer components {
     .youtube {
         @apply rounded p-2 bg-base-200;
     }
+
+    input.narrow-reading-toggle {
+        display: none;
+    }
+    input.narrow-reading-toggle:checked ~ .reading-toggle-target {
+        @apply max-w-3xl;
+    }
 }