From 742a164232a27d9532ecdcd2a7dbf00109bf2b83 Mon Sep 17 00:00:00 2001 From: Julian S Date: Mon, 22 Feb 2021 10:15:19 +0100 Subject: [PATCH] fix: use css imports instead of separate postcss processing of each file (#159) --- package-lock.json | 14 +- package.json | 7 +- postcss.config.js | 9 +- template/css/atom-one-dark.css | 65 ++ template/css/atom-one-dark.min.css | 1 - template/css/{custom.css => main.css} | 26 +- template/css/main.min.css | 139 ++- template/css/tailwind.min.css | 1408 ------------------------- 8 files changed, 206 insertions(+), 1463 deletions(-) create mode 100644 template/css/atom-one-dark.css delete mode 100644 template/css/atom-one-dark.min.css rename template/css/{custom.css => main.css} (99%) delete mode 100644 template/css/tailwind.min.css diff --git a/package-lock.json b/package-lock.json index 11381f379..a88b49f02 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6904,8 +6904,7 @@ "pify": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", - "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", - "dev": true + "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=" }, "pkg-conf": { "version": "3.1.0", @@ -7072,6 +7071,16 @@ } } }, + "postcss-import": { + "version": "14.0.0", + "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.0.0.tgz", + "integrity": "sha512-gFDDzXhqr9ELmnLHgCC3TbGfA6Dm/YMb/UN8/f7Uuq4fL7VTk2vOIj6hwINEwbokEmp123bLD7a5m+E+KIetRg==", + "requires": { + "postcss-value-parser": "^4.0.0", + "read-cache": "^1.0.0", + "resolve": "^1.1.7" + } + }, "postcss-js": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-3.0.3.tgz", @@ -7247,7 +7256,6 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", "integrity": "sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=", - "dev": true, "requires": { "pify": "^2.3.0" } diff --git a/package.json b/package.json index 9cad7c67c..31f63b649 100644 --- a/package.json +++ b/package.json @@ -25,10 +25,8 @@ "develop": "npm run generate:assets && ag https://raw.githubusercontent.com/asyncapi/generator/v1.1.5/test/docs/dummy.yml ./ -o test/output --force-write --watch-template", "//develop:install": "Force ag to install your local html-template source code", "develop:install": " npm run develop -- --install", - "generate:atomcss": "cross-env NODE_ENV=production postcss template/css/atom-one-dark.min.css -o template/css/main.min.css", - "generate:maincss": "cross-env NODE_ENV=production postcss template/css/custom.css -o template/css/main.min.css", - "generate:tailwind.css": "cross-env NODE_ENV=production postcss template/css/tailwind.min.css -o template/css/main.min.css", - "generate:assets": "rimraf \"template/css/main.min.css\" && npm run generate:atomcss && npm run generate:maincss && npm run generate:tailwind.css", + "generate:maincss": "cross-env NODE_ENV=production postcss template/css/main.css -o template/css/main.min.css", + "generate:assets": "rimraf \"template/css/main.min.css\" && npm run generate:maincss", "bump:version": "npm --no-git-tag-version --allow-same-version version $VERSION", "prepublishOnly": "npm run generate:assets" }, @@ -38,6 +36,7 @@ "dependencies": { "@asyncapi/generator-filters": "^1.1.0", "autoprefixer": "^10.2.1", + "postcss-import": "^14.0.0", "puppeteer": "^5.3.1", "rimraf": "^3.0.2", "tailwindcss": "^2.0.2" diff --git a/postcss.config.js b/postcss.config.js index 12a703d90..e0c9cbbf9 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,6 +1,7 @@ module.exports = { - plugins: { - tailwindcss: {}, - autoprefixer: {}, - }, + plugins: [ + require("postcss-import"), + require("tailwindcss"), + require("autoprefixer"), + ], }; diff --git a/template/css/atom-one-dark.css b/template/css/atom-one-dark.css new file mode 100644 index 000000000..fd95361ae --- /dev/null +++ b/template/css/atom-one-dark.css @@ -0,0 +1,65 @@ +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + color: #abb2bf; + background: #282c34; +} +.hljs-comment, +.hljs-quote { + color: #5c6370; + font-style: italic; +} +.hljs-doctag, +.hljs-keyword, +.hljs-formula { + color: #c678dd; +} +.hljs-section, +.hljs-name, +.hljs-selector-tag, +.hljs-deletion, +.hljs-subst { + color: #e06c75; +} +.hljs-literal { + color: #56b6c2; +} +.hljs-string, +.hljs-regexp, +.hljs-addition, +.hljs-attribute, +.hljs-meta-string { + color: #98c379; +} +.hljs-built_in, +.hljs-class .hljs-title { + color: #e6c07b; +} +.hljs-attr, +.hljs-variable, +.hljs-template-variable, +.hljs-type, +.hljs-selector-class, +.hljs-selector-attr, +.hljs-selector-pseudo, +.hljs-number { + color: #d19a66; +} +.hljs-symbol, +.hljs-bullet, +.hljs-link, +.hljs-meta, +.hljs-selector-id, +.hljs-title { + color: #61aeee; +} +.hljs-emphasis { + font-style: italic; +} +.hljs-strong { + font-weight: bold; +} +.hljs-link { + text-decoration: underline; +} diff --git a/template/css/atom-one-dark.min.css b/template/css/atom-one-dark.min.css deleted file mode 100644 index 01c548f5b..000000000 --- a/template/css/atom-one-dark.min.css +++ /dev/null @@ -1 +0,0 @@ -.hljs{display:block;overflow-x:auto;padding:0.5em;color:#abb2bf;background:#282c34}.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic}.hljs-doctag,.hljs-keyword,.hljs-formula{color:#c678dd}.hljs-section,.hljs-name,.hljs-selector-tag,.hljs-deletion,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-string,.hljs-regexp,.hljs-addition,.hljs-attribute,.hljs-meta-string{color:#98c379}.hljs-built_in,.hljs-class .hljs-title{color:#e6c07b}.hljs-attr,.hljs-variable,.hljs-template-variable,.hljs-type,.hljs-selector-class,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-number{color:#d19a66}.hljs-symbol,.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-title{color:#61aeee}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}.hljs-link{text-decoration:underline} \ No newline at end of file diff --git a/template/css/custom.css b/template/css/main.css similarity index 99% rename from template/css/custom.css rename to template/css/main.css index e71e166ab..9a6d11c48 100644 --- a/template/css/custom.css +++ b/template/css/main.css @@ -1,5 +1,19 @@ +@import "./atom-one-dark.css"; + @tailwind base; +@tailwind components; + +@tailwind utilities; + +html, +body { + font-weight: lighter; + background-color: white; + font-family: sans-serif; + line-height: 1.15; +} + h1 { font-size: 2em; } @@ -19,18 +33,6 @@ h6 { @apply text-xs; } -@tailwind components; - -@tailwind utilities; - -html, -body { - font-weight: lighter; - background-color: white; - font-family: sans-serif; - line-height: 1.15; -} - h1, h2, h3, diff --git a/template/css/main.min.css b/template/css/main.min.css index e4f654acf..7663709b6 100644 --- a/template/css/main.min.css +++ b/template/css/main.min.css @@ -1,3 +1,80 @@ +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + color: #abb2bf; + background: #282c34; +} + +.hljs-comment, +.hljs-quote { + color: #5c6370; + font-style: italic; +} + +.hljs-doctag, +.hljs-keyword, +.hljs-formula { + color: #c678dd; +} + +.hljs-section, +.hljs-name, +.hljs-selector-tag, +.hljs-deletion, +.hljs-subst { + color: #e06c75; +} + +.hljs-literal { + color: #56b6c2; +} + +.hljs-string, +.hljs-regexp, +.hljs-addition, +.hljs-attribute, +.hljs-meta-string { + color: #98c379; +} + +.hljs-built_in, +.hljs-class .hljs-title { + color: #e6c07b; +} + +.hljs-attr, +.hljs-variable, +.hljs-template-variable, +.hljs-type, +.hljs-selector-class, +.hljs-selector-attr, +.hljs-selector-pseudo, +.hljs-number { + color: #d19a66; +} + +.hljs-symbol, +.hljs-bullet, +.hljs-link, +.hljs-meta, +.hljs-selector-id, +.hljs-title { + color: #61aeee; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} + +.hljs-link { + text-decoration: underline; +} + /*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */ /* @@ -22,7 +99,7 @@ Use a more readable tab size (opinionated). :root { -moz-tab-size: 4; -o-tab-size: 4; - tab-size: 4; + tab-size: 4; } /** @@ -91,7 +168,7 @@ Add the correct text decoration in Chrome, Edge, and Safari. abbr[title] { -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; + text-decoration: underline dotted; } /** @@ -511,30 +588,6 @@ video { height: auto; } -h1 { - font-size: 2em; -} - -h2 { - font-size: 1.5rem; -} - -h3 { - font-size: 1.25rem; -} - -h4 { - font-size: 1.125rem; -} - -h5 { - font-size: 0.875rem; -} - -h6 { - font-size: 0.75rem; -} - .bg-gray-100 { --tw-bg-opacity: 1; background-color: rgba(247, 250, 252, var(--tw-bg-opacity)); @@ -1084,13 +1137,13 @@ h6 { 0%, 100% { transform: translateY(-25%); -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1); - animation-timing-function: cubic-bezier(0.8,0,1,1); + animation-timing-function: cubic-bezier(0.8,0,1,1); } 50% { transform: none; -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1); - animation-timing-function: cubic-bezier(0,0,0.2,1); + animation-timing-function: cubic-bezier(0,0,0.2,1); } } @@ -1098,13 +1151,13 @@ h6 { 0%, 100% { transform: translateY(-25%); -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1); - animation-timing-function: cubic-bezier(0.8,0,1,1); + animation-timing-function: cubic-bezier(0.8,0,1,1); } 50% { transform: none; -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1); - animation-timing-function: cubic-bezier(0,0,0.2,1); + animation-timing-function: cubic-bezier(0,0,0.2,1); } } @@ -1116,6 +1169,30 @@ body { line-height: 1.15; } +h1 { + font-size: 2em; +} + +h2 { + font-size: 1.5rem; +} + +h3 { + font-size: 1.25rem; +} + +h4 { + font-size: 1.125rem; +} + +h5 { + font-size: 0.875rem; +} + +h6 { + font-size: 0.75rem; +} + h1, h2, h3, @@ -1178,7 +1255,7 @@ a:hover { .markdown :is(ol, ul) { -webkit-padding-start: 40px; - padding-inline-start: 40px; + padding-inline-start: 40px; list-style-type: disc; } diff --git a/template/css/tailwind.min.css b/template/css/tailwind.min.css deleted file mode 100644 index 3bc42bb99..000000000 --- a/template/css/tailwind.min.css +++ /dev/null @@ -1,1408 +0,0 @@ -/*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */ - -/* -Document -======== -*/ - -/** -Use a better box model (opinionated). -*/ - -*, -*::before, -*::after { - box-sizing: border-box; -} - -/** -Use a more readable tab size (opinionated). -*/ - -:root { - -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%; /* 2 */ -} - -/* -Sections -======== -*/ - -/** -Remove the margin in all browsers. -*/ - -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'; -} - -/* -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) -*/ - -hr { - height: 0; /* 1 */ - color: inherit; /* 2 */ -} - -/* -Text-level semantics -==================== -*/ - -/** -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr[title] { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/** -Add the correct font weight in Edge and Safari. -*/ - -b, -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. -*/ - -code, -kbd, -samp, -pre { - font-family: - ui-monospace, - SFMono-Regular, - Consolas, - 'Liberation Mono', - Menlo, - monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/** -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/** -Prevent 'sub' and 'sup' elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -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) -*/ - -table { - text-indent: 0; /* 1 */ - border-color: inherit; /* 2 */ -} - -/* -Forms -===== -*/ - -/** -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; /* 1 */ - font-size: 100%; /* 1 */ - line-height: 1.15; /* 1 */ - margin: 0; /* 2 */ -} - -/** -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. -*/ - -button, -[type='button'] { - -webkit-appearance: button; -} - -/** -Remove the inner border and padding in Firefox. -*/ - -/** -Restore the focus styles unset by the previous rule. -*/ - -/** -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 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. -*/ - -progress { - vertical-align: baseline; -} - -/** -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -/** -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -/** -Remove the inner padding in Chrome and Safari on macOS. -*/ - -/** -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to 'inherit' in Safari. -*/ - -/* -Interactive -=========== -*/ - -/* -Add the correct display in Chrome and Safari. -*/ - -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. - */ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -button { - background-color: transparent; - background-image: none; -} - -/** - * Work around a Firefox/IE bug where the transparent `button` background - * results in a loss of the default `button` focus styles. - */ - -button:focus { - outline: 1px dotted; - outline: 5px auto -webkit-focus-ring-color; -} - -fieldset { - margin: 0; - padding: 0; -} - -ol, -ul { - 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: #cbd5e0; /* 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; -} - -textarea { - resize: vertical; -} - -input::-moz-placeholder, textarea::-moz-placeholder { - color: #cbd5e0; -} - -input:-ms-input-placeholder, textarea:-ms-input-placeholder { - color: #cbd5e0; -} - -input::placeholder, -textarea::placeholder { - color: #cbd5e0; -} - -button { - cursor: pointer; -} - -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; -} - -/** - * 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 - */ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - vertical-align: middle; -} - -/** - * Constrain images and videos to the parent width and preserve - * their instrinsic aspect ratio. - * - * https://github.com/mozdevs/cssremedy/issues/14 - */ - -img, -video { - max-width: 100%; - height: auto; -} - -h1 { - font-size: 2em; -} - -h2 { - font-size: 1.5rem; -} - -h3 { - font-size: 1.25rem; -} - -h4 { - font-size: 1.125rem; -} - -h5 { - font-size: 0.875rem; -} - -h6 { - font-size: 0.75rem; -} - -.bg-gray-100 { - --tw-bg-opacity: 1; - background-color: rgba(247, 250, 252, var(--tw-bg-opacity)); -} - -.bg-gray-200 { - --tw-bg-opacity: 1; - background-color: rgba(237, 242, 247, var(--tw-bg-opacity)); -} - -.bg-gray-300 { - --tw-bg-opacity: 1; - background-color: rgba(226, 232, 240, var(--tw-bg-opacity)); -} - -.bg-red-600 { - --tw-bg-opacity: 1; - background-color: rgba(229, 62, 62, var(--tw-bg-opacity)); -} - -.bg-yellow-600 { - --tw-bg-opacity: 1; - background-color: rgba(214, 158, 46, var(--tw-bg-opacity)); -} - -.bg-green-600 { - --tw-bg-opacity: 1; - background-color: rgba(56, 161, 105, var(--tw-bg-opacity)); -} - -.bg-teal-500 { - --tw-bg-opacity: 1; - background-color: rgba(56, 178, 172, var(--tw-bg-opacity)); -} - -.bg-blue-400 { - --tw-bg-opacity: 1; - background-color: rgba(99, 179, 237, var(--tw-bg-opacity)); -} - -.bg-blue-600 { - --tw-bg-opacity: 1; - background-color: rgba(49, 130, 206, var(--tw-bg-opacity)); -} - -.bg-indigo-400 { - --tw-bg-opacity: 1; - background-color: rgba(127, 156, 245, var(--tw-bg-opacity)); -} - -.bg-indigo-700 { - --tw-bg-opacity: 1; - background-color: rgba(76, 81, 191, var(--tw-bg-opacity)); -} - -.bg-purple-600 { - --tw-bg-opacity: 1; - background-color: rgba(128, 90, 213, var(--tw-bg-opacity)); -} - -.hover\:bg-orange-300:hover { - --tw-bg-opacity: 1; - background-color: rgba(251, 211, 141, var(--tw-bg-opacity)); -} - -.hover\:bg-purple-300:hover { - --tw-bg-opacity: 1; - background-color: rgba(214, 188, 250, var(--tw-bg-opacity)); -} - -.border-gray-400 { - --tw-border-opacity: 1; - border-color: rgba(203, 213, 224, var(--tw-border-opacity)); -} - -.border-gray-800 { - --tw-border-opacity: 1; - border-color: rgba(45, 55, 72, var(--tw-border-opacity)); -} - -.border-orange-300 { - --tw-border-opacity: 1; - border-color: rgba(251, 211, 141, var(--tw-border-opacity)); -} - -.border-green-600 { - --tw-border-opacity: 1; - border-color: rgba(56, 161, 105, var(--tw-border-opacity)); -} - -.border-blue-500 { - --tw-border-opacity: 1; - border-color: rgba(66, 153, 225, var(--tw-border-opacity)); -} - -.border-purple-300 { - --tw-border-opacity: 1; - border-color: rgba(214, 188, 250, var(--tw-border-opacity)); -} - -.rounded { - border-radius: 0.25rem; -} - -.border-solid { - border-style: solid; -} - -.border { - border-width: 1px; -} - -.cursor-pointer { - cursor: pointer; -} - -.inline-block { - display: inline-block; -} - -.inline { - display: inline; -} - -.flex { - display: flex; -} - -.table { - display: table; -} - -.flex-1 { - flex: 1 1 0%; -} - -.font-sans { - 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"; -} - -.font-mono { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; -} - -.font-thin { - font-weight: 100; -} - -.font-normal { - font-weight: 400; -} - -.font-bold { - font-weight: 700; -} - -.h-6 { - height: 1.5rem; -} - -.text-xs { - font-size: 0.75rem; -} - -.text-sm { - font-size: 0.875rem; -} - -.text-base { - font-size: 1rem; -} - -.text-lg { - font-size: 1.125rem; -} - -.text-2xl { - font-size: 1.5rem; -} - -.leading-normal { - line-height: 1.5; -} - -.leading-loose { - line-height: 2; -} - -.mt-1 { - margin-top: 0.25rem; -} - -.mr-1 { - margin-right: 0.25rem; -} - -.ml-1 { - margin-left: 0.25rem; -} - -.mt-2 { - margin-top: 0.5rem; -} - -.mr-2 { - margin-right: 0.5rem; -} - -.mb-2 { - margin-bottom: 0.5rem; -} - -.ml-2 { - margin-left: 0.5rem; -} - -.mb-3 { - margin-bottom: 0.75rem; -} - -.ml-3 { - margin-left: 0.75rem; -} - -.mt-4 { - margin-top: 1rem; -} - -.mb-4 { - margin-bottom: 1rem; -} - -.ml-4 { - margin-left: 1rem; -} - -.mt-8 { - margin-top: 2rem; -} - -.ml-8 { - margin-left: 2rem; -} - -.mt-10 { - margin-top: 2.5rem; -} - -.focus\:outline-none:focus { - outline: 2px solid transparent; - outline-offset: 2px; -} - -.p-1 { - padding: 0.25rem; -} - -.p-4 { - padding: 1rem; -} - -.p-8 { - padding: 2rem; -} - -.py-0 { - padding-top: 0px; - padding-bottom: 0px; -} - -.py-1 { - padding-top: 0.25rem; - padding-bottom: 0.25rem; -} - -.py-2 { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - -.px-2 { - padding-left: 0.5rem; - padding-right: 0.5rem; -} - -.py-3 { - padding-top: 0.75rem; - padding-bottom: 0.75rem; -} - -.px-3 { - padding-left: 0.75rem; - padding-right: 0.75rem; -} - -.py-4 { - padding-top: 1rem; - padding-bottom: 1rem; -} - -.px-4 { - padding-left: 1rem; - padding-right: 1rem; -} - -.pr-4 { - padding-right: 1rem; -} - -.pb-4 { - padding-bottom: 1rem; -} - -.pl-4 { - padding-left: 1rem; -} - -.pl-6 { - padding-left: 1.5rem; -} - -.pt-8 { - padding-top: 2rem; -} - -.pr-8 { - padding-right: 2rem; -} - -.pb-8 { - padding-bottom: 2rem; -} - -.pl-8 { - padding-left: 2rem; -} - -.fixed { - position: fixed; -} - -.absolute { - position: absolute; -} - -.relative { - position: relative; -} - -.top-0 { - top: 0px; -} - -.right-0 { - right: 0px; -} - -.bottom-0 { - bottom: 0px; -} - -.left-0 { - left: 0px; -} - -* { - --tw-shadow: 0 0 #0000; -} - -.shadow { - --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -* { - --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgba(66, 153, 225, 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; -} - -.text-black { - --tw-text-opacity: 1; - color: rgba(0, 0, 0, var(--tw-text-opacity)); -} - -.text-white { - --tw-text-opacity: 1; - color: rgba(255, 255, 255, var(--tw-text-opacity)); -} - -.text-gray-200 { - --tw-text-opacity: 1; - color: rgba(237, 242, 247, var(--tw-text-opacity)); -} - -.text-gray-500 { - --tw-text-opacity: 1; - color: rgba(160, 174, 192, var(--tw-text-opacity)); -} - -.text-gray-600 { - --tw-text-opacity: 1; - color: rgba(113, 128, 150, var(--tw-text-opacity)); -} - -.text-gray-700 { - --tw-text-opacity: 1; - color: rgba(74, 85, 104, var(--tw-text-opacity)); -} - -.text-red-600 { - --tw-text-opacity: 1; - color: rgba(229, 62, 62, var(--tw-text-opacity)); -} - -.text-orange-500 { - --tw-text-opacity: 1; - color: rgba(237, 137, 54, var(--tw-text-opacity)); -} - -.text-orange-600 { - --tw-text-opacity: 1; - color: rgba(221, 107, 32, var(--tw-text-opacity)); -} - -.text-green-600 { - --tw-text-opacity: 1; - color: rgba(56, 161, 105, var(--tw-text-opacity)); -} - -.text-teal-500 { - --tw-text-opacity: 1; - color: rgba(56, 178, 172, var(--tw-text-opacity)); -} - -.text-blue-400 { - --tw-text-opacity: 1; - color: rgba(99, 179, 237, var(--tw-text-opacity)); -} - -.text-blue-500 { - --tw-text-opacity: 1; - color: rgba(66, 153, 225, var(--tw-text-opacity)); -} - -.text-purple-500 { - --tw-text-opacity: 1; - color: rgba(159, 122, 234, var(--tw-text-opacity)); -} - -.hover\:text-orange-600:hover { - --tw-text-opacity: 1; - color: rgba(221, 107, 32, var(--tw-text-opacity)); -} - -.hover\:text-purple-600:hover { - --tw-text-opacity: 1; - color: rgba(128, 90, 213, var(--tw-text-opacity)); -} - -.italic { - font-style: italic; -} - -.uppercase { - text-transform: uppercase; -} - -.lowercase { - text-transform: lowercase; -} - -.capitalize { - text-transform: capitalize; -} - -.normal-case { - text-transform: none; -} - -.line-through { - text-decoration: line-through; -} - -.no-underline { - text-decoration: none; -} - -.align-baseline { - vertical-align: baseline; -} - -.break-words { - overflow-wrap: break-word; -} - -.w-64 { - width: 16rem; -} - -.z-10 { - z-index: 10; -} - -@-webkit-keyframes spin { - to { - transform: rotate(360deg); - } -} - -@keyframes spin { - to { - transform: rotate(360deg); - } -} - -@-webkit-keyframes ping { - 75%, 100% { - transform: scale(2); - opacity: 0; - } -} - -@keyframes ping { - 75%, 100% { - transform: scale(2); - opacity: 0; - } -} - -@-webkit-keyframes pulse { - 50% { - opacity: .5; - } -} - -@keyframes pulse { - 50% { - opacity: .5; - } -} - -@-webkit-keyframes bounce { - 0%, 100% { - transform: translateY(-25%); - -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1); - animation-timing-function: cubic-bezier(0.8,0,1,1); - } - - 50% { - transform: none; - -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1); - animation-timing-function: cubic-bezier(0,0,0.2,1); - } -} - -@keyframes bounce { - 0%, 100% { - transform: translateY(-25%); - -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1); - animation-timing-function: cubic-bezier(0.8,0,1,1); - } - - 50% { - transform: none; - -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1); - animation-timing-function: cubic-bezier(0,0,0.2,1); - } -} - -html, -body { - font-weight: lighter; - background-color: white; - font-family: sans-serif; - line-height: 1.15; -} - -h1, -h2, -h3, -h4, -h5, -h6 { - font-weight: lighter; -} - -a { - color: #333; - text-decoration: underline; -} - -a:hover { - color: black; -} - -.string-chunk { - display: inline-block; - word-break: break-all; -} - -.markdown h1, -.markdown h2, -.markdown h3, -.markdown h4, -.markdown h5, -.markdown h6 { - margin-top: 0.5em; - margin-bottom: 0.5em; -} - -.markdown h1 { - font-size: 1.4em; -} - -.markdown h2 { - font-size: 1.3em; -} - -.markdown h3 { - font-size: 1.25em; -} - -.markdown h4 { - font-size: 1.15em; -} - -.markdown h5 { - font-size: 1em; - font-weight: bold; -} - -.markdown h6 { - font-weight: bold; - font-size: 0.7em; - text-transform: uppercase; -} - -.markdown :is(ol, ul) { - -webkit-padding-start: 40px; - padding-inline-start: 40px; - list-style-type: disc; -} - -.expand { - width: 20px; - margin-bottom: -4px; - transform: rotate(-90deg); -} - -.children { - display: none; -} - -.is-open > .children { - display: block; -} - -.is-open > .property .expand { - transform: rotate(0deg); -} - -/* EXAMPLES */ - -.examples-payload-tab:checked + label { - background-color: #38a89d; - border-color: #38a89d; -} - -.examples-payload-tab:checked ~ .payload-examples { - display: block; -} - -.examples-headers-tab:checked + label { - background-color: #de751f; - border-color: #de751f; -} - -.examples-headers-tab:checked ~ .headers-examples { - display: block; -} - -.payload-examples polygon, -.headers-examples polygon { - fill: #fff; -} - -.payload-examples .text-gray-200, -.headers-examples .text-gray-200 { - align-self: center; -} - -/* PANELS */ - -.sidebar-panel { - display: none; - overflow: auto; -} - -.examples-panel { - display: none; -} - -.right-block { - background-color: #263238; - margin-top: 0; - margin-bottom: 0; - z-index: 1; -} - -@media only screen and (min-width: 992px) { - .sidebar-panel { - display: block; - } - - .content-panel { - margin-left: 256px; - width: calc((100% - 256px) * 0.4); - } -} - -@media only screen and (min-width: 1400px) { - .responsive-container { - display: flex; - } - - .center-block { - width: 60%; - } - - .examples-panel { - display: block; - width: calc((100% - 256px) * 0.4); - background-color: #263238; - } - - .right-block { - background-color: transparent; - margin-top: 2rem; - margin-bottom: 2rem; - width: 40%; - } -} - -/* BURGER MENU */ - -#burger-menu { - display: none; -} - -@media only screen and (min-width: 992px) { - #burger-menu + label { - display: none; - } -} - -@media only screen and (max-width: 991px) { - #burger-menu + label { - display: flex; - justify-content: center; - flex-direction: column; - position: fixed; - background: #4dc0b5; - width: 60px; - height: 60px; - bottom: 60px; - right: 20px; - border-radius: 50%; - z-index: 100; - } - - #burger-menu + label .wrapper { - display: block; - align-self: center; - width: 30px; - height: 30px; - } - - #burger-menu + label .wrapper span { - display: block; - width: 100%; - height: 2px; - margin-top: 6px; - background: white; - transition: 0.5s; - } - - #burger-menu + label:hover { - cursor: pointer; - } - - #burger-menu:checked + label .wrapper { - margin-top: 12px; - } - - #burger-menu:checked + label .wrapper span { - opacity: 0; - top: 50%; - } - - #burger-menu:checked + label .wrapper span:first-child { - opacity: 1; - transform: rotate(405deg); - } - - #burger-menu:checked + label .wrapper span:last-child { - opacity: 1; - transform: rotate(-405deg); - margin-top: -9px; - } - - #burger-menu ~ .sidebar-panel { - position: fixed; - display: block; - height: 0; - top: -500px; - overflow: hidden; - transition: 0.2s; - z-index: 90; - opacity: 0; - } - - #burger-menu:checked ~ .sidebar-panel { - width: 100%; - height: 100%; - top: 0; - opacity: 1; - overflow: auto; - text-align: center; - } - - #burger-menu:checked ~ .sidebar-panel .sidebar-panel__content { - display: inline-block; - text-align: center; - margin: 0 auto 200px auto; - } -} - -@media (min-width: 640px) { - .sm\:mt-8 { - margin-top: 2rem; - } -} - -@media (min-width: 768px) { - .md\:flex { - display: flex; - } - - .md\:mt-3 { - margin-top: 0.75rem; - } -} - -@media (min-width: 1024px) { - .lg\:flex { - display: flex; - } -} - -@media (min-width: 1280px) { - .xl\:flex { - display: flex; - } -} - -@media (min-width: 1536px) { -}