first commit
Pablo Murad pblmrd@gmail.com
Thu, 10 Sep 2026 08:34:54 -0300
130 files changed,
9716 insertions(+),
0 deletions(-)
jump to
A
.eleventy.js
@@ -0,0 +1,65 @@
+const markdownIt = require('markdown-it'); +const markdownItToc = require('markdown-it-table-of-contents'); +const markdownItAnchor = require('markdown-it-anchor'); +const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight'); + +module.exports = function (eleventyConfig) { + eleventyConfig.addPassthroughCopy('src/assets'); + eleventyConfig.addPassthroughCopy('CNAME'); + + const md = markdownIt({ + html: true, + linkify: true, + typographer: true, + breaks: false, + }) + .use(require('markdown-it-block-embed')) + .use(markdownItToc, { includeLevel: [1, 2, 3] }) + .use(markdownItAnchor, { + permalink: markdownItAnchor.permalink.headerLink(), + slugify: function (s) { + return String(s) + .normalize('NFD') + .replace(/[\u0300-\u036f]/g, '') + .toLowerCase() + .trim() + .replace(/[^\w\s-]/g, '') + .replace(/\s+/g, '-'); + }, + }); + + eleventyConfig.setLibrary('md', md); + + eleventyConfig.addPlugin(syntaxHighlight); + + eleventyConfig.addPairedShortcode('aside', (content, label) => { + return `<aside class="aside"><p class="aside-label">${label}</p>${md.render(content)}</aside>`; + }); + + eleventyConfig.addShortcode('current', (slug, currentSlug) => { + return slug === currentSlug ? 'aria-current="page"' : ''; + }); + + // if NO_RELOAD node environment variable is found, disable live reloading + if (process.env.NO_RELOAD) { + eleventyConfig.setServerOptions({ + liveReload: false, + }); + } + + // sort chapter collection by fileSlug + eleventyConfig.addCollection('sortedChapter', function (collection) { + return collection + .getFilteredByTag('chapter') + .sort( + (a, b) => + parseInt(a.fileSlug.substr(0, 2)) - parseInt(b.fileSlug.substr(0, 2)), + ); + }); + + return { + dir: { + input: 'src', + }, + }; +};
A
.github/workflows/pages.yml
@@ -0,0 +1,33 @@
+name: pages + +on: + push: + branches: + - main + workflow_dispatch: + +permissions: + contents: write + +concurrency: + group: pages + cancel-in-progress: true + +jobs: + deploy: + runs-on: ubuntu-latest + timeout-minutes: 10 + steps: + - uses: actions/checkout@v7 + - uses: actions/setup-node@v7 + with: + node-version: 22 + cache: npm + - run: npm ci + - run: npm run build + - run: touch _site/.nojekyll + - uses: peaceiris/actions-gh-pages@v4 + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + publish_dir: ./_site + force_orphan: true
A
.gitignore
@@ -0,0 +1,18 @@
+Thumbs.db +.project +.DS_Store +*.scssc +.sass-cache +*.map +*.sublime-project +*.sublime-workspace +bower_components +node_modules +build +dist +vendor +._* +.env +config.php +emails.txt +_site
A
.prettierrc.json
@@ -0,0 +1,16 @@
+{ + "singleQuote": true, + "plugins": [ + "prettier-plugin-jinja-template" + ], + "overrides": [ + { + "files": [ + "*.njk" + ], + "options": { + "parser": "jinja-template" + } + } + ] +}
A
LICENSE.txt
@@ -0,0 +1,445 @@
+Brazilian Portuguese translation of HTML for People (Blake Watson). +https://htmlforpeople.com +Pablo Murad / Portal IDEA +Same license as the original: CC BY-NC-SA 4.0. + +======================================================================= + +Attribution-NonCommercial-ShareAlike 4.0 International + +======================================================================= + +Creative Commons Corporation ("Creative Commons") is not a law firm and +does not provide legal services or legal advice. Distribution of +Creative Commons public licenses does not create a lawyer-client or +other relationship. Creative Commons makes its licenses and related +information available on an "as-is" basis. Creative Commons gives no +warranties regarding its licenses, any material licensed under their +terms and conditions, or any related information. Creative Commons +disclaims all liability for damages resulting from their use to the +fullest extent possible. + +Using Creative Commons Public Licenses + +Creative Commons public licenses provide a standard set of terms and +conditions that creators and other rights holders may use to share +original works of authorship and other material subject to copyright +and certain other rights specified in the public license below. The +following considerations are for informational purposes only, are not +exhaustive, and do not form part of our licenses. + + Considerations for licensors: Our public licenses are + intended for use by those authorized to give the public + permission to use material in ways otherwise restricted by + copyright and certain other rights. Our licenses are + irrevocable. Licensors should read and understand the terms + and conditions of the license they choose before applying it. + Licensors should also secure all rights necessary before + applying our licenses so that the public can reuse the + material as expected. Licensors should clearly mark any + material not subject to the license. This includes other CC- + licensed material, or material used under an exception or + limitation to copyright. More considerations for licensors: + wiki.creativecommons.org/Considerations_for_licensors + + Considerations for the public: By using one of our public + licenses, a licensor grants the public permission to use the + licensed material under specified terms and conditions. If + the licensor's permission is not necessary for any reason--for + example, because of any applicable exception or limitation to + copyright--then that use is not regulated by the license. Our + licenses grant only permissions under copyright and certain + other rights that a licensor has authority to grant. Use of + the licensed material may still be restricted for other + reasons, including because others have copyright or other + rights in the material. A licensor may make special requests, + such as asking that all changes be marked or described. + Although not required by our licenses, you are encouraged to + respect those requests where reasonable. More considerations + for the public: + wiki.creativecommons.org/Considerations_for_licensees + +======================================================================= + +Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International +Public License + +By exercising the Licensed Rights (defined below), You accept and agree +to be bound by the terms and conditions of this Creative Commons +Attribution-NonCommercial-ShareAlike 4.0 International Public License +("Public License"). To the extent this Public License may be +interpreted as a contract, You are granted the Licensed Rights in +consideration of Your acceptance of these terms and conditions, and the +Licensor grants You such rights in consideration of benefits the +Licensor receives from making the Licensed Material available under +these terms and conditions. + + +Section 1 -- Definitions. + + a. Adapted Material means material subject to Copyright and Similar + Rights that is derived from or based upon the Licensed Material + and in which the Licensed Material is translated, altered, + arranged, transformed, or otherwise modified in a manner requiring + permission under the Copyright and Similar Rights held by the + Licensor. For purposes of this Public License, where the Licensed + Material is a musical work, performance, or sound recording, + Adapted Material is always produced where the Licensed Material is + synched in timed relation with a moving image. + + b. Adapter's License means the license You apply to Your Copyright + and Similar Rights in Your contributions to Adapted Material in + accordance with the terms and conditions of this Public License. + + c. BY-NC-SA Compatible License means a license listed at + creativecommons.org/compatiblelicenses, approved by Creative + Commons as essentially the equivalent of this Public License. + + d. Copyright and Similar Rights means copyright and/or similar rights + closely related to copyright including, without limitation, + performance, broadcast, sound recording, and Sui Generis Database + Rights, without regard to how the rights are labeled or + categorized. For purposes of this Public License, the rights + specified in Section 2(b)(1)-(2) are not Copyright and Similar + Rights. + + e. Effective Technological Measures means those measures that, in the + absence of proper authority, may not be circumvented under laws + fulfilling obligations under Article 11 of the WIPO Copyright + Treaty adopted on December 20, 1996, and/or similar international + agreements. + + f. Exceptions and Limitations means fair use, fair dealing, and/or + any other exception or limitation to Copyright and Similar Rights + that applies to Your use of the Licensed Material. + + g. License Elements means the license attributes listed in the name + of a Creative Commons Public License. The License Elements of this + Public License are Attribution, NonCommercial, and ShareAlike. + + h. Licensed Material means the artistic or literary work, database, + or other material to which the Licensor applied this Public + License. + + i. Licensed Rights means the rights granted to You subject to the + terms and conditions of this Public License, which are limited to + all Copyright and Similar Rights that apply to Your use of the + Licensed Material and that the Licensor has authority to license. + + j. Licensor means the individual(s) or entity(ies) granting rights + under this Public License. + + k. NonCommercial means not primarily intended for or directed towards + commercial advantage or monetary compensation. For purposes of + this Public License, the exchange of the Licensed Material for + other material subject to Copyright and Similar Rights by digital + file-sharing or similar means is NonCommercial provided there is + no payment of monetary compensation in connection with the + exchange. + + l. Share means to provide material to the public by any means or + process that requires permission under the Licensed Rights, such + as reproduction, public display, public performance, distribution, + dissemination, communication, or importation, and to make material + available to the public including in ways that members of the + public may access the material from a place and at a time + individually chosen by them. + + m. Sui Generis Database Rights means rights other than copyright + resulting from Directive 96/9/EC of the European Parliament and of + the Council of 11 March 1996 on the legal protection of databases, + as amended and/or succeeded, as well as other essentially + equivalent rights anywhere in the world. + + n. You means the individual or entity exercising the Licensed Rights + under this Public License. Your has a corresponding meaning. + + +Section 2 -- Scope. + + a. License grant. + + 1. Subject to the terms and conditions of this Public License, + the Licensor hereby grants You a worldwide, royalty-free, + non-sublicensable, non-exclusive, irrevocable license to + exercise the Licensed Rights in the Licensed Material to: + + a. reproduce and Share the Licensed Material, in whole or + in part, for NonCommercial purposes only; and + + b. produce, reproduce, and Share Adapted Material for + NonCommercial purposes only. + + 2. Exceptions and Limitations. For the avoidance of doubt, where + Exceptions and Limitations apply to Your use, this Public + License does not apply, and You do not need to comply with + its terms and conditions. + + 3. Term. The term of this Public License is specified in Section + 6(a). + + 4. Media and formats; technical modifications allowed. The + Licensor authorizes You to exercise the Licensed Rights in + all media and formats whether now known or hereafter created, + and to make technical modifications necessary to do so. The + Licensor waives and/or agrees not to assert any right or + authority to forbid You from making technical modifications + necessary to exercise the Licensed Rights, including + technical modifications necessary to circumvent Effective + Technological Measures. For purposes of this Public License, + simply making modifications authorized by this Section 2(a) + (4) never produces Adapted Material. + + 5. Downstream recipients. + + a. Offer from the Licensor -- Licensed Material. Every + recipient of the Licensed Material automatically + receives an offer from the Licensor to exercise the + Licensed Rights under the terms and conditions of this + Public License. + + b. Additional offer from the Licensor -- Adapted Material. + Every recipient of Adapted Material from You + automatically receives an offer from the Licensor to + exercise the Licensed Rights in the Adapted Material + under the conditions of the Adapter's License You apply. + + c. No downstream restrictions. You may not offer or impose + any additional or different terms or conditions on, or + apply any Effective Technological Measures to, the + Licensed Material if doing so restricts exercise of the + Licensed Rights by any recipient of the Licensed + Material. + + 6. No endorsement. Nothing in this Public License constitutes or + may be construed as permission to assert or imply that You + are, or that Your use of the Licensed Material is, connected + with, or sponsored, endorsed, or granted official status by, + the Licensor or others designated to receive attribution as + provided in Section 3(a)(1)(A)(i). + + b. Other rights. + + 1. Moral rights, such as the right of integrity, are not + licensed under this Public License, nor are publicity, + privacy, and/or other similar personality rights; however, to + the extent possible, the Licensor waives and/or agrees not to + assert any such rights held by the Licensor to the limited + extent necessary to allow You to exercise the Licensed + Rights, but not otherwise. + + 2. Patent and trademark rights are not licensed under this + Public License. + + 3. To the extent possible, the Licensor waives any right to + collect royalties from You for the exercise of the Licensed + Rights, whether directly or through a collecting society + under any voluntary or waivable statutory or compulsory + licensing scheme. In all other cases the Licensor expressly + reserves any right to collect such royalties, including when + the Licensed Material is used other than for NonCommercial + purposes. + + +Section 3 -- License Conditions. + +Your exercise of the Licensed Rights is expressly made subject to the +following conditions. + + a. Attribution. + + 1. If You Share the Licensed Material (including in modified + form), You must: + + a. retain the following if it is supplied by the Licensor + with the Licensed Material: + + i. identification of the creator(s) of the Licensed + Material and any others designated to receive + attribution, in any reasonable manner requested by + the Licensor (including by pseudonym if + designated); + + ii. a copyright notice; + + iii. a notice that refers to this Public License; + + iv. a notice that refers to the disclaimer of + warranties; + + v. a URI or hyperlink to the Licensed Material to the + extent reasonably practicable; + + b. indicate if You modified the Licensed Material and + retain an indication of any previous modifications; and + + c. indicate the Licensed Material is licensed under this + Public License, and include the text of, or the URI or + hyperlink to, this Public License. + + 2. You may satisfy the conditions in Section 3(a)(1) in any + reasonable manner based on the medium, means, and context in + which You Share the Licensed Material. For example, it may be + reasonable to satisfy the conditions by providing a URI or + hyperlink to a resource that includes the required + information. + 3. If requested by the Licensor, You must remove any of the + information required by Section 3(a)(1)(A) to the extent + reasonably practicable. + + b. ShareAlike. + + In addition to the conditions in Section 3(a), if You Share + Adapted Material You produce, the following conditions also apply. + + 1. The Adapter's License You apply must be a Creative Commons + license with the same License Elements, this version or + later, or a BY-NC-SA Compatible License. + + 2. You must include the text of, or the URI or hyperlink to, the + Adapter's License You apply. You may satisfy this condition + in any reasonable manner based on the medium, means, and + context in which You Share Adapted Material. + + 3. You may not offer or impose any additional or different terms + or conditions on, or apply any Effective Technological + Measures to, Adapted Material that restrict exercise of the + rights granted under the Adapter's License You apply. + + +Section 4 -- Sui Generis Database Rights. + +Where the Licensed Rights include Sui Generis Database Rights that +apply to Your use of the Licensed Material: + + a. for the avoidance of doubt, Section 2(a)(1) grants You the right + to extract, reuse, reproduce, and Share all or a substantial + portion of the contents of the database for NonCommercial purposes + only; + + b. if You include all or a substantial portion of the database + contents in a database in which You have Sui Generis Database + Rights, then the database in which You have Sui Generis Database + Rights (but not its individual contents) is Adapted Material, + including for purposes of Section 3(b); and + + c. You must comply with the conditions in Section 3(a) if You Share + all or a substantial portion of the contents of the database. + +For the avoidance of doubt, this Section 4 supplements and does not +replace Your obligations under this Public License where the Licensed +Rights include other Copyright and Similar Rights. + + +Section 5 -- Disclaimer of Warranties and Limitation of Liability. + + a. UNLESS OTHERWISE SEPARATELY UNDERTAKEN BY THE LICENSOR, TO THE + EXTENT POSSIBLE, THE LICENSOR OFFERS THE LICENSED MATERIAL AS-IS + AND AS-AVAILABLE, AND MAKES NO REPRESENTATIONS OR WARRANTIES OF + ANY KIND CONCERNING THE LICENSED MATERIAL, WHETHER EXPRESS, + IMPLIED, STATUTORY, OR OTHER. THIS INCLUDES, WITHOUT LIMITATION, + WARRANTIES OF TITLE, MERCHANTABILITY, FITNESS FOR A PARTICULAR + PURPOSE, NON-INFRINGEMENT, ABSENCE OF LATENT OR OTHER DEFECTS, + ACCURACY, OR THE PRESENCE OR ABSENCE OF ERRORS, WHETHER OR NOT + KNOWN OR DISCOVERABLE. WHERE DISCLAIMERS OF WARRANTIES ARE NOT + ALLOWED IN FULL OR IN PART, THIS DISCLAIMER MAY NOT APPLY TO YOU. + + b. TO THE EXTENT POSSIBLE, IN NO EVENT WILL THE LICENSOR BE LIABLE + TO YOU ON ANY LEGAL THEORY (INCLUDING, WITHOUT LIMITATION, + NEGLIGENCE) OR OTHERWISE FOR ANY DIRECT, SPECIAL, INDIRECT, + INCIDENTAL, CONSEQUENTIAL, PUNITIVE, EXEMPLARY, OR OTHER LOSSES, + COSTS, EXPENSES, OR DAMAGES ARISING OUT OF THIS PUBLIC LICENSE OR + USE OF THE LICENSED MATERIAL, EVEN IF THE LICENSOR HAS BEEN + ADVISED OF THE POSSIBILITY OF SUCH LOSSES, COSTS, EXPENSES, OR + DAMAGES. WHERE A LIMITATION OF LIABILITY IS NOT ALLOWED IN FULL OR + IN PART, THIS LIMITATION MAY NOT APPLY TO YOU. + + c. The disclaimer of warranties and limitation of liability provided + above shall be interpreted in a manner that, to the extent + possible, most closely approximates an absolute disclaimer and + waiver of all liability. + + +Section 6 -- Term and Termination. + + a. This Public License applies for the term of the Copyright and + Similar Rights licensed here. However, if You fail to comply with + this Public License, then Your rights under this Public License + terminate automatically. + + b. Where Your right to use the Licensed Material has terminated under + Section 6(a), it reinstates: + + 1. automatically as of the date the violation is cured, provided + it is cured within 30 days of Your discovery of the + violation; or + + 2. upon express reinstatement by the Licensor. + + For the avoidance of doubt, this Section 6(b) does not affect any + right the Licensor may have to seek remedies for Your violations + of this Public License. + + c. For the avoidance of doubt, the Licensor may also offer the + Licensed Material under separate terms or conditions or stop + distributing the Licensed Material at any time; however, doing so + will not terminate this Public License. + + d. Sections 1, 5, 6, 7, and 8 survive termination of this Public + License. + + +Section 7 -- Other Terms and Conditions. + + a. The Licensor shall not be bound by any additional or different + terms or conditions communicated by You unless expressly agreed. + + b. Any arrangements, understandings, or agreements regarding the + Licensed Material not stated herein are separate from and + independent of the terms and conditions of this Public License. + + +Section 8 -- Interpretation. + + a. For the avoidance of doubt, this Public License does not, and + shall not be interpreted to, reduce, limit, restrict, or impose + conditions on any use of the Licensed Material that could lawfully + be made without permission under this Public License. + + b. To the extent possible, if any provision of this Public License is + deemed unenforceable, it shall be automatically reformed to the + minimum extent necessary to make it enforceable. If the provision + cannot be reformed, it shall be severed from this Public License + without affecting the enforceability of the remaining terms and + conditions. + + c. No term or condition of this Public License will be waived and no + failure to comply consented to unless expressly agreed to by the + Licensor. + + d. Nothing in this Public License constitutes or may be interpreted + as a limitation upon, or waiver of, any privileges and immunities + that apply to the Licensor or You, including from the legal + processes of any jurisdiction or authority. + +======================================================================= + +Creative Commons is not a party to its public +licenses. Notwithstanding, Creative Commons may elect to apply one of +its public licenses to material it publishes and in those instances +will be considered the “Licensor.” The text of the Creative Commons +public licenses is dedicated to the public domain under the CC0 Public +Domain Dedication. Except for the limited purpose of indicating that +material is shared under a Creative Commons public license or as +otherwise permitted by the Creative Commons policies published at +creativecommons.org/policies, Creative Commons does not authorize the +use of the trademark "Creative Commons" or any other trademark or logo +of Creative Commons without its prior written consent including, +without limitation, in connection with any unauthorized modifications +to any of its public licenses or any other arrangements, +understandings, or agreements concerning use of licensed material. For +the avoidance of doubt, this paragraph does not form part of the +public licenses. + +Creative Commons may be contacted at creativecommons.org. +
A
package-lock.json
@@ -0,0 +1,2536 @@
+{ + "name": "htmlepessoas", + "version": "1.0.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "htmlepessoas", + "version": "1.0.0", + "license": "CC-BY-NC-SA-4.0", + "devDependencies": { + "@11ty/eleventy": "^2.0.1", + "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0", + "@types/animejs": "^3.1.12", + "markdown-it-anchor": "^9.0.1", + "markdown-it-block-embed": "^0.0.3", + "markdown-it-table-of-contents": "^0.6.0", + "prettier": "3.3.3", + "prettier-plugin-jinja-template": "^1.5.0" + } + }, + "node_modules/@11ty/dependency-tree": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/@11ty/dependency-tree/-/dependency-tree-2.0.1.tgz", + "integrity": "sha512-5R+DsT9LJ9tXiSQ4y+KLFppCkQyXhzAm1AIuBWE/sbU0hSXY5pkhoqQYEcPJQFg/nglL+wD55iv2j+7O96UAvg==", + "dev": true + }, + "node_modules/@11ty/eleventy": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/@11ty/eleventy/-/eleventy-2.0.1.tgz", + "integrity": "sha512-t8XVUbCJByhVEa1RzO0zS2QzbL3wPY8ot1yUw9noqiSHxJWUwv6jiwm1/MZDPTYtkZH2ZHvdQIRQ5/SjG9XmLw==", + "dev": true, + "dependencies": { + "@11ty/dependency-tree": "^2.0.1", + "@11ty/eleventy-dev-server": "^1.0.4", + "@11ty/eleventy-utils": "^1.0.1", + "@11ty/lodash-custom": "^4.17.21", + "@iarna/toml": "^2.2.5", + "@sindresorhus/slugify": "^1.1.2", + "bcp-47-normalize": "^1.1.1", + "chokidar": "^3.5.3", + "cross-spawn": "^7.0.3", + "debug": "^4.3.4", + "dependency-graph": "^0.11.0", + "ejs": "^3.1.9", + "fast-glob": "^3.2.12", + "graceful-fs": "^4.2.11", + "gray-matter": "^4.0.3", + "hamljs": "^0.6.2", + "handlebars": "^4.7.7", + "is-glob": "^4.0.3", + "iso-639-1": "^2.1.15", + "kleur": "^4.1.5", + "liquidjs": "^10.7.0", + "luxon": "^3.3.0", + "markdown-it": "^13.0.1", + "micromatch": "^4.0.5", + "minimist": "^1.2.8", + "moo": "^0.5.2", + "multimatch": "^5.0.0", + "mustache": "^4.2.0", + "normalize-path": "^3.0.0", + "nunjucks": "^3.2.3", + "path-to-regexp": "^6.2.1", + "please-upgrade-node": "^3.2.0", + "posthtml": "^0.16.6", + "posthtml-urls": "^1.0.0", + "pug": "^3.0.2", + "recursive-copy": "^2.0.14", + "semver": "^7.3.8", + "slugify": "^1.6.6" + }, + "bin": { + "eleventy": "cmd.js" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/11ty" + } + }, + "node_modules/@11ty/eleventy-dev-server": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@11ty/eleventy-dev-server/-/eleventy-dev-server-1.0.4.tgz", + "integrity": "sha512-qVBmV2G1KF/0o5B/3fITlrrDHy4bONUI2YuN3/WJ3BNw4NU1d/we8XhKrlgq13nNvHoBx5czYp3LZt8qRG53Fg==", + "dev": true, + "dependencies": { + "@11ty/eleventy-utils": "^1.0.1", + "chokidar": "^3.5.3", + "debug": "^4.3.4", + "dev-ip": "^1.0.1", + "finalhandler": "^1.2.0", + "mime": "^3.0.0", + "minimist": "^1.2.8", + "morphdom": "^2.7.0", + "please-upgrade-node": "^3.2.0", + "ssri": "^8.0.1", + "ws": "^8.13.0" + }, + "bin": { + "eleventy-dev-server": "cmd.js" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/11ty" + } + }, + "node_modules/@11ty/eleventy-plugin-syntaxhighlight": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-syntaxhighlight/-/eleventy-plugin-syntaxhighlight-5.0.0.tgz", + "integrity": "sha512-y9BUmP1GofmbJgxM1+ky/UpFCpD8JSOeLeKItUs0WApgnrHk9haHziW7lS86lbArX5SiCVo4zTTw9x53gvRCaA==", + "dev": true, + "dependencies": { + "prismjs": "^1.29.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/11ty" + } + }, + "node_modules/@11ty/eleventy-utils": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@11ty/eleventy-utils/-/eleventy-utils-1.0.2.tgz", + "integrity": "sha512-Zy2leMK1DQR6Q6ZPSagv7QpJaAz9uVbb+RmVetYFp3foMeQtOSZx7w2u5daRFmP+PeNq9vO9H4xtBToYFWZwHA==", + "dev": true, + "dependencies": { + "normalize-path": "^3.0.0" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/11ty" + } + }, + "node_modules/@11ty/lodash-custom": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/@11ty/lodash-custom/-/lodash-custom-4.17.21.tgz", + "integrity": "sha512-Mqt6im1xpb1Ykn3nbcCovWXK3ggywRJa+IXIdoz4wIIK+cvozADH63lexcuPpGS/gJ6/m2JxyyXDyupkMr5DHw==", + "dev": true, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/11ty" + } + }, + "node_modules/@babel/helper-string-parser": { + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.6.tgz", + "integrity": "sha512-WdJjwMEkmBicq5T9fm/cHND3+UlFa2Yj8ALLgmoSQAJZysYbBjw+azChSGPN4DSPLXOcooGRvDwZWMcF/mLO2Q==", + "dev": true, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-validator-identifier": { + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.6.tgz", + "integrity": "sha512-4yA7s865JHaqUdRbnaxarZREuPTHrjpDT+pXoAZ1yhyo6uFnIEpS8VMu16siFOHDpZNKYv5BObhsB//ycbICyw==", + "dev": true, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/parser": { + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.6.tgz", + "integrity": "sha512-eNZXdfU35nJC2h24RznROuOpO94h6x8sg9ju0tT9biNtLZ2vuP8SduLqqV+/8+cebSLV9SJEAN5Z3zQbJG/M+Q==", + "dev": true, + "bin": { + "parser": "bin/babel-parser.js" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@babel/types": { + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.6.tgz", + "integrity": "sha512-WaMsgi6Q8zMgMth93GvWPXkhAIEobfsIkLTacoVZoK1J0CevIPGYY2Vo5YvJGqyHqXM6P4ppOYGsIRU8MM9pFQ==", + "dev": true, + "dependencies": { + "@babel/helper-string-parser": "^7.24.6", + "@babel/helper-validator-identifier": "^7.24.6", + "to-fast-properties": "^2.0.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@iarna/toml": { + "version": "2.2.5", + "resolved": "https://registry.npmjs.org/@iarna/toml/-/toml-2.2.5.tgz", + "integrity": "sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==", + "dev": true + }, + "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/@sindresorhus/slugify": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@sindresorhus/slugify/-/slugify-1.1.2.tgz", + "integrity": "sha512-V9nR/W0Xd9TSGXpZ4iFUcFGhuOJtZX82Fzxj1YISlbSgKvIiNa7eLEZrT0vAraPOt++KHauIVNYgGRgjc13dXA==", + "dev": true, + "dependencies": { + "@sindresorhus/transliterate": "^0.1.1", + "escape-string-regexp": "^4.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@sindresorhus/transliterate": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/@sindresorhus/transliterate/-/transliterate-0.1.2.tgz", + "integrity": "sha512-5/kmIOY9FF32nicXH+5yLNTX4NJ4atl7jRgqAJuIn/iyDFXBktOKDxCvyGE/EzmF4ngSUvjXxQUQlQiZ5lfw+w==", + "dev": true, + "dependencies": { + "escape-string-regexp": "^2.0.0", + "lodash.deburr": "^4.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@sindresorhus/transliterate/node_modules/escape-string-regexp": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz", + "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/@types/animejs": { + "version": "3.1.12", + "resolved": "https://registry.npmjs.org/@types/animejs/-/animejs-3.1.12.tgz", + "integrity": "sha512-fpdH+ZtlO0kqjTOqRaBdsEmvpRNOayI8k4EVkEtitL5l6wducDOXk0rgQgfZqWf/ZX9DzXrHf257S5i9xTcISQ==", + "dev": true + }, + "node_modules/@types/linkify-it": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz", + "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==", + "dev": true, + "peer": true + }, + "node_modules/@types/markdown-it": { + "version": "14.1.1", + "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.1.tgz", + "integrity": "sha512-4NpsnpYl2Gt1ljyBGrKMxFYAYvpqbnnkgP/i/g+NLpjEUa3obn1XJCur9YbEXKDAkaXqsR1LbDnGEJ0MmKFxfg==", + "dev": true, + "peer": true, + "dependencies": { + "@types/linkify-it": "^5", + "@types/mdurl": "^2" + } + }, + "node_modules/@types/mdurl": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz", + "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==", + "dev": true, + "peer": true + }, + "node_modules/@types/minimatch": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz", + "integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==", + "dev": true + }, + "node_modules/a-sync-waterfall": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/a-sync-waterfall/-/a-sync-waterfall-1.0.1.tgz", + "integrity": "sha512-RYTOHHdWipFUliRFMCS4X2Yn2X8M87V/OpSqWzKKOGhzqyUxzyVmhHDH9sAvG+ZuQf/TAOFsLCpMw09I1ufUnA==", + "dev": true + }, + "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/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/any-promise": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-0.1.0.tgz", + "integrity": "sha512-lqzY9o+BbeGHRCOyxQkt/Tgvz0IZhTmQiA+LxQW8wSNpcTbj8K+0cZiSEvbpNZZP9/11Gy7dnLO3GNWUXO4d1g==", + "dev": true + }, + "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/argparse": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", + "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==", + "dev": true, + "dependencies": { + "sprintf-js": "~1.0.2" + } + }, + "node_modules/array-differ": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-3.0.0.tgz", + "integrity": "sha512-THtfYS6KtME/yIAhKjZ2ul7XI96lQGHRputJQHO80LAWQnuGP4iCIN8vdMRboGbIEYBwU33q8Tch1os2+X0kMg==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/array-union": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz", + "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/array-uniq": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz", + "integrity": "sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/arrify": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/arrify/-/arrify-2.0.1.tgz", + "integrity": "sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/asap": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz", + "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==", + "dev": true + }, + "node_modules/assert-never": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/assert-never/-/assert-never-1.2.1.tgz", + "integrity": "sha512-TaTivMB6pYI1kXwrFlEhLeGfOqoDNdTxjCdwRfFFkEA30Eu+k48W34nlok2EYWJfFFzqaEmichdNM7th6M5HNw==", + "dev": true + }, + "node_modules/async": { + "version": "3.2.5", + "resolved": "https://registry.npmjs.org/async/-/async-3.2.5.tgz", + "integrity": "sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg==", + "dev": true + }, + "node_modules/babel-walk": { + "version": "3.0.0-canary-5", + "resolved": "https://registry.npmjs.org/babel-walk/-/babel-walk-3.0.0-canary-5.tgz", + "integrity": "sha512-GAwkz0AihzY5bkwIY5QDR+LvsRQgB/B+1foMPvi0FZPMl5fjD7ICiznUiBdLYMH1QYe6vqu4gWYytZOccLouFw==", + "dev": true, + "dependencies": { + "@babel/types": "^7.9.6" + }, + "engines": { + "node": ">= 10.0.0" + } + }, + "node_modules/balanced-match": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", + "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", + "dev": true + }, + "node_modules/bcp-47": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/bcp-47/-/bcp-47-1.0.8.tgz", + "integrity": "sha512-Y9y1QNBBtYtv7hcmoX0tR+tUNSFZGZ6OL6vKPObq8BbOhkCoyayF6ogfLTgAli/KuAEbsYHYUNq2AQuY6IuLag==", + "dev": true, + "dependencies": { + "is-alphabetical": "^1.0.0", + "is-alphanumerical": "^1.0.0", + "is-decimal": "^1.0.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/bcp-47-match": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/bcp-47-match/-/bcp-47-match-1.0.3.tgz", + "integrity": "sha512-LggQ4YTdjWQSKELZF5JwchnBa1u0pIQSZf5lSdOHEdbVP55h0qICA/FUp3+W99q0xqxYa1ZQizTUH87gecII5w==", + "dev": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/bcp-47-normalize": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/bcp-47-normalize/-/bcp-47-normalize-1.1.1.tgz", + "integrity": "sha512-jWZ1Jdu3cs0EZdfCkS0UE9Gg01PtxnChjEBySeB+Zo6nkqtFfnvtoQQgP1qU1Oo4qgJgxhTI6Sf9y/pZIhPs0A==", + "dev": true, + "dependencies": { + "bcp-47": "^1.0.0", + "bcp-47-match": "^1.0.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/binary-extensions": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz", + "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==", + "dev": true, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/brace-expansion": { + "version": "1.1.11", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", + "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "dev": true, + "dependencies": { + "balanced-match": "^1.0.0", + "concat-map": "0.0.1" + } + }, + "node_modules/braces": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", + "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", + "dev": true, + "dependencies": { + "fill-range": "^7.1.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/call-bind": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz", + "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==", + "dev": true, + "dependencies": { + "es-define-property": "^1.0.0", + "es-errors": "^1.3.0", + "function-bind": "^1.1.2", + "get-intrinsic": "^1.2.4", + "set-function-length": "^1.2.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/character-parser": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/character-parser/-/character-parser-2.2.0.tgz", + "integrity": "sha512-+UqJQjFEFaTAs3bNsF2j2kEN1baG/zghZbdqoYEDxGZtJo9LBzl1A+m0D4n3qKx8N2FNv8/Xp6yV9mQmBuptaw==", + "dev": true, + "dependencies": { + "is-regex": "^1.0.3" + } + }, + "node_modules/chokidar": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", + "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", + "dev": true, + "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" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "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/commander": { + "version": "10.0.1", + "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz", + "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==", + "dev": true, + "engines": { + "node": ">=14" + } + }, + "node_modules/concat-map": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", + "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", + "dev": true + }, + "node_modules/constantinople": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/constantinople/-/constantinople-4.0.1.tgz", + "integrity": "sha512-vCrqcSIq4//Gx74TXXCGnHpulY1dskqLTFGDmhrGxzeXL8lF8kvXv6mpNWlJj1uD4DW23D4ljAqbY4RRaaUZIw==", + "dev": true, + "dependencies": { + "@babel/parser": "^7.6.0", + "@babel/types": "^7.6.1" + } + }, + "node_modules/cross-spawn": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", + "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "dev": true, + "dependencies": { + "path-key": "^3.1.0", + "shebang-command": "^2.0.0", + "which": "^2.0.1" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/debug": { + "version": "4.3.5", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz", + "integrity": "sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==", + "dev": true, + "dependencies": { + "ms": "2.1.2" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/define-data-property": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz", + "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==", + "dev": true, + "dependencies": { + "es-define-property": "^1.0.0", + "es-errors": "^1.3.0", + "gopd": "^1.0.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/dependency-graph": { + "version": "0.11.0", + "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.11.0.tgz", + "integrity": "sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==", + "dev": true, + "engines": { + "node": ">= 0.6.0" + } + }, + "node_modules/dev-ip": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/dev-ip/-/dev-ip-1.0.1.tgz", + "integrity": "sha512-LmVkry/oDShEgSZPNgqCIp2/TlqtExeGmymru3uCELnfyjY11IzpAproLYs+1X88fXO6DBoYP3ul2Xo2yz2j6A==", + "dev": true, + "bin": { + "dev-ip": "lib/dev-ip.js" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/doctypes": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/doctypes/-/doctypes-1.1.0.tgz", + "integrity": "sha512-LLBi6pEqS6Do3EKQ3J0NqHWV5hhb78Pi8vvESYwyOy2c31ZEZVdtitdzsQsKb7878PEERhzUk0ftqGhG6Mz+pQ==", + "dev": true + }, + "node_modules/dom-serializer": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz", + "integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==", + "dev": true, + "dependencies": { + "domelementtype": "^2.0.1", + "domhandler": "^4.2.0", + "entities": "^2.0.0" + }, + "funding": { + "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1" + } + }, + "node_modules/dom-serializer/node_modules/entities": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz", + "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==", + "dev": true, + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, + "node_modules/domelementtype": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz", + "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/fb55" + } + ] + }, + "node_modules/domhandler": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz", + "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==", + "dev": true, + "dependencies": { + "domelementtype": "^2.2.0" + }, + "engines": { + "node": ">= 4" + }, + "funding": { + "url": "https://github.com/fb55/domhandler?sponsor=1" + } + }, + "node_modules/domutils": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz", + "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==", + "dev": true, + "dependencies": { + "dom-serializer": "^1.0.1", + "domelementtype": "^2.2.0", + "domhandler": "^4.2.0" + }, + "funding": { + "url": "https://github.com/fb55/domutils?sponsor=1" + } + }, + "node_modules/ee-first": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", + "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==", + "dev": true + }, + "node_modules/ejs": { + "version": "3.1.10", + "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz", + "integrity": "sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==", + "dev": true, + "dependencies": { + "jake": "^10.8.5" + }, + "bin": { + "ejs": "bin/cli.js" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/encodeurl": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", + "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==", + "dev": true, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/entities": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz", + "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==", + "dev": true, + "engines": { + "node": ">=0.12" + }, + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, + "node_modules/errno": { + "version": "0.1.8", + "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz", + "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==", + "dev": true, + "dependencies": { + "prr": "~1.0.1" + }, + "bin": { + "errno": "cli.js" + } + }, + "node_modules/es-define-property": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz", + "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==", + "dev": true, + "dependencies": { + "get-intrinsic": "^1.2.4" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/es-errors": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz", + "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==", + "dev": true, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/escape-html": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", + "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==", + "dev": true + }, + "node_modules/escape-string-regexp": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/esprima": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", + "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==", + "dev": true, + "bin": { + "esparse": "bin/esparse.js", + "esvalidate": "bin/esvalidate.js" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/extend-shallow": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", + "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==", + "dev": true, + "dependencies": { + "is-extendable": "^0.1.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/fast-glob": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz", + "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==", + "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/fastq": { + "version": "1.17.1", + "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz", + "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==", + "dev": true, + "dependencies": { + "reusify": "^1.0.4" + } + }, + "node_modules/filelist": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz", + "integrity": "sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==", + "dev": true, + "dependencies": { + "minimatch": "^5.0.1" + } + }, + "node_modules/filelist/node_modules/brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "dev": true, + "dependencies": { + "balanced-match": "^1.0.0" + } + }, + "node_modules/filelist/node_modules/minimatch": { + "version": "5.1.6", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz", + "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==", + "dev": true, + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/fill-range": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", + "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", + "dev": true, + "dependencies": { + "to-regex-range": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/finalhandler": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz", + "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==", + "dev": true, + "dependencies": { + "debug": "2.6.9", + "encodeurl": "~1.0.2", + "escape-html": "~1.0.3", + "on-finished": "2.4.1", + "parseurl": "~1.3.3", + "statuses": "2.0.1", + "unpipe": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/finalhandler/node_modules/debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "dev": true, + "dependencies": { + "ms": "2.0.0" + } + }, + "node_modules/finalhandler/node_modules/ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==", + "dev": true + }, + "node_modules/fs.realpath": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", + "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==", + "dev": true + }, + "node_modules/fsevents": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", + "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.2", + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", + "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==", + "dev": true, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/get-intrinsic": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz", + "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==", + "dev": true, + "dependencies": { + "es-errors": "^1.3.0", + "function-bind": "^1.1.2", + "has-proto": "^1.0.1", + "has-symbols": "^1.0.3", + "hasown": "^2.0.0" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/glob": { + "version": "7.2.3", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", + "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", + "deprecated": "Glob versions prior to v9 are no longer supported", + "dev": true, + "dependencies": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.1.1", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + }, + "engines": { + "node": "*" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "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/gopd": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz", + "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==", + "dev": true, + "dependencies": { + "get-intrinsic": "^1.1.3" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/graceful-fs": { + "version": "4.2.11", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz", + "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==", + "dev": true + }, + "node_modules/gray-matter": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/gray-matter/-/gray-matter-4.0.3.tgz", + "integrity": "sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==", + "dev": true, + "dependencies": { + "js-yaml": "^3.13.1", + "kind-of": "^6.0.2", + "section-matter": "^1.0.0", + "strip-bom-string": "^1.0.0" + }, + "engines": { + "node": ">=6.0" + } + }, + "node_modules/hamljs": { + "version": "0.6.2", + "resolved": "https://registry.npmjs.org/hamljs/-/hamljs-0.6.2.tgz", + "integrity": "sha512-/chXRp4WpL47I+HX1vCCdSbEXAljEG2FBMmgO7Am0bYsqgnEjreeWzUdX1onXqwZtcfgxbCg5WtEYYvuZ5muBg==", + "dev": true + }, + "node_modules/handlebars": { + "version": "4.7.8", + "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.8.tgz", + "integrity": "sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==", + "dev": true, + "dependencies": { + "minimist": "^1.2.5", + "neo-async": "^2.6.2", + "source-map": "^0.6.1", + "wordwrap": "^1.0.0" + }, + "bin": { + "handlebars": "bin/handlebars" + }, + "engines": { + "node": ">=0.4.7" + }, + "optionalDependencies": { + "uglify-js": "^3.1.4" + } + }, + "node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/has-property-descriptors": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz", + "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==", + "dev": true, + "dependencies": { + "es-define-property": "^1.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/has-proto": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz", + "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==", + "dev": true, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/has-symbols": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz", + "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==", + "dev": true, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/has-tostringtag": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz", + "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==", + "dev": true, + "dependencies": { + "has-symbols": "^1.0.3" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/hasown": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz", + "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==", + "dev": true, + "dependencies": { + "function-bind": "^1.1.2" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/htmlparser2": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-7.2.0.tgz", + "integrity": "sha512-H7MImA4MS6cw7nbyURtLPO1Tms7C5H602LRETv95z1MxO/7CP7rDVROehUYeYBUYEON94NXXDEPmZuq+hX4sog==", + "dev": true, + "funding": [ + "https://github.com/fb55/htmlparser2?sponsor=1", + { + "type": "github", + "url": "https://github.com/sponsors/fb55" + } + ], + "dependencies": { + "domelementtype": "^2.0.1", + "domhandler": "^4.2.2", + "domutils": "^2.8.0", + "entities": "^3.0.1" + } + }, + "node_modules/http-equiv-refresh": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/http-equiv-refresh/-/http-equiv-refresh-1.0.0.tgz", + "integrity": "sha512-TScO04soylRN9i/QdOdgZyhydXg9z6XdaGzEyOgDKycePeDeTT4KvigjBcI+tgfTlieLWauGORMq5F1eIDa+1w==", + "dev": true, + "engines": { + "node": ">= 0.10" + } + }, + "node_modules/inflight": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", + "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==", + "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.", + "dev": true, + "dependencies": { + "once": "^1.3.0", + "wrappy": "1" + } + }, + "node_modules/inherits": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", + "dev": true + }, + "node_modules/is-alphabetical": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz", + "integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==", + "dev": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/is-alphanumerical": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz", + "integrity": "sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==", + "dev": true, + "dependencies": { + "is-alphabetical": "^1.0.0", + "is-decimal": "^1.0.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "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.13.1", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz", + "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==", + "dev": true, + "dependencies": { + "hasown": "^2.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/is-decimal": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz", + "integrity": "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==", + "dev": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/is-expression": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/is-expression/-/is-expression-4.0.0.tgz", + "integrity": "sha512-zMIXX63sxzG3XrkHkrAPvm/OVZVSCPNkwMHU8oTX7/U3AL78I0QXCEICXUM13BIa8TYGZ68PiTKfQz3yaTNr4A==", + "dev": true, + "dependencies": { + "acorn": "^7.1.1", + "object-assign": "^4.1.1" + } + }, + "node_modules/is-extendable": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz", + "integrity": "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "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-json": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/is-json/-/is-json-2.0.1.tgz", + "integrity": "sha512-6BEnpVn1rcf3ngfmViLM6vjUjGErbdrL4rwlv+u1NO1XO8kqT4YGL8+19Q+Z/bas8tY90BTWMk2+fW1g6hQjbA==", + "dev": true + }, + "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/is-promise": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz", + "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==", + "dev": true + }, + "node_modules/is-regex": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz", + "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.2", + "has-tostringtag": "^1.0.0" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/isexe": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", + "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==", + "dev": true + }, + "node_modules/iso-639-1": { + "version": "2.1.15", + "resolved": "https://registry.npmjs.org/iso-639-1/-/iso-639-1-2.1.15.tgz", + "integrity": "sha512-7c7mBznZu2ktfvyT582E2msM+Udc1EjOyhVRE/0ZsjD9LBtWSm23h3PtiRh2a35XoUsTQQjJXaJzuLjXsOdFDg==", + "dev": true, + "engines": { + "node": ">=6.0" + } + }, + "node_modules/jake": { + "version": "10.9.1", + "resolved": "https://registry.npmjs.org/jake/-/jake-10.9.1.tgz", + "integrity": "sha512-61btcOHNnLnsOdtLgA5efqQWjnSi/vow5HbI7HMdKKWqvrKR1bLK3BPlJn9gcSaP2ewuamUSMB5XEy76KUIS2w==", + "dev": true, + "dependencies": { + "async": "^3.2.3", + "chalk": "^4.0.2", + "filelist": "^1.0.4", + "minimatch": "^3.1.2" + }, + "bin": { + "jake": "bin/cli.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/js-stringify": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/js-stringify/-/js-stringify-1.0.2.tgz", + "integrity": "sha512-rtS5ATOo2Q5k1G+DADISilDA6lv79zIiwFd6CcjuIxGKLFm5C+RLImRscVap9k55i+MOZwgliw+NejvkLuGD5g==", + "dev": true + }, + "node_modules/js-yaml": { + "version": "3.14.1", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz", + "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==", + "dev": true, + "dependencies": { + "argparse": "^1.0.7", + "esprima": "^4.0.0" + }, + "bin": { + "js-yaml": "bin/js-yaml.js" + } + }, + "node_modules/jstransformer": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/jstransformer/-/jstransformer-1.0.0.tgz", + "integrity": "sha512-C9YK3Rf8q6VAPDCCU9fnqo3mAfOH6vUGnMcP4AQAYIEpWtfGLpwOTmZ+igtdK5y+VvI2n3CyYSzy4Qh34eq24A==", + "dev": true, + "dependencies": { + "is-promise": "^2.0.0", + "promise": "^7.0.1" + } + }, + "node_modules/junk": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/junk/-/junk-1.0.3.tgz", + "integrity": "sha512-3KF80UaaSSxo8jVnRYtMKNGFOoVPBdkkVPsw+Ad0y4oxKXPduS6G6iHkrf69yJVff/VAaYXkV42rtZ7daJxU3w==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/kind-of": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", + "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/kleur": { + "version": "4.1.5", + "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz", + "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==", + "dev": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/linkify-it": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-4.0.1.tgz", + "integrity": "sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==", + "dev": true, + "dependencies": { + "uc.micro": "^1.0.1" + } + }, + "node_modules/liquidjs": { + "version": "10.13.1", + "resolved": "https://registry.npmjs.org/liquidjs/-/liquidjs-10.13.1.tgz", + "integrity": "sha512-QCQ69sbyMdA1970NEsG7KdQoKi6N+lGg55izisvKvrrRO1nrpS/YBAnzDndR13exYB4xE9A87qdOMuaXPn9v9A==", + "dev": true, + "dependencies": { + "commander": "^10.0.0" + }, + "bin": { + "liquid": "bin/liquid.js", + "liquidjs": "bin/liquid.js" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/liquidjs" + } + }, + "node_modules/list-to-array": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/list-to-array/-/list-to-array-1.1.0.tgz", + "integrity": "sha512-+dAZZ2mM+/m+vY9ezfoueVvrgnHIGi5FvgSymbIgJOFwiznWyA59mav95L+Mc6xPtL3s9gm5eNTlNtxJLbNM1g==", + "dev": true + }, + "node_modules/lodash.deburr": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/lodash.deburr/-/lodash.deburr-4.1.0.tgz", + "integrity": "sha512-m/M1U1f3ddMCs6Hq2tAsYThTBDaAKFDX3dwDo97GEYzamXi9SqUpjWi/Rrj/gf3X2n8ktwgZrlP1z6E3v/IExQ==", + "dev": true + }, + "node_modules/luxon": { + "version": "3.4.4", + "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.4.4.tgz", + "integrity": "sha512-zobTr7akeGHnv7eBOXcRgMeCP6+uyYsczwmeRCauvpvaAltgNyTbLH/+VaEAPUeWBT+1GuNmz4wC/6jtQzbbVA==", + "dev": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/markdown-it": { + "version": "13.0.2", + "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-13.0.2.tgz", + "integrity": "sha512-FtwnEuuK+2yVU7goGn/MJ0WBZMM9ZPgU9spqlFs7/A/pDIUNSOQZhUgOqYCficIuR2QaFnrt8LHqBWsbTAoI5w==", + "dev": true, + "dependencies": { + "argparse": "^2.0.1", + "entities": "~3.0.1", + "linkify-it": "^4.0.1", + "mdurl": "^1.0.1", + "uc.micro": "^1.0.5" + }, + "bin": { + "markdown-it": "bin/markdown-it.js" + } + }, + "node_modules/markdown-it-anchor": { + "version": "9.0.1", + "resolved": "https://registry.npmjs.org/markdown-it-anchor/-/markdown-it-anchor-9.0.1.tgz", + "integrity": "sha512-cBt7aAzmkfX8X7FqAe8EBryiKmToXgMQEEMqkXzWCm0toDtfDYIGboKeTKd8cpNJArJtutrf+977wFJTsvNGmQ==", + "dev": true, + "peerDependencies": { + "@types/markdown-it": "*", + "markdown-it": "*" + } + }, + "node_modules/markdown-it-block-embed": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/markdown-it-block-embed/-/markdown-it-block-embed-0.0.3.tgz", + "integrity": "sha512-coWuC/uZY6Z1Gp3wthhJo5yjkG3/gHErNF/emaiEvD98fKzEHNP6GCYGfJfk5o0n31xiaYjbDgef+XtabKOZzA==", + "dev": true + }, + "node_modules/markdown-it-table-of-contents": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/markdown-it-table-of-contents/-/markdown-it-table-of-contents-0.6.0.tgz", + "integrity": "sha512-jHvEjZVEibyW97zEYg19mZCIXO16lHbvRaPDkEuOfMPBmzlI7cYczMZLMfUvwkhdOVQpIxu3gx6mgaw46KsNsQ==", + "dev": true, + "engines": { + "node": ">6.4.0" + } + }, + "node_modules/markdown-it/node_modules/argparse": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", + "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", + "dev": true + }, + "node_modules/maximatch": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/maximatch/-/maximatch-0.1.0.tgz", + "integrity": "sha512-9ORVtDUFk4u/NFfo0vG/ND/z7UQCVZBL539YW0+U1I7H1BkZwizcPx5foFv7LCPcBnm2U6RjFnQOsIvN4/Vm2A==", + "dev": true, + "dependencies": { + "array-differ": "^1.0.0", + "array-union": "^1.0.1", + "arrify": "^1.0.0", + "minimatch": "^3.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/maximatch/node_modules/array-differ": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz", + "integrity": "sha512-LeZY+DZDRnvP7eMuQ6LHfCzUGxAAIViUBliK24P3hWXL6y4SortgR6Nim6xrkfSLlmH0+k+9NYNwVC2s53ZrYQ==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/maximatch/node_modules/array-union": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz", + "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==", + "dev": true, + "dependencies": { + "array-uniq": "^1.0.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/maximatch/node_modules/arrify": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz", + "integrity": "sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/mdurl": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz", + "integrity": "sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==", + "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.7", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz", + "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==", + "dev": true, + "dependencies": { + "braces": "^3.0.3", + "picomatch": "^2.3.1" + }, + "engines": { + "node": ">=8.6" + } + }, + "node_modules/mime": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/mime/-/mime-3.0.0.tgz", + "integrity": "sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==", + "dev": true, + "bin": { + "mime": "cli.js" + }, + "engines": { + "node": ">=10.0.0" + } + }, + "node_modules/minimatch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", + "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "dev": true, + "dependencies": { + "brace-expansion": "^1.1.7" + }, + "engines": { + "node": "*" + } + }, + "node_modules/minimist": { + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz", + "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==", + "dev": true, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/minipass": { + "version": "3.3.6", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz", + "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==", + "dev": true, + "dependencies": { + "yallist": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/mkdirp": { + "version": "0.5.6", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz", + "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==", + "dev": true, + "dependencies": { + "minimist": "^1.2.6" + }, + "bin": { + "mkdirp": "bin/cmd.js" + } + }, + "node_modules/moo": { + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/moo/-/moo-0.5.2.tgz", + "integrity": "sha512-iSAJLHYKnX41mKcJKjqvnAN9sf0LMDTXDEvFv+ffuRR9a1MIuXLjMNL6EsnDHSkKLTWNqQQ5uo61P4EbU4NU+Q==", + "dev": true + }, + "node_modules/morphdom": { + "version": "2.7.2", + "resolved": "https://registry.npmjs.org/morphdom/-/morphdom-2.7.2.tgz", + "integrity": "sha512-Dqb/lHFyTi7SZpY0a5R4I/0Edo+iPMbaUexsHHsLAByyixCDiLHPHyVoKVmrpL0THcT7V9Cgev9y21TQYq6wQg==", + "dev": true + }, + "node_modules/ms": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", + "dev": true + }, + "node_modules/multimatch": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/multimatch/-/multimatch-5.0.0.tgz", + "integrity": "sha512-ypMKuglUrZUD99Tk2bUQ+xNQj43lPEfAeX2o9cTteAmShXy2VHDJpuwu1o0xqoKCt9jLVAvwyFKdLTPXKAfJyA==", + "dev": true, + "dependencies": { + "@types/minimatch": "^3.0.3", + "array-differ": "^3.0.0", + "array-union": "^2.1.0", + "arrify": "^2.0.1", + "minimatch": "^3.0.4" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/mustache": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/mustache/-/mustache-4.2.0.tgz", + "integrity": "sha512-71ippSywq5Yb7/tVYyGbkBggbU8H3u5Rz56fH60jGFgr8uHwxs+aSKeqmluIVzM0m0kB7xQjKS6qPfd0b2ZoqQ==", + "dev": true, + "bin": { + "mustache": "bin/mustache" + } + }, + "node_modules/neo-async": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz", + "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==", + "dev": true + }, + "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/nunjucks": { + "version": "3.2.4", + "resolved": "https://registry.npmjs.org/nunjucks/-/nunjucks-3.2.4.tgz", + "integrity": "sha512-26XRV6BhkgK0VOxfbU5cQI+ICFUtMLixv1noZn1tGU38kQH5A5nmmbk/O45xdyBhD1esk47nKrY0mvQpZIhRjQ==", + "dev": true, + "dependencies": { + "a-sync-waterfall": "^1.0.0", + "asap": "^2.0.3", + "commander": "^5.1.0" + }, + "bin": { + "nunjucks-precompile": "bin/precompile" + }, + "engines": { + "node": ">= 6.9.0" + }, + "peerDependencies": { + "chokidar": "^3.3.0" + }, + "peerDependenciesMeta": { + "chokidar": { + "optional": true + } + } + }, + "node_modules/nunjucks/node_modules/commander": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz", + "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==", + "dev": true, + "engines": { + "node": ">= 6" + } + }, + "node_modules/object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/on-finished": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz", + "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==", + "dev": true, + "dependencies": { + "ee-first": "1.1.1" + }, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/once": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", + "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==", + "dev": true, + "dependencies": { + "wrappy": "1" + } + }, + "node_modules/parse-srcset": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz", + "integrity": "sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==", + "dev": true + }, + "node_modules/parseurl": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz", + "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==", + "dev": true, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/path-is-absolute": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", + "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/path-key": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", + "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "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/path-to-regexp": { + "version": "6.2.2", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.2.tgz", + "integrity": "sha512-GQX3SSMokngb36+whdpRXE+3f9V8UzyAorlYvOGx87ufGHehNTn5lCxrKtLyZ4Yl/wEKnNnr98ZzOwwDZV5ogw==", + "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/please-upgrade-node": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz", + "integrity": "sha512-gQR3WpIgNIKwBMVLkpMUeR3e1/E1y42bqDQZfql+kDeXd8COYfM8PQA4X6y7a8u9Ua9FHmsrrmirW2vHs45hWg==", + "dev": true, + "dependencies": { + "semver-compare": "^1.0.0" + } + }, + "node_modules/posthtml": { + "version": "0.16.6", + "resolved": "https://registry.npmjs.org/posthtml/-/posthtml-0.16.6.tgz", + "integrity": "sha512-JcEmHlyLK/o0uGAlj65vgg+7LIms0xKXe60lcDOTU7oVX/3LuEuLwrQpW3VJ7de5TaFKiW4kWkaIpJL42FEgxQ==", + "dev": true, + "dependencies": { + "posthtml-parser": "^0.11.0", + "posthtml-render": "^3.0.0" + }, + "engines": { + "node": ">=12.0.0" + } + }, + "node_modules/posthtml-parser": { + "version": "0.11.0", + "resolved": "https://registry.npmjs.org/posthtml-parser/-/posthtml-parser-0.11.0.tgz", + "integrity": "sha512-QecJtfLekJbWVo/dMAA+OSwY79wpRmbqS5TeXvXSX+f0c6pW4/SE6inzZ2qkU7oAMCPqIDkZDvd/bQsSFUnKyw==", + "dev": true, + "dependencies": { + "htmlparser2": "^7.1.1" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/posthtml-render": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/posthtml-render/-/posthtml-render-3.0.0.tgz", + "integrity": "sha512-z+16RoxK3fUPgwaIgH9NGnK1HKY9XIDpydky5eQGgAFVXTCSezalv9U2jQuNV+Z9qV1fDWNzldcw4eK0SSbqKA==", + "dev": true, + "dependencies": { + "is-json": "^2.0.1" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/posthtml-urls": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/posthtml-urls/-/posthtml-urls-1.0.0.tgz", + "integrity": "sha512-CMJ0L009sGQVUuYM/g6WJdscsq6ooAwhUuF6CDlYPMLxKp2rmCYVebEU+wZGxnQstGJhZPMvXsRhtqekILd5/w==", + "dev": true, + "dependencies": { + "http-equiv-refresh": "^1.0.0", + "list-to-array": "^1.1.0", + "parse-srcset": "^1.0.2", + "promise-each": "^2.2.0" + }, + "engines": { + "node": ">= 4" + } + }, + "node_modules/prettier": { + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz", + "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==", + "dev": true, + "bin": { + "prettier": "bin/prettier.cjs" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, + "node_modules/prettier-plugin-jinja-template": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/prettier-plugin-jinja-template/-/prettier-plugin-jinja-template-1.5.0.tgz", + "integrity": "sha512-gLOnCmM8j/psoO+s1L/M3chKmZEO7zrqhodbD+xRONrmOaYhU7Y9gLxlTVm++MeuRt3hA0jev6TmIlNFcr2hYA==", + "dev": true, + "peerDependencies": { + "prettier": "^3.0.0" + } + }, + "node_modules/prismjs": { + "version": "1.29.0", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz", + "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==", + "dev": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/promise": { + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", + "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==", + "dev": true, + "dependencies": { + "asap": "~2.0.3" + } + }, + "node_modules/promise-each": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/promise-each/-/promise-each-2.2.0.tgz", + "integrity": "sha512-67roqt1k3QDA41DZ8xi0V+rF3GoaMiX7QilbXu0vXimut+9RcKBNZ/t60xCRgcsihmNUsEjh48xLfNqOrKblUg==", + "dev": true, + "dependencies": { + "any-promise": "^0.1.0" + } + }, + "node_modules/prr": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz", + "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==", + "dev": true + }, + "node_modules/pug": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/pug/-/pug-3.0.3.tgz", + "integrity": "sha512-uBi6kmc9f3SZ3PXxqcHiUZLmIXgfgWooKWXcwSGwQd2Zi5Rb0bT14+8CJjJgI8AB+nndLaNgHGrcc6bPIB665g==", + "dev": true, + "dependencies": { + "pug-code-gen": "^3.0.3", + "pug-filters": "^4.0.0", + "pug-lexer": "^5.0.1", + "pug-linker": "^4.0.0", + "pug-load": "^3.0.0", + "pug-parser": "^6.0.0", + "pug-runtime": "^3.0.1", + "pug-strip-comments": "^2.0.0" + } + }, + "node_modules/pug-attrs": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/pug-attrs/-/pug-attrs-3.0.0.tgz", + "integrity": "sha512-azINV9dUtzPMFQktvTXciNAfAuVh/L/JCl0vtPCwvOA21uZrC08K/UnmrL+SXGEVc1FwzjW62+xw5S/uaLj6cA==", + "dev": true, + "dependencies": { + "constantinople": "^4.0.1", + "js-stringify": "^1.0.2", + "pug-runtime": "^3.0.0" + } + }, + "node_modules/pug-code-gen": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/pug-code-gen/-/pug-code-gen-3.0.3.tgz", + "integrity": "sha512-cYQg0JW0w32Ux+XTeZnBEeuWrAY7/HNE6TWnhiHGnnRYlCgyAUPoyh9KzCMa9WhcJlJ1AtQqpEYHc+vbCzA+Aw==", + "dev": true, + "dependencies": { + "constantinople": "^4.0.1", + "doctypes": "^1.1.0", + "js-stringify": "^1.0.2", + "pug-attrs": "^3.0.0", + "pug-error": "^2.1.0", + "pug-runtime": "^3.0.1", + "void-elements": "^3.1.0", + "with": "^7.0.0" + } + }, + "node_modules/pug-error": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/pug-error/-/pug-error-2.1.0.tgz", + "integrity": "sha512-lv7sU9e5Jk8IeUheHata6/UThZ7RK2jnaaNztxfPYUY+VxZyk/ePVaNZ/vwmH8WqGvDz3LrNYt/+gA55NDg6Pg==", + "dev": true + }, + "node_modules/pug-filters": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/pug-filters/-/pug-filters-4.0.0.tgz", + "integrity": "sha512-yeNFtq5Yxmfz0f9z2rMXGw/8/4i1cCFecw/Q7+D0V2DdtII5UvqE12VaZ2AY7ri6o5RNXiweGH79OCq+2RQU4A==", + "dev": true, + "dependencies": { + "constantinople": "^4.0.1", + "jstransformer": "1.0.0", + "pug-error": "^2.0.0", + "pug-walk": "^2.0.0", + "resolve": "^1.15.1" + } + }, + "node_modules/pug-lexer": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/pug-lexer/-/pug-lexer-5.0.1.tgz", + "integrity": "sha512-0I6C62+keXlZPZkOJeVam9aBLVP2EnbeDw3An+k0/QlqdwH6rv8284nko14Na7c0TtqtogfWXcRoFE4O4Ff20w==", + "dev": true, + "dependencies": { + "character-parser": "^2.2.0", + "is-expression": "^4.0.0", + "pug-error": "^2.0.0" + } + }, + "node_modules/pug-linker": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/pug-linker/-/pug-linker-4.0.0.tgz", + "integrity": "sha512-gjD1yzp0yxbQqnzBAdlhbgoJL5qIFJw78juN1NpTLt/mfPJ5VgC4BvkoD3G23qKzJtIIXBbcCt6FioLSFLOHdw==", + "dev": true, + "dependencies": { + "pug-error": "^2.0.0", + "pug-walk": "^2.0.0" + } + }, + "node_modules/pug-load": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/pug-load/-/pug-load-3.0.0.tgz", + "integrity": "sha512-OCjTEnhLWZBvS4zni/WUMjH2YSUosnsmjGBB1An7CsKQarYSWQ0GCVyd4eQPMFJqZ8w9xgs01QdiZXKVjk92EQ==", + "dev": true, + "dependencies": { + "object-assign": "^4.1.1", + "pug-walk": "^2.0.0" + } + }, + "node_modules/pug-parser": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/pug-parser/-/pug-parser-6.0.0.tgz", + "integrity": "sha512-ukiYM/9cH6Cml+AOl5kETtM9NR3WulyVP2y4HOU45DyMim1IeP/OOiyEWRr6qk5I5klpsBnbuHpwKmTx6WURnw==", + "dev": true, + "dependencies": { + "pug-error": "^2.0.0", + "token-stream": "1.0.0" + } + }, + "node_modules/pug-runtime": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/pug-runtime/-/pug-runtime-3.0.1.tgz", + "integrity": "sha512-L50zbvrQ35TkpHwv0G6aLSuueDRwc/97XdY8kL3tOT0FmhgG7UypU3VztfV/LATAvmUfYi4wNxSajhSAeNN+Kg==", + "dev": true + }, + "node_modules/pug-strip-comments": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/pug-strip-comments/-/pug-strip-comments-2.0.0.tgz", + "integrity": "sha512-zo8DsDpH7eTkPHCXFeAk1xZXJbyoTfdPlNR0bK7rpOMuhBYb0f5qUVCO1xlsitYd3w5FQTK7zpNVKb3rZoUrrQ==", + "dev": true, + "dependencies": { + "pug-error": "^2.0.0" + } + }, + "node_modules/pug-walk": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/pug-walk/-/pug-walk-2.0.0.tgz", + "integrity": "sha512-yYELe9Q5q9IQhuvqsZNwA5hfPkMJ8u92bQLIMcsMxf/VADjNtEYptU+inlufAFYcWdHlwNfZOEnOOQrZrcyJCQ==", + "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/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/recursive-copy": { + "version": "2.0.14", + "resolved": "https://registry.npmjs.org/recursive-copy/-/recursive-copy-2.0.14.tgz", + "integrity": "sha512-K8WNY8f8naTpfbA+RaXmkaQuD1IeW9EgNEfyGxSqqTQukpVtoOKros9jUqbpEsSw59YOmpd8nCBgtqJZy5nvog==", + "dev": true, + "dependencies": { + "errno": "^0.1.2", + "graceful-fs": "^4.1.4", + "junk": "^1.0.1", + "maximatch": "^0.1.0", + "mkdirp": "^0.5.1", + "pify": "^2.3.0", + "promise": "^7.0.1", + "rimraf": "^2.7.1", + "slash": "^1.0.0" + } + }, + "node_modules/resolve": { + "version": "1.22.8", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", + "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==", + "dev": true, + "dependencies": { + "is-core-module": "^2.13.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/rimraf": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz", + "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==", + "deprecated": "Rimraf versions prior to v4 are no longer supported", + "dev": true, + "dependencies": { + "glob": "^7.1.3" + }, + "bin": { + "rimraf": "bin.js" + } + }, + "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/section-matter": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz", + "integrity": "sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==", + "dev": true, + "dependencies": { + "extend-shallow": "^2.0.1", + "kind-of": "^6.0.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/semver": { + "version": "7.6.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz", + "integrity": "sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==", + "dev": true, + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/semver-compare": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz", + "integrity": "sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==", + "dev": true + }, + "node_modules/set-function-length": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz", + "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==", + "dev": true, + "dependencies": { + "define-data-property": "^1.1.4", + "es-errors": "^1.3.0", + "function-bind": "^1.1.2", + "get-intrinsic": "^1.2.4", + "gopd": "^1.0.1", + "has-property-descriptors": "^1.0.2" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/shebang-command": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", + "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", + "dev": true, + "dependencies": { + "shebang-regex": "^3.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/shebang-regex": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", + "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/slash": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz", + "integrity": "sha512-3TYDR7xWt4dIqV2JauJr+EJeW356RXijHeUlO+8djJ+uBXPn8/2dpzBc8yQhh583sVvc9CvFAeQVgijsH+PNNg==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/slugify": { + "version": "1.6.6", + "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.6.6.tgz", + "integrity": "sha512-h+z7HKHYXj6wJU+AnS/+IH8Uh9fdcX1Lrhg1/VMdf9PwoBQXFcXiAdsy2tSK0P6gKwJLXp02r90ahUCqHk9rrw==", + "dev": true, + "engines": { + "node": ">=8.0.0" + } + }, + "node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/sprintf-js": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", + "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==", + "dev": true + }, + "node_modules/ssri": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz", + "integrity": "sha512-97qShzy1AiyxvPNIkLWoGua7xoQzzPjQ0HAH4B0rWKo7SZ6USuPcrUiAFrws0UH8RrbWmgq3LMTObhPIHbbBeQ==", + "dev": true, + "dependencies": { + "minipass": "^3.1.1" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/statuses": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz", + "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==", + "dev": true, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/strip-bom-string": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/strip-bom-string/-/strip-bom-string-1.0.0.tgz", + "integrity": "sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "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/to-fast-properties": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", + "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==", + "dev": true, + "engines": { + "node": ">=4" + } + }, + "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/token-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/token-stream/-/token-stream-1.0.0.tgz", + "integrity": "sha512-VSsyNPPW74RpHwR8Fc21uubwHY7wMDeJLys2IX5zJNih+OnAnaifKHo+1LHT7DAdloQ7apeaaWg8l7qnf/TnEg==", + "dev": true + }, + "node_modules/uc.micro": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz", + "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==", + "dev": true + }, + "node_modules/uglify-js": { + "version": "3.17.4", + "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.17.4.tgz", + "integrity": "sha512-T9q82TJI9e/C1TAxYvfb16xO120tMVFZrGA3f9/P4424DNu6ypK103y0GPFVa17yotwSyZW5iYXgjYHkGrJW/g==", + "dev": true, + "optional": true, + "bin": { + "uglifyjs": "bin/uglifyjs" + }, + "engines": { + "node": ">=0.8.0" + } + }, + "node_modules/unpipe": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", + "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==", + "dev": true, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/void-elements": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz", + "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/which": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", + "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", + "dev": true, + "dependencies": { + "isexe": "^2.0.0" + }, + "bin": { + "node-which": "bin/node-which" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/with": { + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/with/-/with-7.0.2.tgz", + "integrity": "sha512-RNGKj82nUPg3g5ygxkQl0R937xLyho1J24ItRCBTr/m1YnZkzJy1hUiHUJrc/VlsDQzsCnInEGSg3bci0Lmd4w==", + "dev": true, + "dependencies": { + "@babel/parser": "^7.9.6", + "@babel/types": "^7.9.6", + "assert-never": "^1.2.1", + "babel-walk": "3.0.0-canary-5" + }, + "engines": { + "node": ">= 10.0.0" + } + }, + "node_modules/wordwrap": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz", + "integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==", + "dev": true + }, + "node_modules/wrappy": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", + "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", + "dev": true + }, + "node_modules/ws": { + "version": "8.17.0", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.0.tgz", + "integrity": "sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==", + "dev": true, + "engines": { + "node": ">=10.0.0" + }, + "peerDependencies": { + "bufferutil": "^4.0.1", + "utf-8-validate": ">=5.0.2" + }, + "peerDependenciesMeta": { + "bufferutil": { + "optional": true + }, + "utf-8-validate": { + "optional": true + } + } + }, + "node_modules/yallist": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", + "dev": true + } + } +}
A
package.json
@@ -0,0 +1,24 @@
+{ + "name": "htmlepessoas", + "version": "1.0.0", + "description": "Tradução em português do Brasil de HTML for People, de Blake Watson.", + "main": "index.js", + "scripts": { + "build": "eleventy", + "serve": "eleventy --serve", + "serve:noreload": "NO_RELOAD=true eleventy --serve" + }, + "keywords": [], + "author": "Blake Watson; tradução: Pablo Murad e Portal IDEA", + "license": "CC-BY-NC-SA-4.0", + "devDependencies": { + "@11ty/eleventy": "^2.0.1", + "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0", + "@types/animejs": "^3.1.12", + "markdown-it-anchor": "^9.0.1", + "markdown-it-block-embed": "^0.0.3", + "markdown-it-table-of-contents": "^0.6.0", + "prettier": "3.3.3", + "prettier-plugin-jinja-template": "^1.5.0" + } +}
A
readme.md
@@ -0,0 +1,20 @@
+# HTML e Pessoas + +Tradução em português do Brasil do livro [HTML for People](https://htmlforpeople.com), do [Blake Watson](https://blakewatson.com/). + +Site: [htmlepessoas.com](https://htmlepessoas.com) + +Tradução: [Pablo Murad](https://pablomurad.com) e [Portal IDEA](https://portalidea.com.br). + + + +### Fontes + +Valkyrie, Heliotrope (MB Type) e Input Sans (Type Network) não vêm neste repo. Aqui entra Source Serif 4, Fraunces e Source Code Pro, pelo Google Fonts. + +## Créditos + +- Original: [Blake Watson](https://blakewatson.com/) — [htmlforpeople.com](https://htmlforpeople.com) +- Código: [blakewatson/htmlforpeople](https://github.com/blakewatson/htmlforpeople) +- Espanhol: [HTML para personas](https://victorhck.gitlab.io/htmlparapersonas/), do Victorhck +...
A
src/00-intro.md
@@ -0,0 +1,55 @@
+--- +title: 'Introdução' +summary: 'Aprenda a criar seu próprio site pessoal, mesmo sem nunca ter programado. Este guia leva você do básico de HTML até um site com várias páginas, imagens, um blog e mais.' +permalink: 'introducao/' +originalPath: /intro/ +tags: chapter +layout: 'chapter.njk' +--- + +# Introdução + +Eu não acho que sites foram feitos para serem criados só por “profissionais da web”. No fundo, um site é um documento. Quase todo mundo hoje em dia sabe fazer um documento — seja no Word, no Google Docs, em Markdown ou em outra ferramenta. HTML não deveria ser exceção. Sim, ele é um pouco mais técnico do que outros tipos de documento. Mas também é muito especial. + +É o formato de documento da web. O humilde arquivo HTML está em todo lugar. Se você olhou um site hoje, quase certamente viu HTML. + +HTML é resistente. Você pode olhar um site feito hoje ou um feito vinte anos atrás. Os dois usam HTML e os dois funcionam. Poucos formatos de documento podem dizer o mesmo. Você também não precisa de um programa especial para fazer um documento HTML. Existem vários, e você pode usar qualquer um. Também dá para abrir o Bloco de Notas e escrever HTML na mão (alerta de spoiler: é exatamente isso que vamos fazer). + +Eu criei este livro na web porque queria algo para quem não se considera desenvolvedor profissional. Imagine se documentos do Word só pudessem ser feitos por “profissionais de Word”. Não. Saber escrever um pouco de HTML e colocar isso na internet é uma habilidade útil em muitos caminhos — profissionais e pessoais. Não pertence só a quem faz site de carreira. HTML é para todo mundo. HTML é para pessoas. + +Esta tradução para o português do Brasil é oferecida por [Pablo Murad](https://pablomurad.com) e [Portal IDEA](https://portalidea.com.br), a partir do original [HTML for People](https://htmlforpeople.com), de [Blake Watson](https://blakewatson.com/). + +## Para quem é este livro? + +Este livro é para quem não tem experiência anterior com programação. Eu não vou assumir que você já sabe a primeira coisa sobre HTML. Vamos começar pequeno. Mas, no fim, teremos um site pessoal completo: várias páginas, imagens, um blog e mais. + +Eu *vou* assumir que você já usa um computador e consegue tarefas básicas, como criar arquivos e pastas. Isso é necessário porque (outro spoiler) um site, no fundo, é só arquivos e pastas. + +## Do que eu preciso? + +Você precisa de um computador com internet. Eu escrevi este livro de um jeito genérico, para funcionar no macOS, no Windows ou no Linux. Se eu indicar um programa para instalar, ele será gratuito (ou terá um plano grátis usável) e vai funcionar em mais de um sistema (ou eu indico uma alternativa). + +## Sumário + +1. [Do zero à internet: seu primeiro site](/do-zero-a-internet-seu-primeiro-site) +2. [Adicionar conteúdo ao seu site](/adicionar-conteudo-ao-seu-site) +3. [Intervalo: melhore seu editor de texto](/intervalo-melhore-seu-editor-de-texto) +4. [Um site com estilo](/um-site-com-estilo) +5. [Adicionar uma página Sobre](/adicionar-uma-pagina-sobre) +6. [Adicionar um blog](/adicionar-um-blog) +7. [Adicionar um currículo](/adicionar-um-curriculo) +8. [Intervalo: instalar um servidor local](/intervalo-instalar-um-servidor-local) +9. [Adicionar uma página divertida](/adicionar-uma-pagina-divertida) +10. [Conquista desbloqueada: Hipertextista](/conquista-desbloqueada-hipertextista) + +### Capítulos bônus + +Isto é o que eu queria cobrir, mas achei que saía um pouco do foco. CSS e PHP têm uma curva de aprendizado um pouco mais íngreme do que HTML. Mesmo assim, não acho que estejam fora do alcance de quem quiser explorar. E um pouquinho de cada um já ajuda bastante. Então isto é uma degustação de cada um. + +1. [Personalizar o Simple.css](/personalizar-o-simple-css) +2. [Básico de CSS](/basico-de-css) +3. [HTML reutilizável com PHP](/html-reutilizavel-com-php) + +## A seguir + +Agora que você já sabe o *porquê* deste livro, é hora do primeiro passo. No próximo capítulo, você vai aprender a fazer um site do zero e colocá-lo na internet.
A
src/01-zero-to-internet-your-first-website.md
@@ -0,0 +1,100 @@
+--- +title: 'Do zero à internet: seu primeiro site' +summary: 'Crie uma página extremamente simples do zero usando o Bloco de Notas e coloque-a na internet com o Neocities.' +permalink: 'do-zero-a-internet-seu-primeiro-site/' +originalPath: /zero-to-internet-your-first-website/ +tags: chapter +layout: 'chapter.njk' +--- + +# Do zero à internet: seu primeiro site + +Você, meu amigo, está prestes a ir do zero à internet. Vamos colocar sua primeira página caseira na web. + +Vou te contar um segredo: sites são só arquivos de texto. Você não precisa de um programa caro e sofisticado para criá-los. Dá para fazer um site com as ferramentas de texto que já vêm no seu computador. E é exatamente isso que vamos fazer agora. + +{% aside 'Observação' %} +Dá para fazer um site no celular ou no tablet. Mas é bem mais comum fazer no computador. Por isso, é o que vamos usar neste livro. Mesmo assim, o que você vai aprender também vale em outros contextos. Uma coisa linda da web é que existem muitos jeitos de criar nela. +{% endaside %} + +## Passo 1. Crie uma pasta no seu computador + +Escolha um lugar no seu computador e crie uma pasta. Chame de `my-site` ou algo parecido. O ideal é nomear pastas e arquivos de site com letras minúsculas, números, hífens e underlines. Evite espaços nos nomes. Assim seus arquivos funcionam em muitos computadores e servidores diferentes. (Um servidor é o computador na internet que guarda os arquivos do seu site e os entrega para quem visita.) + +{% aside 'Observação' %} +Precisa de ajuda para criar uma pasta? Veja como fazer em alguns sistemas comuns. + +- [Criar uma pasta no Windows](https://perma.cc/H5YD-7W8S) +- [Criar uma pasta no macOS](https://perma.cc/X9RD-T6RH) +- [Criar uma pasta no Ubuntu Linux](https://perma.cc/B7LV-XXD5) + +Com o tempo, você provavelmente vai criar vários sites. Se quiser, já pode criar uma pasta `sites` e colocar `my-site` dentro dela. +{% endaside %} + +{% aside 'Observação' %} +As capturas de tela deste livro são do original em inglês. O passo a passo vale igual no português. +{% endaside %} + + + +## Passo 2. Crie o index.html + +Por convenção, a página inicial de um site é o `index.html`. Você pode ter outras páginas (como `about-me.html` ou o que quiser). Mas isso fica para depois. + +Para criar o `index.html`, abra o TextEdit no Mac ou o Bloco de Notas no Windows. + +{% aside 'Quem usa Mac' %} +Sites devem ser _texto simples_, então precisamos pedir isso ao TextEdit. Clique em _Format_ na barra de menus e escolha _Make Plain Text_. Depois abra as configurações do TextEdit, clique na aba Open and Save e marque a caixa _Display HTML files as HTML code instead of formatted text_. Já que você está aí: se quiser que o TextEdit use texto simples sempre, escolha _Plain text_ na aba New Document, na seção Format. +{% endaside %} + +Escreva uma frase ou duas sobre você. A minha, por exemplo, é esta: + +```html +My name is Blake. I enjoy making websites and teaching others to do the same. +``` + +Agora salve este arquivo. Chame de `index.html` e coloque na pasta `my-site` que você criou no passo 1. + + + +{% aside 'Observação' %} +Quando você faz sites, é essencial ver as extensões de arquivo — a parte do nome que vem depois do ponto, como `.html`. Se você não as vê, veja como fazer o [Windows](https://perma.cc/3LAG-L6YW) ou o [Mac](https://perma.cc/KYR3-6H3L) mostrá-las. +{% endaside %} + +## Passo 3. Veja a prévia do seu site + +Você pode abrir o site dando um clique duplo em `index.html`. Ele deve abrir no seu navegador padrão. Outra opção: abra o navegador primeiro, clique em _File_ > _Open File…_ e navegue até o seu arquivo `index.html`. + +Você deve ver o seu site (sim, bem simples) no navegador! Sinta-se à vontade para ajustar o texto e corrigir erros de digitação. Estamos prestes a publicar esta página para o _mundo_. + +Não se preocupe com a aparência. Vamos cuidar disso depois. + + + +## Passo 4. Publique o seu site + +Existem muitas opções para publicar o seu site. Para o nosso caso, precisamos de algo gratuito, fácil e pensado para pessoas, não para empresas. Felizmente, é isso que temos com o [Neocities](https://neocities.org). + +{% aside 'Outras hospedagens' %} +Neste livro, vou usar o Neocities como exemplo. Mas quero citar algumas alternativas, caso alguma te agrade. A maioria oferece a opção de arrastar a pasta do seu site para a página delas e começar o serviço. + +- **[Netlify Drop](https://app.netlify.com/drop):** Mais sofisticado que o Neocities, mas tem o recurso de arrastar e soltar a pasta para publicar. Também oferece recursos mais voltados para quem desenvolve. +- **[static.app](https://static.app/):** Eu não tenho experiência pessoal com este. Mas parece um serviço direto, parecido com o Netlify Drop. O plano grátis dá um subdomínio (o pedaço do endereço que vem antes do nome principal) e 1 site gratuito. +- **[Tiiny](https://tiiny.host/):** Oferece um processo parecido com os serviços acima, com suporte a mais formatos além de um site. Eu também não tenho experiência pessoal com este serviço. +- **[CodePen](https://codepen.io/):** O CodePen deixa você criar um site direto no navegador. É parecido com usar um editor de código no computador, mas os arquivos ficam no CodePen. Você trabalha até ficar pronto e depois publica na internet. Você ganha três arquivos/páginas de graça. E eles oferecem uma assinatura para aumentar bastante esse limite. +- ~~**[Yay.boo](https://yay.boo/):** Nome bobo, publicação de site sem esforço. Você só arrasta e solta uma pasta, escolhe um nome, e o site está no ar.~~ O Yay.boo não está aceitando cadastros no momento. Eles podem voltar em breve. +{% endaside %} + +Vá até o Neocities e crie uma conta. É de graça. Você também vai precisar escolher um nome de usuário/nome do site. Seu site vai ficar num _subdomínio_ em `YOURNAME.neocities.org` — o `YOURNAME` vem antes de `neocities.org`. Eu sugiro usar seu nome real ou um apelido que você já use na internet. Ou, se você já sabe sobre o que a página vai ser, escolha algo que combine com o tema (por exemplo, `dndfanpage`). + +Quando a conta estiver criada, vá ao [painel do seu site](https://neocities.org/dashboard). Você vai ver alguns arquivos iniciais lá. Por enquanto, pode ignorá-los. Para publicar a página que você acabou de fazer no computador, arraste o `index.html` do seu computador para o painel do Neocities. Isso vai substituir o `index.html` que já está lá. + + + +Feito isso, clique no link do seu site no topo do painel. + +**Parabéns, você acabou de fazer um site!** 🎉 + +## A seguir + +No próximo capítulo, vamos adicionar mais conteúdo ao nosso site e conhecer algumas tags HTML (uma tag é um pedaço de código que marca o que cada parte da página é).
A
src/02-add-content-to-your-website.md
@@ -0,0 +1,336 @@
+--- +title: 'Adicionar conteúdo ao seu site' +summary: 'Aprenda a adicionar conteúdo como títulos, links, imagens e listas a uma página usando tags HTML.' +permalink: 'adicionar-conteudo-ao-seu-site/' +originalPath: /add-content-to-your-website/ +tags: chapter +layout: 'chapter.njk' +--- + +# Adicionar conteúdo ao seu site + +Primeiro, dá um tapinha nas próprias costas: você já tem um site caseiro no ar! Agora é hora de deixá-lo mais interessante. + +{% aside 'Quem usa Windows' %} +Se você está tentando abrir o arquivo `index.html` no Bloco de Notas, mas não o vê na pasta do site ao usar _File > Open_, encontre o menu _Text Documents_ no canto inferior direito da janela Abrir e mude para _All Files_. +{% endaside %} + +## Adicione um título + +Vamos dar um nome a ele! Depende do tipo de site que você está fazendo, mas o meu vai ser uma página pessoal. Todo mundo tem perfil em rede social, mas esses perfis são sem graça e parecidos demais. A gente merece _mais_. E nossa velha amiga, a homepage pessoal, é um lugar perfeito para começar. + +```plaintext +Blake's Homepage + +My name is Blake. I enjoy making websites and teaching others to do the same. +``` + +Legal! Vamos ver no navegador. + + + +Bem, não era isso que a gente queria. O navegador espremeu o texto numa linha só. Ué?! + +Está faltando a _marcação_ do Hypertext _Markup_ Language. (Marcação, ou markup, é o código que diz ao navegador o que cada pedaço do texto é.) Precisamos dizer ao navegador que o nome do site deve ser um título. Em HTML, você pode ter até seis níveis de títulos. Vamos definir o nome do site como o título mais importante, um _título de nível 1_, ou `<h1>`. + +O que é esse código estranho em forma de pílula que eu acabei de escrever? É chamado de tag HTML. (Uma tag é um pedaço de código que envolve partes da página para dizer ao navegador o que elas são.) Vamos fazer isso agora. + +```html +<h1>Blake's Homepage</h1> + +<p> + My name is Blake. I enjoy making websites and teaching others to do the same. +</p> +``` + +Aqui, separamos os dois elementos da nossa página e envolvemos cada um em tags. Estamos dizendo que o nome do site deve ser um título de nível 1, e que o primeiro parágrafo deve ser, bem, um _parágrafo_ — é o que o `p` significa. + +Repare que um par de tags tem uma tag de _abertura_ e uma tag de _fechamento_. A tag de fechamento é idêntica à de abertura, só que começa com uma barra, `/`. + +Agora salve o arquivo e recarregue o navegador. Esse costuma ser o ritmo de criar um site: você muda um pouco de código, salva e aperta recarregar no navegador. Depois, sinta o poder correndo nas veias enquanto você cria um site do nada! + + + +Uau, bem melhor! Vamos continuar adicionando mais conteúdo. + +## Links para outros sites + +Você já se perguntou por que se chama _the web_? Tipo, o que isso significa? O ingrediente especial que faz dela uma teia é o _hiperlink_, ou, como a gente costuma chamar, um _link_. Sabe, aquele texto muitas vezes azul, muitas vezes sublinhado, que você clica para pular para outra página, outro site, uma imagem, um vídeo de gato, qualquer coisa! + +Isso é possível graças ao elemento _anchor_, ou “tag A”, como é conhecido. Fica assim: + +```html +<a>This will go somewhere eventually</a> +``` + +Tudo que está dentro das tags `<a>` vira clicável. Mas para onde o link nos leva? Por enquanto, para lugar nenhum. Precisamos indicar um destino. Fazemos isso dando à `<a>` um _atributo_ chamado `href`. É a _hypertext reference_ — o lugar para onde você quer ir quando clica no link. + +```html +<a href="https://www.wikipedia.org/">Go to Wikipedia</a> +``` + +Vamos adicionar um link ao nosso site — escolha um dos seus sites favoritos, ou algo divertido e interessante. + +```html +<h1>Blake's Homepage</h1> + +<p> + My name is Blake. I enjoy making websites and teaching others to do the same. +</p> + +<p> + Check out these cool web games at <a href="https://neal.fun/">Neal.fun</a>! +</p> +``` + +Salve e recarregue! + + + +Com a ajuda da humilde tag `<a>`, o seu site vira parte da web viva, que respira. Existem mais de cem tags HTML, mas você não precisa decorá-las para fazer um site. Dá para fazer muito com pouca coisa. Vamos ver mais algumas tags que já te colocam no caminho. + +## Listas de coisas + +Fãs de lista, este conjunto de tags é para vocês. Vamos usar o elemento _unordered list_, `<ul>`, para adicionar uma lista com marcadores. O `<ul>` define a lista, e a tag _list item_, `<li>`, define cada item. Assim: + +```html +<ul> + <li>The first thing</li> + <li>Another thing</li> + <li>And lastly, this thing</li> +</ul> +``` + +O código acima vira uma lista com marcadores, deste jeito: + +- The first thing +- Another thing +- And lastly, this thing + +Se você quiser uma lista numerada, troque `<ul>` por `<ol>` (de _ordered list_). Só isso! Você vai criar uma lista numerada. + +1. The first thing +2. Another thing +3. And lastly, this thing + +Vamos adicionar uma lista ao nosso site. Aqui está o site inteiro até agora: + +```html +<h1>Blake's Homepage</h1> + +<p> + My name is Blake. I enjoy making websites and teaching others to do the same. +</p> + +<p> + Check out these cool web games at <a href="https://neal.fun/">Neal.fun</a>! +</p> + +<h2>Favorite board games</h2> + +<ul> + <li>Dungeons & Dragons</li> + <li>Risk</li> + <li>Pandemic</li> +</ul> + +<h2>How to make a website</h2> + +<ol> + <li>Create an HTML file</li> + <li>Write some HTML in it</li> + <li>Open it with your web browser</li> +</ol> +``` + +Olha só, isso está começando, aos poucos, a parecer um site de verdade! + + + +Você vai notar que eu escorreguei uma tag nova ali sem avisar. É um _título de nível 2_, ou tag `<h2>`. Títulos dão estrutura à página e facilitam para os visitantes acharem o que querem. + +Há outra diferença sutil entre as tags que temos usado. Algumas, como a tag `<a>`, são _elementos em linha_ (inline): elas não começam uma linha nova e ocupam só a largura necessária. Outras tags — como `<h1>`, `<ul>` e `<p>` — são conhecidas como _elementos de bloco_ (block). Um elemento de bloco começa numa linha nova e ocupa a largura inteira do recipiente. + +Até agora temos um monte de palavras. Mas você sabe o que vale por mil delas? + +## Adicione imagens ao seu site + +Vamos colocar uma imagem legal no nosso site. Pode ser tentador ir no Google Imagens e pegar a primeira coisa que aparecer. Não é o caminho. Você precisa ter os direitos certos para usar a imagem. Há muitos lugares na web para achar imagens (procure imagens com licença Creative Commons). Para simplificar, vamos usar o site popular de imagens grátis [Unsplash](https://unsplash.com). + +Eu achei uma imagem legal do espaço. Baixei a versão pequena e renomeei para `space.jpg`, para ficar mais fácil de citar. Ache uma imagem que você goste e solte na pasta, ao lado do seu `index.html`. + +Você pode adicioná-la à página usando a _tag de imagem_, ou `<img>`. Diferente das tags que vimos até agora, a tag `<img>` é _auto-fechável_. Isso significa que não existe tag de fechamento. Fica assim: + +```html +<img src="space.jpg" alt="Photograph of space with stars and stardust."> +``` + +Assim como a tag `<a>`, a tag `<img>` usa atributos para dar mais informação sobre como você quer usá-la. + +Use o atributo `src` para dizer à tag de imagem a _fonte_ (source) da sua imagem, ou seja, onde ela está. Neste exemplo, estamos dizendo que a imagem está na mesma pasta que a nossa página `index.html` (e não numa subpasta) e que o nome do arquivo é `space.jpg`. + +Também precisamos descrever a imagem, caso algum visitante do nosso site não consiga vê-la. Isso pode acontecer por vários motivos — talvez a pessoa seja cega e use um leitor de tela para acessar sites. Ou talvez um problema faça a imagem não carregar. Se isso acontecer, o nosso texto _alternativo_, ou texto `alt`, aparece no lugar. + +Vamos salvar e atualizar o navegador. + + + +Eu redimensionei a janela para a página inteira caber na captura. Mas se você estiver vendo uma barra de rolagem, está tudo bem! + +Dependendo da sua imagem, você pode querer deixá-la menor ou maior. Dá para usar os atributos `width` e/ou `height` para isso. Se você indicar _só_ a largura ou _só_ a altura, o navegador mantém a _proporção_ da imagem — ela não estica nem amassa. Para definir largura ou altura, você informa um número, que representa uma quantidade de pixels. + +```html +<img src="space.jpg" alt="Photograph of space with stars and stardust." width="300"> +``` + +Se definirmos o `width` como `300`, fica assim: + + + +## Adicione notas ao seu código + +Às vezes você quer colocar notas no código — texto que não aparece na página, mas continua visível no código. Você pode fazer isso para organizar um documento, deixar recados (como tarefas) para o você do futuro, ou até esconder um trecho em andamento que ainda não deve aparecer. + +Por exemplo, eu poderia deixar um recado para voltar depois e atualizar meus jogos de tabuleiro favoritos. + +```html +<h2>Favorite board games</h2> + +<!-- Todo: after playing some new games, +see if any deserve to make this list. --> + +<ul> + <li>Dungeons & Dragons</li> + <li>Risk</li> + <li>Pandemic</li> +</ul> +``` + +O navegador ignora tudo que está entre `<!--` e `-->` e não mostra isso na página. Esse tipo de texto se chama _comentário_. Comentários são um jeito legal de anotar o código, porque só aparecem no código — não na página pronta. + +Aqui vai outro exemplo, em que eu envolvi várias tags HTML dentro de um comentário. Nada do comentário aparece na página — só no código-fonte. + +```html +<!-- +Work in progress. When I finalize this list, I'll remove the comment markers. + +<h2>Favorite board games</h2> + +<ul> + <li>Dungeons & Dragons</li> + <li>Risk</li> + <li>Pandemic</li> +</ul> +--> +``` + +**O seu código HTML é público, inclusive os comentários.** Qualquer pessoa pode ver o código-fonte do seu site, então não coloque nada secreto ou sensível dentro de comentários. Para ver o código-fonte de uma página, você pode usar um atalho do teclado ou achar a opção no menu do navegador. Varia de navegador para navegador. Veja esta [referência no Lifewire](https://perma.cc/3WP3-R9XL). + +## Dê ao seu site uma cabeça e um corpo + +Eu não fui totalmente honesto com você até agora. A gente tomou um atalho. Temos escrito _só_ o que o navegador mostra no arquivo `index.html`. Mas todo site tem uma seção invisível. E agora o seu precisa dela. + +Lembra que a gente envolve a maioria dos elementos em tags? Na verdade, precisamos envolver a página inteira na tag `<html>`. Uma página HTML ainda se divide numa seção invisível `<head>`, com informações sobre o seu site, e no `<body>`, onde vai todo o seu conteúdo. + +```html +<html> + <head> + <!-- info about your site goes here --> + </head> + + <body> + <!-- stuff you want to show up on your page goes here --> + </body> +</html> +``` + +Para deixar nosso documento HTML oficial, vamos adicionar uma linha `doctype` bem no começo. O doctype existe principalmente por razões históricas, mas ele diz ao navegador: “Oi, eu sou um documento HTML, então por favor me mostre do jeito certo!” Pode copiar e colar essa linha e seguir em frente — não sinta que precisa decorar cada detalhe. + +```html +<!doctype html> +<html> + <head> + ... + </head> + + <body> + ... + </body> +</html> +``` + +Por enquanto, vamos incluir duas coisas no `<head>`: uma tag title e uma tag meta. + +```html +<head> + <meta charset="utf-8"> + <title>Blake's Homepage</title> +</head> +``` + +A tag `<title>` controla o texto que aparece na aba do navegador e o nome do seu site quando ele surge nos resultados de busca. Legal! + +Podemos usar a tag `<meta>` várias vezes para dar ao navegador informações extras sobre a página. Neste caso, estamos dizendo qual _conjunto de caracteres_ usar. O que você precisa saber: texto UTF-8 significa que símbolos especiais, como emojis, aparecem como se espera. Vamos incluir isso primeiro, antes de qualquer outro elemento de texto, para garantir que todo o nosso texto apareça direito. + +{% aside 'Observação' %} +Se tantas tags extras estiverem te confundindo, saiba que você pode copiar e colar esta estrutura inicial. Assim você não precisa lembrar de tudo agora! +{% endaside %} + +Aqui está o arquivo `index.html` inteiro, para consulta: + +```html +<!doctype html> +<html> + <head> + <meta charset="utf-8"> + <title>Blake's Homepage</title> + </head> + + <body> + <h1>Blake's Homepage</h1> + + <img src="space.jpg" alt="Photograph of space with stars and stardust."> + + <p> + My name is Blake. I enjoy making websites and teaching others to do the same. + </p> + + <p> + Check out these cool web games at + <a href="https://neal.fun/">Neal.fun</a>! + </p> + + <h2>Favorite board games</h2> + + <ul> + <li>Dungeons & Dragons</li> + <li>Risk</li> + <li>Pandemic</li> + </ul> + + <h2>How to make a website</h2> + + <ol> + <li>Create an HTML file</li> + <li>Write some HTML in it</li> + <li>Open it with your web browser</li> + </ol> + </body> +</html> +``` + +## Atualize o seu site no ar + +Essas mudanças estão ficando bem legais. Vamos publicar esta página para o mundo. Vá ao [painel do seu Neocities](https://neocities.org/dashboard). Você vai ver os arquivos iniciais mais o arquivo `index.html` que você enviou no capítulo 1 deste livro. Para deixar um pouco mais limpo, eu estou mudando para a visualização em lista e apagando a imagem PNG e o arquivo CSS que estavam lá no começo. + + + +Agora clique no botão _Upload_ ou simplesmente arraste seus arquivos atualizados (a página index e a imagem) para a lista de arquivos. + +Feito isso, clique no link do seu site no topo do painel. Esse é o seu site NO AR, recém-atualizado, feito do zero por você. Que demais! + + + +## A seguir + +No próximo capítulo, vamos fazer um intervalo breve e pegar um editor de texto feito para escrever HTML.
A
src/03-intermission-upgrade-your-text-editor.md
@@ -0,0 +1,58 @@
+--- +title: 'Intervalo: melhore seu editor de texto' +summary: 'Conheça e baixe um editor de código como o Visual Studio Code, que oferece destaque de sintaxe e outros recursos feitos para programar.' +permalink: 'intervalo-melhore-seu-editor-de-texto/' +originalPath: /intermission-upgrade-your-text-editor/ +tags: chapter +layout: 'chapter.njk' +--- + +# Intervalo: melhore seu editor de texto + +Você já foi longe. Vamos parar um segundo para reconhecer: você abriu um editor de texto simples e criou um site de verdade, escrevendo um pouco de HTML. Mandou bem! + +Falando em editores simples, manter a indentação certinha no HTML pode ser chato. Também pode ser difícil separar o código HTML do texto que a gente escreveu. + + + +Não está terrível, mas a gente pode melhorar. Vamos baixar um editor feito para escrever código. + +{% aside 'Observação' %} +Estou usando Windows nesta parte só por diversão, mas tudo que eu faço pode ser feito no Mac, no Windows e no Linux. +{% endaside %} + +## Baixe o Visual Studio Code + +Vá até <https://code.visualstudio.com/>. Este editor de código gratuito da Microsoft funciona no Mac, no Windows e no Linux. Ele pode fazer muita coisa, mas neste livro vamos manter o básico. + +Não deixe a captura agitada da página inicial te assustar. A gente não precisa de todos aqueles recursos avançados para o que estamos fazendo. + +Quando terminar de baixar e instalar o VS Code, abra-o. Talvez apareçam algumas telas de instrução. Depois, você vai ver uma tela assim: + + + +## Abra o seu projeto + +Na tela de boas-vindas do VS Code, clique em _Open Folder_ e selecione a pasta do seu projeto web. Você vai ver os arquivos do site na barra lateral. Quando abrir o arquivo `index.html`, vai ver o código numa vista agradável, com números de linha e o que se chama _destaque de sintaxe_ — partes do código ganham cores para se diferenciar melhor das outras. + + + +O VS Code também ajuda a escrever código. Ele entende HTML e muitas outras linguagens. Quando você começa a digitar, ele sugere autocompletar. Você aceita clicando ou apertando Enter. Ele também indenta sozinho quando você cria uma linha nova, então você não precisa ficar inserindo tabs ou espaços na mão. + +O VS Code abre seus arquivos em abas. Isso fica conveniente depois, quando o site tiver várias páginas. + +{% aside 'Observação' %} +Por padrão, o VS Code deixa linhas de texto saírem pela lateral da página. Se você preferir que o texto quebre para a linha seguinte, clique no menu _View_ e escolha _Word Wrap_. +{% endaside %} + +## Explore quando estiver pronto + +O VS Code pode fazer muitas coisas legais, mas o que cobrimos aqui já basta para começar. Pense nele como um Bloco de Notas mais caprichado. No fim das contas, ainda é só texto num arquivo. Começamos a jornada com o Bloco de Notas ou o TextEdit para mostrar que dá para fazer um site com ferramentas simples que você já tem no computador — sem mágica e sem programa caro. + +Dito isso, um editor de código deixa o processo de escrever HTML mais gostoso e mais fácil de gerenciar. E, quando você estiver pronto, pode explorar todos os recursos que o VS Code oferece. Também pode experimentar outros editores de código para ver de qual gosta. + +Por agora, vamos voltar a fazer o nosso site! + +## A seguir + +Agora que melhoramos o editor de texto, vamos aprender a adicionar _estilo_ ao nosso site.
A
src/04-a-website-with-style.md
@@ -0,0 +1,177 @@
+--- +title: 'Um site com estilo' +summary: 'Aprenda sobre CSS e veja como ligar uma folha de estilo externa, como o Simple.css, ao seu site.' +permalink: 'um-site-com-estilo/' +originalPath: /a-website-with-style/ +tags: chapter +layout: 'chapter.njk' +--- + +# Um site com estilo + +Eu acho que o nosso site está legal. A simplicidade quieta dele é acolhedora num mundo cheio de distrações. Mesmo assim, ele parece bem simples e _sem estilo_. + +O que a gente está vendo são os estilos padrão do navegador — o jeito que ele mostra texto e imagens quando ninguém deu instruções extras sobre a aparência. Mas a maioria dos sites que você visita não parece assim. Eles foram desenhados para parecer diferentes. Quem desenhou deu instruções: quais fontes usar, quais cores e qual o layout da página. + +No mundo do HTML, a gente só se preocupa com _o que as coisas são_ — isto aqui é um título, isto ali é um parágrafo, aqui tem uma imagem, e por aí vai. Para definir _como as coisas parecem_, o navegador usa a linguagem irmã do HTML: Cascading Style Sheets, ou CSS. CSS é a linguagem que diz ao navegador como o site deve parecer — cores, fontes, espaçamento. + +Um jeito de incluir CSS é usar a tag `<style>` e colocar o código CSS direto nela. Por exemplo, olhe isto: + +```html +<style> + body { + font-family: 'Gill Sans', sans-serif; + } +</style> +``` + +Se você incluir este código em algum lugar da sua página, ele muda a fonte da tag `<body>` — na prática, de todo o texto visível da página. Este conjunto de regras CSS diz: “Use Gill Sans no corpo da página ou, se essa fonte não estiver disponível, use a fonte sans-serif padrão.” + +{% aside 'Observação sobre fontes' %} +Fontes serifadas (serif) parecem com isto. Elas têm uns tracinhos pequenos, chamados _serifs_, que saem um pouco dos traços maiores. Você costuma encontrá-las em livros e jornais. + +<p class="sans-serif">Fontes sans-serif são aquelas <em>sem</em> serifas e, em geral, têm um formato mais simples do que as serifadas. Elas parecem com isto. São populares na web e em interfaces.</p> + +<p class="mono">Fontes monoespaçadas parecem um pouco com texto de máquina de escrever. Cada letra ocupa a mesma largura, o que ajuda se você quiser alinhar as coisas. São uma escolha popular para mostrar código de computador.</p> +{% endaside %} + +Esse é um jeito totalmente válido de usar CSS. Mas você vai ver muita gente colocando as regras de estilo num arquivo separado. Algo como `styles.css`. O motivo principal é que fica mais fácil compartilhar os estilos entre várias páginas — você não precisa copiar e colar a tag `<style>` em cada página que criar. + +CSS é uma linguagem poderosa. Todo site que você vê está usando ela. Todos aqueles desenhos detalhados, boa parte da animação e o posicionamento de imagens e tipografia — isso é CSS. + +Mesmo assim, CSS também tem uma curva de aprendizado. E embora eu te incentive de verdade a explorar CSS, este livro é _HTML_ e Pessoas — eu quero manter o foco no HTML. Mas tudo bem! A gente ainda pode usar CSS para deixar o site bonito sem escrever tudo na mão. + +{% aside 'Observação' %} +Se você tiver vontade de aprender mais sobre CSS, ótimo! Eu tenho [um capítulo bônus](/basico-de-css) no fim deste livro que apresenta mais CSS e aponta para outros materiais. +{% endaside %} + +## Frameworks CSS + +Até quem desenvolve sites profissionalmente e já sabe CSS usa CSS pronto como ponto de partida. A gente vai fazer algo parecido. Alguns frameworks CSS são feitos para quem desenvolve — eles vêm com um monte de recurso extra e pedem que você escreva o HTML de um jeito específico. Outros frameworks, porém, são pensados para sites mais simples. Eles deixam o seu HTML bonito sem você ter que fazer muito trabalho a mais. São chamados de _frameworks CSS classless_. + +Para o nosso caso, isso é perfeito. Vamos usar um chamado [Simple.css](https://simplecss.org/). Mas aqui vão alguns outros que você pode querer olhar. Eles têm o mesmo espírito, com estilos diferentes. + +- [Water.css](https://perma.cc/5936-VK4J) +- [Sakura](https://perma.cc/F6E4-EU58) +- [Pico](https://picocss.com/) + +Eles vão deixar o seu HTML bonito e te dar um ótimo ponto de partida para um site básico. Fique à vontade para usar coisas que outras pessoas já fizeram. Tem muita coisa boa por aí! + +## Simple.css + +Eu te animo a dar uma olhada no [site do Simple.css](https://simplecss.org/), principalmente na [página de demonstração](https://simplecss.org/demo). Ela mostra como usar diferentes elementos HTML e como eles ficam com o Simple. Vamos baixar o Simple.css. + +A [documentação do Simple.css](https://perma.cc/XA5E-E59Q) dá algumas formas de começar, mas, pelo bem da simplicidade (viu o que eu fiz?), eu vou te passar o URL do arquivo CSS: + +<https://cdn.simplecss.org/simple.css> + +Não se intimide com todo o código que tem lá! Você não precisa entender isso agora (nem nunca, de verdade). É só ir em _File > Save Page As_ no navegador (_Command-S_ no macOS e _Control-S_ no Windows) e salvar este arquivo na pasta do projeto do seu site, onde está o `index.html`. + +Pronto, você salvou. A gente vai adicionar isso à página daqui a pouco. Mas, primeiro, vamos organizar a casa. + +## Organizando nossos arquivos + +Até agora, a gente só tem três arquivos — a nossa página, um arquivo de imagem e o `simple.css` que acabamos de baixar. Mas logo vamos adicionar mais arquivos. Vamos criar um par de pastas e mover as coisas. A gente quer que a nova estrutura de arquivos fique assim: + +- pasta `css` + - `simple.css` +- pasta `images` + - `space.jpg` +- `index.html` + +Limpo e organizado. No Visual Studio Code, você pode criar arquivos e pastas direto na barra lateral. Passe o mouse sobre os seus arquivos e você vai ver estes botões. + +<img src="/assets/img/vscode-new-folder.webp" alt="Captura de tela da janela do VS Code com uma pasta chamada 'MY-SITE' em destaque. Dentro da pasta há dois arquivos: 'index.html' e 'space.jpg.' Uma seta vermelha grande aponta para o botão 'New Folder' no canto superior direito do editor." style="max-width: 450px"> + +Depois que você fizer as mudanças, se recarregar a página no navegador, vai notar que a nossa imagem não funciona mais. Perceba como o navegador recorre ao texto `alt` que a gente colocou, no lugar da imagem. + + + +Isso acontece porque a gente moveu o arquivo de imagem `space.jpg` em relação à página inicial. Agora ele está numa pasta chamada `images`. A gente conserta isso atualizando o valor `src` da imagem. Coloque o nome da pasta e uma barra antes do nome do arquivo. + +```html +<img src="images/space.jpg" alt="Photograph of space with stars and stardust."> +``` + +{% aside 'Mais sobre URLs' %} +Quando a gente precisa informar o lugar dos arquivos no site — seja um link para outra página ou o caminho de uma imagem — a gente pode usar o que se chama de _URL relativa_. + +Quando você está na página `index.html`, pense nela como o seu lugar atual. Se quiser apontar para uma imagem, precisa dizer ao navegador como encontrá-la. Uma URL relativa é um jeito de fazer isso. Ela descreve como ir “daqui até lá”, por assim dizer. + +Parecido com o URL na barra do navegador, você usa barras para separar os níveis. O URL `images/space.jpg` significa: “procure uma pasta chamada `images` neste mesmo nível e, dentro dela, procure um arquivo chamado `space.jpg`.” +{% endaside %} + +## Adicionando o Simple.css à página + +A gente pode adicionar uma _folha de estilo_ à página de um jeito parecido com o da imagem. Vamos usar uma tag `<link>` para apontar para o arquivo CSS. Vamos colocá-la na tag `<head>` do site. + +```html +<head> + <title>Blake's Homepage</title> + <meta charset="utf-8"> + + <link rel="stylesheet" href="css/simple.css"> +</head> +``` + +A tag `<link>` é _self-closing_ — ela não tem tag de fechamento. A gente precisa dar dois _atributos_. O `rel` diz qual é a relação do arquivo que estamos ligando com a nossa página. Arquivos CSS são chamados de _stylesheets_ (folhas de estilo), então a gente informa isso como a relação (no singular). O `href` é onde a gente indica o arquivo, incluindo o caminho da pasta. + +{% aside 'Observação' %} +O que as pessoas costumam chamar de “links” numa página — texto ou imagens clicáveis — é feito com a tag `<a>`, como a gente já viu. Em geral, eles apontam para um destino para o qual a gente navega ao clicar. + +A tag `<link>` indica um arquivo que a gente quer ligar à página e qual é a relação desse arquivo. Aqui a gente está usando ela para conectar uma folha de estilo. Outra relação comum é definir um ícone para o site, por exemplo. +{% endaside %} + +Assim, de uma vez, o nosso site se transforma. Agora a gente vê uma página centralizada, texto maior e uma fonte sans-serif. + + + +## Adicionando um header, um footer e o conteúdo principal + +A gente vê que o arquivo Simple.css fez efeito na hora. Mas as coisas ficam ainda melhores quando a gente adiciona algumas seções que o Simple.css espera — um `<header>` para o título do site e um `<main>` para a área de conteúdo principal. A gente não usou isso antes — não é obrigatório — mas usar é uma boa prática. + +E isto é totalmente opcional, mas já que estamos nisso, vale adicionar um `<footer>` também. Às vezes as pessoas colocam informação de copyright aqui. Às vezes têm rodapés grandes, com uns montes de links. Às vezes é só o nome. Eu vou manter simples, mas você pode colocar o que quiser. + +Então a gente coloca o nome do site numa tag `<header>` e o conteúdo principal na tag `<main>`. Depois, adiciona um `<footer>` com um pouco de informação. + +```html +<body> + <header> + <h1>Blake's Homepage</h1> + </header> + + <main>PAGE CONTENT GOES HERE</main> + + <footer> + <p>Made with ❤️ and ☕️ by Blake Watson.</p> + </footer> +</body> +``` + +Depois desses ajustes, o título do site ganha um estilo especial, e parágrafos e listas ficam com um espaçamento mais adequado. + + + +{% aside 'Observação' %} +Se você estiver acompanhando e notar que o seu site tem fundo escuro com texto claro, tudo bem! O Simple.css reconhece se você (quem visita o site) está com o sistema no modo escuro e, se estiver, usa um tema escuro no site. Para mudar esse comportamento, veja o capítulo bônus [Personalizar o Simple.css](/personalizar-o-simple-css). +{% endaside %} + +## Atualize o site no ar + +Vamos colocar as novidades online! No Neocities, você não consegue enviar pastas pelo botão de upload. Ou você cria a pasta no painel clicando em “New Folder”, ou arrasta a pasta do computador para a área de soltar arquivos. + + + +Provavelmente é mais fácil arrastar as pastas. Mas, se você criá-las na mão, precisa abrir cada pasta e enviar o conteúdo dela. Depois que uma pasta é criada, você passa o mouse sobre ela para ver as opções. Você vai querer clicar em “Manage” para abrir a pasta. Dali, pode clicar em “Upload” para enviar os arquivos certos para aquela pasta. + +Mova arquivos que já existem renomeando-os. Por exemplo, se eu quiser mover `space.jpg` para dentro da pasta de imagens, posso clicar em “Rename” e incluir a pasta no caminho: `images/space.jpg`. + + + +É um pouco trabalhoso, mas não é tão ruim. Seja qual for o jeito, confira se os arquivos no Neocities batem com o que você tem no computador. + +## A seguir + +Neste capítulo a gente escreveu pouco código, mas se preparou para o que vem: organizamos as coisas, conseguimos uns estilos e separamos a página em seções. + +O resto deste livro-web vai focar em construir o nosso site. No próximo capítulo, vamos adicionar uma página Sobre.
A
src/05-adding-an-about-page.md
@@ -0,0 +1,186 @@
+--- +title: 'Adicionar uma página Sobre' +summary: 'Aprenda mais tags HTML e veja como criar um menu de navegação para ligar as páginas entre si.' +permalink: 'adicionar-uma-pagina-sobre/' +originalPath: /adding-an-about-page/ +tags: chapter +layout: 'chapter.njk' +--- + +# Adicionar uma página Sobre + +Pelo resto deste livro, a gente vai expandir a nossa página inicial pessoal e transformá-la num site completo, com várias páginas e um blog. O exemplo continua sendo a **Blake's Homepage**, e o conteúdo vai falar de mim. Você vai querer adaptar as coisas para o que quiser ver no seu próprio site. + +Se você não quiser fazer uma página pessoal, tudo bem também! Os conceitos que a gente cobre valem para todo tipo de site. Então você pode acompanhar e adaptar do seu jeito. + +Se quiser um gostinho do resultado, visite a [demonstração completa da Blake's Homepage](https://demo.htmlforpeople.com/). + +Ela tem as seguintes páginas e recursos: + +- Cabeçalho com navegação +- Um blog com três posts +- Página Sobre com uma foto +- Um currículo digital +- Uma página divertida com vídeos do YouTube embutidos + +Eu vou incluir muitos exemplos de código nos próximos capítulos, mas você também pode ir ao site de demonstração e [ver o código-fonte](https://perma.cc/3WP3-R9XL) de qualquer página para consultar a qualquer momento. + +## Páginas são só arquivos para os quais você cria um link + +A gente vai criar uma página nova no site criando um arquivo novo. Crie `about.html` ao lado de `index.html`. Para digitar menos, copie todo o conteúdo de `index.html` e cole em `about.html`. + +Agora, vamos limpar um pouco. Eu vou tirar o título “How to make a website” e o parágrafo com o link para o neal.fun. Esta página deve ser sobre mim. Falando nisso, eu também vou trocar a imagem por uma foto minha (se você não se sentir à vontade para usar uma foto sua, use qualquer imagem que quiser aqui). + +Vou ampliar o conteúdo adicionando uns parágrafos. Este também é um ótimo lugar para colocar qualquer informação de contato que você quiser. Eu vou adicionar um link para a minha conta no Mastodon (com um emoji de elefante). + +```html +<p>🐘 <a href="https://social.lol/@bw">Drop me a line on Mastodon</a></p> +``` + +Lembre-se: um link é uma tag `<a>`. O texto que você envolve com a tag vira clicável. Depois você informa o _atributo_ `href`, que é o destino do link — em geral, um URL. + +{% aside 'Seletor de emoji' %} +Para abrir um seletor de emoji: + +- No Windows, pressione a tecla Windows + ponto (`.`) +- No macOS, pressione `fn` + `e`. +{% endaside %} + +Aqui está o meu código dentro da tag `<body>`. + +```html +<header> + <h1>About Blake</h1> +</header> + +<main> + <img src="images/blake.jpg" alt="Photograph of space with stars and stardust."> + + <p> + My name is Blake. I enjoy making websites and teaching others to do the same. I started writing an HTML web book because I think everyone should have a personal website and I want to show that you don't have to be a computer science graduate to make one. + </p> + + <p> + I'm a side project enthusiast and have put various sites, apps, and (bad) games into the world. My hobbies include web-related nerdery, D&D and board games, and writing. I like to participate in National Novel Writing Month, the annual novel-writing challenge + </p> + + <p>🐘 <a href="https://social.lol/@bw">Drop me a line on Mastodon</a></p> + + <h2>Favorite board games</h2> + + <ul> + <li>Dungeons & Dragons</li> + <li>Risk</li> + <li>Pandemic</li> + </ul> +</main> + +<footer> + <p>Made with ❤️ and ☕️ by Blake Watson.</p> +</footer> +``` + +E é assim que fica. + + + +Surpresa, sou eu! Enfim, isto já parece uma página Sobre de verdade. Eu admito que está um pouco forçado. Sinta-se à vontade para escrever o quanto quiser aqui. + +## Navegando entre as páginas + +A gente já tem uma página Sobre, mas precisa de um jeito de ir de uma página à outra. A gente precisa de um menu de navegação, ou menu nav. Um menu nav é só uma lista de links. O Simple.css parece gostar do menu nav acima do cabeçalho, então eu vou colocar ali. Mas você também pode colocar abaixo, se quiser. + +O HTML tem uma tag `<nav>` exatamente para isso. Vamos colocar dois links no nosso menu nav — um para a página inicial e um para a página Sobre. + +```html +<header> + <nav> + <a href="index.html">Home</a> + <a href="about.html" aria-current="page">About</a> + </nav> + + <h1>About Blake</h1> +</header> +``` + +Como esta é, no momento, a página Sobre, eu adicionei um atributo especial ao link. ARIA significa Accessible Rich Internet Applications. A gente deixa o site mais acessível adicionando o atributo `aria-current="page"`. Isso faz um par de coisas por nós. + +- Deixa a página mais acessível para tecnologias assistivas, como leitores de tela. +- O Simple.css estiliza o link de outro jeito, para ficar fácil ver em qual página a gente está. + + + +Vamos adicionar o mesmo menu nav na página inicial. Abra o `index.html` e coloque o menu como a gente fez na página Sobre. Como esta é a página inicial, a gente deve colocar o atributo `aria-current` no link Home. + +```html +<header> + <nav> + <a href="index.html" aria-current="page">Home</a> + <a href="about.html">About</a> + </nav> + + <h1>Blake's Homepage</h1> +</header> +``` + +Abra no navegador e admire o seu site de várias páginas! Clique. Clique. Clique… + +## Limpando a página inicial + +Como agora a gente tem uma página Sobre, parte do conteúdo da página inicial ficou repetido. Um pouco disso já está na página Sobre. Eu vou tirar o texto de bio, o link do Neal.fun e a lista de jogos de tabuleiro. Vou manter a imagem do espaço e adicionar um parágrafo de boas-vindas. E já que estamos nisso, vou manter a lista “how to make a website”. + +Falando da imagem do espaço, vamos deixá-la mais interessante. Eu quero dar uma legenda a esta imagem e um link para o lugar de onde eu a tirei. A gente pode marcar melhor uma imagem envolvendo-a numa tag `<figure>` e incluindo um `<figcaption>`. + +```html +<figure> + <img src="images/space.jpg" alt="Photograph of space with stars and stardust."> + + <figcaption> + Space is cool. <a href="https://unsplash.com/photos/blue-and-purple-galaxy-digital-wallpaper-E0AHdsENmDg">Photo source</a> + </figcaption> +</figure> +``` + +O meu conteúdo `<main>` na página inicial agora fica assim. + +```html +<main> + <figure> + <img src="images/space.jpg" alt="Photograph of space with stars and stardust."> + + <figcaption> + Space is cool. <a href="https://unsplash.com/photos/blue-and-purple-galaxy-digital-wallpaper-E0AHdsENmDg">Photo source</a> + </figcaption> + </figure> + + <p> + Welcome to my website! Here you can find out more about me, read my very interesting and totally not contrived blog posts, and check out some of the fun hobbies I am into. It won't be long until you are wondering what sorcery I have used to create this mind-blowing, web-based experience. The answer is HTML. + </p> + + <h2>How to make a website</h2> + + <ol> + <li>Create an HTML file</li> + <li>Write some HTML in it</li> + <li>Open it with your web browser</li> + </ol> + + <p class="notice"> + <strong>Quer aprender a fazer um site como este?</strong><br> Confira o livro-web gratuito <a href="/">HTML e Pessoas</a>. Foi feito para todo mundo e ensina a criar uma página de um jeito amigável e acessível. + </p> +</main> +``` + +O que é este `class="notice"`? Você pode aprender mais sobre classes nos capítulos bônus de CSS no fim deste livro. Mas, em resumo, isso ativa alguns estilos que o Simple.css oferece para fazer uma caixinha com um pouco de texto. + + + +## Atualize o site no ar + +Se você quiser. Também está tudo bem continuar trabalhando no computador. Muitos sites são feitos assim — a pessoa trabalha no site no próprio computador até terminar e só então publica. Mas tem bastante gente que também constrói o site em público, atualizando o site no ar conforme avança. + +Se quiser atualizar, volte ao painel do Neocities e envie tanto o `index.html` quanto o `about.html`, já que esses arquivos mudaram. Se você adicionou alguma imagem, precisa entrar na pasta de imagens no Neocities e enviá-las lá (ou pode arrastar a pasta `images` para a área de soltar arquivos, o que substitui a pasta inteira e o conteúdo). + +## A seguir + +A gente transformou a nossa _página_ num _site_! A seguir, vamos adicionar um blog e explorar várias tags HTML.
A
src/06-adding-a-blog.md
@@ -0,0 +1,390 @@
+--- +title: 'Adicionar um blog' +summary: 'Adicione um blog ao seu site estático e faça um tour rápido pelas tags HTML que você pode usar para enriquecer o conteúdo.' +permalink: 'adicionar-um-blog/' +originalPath: /adding-a-blog/ +tags: chapter +layout: 'chapter.njk' +--- + +# Adicionar um blog + +Blogs são uma parte enorme da web. Você provavelmente já ouviu falar de várias plataformas populares de blog, como WordPress, Tumblr e Blogger. E existem um monte de [plataformas menores e independentes](https://perma.cc/K3PV-JL9S). + +Mas você não _precisa_ de uma dessas plataformas para ter um blog. Um blog é só uma série de posts em ordem cronológica (em geral, cronológica _inversa_, com os posts mais novos primeiro). A gente consegue fazer isso com HTML! + +Eu vou adicionar três posts. Não vou colocar todo o código neste capítulo, porque ficaria um pouco longo demais. Você pode olhar o site de demonstração para ver os artigos prontos. Mas eu _vou_ te mostrar como estruturar os arquivos e passar por algumas das tags HTML diferentes que a gente pode usar. + +## Crie a home do blog + +Siga estes passos para deixar o blog disponível em `sitename.neocities.org/blog`. + +1. Crie uma pasta chamada `blog`; dentro dela, crie um arquivo chamado `index.html`. +2. Copie o conteúdo de uma das suas outras páginas e cole neste `index.html` novo e vazio. +3. Mude o `<h1>` para “Blog”, “Meu blog” ou o nome que você quiser. +4. Mude o `<title>` para alterar o que aparece na aba. Por exemplo, “Blog - Blake’s Homepage.” +5. Limpe o conteúdo principal para ficar com uma tag `<main>` vazia. A gente adiciona conteúdo depois. + +Vamos abrir no navegador e ver como ficou. + + + +Opa, a gente quebrou; o que aconteceu!? Tem a ver com a estrutura de arquivos. Olhe a tag `<link>`, onde a gente adicionou os estilos do Simple.css. + +```html +<link rel="stylesheet" href="css/simple.css"> +``` + +Ela está procurando `css/simple.css`, mas não encontra. Por quê? O caminho que a gente deu é _relativo_ ao arquivo atual. O arquivo atual está na pasta `blog`, então ela procura `blog/css/simple.css`, que não existe. + +Então, como a gente se refere a arquivos que não estão na pasta atual? A gente pode usar a sintaxe `..`, assim. + +```html +<link rel="stylesheet" href="../css/simple.css"> +``` + +Isso significa: “suba um nível e, então, procure css/simple.css.” + + + +Bem melhor! Agora, vamos atualizar a navegação. Como a página inicial e a página Sobre não estão na pasta atual, a gente precisa usar a mesma sintaxe `..` para criar o link até elas. + +```html +<nav> + <a href="../index.html">Home</a> + <a href="index.html" aria-current="page">Blog</a> + <a href="../about.html">About</a> +</nav> +``` + +Você também precisa atualizar a navegação nas outras páginas para incluir um link para o blog. Por exemplo, o nav da página inicial deve ficar assim. + +```html +<nav> + <a href="index.html" aria-current="page">Home</a> + <a href="blog/index.html">Blog</a> + <a href="about.html">About</a> +</nav> +``` + +{% aside 'Observação' %} +Como a gente está abrindo os arquivos do site direto no navegador, está usando _URLs relativas_ para formar os links para outras páginas e arquivos. Num capítulo que vem aí, a gente vai aprender a [rodar um servidor web local](/intervalo-instalar-um-servidor-local) e como isso nos permite usar _URLs absolutas_, que são mais diretas. +{% endaside %} + +## Crie o primeiro post + +Eu vou escrever um post bobo sobre ensinar HTML a um gato. Vou criar um arquivo `2024-04-12-whiskers.html` na pasta `blog`. Você pode nomear o arquivo do post como quiser. O legal de incluir a data é que, conforme você cria mais posts, eles aparecem em ordem no sistema de arquivos do computador. + +Como ponto de partida, a gente copia o conteúdo de `blog/index.html` para o arquivo novo. Eu vou mudar o `<h1>` (e o `<title>`) para o nome do meu artigo, “How I taught my cat to make a website with HTML.” Também vou ajustar a navegação. A gente não está na página de listagem do Blog, então não é correto dizer `aria-current="page"` no link do blog. Mas _está_ dentro da seção Blog do site. Então eu vou mudar o atributo para o mais geral `aria-current="true"`. Isto é **só para páginas de posts individuais**. + +```html +<nav> + <a href="../index.html">Home</a> + <a href="index.html" aria-current="true">Blog</a> + <a href="../about.html">About</a> +</nav> +``` + +No fim do post, eu vou adicionar um link de volta ao blog. Como a gente já está na pasta `blog`, um link para `index.html` é tudo que a gente precisa para chegar à home do blog. + +```html +<a href="index.html" class="button">← Back to the blog</a> +``` + +O pedaço `class="button"` é um estilo que o Simple.css oferece e que faz um link de texto parecer um botão. O `←` é um código especial chamado de _entidade HTML_. Elas servem para representar caracteres especiais. Esta daqui é uma _seta para a esquerda_. Você pode ver uma [lista de outras entidades aqui](https://perma.cc/BEA6-LF46). + +Eu vou adicionar três posts com uns poucos dias de diferença, só como exemplo. Quando eu terminar, vou ter estes posts. + +- [How I taught my cat to make a website with HTML](https://demo.htmlforpeople.com/blog/2024-04-12-whiskers.html) +- [The time I built a website for aliens](https://demo.htmlforpeople.com/blog/2024-04-15-aliens.html) +- [Why donuts are the best thing ever](https://demo.htmlforpeople.com/blog/2024-04-20-donuts) + +A minha estrutura de arquivos vai ficar assim: + +- `blog` + - `2024-04-12-whiskers.html` + - `2024-04-15-aliens.html` + - `2024-04-20-donuts.html` + - `index.html` +- `css` + - `simple.css` +- `images` + - `blake.jpg` + - `space.jpg` +- `about.html` +- `index.html` + +## Formatação de texto + +Vamos ver algumas tags que você pode usar nos posts e em outras páginas. + +Para negrito e itálico, a gente pode usar as tags `<strong>` e `<em>`, nesta ordem. + +```html +<p> + After just three days, <strong>Whiskers can now create web pages</strong> better than <em>I</em> can! +</p> +``` + +Isso renderiza assim. + + + +## Citações em bloco + +A gente pode usar a tag `<blockquote>` para citar uma pessoa, um livro, outro site ou até a si mesmo. + +```html +<blockquote> + "HTML is <strong>elementary</strong> my dear Watson."<br> + <cite>— Whiskers, probably</cite> +</blockquote> +``` + +Aqui eu estou usando `<strong>` para dar ênfase extra. Estou usando a tag `<cite>` para mostrar a fonte da citação. A tag `<br>`, que é _self-closing_, cria uma quebra de linha manual, o que empurra o elemento `<cite>` para a linha seguinte. Eu usei outro caractere especial, `—`, para criar um [_travessão_ (em dash)](https://practicaltypography.com/hyphens-and-dashes.html). + + + +Citações em bloco costumam ser estilizadas como blocos de texto recuados, muitas vezes com uma borda ou uma cor de fundo para dar mais ênfase. A imagem acima mostra como o Simple.css as estiliza (salvo aviso em contrário, todas as imagens de exemplo que eu posto são HTML estilizado com Simple.css). + +## Recapitulando: títulos e listas + +A gente cobriu isto rapidinho no Capítulo 2, [Adicionar conteúdo ao seu site](/adicionar-conteudo-ao-seu-site), mas vale recapitular. Os nossos posts já usam o título mais alto, o `<h1>`, mas se você estiver escrevendo um post que precisa de mais títulos, tudo bem! + +Títulos em HTML são hierárquicos. Isso significa que títulos `<h2>` devem vir depois de títulos `<h1>`, títulos `<h3>` devem vir depois de títulos `<h2>`, e assim por diante. Tecnicamente, o HTML nos dá seis níveis de título — de `<h1>` a `<h6>`. Mas a moderação é importante aqui. Pergunte a si mesmo se você _realmente_ está deixando a página mais fácil de entender ao adicionar tantos níveis de título. O meu conselho é ficar com três níveis ou menos. + +E, claro, a gente tem listas. A gente cobriu isso no Capítulo 2, mas vamos olhar de novo. Você tem duas opções aqui — uma lista com marcadores (chamada de _não ordenada_) e uma lista numerada (chamada de _ordenada_). + +Aqui está uma lista com marcadores, ou _não ordenada_, usando a tag `<ul>` para a lista e `<li>` para cada _item da lista_. + +```html +<ul> + <li>Bread</li> + <li>Sugar</li> + <li>Hole</li> +</ul> +``` + +Isso renderiza assim. + +- Bread +- Sugar +- Hole + +E aqui está uma lista numerada, ou _ordenada_ (com alguns pontos em negrito para dar ênfase). + +```html +<ol> + <li> + <strong>Portable Happiness:</strong> Donuts are the perfect grab-and-go + food. You can take them anywhere: to work, to the park, or on a road trip. + They're like little circles of happiness that fit in your hand. + </li> + <li> + <strong>Instant Mood Boost:</strong> Feeling down? Have a donut. It's + scientifically proven* that donuts can turn a frown upside down. (*Not + actually proven, but we all know it's true.) + </li> + <li> + <strong>Endless Creativity:</strong> Donut shops are constantly coming up + with new and exciting flavors. From maple bacon to matcha green tea, the + possibilities are endless. It's like a delicious adventure every time you + visit. + </li> +</ol> +``` + +É assim que fica. + +1. **Portable Happiness:** Donuts are the perfect grab-and-go food. You can take them anywhere: to work, to the park, or on a road trip. They're like little circles of happiness that fit in your hand. +2. **Instant Mood Boost:** Feeling down? Have a donut. It's scientifically proven* that donuts can turn a frown upside down. (*Not actually proven, but we all know it's true.) +3. **Endless Creativity:** Donut shops are constantly coming up with new and exciting flavors. From maple bacon to matcha green tea, the possibilities are endless. It's like a delicious adventure every time you visit. + +Você até pode _aninhar_ listas, assim. + +```html +<ul> + <li> + First main point + <ul> + <li>Sub point</li> + <li>Another sub point</li> + </ul> + </li> + + <li> + Second main point + <ul> + <li>Sub-point</li> + <li>Another sub-point</li> + </ul> + </li> +</ul> +``` + +Isso renderiza mais ou menos assim. + +- First main point + - Sub point + - Another sub-point +- Second main point + - Sub point + - Another sub-point + +## Separando o conteúdo + +Um dos jeitos de adicionar espaço entre elementos na mão é a tag `<br>`, ou tag de _quebra_ (_break_). A tag de quebra adiciona uma quebra de linha. Por exemplo, veja este haicai (de [Robert Cole](http://www.npr.org/blogs/thetwo-way/2013/05/02/180532424/send-your-haiku-to-mars-nasa-seeks-poets#comment-882372940)). + +```html +<p> + A timeless red orb + floats lazy in the ether + unimpressed by war. +</p> +``` + +Por padrão, o navegador renderiza tudo numa linha só e ignora a maior parte do espaço em branco no seu HTML. + + + +Por um lado, isso é bom — significa que a gente pode formatar o código do jeito que quiser sem as visitas verem um monte de quebras de linha e recuos que a gente não pretendia. Mas, às vezes, a gente _quer_ quebras de linha de verdade. + +A gente conserta o haicai colocando um par de tags `<br>` ali. + +```html +<p> + A timeless red orb<br> + floats lazy in the ether<br> + unimpressed by war. +</p> +``` + + + +Isso ajuda em doses pequenas, mas use com parcimônia. Na maior parte do tempo, o espaço entre elementos deve ser controlado com CSS — aplicando `margin` ou `padding`, por exemplo. Por sorte, a nossa folha de estilo Simple.css já tem um espaçamento padrão bom. A gente cobre o uso de CSS para espaçamento personalizado no [capítulo bônus](/basico-de-css) no fim deste livro. + +Outro jeito de separar o conteúdo na mão é usar uma _linha horizontal_, ou tag `<hr>`. Em geral, ela é estilizada como uma linha na horizontal. Isso pode ajudar quando você quer separar conteúdo — como uma seção nova ou uma cena nova, no caso de uma história. É mais ou menos assim que pode ficar. + + + +{% aside 'Observação' %} +O que é esse texto sem sentido? É um texto meio latim chamado _[lorem ipsum](https://en.wikipedia.org/wiki/Lorem_ipsum)_, que costuma ser usado em situações de design quando você quer ver como o texto fica sem se distrair com o que ele diz. +{% endaside %} + +## Código e texto pré-formatado + +Eu tenho usado estas tags _bastante_ nas páginas que você está lendo neste livro. Veja este parágrafo: + +```html +<p> + By the end of day one, he was familiar with basic tags like <code>html</code>, + <code>head</code>, and <code>body</code>. On day two, he was creating + paragraphs and lists. By day three, he had moved on to creating stunning + layouts with <code>article</code> and <code>section</code>. +</p> +``` + +Isso vai mostrar os pedaços de código numa fonte monoespaçada e numa cor diferente, assim. + + + +Você já me viu incluir os símbolos de menor que (`<`) e maior que (`>`) nos elementos de código das páginas deste livro (assim, `<a>`). Isso pede um trabalhinho a mais. Tipo, se eu quiser mencionar uma tag `<a>`, eu não posso simplesmente escrever `<code><a></code>` porque o navegador vai achar que eu estou tentando fazer um link de verdade dentro da tag `<code>`. Para incluir os símbolos de menor que e maior que (às vezes chamados de “colchetes angulares”), a gente precisa das entidades HTML `<` e <span style="text-wrap: nowrap">`>`, </span>nesta ordem. Isso diz ao navegador que a gente quer renderizar os símbolos de verdade. + +```html +<p> + By the end of day one, he was familiar with basic tags like + <code><html></code>, <code><head></code>, and + <code><body></code>. On day two, he was creating paragraphs and lists. + By day three, he had moved on to creating stunning layouts with + <code><article></code> and <code><section></code>. +</p> +``` + +Isso nos dá o seguinte. + + + +Como a gente viu antes, ao renderizar o seu conteúdo, o navegador ignora a maior parte do espaço em branco no seu código. Mas, às vezes, você quer preservar o espaçamento e as quebras de linha exatos. Um exemplo divertido é a arte ASCII, que é quando você faz arte com caracteres de texto puro. + +<pre class="language-html"><code class="language-html mono"> ___ ___ ___ ___ + /\__\ /\ \ /\__\ /\__\ + /:/__/_ \:\ \ /::L_L_ /:/ / + /::\/\__\ /::\__\ /:/L:\__\ /:/__/ + \/\::/ / /:/\/__/ \/_/:/ / \:\ \ + /:/ / \/__/ /:/ / \:\__\ + \/__/ \/__/ \/__/</code></pre> + +O de cima deve aparecer como as letras “HTML” com um efeito 3D. Funciona porque usa uma fonte monoespaçada e preserva todo o espaço em branco. Como eu fiz? Eu usei a tag `<pre>`, que é para texto _pré-formatado_. Use assim. + +<pre class="language-html"><code class="language-html mono"><pre> + ___ ___ ___ ___ + /\__\ /\ \ /\__\ /\__\ + /:/__/_ \:\ \ /::L_L_ /:/ / + /::\/\__\ /::\__\ /:/L:\__\ /:/__/ + \/\::/ / /:/\/__/ \/_/:/ / \:\ \ + /:/ / \/__/ /:/ / \:\__\ + \/__/ \/__/ \/__/ +</pre></code></pre> + +Se quiser brincar com mais arte de texto ASCII, dê uma olhada neste [gerador de arte em texto](https://perma.cc/E5NZ-SV56). + +## Asides + +A tag `<aside>` é divertida porque o Simple.css a estiliza de um jeito interessante. Elas servem para destaques ou _apartes_ em relação ao conteúdo principal. Por exemplo, eu incluí um aside que lista ingredientes no meu [post sobre donuts](https://demo.htmlforpeople.com/blog/2024-04-20-donuts). + + + +O Simple.css estiliza o aside como uma caixa arredondada e o desloca para o lado. É um jeito legal de adicionar notas extras ou conteúdo secundário a uma página. + +## Mark, tachado, exclusão, inserção + +Aqui vão mais algumas tags de formatação de texto. Use `<mark>` para <mark>destacar texto</mark>. Se quiser tachar texto <s>indesejado</s>, envolva-o na tag `<s>`. Se quiser mostrar edições num documento de forma explícita, prefira a tag `<del>` para indicar uma exclusão e a tag `<ins>` para mostrar texto inserido. Por exemplo, isto vem do meu post sobre donuts. + + + +## Preencha a página índice do blog + +Certo, a gente cobriu várias tags que você pode usar para _marcar_ tipos diferentes de conteúdo. Você pode parar um pouco e brincar com elas. Sem pressa! Eu fico bem aqui quando você estiver pronto. Quando tiver dois ou três posts, vamos colocá-los na página principal do blog. + +Se você abrir `blog/index.html`, ela parece um pouco vazia. A gente conserta isso agora, mostrando o título de cada post, o mais novo primeiro, a data de publicação e um resumo de uma frase. Clicar no título de um post deve levar a pessoa leitora até ele. + +Vamos usar a tag `<article>` para cada um, porque cada um representa uma composição independente. De brinde, o Simple.css vai estilizá-los como cartões. Vamos usar `<h2>` para o título do post, e dentro dele a gente coloca um link (a tag `<a>`). Vamos usar a tag `time` para a data. Vamos usar um parágrafo comum, ou tag `<p>`, para o resumo. A marcação final fica assim. + +```html +<main> + <article> + <h2> + <a href="2024-04-20-donuts.html"> + Why donuts are the best thing ever + </a> + </h2> + <p><time datetime="2024-04-20">April 20, 2024</time></p> + <p> + Donuts are the ultimate comfort food because of their versatility, + variety, portability, mood-boosting power, and endless creative flavors. + </p> + </article> +</main> +``` + +O link no título vai receber um _atributo_ `href`, o destino do link. Como a gente já está na pasta `blog`, a gente pode usar o nome do arquivo do post como destino. + +A gente está usando a tag `<time>` para oferecer uma versão da data amigável para máquinas. Isso pode ser útil para mecanismos de busca que vasculham o seu site ou para possíveis recursos do navegador que dependem de datas. A tag `<time>` recebe um atributo chamado `datetime`, no qual você pode informar a [versão legível por máquina](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time#valid_datetime_values). + +Adicione um `<article>` como o de cima para cada post ao qual você quiser ligar. Você vai acabar com algo assim. + + + +## Uma tabela dos elementos (HTML) + +Ufa! A gente cobriu um bocado de tags e adicionou bastante conteúdo neste capítulo. Pode ser muita coisa para lembrar. Se você precisar consultar como usar uma tag HTML em particular — ou se quiser ver quais tags HTML existem — dê uma olhada nesta [referência de elementos HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) no MDN. O [MDN](https://developer.mozilla.org) é, mais ou menos, o manual oficial da web. É só pesquisar qualquer tag, atributo ou conceito sobre o qual você queira saber mais. + +## Atualize o site no ar (opcional) + +Se quiser enviar as mudanças para o Neocities, siga o mesmo processo dos capítulos anteriores. Arraste e solte a pasta `blog` na área de soltar arquivos para enviar a pasta inteira de uma vez. Como você atualizou o menu nav em todas as páginas, também vai querer enviar de novo as páginas Home e Sobre. + +Claro, você também pode continuar trabalhando _localmente_, em vez de enviar o progresso agora. Você que manda! + +## A seguir + +Ufa, a gente terminou o nosso tour rápido de adicionar um blog com várias tags! A seguir, a gente reduz o ritmo e foca na estrutura da página, adicionando uma página de currículo que você pode compartilhar com empregadores em potencial.
A
src/07-adding-a-resume.md
@@ -0,0 +1,310 @@
+--- +title: 'Adicionar um currículo' +summary: 'Descubra como dar estrutura a uma página grande, montando um currículo digital em HTML.' +permalink: 'adicionar-um-curriculo/' +originalPath: /adding-a-resume/ +tags: chapter +layout: 'chapter.njk' +--- + +# Adicionar um currículo (ou CV) + +Nos capítulos anteriores, a gente aprendeu a colocar vários tipos de conteúdo nas páginas HTML. Agora vamos ver como dar estrutura a uma página grande. Vamos adicionar uma página de currículo (CV). + +Um currículo fica diferente para cada pessoa. Se você está na universidade (ou fora dos Estados Unidos), talvez faça um *curriculum vitae*. Quem trabalha há muitos anos pode ter um currículo longo. Quem ainda estuda pode não ter muita experiência de trabalho. + +Não se preocupe se você ainda não tem muita experiência. Dá para criar seções falando da sua formação: diplomas, matérias e atividades da escola. Ou você pode focar em trabalhos de meio período ou no voluntariado. + +Outra opção é deixar menos “currículo” e mais portfólio de projetos, se isso fizer mais sentido para você. Inclua habilidades que você já tem (tipo HTML!). Pesquise dicas de currículo na web. A internet está cheia de conselhos para gente em fases diferentes da carreira. + +Mas se currículo não é a sua praia, tudo bem. Pegue as ideias de marcação que a gente explora aqui e use do jeito que quiser. O site é seu. É importante que você goste de fazê-lo. + +## Criar o arquivo do currículo + +Crie um arquivo na raiz do site, `resume.html`, e copie o conteúdo de uma das outras páginas principais para dentro dele. + +{% aside 'Observação' %} +Se você está usando o Visual Studio Code, selecione uma das páginas principais na barra lateral e depois copie e cole. Vai nascer uma cópia da página, e você pode renomear o arquivo. +{% endaside %} + +Do jeito que você criar o arquivo, lembre de atualizar o `<title>`, o `<h1>` e o `<nav>`. Eu vou colocar o meu nome no `<h1>` e a profissão (ou um resumo) logo abaixo, em uma tag `<p>`. + +```html +<header> + <nav> + <a href="index.html">Home</a> + <a href="blog/index.html">Blog</a> + <a href="about.html">About</a> + <a href="resume.html" aria-current="page">Resume</a> + </nav> + + <h1>Blake Watson</h1> + <p><em>Experienced Frontend Engineer</em></p> +</header> +``` + +## Um documento com seções + +Um currículo quase sempre se divide em seções. As mais comuns são experiência, formação e habilidades. O HTML tem uma ferramenta para criar uma seção genérica de um documento: a tag `<section>`. Cada seção deve ter um título, [segundo a documentação](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section). + +Vale dizer: também está tudo bem usar só os títulos, se você preferir. Eu escolhi a tag `<section>` para te mostrar um exemplo de uso. E também porque o Simple.css deixa um espaçamento bonito e um divisor entre elas. + +Eu vou criar as seções abaixo. Mas lembre: você pode ter mais ou menos, conforme precisar. Elas não precisam ser iguais às minhas, nem na mesma ordem. + +- Habilidades +- Experiência +- Projetos selecionados +- Formação + +## Habilidades + +Aqui eu vou listar minhas habilidades em tópicos curtos. Vou usar um título de nível 2 e envolver tudo em um `<section>`. + +```html +<section> + <h2>Skills</h2> + + <ul> + <li>HTML / CSS</li> + <li>JavaScript</li> + <li>Web standards / accessibility</li> + <li>TypeScript</li> + <li>Vue</li> + <li>PHP</li> + <li>Sass</li> + <li>Electron</li> + <li>Sketch</li> + </ul> +</section> +``` + +Isso aparece assim na tela. + + + +É uma lista limpa, com marcadores. Dito isso, eu sinto que sobra um pouco de espaço. Seria legal dividir em colunas. Não existe um jeito estritamente HTML de fazer isso. Mas vale usar um pouquinho de CSS para resolver. + +Você já viu várias tags usando *atributos*. Cada página do nosso site tem links com a tag `<a>`, e cada link tem um atributo `href`, por exemplo. Outro atributo bem útil é o `style`. Ele deixa a gente aplicar CSS direto em um elemento HTML. Eu falo mais de CSS nos capítulos bônus no fim deste livro. Por agora, vamos usar o atributo `style` para dividir a lista em colunas. + +```html +<section> + <h2>Skills</h2> + + <ul style="columns: 2"> + <li>HTML / CSS</li> + <li>JavaScript</li> + <li>Web standards / accessibility</li> + <li>TypeScript</li> + <li>Vue</li> + <li>PHP</li> + <li>Sass</li> + <li>Electron</li> + <li>Sketch</li> + </ul> +</section> +``` + +Assim a lista fica mais agradável e aproveita melhor o espaço. + + + +## Experiência + +Eu não sou especialista em currículo. Mas acho que vou colocar a experiência de trabalho em seguida. É provavelmente o que um empregador da minha área mais quer ver. Isso muda se você não tem muita experiência, ou se acha que formação ou outras qualificações pesam mais. + +Marcar conteúdo é tanto arte quanto ciência. Não existe um único jeito certo. Um bom princípio para escolher as tags é este: a escolha precisa ter significado. Não vale escolher só pela aparência. + +Por exemplo: você pode ficar tentado a usar um `<h6>` em algum lugar só porque quer um título pequenininho. Mas, a menos que esse título esteja seis níveis abaixo, `<h6>` não é a melhor escolha. + +Vou te mostrar a marcação que eu escolhi, o resultado visual e, depois, a explicação. + +```html +<section> + <h2>Experience</h2> + + <h3>Frontend Engineer</h3> + + <p> + <strong>MRI Technologies</strong><br> + <time datetime="2019-08">August 2019</time>–Present + </p> + + <ul> + <li>Build and maintain a spacesuit management app for NASA</li> + <li> + Build and maintain a document management system for Collins Aerospace + </li> + <li>Create reactive frontends with Vue, REST APIs, and GraphQL</li> + </ul> + + <!-- ...the rest of the jobs go here --> +</section> +``` + +Isso nos dá uma seção com esta cara. + + + +Eu vou listar vários cargos que já tive. Por isso uso o nome do cargo como título (nível 3, porque ele fica abaixo do título de nível 2 *Experience*). Em seguida, quero mostrar o empregador e o período. Escolhi um único parágrafo para juntar as duas coisas. Uso uma quebra de linha manual para jogar o período para a segunda linha. + +Outro jeito é colocar o nome do empregador no título, depois do cargo. Eu não acho que um jeito seja mais “certo” que o outro. Eu só prefiro reduzir a quantidade de texto grande na página. + +{% aside 'Observação' %} +A gente está trabalhando dentro dos limites do Simple.css agora. Se a gente *realmente* quisesse controlar o visual, adicionaria um CSS personalizado. Não vamos fazer isso agora. Veja os capítulos bônus no fim do livro para saber mais sobre CSS. +{% endaside %} + +A gente envolve a data numa tag `<time>` e coloca a [data no formato que o computador entende](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time#valid_datetime_values) no *atributo* `datetime`. Eu uso uma *entidade* HTML, `–`, para colocar um traço entre a data de início e a de fim. Isso usa o caractere *en dash* (um traço um pouco mais longo que o hífen comum, `-`). Na [tipografia, ele serve para intervalos numéricos](https://practicaltypography.com/hyphens-and-dashes.html). + +{% aside 'Observação' %} +Dê uma olhada nesta [lista de entidades HTML](https://perma.cc/BEA6-LF46). É um guia de caracteres especiais que você pode usar no HTML. +{% endaside %} + +Por fim, eu uso uma *lista sem ordem* para os tópicos sobre o cargo e as responsabilidades. + +Vou adicionar o resto da minha experiência de trabalho. Coloco o código completo no fim do capítulo. Você também pode [ver o currículo de demonstração](https://demo.htmlforpeople.com/resume) e [olhar o código-fonte](https://perma.cc/3WP3-R9XL). + +## Projetos selecionados + +Na próxima seção, eu quero destacar alguns projetos em que trabalhei. É a versão currículo de um portfólio: um lugar para mostrar sites que eu fiz e, quando der, linkar para eles. Currículos impressos costumam ser só texto. Mas isto é uma página da web. Você pode colocar uma imagem ou duas nesta seção. + +Nesses projetos, vou usar a tag `<h3>` para o título do projeto e um parágrafo de descrição junto. Se o projeto está no ar, eu coloco o link. Aqui vai um exemplo. + +```html +<section> + <h2>Selected projects</h2> + + <h3>Mississippi Gulf Coast Community College</h3> + + <p> + I worked on this website in my role as designer and developer at Mad Genius. I built out several of the dynamic, data-intensive sections like the searchable course catalog and the comprrehensive "A to Z" index. These sections made heavy use of reactive UI, third-party API integrations, and custom WordPress plugin development. + </p> + + <p><a href="https://mgccc.edu/">mgccc.edu</a></p> + + <!-- ...the rest of the projects go here --> +</section> +``` + +## Formação + +Por fim, vou adicionar meus diplomas, a universidade, o ano de formatura e a área de estudo. Uso parágrafos simples, com `<strong>` para ênfase e `<br>` para quebras de linha manuais. + +```html +<section> + <h2>Education</h2> + + <p> + <strong>Master of Business Administration</strong>, <time>2009</time><br> + <em>Mississippi State University, Starkville, MS</em> + </p> + + <p> + <strong>Bachelor of Business Admiinistration</strong>, Information Systems, + <time>2007</time><br> + <em>Mississippi State University, Starkville, MS</em> + </p> +</section> +``` + +## Exemplo completo + +Aqui está o código completo, incluindo o cabeçalho e a área de conteúdo principal. + +```html +<header> + <nav> + <a href="index.html">Home</a> + <a href="blog/index.html">Blog</a> + <a href="about.html">About</a> + <a href="resume.html" aria-current="page">Resume</a> + </nav> + + <h1>Blake Watson</h1> + <p><em>Experienced Frontend Engineer</em></p> +</header> + +<main> + <section> + <h2>Skills</h2> + + <ul style="columns: 2"> + <li>HTML / CSS</li> + <li>JavaScript</li> + <li>Web standards / a11y</li> + <li>TypeScript</li> + <li>Vue</li> + <li>PHP</li> + <li>Sass</li> + <li>Electron</li> + <li>Sketch</li> + </ul> + </section> + + <section> + <h2>Experience</h2> + + <h3>Frontend Engineer</h3> + + <p> + <strong>MRI Technologies</strong><br> + <time datetime="2019-08">August 2019</time>–Present + </p> + + <ul> + <li>Build and maintain a spacesuit management app for NASA</li> + <li>Build and maintain a document management system for Collins Aerospace</li> + <li>Create reactive frontends with Vue, REST APIs, and GraphQL</li> + </ul> + + <h3>Web Developer/Interactive Designer</h3> + + <p> + <strong>Mad Genius</strong><br> + <time datetime="2015-05">May 2015</time>–<time datetime="2019-08">August 2019</time> + </p> + + <ul> + <li>Sketching, prototyping, and UI design</li> + <li>WordPress theme and plugin development</li> + <li>Reactive UI with Vue and Knockout</li> + <li>Third-party API integrations</li> + </ul> + + <h3>Web Developer</h3> + + <p> + <strong>Self employed</strong><br> + <time>2007</time>–<time>2015</time> + </p> + + <ul> + <li>Communicated with clients</li> + <li>Developed usable, standards-based websites</li> + <li>Made responsive websites</li> + <li>Volunteered on many non-profit projects</li> + </ul> + </section> + + <section> + <h2>Education</h2> + + <p> + <strong>Master of Business Administration</strong>, <time>2009</time><br> + <em>Mississippi State University, Starkville, MS</em> + </p> + + <p> + <strong>Bachelor of Business Admiinistration</strong>, Information Systems, <time>2007</time><br> + <em>Mississippi State University, Starkville, MS</em> + </p> + </section> +</main> +``` + +Você pode ver o resultado no [site de demonstração](https://demo.htmlforpeople.com/resume). Mas aqui vai uma captura da página inteira. + + + +## A seguir + +A gente tem criado *muito* conteúdo. No próximo capítulo, vamos fazer um intervalo e ver como rodar um servidor web no computador. Ele deixa o teste do site mais parecido com um site de verdade, no ar.
A
src/08-intermission-installing-a-local-web-server.md
@@ -0,0 +1,144 @@
+--- +title: 'Intervalo: instalar um servidor local' +summary: 'Aprenda a rodar um servidor web no seu computador — um programinha que finge ser a internet, para testar o site com recursos mais poderosos.' +permalink: 'intervalo-instalar-um-servidor-local/' +originalPath: /intermission-installing-a-local-web-server/ +tags: chapter +layout: 'chapter.njk' +--- + +# Intervalo: instalar um servidor local + +HTML é uma linguagem acessível. Foi um dos motivos pelos quais eu quis fazer este livro na web. Ele é paciente com a gente. Se você lembra do primeiro capítulo — aquele primeiro site que era só uma frase ou duas —, vai lembrar que a gente não usou nenhuma tag HTML. Mesmo assim, deu para abrir o arquivo no navegador e ver o conteúdo. A gente colocou esse arquivo na web, e funcionou! Você pode começar simples e ir colocando complexidade conforme precisar. + +Agora chegamos a um desses pontos. No próximo capítulo, vamos criar uma página divertida, com piadas, recursos de RPG de mesa e vídeos do YouTube embutidos. + +O problema: os vídeos do YouTube podem não funcionar do jeito que a gente tem pré-visualizado o site — abrindo os arquivos HTML no navegador. Na maior parte do tempo, esse jeito é ótimo para ver HTML. Mas, quando a gente pede dados de outros sites — tipo um vídeo em streaming —, precisamos imitar um servidor web de verdade. + +Um servidor web é um programa que deixa um site disponível em um endereço. Quando você visita esse endereço no navegador, vê o site. Um *servidor web local* é um programinha no seu computador que finge ser a internet, para você testar o site. Vamos instalar e rodar um. Assim o site fica disponível em um endereço local — só no seu computador, não para todo mundo na internet. + +Vou te dar várias opções, conforme o sistema operacional e o quanto você quer se meter no lado técnico. Mas, primeiro, vamos falar de URLs. + +## URLs relativas e URLs absolutas + +Até agora, como a gente abria os arquivos do site direto no navegador, precisou usar URLs relativas. URLs relativas se escrevem do ponto de vista do arquivo atual. Por exemplo: se eu estou numa subpágina e quero linkar para uma página da raiz, preciso usar a sintaxe `..` para “subir” um nível e achar a página de destino. + +Quando a gente roda um servidor web, dá para usar URLs absolutas. Uma URL absoluta se escreve sempre do ponto de vista do nível mais alto (o *nível mais alto* é a pasta que a gente apontou para o servidor web). Não importa em qual subpágina eu esteja: eu poderia linkar para a página inicial assim. + +```html +<a href="/">Go to the homepage</a> +``` + +A barra representa o nível mais alto (eu também poderia ter escrito `/index.html`, mas isso não é preciso: o servidor web usa esse arquivo automaticamente, se ele existir). Se eu quisesse linkar para a página `about.html`, faria assim. + +```html +<a href="/about.html">Go to the About page</a> +``` + +O legal é que não importa em qual página eu estou — pode ser uma página da raiz ou uma subpágina. Esse caminho sempre leva à página Sobre, de qualquer lugar. Imagine que a gente está numa página lá no fundo de uma pasta. + +```html +<!-- imagine we are currently on a blog page /blog/my-post.html--> +<h1>My blog post</h1> + +<!-- instead of this, which *does* work --> +<a href="../about.html">About</a> + +<!-- we can do this --> +<a href="/about.html">About</a> +``` + +A gente não usou URLs absolutas antes porque não estava usando um servidor web. Se a gente tivesse tentado usar URLs absolutas abrindo o site direto no navegador, a barra apontaria para a pasta mais alta do *computador inteiro*. Com certeza não era isso que a gente queria. + +Agora que a gente está usando um servidor web, eu deixo com você se quer voltar e trocar todos os caminhos. Mas isso deixa copiar e colar o menu bem mais fácil. Criar links entre páginas fica mais direto com URLs absolutas. + +## Opções de servidor web + +Aqui vão várias opções para rodar um servidor web no seu computador. Você não precisa ler tudo. Use os links abaixo para pular até a seção que vale para você. + +- [Visual Studio Code (multiplataforma)](#visual-studio-code-multiplataforma) +- [macOS](#macos) +- [Windows e multiplataforma](#windows-e-multiplataforma) +- [Python e PHP (multiplataforma)](#python-e-php-multiplataforma) + +## Visual Studio Code (multiplataforma) + +A Microsoft publica uma extensão do VS Code chamada [Live Preview](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server). Ela roda o seu site num servidor web local e atualiza sozinha quando você muda algo. Você pode instalar pelo link ou clicar no ícone de extensões e pesquisar o nome. + + + +Depois de instalar, você vai notar a opção *Show Preview* quando clicar com o botão direito num arquivo. + + + +Clicar nisso abre um painel ao lado, com uma prévia do site num endereço local. Você pode usar essa prévia, abrir no navegador digitando o endereço, ou clicar em *Open in Browser* no menu da barra de endereço. + + + +## macOS + +Eu uso Mac, então posso recomendar de coração o ótimo aplicativo [WorldWideWeb](https://iconfactory.com/worldwideweb/). É de graça para o que a gente precisa. Tem um upgrade Pro que recarrega a página sozinho quando você faz mudanças. + +O funcionamento é assim: você aponta a pasta do site e clica no botão de play. + + + +Quando você clica no play, o site fica disponível em algum endereço. Clique em *Open Browser* para abrir essa URL no navegador padrão. + + + +E agora olha só: a gente está vendo o site no nosso endereço novinho em folha. + + + +## Windows e multiplataforma + +Quem usa Windows, tenho duas opções para você. Se você está no Visual Studio Code, eu recomendo pular para aquela seção e conhecer a extensão Live Preview da Microsoft. + +Caso contrário, experimente o [Simple Web Server](https://simplewebserver.org/). Depois de instalar, clique no botão para criar um servidor novo. + +<img src="/assets/img/intermission-installing-a-local-web-server-7.webp" alt="Captura de tela do aplicativo Simple Web Server. No centro aparece a mensagem “You haven't created any servers yet”, com um ícone de servidor acima. No canto inferior direito, um botão amarelo com o texto “New Server”, destacado por uma seta vermelha." style="max-height: 600px; margin-inline: auto"> + +Em seguida, aponte para a pasta do seu site: clique no botão com o ícone de pasta e escolha a pasta certa. + +<img src="/assets/img/intermission-installing-a-local-web-server-8.webp" alt="A janela “Add Server” do aplicativo Simple Web Server. Há campos para “Folder path” e “Port”, além das opções Basic Options, Advanced Options e Error Pages. Na parte de baixo ficam os botões “Cancel” e “Create Server”." style="max-height: 600px; margin-inline: auto"> + +Quando o servidor estiver criado, você o vê na lista. Clique para abrir. Ali aparece a URL em que o site está disponível. Você pode clicar no link para abrir no navegador padrão. + +<img src="/assets/img/intermission-installing-a-local-web-server-9.webp" alt="Uma janela do Simple Web Server chamada “Edit Server” mostra as opções de um servidor web em execução. A URL destacada é “http://127.0.0.1:8080” e parece clicável. Há campos para o caminho da pasta, a porta (8080) e uma caixa para acesso na rede local. Embaixo ficam os botões de cancelar e salvar." style="max-height: 600px; margin-inline: auto"> + +{% aside 'Observação' %} +O Simple Web Server é multiplataforma e também funciona no macOS e no Linux. Dito isso, eu recomendo o WorldWideWeb para quem usa Mac, a menos que você precise de vários servidores rodando ao mesmo tempo. +{% endaside %} + +## Python e PHP (multiplataforma) + +Esta opção é um pouco mais técnica. Você não precisa ser um hacker de elite. Mas vai precisar rodar um programa de linha de comando no terminal. + +### Python + +Se você não tem nenhum dos dois no computador, o Python é o mais fácil de configurar. Vá à [página de downloads do Python](https://www.python.org/downloads/) e baixe o instalador do seu sistema (pegue a versão 3). + +Abra uma janela do terminal e use `cd` para entrar na pasta do site. Depois, rode este comando para iniciar o servidor de desenvolvimento do Python. + +```bash +python3 -m http.server +``` + +Isso deixa o site disponível em `localhost`, na porta que ele indicar (em geral 8000). Então o endereço do site fica `http://localhost:8000`. + +### PHP + +Instalar PHP foge do recorte deste livro, mas ele existe para quase todos os sistemas. O PHP nasceu como tecnologia de site. E, como eu conto num capítulo bônus, [o PHP é útil para reutilizar pedaços de HTML](/html-reutilizavel-com-php) (tipo o menu de navegação) em várias páginas. + +Se o PHP já está no seu sistema, você pode rodar o servidor de desenvolvimento do PHP de um jeito parecido com o exemplo do Python. + +```bash +php -S localhost:8000 +``` + +Isso deixa o site disponível em `http://localhost:8000`. + +## A seguir + +Agora que a gente tem um servidor web local, o site consegue conversar melhor com outros sites. Em seguida, vamos fazer uma página com várias coisas divertidas, inclusive vídeos do YouTube embutidos!
A
src/09-adding-a-fun-page.md
@@ -0,0 +1,468 @@
+--- +title: 'Adicionar uma página divertida' +summary: 'Adicione uma página interativa ao seu site, com conteúdo que aparece e some e vídeos do YouTube embutidos.' +permalink: 'adicionar-uma-pagina-divertida/' +originalPath: /adding-a-fun-page/ +tags: chapter +layout: 'chapter.njk' +--- + +# Adicionar uma página divertida + +Beleza, hora de se *divertir*! Bom, espero que tudo até aqui tenha sido divertido. Ainda assim, quero te mostrar mais algumas coisas que o HTML sabe fazer. Eu guardei esta página por último porque vamos usar algumas das tags HTML mais complexas. + +## Criar o arquivo + +Vamos criar o `fun.html` na raiz da pasta do site. Use o conteúdo da página inicial como ponto de partida. Depois mude o `<title>` e o `<h1>` para *Fun* ou algo parecido. Esvazie o conteúdo da tag `<main>`. + +Agora vamos dividir esta página em várias seções, no mesmo espírito do currículo. + +## Piadas + +Primeiro, vamos adicionar uma seção de piadas. + +```html +<section> + <h2>Jokes</h2> + + ...Jokes will go here +</section> +``` + +A ideia é mostrar a abertura da piada e esconder a punchline atrás de um clique. Você pode [ver a versão ao vivo aqui](https://demo.htmlforpeople.com/fun). Vamos usar os elementos `<details>` e `<summary>` para esse comportamento. Eles funcionam assim. + +```html +<details> + <summary>This content will show up by default</summary> + + <p> + Clicking the above content will cause this hidden content to become visible. + </p> +</details> +``` + +Aqui vai um vídeo deste elemento em ação. + +@[youtube](https://youtu.be/Z9qfMCm6AYM) + +Eu vou adicionar três piadas, admito, bem cafonas. + +```html +<section> + <h2>Jokes</h2> + + <details> + <summary>Why wouldn’t the skeleton cross the road?</summary> + <p>It didn't have the guts.</p> + </details> + + <details> + <summary>Why was the math book sad?</summary> + <p>It had too many problems.</p> + </details> + + <details> + <summary>Why don't scientists trust atoms?</summary> + <p>Because they make up everything!</p> + </details> +</section> +``` + +É um exemplo bobo. Mas os elementos `<details>`/`<summary>` ajudam sempre que você quer facilitar a leitura por cima, e deixar a pessoa aprofundar só onde quiser. Por exemplo, numa lista de perguntas frequentes (FAQ). + +## Usar tabelas para jogos de mesa + +Agora vamos aproveitar a tabela HTML. A tag `<table>` e as tags ligadas a ela nos dão jeitos poderosos de mostrar informação. Para aprender, vamos criar uma tabela pequena. Mas, se você precisar mostrar muitos dados *tabulares*, veja a [página da MDN sobre tabelas](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table). + +Em RPGs de mesa como Dungeons and Dragons, o mestre muitas vezes precisa improvisar encontros para o grupo. Um jeito de fazer isso é usar uma tabela aleatória. É uma tabela que casa o resultado dos dados com itens, criaturas ou eventos. Vamos fazer uma tabela com oito encontros possíveis que o grupo pode achar. O mestre joga um dado de oito lados e usa o encontro correspondente. + +É assim que a tabela final vai ficar. + +<img src="/assets/img/adding-a-fun-page-1.webp" alt="Uma tabela com o título “Roll (1d8) Encounter” e duas colunas. A coluna da esquerda lista os números de 1 a 8. A da direita lista os encontros: 1. Band of Goblins, 2. Wandering Merchant, 3. Group of Bandits, 4. Pack of Wolves, 5. Travelling Minstrels, 6. Lost Child, 7. Hidden Trap, 8. Old Hermit." style="max-height: 450px"> + +Primeiro, vou criar um `<section>` novo, com um título e um texto de introdução sobre D&D. Depois, apresento em poucas palavras a tabela de encontro aleatório. + +```html +<section> + <h2>D&D stuff</h2> + + <p> + Dungeons & Dragons (D&D) is a fun tabletop game where you create characters and go on epic adventures with friends. Guided by a Dungeon Master (DM), you'll roll dice to see what happens next. It's all about creativity, teamwork, and having a blast as you tackle quests, fight monsters, and find awesome treasures. + </p> + + <h3>Random encounter table</h3> + + <p> + This is a table you can use to randomly decide what enemy or creature the players are going to encounter. Just roll a d8. + </p> + + ...The table will go here +</section> +``` + +A gente usa a tag `<table>` para criar uma tabela. Uma tabela pode ter uma seção de cabeçalho e uma seção de corpo. + +```html +<table> + <thead></thead> + <tbody></tbody> +</table> +``` + +A tabela precisa de duas colunas: uma para o resultado do dado e outra para o encontro correspondente. Vamos criar uma *linha de tabela* dentro do `<thead>`. Eu preencho o cabeçalho e depois explico. + +```html +<table> + <thead> + <tr> + <th>Roll (1d8)</th> + <th>Encounter</th> + </tr> + </thead> + <tbody></tbody> +</table> +``` + +A tag `<tr>` cria uma *linha de tabela* (*table row*). Dentro dessa linha, vamos adicionar duas células. Como elas são títulos de coluna, usamos a tag de *cabeçalho de tabela* (*table header*), ou `<th>`: uma para o dado e outra para o resultado. Até aqui, fica assim. + + + +Em seguida, a gente preenche a tabela com a tag de *célula de dados* (*table data cell*), ou `<td>`. Essas linhas vão dentro da seção do corpo. + +```html +<table> + <thead> + <tr> + <th>Roll (1d8)</th> + <th>Encounter</th> + </tr> + </thead> + + <tbody> + <tr> + <td>1</td> + <td>Band of Goblins</td> + </tr> + <tr> + <td>2</td> + <td>Wandering Merchant</td> + </tr> + <tr> + <td>3</td> + <td>Group of Bandits</td> + </tr> + <tr> + <td>4</td> + <td>Pack of Wolves</td> + </tr> + <tr> + <td>5</td> + <td>Travelling Minstrels</td> + </tr> + <tr> + <td>6</td> + <td>Lost Child</td> + </tr> + <tr> + <td>7</td> + <td>Hidden Trap</td> + </tr> + <tr> + <td>8</td> + <td>Old Hermit</td> + </tr> + </tbody> +</table> +``` + +São muitas tags! Espero que a lógica esteja clara. Dentro do `<tbody>`, a gente cria oito *linhas de tabela*, cada uma com duas *células de dados*. E isso nos dá a tabela final. + +<img src="/assets/img/adding-a-fun-page-1.webp" alt="Uma tabela com o título “Roll (1d8) Encounter” e duas colunas. A coluna da esquerda lista os números de 1 a 8. A da direita lista os encontros: 1. Band of Goblins, 2. Wandering Merchant, 3. Group of Bandits, 4. Pack of Wolves, 5. Travelling Minstrels, 6. Lost Child, 7. Hidden Trap, 8. Old Hermit." style="max-height: 450px"> + +Tabelas HTML também sabem fazer algumas coisas de planilha, tipo uma célula ocupar várias colunas. Não vamos entrar nisso aqui. Só lembre: tabelas têm poder, se você precisar. + +## Vídeo embutido + +Por último, mas não menos importante, vamos dar um tempero na página *Fun!* com alguns vídeos. Eu vou de clima synthwave. É claro que você pode pegar os vídeos do YouTube que quiser. Alguns canais não deixam o vídeo ser embutido em outros sites. Vale ter isso em mente. + +Vou criar uma seção nova para os meus vídeos. + +```html +<section> + <h2>Synthwave mixes</h2> + + ...videos will go here +</section> +``` + +Primeiro, vou pegar este mix chamado Waves (https://www.youtube.com/watch?v=b6toYA0W4IA). Se você abrir essa página, vai ver um botão de compartilhar embaixo do vídeo. Clicar nesse botão mostra várias formas de compartilhar. + + + +Escolha “Embed”, se estiver disponível. Quando fizer isso, você vai ver um código HTML e um botão *Copy*. Copie o código. Você pode colar o código depois da tag `<h2>`. + +```html +<section> + <h2>Synthwave mixes</h2> + + <iframe> + width="560" + height="315" + src="https://www.youtube.com/embed/b6toYA0W4IA?si=-Iu68cVS5E08st5O" + title="YouTube video player" + frameborder="0" + allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" + referrerpolicy="strict-origin-when-cross-origin" + allowfullscreen + ></iframe> +</section> +``` + +Esse embed usa a tag `<iframe>`. Eu não vou entrar em detalhes sobre esse elemento. Em resumo, ele serve para mostrar uma página da web dentro de outra página da web. Mas, quando eu recarrego a página, aparece este erro: “Video unavailable”. Por quê? + + + +É porque o meu site ainda está aberto como arquivo. A gente precisa buscar dados de outro site (o YouTube). Mas os recursos de segurança do navegador impedem isso. + +### Rodar o nosso servidor web local + +Sem pânico! Foi por isso que a gente instalou um servidor web local no capítulo anterior — aquele programinha no computador que finge ser a internet, para testar o site. Se você ainda não fez isso, inicie o servidor pelo método que você escolheu no capítulo anterior. + +{% aside 'Observação' %} +Infelizmente, as coisas ficam um pouco estranhas aqui. Algumas dessas opções de servidor, como Live Preview e Simple Web Server, abrem o navegador por padrão no endereço IP `127.0.0.1`. Isso é, no fundo, a mesma coisa que `localhost`, o valor que outros servidores locais usam. + +Por motivos que eu não entendo por completo, os vídeos embutidos não funcionam quando a gente acessa o site pelo endereço IP. Você precisa usar `localhost`. A sorte é que isso é fácil: é só trocar `127.0.0.1` por `localhost` na barra de endereço. Se você usa o Live Preview da Microsoft, precisa ver o site no navegador, e não na janela de prévia. +{% endaside %} + +Neste exemplo, eu vou usar o [WorldWideWeb](https://iconfactory.com/worldwideweb/). Quando eu aponto para a pasta do site e clico no play, o servidor sobe. Aí eu visito o endereço que ele mostra. + + + +Confira a barra de endereço do navegador. Garanta que você está na versão do servidor web, e não no arquivo aberto direto. + + + +Demais! Vou pegar mais dois vídeos. + +- https://youtu.be/rDfS8B2-Mt4 +- https://youtu.be/yb0DR_qRetA + +Vou fazer com eles o mesmo que fiz com o primeiro. Abro a página do vídeo, clico em *Share*, depois em *Embed*, e copio o código. Cole o código de cada vídeo abaixo do primeiro. + +Então eu embuti os vídeos. Mas agora notei outra coisa. Seria legal se esses vídeos ocupassem a largura da página. Também vamos ver como o site fica num celular. + + + +Se eu vejo o site no *modo de design responsivo* do Safari e estreito a área visível, os vídeos embutidos escapam pelo lado direito da página. Não é o ideal. + +Existem vários jeitos de consertar isso. A gente vai usar uma solução de terceiros. + +### Tags HTML personalizadas + +O HTML deixa a gente criar as próprias tags. Elas se chamam tags HTML personalizadas. O nome técnico disso é Web Components. Em geral, elas misturam HTML, CSS e JavaScript para definir a cara e o comportamento do componente. Criar os nossos próprios Web Components foge do recorte deste livro. E tudo bem. A gente não precisa criar um. Dá para usar tags HTML personalizadas que outras pessoas já fizeram. + +Vamos usar o [Lite YouTube Embed](https://github.com/paulirish/lite-youtube-embed#readme). Leia sobre o que ele sabe fazer, se quiser. Para a gente, o objetivo é só instalar e ter um vídeo na largura inteira, que diminui direito no celular. + +Antes de ver como instalar este componente, vamos ver como usá-lo. Ele oferece uma tag HTML personalizada nova, `<lite-youtube>`. Você dá a ela um *atributo* `videoid`, que é o ID do vídeo do YouTube. Dá para achar o ID na URL. Esta é a minha URL: + +<pre>https://www.youtube.com/watch?v=b6toYA0W4IA + |_________| + video id</pre> + +```html +<lite-youtube videoid="b6toYA0W4IA"></lite-youtube> +``` + +Bem mais limpo que o `<iframe>`! + +Ok, vamos instalar. Precisamos de dois arquivos: um arquivo JavaScript e um arquivo CSS. Quem fez o componente disponibiliza esses arquivos. Juntos, eles têm todo o código que faz o componente parecer e funcionar direito. Vou te dar o link direto dos dois. Salve o arquivo CSS na pasta `css` do seu site. Depois, crie uma pasta `js` para o arquivo JavaScript. + +- Arquivo JS: <https://cdnjs.cloudflare.com/ajax/libs/lite-youtube-embed/0.3.2/lite-yt-embed.min.js> +- Arquivo CSS: <https://cdnjs.cloudflare.com/ajax/libs/lite-youtube-embed/0.3.2/lite-yt-embed.min.css> + +Abra cada um desses links e use *File > Save Page As…* (Ctrl+S no Windows, Command+S no macOS). Quando os arquivos estiverem salvos, adicione-os na seção `<head>` da página. Deve ficar assim. + +```html +<head> + <title>Fun - Blake's Homepage</title> + <meta charset="utf-8"> + + <link rel="stylesheet" href="css/simple.css"> + <link rel="stylesheet" href="css/lite-yt-embed.min.css"> + <script src="js/lite-yt-embed.min.js"></script> +</head> +``` + +Primeiro, a gente adiciona o arquivo CSS (a ordem não importa). A gente o traz do mesmo jeito que trouxe o Simple.css, com a tag `<link>`. Também vamos trazer o código JavaScript. Para isso, usamos a tag `<script>`. Ela recebe um atributo `src`, que é o caminho do arquivo. + +Com esses dois arquivos no lugar, a gente pode usar o componente novo. Voltando ao exemplo. Digamos que a gente tem esta URL do YouTube: + +<https://www.youtube.com/watch?v=b6toYA0W4IA> + +A gente precisa tirar o ID desta URL. Numa URL do YouTube, o ID é a parte que vem depois de `v=`. Neste caso, é `b6toYA0W4IA`. Então a gente embute o vídeo com a sintaxe abaixo. + +```html +<lite-youtube videoid="b6toYA0W4IA"></lite-youtube> +``` + +Vou fazer os outros dois vídeos do mesmo jeito. + +```html +<lite-youtube videoid="b6toYA0W4IA"></lite-youtube> + +<lite-youtube videoid="rDfS8B2-Mt4"></lite-youtube> + +<lite-youtube videoid="yb0DR_qRetA"></lite-youtube> +``` + +Está ficando bom! + + + +Vou adicionar algumas *linhas horizontais* para separar esses vídeos. + +```html +<lite-youtube videoid="b6toYA0W4IA"></lite-youtube> +<hr> +<lite-youtube videoid="rDfS8B2-Mt4"></lite-youtube> +<hr> +<lite-youtube videoid="yb0DR_qRetA"></lite-youtube> +``` + +E vamos ver como eles ficam no tamanho de celular. + + + +Ótimo! + +## Exemplo completo do código + +Para ver esta página funcionando, [confira a demonstração ao vivo](https://demo.htmlforpeople.com/fun). Aqui está o código completo da página *Fun!*. + +```html +<!doctype html> +<html> + <head> + <meta charset="utf-8"> + <title>Fun - Blake's Homepage</title> + + <link rel="stylesheet" href="css/simple.css"> + <link rel="stylesheet" href="css/lite-yt-embed.min.css"> + <script src="js/lite-yt-embed.min.js"></script> + </head> + + <body> + <header> + <nav> + <a href="index.html">Home</a> + <a href="blog/index.html">Blog</a> + <a href="about.html">About</a> + <a href="resume.html">Resume</a> + <a href="fun.html" aria-current="page">Fun</a> + </nav> + + <h1>Fun</h1> + </header> + + <main> + <section> + <h2>Jokes</h2> + + <details> + <summary>Why wouldn't the skeleton cross the road?</summary> + <p>It didn't have the guts.</p> + </details> + + <details> + <summary>Why was the math book sad?</summary> + <p>It had too many problems.</p> + </details> + + <details> + <summary>Why don't scientists trust atoms?</summary> + <p>Because they make up everything!</p> + </details> + </section> + + <section> + <h2>D&D stuff</h2> + + <p> + Dungeons & Dragons (D&D) is a fun tabletop game where you create characters and go on epic adventures with friends. Guided by a Dungeon Master (DM), you'll roll dice to see what happens next. It's all about creativity, teamwork, and having a blast as you tackle quests, fight monsters, and find awesome treasures. + </p> + + <h3>Random encounter table</h3> + + <p> + This is a table you can use to randomly decide what enemy or creature the players are going to encounter. Just roll a d8. + </p> + + <table> + <thead> + <tr> + <th>Roll (1d8)</th> + <th>Encounter</th> + </tr> + </thead> + <tbody> + <tr> + <td>1</td> + <td>Band of Goblins</td> + </tr> + <tr> + <td>2</td> + <td>Wandering Merchant</td> + </tr> + <tr> + <td>3</td> + <td>Group of Bandits</td> + </tr> + <tr> + <td>4</td> + <td>Pack of Wolves</td> + </tr> + <tr> + <td>5</td> + <td>Travelling Minstrels</td> + </tr> + <tr> + <td>6</td> + <td>Lost Child</td> + </tr> + <tr> + <td>7</td> + <td>Hidden Trap</td> + </tr> + <tr> + <td>8</td> + <td>Old Hermit</td> + </tr> + </tbody> + </table> + </section> + + <section> + <h2>Synthwave mixes</h2> + + <lite-youtube videoid="b6toYA0W4IA"></lite-youtube> + <hr> + <lite-youtube videoid="rDfS8B2-Mt4"></lite-youtube> + <hr> + <lite-youtube videoid="yb0DR_qRetA"></lite-youtube> + </section> + </main> + + <footer> + <p>Made with ❤️ and ☕️ by Blake Watson.</p> + </footer> + </body> +</html> +``` + +## Publicar o site + +Você conseguiu! Com esta página pronta, você terminou o livro principal. Seguindo os mesmos passos dos capítulos anteriores, atualize o seu site no Neocities com esta página nova. Lembre de atualizar o menu de navegação em todas as outras páginas. + +## A seguir + +Em seguida, a gente vai comemorar o que conquistou. E eu te aponto mais materiais de estudo, inclusive os capítulos bônus deste site.
A
src/10-achievement-unlocked-hypertexter.md
@@ -0,0 +1,84 @@
+--- +title: 'Conquista desbloqueada: Hipertextista' +summary: 'Recapitulação do que o livro cobriu, com links para recursos externos e documentação sobre desenvolvimento e design web.' +permalink: 'conquista-desbloqueada-hipertextista/' +originalPath: /achievement-unlocked-hypertexter/ +tags: chapter +layout: 'chapter.njk' +--- + +# Conquista desbloqueada: Hipertextista + +Parabéns — você fez um site de verdade usando HTML! O que começou como uma frase ou duas no Bloco de Notas virou um site completo, com várias páginas. Você aprendeu um monte de coisa: + +- Criar páginas HTML +- Estruturar conteúdo com títulos e seções +- Ligar uma página à outra +- Formatar texto +- Citar texto com citações em bloco +- Mostrar dados com tabelas +- Esconder conteúdo atrás de um resumo clicável +- Criar conteúdo secundário com asides +- Incorporar imagens +- Incorporar vídeo +- Usar web components de terceiros +- Colocar um site na internet +- …e ainda mais! + +Espero que você se sinta capaz de criar seus próprios sites. Mas, mesmo que você não vá fazer sites do zero, conhecer HTML ajuda. Muitos sistemas de gerenciamento de conteúdo deixam você colocar HTML personalizado numa página. Só saber usar a tag `<a>` para criar um link já é um superpoderzinho. + +Então, para onde agora? + +## Capítulos bônus + +Terminamos o conteúdo principal que eu queria cobrir em [_HTML e Pessoas_](/). Dito isso, tenho alguns assuntos que quero aprofundar como um apêndice do livro. + +- **[Personalizar o Simple.css](/personalizar-o-simple-css)**. Mesmo sem aprender muito CSS, você pode mudar a aparência do seu site Simple sobrescrevendo algumas variáveis. +- **[Básico de CSS](/basico-de-css)**. Esta missão extra ensina a fazer uma página bem desenhada do zero, usando CSS. +- **[HTML reutilizável com PHP](/html-reutilizavel-com-php)**. Vamos ver como reutilizar pedaços de HTML — como um menu de navegação — usando includes do PHP. É uma introdução bem leve a sites dinâmicos. + +## Recursos deste livro + +Eu fui espalhando uns links pelo caminho, apontando para demos e documentação. Para facilitar, aqui está uma lista dos principais. + +- **[Demo da Homepage do Blake](https://demo.htmlforpeople.com/)**. Esta é a minha versão do site que este livro ensina você a fazer. Se você acompanhou e fez o seu próprio site, [eu adoraria saber](https://blakewatson.com/about/#contact-me). +- **[Código-fonte da Homepage do Blake](https://github.com/blakewatson/htmlforpeopledemo)**. Este é o repositório de código do site de demonstração. Aqui você pode navegar por todo o código e baixá-lo, se quiser. +- **[Homepage do Blake, versão PHP](https://github.com/blakewatson/htmlforpeopledemo/tree/php)**. Esta é outra versão do código-fonte, em que eu converti o site para PHP, como descrito no capítulo bônus [HTML reutilizável com PHP](/html-reutilizavel-com-php). +- **[Demo Planets of the Solar System](https://planets.htmlforpeople.com/)**. Esta é a demo da página que vamos construir no capítulo bônus [Básico de CSS](/basico-de-css). +- **[Código-fonte de Planets of the Solar System](https://github.com/blakewatson/css-basics)**. Este é o repositório de código dessa página. + +## Recursos e documentação úteis + +- **[MDN](https://developer.mozilla.org)**. Se você precisa de detalhes sobre uma tag HTML específica, uma propriedade CSS ou outra informação técnica pontual, este é o melhor lugar. O MDN é mais ou menos o manual oficial de quem faz sites. +- **[Neocities](https://neocities.org/)** e [perguntas frequentes do Neocities](https://neocities.org/contact). Eu escolhi este serviço de hospedagem no livro porque é grátis e tem um espírito parecido (criação de sites pensada em pessoas). As perguntas frequentes têm muita informação boa e uma visão do serviço, se você quiser saber mais. +- **[Tutoriais do Neocities](https://neocities.org/tutorials):** Uma lista de tutoriais e recursos publicados pelo Neocities. Dê uma olhada no [curso de HTML](https://neocities.org/tutorial/html/1) excelente deles. +- **[Simple.css](https://simplecss.org/)**. Este é o framework CSS que usamos ao longo do livro. O site tem documentação de como usar o Simple.css e uma demo de vários elementos HTML. +- **[Butterick's Practical Typography](https://practicaltypography.com/)**. Um livro excelente sobre tipografia e design. Se você tem pouco tempo, veja [Typography in ten minutes](https://practicaltypography.com/typography-in-ten-minutes.html). +- **[EntityCode](https://entitycode.com/)**. Aqui vai uma referência de _entidades HTML_ que você pode usar para reproduzir caracteres especiais e símbolos. +- **[Verificador de contraste do Coolors](https://coolors.co/contrast-checker)**. Uma ferramenta boa para garantir que as cores do texto e do fundo tenham contraste suficiente para a leitura. + +## Hospedagens para sites estáticos + +Além do Neocities, existem outras boas opções para hospedar seus sites HTML. + +- **[Yay.boo](https://yay.boo/):** Nome bobo, publicação de site realmente fácil. Você arrasta e solta uma pasta, escolhe um nome, e o site está no ar. O plano grátis coloca um link yay.boo no cantinho do site. +- ~~**[Glitch](https://glitch.com/):** Esta é uma boa opção se você quiser programar tudo direto no navegador. Monta, depois publica.~~ O [Glitch encerrou a hospedagem de apps](https://perma.cc/C5KE-CMZV) em 2025. +- **[CodePen](https://codepen.io/):** O CodePen é a alternativa ao Glitch mais amigável para iniciantes que eu conheço. A diferença é que um Pen é uma página só, e não vários arquivos que formam um site inteiro. Se você optar pelo CodePen Pro, porém, pode acessar Projects, que deixam você montar um site com várias páginas no navegador. +- **[Netlify](https://www.netlify.com/):** Mais sofisticado, mas tem um recurso de [arrastar e soltar uma pasta para publicar](https://perma.cc/W3PH-5KRS) e oferece mais funções voltadas para quem desenvolve. + +## Alternativas de editor de código + +Eu usei o [Visual Studio Code](https://code.visualstudio.com/) como editor de código ao longo deste livro. E por um bom motivo — é grátis e enormemente popular. Mas não é o único editor por aí. + +Eu uso um Mac, então não conheço tanto os editores de outros sistemas. Mas sei de alguns que você deveria conhecer e avaliar. Alguns são grátis, alguns são pagos, e alguns são as duas coisas. + +- **[Sublime Text](https://www.sublimetext.com/):** Multiplataforma, com teste grátis ilimitado (de vez em quando ele cobra para você pagar). O Sublime Text foi o padrão no desenvolvimento web até o VS Code assumir o trono. Ainda é muito bom. Super rápido e leve. O sistema de plugins/extensões é mais difícil de usar, mas você pode não precisar de nenhum se for fazer HTML/CSS básico, porque o suporte a isso já vem pronto. +- **[WebStorm](https://www.jetbrains.com/webstorm/):** Um dos vários _IDEs_ (ambientes de desenvolvimento integrado) pagos (grátis para uso não comercial) da JetBrains. É multiplataforma e tem um monte de recursos. É caro, mas tem 30 dias de teste grátis. As pessoas adoram. Eu não usei muito, então não tenho muito o que dizer, além de que a reputação é sólida. +- **[Zed](https://zed.dev/):** Multiplataforma (Mac e Linux, com Windows “em breve”) e grátis. Este parece uma mistura de VS Code e Sublime Text, e tem bastante hype no momento em que eu escrevo isto. +- **[Nova](https://nova.app/):** Só para Mac e pago (mas com teste grátis). É a sequência do Coda, um editor de web amado no Mac, do mesmo desenvolvedor (Panic). Os apps da Panic são sempre ótimos, então dê uma olhada no Nova se você usa Mac. +- **[NotePad++](https://notepad-plus-plus.org/):** Editor grátis e de código aberto para Windows. Não tenho muito o que dizer, além de que ele existe há muito tempo. +- **[BBEdit](https://www.barebones.com/products/bbedit/):** Um dos apps mais antigos do Mac que ainda é desenvolvido de fato. O BBEdit é pago, mas tem teste grátis e um modo grátis para sempre, que limita você a um conjunto específico de recursos. +- **[Glitch](https://glitch.com/):** Sim, é o mesmo listado acima em hospedagens. O Glitch é uma boa opção se você quiser trabalhar “na nuvem”. Ele oferece uma interface na web para fazer sites, incluindo criar arquivos e editar código. Tudo fica no navegador, o que é uma boa opção se você não quiser baixar e instalar coisas no computador. +- Muitos, muitos outros. São demais para listar. Mas, se nenhum destes te agradar, busque no seu mecanismo de busca favorito e se prepare para a enxurrada de resultados. + +## A seguir
A
src/11-customizing-simple-css.md
@@ -0,0 +1,243 @@
+--- +title: 'Personalizar o Simple.css' +summary: 'Aprenda a usar variáveis CSS para dar um visual novo ao seu site com Simple.css.' +permalink: 'personalizar-o-simple-css/' +originalPath: /customizing-simple-css/ +tags: chapter +layout: 'chapter.njk' +--- + +# Personalizar o Simple.css + +O Simple.css nos dá uma base para um site limpo e bonito. Mas ele também oferece um jeito de personalizar sem um monte de trabalho extra da nossa parte. Ele usa um recurso do CSS chamado _propriedades personalizadas_ (muitas vezes chamadas de _variáveis_). Essas variáveis permitem mudar cores e fontes num lugar só, com pouquíssimo código. + +## Uma espiada no Simple.css + +Vamos abrir o arquivo `simple.css` que adicionamos ao site antes, para ver quais variáveis podemos acessar. Não se assuste com a quantidade de código no arquivo. A gente só precisa de um pedacinho. No topo do arquivo, você vai ver um código parecido com o seguinte. + +```css +/* Global variables. */ +:root, +::backdrop { + /* Set sans-serif & mono fonts */ + --sans-font: -apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir, + 'Nimbus Sans L', Roboto, 'Noto Sans', 'Segoe UI', Arial, Helvetica, + 'Helvetica Neue', sans-serif; + --mono-font: Consolas, Menlo, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + --standard-border-radius: 5px; + + /* Default (light) theme */ + --bg: #fff; + --accent-bg: #f5f7ff; + --text: #212121; + --text-light: #585858; + --border: #898ea4; + --accent: #0d47a1; + --accent-hover: #1266e2; + --accent-text: var(--bg); + --code: #d81b60; + --preformatted: #444; + --marked: #ffdd33; + --disabled: #efefef; +} +``` + +Aqui já estamos entrando um pouco na sintaxe do CSS, mas talvez não seja tão assustador quanto parece. Vamos por partes. + +No CSS, o navegador ignora o texto entre `/*` e `*/`. É um jeito de escrever notas para você — ou para outras pessoas que lerem o código-fonte — chamadas de _comentários_. Neste caso, os comentários ajudam a separar o código em grupos relacionados. + +O trecho que diz `:root` significa que o bloco de código a seguir — a parte entre as chaves, `{}` — vale para a página inteira. Ignore o `::backdrop` por enquanto. + +Dentro das chaves, encontramos uma lista de _propriedades_. Já vimos propriedades CSS num capítulo anterior. Por exemplo, usamos `columns: 2` na página do currículo para organizar uma lista com marcadores em duas colunas. Nesse caso, `columns` é uma _propriedade_ e `2` é um _valor_. + +Qualquer propriedade que começa com `--` é uma _propriedade personalizada_, ou _variável_. É um jeito de reutilizar um valor em vários lugares. Por exemplo, se tivéssemos uma variável `--accent: blue`, poderíamos usar a cor `--accent` em vários elementos ao mesmo tempo. E se um dia decidíssemos mudar o destaque para outra cor, digamos `red`, poderíamos atualizar num lugar só — escrevendo `--accent: red` — e todo elemento que usa a variável `--accent` seria atualizado sozinho. + +Olhando de novo o código do Simple.css acima, vemos que temos dois grupos de variáveis. Há propriedades ligadas às fontes usadas, seguidas de uma lista de variáveis de cor que representam o que o Simple chama de “tema padrão (claro)”. + +Vamos falar de fontes depois. Primeiro, as cores. + +Neste caso, a maior parte das variáveis de cor aparece como códigos hexadecimais. Tudo o que você precisa saber sobre códigos hexadecimais é que eles são uma das várias formas de indicar uma cor no CSS. Abra quase qualquer mecanismo de busca e procure por “color picker”. Você vai encontrar um widget para escolher uma cor e pegar o código hexadecimal, junto com outros formatos. + +Beleza, então como definimos as nossas próprias cores? A gente muda aqui dentro do `simple.css`? Você _poderia_ fazer isso; funcionaria. Mas existe um jeito melhor. + +## Criar uma folha de estilo personalizada + +CSS significa _Cascading Style Sheets_ (folhas de estilo em cascata). Essa parte da _cascata_ é especialmente útil. De forma simples, isso significa que a ordem das regras CSS importa — regras que vêm depois sobrescrevem as que vieram antes. Para o nosso caso, isso significa que podemos criar o nosso próprio arquivo CSS. E, desde que o navegador o processe _depois_ do `simple.css`, as regras que escrevermos ali vão prevalecer. Então não estamos _mudando_ o `simple.css`. Estamos _sobrescrevendo_ ele. + +Crie um arquivo na pasta `assets/css` chamado `custom.css`. + +Agora vamos ligá-lo ao site. Você vai precisar fazer isso em todas as páginas, mas vamos começar pela página inicial, o arquivo `index.html` do nível mais alto. Na seção `<head>`, já estamos referenciando o `simple.css` com uma tag `<link>`. Vamos fazer o mesmo para o nosso novo arquivo `custom.css`, logo embaixo. A ordem importa aqui. Queremos que a nossa folha de estilo venha depois da do Simple, para podermos sobrescrever as variáveis dele. + +```html +<head> + <title>Blake's Homepage</title> + <meta charset="utf-8"> + + <link rel="stylesheet" href="css/simple.css"> + <link rel="stylesheet" href="css/custom.css"> +</head> +``` + +{% aside 'Observação' %} +Isto vai funcionar na página inicial, mas, nas outras páginas, lembre-se de atualizar o caminho do arquivo de acordo (vai ser o mesmo caminho do arquivo `simple.css`). +{% endaside %} + +Agora vamos adicionar algumas sobrescritas. No arquivo `custom.css`, primeiro vamos montar um bloco `:root` parecido com o do `simple.css`. Depois pegamos uma das variáveis, digamos `--bg` (a cor de _fundo_), e definimos como `red`. + +```css +:root { + --bg: red; +} +``` + +{% aside 'Observação' %} +Não há nada de mágico no nome da variável, `--bg`. Quem criou o Simple.css decidiu chamar assim, então é isso que vamos precisar usar para sobrescrever. +{% endaside %} + +Se você recarregar a página, deve ver um fundo vermelho, admitidamente horroroso. Vamos escolher uma cor melhor. Você pode buscar uma [ferramenta de escolha de cores](https://www.google.com/search?q=color+picker) na web, usar uma das muitas [cores nomeadas do CSS](https://perma.cc/JF5G-REYD) ou, se estiver usando o Visual Studio Code, usar o seletor de cores embutido passando o mouse sobre um valor de cor. + + + +Mas, antes de escolher cores, vamos falar do modo escuro. + +## Modo escuro + +O Simple já tem suporte automático aos modos claro e escuro, com base na configuração do sistema de quem visita. Você pode ter notado isso se ligou o modo escuro nas configurações do sistema. Se olharmos o arquivo `simple.css`, vemos a versão de modo escuro de todas as variáveis logo abaixo das outras que vimos antes. + +```css +/* Dark theme */ +@media (prefers-color-scheme: dark) { + :root, + ::backdrop { + color-scheme: dark; + --bg: #212121; + --accent-bg: #2b2b2b; + --text: #dcdcdc; + --text-light: #ababab; + --accent: #ffb300; + --accent-hover: #ffe099; + --accent-text: var(--bg); + --code: #f06292; + --preformatted: #ccc; + --disabled: #111; + } + /* Add a bit of transparency so light media isn't so glaring in dark mode */ + img, + video { + opacity: 0.8; + } +} +``` + +Este bloco usa um recurso do CSS chamado _media queries_. Neste caso, a regra `@media` diz que os estilos de dentro do bloco devem valer se a pessoa tiver indicado preferência pelo modo escuro. + +A primeira regra define o esquema de cores padrão como escuro e depois _redefine_ as variáveis de cor que valem para o documento raiz (ou seja, a página inteira). A segunda regra deixa imagens e vídeo um pouco transparentes, para não ficarem “tão ofuscantes no modo escuro”. + +Não sabemos se quem visita o nosso site prefere o modo claro ou o escuro. Por isso, devemos definir cores adequadas para os dois modos. Se quiser, você pode copiar esses dois blocos de código (o bloco “Global variables” e o bloco “Dark theme”) do `simple.css` para o seu `custom.css` e então mudar os valores de cor como preferir. Ou pode especificar só as que quiser mudar. De qualquer forma, garanta que as cores certas estejam na seção certa. + +## Um exemplo de personalização + +Para o tema claro padrão, eu decidi ficar só com cores nomeadas do CSS, como um exercício divertido. Você pode pensar nas cores nomeadas como uma caixa de giz de cera — tem muitas, mas elas não representam todas as cores possíveis. Ainda assim, são um jeito fácil de se referir a cores de forma humana. + +Por outro lado, as cores do modo escuro pediram um toque mais fino. Eu usei o seletor de cores embutido do Visual Studio Code para escolher algumas cores específicas. Elas aparecem no formato `rgb` aqui porque foi o que o editor fez por padrão quando eu selecionei as cores. + +Este é o código que eu coloquei no meu `custom.css`. + +```css +:root { + --bg: mintcream; + --border: darkslategray; + --accent-bg: honeydew; + --text: darkslategray; + --accent: mediumvioletred; + --accent-hover: mediumvioletred; + --marked: mediumspringgreen; +} + +/* Dark theme */ +@media (prefers-color-scheme: dark) { + :root, + ::backdrop { + color-scheme: dark; + --bg: rgb(17, 18, 18); + --border: rgb(80, 90, 90); + --accent-bg: rgb(35, 35, 36); + --text: ghostwhite; + --accent: lightskyblue; + --accent-hover: lightblue; + --marked: gold; + } +} +``` + +Aqui vai uma prévia lado a lado da aparência da página de índice do blog nos modos claro e escuro. + + + +## Escolher cores acessíveis + +Algumas combinações de cor podem deixar o texto difícil de ler por causa do pouco contraste. Você quer garantir bastante contraste entre a cor do texto e a cor do fundo. + +Você pode confiar nos olhos até certo ponto, mas cada pessoa é diferente. Felizmente, existem padrões sobre quanto contraste o texto deve ter. Você pode usar um [verificador de contraste como este](https://perma.cc/KGB2-G7Y4). Dê duas cores a ele, e ele diz se o contraste entre elas é suficiente. + +## Mudar a fonte + +Eu passei rápido por isso antes, mas você pode ter notado algumas variáveis ligadas a fontes acima das variáveis de cor definidas no `simple.css`. Uma delas, `--sans-font`, é responsável pela maior parte do texto da página (a outra, `--mono-font`, é usada para coisas como mostrar código, como eu estou fazendo neste parágrafo). + +Se você não conhece, fontes _sans-serif_ são aquelas que não têm _serifa_, aqueles pezinhos que você encontra em outras fontes, como Times New Roman. O Simple usa a variável `--sans-font` para a maior parte do texto da página por padrão, mas podemos sobrescrever com o que quisermos. + +Primeiro, vamos falar de fontes na web. + +## Fontes na web + +Quem visita o seu site só consegue ver fontes instaladas no sistema dessa pessoa. Isso significa que, se você, quem escreve a página, especificar no CSS alguma fonte aleatória baixada de um site, _você_ vai ver essa fonte na página. Mas quem visita vai ver uma _alternativa_ (_fallback_), a menos que essa pessoa também tenha a fonte instalada. + +É por isso que, em geral, várias fontes são especificadas no CSS. Se a primeira fonte não estiver disponível no computador ou no aparelho de quem visita, o navegador tenta a próxima, e assim por diante. + +```css +body { + /* the first font needs quotes because the name includes spaces */ + font-family: "Some Rando Font", Georgia, serif; +} +``` + +A regra de estilo acima define a fonte do `<body>`. O navegador primeiro tenta usar “Some Rando Font”. Se ela não estiver disponível no aparelho de quem visita, ele tenta usar Georgia. Se _essa_ também não estiver, dissemos ao navegador para usar a fonte `serif` padrão que ele tiver. + +Aqui vai uma boa referência para encontrar [fontes comuns nos aparelhos das pessoas](https://practicaltypography.com/system-fonts.html) e ver as suas opções. Você sempre vai querer oferecer algumas alternativas decentes também. + +Às vezes, você tem uma fonte que _realmente_ quer que as pessoas vejam, mesmo sabendo que elas não vão tê-la instalada. Felizmente, existe um jeito de lidar com isso. Chamam-se _fontes da web_ (_web fonts_). Elas são complexas demais para cobrir aqui, mas eu falo delas de forma breve no próximo capítulo, [Básico de CSS](/basico-de-css). Em resumo, é um método de fornecer a fonte automaticamente a quem visita. + +## Sobrescrever a variável da fonte + +Vamos usar uma fonte serifada. Mesmo o Simple chamando a variável de `--sans-font`, não há nada de mágico no nome. Podemos definir o que quisermos. Vamos usar Georgia, que é sempre um prazer de ler. + +Podemos sobrescrever a variável `--sans-font` do Simple dentro do bloco `:root`, para que valha para a página inteira. + +```css +:root { + --sans-font: Georgia, "Times New Roman", serif; + --bg: mintcream; + --border: darkslategray; + --accent-bg: honeydew; + --text: darkslategray; + --accent: mediumvioletred; + --accent-hover: mediumvioletred; + --marked: mediumspringgreen; +} +``` + +Nós especificamos a fonte Georgia, mas também oferecemos duas alternativas. Colocamos Times New Roman como segunda opção. Observe que esta precisa ir entre aspas porque o nome tem espaços. + +Usamos uma palavra-chave do CSS, `serif`, para a terceira opção. Isso diz ao navegador para usar a fonte serifada padrão dele, seja qual for. Muitas vezes, vai ser Times New Roman. Outras palavras-chave que você tem aqui são `sans-serif`, `monospace` e `cursive`, [entre outras](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#syntax) + +Aqui vai um dos posts do blog composto em Georgia. + + + +## Deixe com a sua cara + +Eu escolhi o Simple.css para este livro porque ele deixa o HTML bonito sem trabalho extra. Mas também escolhi porque ele pode ser personalizado com algumas variáveis CSS. Mesmo sendo só cores e fontes, as possibilidades de deixar o seu site único são infinitas. + +Eu te animo a explorar o mundo da cor e experimentar combinações diferentes. No próximo capítulo bônus, eu cubro ainda mais CSS, para você ir além do Simple e escrever os seus próprios estilos. + +## A seguir
A
src/12-css-basics.md
@@ -0,0 +1,716 @@
+--- +title: 'Básico de CSS' +summary: 'Aprenda a criar uma página limpa e bem desenhada do zero, escrevendo o seu próprio CSS.' +permalink: 'basico-de-css/' +originalPath: /css-basics/ +tags: chapter +layout: 'chapter.njk' +--- + +# Básico de CSS + +Neste capítulo, não vamos usar o nosso site com Simple.css. Vamos escrever os nossos próprios estilos, e para isso eu quero usar uma página mais simples. Você pode aplicar o que aprender aqui ao seu site Simple. Mas, neste capítulo, eu quero mostrar como começar do zero para fazer uma página bonita. + +Vamos olhar especificamente o estilo de elementos tipográficos, para fazer uma página agradável de ler. Mas o CSS pode fazer muito, muito mais. Todos os designs sofisticados que você está acostumado a ver em páginas pela web são feitos com CSS. É uma ferramenta potente. Se este capítulo te der gosto pelo assunto, eu te animo a explorar o CSS além do que cobrimos aqui. + +## Apresentando os planetas do sistema solar + +Eu montei esta página HTML bem direta, que usa alguns elementos tipográficos e é um bom ponto de partida para aplicar estilos. Você pode usar o conteúdo que quiser, se tiver algo em mente. Mas também pode usar a mesma página HTML que eu vou usar. + +Você pode ver o código-fonte no navegador, com o [comando de ver o código-fonte](https://perma.cc/3WP3-R9XL), ou conferindo o [código no GitHub](https://github.com/blakewatson/css-basics). E você pode [ver o resultado final aqui](https://planets.htmlforpeople.com/), se quiser uma espiada do que vai ficar. + +Esta página apresenta os planetas do sistema solar e dá um pouco de informação sobre cada um. É super simples e básica de propósito. É um texto de preenchimento que eu não pretendo que ninguém leia a sério (mas as informações estão corretas, até onde eu sei). + +## Ponto de partida + +Eu fiz um `index.html` e coloquei o código a seguir. Ele assume que você tem um `styles.css` no mesmo diretório. Também assume que você tem uma imagem, `PIA06193~large.jpg`, no mesmo diretório. Você pode pegar esta imagem no [site da NASA](https://perma.cc/76GH-PWHQ). + +<details> + <summary>Abra para ver o código HTML completo</summary> + +```html +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="UTF-8"> + <title>Planets of the Solar System</title> + <link rel="stylesheet" href="styles.css"> + </head> + <body> + <main> + <h1>Planets of the Solar System</h1> + + <p class="intro"><span class="caps">Our solar system</span> is a vast and fascinating place, consisting of the Sun and the various celestial bodies that orbit it, including eight major planets. Each planet offers unique characteristics and features. In this article, we will explore the distinctive attributes of each planet, providing an overview of what makes them unique (and learn a little <abbr title="Cascading style sheets">CSS</abbr> while doing it).</p> + + <h2>Mercury</h2> + <p> + Mercury is the closest planet to the Sun and the smallest planet in our + solar system. It has a very thin atmosphere and its surface is covered + with craters. + </p> + + <h2>Venus</h2> + <p> + Venus is the second planet from the Sun and is known for its thick, + toxic atmosphere and extreme surface temperatures. It's often called + Earth's "sister planet" because of their similar size and composition. + </p> + + <h2>Earth</h2> + <p> + Earth is the third planet from the Sun and the only known planet to + support life. It has a diverse climate and surface, with large bodies of + water, mountains, and forests. + </p> + <blockquote> + <p> + The Earth is a very small stage in a vast cosmic arena. Think of the + rivers of blood spilled by all those generals and emperors so that in + glory and triumph they could become the momentary masters of a + fraction of a dot. + </p> + <cite>— Carl Sagan</cite> + </blockquote> + + <h2>Mars</h2> + <p> + Mars, the fourth planet from the Sun, is often called the "Red Planet" + due to its reddish appearance. It has the largest volcano and canyon in + the solar system. + </p> + + <h2>Jupiter</h2> + <p> + Jupiter is the fifth planet from the Sun and the largest in the solar + system. It has a Great Red Spot, which is a giant storm, and dozens of + moons. + </p> + + <h2>Saturn</h2> + <p> + Saturn, the sixth planet from the Sun, is famous for its extensive ring + system. It's the second-largest planet in the solar system. + </p> + + <figure> + <img src="PIA06193~large.jpg" alt="This grand mosaic consists of 126 images acquired in a tile-like fashion, covering one end of Saturn's rings to the other and the entire planet in between."> + + <figcaption> + Source: <a href="https://images.nasa.gov/details/PIA11141">https://images.nasa.gov/details/PIA11141</a> + </figcaption> + </figure> + + <h2>Uranus</h2> + <p> + Uranus is the seventh planet from the Sun and has a unique blue-green + color due to methane in its atmosphere. It rotates on its side, making + it unique among the planets. + </p> + + <h2>Neptune</h2> + <p> + Neptune is the eighth and farthest known planet from the Sun in our + solar system. It's known for its deep blue color and strong winds, some + of the fastest in the solar system. + </p> + + <h2>Additional Resources</h2> + <p> + For more information about the planets, visit the + <a href="https://solarsystem.nasa.gov/planets/overview/" + >NASA Solar System Exploration</a + > + website. + </p> + + <h2>Other Major Bodies</h2> + <ul> + <li>Pluto</li> + <li>Ceres</li> + <li>Haumea</li> + <li>Makemake</li> + <li>Eris</li> + <li>Ganymede</li> + <li>Titan</li> + <li>Europa</li> + </ul> + + <h2>Sample Code</h2> + <pre><code>function getPlanetInfo(planet) { + const planets = { + Mercury: 'The smallest planet and closest to the Sun.', + Venus: 'Known for its thick, toxic atmosphere.', + Earth: 'The only planet known to support life.', + Mars: 'The Red Planet with the largest volcano.', + Jupiter: 'The largest planet with a Great Red Spot.', + Saturn: 'Famous for its ring system.', + Uranus: 'Unique for its sideways rotation.', + Neptune: 'Known for its deep blue color and strong winds.' + }; + return planets[planet] || 'Planet not found'; + +}</code></pre> +</main> + + <footer> + <p> + A demo website for learning CSS. Part of <a href="https://htmlforpeople.com/">HTML for People</a> by <a href="https://blakewatson.com/">Blake Watson</a>. Check out the <a href="https://github.com/blakewatson/css-basics">source code on GitHub</a>. + </p> + + </body> +</html> +``` +</details> + +Como o arquivo `styles.css` está vazio, só temos os estilos padrão do navegador. É assim que fica: + + + +O bom e velho Times New Roman e linhas de texto que ocupam a largura inteira da janela do navegador. Não fica grande coisa, mas tem algo gostoso e simples nisso. E, o mais importante, não está quebrado. Muitos sites vão longe demais, com designs exagerados, megabytes de imagens e JavaScript, e comportamentos hostis a quem visita (sabe, tipo: “eu vi que você só leu duas frases deste artigo, mas eu sei que você está morrendo de vontade de assinar a minha newsletter, então deixa eu te mostrar este pop-up gigante”). + +Então vamos nos imaginar um tipo de médicos da web. Primeiro, não vamos fazer mal. Vamos melhorar a leitura da página e deixá-la bonita (bem, o que _eu_ acho bonito, de qualquer forma — sinta-se à vontade para divergir e adicionar os seus próprios estilos conforme formos). Mas vamos evitar qualquer coisa tão drástica que deixe a página mais difícil de ler do que está agora. + +## A tag style + +Podemos escrever CSS direto no arquivo `index.html` usando uma tag HTML especial, `<style>`. Podemos colocar a tag `<style>` dentro da seção `<head>` do arquivo. Assim: + +```html +<!DOCTYPE html> +<html> + <head> + <title>My website</title> + <meta charset="utf-8"> + + <style> + CSS code goes here + </style> + </head> + + <body> + ... + </body> +</html> +``` + +Isso é perfeitamente válido. Mas, se você tiver mais de uma página no site, teria de copiar e colar a tag `<style>` em cada página para ter os mesmos estilos em todas. Em vez disso, é comum colocar todo o CSS num arquivo separado e então _ligar_ esse arquivo a cada página com uma tag `<link>` na seção `<head>` do site. + +```html +<link rel="stylesheet" href="styles.css"> +``` + +## Primeiros passos para melhorar a página + +Se você ainda não fez, crie um arquivo `style.css`. É aqui que vamos escrever todo o nosso CSS personalizado. Se você não estiver usando o meu HTML de partida, vai precisar adicionar a tag `<link>` na seção `<head>` da página para ligar os estilos à página, como descrito acima. + +Dá para conquistar ganhos grandes logo de cara, com só algumas linhas de CSS. Por exemplo, um problema é que a página fica larga demais numa janela de navegador no desktop. Linhas longas de texto são difíceis de ler. Vamos corrigir isso dando à página uma largura máxima. Segundo o [Butterick's Practical Typography](https://practicaltypography.com/line-length.html), devemos caber entre dois e três alfabetos numa linha. Eu vou deixar com 65 _caracteres_ de largura. + +```css +main { + max-width: 65ch; +} +``` + +Esta _regra_ CSS mira o elemento `<main>` da nossa página e instrui ele a nunca passar da largura que declaramos. + +{% aside 'Observação' %} +Beleza, [não é estritamente 65 caracteres de largura](https://perma.cc/66QM-Q2AF). A unidade `ch` no CSS se baseia na largura do caractere `0` (zero) na fonte dada. Então, na verdade, estamos dizendo: “não deixe a largura da página passar de 65 caracteres `0`”. +{% endaside %} + +Ignorando a imagem gigante de Saturno — com a qual vamos lidar daqui a pouco — já ficou bem melhor. Mas o gosto moderno prefere uma página centralizada, então vamos fazer isso enquanto estamos nisso. + +```css +main { + margin-inline: auto; + max-width: 65ch; +} +``` + +Em idiomas da esquerda para a direita, como o português, `margin-inline` é a margem horizontal, ou esquerda e direita. Ao definir como `auto`, estamos dizendo: “não me importa quão larga seja a margem esquerda e a direita, só deixe iguais”. O navegador sabe quão larga queremos a página, então calcula a margem necessária para deixar igual dos dois lados, centralizando a página. + +Também temos um elemento `<footer>` que vive fora do elemento `<main>`, então vamos estilizá-lo à parte, com a mesma largura e margem. + +```css +footer { + margin-inline: auto; + max-width: 65ch; +} +``` + +E, para fechar esta linha de raciocínio, vamos impedir que a imagem de Saturno estoure para fora da página. + +```css +img { + max-width: 100%; +} +``` + +O `max-width` pode ser declarado como uma porcentagem do elemento que contém. Definir como 100% significa: “não deixe elementos de imagem ficarem mais largos do que os seus contêineres”. + +E agora a nossa página está bem mais agradável. + + + +## Anatomia de uma regra CSS + +Olhe uma das nossas regras até agora. Esta regra limita a largura das imagens à largura dos seus contêineres. + +```css +img { + max-width: 100%; +} +``` + +O que acontece aqui é uma coisa em duas partes. Primeiro, especificamos quais elementos da página queremos afetar. Essa é a parte antes das chaves (`{}`). Chama-se _seletor_, porque _seleciona_ elementos da página para mudar. + +A parte dentro das chaves é onde colocamos as propriedades que queremos mudar. Cada declaração consiste numa _propriedade_ e num _valor_. Neste caso, há uma declaração. A propriedade é `max-width`, e o valor é `100%`. + +## Tamanho do texto, altura da linha e espaço entre elementos + +O tamanho padrão da fonte é um pouco pequeno. Vou mirar o elemento `html` (ou seja, o documento inteiro) e definir `font-size` e `line-height`. + +```css +html { + font-size: 20px; + line-height: 1.45; +} +``` + +Uma das unidades que podemos usar para dimensionar coisas é a unidade de pixel, `px`. Estou descobrindo agora que `1px` equivale a 1/96 de uma polegada (embora isso varie com a densidade de pixels da tela). Hein. A gente nunca para de aprender. + +Há todo tipo de jeito de definir o tamanho do texto. Vamos ver mais alguns daqui a pouco. + +Vou definir o `line-height` usando um valor sem unidade de `1.45`. É um número que fica bonito. Consulte o [Butterick's Practical Typography](https://practicaltypography.com/line-spacing.html) e o seu próprio olho para achar uma boa altura de linha para a sua fonte específica. Estou usando um número sem unidade em vez de algo como `px` por causa de [como os elementos filhos herdam o valor](https://perma.cc/7YVZ-53XL), mas você não precisa se preocupar demais com isso agora. + +Seguindo, eu gostaria de garantir que os elementos tenham espaçamento igual entre eles. Vou mirar tudo o que está dentro do elemento `<main>` usando um seletor universal, o asterisco (`*`). + +```css +main * { + margin-block-start: 0; + margin-block-end: 1rem; + /* or we could use the shortcut syntax like this */ + margin-block: 0 1rem; +} +``` + +Um seletor pode ser uma cadeia de coisas. Por exemplo, `main p` seleciona todo elemento `<p>` _dentro_ do elemento `<main>`. Mas eu quero mirar _tudo_ no elemento `<main>`, então uso o asterisco. + +Estou definindo a margem acima e abaixo de cada elemento. De forma parecida com `margin-inline`, que controla o espaço horizontal ao redor dos elementos, `margin-block` controla o espaço vertical ao redor dos elementos (em idiomas da esquerda para a direita). Estou definindo a margem acima dos elementos como `0` e a margem abaixo deles como `1rem`. O `rem` é uma unidade igual ao tamanho da fonte do **r**oot el**em**ent (o elemento `<html>`). Como eu defini o tamanho da fonte raiz como `20px`, é isso que o valor de `1rem` se torna. + +O legal da unidade `rem` é que, ao nos deixar basear valores no tamanho da fonte do documento, ela deixa os designs com uma sensação mais coesa. + +O nosso texto está bonito. + + + +Nada contra o Times New Roman, mas ele tem uma cara muito… _padrão_. Dá para fazer melhor. + +## Instalar webfonts + +Você só pode usar uma fonte se quem visita tiver ela disponível no aparelho. Embora existam algumas [fontes de sistema comuns](https://practicaltypography.com/system-fonts.html) e [fontes padrão comuns](https://perma.cc/9BMG-EMTU), temos outra opção para personalizar a fonte. _Fontes da web_ (_web fonts_) são aquelas disponibilizadas ao serem baixadas junto com o resto do seu site. Além do documento, dos arquivos CSS, dos arquivos JavaScript, das imagens e por aí vai, fontes personalizadas também podem ser baixadas. + +Fontes da web precisam estar num formato específico, e ser _instaladas_ de um certo jeito, por falta de termo melhor. Em geral, as pessoas usam um serviço como [Google Fonts](http://fonts.google.com/) (grátis) ou [Adobe Fonts](https://fonts.adobe.com) (pago). Há [várias](https://typography.com/webfonts) [opções](https://typenetwork.com/), inclusive hospedar as fontes no seu próprio servidor, ao lado dos outros arquivos do site. Só garanta que a licença da fonte cubra isso. + +Para simplificar, vamos usar algumas fontes do Google Fonts. Vá até fonts.google.com. Busque “Oswald” e selecione nos resultados. Depois clique em _Get Font_. + + + +Depois de selecioná-la, não baixe nada ainda. Busque “source sans”. Source Sans 3 é a versão disponível no momento em que eu escrevo. Selecione e clique em _Get Font_. + +Quando as duas fontes estiverem selecionadas, clique em _Get embed code_. Estamos procurando o bloco rotulado _Embed code in the `<head>` of your html_. + + + +Copie e cole o código de incorporação na seção `<head>` do seu site. + +```html +<head> + <meta charset="UTF-8"> + <title>Planets of the Solar System</title> + + <link rel="preconnect" href="https://fonts.googleapis.com"> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> + <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet"> + + <link rel="stylesheet" href="styles.css"> +</head> +``` + +Adicione uma declaração `font-family` ao bloco `html` para conferir se está funcionando. + +```css +html { + font-family: 'Source Sans 3', sans-serif; + font-size: 20px; + line-height: 1.45; +} +``` + +Isso vai definir a fonte para o documento inteiro. O navegador primeiro tenta Source Sans 3. Se, por algum motivo, essa fonte não estiver disponível (se, por exemplo, o Google Fonts estiver fora do ar), então `sans-serif` instrui o navegador a usar qualquer fonte sans-serif disponível. Você pode colocar outras fontes alternativas na _pilha de fontes_. É só separar com vírgulas, como você vê acima. + +Recarregue a página, e você deve ver a fonte nova! Mas vamos fazer uma configuração melhor e integrar as duas fontes direito. + +## Configurar cores e variáveis + +Se você leu o capítulo [Personalizar o Simple.css](/personalizar-o-simple-css), vai lembrar que ele usava variáveis CSS para controlar cor e fontes. Vamos fazer isso aqui também. Isso vai facilitar personalizar depois (o que você pode querer fazer se não gostar das minhas escolhas). + +```css +:root { + --text-color: #303036; + --muted-text-color: #5e5e67; + --heading-color: #cd2807; + --link-color: #028090; + --background-color: #fffdf7; + + --heading-font: 'Oswald', sans-serif; + --body-font: 'Source Sans 3', sans-serif; +} +``` + +Você pode nomear as variáveis como quiser, desde que comecem com `--`. Aqui, estou definindo várias cores e algumas fontes. + +Depois de definidas essas variáveis, posso usá-las para aplicar as fontes e a cor ao texto. + +```css +html { + font-family: var(--body-font); + font-size: 20px; + line-height: 1.45; + color: var(--text-color); + background-color: var(--background-color); +} +``` + +Use a função `var` para usar as variáveis que criamos. + +## Estilos dos títulos + +Estou usando um `<h1>` para o título da página e elementos `<h2>` para os subtítulos. Vamos mirar esses e aplicar alguns estilos. + +```css +h1 { + border-block-start: 10px solid var(--heading-color); + margin-block-start: 4rem; + margin-block-end: 2rem; + font-family: var(--heading-font); + font-weight: normal; +} + +h2 { + margin-block-start: 1.5rem; + margin-block-end: 0.5rem; + font-family: var(--heading-font); + font-size: 1.2em; + font-weight: normal; + color: var(--heading-color); +} +``` + +Estou fazendo várias coisas aqui. Estou adicionando um pouco de margem extra acima dos elementos `<h2>` e um bom tanto de espaço extra acima do `<h1>`. + +Eu gosto de como a Oswald — a fonte que estou usando para títulos — fica sem negrito. Então estou definindo `font-weight` como `normal` em vez de `bold`, que é o padrão dos títulos. + +{% aside 'Observação' %} +Estamos usando [fontes variáveis](https://perma.cc/A75H-V4HJ), então temos mais opções de peso do que `normal` ou `bold`. Experimente 300, 500, 900 [e por aí vai](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight). +{% endaside %} + +Para o `<h1>`, estou mantendo o `font-size` padrão. Para o `<h2>`, estou definindo o `font-size` como `1.2em`, ou seja, 1,2 vezes o _tamanho de fonte atual_. + +Algumas mudanças tipográficas transformaram a nossa página, e ela tem uma cara completamente diferente. + + + +Quase poderíamos parar aqui. Não tem nada de tão terrível acontecendo. Mas vamos estilizar alguns dos elementos que ainda não cobrimos. + +## Links + +Se você estiver usando o meu documento HTML, vai notar alguns hiperlinks, ou tags `<a>`. Um aponta para a fonte da imagem de Saturno que eu usei, e o outro para o site NASA Solar System Exploration. O resto está no rodapé do site. + +Vamos estilizá-los um pouco. Eu escolhi uma cor azul-esverdeada e defini como variável, o que vimos antes. + +```css +:root { + /* ... other code ... */ + + --link-color: #028090; + + /* ... other code ... */ +} +``` + +Vou usar isso para definir a cor de todos os elementos `<a>`, assim: + +```css +a { + color: var(--link-color); +} +``` + +Não é uma regra rígida, mas a maioria das pessoas associa texto azul sublinhado a um link clicável. Eu decidi não me afastar demais disso. Mas eu gostaria de adicionar um efeitozinho em que o sublinhado some quando eu passo o mouse por cima. + +Vamos usar o seletor de _pseudo-classe_ `:hover` para montar isso. Esses seletores costumam ser usados para estilizar elementos em estados diferentes — por exemplo, um campo de texto desativado (`:disabled`) ou, no nosso caso, um link sobre o qual o ponteiro do mouse está passando. + +```css +a:hover { + text-decoration: none; +} +``` + +A propriedade que queremos é `text-decoration`. Por padrão, os links têm um `text-decoration` de `underline`. Você tem [algumas opções](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration) aqui, mas eu vou de `none`. + +Isso nos dá uma interação visual sutil com o link. + +<video controls> + <source src="/assets/video/css-basics-1.mp4" type="video/mp4"> + Seu navegador não tem suporte à tag de vídeo. O vídeo mostra uma gravação da tela em que eu passo o mouse sobre o link. O sublinhado some e volta conforme eu faço isso. +</video> + +## Abreviações + +Falando de efeitos ao passar o mouse, há um que você pode não ter notado. Se olhar o HTML no primeiro parágrafo, vai encontrar a seguinte frase. + +```html +In this article, we will explore the distinctive attributes of each planet, +providing an overview of what makes them unique (and learn a little +<abbr title="Cascading style sheets">CSS</abbr> while doing it). +``` + +A tag `<abbr>` ajuda quem visita a saber o que certas abreviações ou siglas significam. Quando você passa o mouse sobre o termo CSS no documento, recebe uma dica útil mostrando o significado. Você coloca a abreviação dentro das tags e usa o atributo `title` para o texto completo. + +Vamos dar um `text-decoration` para sugerir que dá para interagir com isso. + +```css +abbr { + text-decoration: underline; + text-decoration-style: dotted; + text-decoration-color: var(--heading-color); + text-decoration-thickness: 2px; +} +``` + +Estamos dando um sublinhado, como os links têm por padrão. Mas vamos deixar na cor vermelha que estamos usando para títulos e usar o estilo `dotted`, para ajudar a diferenciar de um link. Eu decidi aumentar um pouco a espessura também, para ficar mais fácil de ver. + +## Citações em bloco + +Eu seria irresponsável se não citasse Carl Sagan num artigo sobre o sistema solar — mesmo que isto seja só uma demo técnica. Então incluí um trecho épico dele na seção sobre a Terra. + +Já está servindo como está — já vem recuado e parece uma citação. Mas dá para melhorar, com certeza. Vou te mostrar o código e depois explicar o que estou fazendo. + +```css +blockquote { + margin-inline: 1.5rem 0; + border-inline-start: 4px solid var(--heading-color); + padding-inline: 1rem; + font-size: 0.9rem; + color: var(--muted-text-color); +} +``` + +Eu quero controlar o recuo e deixá-lo mais consistente, baseando-o no tamanho da fonte do documento. Em idiomas da esquerda para a direita, `margin-inline` controla as margens esquerda e direita. Estou fornecendo dois valores, `1.5rem` e `0`, para especificar as margens esquerda e direita, respectivamente. A margem esquerda vai ser 1,5 vezes o tamanho da fonte do documento, e vamos remover a margem direita por completo. + +Um estilo talvez comum demais de um elemento `<blockquote>` é dar a ele uma borda esquerda grossa que usa um destaque. Não vejo motivo para ser inconformista aqui, então vou colocar uma borda esquerda usando `border-inline-start`. Lembre-se: `inline` se refere ao eixo horizontal. E `start` significa o primeiro (que é a _esquerda_ para mim; `end` seria o da direita). + +Vou definir como uma linha sólida de `4px` de largura, usando a cor dos títulos, que estabelecemos como a cor de destaque da nossa paleta. + +Mas temos um problema. Se parássemos aí, teríamos uma borda encostada no texto. Eca. + + + +Felizmente, podemos corrigir isso adicionando um pouco de `padding`. Vou te dar uma introdução rápida ao [_modelo de caixa_](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model). Todo elemento tem espaço do lado de fora (margem), espaço ao redor do lado de dentro (preenchimento) e uma camada opcional que separa os dois (a borda). + +Com esse conhecimento, vamos adicionar algum espaço _dentro_ do elemento, o que vai afastar o conteúdo da borda. Vamos deixar o preenchimento esquerdo e o direito iguais, definindo `padding-inline` com só um valor, `1rem`, que equivale ao tamanho da fonte do documento. + +Por fim, vou arredondar o efeito deixando o tamanho da fonte um pouco menor e a cor do texto um pouco mais clara. O resultado final é uma citação em bloco bonita, com um toque de estilo. + + + +Eu desenhei este estilo de citação para caber na maioria dos casos, mas você poderia ir em outra direção — chamadas curtas com texto grande e itálico, por exemplo. + +## Listas + +Vamos resolver rápido a lista com marcadores de Plutão e companhia. Vamos dar à lista um pouco de recuo, como é comum em listas com marcadores. Lembre-se: o HTML também tem listas numeradas. Não estamos usando uma nesta página (se você estiver usando a minha marcação HTML), mas podemos escrever o estilo para os dois tipos de lista. + +Você já sabe que o seletor mira os elementos que queremos estilizar. Mas você também pode ter vários seletores! Podemos mirar o elemento `<ul>` e o elemento `<ol>` e dar o mesmo recuo aos dois, fazendo o seguinte. + +```css +ul, ol { + padding-inline-start: 1.5rem; +} +``` + +Você adiciona vários seletores separando-os com uma vírgula. Isso cria uma _lista de seletores_. O preenchimento que estamos usando para o efeito de recuo vai ser aplicado a _listas não ordenadas_ (com marcadores) e _listas ordenadas_ (numeradas). + +Vamos também ajustar o espaço entre os _itens de lista_ individuais (elementos `<li>`). Eu gosto de usar a metade do que uso para parágrafos, porque quero os itens de lista mais juntos do que os parágrafos, mas ainda com um pouco de espaço entre eles. Como usei `1rem` para espaçar os parágrafos e outros elementos, vou usar a metade disso, `0.5rem`, para a margem de baixo. + +```css +li { + margin-block: 0 0.5rem; +} +``` + +Lembre-se: `margin-block` é a margem de cima e de baixo num idioma da esquerda para a direita, como o português. Podemos definir os dois valores ao mesmo tempo. O trecho acima equivale a: + +```css +li { + margin-block-start: 0; + margin-block-end: 0.5rem; +} +``` + +Isso significa que, em idiomas da esquerda para a direita, a margem acima do item de lista é zero, e a margem abaixo é uns dez pixels (`0.5rem` significa 0,5 vezes o tamanho da fonte do **r**oot el**em**ent, que definimos como `20px`). + +O espaçamento deve estar bem bonito agora, mas vamos fazer uma coisa que deixaria designers web dos anos 2000 com inveja. Vamos mudar a cor dos marcadores. Isso era complicado, mas agora é moleza. + +```css +li::marker { + color: var(--heading-color); +} +``` + +O pedaço `::marker` se chama _pseudo-elemento_, porque representa um pedaço de um elemento HTML. O `::marker` é uma parte do _item de lista_, ou elemento `<li>`. Ele contém o marcador (ou o número) do item. Podemos mirá-lo com o nosso seletor e mudar a cor para o vermelho dos títulos. + + + +Ficou bonito! + +## Texto pré-formatado + +Na maior parte do tempo, nos nossos documentos HTML, não nos importamos em preservar o espaçamento exato de tudo. Na verdade, isso seria contraproducente, porque em geral recuamos o HTML ou incluímos linhas vazias para deixar o código mais legível. Mas, às vezes, queremos mostrar o texto exatamente como está formatado. Exemplos incluem arte ASCII e código de computador. + +Em geral, mostramos esse tipo de texto com a tag `<pre>` no HTML. Ela preserva todo o espaçamento e usa uma fonte monoespaçada para deixar tudo consistente. Muitas vezes é combinada com a tag `<code>` para indicar que o texto é código de computador. Eu incluí um pouco de código JavaScript relacionado a planetas como exemplo. + +Vamos estilizar a tag `<pre>` assim. + +```css +pre { + padding: 1rem; + background-color: #edebe7; + border-radius: 4px; + overflow-x: auto; + font-size: 0.75rem; +} +``` + +Queremos que o código apareça como se estivesse dentro de um contêiner, então vamos dar preenchimento o tempo todo ao redor. Em seguida, vamos definir uma cor de fundo clara, só o bastante visível contra o fundo da página, mas não tão escura a ponto de prejudicar o contraste do texto. Caixas de canto vivo parecem um pouco antinaturais, então vamos adicionar um `border-radius` pequeno, que é só um termo chique para quanto queremos arredondar os cantos. + +Poderíamos ter linhas longas de código, então precisamos especificar o que deve acontecer se uma linha transbordar pela lateral do contêiner. Neste caso, vamos definir como `auto`, o que faz o navegador mostrar uma barra de rolagem horizontal no elemento, se precisar. + +Por fim, código monoespaçado pode parecer grande, então vamos baixar o tom dizendo que deve ter três quartos do tamanho do texto padrão. + + + +## Melhorar o estilo das imagens + +Aqui vai como a imagem de Saturno está agora. + + + +Não está tão ruim, mas parece que a tag `<figure>` está adicionando margem dos dois lados. Eu quero que a imagem ocupe a largura toda. Também quero que a legenda da foto fique menor. + +```css +figure { + margin-inline: 0; +} + +figure img { + display: block; + margin-inline: auto; + border-radius: 4px; +} + +figcaption { + margin-block-start: 0.5rem; + font-size: 0.8rem; +} +``` + +Vamos remover a margem em linha do `<figure>`. Depois vamos mirar imagens que estão dentro de figures (só temos uma, mas isso pode ser um padrão legal se adicionarmos mais) e fazer o seguinte: + +- Definir `display` como `block`. Imagens vêm como `inline` por padrão, mas o comportamento de `block` funciona mais como você esperaria de uma imagem assim. +- Definir a margem em linha como `auto`, caso usemos uma imagem menor do que a largura da página — nesse caso, ela fica centralizada. +- Definir `border-radius` como `4px` arredonda os cantos da imagem só um pouquinho. +- Por fim, vamos reduzir a margem acima da legenda e reduzir o `font-size` para 80% do tamanho da fonte do documento. + + + +Ficou chique! Ajustes pequenos podem fazer uma diferença grande. + +## O rodapé + +Já temos alguns estilos de rodapé — antes, definimos a largura e garantimos que ficasse centralizado. Mas podemos melhorar dando a ele espaço para respirar, uma bordinha no topo, texto menor e uma cor de texto mais suave. + +```css +footer { + margin-block-start: 3rem; + margin-inline: auto; + padding-block: 1.5rem 3rem; + border-block-start: 2px solid var(--heading-color); + max-width: 65ch; + color: var(--muted-text-color); +} +``` + +Um pouco disso já deve começar a parecer familiar. Estamos criando alguma margem acima do elemento com `margin-block-start`. Estamos adicionando uma borda de `2px` de largura acima do rodapé, usando o nosso vermelho de títulos de sempre. Usando `padding-block`, estamos adicionando algum espaço entre o texto e a borda, e um bom pedaço de preenchimento embaixo para dar folga na parte de baixo da página. Por fim, vamos usar a mesma cor de texto suave que usamos na citação em bloco. + +Como já adicionamos a margem que queremos no próprio elemento `<footer>`, vamos remover toda a margem das coisas _dentro_ do rodapé. Vamos usar o nosso amigo, o seletor universal (`*`). + +```css +footer * { + margin: 0; + font-size: 0.9rem; +} +``` + +Este seletor vai mirar tudo o que está _dentro_ da tag `<footer>`. Vamos definir `margin` como `0` e reduzir o texto para 90% do tamanho da fonte do documento. + +## Diversão tipográfica extra + +Poderíamos parar aqui de vez, _mas_… vamos nos divertir um pouco. + +Olhando o primeiro parágrafo na marcação, eu dei a ele uma classe `intro`. Vamos dar um pouco de ênfase deixando o texto um pouco maior. + +```css +.intro { + margin-block-end: 2rem; + font-size: 1.2em; +} +``` + +Quando colocamos um ponto antes de um termo num seletor CSS, isso significa que queremos mirar todo elemento que tem aquela classe (uma classe `intro`, neste caso). Isso vai deixar o `font-size` maior do que o tamanho de texto padrão do documento. E, com a fonte maior, precisa de um pouco de margem extra embaixo. + +Beleza, mas agora vamos ficar _bem extra_. Olhe a marcação de novo, e você vai notar que eu envolvi as três primeiras palavras numa tag `<span>` com uma classe `caps`. + +```css +.caps { + text-transform: uppercase; + font-size: 0.78em; + font-weight: 600; + letter-spacing: 0.1em; +} +``` + +Isso vai nos dar aquele efeito chique de livro, em que as primeiras palavras ficam em versalete. Em geral, você ia querer usar uma fonte com [versalete de verdade](https://practicaltypography.com/small-caps.html), mas dá para fazer uma falsificação decente, já que Source Sans 3 é uma fonte variável. + +A declaração `text-transform` vai deixar todas as letras em maiúsculas. É melhor fazer isso com CSS do que digitar tudo em maiúsculas na mão, porque é mais uma coisa de estilo. Para o `font-size`, eu só fui mexendo até ficar com a cara certa. No fundo, eu queria que as maiúsculas tivessem a mesma altura das letras minúsculas do texto de introdução (ou seja, a [altura-x](https://en.wikipedia.org/wiki/X-height)). + +Para ajudar no equilíbrio, estou aumentando um pouco o `font-weight`. Além de valores como `normal` e `bold`, você pode usar os valores numéricos de 100 a 900 se a fonte suportar — e a nossa fonte variável suporta. + +Por fim, você se beneficia de aumentar o espaço entre as letras ao usar todas em maiúsculas. Estou usando a unidade `em`, que se baseia no `font-size` atual. Isso é útil porque, se você mudar o `font-size` no futuro, o espaçamento muda na mesma proporção. + + + +E aí está. Dos começos humildes como uma página _sem estilo_, com um charme simples, agora está com cara de artigo de autoridade. + +## Potencial sem limite + +Estes são só os estilos que eu escolhi com base nas minhas preferências. Você poderia ir em todo tipo de direção diferente. Não estou necessariamente tentando empurrar um estilo para você — embora eu tenha te apontado para alguns princípios tipográficos geralmente bons de seguir. Eu só queria te dar um gostinho de como você pode aplicar os seus próprios estilos a uma página. + +A mágica do CSS é que você poderia pegar o meu HTML exato — sem mudanças — e criar um design completamente diferente a partir do mesmo ponto de partida. Essa é a premissa de um experimento web chamado [CSS Zen Garden](https://csszengarden.com/), em que as pessoas enviam designs com base na mesma marcação. + +<figure> + <img src="/assets/img/css-basics-14.webp" alt="Captura de tela de duas páginas do projeto CSS Zen Garden. A página da esquerda tem um design colorido e vibrante, com uma paleta rosa, roxa e laranja. A da direita tem um design minimalista e limpo, com fundo cinza-claro e texto azul. As duas mostram o que o CSS consegue fazer no design."> + <figcaption>Estes dois designs compartilham o mesmo código HTML. <a href="https://www.youtube.com/watch?v=Iloby6ZXRjI">São a mesma foto.</a></figcaption> +</figure> + +Espero que este capítulo bônus tenha te dado um gostinho do que é possível com CSS. Assim como com HTML, até um pouco de conhecimento de CSS já vale — uma simples mudança de fonte e cor, por exemplo, pode fazer uma diferença enorme. Eu te animo a continuar explorando CSS se você quiser criar designs personalizados. É uma habilidade recompensadora de ter. + +## A seguir
A
src/13-reusable-html-with-php.md
@@ -0,0 +1,258 @@
+--- +title: 'HTML reutilizável com PHP' +summary: 'Aprenda a reutilizar elementos como menus de navegação, aproveitando a capacidade dinâmica do PHP.' +permalink: 'html-reutilizavel-com-php/' +originalPath: /reusable-html-with-php/ +tags: chapter +layout: 'chapter.njk' +--- + +# HTML reutilizável com PHP + +Ao longo deste livro, uma coisa chata que tivemos de lidar foi atualizar o menu de navegação em todas as páginas, toda vez que mudávamos o menu. Imagine se a gente não precisasse fazer isso. Em vez disso, poderíamos manter o menu num lugar só, num arquivo só, e ele apareceria como mágica em todas as páginas. + +É isso que vamos fazer neste capítulo bônus, com a ajuda do PHP. PHP significa _PHP: Hypertext Preprocessor_. Sim, [a sigla faz parte do nome](https://en.wikipedia.org/wiki/Recursive_acronym), o que é bem estranho. Mas, no começo, quando foi criado, significava Personal Home Page, porque esse era o uso inicial. + +O PHP é uma linguagem de programação que move boa parte da web, principalmente porque o CMS [WordPress](https://wordpress.org/) foi feito com ele. PHP é uma linguagem de programação de verdade, o que significa que ela consegue quase tudo. _Hypertext preprocessor_ é uma boa descrição do que ela costuma fazer. + +Quando você visita um site _estático_, como os que fizemos neste livro, o servidor te entrega o arquivo HTML que você pediu pelo URL. Quando você visita um site feito com PHP, um script PHP roda no servidor, e ele devolve algum código HTML (em geral) para o navegador. Então, nos dois casos, você recebe HTML de volta. Qual é a diferença? + +O site em PHP pode gerar HTML de forma dinâmica, com base no URL e em outros dados do pedido do navegador. Por exemplo, eu poderia ter um site em que a pessoa tem um perfil em `example.com/user/blake`. Com HTML puro, eu precisaria criar esse arquivo para cada pessoa. Com PHP, porém, eu poderia gerar a página na hora, lendo o nome de usuário no URL e montando o HTML certo para enviar de volta. + +O PHP também permite implementar recursos mais complicados, como aceitar dados de quem usa e salvar isso num banco de dados. Isso pode ser tão simples quanto um contador de visitas dinâmico, ou tão sofisticado quanto uma rede social. + +Se isso parece complicado, não se preocupe. Não vamos mergulhar fundo em montar um monte de HTML com PHP. Vamos olhar uma função específica do PHP que é útil para o nosso caso — a instrução `include`. + +## Como executar PHP + +O Neocities, o serviço que usamos para hospedar o nosso site pessoal, não deixa você executar PHP. Isso é o melhor, porque não combina com o espírito do Neocities e deixaria um serviço simples e agradável mais complicado. Felizmente, há um monte de serviços acessíveis que oferecem PHP. + +Eu recomendo o que se chama _hospedagem compartilhada_. Resumindo, isso costuma significar que o serviço cuida dos servidores e te dá, como cliente, uma pasta no servidor onde você pode enviar seus arquivos (e, em geral, acesso a vários serviços). + +{% aside 'Observação' %} +É possível executar PHP no seu computador para testar o site antes de enviá-lo a um servidor. Porém, configurar isso fica fora do alcance deste livro. + +O jeito mais fácil provavelmente é usar um app como [XAMPP](https://www.apachefriends.org/) ou [MAMP](https://www.mamp.info) (o que eu uso). Você também pode [instalar o PHP direto no sistema](https://perma.cc/MZB9-GKBD) e usar o [servidor de desenvolvimento embutido](https://web.archive.org/web/20240711042305/https://www.php.net/manual/en/features.commandline.webserver.php). +{% endaside %} + +A maioria das hospedagens compartilhadas oferece os mesmos serviços, mas aqui vão algumas das que as pessoas recomendaram quando eu [perguntei no Mastodon](https://perma.cc/WAD3-JCNX). + +- [DreamHost](https://www.dreamhost.com/) +- [SiteGround](https://www.siteground.com/) +- [Reclaim Hosting](https://www.reclaimhosting.com/) +- [InfinityFree](https://www.infinityfree.com/) + +E ainda tem o [NearlyFreeSpeech.NET](https://www.nearlyfreespeech.net/), a hospedagem [que eu uso há anos](https://blakewatson.com/journal/why-i-host-my-websites-with-nearlyfreespeech-net/). Eu não vou chamar de amigável para iniciantes, mas a interface é a mais simples, e não tem anúncio chato nem tentativa de te vender upgrade. + +Quando você tiver uma conta em uma destas (ou em outra) hospedagem, deve conseguir enviar arquivos pelo site deles ou conectando ao servidor com [FTP](https://perma.cc/P7Y7-CR6P). + +Os detalhes disso ficam fora do alcance deste livro, mas há um monte de material sobre como começar com uma hospedagem compartilhada. Algumas buscas na web devem te colocar no caminho certo. + +O legal do PHP é que é bem direto começar. Pegue uma das páginas do seu site e mude a extensão do arquivo de `.html` para `.php`. Pronto: você criou um arquivo PHP perfeitamente válido — sem mudança nenhuma. + +## Deixar uma página dinâmica + +Se tudo o que você faz é mudar a extensão do arquivo, para quem visita nada muda. A pessoa recebe o HTML como antes. Mas agora que você tem um arquivo PHP, pode colocar trechos dinâmicos na página, inserindo-os em tags PHP. + +Por exemplo, aqui vai uma página que mostra o ano atual. + +```php +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <title>My website</title> + <link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" type="text/css"> + </head> + <body> + <h1>My website</h1> + + <p>The current year is: <?php echo date('Y') ?></p> + </body> +</html> +``` + +Mesmo que você nunca mais edite este arquivo, ele vai estar sempre atualizado (enquanto o servidor estiver), porque o PHP injeta o ano no código HTML quando a página é pedida. + +Vamos detalhar a parte dinâmica. Primeiro, o código PHP é escrito entre tags PHP (`<?php` e `?>`). + +O código PHP dentro dessas tags é executado no servidor, antes de o HTML ser enviado ao navegador. A instrução `echo` é o jeito de dizer ao PHP que você quer que ele imprima alguma coisa na página. A função `date` devolve a data atual — neste caso, estamos dizendo que queremos só o ano. + +Então a função `date` roda e devolve o ano atual. Esse pedaço de texto é então processado pela instrução `echo`, que o insere no documento. + +O código PHP de verdade não é enviado de volta ao navegador, e quem visita nunca vai vê-lo. Em vez disso, vai aparecer como HTML comum, com o ano atual exibido como se você tivesse digitado. + +## Reutilizar partes do seu site + +Uma coisa que torna o PHP incrivelmente útil é a capacidade de reutilizar partes de HTML em vários lugares. + +Pense no site que eu fui montando ao longo deste livro. Ele tem esta navegação em todas as páginas (ignorando o atributo `aria-current`, que muda conforme a página em que você está). + +```html +<nav> + <a href="/index.html" aria-current="page">Home</a> + <a href="/blog/">Blog</a> + <a href="/about.html">About</a> + <a href="/resume.html">Resume</a> + <a href="/fun.html">Fun!</a> +</nav> +``` + +Precisamos manter este menu de navegação (“nav”) em todas as páginas. Não é tão ruim num site pequeno, com poucas páginas. Mas imagine se você tivesse dezenas de páginas. Se decidisse adicionar alguma coisa ao menu, precisaria voltar em _cada página_ e fazer a mesma mudança em cada lugar. Com PHP, podemos reutilizar o código do menu. + +Primeiro, crie um arquivo chamado `nav.php`. Você pode colocá-lo em qualquer lugar do projeto, mas eu vou colocar numa pasta `includes`, só para organizar. + +Copie o menu de navegação da página inicial (`index.html`) e cole o conteúdo no arquivo `nav.php`. Por enquanto, remova o atributo `aria-current="page"`, porque vamos precisar tornar essa parte dinâmica depois. + +Você deve ter um arquivo `nav.php` mais ou menos assim: + +```html +<nav> + <a href="/">Home</a> + <a href="/blog">Blog</a> + <a href="/about.php">About</a> + <a href="/resume.php">Resume</a> + <a href="/fun.php">Fun</a> +</nav> +``` + +O trecho acima não é só um recorte. É o _conteúdo inteiro_ de `nav.php`. Ao contrário de outros arquivos HTML, que precisam de um `<head>`, um `<body>` etc., arquivos PHP podem conter um fragmento de HTML. + +{% aside 'Observação' %} +No processo de converter o site de só HTML para PHP, é uma boa hora de converter todos os links internos entre páginas para URLs absolutos. Comece com uma barra `/` e escreva o caminho completo. Veja esta [seção sobre URLs relativas e URLs absolutas](/intervalo-instalar-um-servidor-local/#urls-relativas-e-urls-absolutas) do capítulo do servidor web, se você ainda não viu. +{% endaside %} + +Agora vamos usar. Renomeie `index.html` para `index.php`. Apague o bloco `<nav>` inteiro e substitua pela seguinte linha de PHP. + +```php +<header> + <?php include "includes/nav.php" ?> + + <h1>Blake’s Homepage</h1> +</header> +``` + +Quando você carregar a página, as coisas devem parecer iguais às de antes. Você deve ver o menu de navegação. Mas a mágica é que você está usando a versão em PHP. Agora você pode começar a converter o resto das páginas. + +## Converter páginas HTML em PHP + +Os passos são, em geral, os mesmos para cada página. + +1. Mude a extensão do arquivo de `.html` para `.php`. +2. Substitua a tag `<nav>` pela instrução `include` do PHP. + +Para páginas do nível mais alto, a instrução `include` do PHP vai ficar assim: + +```php +<?php include "includes/nav.php" ?> +``` + +Se você estiver editando uma subpágina (como o blog), precisa ajustar o caminho usando a sintaxe `..` para subir um nível. + +```php +<?php include "../includes/nav.php" ?> +``` + +{% aside 'Observação' %} +Se você se sentir à vontade com mais código, use uma variável embutida do PHP que aponta para o diretório de nível mais alto. O seguinte funciona em qualquer página. O ponto (`.`) aqui une as duas strings de texto. + +```php +<?php include $_SERVER['DOCUMENT_ROOT'] . "/includes/nav.php" ?> +``` + +{% endaside %} + +Quando você tiver feito isso em cada página, vai reutilizar o menu de navegação. Se precisar atualizar o menu no futuro, pode editar o `nav.php`. + +Você poderia fazer isso com outros elementos repetíveis do site. Por exemplo, boa parte da seção `<head>` é igual em todas as páginas. O rodapé pode ser o mesmo em todas as páginas. E por aí vai. + +## Bônus: destacar dinamicamente o link atual da navegação + +Quando movemos o menu para o PHP, perdemos alguma coisa. Antes, definíamos o atributo `aria-current` no link certo da navegação para indicar qual página é a atual no menu. Isso é bom para acessibilidade e também dá pistas visuais para quem enxerga. Mas como definimos a página atual se a navegação é um arquivo só? Como sabemos qual item da lista é o atual? + +Considere esta a seção bônus deste capítulo bônus (isso mesmo, um bônus dentro de um bônus). Vou apresentar alguns conceitos de programação. Só tenho um tempinho para cobri-los, porque programar em PHP ou em qualquer outra linguagem realmente fica fora do alcance deste livro. Dito isso, com um código razoavelmente leve (que eu topo de você copiar à vontade), você pode implementar o `aria-current` automaticamente. + +Primeiro, vamos recapitular o que este atributo significa. Se alguém vai à página Sobre, queremos que aquele link no menu seja estilizado para indicar que representa a página atual (ou anunciado por um leitor de tela, se a pessoa estiver usando um). Nesse caso, usaríamos o atributo `aria-current="page"`. + +Temos também outro cenário. Se alguém visita um post do blog, gostaríamos de destacar o link Blog na navegação. Não é exatamente a página atual — a pessoa não está na listagem do blog, para onde o link aponta, e sim num post individual. Ainda assim, seria legal destacar o link Blog porque ele representa a seção atual do site — o post é uma subpágina do blog. Nesse caso, poderíamos usar `aria-current="true"`. Isso é menos específico e mais correto em termos de significado. + +Beleza, então como adicionamos isso automaticamente com PHP? + +Há muitos jeitos de fazer isso — e nenhum é necessariamente mais certo do que os outros — mas aqui vai o que eu acho o menos complicado. + +Esta técnica vai exigir que a gente _chame uma função_ em cada item da navegação. Fica assim. + +```php +<nav> + <a href="/" <?php aria_current('/') ?>>Home</a> + <a href="/blog" <?php aria_current('/blog') ?>>Blog</a> + <a href="/about.php" <?php aria_current('/about.php') ?>>About</a> + <a href="/resume.php" <?php aria_current('/resume.php') ?>>Resume</a> + <a href="/fun.php" <?php aria_current('/fun.php') ?>>Fun!</a> +</nav> +``` + +Vamos precisar de uma _função_ personalizada chamada `aria_current` (eu te dou o código dessa função daqui a pouco). A função deve receber um _argumento_, que deve ser o texto do `href`. Depois, o trabalho da função será comparar esse pedaço de texto com o URL visitado e decidir se deve imprimir, usando `echo`, o atributo `aria-current`. + +Você pode colocar a função no mesmo arquivo, acima da marcação HTML. + +```php +<?php +function aria_current($url) { + // If $url is an exact match for the current URL, return 'aria-current="page"'. + if ($_SERVER['REQUEST_URI'] === $url) { + echo 'aria-current="page"'; + return; + } + + // Otherwise it might be a sub-page, so check if the current URL contains + // $url. If it does, return 'aria-current="true"' to indicate that the link + // is an ancestor of the current page. Ignore a lone slash. + if ($url !== '/' && strpos($_SERVER['REQUEST_URI'], $url) !== false) { + echo 'aria-current="true"'; + return; + } +} +?> + +<nav> + <a href="/" <?php aria_current('/') ?>>Home</a> + <a href="/blog" <?php aria_current('/blog') ?>>Blog</a> + <a href="/about.php" <?php aria_current('/about.php') ?>>About</a> + <a href="/resume.php" <?php aria_current('/resume.php') ?>>Resume</a> + <a href="/fun.php" <?php aria_current('/fun.php') ?>>Fun!</a> +</nav> +``` + +Beleza, vamos por partes. Primeiro, precisamos abrir um par de tags PHP. Dentro, vamos definir uma função chamada `aria_current` com um argumento: uma variável chamada `$url`. + +Você pode ver onde eu acrescentei algumas notas chamadas _comentários_. Toda linha que começa com duas barras (`//`) é considerada comentário e é ignorada — está ali só para quem está olhando o código. + +O primeiro pedaço de código é uma _instrução if_. O PHP tem uma variável global chamada `$_SERVER` com todo tipo de informação, inclusive qual página está sendo visitada (o que ele chama de `REQUEST_URI`). Então pegamos isso e vemos se combina com o URL do item de navegação dado (lembre-se: estamos rodando esta função para cada item). Se combinar, vamos imprimir `aria-current="page"` usando a instrução `echo`. Nesse caso, a saída aparece no ponto em que chamamos a função (que é dentro da tag `<a>`, onde ficam os atributos). Depois da instrução `echo`, usamos `return` para parar a função — já terminamos. + +Se o primeiro teste não for verdadeiro, há outro teste que queremos tentar. A página atual visitada é uma subpágina do item de navegação dado? + +Este teste tem duas partes: + +1. Primeiro, queremos ignorar a página inicial (`/`), porque ela obviamente não é subpágina de nada. +2. Segundo, vamos testar o URL passado para a função contra o URL visitado, para ver se temos uma combinação. + +A segunda parte do teste usa uma função chamada `strpos`. Ela recebe dois argumentos. O primeiro é um pedaço de texto no qual você quer buscar (vamos chamar de _palheiro_). O segundo é um pedaço de texto que você está procurando (vamos chamar de _agulha_). A função devolve a posição da agulha no palheiro, se encontrar. Devolve `false` se não encontrar de jeito nenhum. + +Então, de novo, vamos olhar a variável global embutida `$_SERVER['REQUEST_URI']`. Você pode imaginar isso como algo tipo `/blog/my-first-post`. Sabemos que a pessoa está numa subpágina do blog se encontrarmos `/blog` dentro desse caminho. + +O teste passa nesse caso, e vamos imprimir `aria-current="true"` usando a instrução `echo`. + +Se os dois testes falharem, não imprimimos nada. + +Para recapitular: quando alguém carrega uma página no nosso site, rodamos uma função em cada item da navegação. Se o `href` do item combina com o URL atual, ou aparece em algum lugar do URL atual, imprimimos o atributo `aria-current` adequado. Caso contrário, não imprimimos nada. + +Ufa! Se você nunca tinha programado, dê um tapinha nas próprias costas, porque agora você já programou. Se esse tipo de coisa te diverte, explore mais PHP ou dê uma olhada em JavaScript. + +## Conclusão + +A criação de modelos com `include` no PHP é um ótimo jeito de escrever HTML sem repetir código. O PHP tem uma barreira de entrada menor do que outras linguagens de programação, e essa é uma das razões de eu trazer o assunto. Porém, sites podem ser feitos com todo tipo de linguagem (JavaScript, Python e Ruby são outras escolhas populares). Este é o mundo dos sites dinâmicos. Fica bem selvagem se você começa a pensar em tudo o que dá para fazer com isso. + +Includes de PHP podem ser úteis mesmo para um site pessoal pequeno. Mas também não tem problema ficar só com HTML puro! Editores como o Visual Studio Code têm busca e substituição robustas, o que permite atualizar muitos arquivos de uma vez. + +E com isso, você terminou o último capítulo bônus de [_HTML e Pessoas_](/)! Obrigado por ler.
A
src/_data/site.json
@@ -0,0 +1,5 @@
+{ + "url": "https://htmlepessoas.com", + "originalUrl": "https://htmlforpeople.com", + "name": "HTML e Pessoas" +}
A
src/_includes/base.njk
@@ -0,0 +1,195 @@
+<!doctype html> + +<html lang="pt-BR"> + <head> + <meta charset="utf-8" /> + <meta name="viewport" content="initial-scale=1, width=device-width" /> + + <title>{{ title }}</title> + + <meta property="og:title" content="{{ title }}" /> + <meta property="og:description" content="{{ summary }}" /> + <meta property="og:image" content="/assets/img/design/og.png" /> + <meta property="og:locale" content="pt_BR" /> + <link rel="canonical" href="{{ site.url }}{{ page.url }}" /> + <link rel="alternate" hreflang="pt-BR" href="{{ site.url }}{{ page.url }}" /> + {% if originalPath %} + <link + rel="alternate" + hreflang="en" + href="{{ site.originalUrl }}{{ originalPath }}" + /> + <link + rel="alternate" + hreflang="x-default" + href="{{ site.originalUrl }}{{ originalPath }}" + /> + {% else %} + <link rel="alternate" hreflang="en" href="{{ site.originalUrl }}/" /> + <link rel="alternate" hreflang="x-default" href="{{ site.originalUrl }}/" /> + {% endif %} + + <!-- favicon --> + <link + rel="icon" + type="image/png" + sizes="512x512" + href="/assets/img/design/favicon.png" + /> + + <script> + /** + * A global function that the theme toggle can use to apply the current theme. + * @param {string | undefined} override - The setting that needs to be applied or undefined + * @returns {string} - The applied theme setting + */ + window.applyThemeSetting = function (override) { + const getSystemPreference = () => { + if ( + window.matchMedia && + window.matchMedia('(prefers-color-scheme: dark)').matches + ) { + return 'dark'; + } + return 'light'; + }; + const currentSetting = + override || + localStorage.getItem('user-color-scheme') || + getSystemPreference(); + const currentThemeValue = + document.documentElement.getAttribute('data-theme'); + if (currentSetting && currentSetting !== currentThemeValue) { + document.documentElement.setAttribute('data-theme', currentSetting); + localStorage.setItem('user-color-scheme', currentSetting); + } + return currentSetting; + }; + window.applyThemeSetting(); + </script> + + <link rel="stylesheet" href="/assets/css/style.css" /> + + <script defer src="/assets/js/app.js"></script> + {% block scripts %}{% endblock %} + </head> + + <body class="{{ tags | default('page', true) }}"> + {% block header %} + <header class="site-header"> + <div class="logo-wrap"> + <p class="site-title container"> + <a href="/"> + <span class="sr-only">HTML e pessoas</span> + {% include "../assets/img/design/logo.svg" %} + </a> + </p> + </div> + + <a href="#main-content" class="skip-link">Pular para o conteúdo</a> + + <div class="container">{% include "partials/menu.njk" %}</div> + </header> + {% endblock %} + + <main id="main-content" class="container"> + {% block content %} + {{ content | safe }} + {% endblock %} + </main> + + {% block after_main %}{% endblock %} + + <elevator-button title="Ir para o menu"> + <a href="#main-menu"> + <span class="sr-only">Ir para o menu</span> + </a> + </elevator-button> + + <div class="sticky-footer" style="margin-block-start: auto"> + <div class="promo"> + <div class="container"> + <p class="promo-title">Gostou do livro?</p> + <div class="stack"> + <p> + <em>HTML e Pessoas</em> é a tradução de um trabalho feito com + carinho. Se puder, considere enviar uma doação no Ko-fi para o + autor original, Blake Watson, e compartilhar o livro nas redes + sociais. + </p> + + <p> + <a href="https://ko-fi.com/blakewatson" class="button" + >Doar no Ko-fi</a + > + </p> + + <p>Confira outros projetos do Blake:</p> + <ul> + <li> + <a href="https://afinestart.me" + >Uma extensão minimalista de nova aba</a + > + </li> + <li> + <a href="https://synthwave.live/">Um site de mix synthwave</a> + </li> + <li> + <a href="https://minimalcharactersheet.com/" + >Uma ficha minimalista para D&D</a + > + </li> + <li> + <a href="https://blakewatson.com">O site pessoal dele</a> + </li> + </ul> + + <p class="promo-title mt-xl mb-xs">Prefere ler em inglês?</p> + <p> + O original <em>HTML for People</em> está em + <a href="https://htmlforpeople.com">htmlforpeople.com</a>, escrito + por Blake Watson. Também existe uma versão em espanhol, graças a + <a + href="https://victorhckinthefreeworld.com/2024/12/11/aprende-html-desde-cero-y-crea-tu-propio-sitio-web/" + >Victorhck</a + >. + </p> + + <p class="mb-md"> + <a class="button" href="https://htmlforpeople.com"> + Visitar HTML for People</a + > + </p> + </div> + </div> + </div> + + <footer class="site-footer"> + <div class="container"> + <p class="mb-sm"> + <a href="/conquista-desbloqueada-hipertextista#recursos-deste-livro" + >Recursos</a + > + · + <a href="/printable">Versão para imprimir</a> + · + <a href="https://github.com/blakewatson/htmlforpeople">GitHub</a> + · + <a href="https://blakewatson.com/about">Sobre o autor</a> + </p> + <p> + Livro original de + <a href="https://blakewatson.com">Blake Watson</a> — + <a href="https://htmlforpeople.com">HTML for People</a>. Tradução + para o português do Brasil oferecida por + <a href="https://pablomurad.com">Pablo Murad</a> e + <a href="https://portalidea.com.br">Portal IDEA</a>. Licença + <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" + >CC BY-NC-SA 4.0</a + >. + </p> + </div> + </footer> + </div> + </body> +</html>
A
src/_includes/chapter.njk
@@ -0,0 +1,33 @@
+{% extends "base.njk" %} + +{% block content %} + {{ content | safe }} + {% set previousPost = collections.sortedChapter | getPreviousCollectionItem %} + {% set nextPost = collections.sortedChapter | getNextCollectionItem %} + + {% if previousPost or nextPost %} + <nav + class="mb-xl" + style="display: flex; flex-direction: column; gap: 0.5rem;" + > + {% if nextPost %} + <p> + <strong><span role="presentation">→</span> Próximo capítulo:</strong> + <a href="{{ nextPost.url }}">{{ nextPost.data.title }}</a> + </p> + {% endif %} + + {% if previousPost %} + <p> + <strong + ><span role="presentation">←</span> Capítulo anterior:</strong + > + <a href="{{ previousPost.url }}">{{ previousPost.data.title }}</a> + </p> + {% endif %} + </nav> + {% endif %} +{% endblock %} + +{% block after_main %} +{% endblock %}
A
src/_includes/home.njk
@@ -0,0 +1,32 @@
+{% extends "base.njk" %} + +{% block scripts %} + <script src="/assets/js/anime.min.js"></script> + <script src="/assets/js/hero.js" type="module"></script> +{% endblock %} + +{% block header %} + <header class="site-header"> + <p class="site-title sr-only">HTML e Pessoas</p> + + <a href="#main-content" class="skip-link">Pular para o conteúdo</a> + + <div class="hero">{% include "../assets/img/design/hero.svg" %}</div> + <div class="hero-mobile"> + {% include "../assets/img/design/hero-mobile.svg" %} + </div> + + <div class="container mt-lg">{% include "partials/menu.njk" %}</div> + </header> +{% endblock %} + +{% block content %} + {{ content | safe }} + + <p class="home-buttons mt-lg" style="margin-bottom: var(--size-10);"> + <a href="/introducao" class="button">Ler a introdução</a> + <a href="/do-zero-a-internet-seu-primeiro-site" class="button" + >Quero começar já!</a + > + </p> +{% endblock %}
A
src/assets/css/fonts.css
@@ -0,0 +1,1 @@
+@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400&family=Source+Code+Pro:ital,wght@0,400;0,600;1,400&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400;1,8..60,600&display=swap');
A
src/assets/css/open-props.min.css
@@ -0,0 +1,1 @@
+:where(html){--font-system-ui:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;--font-transitional:Charter,Bitstream Charter,Sitka Text,Cambria,serif;--font-old-style:Iowan Old Style,Palatino Linotype,URW Palladio L,P052,serif;--font-humanist:Seravek,Gill Sans Nova,Ubuntu,Calibri,DejaVu Sans,source-sans-pro,sans-serif;--font-geometric-humanist:Avenir,Montserrat,Corbel,URW Gothic,source-sans-pro,sans-serif;--font-classical-humanist:Optima,Candara,Noto Sans,source-sans-pro,sans-serif;--font-neo-grotesque:Inter,Roboto,Helvetica Neue,Arial Nova,Nimbus Sans,Arial,sans-serif;--font-monospace-slab-serif:Nimbus Mono PS,Courier New,monospace;--font-monospace-code:Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,Cascadia Code,Menlo,Consolas,DejaVu Sans Mono,monospace;--font-industrial:Bahnschrift,DIN Alternate,Franklin Gothic Medium,Nimbus Sans Narrow,sans-serif-condensed,sans-serif;--font-rounded-sans:ui-rounded,Hiragino Maru Gothic ProN,Quicksand,Comfortaa,Manjari,Arial Rounded MT,Arial Rounded MT Bold,Calibri,source-sans-pro,sans-serif;--font-slab-serif:Rockwell,Rockwell Nova,Roboto Slab,DejaVu Serif,Sitka Small,serif;--font-antique:Superclarendon,Bookman Old Style,URW Bookman,URW Bookman L,Georgia Pro,Georgia,serif;--font-didone:Didot,Bodoni MT,Noto Serif Display,URW Palladio L,P052,Sylfaen,serif;--font-handwritten:Segoe Print,Bradley Hand,Chilanka,TSCu_Comic,casual,cursive;--font-sans:var(--font-system-ui);--font-serif:ui-serif,serif;--font-mono:var(--font-monospace-code);--font-weight-1:100;--font-weight-2:200;--font-weight-3:300;--font-weight-4:400;--font-weight-5:500;--font-weight-6:600;--font-weight-7:700;--font-weight-8:800;--font-weight-9:900;--font-lineheight-00:.95;--font-lineheight-0:1.1;--font-lineheight-1:1.25;--font-lineheight-2:1.375;--font-lineheight-3:1.5;--font-lineheight-4:1.75;--font-lineheight-5:2;--font-letterspacing-0:-.05em;--font-letterspacing-1:.025em;--font-letterspacing-2:.050em;--font-letterspacing-3:.075em;--font-letterspacing-4:.150em;--font-letterspacing-5:.500em;--font-letterspacing-6:.750em;--font-letterspacing-7:1em;--font-size-00:.5rem;--font-size-0:.75rem;--font-size-1:1rem;--font-size-2:1.1rem;--font-size-3:1.25rem;--font-size-4:1.5rem;--font-size-5:2rem;--font-size-6:2.5rem;--font-size-7:3rem;--font-size-8:3.5rem;--font-size-fluid-0:clamp(.75rem,2vw,1rem);--font-size-fluid-1:clamp(1rem,4vw,1.5rem);--font-size-fluid-2:clamp(1.5rem,6vw,2.5rem);--font-size-fluid-3:clamp(2rem,9vw,3.5rem);--size-000:-.5rem;--size-00:-.25rem;--size-1:.25rem;--size-2:.5rem;--size-3:1rem;--size-4:1.25rem;--size-5:1.5rem;--size-6:1.75rem;--size-7:2rem;--size-8:3rem;--size-9:4rem;--size-10:5rem;--size-11:7.5rem;--size-12:10rem;--size-13:15rem;--size-14:20rem;--size-15:30rem;--size-px-000:-8px;--size-px-00:-4px;--size-px-1:4px;--size-px-2:8px;--size-px-3:16px;--size-px-4:20px;--size-px-5:24px;--size-px-6:28px;--size-px-7:32px;--size-px-8:48px;--size-px-9:64px;--size-px-10:80px;--size-px-11:120px;--size-px-12:160px;--size-px-13:240px;--size-px-14:320px;--size-px-15:480px;--size-fluid-1:clamp(.5rem,1vw,1rem);--size-fluid-2:clamp(1rem,2vw,1.5rem);--size-fluid-3:clamp(1.5rem,3vw,2rem);--size-fluid-4:clamp(2rem,4vw,3rem);--size-fluid-5:clamp(4rem,5vw,5rem);--size-fluid-6:clamp(5rem,7vw,7.5rem);--size-fluid-7:clamp(7.5rem,10vw,10rem);--size-fluid-8:clamp(10rem,20vw,15rem);--size-fluid-9:clamp(15rem,30vw,20rem);--size-fluid-10:clamp(20rem,40vw,30rem);--size-content-1:20ch;--size-content-2:45ch;--size-content-3:60ch;--size-header-1:20ch;--size-header-2:25ch;--size-header-3:35ch;--size-xxs:240px;--size-xs:360px;--size-sm:480px;--size-md:768px;--size-lg:1024px;--size-xl:1440px;--size-xxl:1920px;--size-relative-000:-.5ch;--size-relative-00:-.25ch;--size-relative-1:.25ch;--size-relative-2:.5ch;--size-relative-3:1ch;--size-relative-4:1.25ch;--size-relative-5:1.5ch;--size-relative-6:1.75ch;--size-relative-7:2ch;--size-relative-8:3ch;--size-relative-9:4ch;--size-relative-10:5ch;--size-relative-11:7.5ch;--size-relative-12:10ch;--size-relative-13:15ch;--size-relative-14:20ch;--size-relative-15:30ch;--ease-1:cubic-bezier(.25,0,.5,1);--ease-2:cubic-bezier(.25,0,.4,1);--ease-3:cubic-bezier(.25,0,.3,1);--ease-4:cubic-bezier(.25,0,.2,1);--ease-5:cubic-bezier(.25,0,.1,1);--ease-in-1:cubic-bezier(.25,0,1,1);--ease-in-2:cubic-bezier(.50,0,1,1);--ease-in-3:cubic-bezier(.70,0,1,1);--ease-in-4:cubic-bezier(.90,0,1,1);--ease-in-5:cubic-bezier(1,0,1,1);--ease-out-1:cubic-bezier(0,0,.75,1);--ease-out-2:cubic-bezier(0,0,.50,1);--ease-out-3:cubic-bezier(0,0,.3,1);--ease-out-4:cubic-bezier(0,0,.1,1);--ease-out-5:cubic-bezier(0,0,0,1);--ease-in-out-1:cubic-bezier(.1,0,.9,1);--ease-in-out-2:cubic-bezier(.3,0,.7,1);--ease-in-out-3:cubic-bezier(.5,0,.5,1);--ease-in-out-4:cubic-bezier(.7,0,.3,1);--ease-in-out-5:cubic-bezier(.9,0,.1,1);--ease-elastic-out-1:cubic-bezier(.5,.75,.75,1.25);--ease-elastic-out-2:cubic-bezier(.5,1,.75,1.25);--ease-elastic-out-3:cubic-bezier(.5,1.25,.75,1.25);--ease-elastic-out-4:cubic-bezier(.5,1.5,.75,1.25);--ease-elastic-out-5:cubic-bezier(.5,1.75,.75,1.25);--ease-elastic-in-1:cubic-bezier(.5,-0.25,.75,1);--ease-elastic-in-2:cubic-bezier(.5,-0.50,.75,1);--ease-elastic-in-3:cubic-bezier(.5,-0.75,.75,1);--ease-elastic-in-4:cubic-bezier(.5,-1.00,.75,1);--ease-elastic-in-5:cubic-bezier(.5,-1.25,.75,1);--ease-elastic-in-out-1:cubic-bezier(.5,-.1,.1,1.5);--ease-elastic-in-out-2:cubic-bezier(.5,-.3,.1,1.5);--ease-elastic-in-out-3:cubic-bezier(.5,-.5,.1,1.5);--ease-elastic-in-out-4:cubic-bezier(.5,-.7,.1,1.5);--ease-elastic-in-out-5:cubic-bezier(.5,-.9,.1,1.5);--ease-step-1:steps(2);--ease-step-2:steps(3);--ease-step-3:steps(4);--ease-step-4:steps(7);--ease-step-5:steps(10);--ease-elastic-1:var(--ease-elastic-out-1);--ease-elastic-2:var(--ease-elastic-out-2);--ease-elastic-3:var(--ease-elastic-out-3);--ease-elastic-4:var(--ease-elastic-out-4);--ease-elastic-5:var(--ease-elastic-out-5);--ease-squish-1:var(--ease-elastic-in-out-1);--ease-squish-2:var(--ease-elastic-in-out-2);--ease-squish-3:var(--ease-elastic-in-out-3);--ease-squish-4:var(--ease-elastic-in-out-4);--ease-squish-5:var(--ease-elastic-in-out-5);--ease-spring-1:linear(0,0.006,0.025 2.8%,0.101 6.1%,0.539 18.9%,0.721 25.3%,0.849 31.5%,0.937 38.1%,0.968 41.8%,0.991 45.7%,1.006 50.1%,1.015 55%,1.017 63.9%,1.001);--ease-spring-2:linear(0,0.007,0.029 2.2%,0.118 4.7%,0.625 14.4%,0.826 19%,0.902,0.962,1.008 26.1%,1.041 28.7%,1.064 32.1%,1.07 36%,1.061 40.5%,1.015 53.4%,0.999 61.6%,0.995 71.2%,1);--ease-spring-3:linear(0,0.009,0.035 2.1%,0.141 4.4%,0.723 12.9%,0.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,0.991,0.977 51%,0.974 53.8%,0.975 57.1%,0.997 69.8%,1.003 76.9%,1);--ease-spring-4:linear(0,0.009,0.037 1.7%,0.153 3.6%,0.776 10.3%,1.001,1.142 16%,1.185,1.209 19%,1.215 19.9% 20.8%,1.199,1.165 25%,1.056 30.3%,1.008 33%,0.973,0.955 39.2%,0.953 41.1%,0.957 43.3%,0.998 53.3%,1.009 59.1% 63.7%,0.998 78.9%,1);--ease-spring-5:linear(0,0.01,0.04 1.6%,0.161 3.3%,0.816 9.4%,1.046,1.189 14.4%,1.231,1.254 17%,1.259,1.257 18.6%,1.236,1.194 22.3%,1.057 27%,0.999 29.4%,0.955 32.1%,0.942,0.935 34.9%,0.933,0.939 38.4%,1 47.3%,1.011,1.017 52.6%,1.016 56.4%,1 65.2%,0.996 70.2%,1.001 87.2%,1);--ease-bounce-1:linear(0,0.004,0.016,0.035,0.063,0.098,0.141,0.191,0.25,0.316,0.391 36.8%,0.563,0.766,1 58.8%,0.946,0.908 69.1%,0.895,0.885,0.879,0.878,0.879,0.885,0.895,0.908 89.7%,0.946,1);--ease-bounce-2:linear(0,0.004,0.016,0.035,0.063,0.098,0.141 15.1%,0.25,0.391,0.562,0.765,1,0.892 45.2%,0.849,0.815,0.788,0.769,0.757,0.753,0.757,0.769,0.788,0.815,0.85,0.892 75.2%,1 80.2%,0.973,0.954,0.943,0.939,0.943,0.954,0.973,1);--ease-bounce-3:linear(0,0.004,0.016,0.035,0.062,0.098,0.141 11.4%,0.25,0.39,0.562,0.764,1 30.3%,0.847 34.8%,0.787,0.737,0.699,0.672,0.655,0.65,0.656,0.672,0.699,0.738,0.787,0.847 61.7%,1 66.2%,0.946,0.908,0.885 74.2%,0.879,0.878,0.879,0.885 79.5%,0.908,0.946,1 87.4%,0.981,0.968,0.96,0.957,0.96,0.968,0.981,1);--ease-bounce-4:linear(0,0.004,0.016 3%,0.062,0.141,0.25,0.391,0.562 18.2%,1 24.3%,0.81,0.676 32.3%,0.629,0.595,0.575,0.568,0.575,0.595,0.629,0.676 48.2%,0.811,1 56.2%,0.918,0.86,0.825,0.814,0.825,0.86,0.918,1 77.2%,0.94 80.6%,0.925,0.92,0.925,0.94 87.5%,1 90.9%,0.974,0.965,0.974,1);--ease-bounce-5:linear(0,0.004,0.016 2.5%,0.063,0.141,0.25 10.1%,0.562,1 20.2%,0.783,0.627,0.534 30.9%,0.511,0.503,0.511,0.534 38%,0.627,0.782,1 48.7%,0.892,0.815,0.769 56.3%,0.757,0.753,0.757,0.769 61.3%,0.815,0.892,1 68.8%,0.908 72.4%,0.885,0.878,0.885,0.908 79.4%,1 83%,0.954 85.5%,0.943,0.939,0.943,0.954 90.5%,1 93%,0.977,0.97,0.977,1);--layer-1:1;--layer-2:2;--layer-3:3;--layer-4:4;--layer-5:5;--layer-important:2147483647;--shadow-color:220 3% 15%;--shadow-strength:1%;--inner-shadow-highlight:inset 0 -.5px 0 0 #fff,inset 0 .5px 0 0 rgba(0,0,0,.067);--shadow-1:0 1px 2px -1px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--shadow-2:0 3px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 7px 14px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%));--shadow-3:0 -1px 3px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 1px 2px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 2px 5px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 4px 12px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 12px 15px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--shadow-4:0 -2px 5px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 1px 1px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 2px 2px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 5px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 9px 9px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 16px 16px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 6%));--shadow-5:0 -1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 2px 1px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 5px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 10px 10px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 20px 20px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 40px 40px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--shadow-6:0 -1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 3px 2px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 7px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 12px 10px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 22px 18px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 41px 33px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 6%)),0 100px 80px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--inner-shadow-0:inset 0 0 0 1px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--inner-shadow-1:inset 0 1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--inner-shadow-2:inset 0 1px 4px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--inner-shadow-3:inset 0 2px 8px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--inner-shadow-4:inset 0 2px 14px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--ratio-square:1;--ratio-landscape:4/3;--ratio-portrait:3/4;--ratio-widescreen:16/9;--ratio-ultrawide:18/5;--ratio-golden:1.6180/1;--gray-0:#f8f9fa;--gray-1:#f1f3f5;--gray-2:#e9ecef;--gray-3:#dee2e6;--gray-4:#ced4da;--gray-5:#adb5bd;--gray-6:#868e96;--gray-7:#495057;--gray-8:#343a40;--gray-9:#212529;--gray-10:#16191d;--gray-11:#0d0f12;--gray-12:#030507;--stone-0:#f8fafb;--stone-1:#f2f4f6;--stone-2:#ebedef;--stone-3:#e0e4e5;--stone-4:#d1d6d8;--stone-5:#b1b6b9;--stone-6:#979b9d;--stone-7:#7e8282;--stone-8:#666968;--stone-9:#50514f;--stone-10:#3a3a37;--stone-11:#252521;--stone-12:#121210;--red-0:#fff5f5;--red-1:#ffe3e3;--red-2:#ffc9c9;--red-3:#ffa8a8;--red-4:#ff8787;--red-5:#ff6b6b;--red-6:#fa5252;--red-7:#f03e3e;--red-8:#e03131;--red-9:#c92a2a;--red-10:#b02525;--red-11:#962020;--red-12:#7d1a1a;--pink-0:#fff0f6;--pink-1:#ffdeeb;--pink-2:#fcc2d7;--pink-3:#faa2c1;--pink-4:#f783ac;--pink-5:#f06595;--pink-6:#e64980;--pink-7:#d6336c;--pink-8:#c2255c;--pink-9:#a61e4d;--pink-10:#8c1941;--pink-11:#731536;--pink-12:#59102a;--purple-0:#f8f0fc;--purple-1:#f3d9fa;--purple-2:#eebefa;--purple-3:#e599f7;--purple-4:#da77f2;--purple-5:#cc5de8;--purple-6:#be4bdb;--purple-7:#ae3ec9;--purple-8:#9c36b5;--purple-9:#862e9c;--purple-10:#702682;--purple-11:#5a1e69;--purple-12:#44174f;--violet-0:#f3f0ff;--violet-1:#e5dbff;--violet-2:#d0bfff;--violet-3:#b197fc;--violet-4:#9775fa;--violet-5:#845ef7;--violet-6:#7950f2;--violet-7:#7048e8;--violet-8:#6741d9;--violet-9:#5f3dc4;--violet-10:#5235ab;--violet-11:#462d91;--violet-12:#3a2578;--indigo-0:#edf2ff;--indigo-1:#dbe4ff;--indigo-2:#bac8ff;--indigo-3:#91a7ff;--indigo-4:#748ffc;--indigo-5:#5c7cfa;--indigo-6:#4c6ef5;--indigo-7:#4263eb;--indigo-8:#3b5bdb;--indigo-9:#364fc7;--indigo-10:#2f44ad;--indigo-11:#283a94;--indigo-12:#21307a;--blue-0:#e7f5ff;--blue-1:#d0ebff;--blue-2:#a5d8ff;--blue-3:#74c0fc;--blue-4:#4dabf7;--blue-5:#339af0;--blue-6:#228be6;--blue-7:#1c7ed6;--blue-8:#1971c2;--blue-9:#1864ab;--blue-10:#145591;--blue-11:#114678;--blue-12:#0d375e;--cyan-0:#e3fafc;--cyan-1:#c5f6fa;--cyan-2:#99e9f2;--cyan-3:#66d9e8;--cyan-4:#3bc9db;--cyan-5:#22b8cf;--cyan-6:#15aabf;--cyan-7:#1098ad;--cyan-8:#0c8599;--cyan-9:#0b7285;--cyan-10:#095c6b;--cyan-11:#074652;--cyan-12:#053038;--teal-0:#e6fcf5;--teal-1:#c3fae8;--teal-2:#96f2d7;--teal-3:#63e6be;--teal-4:#38d9a9;--teal-5:#20c997;--teal-6:#12b886;--teal-7:#0ca678;--teal-8:#099268;--teal-9:#087f5b;--teal-10:#066649;--teal-11:#054d37;--teal-12:#033325;--green-0:#ebfbee;--green-1:#d3f9d8;--green-2:#b2f2bb;--green-3:#8ce99a;--green-4:#69db7c;--green-5:#51cf66;--green-6:#40c057;--green-7:#37b24d;--green-8:#2f9e44;--green-9:#2b8a3e;--green-10:#237032;--green-11:#1b5727;--green-12:#133d1b;--lime-0:#f4fce3;--lime-1:#e9fac8;--lime-2:#d8f5a2;--lime-3:#c0eb75;--lime-4:#a9e34b;--lime-5:#94d82d;--lime-6:#82c91e;--lime-7:#74b816;--lime-8:#66a80f;--lime-9:#5c940d;--lime-10:#4c7a0b;--lime-11:#3c6109;--lime-12:#2c4706;--yellow-0:#fff9db;--yellow-1:#fff3bf;--yellow-2:#ffec99;--yellow-3:#ffe066;--yellow-4:#ffd43b;--yellow-5:#fcc419;--yellow-6:#fab005;--yellow-7:#f59f00;--yellow-8:#f08c00;--yellow-9:#e67700;--yellow-10:#b35c00;--yellow-11:#804200;--yellow-12:#663500;--orange-0:#fff4e6;--orange-1:#ffe8cc;--orange-2:#ffd8a8;--orange-3:#ffc078;--orange-4:#ffa94d;--orange-5:#ff922b;--orange-6:#fd7e14;--orange-7:#f76707;--orange-8:#e8590c;--orange-9:#d9480f;--orange-10:#bf400d;--orange-11:#99330b;--orange-12:#802b09;--choco-0:#fff8dc;--choco-1:#fce1bc;--choco-2:#f7ca9e;--choco-3:#f1b280;--choco-4:#e99b62;--choco-5:#df8545;--choco-6:#d46e25;--choco-7:#bd5f1b;--choco-8:#a45117;--choco-9:#8a4513;--choco-10:#703a13;--choco-11:#572f12;--choco-12:#3d210d;--brown-0:#faf4eb;--brown-1:#ede0d1;--brown-2:#e0cab7;--brown-3:#d3b79e;--brown-4:#c5a285;--brown-5:#b78f6d;--brown-6:#a87c56;--brown-7:#956b47;--brown-8:#825b3a;--brown-9:#6f4b2d;--brown-10:#5e3a21;--brown-11:#4e2b15;--brown-12:#422412;--sand-0:#f8fafb;--sand-1:#e6e4dc;--sand-2:#d5cfbd;--sand-3:#c2b9a0;--sand-4:#aea58c;--sand-5:#9a9178;--sand-6:#867c65;--sand-7:#736a53;--sand-8:#5f5746;--sand-9:#4b4639;--sand-10:#38352d;--sand-11:#252521;--sand-12:#121210;--camo-0:#f9fbe7;--camo-1:#e8ed9c;--camo-2:#d2df4e;--camo-3:#c2ce34;--camo-4:#b5bb2e;--camo-5:#a7a827;--camo-6:#999621;--camo-7:#8c851c;--camo-8:#7e7416;--camo-9:#6d6414;--camo-10:#5d5411;--camo-11:#4d460e;--camo-12:#36300a;--jungle-0:#ecfeb0;--jungle-1:#def39a;--jungle-2:#d0e884;--jungle-3:#c2dd6e;--jungle-4:#b5d15b;--jungle-5:#a8c648;--jungle-6:#9bbb36;--jungle-7:#8fb024;--jungle-8:#84a513;--jungle-9:#7a9908;--jungle-10:#658006;--jungle-11:#516605;--jungle-12:#3d4d04;--gradient-1:linear-gradient(to bottom right,#1f005c,#5b0060,#870160,#ac255e,#ca485c,#e16b5c,#f39060,#ffb56b);--gradient-2:linear-gradient(to bottom right,#48005c,#8300e2,#a269ff);--gradient-3:radial-gradient(circle at top right,#0ff,rgba(0,255,255,0)),radial-gradient(circle at bottom left,#ff1492,rgba(255,20,146,0));--gradient-4:linear-gradient(to bottom right,#00f5a0,#00d9f5);--gradient-5:conic-gradient(from -270deg at 75% 110%,#f0f,#fffaf0);--gradient-6:conic-gradient(from -90deg at top left,#000,#fff);--gradient-7:linear-gradient(to bottom right,#72c6ef,#004e8f);--gradient-8:conic-gradient(from 90deg at 50% 0%,#111,50%,#222,#111);--gradient-9:conic-gradient(from .5turn at bottom center,#add8e6,#fff);--gradient-10:conic-gradient(from 90deg at 40% -25%,gold,#f79d03,#ee6907,#e6390a,#de0d0d,#d61039,#cf1261,#c71585,#cf1261,#d61039,#de0d0d,#ee6907,#f79d03,gold,gold,gold);--gradient-11:conic-gradient(at bottom left,#ff1493,cyan);--gradient-12:conic-gradient(from 90deg at 25% -10%,#ff4500,#d3f340,#7bee85,#afeeee,#7bee85);--gradient-13:radial-gradient(circle at 50% 200%,#000142,#3b0083,#b300c3,#ff059f,#ff4661,#ffad86,#fff3c7);--gradient-14:conic-gradient(at top right,lime,cyan);--gradient-15:linear-gradient(to bottom right,#c7d2fe,#fecaca,#fef3c7);--gradient-16:radial-gradient(circle at 50% -250%,#374151,#111827,#000);--gradient-17:conic-gradient(from -90deg at 50% -25%,blue,#8a2be2);--gradient-18:linear-gradient(0deg,rgba(255,0,0,.8),rgba(255,0,0,0) 75%),linear-gradient(60deg,rgba(255,255,0,.8),rgba(255,255,0,0) 75%),linear-gradient(120deg,rgba(0,255,0,.8),rgba(0,255,0,0) 75%),linear-gradient(180deg,rgba(0,255,255,.8),rgba(0,255,255,0) 75%),linear-gradient(240deg,rgba(0,0,255,.8),rgba(0,0,255,0) 75%),linear-gradient(300deg,rgba(255,0,255,.8),rgba(255,0,255,0) 75%);--gradient-19:linear-gradient(to bottom right,#ffe259,#ffa751);--gradient-20:conic-gradient(from -135deg at -10% center,orange,#ff7715,#ff522a,#ff3f47,#ff5482,#ff69b4);--gradient-21:conic-gradient(from -90deg at 25% 115%,red,#f06,#f0c,#c0f,#60f,#00f,#00f,#00f,#00f);--gradient-22:linear-gradient(to bottom right,#acb6e5,#86fde8);--gradient-23:linear-gradient(to bottom right,#536976,#292e49);--gradient-24:conic-gradient(from .5turn at 0% 0%,#00c476,10%,#82b0ff,90%,#00c476);--gradient-25:conic-gradient(at 125% 50%,#b78cf7,#ff7c94,#ffcf0d,#ff7c94,#b78cf7);--gradient-26:linear-gradient(to bottom right,#9796f0,#fbc7d4);--gradient-27:conic-gradient(from .5turn at bottom left,#ff1493,#639);--gradient-28:conic-gradient(from -90deg at 50% 105%,#fff,orchid);--gradient-29:radial-gradient(circle at top right,#bfb3ff,rgba(191,179,255,0)),radial-gradient(circle at bottom left,#86acf9,rgba(134,172,249,0));--gradient-30:radial-gradient(circle at top right,#00ff80,rgba(0,255,128,0)),radial-gradient(circle at bottom left,#adffd6,rgba(173,255,214,0));--noise-1:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.005' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-2:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-3:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.25' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-4:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-5:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-filter-1:contrast(300%) brightness(100%);--noise-filter-2:contrast(200%) brightness(150%);--noise-filter-3:contrast(200%) brightness(250%);--noise-filter-4:contrast(200%) brightness(500%);--noise-filter-5:contrast(200%) brightness(1000%);--animation-fade-in:fade-in .5s var(--ease-3);--animation-fade-in-bloom:fade-in-bloom 2s var(--ease-3);--animation-fade-out:fade-out .5s var(--ease-3);--animation-fade-out-bloom:fade-out-bloom 2s var(--ease-3);--animation-scale-up:scale-up .5s var(--ease-3);--animation-scale-down:scale-down .5s var(--ease-3);--animation-slide-out-up:slide-out-up .5s var(--ease-3);--animation-slide-out-down:slide-out-down .5s var(--ease-3);--animation-slide-out-right:slide-out-right .5s var(--ease-3);--animation-slide-out-left:slide-out-left .5s var(--ease-3);--animation-slide-in-up:slide-in-up .5s var(--ease-3);--animation-slide-in-down:slide-in-down .5s var(--ease-3);--animation-slide-in-right:slide-in-right .5s var(--ease-3);--animation-slide-in-left:slide-in-left .5s var(--ease-3);--animation-shake-x:shake-x .75s var(--ease-out-5);--animation-shake-y:shake-y .75s var(--ease-out-5);--animation-shake-z:shake-z 1s var(--ease-in-out-3);--animation-spin:spin 2s linear infinite;--animation-ping:ping 5s var(--ease-out-3) infinite;--animation-blink:blink 1s var(--ease-out-3) infinite;--animation-float:float 3s var(--ease-in-out-3) infinite;--animation-bounce:bounce 2s var(--ease-squish-2) infinite;--animation-pulse:pulse 2s var(--ease-out-3) infinite;--border-size-1:1px;--border-size-2:2px;--border-size-3:5px;--border-size-4:10px;--border-size-5:25px;--radius-1:2px;--radius-2:5px;--radius-3:1rem;--radius-4:2rem;--radius-5:4rem;--radius-6:8rem;--radius-drawn-1:255px 15px 225px 15px/15px 225px 15px 255px;--radius-drawn-2:125px 10px 20px 185px/25px 205px 205px 25px;--radius-drawn-3:15px 255px 15px 225px/225px 15px 255px 15px;--radius-drawn-4:15px 25px 155px 25px/225px 150px 25px 115px;--radius-drawn-5:250px 25px 15px 20px/15px 80px 105px 115px;--radius-drawn-6:28px 100px 20px 15px/150px 30px 205px 225px;--radius-round:1e5px;--radius-blob-1:30% 70% 70% 30%/53% 30% 70% 47%;--radius-blob-2:53% 47% 34% 66%/63% 46% 54% 37%;--radius-blob-3:37% 63% 56% 44%/49% 56% 44% 51%;--radius-blob-4:63% 37% 37% 63%/43% 37% 63% 57%;--radius-blob-5:49% 51% 48% 52%/57% 44% 56% 43%;--radius-conditional-1:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-1));--radius-conditional-2:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-2));--radius-conditional-3:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-3));--radius-conditional-4:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-4));--radius-conditional-5:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-5));--radius-conditional-6:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-6))}@media (prefers-color-scheme:dark){:where(html){--shadow-color:220 40% 2%;--shadow-strength:25%;--inner-shadow-highlight:inset 0 -.5px 0 0 hsla(0,0%,100%,.067),inset 0 .5px 0 0 rgba(0,0,0,.467)}}@keyframes fade-in{to{opacity:1}}@keyframes fade-in-bloom{0%{filter:brightness(1) blur(20px);opacity:0}10%{filter:brightness(2) blur(10px);opacity:1}to{filter:brightness(1) blur(0);opacity:1}}@keyframes fade-out{to{opacity:0}}@keyframes fade-out-bloom{to{filter:brightness(1) blur(20px);opacity:0}10%{filter:brightness(2) blur(10px);opacity:1}0%{filter:brightness(1) blur(0);opacity:1}}@keyframes scale-up{to{transform:scale(1.25)}}@keyframes scale-down{to{transform:scale(.75)}}@keyframes slide-out-up{to{transform:translateY(-100%)}}@keyframes slide-out-down{to{transform:translateY(100%)}}@keyframes slide-out-right{to{transform:translateX(100%)}}@keyframes slide-out-left{to{transform:translateX(-100%)}}@keyframes slide-in-up{0%{transform:translateY(100%)}}@keyframes slide-in-down{0%{transform:translateY(-100%)}}@keyframes slide-in-right{0%{transform:translateX(-100%)}}@keyframes slide-in-left{0%{transform:translateX(100%)}}@keyframes shake-x{0%,to{transform:translateX(0)}20%{transform:translateX(-5%)}40%{transform:translateX(5%)}60%{transform:translateX(-5%)}80%{transform:translateX(5%)}}@keyframes shake-y{0%,to{transform:translateY(0)}20%{transform:translateY(-5%)}40%{transform:translateY(5%)}60%{transform:translateY(-5%)}80%{transform:translateY(5%)}}@keyframes shake-z{0%,to{transform:rotate(0deg)}20%{transform:rotate(-2deg)}40%{transform:rotate(2deg)}60%{transform:rotate(-2deg)}80%{transform:rotate(2deg)}}@keyframes spin{to{transform:rotate(1turn)}}@keyframes ping{90%,to{opacity:0;transform:scale(2)}}@keyframes blink{0%,to{opacity:1}50%{opacity:.5}}@keyframes float{50%{transform:translateY(-25%)}}@keyframes bounce{25%{transform:translateY(-20%)}40%{transform:translateY(-3%)}0%,60%,to{transform:translateY(0)}}@keyframes pulse{50%{transform:scale(.9)}}@media (prefers-color-scheme:dark){@keyframes fade-in-bloom{0%{filter:brightness(1) blur(20px);opacity:0}10%{filter:brightness(.5) blur(10px);opacity:1}to{filter:brightness(1) blur(0);opacity:1}}}@media (prefers-color-scheme:dark){@keyframes fade-out-bloom{to{filter:brightness(1) blur(20px);opacity:0}10%{filter:brightness(.5) blur(10px);opacity:1}0%{filter:brightness(1) blur(0);opacity:1}}}
A
src/assets/css/print.css
@@ -0,0 +1,53 @@
+html, +body { + font-size: 14px !important; +} + +.container { + max-width: 550px; +} + +aside { + page-break-inside: avoid; + box-shadow: none; +} + +aside::before, +aside::after { + display: none; +} + +pre { + box-shadow: none !important; +} + +img, +p:has(> img) { + display: block; + page-break-inside: avoid; +} + +h1:not(:first-of-type) { + page-break-before: always; +} + +h1, +h2, +h3 { + page-break-after: avoid; +} + +a:not([href^='#']) { + &::after { + content: ' (' attr(href) ')'; + } +} + +.site-title a::after { + content: 'https://htmlforpeople.com'; +} + +pre, +pre[class*='language-'] { + max-height: none; +}
A
src/assets/css/prism-dracula.css
@@ -0,0 +1,124 @@
+/** + * Dracula Theme originally by Zeno Rocha [@zenorocha] + * https://draculatheme.com/ + * + * Ported for PrismJS by Albert Vallverdu [@byverdu] + */ + +:where([data-theme='dark']) { + & code[class*='language-'], + & pre[class*='language-'] { + color: #f8f8f2; + background: none; + text-shadow: 0 1px rgba(0, 0, 0, 0.3); + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + 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; + } + + /* Code blocks */ + & pre[class*='language-'] { + padding: 1em; + margin: 0.5em 0; + overflow: auto; + border-radius: 0.3em; + } + + & :not(pre) > code[class*='language-'], + & pre[class*='language-'] { + background: #282a36; + } + + /* Inline code */ + & :not(pre) > code[class*='language-'] { + padding: 0.1em; + border-radius: 0.3em; + white-space: normal; + } + + & .token.comment, + .token.prolog, + .token.doctype, + .token.cdata { + color: #9cb3f8; + } + + .token.punctuation { + color: #f8f8f2; + } + + .namespace { + opacity: 0.7; + } + + .token.property, + .token.tag, + .token.constant, + .token.symbol, + .token.deleted { + color: #ff79c6; + } + + .token.boolean, + .token.number { + color: #bd93f9; + } + + .token.selector, + .token.attr-name, + .token.string, + .token.char, + .token.builtin, + .token.inserted { + color: #50fa7b; + } + + .token.operator, + .token.entity, + .token.url, + .language-css .token.string, + .style .token.string, + .token.variable { + color: #f8f8f2; + } + + .token.atrule, + .token.attr-value, + .token.function, + .token.class-name { + color: #f1fa8c; + } + + .token.keyword { + color: #8be9fd; + } + + .token.regex, + .token.important { + color: #ffb86c; + } + + .token.important, + .token.bold { + font-weight: bold; + } + + .token.italic { + font-style: italic; + } + + .token.entity { + cursor: help; + } +}
A
src/assets/css/prism.css
@@ -0,0 +1,116 @@
+/* PrismJS 1.29.0 +https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+markup-templating+php */ +:where([data-theme='light']) { + & code[class*='language-'], + & pre[class*='language-'] { + color: #000; + background: 0 0; + text-shadow: 0 1px #fff; + 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; + } + + & code[class*='language-'] ::selection, + & code[class*='language-']::selection, + & pre[class*='language-'] ::selection, + & pre[class*='language-']::selection { + text-shadow: none; + background: #b3d4fc; + } + + @media print { + & code[class*='language-'], + & pre[class*='language-'] { + text-shadow: none; + } + } + + & pre[class*='language-'] { + padding: 1em; + margin: 0.5em 0; + overflow: auto; + } + :not(pre) > code[class*='language-'], + pre[class*='language-'] { + background: #f5f2f0; + } + :not(pre) > code[class*='language-'] { + padding: 0.1em; + border-radius: 0.3em; + white-space: normal; + } + .token.cdata, + .token.comment, + .token.doctype, + .token.prolog { + color: #708090; + } + .token.punctuation { + color: #999; + } + .token.namespace { + opacity: 0.7; + } + .token.boolean, + .token.constant, + .token.deleted, + .token.number, + .token.property, + .token.symbol, + .token.tag { + color: #905; + } + .token.attr-name, + .token.builtin, + .token.char, + .token.inserted, + .token.selector, + .token.string { + color: #690; + } + .language-css .token.string, + .style .token.string, + .token.entity, + .token.operator, + .token.url { + color: #9a6e3a; + background: hsla(0, 0%, 100%, 0.5); + } + .token.atrule, + .token.attr-value, + .token.keyword { + color: #07a; + } + .token.class-name, + .token.function { + color: #dd4a68; + } + .token.important, + .token.regex, + .token.variable { + color: #e90; + } + .token.bold, + .token.important { + font-weight: 700; + } + .token.italic { + font-style: italic; + } + .token.entity { + cursor: help; + } +}
A
src/assets/css/reset.css
@@ -0,0 +1,51 @@
+/* + 1. Use a more-intuitive box-sizing model. +*/ +*, *::before, *::after { + box-sizing: border-box; +} + +/* + 2. Remove default margin +*/ +* { + margin: 0; +} + +/* + Typographic tweaks! + 3. Add accessible line-height +*/ +body { + line-height: 1.5; + -webkit-font-smoothing: antialiased; +} + +/* + 5. Improve media defaults +*/ +img, picture, video, canvas, svg { + display: block; + max-width: 100%; +} + +/* + 6. Remove built-in form typography styles +*/ +input, button, textarea, select { + font: inherit; +} + +/* + 7. Avoid text overflows +*/ +p, h1, h2, h3, h4, h5, h6 { + overflow-wrap: break-word; +} + +/* + 8. Create a root stacking context +*/ +#root, #__next { + isolation: isolate; +}
A
src/assets/css/spacing.css
@@ -0,0 +1,385 @@
+:root { + --xxs: 0.125rem; + --xs: 0.25rem; + --sm: 0.5rem; + --md: 1rem; + --lg: 2rem; + --xl: 4rem; + --xxl: 7.5rem; +} + +.m-none { + margin: 0 !important; +} +.p-none { + padding: 0 !important; +} +.mt-none { + margin-block-start: 0 !important; +} +.pt-none { + padding-block-start: 0 !important; +} +.mr-none { + margin-inline-end: 0 !important; +} +.pr-none { + padding-inline-end: 0 !important; +} +.mb-none { + margin-block-end: 0 !important; +} +.pb-none { + padding-block-end: 0 !important; +} +.ml-none { + margin-inline-start: 0 !important; +} +.pl-none { + padding-inline-start: 0 !important; +} +.px-none { + padding-inline-start: 0 !important; + padding-inline-end: 0 !important; +} +.py-none { + padding-block-start: 0 !important; + padding-block-end: 0 !important; +} +.mx-none { + margin-inline-start: 0 !important; + margin-inline-end: 0 !important; +} +.my-none { + margin-block-start: 0 !important; + margin-block-end: 0 !important; +} + +.m-xxs { + margin: var(--xxs) !important; +} +.p-xxs { + padding: var(--xxs) !important; +} +.mt-xxs { + margin-block-start: var(--xxs) !important; +} +.pt-xxs { + padding-block-start: var(--xxs) !important; +} +.mr-xxs { + margin-inline-end: var(--xxs) !important; +} +.pr-xxs { + padding-inline-end: var(--xxs) !important; +} +.mb-xxs { + margin-block-end: var(--xxs) !important; +} +.pb-xxs { + padding-block-end: var(--xxs) !important; +} +.ml-xxs { + margin-inline-start: var(--xxs) !important; +} +.pl-xxs { + padding-inline-start: var(--xxs) !important; +} +.px-xxs { + padding-inline-start: var(--xxs) !important; + padding-inline-end: var(--xxs) !important; +} +.py-xxs { + padding-block-start: var(--xxs) !important; + padding-block-end: var(--xxs) !important; +} +.mx-xxs { + margin-inline-start: var(--xxs) !important; + margin-inline-end: var(--xxs) !important; +} +.my-xxs { + margin-block-start: var(--xxs) !important; + margin-block-end: var(--xxs) !important; +} + +.m-xs { + margin: var(--xs) !important; +} +.p-xs { + padding: var(--xs) !important; +} +.mt-xs { + margin-block-start: var(--xs) !important; +} +.pt-xs { + padding-block-start: var(--xs) !important; +} +.mr-xs { + margin-inline-end: var(--xs) !important; +} +.pr-xs { + padding-inline-end: var(--xs) !important; +} +.mb-xs { + margin-block-end: var(--xs) !important; +} +.pb-xs { + padding-block-end: var(--xs) !important; +} +.ml-xs { + margin-inline-start: var(--xs) !important; +} +.pl-xs { + padding-inline-start: var(--xs) !important; +} +.px-xs { + padding-inline-start: var(--xs) !important; + padding-inline-end: var(--xs) !important; +} +.py-xs { + padding-block-start: var(--xs) !important; + padding-block-end: var(--xs) !important; +} +.mx-xs { + margin-inline-start: var(--xs) !important; + margin-inline-end: var(--xs) !important; +} +.my-xs { + margin-block-start: var(--xs) !important; + margin-block-end: var(--xs) !important; +} + +.m-sm { + margin: var(--sm) !important; +} +.p-sm { + padding: var(--sm) !important; +} +.mt-sm { + margin-block-start: var(--sm) !important; +} +.pt-sm { + padding-block-start: var(--sm) !important; +} +.mr-sm { + margin-inline-end: var(--sm) !important; +} +.pr-sm { + padding-inline-end: var(--sm) !important; +} +.mb-sm { + margin-block-end: var(--sm) !important; +} +.pb-sm { + padding-block-end: var(--sm) !important; +} +.ml-sm { + margin-inline-start: var(--sm) !important; +} +.pl-sm { + padding-inline-start: var(--sm) !important; +} +.px-sm { + padding-inline-start: var(--sm) !important; + padding-inline-end: var(--sm) !important; +} +.py-sm { + padding-block-start: var(--sm) !important; + padding-block-end: var(--sm) !important; +} +.mx-sm { + margin-inline-start: var(--sm) !important; + margin-inline-end: var(--sm) !important; +} +.my-sm { + margin-block-start: var(--sm) !important; + margin-block-end: var(--sm) !important; +} + +.m-md { + margin: var(--md) !important; +} +.p-md { + padding: var(--md) !important; +} +.mt-md { + margin-block-start: var(--md) !important; +} +.pt-md { + padding-block-start: var(--md) !important; +} +.mr-md { + margin-inline-end: var(--md) !important; +} +.pr-md { + padding-inline-end: var(--md) !important; +} +.mb-md { + margin-block-end: var(--md) !important; +} +.pb-md { + padding-block-end: var(--md) !important; +} +.ml-md { + margin-inline-start: var(--md) !important; +} +.pl-md { + padding-inline-start: var(--md) !important; +} +.px-md { + padding-inline-start: var(--md) !important; + padding-inline-end: var(--md) !important; +} +.py-md { + padding-block-start: var(--md) !important; + padding-block-end: var(--md) !important; +} +.mx-md { + margin-inline-start: var(--md) !important; + margin-inline-end: var(--md) !important; +} +.my-md { + margin-block-start: var(--md) !important; + margin-block-end: var(--md) !important; +} + +.mlg { + margin: var(--lg) !important; +} +.plg { + padding: var(--lg) !important; +} +.mt-lg { + margin-block-start: var(--lg) !important; +} +.pt-lg { + padding-block-start: var(--lg) !important; +} +.mr-lg { + margin-inline-end: var(--lg) !important; +} +.pr-lg { + padding-inline-end: var(--lg) !important; +} +.mb-lg { + margin-block-end: var(--lg) !important; +} +.pb-lg { + padding-block-end: var(--lg) !important; +} +.ml-lg { + margin-inline-start: var(--lg) !important; +} +.pl-lg { + padding-inline-start: var(--lg) !important; +} +.px-lg { + padding-inline-start: var(--lg) !important; + padding-inline-end: var(--lg) !important; +} +.py-lg { + padding-block-start: var(--lg) !important; + padding-block-end: var(--lg) !important; +} +.mx-lg { + margin-inline-start: var(--lg) !important; + margin-inline-end: var(--lg) !important; +} +.my-lg { + margin-block-start: var(--lg) !important; + margin-block-end: var(--lg) !important; +} + +.m-xl { + margin: var(--xl) !important; +} +.p-xl { + padding: var(--xl) !important; +} +.mt-xl { + margin-block-start: var(--xl) !important; +} +.pt-xl { + padding-block-start: var(--xl) !important; +} +.mr-xl { + margin-inline-end: var(--xl) !important; +} +.pr-xl { + padding-inline-end: var(--xl) !important; +} +.mb-xl { + margin-block-end: var(--xl) !important; +} +.pb-xl { + padding-block-end: var(--xl) !important; +} +.ml-xl { + margin-inline-start: var(--xl) !important; +} +.pl-xl { + padding-inline-start: var(--xl) !important; +} +.px-xl { + padding-inline-start: var(--xl) !important; + padding-inline-end: var(--xl) !important; +} +.py-xl { + padding-block-start: var(--xl) !important; + padding-block-end: var(--xl) !important; +} +.mx-xl { + margin-inline-start: var(--xl) !important; + margin-inline-end: var(--xl) !important; +} +.my-xl { + margin-block-start: var(--xl) !important; + margin-block-end: var(--xl) !important; +} + +.m-xxl { + margin: var(--xxl) !important; +} +.p-xxl { + padding: var(--xxl) !important; +} +.mt-xxl { + margin-block-start: var(--xxl) !important; +} +.pt-xxl { + padding-block-start: var(--xxl) !important; +} +.mr-xxl { + margin-inline-end: var(--xxl) !important; +} +.pr-xxl { + padding-inline-end: var(--xxl) !important; +} +.mb-xxl { + margin-block-end: var(--xxl) !important; +} +.pb-xxl { + padding-block-end: var(--xxl) !important; +} +.ml-xxl { + margin-inline-start: var(--xxl) !important; +} +.pl-xxl { + padding-inline-start: var(--xxl) !important; +} +.px-xxl { + padding-inline-start: var(--xxl) !important; + padding-inline-end: var(--xxl) !important; +} +.py-xxl { + padding-block-start: var(--xxl) !important; + padding-block-end: var(--xxl) !important; +} +.mx-xxl { + margin-inline-start: var(--xxl) !important; + margin-inline-end: var(--xxl) !important; +} +.my-xxl { + margin-block-start: var(--xxl) !important; + margin-block-end: var(--xxl) !important; +}
A
src/assets/css/style.css
@@ -0,0 +1,906 @@
+@import url('open-props.min.css'); +@import url('reset.css'); +@import url('fonts.css'); +@import url('prism.css'); +@import url('prism-dracula.css'); +@import url('spacing.css'); + +/* ANCHOR Config +------------------------------------------------------------- */ + +:root { + color-scheme: light; + --_text-color: #1c1b19; + --_darker-text-color: #111110; + --_bg: #fff; + --_accent: var(--red-8); + --_border: #c6c6c6; + --_main-menu-bg: #eee; + --_bg-alt: var(--brown-0); + --_red-text: var(--red-11); + --_button-bg: var(--_accent); + --_button-outline: var(--red-2); + --_button-text: var(--_bg); + + --_text: 'Source Serif 4', 'Iowan Old Style', 'Georgia', Apple Garamond, + Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, + Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --_headings: 'Fraunces', 'Source Serif 4', Georgia, serif; + --_code: 'Source Code Pro', ui-monospace, monospace; + + --_li-spacing: 0.25em; +} + +/* Dark color scheme (Forced) */ +/* Enabled if forced with data-theme="dark" */ +[data-theme='dark'] { + color-scheme: dark; + --_text-color: #fff8f0; + --_darker-text-color: #f9c8ce; + --_bg: var(--gray-9); /* bg */ + --_bg-alt: #283331; + --_accent: #f7708e; + --_border: var(--gray-7); + --_red-text: #f9c8ce; + --_button-bg: var(--red-9); + --_button-text: #fff; +} + +[data-theme='light'] { + --shadow-color: 220 3% 15% !important; + --shadow-strength: 1% !important; + --inner-shadow-highlight: inset 0 -0.5px 0 0 #fff, inset 0 0.5px 0 0 #0001 !important; +} + +[data-theme='dark'] { + --shadow-color: 220 40% 2% !important; + --shadow-strength: 25% !important; + --inner-shadow-highlight: inset 0 -0.5px 0 0 #fff1, inset 0 0.5px 0 0 #0007 !important; +} + +/* ANCHOR Accessibility +------------------------------------------------------------- */ + +.sr-only, +.assistive-text { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; +} +.sr-only-focusable:active, +.sr-only-focusable:focus { + position: static; + width: auto; + height: auto; + margin: 0; + overflow: visible; + clip: auto; +} + +/* Hide elements with the `hidden` attribute */ +[hidden] { + display: none; +} + +.skip-link { + position: absolute; + top: 0; + left: 0; + display: inline-block; + opacity: 0; + pointer-events: none; +} + +.skip-link:focus { + opacity: 1; + pointer-events: auto; +} + +/* ANCHOR Global styles +------------------------------------------------------------- */ + +html { + background-color: var(--_bg); +} + +body { + display: flex; + flex-direction: column; + max-width: unset; + min-height: 100vh; + padding: unset; + -webkit-font-smoothing: subpixel-antialiased; + + [data-theme='dark'] & { + -webkit-font-smoothing: antialiased; + } +} + +.container { + max-width: 800px; + margin-inline: auto; + padding-inline: 1em; +} + +a { + color: var(--_text-color); + text-decoration-color: var(--_accent); + text-decoration-thickness: 1px; + text-underline-offset: 0.1em; + transition: + color 0.15s var(--ease-1), + text-decoration-color 0.15s var(--ease-1); + + &:hover, + &:focus-visible { + color: var(--_accent); + text-decoration-color: var(--_accent); + } +} + +[data-theme='dark'] { + a { + &:hover, + &:focus-visible { + color: var(--_red-text); + } + } +} + +main details { + border: 1px solid transparent; + border-radius: 0.5em; + overflow: hidden; + + &:hover, + &:focus { + border: 1px solid var(--_border); + } + + &[open] { + border: 1px solid var(--_border); + } + + /* the last thing in the details element should have 0 margin-bottom + the language thing is to increase specificity for code blocks */ + > &:last-child, + > [class*='language-']:last-child { + margin-block-end: 0; + } +} + +main summary { + padding: 0.5em; + cursor: pointer; + + &::marker { + color: var(--_accent); + } + + /* the first thing after the summary element should have 0.5em margin-top + the language thing is to increase specificity for code blocks */ + & + *, + & + [class*='language-'] { + margin-block-start: 0.5em; + } +} + +video, +iframe { + margin-block: 1.75em; + max-width: 100%; +} + +main img { + margin-block: 1.75em; + margin-inline: auto; + max-width: 100%; +} + +@media (min-width: 700px) { + .container { + padding-inline: 1.5em; + } +} + +/* Dark color scheme (Forced) */ +/* Enabled if forced with data-theme="dark" */ +[data-theme='dark'] { + & img { + opacity: 0.85; + transition: opacity 150ms linear; + } + + & img:hover { + opacity: 1; + } +} + +/* ANCHOR Header +------------------------------------------------------------- */ + +.site-header { + margin-block-end: var(--size-9); +} + +.logo-wrap { + margin-block-end: var(--size-5); + padding-block: var(--size-4); +} + +.site-title { + & a { + display: inline-block; + text-decoration: none; + } + + #logo-text, + #hero-wordmark { + font-family: var(--_headings); + } + + & a:hover #mascot { + opacity: 0; + } + + & a:hover #mascot-hover { + opacity: 1; + } + + & img, + & svg { + max-width: 350px; + width: 100%; + height: auto; + opacity: 1; + } +} + +@media (min-width: 1100px) { + .site-title { + position: relative; + transform: translateX(-112px); + } +} + +[data-theme='dark'] .hero { + opacity: 0.8; +} + +.main-menu { + border: 1px solid var(--_border); + border-radius: 0.5em; + box-shadow: var(--shadow-2); + + &:hover, + &:focus { + border: 1px solid var(--gray-7); + } + + &[open] { + border: 1px solid var(--gray-7); + padding-bottom: 1rem; + } + + & [aria-current='page'] { + text-decoration: none !important; + color: var(--_accent); + } +} + +.main-menu nav { + padding-inline: 0.75em; +} + +.main-menu summary { + padding: 0.5em; + cursor: pointer; + + &::marker { + color: var(--_accent); + } +} + +.main-menu ul { + margin-block-start: 0.25em; + margin-block-end: 0.25em; + padding-inline-start: 0; + padding-block-end: 0.5em; + list-style-type: none; +} + +.menu-heading { + margin-top: var(--size-2); +} + +/* Settings */ + +.settings { + margin-inline: 0.75em; +} + +.checkbox { + display: flex; + align-items: center; + gap: 0.25em; +} + +[data-theme='dark'] { + .main-menu { + &:hover, + &:focus, + &[open] { + border: 1px solid var(--gray-6); + } + } +} + +/* ANCHOR Typography +------------------------------------------------------------- */ + +:root { + border-top: none; /* remove Neat border */ + font-family: var(--_text); + color: var(--_text-color); +} + +main > *, +.stack > * { + margin-block: 0; +} + +main > * + *, +.stack > * + * { + margin-block-start: 1rem; +} + +h1, +h2, +h3, +h4 { + & a { + text-decoration: none; + color: var(--_text); + + &:hover, + &:focus { + text-decoration: underline; + } + } +} + +h1 { + margin-block-end: var(--size-7); + font-size: var(--size-7); +} + +h1, +h2 { + font-family: var(--_headings); + font-weight: normal; + line-height: 1.2; + text-wrap: pretty; +} + +h2 { + margin-block-start: 1.75em; + margin-block-end: 1.5rem; + font-size: var(--size-5); +} + +h3 { + margin-block-start: 1.5em; + font-size: 1.1rem; +} + +ul, +ol { + margin-block-start: var(--size-3); + padding-inline-start: 1.75em; +} + +ul ul, +ul ol, +ol ul, +ol ol { + margin-block-start: 0; +} + +li { + margin-block-start: var(--_li-spacing); +} + +li::marker { + color: var(--_accent); +} + +code { + display: inline-block; + font-family: var(--_code) !important; + font-size: 0.85em; + line-height: 1.5; + color: var(--_red-text); + + &:not(pre &) { + padding: 0 0.25em; + border-radius: 0.25em; + background-color: var(--red-0); + } +} + +pre code { + background-color: transparent; + color: inherit; +} + +pre[class*='language-'] > code { + display: block; + padding: 0; + font-size: 0.75em; +} + +pre, +pre[class*='language-'] { + margin-block: 1.75em; + padding: 1rem; + border: 1px solid var(--_border); + border-radius: 0.25em; + max-height: 600px; + box-shadow: var(--shadow-3); + color: #1c1b19; + scrollbar-color: var(--_border) transparent; + overflow: auto; +} + +details pre, +details pre[class*='language-'] { + border: none; + border-radius: 0; +} + +.token { + color: unset; +} + +.wrap-code code[class*='language-'], +.wrap-code [class*='language-'] { + white-space: pre-wrap; + /* word-break: break-word; */ +} + +/* font style utility classes */ +.sans-serif { + font-family: + -apple-system, + BlinkMacSystemFont, + avenir next, + avenir, + segoe ui, + helvetica neue, + helvetica, + Cantarell, + Ubuntu, + roboto, + noto, + arial, + sans-serif !important; +} + +.serif { + font-family: var(--_text) !important; +} + +.mono { + font-family: + Menlo, + Consolas, + Monaco, + Liberation Mono, + Lucida Console, + monospace !important; + font-size: 0.8rem; +} + +@media (min-width: 700px) { + :root { + font-size: 1.25em; + } + + pre, + pre[class*='language-'] { + margin-inline: -1em; + + details & { + margin-inline: auto; + } + } +} + +/* Dark color scheme (Forced) */ +/* Enabled if forced with data-theme="dark" */ +[data-theme='dark'] pre:not([class*='language-']) { + background-color: var(--gray-11); + border-color: var(--gray-8); +} + +[data-theme='dark'] pre, +[data-theme='dark'] pre[class*='language-'] { + color: var(--_red-text); +} + +[data-theme='dark'] code:not([class*='language-']) { + color: var(--_red-text); + background-color: var(--gray-11); +} + +[data-theme='dark'] mark { + background-color: #90d8ff40; + color: var(--_text-color); +} + +/* ANCHOR Components +------------------------------------------------------------- */ + +aside { + position: relative; + margin-block: var(--size-6); + margin-inline-start: var(--size-6); + padding: var(--size-5); + padding-inline-start: var(--size-7); + border: var(--border-size-2) solid var(--red-4); + border-radius: var(--radius-drawn-3); + font-size: 0.85em; + line-height: 1.45; + background-color: var(--red-0); + box-shadow: var(--shadow-3); + + /* border variations */ + &:nth-of-type(2) { + border-radius: var(--radius-drawn-4); + } + &:nth-of-type(3) { + border-radius: var(--radius-drawn-5); + } + &:nth-of-type(4) { + border-radius: var(--radius-drawn-6); + } + &:nth-of-type(5) { + border-radius: var(--radius-drawn-1); + } + &:nth-of-type(6) { + border-radius: var(--radius-drawn-2); + } + + * { + margin: 0; + } + + & p { + orphans: 2; + } + + > * + * { + margin-block-start: 1rem; + } + + & li { + margin-block-start: var(--_li-spacing); + } + + & pre, + & pre[class*='language-'] { + margin-block: 1rem 0; + margin-inline: 0; + } + + /* mascot */ + --mascot-multiple: 7; + + &:before { + content: ' '; + position: absolute; + top: calc(120px / var(--mascot-multiple)); + left: calc(-310px / var(--mascot-multiple)); + height: calc(291px / var(--mascot-multiple)); + width: calc(464px / var(--mascot-multiple)); + background-image: url('../img/design/mascot-aside-back.svg'); + background-position: center; + background-size: contain; + background-repeat: no-repeat; + z-index: -1; + } + + &:after { + content: ' '; + position: absolute; + top: calc(-8px / var(--mascot-multiple)); + left: calc(-30px / var(--mascot-multiple)); + height: calc(535px / var(--mascot-multiple)); + width: calc(156px / var(--mascot-multiple)); + background-image: url('../img/design/mascot-aside-front.svg'); + background-position: center; + background-size: contain; + background-repeat: no-repeat; + z-index: 1; + } +} + +[data-theme='light'] aside code:not(pre code) { + background-color: #00000011; +} + +.aside-label { + font-family: var(--_text); + font-weight: bold; + font-size: 0.85em; + line-height: 1; + text-transform: uppercase; + letter-spacing: 0.085em; + color: var(--_text-color); + + & + * { + margin-block-start: 0.5rem; + } +} + +@media (min-width: 900px) { + aside { + --mascot-multiple: 5; + margin-inline: 0; + } +} + +[data-theme='dark'] aside { + border-color: var(--gray-6); + background-color: var(--gray-8); +} +[data-theme='dark'] aside code:not(pre code) { + background-color: #f7708e33; +} + +/* ---------------------------------------------------------- */ + +figure { + margin-inline: 0; + + & img { + display: block; + margin-inline: auto; + max-width: 100%; + } +} + +figcaption { + margin-block-start: 0.5rem; + font-size: 0.85em; +} + +/* ---------------------------------------------------------- */ + +elevator-button a { + display: flex; + align-items: center; + justify-content: center; + position: fixed; + bottom: 1rem; + right: 1rem; + width: 2.5rem; + height: 2.5rem; + border-radius: 50%; + box-shadow: 0 0 0.5rem 0.25rem #00000011; + font-size: 1.5rem; + font-weight: bold; + background-color: var(--_text-color); + color: var(--_bg); + text-decoration: none; + opacity: 0; + transition: opacity 0.2s linear; + pointer-events: none; + + &.active { + opacity: 1; + pointer-events: auto; + } + + &:before { + content: '↑'; + color: var(--_bg); + } +} + +.elevator-arrow { + color: var(--_bg); +} + +/* ---------------------------------------------------------- */ + +.chapter-nav { + display: flex; + justify-content: space-between; + flex-direction: column; + margin-block: 1.5rem 0; + border-top: 1px solid var(--_border); + text-align: center; + + & a { + padding: 1em 1em; + width: 100%; + transition: + background-color 0.1s var(--ease-1), + color 0.1s var(--ease-1), + text-decoration-color 0.1s var(--ease-1); + + &:hover, + &:focus { + text-decoration-color: var(--_red-text); + background-color: var(--red-0); + color: var(--_red-text); + } + + &:has(+ a) { + border-block-start: 1px solid var(--_border); + } + } +} + +[data-theme='dark'] { + .chapter-nav a { + &:hover, + &:focus { + text-decoration-color: var(--_accent); + background-color: var(--gray-10); + } + } +} + +@media (min-width: 700px) { + .chapter-nav { + margin-block-start: 3rem; + flex-direction: row; + + & a:first-child { + order: 1; + } + + & a:has(+ a) { + border-block-start: none; + border-inline-start: 1px solid var(--_border); + } + } +} + +/* ANCHOR Forms +------------------------------------------------------------- */ + +/* buttons */ +button, +a.button { + display: inline-block; + position: relative; + padding: 0.5em 1em; + border-radius: var(--radius-2); + box-shadow: var(--shadow-3); + text-decoration: none; + background-color: var(--_button-bg); + color: var(--_button-text); + outline: 0 solid var(--red-2); + transition: outline-width 0.2s var(--ease-1); + text-align: center; + + &:hover, + &:focus-visible { + color: #fff; + outline: 8px solid var(--red-2); + } +} + +form button[type='submit'] { + display: inline-block; + width: unset; +} + +[data-theme='dark'] { + & button, + & a.button { + outline-color: var(--gray-7); + } +} + +/* ANCHOR Promo +------------------------------------------------------------- */ + +.promo { + padding-block: 3rem; + border-block-start: 1px solid #e0cab1; + background-color: var(--_bg-alt); + + & + .site-footer { + margin-block-start: 0; + padding-block-start: 1rem; + } +} + +.promo-title { + margin-block-end: var(--size-7); + font-size: 1.125rem; + font-weight: bold; +} + +/* Dark color scheme (Forced) */ +/* Enabled if forced with data-theme="dark" */ +[data-theme='dark'] { + .promo { + border-block-start: 1px solid #3e5d59; + background-color: #283331; + color: #fff8f0; + } +} + +/* ANCHOR Home +------------------------------------------------------------- */ + +.hero { + margin-inline: auto; + + max-width: 1400px; + & svg { + max-width: 100%; + } + + #hero-wordmark, + #logo-text { + font-family: var(--_headings); + } +} + +g#rocket, +g#donut-before, +g#donut-after, +g#coffee-before, +g#coffee-after { + &:hover { + cursor: pointer; + } +} + +#cloud { + pointer-events: none; +} + +.home-buttons { + display: flex; + flex-wrap: wrap; + + & a { + display: block; + margin-block-end: 0.5rem; + width: 100%; + } +} + +@media (min-width: 500px) { + .home-buttons { + flex-wrap: nowrap; + + & a { + margin-inline-end: 1rem; + width: auto; + } + } +} + +/* ANCHOR Footer +------------------------------------------------------------- */ + +.site-footer { + margin-block-start: 3rem; + padding-block: 2rem; + /* border-block-start: 1px solid var(--border); */ + font-size: 0.85em; + background-color: var(--_bg-alt); +}
A
src/assets/img/design/hero-mobile.svg
@@ -0,0 +1,169 @@
+ +<svg id="hero-mobile" viewBox="0 0 3000 1575" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <rect id="path-r14ozuxzx1-1" x="0" y="0" width="3000" height="1575"></rect> + </defs> + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g id="BWatson_OG_03"> + <mask id="mask-r14ozuxzx1-2" fill="white"> + <use xlink:href="#path-r14ozuxzx1-1"></use> + </mask> + <g id="Rectangle"></g> + <g id="Group" mask="url(#mask-r14ozuxzx1-2)"> + <g transform="translate(-157.55, -157.55)"> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#BBDEFB" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="58.65" y="17.18" width="3197.81" height="1847.5"></rect> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#FFE0B2" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="58.65" y="1216.84" width="3197.81" height="647.85"></rect> + <circle id="Oval" stroke="#465362" stroke-width="10" fill="#81C784" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="2694.33" cy="828.5" r="51.45"></circle> + <line x1="2694.33" y1="777.04" x2="2694.33" y2="5.68434189e-14" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <circle id="Oval" stroke="#465362" stroke-width="10" fill="#BB9C87" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="2942.77" cy="828.5" r="91.14"></circle> + <ellipse id="Oval" stroke="#465362" stroke-width="10" fill="#ECEFF1" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" transform="translate(2942.7393, 828.4803) rotate(-72.02) translate(-2942.7393, -828.4803)" cx="2942.73932" cy="828.480294" rx="62.9" ry="166.44"></ellipse> + <path d="M3029.46,856.63 C3013.92,904.51 2840.54,848.24 2856.08,800.36 C2871.62,752.48 2923.03,726.27 2970.9,741.81 C3018.78,757.35 3044.99,808.76 3029.45,856.63 L3029.46,856.63 Z" id="Path" stroke="#465362" stroke-width="10" fill="#BB9C87" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <line x1="2944.52" y1="737.33" x2="2944.52" y2="24.53" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <circle id="Oval" stroke="#465362" stroke-width="10" fill="#FF8080" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="2869.23" cy="658.59" r="42.66"></circle> + <line x1="2869.23" y1="615.93" x2="2869.23" y2="1.07" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="2716.21" y1="562.46" x2="2716.21" y2="57.97" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <circle id="Oval" stroke="#465362" stroke-width="10" fill="#FFF176" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="2759.19" cy="405.21" r="134.15"></circle> + <circle id="Oval" stroke="#465362" stroke-width="10" fill="#CFD8DC" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="2575.72" cy="501.65" r="43.99"></circle> + <path d="M2578.73,689.91 C2578.73,700.64 2576.2,710.77 2571.69,719.75 C2567.73,727.67 2562.24,734.69 2555.61,740.42 C2543.92,750.52 2528.68,756.63 2512.01,756.63 C2483.82,756.63 2459.71,739.15 2449.94,714.43 C2447.74,708.85 2446.26,702.91 2445.63,696.71 C2445.41,694.47 2445.29,692.21 2445.29,689.91 C2445.29,686.81 2445.5,683.75 2445.92,680.76 C2447.41,669.85 2451.54,659.78 2457.65,651.22 C2469.75,634.26 2489.59,623.2 2512.01,623.2 C2534.43,623.2 2554.27,634.26 2566.37,651.22 C2572.48,659.78 2576.61,669.85 2578.1,680.76 C2578.52,683.75 2578.73,686.81 2578.73,689.91 L2578.73,689.91 Z" id="Path" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M3058.14,533.16 C3058.14,543.43 3055.84,553.15 3051.71,561.84 C3046.81,572.21 3039.32,581.12 3030.08,587.73 C3019.09,595.6 3005.61,600.24 2991.06,600.24 C2976.51,600.24 2963.03,595.6 2952.04,587.73 C2941.07,579.86 2932.56,568.77 2927.91,555.84 C2925.36,548.76 2923.98,541.13 2923.98,533.16 C2923.98,510.67 2935.06,490.76 2952.05,478.59 C2957.85,474.43 2964.34,471.18 2971.31,469.04 C2977.56,467.12 2984.19,466.09 2991.06,466.09 C3005.61,466.09 3019.08,470.73 3030.07,478.6 C3039.31,485.22 3046.8,494.12 3051.7,504.49 C3055.82,513.19 3058.13,522.91 3058.13,533.17 L3058.14,533.16 Z" id="Path" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2986.9,505.67 C2986.9,533.74 2964.15,556.49 2936.08,556.49 C2933.3,556.49 2930.57,556.26 2927.92,555.84 C2925.37,548.76 2923.99,541.13 2923.99,533.16 C2923.99,510.67 2935.07,490.76 2952.06,478.59 C2957.86,474.43 2964.35,471.18 2971.32,469.04 C2980.93,478.28 2986.91,491.28 2986.91,505.67 L2986.9,505.67 Z" id="Path" stroke="#465362" stroke-width="10" fill="#81C784" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M3058.14,533.16 C3058.14,543.43 3055.84,553.15 3051.71,561.84 C3040.46,557.19 3032.53,546.1 3032.53,533.16 C3032.53,520.22 3040.46,509.14 3051.71,504.48 C3055.83,513.18 3058.14,522.9 3058.14,533.16 Z" id="Path" stroke="#465362" stroke-width="10" fill="#81C784" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M3030.08,478.59 C3019.09,486.46 3005.62,491.1 2991.07,491.1 C2976.52,491.1 2963.05,486.46 2952.06,478.59 C2963.05,470.72 2976.52,466.08 2991.07,466.08 C3005.62,466.08 3019.09,470.72 3030.08,478.59 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M3030.08,587.73 C3019.09,595.6 3005.61,600.24 2991.06,600.24 C2976.51,600.24 2963.03,595.6 2952.04,587.73 C2963.03,579.85 2976.51,575.22 2991.06,575.22 C3005.61,575.22 3019.09,579.86 3030.08,587.73 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2805.47,651.72 C2805.47,701.02 2765.51,740.98 2716.21,740.98 C2691.74,740.98 2669.57,731.13 2653.45,715.17 C2645.43,707.26 2638.91,697.82 2634.35,687.35 C2629.59,676.44 2626.95,664.39 2626.95,651.72 C2626.95,637.31 2630.36,623.7 2636.44,611.65 C2641.81,600.97 2649.27,591.51 2658.29,583.82 C2673.87,570.51 2694.1,562.47 2716.21,562.47 C2738.32,562.47 2758.54,570.51 2774.13,583.82 C2783.15,591.51 2790.61,600.97 2795.98,611.65 C2802.06,623.7 2805.47,637.32 2805.47,651.72 L2805.47,651.72 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFCC80" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <ellipse id="Oval" stroke="#465362" stroke-width="10" fill="#FF8080" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="2744.55" cy="677.6" rx="30.61" ry="13.92"></ellipse> + <path d="M2795.98,611.64 L2636.44,611.64 C2641.81,600.96 2649.27,591.5 2658.29,583.81 L2774.13,583.81 C2783.15,591.5 2790.61,600.96 2795.98,611.64 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFB74D" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2696.12,701.25 C2696.12,705.09 2694.57,708.57 2692.05,711.1 C2689.52,713.62 2686.05,715.17 2682.2,715.17 L2653.44,715.17 C2645.42,707.26 2638.9,697.82 2634.34,687.35 L2682.2,687.35 C2689.89,687.35 2696.12,693.58 2696.12,701.26 L2696.12,701.25 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFB74D" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <line x1="2759.19" y1="271.06" x2="2759.19" y2="33.45" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="2991.06" y1="466.08" x2="2991.06" y2="73.58" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="2575.72" y1="454.74" x2="2575.72" y2="57.78" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="2512.01" y1="623.2" x2="2512.01" y2="57.78" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <polygon id="Path" stroke="#465362" stroke-width="10" fill="#FFB74D" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" points="396.92 816.34 343.43 816.34 289.95 816.34 289.95 543.41 311.22 425.22 375.65 425.22 396.92 543.41"></polygon> + <path d="M337.11,887.67 L309.96,887.67 C309.96,871.63 316.04,858.63 323.54,858.63 C331.04,858.63 337.12,871.63 337.12,887.67 L337.11,887.67 Z" id="Path" stroke="#465362" stroke-width="10" fill="#465362" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M377.25,887.67 L350.1,887.67 C350.1,871.63 356.18,858.63 363.68,858.63 C371.18,858.63 377.26,871.63 377.26,887.67 L377.25,887.67 Z" id="Path" stroke="#465362" stroke-width="10" fill="#465362" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M361.95,290.55 C359.35,268.28 355.83,238 353.22,215.64 C352.64,210.67 348.44,206.93 343.44,206.93 L343.44,206.93 C338.44,206.93 334.23,210.68 333.66,215.64 L324.93,290.54 C316.49,296.41 310.96,306.17 310.96,317.22 L310.96,425.21 L375.92,425.21 L375.92,317.22 C375.92,306.16 370.39,296.4 361.95,290.54 L361.95,290.55 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M289.95,816.34 L396.92,816.34 L396.92,829.51 C396.92,846.32 383.27,859.97 366.46,859.97 L320.4,859.97 C303.59,859.97 289.94,846.32 289.94,829.51 L289.94,816.34 L289.94,816.34 L289.95,816.34 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <circle id="Oval" stroke="none" fill="#1565C0" fill-rule="nonzero" cx="343.43" cy="361.23" r="19.75"></circle> + <rect id="Rectangle" stroke="none" fill="#465362" fill-rule="nonzero" x="326.26" y="559.66" width="17.17" height="17.17"></rect> + <rect id="Rectangle" stroke="none" fill="#465362" fill-rule="nonzero" x="343.43" y="576.84" width="17.17" height="17.17"></rect> + <rect id="Rectangle" stroke="none" fill="#FFFFFF" fill-rule="nonzero" transform="translate(352.025, 568.255) rotate(180) translate(-352.025, -568.255)" x="343.44" y="559.67" width="17.17" height="17.17"></rect> + <rect id="Rectangle" stroke="none" fill="#FFFFFF" fill-rule="nonzero" transform="translate(334.845, 585.425) rotate(180) translate(-334.845, -585.425)" x="326.26" y="576.84" width="17.17" height="17.17"></rect> + <rect id="Rectangle" stroke="none" fill="#465362" fill-rule="nonzero" x="326.26" y="751.43" width="17.17" height="17.17"></rect> + <rect id="Rectangle" stroke="none" fill="#465362" fill-rule="nonzero" x="343.43" y="768.6" width="17.17" height="17.17"></rect> + <rect id="Rectangle" stroke="none" fill="#FFFFFF" fill-rule="nonzero" transform="translate(352.025, 760.015) rotate(180) translate(-352.025, -760.015)" x="343.44" y="751.43" width="17.17" height="17.17"></rect> + <rect id="Rectangle" stroke="none" fill="#FFFFFF" fill-rule="nonzero" transform="translate(334.845, 777.195) rotate(180) translate(-334.845, -777.195)" x="326.26" y="768.61" width="17.17" height="17.17"></rect> + <polygon id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" points="282.31 868.04 244.4 868.04 239.35 892.7 287.36 892.7"></polygon> + <polygon id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" points="289.95 838.15 236.76 838.15 229.67 872.76 297.04 872.76"></polygon> + <polygon id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" points="263.35 565.81 236.76 630.08 236.76 838.16 289.95 838.16 289.95 630.08"></polygon> + <line x1="236.76" y1="632.92" x2="289.95" y2="632.92" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="236.76" y1="734.12" x2="289.95" y2="734.12" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="236.76" y1="838.16" x2="289.95" y2="838.16" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <polygon id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" points="442.47 868.04 404.56 868.04 399.5 892.7 447.52 892.7"></polygon> + <polygon id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" points="450.11 838.15 396.92 838.15 389.83 872.76 457.19 872.76"></polygon> + <polygon id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" points="423.51 565.81 396.92 630.08 396.92 838.16 450.11 838.16 450.11 630.08"></polygon> + <line x1="396.92" y1="632.92" x2="450.11" y2="632.92" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="396.92" y1="734.12" x2="450.11" y2="734.12" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="396.92" y1="838.16" x2="450.11" y2="838.16" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <path d="M-5.68434189e-14,892.7 L843.96,892.7 C858.41,892.7 870.13,904.43 870.13,918.87 L870.13,918.87 C870.13,933.32 858.4,945.04 843.96,945.04 L-5.68434189e-14,945.04 L-5.68434189e-14,892.69 L-5.68434189e-14,892.69 L-5.68434189e-14,892.7 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M1904.67,1343.62 L1904.67,1360.64 C1904.67,1371.3 1896.08,1380.91 1884.37,1380.91 L1398.59,1380.91 C1386.88,1380.91 1378.29,1371.3 1378.29,1360.64 L1378.29,1343.62 C1378.29,1340.82 1378.88,1337.94 1380.17,1335.15 L1416.29,1256.61 C1419.6,1249.41 1426.8,1244.8 1434.72,1244.8 L1848.24,1244.8 C1856.16,1244.8 1863.35,1249.41 1866.66,1256.61 L1902.79,1335.15 C1904.08,1337.94 1904.67,1340.82 1904.67,1343.62 L1904.67,1343.62 Z" id="Path" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="1478.34" y="930.63" width="320.39" height="357.55"></rect> + <path d="M2271.84,349.73 L2271.84,1122.23 C2271.84,1148.42 2250.61,1169.65 2224.42,1169.65 L1052.64,1169.65 C1026.44,1169.65 1005.21,1148.42 1005.21,1122.23 L1005.21,349.73 C1005.21,323.54 1026.44,302.3 1052.64,302.3 L2224.42,302.3 C2250.61,302.3 2271.84,323.54 2271.84,349.73 Z" id="Path" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2271.84,349.73 L2271.84,1038.67 L1005.21,1038.67 L1005.21,349.73 C1005.21,323.54 1026.44,302.3 1052.64,302.3 L2224.42,302.3 C2250.61,302.3 2271.84,323.54 2271.84,349.73 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#FF8080" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" transform="translate(1638.535, 668.87) rotate(90) translate(-1638.535, -668.87)" x="1318.735" y="82.325" width="639.6" height="1173.09"></rect> + <path d="M2067.89,1590.51 L2009.02,1462.54 C2003.62,1450.82 1991.9,1443.3 1979,1443.3 L1298.06,1443.3 C1285.16,1443.3 1273.44,1450.81 1268.04,1462.54 L1209.17,1590.51 C1207.07,1595.06 1206.1,1599.75 1206.1,1604.32 L1206.1,1611.17 C1206.1,1628.56 1220.11,1644.21 1239.19,1644.21 L2037.86,1644.21 C2056.94,1644.21 2070.95,1628.56 2070.95,1611.17 L2070.95,1604.32 C2070.95,1599.74 2069.98,1595.06 2067.88,1590.51 L2067.89,1590.51 Z" id="Path" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2035.31,1568.41 L1976.93,1441.49 C1975.53,1438.43 1972.45,1436.47 1969.09,1436.47 L1307.98,1436.47 C1304.62,1436.47 1301.54,1438.44 1300.14,1441.49 L1241.76,1568.41 C1241.17,1569.71 1240.94,1570.92 1240.94,1572.02 L1240.94,1586.47 C1240.94,1588.51 1241.72,1590.14 1242.34,1591.09 C1243.29,1592.58 1245.49,1595.06 1249.6,1595.06 L2027.48,1595.06 C2031.59,1595.06 2033.78,1592.57 2034.74,1591.09 C2035.36,1590.14 2036.14,1588.51 2036.14,1586.47 L2036.14,1572.02 C2036.14,1570.92 2035.91,1569.71 2035.32,1568.41 L2035.31,1568.41 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#FFF59D" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="506.13" y="276.82" width="106.33" height="615.88"></rect> + <line x1="506.13" y1="310.49" x2="612.46" y2="310.49" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="506.13" y1="855.46" x2="612.46" y2="855.46" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <path d="M545.16,509.38 C541.12,509.31 540.09,509.09 538.33,507.98 C536.05,506.51 534.73,504.01 534.73,501.29 C534.73,498.57 536.05,496 538.33,494.53 C540.09,493.43 541.49,493.13 545.16,493.13 L574.7,493.13 C578.15,493.13 579.62,493.5 581.31,494.82 C583.29,496.36 584.47,498.71 584.47,501.21 C584.47,503.71 583.22,506.28 581.31,507.75 C579.55,509.07 578.52,509.37 574.33,509.37 L567.42,509.37 L567.42,519.21 L574.11,519.21 C578,519.21 579.47,519.5 581.31,520.9 C583.29,522.37 584.47,524.65 584.47,527.15 C584.47,529.65 583.29,532.15 581.38,533.61 C579.76,534.86 577.85,535.37 574.69,535.37 L545.01,535.37 C541.63,535.37 540.31,535.08 538.62,534.05 C536.2,532.58 534.73,530.01 534.73,527.22 C534.73,524.65 535.91,522.22 537.96,520.75 C539.72,519.5 541.12,519.21 545.01,519.21 L552.06,519.21 L552.06,509.37 L545.15,509.37 L545.16,509.38 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M569.04,548.91 C569.04,546.12 569.7,544.28 571.17,542.81 C572.71,541.34 574.55,540.53 576.53,540.53 C579.32,540.53 582.26,542.37 583.29,544.72 C584.02,546.41 584.1,547.07 584.1,553.46 L584.1,569.77 C584.1,572.803333 584.05,574.64 583.95,575.28 C583.44,579.17 580.42,581.89 576.6,581.89 C574.47,581.89 572.27,580.86 570.8,579.25 C569.62,578 569.04,575.94 569.04,573 L569.04,569.4 L544.65,569.4 C541.71,569.4 540.09,569.03 538.4,568 C536.05,566.53 534.73,564.11 534.73,561.31 C534.73,558.51 535.98,556.17 538.11,554.62 C539.8,553.52 541.2,553.22 544.5,553.22 L569.04,553.22 L569.04,548.89 L569.04,548.91 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M580.13,619.22 C582.7,620.47 584.46,623.33 584.46,626.35 C584.46,628.33 583.58,630.54 582.26,631.93 C580.94,633.33 579.54,633.99 576.9,634.43 L545.31,640.01 C544.28,640.23 543.33,640.3 542.59,640.3 C538.18,640.3 534.73,636.77 534.73,632.37 C534.73,628.26 537.23,625.02 540.9,624.36 L550.08,622.52 L541.41,619.36 C537,617.74 534.72,614.88 534.72,611.06 C534.72,607.24 536.78,604.52 541.33,602.83 L550.07,599.6 L542.28,598.28 C537.58,597.47 534.71,594.39 534.71,590.2 C534.71,585.42 538.38,582.04 543.53,582.04 C544.19,582.04 544.85,582.11 545.51,582.19 L576.88,587.77 C581.58,588.58 584.45,591.52 584.45,595.7 C584.45,599.15 582.32,602.39 579.01,603.78 L562.77,611.05 L580.11,619.21 L580.13,619.22 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M550.23,669.98 C550.23,672.7 549.79,674.24 548.76,675.71 C547.36,677.62 545.09,678.8 542.74,678.8 C540.61,678.8 538.33,677.84 536.94,676.3 C535.62,674.83 535.1,673.14 535.1,670.35 L535.1,654.92 C535.1,651.69 535.91,649.56 537.67,648.09 C539.87,646.11 540.98,645.89 547.74,645.89 L575.37,645.89 C580.88,645.89 584.48,649.05 584.48,653.9 C584.48,656.4 583.3,658.82 581.54,660.22 C579.56,661.69 578.09,662.06 573.46,662.06 L550.24,662.06 L550.24,669.99 L550.23,669.98 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#A5D6A7" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="612.46" y="276.82" width="106.33" height="615.88"></rect> + <line x1="612.46" y1="310.49" x2="718.79" y2="310.49" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="612.46" y1="855.46" x2="718.79" y2="855.46" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <path d="M646.64,562.5 C642.53,557.72 640.17,551.63 640.17,545.38 C640.17,531.05 651.63,519.45 665.81,519.45 C679.99,519.45 691.6,531.13 691.6,545.46 C691.6,551.41 689.54,557.14 685.65,561.84 C682.49,565.81 679.18,567.79 675.95,567.79 C671.54,567.79 667.87,564.19 667.87,559.71 C667.87,557.8 668.68,555.74 669.85,554.64 L672.42,552.29 C674.33,550.53 675.36,547.96 675.36,545.31 C675.36,539.95 671.17,535.69 665.81,535.69 C660.45,535.69 656.26,539.95 656.26,545.24 C656.26,547.88 657.44,550.53 659.49,552.44 L661.25,554.13 C662.65,555.45 663.6,557.66 663.6,559.71 C663.6,563.97 659.85,567.79 655.67,567.79 C652.73,567.79 649.65,565.95 646.63,562.5 L646.64,562.5 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M652.59,572.05 C656.7,572.05 659.94,575.28 659.94,579.4 C659.94,581.38 659.28,583.07 657.59,585.13 C654.87,588.66 654.58,589.1 654.58,590.27 C654.58,591.52 655.46,592.33 656.71,592.33 C657.59,592.33 658.18,591.96 658.77,591.08 C659.06,590.64 659.21,590.42 660.17,587.85 C660.61,586.53 661.05,585.21 661.57,583.88 C664.07,576.75 668.7,573.23 675.53,573.23 C685.08,573.23 691.62,580.58 691.62,591.23 C691.62,600.05 686.92,606.95 680.89,606.95 C677,606.95 674.2,604.31 674.2,600.63 C674.2,598.43 674.93,596.66 676.99,593.94 C678.39,592.25 678.75,591.44 678.75,590.56 C678.75,589.53 677.87,588.65 676.84,588.65 C675.37,588.65 674.71,589.68 673.46,593.5 C672.21,597.69 670.23,601.66 668.32,603.93 C665.82,606.94 661.41,608.85 656.79,608.85 C652.17,608.85 648.12,607.16 645.11,604.22 C641.8,600.91 640.19,596.51 640.19,590.48 C640.19,580.05 645.63,572.04 652.61,572.04 L652.59,572.05 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M652.59,613.49 C656.7,613.49 659.94,616.72 659.94,620.84 C659.94,622.82 659.28,624.51 657.59,626.57 C654.87,630.1 654.58,630.54 654.58,631.71 C654.58,632.96 655.46,633.77 656.71,633.77 C657.59,633.77 658.18,633.4 658.77,632.52 C659.06,632.08 659.21,631.86 660.17,629.29 C660.61,627.97 661.05,626.65 661.57,625.32 C664.07,618.19 668.7,614.67 675.53,614.67 C685.08,614.67 691.62,622.02 691.62,632.67 C691.62,641.49 686.92,648.39 680.89,648.39 C677,648.39 674.2,645.75 674.2,642.07 C674.2,639.87 674.93,638.1 676.99,635.38 C678.39,633.69 678.75,632.88 678.75,632 C678.75,630.97 677.87,630.09 676.84,630.09 C675.37,630.09 674.71,631.12 673.46,634.94 C672.21,639.13 670.23,643.1 668.32,645.37 C665.82,648.38 661.41,650.29 656.79,650.29 C652.17,650.29 648.12,648.6 645.11,645.66 C641.8,642.35 640.19,637.95 640.19,631.92 C640.19,621.49 645.63,613.48 652.61,613.48 L652.59,613.49 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M429.39,1494.79 C344.79,1494.79 276.2,1523.32 276.2,1558.52 L276.2,1564.61 C276.2,1599.81 344.79,1628.34 429.39,1628.34 C513.99,1628.34 582.58,1599.81 582.58,1564.61 L582.58,1558.52 C582.58,1523.32 513.99,1494.79 429.39,1494.79 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFB74D" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <circle id="Oval" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="529.32" cy="1406.02" r="57.79"></circle> + <path d="M429.39,1312.86 C362.12,1312.86 307.59,1335.54 307.59,1363.53 L307.59,1539.67 C307.59,1567.65 362.12,1590.34 429.39,1590.34 C496.66,1590.34 551.19,1567.66 551.19,1539.67 L551.19,1363.53 C551.19,1335.55 496.66,1312.86 429.39,1312.86 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M532.88,1356.9 C532.51,1358.53 527.37,1365.91 509.18,1373.32 C508.61,1373.55 508.03,1373.78 507.43,1374.01 C486.53,1382.16 458.8,1386.65 429.38,1386.65 C399.96,1386.65 372.24,1382.16 351.34,1374.01 C350.75,1373.78 350.15,1373.55 349.58,1373.32 C331.39,1365.9 326.26,1358.53 325.89,1356.9" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M509.19,1373.31 C508.62,1373.54 508.04,1373.77 507.44,1374 C486.54,1382.15 458.81,1386.64 429.39,1386.64 C399.97,1386.64 372.25,1382.15 351.35,1374 C350.76,1373.77 350.16,1373.54 349.59,1373.31 C350.16,1373.07 350.76,1372.84 351.35,1372.61 C372.25,1364.46 399.98,1359.98 429.39,1359.98 C458.8,1359.98 486.54,1364.47 507.44,1372.61 C508.03,1372.84 508.62,1373.07 509.19,1373.31 Z" id="Path" stroke="#465362" stroke-width="10" fill="#B9937E" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M443.18,1435.72 C446.45,1445.66 449.73,1455.55 453,1465.39 C463.59,1464.76 474.15,1463.61 484.65,1461.94 C494.08,1460.38 497.97,1471.67 490.37,1478.68 C481.89,1486.39 473.37,1493.76 464.83,1500.78 C468.09,1510.5 471.35,1520.17 474.61,1529.8 C477.53,1538.45 467.23,1547.31 459.54,1542.3 C450.99,1536.78 442.41,1530.92 433.83,1524.72 C425.25,1530.92 416.68,1536.78 408.12,1542.3 C400.43,1547.31 390.13,1538.45 393.05,1529.8 C396.31,1520.18 399.57,1510.51 402.83,1500.78 C394.28,1493.75 385.76,1486.39 377.29,1478.68 C369.69,1471.67 373.58,1460.38 383.01,1461.94 C393.51,1463.61 404.07,1464.76 414.66,1465.39 C417.93,1455.55 421.2,1445.66 424.48,1435.72 C427.42,1426.87 440.24,1426.87 443.18,1435.72 L443.18,1435.72 Z" id="Path" stroke="none" fill="#FFB74D" fill-rule="nonzero"></path> + <circle id="Oval" stroke="none" fill="#FFB74D" fill-rule="nonzero" cx="377.02" cy="1427.64" r="10.69"></circle> + <circle id="Oval" stroke="none" fill="#FFB74D" fill-rule="nonzero" cx="519.87" cy="1494.79" r="10.69"></circle> + <circle id="Oval" stroke="none" fill="#FFB74D" fill-rule="nonzero" cx="361.35" cy="1494.79" r="4.98"></circle> + <circle id="Oval" stroke="none" fill="#FFB74D" fill-rule="nonzero" cx="492.23" cy="1416.96" r="15.92"></circle> + <circle id="Oval" stroke="none" fill="#FFB74D" fill-rule="nonzero" cx="341.42" cy="1529.63" r="8.16"></circle> + <path d="M2960.51087,1360.04 L2960.11,1388.43 C2960.1,1389.21 2959.98,1389.99 2959.75,1390.78 L2902.17,1585.76 C2897.66,1601.03 2876,1611.63 2854.05,1608.93 L2675.08,1586.95 C2659.46,1585.04 2650.29,1576.68 2650.42842,1566.62 L2650.83,1538.22 C2650.88,1534.87 2651.95,1531.34 2654.16,1527.8 L2768.33,1344.56 C2773.38,1336.46 2789.74,1331.18 2805.06,1332.58 L2935.8,1344.47 C2950.25,1345.79 2960.62,1352.44 2960.51087,1360.06 L2960.51087,1360.04 Z" id="Path" stroke="#465362" stroke-width="10" fill="#465362" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2854.44,1580.53 L2675.47,1558.55 C2654.65,1555.99 2645.29,1542.02 2654.15,1527.79 L2768.32,1344.54 C2773.36,1336.44 2789.73,1331.16 2805.05,1332.56 L2935.79,1344.45 C2951.71,1345.9 2962.66,1353.83 2960.14,1362.38 L2902.56,1557.36 C2898.05,1572.62 2876.39,1583.23 2854.44,1580.53 L2854.44,1580.53 Z" id="Path" stroke="#465362" stroke-width="10" fill="#B0BEC5" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2889.2,1354.81 L2837.9,1350.05 C2834.27,1349.71 2832.12,1347.9 2833.09,1346 L2833.09,1346 C2834.06,1344.12 2837.75,1342.87 2841.34,1343.2 L2892.08,1347.86 C2895.73,1348.19 2898.06,1350.01 2897.29,1351.93 L2897.29,1351.93 C2896.51,1353.86 2892.89,1355.15 2889.2,1354.81 L2889.2,1354.81 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M2786.84,1409.97 C2786.48,1409.56 2786.43,1409.11 2786.7,1408.61 L2787.93,1406.32 L2774.92,1405.01 C2774.28,1404.94 2773.78,1404.76 2773.44,1404.45 C2773.1,1404.15 2772.96,1403.79 2773.02,1403.38 L2773.79,1399.18 C2773.85,1398.92 2774.01,1398.66 2774.26,1398.39 C2774.51,1398.13 2774.84,1397.9 2775.23,1397.73 L2798.58,1386.99 C2799.26,1386.64 2800.04,1386.51 2800.9,1386.59 L2809.81,1387.46 C2810.56,1387.53 2811.11,1387.76 2811.45,1388.13 C2811.8,1388.5 2811.85,1388.92 2811.61,1389.39 L2806.21,1399.92 L2807.59,1400.06 C2808.35,1400.14 2808.92,1400.37 2809.28,1400.77 C2809.65,1401.17 2809.71,1401.61 2809.46,1402.1 L2807.29,1406.39 C2807.04,1406.88 2806.55,1407.28 2805.83,1407.57 C2805.1,1407.87 2804.35,1407.98 2803.58,1407.9 L2802.18,1407.76 L2801,1410.06 C2800.75,1410.56 2800.26,1410.96 2799.55,1411.26 C2798.84,1411.56 2798.09,1411.67 2797.32,1411.6 L2788.52,1410.71 C2787.75,1410.63 2787.18,1410.39 2786.82,1409.98 L2786.84,1409.97 Z M2793.65,1399.29 C2793.93,1399.32 2794.21,1399.29 2794.5,1399.23 C2794.79,1399.16 2795.01,1399.05 2795.18,1398.9 C2795.27,1398.81 2795.5,1398.41 2795.88,1397.71 C2796.23,1397.05 2796.42,1396.66 2796.44,1396.53 C2796.47,1396.4 2796.37,1396.27 2796.15,1396.13 C2795.96,1396.02 2795.72,1395.94 2795.45,1395.92 C2795.21,1395.9 2794.99,1395.92 2794.8,1395.96 C2794.6,1396.01 2794.16,1396.19 2793.48,1396.49 C2792.79,1396.79 2791.87,1397.21 2790.7,1397.74 C2790.14,1398 2789.99,1398.28 2790.25,1398.58 C2790.51,1398.88 2791,1399.07 2791.72,1399.14 C2792.37,1399.18 2793.02,1399.23 2793.66,1399.3 L2793.65,1399.29 Z" id="Shape" stroke="none" fill="#FFFFFF" fill-rule="nonzero"></path> + <path d="M2812.97,1401.73 C2812.54,1401.32 2812.45,1400.88 2812.69,1400.4 L2815.54,1394.73 C2815.78,1394.26 2816.28,1393.88 2817.05,1393.6 C2817.82,1393.32 2818.62,1393.22 2819.45,1393.31 L2828.53,1394.21 C2829.37,1394.29 2829.99,1394.53 2830.41,1394.93 C2830.83,1395.33 2830.92,1395.76 2830.69,1396.24 L2827.97,1401.93 C2827.74,1402.42 2827.25,1402.8 2826.49,1403.09 C2825.74,1403.38 2824.94,1403.48 2824.09,1403.4 L2814.89,1402.48 C2814.04,1402.4 2813.41,1402.15 2812.97,1401.74 L2812.97,1401.73 Z M2807.77,1412.09 C2807.34,1411.67 2807.24,1411.21 2807.49,1410.71 L2810.43,1404.86 C2810.68,1404.37 2811.19,1403.98 2811.97,1403.7 C2812.75,1403.42 2813.56,1403.31 2814.41,1403.4 L2823.62,1404.32 C2824.47,1404.41 2825.1,1404.65 2825.52,1405.06 C2825.94,1405.47 2826.03,1405.92 2825.8,1406.41 L2822.99,1412.28 C2822.75,1412.78 2822.25,1413.18 2821.48,1413.48 C2820.71,1413.78 2819.9,1413.88 2819.04,1413.8 L2809.7,1412.85 C2808.84,1412.76 2808.19,1412.51 2807.76,1412.09 L2807.77,1412.09 Z" id="Shape" stroke="none" fill="#FFFFFF" fill-rule="nonzero"></path> + <path d="M2833.62,1413.98 C2831.38,1412.59 2829.96,1410.85 2829.34,1408.76 C2828.72,1406.68 2828.99,1404.44 2830.14,1402.03 C2831.29,1399.62 2833.03,1397.62 2835.44,1395.9 C2837.83,1394.19 2840.61,1392.94 2843.79,1392.17 C2846.95,1391.39 2850.2,1391.17 2853.55,1391.5 C2856.9,1391.83 2859.68,1392.64 2861.9,1393.95 C2864.13,1395.26 2865.61,1396.92 2866.33,1398.94 C2867.05,1400.97 2866.92,1403.19 2865.9,1405.6 C2864.88,1408.01 2863.2,1410.12 2860.82,1411.91 C2858.42,1413.72 2855.59,1415.04 2852.33,1415.88 C2849.05,1416.72 2845.68,1416.96 2842.21,1416.61 C2838.74,1416.26 2835.88,1415.38 2833.64,1413.99 L2833.62,1413.98 Z M2850.07,1406.39 C2851.03,1405.37 2851.73,1404.37 2852.16,1403.39 C2852.69,1402.19 2852.64,1401.34 2852.02,1400.85 C2851.4,1400.36 2850.58,1400.06 2849.57,1399.96 C2848.56,1399.86 2847.59,1400.02 2846.64,1400.44 C2845.69,1400.86 2844.98,1401.59 2844.51,1402.63 C2844.1,1403.53 2843.9,1404.56 2843.91,1405.72 C2843.91,1406.88 2844.72,1407.54 2846.31,1407.7 C2847.86,1407.86 2849.12,1407.42 2850.08,1406.39 L2850.07,1406.39 Z" id="Shape" stroke="none" fill="#FFFFFF" fill-rule="nonzero"></path> + <path d="M2880.45,1419.46 C2880.03,1419.04 2879.92,1418.57 2880.12,1418.07 L2881.04,1415.72 L2867.7,1414.37 C2867.04,1414.3 2866.52,1414.11 2866.13,1413.8 C2865.74,1413.49 2865.55,1413.12 2865.56,1412.7 L2865.75,1408.39 C2865.78,1408.12 2865.9,1407.85 2866.12,1407.58 C2866.34,1407.31 2866.64,1407.08 2867.01,1406.9 L2889.08,1395.88 C2889.72,1395.52 2890.48,1395.38 2891.37,1395.47 L2900.49,1396.36 C2901.26,1396.44 2901.84,1396.66 2902.24,1397.04 C2902.64,1397.42 2902.76,1397.85 2902.58,1398.33 L2898.61,1409.14 L2900.03,1409.28 C2900.81,1409.36 2901.42,1409.6 2901.84,1410.01 C2902.27,1410.42 2902.39,1410.87 2902.21,1411.37 L2900.62,1415.77 C2900.44,1416.27 2900,1416.68 2899.31,1416.98 C2898.62,1417.29 2897.88,1417.4 2897.09,1417.32 L2895.66,1417.18 L2894.79,1419.54 C2894.6,1420.05 2894.17,1420.46 2893.49,1420.77 C2892.81,1421.08 2892.07,1421.2 2891.28,1421.12 L2882.26,1420.21 C2881.47,1420.13 2880.86,1419.88 2880.44,1419.46 L2880.45,1419.46 Z M2885.82,1408.5 C2886.11,1408.53 2886.39,1408.5 2886.67,1408.44 C2886.95,1408.37 2887.17,1408.26 2887.31,1408.1 C2887.39,1408.01 2887.57,1407.6 2887.84,1406.88 C2888.1,1406.2 2888.23,1405.8 2888.24,1405.67 C2888.24,1405.54 2888.13,1405.4 2887.89,1405.25 C2887.68,1405.13 2887.43,1405.06 2887.15,1405.03 C2886.91,1405.01 2886.69,1405.03 2886.5,1405.07 C2886.31,1405.12 2885.89,1405.31 2885.24,1405.62 C2884.59,1405.93 2883.71,1406.36 2882.61,1406.9 C2882.08,1407.16 2881.97,1407.45 2882.27,1407.76 C2882.57,1408.07 2883.09,1408.26 2883.83,1408.34 C2884.49,1408.38 2885.16,1408.44 2885.81,1408.5 L2885.82,1408.5 Z" id="Shape" stroke="none" fill="#FFFFFF" fill-rule="nonzero"></path> + <path d="M2847.38,1546.79 L2710.77,1530.6 C2696.58,1528.92 2689.7,1519.69 2695.24,1510.2 L2695.24,1510.2 C2700.65,1500.94 2715.93,1494.85 2729.54,1496.39 L2860.43,1511.27 C2874.57,1512.88 2883.5,1521.92 2880.25,1531.67 L2880.25,1531.67 C2876.92,1541.67 2862.14,1548.54 2847.36,1546.79 L2847.38,1546.79 Z" id="Path" stroke="none" fill="#CFD8DC" fill-rule="nonzero"></path> + <path d="M2739.7,1515.36 C2735.87,1522.69 2723.91,1527.7 2713.07,1526.42 C2702.26,1525.15 2696.97,1518.14 2701.14,1510.89 C2705.24,1503.77 2716.96,1499.07 2727.43,1500.26 C2737.93,1501.46 2743.46,1508.17 2739.7,1515.36 L2739.7,1515.36 Z" id="Path" stroke="none" fill="#ECEFF1" fill-rule="nonzero"></path> + <path d="M2542.38,1093.43 C2497.62,1093.43 2461.33,1108.53 2461.33,1127.15 L2461.33,1352.61 C2461.33,1371.23 2497.62,1386.33 2542.38,1386.33 C2587.14,1386.33 2623.43,1371.23 2623.43,1352.61 L2623.43,1127.15 C2623.43,1108.53 2587.14,1093.43 2542.38,1093.43 L2542.38,1093.43 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2623.84,1061.5 L2616.96,1078.29 L2594.95,1131.97 C2593.33,1132.87 2591.41,1133.79 2589.14,1134.71 C2588.81,1134.85 2588.47,1134.99 2588.12,1135.12 C2580.41,1138.13 2571.11,1140.29 2560.98,1141.47 L2591.2,1067.74 L2598.09,1050.94 C2599.72,1046.96 2604.28,1045.05 2608.26,1046.68 L2619.59,1051.33 C2623.57,1052.96 2625.48,1057.51 2623.84,1061.5 L2623.84,1061.5 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FF8080" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2616.96,1078.29 L2594.95,1131.97 C2593.33,1132.87 2591.41,1133.79 2589.14,1134.71 C2588.81,1134.85 2588.47,1134.99 2588.12,1135.12 C2580.41,1138.13 2571.11,1140.29 2560.98,1141.47 L2591.2,1067.74 L2616.96,1078.29 L2616.96,1078.29 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFB74D" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2512.74,1078.7 L2527.77,1141.87 C2519.19,1141.11 2511.12,1139.66 2503.98,1137.6 L2476.92,1023.82 C2475.5,1017.86 2479.18,1011.89 2485.13,1010.48 C2485.99,1010.27 2486.86,1010.18 2487.71,1010.18 C2492.72,1010.18 2497.26,1013.6 2498.47,1018.69 L2499.75,1024.08 L2512.74,1078.7 L2512.74,1078.7 Z" id="Path" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" transform="translate(2505.2199, 1051.6457) rotate(-13.38) translate(-2505.2199, -1051.6457)" x="2496.11986" y="1023.51067" width="18.2" height="56.27" rx="9.1"></rect> + <path d="M2571.7,1030.13 L2571.34,1032.96 L2567.89,1060.37 L2557.63,1141.82 C2552.69,1142.29 2547.57,1142.53 2542.37,1142.53 C2539.66,1142.53 2536.98,1142.47 2534.34,1142.33 L2545.04,1057.48 L2548.46,1030.32 L2548.85,1027.25 L2556.31,1028.19 L2563.68,1029.12 L2571.7,1030.13 L2571.7,1030.13 Z" id="Path" stroke="#465362" stroke-width="10" fill="#81C784" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2591.42,1022.57 C2589.34,1039.08 2572.41,1065.5 2555.91,1063.42 C2539.41,1061.34 2529.56,1031.54 2531.64,1015.04 C2533.72,998.53 2548.79,986.84 2565.3,988.92 C2581.81,991 2593.5,1006.07 2591.42,1022.58 L2591.42,1022.57 Z" id="Path" stroke="#465362" stroke-width="10" fill="#81C784" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2550.79,1013.92 C2553.27,1017.12 2558.54,1029.25 2555.34,1031.74 C2552.14,1034.23 2541.69,1026.11 2539.21,1022.91 C2536.73,1019.71 2537.31,1015.11 2540.51,1012.63 C2543.71,1010.15 2548.31,1010.73 2550.79,1013.93 L2550.79,1013.92 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M2572.58,1016.66 C2569.38,1019.14 2561.27,1029.59 2563.75,1032.79 C2566.23,1035.99 2578.37,1030.72 2581.57,1028.24 C2584.77,1025.76 2585.35,1021.16 2582.87,1017.96 C2580.39,1014.76 2575.79,1014.18 2572.59,1016.66 L2572.58,1016.66 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M2481.72,1125.09 C2481.93,1126.05 2484.94,1130.36 2495.6,1134.71 C2495.94,1134.85 2496.28,1134.99 2496.63,1135.12 C2498.94,1136.02 2501.4,1136.85 2503.98,1137.6 C2511.12,1139.66 2519.19,1141.11 2527.77,1141.87 C2529.93,1142.08 2532.12,1142.23 2534.34,1142.33 C2536.98,1142.47 2539.66,1142.53 2542.37,1142.53 C2547.57,1142.53 2552.69,1142.29 2557.63,1141.82 C2558.75,1141.72 2559.86,1141.6 2560.97,1141.47 L2560.97,1141.47 C2571.1,1140.29 2580.4,1138.13 2588.11,1135.12 C2588.46,1134.99 2588.8,1134.85 2589.13,1134.71 C2591.4,1133.79 2593.32,1132.87 2594.94,1131.97 C2600.94,1128.68 2602.85,1125.85 2603.02,1125.09" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2312.14,1465.72 L2257.19,1490.2 C2245.32,1495.49 2231.82,1495.79 2219.72,1491.05 C2166.25,1470.08 2112.78,1449.1 2059.31,1428.13 C2038.75,1420.07 2038.1,1391.21 2058.27,1382.22 L2087.96,1368.99 C2106.25,1360.84 2126.04,1356.54 2146.07,1356.51975 C2160.19,1356.5 2175.72,1357.66 2192.26,1360.77 C2249.59,1371.51 2291.85,1400.46 2318.56,1424.39 C2332.03,1436.45 2328.66,1458.36 2312.14,1465.72 L2312.14,1465.72 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M869.1,838.92 C863.82,855.85 852.58,871 836.23,880.95 C800.55,902.65 754.04,891.31 732.34,855.63 C710.64,819.95 721.98,773.44 757.66,751.74 C774.01,741.8 792.63,738.79 810.1,741.89 C787.91,759.6 781.81,791.44 796.95,816.34 C812.09,841.24 843.17,850.47 869.1,838.92 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFF9C4" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <circle id="Oval" stroke="none" fill="#FFCC80" fill-rule="nonzero" cx="755.38" cy="789.42" r="8.86"></circle> + <circle id="Oval" stroke="none" fill="#FFCC80" fill-rule="nonzero" cx="759.38" cy="841.85" r="15.66"></circle> + <circle id="Oval" stroke="none" fill="#FFCC80" fill-rule="nonzero" cx="800.6" cy="852.3" r="9.86"></circle> + <path d="M881.84,1307.34 C763.37,1307.34 667.33,1347.29 667.33,1396.58 L667.33,1405.1 C667.33,1425.83 684.33,1444.91 712.83,1460.06 C737.83,1488.83 804.06,1509.39 881.84,1509.39 C959.62,1509.39 1025.85,1488.83 1050.85,1460.06 C1079.36,1444.91 1096.35,1425.83 1096.35,1405.1 L1096.35,1396.58 C1096.35,1347.3 1000.31,1307.34 881.84,1307.34 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M1026.25,1371.81 C1030.31,1355.17 1027.72,1336.49 1019.73,1323.36 C982.45,1262.1 898.79,1262.1 881.84,1262.1 C864.89,1262.1 781.37,1262.1 744.04,1323.22 C736.25,1335.97 733.65,1354 737.19,1370.4 C737.3,1370.9 737.41,1371.38 737.51,1371.83 C738.14,1374.62 738.67,1376.45 738.85,1377.08 C763.04,1459.36 863.51,1459.36 881.84,1459.36 C900.17,1459.36 1000.64,1459.36 1024.83,1377.08 C1025.32,1375.42 1025.77,1373.74 1026.17,1372.1 C1026.19,1372.01 1026.22,1371.91 1026.24,1371.82 L1026.25,1371.81 Z" id="Path" stroke="#465362" stroke-width="10" fill="#977763" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M1025.09,1326.76 C1029.12,1342.13 1026.55,1359.38 1018.63,1371.5 C981.65,1428.07 898.66,1428.07 881.85,1428.07 C865.04,1428.07 782.18,1428.07 745.15,1371.63 C737.43,1359.86 734.84,1343.21 738.35,1328.07 C738.46,1327.61 738.56,1327.16 738.67,1326.75 C739.3,1324.17 739.82,1322.49 740,1321.9 C764,1245.92 863.66,1245.92 881.84,1245.92 C900.02,1245.92 999.69,1245.92 1023.68,1321.9 C1024.17,1323.43 1024.61,1324.98 1025.01,1326.5 C1025.03,1326.59 1025.06,1326.68 1025.08,1326.76 L1025.09,1326.76 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFCDD2" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <line x1="769.56" y1="1336.14" x2="780.64" y2="1325.95" id="Path" stroke="#FFFFFF" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="847.98" y1="1332.27" x2="858.61" y2="1343.91" id="Path" stroke="#FFFFFF" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="925.51" y1="1388.54" x2="934.82" y2="1379.33" id="Path" stroke="#FFFFFF" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="961.4" y1="1304.24" x2="973.36" y2="1310" id="Path" stroke="#FFFFFF" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="938.36" y1="1325.47" x2="932.44" y2="1336.99" id="Path" stroke="#FFFFFF" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="985.32" y1="1343.23" x2="1000.39" y2="1345.44" id="Path" stroke="#FFFFFF" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="889.63" y1="1264.83" x2="900.26" y2="1260.95" id="Path" stroke="#FFFFFF" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="793.93" y1="1281.32" x2="806.78" y2="1278.16" id="Path" stroke="#FFFFFF" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="800.35" y1="1370.59" x2="818.3" y2="1381.75" id="Path" stroke="#FFFFFF" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="869.69" y1="1390.48" x2="884.31" y2="1380.78" id="Path" stroke="#FFFFFF" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="889.18" y1="1321.59" x2="904.25" y2="1328.87" id="Path" stroke="#FFFFFF" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="812.09" y1="1321.59" x2="816.08" y2="1336.99" id="Path" stroke="#FFFFFF" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="772.22" y1="1363.17" x2="780.64" y2="1358.29" id="Path" stroke="#FFFFFF" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="996.4" y1="1322.41" x2="1001.72" y2="1314.87" id="Path" stroke="#FFFFFF" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="967.38" y1="1368.93" x2="984.44" y2="1374.02" id="Path" stroke="#FFFFFF" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="847.54" y1="1266.77" x2="862.16" y2="1275.5" id="Path" stroke="#FFFFFF" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <path d="M838.98,1278.29 C838.98,1304.33 927.38,1304.33 927.38,1278.29" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2351.63,245.03 C2337.88,250.36 2332.34,255.9 2327.01,269.65 C2326.27,271.56 2323.59,271.56 2322.85,269.65 C2317.52,255.9 2311.98,250.36 2298.23,245.03 C2296.32,244.29 2296.32,241.61 2298.23,240.87 C2311.98,235.54 2317.52,230 2322.85,216.25 C2323.59,214.34 2326.27,214.34 2327.01,216.25 C2332.34,230 2337.88,235.54 2351.63,240.87 C2353.54,241.61 2353.54,244.29 2351.63,245.03 Z" id="Path" stroke="none" fill="#FFFFFF" fill-rule="nonzero"></path> + <path d="M2417.66,277.5 C2403.91,282.83 2398.37,288.37 2393.04,302.12 C2392.3,304.03 2389.62,304.03 2388.88,302.12 C2383.55,288.37 2378.01,282.83 2364.26,277.5 C2362.35,276.76 2362.35,274.08 2364.26,273.34 C2378.01,268.01 2383.55,262.47 2388.88,248.72 C2389.62,246.81 2392.3,246.81 2393.04,248.72 C2398.37,262.47 2403.91,268.01 2417.66,273.34 C2419.57,274.08 2419.57,276.76 2417.66,277.5 L2417.66,277.5 Z" id="Path" stroke="none" fill="#FFFFFF" fill-rule="nonzero"></path> + <path d="M2367.88,313.06 C2354.13,318.39 2348.59,323.93 2343.26,337.68 C2342.52,339.59 2339.84,339.59 2339.1,337.68 C2333.77,323.93 2328.23,318.39 2314.48,313.06 C2312.57,312.32 2312.57,309.64 2314.48,308.9 C2328.23,303.57 2333.77,298.03 2339.1,284.28 C2339.84,282.37 2342.52,282.37 2343.26,284.28 C2348.59,298.03 2354.13,303.57 2367.88,308.9 C2369.79,309.64 2369.79,312.32 2367.88,313.06 Z" id="Path" stroke="none" fill="#FFFFFF" fill-rule="nonzero"></path> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#465362" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="414.94" y="752.56" width="2563.19" height="462.96" rx="231.48"></rect> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="375.95" y="713.57" width="2563.19" height="462.96" rx="231.48"></rect> + <text id="logo-text" x="1657" y="960" text-anchor="middle" dominant-baseline="middle" font-family="Fraunces, Georgia, serif" font-size="190" font-weight="600" fill="#465362">HTML e pessoas</text> + <line x1="1664.22" y1="579.05" x2="1751.73" y2="529.11" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <path d="M1824.56,527.78 L1797.24,552.46 C1786.22,562.42 1770.28,561.63 1763.23,549.28 L1740.21,508.95 C1733.16,496.6 1740.59,482.48 1754.77,478.05 L1789.92,467.08 C1798.23,464.49 1808.04,469.06 1812.61,477.06 L1827.51,503.16 C1832.07,511.16 1831.02,521.93 1824.56,527.77 L1824.56,527.78 Z" id="Path" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <line x1="1771.77" y1="495.05" x2="1791.25" y2="529.19" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="1794.91" y1="484.86" x2="1811.79" y2="514.45" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="1563.47" y1="579.05" x2="1664.22" y2="579.05" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <path d="M1499.55,613.99 L1535.51,621.89 C1550.02,625.08 1563.47,616.5 1563.47,602.27 L1563.47,555.83 C1563.47,541.6 1550.02,533.03 1535.51,536.21 L1499.55,544.11 C1491.05,545.98 1484.79,554.81 1484.79,564.02 L1484.79,594.08 C1484.79,603.29 1491.04,612.12 1499.55,613.99 Z" id="Path" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <line x1="1529.18" y1="559.4" x2="1529.18" y2="598.7" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="1504.03" y1="562.02" x2="1504.03" y2="596.08" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <circle id="Oval" stroke="#465362" stroke-width="10" fill="#BBDEFB" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="1664.22" cy="579.05" r="79.92"></circle> + <line x1="1623.26" y1="460.2" x2="1664.22" y2="432.06" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="1705.19" y1="460.2" x2="1664.22" y2="432.06" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <circle id="Oval" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="1664.22" cy="417.99" r="14.07"></circle> + <path d="M1724.69,458.56 C1724.69,470.2 1697.62,499.13 1664.22,499.13 C1630.82,499.13 1603.75,470.2 1603.75,458.56 C1603.75,449.49 1724.69,449.49 1724.69,458.56 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M1643.74,585.83 L1676.84,585.83 C1684.33,585.83 1690.4,579.76 1690.4,572.27 L1690.4,572.27" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M1608.09,558.17 C1610.62,555.64 1614.11,554.08 1617.97,554.08 C1621.83,554.08 1625.32,555.64 1627.85,558.17" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M1700.6,558.17 C1703.13,555.64 1706.62,554.08 1710.48,554.08 C1714.34,554.08 1717.83,555.64 1720.36,558.17" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></path> + </g> + </g> + </g> + </g> +</svg>
A
src/assets/img/design/hero.svg
@@ -0,0 +1,250 @@
+ +<svg id="hero" viewBox="0 0 3000 1575" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <rect id="path-535ywfpbwe-1" x="0" y="0" width="3000" height="1575"></rect> + </defs> + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g id="BWatson_Cover_01"> + <mask id="mask-535ywfpbwe-2" fill="white"> + <use xlink:href="#path-535ywfpbwe-1"></use> + </mask> + <g id="Rectangle"></g> + <g id="Group" mask="url(#mask-535ywfpbwe-2)"> + <g transform="translate(-157.55, -157.55)"> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#BBDEFB" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="58.65" y="17.18" width="3197.81" height="1847.5"></rect> + <g id="rocket" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(229.67, 206.93)"> + <g id="exhaust" transform="translate(6.88, 583.62)" fill="#FFFFFF" fill-rule="nonzero"> + <path d="M48.02,0 L50.84,380.355 C50.84,393.605 40.08,404.365 26.83,404.365 C13.58,404.365 2.82,393.605 2.82,380.355 L0,0 L48.02,0 Z" id="left"></path> + <path d="M74.32,0 L140.73,0 L140.73,371.155 C140.73,389.485 125.85,404.365 107.52,404.365 C89.19,404.365 74.31,389.485 74.31,371.155 L74.31,0 L74.32,0 Z" id="center"></path> + <path d="M211,0 L211,380.355 C211,393.605 200.24,404.365 186.99,404.365 C173.74,404.365 162.98,393.605 162.98,380.355 L162.98,0 L211,0 Z" id="right"></path> + </g> + <polygon id="Path" stroke="#465362" stroke-width="10" fill="#FFB74D" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" points="167.25 609.41 113.76 609.41 60.28 609.41 60.28 336.48 81.55 218.29 145.98 218.29 167.25 336.48"></polygon> + <path d="M107.44,680.74 L80.29,680.74 C80.29,664.7 86.37,651.7 93.87,651.7 C101.37,651.7 107.45,664.7 107.45,680.74 L107.44,680.74 Z" id="Path" stroke="#465362" stroke-width="10" fill="#465362" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M147.58,680.74 L120.43,680.74 C120.43,664.7 126.51,651.7 134.01,651.7 C141.51,651.7 147.59,664.7 147.59,680.74 L147.58,680.74 Z" id="Path" stroke="#465362" stroke-width="10" fill="#465362" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M132.28,83.62 C129.68,61.35 126.16,31.07 123.55,8.71 C122.97,3.74 118.77,-5.68434189e-14 113.77,-5.68434189e-14 L113.77,-5.68434189e-14 C108.77,-5.68434189e-14 104.56,3.75 103.99,8.71 L95.26,83.61 C86.82,89.48 81.29,99.24 81.29,110.29 L81.29,218.28 L146.25,218.28 L146.25,110.29 C146.25,99.23 140.72,89.47 132.28,83.61 L132.28,83.62 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M60.28,609.41 L167.25,609.41 L167.25,622.58 C167.25,639.39 153.6,653.04 136.79,653.04 L90.73,653.04 C73.92,653.04 60.27,639.39 60.27,622.58 L60.27,609.41 L60.27,609.41 L60.28,609.41 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <circle id="Oval" fill="#1565C0" fill-rule="nonzero" cx="113.76" cy="154.3" r="19.75"></circle> + <rect id="Rectangle" fill="#465362" fill-rule="nonzero" x="96.59" y="352.73" width="17.17" height="17.17"></rect> + <rect id="Rectangle" fill="#465362" fill-rule="nonzero" x="113.76" y="369.91" width="17.17" height="17.17"></rect> + <rect id="Rectangle" fill="#FFFFFF" fill-rule="nonzero" transform="translate(122.355, 361.325) rotate(180) translate(-122.355, -361.325)" x="113.77" y="352.74" width="17.17" height="17.17"></rect> + <rect id="Rectangle" fill="#FFFFFF" fill-rule="nonzero" transform="translate(105.175, 378.495) rotate(180) translate(-105.175, -378.495)" x="96.59" y="369.91" width="17.17" height="17.17"></rect> + <rect id="Rectangle" fill="#465362" fill-rule="nonzero" x="96.59" y="544.5" width="17.17" height="17.17"></rect> + <rect id="Rectangle" fill="#465362" fill-rule="nonzero" x="113.76" y="561.67" width="17.17" height="17.17"></rect> + <rect id="Rectangle" fill="#FFFFFF" fill-rule="nonzero" transform="translate(122.355, 553.085) rotate(180) translate(-122.355, -553.085)" x="113.77" y="544.5" width="17.17" height="17.17"></rect> + <rect id="Rectangle" fill="#FFFFFF" fill-rule="nonzero" transform="translate(105.175, 570.265) rotate(180) translate(-105.175, -570.265)" x="96.59" y="561.68" width="17.17" height="17.17"></rect> + <polygon id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" points="52.64 661.11 14.73 661.11 9.68 685.77 57.69 685.77"></polygon> + <polygon id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" points="60.28 631.22 7.09 631.22 0 665.83 67.37 665.83"></polygon> + <polygon id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" points="33.68 358.88 7.09 423.15 7.09 631.23 60.28 631.23 60.28 423.15"></polygon> + <line x1="7.09" y1="425.99" x2="60.28" y2="425.99" id="Path" stroke="#465362" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="7.09" y1="527.19" x2="60.28" y2="527.19" id="Path" stroke="#465362" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="7.09" y1="631.23" x2="60.28" y2="631.23" id="Path" stroke="#465362" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></line> + <polygon id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" points="212.8 661.11 174.89 661.11 169.83 685.77 217.85 685.77"></polygon> + <polygon id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" points="220.44 631.22 167.25 631.22 160.16 665.83 227.52 665.83"></polygon> + <polygon id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" points="193.84 358.88 167.25 423.15 167.25 631.23 220.44 631.23 220.44 423.15"></polygon> + <line x1="167.25" y1="425.99" x2="220.44" y2="425.99" id="Path" stroke="#465362" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="167.25" y1="527.19" x2="220.44" y2="527.19" id="Path" stroke="#465362" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="167.25" y1="631.23" x2="220.44" y2="631.23" id="Path" stroke="#465362" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></line> + </g> + <rect id="Rectangle" stroke="none" fill="#BBDEFB" fill-rule="evenodd" x="145.55" y="930.55" width="673" height="275"></rect> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#FFE0B2" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="58.65" y="1216.84" width="3197.81" height="647.85"></rect> + <g id="solar-system" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(2445.29, 0)" stroke-linecap="round" stroke-linejoin="round"> + <g id="venus" transform="translate(197.59, 0)" stroke="#465362" stroke-width="10"> + <g id="Group-3"> + <circle id="Oval" fill="#81C784" fill-rule="nonzero" cx="51.45" cy="828.5" r="51.45"></circle> + <line x1="51.45" y1="777.04" x2="51.45" y2="0" id="Path"></line> + </g> + </g> + <g id="saturn" transform="translate(337.935, 24.53)" stroke="#465362" stroke-width="10"> + <g id="Group-4"> + <circle id="Oval" fill="#BB9C87" fill-rule="nonzero" cx="159.545015" cy="803.97" r="91.14"></circle> + <path d="M317.826129,855.327824 C328.549448,822.285602 266.363812,772.497084 178.930625,744.122058 C91.497437,715.747031 11.9258668,719.530541 1.20254808,752.572763 C-9.52077065,785.614986 52.6648648,835.403503 140.098052,863.77853 C227.53124,892.153556 307.10281,888.370047 317.826129,855.327824 Z" id="Oval" fill="#ECEFF1" fill-rule="nonzero"></path> + <path d="M246.235015,832.1 C230.695015,879.98 57.3150146,823.71 72.8550146,775.83 C88.3950146,727.95 139.805015,701.74 187.675015,717.28 C235.555015,732.82 261.765015,784.23 246.225015,832.1 L246.235015,832.1 Z" id="Path" fill="#BB9C87" fill-rule="nonzero"></path> + <line x1="161.295015" y1="712.8" x2="161.295015" y2="0" id="Path"></line> + </g> + </g> + <g id="mars" transform="translate(381.28, 1.07)" stroke="#465362" stroke-width="10"> + <g id="Group-5" transform="translate(-0, 0)"> + <circle id="Oval" fill="#FF8080" fill-rule="nonzero" cx="42.66" cy="657.52" r="42.66"></circle> + <line x1="42.66" y1="614.86" x2="42.66" y2="0" id="Path"></line> + </g> + </g> + <g id="jupiter" transform="translate(181.66, 57.97)" stroke="#465362" stroke-width="10"> + <g id="Group-6"> + <line x1="89.26" y1="504.49" x2="89.26" y2="0" id="Path"></line> + <path d="M178.52,593.75 C178.52,643.05 138.56,683.01 89.26,683.01 C64.79,683.01 42.62,673.16 26.5,657.2 C18.48,649.29 11.96,639.85 7.4,629.38 C2.64,618.47 0,606.42 0,593.75 C0,579.34 3.41,565.73 9.49,553.68 C14.86,543 22.32,533.54 31.34,525.85 C46.92,512.54 67.15,504.5 89.26,504.5 C111.37,504.5 131.59,512.54 147.18,525.85 C156.2,533.54 163.66,543 169.03,553.68 C175.11,565.73 178.52,579.35 178.52,593.75 L178.52,593.75 Z" id="Path" fill="#FFCC80" fill-rule="nonzero"></path> + <ellipse id="Oval" fill="#FF8080" fill-rule="nonzero" cx="117.6" cy="619.63" rx="30.61" ry="13.92"></ellipse> + <path d="M169.03,553.67 L9.49,553.67 C14.86,542.99 22.32,533.53 31.34,525.84 L147.18,525.84 C156.2,533.53 163.66,542.99 169.03,553.67 Z" id="Path" fill="#FFB74D" fill-rule="nonzero"></path> + <path d="M69.17,643.28 C69.17,647.12 67.62,650.6 65.1,653.13 C62.57,655.65 59.1,657.2 55.25,657.2 L26.49,657.2 C18.47,649.29 11.95,639.85 7.39,629.38 L55.25,629.38 C62.94,629.38 69.17,635.61 69.17,643.29 L69.17,643.28 Z" id="Path" fill="#FFB74D" fill-rule="nonzero"></path> + </g> + </g> + <g id="sun" transform="translate(179.75, 33.45)" stroke="#465362" stroke-width="10"> + <g id="Group-7"> + <circle id="Oval" fill="#FFF176" fill-rule="nonzero" cx="134.15" cy="371.76" r="134.15"></circle> + <line x1="134.15" y1="237.61" x2="134.15" y2="0" id="Path"></line> + </g> + </g> + <g id="mercury" transform="translate(86.44, 57.78)" stroke="#465362" stroke-width="10"> + <g id="Group-8"> + <circle id="Oval" fill="#CFD8DC" fill-rule="nonzero" cx="43.99" cy="443.87" r="43.99"></circle> + <line x1="43.99" y1="396.96" x2="43.99" y2="0" id="Path"></line> + </g> + </g> + <g id="neptune" transform="translate(0, 57.78)" stroke="#465362" stroke-width="10"> + <g id="Group-9"> + <path d="M133.44,632.13 C133.44,642.86 130.91,652.99 126.4,661.97 C122.44,669.89 116.95,676.91 110.32,682.64 C98.63,692.74 83.39,698.85 66.72,698.85 C38.53,698.85 14.42,681.37 4.65,656.65 C2.45,651.07 0.97,645.13 0.34,638.93 C0.12,636.69 0,634.43 0,632.13 C0,629.03 0.21,625.97 0.63,622.98 C2.12,612.07 6.25,602 12.36,593.44 C24.46,576.48 44.3,565.42 66.72,565.42 C89.14,565.42 108.98,576.48 121.08,593.44 C127.19,602 131.32,612.07 132.81,622.98 C133.23,625.97 133.44,629.03 133.44,632.13 L133.44,632.13 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path> + <line x1="66.72" y1="565.42" x2="66.72" y2="0" id="Path"></line> + </g> + </g> + <g id="earth" transform="translate(478.69, 73.58)" stroke="#465362" stroke-width="10"> + <g id="Group-2"> + <path d="M134.16,459.58 C134.16,469.85 131.86,479.57 127.73,488.26 C122.83,498.63 115.34,507.54 106.1,514.15 C95.11,522.02 81.63,526.66 67.08,526.66 C52.53,526.66 39.05,522.02 28.06,514.15 C17.09,506.28 8.58,495.19 3.93,482.26 C1.38,475.18 0,467.55 0,459.58 C0,437.09 11.08,417.18 28.07,405.01 C33.87,400.85 40.36,397.6 47.33,395.46 C53.58,393.54 60.21,392.51 67.08,392.51 C81.63,392.51 95.1,397.15 106.09,405.02 C115.33,411.64 122.82,420.54 127.72,430.91 C131.84,439.61 134.15,449.33 134.15,459.59 L134.16,459.58 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path> + <path d="M62.92,432.09 C62.92,460.16 40.17,482.91 12.1,482.91 C9.32,482.91 6.59,482.68 3.94,482.26 C1.39,475.18 0.01,467.55 0.01,459.58 C0.01,437.09 11.09,417.18 28.08,405.01 C33.88,400.85 40.37,397.6 47.34,395.46 C56.95,404.7 62.93,417.7 62.93,432.09 L62.92,432.09 Z" id="Path" fill="#81C784" fill-rule="nonzero"></path> + <path d="M134.16,459.58 C134.16,469.85 131.86,479.57 127.73,488.26 C116.48,483.61 108.55,472.52 108.55,459.58 C108.55,446.64 116.48,435.56 127.73,430.9 C131.85,439.6 134.16,449.32 134.16,459.58 Z" id="Path" fill="#81C784" fill-rule="nonzero"></path> + <path d="M106.1,405.01 C95.11,412.88 81.64,417.52 67.09,417.52 C52.54,417.52 39.07,412.88 28.08,405.01 C39.07,397.14 52.54,392.5 67.09,392.5 C81.64,392.5 95.11,397.14 106.1,405.01 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path> + <path d="M106.1,514.15 C95.11,522.02 81.63,526.66 67.08,526.66 C52.53,526.66 39.05,522.02 28.06,514.15 C39.05,506.27 52.53,501.64 67.08,501.64 C81.63,501.64 95.11,506.28 106.1,514.15 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path> + <line x1="67.08" y1="392.5" x2="67.08" y2="0" id="Path"></line> + </g> + </g> + </g> + <path d="M0,892.7 L843.96,892.7 C858.41,892.7 870.13,904.43 870.13,918.87 L870.13,918.87 C870.13,933.32 858.4,945.04 843.96,945.04 L0,945.04 L0,892.69 L0,892.69 L0,892.7 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M1904.67,1343.62 L1904.67,1360.64 C1904.67,1371.3 1896.08,1380.91 1884.37,1380.91 L1398.59,1380.91 C1386.88,1380.91 1378.29,1371.3 1378.29,1360.64 L1378.29,1343.62 C1378.29,1340.82 1378.88,1337.94 1380.17,1335.15 L1416.29,1256.61 C1419.6,1249.41 1426.8,1244.8 1434.72,1244.8 L1848.24,1244.8 C1856.16,1244.8 1863.35,1249.41 1866.66,1256.61 L1902.79,1335.15 C1904.08,1337.94 1904.67,1340.82 1904.67,1343.62 L1904.67,1343.62 Z" id="Path" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="1478.34" y="930.63" width="320.39" height="357.55"></rect> + <path d="M2271.84,349.73 L2271.84,1122.23 C2271.84,1148.42 2250.61,1169.65 2224.42,1169.65 L1052.64,1169.65 C1026.44,1169.65 1005.21,1148.42 1005.21,1122.23 L1005.21,349.73 C1005.21,323.54 1026.44,302.3 1052.64,302.3 L2224.42,302.3 C2250.61,302.3 2271.84,323.54 2271.84,349.73 Z" id="Path" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2271.84,349.73 L2271.84,1038.67 L1005.21,1038.67 L1005.21,349.73 C1005.21,323.54 1026.44,302.3 1052.64,302.3 L2224.42,302.3 C2250.61,302.3 2271.84,323.54 2271.84,349.73 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#FF8080" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" transform="translate(1638.535, 668.87) rotate(90) translate(-1638.535, -668.87)" x="1318.735" y="82.325" width="639.6" height="1173.09"></rect> + <path d="M2067.89,1590.51 L2009.02,1462.54 C2003.62,1450.82 1991.9,1443.3 1979,1443.3 L1298.06,1443.3 C1285.16,1443.3 1273.44,1450.81 1268.04,1462.54 L1209.17,1590.51 C1207.07,1595.06 1206.1,1599.75 1206.1,1604.32 L1206.1,1611.17 C1206.1,1628.56 1220.11,1644.21 1239.19,1644.21 L2037.86,1644.21 C2056.94,1644.21 2070.95,1628.56 2070.95,1611.17 L2070.95,1604.32 C2070.95,1599.74 2069.98,1595.06 2067.88,1590.51 L2067.89,1590.51 Z" id="Path" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M1120.28,778.05 C1169.07,840.99 1233.87,894.35 1311.61,915.72 C1410.18,943.2 1515.58,919.87 1605.79,875.86 C1686.77,836.25 1759,780.11 1822.11,716.01 C1885.33,651.72 1939.72,579.03 1985.69,501.65 L2042.17,537.56 C1935.95,693.32 1795.21,832.51 1619.72,906.84 C1521.97,947.54 1409.15,965.56 1307.02,930.44 C1273.57,918.93 1242.26,901.73 1214.15,880.33 C1177.07,851.99 1145.82,816.87 1119.47,778.64 C1119.47,778.64 1120.28,778.05 1120.28,778.05 L1120.28,778.05 L1120.28,778.05 Z" id="Path" stroke="none" fill="#FFCDD2" fill-rule="nonzero"></path> + <path d="M2035.31,1568.41 L1976.93,1441.49 C1975.53,1438.43 1972.45,1436.47 1969.09,1436.47 L1307.98,1436.47 C1304.62,1436.47 1301.54,1438.44 1300.14,1441.49 L1241.76,1568.41 C1241.17,1569.71 1240.94,1570.92 1240.94,1572.02 L1240.94,1586.47 C1240.94,1588.51 1241.72,1590.14 1242.34,1591.09 C1243.29,1592.58 1245.49,1595.06 1249.6,1595.06 L2027.48,1595.06 C2031.59,1595.06 2033.78,1592.57 2034.74,1591.09 C2035.36,1590.14 2036.14,1588.51 2036.14,1586.47 L2036.14,1572.02 C2036.14,1570.92 2035.91,1569.71 2035.32,1568.41 L2035.31,1568.41 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="1151.64" y="580.93" width="973.78" height="175.88" rx="87.94"></rect> + <circle id="Oval" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="2089.33" cy="402.3" r="11.76"></circle> + <ellipse id="Oval" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" transform="translate(2077.7895, 421.6416) rotate(-57.73) translate(-2077.7895, -421.6416)" cx="2077.7895" cy="421.641632" rx="22" ry="49.52"></ellipse> + <line x1="1959.35" y1="505" x2="2039.74" y2="479.85" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <path d="M1917.08,548.83 L1947.74,546.16 C1960.11,545.08 1968.7,534.88 1965.15,523.53 L1953.56,486.48 C1950.01,475.13 1937.14,471.64 1926.36,477.81 L1899.64,493.09 C1893.32,496.7 1890.54,505.31 1892.83,512.66 L1900.33,536.64 C1902.63,543.99 1909.82,549.48 1917.08,548.84 L1917.08,548.83 Z" id="Path" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <line x1="1927.09" y1="497.88" x2="1936.9" y2="529.24" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="1907.68" y1="506.25" x2="1916.18" y2="533.42" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="2051.59" y1="563.24" x2="2039.74" y2="479.85" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <path d="M2030.2,620.25 L2019.43,591.42 C2015.08,579.79 2020.6,567.65 2032.38,565.97 L2070.82,560.5 C2082.59,558.83 2091.28,568.95 2090.35,581.33 L2088.05,612.02 C2087.51,619.28 2080.93,625.5 2073.31,626.58 L2048.43,630.12 C2040.81,631.2 2032.76,627.07 2030.21,620.25 L2030.2,620.25 Z" id="Path" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <line x1="2071.89" y1="589.31" x2="2039.37" y2="593.93" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="2072.69" y1="610.43" x2="2044.49" y2="614.44" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <circle id="Oval" stroke="#465362" stroke-width="10" fill="#BBDEFB" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="2039.73" cy="479.85" r="66.81"></circle> + <path d="M2072.33,470.31 C2065.71,480.8 2051.83,483.94 2041.34,477.31 C2030.85,470.69 2027.71,456.81 2034.34,446.32 L2072.33,470.31 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <rect id="Rectangle" stroke="none" fill="#465362" fill-rule="nonzero" transform="translate(2020.6631, 437.5835) rotate(32.27) translate(-2020.6631, -437.5835)" x="2012.65809" y="426.863457" width="16.01" height="21.44" rx="8.005"></rect> + <rect id="Rectangle" stroke="none" fill="#465362" fill-rule="nonzero" transform="translate(2086.0664, 478.8836) rotate(32.27) translate(-2086.0664, -478.8836)" x="2078.06138" y="468.163559" width="16.01" height="21.44" rx="8.005"></rect> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#FFF59D" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="506.13" y="276.82" width="106.33" height="615.88"></rect> + <line x1="506.13" y1="310.49" x2="612.46" y2="310.49" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="506.13" y1="855.46" x2="612.46" y2="855.46" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <path d="M545.16,509.38 C541.12,509.31 540.09,509.09 538.33,507.98 C536.05,506.51 534.73,504.01 534.73,501.29 C534.73,498.57 536.05,496 538.33,494.53 C540.09,493.43 541.49,493.13 545.16,493.13 L574.7,493.13 C578.15,493.13 579.62,493.5 581.31,494.82 C583.29,496.36 584.47,498.71 584.47,501.21 C584.47,503.71 583.22,506.28 581.31,507.75 C579.55,509.07 578.52,509.37 574.33,509.37 L567.42,509.37 L567.42,519.21 L574.11,519.21 C578,519.21 579.47,519.5 581.31,520.9 C583.29,522.37 584.47,524.65 584.47,527.15 C584.47,529.65 583.29,532.15 581.38,533.61 C579.76,534.86 577.85,535.37 574.69,535.37 L545.01,535.37 C541.63,535.37 540.31,535.08 538.62,534.05 C536.2,532.58 534.73,530.01 534.73,527.22 C534.73,524.65 535.91,522.22 537.96,520.75 C539.72,519.5 541.12,519.21 545.01,519.21 L552.06,519.21 L552.06,509.37 L545.15,509.37 L545.16,509.38 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M569.04,548.91 C569.04,546.12 569.7,544.28 571.17,542.81 C572.71,541.34 574.55,540.53 576.53,540.53 C579.32,540.53 582.26,542.37 583.29,544.72 C584.02,546.41 584.1,547.07 584.1,553.46 L584.1,569.77 C584.1,572.803333 584.05,574.64 583.95,575.28 C583.44,579.17 580.42,581.89 576.6,581.89 C574.47,581.89 572.27,580.86 570.8,579.25 C569.62,578 569.04,575.94 569.04,573 L569.04,569.4 L544.65,569.4 C541.71,569.4 540.09,569.03 538.4,568 C536.05,566.53 534.73,564.11 534.73,561.31 C534.73,558.51 535.98,556.17 538.11,554.62 C539.8,553.52 541.2,553.22 544.5,553.22 L569.04,553.22 L569.04,548.89 L569.04,548.91 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M580.13,619.22 C582.7,620.47 584.46,623.33 584.46,626.35 C584.46,628.33 583.58,630.54 582.26,631.93 C580.94,633.33 579.54,633.99 576.9,634.43 L545.31,640.01 C544.28,640.23 543.33,640.3 542.59,640.3 C538.18,640.3 534.73,636.77 534.73,632.37 C534.73,628.26 537.23,625.02 540.9,624.36 L550.08,622.52 L541.41,619.36 C537,617.74 534.72,614.88 534.72,611.06 C534.72,607.24 536.78,604.52 541.33,602.83 L550.07,599.6 L542.28,598.28 C537.58,597.47 534.71,594.39 534.71,590.2 C534.71,585.42 538.38,582.04 543.53,582.04 C544.19,582.04 544.85,582.11 545.51,582.19 L576.88,587.77 C581.58,588.58 584.45,591.52 584.45,595.7 C584.45,599.15 582.32,602.39 579.01,603.78 L562.77,611.05 L580.11,619.21 L580.13,619.22 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M550.23,669.98 C550.23,672.7 549.79,674.24 548.76,675.71 C547.36,677.62 545.09,678.8 542.74,678.8 C540.61,678.8 538.33,677.84 536.94,676.3 C535.62,674.83 535.1,673.14 535.1,670.35 L535.1,654.92 C535.1,651.69 535.91,649.56 537.67,648.09 C539.87,646.11 540.98,645.89 547.74,645.89 L575.37,645.89 C580.88,645.89 584.48,649.05 584.48,653.9 C584.48,656.4 583.3,658.82 581.54,660.22 C579.56,661.69 578.09,662.06 573.46,662.06 L550.24,662.06 L550.24,669.99 L550.23,669.98 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#A5D6A7" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="612.46" y="276.82" width="106.33" height="615.88"></rect> + <line x1="612.46" y1="310.49" x2="718.79" y2="310.49" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="612.46" y1="855.46" x2="718.79" y2="855.46" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <path d="M646.64,562.5 C642.53,557.72 640.17,551.63 640.17,545.38 C640.17,531.05 651.63,519.45 665.81,519.45 C679.99,519.45 691.6,531.13 691.6,545.46 C691.6,551.41 689.54,557.14 685.65,561.84 C682.49,565.81 679.18,567.79 675.95,567.79 C671.54,567.79 667.87,564.19 667.87,559.71 C667.87,557.8 668.68,555.74 669.85,554.64 L672.42,552.29 C674.33,550.53 675.36,547.96 675.36,545.31 C675.36,539.95 671.17,535.69 665.81,535.69 C660.45,535.69 656.26,539.95 656.26,545.24 C656.26,547.88 657.44,550.53 659.49,552.44 L661.25,554.13 C662.65,555.45 663.6,557.66 663.6,559.71 C663.6,563.97 659.85,567.79 655.67,567.79 C652.73,567.79 649.65,565.95 646.63,562.5 L646.64,562.5 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M652.59,572.05 C656.7,572.05 659.94,575.28 659.94,579.4 C659.94,581.38 659.28,583.07 657.59,585.13 C654.87,588.66 654.58,589.1 654.58,590.27 C654.58,591.52 655.46,592.33 656.71,592.33 C657.59,592.33 658.18,591.96 658.77,591.08 C659.06,590.64 659.21,590.42 660.17,587.85 C660.61,586.53 661.05,585.21 661.57,583.88 C664.07,576.75 668.7,573.23 675.53,573.23 C685.08,573.23 691.62,580.58 691.62,591.23 C691.62,600.05 686.92,606.95 680.89,606.95 C677,606.95 674.2,604.31 674.2,600.63 C674.2,598.43 674.93,596.66 676.99,593.94 C678.39,592.25 678.75,591.44 678.75,590.56 C678.75,589.53 677.87,588.65 676.84,588.65 C675.37,588.65 674.71,589.68 673.46,593.5 C672.21,597.69 670.23,601.66 668.32,603.93 C665.82,606.94 661.41,608.85 656.79,608.85 C652.17,608.85 648.12,607.16 645.11,604.22 C641.8,600.91 640.19,596.51 640.19,590.48 C640.19,580.05 645.63,572.04 652.61,572.04 L652.59,572.05 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M652.59,613.49 C656.7,613.49 659.94,616.72 659.94,620.84 C659.94,622.82 659.28,624.51 657.59,626.57 C654.87,630.1 654.58,630.54 654.58,631.71 C654.58,632.96 655.46,633.77 656.71,633.77 C657.59,633.77 658.18,633.4 658.77,632.52 C659.06,632.08 659.21,631.86 660.17,629.29 C660.61,627.97 661.05,626.65 661.57,625.32 C664.07,618.19 668.7,614.67 675.53,614.67 C685.08,614.67 691.62,622.02 691.62,632.67 C691.62,641.49 686.92,648.39 680.89,648.39 C677,648.39 674.2,645.75 674.2,642.07 C674.2,639.87 674.93,638.1 676.99,635.38 C678.39,633.69 678.75,632.88 678.75,632 C678.75,630.97 677.87,630.09 676.84,630.09 C675.37,630.09 674.71,631.12 673.46,634.94 C672.21,639.13 670.23,643.1 668.32,645.37 C665.82,648.38 661.41,650.29 656.79,650.29 C652.17,650.29 648.12,648.6 645.11,645.66 C641.8,642.35 640.19,637.95 640.19,631.92 C640.19,621.49 645.63,613.48 652.61,613.48 L652.59,613.49 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M2960.51087,1360.04 L2960.11,1388.43 C2960.1,1389.21 2959.98,1389.99 2959.75,1390.78 L2902.17,1585.76 C2897.66,1601.03 2876,1611.63 2854.05,1608.93 L2675.08,1586.95 C2659.46,1585.04 2650.29,1576.68 2650.42842,1566.62 L2650.83,1538.22 C2650.88,1534.87 2651.95,1531.34 2654.16,1527.8 L2768.33,1344.56 C2773.38,1336.46 2789.74,1331.18 2805.06,1332.58 L2935.8,1344.47 C2950.25,1345.79 2960.62,1352.44 2960.51087,1360.06 L2960.51087,1360.04 Z" id="Path" stroke="#465362" stroke-width="10" fill="#465362" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2854.44,1580.53 L2675.47,1558.55 C2654.65,1555.99 2645.29,1542.02 2654.15,1527.79 L2768.32,1344.54 C2773.36,1336.44 2789.73,1331.16 2805.05,1332.56 L2935.79,1344.45 C2951.71,1345.9 2962.66,1353.83 2960.14,1362.38 L2902.56,1557.36 C2898.05,1572.62 2876.39,1583.23 2854.44,1580.53 L2854.44,1580.53 Z" id="Path" stroke="#465362" stroke-width="10" fill="#B0BEC5" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2889.2,1354.81 L2837.9,1350.05 C2834.27,1349.71 2832.12,1347.9 2833.09,1346 L2833.09,1346 C2834.06,1344.12 2837.75,1342.87 2841.34,1343.2 L2892.08,1347.86 C2895.73,1348.19 2898.06,1350.01 2897.29,1351.93 L2897.29,1351.93 C2896.51,1353.86 2892.89,1355.15 2889.2,1354.81 L2889.2,1354.81 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M2786.84,1409.97 C2786.48,1409.56 2786.43,1409.11 2786.7,1408.61 L2787.93,1406.32 L2774.92,1405.01 C2774.28,1404.94 2773.78,1404.76 2773.44,1404.45 C2773.1,1404.15 2772.96,1403.79 2773.02,1403.38 L2773.79,1399.18 C2773.85,1398.92 2774.01,1398.66 2774.26,1398.39 C2774.51,1398.13 2774.84,1397.9 2775.23,1397.73 L2798.58,1386.99 C2799.26,1386.64 2800.04,1386.51 2800.9,1386.59 L2809.81,1387.46 C2810.56,1387.53 2811.11,1387.76 2811.45,1388.13 C2811.8,1388.5 2811.85,1388.92 2811.61,1389.39 L2806.21,1399.92 L2807.59,1400.06 C2808.35,1400.14 2808.92,1400.37 2809.28,1400.77 C2809.65,1401.17 2809.71,1401.61 2809.46,1402.1 L2807.29,1406.39 C2807.04,1406.88 2806.55,1407.28 2805.83,1407.57 C2805.1,1407.87 2804.35,1407.98 2803.58,1407.9 L2802.18,1407.76 L2801,1410.06 C2800.75,1410.56 2800.26,1410.96 2799.55,1411.26 C2798.84,1411.56 2798.09,1411.67 2797.32,1411.6 L2788.52,1410.71 C2787.75,1410.63 2787.18,1410.39 2786.82,1409.98 L2786.84,1409.97 Z M2793.65,1399.29 C2793.93,1399.32 2794.21,1399.29 2794.5,1399.23 C2794.79,1399.16 2795.01,1399.05 2795.18,1398.9 C2795.27,1398.81 2795.5,1398.41 2795.88,1397.71 C2796.23,1397.05 2796.42,1396.66 2796.44,1396.53 C2796.47,1396.4 2796.37,1396.27 2796.15,1396.13 C2795.96,1396.02 2795.72,1395.94 2795.45,1395.92 C2795.21,1395.9 2794.99,1395.92 2794.8,1395.96 C2794.6,1396.01 2794.16,1396.19 2793.48,1396.49 C2792.79,1396.79 2791.87,1397.21 2790.7,1397.74 C2790.14,1398 2789.99,1398.28 2790.25,1398.58 C2790.51,1398.88 2791,1399.07 2791.72,1399.14 C2792.37,1399.18 2793.02,1399.23 2793.66,1399.3 L2793.65,1399.29 Z" id="Shape" stroke="none" fill="#FFFFFF" fill-rule="nonzero"></path> + <path d="M2812.97,1401.73 C2812.54,1401.32 2812.45,1400.88 2812.69,1400.4 L2815.54,1394.73 C2815.78,1394.26 2816.28,1393.88 2817.05,1393.6 C2817.82,1393.32 2818.62,1393.22 2819.45,1393.31 L2828.53,1394.21 C2829.37,1394.29 2829.99,1394.53 2830.41,1394.93 C2830.83,1395.33 2830.92,1395.76 2830.69,1396.24 L2827.97,1401.93 C2827.74,1402.42 2827.25,1402.8 2826.49,1403.09 C2825.74,1403.38 2824.94,1403.48 2824.09,1403.4 L2814.89,1402.48 C2814.04,1402.4 2813.41,1402.15 2812.97,1401.74 L2812.97,1401.73 Z M2807.77,1412.09 C2807.34,1411.67 2807.24,1411.21 2807.49,1410.71 L2810.43,1404.86 C2810.68,1404.37 2811.19,1403.98 2811.97,1403.7 C2812.75,1403.42 2813.56,1403.31 2814.41,1403.4 L2823.62,1404.32 C2824.47,1404.41 2825.1,1404.65 2825.52,1405.06 C2825.94,1405.47 2826.03,1405.92 2825.8,1406.41 L2822.99,1412.28 C2822.75,1412.78 2822.25,1413.18 2821.48,1413.48 C2820.71,1413.78 2819.9,1413.88 2819.04,1413.8 L2809.7,1412.85 C2808.84,1412.76 2808.19,1412.51 2807.76,1412.09 L2807.77,1412.09 Z" id="Shape" stroke="none" fill="#FFFFFF" fill-rule="nonzero"></path> + <path d="M2833.62,1413.98 C2831.38,1412.59 2829.96,1410.85 2829.34,1408.76 C2828.72,1406.68 2828.99,1404.44 2830.14,1402.03 C2831.26,1399.66 2833.03,1397.62 2835.44,1395.9 C2837.83,1394.19 2840.61,1392.94 2843.79,1392.17 C2846.95,1391.39 2850.2,1391.17 2853.55,1391.5 C2856.9,1391.83 2859.68,1392.64 2861.9,1393.95 C2864.13,1395.26 2865.61,1396.92 2866.33,1398.94 C2867.05,1400.97 2866.92,1403.19 2865.9,1405.6 C2864.88,1408.01 2863.2,1410.12 2860.82,1411.91 C2858.42,1413.72 2855.59,1415.04 2852.33,1415.88 C2849.05,1416.72 2845.68,1416.96 2842.21,1416.61 C2838.74,1416.26 2835.88,1415.38 2833.64,1413.99 L2833.62,1413.98 Z M2850.07,1406.39 C2851.03,1405.37 2851.73,1404.37 2852.16,1403.39 C2852.69,1402.19 2852.64,1401.34 2852.02,1400.85 C2851.4,1400.36 2850.58,1400.06 2849.57,1399.96 C2848.56,1399.86 2847.59,1400.02 2846.64,1400.44 C2845.69,1400.86 2844.98,1401.59 2844.51,1402.63 C2844.1,1403.53 2843.9,1404.56 2843.91,1405.72 C2843.91,1406.88 2844.72,1407.54 2846.31,1407.7 C2847.86,1407.86 2849.12,1407.42 2850.08,1406.39 L2850.07,1406.39 Z" id="Shape" stroke="none" fill="#FFFFFF" fill-rule="nonzero"></path> + <path d="M2880.45,1419.46 C2880.03,1419.04 2879.92,1418.57 2880.12,1418.07 L2881.04,1415.72 L2867.7,1414.37 C2867.04,1414.3 2866.52,1414.11 2866.13,1413.8 C2865.74,1413.49 2865.55,1413.12 2865.56,1412.7 L2865.75,1408.39 C2865.78,1408.12 2865.9,1407.85 2866.12,1407.58 C2866.34,1407.31 2866.64,1407.08 2867.01,1406.9 L2889.08,1395.88 C2889.72,1395.52 2890.48,1395.38 2891.37,1395.47 L2900.49,1396.36 C2901.26,1396.44 2901.84,1396.66 2902.24,1397.04 C2902.64,1397.42 2902.76,1397.85 2902.58,1398.33 L2898.61,1409.14 L2900.03,1409.28 C2900.81,1409.36 2901.42,1409.6 2901.84,1410.01 C2902.27,1410.42 2902.39,1410.87 2902.21,1411.37 L2900.62,1415.77 C2900.44,1416.27 2900,1416.68 2899.31,1416.98 C2898.62,1417.29 2897.88,1417.4 2897.09,1417.32 L2895.66,1417.18 L2894.79,1419.54 C2894.6,1420.05 2894.17,1420.46 2893.49,1420.77 C2892.81,1421.08 2892.07,1421.2 2891.28,1421.12 L2882.26,1420.21 C2881.47,1420.13 2880.86,1419.88 2880.44,1419.46 L2880.45,1419.46 Z M2885.82,1408.5 C2886.11,1408.53 2886.39,1408.5 2886.67,1408.44 C2886.95,1408.37 2887.17,1408.26 2887.31,1408.1 C2887.39,1408.01 2887.57,1407.6 2887.84,1406.88 C2888.1,1406.2 2888.23,1405.8 2888.24,1405.67 C2888.24,1405.54 2888.13,1405.4 2887.89,1405.25 C2887.68,1405.13 2887.43,1405.06 2887.15,1405.03 C2886.91,1405.01 2886.69,1405.03 2886.5,1405.07 C2886.31,1405.12 2885.89,1405.31 2885.24,1405.62 C2884.59,1405.93 2883.71,1406.36 2882.61,1406.9 C2882.08,1407.16 2881.97,1407.45 2882.27,1407.76 C2882.57,1408.07 2883.09,1408.26 2883.83,1408.34 C2884.49,1408.38 2885.16,1408.44 2885.81,1408.5 L2885.82,1408.5 Z" id="Shape" stroke="none" fill="#FFFFFF" fill-rule="nonzero"></path> + <path d="M2847.38,1546.79 L2710.77,1530.6 C2696.58,1528.92 2689.7,1519.69 2695.24,1510.2 L2695.24,1510.2 C2700.65,1500.94 2715.93,1494.85 2729.54,1496.39 L2860.43,1511.27 C2874.57,1512.88 2883.5,1521.92 2880.25,1531.67 L2880.25,1531.67 C2876.92,1541.67 2862.14,1548.54 2847.36,1546.79 L2847.38,1546.79 Z" id="Path" stroke="none" fill="#CFD8DC" fill-rule="nonzero"></path> + <path d="M2739.7,1515.36 C2735.87,1522.69 2723.91,1527.7 2713.07,1526.42 C2702.26,1525.15 2696.97,1518.14 2701.14,1510.89 C2705.24,1503.77 2716.96,1499.07 2727.43,1500.26 C2737.93,1501.46 2743.46,1508.17 2739.7,1515.36 L2739.7,1515.36 Z" id="Path" stroke="none" fill="#ECEFF1" fill-rule="nonzero"></path> + <path d="M2542.38,1093.43 C2497.62,1093.43 2461.33,1108.53 2461.33,1127.15 L2461.33,1352.61 C2461.33,1371.23 2497.62,1386.33 2542.38,1386.33 C2587.14,1386.33 2623.43,1371.23 2623.43,1352.61 L2623.43,1127.15 C2623.43,1108.53 2587.14,1093.43 2542.38,1093.43 L2542.38,1093.43 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2623.84,1061.5 L2616.96,1078.29 L2594.95,1131.97 C2593.33,1132.87 2591.41,1133.79 2589.14,1134.71 C2588.81,1134.85 2588.47,1134.99 2588.12,1135.12 C2580.41,1138.13 2571.11,1140.29 2560.98,1141.47 L2591.2,1067.74 L2598.09,1050.94 C2599.72,1046.96 2604.28,1045.05 2608.26,1046.68 L2619.59,1051.33 C2623.57,1052.96 2625.48,1057.51 2623.84,1061.5 L2623.84,1061.5 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FF8080" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2616.96,1078.29 L2594.95,1131.97 C2593.33,1132.87 2591.41,1133.79 2589.14,1134.71 C2588.81,1134.85 2588.47,1134.99 2588.12,1135.12 C2580.41,1138.13 2571.11,1140.29 2560.98,1141.47 L2591.2,1067.74 L2616.96,1078.29 L2616.96,1078.29 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFB74D" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2512.74,1078.7 L2527.77,1141.87 C2519.19,1141.11 2511.12,1139.66 2503.98,1137.6 L2476.92,1023.82 C2475.5,1017.86 2479.18,1011.89 2485.13,1010.48 C2485.99,1010.27 2486.86,1010.18 2487.71,1010.18 C2492.72,1010.18 2497.26,1013.6 2498.47,1018.69 L2499.75,1024.08 L2512.74,1078.7 L2512.74,1078.7 Z" id="Path" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" transform="translate(2505.2199, 1051.6457) rotate(-13.38) translate(-2505.2199, -1051.6457)" x="2496.11986" y="1023.51067" width="18.2" height="56.27" rx="9.1"></rect> + <path d="M2571.7,1030.13 L2571.34,1032.96 L2567.89,1060.37 L2557.63,1141.82 C2552.69,1142.29 2547.57,1142.53 2542.37,1142.53 C2539.66,1142.53 2536.98,1142.47 2534.34,1142.33 L2545.04,1057.48 L2548.46,1030.32 L2548.85,1027.25 L2556.31,1028.19 L2563.68,1029.12 L2571.7,1030.13 L2571.7,1030.13 Z" id="Path" stroke="#465362" stroke-width="10" fill="#81C784" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2591.42,1022.57 C2589.34,1039.08 2572.41,1065.5 2555.91,1063.42 C2539.41,1061.34 2529.56,1031.54 2531.64,1015.04 C2533.72,998.53 2548.79,986.84 2565.3,988.92 C2581.81,991 2593.5,1006.07 2591.42,1022.58 L2591.42,1022.57 Z" id="Path" stroke="#465362" stroke-width="10" fill="#81C784" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2550.79,1013.92 C2553.27,1017.12 2558.54,1029.25 2555.34,1031.74 C2552.14,1034.23 2541.69,1026.11 2539.21,1022.91 C2536.73,1019.71 2537.31,1015.11 2540.51,1012.63 C2543.71,1010.15 2548.31,1010.73 2550.79,1013.93 L2550.79,1013.92 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M2572.58,1016.66 C2569.38,1019.14 2561.27,1029.59 2563.75,1032.79 C2566.23,1035.99 2578.37,1030.72 2581.57,1028.24 C2584.77,1025.76 2585.35,1021.16 2582.87,1017.96 C2580.39,1014.76 2575.79,1014.18 2572.59,1016.66 L2572.58,1016.66 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M2481.72,1125.09 C2481.93,1126.05 2484.94,1130.36 2495.6,1134.71 C2495.94,1134.85 2496.28,1134.99 2496.63,1135.12 C2498.94,1136.02 2501.4,1136.85 2503.98,1137.6 C2511.12,1139.66 2519.19,1141.11 2527.77,1141.87 C2529.93,1142.08 2532.12,1142.23 2534.34,1142.33 C2536.98,1142.47 2539.66,1142.53 2542.37,1142.53 C2547.57,1142.53 2552.69,1142.29 2557.63,1141.82 C2558.75,1141.72 2559.86,1141.6 2560.97,1141.47 L2560.97,1141.47 C2571.1,1140.29 2580.4,1138.13 2588.11,1135.12 C2588.46,1134.99 2588.8,1134.85 2589.13,1134.71 C2591.4,1133.79 2593.32,1132.87 2594.94,1131.97 C2600.94,1128.68 2602.85,1125.85 2603.02,1125.09" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2312.14,1465.72 L2257.19,1490.2 C2245.32,1495.49 2231.82,1495.79 2219.72,1491.05 C2166.25,1470.08 2112.78,1449.1 2059.31,1428.13 C2038.75,1420.07 2038.1,1391.21 2058.27,1382.22 L2087.96,1368.99 C2106.25,1360.84 2126.04,1356.54 2146.07,1356.51975 C2160.19,1356.5 2175.72,1357.66 2192.26,1360.77 C2249.59,1371.51 2291.85,1400.46 2318.56,1424.39 C2332.03,1436.45 2328.66,1458.36 2312.14,1465.72 L2312.14,1465.72 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M869.1,838.92 C863.82,855.85 852.58,871 836.23,880.95 C800.55,902.65 754.04,891.31 732.34,855.63 C710.64,819.95 721.98,773.44 757.66,751.74 C774.01,741.8 792.63,738.79 810.1,741.89 C787.91,759.6 781.81,791.44 796.95,816.34 C812.09,841.24 843.17,850.47 869.1,838.92 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFF9C4" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <circle id="Oval" stroke="none" fill="#FFCC80" fill-rule="nonzero" cx="755.38" cy="789.42" r="8.86"></circle> + <circle id="Oval" stroke="none" fill="#FFCC80" fill-rule="nonzero" cx="759.38" cy="841.85" r="15.66"></circle> + <circle id="Oval" stroke="none" fill="#FFCC80" fill-rule="nonzero" cx="800.6" cy="852.3" r="9.86"></circle> + <text id="hero-wordmark" x="1638" y="675" text-anchor="middle" dominant-baseline="middle" font-family="Fraunces, Georgia, serif" font-size="64" font-weight="600" fill="#465362"><!-- HTML e pessoas --></text> + <g id="donut-before" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(667.33, 1245.92)" stroke-linecap="round" stroke-linejoin="round"> + <path d="M214.51,61.42 C96.04,61.42 0,101.37 0,150.66 L0,159.18 C0,179.91 17,198.99 45.5,214.14 C70.5,242.91 136.73,263.47 214.51,263.47 C292.29,263.47 358.52,242.91 383.52,214.14 C412.03,198.99 429.02,179.91 429.02,159.18 L429.02,150.66 C429.02,101.38 332.98,61.42 214.51,61.42 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero"></path> + <path d="M358.92,125.89 C362.98,109.25 360.39,90.57 352.4,77.44 C315.12,16.18 231.46,16.18 214.51,16.18 C197.56,16.18 114.04,16.18 76.71,77.3 C68.92,90.05 66.32,108.08 69.86,124.48 C69.97,124.98 70.08,125.46 70.18,125.91 C70.81,128.7 71.34,130.53 71.52,131.16 C95.71,213.44 196.18,213.44 214.51,213.44 C232.84,213.44 333.31,213.44 357.5,131.16 C357.99,129.5 358.44,127.82 358.84,126.18 C358.86,126.09 358.89,125.99 358.91,125.9 L358.92,125.89 Z" id="Path" stroke="#465362" stroke-width="10" fill="#977763" fill-rule="nonzero"></path> + <path d="M357.76,80.84 C361.79,96.21 359.22,113.46 351.3,125.58 C314.32,182.15 231.33,182.15 214.52,182.15 C197.71,182.15 114.85,182.15 77.82,125.71 C70.1,113.94 67.51,97.29 71.02,82.15 C71.13,81.69 71.23,81.24 71.34,80.83 C71.97,78.25 72.49,76.57 72.67,75.98 C96.67,0 196.33,0 214.51,0 C232.69,0 332.36,0 356.35,75.98 C356.84,77.51 357.28,79.06 357.68,80.58 C357.7,80.67 357.73,80.76 357.75,80.84 L357.76,80.84 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFCDD2" fill-rule="nonzero"></path> + <line x1="102.23" y1="90.22" x2="113.31" y2="80.03" id="Path" stroke="#FFFFFF" stroke-width="10"></line> + <line x1="180.65" y1="86.35" x2="191.28" y2="97.99" id="Path" stroke="#FFFFFF" stroke-width="10"></line> + <line x1="258.18" y1="142.62" x2="267.49" y2="133.41" id="Path" stroke="#FFFFFF" stroke-width="10"></line> + <line x1="294.07" y1="58.32" x2="306.03" y2="64.08" id="Path" stroke="#FFFFFF" stroke-width="10"></line> + <line x1="271.03" y1="79.55" x2="265.11" y2="91.07" id="Path" stroke="#FFFFFF" stroke-width="10"></line> + <line x1="317.99" y1="97.31" x2="333.06" y2="99.52" id="Path" stroke="#FFFFFF" stroke-width="10"></line> + <line x1="222.3" y1="18.91" x2="232.93" y2="15.03" id="Path" stroke="#FFFFFF" stroke-width="10"></line> + <line x1="126.6" y1="35.4" x2="139.45" y2="32.24" id="Path" stroke="#FFFFFF" stroke-width="10"></line> + <line x1="133.02" y1="124.67" x2="150.97" y2="135.83" id="Path" stroke="#FFFFFF" stroke-width="10"></line> + <line x1="202.36" y1="144.56" x2="216.98" y2="134.86" id="Path" stroke="#FFFFFF" stroke-width="10"></line> + <line x1="221.85" y1="75.67" x2="236.92" y2="82.95" id="Path" stroke="#FFFFFF" stroke-width="10"></line> + <line x1="144.76" y1="75.67" x2="148.75" y2="91.07" id="Path" stroke="#FFFFFF" stroke-width="10"></line> + <line x1="104.89" y1="117.25" x2="113.31" y2="112.37" id="Path" stroke="#FFFFFF" stroke-width="10"></line> + <line x1="329.07" y1="76.49" x2="334.39" y2="68.95" id="Path" stroke="#FFFFFF" stroke-width="10"></line> + <line x1="300.05" y1="123.01" x2="317.11" y2="128.1" id="Path" stroke="#FFFFFF" stroke-width="10"></line> + <line x1="180.21" y1="20.85" x2="194.83" y2="29.58" id="Path" stroke="#FFFFFF" stroke-width="10"></line> + <path d="M171.65,32.37 C171.65,58.41 260.05,58.41 260.05,32.37" id="Path" stroke="#465362" stroke-width="10"></path> + </g> + <g id="donut-after" opacity="0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(667.33, 1245.92)"> + <path d="M214.51,61.43 C96.04,61.43 0,101.39 0,150.67 L0,159.19 C0,179.92 17,199 45.5,214.15 C70.5,242.92 136.73,263.48 214.51,263.48 C292.29,263.48 358.52,242.92 383.52,214.15 C412.03,199 429.02,179.92 429.02,159.19 L429.02,150.67 C429.02,101.39 332.98,61.43 214.51,61.43 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M352.4,77.46 C342.83,62.13 327.95,56.62 323.24,54.96 C301.02,47.1 274.48,53.25 257.96,69.72 C252.57,75.11 240.65,87 242.16,104.21 C243.77,122.53 259.36,132.87 261.65,134.33 C259.75,137 245.78,157.19 248.82,180.13 C249.3,183.71 250.19,187.37 251.61,191.04 C254.63,198.84 259.23,204.64 263.37,208.72 C240.92,213.46 221.59,213.46 214.51,213.46 C196.17,213.46 95.71,213.46 71.51,131.17 C71.33,130.54 70.8,128.72 70.17,125.93 C70.07,125.47 69.96,124.99 69.85,124.49 C67.88,115.36 67.81,105.74 69.49,96.8 C70.81,89.67 73.25,82.98 76.7,77.32 C114.03,16.19 197.58,16.19 214.51,16.19 C227.45,16.19 279.34,16.19 319.74,43.51 C332.22,51.95 343.6,63 352.4,77.46 Z" id="Path" stroke="#465362" stroke-width="10" fill="#977763" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M359.61,96.92 C356.49,83.38 345.32,67.52 327.37,63.23 C311.51,59.43 298.47,66.6 295.18,68.54 C264.58,66.36 242.56,85.91 242.16,104.21 C241.79,121.07 259.86,133.17 261.65,134.33 C259.75,137 245.78,157.19 248.82,180.13 C232.85,182.17 220.07,182.17 214.51,182.17 C197.71,182.17 114.84,182.17 77.81,125.72 C72.53,117.68 69.65,107.37 69.49,96.8 C69.4,91.91 69.9,86.96 71.01,82.16 C71.12,81.7 71.23,81.25 71.33,80.84 C71.96,78.26 72.48,76.57 72.66,75.99 C96.66,0 196.32,0 214.51,0 C232.7,0 332.35,0 356.35,75.99 C356.76,77.28 357.14,78.59 357.48,79.87 C357.55,80.11 357.62,80.35 357.68,80.59 C357.71,80.68 357.73,80.77 357.75,80.85 C359.12,86.08 359.73,91.53 359.61,96.92 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFCDD2" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <line x1="102.23" y1="90.24" x2="113.31" y2="80.05" id="Path" stroke="#FFFFFF" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="180.65" y1="86.36" x2="191.28" y2="98.01" id="Path" stroke="#FFFFFF" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="222.3" y1="18.93" x2="232.93" y2="15.04" id="Path" stroke="#FFFFFF" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="126.6" y1="35.42" x2="139.45" y2="32.25" id="Path" stroke="#FFFFFF" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="133.02" y1="124.69" x2="150.97" y2="135.85" id="Path" stroke="#FFFFFF" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="202.36" y1="144.58" x2="216.98" y2="134.88" id="Path" stroke="#FFFFFF" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="221.85" y1="75.69" x2="236.92" y2="82.97" id="Path" stroke="#FFFFFF" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></line> + <path d="M360.62,104.84 C359.33,122.29 351.12,138.93 338.45,149.1 C329.59,156.2 320.04,158.97 313.5,160.15 C313.14,160.22 312.79,160.27 312.45,160.33 C295.29,160.63 280.45,166.65 271.41,176.07 C267.68,179.95 264.94,184.4 263.42,189.27 C262.29,192.9 260.96,199.58 263.4,208.71 C263.41,208.73 263.41,208.75 263.42,208.77 C263.4,208.75 263.39,208.74 263.37,208.72 C259.23,204.64 254.63,198.84 251.61,191.04 C250.19,187.37 249.3,183.71 248.82,180.13 C245.78,157.19 259.75,137 261.65,134.33 C259.86,133.17 241.79,121.07 242.16,104.21 C242.56,85.91 264.58,66.36 295.18,68.54 C298.47,66.6 311.51,59.43 327.37,63.22 C345.32,67.52 356.48,83.38 359.61,96.91 C360.34,100.08 360.56,102.83 360.62,104.83 L360.62,104.84 Z" id="Path" stroke="#465362" stroke-width="10" fill="#E8D0C1" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <line x1="144.76" y1="75.69" x2="148.75" y2="91.09" id="Path" stroke="#FFFFFF" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="104.89" y1="117.26" x2="113.31" y2="112.39" id="Path" stroke="#FFFFFF" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="180.21" y1="20.87" x2="194.83" y2="29.6" id="Path" stroke="#FFFFFF" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></line> + <path d="M171.65,32.39 C171.65,58.43 260.05,58.43 260.05,32.39" id="Path" stroke="#465362" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M263.4,208.71 C263.4,208.71 263.41,208.75 263.42,208.77 C263.4,208.75 263.39,208.74 263.37,208.72 C263.38,208.72 263.39,208.72 263.4,208.72 L263.4,208.71 Z" id="Path" stroke="#465362" stroke-width="10" fill="#E2C7B5" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M359.61,96.92 C358.28,89.8 355.84,83.11 352.4,77.46 C357.11,85.01 358.87,92.27 359.61,96.92 L359.61,96.92 Z" id="Path" stroke="#465362" stroke-width="10" fill="#E2C7B5" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M338.91,180.78 C338.91,183.78 336.25,185.59 334.28,187.56 C332.31,189.53 330.5,193.65 327.5,193.65 C324.5,193.65 320.38,191.84 318.41,189.87 C316.44,187.9 316.04,183.78 316.04,180.78 C316.04,177.78 317.11,174.33 319.08,172.36 C321.05,170.39 324.49,170.15 327.5,170.15 C330.51,170.15 333.78,170.56 335.75,172.53 C337.72,174.5 338.91,177.77 338.91,180.78 L338.91,180.78 Z" id="Path" fill="#E8D0C1" fill-rule="nonzero"></path> + <path d="M305.37,211.14 C305.37,214.14 304.73,217.33 302.76,219.3 C300.79,221.27 297.6,221.230061 294.6,221.230061 C291.6,221.230061 288.64,221.03 286.68,219.06 C284.72,217.09 285.36,214.14 285.36,211.14 C285.36,208.14 284.25,204.72 286.22,202.75 C288.19,200.78 291.6,198.75 294.61,198.75 C297.62,198.75 300.93,200.89 302.89,202.86 C304.85,204.83 305.38,208.14 305.38,211.14 L305.37,211.14 Z" id="Path" fill="#E8D0C1" fill-rule="nonzero"></path> + <path d="M372.77,182.17 C372.77,184.29 372.13,185.75 370.74,187.14 C369.35,188.53 367.89,189.83 365.77,189.83 C363.65,189.83 361.63,189.08 360.24,187.69 C358.85,186.3 358.21,184.28 358.21,182.16 C358.21,180.04 359.04,178.21 360.43,176.82 C361.82,175.43 363.65,175.85 365.77,175.85 C367.89,175.85 369.74,175.41 371.13,176.8 C372.52,178.19 372.77,180.03 372.77,182.16 L372.77,182.17 Z" id="Path" fill="#E8D0C1" fill-rule="nonzero"></path> + </g> + <g id="coffee-before" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(276.2, 1312.86)"> + <path d="M153.19,181.93 C68.59,181.93 0,210.46 0,245.66 L0,251.75 C0,286.95 68.59,315.48 153.19,315.48 C237.79,315.48 306.38,286.95 306.38,251.75 L306.38,245.66 C306.38,210.46 237.79,181.93 153.19,181.93 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFB74D" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <circle id="Oval" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="253.12" cy="93.16" r="57.79"></circle> + <path d="M153.19,0 C85.92,0 31.39,22.68 31.39,50.67 L31.39,226.81 C31.39,254.79 85.92,277.48 153.19,277.48 C220.46,277.48 274.99,254.8 274.99,226.81 L274.99,50.67 C274.99,22.69 220.46,0 153.19,0 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M256.68,44.04 C256.31,45.67 251.17,53.05 232.98,60.46 C232.41,60.69 231.83,60.92 231.23,61.15 C210.33,69.3 182.6,73.79 153.18,73.79 C123.76,73.79 96.04,69.3 75.14,61.15 C74.55,60.92 73.95,60.69 73.38,60.46 C55.19,53.04 50.06,45.67 49.69,44.04" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M232.99,60.45 C232.42,60.68 231.84,60.91 231.24,61.14 C210.34,69.29 182.61,73.78 153.19,73.78 C123.77,73.78 96.05,69.29 75.15,61.14 C74.56,60.91 73.96,60.68 73.39,60.45 C73.96,60.21 74.56,59.98 75.15,59.75 C96.05,51.6 123.78,47.12 153.19,47.12 C182.6,47.12 210.34,51.61 231.24,59.75 C231.83,59.98 232.42,60.21 232.99,60.45 Z" id="Path" stroke="#465362" stroke-width="10" fill="#B9937E" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M166.98,122.86 C170.25,132.8 173.53,142.69 176.8,152.53 C187.39,151.9 197.95,150.75 208.45,149.08 C217.88,147.52 221.77,158.81 214.17,165.82 C205.69,173.53 197.17,180.9 188.63,187.92 C191.89,197.64 195.15,207.31 198.41,216.94 C201.33,225.59 191.03,234.45 183.34,229.44 C174.79,223.92 166.21,218.06 157.63,211.86 C149.05,218.06 140.48,223.92 131.92,229.44 C124.23,234.45 113.93,225.59 116.85,216.94 C120.11,207.32 123.37,197.65 126.63,187.92 C118.08,180.89 109.56,173.53 101.09,165.82 C93.49,158.81 97.38,147.52 106.81,149.08 C117.31,150.75 127.87,151.9 138.46,152.53 C141.73,142.69 145,132.8 148.28,122.86 C151.22,114.01 164.04,114.01 166.98,122.86 L166.98,122.86 Z" id="Path" fill="#FFB74D" fill-rule="nonzero"></path> + <circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="100.82" cy="114.78" r="10.69"></circle> + <circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="243.67" cy="181.93" r="10.69"></circle> + <circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="85.15" cy="181.93" r="4.98"></circle> + <circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="216.03" cy="104.1" r="15.92"></circle> + <circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="65.22" cy="216.77" r="8.16"></circle> + </g> + <g id="coffee-after" opacity="0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(276.55, 1312.55)"> + <path d="M153.19,181.93 C68.59,181.93 0,210.46 0,245.66 L0,251.75 C0,286.95 68.59,315.48 153.19,315.48 C237.79,315.48 306.38,286.95 306.38,251.75 L306.38,245.66 C306.38,210.46 237.79,181.93 153.19,181.93 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFB74D" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <circle id="Oval" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="253.12" cy="93.17" r="57.79"></circle> + <path d="M153.19,0 C85.92,0 31.39,22.68 31.39,50.67 L31.39,226.81 C31.39,254.79 85.92,277.48 153.19,277.48 C220.46,277.48 274.99,254.8 274.99,226.81 L274.99,50.67 C274.99,22.69 220.46,0 153.19,0 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M256.68,44.04 C256.31,45.67 251.17,53.05 232.98,60.46 C232.41,60.69 231.83,60.92 231.23,61.15 C210.33,69.3 182.6,73.79 153.18,73.79 C123.76,73.79 96.04,69.3 75.14,61.15 C74.55,60.92 73.95,60.69 73.38,60.46 C55.19,53.04 50.06,45.67 49.69,44.04" id="Path" stroke="#465362" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M166.97,122.86 C170.24,132.8 173.52,142.69 176.79,152.53 C187.38,151.9 197.94,150.75 208.44,149.08 C217.87,147.52 221.76,158.81 214.16,165.82 C205.68,173.53 197.16,180.9 188.62,187.92 C191.88,197.64 195.14,207.31 198.4,216.94 C201.32,225.59 191.02,234.45 183.33,229.44 C174.78,223.92 166.2,218.06 157.62,211.86 C149.04,218.06 140.47,223.92 131.91,229.44 C124.22,234.45 113.92,225.59 116.84,216.94 C120.1,207.32 123.36,197.65 126.62,187.92 C118.07,180.89 109.55,173.53 101.08,165.82 C93.48,158.81 97.37,147.52 106.8,149.08 C117.3,150.75 127.86,151.9 138.45,152.53 C141.72,142.69 144.99,132.8 148.27,122.86 C151.21,114.01 164.03,114.01 166.97,122.86 L166.97,122.86 Z" id="Path" fill="#FFB74D" fill-rule="nonzero"></path> + <circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="100.82" cy="114.79" r="10.69"></circle> + <circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="243.67" cy="181.93" r="10.69"></circle> + <circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="85.15" cy="181.93" r="4.98"></circle> + <circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="216.02" cy="104.1" r="15.92"></circle> + <circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="65.22" cy="216.77" r="8.16"></circle> + </g> + <g id="sparkle" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(2296.7975, 214.8175)"> + <path d="M54.8325,30.2125 C41.0825,35.5425 35.5425,41.0825 30.2125,54.8325 C29.4725,56.7425 26.7925,56.7425 26.0525,54.8325 C20.7225,41.0825 15.1825,35.5425 1.4325,30.2125 C-0.4775,29.4725 -0.4775,26.7925 1.4325,26.0525 C15.1825,20.7225 20.7225,15.1825 26.0525,1.4325 C26.7925,-0.4775 29.4725,-0.4775 30.2125,1.4325 C35.5425,15.1825 41.0825,20.7225 54.8325,26.0525 C56.7425,26.7925 56.7425,29.4725 54.8325,30.2125 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path> + <path d="M120.8625,62.6825 C107.1125,68.0125 101.5725,73.5525 96.2425,87.3025 C95.5025,89.2125 92.8225,89.2125 92.0825,87.3025 C86.7525,73.5525 81.2125,68.0125 67.4625,62.6825 C65.5525,61.9425 65.5525,59.2625 67.4625,58.5225 C81.2125,53.1925 86.7525,47.6525 92.0825,33.9025 C92.8225,31.9925 95.5025,31.9925 96.2425,33.9025 C101.5725,47.6525 107.1125,53.1925 120.8625,58.5225 C122.7725,59.2625 122.7725,61.9425 120.8625,62.6825 L120.8625,62.6825 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path> + <path d="M71.0825,98.2425 C57.3325,103.5725 51.7925,109.1125 46.4625,122.8625 C45.7225,124.7725 43.0425,124.7725 42.3025,122.8625 C36.9725,109.1125 31.4325,103.5725 17.6825,98.2425 C15.7725,97.5025 15.7725,94.8225 17.6825,94.0825 C31.4325,88.7525 36.9725,83.2125 42.3025,69.4625 C43.0425,67.5525 45.7225,67.5525 46.4625,69.4625 C51.7925,83.2125 57.3325,88.7525 71.0825,94.0825 C72.9925,94.8225 72.9925,97.5025 71.0825,98.2425 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path> + </g> + <path d="M553.04,892.45 L143.55,892.45 C143.55,876.777694 156.13,864.064141 171.65,864.064141 C179.29,864.064141 186.21,867.144073 191.28,872.132552 C198.83,855.925044 215.15,844.695918 234.06,844.695918 C244.6,844.695918 254.34,848.189872 262.2,854.066987 C262.81,853.380314 263.45,852.703739 264.09,852.04736 C275.29,815.835447 308.75,789.55 348.3,789.55 C387.85,789.55 421.31,815.835447 432.5,852.04736 C433.15,852.703739 433.78,853.370216 434.4,854.066987 C442.26,848.179774 452,844.695918 462.54,844.695918 C481.45,844.695918 497.77,855.925044 505.32,872.132552 C510.39,867.133974 517.31,864.064141 524.95,864.064141 C540.47,864.064141 553.05,876.777694 553.05,892.45 L553.04,892.45 Z" id="cloud" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" opacity="0" stroke-linecap="round" stroke-linejoin="round"></path> + </g> + </g> + </g> + </g> +</svg>
A
src/assets/img/design/logo.svg
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8"?> +<svg width="2322px" height="495px" viewBox="0 0 2322 495" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>HTML e pessoas</title> + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g id="logo" transform="translate(10, 10)"> + <rect id="logo-border" stroke="#465362" stroke-width="17" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="736.625" y="176.75" width="1566.86261" height="283" rx="123.44"></rect> + <text id="logo-text" x="1520" y="330" text-anchor="middle" dominant-baseline="middle" font-family="Fraunces, Georgia, serif" font-size="120" font-weight="600" fill="#465362">HTML e pessoas</text> + <g id="mascot-hover" opacity="0" transform="translate(6, 0)" stroke="#465362" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"> + <line x1="146.285827" y1="377.04" x2="319.845827" y2="318.43" id="Path"></line> + <path d="M56.4958271,474.41 L123.035827,467.1 C149.885827,464.15 168.065827,441.55 159.785827,417.04 L132.775827,337.04 C124.505827,312.53 96.3458271,305.58 73.2058271,319.51 L15.8458271,354.03 C2.28582712,362.19 -3.35417288,381.06 2.00582712,396.92 L19.4858271,448.7 C24.8458271,464.56 40.7558271,476.15 56.4958271,474.42 L56.4958271,474.41 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path> + <line x1="75.7858271" y1="363.13" x2="98.6458271" y2="430.83" id="Path"></line> + <line x1="33.9858271" y1="382.27" x2="53.7958271" y2="440.95" id="Path"></line> + <line x1="493.405827" y1="377.04" x2="319.845827" y2="318.43" id="Path"></line> + <path d="M583.195827,474.41 L516.655827,467.1 C489.805827,464.15 471.625827,441.55 479.905827,417.04 L506.915827,337.04 C515.185827,312.53 543.345827,305.58 566.485827,319.51 L623.845827,354.03 C637.405827,362.19 643.045827,381.06 637.685827,396.92 L620.205827,448.7 C614.845827,464.56 598.935827,476.15 583.195827,474.42 L583.195827,474.41 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path> + <line x1="563.905827" y1="363.13" x2="541.045827" y2="430.83" id="Path"></line> + <line x1="605.715827" y1="382.27" x2="585.905827" y2="440.95" id="Path"></line> + <circle id="Oval" fill="#BBDEFB" fill-rule="nonzero" cx="319.845827" cy="318.43" r="145.32"></circle> + <line x1="245.355827" y1="102.33" x2="319.845827" y2="51.17" id="Path"></line> + <line x1="394.335827" y1="102.33" x2="319.845827" y2="51.17" id="Path"></line> + <circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="319.845827" cy="25.58" r="25.58"></circle> + <path d="M429.795827,99.35 C429.795827,120.51 380.575827,173.11 319.845827,173.11 C259.115827,173.11 209.895827,120.51 209.895827,99.35 C209.895827,82.85 429.785827,82.85 429.785827,99.35 L429.795827,99.35 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path> + <path d="M217.775827,282.53 C222.375827,277.93 228.725827,275.09 235.735827,275.09 C242.745827,275.09 249.095827,277.93 253.695827,282.53" id="Path"></path> + <path d="M385.995827,282.53 C390.595827,277.93 396.945827,275.09 403.955827,275.09 C410.965827,275.09 417.315827,277.93 421.915827,282.53" id="Path"></path> + <path d="M357.355827,300.956336 L357.355827,397.496336 C357.355827,416.576336 341.895827,432.046336 322.815827,432.046336 C303.735827,432.046336 288.265827,416.576336 288.265827,397.496336 L288.265827,300.956336 L357.355827,300.956336 Z" id="Path" fill="#465362" fill-rule="nonzero"></path> + <path d="M357.355827,366.436336 L357.355827,397.496336 C357.355827,416.576336 341.895827,432.046336 322.815827,432.046336 C303.735827,432.046336 288.265827,416.576336 288.265827,397.496336 L288.265827,366.826336 C299.195827,362.796336 311.025827,360.596336 323.355827,360.596336 C335.685827,360.596336 346.725827,362.656336 357.355827,366.436336 L357.355827,366.436336 Z" id="Path" fill="#FF8080" fill-rule="nonzero"></path> + </g> + <g id="mascot" stroke="#465362" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"> + <line x1="326.24" y1="318.43" x2="509.43" y2="318.43" id="Path"></line> + <path d="M625.65,381.96 L560.26,396.32 C533.88,402.11 509.43,386.52 509.43,360.65 L509.43,276.21 C509.43,250.35 533.88,234.75 560.26,240.54 L625.65,254.9 C641.11,258.3 652.49,274.36 652.49,291.1 L652.49,345.75 C652.49,362.49 641.12,378.56 625.65,381.95 L625.65,381.96 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path> + <line x1="571.77" y1="282.71" x2="571.77" y2="354.16" id="Path"></line> + <line x1="617.51" y1="287.47" x2="617.51" y2="349.4" id="Path"></line> + <line x1="143.06" y1="318.43" x2="326.24" y2="318.43" id="Path"></line> + <path d="M26.84,381.96 L92.23,396.32 C118.61,402.11 143.06,386.52 143.06,360.65 L143.06,276.21 C143.06,250.35 118.61,234.75 92.23,240.54 L26.84,254.9 C11.38,258.3 0,274.36 0,291.1 L0,345.75 C0,362.49 11.37,378.56 26.84,381.95 L26.84,381.96 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path> + <line x1="80.71" y1="282.71" x2="80.71" y2="354.16" id="Path"></line> + <line x1="34.98" y1="287.47" x2="34.98" y2="349.4" id="Path"></line> + <line x1="251.75" y1="102.33" x2="326.24" y2="51.17" id="Path"></line> + <line x1="400.73" y1="102.33" x2="326.24" y2="51.17" id="Path"></line> + <circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="326.24" cy="25.58" r="25.58"></circle> + <path d="M436.19,99.36 C436.19,120.52 386.96,173.12 326.24,173.12 C320.76,173.12 315.37,172.69 310.1,171.89 C257.03,163.88 216.29,118.61 216.29,99.36 C216.29,88.85 305.59,85.03 370.38,87.92 C407.26,89.56 436.19,93.37 436.19,99.36 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path> + <circle id="Oval" fill="#BBDEFB" fill-rule="nonzero" cx="326.24" cy="318.43" r="145.32"></circle> + <path d="M360.24,302.58 C351.4,311.42 339.18,316.89 325.69,316.89 C312.2,316.89 299.98,311.42 291.14,302.58" id="Path"></path> + <path d="M223.62,282.53 C228.22,277.93 234.57,275.09 241.58,275.09 C248.59,275.09 254.94,277.93 259.54,282.53" id="Path"></path> + <path d="M391.84,282.53 C396.44,277.93 402.79,275.09 409.8,275.09 C416.81,275.09 423.16,277.93 427.76,282.53" id="Path"></path> + </g> + </g> + </g> +</svg>
A
src/assets/img/design/mascot-aside-back.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?> +<svg width="485px" height="312px" viewBox="0 0 485 312" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>mascot-aside-back</title> + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g id="mascot-aside-back" transform="translate(242.7, 156.1548) scale(-1, 1) translate(-242.7, -156.1548)translate(10.8, 10.8548)"> + <circle id="Oval" stroke="#465362" stroke-width="20" fill="#FFB74D" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="438.2" cy="145.3" r="25.6"></circle> + <circle id="Oval" stroke="#465362" stroke-width="20" fill="#BBDEFB" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="145.3" cy="145.3" r="145.3"></circle> + <path d="M225.3,61.2 L225.3,61.2 C225.3,70.8 217.5,78.6 207.9,78.6 L196.1,78.6 C186.5,78.6 178.7,70.8 178.7,61.2 L178.7,61.2 C178.7,51.6 186.5,43.8 196.1,43.8 L207.9,43.8 C217.5,43.8 225.3,51.6 225.3,61.2 Z" id="Path" fill="#465362" fill-rule="nonzero"></path> + <path d="M225.3,229.5 L225.3,229.5 C225.3,239.1 217.5,246.9 207.9,246.9 L196.1,246.9 C186.5,246.9 178.7,239.1 178.7,229.5 L178.7,229.5 C178.7,219.9 186.5,212.1 196.1,212.1 L207.9,212.1 C217.5,212.1 225.3,219.9 225.3,229.5 Z" id="Path" fill="#465362" fill-rule="nonzero"></path> + <line x1="361.4" y1="70.9" x2="412.6" y2="145.3" id="Path" stroke="#465362" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="361.4" y1="219.8" x2="412.6" y2="145.3" id="Path" stroke="#465362" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"></line> + <path d="M364.4,255.3 C343.2,255.3 290.6,206.1 290.6,145.3 C290.6,84.5 343.2,35.4 364.4,35.4 C385.6,35.4 380.9,255.3 364.4,255.3 L364.4,255.3 Z" id="Path" stroke="#465362" stroke-width="20" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + </g> + </g> +</svg>
A
src/assets/img/design/mascot-aside-front.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?> +<svg width="177px" height="557px" viewBox="0 0 177 557" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>mascot-aside-front</title> + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"> + <g id="mascot-aside-front" transform="translate(88.8031, 278.5548) scale(-1, 1) translate(-88.8031, -278.5548)translate(10.8246, 11)" stroke="#465362" stroke-width="20"> + <path d="M19.6245864,503.15482 L80.6245864,530.65482 C105.224586,541.75482 132.424586,531.55482 137.724586,506.25482 L155.124586,423.65482 C160.424586,398.35482 139.724586,378.05482 112.724586,378.253355 L45.8245864,378.75482 C30.0245864,378.85482 15.5245864,392.25482 12.1245864,408.65482 L0.824586351,462.15482 C-2.67541365,478.55482 5.22458635,496.65482 19.6245864,503.15482 L19.6245864,503.15482 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path> + <line x1="92.8245864" y1="417.05482" x2="78.1245864" y2="487.05482" id="Path"></line> + <line x1="47.1245864" y1="412.35482" x2="34.3245864" y2="472.95482" id="Path"></line> + <path d="M19.6245864,31.9548201 L80.6245864,4.45482007 C105.224586,-6.64517993 132.424586,3.55482007 137.724586,28.8548201 L155.124586,111.45482 C160.424586,136.75482 139.724586,157.05482 112.724586,156.856285 L45.8245864,156.25482 C30.0245864,156.15482 15.5245864,142.75482 12.1245864,126.35482 L0.824586351,72.8548201 C-2.67541365,56.4548201 5.22458635,38.3548201 19.6245864,31.8548201 L19.6245864,31.8548201 L19.6245864,31.9548201 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path> + <line x1="92.8245864" y1="117.95482" x2="78.1245864" y2="48.0548201" id="Path"></line> + <line x1="47.1245864" y1="122.75482" x2="34.3245864" y2="62.1548201" id="Path"></line> + </g> + </g> +</svg>
A
src/assets/img/logo.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?> +<svg width="308px" height="141px" viewBox="0 0 308 141" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>HTML for People</title> + <g id="Page-1" stroke="none" stroke-width="1" fill="" fill-rule="evenodd"> + <g id="logo" transform="translate(0.016, 0.189)" fill-rule="nonzero"> + <g id="html" transform="translate(2.488, 0)" fill=""> + <path d="M1.26697771,0.999 C0.489977705,1.776 0.156977705,2.775 0.156977705,4.329 C0.0459777054,5.883 0.0459777054,6.882 0.156977705,8.325 L0.0459777054,10.545 L0.156977705,12.654 L0.0459777054,14.763 L0.156977705,19.092 C0.0459777054,20.646 -0.0650222946,21.756 0.0459777054,23.31 L0.0459777054,25.641 L0.0459777054,25.863 C0.156977705,27.417 0.267977705,28.083 0.156977705,28.971 C0.0459777054,29.859 0.156977705,30.636 0.267977705,32.19 L0.378977705,34.521 L0.267977705,36.852 L0.267977705,39.072 L0.156977705,41.292 L0.378977705,43.512 L0.378977705,45.621 L0.267977705,47.841 L0.378977705,49.95 L0.378977705,50.283 C0.489977705,51.837 0.600977705,52.614 0.489977705,53.28 C0.378977705,54.057 0.378977705,55.056 0.489977705,56.721 L0.489977705,58.941 L0.489977705,59.274 C0.600977705,60.828 0.711977705,61.605 0.600977705,62.271 C0.489977705,63.048 0.600977705,63.936 0.711977705,65.712 L0.600977705,70.263 L0.600977705,72.594 C0.378977705,74.37 0.600977705,75.591 1.37797771,76.368 C1.71097771,76.812 2.26597771,77.145 2.82097771,77.256 C4.15297771,77.589 5.15197771,77.478 6.59497771,77.589 L6.70597771,77.589 L10.9239777,77.478 L15.2529777,77.478 C16.6959777,77.589 17.6949777,77.256 18.3609777,76.368 C19.0269777,75.591 19.2489777,74.592 19.3599777,73.149 L19.1379777,70.707 L19.2489777,68.598 L19.2489777,66.156 L19.2489777,65.934 C19.1379777,64.38 19.0269777,63.492 19.1379777,61.938 L19.2489777,59.496 L19.1379777,57.165 L19.0269777,54.945 L19.1379777,52.614 L18.8049777,48.507 C18.8049777,46.953 19.2489777,45.954 20.0259777,45.177 C20.9139777,44.4 21.9129777,44.178 23.4669777,44.289 L25.5759777,44.178 L30.1269777,44.178 L32.3469777,44.067 L34.5669777,44.067 C36.2319777,44.067 37.3419777,44.4 38.1189777,45.177 C38.8959777,45.954 39.2289777,46.953 39.2289777,48.618 C39.1179777,49.395 39.2289777,50.061 39.2289777,50.838 C39.3399777,52.281 39.4509777,53.28 39.3399777,54.834 L39.3399777,55.167 L39.2289777,57.276 L39.3399777,59.496 L39.3399777,61.605 L39.4509777,63.936 L39.5619777,66.045 L39.4509777,70.596 L39.4509777,73.149 C39.2289777,74.925 39.4509777,76.035 40.2279777,76.812 C40.5609777,77.256 41.1159777,77.589 41.7819777,77.7 C43.0029777,78.033 43.8909777,77.811 44.5569777,77.922 C45.0009777,78.033 45.4449777,78.033 45.9999777,78.033 C47.1099777,77.922 48.1089777,77.811 49.5519777,77.811 L51.9939777,77.922 L53.9919777,78.033 C55.5459777,77.922 56.4339777,77.589 57.2109777,76.812 C57.8769777,76.146 58.2099777,75.258 58.0989777,73.593 L58.2099777,71.151 L57.9879777,69.042 L57.9879777,66.6 L57.8769777,64.491 L57.8769777,62.16 L57.9879777,60.051 L57.8769777,57.609 L57.7659777,55.389 L57.8769777,53.169 L57.7659777,48.729 L57.7659777,46.509 L57.7659777,44.178 L57.7659777,42.18 L57.7659777,39.96 L57.7659777,39.627 C57.6549777,38.073 57.6549777,37.074 57.5439777,35.631 C57.5439777,34.965 57.5439777,34.299 57.4329777,33.411 L57.5439777,31.302 L57.5439777,29.082 L57.6549777,26.862 L57.5439777,24.753 L57.5439777,20.202 L57.4329777,18.093 L57.4329777,15.984 L57.2109777,11.433 L57.2109777,9.213 L57.2109777,7.104 L57.2109777,6.882 C57.0999777,5.328 57.0999777,4.551 57.2109777,3.885 C57.3219777,3.108 56.8779777,2.442 56.1009777,1.665 C55.2129777,0.777 54.1029777,0.555 52.6599777,0.666 L50.2179777,0.555 L47.9979777,0.555 L45.7779777,0.666 L43.5579777,0.666 C41.7819777,0.555 40.7829777,0.777 40.0059777,1.554 C39.2289777,2.442 38.8959777,3.33 39.0069777,4.884 L39.0069777,6.771 L38.8959777,8.769 L38.8959777,10.878 L38.7849777,13.098 L38.7849777,15.207 L38.8959777,17.316 C39.0069777,18.87 39.0069777,19.536 38.8959777,20.202 C38.7849777,20.979 38.7849777,21.756 38.8959777,23.31 C38.8959777,24.753 38.5629777,25.641 37.8969777,26.307 C37.1199777,27.084 36.1209777,27.306 34.4559777,27.306 L32.2359777,27.306 L32.0139777,27.306 C30.5709777,27.417 29.4609777,27.417 28.0179777,27.306 L27.6849777,27.306 L25.5759777,27.417 L23.2449777,27.417 C21.5799777,27.306 20.5809777,27.084 19.8039777,26.307 C18.9159777,25.53 18.5829777,24.531 18.5829777,22.866 L18.6939777,20.646 L18.4719777,18.093 C18.3609777,16.539 18.3609777,15.873 18.4719777,14.874 C18.5829777,14.319 18.4719777,13.875 18.4719777,13.209 C18.3609777,11.988 18.4719777,11.1 18.5829777,9.546 L18.5829777,9.324 L18.4719777,6.993 L18.4719777,4.773 C18.3609777,2.997 18.0279777,1.998 17.2509777,1.221 C16.4739777,0.444 15.3639777,0.111 13.6989777,0.222 L11.3679777,0.222 L9.25897771,0 L6.81697771,0.111 L4.70797771,0 C2.93197771,0 1.93297771,0.333 1.26697771,0.999 Z" id="Path"></path> + <path d="M79.0009777,1.443 C78.2239777,2.331 77.8909777,3.33 77.8909777,4.884 L77.8909777,7.215 L78.1129777,9.657 L78.1129777,12.099 C78.2239777,13.653 78.5569777,14.652 79.4449777,15.54 C79.8889777,15.984 80.3329777,16.317 80.9989777,16.539 C82.2199777,16.872 83.3299777,16.761 84.7729777,16.872 L85.1059777,16.872 L87.2149777,16.761 L89.4349777,16.872 L91.7659777,16.872 L93.9859777,16.65 C95.5399777,16.65 96.4279777,16.983 97.3159777,17.871 C98.0929777,18.759 98.4259777,19.314 98.5369777,20.202 C98.5369777,21.09 98.5369777,21.645 98.4259777,22.311 C98.3149777,23.088 98.4259777,23.976 98.5369777,25.53 L98.4259777,27.972 L98.5369777,30.081 L98.5369777,32.19 L98.5369777,34.632 L98.6479777,36.852 L98.5369777,38.961 L98.5369777,41.07 L98.7589777,43.512 L98.8699777,45.51 C98.7589777,47.286 98.7589777,48.507 98.8699777,50.061 L98.9809777,52.392 L98.7589777,54.612 L98.7589777,56.832 L98.9809777,58.941 L98.9809777,61.05 L98.9809777,61.494 C99.0919777,63.048 98.9809777,64.047 98.8699777,65.49 L98.8699777,70.263 L98.7589777,72.594 C98.6479777,74.37 99.0919777,75.369 99.8689777,76.146 C100.756978,76.923 102.199978,77.478 104.974978,77.589 L105.307978,77.589 L114.298978,77.7 C115.963978,77.589 116.962978,77.256 117.739978,76.479 C118.516978,75.702 118.849978,74.592 118.738978,73.038 L118.738978,70.707 L118.738978,68.709 L118.738978,66.489 L118.849978,64.158 L118.849978,63.825 C118.738978,62.271 118.738978,61.383 118.849978,59.829 L118.849978,59.607 L118.849978,57.276 L118.627978,55.056 L118.849978,50.505 L118.849978,48.174 L118.849978,46.065 L118.627978,43.734 L118.738978,41.625 L118.627978,39.183 L118.849978,37.074 L118.849978,34.632 L118.849978,30.303 L118.627978,27.972 L118.738978,25.752 L118.738978,21.201 C118.960978,19.647 119.515978,18.537 120.403978,17.649 C121.291978,16.761 122.290978,16.428 123.622978,16.539 L128.173978,16.539 L132.613978,16.317 C134.278978,16.317 135.277978,15.984 136.054978,15.207 C136.387978,14.763 136.720978,14.319 136.831978,13.653 C137.053978,12.321 136.831978,11.655 136.942978,10.767 C137.053978,9.99 136.942978,9.213 136.831978,7.548 L136.831978,5.328 C136.720978,3.774 136.387978,2.886 135.610978,1.998 C134.833978,1.221 133.723978,0.777 132.169978,0.555 L129.616978,0.555 L127.396978,0.333 L124.843978,0.222 L122.512978,0.222 L117.961978,0.111 L115.852978,0.222 L113.632978,0.222 L111.412978,0 L106.861978,0 L106.639978,0 C105.196978,0.111 104.086978,0.111 102.643978,0 L102.310978,0 L99.9799777,0 L95.6509777,0.222 L93.3199777,0.222 L91.2109777,0 L88.9909777,0 L86.6599777,0.222 L84.5509777,0.111 L82.2199777,0.111 C80.6659777,0.222 79.6669777,0.555 79.0009777,1.443 Z" id="Path"></path> + <path d="M156.734978,76.812 C157.400978,77.589 158.399978,77.922 159.953978,77.811 C161.729978,77.922 162.839978,77.922 164.393978,77.7 L168.944978,77.7 L169.499978,77.7 C172.385978,77.811 173.939978,77.589 174.716978,76.812 C175.493978,76.035 175.826978,74.925 175.826978,73.149 L175.493978,70.929 L175.493978,66.489 L175.604978,64.047 L175.604978,54.945 L175.382978,52.725 L175.493978,50.394 L175.382978,48.285 L175.382978,45.843 C175.493978,44.4 175.493978,43.29 175.382978,41.514 L175.382978,39.294 L175.493978,37.074 L175.937978,36.852 C176.159978,36.741 176.603978,37.407 177.269978,38.517 L178.157978,40.515 L179.045978,42.624 L179.600978,44.622 L180.488978,46.62 L180.488978,46.731 C181.265978,48.063 181.820978,48.84 182.375978,50.283 L182.486978,50.616 L183.929978,54.39 L185.039978,56.388 L185.816978,58.386 L185.816978,58.497 C186.482978,59.829 186.815978,60.828 187.370978,62.16 C187.592978,62.937 188.036978,63.603 188.369978,64.38 L189.257978,66.267 C190.034978,67.71 190.700978,68.487 191.699978,69.264 C192.698978,70.041 193.697978,70.374 195.140978,70.374 C196.583978,70.374 197.582978,70.152 198.692978,69.375 C199.691978,68.709 200.357978,67.932 201.023978,66.6 L201.911978,64.602 L202.910978,62.493 L204.020978,60.384 L205.019978,58.497 L205.796978,56.61 L206.684978,54.39 L207.572978,52.392 L208.571978,50.616 L209.681978,48.507 L210.680978,46.62 L211.457978,44.733 L212.345978,42.624 L213.344978,40.737 L214.454978,38.739 C215.009978,37.407 215.453978,36.741 215.786978,36.852 C216.119978,36.963 216.341978,37.851 216.341978,39.183 L216.230978,41.514 L216.119978,43.512 L216.341978,45.843 L216.341978,52.725 C216.230978,54.168 216.230978,55.278 216.341978,57.054 L216.230978,59.163 L216.230978,61.383 L216.119978,63.714 L216.119978,66.045 L216.008978,70.596 L215.897978,73.149 C215.897978,74.925 216.230978,75.924 217.007978,76.701 C217.784978,77.478 219.338978,77.811 222.113978,77.811 L224.777978,77.811 C226.553978,77.922 227.663978,77.922 229.217978,77.7 L229.883978,77.7 C232.658978,77.7 234.101978,77.478 234.989978,76.701 C235.766978,76.035 236.099978,75.036 235.988978,73.482 L235.877978,71.373 L235.988978,67.044 C235.877978,65.601 235.877978,64.602 235.988978,63.048 L235.988978,62.715 L236.099978,60.384 L236.099978,60.162 C235.988978,58.608 235.877978,57.72 235.988978,56.166 L235.988978,54.057 L236.099978,51.615 L236.210978,49.617 L236.321978,44.955 L236.210978,42.735 L236.210978,40.737 L236.321978,38.406 L236.210978,36.297 L236.321978,34.188 L236.321978,29.748 L236.543978,25.308 L236.432978,22.977 L236.321978,20.646 L236.210978,18.315 L236.321978,16.206 L236.099978,13.875 L235.988978,11.433 L235.877978,9.213 L235.988978,7.104 L235.988978,4.773 C235.877978,2.997 235.433978,1.998 234.656978,1.221 C233.879978,0.444 232.880978,0.222 231.548978,0.222 L229.439978,0.111 L226.997978,0.111 L226.886978,0.111 C225.443978,0.222 224.555978,0.222 223.889978,0.111 C223.112978,0 221.891978,0.111 219.449978,0.222 L218.672978,0.222 L217.562978,0.111 C216.785978,0 216.008978,0.333 214.898978,1.11 C213.788978,1.887 212.900978,2.886 212.234978,4.107 L211.235978,6.327 L210.125978,8.325 L209.126978,10.323 L208.238978,12.21 L207.128978,14.097 L204.131978,20.202 L203.021978,22.089 L202.133978,24.087 L201.134978,26.307 L199.913978,28.305 L198.914978,30.192 L197.915978,32.301 C197.249978,33.522 196.694978,34.077 196.028978,34.077 C195.362978,34.077 194.585978,33.522 193.919978,32.079 L192.920978,30.303 C192.476978,29.415 192.143978,28.638 191.699978,27.972 C191.033978,26.751 190.478978,25.863 189.923978,24.531 L189.701978,24.087 L188.813978,22.311 L187.925978,20.313 L186.704978,18.093 L185.927978,16.095 L184.928978,14.097 L184.817978,13.986 C184.040978,12.765 183.485978,11.766 182.930978,10.434 L182.819978,10.101 L181.931978,8.325 L180.710978,6.327 L179.711978,4.107 C179.156978,2.775 178.379978,1.887 177.269978,1.11 C176.159978,0.333 174.938978,0.111 173.495978,0.222 L171.275978,0.111 L168.944978,0.111 L166.946978,0.222 C166.058978,0.111 165.281978,0.111 164.504978,0.111 C163.061978,0.111 161.951978,0.111 160.508978,0 L160.175978,0 C158.621978,0 157.622978,0.444 157.067978,1.221 C156.401978,2.22 156.068978,3.663 156.068978,6.327 L156.068978,13.653 L155.846978,15.984 L155.957978,18.204 L156.068978,20.202 L155.957978,22.422 L155.846978,24.864 L155.846978,33.855 L155.846978,33.966 C155.957978,35.52 155.957978,36.408 155.846978,37.962 L155.846978,38.184 L155.957978,40.515 L156.068978,42.735 L155.957978,44.955 L155.957978,47.397 L155.846978,49.617 L155.957978,51.615 L155.957978,53.835 L155.846978,56.166 L155.846978,56.499 C155.957978,58.053 156.068978,58.83 155.957978,59.496 C155.846978,60.273 155.846978,61.272 155.957978,62.826 L155.957978,67.266 L155.846978,71.595 C155.735978,73.26 155.624978,74.148 155.735978,74.814 C155.735978,75.591 156.068978,76.035 156.734978,76.812 Z" id="Path"></path> + <path d="M261.108978,1.11 C260.220978,1.887 259.887978,2.886 259.887978,4.44 L259.998978,6.882 L259.887978,9.102 L259.887978,11.1 L259.998978,13.542 L259.887978,15.651 L259.887978,17.871 L259.776978,20.091 L259.887978,22.2 L259.998978,24.642 L259.887978,26.751 L259.887978,28.971 L259.776978,31.191 L259.776978,33.411 C259.665978,34.965 259.776978,36.075 259.887978,37.74 L259.776978,40.182 L259.776978,42.291 L259.776978,46.731 L259.776978,49.062 C259.665978,49.839 259.665978,50.616 259.665978,51.282 C259.554978,52.725 259.554978,53.724 259.443978,55.278 L259.443978,55.611 L259.443978,57.942 L259.554978,59.94 L259.665978,62.16 L259.554978,64.602 L259.554978,66.6 L259.332978,71.04 L259.332978,71.706 C259.332978,74.481 259.665978,76.035 260.442978,76.812 C261.219978,77.589 262.107978,77.811 263.439978,77.7 C264.882978,77.589 265.659978,77.589 266.325978,77.7 C266.991978,77.811 268.212978,77.811 270.654978,77.7 C271.431978,77.589 272.319978,77.7 273.762978,77.811 L273.873978,77.811 L276.204978,77.811 L278.202978,77.7 L280.422978,77.811 L282.753978,77.7 L284.751978,77.7 L287.193978,77.811 L291.522978,77.922 L293.520978,77.811 L295.851978,77.811 L298.071978,78.144 L300.291978,78.144 C301.845978,78.033 302.733978,77.7 303.510978,76.923 C304.176978,76.257 304.509978,75.147 304.509978,73.482 L304.509978,71.151 L304.620978,68.82 L304.509978,66.489 C304.620978,64.935 304.287978,63.936 303.510978,63.048 C302.733978,62.16 301.179978,61.938 298.404978,61.938 L298.293978,61.938 L296.073978,61.827 L293.742978,62.049 L293.076978,62.049 C291.633978,61.938 290.634978,61.938 289.635978,61.938 C288.192978,61.938 287.082978,62.049 285.639978,61.938 L283.197978,61.827 C281.754978,61.827 280.866978,61.605 280.089978,60.828 C279.312978,60.162 278.979978,59.163 278.979978,57.498 L278.979978,55.5 L279.201978,53.28 L279.201978,51.171 L279.201978,50.727 C279.090978,49.173 279.090978,48.285 279.201978,46.731 L279.201978,46.398 L279.090978,44.289 L279.201978,41.847 L279.201978,37.407 L278.979978,35.298 L278.979978,30.636 C279.090978,29.082 279.201978,27.861 279.090978,26.307 L278.979978,23.976 L278.979978,21.756 C279.090978,20.091 279.090978,18.981 278.979978,17.316 L278.979978,14.985 L279.201978,12.876 L279.090978,8.325 C278.979978,6.882 279.090978,5.883 279.201978,4.44 C279.201978,2.997 278.868978,2.109 278.091978,1.332 C277.314978,0.666 276.315978,0.333 274.761978,0.333 L272.874978,0.222 L270.654978,0.333 L269.877978,0.333 C268.434978,0.222 267.324978,0.222 266.325978,0.222 C264.882978,0.222 263.994978,0.333 263.328978,0.222 C262.662978,0.111 261.885978,0.444 261.108978,1.11 Z" id="Path"></path> + </g> + <g id="for-people" transform="translate(-0, 92.891)" fill=""> + <path d="M6.604,36.972 C7.8,36.972 8.788,35.984 8.788,34.788 L8.788,15.86 L14.456,15.86 C15.652,15.86 16.64,14.872 16.64,13.676 C16.64,12.48 15.652,11.492 14.456,11.492 L8.788,11.492 L8.788,11.128 C8.788,6.864 10.348,4.368 12.688,4.368 C13.832,4.368 14.924,5.044 15.236,5.928 C15.548,6.76 16.38,7.384 17.316,7.384 C18.512,7.384 19.5,6.396 19.5,5.2 C19.5,4.94 19.448,4.628 19.344,4.42 C18.408,1.768 15.652,0 12.688,0 C7.696,0 4.42,4.472 4.42,11.128 L4.42,11.492 L2.184,11.492 C0.988,11.492 0,12.48 0,13.676 C0,14.872 0.988,15.86 2.184,15.86 L4.42,15.86 L4.42,34.788 C4.42,35.984 5.408,36.972 6.604,36.972 Z" id="Path"></path> + <path d="M27.456,37.492 C33.852,37.492 38.168,32.24 38.168,24.648 C38.168,16.9 33.8,11.44 27.456,11.44 C21.06,11.44 16.692,16.9 16.692,24.648 C16.692,32.292 21.008,37.492 27.456,37.492 Z M27.456,33.124 C23.556,33.124 21.06,29.9 21.06,24.648 C21.06,19.292 23.556,15.808 27.456,15.808 C31.252,15.808 33.8,19.292 33.8,24.648 C33.8,29.9 31.304,33.124 27.456,33.124 Z" id="Shape"></path> + <path d="M45.344,36.972 C46.54,36.972 47.528,35.984 47.528,34.788 L47.528,22.568 C47.632,18.304 49.608,15.808 52.78,15.808 C54.34,15.808 55.744,16.536 56.056,17.368 C56.368,18.2 57.2,18.824 58.136,18.824 C59.332,18.824 60.32,17.836 60.32,16.64 C60.32,16.38 60.268,16.068 60.164,15.86 C59.176,13.156 56.108,11.44 52.78,11.44 C50.804,11.44 49.036,11.96 47.58,13 C47.372,12.012 46.488,11.284 45.448,11.284 C44.252,11.284 43.264,12.272 43.264,13.468 L43.16,22.516 L43.16,22.568 L43.16,34.788 C43.16,35.984 44.148,36.972 45.344,36.972 Z" id="Path"></path> + <path d="M78.936,36.972 C80.132,36.972 81.12,35.984 81.12,34.788 L81.12,21.424 L87.568,21.424 C93.652,21.424 97.76,17.212 97.76,10.92 C97.76,4.992 93.288,0.468 87.568,0.468 C86.476,0.468 85.592,0.468 84.656,0.468 C83.876,0.468 83.044,0.468 82.108,0.468 C81.12,0.468 80.132,0.468 78.988,0.468 C77.532,0.468 76.752,1.196 76.752,2.652 L76.752,34.788 C76.752,35.984 77.74,36.972 78.936,36.972 Z M81.12,17.056 L81.12,4.836 C81.432,4.836 81.796,4.836 82.108,4.836 C83.044,4.836 83.824,4.836 84.708,4.836 C85.54,4.836 86.476,4.836 87.568,4.836 C90.896,4.836 93.392,7.384 93.392,10.92 C93.392,14.82 91.208,17.056 87.568,17.056 L81.12,17.056 Z" id="Shape"></path> + <path d="M107.796,37.492 C111.488,37.492 115.024,35.568 117.312,32.396 C117.572,32.032 117.728,31.564 117.728,31.096 C117.728,29.9 116.74,28.912 115.544,28.912 C114.816,28.912 114.14,29.276 113.776,29.848 C112.268,31.928 110.084,33.124 107.796,33.124 C104,33.124 101.4,30.108 101.4,25.532 C101.4,25.376 101.4,25.272 101.4,25.116 L116.324,25.116 C117.676,25.116 118.56,24.388 118.56,22.984 C118.612,16.484 114.244,11.648 108.316,11.648 C101.712,11.648 97.032,17.42 97.032,25.532 C97.032,32.448 101.556,37.492 107.796,37.492 Z M102.18,20.748 C103.324,17.784 105.56,16.016 108.316,16.016 C111.124,16.016 113.256,17.836 113.932,20.748 L102.18,20.748 Z" id="Shape"></path> + <path d="M133.276,37.492 C139.672,37.492 143.988,32.24 143.988,24.648 C143.988,16.9 139.62,11.44 133.276,11.44 C126.88,11.44 122.512,16.9 122.512,24.648 C122.512,32.292 126.828,37.492 133.276,37.492 Z M133.276,33.124 C129.376,33.124 126.88,29.9 126.88,24.648 C126.88,19.292 129.376,15.808 133.276,15.808 C137.072,15.808 139.62,19.292 139.62,24.648 C139.62,29.9 137.124,33.124 133.276,33.124 Z" id="Shape"></path> + <path d="M150.176,47.008 C151.372,47.008 152.36,46.02 152.36,44.824 L152.36,36.556 C153.66,37.18 155.22,37.544 156.832,37.544 C163.228,37.544 167.388,32.24 167.388,24.232 C167.388,16.38 163.592,11.388 157.508,11.388 C155.48,11.388 153.556,11.96 151.944,12.948 C151.528,12.376 150.852,12.012 150.124,12.012 C148.928,12.012 147.94,13 147.94,14.196 L147.992,19.084 L147.992,44.824 C147.992,46.02 148.98,47.008 150.176,47.008 Z M156.832,33.176 C154.388,33.176 152.36,31.772 152.36,30.368 L152.36,19.084 C152.36,17.524 154.96,15.756 157.508,15.756 C160.992,15.756 163.02,18.72 163.02,24.232 C163.02,29.9 160.628,33.176 156.832,33.176 Z" id="Shape"></path> + <path d="M174.044,37.18 C175.24,37.18 176.228,36.192 176.228,34.996 L176.228,2.652 C176.228,1.456 175.24,0.468 174.044,0.468 C172.848,0.468 171.86,1.456 171.86,2.652 L171.86,34.996 C171.86,36.192 172.848,37.18 174.044,37.18 Z" id="Path"></path> + <path d="M190.944,37.492 C194.636,37.492 198.172,35.568 200.46,32.396 C200.72,32.032 200.876,31.564 200.876,31.096 C200.876,29.9 199.888,28.912 198.692,28.912 C197.964,28.912 197.288,29.276 196.924,29.848 C195.416,31.928 193.232,33.124 190.944,33.124 C187.148,33.124 184.548,30.108 184.548,25.532 C184.548,25.376 184.548,25.272 184.548,25.116 L199.472,25.116 C200.824,25.116 201.708,24.388 201.708,22.984 C201.76,16.484 197.392,11.648 191.464,11.648 C184.86,11.648 180.18,17.42 180.18,25.532 C180.18,32.448 184.704,37.492 190.944,37.492 Z M185.328,20.748 C186.472,17.784 188.708,16.016 191.464,16.016 C194.272,16.016 196.404,17.836 197.08,20.748 L185.328,20.748 Z" id="Shape"></path> + </g> + </g> + </g> +</svg>
A
src/assets/js/anime.min.js
@@ -0,0 +1,8 @@
+/* + * anime.js v3.2.2 + * (c) 2023 Julian Garnier + * Released under the MIT license + * animejs.com + */ + +!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):n.anime=e()}(this,function(){"use strict";var i={update:null,begin:null,loopBegin:null,changeBegin:null,change:null,changeComplete:null,loopComplete:null,complete:null,loop:1,direction:"normal",autoplay:!0,timelineOffset:0},M={duration:1e3,delay:0,endDelay:0,easing:"easeOutElastic(1, .5)",round:0},j=["translateX","translateY","translateZ","rotate","rotateX","rotateY","rotateZ","scale","scaleX","scaleY","scaleZ","skew","skewX","skewY","perspective","matrix","matrix3d"],l={CSS:{},springs:{}};function C(n,e,t){return Math.min(Math.max(n,e),t)}function u(n,e){return-1<n.indexOf(e)}function o(n,e){return n.apply(null,e)}var w={arr:function(n){return Array.isArray(n)},obj:function(n){return u(Object.prototype.toString.call(n),"Object")},pth:function(n){return w.obj(n)&&n.hasOwnProperty("totalLength")},svg:function(n){return n instanceof SVGElement},inp:function(n){return n instanceof HTMLInputElement},dom:function(n){return n.nodeType||w.svg(n)},str:function(n){return"string"==typeof n},fnc:function(n){return"function"==typeof n},und:function(n){return void 0===n},nil:function(n){return w.und(n)||null===n},hex:function(n){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(n)},rgb:function(n){return/^rgb/.test(n)},hsl:function(n){return/^hsl/.test(n)},col:function(n){return w.hex(n)||w.rgb(n)||w.hsl(n)},key:function(n){return!i.hasOwnProperty(n)&&!M.hasOwnProperty(n)&&"targets"!==n&&"keyframes"!==n}};function d(n){n=/\(([^)]+)\)/.exec(n);return n?n[1].split(",").map(function(n){return parseFloat(n)}):[]}function c(r,t){var n=d(r),e=C(w.und(n[0])?1:n[0],.1,100),a=C(w.und(n[1])?100:n[1],.1,100),o=C(w.und(n[2])?10:n[2],.1,100),n=C(w.und(n[3])?0:n[3],.1,100),u=Math.sqrt(a/e),i=o/(2*Math.sqrt(a*e)),c=i<1?u*Math.sqrt(1-i*i):0,s=i<1?(i*u-n)/c:-n+u;function f(n){var e=t?t*n/1e3:n,e=i<1?Math.exp(-e*i*u)*(+Math.cos(c*e)+s*Math.sin(c*e)):(1+s*e)*Math.exp(-e*u);return 0===n||1===n?n:1-e}return t?f:function(){var n=l.springs[r];if(n)return n;for(var e=0,t=0;;)if(1===f(e+=1/6)){if(16<=++t)break}else t=0;return n=e*(1/6)*1e3,l.springs[r]=n}}function q(e){return void 0===e&&(e=10),function(n){return Math.ceil(C(n,1e-6,1)*e)*(1/e)}}var H=function(b,e,M,t){if(0<=b&&b<=1&&0<=M&&M<=1){var x=new Float32Array(11);if(b!==e||M!==t)for(var n=0;n<11;++n)x[n]=k(.1*n,b,M);return function(n){return b===e&&M===t||0===n||1===n?n:k(r(n),e,t)}}function r(n){for(var e=0,t=1;10!==t&&x[t]<=n;++t)e+=.1;var r=e+.1*((n-x[--t])/(x[t+1]-x[t])),a=O(r,b,M);if(.001<=a){for(var o=n,u=r,i=b,c=M,s=0;s<4;++s){var f=O(u,i,c);if(0===f)return u;u-=(k(u,i,c)-o)/f}return u}if(0===a)return r;for(var l,d,p=n,h=e,g=e+.1,m=b,v=M,y=0;0<(l=k(d=h+(g-h)/2,m,v)-p)?g=d:h=d,1e-7<Math.abs(l)&&++y<10;);return d}};function r(n,e){return 1-3*e+3*n}function k(n,e,t){return((r(e,t)*n+(3*t-6*e))*n+3*e)*n}function O(n,e,t){return 3*r(e,t)*n*n+2*(3*t-6*e)*n+3*e}e={linear:function(){return function(n){return n}}},t={Sine:function(){return function(n){return 1-Math.cos(n*Math.PI/2)}},Expo:function(){return function(n){return n?Math.pow(2,10*n-10):0}},Circ:function(){return function(n){return 1-Math.sqrt(1-n*n)}},Back:function(){return function(n){return n*n*(3*n-2)}},Bounce:function(){return function(n){for(var e,t=4;n<((e=Math.pow(2,--t))-1)/11;);return 1/Math.pow(4,3-t)-7.5625*Math.pow((3*e-2)/22-n,2)}},Elastic:function(n,e){void 0===e&&(e=.5);var t=C(n=void 0===n?1:n,1,10),r=C(e,.1,2);return function(n){return 0===n||1===n?n:-t*Math.pow(2,10*(n-1))*Math.sin((n-1-r/(2*Math.PI)*Math.asin(1/t))*(2*Math.PI)/r)}}},["Quad","Cubic","Quart","Quint"].forEach(function(n,e){t[n]=function(){return function(n){return Math.pow(n,e+2)}}}),Object.keys(t).forEach(function(n){var r=t[n];e["easeIn"+n]=r,e["easeOut"+n]=function(e,t){return function(n){return 1-r(e,t)(1-n)}},e["easeInOut"+n]=function(e,t){return function(n){return n<.5?r(e,t)(2*n)/2:1-r(e,t)(-2*n+2)/2}},e["easeOutIn"+n]=function(e,t){return function(n){return n<.5?(1-r(e,t)(1-2*n))/2:(r(e,t)(2*n-1)+1)/2}}});var e,t,s=e;function P(n,e){if(w.fnc(n))return n;var t=n.split("(")[0],r=s[t],a=d(n);switch(t){case"spring":return c(n,e);case"cubicBezier":return o(H,a);case"steps":return o(q,a);default:return o(r,a)}}function a(n){try{return document.querySelectorAll(n)}catch(n){}}function I(n,e){for(var t,r=n.length,a=2<=arguments.length?e:void 0,o=[],u=0;u<r;u++)u in n&&(t=n[u],e.call(a,t,u,n))&&o.push(t);return o}function f(n){return n.reduce(function(n,e){return n.concat(w.arr(e)?f(e):e)},[])}function p(n){return w.arr(n)?n:(n=w.str(n)?a(n)||n:n)instanceof NodeList||n instanceof HTMLCollection?[].slice.call(n):[n]}function h(n,e){return n.some(function(n){return n===e})}function g(n){var e,t={};for(e in n)t[e]=n[e];return t}function x(n,e){var t,r=g(n);for(t in n)r[t]=(e.hasOwnProperty(t)?e:n)[t];return r}function D(n,e){var t,r=g(n);for(t in e)r[t]=(w.und(n[t])?e:n)[t];return r}function V(n){var e,t,r,a,o,u,i;return w.rgb(n)?(e=/rgb\((\d+,\s*[\d]+,\s*[\d]+)\)/g.exec(t=n))?"rgba("+e[1]+",1)":t:w.hex(n)?(e=(e=n).replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(n,e,t,r){return e+e+t+t+r+r}),e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e),"rgba("+parseInt(e[1],16)+","+parseInt(e[2],16)+","+parseInt(e[3],16)+",1)"):w.hsl(n)?(t=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(t=n)||/hsla\((\d+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)/g.exec(t),n=parseInt(t[1],10)/360,u=parseInt(t[2],10)/100,i=parseInt(t[3],10)/100,t=t[4]||1,0==u?r=a=o=i:(r=c(u=2*i-(i=i<.5?i*(1+u):i+u-i*u),i,n+1/3),a=c(u,i,n),o=c(u,i,n-1/3)),"rgba("+255*r+","+255*a+","+255*o+","+t+")"):void 0;function c(n,e,t){return t<0&&(t+=1),1<t&&--t,t<1/6?n+6*(e-n)*t:t<.5?e:t<2/3?n+(e-n)*(2/3-t)*6:n}}function B(n){n=/[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec(n);if(n)return n[1]}function m(n,e){return w.fnc(n)?n(e.target,e.id,e.total):n}function v(n,e){return n.getAttribute(e)}function y(n,e,t){var r,a,o;return h([t,"deg","rad","turn"],B(e))?e:(r=l.CSS[e+t],w.und(r)?(a=document.createElement(n.tagName),(n=n.parentNode&&n.parentNode!==document?n.parentNode:document.body).appendChild(a),a.style.position="absolute",a.style.width=100+t,o=100/a.offsetWidth,n.removeChild(a),n=o*parseFloat(e),l.CSS[e+t]=n):r)}function $(n,e,t){var r;if(e in n.style)return r=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),e=n.style[e]||getComputedStyle(n).getPropertyValue(r)||"0",t?y(n,e,t):e}function b(n,e){return w.dom(n)&&!w.inp(n)&&(!w.nil(v(n,e))||w.svg(n)&&n[e])?"attribute":w.dom(n)&&h(j,e)?"transform":w.dom(n)&&"transform"!==e&&$(n,e)?"css":null!=n[e]?"object":void 0}function W(n){if(w.dom(n)){for(var e,t=n.style.transform||"",r=/(\w+)\(([^)]*)\)/g,a=new Map;e=r.exec(t);)a.set(e[1],e[2]);return a}}function X(n,e,t,r){var a=u(e,"scale")?1:0+(u(a=e,"translate")||"perspective"===a?"px":u(a,"rotate")||u(a,"skew")?"deg":void 0),o=W(n).get(e)||a;return t&&(t.transforms.list.set(e,o),t.transforms.last=e),r?y(n,o,r):o}function T(n,e,t,r){switch(b(n,e)){case"transform":return X(n,e,r,t);case"css":return $(n,e,t);case"attribute":return v(n,e);default:return n[e]||0}}function E(n,e){var t=/^(\*=|\+=|-=)/.exec(n);if(!t)return n;var r=B(n)||0,a=parseFloat(e),o=parseFloat(n.replace(t[0],""));switch(t[0][0]){case"+":return a+o+r;case"-":return a-o+r;case"*":return a*o+r}}function Y(n,e){var t;return w.col(n)?V(n):/\s/g.test(n)?n:(t=(t=B(n))?n.substr(0,n.length-t.length):n,e?t+e:t)}function F(n,e){return Math.sqrt(Math.pow(e.x-n.x,2)+Math.pow(e.y-n.y,2))}function Z(n){for(var e,t=n.points,r=0,a=0;a<t.numberOfItems;a++){var o=t.getItem(a);0<a&&(r+=F(e,o)),e=o}return r}function G(n){if(n.getTotalLength)return n.getTotalLength();switch(n.tagName.toLowerCase()){case"circle":return 2*Math.PI*v(n,"r");case"rect":return 2*v(t=n,"width")+2*v(t,"height");case"line":return F({x:v(t=n,"x1"),y:v(t,"y1")},{x:v(t,"x2"),y:v(t,"y2")});case"polyline":return Z(n);case"polygon":return e=n.points,Z(n)+F(e.getItem(e.numberOfItems-1),e.getItem(0))}var e,t}function Q(n,e){var e=e||{},n=e.el||function(n){for(var e=n.parentNode;w.svg(e)&&w.svg(e.parentNode);)e=e.parentNode;return e}(n),t=n.getBoundingClientRect(),r=v(n,"viewBox"),a=t.width,t=t.height,e=e.viewBox||(r?r.split(" "):[0,0,a,t]);return{el:n,viewBox:e,x:+e[0],y:+e[1],w:a,h:t,vW:e[2],vH:e[3]}}function z(n,e){var t=/[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/g,r=Y(w.pth(n)?n.totalLength:n,e)+"";return{original:r,numbers:r.match(t)?r.match(t).map(Number):[0],strings:w.str(n)||e?r.split(t):[]}}function A(n){return I(n?f(w.arr(n)?n.map(p):p(n)):[],function(n,e,t){return t.indexOf(n)===e})}function _(n){var t=A(n);return t.map(function(n,e){return{target:n,id:e,total:t.length,transforms:{list:W(n)}}})}function R(e){for(var t=I(f(e.map(function(n){return Object.keys(n)})),function(n){return w.key(n)}).reduce(function(n,e){return n.indexOf(e)<0&&n.push(e),n},[]),a={},n=0;n<t.length;n++)!function(n){var r=t[n];a[r]=e.map(function(n){var e,t={};for(e in n)w.key(e)?e==r&&(t.value=n[e]):t[e]=n[e];return t})}(n);return a}function J(n,e){var t,r=[],a=e.keyframes;for(t in e=a?D(R(a),e):e)w.key(t)&&r.push({name:t,tweens:function(n,t){var e,r=g(t),a=(/^spring/.test(r.easing)&&(r.duration=c(r.easing)),w.arr(n)&&(2===(e=n.length)&&!w.obj(n[0])?n={value:n}:w.fnc(t.duration)||(r.duration=t.duration/e)),w.arr(n)?n:[n]);return a.map(function(n,e){n=w.obj(n)&&!w.pth(n)?n:{value:n};return w.und(n.delay)&&(n.delay=e?0:t.delay),w.und(n.endDelay)&&(n.endDelay=e===a.length-1?t.endDelay:0),n}).map(function(n){return D(n,r)})}(e[t],n)});return r}function K(i,c){var s;return i.tweens.map(function(n){var n=function(n,e){var t,r={};for(t in n){var a=m(n[t],e);w.arr(a)&&1===(a=a.map(function(n){return m(n,e)})).length&&(a=a[0]),r[t]=a}return r.duration=parseFloat(r.duration),r.delay=parseFloat(r.delay),r}(n,c),e=n.value,t=w.arr(e)?e[1]:e,r=B(t),a=T(c.target,i.name,r,c),o=s?s.to.original:a,u=w.arr(e)?e[0]:o,a=B(u)||B(a),r=r||a;return w.und(t)&&(t=o),n.from=z(u,r),n.to=z(E(t,u),r),n.start=s?s.end:0,n.end=n.start+n.delay+n.duration+n.endDelay,n.easing=P(n.easing,n.duration),n.isPath=w.pth(e),n.isPathTargetInsideSVG=n.isPath&&w.svg(c.target),n.isColor=w.col(n.from.original),n.isColor&&(n.round=1),s=n})}var U={css:function(n,e,t){return n.style[e]=t},attribute:function(n,e,t){return n.setAttribute(e,t)},object:function(n,e,t){return n[e]=t},transform:function(n,e,t,r,a){var o;r.list.set(e,t),e!==r.last&&!a||(o="",r.list.forEach(function(n,e){o+=e+"("+n+") "}),n.style.transform=o)}};function nn(n,u){_(n).forEach(function(n){for(var e in u){var t=m(u[e],n),r=n.target,a=B(t),o=T(r,e,a,n),t=E(Y(t,a||B(o)),o),a=b(r,e);U[a](r,e,t,n.transforms,!0)}})}function en(n,e){return I(f(n.map(function(o){return e.map(function(n){var e,t,r=o,a=b(r.target,n.name);if(a)return t=(e=K(n,r))[e.length-1],{type:a,property:n.name,animatable:r,tweens:e,duration:t.end,delay:e[0].delay,endDelay:t.endDelay}})})),function(n){return!w.und(n)})}function tn(n,e){function t(n){return n.timelineOffset||0}var r=n.length,a={};return a.duration=r?Math.max.apply(Math,n.map(function(n){return t(n)+n.duration})):e.duration,a.delay=r?Math.min.apply(Math,n.map(function(n){return t(n)+n.delay})):e.delay,a.endDelay=r?a.duration-Math.max.apply(Math,n.map(function(n){return t(n)+n.duration-n.endDelay})):e.endDelay,a}var rn=0;var N,S=[],an=("undefined"!=typeof document&&document.addEventListener("visibilitychange",function(){L.suspendWhenDocumentHidden&&(n()?N=cancelAnimationFrame(N):(S.forEach(function(n){return n._onDocumentVisibility()}),an()))}),function(){!(N||n()&&L.suspendWhenDocumentHidden)&&0<S.length&&(N=requestAnimationFrame(on))});function on(n){for(var e=S.length,t=0;t<e;){var r=S[t];r.paused?(S.splice(t,1),e--):(r.tick(n),t++)}N=0<t?requestAnimationFrame(on):void 0}function n(){return document&&document.hidden}function L(n){var c,s=0,f=0,l=0,d=0,p=null;function h(n){var e=window.Promise&&new Promise(function(n){return p=n});return n.finished=e}e=x(i,n=n=void 0===n?{}:n),t=J(r=x(M,n),n),n=_(n.targets),r=tn(t=en(n,t),r),a=rn,rn++;var e,t,r,a,k=D(e,{id:a,children:[],animatables:n,animations:t,duration:r.duration,delay:r.delay,endDelay:r.endDelay});h(k);function g(){var n=k.direction;"alternate"!==n&&(k.direction="normal"!==n?"normal":"reverse"),k.reversed=!k.reversed,c.forEach(function(n){return n.reversed=k.reversed})}function m(n){return k.reversed?k.duration-n:n}function o(){s=0,f=m(k.currentTime)*(1/L.speed)}function v(n,e){e&&e.seek(n-e.timelineOffset)}function y(e){for(var n=0,t=k.animations,r=t.length;n<r;){for(var a=t[n],o=a.animatable,u=a.tweens,i=u.length-1,c=u[i],i=(i&&(c=I(u,function(n){return e<n.end})[0]||c),C(e-c.start-c.delay,0,c.duration)/c.duration),s=isNaN(i)?1:c.easing(i),f=c.to.strings,l=c.round,d=[],p=c.to.numbers.length,h=void 0,g=0;g<p;g++){var m=void 0,v=c.to.numbers[g],y=c.from.numbers[g]||0,m=c.isPath?function(e,t,n){function r(n){return e.el.getPointAtLength(1<=t+(n=void 0===n?0:n)?t+n:0)}var a=Q(e.el,e.svg),o=r(),u=r(-1),i=r(1),c=n?1:a.w/a.vW,s=n?1:a.h/a.vH;switch(e.property){case"x":return(o.x-a.x)*c;case"y":return(o.y-a.y)*s;case"angle":return 180*Math.atan2(i.y-u.y,i.x-u.x)/Math.PI}}(c.value,s*v,c.isPathTargetInsideSVG):y+s*(v-y);!l||c.isColor&&2<g||(m=Math.round(m*l)/l),d.push(m)}var b=f.length;if(b)for(var h=f[0],M=0;M<b;M++){f[M];var x=f[M+1],w=d[M];isNaN(w)||(h+=x?w+x:w+" ")}else h=d[0];U[a.type](o.target,a.property,h,o.transforms),a.currentValue=h,n++}}function b(n){k[n]&&!k.passThrough&&k[n](k)}function u(n){var e=k.duration,t=k.delay,r=e-k.endDelay,a=m(n);if(k.progress=C(a/e*100,0,100),k.reversePlayback=a<k.currentTime,c){var o=a;if(k.reversePlayback)for(var u=d;u--;)v(o,c[u]);else for(var i=0;i<d;i++)v(o,c[i])}!k.began&&0<k.currentTime&&(k.began=!0,b("begin")),!k.loopBegan&&0<k.currentTime&&(k.loopBegan=!0,b("loopBegin")),a<=t&&0!==k.currentTime&&y(0),(r<=a&&k.currentTime!==e||!e)&&y(e),t<a&&a<r?(k.changeBegan||(k.changeBegan=!0,k.changeCompleted=!1,b("changeBegin")),b("change"),y(a)):k.changeBegan&&(k.changeCompleted=!0,k.changeBegan=!1,b("changeComplete")),k.currentTime=C(a,0,e),k.began&&b("update"),e<=n&&(f=0,k.remaining&&!0!==k.remaining&&k.remaining--,k.remaining?(s=l,b("loopComplete"),k.loopBegan=!1,"alternate"===k.direction&&g()):(k.paused=!0,k.completed||(k.completed=!0,b("loopComplete"),b("complete"),!k.passThrough&&"Promise"in window&&(p(),h(k)))))}return k.reset=function(){var n=k.direction;k.passThrough=!1,k.currentTime=0,k.progress=0,k.paused=!0,k.began=!1,k.loopBegan=!1,k.changeBegan=!1,k.completed=!1,k.changeCompleted=!1,k.reversePlayback=!1,k.reversed="reverse"===n,k.remaining=k.loop,c=k.children;for(var e=d=c.length;e--;)k.children[e].reset();(k.reversed&&!0!==k.loop||"alternate"===n&&1===k.loop)&&k.remaining++,y(k.reversed?k.duration:0)},k._onDocumentVisibility=o,k.set=function(n,e){return nn(n,e),k},k.tick=function(n){u(((l=n)+(f-(s=s||l)))*L.speed)},k.seek=function(n){u(m(n))},k.pause=function(){k.paused=!0,o()},k.play=function(){k.paused&&(k.completed&&k.reset(),k.paused=!1,S.push(k),o(),an())},k.reverse=function(){g(),k.completed=!k.reversed,o()},k.restart=function(){k.reset(),k.play()},k.remove=function(n){cn(A(n),k)},k.reset(),k.autoplay&&k.play(),k}function un(n,e){for(var t=e.length;t--;)h(n,e[t].animatable.target)&&e.splice(t,1)}function cn(n,e){var t=e.animations,r=e.children;un(n,t);for(var a=r.length;a--;){var o=r[a],u=o.animations;un(n,u),u.length||o.children.length||r.splice(a,1)}t.length||r.length||e.pause()}return L.version="3.2.1",L.speed=1,L.suspendWhenDocumentHidden=!0,L.running=S,L.remove=function(n){for(var e=A(n),t=S.length;t--;)cn(e,S[t])},L.get=T,L.set=nn,L.convertPx=y,L.path=function(n,e){var t=w.str(n)?a(n)[0]:n,r=e||100;return function(n){return{property:n,el:t,svg:Q(t),totalLength:G(t)*(r/100)}}},L.setDashoffset=function(n){var e=G(n);return n.setAttribute("stroke-dasharray",e),e},L.stagger=function(n,e){var i=(e=void 0===e?{}:e).direction||"normal",c=e.easing?P(e.easing):null,s=e.grid,f=e.axis,l=e.from||0,d="first"===l,p="center"===l,h="last"===l,g=w.arr(n),m=g?parseFloat(n[0]):parseFloat(n),v=g?parseFloat(n[1]):0,y=B(g?n[1]:n)||0,b=e.start||0+(g?m:0),M=[],x=0;return function(n,e,t){if(d&&(l=0),p&&(l=(t-1)/2),h&&(l=t-1),!M.length){for(var r,a,o,u=0;u<t;u++)s?(r=p?(s[0]-1)/2:l%s[0],a=p?(s[1]-1)/2:Math.floor(l/s[0]),r=r-u%s[0],a=a-Math.floor(u/s[0]),o=Math.sqrt(r*r+a*a),"x"===f&&(o=-r),M.push(o="y"===f?-a:o)):M.push(Math.abs(l-u)),x=Math.max.apply(Math,M);c&&(M=M.map(function(n){return c(n/x)*x})),"reverse"===i&&(M=M.map(function(n){return f?n<0?-1*n:-n:Math.abs(x-n)}))}return b+(g?(v-m)/x:m)*(Math.round(100*M[e])/100)+y}},L.timeline=function(u){var i=L(u=void 0===u?{}:u);return i.duration=0,i.add=function(n,e){var t=S.indexOf(i),r=i.children;function a(n){n.passThrough=!0}-1<t&&S.splice(t,1);for(var o=0;o<r.length;o++)a(r[o]);t=D(n,x(M,u)),t.targets=t.targets||u.targets,n=i.duration,t.autoplay=!1,t.direction=i.direction,t.timelineOffset=w.und(e)?n:E(e,n),a(i),i.seek(t.timelineOffset),e=L(t),a(e),r.push(e),n=tn(r,u);return i.delay=n.delay,i.endDelay=n.endDelay,i.duration=n.duration,i.seek(0),i.reset(),i.autoplay&&i.play(),i},i},L.easing=P,L.penner=s,L.random=function(n,e){return Math.floor(Math.random()*(e-n+1))+n},L});
A
src/assets/js/app.js
@@ -0,0 +1,111 @@
+document.addEventListener('DOMContentLoaded', () => { + const settings = document.querySelector('.settings'); + if (settings) { + settings.removeAttribute('hidden'); + } + fitVids(); +}); + +/* Theme toggle */ +customElements.define( + 'theme-toggle', + class extends HTMLElement { + #theme = 'light'; + + constructor() { + super(); + this.#theme = localStorage.getItem('user-color-scheme') || 'light'; + } + + connectedCallback() { + this.querySelector('input').checked = this.#theme === 'dark'; + + this.querySelector('input').addEventListener('change', () => { + this.#theme = this.#theme === 'light' ? 'dark' : 'light'; + window.applyThemeSetting(this.#theme); + }); + } + }, +); + +/* Code wrap */ +customElements.define( + 'code-wrap', + class extends HTMLElement { + #wrapCode = true; + + constructor() { + super(); + const value = localStorage.getItem('wrap-code'); + this.#wrapCode = value !== 'false'; + } + + connectedCallback() { + this.querySelector('input').checked = this.#wrapCode; + document.body.classList.toggle('wrap-code', this.#wrapCode); + + this.querySelector('input').addEventListener('change', () => { + this.#wrapCode = !this.#wrapCode; + localStorage.setItem('wrap-code', this.#wrapCode); + document.body.classList.toggle('wrap-code', this.#wrapCode); + }); + } + }, +); + +/* Elevator button */ +customElements.define( + 'elevator-button', + class extends HTMLElement { + #a = null; + #target = null; + + constructor() { + super(); + this.addEventListener('click', () => { + const detailsEl = document.querySelector('.main-menu'); + detailsEl.open = true; + }); + + document.addEventListener('scroll', () => { + if (this.isTargetInViewport()) { + this.#a.classList.remove('active'); + return; + } + this.#a.classList.add('active'); + }); + } + + connectedCallback() { + this.#a = this.querySelector('a'); + this.#target = document.querySelector(this.#a.getAttribute('href')); + } + + isTargetInViewport() { + return isInViewport(this.#target); + } + }, +); + +// Determine if an element is in the visible viewport +function isInViewport(el, partiallyVisible = false) { + const { top, left, bottom, right } = el.getBoundingClientRect(); + const { innerHeight, innerWidth } = window; + return partiallyVisible + ? ((top > 0 && top < innerHeight) || + (bottom > 0 && bottom < innerHeight)) && + ((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth)) + : top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth; +} + +function fitVids() { + const videoSources = ['iframe[src*="youtube"]', 'iframe[src*="vimeo"]']; + + document.querySelectorAll(videoSources.join(',')).forEach((video) => { + video.style.width = '100%'; + video.style.height = 'auto'; + video.style.aspectRatio = `${video.getAttribute( + 'width', + )} / ${video.getAttribute('height')}`; + }); +}
A
src/assets/js/hero.js
@@ -0,0 +1,196 @@
+// import './anime.min.js'; + +/** @type {import('animejs')} */ +const anime = window.anime; + +// IIFE for animation setup +(function () { + // ANCHOR - Mobile Hero Swap + + function swapHeroAtMobile(animationsToToggle = []) { + const hero = document.querySelector('.hero'); + const heroMobile = document.querySelector('.hero-mobile'); + const isMobile = window.matchMedia('(max-width: 550px)').matches; + if (isMobile) { + animationsToToggle.forEach((animation) => animation.pause()); + hero.style.display = 'none'; + heroMobile.style.display = 'block'; + return; + } + hero.style.display = 'block'; + heroMobile.style.display = 'none'; + animationsToToggle.forEach((animation) => animation.play()); + } + + // if user doesn't want animation, stop here + if (window.matchMedia('(prefers-reduced-motion)').matches) { + swapHeroAtMobile(); + window.addEventListener('resize', () => swapHeroAtMobile()); + return; + } + + // ANCHOR - Solar System Animation + + const solarSystem = document.getElementById('solar-system'); + + const solarSystemAnims = [...solarSystem.children].map((body) => + anime({ + targets: body.children[0], + translateY: () => [anime.random(-20, 10), anime.random(10, 30)], + duration: () => anime.random(3500, 5000), + loop: true, + direction: 'alternate', + easing: 'easeInOutSine', + }), + ); + + // ANCHOR - Sparkle Animation + + const sparkles = document.getElementById('sparkle'); + + const sparklesAnim = anime({ + targets: [...sparkles.children].reverse(), + opacity: [0, 1, 0], + duration: 4500, + loop: true, + easing: 'steps(1)', + delay: anime.stagger(500), + }); + + // ANCHOR - Rocket Animation + + const rocket = document.getElementById('rocket'); + const cloud = document.getElementById('cloud'); + const exhaust = document.getElementById('exhaust'); + const exhaustLeft = exhaust.children[0]; + const exhaustCenter = exhaust.children[1]; + const exhaustRight = exhaust.children[2]; + + rocket.addEventListener('click', () => { + rocket.style.transform = 'translateX(229.67px) translateY(206.93px)'; + exhaust.style.transform = 'translateX(6.88px) translateY(583.62px)'; + + anime({ + targets: cloud, + translateX: [5, -5], + loop: true, + direction: 'alternate', + easing: 'linear', + duration: 100, + }); + + anime({ + targets: [exhaustLeft, exhaustRight], + translateY: [-10, 10], + fill: ['#fff', '#ffffe6'], + loop: true, + direction: 'alternate', + easing: 'linear', + duration: 100, + }); + + anime({ + targets: [exhaustCenter], + translateY: [10, -10], + fill: ['#fff', '#ffffe6'], + loop: true, + direction: 'alternate', + easing: 'linear', + duration: 100, + }); + + const tl = anime.timeline({ + loop: 1, + direction: 'alternate', + }); + + tl.add({ + targets: cloud, + opacity: 1, + duration: 100, + easing: 'linear', + }); + + tl.add({ + targets: rocket, + translateY: -1100, + duration: 4000, + easing: 'easeInSine', + }); + + // delay + tl.add({ + duration: 1000, + }); + + tl.add( + { + targets: cloud, + opacity: 0, + duration: 400, + easing: 'linear', + }, + 2000, + ); + + tl.add( + { + targets: exhaust, + translateY: 680, + duration: 1, + easing: 'linear', + }, + 1000, + ); + }); + + // ANCHOR - Donut Animation + + const donutBefore = document.getElementById('donut-before'); + const donutAfter = document.getElementById('donut-after'); + + donutAfter.addEventListener('click', () => { + donutAfter.style.transformOrigin = '150px 200px'; + donutBefore.style.transformOrigin = '150px 200px'; + + donutAfter.style.transform = 'translate(667.33px, 1245.92px)'; + donutBefore.style.transform = 'translate(667.33px, 1245.92px)'; + + let fired = false; + + anime({ + targets: [donutAfter, donutBefore], + scale: [1, 1.2, 1], + easing: 'easeOutSine', + duration: 250, + update: (anim) => { + if (Math.round(anim.progress) >= 50 && !fired) { + donutAfter.style.opacity = + donutAfter.style.opacity === '1' ? '0' : '1'; + donutBefore.style.opacity = + donutAfter.style.opacity === '1' ? '0' : '1'; + fired = true; + } + }, + }); + }); + + // ANCHOR - Coffee Animation + + const coffeeBefore = document.getElementById('coffee-before'); + coffeeBefore.style.opacity = '1'; + const coffeeAfter = document.getElementById('coffee-after'); + coffeeAfter.style.opacity = '0'; + + coffeeAfter.addEventListener('click', () => { + coffeeBefore.style.opacity = coffeeBefore.style.opacity === '1' ? '0' : '1'; + coffeeAfter.style.opacity = coffeeAfter.style.opacity === '1' ? '0' : '1'; + }); + + // ANCHOR - Mobile Hero Swap on resize + + swapHeroAtMobile([...solarSystemAnims, sparklesAnim]); + window.addEventListener('resize', () => + swapHeroAtMobile([...solarSystemAnims, sparklesAnim]), + ); +})();
A
src/index.md
@@ -0,0 +1,16 @@
+--- +title: HTML e Pessoas +summary: "HTML não é só para quem trabalha com tecnologia. É para todo mundo. Aprenda a fazer um site do zero neste livro na web, feito para iniciantes." +layout: "home.njk" +originalPath: / +--- + +# HTML é para pessoas + +HTML não é só para quem trabalha com tecnologia. É para qualquer pessoa, do mesmo jeito que um documento é para qualquer pessoa. HTML é só mais um tipo de documento. Um tipo muito especial — aquele em que a web é construída. + +O livro original foi escrito por [Blake Watson](https://blakewatson.com/). Ele faz sites desde o começo dos anos 2000. Mesmo trabalhando profissionalmente na área, acredita que *qualquer pessoa* deveria conseguir fazer um site com HTML, se quiser. Este livro ensina exatamente isso. Você não precisa ter experiência anterior com sites ou programação. Vamos cobrir tudo o que você precisa para começar, de um jeito acessível e amigável. + +Esta tradução para o português do Brasil é oferecida por [Pablo Murad](https://pablomurad.com) e [Portal IDEA](https://portalidea.com.br). + +Pronto? Vamos lá!
A
src/printable.njk
@@ -0,0 +1,109 @@
+--- +permalink: printable/ +originalPath: /printable/ +--- +<!doctype html> + +<html lang="pt-BR" data-theme="light"> + <head> + <meta charset="utf-8" /> + <meta name="viewport" content="initial-scale=1, width=device-width" /> + + <title>HTML e Pessoas</title> + + <meta property="og:title" content="HTML e Pessoas" /> + <meta + property="og:description" + content="HTML não é só para quem trabalha com tecnologia. É para todo mundo. Aprenda a fazer um site do zero neste livro na web, feito para iniciantes." + /> + <meta property="og:image" content="/assets/img/design/og.png" /> + <meta property="og:locale" content="pt_BR" /> + <link rel="canonical" href="{{ site.url }}/printable/" /> + <link rel="alternate" hreflang="pt-BR" href="{{ site.url }}/printable/" /> + <link rel="alternate" hreflang="en" href="{{ site.originalUrl }}/printable/" /> + + <!-- favicon --> + <link + rel="icon" + type="image/png" + sizes="512x512" + href="/assets/img/design/favicon.png" + /> + + <link rel="stylesheet" href="/assets/css/style.css" /> + <link rel="stylesheet" href="/assets/css/print.css" media="print" /> + + <style> + h1 { + margin-top: var(--size-10); + } + + .site-footer { + background: none; + } + </style> + + <script defer src="/assets/js/app.js"></script> + {% block scripts %}{% endblock %} + </head> + + <body class="page wrap-code"> + {% block header %} + <header class="site-header mb-none"> + <div class="logo-wrap"> + <p class="site-title container"> + <a href="/"> + <span class="sr-only">HTML e pessoas</span> + {% include "./assets/img/design/logo.svg" %} + </a> + </p> + </div> + </header> + {% endblock %} + + <main id="main-content" class="container"> + {% for chapter in collections.sortedChapter %} + {{ chapter.content | safe }} + {% endfor %} + </main> + + <footer class="site-footer"> + <div class="container"> + <ul class="mb-sm pl-none" style="list-style: none"> + <li> + <a href="/conquista-desbloqueada-hipertextista#recursos-deste-livro" + >Recursos</a + > + </li> + <li> + <a href="https://github.com/blakewatson/htmlforpeople">GitHub</a> + </li> + <li> + <a href="https://blakewatson.com/about">Sobre o autor</a> + </li> + </ul> + <p> + Livro original de + <a href="https://blakewatson.com">Blake Watson</a> — + <a href="https://htmlforpeople.com">HTML for People</a>.<br /> + Tradução para o português do Brasil oferecida por + <a href="https://pablomurad.com">Pablo Murad</a> e + <a href="https://portalidea.com.br">Portal IDEA</a>.<br /> + Licença + <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" + >CC BY-NC-SA 4.0</a + >. + </p> + </div> + </footer> + + <script> + const tocLinks = Array.from( + document.querySelector('#sumario + ol').querySelectorAll('a'), + ); + tocLinks.forEach((link) => { + link.setAttribute('href', link.getAttribute('href').replace('/', '#')); + }); + </script> + </body> +</html>
A
src/sitemap.njk
@@ -0,0 +1,17 @@
+--- +permalink: /sitemap.xml +eleventyExcludeFromCollections: true +--- +<?xml version="1.0" encoding="UTF-8"?> +<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" + xmlns:xhtml="http://www.w3.org/1999/xhtml"> +{%- for item in collections.all %} + <url> + <loc>{{ site.url }}{{ item.url }}</loc> + <xhtml:link rel="alternate" hreflang="pt-BR" href="{{ site.url }}{{ item.url }}"/> + {%- if item.data.originalPath %} + <xhtml:link rel="alternate" hreflang="en" href="{{ site.originalUrl }}{{ item.data.originalPath }}"/> + {%- endif %} + </url> +{%- endfor %} +</urlset>