Typography styling
This commit is contained in:
Antoine Phan
13
bun.lock
13
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=="],
|
||||
|
||||
@@ -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",
|
||||
|
||||
176
src/app.css
176
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-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-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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user