add odd styling

not yet finished

Author: flicksolutions

src/app.postcss

@@ -82,4 +82,64 @@ body {
 			@apply mb-2;
 		}
 	}
+}
+
+.tei-content {
+	.sr {
+		color: green;
+	}
+	.del_sr {
+		color: #666;
+		@apply line-through;
+	}
+	.subst, .subst_sr {
+		.deleted {
+			color: #666;
+		}
+		color: green;
+	}
+	.subst_ls {
+		color: #8CFFF4;
+		.deleted {
+			color: #666;
+		}
+		.rasure {
+			@apply bg-[#666];
+		}
+	}
+	.red {
+		color: #F60;
+		@apply decoration-red-500;
+	}
+	.underline {
+		text-decoration: underline;
+	}
+	.marginalia {
+		@apply italic;
+		@apply ml-4;
+	}
+	.corr {
+		@apply italic;
+	}
+	.gap {
+		color: green;
+		@apply bg-[#9f9f9f];
+	}
+	.initial, .glory-initial {
+		@apply font-bold;
+		@apply text-2xl;
+		@apply text-red-500;
+	}
+	.glory-initial {
+		@apply bg-[gold];
+	}
+
+	.content:has(.versechange) {
+		&::after {
+			content: "\2195";
+			@apply inline;
+			@apply h-4;
+			@apply ml-2;
+		}
+	}
 }

src/routes/einzelverssynopse/[thirties]/[verse]/+page.svelte

@@ -12,7 +12,7 @@
 
 <div class="container mx-auto p-4 flex flex-wrap justify-between gap-9">
 	<h1 class="h1 w-full">Verssynopse zu {thirties}.{verse}</h1>
-	<div>
+	<div class="tei-content">
 		<dl class="grid grid-cols-[auto_1fr] justify-between h-fit mb-4 w-fit font-mono">
 			<dt class="font-bold font-heading-token pr-4">Handschrift</dt>
 			<dd class="font-bold font-heading-token border-l-2 border-current pl-4">Wortlaut</dd>

src/routes/fassungen/[thirties]/FassungenContent.svelte

@@ -74,14 +74,14 @@
 	use:setSyncedScroll
 >
 	{#each pages as page (page[0])}
-		<div class="thirty" use:addToObserver>
+		<div class="thirty tei-content" use:addToObserver>
 			{@html page[1]}
 		</div>
 		<hr class="!border-t-4 !border-primary-500" />
 	{/each}
 </div>
 
-<style>
+<style lang="postcss">
 	.thirty {
 		:global(.once) {
 			-webkit-animation-iteration-count: 4;

src/routes/textzeugen/[[sigla]]/[[thirties]]/[[verse]]/TextzeugenContent.svelte

@@ -155,7 +155,7 @@
 				Lade Seite...
 			{:then tpData}
 				<div
-					class="page"
+					class="page tei-content"
 					data-id={pageObject.id}
 					data-next={tpData.nextId}
 					data-previous={tpData.previousId}
@@ -195,7 +195,7 @@
 	{/if}
 </div>
 
-<style>
+<style lang="postcss">
 	.page {
 		:global(.once) {
 			-webkit-animation-iteration-count: 4;