app/views/anime/details.php

@@ -49,7 +49,9 @@
 				<h3><?= $title ?></h3>
 			<?php endforeach ?>
 			<br />
-			<p class="description"><?= nl2br($data['synopsis']) ?></p>
+			<div class="description">
+				<p><?= str_replace("\n", '</p><p>', $data['synopsis']) ?></p>
+			</div>
 			<?php if (count($data['streaming_links']) > 0): ?>
 				<hr />
 				<h4>Streaming on:</h4>

app/views/character/details.php

@@ -8,12 +8,6 @@ use Aviat\AnimeClient\API\Kitsu;
 	<section class="flex flex-no-wrap">
 		<div>
 			<?= $helper->picture("images/characters/{$data['id']}-original.webp") ?>
-			<?php if ( ! empty($data['otherNames'])): ?>
-				<h3>Nicknames / Other names</h3>
-				<?php foreach ($data['otherNames'] as $name): ?>
-					<h4><?= $name ?></h4>
-				<?php endforeach ?>
-			<?php endif ?>
 		</div>
 		<div>
 			<h2 class="toph"><?= $data['name'] ?></h2>
@@ -21,9 +15,19 @@ use Aviat\AnimeClient\API\Kitsu;
 				<h3><?= $name ?></h3>
 			<?php endforeach ?>
 
+			<?php if ( ! empty($data['otherNames'])): ?>
+				<h4>Also Known As:</h4>
+				<ul>
+				<?php foreach ($data['otherNames'] as $name): ?>
+					<li><h5><?= $name ?></h5></li>
+				<?php endforeach ?>
+				</ul>
+			<?php endif ?>
+			<br />
 			<hr />
-
+			<div class="description">
-			<p class="description"><?= $data['description'] ?></p>
+				<p><?= str_replace("\n", '</p><p>', $data['description']) ?></p>
+			</div>
 		</div>
 	</section>
 

app/views/manga/details.php

@@ -35,7 +35,9 @@
 			<?php endforeach ?>
 
 			<br />
-			<p><?= nl2br($data['synopsis']) ?></p>
+			<div class="description">
+				<p><?= str_replace("\n", '</p><p>', $data['synopsis']) ?></p>
+			</div>
 		</article>
 	</section>
 

public/css/general.css

@@ -21,6 +21,7 @@ body {
 	margin: 0.5em;
 }
 
+
 button {
 	background: #fff;
 	background: linear-gradient(#ddd, #eee, #fff, #eee, #ddd);
@@ -682,7 +683,20 @@ picture.cover {
 }
 
 .description {
-	max-width: 80rem;
+	/* max-width: 80rem;*/
+	columns: 4 28rem;
+	columns: 4 28em;
+	margin-bottom: 1.6em;
+	margin-bottom: 1.6rem;
+}
+
+p.description br + br {
+	page-break-before: avoid;
+	page-break-after: auto;
+	page-break-inside: avoid;
+	break-inside: avoid;
+	break-after: auto;
+	break-before: avoid;
 }
 
 .fixed {
@@ -820,9 +834,9 @@ aside.info picture, aside.info img {
 	margin: 0 auto;
 }
 
-aside.info + article {
+/* aside.info + article {
 	max-width: 66%;
-}
+} */
 
 /* ----------------------------------------------------------------------------
 	User page styles