diff --git a/.github/dependabot.yml b/.github/dependabot.yml new file mode 100644 index 0000000..3d12432 --- /dev/null +++ b/.github/dependabot.yml @@ -0,0 +1,26 @@ +# GitHub Dependabot +# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates + +version: 2 +updates: + - package-ecosystem: "npm" + directory: "/" + schedule: + interval: "daily" + time: "09:00" + timezone: "Australia/Melbourne" + commit-message: + prefix: "📌" + labels: + - "dependencies" + - package-ecosystem: "github-actions" + directory: "/" + schedule: + interval: "weekly" + day: "sunday" + time: "09:00" + timezone: "Australia/Melbourne" + commit-message: + prefix: "👷" + labels: + - "dependencies" diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md new file mode 100644 index 0000000..c3b28d0 --- /dev/null +++ b/.github/pull_request_template.md @@ -0,0 +1,2 @@ + + diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml index 7f9d824..79335b6 100644 --- a/.github/workflows/gh-pages.yml +++ b/.github/workflows/gh-pages.yml @@ -7,12 +7,13 @@ on: jobs: build-deploy: + name: Build and Deploy runs-on: ubuntu-20.04 concurrency: group: ${{ github.workflow }}-${{ github.ref }} steps: - name: Checkout - uses: actions/checkout@v2 + uses: actions/checkout@v3 with: submodules: true fetch-depth: 0 diff --git a/.github/workflows/label.yml b/.github/workflows/label.yml index 21ec6d5..8fb77bf 100644 --- a/.github/workflows/label.yml +++ b/.github/workflows/label.yml @@ -4,6 +4,7 @@ on: [pull_request_target] jobs: label: + name: Label runs-on: ubuntu-latest permissions: contents: read @@ -11,7 +12,7 @@ jobs: steps: - name: Label - uses: actions/labeler@v3 + uses: actions/labeler@v4 with: repo-token: "${{ secrets.GITHUB_TOKEN }}" configuration-path: .github/labeller.yml diff --git a/.github/workflows/stale.yml b/.github/workflows/stale.yml new file mode 100644 index 0000000..92ebcbe --- /dev/null +++ b/.github/workflows/stale.yml @@ -0,0 +1,30 @@ +name: "Close stale issues and PRs" +on: + schedule: + - cron: "30 1 * * *" + +jobs: + stale: + runs-on: ubuntu-latest + permissions: + issues: write + pull-requests: write + steps: + - uses: actions/stale@v5 + with: + days-before-stale: 30 + days-before-close: 14 + stale-issue-label: "stale" + stale-pr-label: "stale" + stale-issue-message: > + This issue has been automatically marked as stale because it has not had any recent activity. + + If you are still experiencing this issue, please review the issue history and add a reply with any requested and/or additional information in order to keep the issue open. + + This issue will automactically close in 14 days if no further activity occurs. + stale-pr-message: > + This pull request has been automatically marked as stale because it has not had any recent activity. + + Please review the PR history and add a reply with any requested information. If no information has been requested, it may be that this contribution does not fit with the project objectives, or does not adhere to the [contributing guidelines](https://github.com/jpanther/lynx/blob/dev/CONTRIBUTING.md). If this is in error, please add a reply with further details. + + This PR will automactically close in 14 days if no further activity occurs. diff --git a/.github/workflows/test-build.yml b/.github/workflows/test-build.yml index 2621d94..4722561 100644 --- a/.github/workflows/test-build.yml +++ b/.github/workflows/test-build.yml @@ -1,15 +1,16 @@ name: Test Build -on: [push, pull_request] +on: [push] jobs: build: + name: Build Example Site runs-on: ubuntu-20.04 concurrency: group: ${{ github.workflow }}-${{ github.ref }} steps: - name: Checkout - uses: actions/checkout@v2 + uses: actions/checkout@v3 with: submodules: true fetch-depth: 0 diff --git a/.gitignore b/.gitignore index f9131ea..935cec0 100644 --- a/.gitignore +++ b/.gitignore @@ -1,145 +1,23 @@ - -# Created by https://www.toptal.com/developers/gitignore/api/node, -# Edit at https://www.toptal.com/developers/gitignore?templates=node, - ### Node ### -# Logs -logs -*.log -npm-debug.log* -yarn-debug.log* -yarn-error.log* -lerna-debug.log* -.pnpm-debug.log* - -# Diagnostic reports (https://nodejs.org/api/report.html) -report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json - -# Runtime data -pids -*.pid -*.seed -*.pid.lock - -# Directory for instrumented libs generated by jscoverage/JSCover -lib-cov - -# Coverage directory used by tools like istanbul -coverage -*.lcov - -# nyc test coverage -.nyc_output - -# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) -.grunt - -# Bower dependency directory (https://bower.io/) -bower_components - -# node-waf configuration -.lock-wscript - -# Compiled binary addons (https://nodejs.org/api/addons.html) -build/Release - # Dependency directories node_modules/ -jspm_packages/ - -# Snowpack dependency directory (https://snowpack.dev/) -web_modules/ - -# TypeScript cache -*.tsbuildinfo - -# Optional npm cache directory -.npm - -# Optional eslint cache -.eslintcache - -# Microbundle cache -.rpt2_cache/ -.rts2_cache_cjs/ -.rts2_cache_es/ -.rts2_cache_umd/ - -# Optional REPL history -.node_repl_history - -# Output of 'npm pack' -*.tgz - -# Yarn Integrity file -.yarn-integrity - -# dotenv environment variables file -.env -.env.test -.env.production - -# parcel-bundler cache (https://parceljs.org/) -.cache -.parcel-cache - -# Next.js build output -.next -out - -# Nuxt.js build / generate output -.nuxt -dist - -# Gatsby files -.cache/ -# Comment in the public line in if your project uses Gatsby and not Next.js -# https://nextjs.org/blog/next-9-1#public-directory-support -# public - -# vuepress build output -.vuepress/dist - -# Serverless directories -.serverless/ - -# FuseBox cache -.fusebox/ - -# DynamoDB Local files -.dynamodb/ - -# TernJS port file -.tern-port - -# Stores VSCode versions used for testing VSCode extensions -.vscode-test - -# yarn v2 -.yarn/cache -.yarn/unplugged -.yarn/build-state.yml -.yarn/install-state.gz -.pnp.* - -### Node Patch ### -# Serverless Webpack directories -.webpack/ - -# End of https://www.toptal.com/developers/gitignore/api/node, - -# Created by https://www.toptal.com/developers/gitignore/api/hugo -# Edit at https://www.toptal.com/developers/gitignore?templates=hugo ### Hugo ### # Generated files by hugo -/public/ -/resources/_gen/ -.hugo_build.lock +**/public/ +**/resources/_gen/ # Executable may be added to repository hugo.exe hugo.darwin hugo.linux -# End of https://www.toptal.com/developers/gitignore/api/hugo +# Temporary lock file while building +.hugo_build.lock + +### Congo ### +# Lighthouse generated output +.lighthouseci + +# Project specific files +TODO diff --git a/.prettierrc b/.prettierrc index 3031bfb..d884083 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,4 +1,5 @@ { + "goTemplateBracketSpacing": true, "htmlWhitespaceSensitivity": "css", "printWidth": 100, "singleQuote": false, diff --git a/CHANGELOG.md b/CHANGELOG.md index 5470b1c..61d718d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +## [1.2.0] - 2022-06-17 + +### Added + +- Support for new author `headline` parameter +- Automatic author image resizing when image is provided as a Hugo asset +- Alt text to author image ([#8](https://github.com/jpanther/lynx/pull/8)) +- Expanded Emoji support in page titles + +### Changed + +- Upgrade to Tailwind v3.1.3 and Typography v0.5.2 +- Adjusted contrast of certain text to improve accessibility +- All CSS is now bundled into a single file for better performance + ## [1.1.0] - 2021-11-06 ### Added @@ -33,6 +48,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Fathom Analytics and Google Analytics support - Favicons support -[unreleased]: https://github.com/jpanther/lynx/compare/v1.1.0...HEAD +[unreleased]: https://github.com/jpanther/lynx/compare/v1.2.0...HEAD +[1.2.0]: https://github.com/jpanther/lynx/compare/v1.1.0...v1.2.0 [1.1.0]: https://github.com/jpanther/lynx/compare/v1.0.0...v1.1.0 [1.0.0]: https://github.com/jpanther/lynx/releases/tags/v1.0.0 diff --git a/README.md b/README.md index c876c01..81695f5 100644 --- a/README.md +++ b/README.md @@ -10,8 +10,7 @@ Lynx is designed to be a simple links page powered by [Hugo](https://gohugo.io). ## Features -- Built with Tailwind CSS JIT for minified stylesheets without any excess code -- Fully responsive layout +- Fully responsive layout built with Tailwind CSS 3.0 - Dark mode (auto-switching based upon browser) - SVG icons from FontAwesome 5 - HTML and Emoji support diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index b88a4cb..d74d07b 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -1,84 +1,67 @@ -/*! Lynx v1.1.0 | MIT License | https://github.com/jpanther/lynx */ +/*! Lynx v1.2.0 | MIT License | https://github.com/jpanther/lynx */ -/*! tailwindcss v2.2.19 | MIT License | https://tailwindcss.com */ - -/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */ +/*! tailwindcss v3.1.3 | MIT License | https://tailwindcss.com */ /* -Document -======== -*/ - -/** -Use a better box model (opinionated). +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) */ *, ::before, ::after { box-sizing: border-box; -} - -/** -Use a more readable tab size (opinionated). -*/ - -html { - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; -} - -/** -1. Correct the line height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -*/ - -html { - line-height: 1.15; /* 1 */ - -webkit-text-size-adjust: 100%; + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: currentColor; /* 2 */ } +::before, +::after { + --tw-content: ''; +} + /* -Sections -======== +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. */ -/** -Remove the margin in all browsers. +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. */ body { margin: 0; -} - -/** -Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) -*/ - -body { - font-family: - system-ui, - -apple-system, /* Firefox supports this but not yet `system-ui` */ - 'Segoe UI', - Roboto, - Helvetica, - Arial, - sans-serif, - 'Apple Color Emoji', - 'Segoe UI Emoji'; + /* 1 */ + line-height: inherit; + /* 2 */ } /* -Grouping content -================ -*/ - -/** 1. Add the correct height in Firefox. 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. */ hr { @@ -86,23 +69,43 @@ hr { /* 1 */ color: inherit; /* 2 */ + border-top-width: 1px; + /* 3 */ } /* -Text-level semantics -==================== -*/ - -/** Add the correct text decoration in Chrome, Edge, and Safari. */ -abbr[title] { +abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } -/** +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* Add the correct font weight in Edge and Safari. */ @@ -111,28 +114,22 @@ strong { font-weight: bolder; } -/** -1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) -2. Correct the odd 'em' font sizing in all browsers. +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp, pre { - font-family: - ui-monospace, - SFMono-Regular, - Consolas, - 'Liberation Mono', - Menlo, - monospace; + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */ font-size: 1em; /* 2 */ } -/** +/* Add the correct font size in all browsers. */ @@ -140,8 +137,8 @@ small { font-size: 80%; } -/** -Prevent 'sub' and 'sup' elements from affecting the line height in all browsers. +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. */ sub, @@ -161,13 +158,9 @@ sup { } /* -Tabular data -============ -*/ - -/** 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. */ table { @@ -175,16 +168,14 @@ table { /* 1 */ border-color: inherit; /* 2 */ + border-collapse: collapse; + /* 3 */ } /* -Forms -===== -*/ - -/** 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. */ button, @@ -196,25 +187,30 @@ textarea { /* 1 */ font-size: 100%; /* 1 */ - line-height: 1.15; + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; /* 1 */ margin: 0; /* 2 */ + padding: 0; + /* 3 */ } -/** +/* Remove the inheritance of text transform in Edge and Firefox. -1. Remove the inheritance of text transform in Firefox. */ button, select { - /* 1 */ text-transform: none; } -/** -Correct the inability to style clickable types in iOS and Safari. +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. */ button, @@ -222,43 +218,30 @@ button, [type='reset'], [type='submit'] { -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ } -/** -Remove the inner border and padding in Firefox. -*/ - -::-moz-focus-inner { - border-style: none; - padding: 0; -} - -/** -Restore the focus styles unset by the previous rule. +/* +Use the modern Firefox focus style for all focusable elements. */ :-moz-focusring { - outline: 1px dotted ButtonText; + outline: auto; } -/** -Remove the additional ':invalid' styles in Firefox. -See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737 +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) */ :-moz-ui-invalid { box-shadow: none; } -/** -Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers. -*/ - -legend { - padding: 0; -} - -/** +/* Add the correct vertical alignment in Chrome and Firefox. */ @@ -266,7 +249,7 @@ progress { vertical-align: baseline; } -/** +/* Correct the cursor style of increment and decrement buttons in Safari. */ @@ -275,7 +258,7 @@ Correct the cursor style of increment and decrement buttons in Safari. height: auto; } -/** +/* 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */ @@ -287,7 +270,7 @@ Correct the cursor style of increment and decrement buttons in Safari. /* 2 */ } -/** +/* Remove the inner padding in Chrome and Safari on macOS. */ @@ -295,9 +278,9 @@ Remove the inner padding in Chrome and Safari on macOS. -webkit-appearance: none; } -/** +/* 1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to 'inherit' in Safari. +2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { @@ -307,11 +290,6 @@ Remove the inner padding in Chrome and Safari on macOS. /* 2 */ } -/* -Interactive -=========== -*/ - /* Add the correct display in Chrome and Safari. */ @@ -320,15 +298,9 @@ summary { display: list-item; } -/** - * Manually forked from SUIT CSS Base: https://github.com/suitcss/base - * A thin layer on top of normalize.css that provides a starting point more - * suitable for web applications. - */ - -/** - * Removes the default spacing and border for appropriate elements. - */ +/* +Removes the default spacing and border for appropriate elements. +*/ blockquote, dl, @@ -346,221 +318,80 @@ pre { margin: 0; } -button { - background-color: transparent; - background-image: none; -} - fieldset { margin: 0; padding: 0; } +legend { + padding: 0; +} + ol, -ul { +ul, +menu { list-style: none; margin: 0; padding: 0; } -/** - * Tailwind custom reset styles - */ - -/** - * 1. Use the user's configured `sans` font-family (with Tailwind's default - * sans-serif font stack as a fallback) as a sane default. - * 2. Use Tailwind's default "normal" line-height so the user isn't forced - * to override it to ensure consistency even when using the default theme. - */ - -html { - font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 1 */ - line-height: 1.5; - /* 2 */ -} - -/** - * Inherit font-family and line-height from `html` so users can set them as - * a class directly on the `html` element. - */ - -body { - font-family: inherit; - line-height: inherit; -} - -/** - * 1. Prevent padding and border from affecting element width. - * - * We used to set this in the html element and inherit from - * the parent element for everything else. This caused issues - * in shadow-dom-enhanced elements like
where the content - * is wrapped by a div with box-sizing set to `content-box`. - * - * https://github.com/mozdevs/cssremedy/issues/4 - * - * - * 2. Allow adding a border to an element by just adding a border-width. - * - * By default, the way the browser specifies that an element should have no - * border is by setting it's border-style to `none` in the user-agent - * stylesheet. - * - * In order to easily add borders to elements by just setting the `border-width` - * property, we change the default border-style for all elements to `solid`, and - * use border-width to hide them instead. This way our `border` utilities only - * need to set the `border-width` property instead of the entire `border` - * shorthand, making our border utilities much more straightforward to compose. - * - * https://github.com/tailwindcss/tailwindcss/pull/116 - */ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: currentColor; - /* 2 */ -} - /* - * Ensure horizontal rules are visible by default - */ - -hr { - border-top-width: 1px; -} - -/** - * Undo the `border-style: none` reset that Normalize applies to images so that - * our `border-{width}` utilities have the expected effect. - * - * The Normalize reset is unnecessary for us since we default the border-width - * to 0 on all elements. - * - * https://github.com/tailwindcss/tailwindcss/issues/362 - */ - -img { - border-style: solid; -} +Prevent resizing textareas horizontally by default. +*/ textarea { resize: vertical; } +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + input::-moz-placeholder, textarea::-moz-placeholder { opacity: 1; - color: #a1a1aa; + /* 1 */ + color: #9ca3af; + /* 2 */ } input:-ms-input-placeholder, textarea:-ms-input-placeholder { opacity: 1; - color: #a1a1aa; + /* 1 */ + color: #9ca3af; + /* 2 */ } input::placeholder, textarea::placeholder { opacity: 1; - color: #a1a1aa; + /* 1 */ + color: #9ca3af; + /* 2 */ } +/* +Set the default cursor for buttons. +*/ + button, [role="button"] { cursor: pointer; } -/** - * Override legacy focus reset from Normalize with modern Firefox focus styles. - * - * This is actually an improvement over the new defaults in Firefox in our testing, - * as it triggers the better focus styles even for links, which still use a dotted - * outline in Firefox by default. - */ +/* +Make sure disabled buttons don't get the pointer cursor. +*/ -:-moz-focusring { - outline: auto; +:disabled { + cursor: default; } -table { - border-collapse: collapse; -} - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/** - * Reset links to optimize for opt-in styling instead of - * opt-out. - */ - -a { - color: inherit; - text-decoration: inherit; -} - -/** - * Reset form element properties that are easy to forget to - * style explicitly so you don't inadvertently introduce - * styles that deviate from your design system. These styles - * supplement a partial reset that is already applied by - * normalize.css. - */ - -button, -input, -optgroup, -select, -textarea { - padding: 0; - line-height: inherit; - color: inherit; -} - -/** - * Use the configured 'mono' font family for elements that - * are expected to be rendered with a monospace font, falling - * back to the system monospace stack if there is no configured - * 'mono' font family. - */ - -pre, -code, -kbd, -samp { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; -} - -/** - * 1. Make replaced elements `display: block` by default as that's - * the behavior you want almost all of the time. Inspired by - * CSS Remedy, with `svg` added as well. - * - * https://github.com/mozdevs/cssremedy/issues/14 - * - * 2. Add `vertical-align: middle` to align replaced elements more - * sensibly by default when overriding `display` by adding a - * utility like `inline`. - * - * This can trigger a poorly considered linting error in some - * tools but is included by design. - * - * https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210 - */ +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ img, svg, @@ -576,12 +407,9 @@ object { /* 2 */ } -/** - * Constrain images and videos to the parent width and preserve - * their intrinsic aspect ratio. - * - * https://github.com/mozdevs/cssremedy/issues/14 - */ +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ img, video { @@ -589,220 +417,347 @@ video { height: auto; } -/** - * Ensure the default browser behavior of the `hidden` attribute. - */ - -[hidden] { - display: none; +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; } -*, ::before, ::after { - --tw-blur: var(--tw-empty,/*!*/ /*!*/); - --tw-brightness: var(--tw-empty,/*!*/ /*!*/); - --tw-contrast: var(--tw-empty,/*!*/ /*!*/); - --tw-grayscale: var(--tw-empty,/*!*/ /*!*/); - --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/); - --tw-invert: var(--tw-empty,/*!*/ /*!*/); - --tw-saturate: var(--tw-empty,/*!*/ /*!*/); - --tw-sepia: var(--tw-empty,/*!*/ /*!*/); - --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/); - --tw-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +::-webkit-backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; } .prose { - color: #3f3f46; + color: var(--tw-prose-body); max-width: 65ch; } -.prose [class~="lead"] { - color: #4b5563; +.prose :where([class~="lead"]):not(:where([class~="not-prose"] *)) { + color: var(--tw-prose-lead); font-size: 1.25em; line-height: 1.6; margin-top: 1.2em; margin-bottom: 1.2em; } -.prose a { - color: #7e22ce; +.prose :where(a):not(:where([class~="not-prose"] *)) { + color: var(--tw-prose-links); text-decoration: underline; font-weight: 500; -webkit-text-decoration-color: #d8b4fe; text-decoration-color: #d8b4fe; } -.prose a:hover { +.prose :where(a):not(:where([class~="not-prose"] *)):hover { + text-decoration: none; background-color: #9333ea; border-radius: 0.09rem; - color: #fff; - text-decoration: none; } -.prose strong { - color: #18181b; +.prose :where(strong):not(:where([class~="not-prose"] *)) { + color: var(--tw-prose-bold); font-weight: 600; } -.prose ol[type="A"] { - --list-counter-style: upper-alpha; +.prose :where(ol):not(:where([class~="not-prose"] *)) { + list-style-type: decimal; + padding-left: 1.625em; } -.prose ol[type="a"] { - --list-counter-style: lower-alpha; +.prose :where(ol[type="A"]):not(:where([class~="not-prose"] *)) { + list-style-type: upper-alpha; } -.prose ol[type="A" s] { - --list-counter-style: upper-alpha; +.prose :where(ol[type="a"]):not(:where([class~="not-prose"] *)) { + list-style-type: lower-alpha; } -.prose ol[type="a" s] { - --list-counter-style: lower-alpha; +.prose :where(ol[type="A" s]):not(:where([class~="not-prose"] *)) { + list-style-type: upper-alpha; } -.prose ol[type="I"] { - --list-counter-style: upper-roman; +.prose :where(ol[type="a" s]):not(:where([class~="not-prose"] *)) { + list-style-type: lower-alpha; } -.prose ol[type="i"] { - --list-counter-style: lower-roman; +.prose :where(ol[type="I"]):not(:where([class~="not-prose"] *)) { + list-style-type: upper-roman; } -.prose ol[type="I" s] { - --list-counter-style: upper-roman; +.prose :where(ol[type="i"]):not(:where([class~="not-prose"] *)) { + list-style-type: lower-roman; } -.prose ol[type="i" s] { - --list-counter-style: lower-roman; +.prose :where(ol[type="I" s]):not(:where([class~="not-prose"] *)) { + list-style-type: upper-roman; } -.prose ol[type="1"] { - --list-counter-style: decimal; +.prose :where(ol[type="i" s]):not(:where([class~="not-prose"] *)) { + list-style-type: lower-roman; } -.prose ol > li { - position: relative; - padding-left: 1.75em; +.prose :where(ol[type="1"]):not(:where([class~="not-prose"] *)) { + list-style-type: decimal; } -.prose ol > li::before { - content: counter(list-item, var(--list-counter-style, decimal)) "."; - position: absolute; +.prose :where(ul):not(:where([class~="not-prose"] *)) { + list-style-type: disc; + padding-left: 1.625em; +} + +.prose :where(ol > li):not(:where([class~="not-prose"] *))::marker { font-weight: 400; - color: #27272a; - left: 0; + color: var(--tw-prose-counters); } -.prose ul > li { - position: relative; - padding-left: 1.75em; +.prose :where(ul > li):not(:where([class~="not-prose"] *))::marker { + color: var(--tw-prose-bullets); } -.prose ul > li::before { - content: ""; - position: absolute; - background-color: #71717a; - border-radius: 50%; - width: 0.375em; - height: 0.375em; - top: calc(0.875em - 0.1875em); - left: 0.25em; -} - -.prose hr { - border-color: #e4e4e7; +.prose :where(hr):not(:where([class~="not-prose"] *)) { + border-color: var(--tw-prose-hr); border-top-width: 1px; margin-top: 3em; margin-bottom: 3em; } -.prose blockquote { +.prose :where(blockquote):not(:where([class~="not-prose"] *)) { font-weight: 500; font-style: italic; - color: #27272a; + color: var(--tw-prose-quotes); border-left-width: 0.25rem; - border-left-color: #e9d5ff; + border-left-color: var(--tw-prose-quote-borders); quotes: "\201C""\201D""\2018""\2019"; margin-top: 1.6em; margin-bottom: 1.6em; padding-left: 1em; } -.prose blockquote p:first-of-type::before { +.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"] *))::before { content: open-quote; } -.prose blockquote p:last-of-type::after { +.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"] *))::after { content: close-quote; } -.prose h1 { - color: #27272a; +.prose :where(h1):not(:where([class~="not-prose"] *)) { + color: var(--tw-prose-headings); font-weight: 800; font-size: 2.25em; margin-top: 0; margin-bottom: 0.8888889em; line-height: 1.1111111; - position: relative; } -.prose h2 { - color: #27272a; +.prose :where(h1 strong):not(:where([class~="not-prose"] *)) { + font-weight: 900; +} + +.prose :where(h2):not(:where([class~="not-prose"] *)) { + color: var(--tw-prose-headings); font-weight: 700; font-size: 1.5em; margin-top: 2em; margin-bottom: 1em; line-height: 1.3333333; - position: relative; } -.prose h3 { - color: #27272a; +.prose :where(h2 strong):not(:where([class~="not-prose"] *)) { + font-weight: 800; +} + +.prose :where(h3):not(:where([class~="not-prose"] *)) { + color: var(--tw-prose-headings); font-weight: 600; font-size: 1.25em; margin-top: 1.6em; margin-bottom: 0.6em; line-height: 1.6; - position: relative; } -.prose h4 { - color: #27272a; +.prose :where(h3 strong):not(:where([class~="not-prose"] *)) { + font-weight: 700; +} + +.prose :where(h4):not(:where([class~="not-prose"] *)) { + color: var(--tw-prose-headings); font-weight: 600; margin-top: 1.5em; margin-bottom: 0.5em; line-height: 1.5; - position: relative; } -.prose figure figcaption { - color: #6b7280; +.prose :where(h4 strong):not(:where([class~="not-prose"] *)) { + font-weight: 700; +} + +.prose :where(figure > *):not(:where([class~="not-prose"] *)) { + margin-top: 0; + margin-bottom: 0; +} + +.prose :where(figcaption):not(:where([class~="not-prose"] *)) { + color: var(--tw-prose-captions); font-size: 0.875em; line-height: 1.4285714; margin-top: 0.8571429em; } -.prose code { - color: #6b21a8; +.prose :where(code):not(:where([class~="not-prose"] *)) { + color: var(--tw-prose-code); font-weight: 600; font-size: 0.875em; } -.prose code::before { +.prose :where(code):not(:where([class~="not-prose"] *))::before { content: "`"; } -.prose code::after { +.prose :where(code):not(:where([class~="not-prose"] *))::after { content: "`"; } -.prose a code { - color: #111827; +.prose :where(a code):not(:where([class~="not-prose"] *)) { + color: var(--tw-prose-code); } -.prose pre { - color: #3f3f46; - background-color: #fafafa; +.prose :where(pre):not(:where([class~="not-prose"] *)) { + color: var(--tw-prose-pre-code); + background-color: var(--tw-prose-pre-bg); overflow-x: auto; + font-weight: 400; font-size: 0.875em; line-height: 1.7142857; margin-top: 1.7142857em; @@ -814,27 +769,27 @@ video { padding-left: 1.1428571em; } -.prose pre code { +.prose :where(pre code):not(:where([class~="not-prose"] *)) { background-color: transparent; border-width: 0; border-radius: 0; padding: 0; - font-weight: 400; - color: #3f3f46; + font-weight: inherit; + color: inherit; font-size: inherit; font-family: inherit; line-height: inherit; } -.prose pre code::before { +.prose :where(pre code):not(:where([class~="not-prose"] *))::before { content: none; } -.prose pre code::after { +.prose :where(pre code):not(:where([class~="not-prose"] *))::after { content: none; } -.prose table { +.prose :where(table):not(:where([class~="not-prose"] *)) { width: 100%; table-layout: auto; text-align: left; @@ -844,31 +799,31 @@ video { line-height: 1.7142857; } -.prose thead { - color: #27272a; - font-weight: 600; +.prose :where(thead):not(:where([class~="not-prose"] *)) { border-bottom-width: 1px; - border-bottom-color: #71717a; + border-bottom-color: var(--tw-prose-th-borders); } -.prose thead th { +.prose :where(thead th):not(:where([class~="not-prose"] *)) { + color: var(--tw-prose-headings); + font-weight: 600; vertical-align: bottom; padding-right: 0.5714286em; padding-bottom: 0.5714286em; padding-left: 0.5714286em; } -.prose tbody tr { +.prose :where(tbody tr):not(:where([class~="not-prose"] *)) { border-bottom-width: 1px; - border-bottom-color: #d4d4d8; + border-bottom-color: var(--tw-prose-td-borders); } -.prose tbody tr:last-child { +.prose :where(tbody tr:last-child):not(:where([class~="not-prose"] *)) { border-bottom-width: 0; } -.prose tbody td { - vertical-align: top; +.prose :where(tbody td):not(:where([class~="not-prose"] *)) { + vertical-align: baseline; padding-top: 0.5714286em; padding-right: 0.5714286em; padding-bottom: 0.5714286em; @@ -876,133 +831,159 @@ video { } .prose { + --tw-prose-body: #374151; + --tw-prose-headings: #1f2937; + --tw-prose-lead: #6b7280; + --tw-prose-links: #7e22ce; + --tw-prose-bold: #111827; + --tw-prose-counters: #1f2937; + --tw-prose-bullets: #6b7280; + --tw-prose-hr: #e5e7eb; + --tw-prose-quotes: #374151; + --tw-prose-quote-borders: #e9d5ff; + --tw-prose-captions: #6b7280; + --tw-prose-code: #7e22ce; + --tw-prose-pre-code: #374151; + --tw-prose-pre-bg: #f9fafb; + --tw-prose-th-borders: #6b7280; + --tw-prose-td-borders: #d1d5db; + --tw-prose-invert-body: #d1d5db; + --tw-prose-invert-headings: #f9fafb; + --tw-prose-invert-lead: #6b7280; + --tw-prose-invert-links: #c084fc; + --tw-prose-invert-bold: #fff; + --tw-prose-invert-counters: #9ca3af; + --tw-prose-invert-bullets: #4b5563; + --tw-prose-invert-hr: #6b7280; + --tw-prose-invert-quotes: #e5e7eb; + --tw-prose-invert-quote-borders: #581c87; + --tw-prose-invert-captions: #9ca3af; + --tw-prose-invert-code: #c084fc; + --tw-prose-invert-pre-code: #e5e7eb; + --tw-prose-invert-pre-bg: #374151; + --tw-prose-invert-th-borders: #6b7280; + --tw-prose-invert-td-borders: #374151; font-size: 1rem; line-height: 1.75; } -.prose p { +.prose :where(p):not(:where([class~="not-prose"] *)) { margin-top: 1.25em; margin-bottom: 1.25em; } -.prose img { +.prose :where(img):not(:where([class~="not-prose"] *)) { margin-top: 2em; margin-bottom: 2em; } -.prose video { +.prose :where(video):not(:where([class~="not-prose"] *)) { margin-top: 2em; margin-bottom: 2em; } -.prose figure { +.prose :where(figure):not(:where([class~="not-prose"] *)) { margin-top: 2em; margin-bottom: 2em; } -.prose figure > * { - margin-top: 0; - margin-bottom: 0; -} - -.prose h2 code { +.prose :where(h2 code):not(:where([class~="not-prose"] *)) { font-size: 0.875em; } -.prose h3 code { +.prose :where(h3 code):not(:where([class~="not-prose"] *)) { font-size: 0.9em; } -.prose ol { - margin-top: 1.25em; - margin-bottom: 1.25em; -} - -.prose ul { - margin-top: 1.25em; - margin-bottom: 1.25em; -} - -.prose li { +.prose :where(li):not(:where([class~="not-prose"] *)) { margin-top: 0.5em; margin-bottom: 0.5em; } -.prose > ul > li p { +.prose :where(ol > li):not(:where([class~="not-prose"] *)) { + padding-left: 0.375em; +} + +.prose :where(ul > li):not(:where([class~="not-prose"] *)) { + padding-left: 0.375em; +} + +.prose > :where(ul > li p):not(:where([class~="not-prose"] *)) { margin-top: 0.75em; margin-bottom: 0.75em; } -.prose > ul > li > *:first-child { +.prose > :where(ul > li > *:first-child):not(:where([class~="not-prose"] *)) { margin-top: 1.25em; } -.prose > ul > li > *:last-child { +.prose > :where(ul > li > *:last-child):not(:where([class~="not-prose"] *)) { margin-bottom: 1.25em; } -.prose > ol > li > *:first-child { +.prose > :where(ol > li > *:first-child):not(:where([class~="not-prose"] *)) { margin-top: 1.25em; } -.prose > ol > li > *:last-child { +.prose > :where(ol > li > *:last-child):not(:where([class~="not-prose"] *)) { margin-bottom: 1.25em; } -.prose ul ul, .prose ul ol, .prose ol ul, .prose ol ol { +.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *)) { margin-top: 0.75em; margin-bottom: 0.75em; } -.prose hr + * { +.prose :where(hr + *):not(:where([class~="not-prose"] *)) { margin-top: 0; } -.prose h2 + * { +.prose :where(h2 + *):not(:where([class~="not-prose"] *)) { margin-top: 0; } -.prose h3 + * { +.prose :where(h3 + *):not(:where([class~="not-prose"] *)) { margin-top: 0; } -.prose h4 + * { +.prose :where(h4 + *):not(:where([class~="not-prose"] *)) { margin-top: 0; } -.prose thead th:first-child { +.prose :where(thead th:first-child):not(:where([class~="not-prose"] *)) { padding-left: 0; } -.prose thead th:last-child { +.prose :where(thead th:last-child):not(:where([class~="not-prose"] *)) { padding-right: 0; } -.prose tbody td:first-child { +.prose :where(tbody td:first-child):not(:where([class~="not-prose"] *)) { padding-left: 0; } -.prose tbody td:last-child { +.prose :where(tbody td:last-child):not(:where([class~="not-prose"] *)) { padding-right: 0; } -.prose > :first-child { +.prose > :where(:first-child):not(:where([class~="not-prose"] *)) { margin-top: 0; } -.prose > :last-child { +.prose > :where(:last-child):not(:where([class~="not-prose"] *)) { margin-bottom: 0; } -.prose kbd { - background-color: #e4e4e7; +.prose :where(kbd):not(:where([class~="not-prose"] *)) { + background-color: #e5e7eb; padding: 0.1rem 0.4rem; border-radius: 0.25rem; font-size: 0.9rem; font-weight: 600; } -.prose mark { +.prose :where(mark):not(:where([class~="not-prose"] *)) { + color: #1f2937; background-color: #e9d5ff; padding: 0.1rem 0.2rem; border-radius: 0.12rem; @@ -1019,19 +1000,19 @@ video { .link { --tw-bg-opacity: 1; - background-color: rgba(126, 34, 206, var(--tw-bg-opacity)); + background-color: rgb(126 34 206 / var(--tw-bg-opacity)); --tw-text-opacity: 1; - color: rgba(255, 255, 255, var(--tw-text-opacity)); + color: rgb(255 255 255 / var(--tw-text-opacity)); } .link:hover { --tw-brightness: brightness(.9); - filter: var(--tw-filter); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .link-amazon { --tw-text-opacity: 1; - color: rgba(24, 24, 27, var(--tw-text-opacity)); + color: rgb(17 24 39 / var(--tw-text-opacity)); background-color: #ff9900; } @@ -1090,7 +1071,7 @@ video { .link-kickstarter { --tw-text-opacity: 1; - color: rgba(24, 24, 27, var(--tw-text-opacity)); + color: rgb(17 24 39 / var(--tw-text-opacity)); background-color: #06ce78; } @@ -1140,7 +1121,7 @@ video { .link-snapchat { --tw-text-opacity: 1; - color: rgba(24, 24, 27, var(--tw-text-opacity)); + color: rgb(17 24 39 / var(--tw-text-opacity)); background-color: #fffc00; } @@ -1170,7 +1151,7 @@ video { } .link-twitter { - background-color: #1da1f2; + background-color: rgb(63, 136, 222); } .link-whatsapp { @@ -1189,20 +1170,17 @@ video { .prose .chroma { border-radius: 0.375rem; --tw-bg-opacity: 1; - background-color: rgba(250, 250, 250, var(--tw-bg-opacity)); + background-color: rgb(249 250 251 / var(--tw-bg-opacity)); --tw-text-opacity: 1; - color: rgba(63, 63, 70, var(--tw-text-opacity)); + color: rgb(55 65 81 / var(--tw-text-opacity)); } @media (prefers-color-scheme: dark) { .prose .chroma { --tw-bg-opacity: 1; - background-color: rgba(63, 63, 70, var(--tw-bg-opacity)); - } - - .prose .chroma { + background-color: rgb(55 65 81 / var(--tw-bg-opacity)); --tw-text-opacity: 1; - color: rgba(228, 228, 231, var(--tw-text-opacity)); + color: rgb(229 231 235 / var(--tw-text-opacity)); } } @@ -1346,6 +1324,11 @@ video { line-height: 2.5rem; } +.text-xl { + font-size: 1.25rem; + line-height: 1.75rem; +} + .text-lg { font-size: 1.125rem; line-height: 1.75rem; @@ -1361,11 +1344,6 @@ video { line-height: 1rem; } -.text-xl { - font-size: 1.25rem; - line-height: 1.75rem; -} - .font-extrabold { font-weight: 800; } @@ -1374,145 +1352,93 @@ video { line-height: 1.75rem; } -.text-neutral-900 { - --tw-text-opacity: 1; - color: rgba(24, 24, 27, var(--tw-text-opacity)); -} - .text-neutral-500 { --tw-text-opacity: 1; - color: rgba(113, 113, 122, var(--tw-text-opacity)); + color: rgb(107 114 128 / var(--tw-text-opacity)); +} + +.text-neutral-900 { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); } .text-neutral-800 { --tw-text-opacity: 1; - color: rgba(39, 39, 42, var(--tw-text-opacity)); + color: rgb(31 41 55 / var(--tw-text-opacity)); } .text-neutral-400 { --tw-text-opacity: 1; - color: rgba(161, 161, 170, var(--tw-text-opacity)); + color: rgb(156 163 175 / var(--tw-text-opacity)); } -.text-neutral-300 { +.hover\:text-primary-500:hover { --tw-text-opacity: 1; - color: rgba(212, 212, 216, var(--tw-text-opacity)); -} - -.hover\:text-primary-400:hover { - --tw-text-opacity: 1; - color: rgba(192, 132, 252, var(--tw-text-opacity)); + color: rgb(168 85 247 / var(--tw-text-opacity)); } .hover\:underline:hover { - text-decoration: underline; + -webkit-text-decoration-line: underline; + text-decoration-line: underline; +} + +.hover\:decoration-primary-400:hover { + -webkit-text-decoration-color: #c084fc; + text-decoration-color: #c084fc; } @media (prefers-color-scheme: dark) { - .dark\:prose-light { - color: #a1a1aa; + .dark\:prose-invert { + --tw-prose-body: var(--tw-prose-invert-body); + --tw-prose-headings: var(--tw-prose-invert-headings); + --tw-prose-lead: var(--tw-prose-invert-lead); + --tw-prose-links: var(--tw-prose-invert-links); + --tw-prose-bold: var(--tw-prose-invert-bold); + --tw-prose-counters: var(--tw-prose-invert-counters); + --tw-prose-bullets: var(--tw-prose-invert-bullets); + --tw-prose-hr: var(--tw-prose-invert-hr); + --tw-prose-quotes: var(--tw-prose-invert-quotes); + --tw-prose-quote-borders: var(--tw-prose-invert-quote-borders); + --tw-prose-captions: var(--tw-prose-invert-captions); + --tw-prose-code: var(--tw-prose-invert-code); + --tw-prose-pre-code: var(--tw-prose-invert-pre-code); + --tw-prose-pre-bg: var(--tw-prose-invert-pre-bg); + --tw-prose-th-borders: var(--tw-prose-invert-th-borders); + --tw-prose-td-borders: var(--tw-prose-invert-td-borders); } - .dark\:prose-light a { - color: #c084fc; - -webkit-text-decoration-color: #71717a; - text-decoration-color: #71717a; + .dark\:prose-invert :where(a):not(:where([class~="not-prose"] *)) { + -webkit-text-decoration-color: #4b5563; + text-decoration-color: #4b5563; } - .dark\:prose-light strong { - color: #fff; + .dark\:prose-invert :where(kbd):not(:where([class~="not-prose"] *)) { + color: #e5e7eb; + background-color: #374151; } - .dark\:prose-light ol > li::before { - color: #a1a1aa; - } - - .dark\:prose-light ul > li::before { - background-color: #52525b; - } - - .dark\:prose-light hr { - border-color: #71717a; - } - - .dark\:prose-light blockquote { - color: #e4e4e7; - border-left-color: #581c87; - } - - .dark\:prose-light h1 { - color: #fff; - } - - .dark\:prose-light h2 { - color: #fff; - } - - .dark\:prose-light h3 { - color: #fff; - } - - .dark\:prose-light h4 { - color: #fff; - } - - .dark\:prose-light figure figcaption { - color: #a1a1aa; - } - - .dark\:prose-light code { - color: #a855f7; - } - - .dark\:prose-light a code { - color: #fff; - } - - .dark\:prose-light pre { - color: #e4e4e7; - background-color: #3f3f46; - } - - .dark\:prose-light pre code { - color: #e4e4e7; - } - - .dark\:prose-light thead { - color: #fff; - border-bottom-color: #71717a; - } - - .dark\:prose-light tbody tr { - border-bottom-color: #3f3f46; - } - - .dark\:prose-light kbd { - background-color: #3f3f46; - color: #d4d4d8; - } - - .dark\:prose-light mark { + .dark\:prose-invert :where(mark):not(:where([class~="not-prose"] *)) { background-color: #c084fc; } .dark\:bg-neutral-800 { --tw-bg-opacity: 1; - background-color: rgba(39, 39, 42, var(--tw-bg-opacity)); + background-color: rgb(31 41 55 / var(--tw-bg-opacity)); } .dark\:text-white { --tw-text-opacity: 1; - color: rgba(255, 255, 255, var(--tw-text-opacity)); + color: rgb(255 255 255 / var(--tw-text-opacity)); + } + + .dark\:text-neutral-400 { + --tw-text-opacity: 1; + color: rgb(156 163 175 / var(--tw-text-opacity)); } .dark\:text-neutral-500 { --tw-text-opacity: 1; - color: rgba(113, 113, 122, var(--tw-text-opacity)); - } - - .dark\:text-neutral-600 { - --tw-text-opacity: 1; - color: rgba(82, 82, 91, var(--tw-text-opacity)); + color: rgb(107 114 128 / var(--tw-text-opacity)); } } diff --git a/assets/css/main.css b/assets/css/main.css index dc41b28..77f2378 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1,4 +1,4 @@ -/*! Lynx v1.1.0 | MIT License | https://github.com/jpanther/lynx */ +/*! Lynx v1.2.0 | MIT License | https://github.com/jpanther/lynx */ @tailwind base; @tailwind components; @@ -119,7 +119,7 @@ background-color: #9146ff; } .link-twitter { - background-color: #1da1f2; + background-color: rgb(63, 136, 222); } .link-whatsapp { background-color: #45d82c; diff --git a/config.toml b/config.toml index e730bd0..7b8e3fd 100644 --- a/config.toml +++ b/config.toml @@ -10,6 +10,7 @@ disableKinds = ["taxonomy", "term"] [author] # name = "Your name here" + # headline = "An awesome person" # image = "img/author.jpg" # path relative to static directory links = [ diff --git a/exampleSite/static/author.jpg b/exampleSite/assets/author.jpg similarity index 100% rename from exampleSite/static/author.jpg rename to exampleSite/assets/author.jpg diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 1c227ca..636cb0c 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -6,6 +6,7 @@ disableKinds = ["taxonomy", "term"] [author] name = "Lynx" + headline = "A simple links theme for Hugo built with Tailwind CSS" image = "author.jpg" links = [ { link = { href = "https://github.com/jpanther/lynx/blob/stable/README.md", text = "View the readme", icon = "github" } }, diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md index 6a5de0a..68e99fb 100644 --- a/exampleSite/content/_index.md +++ b/exampleSite/content/_index.md @@ -2,4 +2,4 @@ description: "This is a demo of the Lynx theme for Hugo." --- -A simple links theme for Hugo built with Tailwind CSS. +View the readme or check out all the link styles available using the links below. diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 1360ae3..b549082 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -8,7 +8,7 @@ {{ .Title | emojify }} -
+
{{ .Content | emojify }}
diff --git a/layouts/index.html b/layouts/index.html index d444ff8..e38890a 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -2,13 +2,34 @@
{{ with .Site.Author.image }} - + {{ $src := . }} + {{ $resource := "" }} + {{ if $.Page.Resources.GetMatch $src }} + {{ $resource = $.Page.Resources.GetMatch $src }} + {{ else if resources.GetMatch $src }} + {{ $resource = resources.Get $src }} + {{ end }} + {{ with $resource }} + {{ $src = (.Fill "288x288").RelPermalink }} + {{ end }} + {{ $.Site.Author.name | default {{ end }}

{{ .Params.title | default .Site.Author.name | default .Site.Title | emojify }}

+ {{ with .Site.Author.headline }} +

+ {{ . | markdownify | emojify }} +

+ {{ end }} {{ with .Content }} -
{{ . | emojify }}
+
{{ . | emojify }}
{{ end }}
{{ with .Site.Author.links }} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 227d93e..5147578 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,7 +1,7 @@