From 3844968812aad7f2a8fcca2f4bdfede7aa1c3e45 Mon Sep 17 00:00:00 2001 From: Antoine Phan Date: Fri, 25 Jul 2025 15:51:11 -0400 Subject: [PATCH] Typography styling --- bun.lock | 13 --- package.json | 1 - src/app.css | 184 ++++++++++++++++++++++++++++++--- src/components/RichText.svelte | 2 +- 4 files changed, 170 insertions(+), 30 deletions(-) diff --git a/bun.lock b/bun.lock index d1f2280..9ccd573 100644 --- a/bun.lock +++ b/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=="], diff --git a/package.json b/package.json index 0a26c36..3a41830 100644 --- a/package.json +++ b/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", diff --git a/src/app.css b/src/app.css index d46bfc2..2120500 100644 --- a/src/app.css +++ b/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-400: #5C8A5C; - --color-ecsess-600: #3B6A3A; - --color-ecsess-800: #0A3D2A; - --color-ecsess-black: #1F1F1F; - --color-ecsess-black-hover:#2c2c2c; + --color-ecsess-200: #a9b7a0; + --color-ecsess-400: #5c8a5c; + --color-ecsess-600: #3b6a3a; + --color-ecsess-800: #0a3d2a; + --color-ecsess-black: #1f1f1f; + --color-ecsess-black-hover: #2c2c2c; } * { - font-family: "Saira", sans-serif; - font-optical-sizing: auto; - font-weight: 500; - scroll-behavior: smooth; + 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; + } } diff --git a/src/components/RichText.svelte b/src/components/RichText.svelte index fc36b7c..dbeb900 100644 --- a/src/components/RichText.svelte +++ b/src/components/RichText.svelte @@ -4,6 +4,6 @@ let { value } = $props(); -
+