diff --git a/CHANGELOG.md b/CHANGELOG.md index 603142c..a7fb67b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Changed - Upgrade to Tailwind v3.1.8 ([#12](https://github.com/jpanther/lynx/pull/12), [#18](https://github.com/jpanther/lynx/pull/18)) +- Upgrade to Typography v0.5.4 ([#16](https://github.com/jpanther/lynx/pull/16)) ## [1.2.0] - 2022-06-17 diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index 9902042..a80d17d 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -583,8 +583,22 @@ video { font-weight: 600; } +.prose :where(a strong):not(:where([class~="not-prose"] *)) { + color: inherit; +} + +.prose :where(blockquote strong):not(:where([class~="not-prose"] *)) { + color: inherit; +} + +.prose :where(thead th strong):not(:where([class~="not-prose"] *)) { + color: inherit; +} + .prose :where(ol):not(:where([class~="not-prose"] *)) { list-style-type: decimal; + margin-top: 1.25em; + margin-bottom: 1.25em; padding-left: 1.625em; } @@ -626,6 +640,8 @@ video { .prose :where(ul):not(:where([class~="not-prose"] *)) { list-style-type: disc; + margin-top: 1.25em; + margin-bottom: 1.25em; padding-left: 1.625em; } @@ -676,6 +692,7 @@ video { .prose :where(h1 strong):not(:where([class~="not-prose"] *)) { font-weight: 900; + color: inherit; } .prose :where(h2):not(:where([class~="not-prose"] *)) { @@ -689,6 +706,7 @@ video { .prose :where(h2 strong):not(:where([class~="not-prose"] *)) { font-weight: 800; + color: inherit; } .prose :where(h3):not(:where([class~="not-prose"] *)) { @@ -702,6 +720,7 @@ video { .prose :where(h3 strong):not(:where([class~="not-prose"] *)) { font-weight: 700; + color: inherit; } .prose :where(h4):not(:where([class~="not-prose"] *)) { @@ -714,6 +733,12 @@ video { .prose :where(h4 strong):not(:where([class~="not-prose"] *)) { font-weight: 700; + color: inherit; +} + +.prose :where(img):not(:where([class~="not-prose"] *)) { + margin-top: 2em; + margin-bottom: 2em; } .prose :where(figure > *):not(:where([class~="not-prose"] *)) { @@ -746,6 +771,32 @@ video { color: var(--tw-prose-code); } +.prose :where(h1 code):not(:where([class~="not-prose"] *)) { + color: inherit; +} + +.prose :where(h2 code):not(:where([class~="not-prose"] *)) { + color: inherit; + font-size: 0.875em; +} + +.prose :where(h3 code):not(:where([class~="not-prose"] *)) { + color: inherit; + font-size: 0.9em; +} + +.prose :where(h4 code):not(:where([class~="not-prose"] *)) { + color: inherit; +} + +.prose :where(blockquote code):not(:where([class~="not-prose"] *)) { + color: inherit; +} + +.prose :where(thead th code):not(:where([class~="not-prose"] *)) { + color: inherit; +} + .prose :where(pre):not(:where([class~="not-prose"] *)) { color: var(--tw-prose-pre-code); background-color: var(--tw-prose-pre-bg); @@ -817,10 +868,15 @@ video { .prose :where(tbody td):not(:where([class~="not-prose"] *)) { vertical-align: baseline; - padding-top: 0.5714286em; - padding-right: 0.5714286em; - padding-bottom: 0.5714286em; - padding-left: 0.5714286em; +} + +.prose :where(tfoot):not(:where([class~="not-prose"] *)) { + border-top-width: 1px; + border-top-color: var(--tw-prose-th-borders); +} + +.prose :where(tfoot td):not(:where([class~="not-prose"] *)) { + vertical-align: top; } .prose { @@ -865,11 +921,6 @@ video { margin-bottom: 1.25em; } -.prose :where(img):not(:where([class~="not-prose"] *)) { - margin-top: 2em; - margin-bottom: 2em; -} - .prose :where(video):not(:where([class~="not-prose"] *)) { margin-top: 2em; margin-bottom: 2em; @@ -880,14 +931,6 @@ video { margin-bottom: 2em; } -.prose :where(h2 code):not(:where([class~="not-prose"] *)) { - font-size: 0.875em; -} - -.prose :where(h3 code):not(:where([class~="not-prose"] *)) { - font-size: 0.9em; -} - .prose :where(li):not(:where([class~="not-prose"] *)) { margin-top: 0.5em; margin-bottom: 0.5em; @@ -901,24 +944,24 @@ video { padding-left: 0.375em; } -.prose > :where(ul > li p):not(:where([class~="not-prose"] *)) { +.prose :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) { margin-top: 0.75em; margin-bottom: 0.75em; } -.prose > :where(ul > li > *:first-child):not(:where([class~="not-prose"] *)) { +.prose :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) { margin-top: 1.25em; } -.prose > :where(ul > li > *:last-child):not(:where([class~="not-prose"] *)) { +.prose :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) { margin-bottom: 1.25em; } -.prose > :where(ol > li > *:first-child):not(:where([class~="not-prose"] *)) { +.prose :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) { margin-top: 1.25em; } -.prose > :where(ol > li > *:last-child):not(:where([class~="not-prose"] *)) { +.prose :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) { margin-bottom: 1.25em; } @@ -951,19 +994,26 @@ video { padding-right: 0; } -.prose :where(tbody td:first-child):not(:where([class~="not-prose"] *)) { +.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"] *)) { + padding-top: 0.5714286em; + padding-right: 0.5714286em; + padding-bottom: 0.5714286em; + padding-left: 0.5714286em; +} + +.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"] *)) { padding-left: 0; } -.prose :where(tbody td:last-child):not(:where([class~="not-prose"] *)) { +.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"] *)) { padding-right: 0; } -.prose > :where(:first-child):not(:where([class~="not-prose"] *)) { +.prose :where(.prose > :first-child):not(:where([class~="not-prose"] *)) { margin-top: 0; } -.prose > :where(:last-child):not(:where([class~="not-prose"] *)) { +.prose :where(.prose > :last-child):not(:where([class~="not-prose"] *)) { margin-bottom: 0; } @@ -982,6 +1032,151 @@ video { border-radius: 0.12rem; } +.prose-sm :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) { + margin-top: 0.5714286em; + margin-bottom: 0.5714286em; +} + +.prose-sm :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) { + margin-top: 1.1428571em; +} + +.prose-sm :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) { + margin-bottom: 1.1428571em; +} + +.prose-sm :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) { + margin-top: 1.1428571em; +} + +.prose-sm :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) { + margin-bottom: 1.1428571em; +} + +.prose-sm :where(.prose > :first-child):not(:where([class~="not-prose"] *)) { + margin-top: 0; +} + +.prose-sm :where(.prose > :last-child):not(:where([class~="not-prose"] *)) { + margin-bottom: 0; +} + +.prose-base :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) { + margin-top: 0.75em; + margin-bottom: 0.75em; +} + +.prose-base :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) { + margin-top: 1.25em; +} + +.prose-base :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) { + margin-bottom: 1.25em; +} + +.prose-base :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) { + margin-top: 1.25em; +} + +.prose-base :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) { + margin-bottom: 1.25em; +} + +.prose-base :where(.prose > :first-child):not(:where([class~="not-prose"] *)) { + margin-top: 0; +} + +.prose-base :where(.prose > :last-child):not(:where([class~="not-prose"] *)) { + margin-bottom: 0; +} + +.prose-lg :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) { + margin-top: 0.8888889em; + margin-bottom: 0.8888889em; +} + +.prose-lg :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) { + margin-top: 1.3333333em; +} + +.prose-lg :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) { + margin-bottom: 1.3333333em; +} + +.prose-lg :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) { + margin-top: 1.3333333em; +} + +.prose-lg :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) { + margin-bottom: 1.3333333em; +} + +.prose-lg :where(.prose > :first-child):not(:where([class~="not-prose"] *)) { + margin-top: 0; +} + +.prose-lg :where(.prose > :last-child):not(:where([class~="not-prose"] *)) { + margin-bottom: 0; +} + +.prose-xl :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) { + margin-top: 0.8em; + margin-bottom: 0.8em; +} + +.prose-xl :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) { + margin-top: 1.2em; +} + +.prose-xl :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) { + margin-bottom: 1.2em; +} + +.prose-xl :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) { + margin-top: 1.2em; +} + +.prose-xl :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) { + margin-bottom: 1.2em; +} + +.prose-xl :where(.prose > :first-child):not(:where([class~="not-prose"] *)) { + margin-top: 0; +} + +.prose-xl :where(.prose > :last-child):not(:where([class~="not-prose"] *)) { + margin-bottom: 0; +} + +.prose-2xl :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) { + margin-top: 0.8333333em; + margin-bottom: 0.8333333em; +} + +.prose-2xl :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) { + margin-top: 1.3333333em; +} + +.prose-2xl :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) { + margin-bottom: 1.3333333em; +} + +.prose-2xl :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) { + margin-top: 1.3333333em; +} + +.prose-2xl :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) { + margin-bottom: 1.3333333em; +} + +.prose-2xl :where(.prose > :first-child):not(:where([class~="not-prose"] *)) { + margin-top: 0; +} + +.prose-2xl :where(.prose > :last-child):not(:where([class~="not-prose"] *)) { + margin-bottom: 0; +} + /* Scale SVG icons to text size */ .icon svg { diff --git a/package-lock.json b/package-lock.json index fb9af9b..dfc6ac8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "1.2.0", "license": "MIT", "devDependencies": { - "@tailwindcss/typography": "^0.5.2", + "@tailwindcss/typography": "^0.5.4", "prettier": "^2.7.1", "prettier-plugin-go-template": "^0.0.13", "tailwindcss": "^3.1.8" @@ -51,9 +51,9 @@ } }, "node_modules/@tailwindcss/typography": { - "version": "0.5.2", - "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.2.tgz", - "integrity": "sha512-coq8DBABRPFcVhVIk6IbKyyHUt7YTEC/C992tatFB+yEx5WGBQrCgsSFjxHUr8AWXphWckadVJbominEduYBqw==", + "version": "0.5.4", + "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.4.tgz", + "integrity": "sha512-QEdg40EmGvE7kKoDei8zr5sf4D1pIayHj4R31bH3lX8x2BtTiR+jNejYPOkhbmy3DXgkMF9jC8xqNiGFAuL9Sg==", "dev": true, "dependencies": { "lodash.castarray": "^4.4.0", @@ -61,7 +61,7 @@ "lodash.merge": "^4.6.2" }, "peerDependencies": { - "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1 || insiders" + "tailwindcss": ">=3.0.0 || insiders" } }, "node_modules/acorn": { @@ -897,9 +897,9 @@ } }, "@tailwindcss/typography": { - "version": "0.5.2", - "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.2.tgz", - "integrity": "sha512-coq8DBABRPFcVhVIk6IbKyyHUt7YTEC/C992tatFB+yEx5WGBQrCgsSFjxHUr8AWXphWckadVJbominEduYBqw==", + "version": "0.5.4", + "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.4.tgz", + "integrity": "sha512-QEdg40EmGvE7kKoDei8zr5sf4D1pIayHj4R31bH3lX8x2BtTiR+jNejYPOkhbmy3DXgkMF9jC8xqNiGFAuL9Sg==", "dev": true, "requires": { "lodash.castarray": "^4.4.0", diff --git a/package.json b/package.json index 9026525..99e8831 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ }, "homepage": "https://github.com/jpanther/lynx#readme", "devDependencies": { - "@tailwindcss/typography": "^0.5.2", + "@tailwindcss/typography": "^0.5.4", "prettier": "^2.7.1", "prettier-plugin-go-template": "^0.0.13", "tailwindcss": "^3.1.8"