Typography styling

bun.lock

@@ -13,7 +13,6 @@
         "@sveltejs/adapter-auto": "^6.0.1",
         "@sveltejs/kit": "^2.21.3",
         "@sveltejs/vite-plugin-svelte": "^5.1.0",
-        "@tailwindcss/typography": "^0.5.16",
         "@tailwindcss/vite": "^4.1.8",
         "prettier": "^3.5.3",
         "prettier-plugin-svelte": "^3.4.0",
@@ -191,8 +190,6 @@
 
     "@tailwindcss/oxide-win32-x64-msvc": ["@tailwindcss/oxide-win32-x64-msvc@4.1.11", "", { "os": "win32", "cpu": "x64" }, "sha512-YfHoggn1j0LK7wR82TOucWc5LDCguHnoS879idHekmmiR7g9HUtMw9MI0NHatS28u/Xlkfi9w5RJWgz2Dl+5Qg=="],
 
-    "@tailwindcss/typography": ["@tailwindcss/typography@0.5.16", "", { "dependencies": { "lodash.castarray": "^4.4.0", "lodash.isplainobject": "^4.0.6", "lodash.merge": "^4.6.2", "postcss-selector-parser": "6.0.10" }, "peerDependencies": { "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1" } }, "sha512-0wDLwCVF5V3x3b1SGXPCDcdsbDHMBe+lkFzBRaHeLvNi+nrrnZ1lA18u+OTWO8iSWU2GxUOCvlXtDuqftc1oiA=="],
-
     "@tailwindcss/vite": ["@tailwindcss/vite@4.1.11", "", { "dependencies": { "@tailwindcss/node": "4.1.11", "@tailwindcss/oxide": "4.1.11", "tailwindcss": "4.1.11" }, "peerDependencies": { "vite": "^5.2.0 || ^6 || ^7" } }, "sha512-RHYhrR3hku0MJFRV+fN2gNbDNEh3dwKvY8XJvTxCSXeMOsCRSr+uKvDWQcbizrHgjML6ZmTE5OwMrl5wKcujCw=="],
 
     "@types/cookie": ["@types/cookie@0.6.0", "", {}, "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA=="],
@@ -291,8 +288,6 @@
 
     "cookie": ["cookie@0.6.0", "", {}, "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw=="],
 
