diff --git a/.github/workflows/build-deploy.yaml b/.github/workflows/build-deploy.yaml index c0f015e..33f2c61 100644 --- a/.github/workflows/build-deploy.yaml +++ b/.github/workflows/build-deploy.yaml @@ -5,6 +5,7 @@ on: # Runs on pushes targeting the default branch push: branches: ["main"] + pull_request: # Allows you to run this workflow manually from the Actions tab workflow_dispatch: @@ -30,22 +31,26 @@ jobs: build: runs-on: ubuntu-latest steps: - - name: Download and install elm + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 + with: + node-version: 16 + cache: "npm" + cache-dependency-path: ./package-lock.json + - name: Install elm-land and node packages run: | - curl -L -o elm.gz https://github.com/elm/compiler/releases/download/0.19.1/binary-for-linux-64-bit.gz - gunzip elm.gz - sudo mv elm /usr/bin/elm - sudo chmod +x /usr/bin/elm - - name: checkout - uses: actions/checkout@v3 + npm install -g elm-land@latest + npm install - name: build - run: elm make src/Main.elm --output public/app.js --optimize + run: | + npx tailwindcss -i ./src/input.css -o ./static/main.css --minify + elm-land build - name: copy content for seving - run: cp -a content public/content + run: cp -a content dist/content - name: Upload artifact uses: actions/upload-pages-artifact@v1 with: - path: public/ + path: dist/ # Deployment job deploy: diff --git a/.gitignore b/.gitignore index 8b631e7..7295c4f 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,7 @@ -# elm-package generated files -elm-stuff -# elm-repl generated files -repl-temp-* +/dist +/.elm-land +/.env +/elm-stuff +/node_modules +.DS_Store +*.pem \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..388e343 --- /dev/null +++ b/README.md @@ -0,0 +1 @@ +# My personal website diff --git a/content/posts/development/final-evaluation.md b/content/posts/development/final-evaluation.md index c766d07..202b7a6 100644 --- a/content/posts/development/final-evaluation.md +++ b/content/posts/development/final-evaluation.md @@ -497,9 +497,6 @@ INCOMPLETE, ORANGE: NOT NEEDED/DEPRECATED) ## How does it work and how to use it? -
- -
The new build system retains the modular and hierarchical structure of the previous build system. On the other hand, the new build system diff --git a/content/posts/development/wsl2-move.md b/content/posts/development/wsl1.md similarity index 100% rename from content/posts/development/wsl2-move.md rename to content/posts/development/wsl1.md diff --git a/content/posts/error.md b/content/posts/error.md deleted file mode 100644 index 1a4b1d7..0000000 --- a/content/posts/error.md +++ /dev/null @@ -1 +0,0 @@ -# This page does not exists diff --git a/content/posts/posts.json b/content/posts/posts.json index 9db7488..867cdbd 100644 --- a/content/posts/posts.json +++ b/content/posts/posts.json @@ -1 +1,65 @@ -[{"title":"Developing Minimal Tekton Server","date":"2022-02-27 20:47","category":"development","description":"This blog is a descreptive account of the development of Minimal Tekton Server. This is highly technical in nature, so please make sure that you have sufficient knowledge about Golang, Docker, Kubernetes and TektonCD. You can refer to my [previous blog](\"https://avinal.space/posts/development/i-am-loving-it-redhat.html\") to know about these topics.","slug":"lovely-dangerous-things-redhat"},{"title":"I am loving it! RedHat","date":"2022-02-25 20:47","category":"development","description":"I made it to the Red Hat as a DevTools intern. This post is about onboarding and how I prepared myself for working on the actual project.","slug":"i-am-loving-it-redhat"},{"title":"Google Summer of Code 2021","date":"2021-08-19 23:07","category":"development","description":"This is the final report of my Google Summer of Code 2021 at The FOSSology Project. One of the major improvements over the previous build system is faster build times. CMake generates parallel build-enabled configurations for all generators.","slug":"final-evaluation"},{"title":"How I implemented WakaTime embeddable Coding Graph GHA?","date":"2021-02-02 21:47","category":"development","description":"If you use WakaTime to track your coding activity. You can add that to your README as a bar graph or embed it in your blog/portfolio. Just add this action to any of your repositories and there you have it.","slug":"wakatime"},{"title":"HRT (Hudson River Trading) Systems Internship Interview Experience","date":"2021-01-04 21:47","category":"blogs","slug":"hrt-interview-1","description":"uestions were clear and of medium level. But they were designed in such a way that you must know the basics before you could attempt. Also, they expected a clear and concise approach."},{"title":"Move WSL 2 Safely to another Drive","date":"2020-12-31 19:07","category":"development","description":"It is real pain when you have small SSD and Windows Subsystem for Linux (WSL) is growing exponentially in size. There is no easy way to move the WSL installation to another drive. Here in this blog I will discuss how to tackle this problem with bite size steps.","slug":"wsl2-move"},{"title":"Create the VLC User Documentation for one Mobile Port(Android)","date":"2020-12-01 23:47","category":"blogs","description":"The project was to Create the VLC User Documentation for Android Mobile Port which was previously hosted on VLC wiki pages. The major portion of this was to start everything from scratch including chapter separation, section organization.","slug":"gsod2020-report"},{"title":"प्रेम रतन धन पायो","date":"2019-09-21 15:47","category":"articles","slug":"for-sunshine","description":"प्रकृति की सुंदरता और कलाकारी हिमालय की कण-कण में झलकती है। प्रकृति ने प्रेम को भी हिमालय के जितना ही विशाल और अलौकिक बनाया है । ये एक अलग चर्चा का विषय है कि हिमालय पहले आया या प्रेम। मैं तो प्रेम के पक्ष में हूँ । वो हर अणु-परमाणु जिन्होंने इतने बड़ा पहाड़ खड़ा किया वो सब आपस में प्रेम से बंधे हुए हैं। ये पृथ्वी, सूर्य, चंद्रमा, आकाश-गंगा इत्यादि सब प्रेम से बंधे हुए हैं"},{"title":"The Big Red Ants","date":"2012-02-27 22:47","category":"articles","description":"As I observed them making and reparing their nests, I concluded that they are laborious and intellectual. They create their nests bybinding two or more leaves (maybe up to 500) together. They stich the leaves using a stinky white substance either excreted by themselves or from trees.","slug":"big-red-ants"}] \ No newline at end of file +[ + { + "title": "Developing Minimal Tekton Server", + "date": "2022-02-27 20:47", + "category": "development", + "description": "This blog is a descreptive account of the development of Minimal Tekton Server. This is highly technical in nature, so please make sure that you have sufficient knowledge about Golang, Docker, Kubernetes and TektonCD. You can refer to my [previous blog](\"https://avinal.space/posts/development/i-am-loving-it-redhat.html\") to know about these topics.", + "slug": "lovely-dangerous-things-redhat" + }, + { + "title": "I am loving it! RedHat", + "date": "2022-02-25 20:47", + "category": "development", + "description": "I made it to the Red Hat as a DevTools intern. This post is about onboarding and how I prepared myself for working on the actual project.", + "slug": "i-am-loving-it-redhat" + }, + { + "title": "Google Summer of Code 2021", + "date": "2021-08-19 23:07", + "category": "development", + "description": "This is the final report of my Google Summer of Code 2021 at The FOSSology Project. One of the major improvements over the previous build system is faster build times. CMake generates parallel build-enabled configurations for all generators.", + "slug": "final-evaluation" + }, + { + "title": "How I implemented WakaTime embeddable Coding Graph GHA?", + "date": "2021-02-02 21:47", + "category": "development", + "description": "If you use WakaTime to track your coding activity. You can add that to your README as a bar graph or embed it in your blog/portfolio. Just add this action to any of your repositories and there you have it.", + "slug": "wakatime" + }, + { + "title": "HRT (Hudson River Trading) Systems Internship Interview Experience", + "date": "2021-01-04 21:47", + "category": "blogs", + "slug": "hrt-interview-1", + "description": "uestions were clear and of medium level. But they were designed in such a way that you must know the basics before you could attempt. Also, they expected a clear and concise approach." + }, + { + "title": "Move WSL 2 Safely to another Drive", + "date": "2020-12-31 19:07", + "category": "development", + "description": "It is real pain when you have small SSD and Windows Subsystem for Linux (WSL) is growing exponentially in size. There is no easy way to move the WSL installation to another drive. Here in this blog I will discuss how to tackle this problem with bite size steps.", + "slug": "wsl2-move" + }, + { + "title": "Create the VLC User Documentation for one Mobile Port(Android)", + "date": "2020-12-01 23:47", + "category": "blogs", + "description": "The project was to Create the VLC User Documentation for Android Mobile Port which was previously hosted on VLC wiki pages. The major portion of this was to start everything from scratch including chapter separation, section organization.", + "slug": "gsod2020-report" + }, + { + "title": "प्रेम रतन धन पायो", + "date": "2019-09-21 15:47", + "category": "articles", + "slug": "for-sunshine", + "description": "प्रकृति की सुंदरता और कलाकारी हिमालय की कण-कण में झलकती है। प्रकृति ने प्रेम को भी हिमालय के जितना ही विशाल और अलौकिक बनाया है । ये एक अलग चर्चा का विषय है कि हिमालय पहले आया या प्रेम। मैं तो प्रेम के पक्ष में हूँ । वो हर अणु-परमाणु जिन्होंने इतने बड़ा पहाड़ खड़ा किया वो सब आपस में प्रेम से बंधे हुए हैं। ये पृथ्वी, सूर्य, चंद्रमा, आकाश-गंगा इत्यादि सब प्रेम से बंधे हुए हैं" + }, + { + "title": "The Big Red Ants", + "date": "2012-02-27 22:47", + "category": "articles", + "description": "As I observed them making and reparing their nests, I concluded that they are laborious and intellectual. They create their nests bybinding two or more leaves (maybe up to 500) together. They stich the leaves using a stinky white substance either excreted by themselves or from trees.", + "slug": "big-red-ants" + } +] \ No newline at end of file diff --git a/elm-land.json b/elm-land.json new file mode 100644 index 0000000..4f28ae1 --- /dev/null +++ b/elm-land.json @@ -0,0 +1,61 @@ +{ + "app": { + "elm": { + "development": { + "debugger": true + }, + "production": { + "debugger": false + } + }, + "env": [], + "html": { + "attributes": { + "html": { + "lang": "en", + "class": "bg-neutral-800" + }, + "head": {}, + "body": {} + }, + "title": "Avinal | Personal Website", + "meta": [ + { + "charset": "UTF-8" + }, + { + "http-equiv": "X-UA-Compatible", + "content": "IE=edge" + }, + { + "name": "viewport", + "content": "width=device-width, initial-scale=1.0" + } + ], + "link": [ + { + "rel": "stylesheet", + "href": "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css", + "integrity": "sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==", + "crossorigin": "anonymous", + "referrerpolicy": "no-referrer" + }, + { + "rel": "stylesheet", + "href": "/main.css" + } + ], + "script": [ + { + "src": "https://cdn.jsdelivr.net/npm/marked/marked.min.js" + }, + { + "src": "/js/redirect.js" + } + ] + }, + "router": { + "useHashRouting": false + } + } +} \ No newline at end of file diff --git a/elm.json b/elm.json index 20a0f48..c9ffabb 100644 --- a/elm.json +++ b/elm.json @@ -1,7 +1,8 @@ { "type": "application", "source-directories": [ - "src" + "src", + ".elm-land/src" ], "elm-version": "0.19.1", "dependencies": { @@ -12,21 +13,20 @@ "elm/html": "1.0.0", "elm/http": "2.0.0", "elm/json": "1.1.3", - "elm/parser": "1.1.0", + "elm/svg": "1.0.1", + "elm/time": "1.0.0", "elm/url": "1.0.0" }, "indirect": { "elm/bytes": "1.0.8", "elm/file": "1.0.5", + "elm/parser": "1.1.0", "elm/regex": "1.0.0", - "elm/time": "1.0.0", "elm/virtual-dom": "1.0.3" } }, "test-dependencies": { "direct": {}, - "indirect": { - "rtfeldman/elm-hex": "1.0.0" - } + "indirect": {} } -} +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..e321155 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,848 @@ +{ + "name": "avinal.github.io", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "devDependencies": { + "@tailwindcss/typography": "^0.5.8", + "tailwindcss": "^3.2.4" + } + }, + "node_modules/@nodelib/fs.scandir": { + "version": "2.1.5", + "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", + "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==", + "dev": true, + "dependencies": { + "@nodelib/fs.stat": "2.0.5", + "run-parallel": "^1.1.9" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/@nodelib/fs.stat": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz", + "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==", + "dev": true, + "engines": { + "node": ">= 8" + } + }, + "node_modules/@nodelib/fs.walk": { + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz", + "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==", + "dev": true, + "dependencies": { + "@nodelib/fs.scandir": "2.1.5", + "fastq": "^1.6.0" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/@tailwindcss/typography": { + "version": "0.5.8", + "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.8.tgz", + "integrity": "sha512-xGQEp8KXN8Sd8m6R4xYmwxghmswrd0cPnNI2Lc6fmrC3OojysTBJJGSIVwPV56q4t6THFUK3HJ0EaWwpglSxWw==", + "dev": true, + "dependencies": { + "lodash.castarray": "^4.4.0", + "lodash.isplainobject": "^4.0.6", + "lodash.merge": "^4.6.2", + "postcss-selector-parser": "6.0.10" + }, + "peerDependencies": { + "tailwindcss": ">=3.0.0 || insiders" + } + }, + "node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": { + "version": "6.0.10", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz", + "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==", + "dev": true, + "dependencies": { + "cssesc": "^3.0.0", + "util-deprecate": "^1.0.2" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/acorn": { + "version": "7.4.1", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz", + "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==", + "dev": true, + "bin": { + "acorn": "bin/acorn" + }, + "engines": { + "node": ">=0.4.0" + } + }, + "node_modules/acorn-node": { + "version": "1.8.2", + "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz", + "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==", + "dev": true, + "dependencies": { + "acorn": "^7.0.0", + "acorn-walk": "^7.0.0", + "xtend": "^4.0.2" + } + }, + "node_modules/acorn-walk": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz", + "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==", + "dev": true, + "engines": { + "node": ">=0.4.0" + } + }, + "node_modules/anymatch": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", + "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", + "dev": true, + "dependencies": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/arg": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz", + "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==", + "dev": true + }, + "node_modules/binary-extensions": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", + "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/braces": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", + "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "dev": true, + "dependencies": { + "fill-range": "^7.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/camelcase-css": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz", + "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==", + "dev": true, + "engines": { + "node": ">= 6" + } + }, + "node_modules/chokidar": { + "version": "3.5.3", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", + "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", + "dev": true, + "funding": [ + { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + ], + "dependencies": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + }, + "engines": { + "node": ">= 8.10.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/chokidar/node_modules/glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dev": true, + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "node_modules/cssesc": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", + "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", + "dev": true, + "bin": { + "cssesc": "bin/cssesc" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/defined": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz", + "integrity": "sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==", + "dev": true, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/detective": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz", + "integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==", + "dev": true, + "dependencies": { + "acorn-node": "^1.8.2", + "defined": "^1.0.0", + "minimist": "^1.2.6" + }, + "bin": { + "detective": "bin/detective.js" + }, + "engines": { + "node": ">=0.8.0" + } + }, + "node_modules/didyoumean": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz", + "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==", + "dev": true + }, + "node_modules/dlv": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz", + "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==", + "dev": true + }, + "node_modules/fast-glob": { + "version": "3.2.12", + "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz", + "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==", + "dev": true, + "dependencies": { + "@nodelib/fs.stat": "^2.0.2", + "@nodelib/fs.walk": "^1.2.3", + "glob-parent": "^5.1.2", + "merge2": "^1.3.0", + "micromatch": "^4.0.4" + }, + "engines": { + "node": ">=8.6.0" + } + }, + "node_modules/fast-glob/node_modules/glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dev": true, + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/fastq": { + "version": "1.14.0", + "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.14.0.tgz", + "integrity": "sha512-eR2D+V9/ExcbF9ls441yIuN6TI2ED1Y2ZcA5BmMtJsOkWOFRJQ0Jt0g1UwqXJJVAb+V+umH5Dfr8oh4EVP7VVg==", + "dev": true, + "dependencies": { + "reusify": "^1.0.4" + } + }, + "node_modules/fill-range": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", + "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "dev": true, + "dependencies": { + "to-regex-range": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, + "hasInstallScript": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, + "node_modules/function-bind": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", + "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==", + "dev": true + }, + "node_modules/glob-parent": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", + "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==", + "dev": true, + "dependencies": { + "is-glob": "^4.0.3" + }, + "engines": { + "node": ">=10.13.0" + } + }, + "node_modules/has": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", + "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", + "dev": true, + "dependencies": { + "function-bind": "^1.1.1" + }, + "engines": { + "node": ">= 0.4.0" + } + }, + "node_modules/is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "dev": true, + "dependencies": { + "binary-extensions": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/is-core-module": { + "version": "2.11.0", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz", + "integrity": "sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==", + "dev": true, + "dependencies": { + "has": "^1.0.3" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/is-extglob": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", + "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-glob": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", + "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", + "dev": true, + "dependencies": { + "is-extglob": "^2.1.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "dev": true, + "engines": { + "node": ">=0.12.0" + } + }, + "node_modules/lilconfig": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.6.tgz", + "integrity": "sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==", + "dev": true, + "engines": { + "node": ">=10" + } + }, + "node_modules/lodash.castarray": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz", + "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==", + "dev": true + }, + "node_modules/lodash.isplainobject": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz", + "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==", + "dev": true + }, + "node_modules/lodash.merge": { + "version": "4.6.2", + "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", + "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", + "dev": true + }, + "node_modules/merge2": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", + "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==", + "dev": true, + "engines": { + "node": ">= 8" + } + }, + "node_modules/micromatch": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz", + "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==", + "dev": true, + "dependencies": { + "braces": "^3.0.2", + "picomatch": "^2.3.1" + }, + "engines": { + "node": ">=8.6" + } + }, + "node_modules/minimist": { + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz", + "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==", + "dev": true, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/nanoid": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", + "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==", + "dev": true, + "bin": { + "nanoid": "bin/nanoid.cjs" + }, + "engines": { + "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" + } + }, + "node_modules/normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/object-hash": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz", + "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==", + "dev": true, + "engines": { + "node": ">= 6" + } + }, + "node_modules/path-parse": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", + "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", + "dev": true + }, + "node_modules/picocolors": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", + "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", + "dev": true + }, + "node_modules/picomatch": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "dev": true, + "engines": { + "node": ">=8.6" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/pify": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/postcss": { + "version": "8.4.20", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.20.tgz", + "integrity": "sha512-6Q04AXR1212bXr5fh03u8aAwbLxAQNGQ/Q1LNa0VfOI06ZAlhPHtQvE4OIdpj4kLThXilalPnmDSOD65DcHt+g==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + } + ], + "dependencies": { + "nanoid": "^3.3.4", + "picocolors": "^1.0.0", + "source-map-js": "^1.0.2" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/postcss-import": { + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz", + "integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==", + "dev": true, + "dependencies": { + "postcss-value-parser": "^4.0.0", + "read-cache": "^1.0.0", + "resolve": "^1.1.7" + }, + "engines": { + "node": ">=10.0.0" + }, + "peerDependencies": { + "postcss": "^8.0.0" + } + }, + "node_modules/postcss-js": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz", + "integrity": "sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==", + "dev": true, + "dependencies": { + "camelcase-css": "^2.0.1" + }, + "engines": { + "node": "^12 || ^14 || >= 16" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + "peerDependencies": { + "postcss": "^8.3.3" + } + }, + "node_modules/postcss-load-config": { + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz", + "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==", + "dev": true, + "dependencies": { + "lilconfig": "^2.0.5", + "yaml": "^1.10.2" + }, + "engines": { + "node": ">= 10" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + "peerDependencies": { + "postcss": ">=8.0.9", + "ts-node": ">=9.0.0" + }, + "peerDependenciesMeta": { + "postcss": { + "optional": true + }, + "ts-node": { + "optional": true + } + } + }, + "node_modules/postcss-nested": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.0.tgz", + "integrity": "sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==", + "dev": true, + "dependencies": { + "postcss-selector-parser": "^6.0.10" + }, + "engines": { + "node": ">=12.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + "peerDependencies": { + "postcss": "^8.2.14" + } + }, + "node_modules/postcss-selector-parser": { + "version": "6.0.11", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz", + "integrity": "sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==", + "dev": true, + "dependencies": { + "cssesc": "^3.0.0", + "util-deprecate": "^1.0.2" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/postcss-value-parser": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", + "dev": true + }, + "node_modules/queue-microtask": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", + "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ] + }, + "node_modules/quick-lru": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz", + "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/read-cache": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", + "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==", + "dev": true, + "dependencies": { + "pify": "^2.3.0" + } + }, + "node_modules/readdirp": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "dev": true, + "dependencies": { + "picomatch": "^2.2.1" + }, + "engines": { + "node": ">=8.10.0" + } + }, + "node_modules/resolve": { + "version": "1.22.1", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz", + "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==", + "dev": true, + "dependencies": { + "is-core-module": "^2.9.0", + "path-parse": "^1.0.7", + "supports-preserve-symlinks-flag": "^1.0.0" + }, + "bin": { + "resolve": "bin/resolve" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/reusify": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz", + "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==", + "dev": true, + "engines": { + "iojs": ">=1.0.0", + "node": ">=0.10.0" + } + }, + "node_modules/run-parallel": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", + "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "dependencies": { + "queue-microtask": "^1.2.2" + } + }, + "node_modules/source-map-js": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", + "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/supports-preserve-symlinks-flag": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", + "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", + "dev": true, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/tailwindcss": { + "version": "3.2.4", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.4.tgz", + "integrity": "sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==", + "dev": true, + "dependencies": { + "arg": "^5.0.2", + "chokidar": "^3.5.3", + "color-name": "^1.1.4", + "detective": "^5.2.1", + "didyoumean": "^1.2.2", + "dlv": "^1.1.3", + "fast-glob": "^3.2.12", + "glob-parent": "^6.0.2", + "is-glob": "^4.0.3", + "lilconfig": "^2.0.6", + "micromatch": "^4.0.5", + "normalize-path": "^3.0.0", + "object-hash": "^3.0.0", + "picocolors": "^1.0.0", + "postcss": "^8.4.18", + "postcss-import": "^14.1.0", + "postcss-js": "^4.0.0", + "postcss-load-config": "^3.1.4", + "postcss-nested": "6.0.0", + "postcss-selector-parser": "^6.0.10", + "postcss-value-parser": "^4.2.0", + "quick-lru": "^5.1.1", + "resolve": "^1.22.1" + }, + "bin": { + "tailwind": "lib/cli.js", + "tailwindcss": "lib/cli.js" + }, + "engines": { + "node": ">=12.13.0" + }, + "peerDependencies": { + "postcss": "^8.0.9" + } + }, + "node_modules/to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "dev": true, + "dependencies": { + "is-number": "^7.0.0" + }, + "engines": { + "node": ">=8.0" + } + }, + "node_modules/util-deprecate": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", + "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==", + "dev": true + }, + "node_modules/xtend": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", + "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==", + "dev": true, + "engines": { + "node": ">=0.4" + } + }, + "node_modules/yaml": { + "version": "1.10.2", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz", + "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==", + "dev": true, + "engines": { + "node": ">= 6" + } + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..52ea97d --- /dev/null +++ b/package.json @@ -0,0 +1,6 @@ +{ + "devDependencies": { + "@tailwindcss/typography": "^0.5.8", + "tailwindcss": "^3.2.4" + } +} diff --git a/public/404.html b/public/404.html deleted file mode 100644 index aeb0910..0000000 --- a/public/404.html +++ /dev/null @@ -1,65 +0,0 @@ - - - - - - - - - - - - - - - - - Single Page Apps for GitHub Pages - - - - - - \ No newline at end of file diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png deleted file mode 100644 index 2115b77..0000000 Binary files a/public/android-chrome-192x192.png and /dev/null differ diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png deleted file mode 100644 index ea924ae..0000000 Binary files a/public/android-chrome-512x512.png and /dev/null differ diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png deleted file mode 100644 index 41d8fe1..0000000 Binary files a/public/apple-touch-icon.png and /dev/null differ diff --git a/public/browserconfig.xml b/public/browserconfig.xml deleted file mode 100644 index a47e5a5..0000000 --- a/public/browserconfig.xml +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - #2d89ef - - - diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png deleted file mode 100644 index cedf3a6..0000000 Binary files a/public/favicon-16x16.png and /dev/null differ diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png deleted file mode 100644 index a219760..0000000 Binary files a/public/favicon-32x32.png and /dev/null differ diff --git a/public/favicon.ico b/public/favicon.ico deleted file mode 100644 index 110a466..0000000 Binary files a/public/favicon.ico and /dev/null differ diff --git a/public/fonts/Inter.var.woff2 b/public/fonts/Inter.var.woff2 deleted file mode 100644 index 365eedc..0000000 Binary files a/public/fonts/Inter.var.woff2 and /dev/null differ diff --git a/public/fonts/share-tech-mono-v15-latin-regular.eot b/public/fonts/share-tech-mono-v15-latin-regular.eot deleted file mode 100644 index 8614635..0000000 Binary files a/public/fonts/share-tech-mono-v15-latin-regular.eot and /dev/null differ diff --git a/public/fonts/share-tech-mono-v15-latin-regular.svg b/public/fonts/share-tech-mono-v15-latin-regular.svg deleted file mode 100644 index d64cca3..0000000 --- a/public/fonts/share-tech-mono-v15-latin-regular.svg +++ /dev/null @@ -1,295 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/fonts/share-tech-mono-v15-latin-regular.ttf b/public/fonts/share-tech-mono-v15-latin-regular.ttf deleted file mode 100644 index e70d88c..0000000 Binary files a/public/fonts/share-tech-mono-v15-latin-regular.ttf and /dev/null differ diff --git a/public/fonts/share-tech-mono-v15-latin-regular.woff b/public/fonts/share-tech-mono-v15-latin-regular.woff deleted file mode 100644 index 129effb..0000000 Binary files a/public/fonts/share-tech-mono-v15-latin-regular.woff and /dev/null differ diff --git a/public/fonts/share-tech-mono-v15-latin-regular.woff2 b/public/fonts/share-tech-mono-v15-latin-regular.woff2 deleted file mode 100644 index f48075f..0000000 Binary files a/public/fonts/share-tech-mono-v15-latin-regular.woff2 and /dev/null differ diff --git a/public/foo-style.css b/public/foo-style.css deleted file mode 100644 index 91e061e..0000000 --- a/public/foo-style.css +++ /dev/null @@ -1,1966 +0,0 @@ -@charset "UTF-8"; - -a, -/* abbr, */ -acronym, -address, -applet, -/* article, */ -aside, -audio, -/* b, */ -big, -blockquote, -canvas, -caption, -center, -cite, -/* code, */ -dd, -del, -details, -dfn, -div, -dl, -dt, -em, -embed, -fieldset, -/* figcaption, */ -/* figure, */ -footer, -form, -/* h1, -h2, -h3, -h4, -h5, -h6, */ -header, -hgroup, -html, -/* i, */ -/* iframe, */ -img, -ins, -kbd, -label, -legend, -li, -mark, -menu, -nav, -object, -/* ol, */ -output, -/* p, */ -/* pre, */ -q, -ruby, -s, -samp, -/* section, */ -small, -/* span, */ -strike, -strong, -sub, -summary, -sup, -/* table, */ -/* tbody, */ -/* td, */ -/* tfoot, */ -/* th, */ -/* thead, */ -time, -/* tr, */ -tt, -u, -ul, -var, -video { - margin: 0; - padding: 0; - border: 0; - font: inherit; - vertical-align: baseline -} - -body { - margin: 0; - padding: 0; - border: 0; - vertical-align: baseline; - line-height: 1 -} - -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -menu, -nav, -section { - display: block -} - -/* ol, */ -ul { - list-style: none -} - -blockquote, -q { - quotes: none -} - -blockquote:after, -blockquote:before, -q:after, -q:before { - content: none -} - -/* table { - border-collapse: collapse; - border-spacing: 0 -} */ - -.foo-footer ul, -.foo-grid { - list-style: none; - padding: 0; - margin: 0 0 0 -24px -} - -.foo-grid__item { - display: inline-block; - vertical-align: top; - width: 100%; - box-sizing: border-box -} - -.foo-console, -.foo-console .foo-terminal-output .foo-output--column, -.foo-grid__item { - padding-left: 24px -} - -.foo-console, -.foo-console .foo-terminal-output .foo-output--column, -.foo-editor { - display: inline-block; - vertical-align: top; - box-sizing: border-box -} - -.foo-grid--rev { - direction: rtl; - text-align: left -} - -.foo-console .foo-terminal-output .foo-grid--rev>.foo-output--column, -.foo-grid--rev>.foo-console, -.foo-grid--rev>.foo-editor, -.foo-grid--rev>.foo-grid__item { - direction: ltr; - text-align: left -} - -.foo-grid--full { - margin-left: 0 -} - -.foo-console .foo-terminal-output .foo-grid--full>.foo-output--column, -.foo-grid--full>.foo-console, -.foo-grid--full>.foo-editor, -.foo-grid--full>.foo-grid__item { - padding-left: 0 -} - -.foo-grid--right { - text-align: right -} - -.foo-console .foo-terminal-output .foo-grid--center>.foo-output--column, -.foo-console .foo-terminal-output .foo-grid--right>.foo-output--column, -.foo-grid--center>.foo-console, -.foo-grid--center>.foo-editor, -.foo-grid--center>.foo-grid__item, -.foo-grid--right>.foo-console, -.foo-grid--right>.foo-editor, -.foo-grid--right>.foo-grid__item { - text-align: left -} - -.foo-grid--center { - text-align: center -} - -.foo-console .foo-terminal-output .foo-grid--middle>.foo-output--column, -.foo-grid--middle>.foo-console, -.foo-grid--middle>.foo-editor, -.foo-grid--middle>.foo-grid__item { - vertical-align: middle -} - -.foo-console .foo-terminal-output .foo-grid--bottom>.foo-output--column, -.foo-grid--bottom>.foo-console, -.foo-grid--bottom>.foo-editor, -.foo-grid--bottom>.foo-grid__item { - vertical-align: bottom -} - -.foo-grid--narrow { - margin-left: -12px -} - -.foo-console .foo-terminal-output .foo-grid--narrow>.foo-output--column, -.foo-grid--narrow>.foo-console, -.foo-grid--narrow>.foo-editor, -.foo-grid--narrow>.foo-grid__item { - padding-left: 12px -} - -.foo-grid--wide { - margin-left: -48px -} - -.foo-console .foo-terminal-output .foo-grid--wide>.foo-output--column, -.foo-grid--wide>.foo-console, -.foo-grid--wide>.foo-editor, -.foo-grid--wide>.foo-grid__item { - padding-left: 48px -} - -.foo-one-whole { - width: 100% -} - -.foo-five-tenths, -.foo-four-eighths, -.foo-one-half, -.foo-six-twelfths, -.foo-three-sixths, -.foo-two-quarters { - width: 50% -} - -.foo-console .foo-terminal-output .foo-output--column, -.foo-four-twelfths, -.foo-one-third, -.foo-two-sixths { - width: 33.333% -} - -.foo-eight-twelfths, -.foo-four-sixths, -.foo-two-thirds { - width: 66.666% -} - -.foo-one-quarter, -.foo-three-twelfths, -.foo-two-eighths { - width: 25% -} - -.foo-nine-twelfths, -.foo-six-eighths, -.foo-three-quarters { - width: 75% -} - -.foo-one-fifth, -.foo-two-tenths { - width: 20% -} - -.foo-four-tenths, -.foo-two-fifths { - width: 40% -} - -.foo-six-tenths, -.foo-three-fifths { - width: 60% -} - -.foo-eight-tenths, -.foo-four-fifths { - width: 80% -} - -.foo-one-sixth, -.foo-two-twelfths { - width: 16.666% -} - -.foo-five-sixths, -.foo-ten-twelfths { - width: 83.333% -} - -.foo-one-eighth { - width: 12.5% -} - -.foo-three-eighths { - width: 37.5% -} - -.foo-five-eighths { - width: 62.5% -} - -.foo-seven-eighths { - width: 87.5% -} - -.foo-one-tenth { - width: 10% -} - -.foo-three-tenths { - width: 30% -} - -.foo-seven-tenths { - width: 70% -} - -.foo-nine-tenths { - width: 90% -} - -.foo-one-twelfth { - width: 8.333% -} - -.foo-five-twelfths { - width: 41.666% -} - -.foo-seven-twelfths { - width: 58.333% -} - -.foo-eleven-twelfths { - width: 91.666% -} - -@media only screen and (max-width:480px) { - .foo-palm--one-whole { - width: 100% - } - - .foo-palm--five-tenths, - .foo-palm--four-eighths, - .foo-palm--one-half, - .foo-palm--six-twelfths, - .foo-palm--three-sixths, - .foo-palm--two-quarters { - width: 50% - } - - .foo-palm--four-twelfths, - .foo-palm--one-third, - .foo-palm--two-sixths { - width: 33.333% - } - - .foo-palm--eight-twelfths, - .foo-palm--four-sixths, - .foo-palm--two-thirds { - width: 66.666% - } - - .foo-palm--one-quarter, - .foo-palm--three-twelfths, - .foo-palm--two-eighths { - width: 25% - } - - .foo-palm--nine-twelfths, - .foo-palm--six-eighths, - .foo-palm--three-quarters { - width: 75% - } - - .foo-palm--one-fifth, - .foo-palm--two-tenths { - width: 20% - } - - .foo-palm--four-tenths, - .foo-palm--two-fifths { - width: 40% - } - - .foo-palm--six-tenths, - .foo-palm--three-fifths { - width: 60% - } - - .foo-palm--eight-tenths, - .foo-palm--four-fifths { - width: 80% - } - - .foo-palm--one-sixth, - .foo-palm--two-twelfths { - width: 16.666% - } - - .foo-palm--five-sixths, - .foo-palm--ten-twelfths { - width: 83.333% - } - - .foo-palm--one-eighth { - width: 12.5% - } - - .foo-palm--three-eighths { - width: 37.5% - } - - .foo-palm--five-eighths { - width: 62.5% - } - - .foo-palm--seven-eighths { - width: 87.5% - } - - .foo-palm--one-tenth { - width: 10% - } - - .foo-palm--three-tenths { - width: 30% - } - - .foo-palm--seven-tenths { - width: 70% - } - - .foo-palm--nine-tenths { - width: 90% - } - - .foo-palm--one-twelfth { - width: 8.333% - } - - .foo-palm--five-twelfths { - width: 41.666% - } - - .foo-palm--seven-twelfths { - width: 58.333% - } - - .foo-palm--eleven-twelfths { - width: 91.666% - } -} - -@media only screen and (min-width:481px) and (max-width:1023px) { - .foo-lap--one-whole { - width: 100% - } - - .foo-lap--five-tenths, - .foo-lap--four-eighths, - .foo-lap--one-half, - .foo-lap--six-twelfths, - .foo-lap--three-sixths, - .foo-lap--two-quarters { - width: 50% - } - - .foo-lap--four-twelfths, - .foo-lap--one-third, - .foo-lap--two-sixths { - width: 33.333% - } - - .foo-lap--eight-twelfths, - .foo-lap--four-sixths, - .foo-lap--two-thirds { - width: 66.666% - } - - .foo-lap--one-quarter, - .foo-lap--three-twelfths, - .foo-lap--two-eighths { - width: 25% - } - - .foo-lap--nine-twelfths, - .foo-lap--six-eighths, - .foo-lap--three-quarters { - width: 75% - } - - .foo-lap--one-fifth, - .foo-lap--two-tenths { - width: 20% - } - - .foo-lap--four-tenths, - .foo-lap--two-fifths { - width: 40% - } - - .foo-lap--six-tenths, - .foo-lap--three-fifths { - width: 60% - } - - .foo-lap--eight-tenths, - .foo-lap--four-fifths { - width: 80% - } - - .foo-lap--one-sixth, - .foo-lap--two-twelfths { - width: 16.666% - } - - .foo-lap--five-sixths, - .foo-lap--ten-twelfths { - width: 83.333% - } - - .foo-lap--one-eighth { - width: 12.5% - } - - .foo-lap--three-eighths { - width: 37.5% - } - - .foo-lap--five-eighths { - width: 62.5% - } - - .foo-lap--seven-eighths { - width: 87.5% - } - - .foo-lap--one-tenth { - width: 10% - } - - .foo-lap--three-tenths { - width: 30% - } - - .foo-lap--seven-tenths { - width: 70% - } - - .foo-lap--nine-tenths { - width: 90% - } - - .foo-lap--one-twelfth { - width: 8.333% - } - - .foo-lap--five-twelfths { - width: 41.666% - } - - .foo-lap--seven-twelfths { - width: 58.333% - } - - .foo-lap--eleven-twelfths { - width: 91.666% - } -} - -@media only screen and (max-width:1023px) { - - .foo-console, - .foo-editor, - .foo-portable--one-whole { - width: 100% - } - - .foo-portable--five-tenths, - .foo-portable--four-eighths, - .foo-portable--one-half, - .foo-portable--six-twelfths, - .foo-portable--three-sixths, - .foo-portable--two-quarters { - width: 50% - } - - .foo-portable--four-twelfths, - .foo-portable--one-third, - .foo-portable--two-sixths { - width: 33.333% - } - - .foo-portable--eight-twelfths, - .foo-portable--four-sixths, - .foo-portable--two-thirds { - width: 66.666% - } - - .foo-portable--one-quarter, - .foo-portable--three-twelfths, - .foo-portable--two-eighths { - width: 25% - } - - .foo-portable--nine-twelfths, - .foo-portable--six-eighths, - .foo-portable--three-quarters { - width: 75% - } - - .foo-portable--one-fifth, - .foo-portable--two-tenths { - width: 20% - } - - .foo-portable--four-tenths, - .foo-portable--two-fifths { - width: 40% - } - - .foo-portable--six-tenths, - .foo-portable--three-fifths { - width: 60% - } - - .foo-portable--eight-tenths, - .foo-portable--four-fifths { - width: 80% - } - - .foo-portable--one-sixth, - .foo-portable--two-twelfths { - width: 16.666% - } - - .foo-portable--five-sixths, - .foo-portable--ten-twelfths { - width: 83.333% - } - - .foo-portable--one-eighth { - width: 12.5% - } - - .foo-portable--three-eighths { - width: 37.5% - } - - .foo-portable--five-eighths { - width: 62.5% - } - - .foo-portable--seven-eighths { - width: 87.5% - } - - .foo-portable--one-tenth { - width: 10% - } - - .foo-portable--three-tenths { - width: 30% - } - - .foo-portable--seven-tenths { - width: 70% - } - - .foo-portable--nine-tenths { - width: 90% - } - - .foo-portable--one-twelfth { - width: 8.333% - } - - .foo-portable--five-twelfths { - width: 41.666% - } - - .foo-portable--seven-twelfths { - width: 58.333% - } - - .foo-portable--eleven-twelfths { - width: 91.666% - } -} - -@media only screen and (min-width:1024px) { - .foo-desk--one-whole { - width: 100% - } - - .foo-desk--five-tenths, - .foo-desk--four-eighths, - .foo-desk--one-half, - .foo-desk--six-twelfths, - .foo-desk--three-sixths, - .foo-desk--two-quarters { - width: 50% - } - - .foo-desk--four-twelfths, - .foo-desk--one-third, - .foo-desk--two-sixths { - width: 33.333% - } - - .foo-desk--eight-twelfths, - .foo-desk--four-sixths, - .foo-desk--two-thirds { - width: 66.666% - } - - .foo-desk--one-quarter, - .foo-desk--three-twelfths, - .foo-desk--two-eighths { - width: 25% - } - - .foo-desk--nine-twelfths, - .foo-desk--six-eighths, - .foo-desk--three-quarters { - width: 75% - } - - .foo-desk--one-fifth, - .foo-desk--two-tenths { - width: 20% - } - - .foo-desk--four-tenths, - .foo-desk--two-fifths { - width: 40% - } - - .foo-desk--six-tenths, - .foo-desk--three-fifths { - width: 60% - } - - .foo-desk--eight-tenths, - .foo-desk--four-fifths { - width: 80% - } - - .foo-desk--one-sixth, - .foo-desk--two-twelfths { - width: 16.666% - } - - .foo-desk--five-sixths, - .foo-desk--ten-twelfths { - width: 83.333% - } - - .foo-desk--one-eighth { - width: 12.5% - } - - .foo-desk--three-eighths { - width: 37.5% - } - - .foo-desk--five-eighths { - width: 62.5% - } - - .foo-desk--seven-eighths { - width: 87.5% - } - - .foo-desk--one-tenth { - width: 10% - } - - .foo-desk--three-tenths { - width: 30% - } - - .foo-desk--seven-tenths { - width: 70% - } - - .foo-desk--nine-tenths { - width: 90% - } - - .foo-desk--one-twelfth { - width: 8.333% - } - - .foo-desk--five-twelfths { - width: 41.666% - } - - .foo-desk--seven-twelfths { - width: 58.333% - } - - .foo-desk--eleven-twelfths { - width: 91.666% - } -} - -.foo-cmd .foo-format, -.foo-cmd .foo-prompt div, -.foo-footer li, -.foo-terminal .foo-terminal-output .foo-format, -.foo-terminal .foo-terminal-output div span { - display: inline-block -} - -.foo-cmd .foo-clipboard { - position: absolute; - top: 0; - left: 0; - opacity: .01; - width: 2px -} - -.foo-terminal { - padding: 10px; - position: relative; - overflow: hidden -} - -.foo-cmd { - padding: 0; - margin: 0; - height: 1.3em -} - -.foo-cmd .foo-cursor.foo-blink { - -webkit-animation: blink 1s infinite steps(1, start); - animation: blink 1s infinite steps(1, start) -} - -@-webkit-keyframes blink { - - 0%, - to { - background-color: #111; - color: #f48020 - } - - 50% { - background-color: #f48020; - color: #111 - } -} - -@keyframes blink { - - 0%, - to { - background-color: #111; - color: #f48020 - } - - 50% { - background-color: #f48020; - color: #111 - } -} - -.foo-cmd .foo-prompt, -.foo-terminal .foo-terminal-output div div { - display: block; - line-height: 14px; - height: auto -} - -.foo-cmd .foo-prompt, -.foo-cmd span { - float: left -} - -.foo-cmd, -.foo-terminal { - font-family: FreeMono, monospace; - color: #aaa; - background-color: #000; - font-size: 12px; - line-height: 14px -} - -.foo-terminal-output>div { - min-height: 14px; - -ms-word-break: break-all; - word-break: break-word; - word-wrap: break-word -} - -.foo-cmd .foo-cursor.foo-blink, -.foo-cmd .foo-inverted, -.foo-terminal .foo-inverted { - background-color: #f48020; - color: #111 -} - -.foo-terminal .foo-terminal-output div.foo-error, -.foo-terminal .foo-terminal-output div.foo-error div { - color: red -} - -.foo-tilda { - position: fixed; - top: 0; - left: 0; - width: 100%; - z-index: 1100 -} - -.foo-clear { - clear: both -} - -/* share-tech-mono-regular - latin */ -@font-face { - font-family: 'Share Tech Mono'; - font-style: normal; - font-weight: 400; - src: url('/website/fonts/share-tech-mono-v15-latin-regular.eot'); - /* IE9 Compat Modes */ - src: local(''), - url('/website/fonts/share-tech-mono-v15-latin-regular.eot?#iefix') format('embedded-opentype'), - /* IE6-IE8 */ - url('/website/fonts/share-tech-mono-v15-latin-regular.woff2') format('woff2'), - /* Super Modern Browsers */ - url('/website/fonts/share-tech-mono-v15-latin-regular.woff') format('woff'), - /* Modern Browsers */ - url('/website/fonts/share-tech-mono-v15-latin-regular.ttf') format('truetype'), - /* Safari, Android, iOS */ - url('/website/fonts/share-tech-mono-v15-latin-regular.svg#ShareTechMono') format('svg'); - /* Legacy iOS */ -} - - -@keyframes blink { - - 0%, - to { - background-color: transparent - } - - 50% { - background-color: #f48020 - } -} - -@-webkit-keyframes fadeInUp { - 0% { - opacity: 0; - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0) - } - - to { - opacity: 1; - -webkit-transform: none; - transform: none - } -} - -@keyframes fadeInUp { - 0% { - opacity: 0; - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0) - } - - to { - opacity: 1; - -webkit-transform: none; - transform: none - } -} - -@-webkit-keyframes fadeOutDown { - 0% { - opacity: 1 - } - - to { - opacity: 0; - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0) - } -} - -@keyframes fadeOutDown { - 0% { - opacity: 1 - } - - to { - opacity: 0; - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0) - } -} - -@-webkit-keyframes flash { - - 0%, - 50%, - to { - opacity: 1 - } - - 25%, - 75% { - opacity: 0 - } -} - -@keyframes flash { - - 0%, - 50%, - to { - opacity: 1 - } - - 25%, - 75% { - opacity: 0 - } -} - -.foo-fadeInUp, -.foo-fadeOutDown { - -webkit-animation-duration: .3s; - animation-duration: .3s; - -webkit-animation-fill-mode: both; - animation-fill-mode: both -} - -.foo-fadeOutDown { - -webkit-animation-name: fadeOutDown; - animation-name: fadeOutDown -} - -.foo-fadeInUp { - -webkit-animation-name: fadeInUp; - animation-name: fadeInUp -} - -.foo-close, -.foo-grab-bg, -.foo-grab-bg-h, -.foo-resizer i.foo-horizontal, -.foo-resizer i.foo-vertical { - background-image: url(../img/sprite.png); - background-repeat: no-repeat -} - -.foo-grab-bg, -.foo-resizer i.foo-vertical { - background-position: 0 0; - width: 9px; - height: 32px -} - -.foo-grab-bg-h, -.foo-resizer i.foo-horizontal { - background-position: -9px 0; - width: 32px; - height: 9px -} - -.foo-close { - background-position: -9px -9px; - width: 18px; - height: 18px -} - -@media screen and (-webkit-min-device-pixel-ratio:1), -screen and (min--moz-device-pixel-ratio:1), -screen and (-o-min-device-pixel-ratio:100/100), -screen and (min-device-pixel-ratio:1), -screen and (min-resolution:1dppx) { - - .foo-close, - .foo-grab-bg, - .foo-grab-bg-h, - .foo-resizer i.foo-horizontal, - .foo-resizer i.foo-vertical { - background-image: url(../img/sprite.png); - background-size: 41px 32px - } -} - -@media screen and (-webkit-min-device-pixel-ratio:2), -screen and (min--moz-device-pixel-ratio:2), -screen and (-o-min-device-pixel-ratio:200/100), -screen and (min-device-pixel-ratio:2), -screen and (min-resolution:2dppx) { - - .foo-close, - .foo-grab-bg, - .foo-grab-bg-h, - .foo-resizer i.foo-horizontal, - .foo-resizer i.foo-vertical { - background-image: url(../img/sprite@2x.png); - background-size: 41px 32px - } -} - -*, -:after, -:before { - box-sizing: border-box -} - -body, -html { - height: 100% -} - -body { - background-color: #2b2d2d; - color: #fff; - font: 16px/1.2 "Share Tech Mono", monospace; - -webkit-font-smoothing: antialiased -} - -.foo-contact, -.foo-content { - height: 100%; - position: relative -} - -.foo-content:after, -.foo-content:before { - content: ' '; - display: table -} - -.foo-content:after { - clear: both -} - -.foo-contact { - height: 10% -} - -.foo-contact:after, -.foo-contact:before { - content: ' '; - display: table -} - -.foo-contact:after { - clear: both -} - -@media only screen and (min-width:1024px) { - .foo-logo { - border-right: 1px solid #35bdb8; - float: left; - height: 100%; - position: relative; - text-align: center; - width: 140px - } - - .foo-logo img { - margin-top: 25%; - width: 55% - } -} - -@media only screen and (max-width:1023px) { - .foo-logo { - float: top; - border-bottom: 1px solid #35bdb8; - position: relative; - text-align: left; - } - - .foo-logo img { - margin-left: 3%; - margin-top: 3%; - margin-bottom: 3%; - height: 3%; - width: 7%; - } -} - -.foo-footer { - position: absolute; - bottom: 0; - color: #999; - left: 0; - right: 0; - height: 50px; - z-index: 3; - padding: 17px 0 15px; - background-color: #3d3d3d; - font-size: 16px -} - -.foo-footer ul { - margin: 0; - padding: 0 0 0 16px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis -} - -.foo-footer li { - margin-right: 16px -} - -.foo-footer li:last-child, -.foo-shortcuts__legend li:last-child { - margin-right: 0 -} - -.foo-btn, -.foo-footer a { - color: #d7d7d7; - text-decoration: none -} - -.foo-footer a:hover { - color: #35bdb8 -} - -.foo-console.foo-terminal .foo-animation { - overflow: hidden -} - -.foo-console.foo-terminal .foo-animation__frame { - font-size: 12px !important; - line-height: 14px !important; - width: 999em; - white-space: pre; - display: none -} - -.foo-console.foo-terminal .foo-animation__frame--visible { - display: block -} - -.foo-btn { - background-color: #ef67a5; - color: #111; - padding: 0 .1em; - border: none; - outline: none; - font-family: inherit; - font-size: inherit; - cursor: pointer -} - -.foo-interface { - z-index: 1; - overflow: hidden; - background-color: #111; - transition: background-color .15s ease; - position: absolute; - bottom: 50px; - right: 0 -} - -@media only screen and (max-width:1023px) { - .foo-interface { - top: 140px; - left: 0 - } -} - -@media only screen and (min-width:1024px) { - .foo-interface { - - top: 0; - left: 140px - } -} - -.foo-interface.foo-editor--opened { - background-color: #2b2d2d -} - -.foo-interface.foo-is-resizing { - cursor: col-resize -} - -.foo-interface .foo-console { - border: 2px solid transparent -} - -.foo-interface .foo-console:focus { - border-color: #f4b400 -} - -.foo-interface .foo-editor .foo-editor__head { - border: 2px solid transparent; - border-bottom: 1px solid #35bdb8 -} - -.foo-interface .foo-editor .foo-editor__foot { - border: 2px solid transparent; - border-bottom: 2px solid transparent; - border-top: 1px solid #35bdb8 -} - -.foo-interface .foo-editor .foo-editor__content { - border-left: 2px solid transparent; - border-right: 2px solid transparent -} - -.foo-interface .foo-editor:focus .foo-editor__content, -.foo-interface .foo-editor:focus .foo-editor__head { - border-left-color: #f4b400; - border-right-color: #f4b400 -} - -.foo-interface .foo-editor:focus .foo-editor__head { - border-top-color: #f4b400 -} - -.foo-interface .foo-editor:focus .foo-editor__foot { - border-left-color: #f4b400; - border-right-color: #f4b400; - border-bottom-color: #f4b400; - border-top: 1px solid #35bdb8 -} - -.foo-console { - width: 100%; - height: 100%; - overflow-y: auto; - padding-right: 32px; - z-index: 2 -} - -.foo-console::-webkit-scrollbar-track { - background-color: #262828 -} - -.foo-console::-webkit-scrollbar { - width: 10px; - background-color: #5b5b5b; - padding: 3px -} - -.foo-console::-webkit-scrollbar-thumb { - background-color: #5b5b5b -} - -@media only screen and (max-width:1023px) { - .foo-console { - padding-right: 10px; - padding-bottom: 32px; - bottom: 0 - } -} - -.foo-editor--opened .foo-console { - width: 49% -} - -@media only screen and (max-width:1023px) { - .foo-editor--opened .foo-console { - width: 100% !important; - height: 49% - } -} - -@media only screen and (min-width:1024px) { - .foo-editor--opened .foo-console { - height: 100% !important - } -} - -.foo-console, -.foo-console .foo-cmd { - background-color: #2b2d2d; - transition: background-color .15s ease -} - -.foo-console.foo-active, -.foo-console.foo-active .foo-cmd { - background-color: #111 -} - -.foo-question__options li { - padding-left: 36px; - position: relative -} - -.foo-question__options li:before { - content: "\2B21"; - position: absolute; - left: 6px; - top: -1px -} - -.foo-question__options li.foo-option--selected:before { - content: "\2B22"; - color: #00e575 -} - -.foo-question__options li.foo-option--selected:after { - content: "\276F"; - position: absolute; - left: -5px; - top: 0 -} - -.foo-console, -.foo-console .foo-cmd { - /* font-family: "Share Tech Mono", monospace; */ - color: #fff -} - -.foo-console, -.foo-console .foo-cmd, -.foo-console .foo-cmd .foo-prompt, -.foo-console.foo-terminal .foo-terminal-output div div { - font-size: 16px; - line-height: 1.4 -} - -.foo-console.foo-terminal .foo-terminal-output div div { - margin-bottom: 8px -} - -.foo-console .foo-terminal-output .foo-output--prompt, -.foo-console .foo-terminal-output .foo-preformatted { - white-space: pre-wrap -} - -.foo-console .foo-terminal-output .foo-output--column:nth-child(3n+1) { - padding-left: 0 -} - -.foo-console .foo-terminal-output .foo-terminal-list { - display: table-row; - margin: 20px 0 -} - -.foo-console .foo-terminal-output .foo-list--padded { - display: table-cell -} - -.foo-console .foo-terminal-output .foo-list--padded:not(.foo-preformatted) { - width: 12ex -} - -.foo-console .foo-terminal-output .foo-list--definition { - display: table-cell; - position: relative; - text-transform: lowercase -} - -.foo-console .foo-terminal-output .foo-list--definition:before { - content: '- '; - position: absolute; - left: -2ex -} - -.foo-output--prompt { - word-break: break-all -} - -.foo-console .foo-prompt, -.foo-terminal-output .foo-output--prompt span { - color: #f48020 -} - -.foo-console .foo-prompt.foo-is-disabled { - pointer-events: none; - display: none -} - -.foo-console .foo-cmd .foo-cursor { - background-color: #f48020; - color: #fff -} - -.foo-term-pink { - color: #ef67a5 -} - -.foo-console .foo-terminal-output .foo-list--folder, -.foo-term-blue { - color: #35bdb8 -} - -.foo-term-green { - color: #00e575 -} - -.foo-term-orange { - color: #f48020 -} - -.foo-term-red { - color: #ec1b52 -} - -.foo-term-yellow { - color: #f4b400 -} - -.foo-console .foo-prompt+span, -.foo-term-white { - color: #fff -} - -.foo-term-grey { - color: #656565 -} - -.foo-term-story { - border-left: 8px solid #ef67a5; - color: #35bdb8; - padding: 5px 10px; - margin: 12px 0 -} - -.foo-editor { - height: 100%; - opacity: 0; - overflow: hidden; - padding: 0; - position: relative; - -webkit-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); - transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out; - transition: transform .2s ease-in-out, opacity .2s ease-in-out; - width: 49%; - z-index: 4 -} - -@media only screen and (max-width:1023px) { - .foo-editor { - height: 49%; - width: 100% !important; - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0) - } -} - -@media only screen and (min-width:1024px) { - .foo-editor { - height: 100% !important - } -} - -.foo-editor.foo-editor--opened { - opacity: 1; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0) -} - -.foo-editor.foo-editor--dirty .foo-editor__filename:after { - content: '*' -} - -.foo-editor.foo-editor--dirty .foo-editor__save:not(.foo-editor__save--disabled) { - cursor: pointer; - background-color: #ef67a5; - color: #2b2d2d -} - -.foo-editor.foo-active .foo-editor__resizer { - background-color: #2b2d2d -} - -.foo-editor.foo-active .foo-editor__resizer:hover { - background-color: #373a3a -} - -.foo-ace_editor { - font-family: "Share Tech Mono", monospace !important; - line-height: 1.4 !important; - font-size: 16px !important -} - -.foo-ace_scrollbar::-webkit-scrollbar-track { - background-color: #262828 -} - -.foo-ace_scrollbar::-webkit-scrollbar { - width: 10px; - background-color: #5b5b5b; - padding: 3px -} - -.foo-ace_scrollbar::-webkit-scrollbar-thumb { - background-color: #5b5b5b -} - -.foo-editor__content { - position: absolute !important; - top: 34px; - bottom: 38px; - left: 0; - right: 0 -} - -.foo-editor__content.foo-ace-monokai, -.foo-editor__content.foo-ace-monokai .foo-ace_gutter, -.foo-editor__content.foo-ace-monokai .foo-ace_gutter-active-line { - background-color: #2b2d2d; - transition: background-color .15s ease -} - -.foo-editor__content.foo-ace_editor.foo-ace-monokai .foo-ace_marker-layer .foo-ace_selection { - background: #444 -} - -.foo-editor__content.foo-active, -.foo-editor__content.foo-active .foo-ace-content { - background-color: #111 -} - -.foo-editor__content.foo-active .foo-ace-content .foo-ace_gutter, -.foo-editor__content.foo-active .foo-ace_gutter { - background-color: #000 !important -} - -.foo-editor__content.foo-ace-monokai.foo-active .foo-ace_gutter-active-line { - background-color: #272727 -} - -.foo-editor__content.foo-ace-monokai .foo-ace_comment { - color: #86816b -} - -.foo-editor.foo-editor-prompter--active .foo-editor__content { - pointer-events: none !important -} - -.foo-editor.foo-editor-prompter--active .foo-editor__content .foo-ace_cursor { - display: none -} - -.foo-editor__head { - height: 34px; - top: 0; - border-bottom: 1px solid #35bdb8 -} - -.foo-editor__foot, -.foo-editor__head { - position: absolute; - width: 100%; - background-color: #666; - padding: 8px 10px -} - -.foo-editor__head__meta-data { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis -} - -.foo-editor__close { - float: right; - cursor: pointer; - border: none; - outline: none; - background-color: transparent; - margin: 0 -} - -.foo-editor__save { - cursor: default; - background-color: transparent; - color: #f0f0f0; - transition: background-color .2s ease-in-out, color .2s ease-in-out -} - -.foo-editor__save[disabled] { - cursor: not-allowed -} - -.foo-editor__foot { - top: auto; - bottom: 0; - border-bottom: none; - border-top: 1px solid #35bdb8; - z-index: 10; - height: 38px; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - transition: -webkit-transform .2s ease-out, opacity .2s ease-out; - transition: transform .2s ease-out, opacity .2s ease-out -} - -.foo-editor.foo-editor-prompter--active .foo-editor__foot { - opacity: 0; - -webkit-transform: translate3d(0, 40px, 0); - transform: translate3d(0, 40px, 0) -} - -.foo-error { - position: absolute; - top: 40%; - left: 20%; - width: 60%; - height: 40%; - text-align: center -} - -.foo-error__logo { - width: 130px; - height: 120px -} - -.foo-error__message { - margin-top: 60px; - line-height: 1.6 -} - -.foo-error__message a { - color: #fff; - background-color: #35bdb8; - text-decoration: none -} - -.foo-countdown-timer__holder { - position: absolute; - bottom: 50px; - left: 0; - z-index: 20 -} - -.foo-countdown-timer .foo-countdown-timer__time { - background-color: #666; - transition: background-color .15s ease -} - -.foo-countdown-timer__text { - background-color: #666 -} - -.foo-countdown-timer--low .foo-countdown-timer__text, -.foo-countdown-timer--low .foo-countdown-timer__time { - background-color: #ec1b52 -} - -.foo-countdown-timer--low { - -webkit-animation: flash 1s .75s 2 normal both; - animation: flash 1s .75s 2 normal both -} - -.foo-countdown-timer__time { - padding: 9px 8px -} - -.foo-countdown-timer { - display: none; - width: 139px; - text-align: center; - position: relative; - border-top: 1px solid #2b2d2d; - cursor: default -} - -.foo-countdown-timer:first-child { - border-top: 0 -} - -.foo-countdown-timer__text { - position: absolute; - bottom: 0; - white-space: nowrap; - padding: 9px 10px; - z-index: -1; - -webkit-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); - transition: -webkit-transform .2s ease-out; - transition: transform .2s ease-out -} - -.foo-ie9 .foo-countdown-timer__text { - left: -300px -} - -.foo-countdown-timer__time, -.foo-prompter { - width: 100%; - display: block; - position: relative; - z-index: 2 -} - -.foo-countdown-timer__time:hover+.foo-countdown-timer__text { - -webkit-transform: translate3d(130px, 0, 0); - transform: translate3d(130px, 0, 0) -} - -.foo-ie9 .foo-countdown-timer__time:hover+.foo-countdown-timer__text { - left: 139px -} - -.foo-prompter { - position: absolute; - bottom: 0; - opacity: 1; - z-index: 20; - padding: 20px; - border-top: 1px solid #35bdb8; - background-color: #666; - color: #fff; - transition: all .3s ease-out -} - -.foo-prompter.foo-is-hidden { - bottom: -30px; - opacity: 0; - z-index: -1 -} - -.foo-prompter__text input { - font-family: "Share Tech Mono", monospace; - font-size: 16px; - line-height: 1.2; - -webkit-font-smoothing: antialiased; - border: none; - color: inherit; - margin: 0; - padding: 0; - background-color: transparent; - outline-style: none; - box-shadow: none -} - -.foo-resizer { - display: none; - position: relative; - height: 100%; - width: 2%; - background-color: #111; - transition: background-color .15s ease; - cursor: col-resize; - z-index: 10 -} - -.foo-editor--opened .foo-resizer { - display: inline-block -} - -.foo-editor--is-active .foo-resizer { - background-color: #2b2d2d -} - -.foo-resizer:hover { - background-color: #1e1e1e -} - -.foo-resizer i { - position: absolute; - top: 50%; - left: 50% -} - -.foo-resizer i.foo-vertical { - margin: -16px 0 0 -5px; - cursor: col-resize -} - -.foo-resizer i.foo-horizontal { - margin: -5px 0 0 -16px; - cursor: row-resize; - display: none -} - -@media only screen and (max-width:1023px) { - .foo-resizer { - width: 100%; - height: 2%; - cursor: row-resize - } - - .foo-resizer i.foo-vertical { - display: none - } - - .foo-editor--opened .foo-resizer, - .foo-resizer i.foo-horizontal { - display: block - } -} - -.foo-shortcuts { - position: absolute; - bottom: 9px; - right: 10px; - z-index: 12; - font-size: 14px; - color: #f0f0f0 -} - -.foo-shortcuts__legend li { - display: inline-block; - margin-right: 10px -} - -.foo-shortcut.foo-shortcut--control-command:before, -.foo-shortcut.foo-shortcut--control:before { - content: '^' -} - -.foo-shortcuts--mac .foo-shortcut--control-command:before { - content: '\2318' -} - -.foo-support { - position: absolute; - top: 0; - left: 20%; - width: 60%; - height: 40%; - text-align: center -} - -.foo-support__message { - margin-top: 60px; - line-height: 1.6 -} - -.foo-support__message a { - color: #fff; - text-decoration: underline -} - -.foo-cf:after, -.foo-cf:before { - content: ' '; - display: table -} - -.foo-cf:after { - clear: both -} \ No newline at end of file diff --git a/public/foo-style.min.css b/public/foo-style.min.css deleted file mode 100644 index 66b826f..0000000 --- a/public/foo-style.min.css +++ /dev/null @@ -1 +0,0 @@ -@charset "UTF-8";a, acronym, address, applet, aside, audio, big, blockquote, canvas, caption, center, cite, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, footer, form, header, hgroup, html, img, ins, kbd, label, legend, li, mark, menu, nav, object, output, q, ruby, s, samp, small, strike, strong, sub, summary, sup, time, tt, u, ul, var, video {margin: 0;padding: 0;border: 0;font: inherit;vertical-align: baseline }body {margin: 0;padding: 0;border: 0;vertical-align: baseline;line-height: 1 }article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block }ul {list-style: none }blockquote, q {quotes: none }blockquote:after, blockquote:before, q:after, q:before {content: none }.foo-footer ul, .foo-grid {list-style: none;padding: 0;margin: 0 0 0 -24px }.foo-grid__item {display: inline-block;vertical-align: top;width: 100%;box-sizing: border-box }.foo-console, .foo-console .foo-terminal-output .foo-output--column, .foo-grid__item {padding-left: 24px }.foo-console, .foo-console .foo-terminal-output .foo-output--column, .foo-editor {display: inline-block;vertical-align: top;box-sizing: border-box }.foo-grid--rev {direction: rtl;text-align: left }.foo-console .foo-terminal-output .foo-grid--rev>.foo-output--column, .foo-grid--rev>.foo-console, .foo-grid--rev>.foo-editor, .foo-grid--rev>.foo-grid__item {direction: ltr;text-align: left }.foo-grid--full {margin-left: 0 }.foo-console .foo-terminal-output .foo-grid--full>.foo-output--column, .foo-grid--full>.foo-console, .foo-grid--full>.foo-editor, .foo-grid--full>.foo-grid__item {padding-left: 0 }.foo-grid--right {text-align: right }.foo-console .foo-terminal-output .foo-grid--center>.foo-output--column, .foo-console .foo-terminal-output .foo-grid--right>.foo-output--column, .foo-grid--center>.foo-console, .foo-grid--center>.foo-editor, .foo-grid--center>.foo-grid__item, .foo-grid--right>.foo-console, .foo-grid--right>.foo-editor, .foo-grid--right>.foo-grid__item {text-align: left }.foo-grid--center {text-align: center }.foo-console .foo-terminal-output .foo-grid--middle>.foo-output--column, .foo-grid--middle>.foo-console, .foo-grid--middle>.foo-editor, .foo-grid--middle>.foo-grid__item {vertical-align: middle }.foo-console .foo-terminal-output .foo-grid--bottom>.foo-output--column, .foo-grid--bottom>.foo-console, .foo-grid--bottom>.foo-editor, .foo-grid--bottom>.foo-grid__item {vertical-align: bottom }.foo-grid--narrow {margin-left: -12px }.foo-console .foo-terminal-output .foo-grid--narrow>.foo-output--column, .foo-grid--narrow>.foo-console, .foo-grid--narrow>.foo-editor, .foo-grid--narrow>.foo-grid__item {padding-left: 12px }.foo-grid--wide {margin-left: -48px }.foo-console .foo-terminal-output .foo-grid--wide>.foo-output--column, .foo-grid--wide>.foo-console, .foo-grid--wide>.foo-editor, .foo-grid--wide>.foo-grid__item {padding-left: 48px }.foo-one-whole {width: 100% }.foo-five-tenths, .foo-four-eighths, .foo-one-half, .foo-six-twelfths, .foo-three-sixths, .foo-two-quarters {width: 50% }.foo-console .foo-terminal-output .foo-output--column, .foo-four-twelfths, .foo-one-third, .foo-two-sixths {width: 33.333% }.foo-eight-twelfths, .foo-four-sixths, .foo-two-thirds {width: 66.666% }.foo-one-quarter, .foo-three-twelfths, .foo-two-eighths {width: 25% }.foo-nine-twelfths, .foo-six-eighths, .foo-three-quarters {width: 75% }.foo-one-fifth, .foo-two-tenths {width: 20% }.foo-four-tenths, .foo-two-fifths {width: 40% }.foo-six-tenths, .foo-three-fifths {width: 60% }.foo-eight-tenths, .foo-four-fifths {width: 80% }.foo-one-sixth, .foo-two-twelfths {width: 16.666% }.foo-five-sixths, .foo-ten-twelfths {width: 83.333% }.foo-one-eighth {width: 12.5% }.foo-three-eighths {width: 37.5% }.foo-five-eighths {width: 62.5% }.foo-seven-eighths {width: 87.5% }.foo-one-tenth {width: 10% }.foo-three-tenths {width: 30% }.foo-seven-tenths {width: 70% }.foo-nine-tenths {width: 90% }.foo-one-twelfth {width: 8.333% }.foo-five-twelfths {width: 41.666% }.foo-seven-twelfths {width: 58.333% }.foo-eleven-twelfths {width: 91.666% }@media only screen and (max-width:480px) {.foo-palm--one-whole {width: 100% }.foo-palm--five-tenths, .foo-palm--four-eighths, .foo-palm--one-half, .foo-palm--six-twelfths, .foo-palm--three-sixths, .foo-palm--two-quarters {width: 50% }.foo-palm--four-twelfths, .foo-palm--one-third, .foo-palm--two-sixths {width: 33.333% }.foo-palm--eight-twelfths, .foo-palm--four-sixths, .foo-palm--two-thirds {width: 66.666% }.foo-palm--one-quarter, .foo-palm--three-twelfths, .foo-palm--two-eighths {width: 25% }.foo-palm--nine-twelfths, .foo-palm--six-eighths, .foo-palm--three-quarters {width: 75% }.foo-palm--one-fifth, .foo-palm--two-tenths {width: 20% }.foo-palm--four-tenths, .foo-palm--two-fifths {width: 40% }.foo-palm--six-tenths, .foo-palm--three-fifths {width: 60% }.foo-palm--eight-tenths, .foo-palm--four-fifths {width: 80% }.foo-palm--one-sixth, .foo-palm--two-twelfths {width: 16.666% }.foo-palm--five-sixths, .foo-palm--ten-twelfths {width: 83.333% }.foo-palm--one-eighth {width: 12.5% }.foo-palm--three-eighths {width: 37.5% }.foo-palm--five-eighths {width: 62.5% }.foo-palm--seven-eighths {width: 87.5% }.foo-palm--one-tenth {width: 10% }.foo-palm--three-tenths {width: 30% }.foo-palm--seven-tenths {width: 70% }.foo-palm--nine-tenths {width: 90% }.foo-palm--one-twelfth {width: 8.333% }.foo-palm--five-twelfths {width: 41.666% }.foo-palm--seven-twelfths {width: 58.333% }.foo-palm--eleven-twelfths {width: 91.666% }}@media only screen and (min-width:481px) and (max-width:1023px) {.foo-lap--one-whole {width: 100% }.foo-lap--five-tenths, .foo-lap--four-eighths, .foo-lap--one-half, .foo-lap--six-twelfths, .foo-lap--three-sixths, .foo-lap--two-quarters {width: 50% }.foo-lap--four-twelfths, .foo-lap--one-third, .foo-lap--two-sixths {width: 33.333% }.foo-lap--eight-twelfths, .foo-lap--four-sixths, .foo-lap--two-thirds {width: 66.666% }.foo-lap--one-quarter, .foo-lap--three-twelfths, .foo-lap--two-eighths {width: 25% }.foo-lap--nine-twelfths, .foo-lap--six-eighths, .foo-lap--three-quarters {width: 75% }.foo-lap--one-fifth, .foo-lap--two-tenths {width: 20% }.foo-lap--four-tenths, .foo-lap--two-fifths {width: 40% }.foo-lap--six-tenths, .foo-lap--three-fifths {width: 60% }.foo-lap--eight-tenths, .foo-lap--four-fifths {width: 80% }.foo-lap--one-sixth, .foo-lap--two-twelfths {width: 16.666% }.foo-lap--five-sixths, .foo-lap--ten-twelfths {width: 83.333% }.foo-lap--one-eighth {width: 12.5% }.foo-lap--three-eighths {width: 37.5% }.foo-lap--five-eighths {width: 62.5% }.foo-lap--seven-eighths {width: 87.5% }.foo-lap--one-tenth {width: 10% }.foo-lap--three-tenths {width: 30% }.foo-lap--seven-tenths {width: 70% }.foo-lap--nine-tenths {width: 90% }.foo-lap--one-twelfth {width: 8.333% }.foo-lap--five-twelfths {width: 41.666% }.foo-lap--seven-twelfths {width: 58.333% }.foo-lap--eleven-twelfths {width: 91.666% }}@media only screen and (max-width:1023px) {.foo-console, .foo-editor, .foo-portable--one-whole {width: 100% }.foo-portable--five-tenths, .foo-portable--four-eighths, .foo-portable--one-half, .foo-portable--six-twelfths, .foo-portable--three-sixths, .foo-portable--two-quarters {width: 50% }.foo-portable--four-twelfths, .foo-portable--one-third, .foo-portable--two-sixths {width: 33.333% }.foo-portable--eight-twelfths, .foo-portable--four-sixths, .foo-portable--two-thirds {width: 66.666% }.foo-portable--one-quarter, .foo-portable--three-twelfths, .foo-portable--two-eighths {width: 25% }.foo-portable--nine-twelfths, .foo-portable--six-eighths, .foo-portable--three-quarters {width: 75% }.foo-portable--one-fifth, .foo-portable--two-tenths {width: 20% }.foo-portable--four-tenths, .foo-portable--two-fifths {width: 40% }.foo-portable--six-tenths, .foo-portable--three-fifths {width: 60% }.foo-portable--eight-tenths, .foo-portable--four-fifths {width: 80% }.foo-portable--one-sixth, .foo-portable--two-twelfths {width: 16.666% }.foo-portable--five-sixths, .foo-portable--ten-twelfths {width: 83.333% }.foo-portable--one-eighth {width: 12.5% }.foo-portable--three-eighths {width: 37.5% }.foo-portable--five-eighths {width: 62.5% }.foo-portable--seven-eighths {width: 87.5% }.foo-portable--one-tenth {width: 10% }.foo-portable--three-tenths {width: 30% }.foo-portable--seven-tenths {width: 70% }.foo-portable--nine-tenths {width: 90% }.foo-portable--one-twelfth {width: 8.333% }.foo-portable--five-twelfths {width: 41.666% }.foo-portable--seven-twelfths {width: 58.333% }.foo-portable--eleven-twelfths {width: 91.666% }}@media only screen and (min-width:1024px) {.foo-desk--one-whole {width: 100% }.foo-desk--five-tenths, .foo-desk--four-eighths, .foo-desk--one-half, .foo-desk--six-twelfths, .foo-desk--three-sixths, .foo-desk--two-quarters {width: 50% }.foo-desk--four-twelfths, .foo-desk--one-third, .foo-desk--two-sixths {width: 33.333% }.foo-desk--eight-twelfths, .foo-desk--four-sixths, .foo-desk--two-thirds {width: 66.666% }.foo-desk--one-quarter, .foo-desk--three-twelfths, .foo-desk--two-eighths {width: 25% }.foo-desk--nine-twelfths, .foo-desk--six-eighths, .foo-desk--three-quarters {width: 75% }.foo-desk--one-fifth, .foo-desk--two-tenths {width: 20% }.foo-desk--four-tenths, .foo-desk--two-fifths {width: 40% }.foo-desk--six-tenths, .foo-desk--three-fifths {width: 60% }.foo-desk--eight-tenths, .foo-desk--four-fifths {width: 80% }.foo-desk--one-sixth, .foo-desk--two-twelfths {width: 16.666% }.foo-desk--five-sixths, .foo-desk--ten-twelfths {width: 83.333% }.foo-desk--one-eighth {width: 12.5% }.foo-desk--three-eighths {width: 37.5% }.foo-desk--five-eighths {width: 62.5% }.foo-desk--seven-eighths {width: 87.5% }.foo-desk--one-tenth {width: 10% }.foo-desk--three-tenths {width: 30% }.foo-desk--seven-tenths {width: 70% }.foo-desk--nine-tenths {width: 90% }.foo-desk--one-twelfth {width: 8.333% }.foo-desk--five-twelfths {width: 41.666% }.foo-desk--seven-twelfths {width: 58.333% }.foo-desk--eleven-twelfths {width: 91.666% }}.foo-cmd .foo-format, .foo-cmd .foo-prompt div, .foo-footer li, .foo-terminal .foo-terminal-output .foo-format, .foo-terminal .foo-terminal-output div span {display: inline-block }.foo-cmd .foo-clipboard {position: absolute;top: 0;left: 0;opacity: .01;width: 2px }.foo-terminal {padding: 10px;position: relative;overflow: hidden }.foo-cmd {padding: 0;margin: 0;height: 1.3em }.foo-cmd .foo-cursor.foo-blink {-webkit-animation: blink 1s infinite steps(1, start);animation: blink 1s infinite steps(1, start) }@-webkit-keyframes blink {0%, to {background-color: #111;color: #f48020 }50% {background-color: #f48020;color: #111 }}@keyframes blink {0%, to {background-color: #111;color: #f48020 }50% {background-color: #f48020;color: #111 }}.foo-cmd .foo-prompt, .foo-terminal .foo-terminal-output div div {display: block;line-height: 14px;height: auto }.foo-cmd .foo-prompt, .foo-cmd span {float: left }.foo-cmd, .foo-terminal {font-family: FreeMono, monospace;color: #aaa;background-color: #000;font-size: 12px;line-height: 14px }.foo-terminal-output>div {min-height: 14px;-ms-word-break: break-all;word-break: break-word;word-wrap: break-word }.foo-cmd .foo-cursor.foo-blink, .foo-cmd .foo-inverted, .foo-terminal .foo-inverted {background-color: #f48020;color: #111 }.foo-terminal .foo-terminal-output div.foo-error, .foo-terminal .foo-terminal-output div.foo-error div {color: red }.foo-tilda {position: fixed;top: 0;left: 0;width: 100%;z-index: 1100 }.foo-clear {clear: both }@font-face {font-family: 'Share Tech Mono';font-style: normal;font-weight: 400;src: url('/website/fonts/share-tech-mono-v15-latin-regular.eot');src: local(''), url('/website/fonts/share-tech-mono-v15-latin-regular.eot?#iefix') format('embedded-opentype'), url('/website/fonts/share-tech-mono-v15-latin-regular.woff2') format('woff2'), url('/website/fonts/share-tech-mono-v15-latin-regular.woff') format('woff'), url('/website/fonts/share-tech-mono-v15-latin-regular.ttf') format('truetype'), url('/website/fonts/share-tech-mono-v15-latin-regular.svg#ShareTechMono') format('svg');}@keyframes blink {0%, to {background-color: transparent }50% {background-color: #f48020 }}@-webkit-keyframes fadeInUp {0% {opacity: 0;-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0) }to {opacity: 1;-webkit-transform: none;transform: none }}@keyframes fadeInUp {0% {opacity: 0;-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0) }to {opacity: 1;-webkit-transform: none;transform: none }}@-webkit-keyframes fadeOutDown {0% {opacity: 1 }to {opacity: 0;-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0) }}@keyframes fadeOutDown {0% {opacity: 1 }to {opacity: 0;-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0) }}@-webkit-keyframes flash {0%, 50%, to {opacity: 1 }25%, 75% {opacity: 0 }}@keyframes flash {0%, 50%, to {opacity: 1 }25%, 75% {opacity: 0 }}.foo-fadeInUp, .foo-fadeOutDown {-webkit-animation-duration: .3s;animation-duration: .3s;-webkit-animation-fill-mode: both;animation-fill-mode: both }.foo-fadeOutDown {-webkit-animation-name: fadeOutDown;animation-name: fadeOutDown }.foo-fadeInUp {-webkit-animation-name: fadeInUp;animation-name: fadeInUp }.foo-close, .foo-grab-bg, .foo-grab-bg-h, .foo-resizer i.foo-horizontal, .foo-resizer i.foo-vertical {background-image: url(../img/sprite.png);background-repeat: no-repeat }.foo-grab-bg, .foo-resizer i.foo-vertical {background-position: 0 0;width: 9px;height: 32px }.foo-grab-bg-h, .foo-resizer i.foo-horizontal {background-position: -9px 0;width: 32px;height: 9px }.foo-close {background-position: -9px -9px;width: 18px;height: 18px }@media screen and (-webkit-min-device-pixel-ratio:1), screen and (min--moz-device-pixel-ratio:1), screen and (-o-min-device-pixel-ratio:100/100), screen and (min-device-pixel-ratio:1), screen and (min-resolution:1dppx) {.foo-close, .foo-grab-bg, .foo-grab-bg-h, .foo-resizer i.foo-horizontal, .foo-resizer i.foo-vertical {background-image: url(../img/sprite.png);background-size: 41px 32px }}@media screen and (-webkit-min-device-pixel-ratio:2), screen and (min--moz-device-pixel-ratio:2), screen and (-o-min-device-pixel-ratio:200/100), screen and (min-device-pixel-ratio:2), screen and (min-resolution:2dppx) {.foo-close, .foo-grab-bg, .foo-grab-bg-h, .foo-resizer i.foo-horizontal, .foo-resizer i.foo-vertical {background-image: url(../img/sprite@2x.png);background-size: 41px 32px }}*, :after, :before {box-sizing: border-box }body, html {height: 100% }body {background-color: #2b2d2d;color: #fff;font: 20px/1.2 "Share Tech Mono", monospace;-webkit-font-smoothing: antialiased }.foo-contact, .foo-content {height: 100%;position: relative }.foo-content:after, .foo-content:before {content: ' ';display: table }.foo-content:after {clear: both }.foo-contact {height: 10% }.foo-contact:after, .foo-contact:before {content: ' ';display: table }.foo-contact:after {clear: both }@media only screen and (min-width:1024px) {.foo-logo {border-right: 1px solid #35bdb8;float: left;height: 100%;position: relative;text-align: center;width: 140px }.foo-logo img {margin-top: 25%;width: 55% }}@media only screen and (max-width:1023px) {.foo-logo {float: top;border-bottom: 1px solid #35bdb8;position: relative;text-align: left;}.foo-logo img {margin-left: 3%;margin-top: 3%;margin-bottom: 3%;height: 3%;width: 7%;}}.foo-footer {position: absolute;bottom: 0;color: #999;left: 0;right: 0;height: 50px;z-index: 3;padding: 17px 0 15px;background-color: #3d3d3d;font-size: 16px }.foo-footer ul {margin: 0;padding: 0 0 0 16px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis }.foo-footer li {margin-right: 16px }.foo-footer li:last-child, .foo-shortcuts__legend li:last-child {margin-right: 0 }.foo-btn, .foo-footer a {color: #d7d7d7;text-decoration: none }.foo-footer a:hover {color: #35bdb8 }.foo-console.foo-terminal .foo-animation {overflow: hidden }.foo-console.foo-terminal .foo-animation__frame {font-size: 12px !important;line-height: 14px !important;width: 999em;white-space: pre;display: none }.foo-console.foo-terminal .foo-animation__frame--visible {display: block }.foo-btn {background-color: #ef67a5;color: #111;padding: 0 .1em;border: none;outline: none;font-family: inherit;font-size: inherit;cursor: pointer }.foo-interface {z-index: 1;overflow: hidden;background-color: #111;transition: background-color .15s ease;position: absolute;bottom: 50px;right: 0 }@media only screen and (max-width:1023px) {.foo-interface {top: 140px;left: 0 }}@media only screen and (min-width:1024px) {.foo-interface {top: 0;left: 140px }}.foo-interface.foo-editor--opened {background-color: #2b2d2d }.foo-interface.foo-is-resizing {cursor: col-resize }.foo-interface .foo-console {border: 2px solid transparent }.foo-interface .foo-console:focus {border-color: #f4b400 }.foo-interface .foo-editor .foo-editor__head {border: 2px solid transparent;border-bottom: 1px solid #35bdb8 }.foo-interface .foo-editor .foo-editor__foot {border: 2px solid transparent;border-bottom: 2px solid transparent;border-top: 1px solid #35bdb8 }.foo-interface .foo-editor .foo-editor__content {border-left: 2px solid transparent;border-right: 2px solid transparent }.foo-interface .foo-editor:focus .foo-editor__content, .foo-interface .foo-editor:focus .foo-editor__head {border-left-color: #f4b400;border-right-color: #f4b400 }.foo-interface .foo-editor:focus .foo-editor__head {border-top-color: #f4b400 }.foo-interface .foo-editor:focus .foo-editor__foot {border-left-color: #f4b400;border-right-color: #f4b400;border-bottom-color: #f4b400;border-top: 1px solid #35bdb8 }.foo-console {width: 100%;height: 100%;overflow-y: auto;padding-right: 32px;z-index: 2 }.foo-console::-webkit-scrollbar-track {background-color: #262828 }.foo-console::-webkit-scrollbar {width: 10px;background-color: #5b5b5b;padding: 3px }.foo-console::-webkit-scrollbar-thumb {background-color: #5b5b5b }@media only screen and (max-width:1023px) {.foo-console {padding-right: 10px;padding-bottom: 32px;bottom: 0 }}.foo-editor--opened .foo-console {width: 49% }@media only screen and (max-width:1023px) {.foo-editor--opened .foo-console {width: 100% !important;height: 49% }}@media only screen and (min-width:1024px) {.foo-editor--opened .foo-console {height: 100% !important }}.foo-console, .foo-console .foo-cmd {background-color: #2b2d2d;transition: background-color .15s ease }.foo-console.foo-active, .foo-console.foo-active .foo-cmd {background-color: #111 }.foo-question__options li {padding-left: 36px;position: relative }.foo-question__options li:before {content: "\2B21";position: absolute;left: 6px;top: -1px }.foo-question__options li.foo-option--selected:before {content: "\2B22";color: #00e575 }.foo-question__options li.foo-option--selected:after {content: "\276F";position: absolute;left: -5px;top: 0 }.foo-console, .foo-console .foo-cmd {color: #fff }.foo-console, .foo-console .foo-cmd, .foo-console .foo-cmd .foo-prompt, .foo-console.foo-terminal .foo-terminal-output div div {font-size: 16px;line-height: 1.4 }.foo-console.foo-terminal .foo-terminal-output div div {margin-bottom: 8px }.foo-console .foo-terminal-output .foo-output--prompt, .foo-console .foo-terminal-output .foo-preformatted {white-space: pre-wrap }.foo-console .foo-terminal-output .foo-output--column:nth-child(3n+1) {padding-left: 0 }.foo-console .foo-terminal-output .foo-terminal-list {display: table-row;margin: 20px 0 }.foo-console .foo-terminal-output .foo-list--padded {display: table-cell }.foo-console .foo-terminal-output .foo-list--padded:not(.foo-preformatted) {width: 12ex }.foo-console .foo-terminal-output .foo-list--definition {display: table-cell;position: relative;text-transform: lowercase }.foo-console .foo-terminal-output .foo-list--definition:before {content: '- ';position: absolute;left: -2ex }.foo-output--prompt {word-break: break-all }.foo-console .foo-prompt, .foo-terminal-output .foo-output--prompt span {color: #f48020 }.foo-console .foo-prompt.foo-is-disabled {pointer-events: none;display: none }.foo-console .foo-cmd .foo-cursor {background-color: #f48020;color: #fff }.foo-term-pink {color: #ef67a5 }.foo-console .foo-terminal-output .foo-list--folder, .foo-term-blue {color: #35bdb8 }.foo-term-green {color: #00e575 }.foo-term-orange {color: #f48020 }.foo-term-red {color: #ec1b52 }.foo-term-yellow {color: #f4b400 }.foo-console .foo-prompt+span, .foo-term-white {color: #fff }.foo-term-grey {color: #656565 }.foo-term-story {border-left: 8px solid #ef67a5;color: #35bdb8;padding: 5px 10px;margin: 12px 0 }.foo-editor {height: 100%;opacity: 0;overflow: hidden;padding: 0;position: relative;-webkit-transform: translate3d(100%, 0, 0);transform: translate3d(100%, 0, 0);transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;transition: transform .2s ease-in-out, opacity .2s ease-in-out;width: 49%;z-index: 4 }@media only screen and (max-width:1023px) {.foo-editor {height: 49%;width: 100% !important;-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0) }}@media only screen and (min-width:1024px) {.foo-editor {height: 100% !important }}.foo-editor.foo-editor--opened {opacity: 1;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0) }.foo-editor.foo-editor--dirty .foo-editor__filename:after {content: '*' }.foo-editor.foo-editor--dirty .foo-editor__save:not(.foo-editor__save--disabled) {cursor: pointer;background-color: #ef67a5;color: #2b2d2d }.foo-editor.foo-active .foo-editor__resizer {background-color: #2b2d2d }.foo-editor.foo-active .foo-editor__resizer:hover {background-color: #373a3a }.foo-ace_editor {font-family: "Share Tech Mono", monospace !important;line-height: 1.4 !important;font-size: 16px !important }.foo-ace_scrollbar::-webkit-scrollbar-track {background-color: #262828 }.foo-ace_scrollbar::-webkit-scrollbar {width: 10px;background-color: #5b5b5b;padding: 3px }.foo-ace_scrollbar::-webkit-scrollbar-thumb {background-color: #5b5b5b }.foo-editor__content {position: absolute !important;top: 34px;bottom: 38px;left: 0;right: 0 }.foo-editor__content.foo-ace-monokai, .foo-editor__content.foo-ace-monokai .foo-ace_gutter, .foo-editor__content.foo-ace-monokai .foo-ace_gutter-active-line {background-color: #2b2d2d;transition: background-color .15s ease }.foo-editor__content.foo-ace_editor.foo-ace-monokai .foo-ace_marker-layer .foo-ace_selection {background: #444 }.foo-editor__content.foo-active, .foo-editor__content.foo-active .foo-ace-content {background-color: #111 }.foo-editor__content.foo-active .foo-ace-content .foo-ace_gutter, .foo-editor__content.foo-active .foo-ace_gutter {background-color: #000 !important }.foo-editor__content.foo-ace-monokai.foo-active .foo-ace_gutter-active-line {background-color: #272727 }.foo-editor__content.foo-ace-monokai .foo-ace_comment {color: #86816b }.foo-editor.foo-editor-prompter--active .foo-editor__content {pointer-events: none !important }.foo-editor.foo-editor-prompter--active .foo-editor__content .foo-ace_cursor {display: none }.foo-editor__head {height: 34px;top: 0;border-bottom: 1px solid #35bdb8 }.foo-editor__foot, .foo-editor__head {position: absolute;width: 100%;background-color: #666;padding: 8px 10px }.foo-editor__head__meta-data {overflow: hidden;white-space: nowrap;text-overflow: ellipsis }.foo-editor__close {float: right;cursor: pointer;border: none;outline: none;background-color: transparent;margin: 0 }.foo-editor__save {cursor: default;background-color: transparent;color: #f0f0f0;transition: background-color .2s ease-in-out, color .2s ease-in-out }.foo-editor__save[disabled] {cursor: not-allowed }.foo-editor__foot {top: auto;bottom: 0;border-bottom: none;border-top: 1px solid #35bdb8;z-index: 10;height: 38px;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);transition: -webkit-transform .2s ease-out, opacity .2s ease-out;transition: transform .2s ease-out, opacity .2s ease-out }.foo-editor.foo-editor-prompter--active .foo-editor__foot {opacity: 0;-webkit-transform: translate3d(0, 40px, 0);transform: translate3d(0, 40px, 0) }.foo-error {position: absolute;top: 40%;left: 20%;width: 60%;height: 40%;text-align: center }.foo-error__logo {width: 130px;height: 120px }.foo-error__message {margin-top: 60px;line-height: 1.6 }.foo-error__message a {color: #fff;background-color: #ec1b52;text-decoration: none }.foo-countdown-timer__holder {position: absolute;bottom: 50px;left: 0;z-index: 20 }.foo-countdown-timer .foo-countdown-timer__time {background-color: #666;transition: background-color .15s ease }.foo-countdown-timer__text {background-color: #666 }.foo-countdown-timer--low .foo-countdown-timer__text, .foo-countdown-timer--low .foo-countdown-timer__time {background-color: #ec1b52 }.foo-countdown-timer--low {-webkit-animation: flash 1s .75s 2 normal both;animation: flash 1s .75s 2 normal both }.foo-countdown-timer__time {padding: 9px 8px }.foo-countdown-timer {display: none;width: 139px;text-align: center;position: relative;border-top: 1px solid #2b2d2d;cursor: default }.foo-countdown-timer:first-child {border-top: 0 }.foo-countdown-timer__text {position: absolute;bottom: 0;white-space: nowrap;padding: 9px 10px;z-index: -1;-webkit-transform: translate3d(-100%, 0, 0);transform: translate3d(-100%, 0, 0);transition: -webkit-transform .2s ease-out;transition: transform .2s ease-out }.foo-ie9 .foo-countdown-timer__text {left: -300px }.foo-countdown-timer__time, .foo-prompter {width: 100%;display: block;position: relative;z-index: 2 }.foo-countdown-timer__time:hover+.foo-countdown-timer__text {-webkit-transform: translate3d(130px, 0, 0);transform: translate3d(130px, 0, 0) }.foo-ie9 .foo-countdown-timer__time:hover+.foo-countdown-timer__text {left: 139px }.foo-prompter {position: absolute;bottom: 0;opacity: 1;z-index: 20;padding: 20px;border-top: 1px solid #35bdb8;background-color: #666;color: #fff;transition: all .3s ease-out }.foo-prompter.foo-is-hidden {bottom: -30px;opacity: 0;z-index: -1 }.foo-prompter__text input {font-family: "Share Tech Mono", monospace;font-size: 16px;line-height: 1.2;-webkit-font-smoothing: antialiased;border: none;color: inherit;margin: 0;padding: 0;background-color: transparent;outline-style: none;box-shadow: none }.foo-resizer {display: none;position: relative;height: 100%;width: 2%;background-color: #111;transition: background-color .15s ease;cursor: col-resize;z-index: 10 }.foo-editor--opened .foo-resizer {display: inline-block }.foo-editor--is-active .foo-resizer {background-color: #2b2d2d }.foo-resizer:hover {background-color: #1e1e1e }.foo-resizer i {position: absolute;top: 50%;left: 50% }.foo-resizer i.foo-vertical {margin: -16px 0 0 -5px;cursor: col-resize }.foo-resizer i.foo-horizontal {margin: -5px 0 0 -16px;cursor: row-resize;display: none }@media only screen and (max-width:1023px) {.foo-resizer {width: 100%;height: 2%;cursor: row-resize }.foo-resizer i.foo-vertical {display: none }.foo-editor--opened .foo-resizer, .foo-resizer i.foo-horizontal {display: block }}.foo-shortcuts {position: absolute;bottom: 9px;right: 10px;z-index: 12;font-size: 14px;color: #f0f0f0 }.foo-shortcuts__legend li {display: inline-block;margin-right: 10px }.foo-shortcut.foo-shortcut--control-command:before, .foo-shortcut.foo-shortcut--control:before {content: '^' }.foo-shortcuts--mac .foo-shortcut--control-command:before {content: '\2318' }.foo-support {position: absolute;top: 0;left: 20%;width: 60%;height: 40%;text-align: center }.foo-support__message {margin-top: 60px;line-height: 1.6 }.foo-support__message a {color: #fff;text-decoration: none }.foo-support__message a:hover {color: #35bdb8}.foo-cf:after, .foo-cf:before {content: ' ';display: table }.foo-cf:after {clear: both } \ No newline at end of file diff --git a/public/index.html b/public/index.html deleted file mode 100644 index aa0cf06..0000000 --- a/public/index.html +++ /dev/null @@ -1,91 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - Document - - - - - -
- - - - - - - - - \ No newline at end of file diff --git a/public/mdn-style.css b/public/mdn-style.css deleted file mode 100644 index 2d0a8be..0000000 --- a/public/mdn-style.css +++ /dev/null @@ -1,7149 +0,0 @@ -@import url('https://rsms.me/inter/inter.css'); -html { font-family: 'Inter', sans-serif; } -@supports (font-variation-settings: normal) { - html { font-family: 'Inter var', sans-serif; } -} - -*, -:after, -:before { - box-sizing: border-box -} - -blockquote, -body, -dd, -dl, -figure, -h1, -h2, -h3, -h4, -ol, -p, -ul { - margin: 0 -} - - /* ol, -ul { - list-style: none; - padding: 0 -} */ - -html { - scroll-behavior: smooth -} - -body { - text-rendering: optimizeSpeed; - font-family: Inter, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; - font-family: var(--font-body); - font-size: 100%; - font-size: var(--base-font-size); - line-height: 1.75; - line-height: var(--font-content-line-height) -} - -a:not([class]) { - -webkit-text-decoration-skip: ink; - text-decoration-skip-ink: auto -} - -a { - text-decoration: none -} - -img, -picture { - /* display: block; */ - max-width: 100% -} - -button, -input, -select, -textarea { - font: inherit -} - -@media(prefers-reduced-motion:reduce) { - html { - scroll-behavior: auto - } - - *, - :after, - :before { - -webkit-animation-duration: .01ms !important; - animation-duration: .01ms !important; - -webkit-animation-iteration-count: 1 !important; - animation-iteration-count: 1 !important; - scroll-behavior: auto !important; - transition-duration: .01ms !important - } -} - -.token.cdata, -.token.comment, -.token.doctype, -.token.prolog { - color: var(--code-token-comment) -} - -.token.punctuation { - color: var(--code-token-punctuation) -} - -.token.attr-name, -.token.builtin, -.token.class-name, -.token.function, -.token.inserted, -.token.property, -.token.selector { - color: var(--code-token-attribute-name) -} - -.token.atrule, -.token.attr-value { - color: var(--code-token-attribute-value) -} - -.token.keyword { - color: var(--code-token-tag) -} - -.token.boolean, -.token.char, -.token.constant, -.token.deleted, -.token.number, -.token.string, -.token.symbol, -.token.tag { - color: var(--code-token-attribute-value) -} - -.token.builtin, -.token.inserted, -.token.selector, -.token.template-string>.token.string { - color: var(--code-token-selector) -} - -.token.bold, -.token.important { - font-weight: 700 -} - -.token.italic { - font-style: italic -} - -.token.entity { - cursor: help -} - -.notecard { - --note-background: var(--background-information); - --note-theme: var(--icon-information); - background-color: var(--note-background); - border: 1px solid var(--border-secondary); - border-left: 4px solid var(--note-theme); - border-radius: .25rem; - border-radius: var(--elem-radius); - box-shadow: var(--shadow-01); - margin: 1rem 0; - padding: 1rem 1rem 1rem 3rem; - position: relative -} - -.notecard, -.notecard li, -.notecard p { - color: var(--text-secondary) -} - -.notecard p { - line-height: 2; - margin: 0 !important -} - -.notecard:before { - background-color: var(--note-theme); - content: ""; - display: block; - height: 1rem; - left: 1rem; - /* -webkit-mask-image: url(/static/media/note-info.0eafb6e7738509bce66e.svg); */ - /* mask-image: url(/static/media/note-info.0eafb6e7738509bce66e.svg); */ - -webkit-mask-position: center; - mask-position: center; - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: contain; - mask-size: contain; - position: absolute; - top: 1.5rem; - width: 1rem -} - -.notecard.inline { - font: var(--type-body-s); - margin: .5rem; - padding: .125rem .375rem .125rem 1.5rem -} - -.notecard.inline:before { - display: block; - height: .8rem; - left: .2rem; - top: .1875rem; - width: .8rem -} - -.notecard.warning { - --note-background: var(--background-warning); - --note-theme: var(--icon-warning) -} - -.notecard.warning:before { - -webkit-mask-image: url(/static/media/note-warning.d6e4c7b35b5ed187e936.svg); - mask-image: url(/static/media/note-warning.d6e4c7b35b5ed187e936.svg) -} - -.notecard.nonstandard { - --note-background: var(--background-warning); - --note-theme: var(--icon-warning) -} - -.notecard.nonstandard:before { - -webkit-mask-image: url(/static/media/nonstandard.d6e4c7b35b5ed187e936.svg); - mask-image: url(/static/media/nonstandard.d6e4c7b35b5ed187e936.svg) -} - -.notecard.error, -.notecard.negative { - --note-background: var(--background-critical); - --note-theme: var(--icon-critical) -} - -.notecard.error:before, -.notecard.negative:before { - -webkit-mask-image: url(/static/media/note-deprecated.0d2643f0c417b3670c49.svg); - mask-image: url(/static/media/note-deprecated.0d2643f0c417b3670c49.svg) -} - -.notecard.deprecated { - --note-background: var(--background-critical); - --note-theme: var(--icon-critical) -} - -.notecard.deprecated:before { - -webkit-mask-image: url(/static/media/deprecated.eda3b39bb2bd366d4b2b.svg); - mask-image: url(/static/media/deprecated.eda3b39bb2bd366d4b2b.svg) -} - -.notecard.experimental:before { - -webkit-mask-image: url(/static/media/experimental.2f9e05f53c6dbee7791c.svg); - mask-image: url(/static/media/experimental.2f9e05f53c6dbee7791c.svg) -} - -.notecard.success { - --note-background: var(--background-success); - --note-theme: var(--icon-success) -} - -.notecard.success:before { - -webkit-mask-image: url(/static/media/note-info.0eafb6e7738509bce66e.svg); - mask-image: url(/static/media/note-info.0eafb6e7738509bce66e.svg) -} - -.notecard ol, -.notecard ul { - padding-left: 2rem -} - -.notecard p, -.notecard ul { - padding-bottom: .5rem -} - -.notecard p:last-child, -.notecard ul:last-child { - padding-bottom: 0 -} - -.notecard:last-of-type { - margin-bottom: 2rem -} - -.notecard:first-of-type { - margin-top: 2rem -} - -.notecard>:first-child { - margin-top: 0 -} - -.notecard h1, -.notecard h2, -.notecard h3, -.notecard h4, -.notecard h5, -.notecard h6 { - color: var(--text-primary); - font: 1rem; - font: var(--type-base-font-size-rem); - margin-bottom: .5rem -} - -.main-content .notecard a:not(.button), -.main-content .notecard code { - color: var(--notecard-link-color) -} - -.main-content .notecard a:not(.button):hover, -.main-content .notecard code:hover { - text-decoration: none -} - -.pagination { - align-items: center; - display: flex; - gap: 1rem; - justify-content: center; - padding: 1rem 0 -} - -.mdn-form, -.pagination-label { - font-size: .833rem; - font-size: var(--type-smaller-font-size) -} - -.mdn-form { - font-family: Inter, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; - font-family: var(--font-body); - font-weight: 600; - font-weight: var(--font-body-strong-weight) -} - -.mdn-form-item { - align-items: center; - display: flex; - flex-wrap: wrap; - gap: .5rem; - padding-top: 1rem -} - -.mdn-form-item:first-child { - padding-top: 0 -} - -.mdn-form-item.is-button-row { - display: flex; - justify-content: flex-end -} - -.mdn-form-item.is-button-row .button { - width: auto -} - -.mdn-form-item [type=text] { - background: var(--background-primary); - border: 1px solid var(--border-primary); - color: var(--text-primary); - flex: 1 1 100%; - font-size: .833rem; - font-size: var(--type-smaller-font-size); - min-width: 0; - padding: .5rem -} - -.mdn-form-item [type=text]:focus { - border: 1px solid var(--button-secondary-border-focus); - box-shadow: 0 0 0 3px var(--accent-primary-engage); - box-shadow: var(--focus-effect); - outline: 0 none -} - -.mdn-form-item label { - width: 100% -} - -:root { - --font-fallback: BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; - --font-body: Inter, var(--font-fallback); - --font-heading: Inter, var(--font-fallback); - --font-code: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace; - --base-font-size: 100%; - --base-line-height: 1.2; - --intermediate-line-height: 1.5; - --heading-line-height: var(--base-line-height); - --heading-letter-spacing: -0.031rem; - --font-content-line-height: 1.75; - --font-body-strong-weight: 600; - --type-heading-h1-font-size: 2.488rem; - --type-heading-h2-font-size: 2.074rem; - --type-heading-h3-font-size: 1.728rem; - --type-heading-h4-font-size: 1.44rem; - --type-heading-h5-font-size: 1.2rem; - --type-base-font-size-rem: 1rem; - --type-smaller-font-size: 0.833rem; - --type-tiny-font-size: 0.694rem; - --type-heading-h1-font-size-mobile: 1.802rem; - --type-heading-h2-font-size-mobile: 1.602rem; - --type-heading-h3-font-size-mobile: 1.424rem; - --type-heading-h4-font-size-mobile: 1.266rem; - --type-emphasis-m: var(--font-body-strong-weight) var(--type-smaller-font-size) /1.23 var(--font-body); - --type-label-s: 600 var(--type-tiny-font-size) /1.2 var(--font-heading); - --type-heading-h1: 600 var(--type-heading-h1-font-size-mobile) /var(--heading-line-height) var(--font-heading); - --type-heading-h2: 500 var(--type-heading-h2-font-size-mobile) /var(--heading-line-height) var(--font-heading); - --type-heading-h3: 300 var(--type-heading-h3-font-size-mobile) /var(--heading-line-height) var(--font-heading); - --type-heading-h4: 400 var(--type-heading-h4-font-size-mobile) /var(--heading-line-height) var(--font-heading); - --type-heading-h5: 400 var(--type-heading-h5-font-size) /var(--heading-line-height) var(--font-heading); - --type-heading-h6: 400 var(--type-base-font-size-rem) /var(--heading-line-height) var(--font-heading); - --type-article-p: 400 var(--type-base-font-size-rem) /var(--font-content-line-height) var(--font-body); - --max-width: 1440px; - --gutter: 1rem; - --top-navigation-height: 4rem; - --top-navigation-offset: -4rem; - --z-index-back: -1; - --z-index-top: 9999; - --z-index-a11y: 10000; - --z-index-mid: 500; - --z-index-nav-menu: 200; - --z-index-search-results: 101; - --z-index-low: 100; - --z-index-search-results-home: 99; - --elem-radius: 0.25rem; - --focus-effect: 0 0 0 3px var(--accent-primary-engage); - --form-elem-height: 2rem; - --sticky-header-height: 0; - --top-nav-height: 4rem; - --main-document-header-height: 6rem; - --icon-size: 1rem -} - -@media screen and (min-width:769px) { - :root { - --type-heading-h1: 600 var(--type-heading-h1-font-size) /var(--heading-line-height) var(--font-heading); - --type-heading-h2: 500 var(--type-heading-h2-font-size) /var(--heading-line-height) var(--font-heading); - --type-heading-h3: 300 var(--type-heading-h3-font-size) /var(--heading-line-height) var(--font-heading); - --type-heading-h4: 400 var(--type-heading-h4-font-size) /var(--heading-line-height) var(--font-heading) - } -} - -:target { - scroll-margin-top: 0; - scroll-margin-top: var(--sticky-header-height) -} - -body { - accent-color: var(--accent-primary); - background-color: var(--background-primary); - color: var(--text-primary); - scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg) -} - -body.full-screen-overlay { - overflow: hidden -} - -:focus-visible { - outline-color: var(--accent-primary); - outline-offset: 1px; - outline-style: auto -} - -main { - min-height: 80vh -} - -.about-container a:link, -.about-container a:visited, -.main-page-content a:link, -.main-page-content a:visited { - text-decoration: underline -} - -.about-container a:focus, -.about-container a:hover, -.main-page-content a:focus, -.main-page-content a:hover { - text-decoration: none -} - -.visually-hidden { - clip: rect(1px, 1px, 1px, 1px) !important; - border: 0 !important; - -webkit-clip-path: inset(50%) !important; - clip-path: inset(50%) !important; - height: 1px !important; - margin: -1px !important; - overflow: hidden !important; - padding: 0 !important; - position: absolute !important; - white-space: nowrap !important; - width: 1px !important -} - -.hidden { - display: none -} - -pre { - word-wrap: break-word; - white-space: pre-wrap; - white-space: -moz-pre-wrap; - white-space: -pre-wrap; - white-space: -o-pre-wrap -} - -a { - color: var(--text-link) -} - -a.external:after { - background-color: var(--icon-primary); - content: ""; - display: inline-flex; - height: 10px; - margin-left: 4px; - -webkit-mask-image: url(/static/media/external.ad7e40a95bc765963433.svg); - mask-image: url(/static/media/external.ad7e40a95bc765963433.svg); - -webkit-mask-size: cover; - mask-size: cover; - width: 10px -} - -.expand-this-link:after { - bottom: 0; - content: ""; - left: 0; - position: absolute; - right: 0; - top: 0 -} - -[type=search]::-ms-clear { - display: none; - height: 0; - width: 0 -} - -[type=search]::-ms-reveal { - display: none; - height: 0; - width: 0 -} - -[type=search]::-webkit-search-cancel-button, -[type=search]::-webkit-search-decoration, -[type=search]::-webkit-search-results-button, -[type=search]::-webkit-search-results-decoration { - display: none -} - -u { - -webkit-text-decoration-color: var(--text-link); - text-decoration-color: var(--text-link); - text-decoration-thickness: .15rem; - text-underline-offset: .1em -} - -.plus, -.plus .dark { - --background-toc-active: var(--plus-accent-background-color); - --text-link: var(--plus-accent-color); - --category-color: var(--plus-accent-color); - --category-color-background: var(--plus-accent-background-color); - --code-color: var(--plus-code-color); - --mark-color: var(--plus-mark-color) -} - -.category-html { - --background-toc-active: var(--html-accent-background-color); - --category-color: var(--html-accent-color); - --category-color-background: var(--html-accent-background-color); - --mark-color: var(--html-mark-color) -} - -.category-css { - --background-toc-active: var(--css-accent-background-color); - --category-color: var(--css-accent-color); - --category-color-background: var(--css-accent-background-color); - --mark-color: var(--css-mark-color) -} - -.category-javascript { - --background-toc-active: var(--js-accent-background-color); - --category-color: var(--js-accent-color); - --category-color-background: var(--js-accent-background-color); - --mark-color: var(--js-mark-color) -} - -.category-http { - --background-toc-active: var(--http-accent-background-color); - --category-color: var(--http-accent-color); - --category-color-background: var(--http-accent-background-color); - --mark-color: var(--http-mark-color) -} - -.category-api { - --background-toc-active: var(--apis-accent-background-color); - --category-color: var(--apis-accent-color); - --category-color-background: var(--apis-accent-background-color); - --mark-color: var(--apis-mark-color) -} - -.category-learn { - --background-toc-active: var(--learn-accent-background-color); - --category-color: var(--learn-accent-color); - --category-color-background: var(--learn-accent-background-color); - --mark-color: var(--api-mark-color) -} - - .mify { - margin-left: .5rem -} - -.mify:after { - content: " "; - text-decoration: underline; - -webkit-text-decoration-color: var(--text-link); - text-decoration-color: var(--text-link); - text-decoration-thickness: .1em; - text-underline-offset: .1em -} - -.mify:before { - background-color: var(--text-link); - content: ""; - display: inline-block; - height: 1.2em; - /* -webkit-mask: url(/static/media/m-logo.e19e04547be91a35c8ea.svg) no-repeat 50% 50%; - mask: url(/static/media/m-logo.e19e04547be91a35c8ea.svg) no-repeat 50% 50%; */ - -webkit-mask-size: cover; - mask-size: cover; - -webkit-transform: translate(-.2em, .2em); - transform: translate(-.2em, .2em); - width: 1.2em -} - -._ify:after { - content: " "; - text-decoration: underline; - -webkit-text-decoration-color: var(--text-link); - text-decoration-color: var(--text-link); - text-decoration-thickness: .1em; - text-underline-offset: .1em -} - -@media(forced-colors:active) { - .icon { - background-color: CanvasText !important - } -} - -.homepage { - align-items: center; - display: flex; - flex-direction: column; - gap: 2rem; - overflow-x: clip; - overflow-y: visible; - position: relative; - width: 100% -} - -.homepage-hero { - color: var(--text-primary); - display: grid; - grid-template-rows: fit-content(24rem); - width: 100% -} - -.homepage-hero section { - display: flex; - flex-direction: column; - gap: 2rem; - grid-column: 1; - grid-row: 1; - height: 100%; - justify-content: center; - margin: 0 auto; - max-width: 52rem; - padding: 0 1rem; - width: 100% -} - -.homepage-hero section h1 { - font-size: 2.2rem; - font-weight: 200; - letter-spacing: -.5px; - line-height: 120%; - margin: 0 -} - -@media screen and (min-width:426px) { - .homepage-hero section h1 { - font-size: 2.5rem - } -} - -@media screen and (min-width:769px) { - .homepage-hero section h1 { - font-size: 3rem - } -} - -.homepage-hero section h1:after { - content: " "; - text-decoration: underline; - -webkit-text-decoration-color: var(--text-link); - text-decoration-color: var(--text-link); - text-decoration-thickness: .15rem; - text-underline-offset: .1rem -} - -.homepage-hero section p { - font-weight: 300 -} - -.homepage-hero .homepage-hero-bg { - --mandala-primary: var(--border-primary); - background-color: rgba(1, 1, 1, .9); - grid-column: 1; - grid-row: 1; - overflow: hidden; - top: 0; - width: 100%; - z-index: -1 -} - -.homepage-hero .homepage-hero-bg .mandala-translate { - -webkit-transform: translate(10rem, -8rem) scale(1.2); - transform: translate(10rem, -8rem) scale(1.2) -} - -@media screen and (min-width:426px) { - .homepage-hero .homepage-hero-bg .mandala-translate { - -webkit-transform: translate(12rem, -8rem); - transform: translate(12rem, -8rem) - } -} - -.homepage-hero .homepage-hero-search { - align-self: center; - display: flex; - margin-bottom: 1rem; - max-height: 4rem; - max-width: 40rem; - width: 100% -} - -.homepage-hero .homepage-hero-search .search-input-field { - background-color: rgba(1, 1, 1, .5); - border-radius: 10rem; - padding: 2rem -} - -.homepage-hero .homepage-hero-search .search-input-field:focus { - border-color: var(--field-focus-border); - box-shadow: var(--focus-01) -} - -.homepage-hero .homepage-hero-search .search-input-field::-webkit-input-placeholder { - font-size: 1.5rem -} - -.homepage-hero .homepage-hero-search .search-input-field::placeholder { - font-size: 1.5rem -} - -.homepage-hero .homepage-hero-search .search-widget { - display: flex; - gap: 0 -} - -.homepage-hero .homepage-hero-search .search-results { - box-shadow: var(--shadow-02); - margin: 0 1.5rem; - text-align: left; - top: 4.2rem; - width: calc(100% - 3rem); - z-index: var(--z-index-search-results-home) -} - -.homepage-hero .homepage-hero-search .search-results .result-item a { - padding: .5rem 1.5rem -} - -.homepage-hero .homepage-hero-search .search-results .result-item mark { - background: none; - color: var(--text-primary) -} - -.homepage-hero .homepage-hero-search .search-results .result-item span { - color: var(--text-secondary); - font-weight: 400 -} - -.homepage-hero .homepage-hero-search .search-results .result-item small { - color: var(--text-secondary) -} - -.homepage-hero .search-button.button { - height: 100%; - left: auto; - position: absolute; - right: 1.5rem; - top: 0 -} - -.homepage-hero .search-button.button:hover { - background: none; - border-color: transparent -} - -.homepage-hero .search-button.button .button-wrap { - background: none -} - -.homepage-hero .search-button.button .button-wrap:hover { - background: none; - border: 1px solid transparent -} - -.homepage-hero .search-button.button .button-wrap:hover .icon { - background-color: var(--text-link) -} - -.homepage-hero .search-button.button .button-wrap .icon { - background-color: var(--icon-primary); - border: none -} - -.icon { - --size: var(--icon-size, 1rem); - background-color: var(--icon-primary); - display: inline-block; - flex-shrink: 0; - height: var(--size); - -webkit-mask-position: center; - mask-position: center; - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - vertical-align: middle; - width: var(--size) -} - -svg.icon { - background: transparent; - color: var(--icon-primary) -} - -.icon.icon-add-filled { - -webkit-mask-image: url(/static/media/add-filled.a8e6793efe0c45d06016.svg); - mask-image: url(/static/media/add-filled.a8e6793efe0c45d06016.svg) -} - -.icon.icon-add { - -webkit-mask-image: url(/static/media/add.9f0957aa3417844441a2.svg); - mask-image: url(/static/media/add.9f0957aa3417844441a2.svg) -} - -.icon.icon-altname { - -webkit-mask-image: url(/static/media/altname.fa41e3cb6859d720b231.svg); - mask-image: url(/static/media/altname.fa41e3cb6859d720b231.svg) -} - -.icon.icon-bell-filled { - -webkit-mask-image: url(/static/media/bell-filled.92b1b0fec0b6ed04f771.svg); - mask-image: url(/static/media/bell-filled.92b1b0fec0b6ed04f771.svg) -} - -.icon.icon-bell { - -webkit-mask-image: url(/static/media/bell.034a87122ec06307f900.svg); - mask-image: url(/static/media/bell.034a87122ec06307f900.svg) -} - -.icon.icon-bookmark-filled { - -webkit-mask-image: url(/static/media/bookmark-filled.22802275efddc0dd3f04.svg); - mask-image: url(/static/media/bookmark-filled.22802275efddc0dd3f04.svg) -} - -.icon.icon-bookmark { - -webkit-mask-image: url(/static/media/bookmark.e9ba9d27f97589ba62cc.svg); - mask-image: url(/static/media/bookmark.e9ba9d27f97589ba62cc.svg) -} - -.icon.icon-cancel { - -webkit-mask-image: url(/static/media/cancel.ff1ee2551e18f9c9c8d3.svg); - mask-image: url(/static/media/cancel.ff1ee2551e18f9c9c8d3.svg) -} - -.icon.icon-checkmark { - -webkit-mask-image: url(/static/media/checkmark.d05ce91f65dfc321cadd.svg); - mask-image: url(/static/media/checkmark.d05ce91f65dfc321cadd.svg) -} - -.icon.icon-chevron { - -webkit-mask-image: url(/static/media/chevron.05a124d379047e16d746.svg); - mask-image: url(/static/media/chevron.05a124d379047e16d746.svg) -} - -.icon.icon-chrome { - -webkit-mask-image: url(/static/media/chrome.4c57086589fd964c05f5.svg); - mask-image: url(/static/media/chrome.4c57086589fd964c05f5.svg) -} - -.icon.icon-critical { - -webkit-mask-image: url(/static/media/critical.046b659f661afa9ab11f.svg); - mask-image: url(/static/media/critical.046b659f661afa9ab11f.svg) -} - -.icon.icon-deno { - -webkit-mask-image: url(/static/media/deno.a791d0899729b3089500.svg); - mask-image: url(/static/media/deno.a791d0899729b3089500.svg) -} - -.icon.icon-deprecated { - -webkit-mask-image: url(/static/media/deprecated.eda3b39bb2bd366d4b2b.svg); - mask-image: url(/static/media/deprecated.eda3b39bb2bd366d4b2b.svg) -} - -.icon.icon-desktop { - -webkit-mask-image: url(/static/media/desktop.ae5e91df1e60ced79a5e.svg); - mask-image: url(/static/media/desktop.ae5e91df1e60ced79a5e.svg) -} - -.icon.icon-disabled { - -webkit-mask-image: url(/static/media/disabled.f52f4d023359dbf8a727.svg); - mask-image: url(/static/media/disabled.f52f4d023359dbf8a727.svg) -} - -.icon.icon-edge { - -webkit-mask-image: url(/static/media/edge.40018f6a959bc3e5c537.svg); - mask-image: url(/static/media/edge.40018f6a959bc3e5c537.svg) -} - -.icon.icon-edit { - -webkit-mask-image: url(/static/media/edit.2e4f3bd111b39f9ebbc2.svg); - mask-image: url(/static/media/edit.2e4f3bd111b39f9ebbc2.svg) -} - -.icon.icon-ellipses { - -webkit-mask-image: url(/static/media/ellipses.c6dd1c04b7ef3cba126a.svg); - mask-image: url(/static/media/ellipses.c6dd1c04b7ef3cba126a.svg) -} - -.icon.icon-experimental { - -webkit-mask-image: url(/static/media/experimental.2f9e05f53c6dbee7791c.svg); - mask-image: url(/static/media/experimental.2f9e05f53c6dbee7791c.svg) -} - -.icon.icon-external { - -webkit-mask-image: url(/static/media/external.ad7e40a95bc765963433.svg); - mask-image: url(/static/media/external.ad7e40a95bc765963433.svg) -} - -.icon.icon-eye-filled { - -webkit-mask-image: url(/static/media/eye-filled.dd0405b418fcfecf0f77.svg); - mask-image: url(/static/media/eye-filled.dd0405b418fcfecf0f77.svg) -} - -.icon.icon-eye { - -webkit-mask-image: url(/static/media/eye.b451ad8ced0662500e82.svg); - mask-image: url(/static/media/eye.b451ad8ced0662500e82.svg) -} - -.icon.icon-footnote { - -webkit-mask-image: url(/static/media/footnote.adb3f56121e4f9c95ba7.svg); - mask-image: url(/static/media/footnote.adb3f56121e4f9c95ba7.svg) -} - -.icon.icon-github-mark-small { - -webkit-mask-image: url(/static/media/github-mark-small.348586b8904b950b8ea8.svg); - mask-image: url(/static/media/github-mark-small.348586b8904b950b8ea8.svg) -} - -.icon.icon-ie { - -webkit-mask-image: url(/static/media/ie.cf17782c766db346d9b1.svg); - mask-image: url(/static/media/ie.cf17782c766db346d9b1.svg) -} - -.icon.icon-information { - -webkit-mask-image: url(/static/media/information.81a9c7bfba75e9c4e993.svg); - mask-image: url(/static/media/information.81a9c7bfba75e9c4e993.svg) -} - -.icon.icon-language { - -webkit-mask-image: url(/static/media/language.e4289910782fa8d1c882.svg); - mask-image: url(/static/media/language.e4289910782fa8d1c882.svg) -} - -.icon.icon-menu-filled { - -webkit-mask-image: url(/static/media/menu-filled.48a621119c4448c94d79.svg); - mask-image: url(/static/media/menu-filled.48a621119c4448c94d79.svg) -} - -.icon.icon-menu { - -webkit-mask-image: url(/static/media/menu.1ed93cf1ba8c04627c11.svg); - mask-image: url(/static/media/menu.1ed93cf1ba8c04627c11.svg) -} - -.icon.icon-mobile { - -webkit-mask-image: url(/static/media/mobile.7f0bdae2a317caf911ee.svg); - mask-image: url(/static/media/mobile.7f0bdae2a317caf911ee.svg) -} - -.icon.icon-more { - -webkit-mask-image: url(/static/media/more.ce2ad00a1fca149a22ce.svg); - mask-image: url(/static/media/more.ce2ad00a1fca149a22ce.svg) -} - -.icon.icon-theme-dark { - -webkit-mask-image: url(/static/media/theme-dark.2204a73b9b7fbc5e0219.svg); - mask-image: url(/static/media/theme-dark.2204a73b9b7fbc5e0219.svg) -} - -.icon.icon-next { - -webkit-mask-image: url(/static/media/next.1ecddf89481891f59480.svg); - mask-image: url(/static/media/next.1ecddf89481891f59480.svg) -} - -.icon.icon-no { - -webkit-mask-image: url(/static/media/no.d2e0aa3e7440f80dccd6.svg); - mask-image: url(/static/media/no.d2e0aa3e7440f80dccd6.svg) -} - -.icon.icon-nodejs { - -webkit-mask-image: url(/static/media/nodejs.bb93afa7923c2473034b.svg); - mask-image: url(/static/media/nodejs.bb93afa7923c2473034b.svg) -} - -.icon.icon-nonstandard { - -webkit-mask-image: url(/static/media/nonstandard.d6e4c7b35b5ed187e936.svg); - mask-image: url(/static/media/nonstandard.d6e4c7b35b5ed187e936.svg) -} - -.icon.icon-note-info { - -webkit-mask-image: url(/static/media/note-info.0eafb6e7738509bce66e.svg); - mask-image: url(/static/media/note-info.0eafb6e7738509bce66e.svg) -} - -.icon.icon-note-warning { - -webkit-mask-image: url(/static/media/note-warning.d6e4c7b35b5ed187e936.svg); - mask-image: url(/static/media/note-warning.d6e4c7b35b5ed187e936.svg) -} - -.icon.icon-note-deprecated { - -webkit-mask-image: url(/static/media/note-deprecated.0d2643f0c417b3670c49.svg); - mask-image: url(/static/media/note-deprecated.0d2643f0c417b3670c49.svg) -} - -.icon.icon-opera { - -webkit-mask-image: url(/static/media/opera.a0ab0c5004c00e618a00.svg); - mask-image: url(/static/media/opera.a0ab0c5004c00e618a00.svg) -} - -.icon.icon-padlock { - -webkit-mask-image: url(/static/media/padlock.6210113487ca12ff25f3.svg); - mask-image: url(/static/media/padlock.6210113487ca12ff25f3.svg) -} - -.icon.icon-partial { - -webkit-mask-image: url(/static/media/partial.2d8806d709221f07c72c.svg); - mask-image: url(/static/media/partial.2d8806d709221f07c72c.svg) -} - -.icon.icon-prefix { - -webkit-mask-image: url(/static/media/prefix.db94a69f5867547725e5.svg); - mask-image: url(/static/media/prefix.db94a69f5867547725e5.svg) -} - -.icon.icon-preview { - -webkit-mask-image: url(/static/media/preview.77ee12031f5f5ecb2962.svg); - mask-image: url(/static/media/preview.77ee12031f5f5ecb2962.svg) -} - -.icon.icon-previous { - -webkit-mask-image: url(/static/media/previous.585a0363cab37d75a90d.svg); - mask-image: url(/static/media/previous.585a0363cab37d75a90d.svg) -} - -.icon.icon-quote { - -webkit-mask-image: url(/static/media/quote.d88c218cc7eaf9168178.svg); - mask-image: url(/static/media/quote.d88c218cc7eaf9168178.svg) -} - -.icon.icon-safari { - -webkit-mask-image: url(/static/media/safari.3679eb31121b46323304.svg); - mask-image: url(/static/media/safari.3679eb31121b46323304.svg) -} - -.icon.icon-samsunginternet { - -webkit-mask-image: url(/static/media/samsunginternet.55e41ddfc05627ecc331.svg); - mask-image: url(/static/media/samsunginternet.55e41ddfc05627ecc331.svg) -} - -.icon.icon-search { - -webkit-mask-image: url(/static/media/search.cebfd63a204ba9fefa74.svg); - mask-image: url(/static/media/search.cebfd63a204ba9fefa74.svg) -} - -.icon.icon-server { - -webkit-mask-image: url(/static/media/server.fdad5f2f9f48879ac6c2.svg); - mask-image: url(/static/media/server.fdad5f2f9f48879ac6c2.svg) -} - -.icon.icon-sidebar { - -webkit-mask-image: url(/static/media/sidebar.18421c220ec0a5e690f1.svg); - mask-image: url(/static/media/sidebar.18421c220ec0a5e690f1.svg) -} - -.icon.icon-simple-firefox { - -webkit-mask-image: url(/static/media/simple-firefox.9b9181d8c30c3de88edf.svg); - mask-image: url(/static/media/simple-firefox.9b9181d8c30c3de88edf.svg) -} - -.icon.icon-small-arrow { - -webkit-mask-image: url(/static/media/small-arrow.a22801b3d18b7d1ea795.svg); - mask-image: url(/static/media/small-arrow.a22801b3d18b7d1ea795.svg) -} - -.icon.icon-theme-light { - -webkit-mask-image: url(/static/media/theme-light.af1aa3887c0deadaaf2e.svg); - mask-image: url(/static/media/theme-light.af1aa3887c0deadaaf2e.svg) -} - -.icon.icon-star-filled { - -webkit-mask-image: url(/static/media/star-filled.358ee4566f4a4c7d438d.svg); - mask-image: url(/static/media/star-filled.358ee4566f4a4c7d438d.svg) -} - -.icon.icon-star { - -webkit-mask-image: url(/static/media/star.00aab2ac065852fd407a.svg); - mask-image: url(/static/media/star.00aab2ac065852fd407a.svg) -} - -.icon.icon-theme-os-default { - -webkit-mask-image: url(/static/media/theme-os-default.b14255eadab403fa2e8a.svg); - mask-image: url(/static/media/theme-os-default.b14255eadab403fa2e8a.svg) -} - -.icon.icon-thumbs-down { - -webkit-mask-image: url(/static/media/thumbs-down.7ca516d7f04791a3910c.svg); - mask-image: url(/static/media/thumbs-down.7ca516d7f04791a3910c.svg) -} - -.icon.icon-thumbs-up { - -webkit-mask-image: url(/static/media/thumbs-up.10a6075a46940d218431.svg); - mask-image: url(/static/media/thumbs-up.10a6075a46940d218431.svg) -} - -.icon.icon-trash { - -webkit-mask-image: url(/static/media/trash.edee2ea86f1b505315f7.svg); - mask-image: url(/static/media/trash.edee2ea86f1b505315f7.svg) -} - -.icon.icon-twitter { - -webkit-mask-image: url(/static/media/twitter.cc5b37feab537ddbf701.svg); - mask-image: url(/static/media/twitter.cc5b37feab537ddbf701.svg) -} - -.icon.icon-unknown { - -webkit-mask-image: url(/static/media/unknown.7fd13a7673ebf93f625c.svg); - mask-image: url(/static/media/unknown.7fd13a7673ebf93f625c.svg) -} - -.icon.icon-warning { - -webkit-mask-image: url(/static/media/warning.334964ef472eac4cfb78.svg); - mask-image: url(/static/media/warning.334964ef472eac4cfb78.svg) -} - -.icon.icon-webview { - -webkit-mask-image: url(/static/media/webview.7d9bf32041e0c57240b5.svg); - mask-image: url(/static/media/webview.7d9bf32041e0c57240b5.svg) -} - -.icon.icon-yes { - -webkit-mask-image: url(/static/media/yes.70caad81ca5e3d9f7576.svg); - mask-image: url(/static/media/yes.70caad81ca5e3d9f7576.svg) -} - -.icon.icon-yes-circle { - -webkit-mask-image: url(/static/media/yes-circle.1c4f7a083d20df35ca93.svg); - mask-image: url(/static/media/yes-circle.1c4f7a083d20df35ca93.svg) -} - -.button, -button { - -webkit-appearance: none; - appearance: none; - background: none; - border: none -} - -.button { - --button-bg: var(--button-primary-default); - --button-border-color: var(--button-primary-default); - --button-focus-effect: var(--focus-effect); - --button-height: var(--form-elem-height, 2rem); - --button-color: var(--background-primary); - --button-font: var(--type-emphasis-m); - --button-padding: 0.5rem; - --button-radius: var(--elem-radius, 0.25rem); - border-radius: var(--button-radius); - cursor: pointer; - display: inline-block; - padding: 0; - text-decoration: none -} - -.button-wrap { - align-items: center; - background-color: var(--button-bg); - border: 1px solid var(--button-border-color); - border-radius: var(--button-radius); - color: var(--button-color); - display: flex; - font: var(--button-font); - gap: .25rem; - height: var(--button-height); - justify-content: center; - padding-left: var(--button-padding); - padding-right: var(--button-padding); - position: relative -} - -.button .icon { - background-color: var(--button-color); - margin: 0 -1px -} - -.button.hover, -.button:hover { - --button-bg: var(--button-primary-hover); - --button-border-color: var(--button-bg) -} - -.button.active, -.button:active { - --button-bg: var(--button-primary-active) -} - -.button.focus, -.button:focus { - outline: none -} - -.button.focus .button-wrap, -.button:focus .button-wrap { - border: 1px solid var(--button-secondary-border-focus); - box-shadow: var(--button-focus-effect) -} - -.button.button.inactive, -.button.button[disabled] { - cursor: default; - opacity: .65 -} - -.button.button.inactive:hover, -.button.button[disabled]:hover { - --button-bg: inherit; - --button-border-color: transparent -} - -.button.small, -.button.small .button-wrap { - --button-height: 1.75rem; - --button-padding: 0.25rem -} - -.button.secondary { - --button-bg: var(--button-secondary-default); - --button-border-color: var(--border-primary); - --button-color: var(--text-secondary) -} - -.button.secondary:hover { - --button-bg: var(--button-secondary-hover) -} - -.button.secondary:active { - --button-bg: var(--button-secondary-active) -} - -.button.secondary:focus { - --button-border-color: var(--button-secondary-border-focus) -} - -.button.action { - --button-bg: transparent; - --button-border-color: var(--button-bg); - --button-color: var(--text-secondary); - --button-font: var(--type-label-s) -} - -.button.action.has-icon { - --button-font: var(--type-emphasis-m); - text-transform: none -} - -.button.action:hover { - --button-bg: var(--button-secondary-hover) -} - -.button.action:active { - --button-bg: var(--button-secondary-active) -} - -.button.action:focus { - --button-border-color: var(--button-secondary-border-focus) -} - -.button.action .button-wrap { - text-transform: uppercase -} - -.button.action.highlight { - --button-color: var(--button-primary-default) -} - -.button.select { - --button-bg: var(--background-primary); - --button-border-color: var(--border-primary); - --button-color: var(--text-secondary); - -webkit-appearance: none; - appearance: none; - background: none; - border: none; - padding: 0; - text-decoration: none -} - -.button.select .button-wrap { - box-shadow: var(--shadow-01); - padding-right: 26px; - position: relative -} - -.button.select .button-wrap:after { - background-color: var(--icon-primary); - content: ""; - display: block; - height: 16px; - -webkit-mask-image: url(/static/media/small-arrow.a22801b3d18b7d1ea795.svg); - mask-image: url(/static/media/small-arrow.a22801b3d18b7d1ea795.svg); - -webkit-mask-size: cover; - mask-size: cover; - position: absolute; - right: .5rem; - top: calc(50% - .5rem); - width: 16px -} - -.header-search { - max-width: 100% -} - -.header-search .search-widget { - margin: 0 auto; - max-width: 20rem; - position: relative; - width: 100% -} - -@media screen and (min-width:769px) { - .header-search .search-widget { - align-items: center; - display: flex; - gap: .5rem - } -} - -.header-search .search-input-field { - -webkit-appearance: none; - background-color: var(--background-primary); - border: 1px solid var(--border-primary); - border-radius: 100px; - caret-color: var(--text-link); - color: var(--text-primary); - height: var(--form-elem-height); - min-width: 5rem; - padding-left: 1rem; - padding-right: 2rem; - width: 100% -} - -@-webkit-keyframes blink { - - 0%, - to { - -webkit-text-decoration-line: none; - text-decoration-line: none - } - - 50% { - -webkit-text-decoration-line: underline; - text-decoration-line: underline - } -} - -@keyframes blink { - - 0%, - to { - -webkit-text-decoration-line: none; - text-decoration-line: none - } - - 50% { - -webkit-text-decoration-line: underline; - text-decoration-line: underline - } -} - -@media screen and (min-width:992px) { - .header-search .search-input-field:invalid { - width: 1rem - } -} - -.header-search .search-input-field:focus, -.header-search .search-input-field:valid { - width: inherit -} - -.header-search .search-input-field:invalid::-webkit-input-placeholder { - -webkit-animation: blink 2s step-end infinite; - animation: blink 2s step-end infinite; - caret-color: transparent -} - -.header-search .search-input-field:invalid, -.header-search .search-input-field:invalid::placeholder { - -webkit-animation: blink 2s step-end infinite; - animation: blink 2s step-end infinite; - caret-color: transparent -} - -@media(prefers-reduced-motion:reduce) { - .header-search .search-input-field:invalid::-webkit-input-placeholder { - caret-color: auto - } - - .header-search .search-input-field:invalid, - .header-search .search-input-field:invalid::placeholder { - caret-color: auto - } -} - -.header-search .search-input-field:valid::-webkit-input-placeholder { - -webkit-animation: none; - animation: none -} - -.header-search .search-input-field:valid, -.header-search .search-input-field:valid::placeholder { - -webkit-animation: none; - animation: none -} - -.header-search .search-input-field:not(:focus):valid::-webkit-input-placeholder { - -webkit-text-decoration-line: none; - text-decoration-line: none -} - -.header-search .search-input-field:not(:focus):valid, -.header-search .search-input-field:not(:focus):valid::placeholder { - -webkit-text-decoration-line: none; - text-decoration-line: none -} - -.header-search .search-input-field:not(:focus), -.header-search .search-input-field:not(:focus)::placeholder { - -webkit-animation: none; - animation: none; - -webkit-text-decoration-line: underline; - text-decoration-line: underline -} - -.header-search .search-input-field:not(:focus)::-webkit-input-placeholder { - -webkit-animation: none; - animation: none; - -webkit-text-decoration-line: underline; - text-decoration-line: underline -} - -.header-search .search-input-field:not(:focus)::placeholder { - -webkit-animation: none; - animation: none; - -webkit-text-decoration-line: underline; - text-decoration-line: underline -} - -.header-search .search-input-field:focus { - border-color: var(--category-color); - box-shadow: 0 0 0 3px var(--blend-color), 0 0 0 3px var(--category-color); - outline: 0 none -} - -.header-search .search-input-field::-webkit-input-placeholder { - font: var(--type-body-l); - opacity: 1; - -webkit-text-decoration-color: var(--text-link); - text-decoration-color: var(--text-link); - text-decoration-thickness: .15rem; - text-underline-offset: .1em -} - -.header-search .search-input-field, -.header-search .search-input-field::placeholder { - font: var(--type-body-l); - opacity: 1; - -webkit-text-decoration-color: var(--text-link); - text-decoration-color: var(--text-link); - text-decoration-thickness: .15rem; - text-underline-offset: .1em -} - -.header-search .server-error { - color: var(--icon-critical); - margin: 0 -} - -.header-search .search-results, -.homepage-hero-search .search-results { - border: 1px solid var(--border-secondary); - border-radius: var(--elem-radius); - box-shadow: var(--shadow-01); - left: 0; - position: absolute; - top: 42px; - width: 100%; - z-index: var(--z-index-search-results) -} - -.header-search .search-results, -.header-search .search-results a[href], -.header-search .search-results mark, -.homepage-hero-search .search-results, -.homepage-hero-search .search-results a[href], -.homepage-hero-search .search-results mark { - color: var(--text-primary) -} - -.header-search .search-results .indexing-warning, -.homepage-hero-search .search-results .indexing-warning { - color: var(--icon-warning) -} - -.header-search .search-results .nothing-found, -.homepage-hero-search .search-results .nothing-found { - font-style: italic -} - -.header-search .search-results .result-item, -.homepage-hero-search .search-results .result-item { - background: var(--background-secondary); - border-bottom: 1px solid var(--border-secondary); - font-size: var(--type-smaller-font-size); - word-break: break-word -} - -.header-search .search-results .result-item:first-child, -.homepage-hero-search .search-results .result-item:first-child { - border-radius: var(--elem-radius) var(--elem-radius) 0 0 -} - -.header-search .search-results .result-item:last-child, -.homepage-hero-search .search-results .result-item:last-child { - border-radius: 0 0 var(--elem-radius) var(--elem-radius) -} - -.header-search .search-results .result-item.nothing-found code, -.homepage-hero-search .search-results .result-item.nothing-found code { - font-size: .8125rem -} - -.header-search .search-results .result-item a, -.homepage-hero-search .search-results .result-item a { - display: block; - padding: .5rem -} - -.header-search .search-results .result-item.highlight, -.header-search .search-results .result-item:hover, -.homepage-hero-search .search-results .result-item.highlight, -.homepage-hero-search .search-results .result-item:hover { - background-color: var(--border-secondary) -} - -.header-search .search-results .result-item.qs-collection b:after, -.homepage-hero-search .search-results .result-item.qs-collection b:after { - border: 1px solid var(--text-primary-red); - border-radius: .5rem; - content: "collection"; - font-size: .5rem; - line-height: .5rem; - margin-bottom: .5rem; - margin-left: .5rem; - padding: .125rem; - vertical-align: super -} - -.header-search .search-results .result-item:focus, -.header-search .search-results .result-item:hover, -.homepage-hero-search .search-results .result-item:focus, -.homepage-hero-search .search-results .result-item:hover { - cursor: pointer -} - -.header-search .search-results div:last-child, -.homepage-hero-search .search-results div:last-child { - border-bottom: 0 -} - -.header-search .search-results mark, -.homepage-hero-search .search-results mark { - background-color: var(--mark-color) -} - -.header-search .search-results small, -.homepage-hero-search .search-results small { - overflow-wrap: break-word -} - -.header-search .search-results a, -.homepage-hero-search .search-results a { - text-overflow: ellipsis -} - -.header-search .search-results div.searchindex-error, -.homepage-hero-search .search-results div.searchindex-error { - color: var(--icon-critical) -} - -.search-form { - display: flex; - position: relative -} - -.button.clear-search-button, -.button.search-button { - --button-color: var(--icon-secondary); - --button-height: 1.5rem; - --button-padding: 0; - position: absolute; - right: .75rem; - top: .25rem; - width: 1.5rem -} - -.button.clear-search-button:hover, -.button.search-button:hover { - background: transparent -} - -@media screen and (min-width:769px) { - - .button.clear-search-button, - .button.search-button { - right: 1.2rem; - width: 1.5rem - } -} - -.button.clear-search-button { - display: none -} - -.header-search .search-input-field:focus~.button.clear-search-button, -.header-search .search-input-field:valid~.button.clear-search-button { - display: block; - right: 2.8rem -} - -.mandala-container { - --mandala-primary: #4e4e4e; - --mandala-accent-1: var(--html-accent-color); - --mandala-accent-2: var(--http-accent-color); - --mandala-accent-3: var(--js-accent-color); - --mandala-accent-4: #b3b3b3; - display: flex; - justify-content: center -} - -.mandala-container .mandala-rotate>svg { - -webkit-animation: rotation 500s linear infinite; - animation: rotation 500s linear infinite -} - -.mandala-container svg { - font-size: 1.5rem; - font-weight: 300; - -webkit-user-select: none; - user-select: none -} - -.mandala-container svg>text { - fill: var(--mandala-primary) -} - -.mandala-container .mandala-accent-1 { - font-size: 1.5rem -} - -.mandala-container .mandala-accent-2 { - font-size: 1.3rem -} - -.mandala-container .mandala-accent-3 { - font-size: 1.2rem -} - -.mandala-container .mandala-accent-4 { - font-size: 1.1rem -} - -.mandala-container .mandala-accent-5 { - font-size: 1rem -} - -.mandala-container.animate-colors svg>text>textPath>tspan { - -webkit-animation: mandala-color-change 50s infinite; - animation: mandala-color-change 50s infinite; - -webkit-animation-timing-function: ease-in-out; - animation-timing-function: ease-in-out -} - -.mandala-container.animate-colors svg>text>textPath>tspan { - fill: var(--mandala-primary) -} - -.mandala-container.animate-colors .mandala-accent-1>textPath>tspan { - fill: var(--mandala-accent-1); - -webkit-animation-delay: -15s; - animation-delay: -15s -} - -.mandala-container.animate-colors .mandala-accent-2>textPath>tspan { - fill: var(--mandala-accent-2); - -webkit-animation-delay: -20s; - animation-delay: -20s -} - -.mandala-container.animate-colors .mandala-accent-3>textPath>tspan { - fill: var(--mandala-accent-3); - -webkit-animation-delay: -30s; - animation-delay: -30s -} - -.mandala-container.animate-colors .mandala-accent-5>textPath>tspan { - fill: var(--mandala-accent-4); - -webkit-animation-delay: -40s; - animation-delay: -40s -} - -@-webkit-keyframes rotation { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg) - } - - to { - -webkit-transform: rotate(1turn); - transform: rotate(1turn) - } -} - -@keyframes rotation { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg) - } - - to { - -webkit-transform: rotate(1turn); - transform: rotate(1turn) - } -} - -@-webkit-keyframes mandala-color-change { - 0% { - fill: var(--mandala-primary) - } - - 10% { - fill: var(--mandala-primary) - } - - 15% { - fill: var(--mandala-accent-1) - } - - 20% { - fill: var(--mandala-primary) - } - - 25% { - fill: var(--mandala-primary) - } - - 30% { - fill: var(--mandala-accent-2) - } - - 35% { - fill: var(--mandala-primary) - } - - 40% { - fill: var(--mandala-primary) - } - - 50% { - fill: var(--mandala-accent-3) - } - - 55% { - fill: var(--mandala-primary) - } - - 60% { - fill: var(--mandala-primary) - } - - 65% { - fill: var(--mandala-accent-4) - } - - 70% { - fill: var(--mandala-primary) - } - - to { - fill: var(--mandala-primary) - } -} - -@keyframes mandala-color-change { - 0% { - fill: var(--mandala-primary) - } - - 10% { - fill: var(--mandala-primary) - } - - 15% { - fill: var(--mandala-accent-1) - } - - 20% { - fill: var(--mandala-primary) - } - - 25% { - fill: var(--mandala-primary) - } - - 30% { - fill: var(--mandala-accent-2) - } - - 35% { - fill: var(--mandala-primary) - } - - 40% { - fill: var(--mandala-primary) - } - - 50% { - fill: var(--mandala-accent-3) - } - - 55% { - fill: var(--mandala-primary) - } - - 60% { - fill: var(--mandala-primary) - } - - 65% { - fill: var(--mandala-accent-4) - } - - 70% { - fill: var(--mandala-primary) - } - - to { - fill: var(--mandala-primary) - } -} - -.featured-articles { - align-items: flex-start; - display: flex; - flex-direction: column; - gap: 1rem; - padding: 0 1rem -} - -.featured-articles h2 { - font: var(--type-heading-h4); - margin-top: 0 -} - -.featured-articles .tile-container { - grid-gap: 1rem; - display: grid; - gap: 1rem; - grid-auto-flow: row; - max-width: 52rem -} - -@media screen and (min-width:769px) { - .featured-articles .tile-container { - grid-template-columns: repeat(2, 1fr) - } -} - -.featured-articles .article-tile { - border: 1px solid var(--border-primary); - border-radius: .5rem; - display: flex; - flex-direction: column; - padding: 1rem -} - -.featured-articles .article-tile:hover { - box-shadow: var(--shadow-02) -} - -.featured-articles .article-tile .tile-tag { - color: var(--text-primary); - font-weight: 500 -} - -.featured-articles .article-tile .tile-tag:hover { - text-decoration: underline -} - -.featured-articles .article-tile .tile-title { - align-items: flex-end; - display: flex; - flex-grow: 1; - font: var(--type-heading-h5); - font-weight: 500; - line-height: var(--intermediate-line-height); - margin: 0 0 1rem -} - -.featured-articles .article-tile .tile-title a { - color: var(--text-primary) -} - -.featured-articles .article-tile .tile-title a:focus, -.featured-articles .article-tile .tile-title a:hover { - text-decoration: underline -} - -.featured-articles .article-tile p { - font: var(--type-smaller-font-size); - line-height: var(--base-line-height); - margin: 0; - max-height: calc(3em*var(--base-line-height)); - overflow: hidden; - position: relative -} - -.featured-articles .article-tile p:after { - background: linear-gradient(to right, transparent, var(--background-primary) 75%); - content: ""; - display: block; - height: calc(1em*var(--base-line-height)); - pointer-events: none; - position: absolute; - right: 0; - top: calc(2em*var(--base-line-height)); - width: 20ch -} - -.featured-articles .article-tile p:dir(rtl):after { - background: linear-gradient(to left, transparent, var(--background-primary) 75%); - left: 0; - right: auto -} - -@media screen and (min-width:769px) { - .featured-articles .article-tile p { - min-height: calc(3em*var(--base-line-height)) - } -} - -.latest-news { - display: flex; - flex-direction: column; - gap: 1rem; - max-width: 52rem; - padding: 0 1rem; - width: 100% -} - -@media screen and (min-width:1200px) { - .latest-news { - padding: 0 - } -} - -.latest-news h2 { - font: var(--type-heading-h4); - margin-top: 1rem -} - -.latest-news h5 { - margin: 0 -} - -.latest-news .news-item { - display: flex; - flex-direction: column; - justify-content: space-between; - padding: .7rem -} - -@media screen and (min-width:769px) { - .latest-news .news-item { - flex-direction: revert - } -} - -.latest-news .news-item:nth-child(odd) { - background: var(--background-secondary); - border-radius: var(--elem-radius) -} - -.latest-news .news-item .news-date { - align-items: center; - display: flex; - font-size: 12px; - line-height: 175% -} - -.latest-news .news-title { - display: flex; - flex-direction: column; - gap: .125rem; - line-height: var(--base-line-height); - margin: 0 -} - -.latest-news .news-title a { - color: var(--text-primary) -} - -.latest-news .news-title a:hover { - color: var(--text-primary); - text-decoration: underline -} - -.latest-news .news-title .news-source { - color: var(--text-secondary); - font-size: var(--type-tiny-font-size) -} - -.recent-contributions { - display: flex; - flex-direction: column; - gap: 1rem; - max-width: 52rem; - padding: 0 1rem; - width: 100% -} - -@media screen and (min-width:1200px) { - .recent-contributions { - padding: 0 - } -} - -.recent-contributions h2 { - font: var(--type-heading-h4); - margin-top: 1rem -} - -.recent-contributions h5 { - margin: 0 -} - -.recent-contributions .request-item { - display: flex; - flex-direction: column; - justify-content: space-between; - padding: .7rem -} - -@media screen and (min-width:769px) { - .recent-contributions .request-item { - flex-direction: revert - } -} - -.recent-contributions .request-item:nth-child(odd) { - background: var(--background-secondary); - border-radius: var(--elem-radius) -} - -.recent-contributions .request-item .request-date { - align-items: center; - display: flex; - font-size: 12px; - line-height: 175% -} - -.recent-contributions .request-title { - display: flex; - flex-direction: column; - gap: .125rem; - line-height: var(--base-line-height); - margin: 0 -} - -.recent-contributions .request-title a { - color: var(--text-primary) -} - -.recent-contributions .request-title a:hover { - color: var(--text-primary); - text-decoration: underline -} - -.recent-contributions .request-title .request-repo { - color: var(--text-secondary); - font-size: var(--type-tiny-font-size) -} - -.contributor-spotlight { - align-items: center; - color: var(--text-primary); - display: flex; - flex-direction: column; - padding: 2rem 1rem; - position: relative; - width: 100% -} - -.contributor-spotlight blockquote { - border: 0; - display: flex; - font-style: italic; - margin: 0; - padding: 0 -} - -.contributor-spotlight blockquote .icon { - margin-right: .5rem; - margin-top: .25rem -} - -.contributor-spotlight h4 { - font-family: var(--font-body); - font-size: var(--type-smaller-font-size) -} - -.contributor-spotlight .text-col { - align-items: center; - border-radius: .3rem; - display: flex; - flex-direction: column; - gap: 1rem; - max-width: 52rem; - width: 100% -} - -.contributor-spotlight .text-col h3 { - font-size: var(--type-heading-h5-font-size) -} - -.contributor-spotlight .spotlight-cta { - --button-bg: var(--text-link); - --button-border-color: #1b1b1b; - --button-color: var(--mdn-color-black); - --button-radius: 10rem; - --button-padding: 1rem; - --button-primary-hover: #696969; - width: -webkit-fit-content; - width: -moz-fit-content; - width: fit-content -} - -.contributor-spotlight .wrapper { - align-items: center; - display: flex; - flex-direction: column; - gap: 2rem; - max-width: 52rem; - padding: 2rem 1rem; - width: 100% -} - -.contributor-spotlight .contributor-graphic { - align-items: center; - display: flex; - justify-content: center; - width: 50%; - word-break: break-word -} - -.contributor-spotlight .contributor-graphic img { - height: -webkit-max-content; - height: max-content; - max-width: 90% -} - -.contributor-spotlight .contributor-name { - background-color: var(--mdn-color-white); - color: var(--mdn-color-black); - font-size: 1.5rem; - font-weight: 650; - line-height: 1.4; - text-transform: uppercase; - width: -webkit-fit-content; - width: -moz-fit-content; - width: fit-content -} - -.contributor-spotlight .contributor-name:after, -.contributor-spotlight .contributor-name:before { - content: " " -} - -.contributor-spotlight .contributor-name:link, -.contributor-spotlight .contributor-name:visited { - color: var(--mdn-color-black); - text-decoration: none -} - -.contributor-spotlight .contributor-name:focus, -.contributor-spotlight .contributor-name:hover { - text-decoration: underline -} - -@media screen and (min-width:769px) { - .contributor-spotlight .wrapper { - align-items: normal; - flex-direction: row - } - - .contributor-spotlight .text-col { - align-items: normal; - text-align: left - } -} - -.contributor-spotlight .mandala-container { - --mandala-primary: var(--border-primary); - background: rgba(1, 1, 1, .9); - height: 100%; - overflow: hidden; - position: absolute; - top: 0; - width: 100%; - z-index: -1 -} - -.contributor-spotlight .mandala-container .mandala-translate { - -webkit-transform: translate(-5rem); - transform: translate(-5rem) -} - -@-webkit-keyframes slow-pulse { - 0% { - opacity: 0 - } - - 50% { - opacity: 1 - } - - to { - opacity: 0 - } -} - -@keyframes slow-pulse { - 0% { - opacity: 0 - } - - 50% { - opacity: 1 - } - - to { - opacity: 0 - } -} - -.generic-loading { - align-items: center; - -webkit-animation: slow-pulse 2s infinite normal; - animation: slow-pulse 2s infinite normal; - -webkit-animation-delay: 1s; - animation-delay: 1s; - display: flex; - justify-content: center; - width: 100% -} - -.bc-table { - border: 1px solid var(--border-primary); - border-collapse: separate; - border-radius: var(--elem-radius); - border-spacing: 0; - margin: 1rem 0; - width: 100% -} - -.bc-table td, -.bc-table th { - border-width: 1px; - border-bottom: 1px solid var(--border-secondary); - border-left: 1px solid var(--border-secondary); - border-right: 0 solid var(--border-secondary); - border-top: 0 solid var(--border-secondary); - font-weight: 500; - padding: 0 -} - -@media screen and (min-width:769px) { - - .bc-table td, - .bc-table th { - padding: .4rem - } - - .bc-table td, - .bc-table td code, - .bc-table th, - .bc-table th code { - font-size: var(--type-smaller-font-size) - } -} - -.bc-table th { - padding: .4rem -} - -.bc-table tbody tr { - height: 3rem -} - -@media screen and (min-width:769px) { - - .bc-table tbody tr:last-child td, - .bc-table tbody tr:last-child th { - border-bottom-width: 0 - } -} - -.bc-table tbody tr th { - border-left-width: 0; - vertical-align: middle -} - -.bc-table tbody .bc-support { - vertical-align: top -} - -.bc-table tbody .bc-support button { - cursor: pointer; - width: 100% -} - -.bc-table tbody .bc-support.bc-supports-no>button>span { - color: var(--text-primary-red) -} - -.bc-table tbody .bc-support.bc-supports-partial>button>span { - color: var(--text-primary-yellow) -} - -.bc-table tbody .bc-support.bc-supports-preview>button>span { - color: var(--text-primary-blue) -} - -.bc-table tbody .bc-support.bc-supports-yes>button>span { - color: var(--text-primary-green) -} - -.bc-table tbody .bc-history td { - border-left-width: 0 -} - -.bc-table tbody .bc-history .icon.icon-removed-partial { - -webkit-mask-image: url(/static/media/partial.2d8806d709221f07c72c.svg); - mask-image: url(/static/media/partial.2d8806d709221f07c72c.svg) -} - -.bc-table th { - background: var(--background-tertiary); - vertical-align: bottom -} - -.bc-table .bc-supports { - margin-bottom: 1rem -} - -.bc-table .bc-supports .icon-wrap { - background: var(--background-primary) -} - -.bc-table .bc-supports.bc-supports-removed-partial .bcd-cell-text-copy { - color: var(--text-primary-yellow) -} - -.bc-table .icon-wrap .bc-support-level { - clip: rect(0 0 0 0); - border: 0; - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute !important; - width: 1px -} - -.bc-table .bc-support>button>.icon-wrap { - display: block -} - -.bc-table .bc-support .icon.icon-removed-partial { - background-color: var(--icon-critical); - -webkit-mask-image: url(/static/media/no.d2e0aa3e7440f80dccd6.svg); - mask-image: url(/static/media/no.d2e0aa3e7440f80dccd6.svg) -} - -.bc-table .bc-support.bc-supports-removed-partial .bcd-cell-text-copy { - color: var(--text-primary-red) -} - -.bc-table .bc-feature-depth-2 { - border-left-width: 8px -} - -.bc-head-txt-label { - left: calc(50% - .5rem); - line-height: 1; - padding-top: .5rem; - position: relative; - -webkit-transform: rotate(180deg); - transform: rotate(180deg); - white-space: nowrap; - -webkit-writing-mode: vertical-rl; - writing-mode: vertical-rl -} - -.bc-head-icon-symbol { - margin-bottom: .3rem -} - -.bc-support { - text-align: center; - vertical-align: middle -} - -.bc-level-no { - background-color: var(--icon-critical) -} - -.bc-level-preview { - background-color: var(--icon-information) -} - -.bc-legend-items-container { - display: flex; - flex-wrap: wrap; - font-size: var(--type-smaller-font-size); - gap: 1.5rem; - margin-bottom: 2rem -} - -.bc-legend-tip { - font-size: var(--type-smaller-font-size); - font-style: italic; - margin-bottom: 1rem; - margin-top: 0 -} - -.bc-legend-item { - align-items: center; - display: flex; - gap: .5rem -} - -.bc-legend-item-dt { - display: flex -} - -.bc-legend-item-dt .icon { - background-color: var(--icon-primary) -} - -.bc-platforms { - height: 2rem -} - -.bc-platforms th { - text-align: center -} - -.bc-platforms td { - border: none -} - -.bc-browsers th { - text-align: center -} - -.bc-browsers td { - border-width: 0 0 1px -} - -.bc-notes-list { - margin: .5rem 0; - position: relative; - text-align: left; - width: 100% -} - -.bc-notes-list:before { - background: var(--border-primary); - content: ""; - height: calc(100% - .25rem); - left: 7px; - margin-top: .25rem; - position: absolute; - width: 2px; - z-index: -1 -} - -.bc-notes-list .bc-notes-wrapper:last-child dd:last-child { - position: relative -} - -.bc-notes-list .bc-notes-wrapper:last-child dd:last-child:before { - background: var(--background-primary); - bottom: 0; - content: ""; - height: calc(100% - 6px); - left: 7px; - position: absolute; - width: 2px; - z-index: -1 -} - -.bc-notes-list .bc-level-yes.icon.icon-yes { - background-color: var(--icon-success); - -webkit-mask-image: url(/static/media/yes-circle.1c4f7a083d20df35ca93.svg); - mask-image: url(/static/media/yes-circle.1c4f7a083d20df35ca93.svg) -} - -.bc-notes-list .bc-supports-dd .icon { - background: var(--border-primary); - border: 3px solid var(--background-primary); - border-radius: 50%; - -webkit-mask-image: none; - mask-image: none -} - -.bc-notes-list .bc-version-label { - display: inline -} - -.bc-notes-list abbr { - margin-right: 4px -} - -.bc-notes-list dd { - margin-bottom: 1rem; - padding-left: 1.5rem; - text-indent: -1.5rem -} - -.bc-notes-list dd:last-child { - margin-bottom: 2rem -} - -.bc-notes-wrapper { - color: var(--text-primary); - margin-bottom: 1rem -} - -.bc-notes-wrapper:last-child { - margin-bottom: 0 -} - -dl.bc-notes-list dt.bc-supports { - margin-top: 1rem -} - -dl.bc-notes-list dt.bc-supports:first-child { - margin-top: 0 -} - -dl.bc-notes-list dd.bc-supports-dd { - margin-bottom: 1rem -} - -dl.bc-notes-list dd.bc-supports-dd:last-child { - margin-bottom: 0 -} - -.offscreen, -.only-icon span { - clip: rect(0 0 0 0); - border: 0; - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute !important; - width: 1px -} - -.bc-table-row-header { - align-items: baseline; - display: inline-flex; - width: 100% -} - -.bc-table-row-header code { - overflow: hidden -} - -.bc-table-row-header .left-side, -.bc-table-row-header .right-side { - overflow: hidden; - white-space: pre -} - -.bc-table-row-header .left-side { - flex: 0 1 auto; - text-overflow: ellipsis -} - -.bc-table-row-header .right-side { - flex: 1 0 auto -} - -.bc-table-row-header .bc-icons { - display: flex; - gap: .5rem; - margin-top: .25rem -} - -.bc-table-row-header .bc-icons .icon { - background-color: var(--icon-secondary) -} - -.bc-table-row-header .bc-icons .icon:hover { - background-color: var(--icon-primary) -} - -.bc-github-link { - font: var(--type-smaller-font-size) -} - -.main-page-content .bc-legend dd, -.main-page-content .bc-legend dt { - margin-bottom: 0; - margin-left: 0; - margin-top: 0 -} - -.main-page-content .bc-supports-dd { - margin: 0 -} - -@media screen and (max-width:425px) { - thead { - display: none - } - - td.bc-support { - border-left-width: 0; - display: block - } - - .bc-feature, - .bc-history>td, - .bc-support>button { - align-content: center; - display: flex; - flex-wrap: wrap; - gap: .5rem - } - - .bc-history-desktop { - display: none - } - - .table-scroll { - overflow-x: auto - } -} - -@media screen and (min-width:426px) { - .bc-table thead { - display: table-header-group - } - - .bc-table thead .bc-platforms th { - vertical-align: revert - } - - .bc-table td, - .bc-table th { - background: inherit; - padding: .25rem; - width: 2rem - } - - .bc-table td.bc-support { - padding: 0 - } - - .bc-table td.bc-support>button { - padding: .25rem - } - - .bc-table tr.bc-history-desktop { - display: table-row - } - - .table-scroll { - margin: 0 -3rem; - overflow: auto; - width: 100vw - } - - .table-scroll-inner { - min-width: -webkit-max-content; - min-width: max-content; - padding: 0 3rem; - position: relative - } - - .table-scroll-inner:after { - bottom: 0; - content: ""; - height: 10px; - position: absolute; - right: 0; - width: 10px - } - - .bc-browser-name, - .bc-support-level { - display: none - } - - .bc-notes-list { - margin-left: 20%; - width: auto - } - - .bc-support .bc-support-level { - display: none - } - - .bc-support[aria-expanded=true] { - position: relative - } - - .bc-support[aria-expanded=true]:after { - background: var(--text-primary); - bottom: -1px; - content: ""; - height: 2px; - left: 0; - position: absolute; - width: 100% - } - - .bc-support[aria-expanded=true] .bc-history-mobile { - display: none - } - - .bc-has-history { - cursor: pointer - } - - .bc-has-history:hover { - background: var(--background-secondary) - } -} - -@media screen and (min-width:769px) { - .table-scroll { - width: calc(100% + 6rem) - } - - .bc-table tbody th { - width: 20% - } -} - -@media screen and (min-width:1200px) { - .table-scroll { - margin: 0; - width: 100% - } - - .table-scroll-inner { - padding: 0 - } -} - -.bcd-cell-text-wrapper { - display: flex; - gap: .5rem -} - -@media screen and (min-width:769px) { - .bcd-cell-text-wrapper { - align-items: center; - flex-direction: column - } -} - -.bcd-cell-text-copy { - color: var(--text-primary); - display: flex; - gap: .5rem -} - -.bc-supports-yes .bcd-cell-text-copy { - color: var(--text-primary-green) -} - -.bc-supports-no .bcd-cell-text-copy { - color: var(--text-primary-red) -} - -.bc-supports-partial .bcd-cell-text-copy { - color: var(--text-primary-yellow) -} - -.bcd-cell-icons { - display: flex; - gap: .5rem -} - -@media screen and (min-width:769px) { - .bcd-cell-icons { - display: block - } -} - -.bc-notes-wrapper .bcd-cell-text-wrapper { - flex-direction: row -} - -@media screen and (min-width:769px) { - .bc-table td { - height: 2rem - } - - .bc-table td.bc-support>button { - padding: .5rem .25rem - } -} - -.container { - margin-left: auto; - margin-right: auto; - max-width: var(--max-width); - padding-left: var(--gutter); - padding-right: var(--gutter); - width: 100% -} - -.logo { - align-items: center; - display: flex -} - -.logo svg { - height: 1.5rem; - margin-top: .3rem -} - -.dark .logo-text, -.high-contrast-black .logo-text { - fill: #fff -} - -.auth-container .signin-link { - align-items: center; - display: inline-flex; - font-weight: var(--font-body-strong-weight); - height: 2rem; - text-align: center -} - -.auth-container .signin-link:link, -.auth-container .signin-link:visited { - color: var(--text-secondary) -} - -.mdn-plus-subscribe-link { - --button-padding: 1rem; - margin: 0 auto; - max-width: 150px; - text-align: center; - white-space: nowrap -} - -.auth-container { - display: flex; - flex-flow: column-reverse; - font-family: var(--font-body); - font-size: var(--type-smaller-font-size); - font-weight: var(--font-body-strong-weight); - gap: .5rem; - list-style: none; - margin-bottom: .5rem; - padding: 0; - text-align: center -} - -@media screen and (min-width:992px) { - .auth-container { - align-items: center; - flex-flow: row; - gap: 1rem; - justify-content: flex-end; - margin: 0; - text-align: left; - text-align: initial; - width: -webkit-min-content; - width: min-content - } -} - -@media screen and (min-width:820px) { - .auth-container { - width: auto - } -} - -.submenu { - background-color: var(--background-primary); - list-style: none; - margin: 0; - padding: 0 -} - -.submenu li { - width: 100% -} - -.submenu .submenu-item, -.submenu a { - align-items: center; - border: 1px solid transparent; - color: var(--text-primary); - display: flex; - height: 100%; - padding: .5rem; - width: 100% -} - -li:last-child .submenu .submenu-item:not(:focus), -li:last-child .submenu a:not(:focus) { - border-bottom-color: transparent -} - -.submenu .submenu-item:hover, -.submenu a:hover { - background-color: var(--border-secondary); - text-decoration: none -} - -.main-menu .submenu .submenu-item:hover, -.main-menu .submenu a:hover { - background-color: var(--background-secondary) -} - -.submenu .submenu-item:focus, -.submenu a:focus { - border: 1px solid var(--button-secondary-border-focus); - box-shadow: var(--button-focus-effect) -} - -.submenu .submenu-item .icon, -.submenu a .icon { - margin-right: .5rem -} - -@media screen and (min-width:992px) { - .submenu.inline-submenu-lg { - background-color: var(--background-secondary); - border: 1px solid var(--border-primary); - border-radius: var(--elem-radius); - box-shadow: var(--shadow-02); - max-width: 25rem; - padding: .5rem; - position: absolute; - top: calc(100% + 4px); - width: -webkit-max-content; - width: max-content; - z-index: var(--z-index-mid) - } - - .main-menu .submenu.inline-submenu-lg { - background-color: var(--background-primary) - } - - .submenu.inline-submenu-lg .submenu-item { - border-radius: var(--elem-radius); - padding: .75rem - } - - .submenu.inline-submenu-lg:before { - content: ""; - display: block; - height: 8px; - left: 0; - position: absolute; - top: -8px; - width: 100% - } -} - -@media screen and (min-width:769px) { - .submenu:not(.inline-submenu-lg) { - background-color: var(--background-secondary); - border: 1px solid var(--border-primary); - border-radius: var(--elem-radius); - box-shadow: var(--shadow-02); - max-width: 25rem; - padding: .5rem; - position: absolute; - top: calc(100% + 4px); - width: -webkit-max-content; - width: max-content; - z-index: var(--z-index-mid) - } - - .main-menu .submenu:not(.inline-submenu-lg) { - background-color: var(--background-primary) - } - - .submenu:not(.inline-submenu-lg) .submenu-item { - border-radius: var(--elem-radius); - padding: .75rem - } - - .submenu:not(.inline-submenu-lg):before { - content: ""; - display: block; - height: 8px; - left: 0; - position: absolute; - top: -8px; - width: 100% - } -} - -.submenu-header { - display: block; - padding: 1rem -} - -.submenu-header .submenu-item { - padding: 0 -} - -.submenu-header .submenu-item:hover { - background: none -} - -@media screen and (min-width:769px) { - .submenu-header { - border-bottom: 1px solid var(--border-primary) - } -} - -.submenu-icon { - background-color: var(--icon-primary); - height: 2rem; - margin-right: .75rem; - position: relative; - width: .2rem -} - -.submenu-item, -.submenu-item-heading { - font-size: var(--type-smaller-font-size) -} - -@media screen and (min-width:769px) { - - .submenu-item-heading:not(:only-child), - .submenu-item:not(:only-child) { - font-weight: var(--font-body-strong-weight) - } -} - -.submenu-item-description { - display: none -} - -@media screen and (min-width:769px) { - .submenu-item-description { - display: block; - font-size: var(--type-tiny-font-size); - margin: .25rem 0 0 - } -} - -.submenu-item-subtext { - font-weight: var(--font-body-strong-weight) -} - -.submenu-item-dot~.submenu-content-container>.submenu-item-heading:after { - background: var(--text-primary-blue); - border: 1px solid var(--background-primary); - border-radius: 2rem; - content: ""; - display: inline-block; - height: .5rem; - margin-left: .5rem; - width: .5rem -} - -.active-menu-item { - background-color: var(--background-primary); - border-color: var(--border-secondary) -} - -.guides .submenu .submenu-item-heading { - font-size: var(--type-smaller-font-size); - font-weight: 400 -} - -.guides .desktop-only { - display: none -} - -@media screen and (min-width:992px) { - .guides .desktop-only { - display: inherit - } - - .guides .mobile-only { - display: none - } -} - -.references .desktop-only { - display: none -} - -@media screen and (min-width:992px) { - .references .desktop-only { - display: inherit - } - - .references .mobile-only { - display: none - } -} - -.html-link-container a:focus .submenu-icon.html, -.html-link-container a:hover .submenu-icon.html { - background: var(--html-accent-color) !important -} - -.css-link-container a:focus .submenu-icon.css, -.css-link-container a:hover .submenu-icon.css { - background-color: var(--css-accent-color) !important -} - -.javascript-link-container a:focus .submenu-icon.javascript, -.javascript-link-container a:hover .submenu-icon.javascript { - background-color: var(--js-accent-color) !important -} - -.http-link-container a:focus .submenu-icon.http, -.http-link-container a:hover .submenu-icon.http { - background-color: var(--http-accent-color) !important -} - -.apis-link-container a:focus .submenu-icon.apis, -.apis-link-container a:hover .submenu-icon.apis { - background-color: var(--apis-accent-color) !important -} - -.learn-link-container a:focus .submenu-icon.learn, -.learn-link-container a:hover .submenu-icon.learn { - background-color: var(--learn-accent-color) !important -} - -.submenu-icon.html { - background-color: var(--html-accent-engage) -} - -.submenu-icon.css { - background-color: var(--css-accent-engage) -} - -.submenu-icon.javascript { - background-color: var(--js-accent-engage) -} - -.submenu-icon.http { - background-color: var(--http-accent-engage) -} - -.submenu-icon.apis { - background-color: var(--apis-accent-engage) -} - -.submenu-icon.learn { - background-color: var(--learn-accent-engage) -} - -.mdn-plus .submenu-icon { - background-color: var(--plus-accent-color) -} - -.mdn-plus .note { - background-color: var(--background-information) -} - -.mdn-plus .note .submenu-item-description { - display: block; - margin: .125rem -} - -@media screen and (min-width:992px) { - .mdn-plus .mobile-only { - display: none - } -} - -ul.main-menu { - grid-gap: 1rem; - box-sizing: border-box; - list-style: none; - margin-top: 1rem; - padding: 0; - width: 100% -} - -ul.main-menu.show { - display: block -} - -@media screen and (min-width:992px) { - ul.main-menu.show { - display: flex - } - - ul.main-menu { - align-items: center; - display: flex; - justify-content: space-around; - margin: 0 auto 0 0; - max-width: 310px - } -} - -@media screen and (min-width:992px) { - ul.main-menu li:last-child { - flex-basis: inherit - } - - ul.main-menu .menu-toggle, - ul.main-menu .submenu, - ul.main-menu .submenu.show { - display: none - } -} - -@media screen and (min-width:992px) { - - ul.main-menu .top-level-entry-container:focus-within .submenu, - ul.main-menu .top-level-entry-container:hover .submenu { - display: block - } - - .open-on-focus-within:focus-within .watch-submenu { - display: flex - } - - .open-on-focus-within:focus-within .submenu { - display: block - } - - .open-on-focus-within .submenu, - .open-on-focus-within .watch-submenu { - display: none - } -} - -.avatar, -.avatar-wrap { - border-radius: 50% -} - -.avatar-wrap { - height: 32px; - margin-left: -7px; - margin-right: .1rem; - position: relative; - width: 32px -} - -@media screen and (min-width:769px) { - .avatar { - margin: initial - } -} - - .signout-form { - padding: .5rem -} - -@media screen and (min-width:769px) { - .signout-form { - border-top: 1px solid var(--border-primary) - } -} - -button.signout-button { - width: 100% -} - -button.signout-button:focus, -button.signout-button:hover { - background-color: var(--background-secondary) -} - -.user-menu { - position: relative -} - -.user-menu .submenu-header { - display: none -} - -.user-menu .button.user-menu-toggle .notification-dot~.avatar-wrap:after { - background: var(--text-primary-blue); - border: 1px solid var(--background-primary); - border-radius: 2rem; - bottom: 0; - content: ""; - height: .5rem; - position: absolute; - right: 0; - width: .5rem -} - -@media screen and (max-width:992px) { - .user-menu .user-menu-toggle:hover { - --button-bg: transparent - } -} - -@media screen and (min-width:992px) { - - .user-menu .button.user-menu-toggle:focus, - .user-menu .button.user-menu-toggle:focus .button-wrap, - .user-menu .button.user-menu-toggle:hover, - .user-menu .button.user-menu-toggle:hover .button-wrap { - background: transparent; - border-color: transparent; - box-shadow: none - } - - .user-menu .button.user-menu-toggle:focus .avatar { - border: 1px solid var(--button-secondary-border-focus); - box-shadow: var(--focus-effect) - } - - .user-menu .button.user-menu-toggle:after { - display: none - } - - .user-menu .submenu-header { - display: block; - margin-bottom: .5rem; - padding: 0 0 .5rem - } - - .user-menu .submenu-item { - padding: .5rem - } - - .user-menu .signout-container { - margin-top: .5rem - } - - .user-menu .user-menu-id { - display: none - } - - .user-menu .submenu { - left: auto; - max-width: -webkit-max-content; - max-width: max-content; - right: 0 - } -} - -.dropdown { - position: relative -} - -.dropdown-list { - background: var(--background-secondary); - border: 1px solid var(--border-primary); - border-radius: var(--elem-radius); - box-shadow: var(--shadow-01); - left: 0; - padding: .5rem; - position: absolute; - top: calc(100% + 2px); - z-index: var(--z-index-low) -} - -.dropdown.is-flush-right .dropdown-list { - left: auto; - right: 0 -} - -.dropdown-item .button.action { - width: 100% -} - -.dropdown-item .button.action .button-wrap { - --button-font: var(--type-smaller-font-size); - --button-bg: transparent; - justify-content: flex-start; - text-align: left; - text-transform: none -} - -.dropdown-item .button.action .button-wrap:hover { - --button-bg: var(--button-secondary-hover) -} - -.dropdown-item .button.action.active-menu-item { - --button-bg: var(--background-primary); - --button-border-color: var(--border-secondary) -} - -.top-navigation-main { - display: none; - justify-content: space-between; - padding: 0; - width: 100% -} - -.show-nav .top-navigation-main { - display: flex; - flex-direction: column -} - -.top-navigation-main .auth-container { - order: 0 -} - -.top-navigation-main .header-search { - order: 1 -} - -.top-navigation-main .main-nav { - order: 2 -} - -.top-navigation-main .notifications-menu { - order: 3 -} - -.top-navigation-main .user-menu { - order: 4 -} - -.top-navigation-main .top-level-entry-container { - position: relative -} - -.top-navigation-main .top-level-entry-container .submenu { - z-index: var(--z-index-nav-menu) -} - -.top-navigation-main .theme-toggle { - align-self: end; - margin-bottom: 1.5rem -} - -@media screen and (min-width:992px) { - .top-navigation-main .theme-toggle { - align-self: auto; - margin-bottom: 0 - } -} - -.top-navigation-main .button.action:hover { - --button-bg: var(--border-secondary) -} - -.is-transparent .top-navigation-main .button.action:not(:focus):hover { - --button-border-color: transparent -} - -.is-transparent .top-navigation-main .button.action:hover { - --button-bg: var(--accent-primary-engage) -} - -.top-navigation-main .button.action.search-button:hover { - --button-bg: transparent -} - -.top-navigation-main .top-level-entry { - background: none; - border-top: 1px solid var(--border-secondary); - color: var(--text-secondary); - cursor: pointer; - display: block; - padding: 1rem .5rem; - text-align: left; - width: 100% -} - -.top-navigation-main .top-level-entry:link, -.top-navigation-main .top-level-entry:visited { - color: var(--text-secondary) -} - -.top-navigation-main .top-level-entry.menu-toggle { - min-height: 53px; - padding: .5rem -} - -@media screen and (max-width:992px) { - .top-navigation-main .top-level-entry.button { - --button-color: var(--text-secondary); - --button-padding: 0; - --button-radius: 0 - } - - .top-navigation-main .top-level-entry.button .button-wrap { - background: none; - border: none; - gap: .5rem; - justify-content: flex-start; - padding: 0; - text-transform: none - } - - .top-navigation-main .top-level-entry.button:focus { - --button-focus-effect: none - } -} - -@media screen and (min-width:992px) { - .top-navigation-main .top-level-entry { - border-radius: var(--elem-radius); - border-top: none; - padding: .5rem - } - - .top-navigation-main .top-level-entry:focus, - .top-navigation-main .top-level-entry:hover { - background-color: var(--category-color-background); - color: var(--category-color); - text-decoration: none - } - - .top-navigation-main .top-level-entry.button { - padding: 0 - } -} - -.top-navigation-main .menu-toggle { - align-items: center; - display: flex; - justify-content: space-between; - position: relative -} - -.top-navigation-main .menu-toggle:after { - background-color: var(--icon-primary); - content: ""; - height: var(--icon-size); - margin-left: .2em; - margin-top: .2em; - -webkit-mask-image: url(/static/media/chevron.05a124d379047e16d746.svg); - mask-image: url(/static/media/chevron.05a124d379047e16d746.svg); - width: var(--icon-size) -} - -.top-navigation-main .menu-toggle[aria-expanded=true]:after { - -webkit-transform: rotate(180deg); - transform: rotate(180deg) -} - -.top-navigation-main .menu-toggle+.top-level-entry { - display: none -} - -@media screen and (min-width:992px) { - .top-navigation-main { - align-items: center; - display: flex; - flex: 1 1; - flex-direction: row; - gap: .5rem; - left: inherit; - padding: 0; - position: static; - top: inherit; - z-index: inherit - } - - .show-nav .top-navigation-main { - flex-direction: row - } - - .top-navigation-main .main-nav { - order: 0 - } - - .top-navigation-main .header-search { - order: 1 - } - - .top-navigation-main .notifications-menu { - order: 2 - } - - .top-navigation-main .auth-container { - order: 3 - } - - .top-navigation-main .user-menu { - order: 4 - } - - .top-navigation-main .main-nav { - margin-right: auto; - width: -webkit-max-content; - width: max-content - } - - .top-navigation-main .menu-toggle+.top-level-entry { - display: inline-flex - } -} - - .theme-switcher-menu { - margin-bottom: .5rem -} - -.theme-switcher-menu .button.action>.button-wrap { - text-transform: none -} - -.theme-switcher-menu .themes-menu .button.button { - --button-bg: transparent; - --button-border-color: var(--button-bg); - --button-color: var(--text-primary); - border-bottom-width: 0; - font-size: var(--type-smaller-font-size); - width: 100% -} - -.theme-switcher-menu .themes-menu .button.button .button-wrap { - border-width: 1px; - font-weight: 400; - justify-content: flex-start; - padding: 1rem -} - -.theme-switcher-menu .themes-menu .button.button:focus { - --button-border-color: var(--button-secondary-border-focus) -} - -.theme-switcher-menu .themes-menu .button.button:hover { - --button-bg: var(--border-secondary) -} - -.theme-switcher-menu .active-menu-item .button-wrap, -.theme-switcher-menu .active-menu-item:hover .button-wrap { - --button-bg: var(--background-primary); - --button-border-color: var(--border-secondary) -} - -.theme-switcher-menu .active-menu-item:focus .button-wrap { - --button-border-color: var(--button-secondary-border-focus) -} - -@media screen and (min-width:769px) { - .theme-switcher-menu { - border-bottom: 0; - margin-bottom: 0 - } - - .theme-switcher-menu .themes-menu { - top: calc(100% - 1rem) - } - - .theme-switcher-menu .themes-menu.show { - display: flex; - flex-direction: column; - gap: .5rem; - max-width: -webkit-max-content; - max-width: max-content; - min-width: 130px - } - - .theme-switcher-menu .themes-menu .submenu-item { - padding: .5rem 1rem - } -} - -.languages-switcher-menu>.button .button-wrap:after, -.theme-switcher-menu>.button .button-wrap:after { - background-color: var(--icon-secondary); - content: ""; - display: block; - height: 16px; - margin-left: auto; - -webkit-mask-image: url(/static/media/chevron.05a124d379047e16d746.svg); - mask-image: url(/static/media/chevron.05a124d379047e16d746.svg); - -webkit-mask-size: 16px; - mask-size: 16px; - width: 16px -} - -.languages-switcher-menu>.button[aria-expanded=true] .button-wrap:after, -.theme-switcher-menu>.button[aria-expanded=true] .button-wrap:after { - -webkit-transform: rotate(180deg); - transform: rotate(180deg) -} - -@media screen and (min-width:992px) { - - .languages-switcher-menu>.button .button-wrap:after, - .theme-switcher-menu>.button .button-wrap:after { - content: normal - } -} - -.maintenance { - color: var(--text-primary); - cursor: help; - flex-flow: column -} - -.maintenance .maintenance-info-container { - cursor: default; - display: block; - margin: 0 1rem; - top: 2rem -} - -@media screen and (min-width:992px) { - .maintenance .maintenance-info-container { - padding-top: 1rem; - position: absolute - } -} - -.maintenance .maintenance-info-container .maintenance-info { - background-color: var(--background-primary); - border: 1px solid var(--border-primary); - border-radius: var(--elem-radius); - font-weight: 400; - padding: 1rem -} - -@media screen and (min-width:992px) { - .maintenance:not(:focus-within):not(:hover) .maintenance-info-container { - clip: rect(1px, 1px, 1px, 1px) !important; - border: 0 !important; - -webkit-clip-path: inset(50%) !important; - clip-path: inset(50%) !important; - height: 1px !important; - margin: -1px !important; - overflow: hidden !important; - padding: 0 !important; - position: absolute !important; - white-space: nowrap !important; - width: 1px !important - } -} - -.top-navigation { - background-color: var(--background-primary); - border-bottom: 1px solid var(--border-primary); - position: relative; - width: 100%; - z-index: 100 -} - -.top-navigation .container { - align-items: center; - background-color: var(--background-primary); - display: flex; - flex-flow: row wrap; - gap: var(--gutter) -} - -@media screen and (min-width:769px) { - .top-navigation .container { - background-color: transparent - } -} - -.top-navigation.is-transparent { - background-color: transparent -} - -.top-navigation .top-navigation-wrap { - align-items: center; - display: flex; - flex: 1 1; - height: var(--top-nav-height); - justify-content: space-between -} - -.top-navigation.show-nav { - box-shadow: 0 0 10px 0 rgba(0, 0, 0, .2); - z-index: var(--z-index-top) -} - -.top-navigation.show-nav .container { - height: auto -} - -@media screen and (min-width:992px) { - .main-menu-toggle { - display: none - } - - .top-navigation .top-navigation-wrap { - flex: 0 1 - } -} - -.breadcrumbs-container { - align-items: center; - display: flex; - margin-right: auto -} - -.breadcrumbs-container ol { - line-height: 1.2 -} - -.breadcrumbs-container li { - display: none; - -webkit-hyphens: auto; - hyphens: auto -} - -.breadcrumbs-container li:first-child, -.breadcrumbs-container li:last-child { - display: inline-flex -} - -.breadcrumbs-container li .breadcrumb:after { - background-color: var(--icon-secondary); - content: ""; - display: block; - flex-shrink: 0; - height: 12px; - margin-right: .5rem; - -webkit-mask-image: url(/static/media/chevron.05a124d379047e16d746.svg); - mask-image: url(/static/media/chevron.05a124d379047e16d746.svg); - -webkit-mask-size: 12px; - mask-size: 12px; - -webkit-transform: rotate(-90deg); - transform: rotate(-90deg); - width: 12px -} - -.breadcrumbs-container li a { - align-items: center; - display: flex -} - -.breadcrumbs-container li a:link, -.breadcrumbs-container li a:visited { - color: var(--text-secondary) -} - -.breadcrumbs-container li a:hover { - text-decoration: underline -} - -.breadcrumbs-container li a:focus-visible { - outline: 0 -} - -.breadcrumbs-container li a:focus-visible [property=name] { - outline-color: var(--accent-primary); - outline-offset: 1px; - outline-style: auto -} - -.breadcrumbs-container li [property=name] { - display: inline-block; - margin-right: .5rem -} - -@media screen and (min-width:1200px) { - .breadcrumbs-container li { - display: inline-flex - } -} - -.watch-menu-item { - background-color: transparent; - border-bottom: 1px solid var(--border-primary); - color: var(--text-primary); - cursor: pointer; - padding: 0 -} - -.watch-menu-item:first-of-type { - border-top-width: 0 -} - -.watch-menu-item-inner { - grid-gap: .5rem; - display: grid; - gap: .5rem; - grid-template-areas: "status label""status text"; - grid-template-columns: 16px 1fr; - padding: .8125rem var(--gutter-padding); - text-align: left -} - -.watch-menu-item:focus .watch-menu-item-inner { - box-shadow: var(--focus-effect); - outline: 1px solid var(--button-secondary-border-focus) -} - -.watch-menu-item:hover .watch-menu-item-inner { - background-color: var(--border-secondary) -} - -.watch-menu-item-status { - grid-area: status -} - -.watch-menu-item-label { - font-family: var(--font-body); - font-size: var(--type-smaller-font-size); - font-weight: var(--font-body-strong-weight); - grid-area: label -} - -.watch-menu-item-text { - font-size: var(--type-smaller-font-size); - grid-area: text -} - -.toast { - --toast-bg: var(--text-primary); - --toast-color: var(--background-primary); - background: var(--toast-bg); - border-radius: var(--elem-radius); - bottom: 1rem; - box-shadow: var(--shadow-02); - display: flex; - gap: .5rem; - left: 50%; - max-width: 680px; - padding: 1rem 1rem 1rem 2rem; - position: fixed; - -webkit-transform: translate(-50%); - transform: translate(-50%); - width: 90vw -} - -.toast-content { - color: var(--toast-color); - margin-right: auto -} - -.toast .button.action { - --button-color: var(--toast-color); - white-space: nowrap -} - -.toast .button.action:hover { - --button-bg: rgba(58, 57, 68, .3); - --button-border-color: transparent -} - -.toast.is-important { - --toast-bg: var(--accent-secondary); - --toast-color: #fff -} - -.toast-verbose-text { - display: none -} - -@media screen and (min-width:769px) { - .toast-verbose-text { - display: inline - } - - .toast-short-text { - display: none - } -} - -.languages-switcher-menu.open-on-focus-within .submenu { - display: block -} - -.language-menu .submenu-item { - padding: .5rem -} - -@media(min-width:769px) { - .language-menu { - right: 0 - } -} - -.article-actions { - margin-left: auto -} - -.article-actions .article-actions-dialog-heading { - display: none -} - -.article-actions .button.action .button-wrap { - text-transform: none -} - -@media screen and (min-width:769px) { - .article-actions { - display: block - } -} - -.article-actions .article-actions-submenu { - --gutter-padding: 1rem; - display: none; - overflow: scroll -} - -.article-actions .article-actions-submenu.show { - background: var(--background-primary); - bottom: 0; - display: flex; - flex-direction: column; - left: 0; - position: fixed; - right: 0; - top: var(--top-navigation-height); - z-index: var(--z-index-mid) -} - -.article-actions .article-actions-submenu .header { - border-bottom: 1px solid var(--border-primary); - color: var(--text-primary); - display: block; - font-family: var(--font-body); - font-size: var(--type-smaller-font-size); - font-weight: var(--font-body-strong-weight); - margin: 0; - padding: 1rem; - text-align: left; - width: 100% -} - -.article-actions .article-actions-submenu .header .header-inner { - align-items: center; - display: flex; - gap: .5rem; - position: relative -} - -.article-actions .article-actions-submenu .header .icon { - -webkit-transform: rotate(90deg); - transform: rotate(90deg) -} - -.article-actions .article-actions-submenu .header.desktop-only { - display: none -} - -.article-actions .article-actions-submenu .mdn-form-item, -.article-actions .article-actions-submenu p { - margin: 0; - padding: 1rem 1rem 0 -} - -.article-actions .article-actions-submenu .mdn-form-item:last-child, -.article-actions .article-actions-submenu p:last-child { - padding-bottom: 1rem -} - -@media screen and (min-width:769px) { - .article-actions .article-actions-submenu.show { - background-color: var(--background-secondary); - border: 1px solid var(--border-primary); - border-radius: var(--elem-radius); - bottom: auto; - box-shadow: var(--shadow-02); - left: auto; - padding: 0; - position: absolute; - right: 0; - top: calc(100% + 6px); - width: 316px; - z-index: var(--z-index-mid) - } - - .article-actions .article-actions-submenu .header { - display: block; - padding: 1rem var(--gutter-padding); - text-align: center - } - - .article-actions .article-actions-submenu .header-inner { - justify-content: center - } - - .article-actions .article-actions-submenu .header.desktop-only { - display: block - } - - .article-actions .article-actions-submenu .header.mobile-only { - display: none - } - - .article-actions .article-actions-submenu .header .icon { - left: 0; - position: absolute - } -} - -.article-actions-entries { - display: none; - list-style: none; - margin: 0; - padding: 0 -} - -@media screen and (min-width:769px) { - .article-actions-entries { - display: flex; - gap: .5rem - } - - .article-actions-entries .sidebar-toggle { - display: none - } -} - -.article-actions-entry { - align-items: center; - display: flex; - position: relative -} - -@media screen and (max-width:769px) { - .article-actions.show-actions { - -webkit-overflow-scrolling: touch; - background-color: var(--background-primary); - color: var(--text-primary); - display: block; - height: 100vh; - left: 0; - overflow: auto; - position: fixed; - top: var(--top-navigation-height); - width: 100vw; - z-index: var(--z-index-low) - } - - .article-actions.show-actions .article-actions-entries>li>.button, - .article-actions.show-actions .article-actions-entries>li>div>.button, - .article-actions.show-actions>.button { - --button-radius: 0; - border-bottom: 1px solid var(--border-secondary); - width: 100% - } - - .article-actions.show-actions .article-actions-entries>li>.button .button-wrap, - .article-actions.show-actions .article-actions-entries>li>div>.button .button-wrap, - .article-actions.show-actions>.button .button-wrap { - justify-content: flex-start; - margin-top: 1px; - padding: 1.5rem 1rem - } - - .article-actions.show-actions .article-actions-dialog-heading { - display: block - } - - .article-actions.show-actions .article-actions-entries { - display: block; - padding: 1rem - } - - .article-actions.show-actions .article-action-entry, - .article-actions.show-actions .article-actions-toggle { - border-bottom: 1px solid var(--border-secondary) - } - - .article-actions.show-actions .article-actions-entry { - display: block - } -} - -.article-actions-container { - align-items: center; - background-color: var(--background-secondary); - border-bottom: 1px solid var(--border-primary); - margin: 0; - min-height: 2rem; - padding: 0; - position: -webkit-sticky; - position: sticky; - top: 0; - z-index: var(--z-index-low) -} - -.article-actions-container .container { - align-items: center; - display: flex; - gap: .5rem; - justify-content: space-between -} - -.article-actions-container .sidebar-button { - display: none -} - -@media screen and (max-width:769px) { - .article-actions-container .sidebar-button { - align-items: center; - align-self: stretch; - display: flex; - margin: 0 0 0 -1rem - } - - .article-actions-container .sidebar-button .button-wrap { - border-radius: 0; - border-right: 1px solid var(--border-primary) - } -} - -@media screen and (min-width:769px) { - .article-actions-container { - position: static - } - - .article-actions-container .article-actions-toggle { - display: none - } - - .article-actions-container .bookmark-button-container { - flex: 0 0 40px - } -} - -@media screen and (min-width:1441px) { - .article-actions-container .container { - padding-left: 1rem; - padding-right: 1rem - } -} - -@media screen and (max-width:769px) { - :root { - --sticky-header-height: 2rem - } -} - -.offline-status-bar { - background-color: var(--accent-primary-engage); - color: var(--text-primary); - display: none -} - -.offline-status-bar.is-offline, -.offline-status-bar.is-online { - display: block; - padding: 1rem; - text-align: center -} - -.offline-status-bar.is-online { - -webkit-animation: fade-out 3s ease-out .5s; - animation: fade-out 3s ease-out .5s -} - -@-webkit-keyframes fade-out { - 0% { - opacity: 1 - } - - to { - opacity: 0 - } -} - -@keyframes fade-out { - 0% { - opacity: 1 - } - - to { - opacity: 0 - } -} - -.document-toc { - margin-bottom: 2rem; - padding: 0; - position: relative -} - -@media screen and (max-width:426px) { - .document-toc { - padding: 0 1rem - } -} - -.document-toc-heading.document-toc-heading { - font: var(--type-heading-h5); - letter-spacing: 1.5px; - margin: 0 0 1rem -} - -.document-toc-list.document-toc-list { - font-size: var(--type-smaller-font-size); - list-style: none; - padding-left: 0 -} - -.document-toc-list.document-toc-list li { - margin: 0 -} - -.document-toc-link.document-toc-link:not(.button) { - border-left: 2px solid var(--border-secondary); - color: var(--text-secondary); - display: block; - padding: .5rem 1rem; - text-decoration: none -} - -.document-toc-link.document-toc-link:not(.button):hover { - color: var(--text-link) -} - -.document-toc-link.document-toc-link:not(.button)[aria-current]:not([aria-current=""]):not([aria-current=false]) { - background-color: var(--background-toc-active); - border-left: 2px solid var(--category-color); - color: var(--text-primary); - font-weight: 600 -} - -.document-toc-item-sub>.document-toc-link:not(.button) { - padding-left: 2rem -} - -.document-toc .show-toc { - display: block -} - -.sidebar { - --offset: var(--main-document-header-height); - --max-height: calc(100vh - var(--offset)); - color: var(--text-secondary) -} - -.sidebar .backdrop { - display: none -} - -@media screen and (max-width:768px) { - .sidebar { - height: 100vh; - left: 0; - max-height: 100vh; - position: fixed; - right: 0; - /* top: --var(--offset) */ - } - - .sidebar, - .sidebar .sidebar-inner { - -webkit-transform: translateX(-100%); - transform: translateX(-100%); - z-index: var(--z-index-top) - } - - .sidebar .sidebar-inner { - background: var(--background-primary); - border-right: 1px solid var(--border-primary); - height: var(--max-height); - max-height: var(--max-height); - max-width: 20rem; - overflow: hidden; - overflow: auto; - padding: 1rem; - position: relative; - transition: transform .2s linear; - width: 80vw; - will-change: transform - } - - .sidebar .backdrop { - background: rgba(0, 0, 0, .3); - border-radius: 0; - bottom: 0; - cursor: default; - display: flex; - left: 0; - opacity: 0; - position: fixed; - right: 0; - top: 0; - transition: opacity .2s linear; - width: 100%; - will-change: opacity; - z-index: var(--z-index-mid) - } - - .sidebar.is-animating, - .sidebar.is-expanded, - .sidebar.is-expanded .sidebar-inner { - -webkit-transform: translateX(0); - transform: translateX(0) - } - - .sidebar.is-expanded .backdrop { - opacity: 1 - } -} - -@media screen and (min-width:769px) { - .sidebar { - display: flex; - max-height: var(--max-height); - overflow: auto; - position: -webkit-sticky; - position: sticky; - top: var(--offset) - } -} - -.sidebar-heading { - color: var(--text-primary); - font: var(--type-heading-h5); - letter-spacing: 1.5px; - margin: 0 -} - -.sidebar em { - background-color: var(--background-toc-active); - border-left: 2px solid var(--category-color); - display: inline-block; - font-style: normal; - font-weight: 600; - padding: .25rem .25rem .25rem .5rem; - width: 100% -} - -.sidebar a, -.sidebar em { - -webkit-hyphens: auto; - hyphens: auto -} - -.sidebar a { - color: var(--text-secondary); - display: inline-flex; - padding: .25rem -} - -.sidebar a:focus, -.sidebar a:hover { - text-decoration: underline -} - -.sidebar .no-link { - display: inline-flex; - padding: .25rem -} - -.sidebar strong { - display: flex; - font-size: var(--type-base-font-size-rem); - margin-top: 1rem -} - -.sidebar ol { - font-size: var(--type-smaller-font-size) -} - -.sidebar ol ol, -.sidebar ol ul { - padding-left: .5rem -} - -.sidebar ol ol li .icon { - margin-right: .01em -} - -.sidebar ol ol li.no-bullet { - display: block; - font-weight: var(--font-body-strong-weight); - list-style-type: none -} - -.sidebar .sidebar-heading~div>ol, -.sidebar .sidebar-heading~ol { - margin-top: 1rem -} - -.sidebar li, -.sidebar summary { - margin-bottom: .5rem -} - -.sidebar code, -.sidebar summary { - font-size: var(--type-smaller-font-size) -} - -.sidebar code { - word-wrap: break-word; - background-color: transparent; - background-color: initial; - border-radius: var(--elem-radius); - font-family: var(--font-code); - line-height: 1.2; - padding: .125rem; - white-space: normal -} - -.sidebar summary { - cursor: pointer -} - -.sidebar details { - margin: .75rem 0 -} - -.sidebar details ol { - padding-left: .75rem -} - -.sidebar .icon { - align-self: center; - background-size: 14px; - height: 14px; - margin-right: -.25rem; - -webkit-mask-size: 14px; - mask-size: 14px; - width: 14px -} - -.sidebar .icon-experimental, -.sidebar .icon-nonstandard { - background-color: var(--icon-information) -} - -.sidebar .icon-deprecated { - background-color: var(--icon-critical) -} - -.main-content.standalone { - margin: 0 auto; - max-width: var(--max-width); - width: 100% -} - -.main-page-content .metadata { - background-color: var(--background-secondary); - border: 1px solid var(--border-primary); - border-radius: var(--elem-radius); - box-shadow: var(--shadow-01); - margin: 2rem 0; - padding: 1rem -} - -.main-page-content .metadata h3 { - font: var(--type-heading-h4); - margin-top: .5rem; - padding: 0 -} - -.metadata-content-container { - margin: 0 auto; - max-width: 1440px; - width: 100% -} - -.metadata-content-container .last-modified-date { - margin-bottom: 0 -} - -:root, -body { - --mdn-color-white: #fff; - --mdn-color-black: #000; - --mdn-color-dark-grey: #4e4e4e; - --mdn-background-dark: #1b1b1b; - --mdn-background-light: #fff; - --mdn-background-light-grey: #e2e2e2; - --color-announcement-banner-accent: #ff6d91 -} - - .light { - --text-primary: #1b1b1b; - --text-secondary: #4e4e4e; - --text-inactive: #9e9e9ea6; - --text-link: #0069c2; - --text-invert: #fff; - --background-primary: #fff; - --background-secondary: #f9f9fb; - --background-tertiary: #fff; - --background-toc-active: #ebeaea; - --background-mark-yellow: rgba(199, 183, 0, .4); - --background-mark-green: rgba(0, 208, 97, .4); - --background-information: rgba(0, 133, 242, .1); - --background-warning: rgba(255, 42, 81, .1); - --background-critical: rgba(211, 0, 56, .1); - --background-success: rgba(0, 121, 54, .1); - --border-primary: #cdcdcd; - --border-secondary: #cdcdcd; - --button-primary-default: #1b1b1b; - --button-primary-hover: #696969; - --button-primary-active: #9e9e9e; - --button-primary-inactive: #1b1b1b; - --button-secondary-default: #fff; - --button-secondary-hover: #cdcdcd; - --button-secondary-active: #cdcdcd; - --button-secondary-inactive: #f9f9fb; - --button-secondary-border-focus: #0085f2; - --button-secondary-border-red: #ff97a0; - --button-secondary-border-red-focus: #ffd9dc; - --icon-primary: #696969; - --icon-secondary: #b3b3b3; - --icon-information: #0085f2; - --icon-warning: #ff2a51; - --icon-critical: #d30038; - --icon-success: #007936; - --accent-primary: #0085f2; - --accent-primary-engage: rgba(0, 133, 242, .1); - --accent-secondary: #0085f2; - --accent-tertiary: rgba(0, 133, 242, .1); - --shadow-01: 0px 1px 2px rgba(43, 42, 51, .05); - --shadow-02: 0px 1px 6px rgba(43, 42, 51, .1); - --focus-01: 0px 0px 0px 3px rgba(0, 144, 237, .4); - --field-focus-border: #0085f2; - --code-token-tag: #0069c2; - --code-token-punctuation: #9e9e9e; - --code-token-attribute-name: #d30038; - --code-token-attribute-value: #007936; - --code-token-comment: #9e9e9e; - --code-token-default: #1b1b1b; - --code-token-selector: #872bff; - --code-background-inline: #f2f1f1; - --code-background-block: #f2f1f1; - --notecard-link-color: #343434; - --scrollbar-bg: transparent; - --scrollbar-color: rgba(0, 0, 0, .25); - --category-color: #0085f2; - --category-color-background: #0085f210; - --code-color: #5e9eff; - --mark-color: #dce2f2; - --plus-accent-color: #d30038; - --html-accent-color: #d30038; - --css-accent-color: #0069c2; - --js-accent-color: #afa100; - --http-accent-color: #007936; - --apis-accent-color: #872bff; - --learn-accent-color: #d00058; - --plus-code-color: #0069c2; - --html-code-color: #9e0027; - --css-code-color: #0069c2; - --js-code-color: #746a00; - --http-code-color: #007936; - --apis-code-color: #872bff; - --learn-code-color: #d00058; - --plus-mark-color: #ffd9dc; - --html-mark-color: #ffd9dc; - --css-mark-color: #dce2f2; - --js-mark-color: #f0e498; - --http-mark-color: #a9f3ba; - --apis-mark-color: #e6deff; - --learn-mark-color: #ffd9df; - --plus-accent-background-color: #ff2a5130; - --html-accent-background-color: #ff2a5130; - --css-accent-background-color: #0085f230; - --js-accent-background-color: #93870030; - --http-accent-background-color: #009a4630; - --apis-accent-background-color: #9b65ff30; - --learn-accent-background-color: #ff1f7230; - --plus-accent-engage: rgba(255, 42, 81, .7); - --html-accent-engage: rgba(255, 42, 81, .7); - --css-accent-engage: rgba(0, 133, 242, .7); - --js-accent-engage: rgba(147, 135, 0, .7); - --http-accent-engage: rgba(0, 154, 70, .7); - --apis-accent-engage: rgba(155, 101, 255, .7); - --learn-accent-engage: rgba(255, 31, 114, .7); - --modal-backdrop-color: rgba(27, 27, 27, .1); - --blend-color: #fff80; - --text-primary-red: #d30038; - --text-primary-green: #007936; - --text-primary-blue: #0069c2; - --text-primary-yellow: #746a00; - color-scheme: light -} - -.dark { - --text-primary: #fff; - --text-secondary: #cdcdcd; - --text-inactive: #cdcdcda6; - --text-link: #35bdb8; - --text-invert: #1b1b1b; - --background-primary: #1b1b1b; - --background-secondary: #343434; - --background-tertiary: #4e4e4e; - --background-toc-active: #343434; - --background-mark-yellow: rgba(199, 183, 0, .4); - --background-mark-green: rgba(0, 208, 97, .4); - --background-information: rgba(0, 133, 242, .1); - --background-warning: rgba(255, 42, 81, .1); - --background-critical: rgba(211, 0, 56, .1); - --background-success: rgba(0, 121, 54, .1); - --border-primary: #858585; - --border-secondary: #696969; - --button-primary-default: #fff; - --button-primary-hover: #cdcdcd; - --button-primary-active: #9e9e9e; - --button-primary-inactive: #fff; - --button-secondary-default: #4e4e4e; - --button-secondary-hover: #858585; - --button-secondary-active: #9e9e9e; - --button-secondary-inactive: #4e4e4e; - --button-secondary-border-focus: #0085f2; - --button-secondary-border-red: #ff97a0; - --button-secondary-border-red-focus: #ffd9dc; - --icon-primary: #fff; - --icon-secondary: #b3b3b3; - --icon-information: #5e9eff; - --icon-warning: #afa100; - --icon-critical: #ff707f; - --icon-success: #00b755; - --accent-primary: #5e9eff; - --accent-primary-engage: rgba(94, 158, 255, .1); - --accent-secondary: #5e9eff; - --accent-tertiary: rgba(0, 133, 242, .1); - --shadow-01: 0px 1px 2px rgba(251, 251, 254, .2); - --shadow-02: 0px 1px 6px rgba(251, 251, 254, .2); - --focus-01: 0px 0px 0px 3px rgba(251, 251, 254, .5); - --field-focus-border: #fff; - --code-token-tag: #c1cff1; - --code-token-punctuation: #9e9e9e; - --code-token-attribute-name: #ff97a0; - --code-token-attribute-value: #00d061; - --code-token-comment: #9e9e9e; - --code-token-default: #fff; - --code-token-selector: #bea5ff; - --code-background-inline: #343434; - --code-background-block: #343434; - --notecard-link-color: #e2e2e2; - --scrollbar-bg: transparent; - --scrollbar-color: hsla(0, 0%, 100%, .25); - --category-color: #8cb4ff; - --category-color-background: #8cb4ff70; - --code-color: #c1cff1; - --mark-color: #004d92; - --plus-accent-color: #ff97a0; - --html-accent-color: #ff707f; - --css-accent-color: #8cb4ff; - --js-accent-color: #afa100; - --http-accent-color: #00b755; - --apis-accent-color: #ae8aff; - --learn-accent-color: #ff6d91; - --plus-code-color: #c1cff1; - --html-code-color: #f9f9fb; - --css-code-color: #c1cff1; - --js-code-color: #c7b700; - --http-code-color: #00d061; - --apis-code-color: #bea5ff; - --learn-code-color: #ff93aa; - --plus-mark-color: #9e0027; - --html-mark-color: #9e0027; - --css-mark-color: #004d92; - --js-mark-color: #564e00; - --http-mark-color: #005a26; - --apis-mark-color: #6800cf; - --learn-mark-color: #9e0041; - --plus-accent-background-color: #ff2a5130; - --html-accent-background-color: #ff2a5130; - --css-accent-background-color: #0085f230; - --js-accent-background-color: #93870030; - --http-accent-background-color: #009a4630; - --apis-accent-background-color: #9b65ff30; - --learn-accent-background-color: #ff1f7230; - --plus-accent-engage: rgba(255, 112, 127, .7); - --html-accent-engage: rgba(255, 112, 127, .7); - --css-accent-engage: rgba(140, 180, 255, .7); - --js-accent-engage: rgba(175, 161, 0, .7); - --http-accent-engage: rgba(0, 183, 85, .7); - --apis-accent-engage: rgba(174, 138, 255, .7); - --learn-accent-engage: rgba(255, 109, 145, .7); - --modal-backdrop-color: rgba(27, 27, 27, .7); - --blend-color: #00080; - --text-primary-red: #ff97a0; - --text-primary-green: #00d061; - --text-primary-blue: #8cb4ff; - --text-primary-yellow: #c7b700; - color-scheme: dark -} - -/* @media(prefers-color-scheme:light) { - :root:not(.light):not(.dark) { - --text-primary: #1b1b1b; - --text-secondary: #4e4e4e; - --text-inactive: #9e9e9ea6; - --text-link: #0069c2; - --text-invert: #fff; - --background-primary: #fff; - --background-secondary: #f9f9fb; - --background-tertiary: #fff; - --background-toc-active: #ebeaea; - --background-mark-yellow: rgba(199, 183, 0, .4); - --background-mark-green: rgba(0, 208, 97, .4); - --background-information: rgba(0, 133, 242, .1); - --background-warning: rgba(255, 42, 81, .1); - --background-critical: rgba(211, 0, 56, .1); - --background-success: rgba(0, 121, 54, .1); - --border-primary: #cdcdcd; - --border-secondary: #cdcdcd; - --button-primary-default: #1b1b1b; - --button-primary-hover: #696969; - --button-primary-active: #9e9e9e; - --button-primary-inactive: #1b1b1b; - --button-secondary-default: #fff; - --button-secondary-hover: #cdcdcd; - --button-secondary-active: #cdcdcd; - --button-secondary-inactive: #f9f9fb; - --button-secondary-border-focus: #0085f2; - --button-secondary-border-red: #ff97a0; - --button-secondary-border-red-focus: #ffd9dc; - --icon-primary: #696969; - --icon-secondary: #b3b3b3; - --icon-information: #0085f2; - --icon-warning: #ff2a51; - --icon-critical: #d30038; - --icon-success: #007936; - --accent-primary: #0085f2; - --accent-primary-engage: rgba(0, 133, 242, .1); - --accent-secondary: #0085f2; - --accent-tertiary: rgba(0, 133, 242, .1); - --shadow-01: 0px 1px 2px rgba(43, 42, 51, .05); - --shadow-02: 0px 1px 6px rgba(43, 42, 51, .1); - --focus-01: 0px 0px 0px 3px rgba(0, 144, 237, .4); - --field-focus-border: #0085f2; - --code-token-tag: #0069c2; - --code-token-punctuation: #9e9e9e; - --code-token-attribute-name: #d30038; - --code-token-attribute-value: #007936; - --code-token-comment: #9e9e9e; - --code-token-default: #1b1b1b; - --code-token-selector: #872bff; - --code-background-inline: #f2f1f1; - --code-background-block: #f2f1f1; - --notecard-link-color: #343434; - --scrollbar-bg: transparent; - --scrollbar-color: rgba(0, 0, 0, .25); - --category-color: #0085f2; - --category-color-background: #0085f210; - --code-color: #5e9eff; - --mark-color: #dce2f2; - --plus-accent-color: #d30038; - --html-accent-color: #d30038; - --css-accent-color: #0069c2; - --js-accent-color: #afa100; - --http-accent-color: #007936; - --apis-accent-color: #872bff; - --learn-accent-color: #d00058; - --plus-code-color: #0069c2; - --html-code-color: #9e0027; - --css-code-color: #0069c2; - --js-code-color: #746a00; - --http-code-color: #007936; - --apis-code-color: #872bff; - --learn-code-color: #d00058; - --plus-mark-color: #ffd9dc; - --html-mark-color: #ffd9dc; - --css-mark-color: #dce2f2; - --js-mark-color: #f0e498; - --http-mark-color: #a9f3ba; - --apis-mark-color: #e6deff; - --learn-mark-color: #ffd9df; - --plus-accent-background-color: #ff2a5130; - --html-accent-background-color: #ff2a5130; - --css-accent-background-color: #0085f230; - --js-accent-background-color: #93870030; - --http-accent-background-color: #009a4630; - --apis-accent-background-color: #9b65ff30; - --learn-accent-background-color: #ff1f7230; - --plus-accent-engage: rgba(255, 42, 81, .7); - --html-accent-engage: rgba(255, 42, 81, .7); - --css-accent-engage: rgba(0, 133, 242, .7); - --js-accent-engage: rgba(147, 135, 0, .7); - --http-accent-engage: rgba(0, 154, 70, .7); - --apis-accent-engage: rgba(155, 101, 255, .7); - --learn-accent-engage: rgba(255, 31, 114, .7); - --modal-backdrop-color: rgba(27, 27, 27, .1); - --blend-color: #fff80; - --text-primary-red: #d30038; - --text-primary-green: #007936; - --text-primary-blue: #0069c2; - --text-primary-yellow: #746a00; - color-scheme: light - } -} */ -@media(prefers-color-scheme:light) { - :root:not(.light):not(.dark) { - --text-primary: #fff; - --text-secondary: #cdcdcd; - --text-inactive: #cdcdcda6; - --text-link: #8cb4ff; - --text-invert: #1b1b1b; - --background-primary: #1b1b1b; - --background-secondary: #343434; - --background-tertiary: #4e4e4e; - --background-toc-active: #343434; - --background-mark-yellow: rgba(199, 183, 0, .4); - --background-mark-green: rgba(0, 208, 97, .4); - --background-information: rgba(0, 133, 242, .1); - --background-warning: rgba(255, 42, 81, .1); - --background-critical: rgba(211, 0, 56, .1); - --background-success: rgba(0, 121, 54, .1); - --border-primary: #858585; - --border-secondary: #696969; - --button-primary-default: #fff; - --button-primary-hover: #cdcdcd; - --button-primary-active: #9e9e9e; - --button-primary-inactive: #fff; - --button-secondary-default: #4e4e4e; - --button-secondary-hover: #858585; - --button-secondary-active: #9e9e9e; - --button-secondary-inactive: #4e4e4e; - --button-secondary-border-focus: #0085f2; - --button-secondary-border-red: #ff97a0; - --button-secondary-border-red-focus: #ffd9dc; - --icon-primary: #fff; - --icon-secondary: #b3b3b3; - --icon-information: #5e9eff; - --icon-warning: #afa100; - --icon-critical: #ff707f; - --icon-success: #00b755; - --accent-primary: #5e9eff; - --accent-primary-engage: rgba(94, 158, 255, .1); - --accent-secondary: #5e9eff; - --accent-tertiary: rgba(0, 133, 242, .1); - --shadow-01: 0px 1px 2px rgba(251, 251, 254, .2); - --shadow-02: 0px 1px 6px rgba(251, 251, 254, .2); - --focus-01: 0px 0px 0px 3px rgba(251, 251, 254, .5); - --field-focus-border: #fff; - --code-token-tag: #c1cff1; - --code-token-punctuation: #9e9e9e; - --code-token-attribute-name: #ff97a0; - --code-token-attribute-value: #00d061; - --code-token-comment: #9e9e9e; - --code-token-default: #fff; - --code-token-selector: #bea5ff; - --code-background-inline: #343434; - --code-background-block: #343434; - --notecard-link-color: #e2e2e2; - --scrollbar-bg: transparent; - --scrollbar-color: hsla(0, 0%, 100%, .25); - --category-color: #8cb4ff; - --category-color-background: #8cb4ff70; - --code-color: #c1cff1; - --mark-color: #004d92; - --plus-accent-color: #ff97a0; - --html-accent-color: #ff707f; - --css-accent-color: #8cb4ff; - --js-accent-color: #afa100; - --http-accent-color: #00b755; - --apis-accent-color: #ae8aff; - --learn-accent-color: #ff6d91; - --plus-code-color: #c1cff1; - --html-code-color: #f9f9fb; - --css-code-color: #c1cff1; - --js-code-color: #c7b700; - --http-code-color: #00d061; - --apis-code-color: #bea5ff; - --learn-code-color: #ff93aa; - --plus-mark-color: #9e0027; - --html-mark-color: #9e0027; - --css-mark-color: #004d92; - --js-mark-color: #564e00; - --http-mark-color: #005a26; - --apis-mark-color: #6800cf; - --learn-mark-color: #9e0041; - --plus-accent-background-color: #ff2a5130; - --html-accent-background-color: #ff2a5130; - --css-accent-background-color: #0085f230; - --js-accent-background-color: #93870030; - --http-accent-background-color: #009a4630; - --apis-accent-background-color: #9b65ff30; - --learn-accent-background-color: #ff1f7230; - --plus-accent-engage: rgba(255, 112, 127, .7); - --html-accent-engage: rgba(255, 112, 127, .7); - --css-accent-engage: rgba(140, 180, 255, .7); - --js-accent-engage: rgba(175, 161, 0, .7); - --http-accent-engage: rgba(0, 183, 85, .7); - --apis-accent-engage: rgba(174, 138, 255, .7); - --learn-accent-engage: rgba(255, 109, 145, .7); - --modal-backdrop-color: rgba(27, 27, 27, .7); - --blend-color: #00080; - --text-primary-red: #ff97a0; - --text-primary-green: #00d061; - --text-primary-blue: #8cb4ff; - --text-primary-yellow: #c7b700; - color-scheme: dark - } -} - -@media(prefers-color-scheme:dark) { - :root:not(.light):not(.dark) { - --text-primary: #fff; - --text-secondary: #cdcdcd; - --text-inactive: #cdcdcda6; - --text-link: #8cb4ff; - --text-invert: #1b1b1b; - --background-primary: #1b1b1b; - --background-secondary: #343434; - --background-tertiary: #4e4e4e; - --background-toc-active: #343434; - --background-mark-yellow: rgba(199, 183, 0, .4); - --background-mark-green: rgba(0, 208, 97, .4); - --background-information: rgba(0, 133, 242, .1); - --background-warning: rgba(255, 42, 81, .1); - --background-critical: rgba(211, 0, 56, .1); - --background-success: rgba(0, 121, 54, .1); - --border-primary: #858585; - --border-secondary: #696969; - --button-primary-default: #fff; - --button-primary-hover: #cdcdcd; - --button-primary-active: #9e9e9e; - --button-primary-inactive: #fff; - --button-secondary-default: #4e4e4e; - --button-secondary-hover: #858585; - --button-secondary-active: #9e9e9e; - --button-secondary-inactive: #4e4e4e; - --button-secondary-border-focus: #0085f2; - --button-secondary-border-red: #ff97a0; - --button-secondary-border-red-focus: #ffd9dc; - --icon-primary: #fff; - --icon-secondary: #b3b3b3; - --icon-information: #5e9eff; - --icon-warning: #afa100; - --icon-critical: #ff707f; - --icon-success: #00b755; - --accent-primary: #5e9eff; - --accent-primary-engage: rgba(94, 158, 255, .1); - --accent-secondary: #5e9eff; - --accent-tertiary: rgba(0, 133, 242, .1); - --shadow-01: 0px 1px 2px rgba(251, 251, 254, .2); - --shadow-02: 0px 1px 6px rgba(251, 251, 254, .2); - --focus-01: 0px 0px 0px 3px rgba(251, 251, 254, .5); - --field-focus-border: #fff; - --code-token-tag: #c1cff1; - --code-token-punctuation: #9e9e9e; - --code-token-attribute-name: #ff97a0; - --code-token-attribute-value: #00d061; - --code-token-comment: #9e9e9e; - --code-token-default: #fff; - --code-token-selector: #bea5ff; - --code-background-inline: #343434; - --code-background-block: #343434; - --notecard-link-color: #e2e2e2; - --scrollbar-bg: transparent; - --scrollbar-color: hsla(0, 0%, 100%, .25); - --category-color: #8cb4ff; - --category-color-background: #8cb4ff70; - --code-color: #c1cff1; - --mark-color: #004d92; - --plus-accent-color: #ff97a0; - --html-accent-color: #ff707f; - --css-accent-color: #8cb4ff; - --js-accent-color: #afa100; - --http-accent-color: #00b755; - --apis-accent-color: #ae8aff; - --learn-accent-color: #ff6d91; - --plus-code-color: #c1cff1; - --html-code-color: #f9f9fb; - --css-code-color: #c1cff1; - --js-code-color: #c7b700; - --http-code-color: #00d061; - --apis-code-color: #bea5ff; - --learn-code-color: #ff93aa; - --plus-mark-color: #9e0027; - --html-mark-color: #9e0027; - --css-mark-color: #004d92; - --js-mark-color: #564e00; - --http-mark-color: #005a26; - --apis-mark-color: #6800cf; - --learn-mark-color: #9e0041; - --plus-accent-background-color: #ff2a5130; - --html-accent-background-color: #ff2a5130; - --css-accent-background-color: #0085f230; - --js-accent-background-color: #93870030; - --http-accent-background-color: #009a4630; - --apis-accent-background-color: #9b65ff30; - --learn-accent-background-color: #ff1f7230; - --plus-accent-engage: rgba(255, 112, 127, .7); - --html-accent-engage: rgba(255, 112, 127, .7); - --css-accent-engage: rgba(140, 180, 255, .7); - --js-accent-engage: rgba(175, 161, 0, .7); - --http-accent-engage: rgba(0, 183, 85, .7); - --apis-accent-engage: rgba(174, 138, 255, .7); - --learn-accent-engage: rgba(255, 109, 145, .7); - --modal-backdrop-color: rgba(27, 27, 27, .7); - --blend-color: #00080; - --text-primary-red: #ff97a0; - --text-primary-green: #00d061; - --text-primary-blue: #8cb4ff; - --text-primary-yellow: #c7b700; - color-scheme: dark - } -} - -.document-page .article-actions-container, -.document-page .document-toc-container, -.document-page .generic-loading, -.document-page .main-content, -.document-page .metadata, -.document-page .page-header, -.document-page .sidebar { - display: flex -} - -.document-page .main-content, -.document-page .sidebar { - flex-direction: column; - width: 100% -} - -.main-wrapper { - display: flex; - margin: 0 auto; - max-width: var(--max-width) -} - -.main-wrapper .toc { - display: none -} - -@media screen and (min-width:769px) { - .main-wrapper { - grid-gap: 3rem; - display: grid; - gap: 3rem; - /* grid-template-areas: "sidebar main"; - grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); */ - padding-left: 1.5rem; - padding-right: 3rem - } - - .main-wrapper .main-content, - .main-wrapper .sidebar, - .main-wrapper .toc { - padding-bottom: 3rem; - padding-top: 3rem - } - - .main-wrapper .sidebar { - align-self: start; - grid-area: sidebar - } - - .main-wrapper .main-content { - grid-area: main - } -} - -@media screen and (min-width:1200px) { - .main-wrapper { - grid-gap: 3rem; - display: grid; - gap: 3rem; - /* grid-template-areas: "sidebar main toc"; - grid-template-columns: minmax(0, 1fr) minmax(0, 2.5fr) minmax(0, 15rem); */ - padding-left: 1rem; - padding-right: 1rem - } - - .main-wrapper .toc { - --offset: var(--main-document-header-height); - --max-height: calc(100vh - var(--offset)); - display: block; - grid-area: toc; - max-height: var(--max-height); - overflow: auto; - position: -webkit-sticky; - position: sticky; - top: var(--offset) - } - - .main-wrapper .in-nav-toc { - display: none - } -} - -.page-wrapper { - grid-template-columns: 100% -} - -.standard-page { - max-width: inherit -} - -@font-face { - font-display: swap; - font-family: Inter; - font-stretch: 75% 100%; - font-style: oblique 0deg 20deg; - font-weight: 1 999; - src: url(/website/fonts/Inter.var.woff2) format("woff2 supports variations"), url(/website/fonts/Inter.var.woff2) format("woff2-variations") -} - -:root { - --sticky-header-height: var(--main-document-header-height) -} - -.main-document-header-container { - position: -webkit-sticky; - position: sticky; - top: 0; - z-index: var(--z-index-top) -} - -.main-page-content { - overflow-wrap: break-word; - padding: 3rem 1rem 1rem -} - -.main-page-content h1 a:link, -.main-page-content h1 a:visited, -.main-page-content h2 a:link, -.main-page-content h2 a:visited, -.main-page-content h3 a:link, -.main-page-content h3 a:visited, -.main-page-content h4 a:link, -.main-page-content h4 a:visited, -.main-page-content h5 a:link, -.main-page-content h5 a:visited, -.main-page-content h6 a:link, -.main-page-content h6 a:visited { - color: var(--text-primary); - text-decoration: none -} - -.main-page-content h1 a:focus, -.main-page-content h1 a:hover, -.main-page-content h2 a:focus, -.main-page-content h2 a:hover, -.main-page-content h3 a:focus, -.main-page-content h3 a:hover, -.main-page-content h4 a:focus, -.main-page-content h4 a:hover, -.main-page-content h5 a:focus, -.main-page-content h5 a:hover, -.main-page-content h6 a:focus, -.main-page-content h6 a:hover { - text-decoration: underline -} - -.main-page-content h1 a:active, -.main-page-content h2 a:active, -.main-page-content h3 a:active, -.main-page-content h4 a:active, -.main-page-content h5 a:active, -.main-page-content h6 a:active { - background-color: transparent -} - -.main-page-content h1 a[href^="#"]:hover:after, -.main-page-content h2 a[href^="#"]:hover:after, -.main-page-content h3 a[href^="#"]:hover:after, -.main-page-content h4 a[href^="#"]:hover:after, -.main-page-content h5 a[href^="#"]:hover:after, -.main-page-content h6 a[href^="#"]:hover:after { - color: var(--text-inactive); - content: "#"; - display: inline-flex; - font-size: .7em; - line-height: 1; - margin-left: 4px; - text-decoration: none -} - -.main-page-content h1:after { - -webkit-text-decoration-color: var(--category-color); - text-decoration-color: var(--category-color) -} - -.main-page-content h2:first-of-type { - margin-top: 2rem -} - -.main-page-content a:not(.button) { - color: var(--text-link); - width: -webkit-fit-content; - width: -moz-fit-content; - width: fit-content -} - -.main-page-content a:not(.button):active { - background-color: var(--text-link); - color: #fff -} - -.main-page-content a:not(.button):active code { - background-color: transparent; - color: #fff -} - -.main-page-content a:not(.button)[id^=attr-]:link, -.main-page-content a:not(.button)[id^=attr-]:visited { - color: var(--text-link); - text-decoration: none -} - -.main-page-content a:not(.button)[id^=attr-]:focus, -.main-page-content a:not(.button)[id^=attr-]:hover { - text-decoration: underline -} - -.main-page-content a:not(.button)[id^=attr-]:active { - color: #fff -} - -.main-page-content a:not(.button)[aria-current] { - color: var(--text-link); - font-weight: var(--font-body-strong-weight); - text-decoration: none -} - -.main-page-content img { - background: #fff; - border: 1px solid var(--border-primary) !important; - border-radius: var(--elem-radius); - display: inline-block; - display: flex; - height: auto; - margin: 2rem auto -} - -.main-page-content ol, -.main-page-content ul { - margin: 1rem 0 2rem; - padding-left: 2rem -} - -.main-page-content ol li, -.main-page-content ul li { - margin: .5rem 0 -} - -.main-page-content ul { - list-style: disc -} - -.main-page-content ul ul { - list-style-type: circle; - margin: 0; - padding-left: 1rem -} - -.main-page-content ol { - list-style: decimal -} - -.main-page-content ol ol { - list-style: lower-roman; - margin: 0 -} - -.main-page-content dd ol, -.main-page-content dd ul { - margin-bottom: 1rem; - padding-left: 3rem -} - -.main-page-content td ol, -.main-page-content td ul { - padding-left: 1rem -} - -.main-page-content dd li { - margin-bottom: 1rem -} - -.main-page-content td li { - margin-bottom: .5rem -} - -.main-page-content dl dt { - margin-bottom: .5rem; - margin-top: 2rem -} - -.main-page-content dl dd { - margin-bottom: 1rem; - margin-left: 1rem -} - -.main-page-content dl dd .notecard p { - padding-left: 0 -} - -.main-page-content dl p { - margin: 0 0 1rem -} - -.main-page-content .section-content p { - font: var(--type-article-p) -} - -.main-page-content .section-content p:last-child { - margin-bottom: 2rem -} - -.main-page-content .section-content figure { - margin-bottom: 1rem -} - -.main-page-content .section-content .prev-next { - display: flex; - gap: .5rem; - justify-content: space-between; - list-style: none; - margin: 1rem 0; - padding: 0; - text-align: center -} - -.main-page-content .section-content .prev-next li { - display: flex; - margin: 0 -} - -.main-page-content .section-content .prev-next .button { - margin: 0; - max-width: inherit -} - -.main-page-content .section-content .prev-next .button-wrap { - color: inherit -} - -@media screen and (min-width:426px) { - .main-page-content { - padding: 3rem - } -} - -@media screen and (min-width:769px) { - .main-page-content { - margin-bottom: .5rem; - padding: 0 - } -} - -b, -strong { - font-weight: var(--font-body-strong-weight); - letter-spacing: .02rem -} - -table { - border: 1px solid var(--border-primary); - border-collapse: collapse; - width: 100% -} - -table th { - background: var(--background-tertiary); - font-weight: var(--font-body-strong-weight); - line-height: 1.5; - text-align: left -} - -table td, -table th { - border: 1px solid var(--border-primary); - padding: .5rem .75rem; - vertical-align: middle -} - -table td .code-example pre, -table td ul { - margin: 0 -} - -table caption { - font-weight: var(--font-body-strong-weight); - margin: 1rem 0 .5rem -} - -table.properties { - border: none; - font-size: var(--type-base-font-size) -} - -table.properties td, -table.properties th { - border: none -} - -table.properties th { - background: none -} - -table.properties tr { - border-bottom: 1px solid var(--border-secondary) -} - -table.properties tr:first-child { - border-top: 1px solid var(--border-primary) -} - -table.properties tr:last-child { - border-bottom: 1px solid var(--border-primary) -} - -table.properties tr:nth-child(odd) td, -table.properties tr:nth-child(odd) th, -table.standard-table tr:nth-child(odd) td, -table.standard-table tr:nth-child(odd) th { - background-color: var(--background-secondary) -} - -iframe { - border: 1px solid var(--border-primary); - max-width: 100%; - width: 100% -} - -iframe.nobutton, -iframe.sample-code-frame, -iframe[src*="https://jsfiddle.net"], -iframe[src*="https://mdn.github.io"], -iframe[src*="https://test262.report"], -iframe[src*="https://www.youtube-nocookie.com"] { - background: #fff; - border: 1px solid var(--border-primary); - border-radius: var(--elem-radius); - width: 100% -} - -h1, -h2, -h3 { - letter-spacing: var(--heading-letter-spacing) -} - -h1 { - font: var(--type-heading-h1); - margin-bottom: 2rem; - word-break: break-word -} - -@media screen and (min-width:769px) { - h1 { - font: var(--type-heading-h1) - } -} - -h2 { - font: var(--type-heading-h2); - margin: 4rem 0 .5rem -} - -h3 { - font: var(--type-heading-h3); - margin: 2rem 0 .5rem -} - -h2~div~h3, -h2~h3 { - margin-top: 1rem -} - -h4 { - font: var(--type-heading-h4); - letter-spacing: .5px; - margin: 2rem 0 1rem -} - -h5 { - font: var(--type-heading-h5) -} - -h5, -h6 { - letter-spacing: 1.5px; - margin: 2rem 0 1rem; - text-transform: uppercase -} - -h6 { - font: var(--type-heading-h6) -} - -h1 code, -h2 code, -h3 code, -h4 code, -h5 code, -h6 code { - font-size: inherit -} - -p { - margin: 1rem 0 2rem -} - -blockquote { - border-left: 4px solid var(--border-secondary); - color: var(--text-secondary); - margin-bottom: 2rem; - padding: 1rem 2rem -} - -blockquote p { - margin: 0 -} - -.code-example, -code, -pre { - border-radius: var(--elem-radius); - font-size: var(--type-base-font-size-rem) -} - -code { - background: var(--code-background-inline); - padding: .125rem .25rem; - width: -webkit-fit-content; - width: -moz-fit-content; - width: fit-content -} - -pre { - background-color: var(--code-background-block); - border: 1px solid transparent; - margin: 1rem 0 2rem; - padding: 1rem 2.5rem 1rem 1rem -} - -pre code { - background: none; - color: var(--text-primary); - padding: 0 -} -/* -.example-bad, -.example-good { - padding: 0 1rem; - position: relative -} - -.example-bad:after, -.example-good:after { - background-size: 24px; - content: ""; - display: block; - height: 16px; - position: absolute; - right: 16px; - top: 18px; - width: 16px -} - -.example-bad+.copy-icon, -.example-good+.copy-icon { - display: none -} - -.example-bad { - background-color: var(--background-critical) -} - -.example-bad:after { - background-color: var(--icon-critical); - -webkit-mask-image: url(/static/media/no.d2e0aa3e7440f80dccd6.svg); - mask-image: url(/static/media/no.d2e0aa3e7440f80dccd6.svg) -} - -.example-good { - background-color: var(--background-success) -} - -.example-good:after { - background-color: var(--icon-success); - -webkit-mask-image: url(/static/media/checkmark.d05ce91f65dfc321cadd.svg); - mask-image: url(/static/media/checkmark.d05ce91f65dfc321cadd.svg) -} - -.index { - margin-bottom: 1rem -} - -.index ul { - margin: .5rem 0 2rem -} - -@media screen and (min-width:1200px) { - .index ul { - -webkit-columns: 3; - column-count: 3 - } -} - -.index ul li { - margin: 0 0 .5rem -} - -.index .icon-experimental, -.index .icon-nonstandard { - color: var(--icon-information) -} - -.index .icon-deprecated { - color: var(--icon-critical) -} - -.callout { - background: var(--background-secondary); - border: 1px solid var(--border-primary); - border-radius: var(--elem-radius); - box-shadow: var(--shadow-01); - display: flex; - flex-direction: column; - gap: 1rem; - margin: 2rem 0; - padding: 1rem; - text-align: left -} - -.callout h4 { - margin: 0 -} - -.callout p { - font: var(--type-smaller-font-size); - margin: 0 -} - -.code-example { - color: var(--code-default); - position: relative -} - -.code-example .copy-icon { - border-radius: var(--elem-radius); - cursor: pointer; - height: 1.25rem; - margin: 0; - -webkit-mask-image: url(/static/media/clippy.92fffda9d37d9c3a3b37.svg); - mask-image: url(/static/media/clippy.92fffda9d37d9c3a3b37.svg); - -webkit-mask-size: cover; - mask-size: cover; - opacity: .4; - padding: .25rem; - position: absolute; - right: .5rem; - top: .75rem; - width: 1.25rem -} - -.code-example .copy-icon:focus, -.code-example .copy-icon:hover { - opacity: 1 -} - -.code-example .copy-icon-message { - background: var(--text-primary); - border-radius: var(--elem-radius); - color: var(--text-invert); - font-size: .8125rem; - opacity: 1; - padding: .125rem; - position: absolute; - right: .25rem; - top: 15px -} - -.code-example .example-bad, -.code-example .example-good { - padding: 1rem -} - -.only-in-en-us span { - font-size: .8125rem -} - -a.page-not-created { - cursor: not-allowed -} - -a.page-not-created:focus, -a.page-not-created:hover, -a.page-not-created:link, -a.page-not-created:not([href]) { - color: var(--icon-critical); - -webkit-text-decoration: underline wavy; - text-decoration: underline wavy -} */ - -.badge { - border: 1px solid var(--border-primary); - border-radius: 4rem; - font-size: var(--type-tiny-font-size); - padding: .125rem .375rem; - white-space: nowrap -} - -.badge, -kbd { - color: var(--text-secondary) -} - -kbd { - border: 2px solid var(--border-secondary); - border-radius: var(--elem-radius); - box-shadow: var(--border-secondary); - box-shadow: inset 0 -1px 0 0 var(--border-secondary); - font-size: .825rem; - padding: .25rem -} -/* -.interactive { - background-color: var(--background-secondary); - border: 1px solid var(--border-primary); - border-radius: var(--elem-radius); - color: var(--text-primary); - height: 675px; - margin: 1rem 0; - padding: 0; - width: 100% -} - -.interactive.is-js-height, -.interactive.is-shorter-height, -.interactive.is-taller-height { - border: 0 -} - -.interactive.is-js-height { - height: 513px -} - -.interactive.is-shorter-height { - height: 433px -} - -.interactive.is-taller-height { - height: 725px -} - -.interactive.is-tabbed-shorter-height { - height: 487px -} - -.interactive.is-tabbed-standard-height { - height: 548px -} - -.interactive.is-tabbed-taller-height { - height: 774px -} - -@media screen and (min-width:1008px), -screen and (min-width:688px)and (max-width:768px) { - .interactive { - height: 375px - } - - .interactive.is-js-height { - height: 444px - } - - .interactive.is-shorter-height { - height: 364px - } - - .interactive.is-taller-height { - height: 654px - } - - .interactive.is-tabbed-shorter-height { - height: 351px - } - - .interactive.is-tabbed-standard-height { - height: 421px - } - - .interactive.is-tabbed-taller-height { - height: 631px - } -} - -.document-survey { - background-color: #e6deff; - border: 5px solid #6800cf; - border-radius: .5rem; - color: #1b1b1b; - padding: 1em -} - -.document-survey:before { - background: transparent url(/static/media/survey.eea64fbc33bedb4fb0c5.svg) 50% no-repeat; - background-size: cover; - content: ""; - display: inline-block; - height: 33px; - position: absolute; - width: 32px -} - -.document-survey iframe { - border: 0 -} - -.document-survey button[type=button], -.document-survey summary { - cursor: pointer -} - -.document-survey summary { - text-decoration: underline -} - -.document-survey summary:focus, -.document-survey summary:hover { - text-decoration: inherit -} - -.document-survey .survey-header { - display: flex; - justify-content: space-between -} - -.document-survey .survey-container, -.document-survey .survey-header { - padding-left: 2.5em -} - -.document-survey .survey-dismiss svg.icon { - color: #1b1b1b -} - -.a11y-nav { - position: absolute; - top: -20em; - width: 100%; - z-index: var(--z-index-a11y) -} - -.a11y-nav a { - background-color: hsla(0, 0%, 100%, .9); - font-weight: var(--font-body-strong-weight); - left: 0; - padding: .5rem; - position: absolute; - right: 0; - text-align: center -} - -.a11y-nav a:focus, -.a11y-nav a:hover { - box-shadow: var(--shadow-01); - text-decoration: none; - top: 20em -} - -.page-footer { - background-color: var(--background-secondary); - padding: 2rem 1rem; - position: relative -} - -.page-footer-grid { - margin: 0 auto; - max-width: 1440px -} - -.page-footer, -.page-footer a { - color: var(--text-secondary) -} - -.page-footer-logo-col p { - margin-top: 0; - max-width: 55ch -} - -.page-footer-app-list { - display: flex; - flex-direction: column; - gap: .5rem -} - -.page-footer-app-dl { - display: block; - max-width: 130px -} - -.page-footer-app-dl img, -.page-footer-app-dl svg { - width: 100% -} - -.page-footer-app-dl.is-ms { - max-width: 110px -} - -.page-footer-moz { - align-items: center; - border-top: 1px solid var(--border-primary); - display: flex; - flex-flow: row wrap; - gap: 2rem; - padding-top: 1.5rem -} - -.page-footer-legal-text { - font-size: var(--type-tiny-font-size); - margin: 0 -} - -.page-footer-legal-text a { - text-decoration: underline -} - -.page-footer-legal-text a:hover { - text-decoration: none -} - -.footer-moz-list { - display: flex; - flex-wrap: wrap; - font-size: var(--type-tiny-font-size); - gap: 1rem -} - -.footer-moz-logo-link { - display: flex -} - -.footer-moz-link { - text-decoration: underline -} - -.footer-moz-link:hover { - text-decoration: none -} - -.mdn-footer-logo { - display: block; - width: 50px -} - -.social-icons { - display: flex; - gap: 1rem; - margin-top: .5rem -} - -.social-icons li { - flex: 0 0 auto -} - -.social-icons .icon { - display: block; - height: 21px; - width: 21px -} - -.footer-nav-heading { - font: var(--type-smaller-font-size); - margin: 0 0 .5rem -} - -.footer-nav-list { - display: flex; - flex-direction: column; - gap: .5rem -} - -.footer-nav-item { - font-size: var(--type-smaller-font-size) -} - -.page-footer-grid { - display: flex; - flex-direction: column; - gap: 1.5rem -} - -@media screen and (min-width:426px) { - .page-footer-grid { - grid-gap: 2.5rem; - display: grid; - gap: 2.5rem; - grid-template-areas: "logo . ""nav1 nav2""nav3 nav4""moz moz""legal legal"; - grid-template-columns: 1fr 1fr - } - - .page-footer-logo-col { - grid-area: logo - } - - .page-footer-nav-col-1 { - grid-area: nav1 - } - - .page-footer-nav-col-2 { - grid-area: nav2 - } - - .page-footer-nav-col-3 { - grid-area: nav3 - } - - .page-footer-nav-col-4 { - grid-area: nav4 - } - - .page-footer-app-col { - grid-area: app - } - - .page-footer-moz { - grid-area: moz - } - - .page-footer-legal { - grid-area: legal - } - - .page-footer-app-list { - flex-direction: row - } - - .page-footer-app-dl img, - .page-footer-app-dl svg { - height: 38px - } -} - -@media screen and (min-width:769px) { - .page-footer-grid { - gap: 1rem; - grid-template-areas: "logo nav1 nav2 nav3 nav4""moz moz moz moz moz""legal legal legal legal . "; - grid-template-columns: minmax(260px, 2fr) repeat(4, minmax(0, 1fr)) - } - - .page-footer-app-list { - flex-direction: column - } - - .page-footer-app-dl img, - .page-footer-app-dl svg { - height: auto - } -} - -@media screen and (min-width:1441px) { - .page-footer-grid { - gap: 2.5rem - } -} - -.query-string { - font-style: italic -} - -.site-search { - display: block -} - -.page-not-found .fallback-document .fallback-link { - font-size: 1rem -} - -.tabs { - border-bottom: 1px solid var(--border-primary) -} - -.tabs ul { - display: flex; - gap: 1rem -} - -.tabs .tab-item { - border-bottom: 2px solid transparent; - padding: .5rem 0 -} - -.tabs a.tab-item { - color: var(--text-primary); - display: block; - font-size: var(--type-smaller-font-size) -} - -.tabs .tab-item[aria-current=true] { - border-bottom-color: var(--text-link) -} - -.plus-header { - padding-top: 2rem -} - -.plus-header h1 { - font: var(--type-heading-h4-font-size-mobile); - margin-bottom: 1rem -} - -@media screen and (min-width:769px) { - .plus-header h1 { - font: var(--type-heading-h4-font-size) - } -} - -.notification-list { - display: flex; - flex-direction: column -} - -.notification-card { - align-items: center; - -webkit-animation: fade-in .2s; - animation: fade-in .2s; - background-color: var(--background-primary); - border: 1px solid var(--border-secondary); - display: flex; - justify-content: space-between; - padding: .5rem -} - -.notification-card>div { - align-items: center; - display: flex -} - -.notification-card .desktop-only { - display: none -} - -@media screen and (min-width:769px) { - .notification-card .desktop-only { - display: inherit - } -} - -.notification-card.no-star { - grid-template-columns: 1fr auto -} - -.notification-card .icon { - background-color: var(--icon-secondary) -} - -.notification-card+.notification-card { - border-top: none -} - -.notification-card-description { - display: flex; - flex-direction: column; - gap: .5rem -} - -.notification-card-title { - word-wrap: anywhere; - font-family: var(--font-body); - font-weight: var(--font-body-strong-weight) -} - -.notification-card-text, -.notification-card-title { - color: var(--text-primary); - font-size: var(--type-smaller-font-size); - margin: 0 -} - -.notification-card-created { - color: var(--text-secondary); - display: none; - font-size: var(--type-tiny-font-size); - text-align: right -} - -@media screen and (min-width:769px) { - .notification-card-created { - display: inherit - } -} - -.notification-card:first-child { - border-top-left-radius: var(--elem-radius); - border-top-right-radius: var(--elem-radius); - margin-top: 1rem -} - -.notification-card:last-child { - border-bottom-left-radius: var(--elem-radius); - border-bottom-right-radius: var(--elem-radius) -} - -.notification-card.unread { - background-color: var(--accent-tertiary) -} - -@media screen and (min-width:769px) { - .notification-card-description { - align-items: center; - flex-direction: row - } -} - -.select-all-toolbar { - border: 1px solid var(--border-primary); - border-radius: var(--elem-radius); - display: flex; - gap: 1rem -} - -.empty-card, -.select-all-toolbar { - align-items: center; - background-color: var(--background-primary); - padding: .5rem -} - -.empty-card { - border: 1px solid var(--border-secondary); - margin-top: .5rem -} - -.empty-card p { - font: var(--type-article-p); - letter-spacing: .5px; - line-height: 1.5 -} - -.search-widget { - position: relative; - width: 100% -} - -.search-widget .search-filter-button { - right: .5rem -} - -@media screen and (min-width:769px) { - .search-widget { - align-items: center; - display: flex; - gap: .5rem; - margin: 0 - } -} - -.search-input-field { - -webkit-appearance: none; - background-color: var(--background-primary); - border: 1px solid var(--border-primary); - border-radius: var(--elem-radius); - color: var(--text-primary); - height: var(--form-elem-height); - min-width: 60px; - padding-left: 2rem; - width: 100% -} - -.search-input-field:focus { - outline: var(--border-primary) -} - -.search-input-field::-webkit-input-placeholder { - color: var(--text-inactive) -} - -.search-input-field::placeholder { - color: var(--text-inactive) -} - -.search-filter { - display: flex; - flex-wrap: wrap; - gap: .5rem; - padding: 1rem 0 -} - -.search-filter.inline-on-mobile { - flex-wrap: nowrap -} - -.search-filter.inline-on-mobile .search-filter-category { - width: auto -} - -.search-filter [type=search] { - flex: 1 1 -} - -.search-filter-category { - position: relative; - width: calc(50% - .25rem) -} - -.search-filter-category .dropdown-list, -.search-filter-category>.button { - width: 100% -} - -@media screen and (min-width:769px) { - .search-filter { - flex-wrap: nowrap - } - - .search-filter .submenu { - max-width: -webkit-max-content; - max-width: max-content; - right: 0 - } - - .search-filter-category, - .search-filter-category .dropdown-list { - width: auto - } - - .search-filter-category .dropdown-list.filters-menu { - left: auto; - right: 0; - width: 180px - } -} - -.limit-banner { - background: var(--background-tertiary); - border: 1px solid var(--border-secondary); - border-radius: var(--elem-radius); - margin-top: .5rem; - padding-bottom: .5rem; - padding-top: .5rem; - text-align: center -} - -.limit-banner p { - margin: .5rem -} - -.limit-banner a { - color: var(--text-link) -} - -@-webkit-keyframes fade-in { - 0% { - opacity: 0 - } - - 50% { - opacity: .5 - } - - to { - opacity: 1 - } -} - -@keyframes fade-in { - 0% { - opacity: 0 - } - - 50% { - opacity: .5 - } - - to { - opacity: 1 - } -} - -.icon-card-list { - display: flex; - flex-direction: column; - gap: .5rem -} - -.icon-card { - -webkit-animation: fade-in .2s; - animation: fade-in .2s; - background-color: var(--background-primary); - border: 1px solid var(--border-secondary); - border-radius: var(--elem-radius); - padding: 1rem 1rem 1rem .5rem; - transition: .3s ease-out -} - -.icon-card a:link, -.icon-card a:visited { - color: var(--text-primary) -} - -.icon-card:first-child { - margin-top: 1rem -} - -.icon-card>:last-child { - margin-bottom: 0 -} - -.icon-card:last-child { - margin-bottom: 1rem -} - -.icon-card-icon { - align-items: center; - background-color: var(--http-accent-color); - border-radius: .125rem; - color: var(--background-primary); - display: flex; - font-size: .75rem; - font-style: italic; - height: 3rem; - justify-content: center; - padding: .5rem; - width: 3rem -} - -.icon-card-icon span { - overflow: hidden; - text-overflow: ellipsis -} - -.icon-card-icon.html { - background-color: var(--html-accent-color) -} - -.icon-card-icon.css { - background-color: var(--css-accent-color) -} - -.icon-card-icon.javascript { - background-color: var(--js-accent-color) -} - -.icon-card-icon.http { - background-color: var(--http-accent-color) -} - -.icon-card-icon.apis { - background-color: var(--apis-accent-color) -} - -.icon-card-title-wrap { - display: flex; - gap: 1rem -} - -.icon-card-title-wrap .dropdown { - align-self: center -} - -.icon-card-title-wrap .breadcrumbs a:link, -.icon-card-title-wrap .breadcrumbs a:visited { - color: var(--text-secondary) -} - -.icon-card-title { - word-wrap: break-word; - font-size: var(--type-base-font-size-rem); - font-weight: var(--font-body-strong-weight); - margin: 0; - overflow: hidden; - text-overflow: ellipsis -} - -.icon-card-description { - color: var(--text-secondary); - font-size: var(--type-smaller-font-size) -} - -.icon-card-actions { - display: flex; - gap: .5rem -} - -.icon-card .icon-card-content { - flex: 1 1 80%; - overflow: hidden -} - -@media screen and (max-width:426px) { - .icon-card .icon-card-content { - flex-basis: 95% - } -} - -.icon-card .icon-card-content h4 { - overflow: hidden; - text-overflow: ellipsis -} - -.icon-card .icon-card-actions { - align-self: center; - margin-left: auto -} - -.icon-card .breadcrumbs { - color: var(--text-secondary); - font-size: var(--type-smaller-font-size); - list-style: none; - margin-bottom: .5rem -} - -.icon-card .breadcrumbs li { - display: inline-block; - margin: 0 -} - -.icon-card .breadcrumbs li:after { - background-color: var(--text-secondary); - content: ""; - display: inline-block; - height: 8px; - margin: 0 4px; - -webkit-mask-image: url(/static/media/chevron.fd1788325bc2a3d78610.svg); - mask-image: url(/static/media/chevron.fd1788325bc2a3d78610.svg); - -webkit-transform: rotate(-90deg); - transform: rotate(-90deg); - vertical-align: middle; - width: 8px -} - -.icon-card .breadcrumbs li:last-child:after { - content: normal -} - -article.settings { - display: block; - margin: auto; - max-width: 60em; - padding: 1rem; - width: min(90vw, 40em) -} - -article.settings h3 { - margin-top: .5rem -} - -article.settings .field-group { - margin: 2rem 0 -} - -article.settings .field-group ul { - padding: 0 -} - -article.settings .field-group ul li { - grid-gap: 0 1rem; - display: grid; - gap: 0 1rem; - grid-template-columns: 1fr minmax(5em); - margin: 2em 0 -} - -article.settings .field-group ul li h3 { - font-weight: 600 -} - -article.settings .field-group ul li span { - font-size: .8rem; - grid-column: 1/2; - line-height: 1.2em; - padding-top: .3em -} - -article.settings .field-group ul li .loading, -article.settings .field-group ul li .switch { - align-self: center; - grid-column: 2/3; - grid-row: 1/3; - justify-self: end -} - -article.settings .field-group ul li .manage, -article.settings .field-group ul li button { - align-self: center; - border: 1px solid var(--text-primary); - border-radius: var(--elem-radius); - color: var(--text-link); - font-size: .8rem; - grid-column: 2/3; - grid-row: 1/3; - height: -webkit-max-content; - height: max-content; - justify-self: end; - padding: .5rem 1rem; - width: -webkit-max-content; - width: max-content -} - -article.settings .field-group ul li button[disabled] { - background-color: var(--background-secondary); - border: 1px solid var(--text-secondary); - color: var(--text-secondary) -} - -.plus .article-actions-container { - display: flex -} - -.plus .main-page-content em { - font-style: normal; - text-decoration: underline; - -webkit-text-decoration-color: var(--text-link); - text-decoration-color: var(--text-link); - text-decoration-thickness: .15rem; - text-underline-offset: .1em -} - -.plus .main-page-content h1 { - color: var(--plus-accent-color); - font: 700 12px/120% Inter; - letter-spacing: 1.5px; - text-transform: uppercase -} - -.plus .main-page-content h1+blockquote { - border: revert; - border-radius: var(--elem-radius); - color: var(--text-primary); - margin: 1rem 0 2rem; - padding: revert -} - -.plus .main-page-content h1+blockquote p:first-child { - font: var(--type-heading-h1-mobile); - margin-bottom: 2rem -} - -@media screen and (min-width:769px) { - .plus .main-page-content h1+blockquote p:first-child { - font: var(--type-heading-h1) - } -} - -.plus .main-page-content h1+blockquote p { - font-style: italic -} - -.plus .main-page-content img { - margin: 2rem 0 -} - -.get-involved { - background-color: var(--mdn-background-dark) -} - -.get-involved section { - color: var(--text-primary); - display: flex; - flex-direction: column; - gap: 1rem; - line-height: 1.75; - margin: 0 auto; - max-width: 52rem; - padding: 2rem 1rem -} - -.get-involved section h2 { - font-family: var(--font-heading); - font-size: 1.3rem; - font-weight: 600; - line-height: 120%; - margin: 0 -} - -.get-involved section .get-involved-cta { - color: var(--category-color); - display: block; - margin-top: 1rem -} - -.about { - width: 100% -} - -.about .about-container { - margin: 0 auto; - max-width: 52rem; - padding: 0 1rem 2rem -} - -.about .about-container h1 { - margin-top: 3rem -} - -@media screen and (min-width:769px) { - .about .about-container h1 { - font-size: 3.5rem - } -} - -.about .about-container header { - align-items: center; - display: flex; - flex-direction: column; - gap: 1rem; - padding: 2rem 0 -} - -.about .about-container header .headline { - font-family: var(--font-heading); - font-size: 1.313rem; - font-style: normal; - font-weight: 400; - line-height: 175%; - margin: 0 -} - -.about .about-container p { - font-size: 1rem; - font-weight: 350; - line-height: 175% -} - -.about .about-container h2 { - font-size: 1.3rem -} - -.about .about-container .heading-break { - display: none -} - -@media screen and (min-width:769px) { - .about .about-container .heading-break { - display: block - } -} - -blockquote.quote { - border: none; - border-radius: .5rem; - display: flex; - flex-direction: column-reverse; - gap: 2rem; - margin: 2rem 0; - padding: 2rem -} - -@media screen and (max-width:40rem) { - blockquote.quote { - flex-wrap: wrap-reverse - } -} - -blockquote.quote p { - display: flex; - font-style: italic -} - -blockquote.quote p .icon { - margin-right: 1rem; - margin-top: .2rem -} - -blockquote.quote .name { - display: inline; - font-size: var(--type-base-font-size-rem); - margin: 0 -} - -main.contribute { - margin-bottom: 3rem; - width: 100% -} - -main.contribute .stats-container { - background-color: var(--background-primary); - color: var(--text-primary); - margin-bottom: 3rem; - width: 100% -} - -main.contribute section { - margin: 0 auto; - max-width: 52rem; - padding: 0 1rem -} - -main.contribute section.stats-header { - align-items: center; - display: flex; - flex-direction: column; - padding: 0 .5rem 2rem -} - -main.contribute section h1 { - font-size: 3rem; - margin-left: .5rem; - margin-top: 8rem; - text-align: center -} - -main.contribute section h1:after { - content: " "; - text-decoration: underline; - -webkit-text-decoration-color: var(--text-link); - text-decoration-color: var(--text-link); - text-decoration-thickness: .1em; - text-underline-offset: .1em -} - -main.contribute section h1:before { - background-color: var(--text-link); - content: ""; - display: inline-block; - height: 1.2em; - -webkit-mask: url(/static/media/m-logo.e19e04547be91a35c8ea.svg) no-repeat 50% 50%; - mask: url(/static/media/m-logo.e19e04547be91a35c8ea.svg) no-repeat 50% 50%; - -webkit-mask-size: cover; - mask-size: cover; - -webkit-transform: translate(-.2em, .2em); - transform: translate(-.2em, .2em); - width: 1.2em -} - -main.contribute section .quote.owd { - background-color: var(--text-link); - color: var(--background-primary) -} - -main.contribute section .quote.owd .icon, -main.contribute section .quote.pab { - background-color: var(--background-primary) -} - -main.contribute section .quote.pab { - color: var(--text-primary) -} - -main.contribute section .quote.pab .icon { - background-color: var(--text-primary) -} - -main.contribute section .stats { - grid-gap: .3em; - display: grid; - gap: .3em -} - -@media screen and (max-width:769px) { - main.contribute section .stats { - grid-template-columns: 1fr 1fr - } -} - -@media screen and (max-width:426px) { - main.contribute section .stats { - grid-template-columns: 1fr - } -} - -@media screen and (min-width:769px) { - main.contribute section .stats { - grid-template-columns: 1fr 1fr 1fr 1fr - } -} - -main.contribute section .stats li { - align-items: center; - background: var(--text-link); - color: var(--background-primary); - display: flex; - flex-direction: column; - padding: .5rem 2rem -} - -main.contribute section .stats li .number { - font-size: 3rem -} - -main.contribute section .stats li .legend { - font-size: .8rem; - max-width: 5rem; - text-align: center -} - -.contributor-spotlight-content-container { - margin: 3rem auto; - max-width: 52rem; - padding: 0 1rem -} - -.contributor-spotlight-content-container li { - line-height: 1.5; - list-style-type: disc; - margin-bottom: 1rem -} - -.contributor-spotlight-content-container ul { - padding-left: 1rem -} - -.contributor-spotlight-content-container .quote { - background-color: var(--category-color-background); - color: var(--text-primary) -} - -.contributor-spotlight-content-container .quote .icon { - background-color: var(--text-primary) -} - -.contributor-spotlight-content-container .profile-image { - border-radius: 50%; - height: 200px; - width: 200px -} - -.contributor-spotlight-content-container .profile-header { - align-items: center; - border-radius: var(--elem-radius); - display: flex; - flex-direction: column; - gap: 1rem; - padding: 1rem; - width: 100% -} - -.contributor-spotlight-content-container .profile-header h2 { - color: var(--text-primary); - margin-bottom: 0; - margin-top: 0 -} - -.contributor-spotlight-content-container .profile-header .username { - background-color: var(--category-color); - color: var(--text-invert); - font-size: 1.75rem; - padding: .2rem .4rem -} - -.mdn-cta-container { - align-items: center; - background-color: #212121; - color: #fff; - display: flex; - height: 100%; - min-height: 40px; - padding: 0 1rem; - z-index: 999 -} - -.mdn-cta-container .mdn-cta-copy { - margin: 0; - padding: 8px 0 -} - -.mdn-cta-container button { - background: none; - border: none; - opacity: .6 -} - -.mdn-cta-container button:active, -.mdn-cta-container button:focus, -.mdn-cta-container button:hover { - cursor: pointer; - opacity: 1 -} - -.mdn-cta-container button .icon { - color: #fff; - height: 16px -} - -.mdn-cta-container .mdn-cta-content { - margin: 0 auto -} - -.mdn-cta-container a { - color: var(--color-announcement-banner-accent); - min-height: 0 -} - -.mdn-cta-container a:focus, -.mdn-cta-container a:hover { - text-decoration: underline -} - -.mdn-cta-container .underlined { - font-style: normal; - -webkit-text-decoration: underline var(--color-announcement-banner-accent) .15rem; - text-decoration: underline var(--color-announcement-banner-accent) .15rem -} - -.mdn-cta-container .mdn-plus { - color: var(--color-announcement-banner-accent); - font-size: 1.2rem; - font-weight: 700 -} - -body.full-screen-overlay .mdn-cta-container { - display: none -} -*/ \ No newline at end of file diff --git a/public/mdn-style.min.css b/public/mdn-style.min.css deleted file mode 100644 index 84be08f..0000000 --- a/public/mdn-style.min.css +++ /dev/null @@ -1 +0,0 @@ -@import "https://rsms.me/inter/inter.css";html{font-family:'Inter',sans-serif}*,:after,:before{box-sizing:border-box}blockquote,body,dd,dl,figure,h1,h2,h3,h4,ol,p,ul{margin:0}html{scroll-behavior:smooth}body{text-rendering:optimizeSpeed;font-family:Inter,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-family:var(--font-body);font-size:100%;font-size:var(--base-font-size);line-height:1.75;line-height:var(--font-content-line-height)}a:not([class]){-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto}a{text-decoration:none}img,picture{max-width:100%}button,input,select,textarea{font:inherit}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:after,:before{-webkit-animation-duration:.01ms!important;animation-duration:.01ms!important;-webkit-animation-iteration-count:1!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:var(--code-token-comment)}.token.punctuation{color:var(--code-token-punctuation)}.token.attr-name,.token.builtin,.token.class-name,.token.function,.token.inserted,.token.property,.token.selector{color:var(--code-token-attribute-name)}.token.atrule,.token.attr-value{color:var(--code-token-attribute-value)}.token.keyword{color:var(--code-token-tag)}.token.boolean,.token.char,.token.constant,.token.deleted,.token.number,.token.string,.token.symbol,.token.tag{color:var(--code-token-attribute-value)}.token.builtin,.token.inserted,.token.selector,.token.template-string>.token.string{color:var(--code-token-selector)}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.notecard{--note-background:var(--background-information);--note-theme:var(--icon-information);background-color:var(--note-background);border:1px solid var(--border-secondary);border-left:4px solid var(--note-theme);border-radius:.25rem;border-radius:var(--elem-radius);box-shadow:var(--shadow-01);margin:1rem 0;padding:1rem 1rem 1rem 3rem;position:relative}.notecard,.notecard li,.notecard p{color:var(--text-secondary)}.notecard p{line-height:2;margin:0!important}.notecard:before{background-color:var(--note-theme);content:"";display:block;height:1rem;left:1rem;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;position:absolute;top:1.5rem;width:1rem}.notecard.inline{font:var(--type-body-s);margin:.5rem;padding:.125rem .375rem .125rem 1.5rem}.notecard.inline:before{display:block;height:.8rem;left:.2rem;top:.1875rem;width:.8rem}.notecard.warning{--note-background:var(--background-warning);--note-theme:var(--icon-warning)}.notecard.warning:before{-webkit-mask-image:url(/static/media/note-warning.d6e4c7b35b5ed187e936.svg);mask-image:url(/static/media/note-warning.d6e4c7b35b5ed187e936.svg)}.notecard.nonstandard{--note-background:var(--background-warning);--note-theme:var(--icon-warning)}.notecard.nonstandard:before{-webkit-mask-image:url(/static/media/nonstandard.d6e4c7b35b5ed187e936.svg);mask-image:url(/static/media/nonstandard.d6e4c7b35b5ed187e936.svg)}.notecard.error,.notecard.negative{--note-background:var(--background-critical);--note-theme:var(--icon-critical)}.notecard.error:before,.notecard.negative:before{-webkit-mask-image:url(/static/media/note-deprecated.0d2643f0c417b3670c49.svg);mask-image:url(/static/media/note-deprecated.0d2643f0c417b3670c49.svg)}.notecard.deprecated{--note-background:var(--background-critical);--note-theme:var(--icon-critical)}.notecard.deprecated:before{-webkit-mask-image:url(/images/info.svg);mask-image:url(/images/info.svg)}.notecard.experimental:before{-webkit-mask-image:url(/static/media/experimental.2f9e05f53c6dbee7791c.svg);mask-image:url(/static/media/experimental.2f9e05f53c6dbee7791c.svg)}.notecard.success{--note-background:var(--background-success);--note-theme:var(--icon-success)}.notecard.success:before{-webkit-mask-image:url(/static/media/note-info.0eafb6e7738509bce66e.svg);mask-image:url(/static/media/note-info.0eafb6e7738509bce66e.svg)}.notecard ol,.notecard ul{padding-left:2rem}.notecard p,.notecard ul{padding-bottom:.5rem}.notecard p:last-child,.notecard ul:last-child{padding-bottom:0}.notecard:last-of-type{margin-bottom:2rem}.notecard:first-of-type{margin-top:2rem}.notecard>:first-child{margin-top:0}.notecard h1,.notecard h2,.notecard h3,.notecard h4,.notecard h5,.notecard h6{color:var(--text-primary);font:1rem;font:var(--type-base-font-size-rem);margin-bottom:.5rem}.main-content .notecard a:not(.button),.main-content .notecard code{color:var(--notecard-link-color)}.main-content .notecard a:not(.button):hover,.main-content .notecard code:hover{text-decoration:none}.pagination{align-items:center;display:flex;gap:1rem;justify-content:center;padding:1rem 0}.mdn-form,.pagination-label{font-size:.833rem;font-size:var(--type-smaller-font-size)}.mdn-form{font-family:Inter,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-family:var(--font-body);font-weight:600;font-weight:var(--font-body-strong-weight)}.mdn-form-item{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem;padding-top:1rem}.mdn-form-item:first-child{padding-top:0}.mdn-form-item.is-button-row{display:flex;justify-content:flex-end}.mdn-form-item.is-button-row .button{width:auto}.mdn-form-item [type=text]{background:var(--background-primary);border:1px solid var(--border-primary);color:var(--text-primary);flex:1 1 100%;font-size:.833rem;font-size:var(--type-smaller-font-size);min-width:0;padding:.5rem}.mdn-form-item [type=text]:focus{border:1px solid var(--button-secondary-border-focus);box-shadow:0 0 0 3px var(--accent-primary-engage);box-shadow:var(--focus-effect);outline:0 none}.mdn-form-item label{width:100%}:root{--font-fallback:BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;--font-body:Inter,var(--font-fallback);--font-heading:Inter,var(--font-fallback);--font-code:Menlo,Consolas,Monaco,Liberation Mono,Lucida Console,monospace;--base-font-size:100%;--base-line-height:1.2;--intermediate-line-height:1.5;--heading-line-height:var(--base-line-height);--heading-letter-spacing:-.031rem;--font-content-line-height:1.75;--font-body-strong-weight:600;--type-heading-h1-font-size:2.488rem;--type-heading-h2-font-size:2.074rem;--type-heading-h3-font-size:1.728rem;--type-heading-h4-font-size:1.44rem;--type-heading-h5-font-size:1.2rem;--type-base-font-size-rem:1rem;--type-smaller-font-size:.833rem;--type-tiny-font-size:.694rem;--type-heading-h1-font-size-mobile:1.802rem;--type-heading-h2-font-size-mobile:1.602rem;--type-heading-h3-font-size-mobile:1.424rem;--type-heading-h4-font-size-mobile:1.266rem;--type-emphasis-m:var(--font-body-strong-weight) var(--type-smaller-font-size) /1.23 var(--font-body);--type-label-s:600 var(--type-tiny-font-size) /1.2 var(--font-heading);--type-heading-h1:600 var(--type-heading-h1-font-size-mobile) /var(--heading-line-height) var(--font-heading);--type-heading-h2:500 var(--type-heading-h2-font-size-mobile) /var(--heading-line-height) var(--font-heading);--type-heading-h3:300 var(--type-heading-h3-font-size-mobile) /var(--heading-line-height) var(--font-heading);--type-heading-h4:400 var(--type-heading-h4-font-size-mobile) /var(--heading-line-height) var(--font-heading);--type-heading-h5:400 var(--type-heading-h5-font-size) /var(--heading-line-height) var(--font-heading);--type-heading-h6:400 var(--type-base-font-size-rem) /var(--heading-line-height) var(--font-heading);--type-article-p:400 var(--type-base-font-size-rem) /var(--font-content-line-height) var(--font-body);--max-width:1440px;--gutter:1rem;--top-navigation-height:4rem;--top-navigation-offset:-4rem;--z-index-back:-1;--z-index-top:9999;--z-index-a11y:10000;--z-index-mid:500;--z-index-nav-menu:200;--z-index-search-results:101;--z-index-low:100;--z-index-search-results-home:99;--elem-radius:.25rem;--focus-effect:0 0 0 3px var(--accent-primary-engage);--form-elem-height:2rem;--sticky-header-height:0;--top-nav-height:4rem;--main-document-header-height:6rem;--icon-size:1rem}@media screen and (min-width:769px){:root{--type-heading-h1:600 var(--type-heading-h1-font-size) /var(--heading-line-height) var(--font-heading);--type-heading-h2:500 var(--type-heading-h2-font-size) /var(--heading-line-height) var(--font-heading);--type-heading-h3:300 var(--type-heading-h3-font-size) /var(--heading-line-height) var(--font-heading);--type-heading-h4:400 var(--type-heading-h4-font-size) /var(--heading-line-height) var(--font-heading)}}:target{scroll-margin-top:0;scroll-margin-top:var(--sticky-header-height)}body{accent-color:var(--accent-primary);background-color:var(--background-primary);color:var(--text-primary);scrollbar-color:var(--scrollbar-color) var(--scrollbar-bg)}body.full-screen-overlay{overflow:hidden}:focus-visible{outline-color:var(--accent-primary);outline-offset:1px;outline-style:auto}main{min-height:80vh}.about-container a:link,.about-container a:visited,.main-page-content a:link,.main-page-content a:visited{text-decoration:underline}.about-container a:focus,.about-container a:hover,.main-page-content a:focus,.main-page-content a:hover{text-decoration:none}.visually-hidden{clip:rect(1px,1px,1px,1px)!important;border:0!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.hidden{display:none}pre{word-wrap:break-word;white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap}a{color:var(--text-link)}a.external:after{background-color:var(--icon-primary);content:"";display:inline-flex;height:10px;margin-left:4px;-webkit-mask-image:url(/static/media/external.ad7e40a95bc765963433.svg);mask-image:url(/static/media/external.ad7e40a95bc765963433.svg);-webkit-mask-size:cover;mask-size:cover;width:10px}.expand-this-link:after{bottom:0;content:"";left:0;position:absolute;right:0;top:0}[type=search]::-ms-clear{display:none;height:0;width:0}[type=search]::-ms-reveal{display:none;height:0;width:0}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration,[type=search]::-webkit-search-results-button,[type=search]::-webkit-search-results-decoration{display:none}u{-webkit-text-decoration-color:var(--text-link);text-decoration-color:var(--text-link);text-decoration-thickness:.15rem;text-underline-offset:.1em}.plus,.plus .dark{--background-toc-active:var(--plus-accent-background-color);--text-link:var(--plus-accent-color);--category-color:var(--plus-accent-color);--category-color-background:var(--plus-accent-background-color);--code-color:var(--plus-code-color);--mark-color:var(--plus-mark-color)}.category-html{--background-toc-active:var(--html-accent-background-color);--category-color:var(--html-accent-color);--category-color-background:var(--html-accent-background-color);--mark-color:var(--html-mark-color)}.category-css{--background-toc-active:var(--css-accent-background-color);--category-color:var(--css-accent-color);--category-color-background:var(--css-accent-background-color);--mark-color:var(--css-mark-color)}.category-javascript{--background-toc-active:var(--js-accent-background-color);--category-color:var(--js-accent-color);--category-color-background:var(--js-accent-background-color);--mark-color:var(--js-mark-color)}.category-http{--background-toc-active:var(--http-accent-background-color);--category-color:var(--http-accent-color);--category-color-background:var(--http-accent-background-color);--mark-color:var(--http-mark-color)}.category-api{--background-toc-active:var(--apis-accent-background-color);--category-color:var(--apis-accent-color);--category-color-background:var(--apis-accent-background-color);--mark-color:var(--apis-mark-color)}.category-learn{--background-toc-active:var(--learn-accent-background-color);--category-color:var(--learn-accent-color);--category-color-background:var(--learn-accent-background-color);--mark-color:var(--api-mark-color)}.mify{margin-left:.5rem}.mify:after{content:" ";text-decoration:underline;-webkit-text-decoration-color:var(--text-link);text-decoration-color:var(--text-link);text-decoration-thickness:.1em;text-underline-offset:.1em}.mify:before{background-color:var(--text-link);content:"";display:inline-block;height:1.2em;-webkit-mask-size:cover;mask-size:cover;-webkit-transform:translate(-.2em,.2em);transform:translate(-.2em,.2em);width:1.2em}._ify:after{content:" ";text-decoration:underline;-webkit-text-decoration-color:var(--text-link);text-decoration-color:var(--text-link);text-decoration-thickness:.1em;text-underline-offset:.1em}@media(forced-colors:active){.icon{background-color:CanvasText!important}}.homepage{align-items:center;display:flex;flex-direction:column;gap:2rem;overflow-x:clip;overflow-y:visible;position:relative;width:100%}.homepage-hero{color:var(--text-primary);display:grid;grid-template-rows:fit-content(24rem);width:100%}.homepage-hero section{display:flex;flex-direction:column;gap:2rem;grid-column:1;grid-row:1;height:100%;justify-content:center;margin:0 auto;max-width:52rem;padding:0 1rem;width:100%}.homepage-hero section h1{font-size:2.2rem;font-weight:200;letter-spacing:-.5px;line-height:120%;margin:0}@media screen and (min-width:426px){.homepage-hero section h1{font-size:2.5rem}}@media screen and (min-width:769px){.homepage-hero section h1{font-size:3rem}}.homepage-hero section h1:after{content:" ";text-decoration:underline;-webkit-text-decoration-color:var(--text-link);text-decoration-color:var(--text-link);text-decoration-thickness:.15rem;text-underline-offset:.1rem}.homepage-hero section p{font-weight:300}.homepage-hero .homepage-hero-bg{--mandala-primary:var(--border-primary);background-color:rgba(1,1,1,.9);grid-column:1;grid-row:1;overflow:hidden;top:0;width:100%;z-index:-1}.homepage-hero .homepage-hero-bg .mandala-translate{-webkit-transform:translate(10rem,-8rem) scale(1.2);transform:translate(10rem,-8rem) scale(1.2)}@media screen and (min-width:426px){.homepage-hero .homepage-hero-bg .mandala-translate{-webkit-transform:translate(12rem,-8rem);transform:translate(12rem,-8rem)}}.homepage-hero .homepage-hero-search{align-self:center;display:flex;margin-bottom:1rem;max-height:4rem;max-width:40rem;width:100%}.homepage-hero .homepage-hero-search .search-input-field{background-color:rgba(1,1,1,.5);border-radius:10rem;padding:2rem}.homepage-hero .homepage-hero-search .search-input-field:focus{border-color:var(--field-focus-border);box-shadow:var(--focus-01)}.homepage-hero .homepage-hero-search .search-input-field::-webkit-input-placeholder{font-size:1.5rem}.homepage-hero .homepage-hero-search .search-input-field::placeholder{font-size:1.5rem}.homepage-hero .homepage-hero-search .search-widget{display:flex;gap:0}.homepage-hero .homepage-hero-search .search-results{box-shadow:var(--shadow-02);margin:0 1.5rem;text-align:left;top:4.2rem;width:calc(100% - 3rem);z-index:var(--z-index-search-results-home)}.homepage-hero .homepage-hero-search .search-results .result-item a{padding:.5rem 1.5rem}.homepage-hero .homepage-hero-search .search-results .result-item mark{background:none;color:var(--text-primary)}.homepage-hero .homepage-hero-search .search-results .result-item span{color:var(--text-secondary);font-weight:400}.homepage-hero .homepage-hero-search .search-results .result-item small{color:var(--text-secondary)}.homepage-hero .search-button.button{height:100%;left:auto;position:absolute;right:1.5rem;top:0}.homepage-hero .search-button.button:hover{background:none;border-color:transparent}.homepage-hero .search-button.button .button-wrap{background:none}.homepage-hero .search-button.button .button-wrap:hover{background:none;border:1px solid transparent}.homepage-hero .search-button.button .button-wrap:hover .icon{background-color:var(--text-link)}.homepage-hero .search-button.button .button-wrap .icon{background-color:var(--icon-primary);border:none}.icon{--size:var(--icon-size,1rem);background-color:var(--icon-primary);display:inline-block;flex-shrink:0;height:var(--size);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;vertical-align:middle;width:var(--size)}svg.icon{background:transparent;color:var(--icon-primary)}.icon.icon-add-filled{-webkit-mask-image:url(/static/media/add-filled.a8e6793efe0c45d06016.svg);mask-image:url(/static/media/add-filled.a8e6793efe0c45d06016.svg)}.icon.icon-add{-webkit-mask-image:url(/static/media/add.9f0957aa3417844441a2.svg);mask-image:url(/static/media/add.9f0957aa3417844441a2.svg)}.icon.icon-altname{-webkit-mask-image:url(/static/media/altname.fa41e3cb6859d720b231.svg);mask-image:url(/static/media/altname.fa41e3cb6859d720b231.svg)}.icon.icon-bell-filled{-webkit-mask-image:url(/static/media/bell-filled.92b1b0fec0b6ed04f771.svg);mask-image:url(/static/media/bell-filled.92b1b0fec0b6ed04f771.svg)}.icon.icon-bell{-webkit-mask-image:url(/static/media/bell.034a87122ec06307f900.svg);mask-image:url(/static/media/bell.034a87122ec06307f900.svg)}.icon.icon-bookmark-filled{-webkit-mask-image:url(/static/media/bookmark-filled.22802275efddc0dd3f04.svg);mask-image:url(/static/media/bookmark-filled.22802275efddc0dd3f04.svg)}.icon.icon-bookmark{-webkit-mask-image:url(/static/media/bookmark.e9ba9d27f97589ba62cc.svg);mask-image:url(/static/media/bookmark.e9ba9d27f97589ba62cc.svg)}.icon.icon-cancel{-webkit-mask-image:url(/static/media/cancel.ff1ee2551e18f9c9c8d3.svg);mask-image:url(/static/media/cancel.ff1ee2551e18f9c9c8d3.svg)}.icon.icon-checkmark{-webkit-mask-image:url(/static/media/checkmark.d05ce91f65dfc321cadd.svg);mask-image:url(/static/media/checkmark.d05ce91f65dfc321cadd.svg)}.icon.icon-chevron{-webkit-mask-image:url(/static/media/chevron.05a124d379047e16d746.svg);mask-image:url(/static/media/chevron.05a124d379047e16d746.svg)}.icon.icon-chrome{-webkit-mask-image:url(/static/media/chrome.4c57086589fd964c05f5.svg);mask-image:url(/static/media/chrome.4c57086589fd964c05f5.svg)}.icon.icon-critical{-webkit-mask-image:url(/static/media/critical.046b659f661afa9ab11f.svg);mask-image:url(/static/media/critical.046b659f661afa9ab11f.svg)}.icon.icon-deno{-webkit-mask-image:url(/static/media/deno.a791d0899729b3089500.svg);mask-image:url(/static/media/deno.a791d0899729b3089500.svg)}.icon.icon-deprecated{-webkit-mask-image:url(/static/media/deprecated.eda3b39bb2bd366d4b2b.svg);mask-image:url(/static/media/deprecated.eda3b39bb2bd366d4b2b.svg)}.icon.icon-desktop{-webkit-mask-image:url(/static/media/desktop.ae5e91df1e60ced79a5e.svg);mask-image:url(/static/media/desktop.ae5e91df1e60ced79a5e.svg)}.icon.icon-disabled{-webkit-mask-image:url(/static/media/disabled.f52f4d023359dbf8a727.svg);mask-image:url(/static/media/disabled.f52f4d023359dbf8a727.svg)}.icon.icon-edge{-webkit-mask-image:url(/static/media/edge.40018f6a959bc3e5c537.svg);mask-image:url(/static/media/edge.40018f6a959bc3e5c537.svg)}.icon.icon-edit{-webkit-mask-image:url(/static/media/edit.2e4f3bd111b39f9ebbc2.svg);mask-image:url(/static/media/edit.2e4f3bd111b39f9ebbc2.svg)}.icon.icon-ellipses{-webkit-mask-image:url(/static/media/ellipses.c6dd1c04b7ef3cba126a.svg);mask-image:url(/static/media/ellipses.c6dd1c04b7ef3cba126a.svg)}.icon.icon-experimental{-webkit-mask-image:url(/static/media/experimental.2f9e05f53c6dbee7791c.svg);mask-image:url(/static/media/experimental.2f9e05f53c6dbee7791c.svg)}.icon.icon-external{-webkit-mask-image:url(/static/media/external.ad7e40a95bc765963433.svg);mask-image:url(/static/media/external.ad7e40a95bc765963433.svg)}.icon.icon-eye-filled{-webkit-mask-image:url(/static/media/eye-filled.dd0405b418fcfecf0f77.svg);mask-image:url(/static/media/eye-filled.dd0405b418fcfecf0f77.svg)}.icon.icon-eye{-webkit-mask-image:url(/static/media/eye.b451ad8ced0662500e82.svg);mask-image:url(/static/media/eye.b451ad8ced0662500e82.svg)}.icon.icon-footnote{-webkit-mask-image:url(/static/media/footnote.adb3f56121e4f9c95ba7.svg);mask-image:url(/static/media/footnote.adb3f56121e4f9c95ba7.svg)}.icon.icon-github-mark-small{-webkit-mask-image:url(/static/media/github-mark-small.348586b8904b950b8ea8.svg);mask-image:url(/static/media/github-mark-small.348586b8904b950b8ea8.svg)}.icon.icon-ie{-webkit-mask-image:url(/static/media/ie.cf17782c766db346d9b1.svg);mask-image:url(/static/media/ie.cf17782c766db346d9b1.svg)}.icon.icon-information{-webkit-mask-image:url(/static/media/information.81a9c7bfba75e9c4e993.svg);mask-image:url(/static/media/information.81a9c7bfba75e9c4e993.svg)}.icon.icon-language{-webkit-mask-image:url(/static/media/language.e4289910782fa8d1c882.svg);mask-image:url(/static/media/language.e4289910782fa8d1c882.svg)}.icon.icon-menu-filled{-webkit-mask-image:url(/static/media/menu-filled.48a621119c4448c94d79.svg);mask-image:url(/static/media/menu-filled.48a621119c4448c94d79.svg)}.icon.icon-menu{-webkit-mask-image:url(/static/media/menu.1ed93cf1ba8c04627c11.svg);mask-image:url(/static/media/menu.1ed93cf1ba8c04627c11.svg)}.icon.icon-mobile{-webkit-mask-image:url(/static/media/mobile.7f0bdae2a317caf911ee.svg);mask-image:url(/static/media/mobile.7f0bdae2a317caf911ee.svg)}.icon.icon-more{-webkit-mask-image:url(/static/media/more.ce2ad00a1fca149a22ce.svg);mask-image:url(/static/media/more.ce2ad00a1fca149a22ce.svg)}.icon.icon-theme-dark{-webkit-mask-image:url(/static/media/theme-dark.2204a73b9b7fbc5e0219.svg);mask-image:url(/static/media/theme-dark.2204a73b9b7fbc5e0219.svg)}.icon.icon-next{-webkit-mask-image:url(/static/media/next.1ecddf89481891f59480.svg);mask-image:url(/static/media/next.1ecddf89481891f59480.svg)}.icon.icon-no{-webkit-mask-image:url(/static/media/no.d2e0aa3e7440f80dccd6.svg);mask-image:url(/static/media/no.d2e0aa3e7440f80dccd6.svg)}.icon.icon-nodejs{-webkit-mask-image:url(/static/media/nodejs.bb93afa7923c2473034b.svg);mask-image:url(/static/media/nodejs.bb93afa7923c2473034b.svg)}.icon.icon-nonstandard{-webkit-mask-image:url(/static/media/nonstandard.d6e4c7b35b5ed187e936.svg);mask-image:url(/static/media/nonstandard.d6e4c7b35b5ed187e936.svg)}.icon.icon-note-info{-webkit-mask-image:url(/static/media/note-info.0eafb6e7738509bce66e.svg);mask-image:url(/static/media/note-info.0eafb6e7738509bce66e.svg)}.icon.icon-note-warning{-webkit-mask-image:url(/static/media/note-warning.d6e4c7b35b5ed187e936.svg);mask-image:url(/static/media/note-warning.d6e4c7b35b5ed187e936.svg)}.icon.icon-note-deprecated{-webkit-mask-image:url(/static/media/note-deprecated.0d2643f0c417b3670c49.svg);mask-image:url(/static/media/note-deprecated.0d2643f0c417b3670c49.svg)}.icon.icon-opera{-webkit-mask-image:url(/static/media/opera.a0ab0c5004c00e618a00.svg);mask-image:url(/static/media/opera.a0ab0c5004c00e618a00.svg)}.icon.icon-padlock{-webkit-mask-image:url(/static/media/padlock.6210113487ca12ff25f3.svg);mask-image:url(/static/media/padlock.6210113487ca12ff25f3.svg)}.icon.icon-partial{-webkit-mask-image:url(/static/media/partial.2d8806d709221f07c72c.svg);mask-image:url(/static/media/partial.2d8806d709221f07c72c.svg)}.icon.icon-prefix{-webkit-mask-image:url(/static/media/prefix.db94a69f5867547725e5.svg);mask-image:url(/static/media/prefix.db94a69f5867547725e5.svg)}.icon.icon-preview{-webkit-mask-image:url(/static/media/preview.77ee12031f5f5ecb2962.svg);mask-image:url(/static/media/preview.77ee12031f5f5ecb2962.svg)}.icon.icon-previous{-webkit-mask-image:url(/static/media/previous.585a0363cab37d75a90d.svg);mask-image:url(/static/media/previous.585a0363cab37d75a90d.svg)}.icon.icon-quote{-webkit-mask-image:url(/static/media/quote.d88c218cc7eaf9168178.svg);mask-image:url(/static/media/quote.d88c218cc7eaf9168178.svg)}.icon.icon-safari{-webkit-mask-image:url(/static/media/safari.3679eb31121b46323304.svg);mask-image:url(/static/media/safari.3679eb31121b46323304.svg)}.icon.icon-samsunginternet{-webkit-mask-image:url(/static/media/samsunginternet.55e41ddfc05627ecc331.svg);mask-image:url(/static/media/samsunginternet.55e41ddfc05627ecc331.svg)}.icon.icon-search{-webkit-mask-image:url(/static/media/search.cebfd63a204ba9fefa74.svg);mask-image:url(/static/media/search.cebfd63a204ba9fefa74.svg)}.icon.icon-server{-webkit-mask-image:url(/static/media/server.fdad5f2f9f48879ac6c2.svg);mask-image:url(/static/media/server.fdad5f2f9f48879ac6c2.svg)}.icon.icon-sidebar{-webkit-mask-image:url(/static/media/sidebar.18421c220ec0a5e690f1.svg);mask-image:url(/static/media/sidebar.18421c220ec0a5e690f1.svg)}.icon.icon-simple-firefox{-webkit-mask-image:url(/static/media/simple-firefox.9b9181d8c30c3de88edf.svg);mask-image:url(/static/media/simple-firefox.9b9181d8c30c3de88edf.svg)}.icon.icon-small-arrow{-webkit-mask-image:url(/static/media/small-arrow.a22801b3d18b7d1ea795.svg);mask-image:url(/static/media/small-arrow.a22801b3d18b7d1ea795.svg)}.icon.icon-theme-light{-webkit-mask-image:url(/static/media/theme-light.af1aa3887c0deadaaf2e.svg);mask-image:url(/static/media/theme-light.af1aa3887c0deadaaf2e.svg)}.icon.icon-star-filled{-webkit-mask-image:url(/static/media/star-filled.358ee4566f4a4c7d438d.svg);mask-image:url(/static/media/star-filled.358ee4566f4a4c7d438d.svg)}.icon.icon-star{-webkit-mask-image:url(/static/media/star.00aab2ac065852fd407a.svg);mask-image:url(/static/media/star.00aab2ac065852fd407a.svg)}.icon.icon-theme-os-default{-webkit-mask-image:url(/static/media/theme-os-default.b14255eadab403fa2e8a.svg);mask-image:url(/static/media/theme-os-default.b14255eadab403fa2e8a.svg)}.icon.icon-thumbs-down{-webkit-mask-image:url(/static/media/thumbs-down.7ca516d7f04791a3910c.svg);mask-image:url(/static/media/thumbs-down.7ca516d7f04791a3910c.svg)}.icon.icon-thumbs-up{-webkit-mask-image:url(/static/media/thumbs-up.10a6075a46940d218431.svg);mask-image:url(/static/media/thumbs-up.10a6075a46940d218431.svg)}.icon.icon-trash{-webkit-mask-image:url(/static/media/trash.edee2ea86f1b505315f7.svg);mask-image:url(/static/media/trash.edee2ea86f1b505315f7.svg)}.icon.icon-twitter{-webkit-mask-image:url(/static/media/twitter.cc5b37feab537ddbf701.svg);mask-image:url(/static/media/twitter.cc5b37feab537ddbf701.svg)}.icon.icon-unknown{-webkit-mask-image:url(/static/media/unknown.7fd13a7673ebf93f625c.svg);mask-image:url(/static/media/unknown.7fd13a7673ebf93f625c.svg)}.icon.icon-warning{-webkit-mask-image:url(/static/media/warning.334964ef472eac4cfb78.svg);mask-image:url(/static/media/warning.334964ef472eac4cfb78.svg)}.icon.icon-webview{-webkit-mask-image:url(/static/media/webview.7d9bf32041e0c57240b5.svg);mask-image:url(/static/media/webview.7d9bf32041e0c57240b5.svg)}.icon.icon-yes{-webkit-mask-image:url(/static/media/yes.70caad81ca5e3d9f7576.svg);mask-image:url(/static/media/yes.70caad81ca5e3d9f7576.svg)}.icon.icon-yes-circle{-webkit-mask-image:url(/static/media/yes-circle.1c4f7a083d20df35ca93.svg);mask-image:url(/static/media/yes-circle.1c4f7a083d20df35ca93.svg)}.button,button{-webkit-appearance:none;appearance:none;background:none;border:none}.button{--button-bg:var(--button-primary-default);--button-border-color:var(--button-primary-default);--button-focus-effect:var(--focus-effect);--button-height:var(--form-elem-height,2rem);--button-color:var(--background-primary);--button-font:var(--type-emphasis-m);--button-padding:.5rem;--button-radius:var(--elem-radius,0.25rem);border-radius:var(--button-radius);cursor:pointer;display:inline-block;padding:0;text-decoration:none}.button-wrap{align-items:center;background-color:var(--button-bg);border:1px solid var(--button-border-color);border-radius:var(--button-radius);color:var(--button-color);display:flex;font:var(--button-font);gap:.25rem;height:var(--button-height);justify-content:center;padding-left:var(--button-padding);padding-right:var(--button-padding);position:relative}.button .icon{background-color:var(--button-color);margin:0 -1px}.button.hover,.button:hover{--button-bg:var(--button-primary-hover);--button-border-color:var(--button-bg)}.button.active,.button:active{--button-bg:var(--button-primary-active)}.button.focus,.button:focus{outline:none}.button.focus .button-wrap,.button:focus .button-wrap{border:1px solid var(--button-secondary-border-focus);box-shadow:var(--button-focus-effect)}.button.button.inactive,.button.button[disabled]{cursor:default;opacity:.65}.button.button.inactive:hover,.button.button[disabled]:hover{--button-bg:inherit;--button-border-color:transparent}.button.small,.button.small .button-wrap{--button-height:1.75rem;--button-padding:.25rem}.button.secondary{--button-bg:var(--button-secondary-default);--button-border-color:var(--border-primary);--button-color:var(--text-secondary)}.button.secondary:hover{--button-bg:var(--button-secondary-hover)}.button.secondary:active{--button-bg:var(--button-secondary-active)}.button.secondary:focus{--button-border-color:var(--button-secondary-border-focus)}.button.action{--button-bg:transparent;--button-border-color:var(--button-bg);--button-color:var(--text-secondary);--button-font:var(--type-label-s)}.button.action.has-icon{--button-font:var(--type-emphasis-m);text-transform:none}.button.action:hover{--button-bg:var(--button-secondary-hover)}.button.action:active{--button-bg:var(--button-secondary-active)}.button.action:focus{--button-border-color:var(--button-secondary-border-focus)}.button.action .button-wrap{text-transform:uppercase}.button.action.highlight{--button-color:var(--button-primary-default)}.button.select{--button-bg:var(--background-primary);--button-border-color:var(--border-primary);--button-color:var(--text-secondary);-webkit-appearance:none;appearance:none;background:none;border:none;padding:0;text-decoration:none}.button.select .button-wrap{box-shadow:var(--shadow-01);padding-right:26px;position:relative}.button.select .button-wrap:after{background-color:var(--icon-primary);content:"";display:block;height:16px;-webkit-mask-image:url(/static/media/small-arrow.a22801b3d18b7d1ea795.svg);mask-image:url(/static/media/small-arrow.a22801b3d18b7d1ea795.svg);-webkit-mask-size:cover;mask-size:cover;position:absolute;right:.5rem;top:calc(50% - .5rem);width:16px}.header-search{max-width:100%}.header-search .search-widget{margin:0 auto;max-width:20rem;position:relative;width:100%}@media screen and (min-width:769px){.header-search .search-widget{align-items:center;display:flex;gap:.5rem}}.header-search .search-input-field{-webkit-appearance:none;background-color:var(--background-primary);border:1px solid var(--border-primary);border-radius:100px;caret-color:var(--text-link);color:var(--text-primary);height:var(--form-elem-height);min-width:5rem;padding-left:1rem;padding-right:2rem;width:100%}@-webkit-keyframes blink{0%,to{-webkit-text-decoration-line:none;text-decoration-line:none}50%{-webkit-text-decoration-line:underline;text-decoration-line:underline}}@keyframes blink{0%,to{-webkit-text-decoration-line:none;text-decoration-line:none}50%{-webkit-text-decoration-line:underline;text-decoration-line:underline}}@media screen and (min-width:992px){.header-search .search-input-field:invalid{width:1rem}}.header-search .search-input-field:focus,.header-search .search-input-field:valid{width:inherit}.header-search .search-input-field:invalid::-webkit-input-placeholder{-webkit-animation:blink 2s step-end infinite;animation:blink 2s step-end infinite;caret-color:transparent}.header-search .search-input-field:invalid,.header-search .search-input-field:invalid::placeholder{-webkit-animation:blink 2s step-end infinite;animation:blink 2s step-end infinite;caret-color:transparent}@media(prefers-reduced-motion:reduce){.header-search .search-input-field:invalid::-webkit-input-placeholder{caret-color:auto}.header-search .search-input-field:invalid,.header-search .search-input-field:invalid::placeholder{caret-color:auto}}.header-search .search-input-field:valid::-webkit-input-placeholder{-webkit-animation:none;animation:none}.header-search .search-input-field:valid,.header-search .search-input-field:valid::placeholder{-webkit-animation:none;animation:none}.header-search .search-input-field:not(:focus):valid::-webkit-input-placeholder{-webkit-text-decoration-line:none;text-decoration-line:none}.header-search .search-input-field:not(:focus):valid,.header-search .search-input-field:not(:focus):valid::placeholder{-webkit-text-decoration-line:none;text-decoration-line:none}.header-search .search-input-field:not(:focus),.header-search .search-input-field:not(:focus)::placeholder{-webkit-animation:none;animation:none;-webkit-text-decoration-line:underline;text-decoration-line:underline}.header-search .search-input-field:not(:focus)::-webkit-input-placeholder{-webkit-animation:none;animation:none;-webkit-text-decoration-line:underline;text-decoration-line:underline}.header-search .search-input-field:not(:focus)::placeholder{-webkit-animation:none;animation:none;-webkit-text-decoration-line:underline;text-decoration-line:underline}.header-search .search-input-field:focus{border-color:var(--category-color);box-shadow:0 0 0 3px var(--blend-color),0 0 0 3px var(--category-color);outline:0 none}.header-search .search-input-field::-webkit-input-placeholder{font:var(--type-body-l);opacity:1;-webkit-text-decoration-color:var(--text-link);text-decoration-color:var(--text-link);text-decoration-thickness:.15rem;text-underline-offset:.1em}.header-search .search-input-field,.header-search .search-input-field::placeholder{font:var(--type-body-l);opacity:1;-webkit-text-decoration-color:var(--text-link);text-decoration-color:var(--text-link);text-decoration-thickness:.15rem;text-underline-offset:.1em}.header-search .server-error{color:var(--icon-critical);margin:0}.header-search .search-results,.homepage-hero-search .search-results{border:1px solid var(--border-secondary);border-radius:var(--elem-radius);box-shadow:var(--shadow-01);left:0;position:absolute;top:42px;width:100%;z-index:var(--z-index-search-results)}.header-search .search-results,.header-search .search-results a[href],.header-search .search-results mark,.homepage-hero-search .search-results,.homepage-hero-search .search-results a[href],.homepage-hero-search .search-results mark{color:var(--text-primary)}.header-search .search-results .indexing-warning,.homepage-hero-search .search-results .indexing-warning{color:var(--icon-warning)}.header-search .search-results .nothing-found,.homepage-hero-search .search-results .nothing-found{font-style:italic}.header-search .search-results .result-item,.homepage-hero-search .search-results .result-item{background:var(--background-secondary);border-bottom:1px solid var(--border-secondary);font-size:var(--type-smaller-font-size);word-break:break-word}.header-search .search-results .result-item:first-child,.homepage-hero-search .search-results .result-item:first-child{border-radius:var(--elem-radius) var(--elem-radius) 0 0}.header-search .search-results .result-item:last-child,.homepage-hero-search .search-results .result-item:last-child{border-radius:0 0 var(--elem-radius) var(--elem-radius)}.header-search .search-results .result-item.nothing-found code,.homepage-hero-search .search-results .result-item.nothing-found code{font-size:.8125rem}.header-search .search-results .result-item a,.homepage-hero-search .search-results .result-item a{display:block;padding:.5rem}.header-search .search-results .result-item.highlight,.header-search .search-results .result-item:hover,.homepage-hero-search .search-results .result-item.highlight,.homepage-hero-search .search-results .result-item:hover{background-color:var(--border-secondary)}.header-search .search-results .result-item.qs-collection b:after,.homepage-hero-search .search-results .result-item.qs-collection b:after{border:1px solid var(--text-primary-red);border-radius:.5rem;content:"collection";font-size:.5rem;line-height:.5rem;margin-bottom:.5rem;margin-left:.5rem;padding:.125rem;vertical-align:super}.header-search .search-results .result-item:focus,.header-search .search-results .result-item:hover,.homepage-hero-search .search-results .result-item:focus,.homepage-hero-search .search-results .result-item:hover{cursor:pointer}.header-search .search-results div:last-child,.homepage-hero-search .search-results div:last-child{border-bottom:0}.header-search .search-results mark,.homepage-hero-search .search-results mark{background-color:var(--mark-color)}.header-search .search-results small,.homepage-hero-search .search-results small{overflow-wrap:break-word}.header-search .search-results a,.homepage-hero-search .search-results a{text-overflow:ellipsis}.header-search .search-results div.searchindex-error,.homepage-hero-search .search-results div.searchindex-error{color:var(--icon-critical)}.search-form{display:flex;position:relative}.button.clear-search-button,.button.search-button{--button-color:var(--icon-secondary);--button-height:1.5rem;--button-padding:0;position:absolute;right:.75rem;top:.25rem;width:1.5rem}.button.clear-search-button:hover,.button.search-button:hover{background:transparent}@media screen and (min-width:769px){.button.clear-search-button,.button.search-button{right:1.2rem;width:1.5rem}}.button.clear-search-button{display:none}.header-search .search-input-field:focus~.button.clear-search-button,.header-search .search-input-field:valid~.button.clear-search-button{display:block;right:2.8rem}.mandala-container{--mandala-primary:#4e4e4e;--mandala-accent-1:var(--html-accent-color);--mandala-accent-2:var(--http-accent-color);--mandala-accent-3:var(--js-accent-color);--mandala-accent-4:#b3b3b3;display:flex;justify-content:center}.mandala-container .mandala-rotate>svg{-webkit-animation:rotation 500s linear infinite;animation:rotation 500s linear infinite}.mandala-container svg{font-size:1.5rem;font-weight:300;-webkit-user-select:none;user-select:none}.mandala-container svg>text{fill:var(--mandala-primary)}.mandala-container .mandala-accent-1{font-size:1.5rem}.mandala-container .mandala-accent-2{font-size:1.3rem}.mandala-container .mandala-accent-3{font-size:1.2rem}.mandala-container .mandala-accent-4{font-size:1.1rem}.mandala-container .mandala-accent-5{font-size:1rem}.mandala-container.animate-colors svg>text>textPath>tspan{-webkit-animation:mandala-color-change 50s infinite;animation:mandala-color-change 50s infinite;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;fill:var(--mandala-primary)}.mandala-container.animate-colors .mandala-accent-1>textPath>tspan{fill:var(--mandala-accent-1);-webkit-animation-delay:-15s;animation-delay:-15s}.mandala-container.animate-colors .mandala-accent-2>textPath>tspan{fill:var(--mandala-accent-2);-webkit-animation-delay:-20s;animation-delay:-20s}.mandala-container.animate-colors .mandala-accent-3>textPath>tspan{fill:var(--mandala-accent-3);-webkit-animation-delay:-30s;animation-delay:-30s}.mandala-container.animate-colors .mandala-accent-5>textPath>tspan{fill:var(--mandala-accent-4);-webkit-animation-delay:-40s;animation-delay:-40s}@-webkit-keyframes rotation{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes rotation{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@-webkit-keyframes mandala-color-change{0%{fill:var(--mandala-primary)}10%{fill:var(--mandala-primary)}15%{fill:var(--mandala-accent-1)}20%{fill:var(--mandala-primary)}25%{fill:var(--mandala-primary)}30%{fill:var(--mandala-accent-2)}35%{fill:var(--mandala-primary)}40%{fill:var(--mandala-primary)}50%{fill:var(--mandala-accent-3)}55%{fill:var(--mandala-primary)}60%{fill:var(--mandala-primary)}65%{fill:var(--mandala-accent-4)}70%{fill:var(--mandala-primary)}to{fill:var(--mandala-primary)}}@keyframes mandala-color-change{0%{fill:var(--mandala-primary)}10%{fill:var(--mandala-primary)}15%{fill:var(--mandala-accent-1)}20%{fill:var(--mandala-primary)}25%{fill:var(--mandala-primary)}30%{fill:var(--mandala-accent-2)}35%{fill:var(--mandala-primary)}40%{fill:var(--mandala-primary)}50%{fill:var(--mandala-accent-3)}55%{fill:var(--mandala-primary)}60%{fill:var(--mandala-primary)}65%{fill:var(--mandala-accent-4)}70%{fill:var(--mandala-primary)}to{fill:var(--mandala-primary)}}.featured-articles{align-items:flex-start;display:flex;flex-direction:column;gap:1rem;padding:0 1rem}.featured-articles h2{font:var(--type-heading-h4);margin-top:0}.featured-articles .tile-container{grid-gap:1rem;display:grid;gap:1rem;grid-auto-flow:row;max-width:52rem}@media screen and (min-width:769px){.featured-articles .tile-container{grid-template-columns:repeat(2,1fr)}}.featured-articles .article-tile{border:1px solid var(--border-primary);border-radius:.5rem;display:flex;flex-direction:column;padding:1rem}.featured-articles .article-tile:hover{box-shadow:var(--shadow-02)}.featured-articles .article-tile .tile-tag{color:var(--text-primary);font-weight:500}.featured-articles .article-tile .tile-tag:hover{text-decoration:underline}.featured-articles .article-tile .tile-title{align-items:flex-end;display:flex;flex-grow:1;font:var(--type-heading-h5);font-weight:500;line-height:var(--intermediate-line-height);margin:0 0 1rem}.featured-articles .article-tile .tile-title a{color:var(--text-primary)}.featured-articles .article-tile .tile-title a:focus,.featured-articles .article-tile .tile-title a:hover{text-decoration:underline}.featured-articles .article-tile p{font:var(--type-smaller-font-size);line-height:var(--base-line-height);margin:0;max-height:calc(3em*var(--base-line-height));overflow:hidden;position:relative}.featured-articles .article-tile p:after{background:linear-gradient(to right,transparent,var(--background-primary) 75%);content:"";display:block;height:calc(1em*var(--base-line-height));pointer-events:none;position:absolute;right:0;top:calc(2em*var(--base-line-height));width:20ch}.featured-articles .article-tile p:dir(rtl):after{background:linear-gradient(to left,transparent,var(--background-primary) 75%);left:0;right:auto}@media screen and (min-width:769px){.featured-articles .article-tile p{min-height:calc(3em*var(--base-line-height))}}.latest-news{display:flex;flex-direction:column;gap:1rem;max-width:52rem;padding:0 1rem;width:100%}@media screen and (min-width:1200px){.latest-news{padding:0}}.latest-news h2{font:var(--type-heading-h4);margin-top:1rem}.latest-news h5{margin:0}.latest-news .news-item{display:flex;flex-direction:column;justify-content:space-between;padding:.7rem}@media screen and (min-width:769px){.latest-news .news-item{flex-direction:revert}}.latest-news .news-item:nth-child(odd){background:var(--background-secondary);border-radius:var(--elem-radius)}.latest-news .news-item .news-date{align-items:center;display:flex;font-size:12px;line-height:175%}.latest-news .news-title{display:flex;flex-direction:column;gap:.125rem;line-height:var(--base-line-height);margin:0}.latest-news .news-title a{color:var(--text-primary)}.latest-news .news-title a:hover{color:var(--text-primary);text-decoration:underline}.latest-news .news-title .news-source{color:var(--text-secondary);font-size:var(--type-tiny-font-size)}.recent-contributions{display:flex;flex-direction:column;gap:1rem;max-width:52rem;padding:0 1rem;width:100%}@media screen and (min-width:1200px){.recent-contributions{padding:0}}.recent-contributions h2{font:var(--type-heading-h4);margin-top:1rem}.recent-contributions h5{margin:0}.recent-contributions .request-item{display:flex;flex-direction:column;justify-content:space-between;padding:.7rem}@media screen and (min-width:769px){.recent-contributions .request-item{flex-direction:revert}}.recent-contributions .request-item:nth-child(odd){background:var(--background-secondary);border-radius:var(--elem-radius)}.recent-contributions .request-item .request-date{align-items:center;display:flex;font-size:12px;line-height:175%}.recent-contributions .request-title{display:flex;flex-direction:column;gap:.125rem;line-height:var(--base-line-height);margin:0}.recent-contributions .request-title a{color:var(--text-primary)}.recent-contributions .request-title a:hover{color:var(--text-primary);text-decoration:underline}.recent-contributions .request-title .request-repo{color:var(--text-secondary);font-size:var(--type-tiny-font-size)}.contributor-spotlight{align-items:center;color:var(--text-primary);display:flex;flex-direction:column;padding:2rem 1rem;position:relative;width:100%}.contributor-spotlight blockquote{border:0;display:flex;font-style:italic;margin:0;padding:0}.contributor-spotlight blockquote .icon{margin-right:.5rem;margin-top:.25rem}.contributor-spotlight h4{font-family:var(--font-body);font-size:var(--type-smaller-font-size)}.contributor-spotlight .text-col{align-items:center;border-radius:.3rem;display:flex;flex-direction:column;gap:1rem;max-width:52rem;width:100%}.contributor-spotlight .text-col h3{font-size:var(--type-heading-h5-font-size)}.contributor-spotlight .spotlight-cta{--button-bg:var(--text-link);--button-border-color:#1b1b1b;--button-color:var(--mdn-color-black);--button-radius:10rem;--button-padding:1rem;--button-primary-hover:#696969;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.contributor-spotlight .wrapper{align-items:center;display:flex;flex-direction:column;gap:2rem;max-width:52rem;padding:2rem 1rem;width:100%}.contributor-spotlight .contributor-graphic{align-items:center;display:flex;justify-content:center;width:50%;word-break:break-word}.contributor-spotlight .contributor-graphic img{height:-webkit-max-content;height:max-content;max-width:90%}.contributor-spotlight .contributor-name{background-color:var(--mdn-color-white);color:var(--mdn-color-black);font-size:1.5rem;font-weight:650;line-height:1.4;text-transform:uppercase;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.contributor-spotlight .contributor-name:after,.contributor-spotlight .contributor-name:before{content:" "}.contributor-spotlight .contributor-name:link,.contributor-spotlight .contributor-name:visited{color:var(--mdn-color-black);text-decoration:none}.contributor-spotlight .contributor-name:focus,.contributor-spotlight .contributor-name:hover{text-decoration:underline}@media screen and (min-width:769px){.contributor-spotlight .wrapper{align-items:normal;flex-direction:row}.contributor-spotlight .text-col{align-items:normal;text-align:left}}.contributor-spotlight .mandala-container{--mandala-primary:var(--border-primary);background:rgba(1,1,1,.9);height:100%;overflow:hidden;position:absolute;top:0;width:100%;z-index:-1}.contributor-spotlight .mandala-container .mandala-translate{-webkit-transform:translate(-5rem);transform:translate(-5rem)}@-webkit-keyframes slow-pulse{0%{opacity:0}50%{opacity:1}to{opacity:0}}@keyframes slow-pulse{0%{opacity:0}50%{opacity:1}to{opacity:0}}.generic-loading{align-items:center;-webkit-animation:slow-pulse 2s infinite normal;animation:slow-pulse 2s infinite normal;-webkit-animation-delay:1s;animation-delay:1s;display:flex;justify-content:center;width:100%}.bc-table{border:1px solid var(--border-primary);border-collapse:separate;border-radius:var(--elem-radius);border-spacing:0;margin:1rem 0;width:100%}.bc-table td,.bc-table th{border-width:1px;border-bottom:1px solid var(--border-secondary);border-left:1px solid var(--border-secondary);border-right:0 solid var(--border-secondary);border-top:0 solid var(--border-secondary);font-weight:500;padding:0}@media screen and (min-width:769px){.bc-table td,.bc-table th{padding:.4rem}.bc-table td,.bc-table td code,.bc-table th,.bc-table th code{font-size:var(--type-smaller-font-size)}}.bc-table th{padding:.4rem}.bc-table tbody tr{height:3rem}@media screen and (min-width:769px){.bc-table tbody tr:last-child td,.bc-table tbody tr:last-child th{border-bottom-width:0}}.bc-table tbody tr th{border-left-width:0;vertical-align:middle}.bc-table tbody .bc-support{vertical-align:top}.bc-table tbody .bc-support button{cursor:pointer;width:100%}.bc-table tbody .bc-support.bc-supports-no>button>span{color:var(--text-primary-red)}.bc-table tbody .bc-support.bc-supports-partial>button>span{color:var(--text-primary-yellow)}.bc-table tbody .bc-support.bc-supports-preview>button>span{color:var(--text-primary-blue)}.bc-table tbody .bc-support.bc-supports-yes>button>span{color:var(--text-primary-green)}.bc-table tbody .bc-history td{border-left-width:0}.bc-table tbody .bc-history .icon.icon-removed-partial{-webkit-mask-image:url(/static/media/partial.2d8806d709221f07c72c.svg);mask-image:url(/static/media/partial.2d8806d709221f07c72c.svg)}.bc-table th{background:var(--background-tertiary);vertical-align:bottom}.bc-table .bc-supports{margin-bottom:1rem}.bc-table .bc-supports .icon-wrap{background:var(--background-primary)}.bc-table .bc-supports.bc-supports-removed-partial .bcd-cell-text-copy{color:var(--text-primary-yellow)}.bc-table .icon-wrap .bc-support-level{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px}.bc-table .bc-support>button>.icon-wrap{display:block}.bc-table .bc-support .icon.icon-removed-partial{background-color:var(--icon-critical);-webkit-mask-image:url(/static/media/no.d2e0aa3e7440f80dccd6.svg);mask-image:url(/static/media/no.d2e0aa3e7440f80dccd6.svg)}.bc-table .bc-support.bc-supports-removed-partial .bcd-cell-text-copy{color:var(--text-primary-red)}.bc-table .bc-feature-depth-2{border-left-width:8px}.bc-head-txt-label{left:calc(50% - .5rem);line-height:1;padding-top:.5rem;position:relative;-webkit-transform:rotate(180deg);transform:rotate(180deg);white-space:nowrap;-webkit-writing-mode:vertical-rl;writing-mode:vertical-rl}.bc-head-icon-symbol{margin-bottom:.3rem}.bc-support{text-align:center;vertical-align:middle}.bc-level-no{background-color:var(--icon-critical)}.bc-level-preview{background-color:var(--icon-information)}.bc-legend-items-container{display:flex;flex-wrap:wrap;font-size:var(--type-smaller-font-size);gap:1.5rem;margin-bottom:2rem}.bc-legend-tip{font-size:var(--type-smaller-font-size);font-style:italic;margin-bottom:1rem;margin-top:0}.bc-legend-item{align-items:center;display:flex;gap:.5rem}.bc-legend-item-dt{display:flex}.bc-legend-item-dt .icon{background-color:var(--icon-primary)}.bc-platforms{height:2rem}.bc-platforms th{text-align:center}.bc-platforms td{border:none}.bc-browsers th{text-align:center}.bc-browsers td{border-width:0 0 1px}.bc-notes-list{margin:.5rem 0;position:relative;text-align:left;width:100%}.bc-notes-list:before{background:var(--border-primary);content:"";height:calc(100% - .25rem);left:7px;margin-top:.25rem;position:absolute;width:2px;z-index:-1}.bc-notes-list .bc-notes-wrapper:last-child dd:last-child{position:relative}.bc-notes-list .bc-notes-wrapper:last-child dd:last-child:before{background:var(--background-primary);bottom:0;content:"";height:calc(100% - 6px);left:7px;position:absolute;width:2px;z-index:-1}.bc-notes-list .bc-level-yes.icon.icon-yes{background-color:var(--icon-success);-webkit-mask-image:url(/static/media/yes-circle.1c4f7a083d20df35ca93.svg);mask-image:url(/static/media/yes-circle.1c4f7a083d20df35ca93.svg)}.bc-notes-list .bc-supports-dd .icon{background:var(--border-primary);border:3px solid var(--background-primary);border-radius:50%;-webkit-mask-image:none;mask-image:none}.bc-notes-list .bc-version-label{display:inline}.bc-notes-list abbr{margin-right:4px}.bc-notes-list dd{margin-bottom:1rem;padding-left:1.5rem;text-indent:-1.5rem}.bc-notes-list dd:last-child{margin-bottom:2rem}.bc-notes-wrapper{color:var(--text-primary);margin-bottom:1rem}.bc-notes-wrapper:last-child{margin-bottom:0}dl.bc-notes-list dt.bc-supports{margin-top:1rem}dl.bc-notes-list dt.bc-supports:first-child{margin-top:0}dl.bc-notes-list dd.bc-supports-dd{margin-bottom:1rem}dl.bc-notes-list dd.bc-supports-dd:last-child{margin-bottom:0}.offscreen,.only-icon span{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px}.bc-table-row-header{align-items:baseline;display:inline-flex;width:100%}.bc-table-row-header code{overflow:hidden}.bc-table-row-header .left-side,.bc-table-row-header .right-side{overflow:hidden;white-space:pre}.bc-table-row-header .left-side{flex:0 1 auto;text-overflow:ellipsis}.bc-table-row-header .right-side{flex:1 0 auto}.bc-table-row-header .bc-icons{display:flex;gap:.5rem;margin-top:.25rem}.bc-table-row-header .bc-icons .icon{background-color:var(--icon-secondary)}.bc-table-row-header .bc-icons .icon:hover{background-color:var(--icon-primary)}.bc-github-link{font:var(--type-smaller-font-size)}.main-page-content .bc-legend dd,.main-page-content .bc-legend dt{margin-bottom:0;margin-left:0;margin-top:0}.main-page-content .bc-supports-dd{margin:0}@media screen and (max-width:425px){thead{display:none}td.bc-support{border-left-width:0;display:block}.bc-feature,.bc-history>td,.bc-support>button{align-content:center;display:flex;flex-wrap:wrap;gap:.5rem}.bc-history-desktop{display:none}.table-scroll{overflow-x:auto}}@media screen and (min-width:426px){.bc-table thead{display:table-header-group}.bc-table thead .bc-platforms th{vertical-align:revert}.bc-table td,.bc-table th{background:inherit;padding:.25rem;width:2rem}.bc-table td.bc-support{padding:0}.bc-table td.bc-support>button{padding:.25rem}.bc-table tr.bc-history-desktop{display:table-row}.table-scroll{margin:0 -3rem;overflow:auto;width:100vw}.table-scroll-inner{min-width:-webkit-max-content;min-width:max-content;padding:0 3rem;position:relative}.table-scroll-inner:after{bottom:0;content:"";height:10px;position:absolute;right:0;width:10px}.bc-browser-name,.bc-support-level{display:none}.bc-notes-list{margin-left:20%;width:auto}.bc-support .bc-support-level{display:none}.bc-support[aria-expanded=true]{position:relative}.bc-support[aria-expanded=true]:after{background:var(--text-primary);bottom:-1px;content:"";height:2px;left:0;position:absolute;width:100%}.bc-support[aria-expanded=true] .bc-history-mobile{display:none}.bc-has-history{cursor:pointer}.bc-has-history:hover{background:var(--background-secondary)}}@media screen and (min-width:769px){.table-scroll{width:calc(100% + 6rem)}.bc-table tbody th{width:20%}}@media screen and (min-width:1200px){.table-scroll{margin:0;width:100%}.table-scroll-inner{padding:0}}.bcd-cell-text-wrapper{display:flex;gap:.5rem}@media screen and (min-width:769px){.bcd-cell-text-wrapper{align-items:center;flex-direction:column}}.bcd-cell-text-copy{color:var(--text-primary);display:flex;gap:.5rem}.bc-supports-yes .bcd-cell-text-copy{color:var(--text-primary-green)}.bc-supports-no .bcd-cell-text-copy{color:var(--text-primary-red)}.bc-supports-partial .bcd-cell-text-copy{color:var(--text-primary-yellow)}.bcd-cell-icons{display:flex;gap:.5rem}@media screen and (min-width:769px){.bcd-cell-icons{display:block}}.bc-notes-wrapper .bcd-cell-text-wrapper{flex-direction:row}@media screen and (min-width:769px){.bc-table td{height:2rem}.bc-table td.bc-support>button{padding:.5rem .25rem}}.container{margin-left:auto;margin-right:auto;max-width:var(--max-width);padding-left:var(--gutter);padding-right:var(--gutter);width:100%}.logo{align-items:center;display:flex}.logo svg{height:1.5rem;margin-top:.3rem}.dark .logo-text,.high-contrast-black .logo-text{fill:#fff}.auth-container .signin-link{align-items:center;display:inline-flex;font-weight:var(--font-body-strong-weight);height:2rem;text-align:center}.auth-container .signin-link:link,.auth-container .signin-link:visited{color:var(--text-secondary)}.mdn-plus-subscribe-link{--button-padding:1rem;margin:0 auto;max-width:150px;text-align:center;white-space:nowrap}.auth-container{display:flex;flex-flow:column-reverse;font-family:var(--font-body);font-size:var(--type-smaller-font-size);font-weight:var(--font-body-strong-weight);gap:.5rem;list-style:none;margin-bottom:.5rem;padding:0;text-align:center}@media screen and (min-width:992px){.auth-container{align-items:center;flex-flow:row;gap:1rem;justify-content:flex-end;margin:0;text-align:left;text-align:initial;width:-webkit-min-content;width:min-content}}@media screen and (min-width:820px){.auth-container{width:auto}}.submenu{background-color:var(--background-primary);list-style:none;margin:0;padding:0}.submenu li{width:100%}.submenu .submenu-item,.submenu a{align-items:center;border:1px solid transparent;color:var(--text-primary);display:flex;height:100%;padding:.5rem;width:100%}li:last-child .submenu .submenu-item:not(:focus),li:last-child .submenu a:not(:focus){border-bottom-color:transparent}.submenu .submenu-item:hover,.submenu a:hover{background-color:var(--border-secondary);text-decoration:none}.main-menu .submenu .submenu-item:hover,.main-menu .submenu a:hover{background-color:var(--background-secondary)}.submenu .submenu-item:focus,.submenu a:focus{border:1px solid var(--button-secondary-border-focus);box-shadow:var(--button-focus-effect)}.submenu .submenu-item .icon,.submenu a .icon{margin-right:.5rem}@media screen and (min-width:992px){.submenu.inline-submenu-lg{background-color:var(--background-secondary);border:1px solid var(--border-primary);border-radius:var(--elem-radius);box-shadow:var(--shadow-02);max-width:25rem;padding:.5rem;position:absolute;top:calc(100% + 4px);width:-webkit-max-content;width:max-content;z-index:var(--z-index-mid)}.main-menu .submenu.inline-submenu-lg{background-color:var(--background-primary)}.submenu.inline-submenu-lg .submenu-item{border-radius:var(--elem-radius);padding:.75rem}.submenu.inline-submenu-lg:before{content:"";display:block;height:8px;left:0;position:absolute;top:-8px;width:100%}}@media screen and (min-width:769px){.submenu:not(.inline-submenu-lg){background-color:var(--background-secondary);border:1px solid var(--border-primary);border-radius:var(--elem-radius);box-shadow:var(--shadow-02);max-width:25rem;padding:.5rem;position:absolute;top:calc(100% + 4px);width:-webkit-max-content;width:max-content;z-index:var(--z-index-mid)}.main-menu .submenu:not(.inline-submenu-lg){background-color:var(--background-primary)}.submenu:not(.inline-submenu-lg) .submenu-item{border-radius:var(--elem-radius);padding:.75rem}.submenu:not(.inline-submenu-lg):before{content:"";display:block;height:8px;left:0;position:absolute;top:-8px;width:100%}}.submenu-header{display:block;padding:1rem}.submenu-header .submenu-item{padding:0}.submenu-header .submenu-item:hover{background:none}@media screen and (min-width:769px){.submenu-header{border-bottom:1px solid var(--border-primary)}}.submenu-icon{background-color:var(--icon-primary);height:2rem;margin-right:.75rem;position:relative;width:.2rem}.submenu-item,.submenu-item-heading{font-size:var(--type-smaller-font-size)}@media screen and (min-width:769px){.submenu-item-heading:not(:only-child),.submenu-item:not(:only-child){font-weight:var(--font-body-strong-weight)}}.submenu-item-description{display:none}@media screen and (min-width:769px){.submenu-item-description{display:block;font-size:var(--type-tiny-font-size);margin:.25rem 0 0}}.submenu-item-subtext{font-weight:var(--font-body-strong-weight)}.submenu-item-dot~.submenu-content-container>.submenu-item-heading:after{background:var(--text-primary-blue);border:1px solid var(--background-primary);border-radius:2rem;content:"";display:inline-block;height:.5rem;margin-left:.5rem;width:.5rem}.active-menu-item{background-color:var(--background-primary);border-color:var(--border-secondary)}.guides .submenu .submenu-item-heading{font-size:var(--type-smaller-font-size);font-weight:400}.guides .desktop-only{display:none}@media screen and (min-width:992px){.guides .desktop-only{display:inherit}.guides .mobile-only{display:none}}.references .desktop-only{display:none}@media screen and (min-width:992px){.references .desktop-only{display:inherit}.references .mobile-only{display:none}}.html-link-container a:focus .submenu-icon.html,.html-link-container a:hover .submenu-icon.html{background:var(--html-accent-color)!important}.css-link-container a:focus .submenu-icon.css,.css-link-container a:hover .submenu-icon.css{background-color:var(--css-accent-color)!important}.javascript-link-container a:focus .submenu-icon.javascript,.javascript-link-container a:hover .submenu-icon.javascript{background-color:var(--js-accent-color)!important}.http-link-container a:focus .submenu-icon.http,.http-link-container a:hover .submenu-icon.http{background-color:var(--http-accent-color)!important}.apis-link-container a:focus .submenu-icon.apis,.apis-link-container a:hover .submenu-icon.apis{background-color:var(--apis-accent-color)!important}.learn-link-container a:focus .submenu-icon.learn,.learn-link-container a:hover .submenu-icon.learn{background-color:var(--learn-accent-color)!important}.submenu-icon.html{background-color:var(--html-accent-engage)}.submenu-icon.css{background-color:var(--css-accent-engage)}.submenu-icon.javascript{background-color:var(--js-accent-engage)}.submenu-icon.http{background-color:var(--http-accent-engage)}.submenu-icon.apis{background-color:var(--apis-accent-engage)}.submenu-icon.learn{background-color:var(--learn-accent-engage)}.mdn-plus .submenu-icon{background-color:var(--plus-accent-color)}.mdn-plus .note{background-color:var(--background-information)}.mdn-plus .note .submenu-item-description{display:block;margin:.125rem}@media screen and (min-width:992px){.mdn-plus .mobile-only{display:none}}ul.main-menu{grid-gap:1rem;box-sizing:border-box;list-style:none;margin-top:1rem;padding:0;width:100%}ul.main-menu.show{display:block}@media screen and (min-width:992px){ul.main-menu.show{display:flex}ul.main-menu{align-items:center;display:flex;justify-content:space-around;margin:0 auto 0 0;max-width:310px}}@media screen and (min-width:992px){ul.main-menu li:last-child{flex-basis:inherit}ul.main-menu .menu-toggle,ul.main-menu .submenu,ul.main-menu .submenu.show{display:none}}@media screen and (min-width:992px){ul.main-menu .top-level-entry-container:focus-within .submenu,ul.main-menu .top-level-entry-container:hover .submenu{display:block}.open-on-focus-within:focus-within .watch-submenu{display:flex}.open-on-focus-within:focus-within .submenu{display:block}.open-on-focus-within .submenu,.open-on-focus-within .watch-submenu{display:none}}.avatar,.avatar-wrap{border-radius:50%}.avatar-wrap{height:32px;margin-left:-7px;margin-right:.1rem;position:relative;width:32px}@media screen and (min-width:769px){.avatar{margin:initial}}.signout-form{padding:.5rem}@media screen and (min-width:769px){.signout-form{border-top:1px solid var(--border-primary)}}button.signout-button{width:100%}button.signout-button:focus,button.signout-button:hover{background-color:var(--background-secondary)}.user-menu{position:relative}.user-menu .submenu-header{display:none}.user-menu .button.user-menu-toggle .notification-dot~.avatar-wrap:after{background:var(--text-primary-blue);border:1px solid var(--background-primary);border-radius:2rem;bottom:0;content:"";height:.5rem;position:absolute;right:0;width:.5rem}@media screen and (max-width:992px){.user-menu .user-menu-toggle:hover{--button-bg:transparent}}@media screen and (min-width:992px){.user-menu .button.user-menu-toggle:focus,.user-menu .button.user-menu-toggle:focus .button-wrap,.user-menu .button.user-menu-toggle:hover,.user-menu .button.user-menu-toggle:hover .button-wrap{background:transparent;border-color:transparent;box-shadow:none}.user-menu .button.user-menu-toggle:focus .avatar{border:1px solid var(--button-secondary-border-focus);box-shadow:var(--focus-effect)}.user-menu .button.user-menu-toggle:after{display:none}.user-menu .submenu-header{display:block;margin-bottom:.5rem;padding:0 0 .5rem}.user-menu .submenu-item{padding:.5rem}.user-menu .signout-container{margin-top:.5rem}.user-menu .user-menu-id{display:none}.user-menu .submenu{left:auto;max-width:-webkit-max-content;max-width:max-content;right:0}}.dropdown{position:relative}.dropdown-list{background:var(--background-secondary);border:1px solid var(--border-primary);border-radius:var(--elem-radius);box-shadow:var(--shadow-01);left:0;padding:.5rem;position:absolute;top:calc(100% + 2px);z-index:var(--z-index-low)}.dropdown.is-flush-right .dropdown-list{left:auto;right:0}.dropdown-item .button.action{width:100%}.dropdown-item .button.action .button-wrap{--button-font:var(--type-smaller-font-size);--button-bg:transparent;justify-content:flex-start;text-align:left;text-transform:none}.dropdown-item .button.action .button-wrap:hover{--button-bg:var(--button-secondary-hover)}.dropdown-item .button.action.active-menu-item{--button-bg:var(--background-primary);--button-border-color:var(--border-secondary)}.top-navigation-main{display:none;justify-content:space-between;padding:0;width:100%}.show-nav .top-navigation-main{display:flex;flex-direction:column}.top-navigation-main .auth-container{order:0}.top-navigation-main .header-search{order:1}.top-navigation-main .main-nav{order:2}.top-navigation-main .notifications-menu{order:3}.top-navigation-main .user-menu{order:4}.top-navigation-main .top-level-entry-container{position:relative}.top-navigation-main .top-level-entry-container .submenu{z-index:var(--z-index-nav-menu)}.top-navigation-main .theme-toggle{align-self:end;margin-bottom:1.5rem}@media screen and (min-width:992px){.top-navigation-main .theme-toggle{align-self:auto;margin-bottom:0}}.top-navigation-main .button.action:hover{--button-bg:var(--border-secondary)}.is-transparent .top-navigation-main .button.action:not(:focus):hover{--button-border-color:transparent}.is-transparent .top-navigation-main .button.action:hover{--button-bg:var(--accent-primary-engage)}.top-navigation-main .button.action.search-button:hover{--button-bg:transparent}.top-navigation-main .top-level-entry{background:none;border-top:1px solid var(--border-secondary);color:var(--text-secondary);cursor:pointer;display:block;padding:1rem .5rem;text-align:left;width:100%}.top-navigation-main .top-level-entry:link,.top-navigation-main .top-level-entry:visited{color:var(--text-secondary)}.top-navigation-main .top-level-entry.menu-toggle{min-height:53px;padding:.5rem}@media screen and (max-width:992px){.top-navigation-main .top-level-entry.button{--button-color:var(--text-secondary);--button-padding:0;--button-radius:0}.top-navigation-main .top-level-entry.button .button-wrap{background:none;border:none;gap:.5rem;justify-content:flex-start;padding:0;text-transform:none}.top-navigation-main .top-level-entry.button:focus{--button-focus-effect:none}}@media screen and (min-width:992px){.top-navigation-main .top-level-entry{border-radius:var(--elem-radius);border-top:none;padding:.5rem}.top-navigation-main .top-level-entry:focus,.top-navigation-main .top-level-entry:hover{background-color:var(--category-color-background);color:var(--category-color);text-decoration:none}.top-navigation-main .top-level-entry.button{padding:0}}.top-navigation-main .menu-toggle{align-items:center;display:flex;justify-content:space-between;position:relative}.top-navigation-main .menu-toggle:after{background-color:var(--icon-primary);content:"";height:var(--icon-size);margin-left:.2em;margin-top:.2em;-webkit-mask-image:url(/static/media/chevron.05a124d379047e16d746.svg);mask-image:url(/static/media/chevron.05a124d379047e16d746.svg);width:var(--icon-size)}.top-navigation-main .menu-toggle[aria-expanded=true]:after{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.top-navigation-main .menu-toggle+.top-level-entry{display:none}@media screen and (min-width:992px){.top-navigation-main{align-items:center;display:flex;flex:1 1;flex-direction:row;gap:.5rem;left:inherit;padding:0;position:static;top:inherit;z-index:inherit}.show-nav .top-navigation-main{flex-direction:row}.top-navigation-main .main-nav{order:0}.top-navigation-main .header-search{order:1}.top-navigation-main .notifications-menu{order:2}.top-navigation-main .auth-container{order:3}.top-navigation-main .user-menu{order:4}.top-navigation-main .main-nav{margin-right:auto;width:-webkit-max-content;width:max-content}.top-navigation-main .menu-toggle+.top-level-entry{display:inline-flex}}.theme-switcher-menu{margin-bottom:.5rem}.theme-switcher-menu .button.action>.button-wrap{text-transform:none}.theme-switcher-menu .themes-menu .button.button{--button-bg:transparent;--button-border-color:var(--button-bg);--button-color:var(--text-primary);border-bottom-width:0;font-size:var(--type-smaller-font-size);width:100%}.theme-switcher-menu .themes-menu .button.button .button-wrap{border-width:1px;font-weight:400;justify-content:flex-start;padding:1rem}.theme-switcher-menu .themes-menu .button.button:focus{--button-border-color:var(--button-secondary-border-focus)}.theme-switcher-menu .themes-menu .button.button:hover{--button-bg:var(--border-secondary)}.theme-switcher-menu .active-menu-item .button-wrap,.theme-switcher-menu .active-menu-item:hover .button-wrap{--button-bg:var(--background-primary);--button-border-color:var(--border-secondary)}.theme-switcher-menu .active-menu-item:focus .button-wrap{--button-border-color:var(--button-secondary-border-focus)}@media screen and (min-width:769px){.theme-switcher-menu{border-bottom:0;margin-bottom:0}.theme-switcher-menu .themes-menu{top:calc(100% - 1rem)}.theme-switcher-menu .themes-menu.show{display:flex;flex-direction:column;gap:.5rem;max-width:-webkit-max-content;max-width:max-content;min-width:130px}.theme-switcher-menu .themes-menu .submenu-item{padding:.5rem 1rem}}.languages-switcher-menu>.button .button-wrap:after,.theme-switcher-menu>.button .button-wrap:after{background-color:var(--icon-secondary);content:"";display:block;height:16px;margin-left:auto;-webkit-mask-image:url(/static/media/chevron.05a124d379047e16d746.svg);mask-image:url(/static/media/chevron.05a124d379047e16d746.svg);-webkit-mask-size:16px;mask-size:16px;width:16px}.languages-switcher-menu>.button[aria-expanded=true] .button-wrap:after,.theme-switcher-menu>.button[aria-expanded=true] .button-wrap:after{-webkit-transform:rotate(180deg);transform:rotate(180deg)}@media screen and (min-width:992px){.languages-switcher-menu>.button .button-wrap:after,.theme-switcher-menu>.button .button-wrap:after{content:normal}}.maintenance{color:var(--text-primary);cursor:help;flex-flow:column}.maintenance .maintenance-info-container{cursor:default;display:block;margin:0 1rem;top:2rem}@media screen and (min-width:992px){.maintenance .maintenance-info-container{padding-top:1rem;position:absolute}}.maintenance .maintenance-info-container .maintenance-info{background-color:var(--background-primary);border:1px solid var(--border-primary);border-radius:var(--elem-radius);font-weight:400;padding:1rem}@media screen and (min-width:992px){.maintenance:not(:focus-within):not(:hover) .maintenance-info-container{clip:rect(1px,1px,1px,1px)!important;border:0!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}}.top-navigation{background-color:var(--background-primary);border-bottom:1px solid var(--border-primary);position:relative;width:100%;z-index:100}.top-navigation .container{align-items:center;background-color:var(--background-primary);display:flex;flex-flow:row wrap;gap:var(--gutter)}@media screen and (min-width:769px){.top-navigation .container{background-color:transparent}}.top-navigation.is-transparent{background-color:transparent}.top-navigation .top-navigation-wrap{align-items:center;display:flex;flex:1 1;height:var(--top-nav-height);justify-content:space-between}.top-navigation.show-nav{box-shadow:0 0 10px 0 rgba(0,0,0,.2);z-index:var(--z-index-top)}.top-navigation.show-nav .container{height:auto}@media screen and (min-width:992px){.main-menu-toggle{display:none}.top-navigation .top-navigation-wrap{flex:0 1}}.breadcrumbs-container{align-items:center;display:flex;margin-right:auto}.breadcrumbs-container ol{line-height:1.2}.breadcrumbs-container li{display:none;-webkit-hyphens:auto;hyphens:auto}.breadcrumbs-container li:first-child,.breadcrumbs-container li:last-child{display:inline-flex}.breadcrumbs-container li .breadcrumb:after{background-color:var(--icon-secondary);content:"";display:block;flex-shrink:0;height:12px;margin-right:.5rem;-webkit-mask-image:url(/static/media/chevron.05a124d379047e16d746.svg);mask-image:url(/static/media/chevron.05a124d379047e16d746.svg);-webkit-mask-size:12px;mask-size:12px;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);width:12px}.breadcrumbs-container li a{align-items:center;display:flex}.breadcrumbs-container li a:link,.breadcrumbs-container li a:visited{color:var(--text-secondary)}.breadcrumbs-container li a:hover{text-decoration:underline}.breadcrumbs-container li a:focus-visible{outline:0}.breadcrumbs-container li a:focus-visible [property=name]{outline-color:var(--accent-primary);outline-offset:1px;outline-style:auto}.breadcrumbs-container li [property=name]{display:inline-block;margin-right:.5rem}@media screen and (min-width:1200px){.breadcrumbs-container li{display:inline-flex}}.watch-menu-item{background-color:transparent;border-bottom:1px solid var(--border-primary);color:var(--text-primary);cursor:pointer;padding:0}.watch-menu-item:first-of-type{border-top-width:0}.watch-menu-item-inner{grid-gap:.5rem;display:grid;gap:.5rem;grid-template-areas:"status label""status text";grid-template-columns:16px 1fr;padding:.8125rem var(--gutter-padding);text-align:left}.watch-menu-item:focus .watch-menu-item-inner{box-shadow:var(--focus-effect);outline:1px solid var(--button-secondary-border-focus)}.watch-menu-item:hover .watch-menu-item-inner{background-color:var(--border-secondary)}.watch-menu-item-status{grid-area:status}.watch-menu-item-label{font-family:var(--font-body);font-size:var(--type-smaller-font-size);font-weight:var(--font-body-strong-weight);grid-area:label}.watch-menu-item-text{font-size:var(--type-smaller-font-size);grid-area:text}.toast{--toast-bg:var(--text-primary);--toast-color:var(--background-primary);background:var(--toast-bg);border-radius:var(--elem-radius);bottom:1rem;box-shadow:var(--shadow-02);display:flex;gap:.5rem;left:50%;max-width:680px;padding:1rem 1rem 1rem 2rem;position:fixed;-webkit-transform:translate(-50%);transform:translate(-50%);width:90vw}.toast-content{color:var(--toast-color);margin-right:auto}.toast .button.action{--button-color:var(--toast-color);white-space:nowrap}.toast .button.action:hover{--button-bg:rgba(58,57,68,.3);--button-border-color:transparent}.toast.is-important{--toast-bg:var(--accent-secondary);--toast-color:#fff}.toast-verbose-text{display:none}@media screen and (min-width:769px){.toast-verbose-text{display:inline}.toast-short-text{display:none}}.languages-switcher-menu.open-on-focus-within .submenu{display:block}.language-menu .submenu-item{padding:.5rem}@media(min-width:769px){.language-menu{right:0}}.article-actions{margin-left:auto}.article-actions .article-actions-dialog-heading{display:none}.article-actions .button.action .button-wrap{text-transform:none}@media screen and (min-width:769px){.article-actions{display:block}}.article-actions .article-actions-submenu{--gutter-padding:1rem;display:none;overflow:scroll}.article-actions .article-actions-submenu.show{background:var(--background-primary);bottom:0;display:flex;flex-direction:column;left:0;position:fixed;right:0;top:var(--top-navigation-height);z-index:var(--z-index-mid)}.article-actions .article-actions-submenu .header{border-bottom:1px solid var(--border-primary);color:var(--text-primary);display:block;font-family:var(--font-body);font-size:var(--type-smaller-font-size);font-weight:var(--font-body-strong-weight);margin:0;padding:1rem;text-align:left;width:100%}.article-actions .article-actions-submenu .header .header-inner{align-items:center;display:flex;gap:.5rem;position:relative}.article-actions .article-actions-submenu .header .icon{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.article-actions .article-actions-submenu .header.desktop-only{display:none}.article-actions .article-actions-submenu .mdn-form-item,.article-actions .article-actions-submenu p{margin:0;padding:1rem 1rem 0}.article-actions .article-actions-submenu .mdn-form-item:last-child,.article-actions .article-actions-submenu p:last-child{padding-bottom:1rem}@media screen and (min-width:769px){.article-actions .article-actions-submenu.show{background-color:var(--background-secondary);border:1px solid var(--border-primary);border-radius:var(--elem-radius);bottom:auto;box-shadow:var(--shadow-02);left:auto;padding:0;position:absolute;right:0;top:calc(100% + 6px);width:316px;z-index:var(--z-index-mid)}.article-actions .article-actions-submenu .header{display:block;padding:1rem var(--gutter-padding);text-align:center}.article-actions .article-actions-submenu .header-inner{justify-content:center}.article-actions .article-actions-submenu .header.desktop-only{display:block}.article-actions .article-actions-submenu .header.mobile-only{display:none}.article-actions .article-actions-submenu .header .icon{left:0;position:absolute}}.article-actions-entries{display:none;list-style:none;margin:0;padding:0}@media screen and (min-width:769px){.article-actions-entries{display:flex;gap:.5rem}.article-actions-entries .sidebar-toggle{display:none}}.article-actions-entry{align-items:center;display:flex;position:relative}@media screen and (max-width:769px){.article-actions.show-actions{-webkit-overflow-scrolling:touch;background-color:var(--background-primary);color:var(--text-primary);display:block;height:100vh;left:0;overflow:auto;position:fixed;top:var(--top-navigation-height);width:100vw;z-index:var(--z-index-low)}.article-actions.show-actions .article-actions-entries>li>.button,.article-actions.show-actions .article-actions-entries>li>div>.button,.article-actions.show-actions>.button{--button-radius:0;border-bottom:1px solid var(--border-secondary);width:100%}.article-actions.show-actions .article-actions-entries>li>.button .button-wrap,.article-actions.show-actions .article-actions-entries>li>div>.button .button-wrap,.article-actions.show-actions>.button .button-wrap{justify-content:flex-start;margin-top:1px;padding:1.5rem 1rem}.article-actions.show-actions .article-actions-dialog-heading{display:block}.article-actions.show-actions .article-actions-entries{display:block;padding:1rem}.article-actions.show-actions .article-action-entry,.article-actions.show-actions .article-actions-toggle{border-bottom:1px solid var(--border-secondary)}.article-actions.show-actions .article-actions-entry{display:block}}.article-actions-container{align-items:center;background-color:var(--background-secondary);border-bottom:1px solid var(--border-primary);margin:0;min-height:2rem;padding:0;position:-webkit-sticky;position:sticky;top:0;z-index:var(--z-index-low)}.article-actions-container .container{align-items:center;display:flex;gap:.5rem;justify-content:space-between}.article-actions-container .sidebar-button{display:none}@media screen and (max-width:769px){.article-actions-container .sidebar-button{align-items:center;align-self:stretch;display:flex;margin:0 0 0 -1rem}.article-actions-container .sidebar-button .button-wrap{border-radius:0;border-right:1px solid var(--border-primary)}}@media screen and (min-width:769px){.article-actions-container{position:static}.article-actions-container .article-actions-toggle{display:none}.article-actions-container .bookmark-button-container{flex:0 0 40px}}@media screen and (min-width:1441px){.article-actions-container .container{padding-left:1rem;padding-right:1rem}}@media screen and (max-width:769px){:root{--sticky-header-height:2rem}}.offline-status-bar{background-color:var(--accent-primary-engage);color:var(--text-primary);display:none}.offline-status-bar.is-offline,.offline-status-bar.is-online{display:block;padding:1rem;text-align:center}.offline-status-bar.is-online{-webkit-animation:fade-out 3s ease-out .5s;animation:fade-out 3s ease-out .5s}@-webkit-keyframes fade-out{0%{opacity:1}to{opacity:0}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}.document-toc{margin-bottom:2rem;padding:0;position:relative}@media screen and (max-width:426px){.document-toc{padding:0 1rem}}.document-toc-heading.document-toc-heading{font:var(--type-heading-h5);letter-spacing:1.5px;margin:0 0 1rem}.document-toc-list.document-toc-list{font-size:var(--type-smaller-font-size);list-style:none;padding-left:0}.document-toc-list.document-toc-list li{margin:0}.document-toc-link.document-toc-link:not(.button){border-left:2px solid var(--border-secondary);color:var(--text-secondary);display:block;padding:.5rem 1rem;text-decoration:none}.document-toc-link.document-toc-link:not(.button):hover{color:var(--text-link)}.document-toc-link.document-toc-link:not(.button)[aria-current]:not([aria-current=""]):not([aria-current=false]){background-color:var(--background-toc-active);border-left:2px solid var(--category-color);color:var(--text-primary);font-weight:600}.document-toc-item-sub>.document-toc-link:not(.button){padding-left:2rem}.document-toc .show-toc{display:block}.sidebar{--offset:var(--main-document-header-height);--max-height:calc(100vh - var(--offset));color:var(--text-secondary)}.sidebar .backdrop{display:none}@media screen and (max-width:768px){.sidebar{height:100vh;left:0;max-height:100vh;position:fixed;right:0}.sidebar,.sidebar .sidebar-inner{-webkit-transform:translateX(-100%);transform:translateX(-100%);z-index:var(--z-index-top)}.sidebar .sidebar-inner{background:var(--background-primary);border-right:1px solid var(--border-primary);height:var(--max-height);max-height:var(--max-height);max-width:20rem;overflow:hidden;overflow:auto;padding:1rem;position:relative;transition:transform .2s linear;width:80vw;will-change:transform}.sidebar .backdrop{background:rgba(0,0,0,.3);border-radius:0;bottom:0;cursor:default;display:flex;left:0;opacity:0;position:fixed;right:0;top:0;transition:opacity .2s linear;width:100%;will-change:opacity;z-index:var(--z-index-mid)}.sidebar.is-animating,.sidebar.is-expanded,.sidebar.is-expanded .sidebar-inner{-webkit-transform:translateX(0);transform:translateX(0)}.sidebar.is-expanded .backdrop{opacity:1}}@media screen and (min-width:769px){.sidebar{display:flex;max-height:var(--max-height);overflow:auto;position:-webkit-sticky;position:sticky;top:var(--offset)}}.sidebar-heading{color:var(--text-primary);font:var(--type-heading-h5);letter-spacing:1.5px;margin:0}.sidebar em{background-color:var(--background-toc-active);border-left:2px solid var(--category-color);display:inline-block;font-style:normal;font-weight:600;padding:.25rem .25rem .25rem .5rem;width:100%}.sidebar a,.sidebar em{-webkit-hyphens:auto;hyphens:auto}.sidebar a{color:var(--text-secondary);display:inline-flex;padding:.25rem}.sidebar a:focus,.sidebar a:hover{text-decoration:underline}.sidebar .no-link{display:inline-flex;padding:.25rem}.sidebar strong{display:flex;font-size:var(--type-base-font-size-rem);margin-top:1rem}.sidebar ol{font-size:var(--type-smaller-font-size)}.sidebar ol ol,.sidebar ol ul{padding-left:.5rem}.sidebar ol ol li .icon{margin-right:.01em}.sidebar ol ol li.no-bullet{display:block;font-weight:var(--font-body-strong-weight);list-style-type:none}.sidebar .sidebar-heading~div>ol,.sidebar .sidebar-heading~ol{margin-top:1rem}.sidebar li,.sidebar summary{margin-bottom:.5rem}.sidebar code,.sidebar summary{font-size:var(--type-smaller-font-size)}.sidebar code{word-wrap:break-word;background-color:transparent;background-color:initial;border-radius:var(--elem-radius);font-family:var(--font-code);line-height:1.2;padding:.125rem;white-space:normal}.sidebar summary{cursor:pointer}.sidebar details{margin:.75rem 0}.sidebar details ol{padding-left:.75rem}.sidebar .icon{align-self:center;background-size:14px;height:14px;margin-right:-.25rem;-webkit-mask-size:14px;mask-size:14px;width:14px}.sidebar .icon-experimental,.sidebar .icon-nonstandard{background-color:var(--icon-information)}.sidebar .icon-deprecated{background-color:var(--icon-critical)}.main-content.standalone{margin:0 auto;max-width:var(--max-width);width:100%}.main-page-content .metadata{background-color:var(--background-secondary);border:1px solid var(--border-primary);border-radius:var(--elem-radius);box-shadow:var(--shadow-01);margin:2rem 0;padding:1rem}.main-page-content .metadata h3{font:var(--type-heading-h4);margin-top:.5rem;padding:0}.metadata-content-container{margin:0 auto;max-width:1440px;width:100%}.metadata-content-container .last-modified-date{margin-bottom:0}:root,body{--mdn-color-white:#fff;--mdn-color-black:#000;--mdn-color-dark-grey:#4e4e4e;--mdn-background-dark:#1b1b1b;--mdn-background-light:#fff;--mdn-background-light-grey:#e2e2e2;--color-announcement-banner-accent:#ff6d91}.light{--text-primary:#1b1b1b;--text-secondary:#4e4e4e;--text-inactive:#9e9e9ea6;--text-link:#0069c2;--text-invert:#fff;--background-primary:#fff;--background-secondary:#f9f9fb;--background-tertiary:#fff;--background-toc-active:#ebeaea;--background-mark-yellow:rgba(199,183,0,.4);--background-mark-green:rgba(0,208,97,.4);--background-information:rgba(0,133,242,.1);--background-warning:rgba(255,42,81,.1);--background-critical:rgba(211,0,56,.1);--background-success:rgba(0,121,54,.1);--border-primary:#cdcdcd;--border-secondary:#cdcdcd;--button-primary-default:#1b1b1b;--button-primary-hover:#696969;--button-primary-active:#9e9e9e;--button-primary-inactive:#1b1b1b;--button-secondary-default:#fff;--button-secondary-hover:#cdcdcd;--button-secondary-active:#cdcdcd;--button-secondary-inactive:#f9f9fb;--button-secondary-border-focus:#0085f2;--button-secondary-border-red:#ff97a0;--button-secondary-border-red-focus:#ffd9dc;--icon-primary:#696969;--icon-secondary:#b3b3b3;--icon-information:#0085f2;--icon-warning:#ff2a51;--icon-critical:#d30038;--icon-success:#007936;--accent-primary:#0085f2;--accent-primary-engage:rgba(0,133,242,.1);--accent-secondary:#0085f2;--accent-tertiary:rgba(0,133,242,.1);--shadow-01:0 1px 2px rgba(43,42,51,.05);--shadow-02:0 1px 6px rgba(43,42,51,.1);--focus-01:0 0 0 3px rgba(0,144,237,.4);--field-focus-border:#0085f2;--code-token-tag:#0069c2;--code-token-punctuation:#9e9e9e;--code-token-attribute-name:#d30038;--code-token-attribute-value:#007936;--code-token-comment:#9e9e9e;--code-token-default:#1b1b1b;--code-token-selector:#872bff;--code-background-inline:#f2f1f1;--code-background-block:#f2f1f1;--notecard-link-color:#343434;--scrollbar-bg:transparent;--scrollbar-color:rgba(0,0,0,.25);--category-color:#0085f2;--category-color-background:#0085f210;--code-color:#5e9eff;--mark-color:#dce2f2;--plus-accent-color:#d30038;--html-accent-color:#d30038;--css-accent-color:#0069c2;--js-accent-color:#afa100;--http-accent-color:#007936;--apis-accent-color:#872bff;--learn-accent-color:#d00058;--plus-code-color:#0069c2;--html-code-color:#9e0027;--css-code-color:#0069c2;--js-code-color:#746a00;--http-code-color:#007936;--apis-code-color:#872bff;--learn-code-color:#d00058;--plus-mark-color:#ffd9dc;--html-mark-color:#ffd9dc;--css-mark-color:#dce2f2;--js-mark-color:#f0e498;--http-mark-color:#a9f3ba;--apis-mark-color:#e6deff;--learn-mark-color:#ffd9df;--plus-accent-background-color:#ff2a5130;--html-accent-background-color:#ff2a5130;--css-accent-background-color:#0085f230;--js-accent-background-color:#93870030;--http-accent-background-color:#009a4630;--apis-accent-background-color:#9b65ff30;--learn-accent-background-color:#ff1f7230;--plus-accent-engage:rgba(255,42,81,.7);--html-accent-engage:rgba(255,42,81,.7);--css-accent-engage:rgba(0,133,242,.7);--js-accent-engage:rgba(147,135,0,.7);--http-accent-engage:rgba(0,154,70,.7);--apis-accent-engage:rgba(155,101,255,.7);--learn-accent-engage:rgba(255,31,114,.7);--modal-backdrop-color:rgba(27,27,27,.1);--blend-color:#fff80;--text-primary-red:#d30038;--text-primary-green:#007936;--text-primary-blue:#0069c2;--text-primary-yellow:#746a00;color-scheme:light}.dark{--text-primary:#fff;--text-secondary:#cdcdcd;--text-inactive:#cdcdcda6;--text-link:#35bdb8;--text-invert:#1b1b1b;--background-primary:#1b1b1b;--background-secondary:#343434;--background-tertiary:#4e4e4e;--background-toc-active:#343434;--background-mark-yellow:rgba(199,183,0,.4);--background-mark-green:rgba(0,208,97,.4);--background-information:rgba(0,133,242,.1);--background-warning:rgba(255,42,81,.1);--background-critical:rgba(211,0,56,.1);--background-success:rgba(0,121,54,.1);--border-primary:#858585;--border-secondary:#696969;--button-primary-default:#fff;--button-primary-hover:#cdcdcd;--button-primary-active:#9e9e9e;--button-primary-inactive:#fff;--button-secondary-default:#4e4e4e;--button-secondary-hover:#858585;--button-secondary-active:#9e9e9e;--button-secondary-inactive:#4e4e4e;--button-secondary-border-focus:#0085f2;--button-secondary-border-red:#ff97a0;--button-secondary-border-red-focus:#ffd9dc;--icon-primary:#fff;--icon-secondary:#b3b3b3;--icon-information:#5e9eff;--icon-warning:#afa100;--icon-critical:#ff707f;--icon-success:#00b755;--accent-primary:#5e9eff;--accent-primary-engage:rgba(94,158,255,.1);--accent-secondary:#5e9eff;--accent-tertiary:rgba(0,133,242,.1);--shadow-01:0 1px 2px rgba(251,251,254,.2);--shadow-02:0 1px 6px rgba(251,251,254,.2);--focus-01:0 0 0 3px rgba(251,251,254,.5);--field-focus-border:#fff;--code-token-tag:#c1cff1;--code-token-punctuation:#9e9e9e;--code-token-attribute-name:#ff97a0;--code-token-attribute-value:#00d061;--code-token-comment:#9e9e9e;--code-token-default:#fff;--code-token-selector:#bea5ff;--code-background-inline:#343434;--code-background-block:#343434;--notecard-link-color:#e2e2e2;--scrollbar-bg:transparent;--scrollbar-color:hsla(0,0%,100%,.25);--category-color:#8cb4ff;--category-color-background:#8cb4ff70;--code-color:#c1cff1;--mark-color:#004d92;--plus-accent-color:#ff97a0;--html-accent-color:#ff707f;--css-accent-color:#8cb4ff;--js-accent-color:#afa100;--http-accent-color:#00b755;--apis-accent-color:#ae8aff;--learn-accent-color:#ff6d91;--plus-code-color:#c1cff1;--html-code-color:#f9f9fb;--css-code-color:#c1cff1;--js-code-color:#c7b700;--http-code-color:#00d061;--apis-code-color:#bea5ff;--learn-code-color:#ff93aa;--plus-mark-color:#9e0027;--html-mark-color:#9e0027;--css-mark-color:#004d92;--js-mark-color:#564e00;--http-mark-color:#005a26;--apis-mark-color:#6800cf;--learn-mark-color:#9e0041;--plus-accent-background-color:#ff2a5130;--html-accent-background-color:#ff2a5130;--css-accent-background-color:#0085f230;--js-accent-background-color:#93870030;--http-accent-background-color:#009a4630;--apis-accent-background-color:#9b65ff30;--learn-accent-background-color:#ff1f7230;--plus-accent-engage:rgba(255,112,127,.7);--html-accent-engage:rgba(255,112,127,.7);--css-accent-engage:rgba(140,180,255,.7);--js-accent-engage:rgba(175,161,0,.7);--http-accent-engage:rgba(0,183,85,.7);--apis-accent-engage:rgba(174,138,255,.7);--learn-accent-engage:rgba(255,109,145,.7);--modal-backdrop-color:rgba(27,27,27,.7);--blend-color:#00080;--text-primary-red:#ff97a0;--text-primary-green:#00d061;--text-primary-blue:#8cb4ff;--text-primary-yellow:#c7b700;color-scheme:dark}@media(prefers-color-scheme:light){:root:not(.light):not(.dark){--text-primary:#fff;--text-secondary:#cdcdcd;--text-inactive:#cdcdcda6;--text-link:#8cb4ff;--text-invert:#1b1b1b;--background-primary:#1b1b1b;--background-secondary:#343434;--background-tertiary:#4e4e4e;--background-toc-active:#343434;--background-mark-yellow:rgba(199,183,0,.4);--background-mark-green:rgba(0,208,97,.4);--background-information:rgba(0,133,242,.1);--background-warning:rgba(255,42,81,.1);--background-critical:rgba(211,0,56,.1);--background-success:rgba(0,121,54,.1);--border-primary:#858585;--border-secondary:#696969;--button-primary-default:#fff;--button-primary-hover:#cdcdcd;--button-primary-active:#9e9e9e;--button-primary-inactive:#fff;--button-secondary-default:#4e4e4e;--button-secondary-hover:#858585;--button-secondary-active:#9e9e9e;--button-secondary-inactive:#4e4e4e;--button-secondary-border-focus:#0085f2;--button-secondary-border-red:#ff97a0;--button-secondary-border-red-focus:#ffd9dc;--icon-primary:#fff;--icon-secondary:#b3b3b3;--icon-information:#5e9eff;--icon-warning:#afa100;--icon-critical:#ff707f;--icon-success:#00b755;--accent-primary:#5e9eff;--accent-primary-engage:rgba(94,158,255,.1);--accent-secondary:#5e9eff;--accent-tertiary:rgba(0,133,242,.1);--shadow-01:0 1px 2px rgba(251,251,254,.2);--shadow-02:0 1px 6px rgba(251,251,254,.2);--focus-01:0 0 0 3px rgba(251,251,254,.5);--field-focus-border:#fff;--code-token-tag:#c1cff1;--code-token-punctuation:#9e9e9e;--code-token-attribute-name:#ff97a0;--code-token-attribute-value:#00d061;--code-token-comment:#9e9e9e;--code-token-default:#fff;--code-token-selector:#bea5ff;--code-background-inline:#343434;--code-background-block:#343434;--notecard-link-color:#e2e2e2;--scrollbar-bg:transparent;--scrollbar-color:hsla(0,0%,100%,.25);--category-color:#8cb4ff;--category-color-background:#8cb4ff70;--code-color:#c1cff1;--mark-color:#004d92;--plus-accent-color:#ff97a0;--html-accent-color:#ff707f;--css-accent-color:#8cb4ff;--js-accent-color:#afa100;--http-accent-color:#00b755;--apis-accent-color:#ae8aff;--learn-accent-color:#ff6d91;--plus-code-color:#c1cff1;--html-code-color:#f9f9fb;--css-code-color:#c1cff1;--js-code-color:#c7b700;--http-code-color:#00d061;--apis-code-color:#bea5ff;--learn-code-color:#ff93aa;--plus-mark-color:#9e0027;--html-mark-color:#9e0027;--css-mark-color:#004d92;--js-mark-color:#564e00;--http-mark-color:#005a26;--apis-mark-color:#6800cf;--learn-mark-color:#9e0041;--plus-accent-background-color:#ff2a5130;--html-accent-background-color:#ff2a5130;--css-accent-background-color:#0085f230;--js-accent-background-color:#93870030;--http-accent-background-color:#009a4630;--apis-accent-background-color:#9b65ff30;--learn-accent-background-color:#ff1f7230;--plus-accent-engage:rgba(255,112,127,.7);--html-accent-engage:rgba(255,112,127,.7);--css-accent-engage:rgba(140,180,255,.7);--js-accent-engage:rgba(175,161,0,.7);--http-accent-engage:rgba(0,183,85,.7);--apis-accent-engage:rgba(174,138,255,.7);--learn-accent-engage:rgba(255,109,145,.7);--modal-backdrop-color:rgba(27,27,27,.7);--blend-color:#00080;--text-primary-red:#ff97a0;--text-primary-green:#00d061;--text-primary-blue:#8cb4ff;--text-primary-yellow:#c7b700;color-scheme:dark}}@media(prefers-color-scheme:dark){:root:not(.light):not(.dark){--text-primary:#fff;--text-secondary:#cdcdcd;--text-inactive:#cdcdcda6;--text-link:#8cb4ff;--text-invert:#1b1b1b;--background-primary:#1b1b1b;--background-secondary:#343434;--background-tertiary:#4e4e4e;--background-toc-active:#343434;--background-mark-yellow:rgba(199,183,0,.4);--background-mark-green:rgba(0,208,97,.4);--background-information:rgba(0,133,242,.1);--background-warning:rgba(255,42,81,.1);--background-critical:rgba(211,0,56,.1);--background-success:rgba(0,121,54,.1);--border-primary:#858585;--border-secondary:#696969;--button-primary-default:#fff;--button-primary-hover:#cdcdcd;--button-primary-active:#9e9e9e;--button-primary-inactive:#fff;--button-secondary-default:#4e4e4e;--button-secondary-hover:#858585;--button-secondary-active:#9e9e9e;--button-secondary-inactive:#4e4e4e;--button-secondary-border-focus:#0085f2;--button-secondary-border-red:#ff97a0;--button-secondary-border-red-focus:#ffd9dc;--icon-primary:#fff;--icon-secondary:#b3b3b3;--icon-information:#5e9eff;--icon-warning:#afa100;--icon-critical:#ff707f;--icon-success:#00b755;--accent-primary:#5e9eff;--accent-primary-engage:rgba(94,158,255,.1);--accent-secondary:#5e9eff;--accent-tertiary:rgba(0,133,242,.1);--shadow-01:0 1px 2px rgba(251,251,254,.2);--shadow-02:0 1px 6px rgba(251,251,254,.2);--focus-01:0 0 0 3px rgba(251,251,254,.5);--field-focus-border:#fff;--code-token-tag:#c1cff1;--code-token-punctuation:#9e9e9e;--code-token-attribute-name:#ff97a0;--code-token-attribute-value:#00d061;--code-token-comment:#9e9e9e;--code-token-default:#fff;--code-token-selector:#bea5ff;--code-background-inline:#343434;--code-background-block:#343434;--notecard-link-color:#e2e2e2;--scrollbar-bg:transparent;--scrollbar-color:hsla(0,0%,100%,.25);--category-color:#8cb4ff;--category-color-background:#8cb4ff70;--code-color:#c1cff1;--mark-color:#004d92;--plus-accent-color:#ff97a0;--html-accent-color:#ff707f;--css-accent-color:#8cb4ff;--js-accent-color:#afa100;--http-accent-color:#00b755;--apis-accent-color:#ae8aff;--learn-accent-color:#ff6d91;--plus-code-color:#c1cff1;--html-code-color:#f9f9fb;--css-code-color:#c1cff1;--js-code-color:#c7b700;--http-code-color:#00d061;--apis-code-color:#bea5ff;--learn-code-color:#ff93aa;--plus-mark-color:#9e0027;--html-mark-color:#9e0027;--css-mark-color:#004d92;--js-mark-color:#564e00;--http-mark-color:#005a26;--apis-mark-color:#6800cf;--learn-mark-color:#9e0041;--plus-accent-background-color:#ff2a5130;--html-accent-background-color:#ff2a5130;--css-accent-background-color:#0085f230;--js-accent-background-color:#93870030;--http-accent-background-color:#009a4630;--apis-accent-background-color:#9b65ff30;--learn-accent-background-color:#ff1f7230;--plus-accent-engage:rgba(255,112,127,.7);--html-accent-engage:rgba(255,112,127,.7);--css-accent-engage:rgba(140,180,255,.7);--js-accent-engage:rgba(175,161,0,.7);--http-accent-engage:rgba(0,183,85,.7);--apis-accent-engage:rgba(174,138,255,.7);--learn-accent-engage:rgba(255,109,145,.7);--modal-backdrop-color:rgba(27,27,27,.7);--blend-color:#00080;--text-primary-red:#ff97a0;--text-primary-green:#00d061;--text-primary-blue:#8cb4ff;--text-primary-yellow:#c7b700;color-scheme:dark}}.document-page .article-actions-container,.document-page .document-toc-container,.document-page .generic-loading,.document-page .main-content,.document-page .metadata,.document-page .page-header,.document-page .sidebar{display:flex}.document-page .main-content,.document-page .sidebar{flex-direction:column;width:100%}.main-wrapper{display:flex;margin:0 auto;max-width:var(--max-width)}.main-wrapper .toc{display:none}@media screen and (min-width:769px){.main-wrapper{grid-gap:3rem;display:grid;gap:3rem;padding-left:1.5rem;padding-right:3rem}.main-wrapper .main-content,.main-wrapper .sidebar,.main-wrapper .toc{padding-bottom:3rem;padding-top:3rem}.main-wrapper .sidebar{align-self:start;grid-area:sidebar}.main-wrapper .main-content{grid-area:main}}@media screen and (min-width:1200px){.main-wrapper{grid-gap:3rem;display:grid;gap:3rem;padding-left:1rem;padding-right:1rem}.main-wrapper .toc{--offset:var(--main-document-header-height);--max-height:calc(100vh - var(--offset));display:block;grid-area:toc;max-height:var(--max-height);overflow:auto;position:-webkit-sticky;position:sticky;top:var(--offset)}.main-wrapper .in-nav-toc{display:none}}.page-wrapper{grid-template-columns:100%}.standard-page{max-width:inherit}@font-face{font-display:swap;font-family:Inter;font-stretch:75% 100%;font-style:oblique 0 20deg;font-weight:1 999;src:url(/website/fonts/Inter.var.woff2) format("woff2 supports variations"),url(/website/fonts/Inter.var.woff2) format("woff2-variations")}:root{--sticky-header-height:var(--main-document-header-height)}.main-document-header-container{position:-webkit-sticky;position:sticky;top:0;z-index:var(--z-index-top)}.main-page-content{overflow-wrap:break-word;padding:3rem 1rem 1rem}.main-page-content h1 a:link,.main-page-content h1 a:visited,.main-page-content h2 a:link,.main-page-content h2 a:visited,.main-page-content h3 a:link,.main-page-content h3 a:visited,.main-page-content h4 a:link,.main-page-content h4 a:visited,.main-page-content h5 a:link,.main-page-content h5 a:visited,.main-page-content h6 a:link,.main-page-content h6 a:visited{color:var(--text-primary);text-decoration:none}.main-page-content h1 a:focus,.main-page-content h1 a:hover,.main-page-content h2 a:focus,.main-page-content h2 a:hover,.main-page-content h3 a:focus,.main-page-content h3 a:hover,.main-page-content h4 a:focus,.main-page-content h4 a:hover,.main-page-content h5 a:focus,.main-page-content h5 a:hover,.main-page-content h6 a:focus,.main-page-content h6 a:hover{text-decoration:underline}.main-page-content h1 a:active,.main-page-content h2 a:active,.main-page-content h3 a:active,.main-page-content h4 a:active,.main-page-content h5 a:active,.main-page-content h6 a:active{background-color:transparent}.main-page-content h1 a[href^="#"]:hover:after,.main-page-content h2 a[href^="#"]:hover:after,.main-page-content h3 a[href^="#"]:hover:after,.main-page-content h4 a[href^="#"]:hover:after,.main-page-content h5 a[href^="#"]:hover:after,.main-page-content h6 a[href^="#"]:hover:after{color:var(--text-inactive);content:"#";display:inline-flex;font-size:.7em;line-height:1;margin-left:4px;text-decoration:none}.main-page-content h1:after{-webkit-text-decoration-color:var(--category-color);text-decoration-color:var(--category-color)}.main-page-content h2:first-of-type{margin-top:2rem}.main-page-content a:not(.button){color:var(--text-link);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.main-page-content a:not(.button):active{background-color:var(--text-link);color:#fff}.main-page-content a:not(.button):active code{background-color:transparent;color:#fff}.main-page-content a:not(.button)[id^=attr-]:link,.main-page-content a:not(.button)[id^=attr-]:visited{color:var(--text-link);text-decoration:none}.main-page-content a:not(.button)[id^=attr-]:focus,.main-page-content a:not(.button)[id^=attr-]:hover{text-decoration:underline}.main-page-content a:not(.button)[id^=attr-]:active{color:#fff}.main-page-content a:not(.button)[aria-current]{color:var(--text-link);font-weight:var(--font-body-strong-weight);text-decoration:none}.main-page-content img{background:#fff;border:1px solid var(--border-primary)!important;border-radius:var(--elem-radius);display:inline-block;display:flex;height:auto;margin:2rem auto}.main-page-content ol,.main-page-content ul{margin:1rem 0 2rem;padding-left:2rem}.main-page-content ol li,.main-page-content ul li{margin:.5rem 0}.main-page-content ul{list-style:disc}.main-page-content ul ul{list-style-type:circle;margin:0;padding-left:1rem}.main-page-content ol{list-style:decimal}.main-page-content ol ol{list-style:lower-roman;margin:0}.main-page-content dd ol,.main-page-content dd ul{margin-bottom:1rem;padding-left:3rem}.main-page-content td ol,.main-page-content td ul{padding-left:1rem}.main-page-content dd li{margin-bottom:1rem}.main-page-content td li{margin-bottom:.5rem}.main-page-content dl dt{margin-bottom:.5rem;margin-top:2rem}.main-page-content dl dd{margin-bottom:1rem;margin-left:1rem}.main-page-content dl dd .notecard p{padding-left:0}.main-page-content dl p{margin:0 0 1rem}.main-page-content .section-content p{font:var(--type-article-p)}.main-page-content .section-content p:last-child{margin-bottom:2rem}.main-page-content .section-content figure{margin-bottom:1rem}.main-page-content .section-content .prev-next{display:flex;gap:.5rem;justify-content:space-between;list-style:none;margin:1rem 0;padding:0;text-align:center}.main-page-content .section-content .prev-next li{display:flex;margin:0}.main-page-content .section-content .prev-next .button{margin:0;max-width:inherit}.main-page-content .section-content .prev-next .button-wrap{color:inherit}@media screen and (min-width:426px){.main-page-content{padding:3rem}}@media screen and (min-width:769px){.main-page-content{margin-bottom:.5rem;padding:0}}b,strong{font-weight:var(--font-body-strong-weight);letter-spacing:.02rem}table{border:1px solid var(--border-primary);border-collapse:collapse;width:100%}table th{background:var(--background-tertiary);font-weight:var(--font-body-strong-weight);line-height:1.5;text-align:left}table td,table th{border:1px solid var(--border-primary);padding:.5rem .75rem;vertical-align:middle}table td .code-example pre,table td ul{margin:0}table caption{font-weight:var(--font-body-strong-weight);margin:1rem 0 .5rem}table.properties{border:none;font-size:var(--type-base-font-size)}table.properties td,table.properties th{border:none}table.properties th{background:none}table.properties tr{border-bottom:1px solid var(--border-secondary)}table.properties tr:first-child{border-top:1px solid var(--border-primary)}table.properties tr:last-child{border-bottom:1px solid var(--border-primary)}table.properties tr:nth-child(odd) td,table.properties tr:nth-child(odd) th,table.standard-table tr:nth-child(odd) td,table.standard-table tr:nth-child(odd) th{background-color:var(--background-secondary)}iframe{border:1px solid var(--border-primary);max-width:100%;width:100%}iframe.nobutton,iframe.sample-code-frame,iframe[src*="https://jsfiddle.net"],iframe[src*="https://mdn.github.io"],iframe[src*="https://test262.report"],iframe[src*="https://www.youtube-nocookie.com"]{background:#fff;border:1px solid var(--border-primary);border-radius:var(--elem-radius);width:100%}h1,h2,h3{letter-spacing:var(--heading-letter-spacing)}h1{font:var(--type-heading-h1);margin-bottom:2rem;word-break:break-word}@media screen and (min-width:769px){h1{font:var(--type-heading-h1)}}h2{font:var(--type-heading-h2);margin:4rem 0 .5rem}h3{font:var(--type-heading-h3);margin:2rem 0 .5rem}h2~div~h3,h2~h3{margin-top:1rem}h4{font:var(--type-heading-h4);letter-spacing:.5px;margin:2rem 0 1rem}h5{font:var(--type-heading-h5)}h5,h6{letter-spacing:1.5px;margin:2rem 0 1rem;text-transform:uppercase}h6{font:var(--type-heading-h6)}h1 code,h2 code,h3 code,h4 code,h5 code,h6 code{font-size:inherit}p{margin:1rem 0 2rem}blockquote{border-left:4px solid var(--border-secondary);color:var(--text-secondary);margin-bottom:2rem;padding:1rem 2rem}blockquote p{margin:0}.code-example,code,pre{border-radius:var(--elem-radius);font-size:var(--type-base-font-size-rem)}code{background:var(--code-background-inline);padding:.125rem .25rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}pre{background-color:var(--code-background-block);border:1px solid transparent;margin:1rem 0 2rem;padding:1rem 2.5rem 1rem 1rem}pre code{background:none;color:var(--text-primary);padding:0}.badge{border:1px solid var(--border-primary);border-radius:4rem;font-size:var(--type-tiny-font-size);padding:.125rem .375rem;white-space:nowrap}.badge,kbd{color:var(--text-secondary)}kbd{border:2px solid var(--border-secondary);border-radius:var(--elem-radius);box-shadow:var(--border-secondary);box-shadow:inset 0 -1px 0 0 var(--border-secondary);font-size:.825rem;padding:.25rem} \ No newline at end of file diff --git a/public/mstile-150x150.png b/public/mstile-150x150.png deleted file mode 100644 index 7615e12..0000000 Binary files a/public/mstile-150x150.png and /dev/null differ diff --git a/public/safari-pinned-tab.svg b/public/safari-pinned-tab.svg deleted file mode 100644 index 6fb1745..0000000 --- a/public/safari-pinned-tab.svg +++ /dev/null @@ -1,80 +0,0 @@ - - - - -Created by potrace 1.14, written by Peter Selinger 2001-2017 - - - - - diff --git a/public/site.webmanifest b/public/site.webmanifest deleted file mode 100644 index f3d7f58..0000000 --- a/public/site.webmanifest +++ /dev/null @@ -1,19 +0,0 @@ -{ - "name": "Be My SpaceTime", - "short_name": "SpaceTime", - "icons": [ - { - "src": "/android-chrome-192x192.png", - "sizes": "192x192", - "type": "image/png" - }, - { - "src": "/android-chrome-512x512.png", - "sizes": "512x512", - "type": "image/png" - } - ], - "theme_color": "#ffffff", - "background_color": "#ffffff", - "display": "standalone" -} diff --git a/src/Base.elm b/src/Base.elm deleted file mode 100644 index e7c5c77..0000000 --- a/src/Base.elm +++ /dev/null @@ -1,31 +0,0 @@ -module Base exposing (contentUrlPrefix, urlPrefix, websiteBase) - -{-| The base URL for accessing the content for the site --} - - -contentBase : String -contentBase = - "https://raw.githubusercontent.com" - - -{-| The Github user name for the site --} -user : String -user = - "avinal" - - -urlPrefix : String -urlPrefix = - "avinal.github.io" - - -contentUrlPrefix : String -contentUrlPrefix = - contentBase ++ "/" ++ user ++ "/" ++ urlPrefix ++ "/main/content/" - - -websiteBase : String -websiteBase = - "https://avinal.space" diff --git a/src/Blog.elm b/src/Blog.elm deleted file mode 100644 index e8f2d31..0000000 --- a/src/Blog.elm +++ /dev/null @@ -1,414 +0,0 @@ -port module Blog exposing (..) - -import Base exposing (..) -import Html exposing (..) -import Html.Attributes exposing (class, datetime, href, id, src, style) -import Http exposing (Error(..)) -import Json.Decode as Json -import Url exposing (Protocol(..)) -import Yaml.Decode as Yaml - - - --- MODEL - - -type alias Model = - { blog : Maybe Blog - , requestUrl : String - , success : Bool - , fragment : String - , error : Maybe String - , bloglist : Maybe (List JsonMeta) - } - - - --- Blog Post - - -type alias Blog = - { meta : YamlMeta - , content : String - } - - -initialModel : Model -initialModel = - { blog = Nothing - , requestUrl = "" - , success = False - , fragment = "" - , error = Nothing - , bloglist = Nothing - } - - - --- PORT - - -port sendString : String -> Cmd msg - - - --- port isRenderComplete : (Bool -> msg) -> Sub msg - - -view : Model -> Html Msg -view model = - div [ class "foo-interface" ] - [ div [ class "foo-console foo-terminal foo-active" ] - [ div [ class "page-wrapper category-html document-page" ] - [ div [ class "main-wrapper" ] - [ main_ [ class "main-content", id "content" ] - [ case model.blog of - Just blog -> - case blog.meta.image of - Just image -> - img [ src image ] [] - - Nothing -> - text "" - - Nothing -> - text "" - , div [] (viewBlogList model) - , viewArticle model - ] - ] - ] - ] - ] - - -viewToc : Bool -> Html Msg -viewToc show = - if show then - div - [ class "toc" ] - [ aside [ class "document-toc-container" ] - [ section [ class "document-toc" ] - [ h2 [ class "document-toc-heading" ] - [ if show then - text "In this page" - - else - text "" - ] - , ul - [ class "document-toc-list", id "toc-entries" ] - [] - ] - ] - ] - - else - div [] [] - - -viewArticle : Model -> Html Msg -viewArticle model = - article - [ class "main-page-content" ] - [ div [ id "insert-here" ] [] - , viewMetadata model - ] - - -viewMetadata : Model -> Html Msg -viewMetadata model = - aside - [ class "metadata" - , style "display" - (if model.bloglist == Nothing && model.success then - "block" - - else - "none" - ) - ] - [ div [ class "metadata-content-container" ] - [ div [ class "on-github" ] - [ h3 [] [ text "Found a problem" ] - , ul [] - [ li [] - [ a - [ href - ("https://github.com/avinal/avinal.github.io/issues/new?title=blog:" - ++ (case model.blog of - Just blog -> - blog.meta.title - - Nothing -> - model.requestUrl - ) - ) - ] - [ text "Open an issue on ", i [ class "fa-brands fa-github" ] [] ] - ] - , li [] - [ a [ href "mailto:ripple+blog@avinal.space" ] - [ text "Contact me via email" ] - ] - ] - ] - ] - ] - - -viewBlogListItem : JsonMeta -> Html Msg -viewBlogListItem meta = - div [] - [ hr [] [] - , br [] [] - , div [ class "foo-term-story" ] - [ div [] - [ span [] - [ i [ class "fa-regular fa-clock" ] [ text " " ] - , time [ datetime meta.date ] [ text meta.date ] - , text " in " - , i [ class "fa-regular fa-folder-open" ] [ text " " ] - , a [ href ("/posts/" ++ meta.category) ] - [ text meta.category ] - ] - , h2 [] - [ a [ href ("/posts/" ++ meta.category ++ "/" ++ meta.slug) ] - [ text meta.title ] - ] - , p [] [ text meta.description ] - ] - ] - , br [] [] - ] - - -viewBlogList : Model -> List (Html Msg) -viewBlogList model = - case model.bloglist of - Just bloglist -> - h1 [] [ text "Blog" ] - :: List.map viewBlogListItem bloglist - - Nothing -> - [] - - -type Msg - = MdDataReceived (Result Http.Error String) - | JsonDataReceived (Result Http.Error (List JsonMeta)) - | NoSuchPage - - -{-| To maintain compatibility with old links - - Old links: - New links: - --} -removeHtmlSuffix : String -> String -removeHtmlSuffix slug = - if String.right 5 slug == ".html" then - String.dropRight 5 slug - - else - slug - - -init : List String -> ( Model, Cmd Msg ) -init pathList = - case pathList of - [ category, slug, fragment ] -> - let - requestUrl = - Base.contentUrlPrefix - ++ "posts/" - ++ category - ++ "/" - ++ removeHtmlSuffix slug - ++ ".md" - in - ( { initialModel - | requestUrl = requestUrl - , fragment = fragment - } - , getMarkdown requestUrl - ) - - [ category, slug ] -> - let - requestUrl = - Base.contentUrlPrefix - ++ "posts/" - ++ category - ++ "/" - ++ removeHtmlSuffix slug - ++ ".md" - in - ( { initialModel - | requestUrl = requestUrl - } - , getMarkdown requestUrl - ) - - -- [ category ] -> - -- let - -- requestUrl = - -- Base.contentUrlPrefix - -- ++ "posts/" - -- ++ category - -- ++ ".md" - -- in - -- ( { initialModel - -- | requestUrl = requestUrl - -- } - -- , getMarkdown requestUrl - -- ) - -- [ "categories" ] -> - -- ( { blog = Nothing - -- , requestUrl = urlPrefix ++ "/categories" ++ ".md" - -- , markDown = "" - -- , success = False - -- , fragment = "" - -- } - -- , getMarkdown (urlPrefix ++ "/categories" ++ ".md") - -- ) - [] -> - ( { initialModel | requestUrl = Base.contentUrlPrefix ++ "/posts/posts.json" } - , getPostLists (Base.contentUrlPrefix ++ "/posts/posts.json") - ) - - _ -> - ( initialModel, Cmd.none ) - - -type alias JsonMeta = - { title : String - , date : String - , description : String - , category : String - , slug : String - } - - -getPostLists : String -> Cmd Msg -getPostLists url = - Http.get - { url = url - , expect = Http.expectJson JsonDataReceived (Json.list jsonMetaDecoder) - } - - -jsonMetaDecoder : Json.Decoder JsonMeta -jsonMetaDecoder = - Json.map5 JsonMeta - (Json.field "title" Json.string) - (Json.field "date" Json.string) - (Json.field "description" Json.string) - (Json.field "category" Json.string) - (Json.field "slug" Json.string) - - -getMarkdown : String -> Cmd Msg -getMarkdown url = - Http.get - { url = url - , expect = Http.expectString MdDataReceived - } - - -update : Msg -> Model -> ( Model, Cmd Msg ) -update msg model = - case msg of - -- GetMarkdown -> - -- ( model, Http.get { url = model.requestUrl, expect = Http.expectString MdDataReceived } ) - MdDataReceived (Ok data) -> - case splitMetaContent data of - Ok blog -> - ( { model | blog = Just blog, success = True }, sendString blog.content ) - - Err err -> - ( { model | success = False, error = Just err }, Cmd.none ) - - MdDataReceived (Err err) -> - ( { model | success = False, error = Just (errorToString err) }, Cmd.none ) - - JsonDataReceived (Ok data) -> - ( { model | blog = Nothing, success = True, bloglist = Just data }, Cmd.none ) - - JsonDataReceived (Err err) -> - ( { model | success = False, error = Just (errorToString err) }, Cmd.none ) - - NoSuchPage -> - ( { model | success = False }, Cmd.none ) - - -errorToString : Http.Error -> String -errorToString error = - case error of - BadUrl url -> - "The URL " ++ url ++ " was invalid" - - Timeout -> - "Unable to reach the server, try again" - - NetworkError -> - "Unable to reach the server, check your network connection" - - BadStatus 500 -> - "The server had a problem, try again later" - - BadStatus 400 -> - "Verify your information and try again" - - BadStatus _ -> - "Unknown error" - - BadBody errorMessage -> - errorMessage - - -type alias YamlMeta = - { title : String - , date : String - , description : Maybe String - , tags : List String - , category : String - , image : Maybe String - , modified : Maybe String - } - - -splitMetaContent : String -> Result String Blog -splitMetaContent data = - let - headIndices : List Int - headIndices = - String.indices "---" data |> List.take 2 - - metadata = - String.slice ((Maybe.withDefault 0 <| List.head headIndices) + 3) - ((Maybe.withDefault 0 <| List.head <| List.reverse headIndices) - 1) - data - - content = - String.dropLeft ((Maybe.withDefault 0 <| List.head <| List.reverse headIndices) + 3) data - in - case Yaml.fromString metaDecoder metadata of - Ok meta -> - Ok { meta = meta, content = content } - - Err err -> - Err ("YAML front matter parsing failed: " ++ Yaml.errorToString err) - - -metaDecoder : Yaml.Decoder YamlMeta -metaDecoder = - Yaml.map7 YamlMeta - (Yaml.field "title" Yaml.string) - (Yaml.field "date" Yaml.string) - (Yaml.maybe (Yaml.field "description" Yaml.string)) - (Yaml.field "tags" (Yaml.list Yaml.string)) - (Yaml.field "category" Yaml.string) - (Yaml.maybe (Yaml.field "image" Yaml.string)) - (Yaml.maybe (Yaml.field "modified" Yaml.string)) diff --git a/src/Layouts/Blog.elm b/src/Layouts/Blog.elm new file mode 100644 index 0000000..7cb58ef --- /dev/null +++ b/src/Layouts/Blog.elm @@ -0,0 +1,101 @@ +module Layouts.Blog exposing (Model, Msg, Settings, layout) + +import Effect exposing (Effect) +import Html exposing (Html) +import Html.Attributes exposing (class, href) +import Layout exposing (Layout) +import Route exposing (Route) +import Shared +import Utils.Constants exposing (..) +import View exposing (View) + + +type alias Settings = + {} + + +layout : Settings -> Shared.Model -> Route () -> Layout Model Msg mainMsg +layout settings shared route = + Layout.new + { init = init settings + , update = update + , view = view + , subscriptions = subscriptions + } + + + +-- MODEL + + +type alias Model = + {} + + +init : Settings -> () -> ( Model, Effect Msg ) +init settings _ = + ( {} + , Effect.none + ) + + + +-- UPDATE + + +type Msg + = NoOp + + +update : Msg -> Model -> ( Model, Effect Msg ) +update msg model = + case msg of + NoOp -> + ( model, Effect.none ) + + +subscriptions : Model -> Sub Msg +subscriptions model = + Sub.none + + + +-- VIEW + + +blogTheme : String +blogTheme = + "mt-4 prose prose-invert mx-auto lg:prose-lg prose-a:decoration-cyan-500 hover:prose-a:decoration-pink-500" + + +view : { fromMsg : Msg -> mainMsg, content : View mainMsg, model : Model } -> View mainMsg +view { fromMsg, model, content } = + { title = content.title + , body = + let + footerLinkToLeft : Link -> Html msg + footerLinkToLeft link = + Html.li [] + [ Html.a + [ href link.url + , class "mr-4 md:mr-6 underline decoration-cyan-500 hover:decoration-pink-500" + ] + [ Html.text link.text ] + ] + in + [ Html.div [ class "min-h-screen py-4 flex flex-col justify-center relative overflow-hidden " ] + [ Html.div [ class "relative w-full py-4 bg-neutral md:max-w-3xl md:mx-auto lg:max-w-4xl lg:pb-28" ] + [ Html.article [ class blogTheme ] + content.body + ] + ] + , Html.div [ class "fixed bottom-0 left-0 bg-neutral-900 z-20 p-4 w-full md:flex md:items-center md:justify-between md:p-4" ] + [ Html.ul + [ class "flex flex-wrap items-center mt-3 text-xl text-neutral-500 sm:mt-0" ] + (List.map footerLinkToLeft <| + { text = "Home", url = "/" } + :: Utils.Constants.footerLinks + ) + ] + ] + } diff --git a/src/Layouts/Home.elm b/src/Layouts/Home.elm new file mode 100644 index 0000000..fe56009 --- /dev/null +++ b/src/Layouts/Home.elm @@ -0,0 +1,95 @@ +module Layouts.Home exposing (Model, Msg, Settings, layout) + +import Effect exposing (Effect) +import Html exposing (Html) +import Html.Attributes exposing (class, href) +import Layout exposing (Layout) +import Route exposing (Route) +import Shared +import Utils.Constants exposing (..) +import View exposing (View) + + +type alias Settings = + {} + + +layout : Settings -> Shared.Model -> Route () -> Layout Model Msg mainMsg +layout settings shared route = + Layout.new + { init = init + , update = update + , view = view + , subscriptions = subscriptions + } + + + +-- MODEL + + +type alias Model = + {} + + +init : () -> ( Model, Effect Msg ) +init _ = + ( {} + , Effect.none + ) + + + +-- UPDATE + + +type Msg + = ReplaceMe + + +update : Msg -> Model -> ( Model, Effect Msg ) +update msg model = + case msg of + ReplaceMe -> + ( model + , Effect.none + ) + + +subscriptions : Model -> Sub Msg +subscriptions model = + Sub.none + + + +-- VIEW + + +view : { fromMsg : Msg -> mainMsg, content : View mainMsg, model : Model } -> View mainMsg +view { fromMsg, model, content } = + let + footerLinkToCenter : Link -> Html msg + footerLinkToCenter link = + Html.a + [ href link.url + , class "underline decoration-cyan-500 hover:decoration-pink-500 inline-flex text-xl p-3" + ] + [ Html.text link.text ] + + iconLinkToCenter : IconLink -> Html msg + iconLinkToCenter iconLink = + Html.a [ href iconLink.url, class " hover:text-pink-500 inline-flex text-2xl p-3" ] + [ Html.i [ class iconLink.icon ] [] ] + in + { title = content.title + , body = + [ Html.section [ class "flex items-center justify-center flex-col h-screen text-neutral-400" ] + [ Html.header [ class "object-cover object-center p-8" ] content.body + , Html.div [ class "flex justify-center flex-wrap" ] + (List.map iconLinkToCenter Utils.Constants.iconLinks) + , Html.div [ class "text-center text-xl p-2" ] [ Html.text "I'm Avinal and I work at Red Hat as an Associate Software Engineer for Hybrid Cloud Engineering." ] + , Html.footer [ class "flex justify-center flex-wrap" ] + (List.map footerLinkToCenter Utils.Constants.footerLinks) + ] + ] + } diff --git a/src/Main.elm b/src/Main.elm deleted file mode 100644 index 59c4224..0000000 --- a/src/Main.elm +++ /dev/null @@ -1,312 +0,0 @@ -module Main exposing (main) - -import Base exposing (websiteBase) -import Blog as Blog -import Browser exposing (Document) -import Browser.Navigation as Nav -import Html exposing (Html, a, div, footer, header, img, li, text, ul) -import Html.Attributes exposing (class, href, src, target) -import Html.Lazy exposing (lazy) -import Splash as Splash -import Static as Static -import Terminal as Terminal -import Url exposing (Url) -import Url.Parser as Parser exposing ((), Parser, s) - - - ---MODEL - - -{-| Model design -Model -Page: Page that currently is active --} -type alias Model = - { page : Page - , title : String - , key : Nav.Key - , url : Url - } - - - --- PAGE - - -{-| Page designs - - BlogPage: Page design for blogs - TerminalPage: Page design for terminal - StaticPage: Page design for static pages - NotFound: Page design for 404 page - --} -type Page - = SplashPage Splash.Model - | BlogPage Blog.Model - | TerminalPage Terminal.Model - | StaticPage Static.Model - | NotFound - - - --- VIEW - - -view : Model -> Document Msg -view model = - let - content = - case model.page of - SplashPage splashModel -> - Splash.view splashModel - |> Html.map GotSplashMsg - - BlogPage blogs -> - Blog.view blogs - |> Html.map GotBlogMsg - - TerminalPage terminal -> - Terminal.view terminal - |> Html.map GotTerminalMsg - - StaticPage static -> - Static.view static - |> Html.map GotStaticMsg - - NotFound -> - Splash.view (Splash.notFound (Url.toString model.url)) - |> Html.map GotSplashMsg - in - { title = model.title - , body = - [ div [ class "foo-content" ] - [ lazy viewHeader model.page - , content - , lazy viewFooter model.page - ] - ] - } - - -type Msg - = GotSplashMsg Splash.Msg - | GotBlogMsg Blog.Msg - | GotTerminalMsg Terminal.Msg - | GotStaticMsg Static.Msg - | ChangeUrl Url - | ClickedLink Browser.UrlRequest - - -viewHeader : Page -> Html msg -viewHeader page = - let - headerContent = - case page of - SplashPage _ -> - div [] [] - - _ -> - header [ class "foo-logo" ] - [ img [ src "/website/logo-static.svg", target websiteBase ] - [] - ] - in - headerContent - - -viewFooter : Page -> Html msg -viewFooter page = - let - footerContent = - case page of - SplashPage _ -> - div [] [] - - _ -> - footer [ class "foo-footer" ] - [ ul [] - [ li [] [ a [ href websiteBase ] [ text "Home" ] ] - , li [] [ a [ href "https://avinal.space/pages/about-me" ] [ text "About me " ] ] - , li [] [ a [ href "https://avinal.space/posts" ] [ text "Blog" ] ] - , li [] [ a [ href "https://avinal.space/pages/projects" ] [ text "Projects" ] ] - , li [] [ a [ href "https://gsoc.avinal.space" ] [ text "GSoC" ] ] - ] - ] - in - footerContent - - -update : Msg -> Model -> ( Model, Cmd Msg ) -update msg model = - case msg of - GotSplashMsg splashMsg -> - case model.page of - SplashPage splash -> - toSplash model (Splash.update splashMsg splash) - - _ -> - ( model, Cmd.none ) - - GotBlogMsg blogMsg -> - case model.page of - BlogPage blogModel -> - let - title = - case blogModel.blog of - Just blog -> - blog.meta.title - - Nothing -> - "Blog" - in - toBlog - { model - | title = title ++ " | " ++ model.title - } - (Blog.update blogMsg blogModel) - - _ -> - ( model, Cmd.none ) - - GotTerminalMsg terminalMsg -> - case model.page of - TerminalPage terminal -> - toTerminal model (Terminal.update terminalMsg terminal) - - _ -> - ( model, Cmd.none ) - - GotStaticMsg staticMsg -> - case model.page of - StaticPage static -> - toStatic model (Static.update staticMsg static) - - _ -> - ( model, Cmd.none ) - - ChangeUrl url -> - updateUrl { model | url = url } - - ClickedLink urlRequest -> - case urlRequest of - Browser.Internal href -> - ( model, Nav.pushUrl model.key (Url.toString href) ) - - Browser.External url -> - ( model, Nav.load url ) - - -toSplash : Model -> ( Splash.Model, Cmd Splash.Msg ) -> ( Model, Cmd Msg ) -toSplash model ( splashModel, cmd ) = - ( { model | page = SplashPage splashModel }, Cmd.map GotSplashMsg cmd ) - - -toBlog : Model -> ( Blog.Model, Cmd Blog.Msg ) -> ( Model, Cmd Msg ) -toBlog model ( blogModel, cmd ) = - ( { model | page = BlogPage blogModel }, Cmd.map GotBlogMsg cmd ) - - -toTerminal : Model -> ( Terminal.Model, Cmd Terminal.Msg ) -> ( Model, Cmd Msg ) -toTerminal model ( terminalModel, cmd ) = - ( { model | page = TerminalPage terminalModel }, Cmd.map GotTerminalMsg cmd ) - - -toStatic : Model -> ( Static.Model, Cmd Static.Msg ) -> ( Model, Cmd Msg ) -toStatic model ( staticModel, cmd ) = - ( { model | page = StaticPage staticModel }, Cmd.map GotStaticMsg cmd ) - - -init : () -> Url -> Nav.Key -> ( Model, Cmd Msg ) -init _ url key = - updateUrl { url = url, page = NotFound, title = "Be My SpaceTime", key = key } - - - --- PARSER - - -type Route - = Splash - | Blog - | BlogPost String String (Maybe String) - | Terminal - | Static - - - --- | BlogPost String String - - -parser : Parser (Route -> a) a -parser = - Parser.oneOf - [ Parser.map Splash Parser.top - - -- , Parser.map Splash (s urlPrefix) - , Parser.map Blog (s "posts") - , Parser.map BlogPost (s "posts" Parser.string Parser.string Parser.fragment identity) - , Parser.map Static (s "pages") - , Parser.map Terminal (s "terminal") - ] - - -updateUrl : Model -> ( Model, Cmd Msg ) -updateUrl model = - case Parser.parse parser model.url of - Just Splash -> - Splash.init () False "" - |> toSplash model - - Just Blog -> - Blog.init [] - |> toBlog model - - Just (BlogPost category title fragment) -> - case fragment of - Just something -> - Blog.init [ category, title, something ] - |> toBlog model - - Nothing -> - Blog.init [ category, title ] - |> toBlog model - - Just Terminal -> - Terminal.init () - |> toTerminal model - - Just Static -> - Static.init () - |> toStatic model - - Nothing -> - Splash.init () True (Url.toString model.url) - |> toSplash model - - -subscriptions : Model -> Sub Msg -subscriptions model = - case model.page of - -- BlogPage blogModel -> - -- Blog.subscriptions blogModel - -- |> Sub.map GotBlogMsg - _ -> - Sub.none - - - --- ENTRYPOINT - - -main : Program () Model Msg -main = - Browser.application - { init = init - , view = view - , update = update - , subscriptions = subscriptions - , onUrlChange = ChangeUrl - , onUrlRequest = ClickedLink - } diff --git a/src/Pages/Home_.elm b/src/Pages/Home_.elm new file mode 100644 index 0000000..a7c33c3 --- /dev/null +++ b/src/Pages/Home_.elm @@ -0,0 +1,317 @@ +module Pages.Home_ exposing (Model, Msg, page) + +import Array exposing (Array) +import Effect exposing (Effect) +import Html exposing (Html) +import Html.Events exposing (onClick, onMouseLeave) +import Layouts +import Page exposing (Page) +import Route exposing (Route) +import Shared +import Svg exposing (..) +import Svg.Attributes as SA +import Svg.Events as SE +import Time +import Utils.Constants exposing (nameMatrix) +import View exposing (View) + + +page : Shared.Model -> Route () -> Page Model Msg +page model route = + Page.new + { init = init + , update = update + , subscriptions = subscriptions + , view = view + } + |> Page.withLayout layout + + + +-- LAYOUT + + +layout : Model -> Layouts.Layout +layout model = + Layouts.Home + { home = {} + } + + + +-- INIT + + +type Cell + = Alive + | Dead + + +type alias Universe a = + { space : Array a + , width : Int + , height : Int + } + + +type alias Model = + { universe : Universe Cell + , generations : Int + , generating : Bool + } + + +cellSize = + 10 + + +init : () -> ( Model, Effect Msg ) +init () = + ( { universe = bigBang 30 30 Dead + , generating = False + , generations = 0 + } + , Effect.none + ) + + + +-- UPDATE + + +type Msg + = Ressurect Int Int + | NextGeneration + | LiveLife + | Apocalypse + + +update : Msg -> Model -> ( Model, Effect Msg ) +update msg model = + case msg of + Ressurect x y -> + ( { model + | universe = + buildRelationship model.universe + x + y + invertLife + } + , Effect.none + ) + + NextGeneration -> + let + universe = + nextGeneration model.universe + + generations = + model.generations + 1 + + generating = + model.generating && universe /= model.universe + in + ( { model + | universe = universe + , generations = generations + , generating = generating + } + , Effect.none + ) + + LiveLife -> + ( { model | generating = not model.generating } + , Effect.none + ) + + Apocalypse -> + ( { model | generating = False } + , Effect.none + ) + + + +-- SUBSCRIPTIONS + + +subscriptions : Model -> Sub Msg +subscriptions model = + if model.generating then + Time.every 500 (always NextGeneration) + + else + Sub.none + + + +-- VIEW + + +view : Model -> View Msg +view model = + { title = "Be my SpaceTime" + , body = [ Html.div [ onClick LiveLife, onMouseLeave LiveLife ] [ universeSvg model ] ] + } + + +cellToSvg : Int -> Int -> Cell -> Svg Msg +cellToSvg x y cell = + let + isName = + if Array.get ((y - 12) * 24 + x - 3) nameMatrix == Just 1 && x >= 3 && x < 27 then + True + + else + False + + color = + case cell of + Alive -> + if isName then + "fill-cyan-500" + + else + "fill-pink-500" + + Dead -> + "fill-neutral-800" + in + rect + [ SA.x (String.fromInt (x * cellSize)) + , SA.y (String.fromInt (y * cellSize)) + , SA.width (String.fromInt cellSize) + , SA.height (String.fromInt cellSize) + , SA.class color + , SE.onMouseOver (Ressurect x y) + ] + [] + + +universeSvg : Model -> Html Msg +universeSvg model = + let + svgWidth = + String.fromInt (model.universe.width * cellSize) + + svgHeight = + String.fromInt (model.universe.height * cellSize) + in + svg + [ SA.width "150" + , SA.height "150" + , SA.viewBox ("0 0 " ++ svgWidth ++ " " ++ svgHeight) + , SA.class "stroke-0" + ] + (stretchUniverseThin cellToSvg model.universe) + + + +-- UTIL + + +bigBang : Int -> Int -> a -> Universe a +bigBang width height value = + { space = Array.repeat (width * height) value + , width = width + , height = height + } + + +stretchUniverseThin : (Int -> Int -> a -> b) -> Universe a -> List b +stretchUniverseThin f universe = + Array.toIndexedList universe.space + |> List.map (\( i, cell ) -> f (modBy universe.width i) (i // universe.width) cell) + + +nextGeneration : Universe Cell -> Universe Cell +nextGeneration universe = + { universe + | space = + Array.indexedMap + (decideFateOf universe) + universe.space + } + + +decideFateOf : Universe Cell -> Int -> Cell -> Cell +decideFateOf u i today = + let + aliveAtoms = + countLiveAtoms i u + in + case today of + Alive -> + if aliveAtoms < 2 || aliveAtoms > 3 then + Dead + + else + Alive + + Dead -> + if aliveAtoms == 3 then + Alive + + else + Dead + + +buildRelationship : Universe a -> Int -> Int -> (a -> a) -> Universe a +buildRelationship universe x y fn = + case getUniverseAt x y universe of + Just cell -> + setUniverseAt x y (fn cell) universe + + Nothing -> + universe + + +getUniverseAt : Int -> Int -> Universe a -> Maybe a +getUniverseAt x y u = + Array.get (y * u.width + x) u.space + + +setUniverseAt : Int -> Int -> a -> Universe a -> Universe a +setUniverseAt x y value u = + { u | space = Array.set (y * u.width + x) value u.space } + + +countLiveAtoms : Int -> Universe Cell -> Int +countLiveAtoms i universe = + let + above = + i - universe.width + + below = + i + universe.width + + coordinate = + [ above - 1 + , above + , above + 1 + , i - 1 + , i + 1 + , below - 1 + , below + , below + 1 + ] + in + coordinate + |> List.filter + (\n -> + abs + (modBy universe.width n - modBy universe.width i) + <= 1 + ) + |> List.map (\c -> universe.space |> Array.get c) + |> List.filter (\c -> c == Just Alive) + |> List.length + + +invertLife : Cell -> Cell +invertLife cell = + case cell of + Alive -> + Dead + + Dead -> + Alive diff --git a/src/Pages/Posts.elm b/src/Pages/Posts.elm new file mode 100644 index 0000000..e7db380 --- /dev/null +++ b/src/Pages/Posts.elm @@ -0,0 +1,199 @@ +module Pages.Posts exposing (Model, Msg, page) + +import Effect exposing (Effect) +import Html exposing (Html) +import Html.Attributes exposing (class, href, src) +import Http +import Json.Decode as Json +import Page exposing (Page) +import Route exposing (Route) +import Shared +import Url exposing (Protocol(..)) +import Utils.Constants exposing (..) +import Utils.Utils as UU +import View exposing (View) + + +page : Shared.Model -> Route () -> Page Model Msg +page shared route = + Page.new + { init = init + , update = update + , subscriptions = subscriptions + , view = view + } + + + +-- INIT + + +type alias JsonMeta = + { title : String + , date : String + , description : String + , category : String + , slug : String + } + + +type alias Model = + { error : Maybe String + , blogList : Maybe (List JsonMeta) + } + + +init : () -> ( Model, Effect Msg ) +init () = + let + cmd : Cmd Msg + cmd = + Http.get + { url = "https://avinal.space/content/posts/posts.json" + , expect = Http.expectJson BloglistReceived (Json.list jsonMetaDecoder) + } + in + ( { error = Nothing + , blogList = Nothing + } + , Effect.sendCmd cmd + ) + + + +-- UPDATE + + +type Msg + = BloglistReceived (Result Http.Error (List JsonMeta)) + + +update : Msg -> Model -> ( Model, Effect Msg ) +update msg model = + case msg of + BloglistReceived (Ok data) -> + ( { model | blogList = Just data } + , Effect.none + ) + + BloglistReceived (Err err) -> + ( { model | error = Just (UU.errorToString err) }, Effect.none ) + + + +-- SUBSCRIPTIONS + + +subscriptions : Model -> Sub Msg +subscriptions model = + Sub.none + + + +-- VIEW + + +unsplash = + "https://source.unsplash.com/random/" + + +view : Model -> View Msg +view model = + let + taglist = + [] + + categoryNtags : String -> List String -> Html msg + categoryNtags category tags = + Html.span [ class "flex flex-wrap py-6 space-x-2 border-t border-dashed border-teal-500" ] + (Html.b [ class "px-3 py-1 m-1 rounded-sm hover:underline dark:bg-pink-400 dark:text-gray-900" ] + [ Html.text category + ] + :: List.map + (\tag -> + Html.i [ class "px-3 py-1 m-1 rounded-sm hover:underline dark:bg-cyan-500 dark:text-gray-900" ] + [ Html.text tag + ] + ) + tags + ) + + maincard : List JsonMeta -> Html msg + maincard bloglist = + case bloglist of + first :: rest -> + Html.div [ class "max-w-6xl p-6 mx-auto space-y-6 sm:space-y-12 mb-16" ] + [ Html.a [ class "block max-w-sm gap-3 mx-auto sm:max-w-full group hover:no-underline focus:no-underline lg:grid lg:grid-cols-12 bg-neutral-900", href ("/posts/" ++ first.category ++ "/" ++ first.slug) ] + [ Html.img [ class "object-cover w-full h-64 rounded sm:h-96 lg:col-span-7", src unsplash ] [] + , Html.div [ class "p-6 space-y-2 lg:col-span-5" ] + [ Html.h3 [ class "text-2xl font-semibold sm:text-4xl group-hover:underline group-focus:underline" ] + [ Html.text first.title ] + , Html.span [ class "text-gray-400" ] [ Html.text first.date ] + , Html.p [] [ Html.text <| String.left 200 first.description ] + , categoryNtags first.category taglist + ] + ] + , Html.div [ class "grid justify-center grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3" ] <| List.map card rest + ] + + [] -> + Html.div [] [] + + card : JsonMeta -> Html msg + card blog = + Html.a [ class "max-w-sm mx-auto group hover:no-underline focus:no-underline bg-neutral-900", href ("/posts/" ++ blog.category ++ "/" ++ blog.slug) ] + [ Html.img [ class "object-cover w-full h-44 rounded", src unsplash ] [] + , Html.div [ class "p-6 space-y-2" ] + [ Html.h3 [ class "text-2xl font-semibold group-hover:underline group-focus:underline" ] [ Html.text blog.title ] + , Html.span [ class " text-gray-400" ] [ Html.text blog.date ] + , Html.p [] [ Html.text <| String.left 200 blog.description ] + , categoryNtags blog.category taglist + ] + ] + + footerLinkToLeft : Link -> Html msg + footerLinkToLeft link = + Html.li [] + [ Html.a + [ href link.url + , class "mr-4 md:mr-6 underline decoration-cyan-500 hover:decoration-pink-500" + ] + [ Html.text link.text ] + ] + in + case model.blogList of + Just blogList -> + { title = "Blog by Avinal" + , body = + [ Html.section [ class "text-gray-100" ] + [ maincard blogList + , Html.div [ class "fixed bottom-0 left-0 bg-neutral-900 z-20 p-4 w-full md:flex md:items-center md:justify-between md:p-4" ] + [ Html.ul + [ class "flex flex-wrap items-center mt-3 text-xl text-neutral-500 sm:mt-0" ] + (List.map footerLinkToLeft <| + { text = "Home", url = "/" } + :: Utils.Constants.footerLinks + ) + ] + ] + ] + } + + Nothing -> + { title = "Something went wrong" + , body = [ Html.text <| Maybe.withDefault "" model.error ] + } + + + +-- UTILS + + +jsonMetaDecoder : Json.Decoder JsonMeta +jsonMetaDecoder = + Json.map5 JsonMeta + (Json.field "title" Json.string) + (Json.field "date" Json.string) + (Json.field "description" Json.string) + (Json.field "category" Json.string) + (Json.field "slug" Json.string) diff --git a/src/Pages/Posts/ALL_.elm b/src/Pages/Posts/ALL_.elm new file mode 100644 index 0000000..ae6bb57 --- /dev/null +++ b/src/Pages/Posts/ALL_.elm @@ -0,0 +1,195 @@ +module Pages.Posts.ALL_ exposing (Model, Msg, page) + +import Effect exposing (Effect) +import Html exposing (Html) +import Html.Attributes +import Http +import Layouts +import Page exposing (Page) +import Route exposing (Route) +import Shared +import Url exposing (Protocol(..)) +import Utils.Utils as UU +import View exposing (View) +import Yaml.Decode as Yaml + + +page : Shared.Model -> Route { first_ : String, rest_ : List String } -> Page Model Msg +page shared route = + Page.new + { init = init route + , update = update + , subscriptions = subscriptions + , view = view + } + |> Page.withLayout layout + + + +-- LAYOUT + + +layout : Model -> Layouts.Layout +layout model = + Layouts.Blog + { blog = + {} + } + + + +-- INIT + + +type alias Model = + { blog : Maybe Blog + , requestUrl : String + , success : Bool + , fragment : String + , error : Maybe String + } + + +type alias Blog = + { meta : YamlMeta + , content : String + } + + +init : Route { first_ : String, rest_ : List String } -> () -> ( Model, Effect Msg ) +init route () = + let + requestUrl = + -- "https://gist.githubusercontent.com/avinal/a66c60362491498d114b53e8801632d6/raw/cd2fd3816f0f005fe12ebfeead8d8b1fcaafa5db/markdowntest.md" + UU.contentUrl + { category = route.params.first_ + , post = + Maybe.withDefault "" <| List.head route.params.rest_ + } + + cmd : Cmd Msg + cmd = + Http.get + { url = requestUrl + , expect = Http.expectString RawMarkdownReceived + } + in + ( { blog = Nothing + , requestUrl = requestUrl + , success = False + , fragment = "" + , error = Nothing + } + , Effect.sendCmd cmd + ) + + + +-- UPDATE + + +type Msg + = RawMarkdownReceived (Result Http.Error String) + | AttributeUpdate String + + +update : Msg -> Model -> ( Model, Effect Msg ) +update msg model = + case msg of + RawMarkdownReceived (Ok data) -> + case splitMetaContent data of + Ok blog -> + ( { model | blog = Just blog, success = True }, Effect.none ) + + Err err -> + ( { model | success = False, error = Just err }, Effect.none ) + + RawMarkdownReceived (Err err) -> + ( { model | success = False, error = Just (UU.errorToString err) }, Effect.none ) + + AttributeUpdate data -> + ( model, Effect.none ) + + + +-- SUBSCRIPTIONS + + +subscriptions : Model -> Sub Msg +subscriptions model = + Sub.none + + + +-- VIEW + + +view : Model -> View Msg +view model = + case model.blog of + Just blog -> + { title = "Blog | " ++ blog.meta.title + , body = [ articleNode blog.content ] + } + + Nothing -> + { title = "Be My SpaceTime | Something went wrong" + , body = [ articleNode <| Maybe.withDefault "" model.error ] + } + + +articleNode : String -> Html Msg +articleNode data = + Html.node "rendered-md" + [ Html.Attributes.attribute "markdowndata" data ] + [] + + + +-- UTILITIES + + +type alias YamlMeta = + { title : String + , date : String + , description : Maybe String + , tags : List String + , category : String + , image : Maybe String + , modified : Maybe String + } + + +splitMetaContent : String -> Result String Blog +splitMetaContent data = + let + headIndices : List Int + headIndices = + String.indices "---" data |> List.take 2 + + metadata = + String.slice ((Maybe.withDefault 0 <| List.head headIndices) + 3) + ((Maybe.withDefault 0 <| List.head <| List.reverse headIndices) - 1) + data + + content = + String.dropLeft ((Maybe.withDefault 0 <| List.head <| List.reverse headIndices) + 3) data + in + case Yaml.fromString metaDecoder metadata of + Ok meta -> + Ok { meta = meta, content = content } + + Err err -> + Err ("YAML front matter parsing failed: " ++ Yaml.errorToString err) + + +metaDecoder : Yaml.Decoder YamlMeta +metaDecoder = + Yaml.map7 YamlMeta + (Yaml.field "title" Yaml.string) + (Yaml.field "date" Yaml.string) + (Yaml.maybe (Yaml.field "description" Yaml.string)) + (Yaml.field "tags" (Yaml.list Yaml.string)) + (Yaml.field "category" Yaml.string) + (Yaml.maybe (Yaml.field "image" Yaml.string)) + (Yaml.maybe (Yaml.field "modified" Yaml.string)) diff --git a/src/Splash.elm b/src/Splash.elm deleted file mode 100644 index 682d77f..0000000 --- a/src/Splash.elm +++ /dev/null @@ -1,101 +0,0 @@ -module Splash exposing (..) - -import Html exposing (Html, a, b, div, i, img, span, text) -import Html.Attributes exposing (alt, class, height, href, src, width) - - -type alias Model = - { support_message : Html Msg - , error_message : Html Msg - } - - -view : Model -> Html Msg -view model = - div [ class "foo-content" ] - [ div [ class "foo-error" ] - [ img - [ class "foo-error__logo" - , src "/website/logo-loading.svg" - , alt "Finding the SpaceTime" - , width 130 - , height 130 - ] - [] - , div [ class "foo-support__message" ] [ model.support_message ] - , div [ class "foo-error__message" ] [ model.error_message ] - , withSpacing (div [ class "foo-support__message" ]) - [ a [ href "https://avinal.space/pages/about-me" ] [ b [ class "foo-term-blue" ] [ text "A" ], text "bout" ] - , a [ href "https://avinal.space/posts" ] [ b [ class "foo-term-blue" ] [ text "B" ], text "log" ] - , a [ href "https://avinal.space/pages/projects" ] [ b [ class "foo-term-blue" ] [ text "P" ], text "rojects" ] - , a [ href "https://gsoc.avinal.space" ] [ b [ class "foo-term-blue" ] [ text "G" ], text "SoC" ] - ] - ] - ] - - -type Msg - = Nothing - - -{-| How to get whitespace between html tags? - - Link: - --} -withSpacing : (List (Html msg) -> Html msg) -> List (Html msg) -> Html msg -withSpacing element = - List.intersperse (text " ") >> element - - -notFound : String -> Model -notFound error = - { support_message = default.support_message - , error_message = - withSpacing (span []) - [ i [ class "fa-solid fa-triangle-exclamation foo-term-yellow" ] [] - , text "I could not find anything on this" - , i [ class "fa-solid fa-link foo-term-red" ] [] - , a [ href error ] [ text error ] - , text "If you think this is a mistake, please contact me." - , i [ class "fa-solid fa-triangle-exclamation foo-term-yellow" ] [] - ] - } - - -default : Model -default = - { support_message = - withSpacing (span []) - [ a [ href "https://github.com/avinal" ] [ i [ class "fa-brands fa-github" ] [] ] - , a [ href "https://www.linkedin.com/in/avinal" ] [ i [ class "fa-brands fa-linkedin" ] [] ] - , a [ href "https://instagram.com/avinal.k" ] [ i [ class "fa-brands fa-instagram" ] [] ] - , a [ href "https://meet.avinal.space" ] [ i [ class "fa-solid fa-calendar-days" ] [] ] - , a [ href "mailto:ripple+blog@avinal.space" ] [ i [ class "fa-solid fa-envelope" ] [] ] - , a [ href "https://avinal.space/terminal" ] [ i [ class "fa-solid fa-terminal" ] [] ] - ] - , error_message = - withSpacing (span []) - [ text "I'm" - , b [ class "foo-term-pink" ] [ text "Avinal" ] - , text "and I work at Red Hat" - , i [ class "fa-brands fa-redhat foo-term-red" ] [] - , text "as an Associate Software Engineer for Hybrid Cloud Engineering." - ] - } - - -update : Msg -> Model -> ( Model, Cmd Msg ) -update msg model = - case msg of - Nothing -> - ( model, Cmd.none ) - - -init : () -> Bool -> String -> ( Model, Cmd Msg ) -init _ isError error = - if isError then - ( notFound error, Cmd.none ) - - else - ( default, Cmd.none ) diff --git a/src/Static.elm b/src/Static.elm deleted file mode 100644 index 800c781..0000000 --- a/src/Static.elm +++ /dev/null @@ -1,36 +0,0 @@ -module Static exposing (..) - -import Html exposing (..) -import Html.Attributes exposing (..) - - -type alias Model = - { title : String - , url : String - } - - -view : Model -> Html Msg -view model = - div [] - [ h1 [] [ text model.title ] - , a [ href model.url ] [ text model.url ] - ] - - -type Msg - = NoOp - - -update : Msg -> Model -> ( Model, Cmd Msg ) -update msg model = - case msg of - NoOp -> - ( model, Cmd.none ) - - -init : () -> ( Model, Cmd Msg ) -init _ = - ( Model "Hello World" "http://elm-lang.org" - , Cmd.none - ) diff --git a/src/Terminal.elm b/src/Terminal.elm deleted file mode 100644 index e1d9e9a..0000000 --- a/src/Terminal.elm +++ /dev/null @@ -1,41 +0,0 @@ -module Terminal exposing (..) - -import Html exposing (..) -import Html.Attributes exposing (..) -import Html.Events exposing (..) - - -type alias Model = - { title : String - , url : String - } - - -view : Model -> Html Msg -view model = - div [] - [ h1 [] [ text model.title ] - , input [ placeholder "Enter URL", onInput UrlEntered ] [] - , button [ onClick Go ] [ text "Go" ] - , a [ href model.url ] [ text model.url ] - ] - - -type Msg - = UrlEntered String - | Go - - -update : Msg -> Model -> ( Model, Cmd Msg ) -update msg model = - case msg of - UrlEntered url -> - ( { model | url = url }, Cmd.none ) - - Go -> - ( model, Cmd.none ) - - -init : () -> ( Model, Cmd Msg ) -init _ = - ( Model "Terminal" "", Cmd.none ) diff --git a/src/Utils/Constants.elm b/src/Utils/Constants.elm new file mode 100644 index 0000000..d31e39b --- /dev/null +++ b/src/Utils/Constants.elm @@ -0,0 +1,203 @@ +module Utils.Constants exposing (..) + +import Array exposing (Array) + + +type alias Link = + { url : String + , text : String + } + + +type alias IconLink = + { url : String + , icon : String + } + + +footerLinks : List Link +footerLinks = + [ { text = "About", url = "/pages/about-me" } + , { text = "Blog", url = "/posts" } + , { text = "Projects", url = "/pages/projects" } + , { text = "GSoC", url = "https://gsoc.avinal.space" } + ] + + +iconLinks : List IconLink +iconLinks = + [ { url = "https://github.com/avinal", icon = "fa-brands fa-github" } + , { url = "https://www.linkedin.com/in/avinal", icon = "fa-brands fa-linkedin" } + , { url = "https://instagram.com/avinal", icon = "fa-brands fa-instagram" } + , { url = "mailto:ripple@avinal.space", icon = "fa-solid fa-envelope" } + ] + + +contentBase : String +contentBase = + "https://avinal.space/" + + +user : String +user = + "avinal" + + +urlPrefix : String +urlPrefix = + "avinal.github.io" + + +contentUrlPrefix : String +contentUrlPrefix = + contentBase ++ "/content/" + + +nameMatrix : Array Int +nameMatrix = + Array.fromList + [ 0 + , 1 + , 1 + , 0 + , 0 + , 0 + , 0 + , 0 + , 0 + , 0 + , 0 + , 1 + , 0 + , 0 + , 0 + , 0 + , 0 + , 0 + , 0 + , 0 + , 0 + , 0 + , 0 + , 1 + , 1 + , 0 + , 0 + , 1 + , 0 + , 0 + , 0 + , 0 + , 0 + , 0 + , 0 + , 0 + , 0 + , 0 + , 0 + , 0 + , 0 + , 0 + , 0 + , 0 + , 0 + , 0 + , 0 + , 1 + , 1 + , 1 + , 1 + , 1 + , 0 + , 1 + , 0 + , 0 + , 0 + , 1 + , 0 + , 1 + , 0 + , 1 + , 1 + , 1 + , 0 + , 0 + , 1 + , 1 + , 1 + , 0 + , 0 + , 1 + , 1 + , 0 + , 0 + , 1 + , 0 + , 1 + , 0 + , 0 + , 0 + , 1 + , 0 + , 1 + , 0 + , 1 + , 0 + , 0 + , 1 + , 0 + , 1 + , 0 + , 1 + , 0 + , 0 + , 1 + , 1 + , 0 + , 0 + , 1 + , 0 + , 0 + , 1 + , 0 + , 1 + , 0 + , 0 + , 1 + , 0 + , 1 + , 0 + , 0 + , 1 + , 0 + , 1 + , 0 + , 1 + , 0 + , 0 + , 1 + , 1 + , 0 + , 0 + , 1 + , 0 + , 0 + , 0 + , 1 + , 0 + , 0 + , 0 + , 1 + , 0 + , 1 + , 0 + , 0 + , 1 + , 0 + , 1 + , 1 + , 1 + , 1 + , 0 + , 1 + ] diff --git a/src/Utils/Utils.elm b/src/Utils/Utils.elm new file mode 100644 index 0000000..ebac368 --- /dev/null +++ b/src/Utils/Utils.elm @@ -0,0 +1,34 @@ +module Utils.Utils exposing (..) + +import Http exposing (Error(..)) +import Utils.Constants exposing (..) + + +contentUrl : { category : String, post : String } -> String +contentUrl { category, post } = + contentUrlPrefix ++ "posts/" ++ category ++ "/" ++ post ++ ".md" + + +errorToString : Http.Error -> String +errorToString error = + case error of + BadUrl url -> + "The URL " ++ url ++ " was invalid" + + Timeout -> + "Unable to reach the server, try again" + + NetworkError -> + "Unable to reach the server, check your network connection" + + BadStatus 500 -> + "The server had a problem, try again later" + + BadStatus 400 -> + "Verify your information and try again" + + BadStatus _ -> + "Unknown error" + + BadBody errorMessage -> + errorMessage diff --git a/src/View.elm b/src/View.elm new file mode 100644 index 0000000..2cd8da1 --- /dev/null +++ b/src/View.elm @@ -0,0 +1,76 @@ +module View exposing + ( View, map + , none, fromString + , toBrowserDocument + ) + +{-| + +@docs View, map +@docs none, fromString +@docs toBrowserDocument + +-} + +import Browser +import Html exposing (Html) +import Html.Attributes exposing (class, href) +import Route exposing (Route) +import Shared.Model + + +type alias View msg = + { title : String + , body : List (Html msg) + } + + +{-| Used internally by Elm Land to create your application +so it works with Elm's expected `Browser.Document msg` type. +-} +toBrowserDocument : + { shared : Shared.Model.Model + , route : Route () + , view : View msg + } + -> Browser.Document msg +toBrowserDocument { view } = + { title = view.title + , body = + [ Html.main_ [ class "container mx-auto bg-neutral-800" ] + view.body + ] + } + + +{-| Used internally by Elm Land to connect your pages together. +-} +map : (msg1 -> msg2) -> View msg1 -> View msg2 +map fn view = + { title = view.title + , body = List.map (Html.map fn) view.body + } + + +{-| Used internally by Elm Land whenever transitioning between +authenticated pages. +-} +none : View msg +none = + { title = "Be My SpaceTime" + , body = [] + } + + +{-| If you customize the `View` module, anytime you run `elm-land add page`, +the generated page will use this when adding your `view` function. + +That way your app will compile after adding new pages, and you can see +the new page working in the web browser! + +-} +fromString : String -> View msg +fromString moduleName = + { title = moduleName + , body = [] + } diff --git a/src/input.css b/src/input.css new file mode 100644 index 0000000..9478412 --- /dev/null +++ b/src/input.css @@ -0,0 +1,120 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +/* PrismJS 1.29.0 +https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript */ +code[class*=language-], +pre[class*=language-] { + color: #f8f8f2; + background: 0 0; + text-shadow: 0 1px rgba(0, 0, 0, .3); + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + font-size: 1em; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none +} + +pre[class*=language-] { + padding: 1em; + margin: .5em 0; + overflow: auto; + border-radius: .3em +} + +:not(pre)>code[class*=language-], +pre[class*=language-] { + background: #272822 +} + +:not(pre)>code[class*=language-] { + padding: .1em; + border-radius: .3em; + white-space: normal +} + +.token.cdata, +.token.comment, +.token.doctype, +.token.prolog { + color: #8292a2 +} + +.token.punctuation { + color: #f8f8f2 +} + +.token.namespace { + opacity: .7 +} + +.token.constant, +.token.deleted, +.token.property, +.token.symbol, +.token.tag { + color: #f92672 +} + +.token.boolean, +.token.number { + color: #ae81ff +} + +.token.attr-name, +.token.builtin, +.token.char, +.token.inserted, +.token.selector, +.token.string { + color: #a6e22e +} + +.language-css .token.string, +.style .token.string, +.token.entity, +.token.operator, +.token.url, +.token.variable { + color: #f8f8f2 +} + +.token.atrule, +.token.attr-value, +.token.class-name, +.token.function { + color: #e6db74 +} + +.token.keyword { + color: #66d9ef +} + +.token.important, +.token.regex { + color: #fd971f +} + +.token.bold, +.token.important { + font-weight: 700 +} + +.token.italic { + font-style: italic +} + +.token.entity { + cursor: help +} \ No newline at end of file diff --git a/src/interop.js b/src/interop.js new file mode 100644 index 0000000..fc76f15 --- /dev/null +++ b/src/interop.js @@ -0,0 +1,4 @@ +import "./web-components/MarkedRender.js"; + + +export const onReady = ({ app, env }) => {}; diff --git a/src/web-components/MarkedRender.js b/src/web-components/MarkedRender.js new file mode 100644 index 0000000..7978f71 --- /dev/null +++ b/src/web-components/MarkedRender.js @@ -0,0 +1,58 @@ +import "./prism.js"; +customElements.define( + "rendered-md", + class extends HTMLElement { + constructor() { + super(); + } + connectedCallback() { + this.runMarked(); + } + attributeChangedCallback(name, oldValue, newValue) { + this.runMarked(); + } + runMarked() { + const renderer = new marked.Renderer(); + const data = this.getAttribute("markdowndata"); + renderer.heading = (text, level) => { + if (level === 1) { + return `
+

+ ${text}

+
`; + } + const escapedText = text + .trim() + .toLowerCase() + .replace(/[^\w]+/g, "-"); + + return ` + ${text} + + # + + `; + }; + + marked.setOptions({ + renderer: renderer, + highlight: function (code, lang) { + const grammer = Prism.languages[lang]; + if (!grammer) { + console.warn(`Unable to find prism highlight for '${lang}'`); + return; + } + console.info("Found", lang); + return Prism.highlight(code, grammer, lang); + }, + }); + + this.innerHTML = marked.parse(data); + console.log("Markdown rendering complete!"); + } + + static get observedAttributes() { + return ["markdowndata"]; + } + } +); diff --git a/public/prism.js b/src/web-components/prism.js similarity index 100% rename from public/prism.js rename to src/web-components/prism.js diff --git a/public/images/ants.jpg b/static/images/ants.jpg similarity index 100% rename from public/images/ants.jpg rename to static/images/ants.jpg diff --git a/public/images/butterfly.gif b/static/images/butterfly.gif similarity index 100% rename from public/images/butterfly.gif rename to static/images/butterfly.gif diff --git a/public/images/ci.png b/static/images/ci.png similarity index 100% rename from public/images/ci.png rename to static/images/ci.png diff --git a/public/images/docker-architecture.png b/static/images/docker-architecture.png similarity index 100% rename from public/images/docker-architecture.png rename to static/images/docker-architecture.png diff --git a/public/images/dog.gif b/static/images/dog.gif similarity index 100% rename from public/images/dog.gif rename to static/images/dog.gif diff --git a/public/images/goladder.png b/static/images/goladder.png similarity index 100% rename from public/images/goladder.png rename to static/images/goladder.png diff --git a/public/images/golang.png b/static/images/golang.png similarity index 100% rename from public/images/golang.png rename to static/images/golang.png diff --git a/public/images/info.svg b/static/images/info.svg similarity index 100% rename from public/images/info.svg rename to static/images/info.svg diff --git a/public/images/kubernetes-meme.png b/static/images/kubernetes-meme.png similarity index 100% rename from public/images/kubernetes-meme.png rename to static/images/kubernetes-meme.png diff --git a/public/images/mks-architecture.png b/static/images/mks-architecture.png similarity index 100% rename from public/images/mks-architecture.png rename to static/images/mks-architecture.png diff --git a/public/images/mks_logo.png b/static/images/mks_logo.png similarity index 100% rename from public/images/mks_logo.png rename to static/images/mks_logo.png diff --git a/public/images/redhat_logo.png b/static/images/redhat_logo.png similarity index 100% rename from public/images/redhat_logo.png rename to static/images/redhat_logo.png diff --git a/public/images/second-build.webm b/static/images/second-build.webm similarity index 100% rename from public/images/second-build.webm rename to static/images/second-build.webm diff --git a/public/images/venus-flytrap.gif b/static/images/venus-flytrap.gif similarity index 100% rename from public/images/venus-flytrap.gif rename to static/images/venus-flytrap.gif diff --git a/public/redirect.js b/static/js/redirect.js similarity index 100% rename from public/redirect.js rename to static/js/redirect.js diff --git a/public/logo-loading.svg b/static/logo-loading.svg similarity index 100% rename from public/logo-loading.svg rename to static/logo-loading.svg diff --git a/public/logo-static.svg b/static/logo-static.svg similarity index 100% rename from public/logo-static.svg rename to static/logo-static.svg diff --git a/static/main.css b/static/main.css new file mode 100644 index 0000000..2e48dc8 --- /dev/null +++ b/static/main.css @@ -0,0 +1,1805 @@ +/* +! tailwindcss v3.2.4 | MIT License | https://tailwindcss.com +*/ + +/* +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; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +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. +5. Use the user's configured `sans` font-feature-settings by default. +*/ + +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 */ + font-feature-settings: normal; + /* 5 */ +} + +/* +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; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +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 { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +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. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +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, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", 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; +} + +/* +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 { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + 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. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +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; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +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; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +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, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[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: ; +} + +::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: ; +} + +.container { + width: 100%; +} + +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + +.prose { + color: var(--tw-prose-body); + max-width: 65ch; +} + +.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 :where(a):not(:where([class~="not-prose"] *)) { + color: var(--tw-prose-links); + text-decoration: underline; + font-weight: 500; +} + +.prose :where(strong):not(:where([class~="not-prose"] *)) { + color: var(--tw-prose-bold); + 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; +} + +.prose :where(ol[type="A"]):not(:where([class~="not-prose"] *)) { + list-style-type: upper-alpha; +} + +.prose :where(ol[type="a"]):not(:where([class~="not-prose"] *)) { + list-style-type: lower-alpha; +} + +.prose :where(ol[type="A" s]):not(:where([class~="not-prose"] *)) { + list-style-type: upper-alpha; +} + +.prose :where(ol[type="a" s]):not(:where([class~="not-prose"] *)) { + list-style-type: lower-alpha; +} + +.prose :where(ol[type="I"]):not(:where([class~="not-prose"] *)) { + list-style-type: upper-roman; +} + +.prose :where(ol[type="i"]):not(:where([class~="not-prose"] *)) { + list-style-type: lower-roman; +} + +.prose :where(ol[type="I" s]):not(:where([class~="not-prose"] *)) { + list-style-type: upper-roman; +} + +.prose :where(ol[type="i" s]):not(:where([class~="not-prose"] *)) { + list-style-type: lower-roman; +} + +.prose :where(ol[type="1"]):not(:where([class~="not-prose"] *)) { + list-style-type: decimal; +} + +.prose :where(ul):not(:where([class~="not-prose"] *)) { + list-style-type: disc; + margin-top: 1.25em; + margin-bottom: 1.25em; + padding-left: 1.625em; +} + +.prose :where(ol > li):not(:where([class~="not-prose"] *))::marker { + font-weight: 400; + color: var(--tw-prose-counters); +} + +.prose :where(ul > li):not(:where([class~="not-prose"] *))::marker { + color: var(--tw-prose-bullets); +} + +.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 :where(blockquote):not(:where([class~="not-prose"] *)) { + font-weight: 500; + font-style: italic; + color: var(--tw-prose-quotes); + border-left-width: 0.25rem; + 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 :where(blockquote p:first-of-type):not(:where([class~="not-prose"] *))::before { + content: open-quote; +} + +.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"] *))::after { + content: close-quote; +} + +.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; +} + +.prose :where(h1 strong):not(:where([class~="not-prose"] *)) { + font-weight: 900; + color: inherit; +} + +.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; +} + +.prose :where(h2 strong):not(:where([class~="not-prose"] *)) { + font-weight: 800; + color: inherit; +} + +.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; +} + +.prose :where(h3 strong):not(:where([class~="not-prose"] *)) { + font-weight: 700; + color: inherit; +} + +.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; +} + +.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"] *)) { + 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 :where(code):not(:where([class~="not-prose"] *)) { + color: var(--tw-prose-code); + font-weight: 600; + font-size: 0.875em; +} + +.prose :where(code):not(:where([class~="not-prose"] *))::before { + content: "`"; +} + +.prose :where(code):not(:where([class~="not-prose"] *))::after { + content: "`"; +} + +.prose :where(a code):not(:where([class~="not-prose"] *)) { + color: inherit; +} + +.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); + overflow-x: auto; + font-weight: 400; + font-size: 0.875em; + line-height: 1.7142857; + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + border-radius: 0.375rem; + padding-top: 0.8571429em; + padding-right: 1.1428571em; + padding-bottom: 0.8571429em; + padding-left: 1.1428571em; +} + +.prose :where(pre code):not(:where([class~="not-prose"] *)) { + background-color: transparent; + border-width: 0; + border-radius: 0; + padding: 0; + font-weight: inherit; + color: inherit; + font-size: inherit; + font-family: inherit; + line-height: inherit; +} + +.prose :where(pre code):not(:where([class~="not-prose"] *))::before { + content: none; +} + +.prose :where(pre code):not(:where([class~="not-prose"] *))::after { + content: none; +} + +.prose :where(table):not(:where([class~="not-prose"] *)) { + width: 100%; + table-layout: auto; + text-align: left; + margin-top: 2em; + margin-bottom: 2em; + font-size: 0.875em; + line-height: 1.7142857; +} + +.prose :where(thead):not(:where([class~="not-prose"] *)) { + border-bottom-width: 1px; + border-bottom-color: var(--tw-prose-th-borders); +} + +.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 :where(tbody tr):not(:where([class~="not-prose"] *)) { + border-bottom-width: 1px; + border-bottom-color: var(--tw-prose-td-borders); +} + +.prose :where(tbody tr:last-child):not(:where([class~="not-prose"] *)) { + border-bottom-width: 0; +} + +.prose :where(tbody td):not(:where([class~="not-prose"] *)) { + vertical-align: baseline; +} + +.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 { + --tw-prose-body: #374151; + --tw-prose-headings: #111827; + --tw-prose-lead: #4b5563; + --tw-prose-links: #111827; + --tw-prose-bold: #111827; + --tw-prose-counters: #6b7280; + --tw-prose-bullets: #d1d5db; + --tw-prose-hr: #e5e7eb; + --tw-prose-quotes: #111827; + --tw-prose-quote-borders: #e5e7eb; + --tw-prose-captions: #6b7280; + --tw-prose-code: #111827; + --tw-prose-pre-code: #e5e7eb; + --tw-prose-pre-bg: #1f2937; + --tw-prose-th-borders: #d1d5db; + --tw-prose-td-borders: #e5e7eb; + --tw-prose-invert-body: #d1d5db; + --tw-prose-invert-headings: #fff; + --tw-prose-invert-lead: #9ca3af; + --tw-prose-invert-links: #fff; + --tw-prose-invert-bold: #fff; + --tw-prose-invert-counters: #9ca3af; + --tw-prose-invert-bullets: #4b5563; + --tw-prose-invert-hr: #374151; + --tw-prose-invert-quotes: #f3f4f6; + --tw-prose-invert-quote-borders: #374151; + --tw-prose-invert-captions: #9ca3af; + --tw-prose-invert-code: #fff; + --tw-prose-invert-pre-code: #d1d5db; + --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%); + --tw-prose-invert-th-borders: #4b5563; + --tw-prose-invert-td-borders: #374151; + font-size: 1rem; + line-height: 1.75; +} + +.prose :where(p):not(:where([class~="not-prose"] *)) { + margin-top: 1.25em; + margin-bottom: 1.25em; +} + +.prose :where(video):not(:where([class~="not-prose"] *)) { + margin-top: 2em; + margin-bottom: 2em; +} + +.prose :where(figure):not(:where([class~="not-prose"] *)) { + margin-top: 2em; + margin-bottom: 2em; +} + +.prose :where(li):not(:where([class~="not-prose"] *)) { + margin-top: 0.5em; + margin-bottom: 0.5em; +} + +.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(.prose > ul > li p):not(:where([class~="not-prose"] *)) { + margin-top: 0.75em; + margin-bottom: 0.75em; +} + +.prose :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) { + margin-top: 1.25em; +} + +.prose :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) { + margin-bottom: 1.25em; +} + +.prose :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) { + margin-top: 1.25em; +} + +.prose :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) { + margin-bottom: 1.25em; +} + +.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *)) { + margin-top: 0.75em; + margin-bottom: 0.75em; +} + +.prose :where(hr + *):not(:where([class~="not-prose"] *)) { + margin-top: 0; +} + +.prose :where(h2 + *):not(:where([class~="not-prose"] *)) { + margin-top: 0; +} + +.prose :where(h3 + *):not(:where([class~="not-prose"] *)) { + margin-top: 0; +} + +.prose :where(h4 + *):not(:where([class~="not-prose"] *)) { + margin-top: 0; +} + +.prose :where(thead th:first-child):not(:where([class~="not-prose"] *)) { + padding-left: 0; +} + +.prose :where(thead th:last-child):not(:where([class~="not-prose"] *)) { + padding-right: 0; +} + +.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, tfoot td:last-child):not(:where([class~="not-prose"] *)) { + padding-right: 0; +} + +.prose :where(.prose > :first-child):not(:where([class~="not-prose"] *)) { + margin-top: 0; +} + +.prose :where(.prose > :last-child):not(:where([class~="not-prose"] *)) { + margin-bottom: 0; +} + +.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); +} + +.static { + position: static; +} + +.fixed { + position: fixed; +} + +.relative { + position: relative; +} + +.bottom-0 { + bottom: 0px; +} + +.left-0 { + left: 0px; +} + +.z-20 { + z-index: 20; +} + +.m-1 { + margin: 0.25rem; +} + +.mx-auto { + margin-left: auto; + margin-right: auto; +} + +.mt-4 { + margin-top: 1rem; +} + +.mr-4 { + margin-right: 1rem; +} + +.mt-3 { + margin-top: 0.75rem; +} + +.mb-16 { + margin-bottom: 4rem; +} + +.block { + display: block; +} + +.inline { + display: inline; +} + +.flex { + display: flex; +} + +.inline-flex { + display: inline-flex; +} + +.table { + display: table; +} + +.grid { + display: grid; +} + +.h-screen { + height: 100vh; +} + +.h-64 { + height: 16rem; +} + +.h-44 { + height: 11rem; +} + +.min-h-screen { + min-height: 100vh; +} + +.w-full { + width: 100%; +} + +.max-w-6xl { + max-width: 72rem; +} + +.max-w-sm { + max-width: 24rem; +} + +.resize { + resize: both; +} + +.grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); +} + +.flex-col { + flex-direction: column; +} + +.flex-wrap { + flex-wrap: wrap; +} + +.items-center { + align-items: center; +} + +.justify-center { + justify-content: center; +} + +.gap-3 { + gap: 0.75rem; +} + +.gap-6 { + gap: 1.5rem; +} + +.space-x-2 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.5rem * var(--tw-space-x-reverse)); + margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); +} + +.space-y-6 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); +} + +.space-y-2 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); +} + +.overflow-hidden { + overflow: hidden; +} + +.rounded-sm { + border-radius: 0.125rem; +} + +.rounded { + border-radius: 0.25rem; +} + +.border-t { + border-top-width: 1px; +} + +.border-dashed { + border-style: dashed; +} + +.border-teal-500 { + --tw-border-opacity: 1; + border-color: rgb(20 184 166 / var(--tw-border-opacity)); +} + +.bg-neutral-800 { + --tw-bg-opacity: 1; + background-color: rgb(38 38 38 / var(--tw-bg-opacity)); +} + +.bg-neutral-900 { + --tw-bg-opacity: 1; + background-color: rgb(23 23 23 / var(--tw-bg-opacity)); +} + +.fill-pink-500 { + fill: #ec4899; +} + +.fill-neutral-800 { + fill: #262626; +} + +.fill-cyan-500 { + fill: #06b6d4; +} + +.stroke-0 { + stroke-width: 0; +} + +.object-cover { + -o-object-fit: cover; + object-fit: cover; +} + +.object-center { + -o-object-position: center; + object-position: center; +} + +.p-4 { + padding: 1rem; +} + +.p-3 { + padding: 0.75rem; +} + +.p-8 { + padding: 2rem; +} + +.p-2 { + padding: 0.5rem; +} + +.p-6 { + padding: 1.5rem; +} + +.py-4 { + padding-top: 1rem; + padding-bottom: 1rem; +} + +.py-6 { + padding-top: 1.5rem; + padding-bottom: 1.5rem; +} + +.px-3 { + padding-left: 0.75rem; + padding-right: 0.75rem; +} + +.py-1 { + padding-top: 0.25rem; + padding-bottom: 0.25rem; +} + +.text-center { + text-align: center; +} + +.text-xl { + font-size: 1.25rem; + line-height: 1.75rem; +} + +.text-2xl { + font-size: 1.5rem; + line-height: 2rem; +} + +.font-semibold { + font-weight: 600; +} + +.italic { + font-style: italic; +} + +.text-neutral-500 { + --tw-text-opacity: 1; + color: rgb(115 115 115 / var(--tw-text-opacity)); +} + +.text-neutral-400 { + --tw-text-opacity: 1; + color: rgb(163 163 163 / var(--tw-text-opacity)); +} + +.text-gray-400 { + --tw-text-opacity: 1; + color: rgb(156 163 175 / var(--tw-text-opacity)); +} + +.text-gray-100 { + --tw-text-opacity: 1; + color: rgb(243 244 246 / var(--tw-text-opacity)); +} + +.underline { + text-decoration-line: underline; +} + +.decoration-cyan-500 { + text-decoration-color: #06b6d4; +} + +.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); +} + +/* PrismJS 1.29.0 +https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript */ + +code[class*=language-], +pre[class*=language-] { + color: #f8f8f2; + background: 0 0; + text-shadow: 0 1px rgba(0, 0, 0, .3); + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + font-size: 1em; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + -webkit-hyphens: none; + hyphens: none +} + +pre[class*=language-] { + padding: 1em; + margin: .5em 0; + overflow: auto; + border-radius: .3em +} + +:not(pre)>code[class*=language-], +pre[class*=language-] { + background: #272822 +} + +:not(pre)>code[class*=language-] { + padding: .1em; + border-radius: .3em; + white-space: normal +} + +.token.cdata, +.token.comment, +.token.doctype, +.token.prolog { + color: #8292a2 +} + +.token.punctuation { + color: #f8f8f2 +} + +.token.namespace { + opacity: .7 +} + +.token.constant, +.token.deleted, +.token.property, +.token.symbol, +.token.tag { + color: #f92672 +} + +.token.boolean, +.token.number { + color: #ae81ff +} + +.token.attr-name, +.token.builtin, +.token.char, +.token.inserted, +.token.selector, +.token.string { + color: #a6e22e +} + +.language-css .token.string, +.style .token.string, +.token.entity, +.token.operator, +.token.url, +.token.variable { + color: #f8f8f2 +} + +.token.atrule, +.token.attr-value, +.token.class-name, +.token.function { + color: #e6db74 +} + +.token.keyword { + color: #66d9ef +} + +.token.important, +.token.regex { + color: #fd971f +} + +.token.bold, +.token.important { + font-weight: 700 +} + +.token.italic { + font-style: italic +} + +.token.entity { + cursor: help +} + +.hover\:text-pink-500:hover { + --tw-text-opacity: 1; + color: rgb(236 72 153 / var(--tw-text-opacity)); +} + +.hover\:underline:hover { + text-decoration-line: underline; +} + +.hover\:no-underline:hover { + text-decoration-line: none; +} + +.hover\:decoration-pink-500:hover { + text-decoration-color: #ec4899; +} + +.focus\:no-underline:focus { + text-decoration-line: none; +} + +.group:hover .group-hover\:underline { + text-decoration-line: underline; +} + +.group:focus .group-focus\:underline { + text-decoration-line: underline; +} + +.prose-a\:decoration-cyan-500 :is(:where(a):not(:where([class~="not-prose"] *))) { + text-decoration-color: #06b6d4; +} + +.hover\:prose-a\:decoration-pink-500 :is(:where(a):not(:where([class~="not-prose"] *))):hover { + text-decoration-color: #ec4899; +} + +@media (prefers-color-scheme: dark) { + .dark\:bg-pink-400 { + --tw-bg-opacity: 1; + background-color: rgb(244 114 182 / var(--tw-bg-opacity)); + } + + .dark\:bg-cyan-500 { + --tw-bg-opacity: 1; + background-color: rgb(6 182 212 / var(--tw-bg-opacity)); + } + + .dark\:text-gray-900 { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); + } +} + +@media (min-width: 640px) { + .sm\:mt-0 { + margin-top: 0px; + } + + .sm\:h-96 { + height: 24rem; + } + + .sm\:max-w-full { + max-width: 100%; + } + + .sm\:grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .sm\:space-y-12 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(3rem * var(--tw-space-y-reverse)); + } + + .sm\:text-4xl { + font-size: 2.25rem; + line-height: 2.5rem; + } +} + +@media (min-width: 768px) { + .md\:mx-auto { + margin-left: auto; + margin-right: auto; + } + + .md\:mr-6 { + margin-right: 1.5rem; + } + + .md\:flex { + display: flex; + } + + .md\:max-w-3xl { + max-width: 48rem; + } + + .md\:items-center { + align-items: center; + } + + .md\:justify-between { + justify-content: space-between; + } + + .md\:p-4 { + padding: 1rem; + } +} + +@media (min-width: 1024px) { + .lg\:col-span-7 { + grid-column: span 7 / span 7; + } + + .lg\:col-span-5 { + grid-column: span 5 / span 5; + } + + .lg\:grid { + display: grid; + } + + .lg\:max-w-4xl { + max-width: 56rem; + } + + .lg\:grid-cols-12 { + grid-template-columns: repeat(12, minmax(0, 1fr)); + } + + .lg\:grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .lg\:prose-lg { + font-size: 1.125rem; + line-height: 1.7777778; + } + + .lg\:prose-lg :where(p):not(:where([class~="not-prose"] *)) { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .lg\:prose-lg :where([class~="lead"]):not(:where([class~="not-prose"] *)) { + font-size: 1.2222222em; + line-height: 1.4545455; + margin-top: 1.0909091em; + margin-bottom: 1.0909091em; + } + + .lg\:prose-lg :where(blockquote):not(:where([class~="not-prose"] *)) { + margin-top: 1.6666667em; + margin-bottom: 1.6666667em; + padding-left: 1em; + } + + .lg\:prose-lg :where(h1):not(:where([class~="not-prose"] *)) { + font-size: 2.6666667em; + margin-top: 0; + margin-bottom: 0.8333333em; + line-height: 1; + } + + .lg\:prose-lg :where(h2):not(:where([class~="not-prose"] *)) { + font-size: 1.6666667em; + margin-top: 1.8666667em; + margin-bottom: 1.0666667em; + line-height: 1.3333333; + } + + .lg\:prose-lg :where(h3):not(:where([class~="not-prose"] *)) { + font-size: 1.3333333em; + margin-top: 1.6666667em; + margin-bottom: 0.6666667em; + line-height: 1.5; + } + + .lg\:prose-lg :where(h4):not(:where([class~="not-prose"] *)) { + margin-top: 1.7777778em; + margin-bottom: 0.4444444em; + line-height: 1.5555556; + } + + .lg\:prose-lg :where(img):not(:where([class~="not-prose"] *)) { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; + } + + .lg\:prose-lg :where(video):not(:where([class~="not-prose"] *)) { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; + } + + .lg\:prose-lg :where(figure):not(:where([class~="not-prose"] *)) { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; + } + + .lg\:prose-lg :where(figure > *):not(:where([class~="not-prose"] *)) { + margin-top: 0; + margin-bottom: 0; + } + + .lg\:prose-lg :where(figcaption):not(:where([class~="not-prose"] *)) { + font-size: 0.8888889em; + line-height: 1.5; + margin-top: 1em; + } + + .lg\:prose-lg :where(code):not(:where([class~="not-prose"] *)) { + font-size: 0.8888889em; + } + + .lg\:prose-lg :where(h2 code):not(:where([class~="not-prose"] *)) { + font-size: 0.8666667em; + } + + .lg\:prose-lg :where(h3 code):not(:where([class~="not-prose"] *)) { + font-size: 0.875em; + } + + .lg\:prose-lg :where(pre):not(:where([class~="not-prose"] *)) { + font-size: 0.8888889em; + line-height: 1.75; + margin-top: 2em; + margin-bottom: 2em; + border-radius: 0.375rem; + padding-top: 1em; + padding-right: 1.5em; + padding-bottom: 1em; + padding-left: 1.5em; + } + + .lg\:prose-lg :where(ol):not(:where([class~="not-prose"] *)) { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + padding-left: 1.5555556em; + } + + .lg\:prose-lg :where(ul):not(:where([class~="not-prose"] *)) { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + padding-left: 1.5555556em; + } + + .lg\:prose-lg :where(li):not(:where([class~="not-prose"] *)) { + margin-top: 0.6666667em; + margin-bottom: 0.6666667em; + } + + .lg\:prose-lg :where(ol > li):not(:where([class~="not-prose"] *)) { + padding-left: 0.4444444em; + } + + .lg\:prose-lg :where(ul > li):not(:where([class~="not-prose"] *)) { + padding-left: 0.4444444em; + } + + .lg\:prose-lg :where(.lg\:prose-lg > ul > li p):not(:where([class~="not-prose"] *)) { + margin-top: 0.8888889em; + margin-bottom: 0.8888889em; + } + + .lg\:prose-lg :where(.lg\:prose-lg > ul > li > *:first-child):not(:where([class~="not-prose"] *)) { + margin-top: 1.3333333em; + } + + .lg\:prose-lg :where(.lg\:prose-lg > ul > li > *:last-child):not(:where([class~="not-prose"] *)) { + margin-bottom: 1.3333333em; + } + + .lg\:prose-lg :where(.lg\:prose-lg > ol > li > *:first-child):not(:where([class~="not-prose"] *)) { + margin-top: 1.3333333em; + } + + .lg\:prose-lg :where(.lg\:prose-lg > ol > li > *:last-child):not(:where([class~="not-prose"] *)) { + margin-bottom: 1.3333333em; + } + + .lg\:prose-lg :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *)) { + margin-top: 0.8888889em; + margin-bottom: 0.8888889em; + } + + .lg\:prose-lg :where(hr):not(:where([class~="not-prose"] *)) { + margin-top: 3.1111111em; + margin-bottom: 3.1111111em; + } + + .lg\:prose-lg :where(hr + *):not(:where([class~="not-prose"] *)) { + margin-top: 0; + } + + .lg\:prose-lg :where(h2 + *):not(:where([class~="not-prose"] *)) { + margin-top: 0; + } + + .lg\:prose-lg :where(h3 + *):not(:where([class~="not-prose"] *)) { + margin-top: 0; + } + + .lg\:prose-lg :where(h4 + *):not(:where([class~="not-prose"] *)) { + margin-top: 0; + } + + .lg\:prose-lg :where(table):not(:where([class~="not-prose"] *)) { + font-size: 0.8888889em; + line-height: 1.5; + } + + .lg\:prose-lg :where(thead th):not(:where([class~="not-prose"] *)) { + padding-right: 0.75em; + padding-bottom: 0.75em; + padding-left: 0.75em; + } + + .lg\:prose-lg :where(thead th:first-child):not(:where([class~="not-prose"] *)) { + padding-left: 0; + } + + .lg\:prose-lg :where(thead th:last-child):not(:where([class~="not-prose"] *)) { + padding-right: 0; + } + + .lg\:prose-lg :where(tbody td, tfoot td):not(:where([class~="not-prose"] *)) { + padding-top: 0.75em; + padding-right: 0.75em; + padding-bottom: 0.75em; + padding-left: 0.75em; + } + + .lg\:prose-lg :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"] *)) { + padding-left: 0; + } + + .lg\:prose-lg :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"] *)) { + padding-right: 0; + } + + .lg\:prose-lg :where(.lg\:prose-lg > :first-child):not(:where([class~="not-prose"] *)) { + margin-top: 0; + } + + .lg\:prose-lg :where(.lg\:prose-lg > :last-child):not(:where([class~="not-prose"] *)) { + margin-bottom: 0; + } + + .lg\:pb-28 { + padding-bottom: 7rem; + } +} \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..4352425 --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,8 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: ["./src/**/*.{html,elm,js}"], + theme: { + extend: {}, + }, + plugins: [require("@tailwindcss/typography")], +};