-    "cssesc": ["cssesc@3.0.0", "", { "bin": { "cssesc": "bin/cssesc" } }, "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="],
-
     "csstype": ["csstype@3.1.3", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="],
 
     "debug": ["debug@4.4.1", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ=="],
@@ -361,12 +356,6 @@
 
     "locate-character": ["locate-character@3.0.0", "", {}, "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA=="],
 
-    "lodash.castarray": ["lodash.castarray@4.4.0", "", {}, "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q=="],
-
-    "lodash.isplainobject": ["lodash.isplainobject@4.0.6", "", {}, "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA=="],
-
-    "lodash.merge": ["lodash.merge@4.6.2", "", {}, "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="],
-
     "magic-string": ["magic-string@0.30.17", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0" } }, "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA=="],
 
     "mimic-response": ["mimic-response@3.1.0", "", {}, "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ=="],
@@ -391,8 +380,6 @@
 
     "postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="],
 
-    "postcss-selector-parser": ["postcss-selector-parser@6.0.10", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w=="],
-
     "prettier": ["prettier@3.6.2", "", { "bin": { "prettier": "bin/prettier.cjs" } }, "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ=="],
 
     "prettier-plugin-svelte": ["prettier-plugin-svelte@3.4.0", "", { "peerDependencies": { "prettier": "^3.0.0", "svelte": "^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0" } }, "sha512-pn1ra/0mPObzqoIQn/vUTR3ZZI6UuZ0sHqMK5x2jMLGrs53h0sXhkVuDcrlssHwIMk7FYrMjHBPoUSyyEEDlBQ=="],

package.json

@@ -18,7 +18,6 @@
 		"@sveltejs/adapter-auto": "^6.0.1",
 		"@sveltejs/kit": "^2.21.3",
 		"@sveltejs/vite-plugin-svelte": "^5.1.0",
-		"@tailwindcss/typography": "^0.5.16",
 		"@tailwindcss/vite": "^4.1.8",
 		"prettier": "^3.5.3",
 		"prettier-plugin-svelte": "^3.4.0",

src/app.css

@@ -1,32 +1,186 @@
 @import url('https://fonts.googleapis.com/css2?family=Saira:ital,wght@0,100..900;1,100..900&display=swap');
 @import 'tailwindcss';
-@plugin '@tailwindcss/typography';
-
 
 @theme {
-    --color-ecsess-200: #A9B7A0;
+	--color-ecsess-200: #a9b7a0;
-    --color-ecsess-400: #5C8A5C;
+	--color-ecsess-400: #5c8a5c;
-    --color-ecsess-600: #3B6A3A;
+	--color-ecsess-600: #3b6a3a;
-    --color-ecsess-800: #0A3D2A;
+	--color-ecsess-800: #0a3d2a;
-    --color-ecsess-black: #1F1F1F;
+	--color-ecsess-black: #1f1f1f;
-    --color-ecsess-black-hover:#2c2c2c;
+	--color-ecsess-black-hover: #2c2c2c;
 }
 
 * {
-    font-family: "Saira", sans-serif;
+	font-family: 'Saira', sans-serif;
 	font-optical-sizing: auto;
 	font-weight: 500;
 	scroll-behavior: smooth;
 }
 
 h1 {
-    @apply text-2xl md:text-3xl font-bold py-4;
+	@apply py-4 text-2xl font-bold md:text-3xl;
 }
 
 h2 {
-    @apply text-xl md:text-2xl font-bold py-3;
+	@apply py-3 text-xl font-bold md:text-2xl;
 }
 
 .page-title {
-    @apply text-3xl md:text-4xl lg:text-6xl font-bold py-4;
+	@apply py-4 text-3xl font-bold md:text-4xl lg:text-6xl;
+}
+
+.typography {
+	@apply text-sm md:text-base lg:text-lg;
+
+	p {
+		@apply my-2 leading-relaxed;
+	}
+
+	strong, b {
+		@apply font-bold;
+	}
+
+	i {
+		@apply italic;
+	}
+
+	blockquote {
+		@apply bg-ecsess-200 text-ecsess-600 border-l-ecsess-800 my-4 rounded-sm border-l-4 py-[0.01rem] ps-4 italic;
+	}
+
+	h1 {
+		@apply my-4 text-4xl leading-10 font-extrabold;
+	}
+
+	h2 {
+		@apply mt-4 mb-3 text-2xl leading-8 font-black;
+	}
+
+	h3 {
+		@apply mt-4 mb-1 text-xl leading-relaxed font-bold;
+	}
+
+	h4 {
+		@apply mt-6 mb-2 leading-6;
+	}
+
+	img,
+	picture,
+	video {
+		@apply my-8;
+	}
+
+	picture > img {
+		@apply mt-0 mb-0;
+	}
+
+	code,
+	kbd {
+		@apply rounded-md font-mono text-sm;
+	}
+
+	h2 code {
+		@apply text-[1.3125rem]; /* 21px */
+	}
+
+	h3 code {
+		@apply text-[1.125rem]; /* 18px */
+	}
+
+	pre {
+		@apply my-3 rounded-md px-4 pt-3 pb-3 font-mono text-sm leading-6;
+	}
+
+	ol,
+	ul {
+		@apply my-2 list-outside list-disc ps-[1.625rem];
+	}
+
+	li {
+		@apply my-1 leading-relaxed;
+	}
+
+	ol > li,
+	ul > li {
+		@apply ps-1;
+	}
+
+	> ul > li p {
+		@apply my-2 leading-relaxed;
+	}
+
+	ul ul,
+	ul ol,
+	ol ul,
+	ol ol {
+		@apply my-1;
+	}
+
+	dl {
+		@apply my-5;
+	}
+
+	dt {
+		@apply mt-5;
+	}
+
+	dd {
+		@apply mt-2 ps-[1.625rem];
+	}
+
+	hr {
+		@apply my-12;
+	}
+
+	hr + *,
+	h2 + *,
+	h3 + *,
+	h4 + * {
+		@apply mt-0;
+	}
+
+	table {
+		@apply w-full;
+	}
+
+	thead {
+		@apply border-ecsess-400 border-b-2;
+	}
+
+	thead th {
+		@apply text-ecsess-400 p-2 text-left text-base font-bold;
+	}
+
+	tbody td,
+	tfoot td {
+		@apply p-2.5;
+	}
+
+	td > a {
+		@apply underline transition-colors;
+	}
+
+	tbody tr:nth-child(odd) {
+		@apply bg-ecsess-200/24;
+	}
+
+	td + td {
+		@apply border-l;
+	}
+
+	tfoot {
+		@apply border-t;
+	}
+
+	figure {
+		@apply my-8;
+	}
+
+	figure > * {
+		@apply my-0;
+	}
+
+	figcaption {
+		@apply mt-3 text-sm leading-5;
+	}
 }

src/components/RichText.svelte

@@ -4,6 +4,6 @@
 	let { value } = $props();
 </script>
 
-<div id="test" class="prose prose-base lg:prose-lg **:text-ecsess-200">
+<div id="test" class="typography">
 	<PortableText {value} />
 </div>