diff --git a/.config/.rvmrc b/.config/.rvmrc deleted file mode 100755 index 15a279981..000000000 --- a/.config/.rvmrc +++ /dev/null @@ -1 +0,0 @@ -3.3.0 diff --git a/.config/babel.config.json b/.config/babel.config.json deleted file mode 100644 index 72ac09ef5..000000000 --- a/.config/babel.config.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "plugins": ["@babel/plugin-syntax-jsx"], - "presets": [ - [ - "@babel/preset-env", - { - "modules": false, - "targets": { - "esmodules": true, - "node": "current" - } - } - ] - ] -} diff --git a/.config/babel.mjs b/.config/babel.mjs deleted file mode 100644 index 69688a59f..000000000 --- a/.config/babel.mjs +++ /dev/null @@ -1,154 +0,0 @@ -/** - * @file Dynamic Babel configuration. - * - * Notes: - * 1. Plugins run before presets. - * 2. Plugin ordering is first to last. - * 3. Preset ordering is reversed (last to first). - * - * @author The OpenINF Authors & Friends - * @module {ES6Module} /.config/babel - * @license MIT OR Apache-2.0 OR BlueOak-1.0.0 - * @see https://babeljs.io/docs/en/plugins#plugin-ordering - */ - -// ----------------------------------------------------------------------------- -// Requirements -// ----------------------------------------------------------------------------- - -import { packageConfig } from 'shared/constants'; - -// ----------------------------------------------------------------------------- -// Presets -// ----------------------------------------------------------------------------- - -const nodeDevelopmentPresets = [ - [ - // https://babeljs.io/docs/en/babel-preset-env - '@babel/preset-env', - { - // Module transformations are unnecessary as Node is in ES module context. - // Additionally, CommonJS cannot be treeshaken. - modules: false, - targets: { - esmodules: false, - node: true, - }, - useBuiltIns: 'entry', - corejs: packageConfig.dependencies['core-js'], - }, - ], -]; - -const nodeProductionPresets = [ - [ - // https://babeljs.io/docs/en/babel-preset-env - '@babel/preset-env', - { - // Module transformations are necessary as Node is in CommonJS context. - // modules: false, - // modules: '', - targets: { - esmodules: true, - node: 'current', - }, - loose: true, - include: ['@babel/plugin-transform-classes'], - // 'exclude': ['transform-es2015-typeof-symbol'], - useBuiltIns: 'usage', - corejs: { - version: packageConfig.dependencies['core-js'], - proposals: true, - }, - }, - ], -]; - -// ----------------------------------------------------------------------------- -// Plugins -// ----------------------------------------------------------------------------- - -const commonNodePlugins = [ - // https://babeljs.io/docs/en/babel-plugin-proposal-class-properties - // [ - // '@babel/plugin-proposal-class-properties', - // { - // 'loose': true, - // }, - // ], - // https://babeljs.io/docs/en/babel-plugin-syntax-import-meta - '@babel/plugin-syntax-import-meta', - // https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import - '@babel/plugin-syntax-dynamic-import', - // '@babel/plugin-proposal-object-rest-spread', - 'babel-plugin-dynamic-import-node-sync', - // '@babel/plugin-transform-classes', - // https://babeljs.io/docs/en/babel-plugin-transform-modules-commonjs - [ - '@babel/plugin-transform-modules-commonjs', - { - allowTopLevelThis: false, - }, - ], -]; - -const nodeDevelopmentPlugins = [ - // https://babeljs.io/docs/en/babel-plugin-transform-runtime - [ - '@babel/plugin-transform-runtime', - { - corejs: { version: 3, proposals: true }, - helpers: true, - regenerator: true, - useESModules: false, - }, - ], -]; - -const nodeProductionPlugins = [ - // https://babeljs.io/docs/en/babel-plugin-transform-runtime - [ - '@babel/plugin-transform-runtime', - { - corejs: { version: 3, proposals: true }, - helpers: true, - regenerator: true, - useESModules: true, - }, - ], -]; - -// ----------------------------------------------------------------------------- -// Export -// ----------------------------------------------------------------------------- - -const config = (api) => { - // https://babeljs.io/docs/en/config-files#apienv - const envName = api.env(); - - // eslint-disable-next-line no-console - console.log(`Babel was loaded with the '${envName}' environment.`); - - switch (envName) { - case 'development': - return { - presets: nodeDevelopmentPresets, - plugins: commonNodePlugins.concat(nodeDevelopmentPlugins), - ignore: [], - }; - case 'production': - return { - presets: nodeProductionPresets, - plugins: commonNodePlugins.concat(nodeProductionPlugins), - ignore: [], - }; - default: - return { - presets: nodeDevelopmentPresets, - plugins: commonNodePlugins.concat(nodeDevelopmentPlugins), - ignore: [], - }; - } -}; - -export default config; diff --git a/.config/env-cmd.mjs b/.config/env-cmd.mjs deleted file mode 100644 index bbe1d38cc..000000000 --- a/.config/env-cmd.mjs +++ /dev/null @@ -1,30 +0,0 @@ - -nodeProductionOptions = nodeProductionOptions.join(' '); -nodeDevelopmentOptions = nodeDevelopmentOptions.join(' '); - -// ----------------------------------------------------------------------------- -// Export -// ----------------------------------------------------------------------------- - -export default { - 'development': { - // Development - // https://github.com/visionmedia/debug#environment-variables - 'DEBUG': '*', - // https://www.dynatrace.com/news/blog/the-drastic-effects-of-omitting-node-env-in-your-express-js-applications/ - // https://dzone.com/articles/what-you-should-know-about-node-env - 'NODE_ENV': 'development', - // https://nodejs.org/api/all.html#cli_node_options_options - 'NODE_OPTIONS': nodeDevelopmentOptions, - }, - 'production': { - // Production - // https://github.com/visionmedia/debug#environment-variables - 'DEBUG': false, - // https://nodejs.org/en/docs/guides/simple-profiling/ - // https://webpack.js.org/guides/environment-variables/ - 'NODE_ENV': 'production', - // https://nodejs.org/api/all.html#cli_node_options_options - 'NODE_OPTIONS': nodeProductionOptions, - }, -}; diff --git a/.deepsource.toml b/.deepsource.toml index 7b37c5fef..0f402a4e4 100644 --- a/.deepsource.toml +++ b/.deepsource.toml @@ -1,45 +1,33 @@ version = 1 - -test_patterns = [ - "test/**", - "*test.js" +exclude_patterns = [ + "pnpm-lock.yaml", + "_sass/bootstrap/**", + "_sass/bourbon/**", ] [[analyzers]] -name = "ruby" -enabled = true - -[[analyzers]] -name = "shell" -enabled = true +name = "secrets" [[analyzers]] -name = "secrets" -enabled = true +name = "ruby" [[analyzers]] -name = "docker" -enabled = true +name = "javascript" - [analyzers.meta] - dockerfile_paths = [".devcontainer/experimental/Dockerfile"] +[analyzers.meta] +environment = [ + "nodejs", + "browser", +] [[analyzers]] -name = "javascript" -enabled = true +name = "docker" [analyzers.meta] - plugins = [] - environment = [ - "nodejs", - "browser", - "cypress" - ] +dockerfile_paths = [".devcontainer/experimental/Dockerfile"] [[transformers]] name = "prettier" -enabled = true [[transformers]] name = "rubocop" -enabled = true diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 6dd9f0993..8eee0f1f5 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -29,8 +29,6 @@ "biomejs.biome", // https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint "davidanson.vscode-markdownlint", - // https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint - "dbaeumer.vscode-eslint", // https://marketplace.visualstudio.com/items?itemName=dprint.dprint "dprint.dprint", // https://marketplace.visualstudio.com/items?itemName=editorconfig.editorconfig @@ -43,8 +41,10 @@ "KatjanaKosic.vscode-json5", // https://marketplace.visualstudio.com/items?itemName=redhat.vscode-xml "redhat.vscode-xml", - // https://marketplace.visualstudio.com/items?itemName=sissel.shopify-liquid - "sissel.shopify-liquid", + // https://marketplace.visualstudio.com/items?itemName=rubocop.vscode-rubocop + // "rubocop.vscode-rubocop", + // https://marketplace.visualstudio.com/items?itemName=Shopify.theme-check-vscode + "Shopify.theme-check-vscode", // https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker "streetsidesoftware.code-spell-checker", // https://marketplace.visualstudio.com/items?itemName=tamasfe.even-better-toml @@ -57,12 +57,9 @@ // Use 'forwardPorts' to make a list of ports inside the container available // locally. "forwardPorts": [ - // Jekyll server - 4000, - // Live reload server - 35729, - // OpenSSH server - 2222 + 4000, // Jekyll server + 35729, // Live reload server + 2222 // OpenSSH server ], "overrideCommand": false, diff --git a/.devcontainer/experimental/Dockerfile b/.devcontainer/experimental/Dockerfile index edc302d77..c32db6210 100644 --- a/.devcontainer/experimental/Dockerfile +++ b/.devcontainer/experimental/Dockerfile @@ -1,4 +1,4 @@ -FROM openinf/grimesai-salvage-tex:lunar@sha256:85db277df2bb6b07922478085cd612a67a9a7d3923b09135a7f6bd9bd65ca89a +FROM openinf/grimesai-salvage-tex:lunar ARG USERNAME=vscode ARG NPM_GLOBAL=/usr/local/share/npm-global @@ -16,14 +16,14 @@ USER 0 # COPY library-scripts/*.sh /tmp/library-scripts/ # skipcq: DOK-DL3008 RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \ - # && /bin/bash /tmp/library-scripts/common-debian.sh "${USERNAME}" "${USER_UID}" "${USER_GID}" "${UPGRADE_PACKAGES}" \ - # && /bin/bash /tmp/library-scripts/fish-debian.sh "${USERNAME}" \ - # && /bin/bash /tmp/library-scripts/sshd-debian.sh "2222" "${USERNAME}" "true" "root" \ - # - # **************************************************************************** - # * TODO: Add any additional OS packages you want included in the definition * - # * here. We want to do this before cleanup to keep the "layer" small. * - # **************************************************************************** +# && /bin/bash /tmp/library-scripts/common-debian.sh "${USERNAME}" "${USER_UID}" "${USER_GID}" "${UPGRADE_PACKAGES}" \ +# && /bin/bash /tmp/library-scripts/fish-debian.sh "${USERNAME}" \ +# && /bin/bash /tmp/library-scripts/sshd-debian.sh "2222" "${USERNAME}" "true" "root" \ +# +# **************************************************************************** +# * TODO: Add any additional OS packages you want included in the definition * +# * here. We want to do this before cleanup to keep the "layer" small. * +# **************************************************************************** && apt-get -y install --no-install-recommends build-essential default-jre ruby-dev git-lfs \ && apt-get clean \ && rm -rf /var/lib/apt/lists/* @@ -32,11 +32,11 @@ USER vscode # ENV Variables required by Jekyll. ENV LANG=en_US.UTF-8 \ - LANGUAGE=en_US:en \ - TZ=Etc/UTC \ - LC_ALL=en_US.UTF-8 \ - LANG=en_US.UTF-8 \ - LANGUAGE=en_US + LANGUAGE=en_US:en \ + TZ=Etc/UTC \ + LC_ALL=en_US.UTF-8 \ + LANG=en_US.UTF-8 \ + LANGUAGE=en_US ENTRYPOINT ["/usr/local/share/ssh-init.sh"] CMD ["sleep", "infinity"] diff --git a/.env-cmdrc.js b/.env-cmdrc.js deleted file mode 100644 index b6b156402..000000000 --- a/.env-cmdrc.js +++ /dev/null @@ -1,8 +0,0 @@ -'use strict'; - -/* eslint-disable - @typescript-eslint/no-var-requires */ - -/* TODO(DerekNonGeneric): impl @typescript-eslint */ -// require = require('')(module /* , options */); -module.exports = require('./.config/env-cmd').default; diff --git a/.eslintignore b/.eslintignore deleted file mode 100755 index d29530827..000000000 --- a/.eslintignore +++ /dev/null @@ -1,8 +0,0 @@ -!.* -.git/ -_site/ -assets/js/count.v3.js -node_modules/ -vendor/ -package.json -pnpm-lock.yaml diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index eb5d8f87d..7bc7fed9a 100755 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -1,6 +1,6 @@ OpenINF logo The OpenINF website and other static resources +> ⚡🐋 The OpenINF portal, other static resources, and more static electricity
-The high-level goal of open.inf.is is to build and maintain a current website -serving content and assets. Although this site is still in its infancy, it’s -intended to support separation of concerns. We are constantly working to improve -this repository, so please feel free to [contribute](#contributing) if you -notice any omissions or errors. +The high-level goal of this project is to build and maintain a community portal +that serves content and assets. Although this portal is still in its infancy, it +is intended to support a separation of concerns between hosting our community +website, SDK documentation, and more. We are constantly working to improve this +work, so please feel free to contribute if you notice any omissions or errors. Thanks! @@ -34,27 +34,6 @@ Thanks!
-Short-term non-goals: - -- Use an environment different from `github-pages` - -Long-term non-goals: - -- Use `github-pages` or their static site generator - -
- -The rationale for this approach is that we would like our website code suspended -on this framework initially. It has a good form and structure, yet, due to the -underlying technologies (`scss` & `html+liquid`) being of limited power, -evolution becomes necessary while retaining the same codebase layout. - -

- ---- - -
- ### Contributing Pull requests are welcome. For major changes, please open an issue first to @@ -110,23 +89,17 @@ comprising our style guide handbook uses the CC BY-SA 4.0 license. -[Roadmap]: https://github.com/OpenINF/openinf.github.io/issues 'Roadmap' -[Development]: ./collections/_docs/development.md 'Development' -[Issue Tracker]: - https://github.com/OpenINF/openinf.github.io/issues - 'Issue Tracker' -[Changelog]: - https://github.com/OpenINF/openinf.github.io/commits/live - 'Changelog' -[Credits]: - https://github.com/OpenINF/openinf.github.io/graphs/contributors - 'Credits' +[Roadmap]: https://github.com/OpenINF/open.inf.is/issues 'Roadmap' +[Development]: ./collections/_docs/README.md 'Development' +[Issue Tracker]: https://github.com/OpenINF/open.inf.is/issues 'Issue Tracker' +[Changelog]: https://github.com/OpenINF/open.inf.is/commits/live 'Changelog' +[Credits]: https://github.com/OpenINF/open.inf.is/graphs/contributors 'Credits' [project-type-badge--shields]: https://img.shields.io/badge/type-prototype-blue.svg [prototyping-scheme-badge--shields]: https://img.shields.io/badge/scheme-evolutionary-blue.svg [project-status-badge--shields]: https://img.shields.io/badge/status-under%20construction-yellow.svg -[open an issue]: https://github.com/OpenINF/openinf.github.io/issues +[open an issue]: https://github.com/OpenINF/open.inf.is/issues diff --git a/assets/img/svg/cc/COPYING.md b/_assets/img/svg/cc/COPYING.md similarity index 100% rename from assets/img/svg/cc/COPYING.md rename to _assets/img/svg/cc/COPYING.md diff --git a/_assets/img/svg/cc/cc-by.svg b/_assets/img/svg/cc/cc-by.svg new file mode 100644 index 000000000..53066db48 --- /dev/null +++ b/_assets/img/svg/cc/cc-by.svg @@ -0,0 +1,6 @@ + + + diff --git a/_assets/img/svg/cc/cc-heart-filled.svg b/_assets/img/svg/cc/cc-heart-filled.svg new file mode 100644 index 000000000..d47b12a7f --- /dev/null +++ b/_assets/img/svg/cc/cc-heart-filled.svg @@ -0,0 +1,8 @@ + + + diff --git a/_assets/img/svg/cc/cc-heart.svg b/_assets/img/svg/cc/cc-heart.svg new file mode 100644 index 000000000..0ac54ac61 --- /dev/null +++ b/_assets/img/svg/cc/cc-heart.svg @@ -0,0 +1,8 @@ + + + diff --git a/_assets/img/svg/cc/cc-logo.svg b/_assets/img/svg/cc/cc-logo.svg new file mode 100644 index 000000000..acc5609c4 --- /dev/null +++ b/_assets/img/svg/cc/cc-logo.svg @@ -0,0 +1,6 @@ + + + diff --git a/_assets/img/svg/cc/cc-nc-eu.svg b/_assets/img/svg/cc/cc-nc-eu.svg new file mode 100644 index 000000000..6fef522b5 --- /dev/null +++ b/_assets/img/svg/cc/cc-nc-eu.svg @@ -0,0 +1,6 @@ + + + diff --git a/_assets/img/svg/cc/cc-nc-jp.svg b/_assets/img/svg/cc/cc-nc-jp.svg new file mode 100644 index 000000000..2804690bf --- /dev/null +++ b/_assets/img/svg/cc/cc-nc-jp.svg @@ -0,0 +1,6 @@ + + + diff --git a/_assets/img/svg/cc/cc-nc.svg b/_assets/img/svg/cc/cc-nc.svg new file mode 100644 index 000000000..b155a9fae --- /dev/null +++ b/_assets/img/svg/cc/cc-nc.svg @@ -0,0 +1,6 @@ + + + diff --git a/_assets/img/svg/cc/cc-nd.svg b/_assets/img/svg/cc/cc-nd.svg new file mode 100644 index 000000000..a40593d95 --- /dev/null +++ b/_assets/img/svg/cc/cc-nd.svg @@ -0,0 +1,6 @@ + + + diff --git a/_assets/img/svg/cc/cc-pd.svg b/_assets/img/svg/cc/cc-pd.svg new file mode 100644 index 000000000..ce8143658 --- /dev/null +++ b/_assets/img/svg/cc/cc-pd.svg @@ -0,0 +1,6 @@ + + + diff --git a/_assets/img/svg/cc/cc-pdm.svg b/_assets/img/svg/cc/cc-pdm.svg new file mode 100644 index 000000000..e56185387 --- /dev/null +++ b/_assets/img/svg/cc/cc-pdm.svg @@ -0,0 +1,6 @@ + + + diff --git a/_assets/img/svg/cc/cc-remix.svg b/_assets/img/svg/cc/cc-remix.svg new file mode 100644 index 000000000..228de075b --- /dev/null +++ b/_assets/img/svg/cc/cc-remix.svg @@ -0,0 +1,6 @@ + + + diff --git a/_assets/img/svg/cc/cc-sa.svg b/_assets/img/svg/cc/cc-sa.svg new file mode 100644 index 000000000..bb3bbdc9f --- /dev/null +++ b/_assets/img/svg/cc/cc-sa.svg @@ -0,0 +1,6 @@ + + + diff --git a/_assets/img/svg/cc/cc-sampling-plus.svg b/_assets/img/svg/cc/cc-sampling-plus.svg new file mode 100644 index 000000000..82df6ad00 --- /dev/null +++ b/_assets/img/svg/cc/cc-sampling-plus.svg @@ -0,0 +1,8 @@ + + + diff --git a/_assets/img/svg/cc/cc-sampling.svg b/_assets/img/svg/cc/cc-sampling.svg new file mode 100644 index 000000000..518e7666e --- /dev/null +++ b/_assets/img/svg/cc/cc-sampling.svg @@ -0,0 +1,6 @@ + + + diff --git a/_assets/img/svg/cc/cc-share.svg b/_assets/img/svg/cc/cc-share.svg new file mode 100644 index 000000000..84dd421f8 --- /dev/null +++ b/_assets/img/svg/cc/cc-share.svg @@ -0,0 +1,6 @@ + + + diff --git a/_assets/img/svg/cc/cc-zero.svg b/_assets/img/svg/cc/cc-zero.svg new file mode 100644 index 000000000..79a811f73 --- /dev/null +++ b/_assets/img/svg/cc/cc-zero.svg @@ -0,0 +1,8 @@ + + + diff --git a/assets/img/svg/logo.svg b/_assets/img/svg/logo.svg old mode 100755 new mode 100644 similarity index 98% rename from assets/img/svg/logo.svg rename to _assets/img/svg/logo.svg index 2af1fb552..6ced5f4f2 --- a/assets/img/svg/logo.svg +++ b/_assets/img/svg/logo.svg @@ -11,5 +11,6 @@ The OpenINF Logo + d="M56.55 20c-3.874 0-7.485 2.99-7.485 6.982 0 3.993 3.611 7.078 7.484 7.003a7.26 7.274 0 0 0 7.485-6.982c0-3.965-3.612-7.003-7.485-7.003zm-6.363 20.33c-4.584 0-10.487.713-13.92 4.059-6.184 5.999 3.096 12.41 7.914 15.09-2.077 7.5-6.137 19.685 5.838 20.444v.066c4.48.112 10.554-.6 13.762-4.125 5.782-6.41-2.245-12.344-7.418-15.156 2.161-7.62 6.07-20.087-6.176-20.378zm-8.466 5.14c1.446-.092 3.035.339 3.854 1.028l.01.024c2.067 1.715.43 6.477-.085 8.483-1.759-1.078-7.24-4.602-6.762-7.414.238-1.406 1.538-2.022 2.983-2.115zM55.11 65.143c2.807 1.612 4.959 3.365 5.614 5.38l-.014-.008c.935 3-3.068 5.137-5.341 3.515-2.489-1.875-.935-6.562-.261-8.886z" + /> diff --git a/assets/img/svg/logogram-color.svg b/_assets/img/svg/logogram-color.svg similarity index 96% rename from assets/img/svg/logogram-color.svg rename to _assets/img/svg/logogram-color.svg index 4550f5e20..ae427d272 100644 --- a/assets/img/svg/logogram-color.svg +++ b/_assets/img/svg/logogram-color.svg @@ -10,6 +10,8 @@ The OpenINF Logogram in Color - + diff --git a/assets/img/svg/logogram.svg b/_assets/img/svg/logogram.svg old mode 100755 new mode 100644 similarity index 98% rename from assets/img/svg/logogram.svg rename to _assets/img/svg/logogram.svg index 2af1fb552..6ced5f4f2 --- a/assets/img/svg/logogram.svg +++ b/_assets/img/svg/logogram.svg @@ -11,5 +11,6 @@ The OpenINF Logo + d="M56.55 20c-3.874 0-7.485 2.99-7.485 6.982 0 3.993 3.611 7.078 7.484 7.003a7.26 7.274 0 0 0 7.485-6.982c0-3.965-3.612-7.003-7.485-7.003zm-6.363 20.33c-4.584 0-10.487.713-13.92 4.059-6.184 5.999 3.096 12.41 7.914 15.09-2.077 7.5-6.137 19.685 5.838 20.444v.066c4.48.112 10.554-.6 13.762-4.125 5.782-6.41-2.245-12.344-7.418-15.156 2.161-7.62 6.07-20.087-6.176-20.378zm-8.466 5.14c1.446-.092 3.035.339 3.854 1.028l.01.024c2.067 1.715.43 6.477-.085 8.483-1.759-1.078-7.24-4.602-6.762-7.414.238-1.406 1.538-2.022 2.983-2.115zM55.11 65.143c2.807 1.612 4.959 3.365 5.614 5.38l-.014-.008c.935 3-3.068 5.137-5.341 3.515-2.489-1.875-.935-6.562-.261-8.886z" + /> diff --git a/assets/img/svg/publicdomain.svg b/_assets/img/svg/publicdomain.svg similarity index 62% rename from assets/img/svg/publicdomain.svg rename to _assets/img/svg/publicdomain.svg index 76687650d..edae7a63e 100644 --- a/assets/img/svg/publicdomain.svg +++ b/_assets/img/svg/publicdomain.svg @@ -9,32 +9,60 @@ *****************************************************************************--> The Public Domain Software Web Badge (As Self-Declared) - The “public domain” license badge is used on documents free of known copyright. The image is - a link to a document that clarifies the meaning of the public domain and identifies any - exceptions. + + The “public domain” license badge is used on documents free of known + copyright. The image is a link to a document that clarifies the meaning of + the public domain and identifies any exceptions. + - + - + - + - + - + - - - - + + + + diff --git a/_assets/img/svg/reflection-theme/flower_of_life.svg b/_assets/img/svg/reflection-theme/flower_of_life.svg new file mode 100644 index 000000000..528dad8b3 --- /dev/null +++ b/_assets/img/svg/reflection-theme/flower_of_life.svg @@ -0,0 +1,207 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_assets/img/svg/reflection-theme/hamburger-primary.svg b/_assets/img/svg/reflection-theme/hamburger-primary.svg new file mode 100644 index 000000000..ab3f40a32 --- /dev/null +++ b/_assets/img/svg/reflection-theme/hamburger-primary.svg @@ -0,0 +1,4 @@ + + + + diff --git a/_assets/img/svg/reflection-theme/hamburger-secondary.svg b/_assets/img/svg/reflection-theme/hamburger-secondary.svg new file mode 100644 index 000000000..7e8291a1b --- /dev/null +++ b/_assets/img/svg/reflection-theme/hamburger-secondary.svg @@ -0,0 +1,4 @@ + + + + diff --git a/_assets/img/svg/reflection-theme/prism_outro.svg b/_assets/img/svg/reflection-theme/prism_outro.svg new file mode 100644 index 000000000..10b693709 --- /dev/null +++ b/_assets/img/svg/reflection-theme/prism_outro.svg @@ -0,0 +1,6 @@ + + + diff --git a/assets/img/svg/valid-css3.svg b/_assets/img/svg/valid-css3.svg similarity index 53% rename from assets/img/svg/valid-css3.svg rename to _assets/img/svg/valid-css3.svg index 0799f04dc..5c3fe67c8 100644 --- a/assets/img/svg/valid-css3.svg +++ b/_assets/img/svg/valid-css3.svg @@ -9,28 +9,59 @@ *****************************************************************************--> The Valid CSS3 Markup Web Badge (As Verified by W3C Validator) - The “valid” web page & other web standard badges are used on documents that successfully - passed validation for a specific technology. The W3C validation services image is used as a link - to re-validate the document to show readers that one has taken some care to create an - interoperable Web page. + + The “valid” web page & other web standard badges are used on documents + that successfully passed validation for a specific technology. The W3C + validation services image is used as a link to re-validate the document to + show readers that one has taken some care to create an interoperable Web + page. + - + - - - - - - - - + + + + + + + + diff --git a/assets/img/svg/valid-html5.svg b/_assets/img/svg/valid-html5.svg similarity index 53% rename from assets/img/svg/valid-html5.svg rename to _assets/img/svg/valid-html5.svg index fce717e9d..301fb4275 100644 --- a/assets/img/svg/valid-html5.svg +++ b/_assets/img/svg/valid-html5.svg @@ -9,27 +9,54 @@ *****************************************************************************--> The Valid HTML5 Markup Web Badge (As Verified by W3C Validator) - The “valid” web page & other web standard badges are used on documents that successfully - passed validation for a specific technology. The W3C validation services image is used as a link - to re-validate the document to show readers that one has taken some care to create an - interoperable Web page. + + The “valid” web page & other web standard badges are used on documents + that successfully passed validation for a specific technology. The W3C + validation services image is used as a link to re-validate the document to + show readers that one has taken some care to create an interoperable Web + page. + - + - - - + + + - + - - + + diff --git a/assets/img/svg/vic-cad-ind/banner/README.md b/_assets/img/svg/vic-cad-ind/banner/README.md similarity index 100% rename from assets/img/svg/vic-cad-ind/banner/README.md rename to _assets/img/svg/vic-cad-ind/banner/README.md diff --git a/assets/img/svg/vic-cad-ind/banner/release-level/idk-inf-1.svg b/_assets/img/svg/vic-cad-ind/banner/release-level/idk-inf-1.svg similarity index 51% rename from assets/img/svg/vic-cad-ind/banner/release-level/idk-inf-1.svg rename to _assets/img/svg/vic-cad-ind/banner/release-level/idk-inf-1.svg index 85387e803..1fa0061fb 100644 --- a/assets/img/svg/vic-cad-ind/banner/release-level/idk-inf-1.svg +++ b/_assets/img/svg/vic-cad-ind/banner/release-level/idk-inf-1.svg @@ -1,6 +1,8 @@ Release Level Banner: Unstable - A release level banner indicating an experimental software component. + + A release level banner indicating an experimental software component. + - + diff --git a/_sass/_about.scss b/_assets/styles/_about.scss old mode 100755 new mode 100644 similarity index 100% rename from _sass/_about.scss rename to _assets/styles/_about.scss diff --git a/_sass/_blog.scss b/_assets/styles/_blog.scss old mode 100755 new mode 100644 similarity index 100% rename from _sass/_blog.scss rename to _assets/styles/_blog.scss diff --git a/_sass/_byline.scss b/_assets/styles/_byline.scss old mode 100755 new mode 100644 similarity index 100% rename from _sass/_byline.scss rename to _assets/styles/_byline.scss diff --git a/assets/scss/collections.scss b/_assets/styles/_collections.scss similarity index 89% rename from assets/scss/collections.scss rename to _assets/styles/_collections.scss index a0df9b994..1d61857cb 100644 --- a/assets/scss/collections.scss +++ b/_assets/styles/_collections.scss @@ -1,6 +1,7 @@ --- --- -@import "main"; + +@import 'main'; body { max-width: 700px; @@ -19,7 +20,7 @@ h2 { } h2:after { - content: ""; + content: ''; flex: 1; border: 1px solid rgba($base-color, 0.88); margin-inline-start: 0.5rem; diff --git a/_sass/_contact.scss b/_assets/styles/_contact.scss old mode 100755 new mode 100644 similarity index 100% rename from _sass/_contact.scss rename to _assets/styles/_contact.scss index d990251af..123c79653 --- a/_sass/_contact.scss +++ b/_assets/styles/_contact.scss @@ -18,11 +18,11 @@ } .icon { - float: left; - margin-right: 10px; display: block; + float: left; width: 24px; height: 24px; + margin-right: 10px; svg path { fill: $brand-primary; diff --git a/_sass/_custom-breadcrumb.scss b/_assets/styles/_custom-breadcrumb.scss old mode 100755 new mode 100644 similarity index 90% rename from _sass/_custom-breadcrumb.scss rename to _assets/styles/_custom-breadcrumb.scss index f3ab2e83a..df94773e8 --- a/_sass/_custom-breadcrumb.scss +++ b/_assets/styles/_custom-breadcrumb.scss @@ -6,7 +6,7 @@ .breadcrumb-item, .breadcrumb-item.active { - font-size: .875rem; + font-size: 0.875rem; line-height: 1.5rem; } diff --git a/_sass/_discrete-sessions.scss b/_assets/styles/_discrete-sessions.scss old mode 100755 new mode 100644 similarity index 92% rename from _sass/_discrete-sessions.scss rename to _assets/styles/_discrete-sessions.scss index 1b8a90702..f67976352 --- a/_sass/_discrete-sessions.scss +++ b/_assets/styles/_discrete-sessions.scss @@ -3,12 +3,12 @@ */ .discrete-sessions { - - ._bubble { + .bubble { background-size: 90%; + border: $border-width solid #ba160c; + // background-color: #ba160c; border-radius: $border-radius; - border: $border-width solid #ba160c; svg { width: 80%; @@ -36,11 +36,11 @@ width: 100%; height: 0; padding-bottom: 60%; // acts as fluid height - margin-bottom: .5rem; + margin-bottom: 0.5rem; overflow: hidden; @include media-breakpoint-up(sm) { - padding-bottom: 21rem + padding-bottom: 21rem; } @include media-breakpoint-up(md) { @@ -57,9 +57,10 @@ } .banner-img { - position:absolute; + position: absolute; width: 100%; height: 100%; + // background-position: center center; // background-size: 22rem; // background-repeat: no-repeat; diff --git a/_sass/_featured-sites.scss b/_assets/styles/_featured-sites.scss old mode 100755 new mode 100644 similarity index 58% rename from _sass/_featured-sites.scss rename to _assets/styles/_featured-sites.scss index 33e4adf45..31a2e0dc2 --- a/_sass/_featured-sites.scss +++ b/_assets/styles/_featured-sites.scss @@ -2,20 +2,23 @@ margin-right: -1px; margin-left: -1px; } + .featured-sites .col-xs-6 { padding: 1px; } + .featured-sites .img-fluid { margin-top: 0; } -@media (min-width: 768px) { +@media (width >= 768px) { .featured-sites .col-sm-3:first-child img { - border-top-left-radius: .25rem; - border-bottom-left-radius: .25rem; + border-top-left-radius: 0.25rem; + border-bottom-left-radius: 0.25rem; } + .featured-sites .col-sm-3:last-child img { - border-top-right-radius: .25rem; - border-bottom-right-radius: .25rem; + border-top-right-radius: 0.25rem; + border-bottom-right-radius: 0.25rem; } } diff --git a/_sass/_featurettes.scss b/_assets/styles/_featurettes.scss old mode 100755 new mode 100644 similarity index 94% rename from _sass/_featurettes.scss rename to _assets/styles/_featurettes.scss index 084c70081..9a2cffe92 --- a/_sass/_featurettes.scss +++ b/_assets/styles/_featurettes.scss @@ -10,12 +10,12 @@ } .lead { + display: block; margin-right: auto; margin-bottom: 2rem; margin-left: auto; font-size: 1rem; text-align: center; - display: block; } @include media-breakpoint-up(sm) { @@ -25,7 +25,8 @@ @include media-breakpoint-up(md) { .col-sm-6:first-child { padding-right: ($grid-gutter-width-base * 1.5); - }; + } + .col-sm-6:last-child { padding-left: ($grid-gutter-width-base * 1.5); } @@ -33,7 +34,7 @@ } .featurette-title { - margin-bottom: .5rem; + margin-bottom: 0.5rem; font-size: 1.7rem; font-weight: normal; text-align: center; @@ -48,34 +49,40 @@ margin-left: 0; } } + .featurette h4 { margin-top: 1rem; - margin-bottom: .5rem; + margin-bottom: 0.5rem; font-weight: normal; } + .featurette-img { display: block; margin-bottom: 1.25rem; } + .featurette-img:hover { color: $brand-primary; text-decoration: none; } + .featurette-img img { display: block; margin-bottom: 1rem; } -@media (min-width: 480px) { +@media (width >= 480px) { .featurette .img-fluid { margin-top: 2rem; } } + @include media-breakpoint-up(md) { .featurette { padding-top: 6rem; padding-bottom: 6rem; } + .featurette-title { font-size: $font-size-h1; @@ -83,6 +90,7 @@ font-size: 1.5rem; } } + .featurette .img-fluid { margin-top: 0; } diff --git a/_sass/_footer.scss b/_assets/styles/_footer.scss old mode 100755 new mode 100644 similarity index 83% rename from _sass/_footer.scss rename to _assets/styles/_footer.scss index 768d7a9b3..b7ad970c0 --- a/_sass/_footer.scss +++ b/_assets/styles/_footer.scss @@ -3,9 +3,9 @@ text-align: center; span { - font-size: .625rem; - color: $footer-foreground; display: block; + font-size: 0.625rem; + color: $footer-foreground; a { color: $footer-foreground; @@ -16,11 +16,11 @@ svg { width: 1.5rem; height: 1.5rem; - margin: 1rem 0 0 0; + margin: 1rem 0 0; path, polygon, - rect, { + rect { fill: $footer-foreground; } } diff --git a/_sass/_fullpage-hero.scss b/_assets/styles/_fullpage-hero.scss old mode 100755 new mode 100644 similarity index 86% rename from _sass/_fullpage-hero.scss rename to _assets/styles/_fullpage-hero.scss index 281367ebd..1672a50c2 --- a/_sass/_fullpage-hero.scss +++ b/_assets/styles/_fullpage-hero.scss @@ -1,8 +1,17 @@ .fullpage-hero { + color: #fff; position: relative; margin: 0; background-color: $brand-foreground; + amp-img { + margin-bottom: 0; + } + + amp-img > img { + object-fit: cover; + } + figcaption { position: absolute; right: 0; @@ -11,6 +20,10 @@ } } +// .navbar ~ .fullpage-hero { +// margin-top: -60px; +// } + .fullpage-hero-heading { padding-bottom: 2rem; padding-left: 2rem; @@ -22,23 +35,7 @@ span { background: linear-gradient(to bottom, transparent 50%, $brand-primary 50%); - -webkit-box-decoration-break: clone; - } -} - -// .navbar ~ .fullpage-hero { -// margin-top: -60px; -// } - -.fullpage-hero { - color: #fff; - - amp-img { - margin-bottom: 0; - } - - amp-img > img { - object-fit: cover; + box-decoration-break: clone; } } @@ -52,7 +49,11 @@ text-align: center; text-decoration: none; text-transform: uppercase; - background: linear-gradient(to top, rgba(0,0,0,.65) 0%,rgba(0,0,0,0) 100%); + background: linear-gradient( + to top, + rgb(0 0 0 / 65%) 0%, + rgb(0 0 0 / 0%) 100% + ); &:hover, &:focus { @@ -65,5 +66,5 @@ display: block; margin-top: -1rem; font-size: 2.25rem; - content: "▾"; + content: '▾'; } diff --git a/_assets/styles/_functions.scss b/_assets/styles/_functions.scss new file mode 100644 index 000000000..e1f1cdfe9 --- /dev/null +++ b/_assets/styles/_functions.scss @@ -0,0 +1,2 @@ +// Functions +@import 'functions/tint-and-shade'; diff --git a/_sass/_grouped-list.scss b/_assets/styles/_grouped-list.scss old mode 100755 new mode 100644 similarity index 81% rename from _sass/_grouped-list.scss rename to _assets/styles/_grouped-list.scss index 17c93d84d..8ec2750b1 --- a/_sass/_grouped-list.scss +++ b/_assets/styles/_grouped-list.scss @@ -2,35 +2,72 @@ li { list-style-type: none; } +.list-detail { + display: table-cell; + width: 100%; + padding: 25px 0; + + p { + margin: 0; + } + + .title-block { + position: relative; + padding-right: 15px; + + .title { + display: block; + margin: 0 0 0.4em; + font-size: 24px; + font-weight: 400; + + @include media-breakpoint-down(md) { + font-size: 18px; + line-height: 1.3333; + } + } + + .sub-title { + display: block; + font-size: $font-size-h5; + } + + @include media-breakpoint-down(sm) { + // -1 + padding-right: 40px; + } + } +} + .list-wrap { color: inherit; } .list-wrap, -.list-wrap.-is-search .list-detail { +.list-wrap.is-search .list-detail { display: block; } -.list-wrap.-is-link { +.list-wrap.is-link { text-decoration: none; .list-detail { - ._title { + .title { color: $body-color; - transition: 125ms color ease-in; text-decoration: none; + transition: 125ms color ease-in; } } } -.list-wrap.-is-link:hover { - ._title { +.list-wrap.is-link:hover { + .title { + color: $brand-primary; text-decoration: none; transition: 125ms color ease-in; - color: $brand-primary; } - ._summary { + .summary { color: $body-color; text-decoration: none; } @@ -44,13 +81,13 @@ li { padding-top: 16px; } - ._bubble { + .bubble { width: 72px; height: 72px; - border-radius: 35px; - background-size: cover; background-repeat: no-repeat; background-position: center; + background-size: cover; + border-radius: 35px; @include media-breakpoint-up(md) { margin-top: 20px; @@ -58,17 +95,18 @@ li { } @include media-breakpoint-down(md) { - margin-top: 20px; - margin-right: 32px; width: 56px; height: 56px; + margin-top: 20px; + margin-right: 32px; } - @include media-breakpoint-down(sm) { // -1 - margin-top: 14px; - margin-right: 16px; + @include media-breakpoint-down(sm) { width: 56px; height: 56px; + // -1 + margin-top: 14px; + margin-right: 16px; } path { @@ -83,50 +121,14 @@ li { } .grouped-list-title { - color: $text-muted; padding: 32px 0 16px; - text-transform: uppercase; margin-bottom: 1rem; + color: $text-muted; + text-transform: uppercase; border-bottom: 2px solid $text-muted; @include media-breakpoint-up(sm) { - padding: 32px 0 32px; - } - } -} - -.list-detail { - width: 100%; - padding: 25px 0 25px; - display: table-cell; - - p { - margin: 0; - } - - ._title-block { - position: relative; - padding-right: 15px; - - ._title { - display: block; - font-weight: 400; - font-size: 24px; - margin: 0 0 .4em; - - @include media-breakpoint-down(md) { - font-size: 18px; - line-height: 1.3333333333; - } - } - - ._sub-title { - display: block; - font-size: $font-size-h5; - } - - @include media-breakpoint-down(sm) { // -1 - padding-right: 40px; + padding: 32px 0; } } } diff --git a/_sass/_header.scss b/_assets/styles/_header.scss old mode 100755 new mode 100644 similarity index 84% rename from _sass/_header.scss rename to _assets/styles/_header.scss index 57cf9de2c..5c6800cff --- a/_sass/_header.scss +++ b/_assets/styles/_header.scss @@ -1,6 +1,6 @@ .header { background-color: $brand-primary; - box-shadow: 2px 1px 1px rgba(0, 0, 0, .15); + box-shadow: 2px 1px 1px rgb(0 0 0 / 15%); transform: translateZ(0); backface-visibility: hidden; @@ -18,7 +18,7 @@ left: 0; z-index: 1000; width: 100%; - transition: all .4s ease; + transition: all 0.4s ease; transform: translateY(0%); } @@ -40,8 +40,7 @@ } .content.mobile-show { - padding: 0 .625rem .3125rem; - + padding: 0 0.625rem 0.3125rem; } .nav-container { @@ -51,11 +50,11 @@ .navbar-brand { float: left; - font-size: 0; - margin-right: 1rem; - padding-bottom: $navbar-brand-padding-y; - padding-top: $navbar-brand-padding-y; height: 60px; + padding-top: $navbar-brand-padding-y; + padding-bottom: $navbar-brand-padding-y; + margin-right: 1rem; + font-size: 0; svg { width: auto; @@ -95,8 +94,8 @@ @include media-breakpoint-only(xs) { width: auto; - padding: 1.625rem 0 1.625rem .25rem; - margin: .875rem 0; + padding: 1.625rem 0 1.625rem 0.25rem; + margin: 0.875rem 0; background-size: 1.875rem 1.875rem; } } @@ -104,27 +103,27 @@ .alt { display: flex; - padding: 00; - text-align: right; align-items: stretch; justify-content: center; + padding: 00; + text-align: right; &.right { font-size: 1rem; - letter-spacing: .04em; + letter-spacing: 0.04em; } } .tab { - padding: .375rem; - margin: 0 .25rem; + padding: 0.375rem; + margin: 0 0.25rem; font-weight: 400; color: $brand-secondary; text-decoration: none; - transition: .1s ease color; + transition: 0.1s ease color; @include media-breakpoint-only(xs) { - padding: .625rem 1.3333333333rem; + padding: 0.625rem 1.3333rem; margin-left: auto; } @@ -141,10 +140,10 @@ height: 3px; margin: auto; visibility: hidden; - content: ""; + content: ''; background-color: $brand-foreground; opacity: 0; - transition: .1s ease opacity; + transition: 0.1s ease opacity; } &:hover, @@ -160,12 +159,12 @@ &.hamburger { display: none; + align-self: center; padding: 0; margin: 0; cursor: pointer; background: none; border: 0; - align-self: center; } } @@ -179,7 +178,7 @@ display: inline-block; width: 2.5rem; height: 2.5rem; - background-image: url("/assets/img/jekyll-theme-reflection/hamburger-secondary.svg"); + background-image: url('/assets/img/jekyll-theme-reflection/hamburger-secondary.svg'); background-repeat: no-repeat; background-position: center center; background-size: 1.875rem 1.5rem; @@ -189,14 +188,14 @@ amp-sidebar .hamburger { position: absolute; - top: .625rem; + top: 0.625rem; right: 1.125rem; z-index: 1; display: inline-block; width: 2.5rem; height: 2.5rem; background-color: transparent; - background-image: url("/assets/img/jekyll-theme-reflection/hamburger-primary.svg"); + background-image: url('/assets/img/jekyll-theme-reflection/hamburger-primary.svg'); background-repeat: no-repeat; background-position: center center; background-size: 1.875rem 1.5rem; diff --git a/_sass/_highlight.scss b/_assets/styles/_highlight.scss old mode 100755 new mode 100644 similarity index 100% rename from _sass/_highlight.scss rename to _assets/styles/_highlight.scss diff --git a/_sass/_home.scss b/_assets/styles/_home.scss old mode 100755 new mode 100644 similarity index 77% rename from _sass/_home.scss rename to _assets/styles/_home.scss index a0bf4f039..41860bb7b --- a/_sass/_home.scss +++ b/_assets/styles/_home.scss @@ -1,16 +1,30 @@ -@import "bootstrap/buttons"; -@import "bootstrap/code"; -@import "bootstrap/images"; -@import "masthead"; -@import "featurettes"; -@import "syntax"; -@import "highlight"; +@import 'bootstrap/buttons'; +@import 'bootstrap/code'; +@import 'bootstrap/images'; +@import 'masthead'; +@import 'featurettes'; +@import 'syntax'; +@import 'highlight'; -.social { +.features { list-style: none; - margin: 1.25rem 0 0 0; + + li { + padding-left: 1ch; + text-indent: -3ch; + } + + li::before { + padding-right: 1ch; + content: '❖'; + } +} + +.social { padding: 0; + margin: 1.25rem 0 0; text-align: center; + list-style: none; li { display: inline; @@ -25,15 +39,15 @@ path, circle { - transition: fill .25s ease-in-out; fill: $body-color; + transition: fill 0.25s ease-in-out; } } a:focus, a:hover { - cursor: pointer; text-decoration: none; + cursor: pointer; svg { width: 24px; @@ -48,22 +62,9 @@ } } -.features { - list-style: none; - - li { - padding-left: 1ch; - text-indent: -3ch; - } - li::before { - padding-right: 1ch; - content: "❖"; - } -} - .home { .content { - padding: 1.5rem 0 1.5rem; + padding: 1.5rem 0; } span { @@ -84,8 +85,8 @@ // } .firstcharacter { - font-size: 4rem; - } + font-size: 4rem; + } } // .nowrap { @@ -102,14 +103,14 @@ width: 100%; height: 0; padding-bottom: 60%; // acts as fluid height - margin-bottom: .5rem; + margin-bottom: 0.5rem; overflow: hidden; @include media-breakpoint-up(sm) { - padding-bottom: 50% + padding-bottom: 50%; } -@include media-breakpoint-up(md) { + @include media-breakpoint-up(md) { padding-bottom: 40%; } @@ -119,10 +120,10 @@ } .home-banner-img { - position:absolute; + position: absolute; width: 100%; height: 100%; + background-repeat: no-repeat; background-position: center center; background-size: auto; - background-repeat: no-repeat; } diff --git a/_sass/_image-with-caption.scss b/_assets/styles/_image-with-caption.scss old mode 100755 new mode 100644 similarity index 100% rename from _sass/_image-with-caption.scss rename to _assets/styles/_image-with-caption.scss diff --git a/_sass/_image-with-heading.scss b/_assets/styles/_image-with-heading.scss old mode 100755 new mode 100644 similarity index 86% rename from _sass/_image-with-heading.scss rename to _assets/styles/_image-with-heading.scss index 75e031465..138e80ef1 --- a/_sass/_image-with-heading.scss +++ b/_assets/styles/_image-with-heading.scss @@ -1,7 +1,7 @@ .image-with-heading { - margin: 0; - padding: .5rem 0; position: relative; + padding: 0.5rem 0; + margin: 0; amp-img { margin-bottom: 0; diff --git a/_assets/styles/_jekyll-theme-reflection.scss b/_assets/styles/_jekyll-theme-reflection.scss new file mode 100644 index 000000000..29823b7f2 --- /dev/null +++ b/_assets/styles/_jekyll-theme-reflection.scss @@ -0,0 +1,74 @@ +// +// Reflection Theme +// + +@import 'bourbon/bourbon'; + +// Functions +@import 'functions'; + +// Core variables and mixins +// @import 'custom'; +@import 'bootstrap/variables'; +@import 'bootstrap/mixins'; + +// Reset and dependencies +// @import 'bootstrap/normalize'; + +// Core CSS +@import 'bootstrap/reboot'; +@import 'bootstrap/type'; +// @import 'bootstrap/grid'; + +// Components +// @import 'header'; +// @import 'search'; +// @import 'nav'; +// @import 'outro'; +// @import 'footer'; + +// Utility classes +// @import 'bootstrap/utilities'; + +// body { +// padding-top: 60px; +// } + +// h2 { +// font-weight: 300; +// text-transform: uppercase; +// } + +// .page-heading { +// margin-bottom: 24px; +// } + +// .subtitle { +// margin-bottom: $headings-margin-bottom; +// font-size: $font-size-h5; +// } + +// .content { +// padding: 2rem 0; +// background-color: $brand-foreground; +// } + +// .firstcharacter { +// float: left; +// padding-top: 4px; +// padding-right: 8px; +// padding-left: 3px; +// font-size: 5.4rem; +// line-height: 0.75; +// color: $brand-primary; +// } + +// .dropcapped { +// text-indent: 0; +// } + +// ol, +// ul, +// dl { +// padding-left: 2ch; +// } diff --git a/_sass/_lightbox.scss b/_assets/styles/_lightbox.scss old mode 100755 new mode 100644 similarity index 77% rename from _sass/_lightbox.scss rename to _assets/styles/_lightbox.scss index 2f3dd83a3..904182a0c --- a/_sass/_lightbox.scss +++ b/_assets/styles/_lightbox.scss @@ -3,30 +3,28 @@ */ .lightbox { - background: rgba(255,255,255,0.8); + position: relative; width: 100%; height: 100%; - position: relative; + background: rgb(255 255 255 / 80%); amp-img { - margin: auto; position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; + inset: 0; width: 100%; height: auto; padding: 20px; + margin: auto; } } +/* stylelint-disable-next-line selector-class-pattern */ .-amp-image-lightbox-viewer::after { - display: block; - background-color: #000; - width: 24px; - height: 24px; position: absolute; top: 0; right: 0; + display: block; + width: 24px; + height: 24px; + background-color: #000; } diff --git a/_sass/_masthead.scss b/_assets/styles/_masthead.scss old mode 100755 new mode 100644 similarity index 100% rename from _sass/_masthead.scss rename to _assets/styles/_masthead.scss index c85b15e2c..8075b0ea4 --- a/_sass/_masthead.scss +++ b/_assets/styles/_masthead.scss @@ -6,11 +6,11 @@ text-align: center; .lead { + display: block; margin-right: auto; margin-bottom: 3rem; margin-left: auto; font-size: 1.25rem; - display: block; } .version { diff --git a/_sass/_nav.scss b/_assets/styles/_nav.scss old mode 100755 new mode 100644 similarity index 92% rename from _sass/_nav.scss rename to _assets/styles/_nav.scss index 65eee4ae7..1b7dea7d4 --- a/_sass/_nav.scss +++ b/_assets/styles/_nav.scss @@ -13,6 +13,15 @@ amp-sidebar nav { background: $brand-foreground; border-right: 0; + a, + span { + display: block; + padding: 0.375rem 0.75rem; + font-size: $font-size-base; + color: $gray-dark; + letter-spacing: 0.04em; + } + ul { padding-right: 0; padding-left: 0; @@ -29,6 +38,12 @@ amp-sidebar nav { margin: 0; list-style: none; + a { + padding: 0 1rem; + font-size: 1.2rem; + line-height: 3.75rem; + } + &.is-active { background: shade($brand-secondary, 1%); @@ -37,22 +52,8 @@ amp-sidebar nav { border-left: 3px solid; } } - - a { - padding: 0 1rem; - font-size: 1.2rem; - line-height: 3.75rem; - } } } } } - - a, span { - display: block; - padding: .375rem .75rem; - font-size: $font-size-base; - color: $gray-dark; - letter-spacing: .04em; - } } diff --git a/_assets/styles/_outro.scss b/_assets/styles/_outro.scss new file mode 100644 index 000000000..89fa03702 --- /dev/null +++ b/_assets/styles/_outro.scss @@ -0,0 +1,7 @@ +.outro { + height: 126px; + padding: 0; + background-image: url('/assets/img/jekyll-theme-reflection/prism_outro.svg'); + background-size: 10px 126px; + background-repeat: repeat-x; +} diff --git a/_sass/_page.scss b/_assets/styles/_page.scss old mode 100755 new mode 100644 similarity index 100% rename from _sass/_page.scss rename to _assets/styles/_page.scss diff --git a/_sass/_post-carousel.scss b/_assets/styles/_post-carousel.scss old mode 100755 new mode 100644 similarity index 80% rename from _sass/_post-carousel.scss rename to _assets/styles/_post-carousel.scss index 13cb8fdd1..1c636b2d2 --- a/_sass/_post-carousel.scss +++ b/_assets/styles/_post-carousel.scss @@ -10,10 +10,10 @@ amp-carousel amp-img > img { } .post-carousel-heading { - color: #fff; - background: linear-gradient(0deg,rgba(0,0,0,.65) 0,transparent); padding: 1rem; line-height: 1.5; + color: #fff; + background: linear-gradient(0deg, rgb(0 0 0 / 65%) 0, transparent); } .post-carousel-subtitle { diff --git a/_sass/_post.scss b/_assets/styles/_post.scss old mode 100755 new mode 100644 similarity index 56% rename from _sass/_post.scss rename to _assets/styles/_post.scss index aa54eb31b..dfb30a476 --- a/_sass/_post.scss +++ b/_assets/styles/_post.scss @@ -1,12 +1,12 @@ -@import "byline"; -@import "social-box"; -@import "fullpage-hero"; -@import "post-carousel"; -@import "image-with-heading"; -@import "image-with-caption"; -@import "bootstrap/images"; -@import "bootstrap/utilities/text"; -@import "bootstrap/utilities/spacing"; +@import 'byline'; +@import 'social-box'; +@import 'fullpage-hero'; +@import 'post-carousel'; +@import 'image-with-heading'; +@import 'image-with-caption'; +@import 'bootstrap/images'; +@import 'bootstrap/utilities/text'; +@import 'bootstrap/utilities/spacing'; p { text-align: justify; @@ -17,31 +17,31 @@ p { font-size: $font-size-base; } -.blockquote-reverse>p { +.blockquote-reverse > p { text-align: right; } .category { display: inline-block; - padding: .5em .65em; + padding: 0.5em 0.65em; margin-bottom: 1rem; border: $border-width solid $brand-secondary; border-radius: $border-radius; } .article-header-wrapper { - width:100%; - height:0; - padding-bottom: 30%; /*acts as fluid height*/ - overflow:hidden; - position:relative; + position: relative; + width: 100%; + height: 0; + padding-bottom: 30%; /* acts as fluid height */ margin-bottom: 24px; + overflow: hidden; } .article-header-img { - position:absolute; - width:100%; - height:100%; + position: absolute; + width: 100%; + height: 100%; background-position: center center; background-size: 100% auto; border-radius: 4px; @@ -57,8 +57,8 @@ amp-img { } .fin { - text-transform: uppercase; display: block; - font-weight: bold; font-size: 2em; + font-weight: bold; + text-transform: uppercase; } diff --git a/_sass/_search.scss b/_assets/styles/_search.scss old mode 100755 new mode 100644 similarity index 68% rename from _sass/_search.scss rename to _assets/styles/_search.scss index 2c29cb5d9..0cef060de --- a/_sass/_search.scss +++ b/_assets/styles/_search.scss @@ -4,6 +4,33 @@ margin-left: 7px; background-color: transparent; + .search-submit { + position: absolute; + top: 4px; + right: 8px; + display: inline-block; + width: 24px; + height: 24px; + padding: 0; + margin: 0; + font-style: normal; + vertical-align: baseline; + appearance: none; + background-color: transparent; + background-image: linear-gradient(transparent, transparent), + url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23dae0e7%22%3E%0A%20%20%3Cpath%20d%3D%22M15.5%2014h-.8l-.27-.27C15.4%2012.6%2016%2011.1%2016%209.5%2016%205.9%2013.1%203%209.5%203S3%205.9%203%209.5%205.9%2016%209.5%2016c1.6%200%203.1-.6%204.23-1.57l.27.28v.8l5%205%201.5-1.5-5-5zm-6%200C7%2014%205%2012%205%209.5S7%205%209.5%205%2014%207%2014%209.5%2012%2014%209.5%2014z%22%2F%3E%0A%3C%2Fsvg%3E%0A'); + border: 0; + + &:hover { + cursor: pointer; + } + + &:active { + border: 0; + outline: none; + } + } + .form-search { float: left; width: 220px; @@ -38,7 +65,7 @@ background-color: transparent; border: $border-width solid $brand-secondary; border-radius: 18px; - transition: all .2s ease-in-out; + transition: all 0.2s ease-in-out; &:focus, &:active { @@ -51,30 +78,4 @@ width: 96px; } } - - .search-submit { - position: absolute; - top: 4px; - right: 8px; - display: inline-block; - width: 24px; - height: 24px; - padding: 0; - margin: 0; - font-style: normal; - vertical-align: baseline; - background-color: transparent; - background-image: linear-gradient(transparent,transparent),url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23dae0e7%22%3E%0A%20%20%3Cpath%20d%3D%22M15.5%2014h-.8l-.27-.27C15.4%2012.6%2016%2011.1%2016%209.5%2016%205.9%2013.1%203%209.5%203S3%205.9%203%209.5%205.9%2016%209.5%2016c1.6%200%203.1-.6%204.23-1.57l.27.28v.8l5%205%201.5-1.5-5-5zm-6%200C7%2014%205%2012%205%209.5S7%205%209.5%205%2014%207%2014%209.5%2012%2014%209.5%2014z%22%2F%3E%0A%3C%2Fsvg%3E%0A); - border: 0; - -webkit-appearance: none; - - &:hover { - cursor: pointer; - } - - &:active { - border: 0; - outline: none; - } - } } diff --git a/_sass/_session.scss b/_assets/styles/_session.scss old mode 100755 new mode 100644 similarity index 100% rename from _sass/_session.scss rename to _assets/styles/_session.scss diff --git a/_sass/_social-box.scss b/_assets/styles/_social-box.scss old mode 100755 new mode 100644 similarity index 91% rename from _sass/_social-box.scss rename to _assets/styles/_social-box.scss index e38aa13b5..3b4a99c31 --- a/_sass/_social-box.scss +++ b/_assets/styles/_social-box.scss @@ -1,7 +1,7 @@ .social-box { display: inline-block; - padding: .5rem .65rem; - margin: .5rem 0 1.5rem 0; + padding: 0.5rem 0.65rem; + margin: 0.5rem 0 1.5rem; line-height: 0; border: $border-width solid $brand-secondary; border-radius: $border-radius; @@ -10,27 +10,27 @@ margin-right: 1em; } - amp-social-share[type="twitter"] { + amp-social-share[type='twitter'] { background: transparent; background-image: url('data:image/svg+xml;utf8,'); } - amp-social-share[type="facebook"] { + amp-social-share[type='facebook'] { background: transparent; background-image: url('data:image/svg+xml;utf8,'); } - amp-social-share[type="pinterest"] { + amp-social-share[type='pinterest'] { background: transparent; background-image: url('data:image/svg+xml;utf8,'); } - amp-social-share[type="gplus"] { + amp-social-share[type='gplus'] { background: transparent; background-image: url('data:image/svg+xml;utf8,'); } - amp-social-share[type="email"] { + amp-social-share[type='email'] { background: transparent; background-image: url('data:image/svg+xml;utf8,'); } diff --git a/_assets/styles/_syntax.scss b/_assets/styles/_syntax.scss new file mode 100644 index 000000000..d95405b60 --- /dev/null +++ b/_assets/styles/_syntax.scss @@ -0,0 +1,18 @@ +.highlight { + .ss { + color: #63a35c; + } + + .s2 { + color: #183691; + } + + .n, + .o { + color: #183691; + } + + .c1 { + color: #969896; + } +} diff --git a/_assets/styles/_variables-dark.scss b/_assets/styles/_variables-dark.scss new file mode 100644 index 000000000..18c93c1dc --- /dev/null +++ b/_assets/styles/_variables-dark.scss @@ -0,0 +1,91 @@ +// Dark color mode variables +// +// Custom variables for the `[data-bs-theme="dark"]` theme. Use this as a starting point for your own custom color modes by creating a new theme-specific file like `_variables-dark.scss` and adding the variables you need. + +// +// Global colors +// + +// scss-docs-start sass-dark-mode-vars +// scss-docs-start theme-text-dark-variables +$primary-text-emphasis-dark: tint-color($primary, 40%) !default; +$secondary-text-emphasis-dark: tint-color($secondary, 40%) !default; +$success-text-emphasis-dark: tint-color($success, 40%) !default; +$info-text-emphasis-dark: tint-color($info, 40%) !default; +$warning-text-emphasis-dark: tint-color($warning, 40%) !default; +$danger-text-emphasis-dark: tint-color($danger, 40%) !default; +$light-text-emphasis-dark: $gray-100 !default; +$dark-text-emphasis-dark: $gray-300 !default; + +// scss-docs-end theme-text-dark-variables + +// scss-docs-start theme-bg-subtle-dark-variables +$primary-bg-subtle-dark: shade-color($primary, 80%) !default; +$secondary-bg-subtle-dark: shade-color($secondary, 80%) !default; +$success-bg-subtle-dark: shade-color($success, 80%) !default; +$info-bg-subtle-dark: shade-color($info, 80%) !default; +$warning-bg-subtle-dark: shade-color($warning, 80%) !default; +$danger-bg-subtle-dark: shade-color($danger, 80%) !default; +$light-bg-subtle-dark: $gray-800 !default; +$dark-bg-subtle-dark: mix($gray-800, $black) !default; + +// scss-docs-end theme-bg-subtle-dark-variables + +// scss-docs-start theme-border-subtle-dark-variables +$primary-border-subtle-dark: shade-color($primary, 40%) !default; +$secondary-border-subtle-dark: shade-color($secondary, 40%) !default; +$success-border-subtle-dark: shade-color($success, 40%) !default; +$info-border-subtle-dark: shade-color($info, 40%) !default; +$warning-border-subtle-dark: shade-color($warning, 40%) !default; +$danger-border-subtle-dark: shade-color($danger, 40%) !default; +$light-border-subtle-dark: $gray-700 !default; +$dark-border-subtle-dark: $gray-800 !default; + +// scss-docs-end theme-border-subtle-dark-variables + +$body-color-dark: $gray-300 !default; +$body-bg-dark: $gray-900 !default; +$body-secondary-color-dark: rgba($body-color-dark, 0.75) !default; +$body-secondary-bg-dark: $gray-800 !default; +$body-tertiary-color-dark: rgba($body-color-dark, 0.5) !default; +$body-tertiary-bg-dark: mix($gray-800, $gray-900, 50%) !default; +$body-emphasis-color-dark: $white !default; +$border-color-dark: $gray-700 !default; +$border-color-translucent-dark: rgba($white, 0.15) !default; +$headings-color-dark: inherit !default; +$link-color-dark: tint-color($primary, 40%) !default; +$link-hover-color-dark: shift-color( + $link-color-dark, + -$link-shade-percentage +) !default; +$code-color-dark: tint-color($code-color, 40%) !default; +$mark-color-dark: $body-color-dark !default; +$mark-bg-dark: $yellow-800 !default; + +// +// Forms +// + +$form-select-indicator-color-dark: $body-color-dark !default; +$form-select-indicator-dark: url("data:image/svg+xml,") !default; +$form-switch-color-dark: rgba($white, 0.25) !default; +$form-switch-bg-image-dark: url("data:image/svg+xml,") !default; + +// scss-docs-start form-validation-colors-dark +$form-valid-color-dark: $green-300 !default; +$form-valid-border-color-dark: $green-300 !default; +$form-invalid-color-dark: $red-300 !default; +$form-invalid-border-color-dark: $red-300 !default; + +// scss-docs-end form-validation-colors-dark + +// +// Accordion +// + +$accordion-icon-color-dark: $primary-text-emphasis-dark !default; +$accordion-icon-active-color-dark: $primary-text-emphasis-dark !default; +$accordion-button-icon-dark: url("data:image/svg+xml,") !default; +$accordion-button-active-icon-dark: url("data:image/svg+xml,") !default; + +// scss-docs-end sass-dark-mode-vars diff --git a/_assets/styles/_variables.scss b/_assets/styles/_variables.scss new file mode 100644 index 000000000..b16f50a67 --- /dev/null +++ b/_assets/styles/_variables.scss @@ -0,0 +1,1771 @@ +// Variables +// +// Variables should follow the `$component-state-property-size` formula for +// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs. + +// Color system + +// scss-docs-start gray-color-variables +$white: #fff !default; +$gray-100: #f8f9fa !default; +$gray-200: #e9ecef !default; +$gray-300: #dee2e6 !default; +$gray-400: #ced4da !default; +$gray-500: #adb5bd !default; +$gray-600: #6c757d !default; +$gray-700: #495057 !default; +$gray-800: #343a40 !default; +$gray-900: #212529 !default; +$black: #000 !default; + +// scss-docs-end gray-color-variables + +// fusv-disable +// scss-docs-start gray-colors-map +$grays: ( + '100': $gray-100, + '200': $gray-200, + '300': $gray-300, + '400': $gray-400, + '500': $gray-500, + '600': $gray-600, + '700': $gray-700, + '800': $gray-800, + '900': $gray-900, +) !default; + +// scss-docs-end gray-colors-map +// fusv-enable + +// scss-docs-start color-variables +$blue: #0d6efd !default; +$indigo: #6610f2 !default; +$purple: #6f42c1 !default; +$pink: #d63384 !default; +$red: #dc3545 !default; +$orange: #fd7e14 !default; +$yellow: #ffc107 !default; +$green: #198754 !default; +$teal: #20c997 !default; +$cyan: #0dcaf0 !default; + +// scss-docs-end color-variables + +// scss-docs-start colors-map +$colors: ( + 'blue': $blue, + 'indigo': $indigo, + 'purple': $purple, + 'pink': $pink, + 'red': $red, + 'orange': $orange, + 'yellow': $yellow, + 'green': $green, + 'teal': $teal, + 'cyan': $cyan, + 'black': $black, + 'white': $white, + 'gray': $gray-600, + 'gray-dark': $gray-800, +) !default; + +// scss-docs-end colors-map + +// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7. +// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast +$min-contrast-ratio: 4.5 !default; + +// Customize the light and dark text colors for use in our color contrast function. +$color-contrast-dark: $black !default; +$color-contrast-light: $white !default; + +// fusv-disable +$blue-100: tint-color($blue, 80%) !default; +$blue-200: tint-color($blue, 60%) !default; +$blue-300: tint-color($blue, 40%) !default; +$blue-400: tint-color($blue, 20%) !default; +$blue-500: $blue !default; +$blue-600: shade-color($blue, 20%) !default; +$blue-700: shade-color($blue, 40%) !default; +$blue-800: shade-color($blue, 60%) !default; +$blue-900: shade-color($blue, 80%) !default; +$indigo-100: tint-color($indigo, 80%) !default; +$indigo-200: tint-color($indigo, 60%) !default; +$indigo-300: tint-color($indigo, 40%) !default; +$indigo-400: tint-color($indigo, 20%) !default; +$indigo-500: $indigo !default; +$indigo-600: shade-color($indigo, 20%) !default; +$indigo-700: shade-color($indigo, 40%) !default; +$indigo-800: shade-color($indigo, 60%) !default; +$indigo-900: shade-color($indigo, 80%) !default; +$purple-100: tint-color($purple, 80%) !default; +$purple-200: tint-color($purple, 60%) !default; +$purple-300: tint-color($purple, 40%) !default; +$purple-400: tint-color($purple, 20%) !default; +$purple-500: $purple !default; +$purple-600: shade-color($purple, 20%) !default; +$purple-700: shade-color($purple, 40%) !default; +$purple-800: shade-color($purple, 60%) !default; +$purple-900: shade-color($purple, 80%) !default; +$pink-100: tint-color($pink, 80%) !default; +$pink-200: tint-color($pink, 60%) !default; +$pink-300: tint-color($pink, 40%) !default; +$pink-400: tint-color($pink, 20%) !default; +$pink-500: $pink !default; +$pink-600: shade-color($pink, 20%) !default; +$pink-700: shade-color($pink, 40%) !default; +$pink-800: shade-color($pink, 60%) !default; +$pink-900: shade-color($pink, 80%) !default; +$red-100: tint-color($red, 80%) !default; +$red-200: tint-color($red, 60%) !default; +$red-300: tint-color($red, 40%) !default; +$red-400: tint-color($red, 20%) !default; +$red-500: $red !default; +$red-600: shade-color($red, 20%) !default; +$red-700: shade-color($red, 40%) !default; +$red-800: shade-color($red, 60%) !default; +$red-900: shade-color($red, 80%) !default; +$orange-100: tint-color($orange, 80%) !default; +$orange-200: tint-color($orange, 60%) !default; +$orange-300: tint-color($orange, 40%) !default; +$orange-400: tint-color($orange, 20%) !default; +$orange-500: $orange !default; +$orange-600: shade-color($orange, 20%) !default; +$orange-700: shade-color($orange, 40%) !default; +$orange-800: shade-color($orange, 60%) !default; +$orange-900: shade-color($orange, 80%) !default; +$yellow-100: tint-color($yellow, 80%) !default; +$yellow-200: tint-color($yellow, 60%) !default; +$yellow-300: tint-color($yellow, 40%) !default; +$yellow-400: tint-color($yellow, 20%) !default; +$yellow-500: $yellow !default; +$yellow-600: shade-color($yellow, 20%) !default; +$yellow-700: shade-color($yellow, 40%) !default; +$yellow-800: shade-color($yellow, 60%) !default; +$yellow-900: shade-color($yellow, 80%) !default; +$green-100: tint-color($green, 80%) !default; +$green-200: tint-color($green, 60%) !default; +$green-300: tint-color($green, 40%) !default; +$green-400: tint-color($green, 20%) !default; +$green-500: $green !default; +$green-600: shade-color($green, 20%) !default; +$green-700: shade-color($green, 40%) !default; +$green-800: shade-color($green, 60%) !default; +$green-900: shade-color($green, 80%) !default; +$teal-100: tint-color($teal, 80%) !default; +$teal-200: tint-color($teal, 60%) !default; +$teal-300: tint-color($teal, 40%) !default; +$teal-400: tint-color($teal, 20%) !default; +$teal-500: $teal !default; +$teal-600: shade-color($teal, 20%) !default; +$teal-700: shade-color($teal, 40%) !default; +$teal-800: shade-color($teal, 60%) !default; +$teal-900: shade-color($teal, 80%) !default; +$cyan-100: tint-color($cyan, 80%) !default; +$cyan-200: tint-color($cyan, 60%) !default; +$cyan-300: tint-color($cyan, 40%) !default; +$cyan-400: tint-color($cyan, 20%) !default; +$cyan-500: $cyan !default; +$cyan-600: shade-color($cyan, 20%) !default; +$cyan-700: shade-color($cyan, 40%) !default; +$cyan-800: shade-color($cyan, 60%) !default; +$cyan-900: shade-color($cyan, 80%) !default; +$blues: ( + 'blue-100': $blue-100, + 'blue-200': $blue-200, + 'blue-300': $blue-300, + 'blue-400': $blue-400, + 'blue-500': $blue-500, + 'blue-600': $blue-600, + 'blue-700': $blue-700, + 'blue-800': $blue-800, + 'blue-900': $blue-900, +) !default; +$indigos: ( + 'indigo-100': $indigo-100, + 'indigo-200': $indigo-200, + 'indigo-300': $indigo-300, + 'indigo-400': $indigo-400, + 'indigo-500': $indigo-500, + 'indigo-600': $indigo-600, + 'indigo-700': $indigo-700, + 'indigo-800': $indigo-800, + 'indigo-900': $indigo-900, +) !default; +$purples: ( + 'purple-100': $purple-100, + 'purple-200': $purple-200, + 'purple-300': $purple-300, + 'purple-400': $purple-400, + 'purple-500': $purple-500, + 'purple-600': $purple-600, + 'purple-700': $purple-700, + 'purple-800': $purple-800, + 'purple-900': $purple-900, +) !default; +$pinks: ( + 'pink-100': $pink-100, + 'pink-200': $pink-200, + 'pink-300': $pink-300, + 'pink-400': $pink-400, + 'pink-500': $pink-500, + 'pink-600': $pink-600, + 'pink-700': $pink-700, + 'pink-800': $pink-800, + 'pink-900': $pink-900, +) !default; +$reds: ( + 'red-100': $red-100, + 'red-200': $red-200, + 'red-300': $red-300, + 'red-400': $red-400, + 'red-500': $red-500, + 'red-600': $red-600, + 'red-700': $red-700, + 'red-800': $red-800, + 'red-900': $red-900, +) !default; +$oranges: ( + 'orange-100': $orange-100, + 'orange-200': $orange-200, + 'orange-300': $orange-300, + 'orange-400': $orange-400, + 'orange-500': $orange-500, + 'orange-600': $orange-600, + 'orange-700': $orange-700, + 'orange-800': $orange-800, + 'orange-900': $orange-900, +) !default; +$yellows: ( + 'yellow-100': $yellow-100, + 'yellow-200': $yellow-200, + 'yellow-300': $yellow-300, + 'yellow-400': $yellow-400, + 'yellow-500': $yellow-500, + 'yellow-600': $yellow-600, + 'yellow-700': $yellow-700, + 'yellow-800': $yellow-800, + 'yellow-900': $yellow-900, +) !default; +$greens: ( + 'green-100': $green-100, + 'green-200': $green-200, + 'green-300': $green-300, + 'green-400': $green-400, + 'green-500': $green-500, + 'green-600': $green-600, + 'green-700': $green-700, + 'green-800': $green-800, + 'green-900': $green-900, +) !default; +$teals: ( + 'teal-100': $teal-100, + 'teal-200': $teal-200, + 'teal-300': $teal-300, + 'teal-400': $teal-400, + 'teal-500': $teal-500, + 'teal-600': $teal-600, + 'teal-700': $teal-700, + 'teal-800': $teal-800, + 'teal-900': $teal-900, +) !default; +$cyans: ( + 'cyan-100': $cyan-100, + 'cyan-200': $cyan-200, + 'cyan-300': $cyan-300, + 'cyan-400': $cyan-400, + 'cyan-500': $cyan-500, + 'cyan-600': $cyan-600, + 'cyan-700': $cyan-700, + 'cyan-800': $cyan-800, + 'cyan-900': $cyan-900, +) !default; + +// fusv-enable + +// scss-docs-start theme-color-variables +$primary: $blue !default; +$secondary: $gray-600 !default; +$success: $green !default; +$info: $cyan !default; +$warning: $yellow !default; +$danger: $red !default; +$light: $gray-100 !default; +$dark: $gray-900 !default; + +// scss-docs-end theme-color-variables + +// scss-docs-start theme-colors-map +$theme-colors: ( + 'primary': $primary, + 'secondary': $secondary, + 'success': $success, + 'info': $info, + 'warning': $warning, + 'danger': $danger, + 'light': $light, + 'dark': $dark, +) !default; + +// scss-docs-end theme-colors-map + +// scss-docs-start theme-text-variables +$primary-text-emphasis: shade-color($primary, 60%) !default; +$secondary-text-emphasis: shade-color($secondary, 60%) !default; +$success-text-emphasis: shade-color($success, 60%) !default; +$info-text-emphasis: shade-color($info, 60%) !default; +$warning-text-emphasis: shade-color($warning, 60%) !default; +$danger-text-emphasis: shade-color($danger, 60%) !default; +$light-text-emphasis: $gray-700 !default; +$dark-text-emphasis: $gray-700 !default; + +// scss-docs-end theme-text-variables + +// scss-docs-start theme-bg-subtle-variables +$primary-bg-subtle: tint-color($primary, 80%) !default; +$secondary-bg-subtle: tint-color($secondary, 80%) !default; +$success-bg-subtle: tint-color($success, 80%) !default; +$info-bg-subtle: tint-color($info, 80%) !default; +$warning-bg-subtle: tint-color($warning, 80%) !default; +$danger-bg-subtle: tint-color($danger, 80%) !default; +$light-bg-subtle: mix($gray-100, $white) !default; +$dark-bg-subtle: $gray-400 !default; + +// scss-docs-end theme-bg-subtle-variables + +// scss-docs-start theme-border-subtle-variables +$primary-border-subtle: tint-color($primary, 60%) !default; +$secondary-border-subtle: tint-color($secondary, 60%) !default; +$success-border-subtle: tint-color($success, 60%) !default; +$info-border-subtle: tint-color($info, 60%) !default; +$warning-border-subtle: tint-color($warning, 60%) !default; +$danger-border-subtle: tint-color($danger, 60%) !default; +$light-border-subtle: $gray-200 !default; +$dark-border-subtle: $gray-500 !default; + +// scss-docs-end theme-border-subtle-variables + +// Characters which are escaped by the escape-svg function +$escaped-characters: ( + ('<', '%3c'), + ('>', '%3e'), + ('#', '%23'), + ('(', '%28'), + (')', '%29') +) !default; + +// Options +// +// Quickly modify global styling by enabling or disabling optional features. + +$enable-caret: true !default; +$enable-rounded: true !default; +$enable-shadows: false !default; +$enable-gradients: false !default; +$enable-transitions: true !default; +$enable-reduced-motion: true !default; +$enable-smooth-scroll: true !default; +$enable-grid-classes: true !default; +$enable-container-classes: true !default; +$enable-cssgrid: false !default; +$enable-button-pointers: true !default; +$enable-rfs: true !default; +$enable-validation-icons: true !default; +$enable-negative-margins: false !default; +$enable-deprecation-messages: true !default; +$enable-important-utilities: true !default; +$enable-dark-mode: true !default; +$color-mode-type: data !default; // `data` or `media-query` + +// Prefix for :root CSS variables + +$variable-prefix: bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix` +$prefix: $variable-prefix !default; + +// Gradient +// +// The gradient which is added to components if `$enable-gradients` is `true` +// This gradient is also added to elements with `.bg-gradient` +// scss-docs-start variable-gradient +$gradient: linear-gradient( + 180deg, + rgba($white, 0.15), + rgba($white, 0) +) !default; + +// scss-docs-end variable-gradient + +// Spacing +// +// Control the default styling of most Bootstrap elements by modifying these +// variables. Mostly focused on spacing. +// You can add more entries to the $spacers map, should you need more variation. + +// scss-docs-start spacer-variables-maps +$spacer: 1rem !default; +$spacers: ( + 0: 0, + 1: $spacer * 0.25, + 2: $spacer * 0.5, + 3: $spacer, + 4: $spacer * 1.5, + 5: $spacer * 3, +) !default; + +// scss-docs-end spacer-variables-maps + +// Position +// +// Define the edge positioning anchors of the position utilities. + +// scss-docs-start position-map +$position-values: ( + 0: 0, + 50: 50%, + 100: 100%, +) !default; + +// scss-docs-end position-map + +// Body +// +// Settings for the `` element. + +$body-text-align: null !default; +$body-color: $gray-900 !default; +$body-bg: $white !default; +$body-secondary-color: rgba($body-color, 0.75) !default; +$body-secondary-bg: $gray-200 !default; +$body-tertiary-color: rgba($body-color, 0.5) !default; +$body-tertiary-bg: $gray-100 !default; +$body-emphasis-color: $black !default; + +// Links +// +// Style anchor elements. + +$link-color: $primary !default; +$link-decoration: underline !default; +$link-shade-percentage: 20% !default; +$link-hover-color: shift-color($link-color, $link-shade-percentage) !default; +$link-hover-decoration: null !default; +$stretched-link-pseudo-element: after !default; +$stretched-link-z-index: 1 !default; + +// Icon links +// scss-docs-start icon-link-variables +$icon-link-gap: 0.375rem !default; +$icon-link-underline-offset: 0.25em !default; +$icon-link-icon-size: 1em !default; +$icon-link-icon-transition: 0.2s ease-in-out transform !default; +$icon-link-icon-transform: translate3d(0.25em, 0, 0) !default; + +// scss-docs-end icon-link-variables + +// Paragraphs +// +// Style p element. + +$paragraph-margin-bottom: 1rem !default; + +// Grid breakpoints +// +// Define the minimum dimensions at which your layout will change, +// adapting to different screen sizes, for use in media queries. + +// scss-docs-start grid-breakpoints +$grid-breakpoints: ( + xs: 0, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1200px, + xxl: 1400px, +) !default; + +// scss-docs-end grid-breakpoints + +// @include _assert-ascending($grid-breakpoints, '$grid-breakpoints'); +// @include _assert-starts-at-zero($grid-breakpoints, '$grid-breakpoints'); + +// Grid containers +// +// Define the maximum width of `.container` for different screen sizes. + +// scss-docs-start container-max-widths +$container-max-widths: ( + sm: 540px, + md: 720px, + lg: 960px, + xl: 1140px, + xxl: 1320px, +) !default; + +// scss-docs-end container-max-widths + +// @include _assert-ascending($container-max-widths, '$container-max-widths'); + +// Grid columns +// +// Set the number of columns and specify the width of the gutters. + +$grid-columns: 12 !default; +$grid-gutter-width: 1.5rem !default; +$grid-row-columns: 6 !default; + +// Container padding + +$container-padding-x: $grid-gutter-width !default; + +// Components +// +// Define common padding and border radius sizes and more. + +// scss-docs-start border-variables +$border-width: 1px !default; +$border-widths: ( + 1: 1px, + 2: 2px, + 3: 3px, + 4: 4px, + 5: 5px, +) !default; +$border-style: solid !default; +$border-color: $gray-300 !default; +$border-color-translucent: rgba($black, 0.175) !default; + +// scss-docs-end border-variables + +// scss-docs-start border-radius-variables +$border-radius: 0.375rem !default; +$border-radius-sm: 0.25rem !default; +$border-radius-lg: 0.5rem !default; +$border-radius-xl: 1rem !default; +$border-radius-xxl: 2rem !default; +$border-radius-pill: 50rem !default; + +// scss-docs-end border-radius-variables +// fusv-disable +$border-radius-2xl: $border-radius-xxl !default; // Deprecated in v5.3.0 +// fusv-enable + +// scss-docs-start box-shadow-variables +$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default; +$box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075) !default; +$box-shadow-lg: 0 1rem 3rem rgba($black, 0.175) !default; +$box-shadow-inset: inset 0 1px 2px rgba($black, 0.075) !default; + +// scss-docs-end box-shadow-variables + +$component-active-color: $white !default; +$component-active-bg: $primary !default; + +// scss-docs-start focus-ring-variables +$focus-ring-width: 0.25rem !default; +$focus-ring-opacity: 0.25 !default; +$focus-ring-color: rgba($primary, $focus-ring-opacity) !default; +$focus-ring-blur: 0 !default; +$focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color !default; + +// scss-docs-end focus-ring-variables + +// scss-docs-start caret-variables +$caret-width: 0.3em !default; +$caret-vertical-align: $caret-width * 0.85 !default; +$caret-spacing: $caret-width * 0.85 !default; + +// scss-docs-end caret-variables + +$transition-base: all 0.2s ease-in-out !default; +$transition-fade: opacity 0.15s linear !default; + +// scss-docs-start collapse-transition +$transition-collapse: height 0.35s ease !default; +$transition-collapse-width: width 0.35s ease !default; + +// scss-docs-end collapse-transition + +// stylelint-disable function-disallowed-list +// scss-docs-start aspect-ratios +$aspect-ratios: ( + '1x1': 100%, + '4x3': calc(3 / 4 * 100%), + '16x9': calc(9 / 16 * 100%), + '21x9': calc(9 / 21 * 100%), +) !default; + +// scss-docs-end aspect-ratios +// stylelint-enable function-disallowed-list + +// Typography +// +// Font, line-height, and color for body text, headings, and more. + +// scss-docs-start font-variables +// stylelint-disable value-keyword-case +$font-family-sans-serif: + system-ui, + -apple-system, + 'Segoe UI', + Roboto, + 'Helvetica Neue', + 'Noto Sans', + 'Liberation Sans', + Arial, + sans-serif, + 'Apple Color Emoji', + 'Segoe UI Emoji', + 'Segoe UI Symbol', + 'Noto Color Emoji' !default; +$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, + 'Liberation Mono', 'Courier New', monospace !default; +// stylelint-enable value-keyword-case +$font-family-base: var(--#{$prefix}font-sans-serif) !default; +$font-family-code: var(--#{$prefix}font-monospace) !default; + +// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins +// $font-size-base affects the font size of the body text +$font-size-root: null !default; +$font-size-base: 1rem !default; // Assumes the browser default, typically `16px` +$font-size-sm: $font-size-base * 0.875 !default; +$font-size-lg: $font-size-base * 1.25 !default; +$font-weight-lighter: lighter !default; +$font-weight-light: 300 !default; +$font-weight-normal: 400 !default; +$font-weight-medium: 500 !default; +$font-weight-semibold: 600 !default; +$font-weight-bold: 700 !default; +$font-weight-bolder: bolder !default; +$font-weight-base: $font-weight-normal !default; +$line-height-base: 1.5 !default; +$line-height-sm: 1.25 !default; +$line-height-lg: 2 !default; +$h1-font-size: $font-size-base * 2.5 !default; +$h2-font-size: $font-size-base * 2 !default; +$h3-font-size: $font-size-base * 1.75 !default; +$h4-font-size: $font-size-base * 1.5 !default; +$h5-font-size: $font-size-base * 1.25 !default; +$h6-font-size: $font-size-base !default; + +// scss-docs-end font-variables + +// scss-docs-start font-sizes +$font-sizes: ( + 1: $h1-font-size, + 2: $h2-font-size, + 3: $h3-font-size, + 4: $h4-font-size, + 5: $h5-font-size, + 6: $h6-font-size, +) !default; + +// scss-docs-end font-sizes + +// scss-docs-start headings-variables +$headings-margin-bottom: $spacer * 0.5 !default; +$headings-font-family: null !default; +$headings-font-style: null !default; +$headings-font-weight: 500 !default; +$headings-line-height: 1.2 !default; +$headings-color: inherit !default; + +// scss-docs-end headings-variables + +// scss-docs-start display-headings +$display-font-sizes: ( + 1: 5rem, + 2: 4.5rem, + 3: 4rem, + 4: 3.5rem, + 5: 3rem, + 6: 2.5rem, +) !default; +$display-font-family: null !default; +$display-font-style: null !default; +$display-font-weight: 300 !default; +$display-line-height: $headings-line-height !default; + +// scss-docs-end display-headings + +// scss-docs-start type-variables +$lead-font-size: $font-size-base * 1.25 !default; +$lead-font-weight: 300 !default; +$small-font-size: 0.875em !default; +$sub-sup-font-size: 0.75em !default; + +// fusv-disable +$text-muted: var(--#{$prefix}secondary-color) !default; // Deprecated in 5.3.0 +// fusv-enable + +$initialism-font-size: $small-font-size !default; +$blockquote-margin-y: $spacer !default; +$blockquote-font-size: $font-size-base * 1.25 !default; +$blockquote-footer-color: $gray-600 !default; +$blockquote-footer-font-size: $small-font-size !default; +$hr-margin-y: $spacer !default; +$hr-color: inherit !default; + +// fusv-disable +$hr-bg-color: null !default; // Deprecated in v5.2.0 +$hr-height: null !default; // Deprecated in v5.2.0 +// fusv-enable + +$hr-border-color: null !default; // Allows for inherited colors +$hr-border-width: var(--#{$prefix}border-width) !default; +$hr-opacity: 0.25 !default; + +// scss-docs-start vr-variables +$vr-border-width: var(--#{$prefix}border-width) !default; + +// scss-docs-end vr-variables + +$legend-margin-bottom: 0.5rem !default; +$legend-font-size: 1.5rem !default; +$legend-font-weight: null !default; +$dt-font-weight: $font-weight-bold !default; +$list-inline-padding: 0.5rem !default; +$mark-padding: 0.1875em !default; +$mark-color: $body-color !default; +$mark-bg: $yellow-100 !default; + +// scss-docs-end type-variables + +// Tables +// +// Customizes the `.table` component with basic values, each used across all table variations. + +// scss-docs-start table-variables +$table-cell-padding-y: 0.5rem !default; +$table-cell-padding-x: 0.5rem !default; +$table-cell-padding-y-sm: 0.25rem !default; +$table-cell-padding-x-sm: 0.25rem !default; +$table-cell-vertical-align: top !default; +$table-color: var(--#{$prefix}emphasis-color) !default; +$table-bg: var(--#{$prefix}body-bg) !default; +$table-accent-bg: transparent !default; +$table-th-font-weight: null !default; +$table-striped-color: $table-color !default; +$table-striped-bg-factor: 0.05 !default; +$table-striped-bg: rgb( + var(--#{$prefix}emphasis-color-rgb) $table-striped-bg-factor +) !default; +$table-active-color: $table-color !default; +$table-active-bg-factor: 0.1 !default; +$table-active-bg: rgb( + var(--#{$prefix}emphasis-color-rgb) $table-active-bg-factor +) !default; +$table-hover-color: $table-color !default; +$table-hover-bg-factor: 0.075 !default; +$table-hover-bg: rgb( + var(--#{$prefix}emphasis-color-rgb) $table-hover-bg-factor +) !default; +$table-border-factor: 0.2 !default; +$table-border-width: var(--#{$prefix}border-width) !default; +$table-border-color: var(--#{$prefix}border-color) !default; +$table-striped-order: odd !default; +$table-striped-columns-order: even !default; +$table-group-separator-color: currentcolor !default; +$table-caption-color: var(--#{$prefix}secondary-color) !default; +$table-bg-scale: -80% !default; + +// scss-docs-end table-variables + +// scss-docs-start table-loop +$table-variants: ( + 'primary': shift-color($primary, $table-bg-scale), + 'secondary': shift-color($secondary, $table-bg-scale), + 'success': shift-color($success, $table-bg-scale), + 'info': shift-color($info, $table-bg-scale), + 'warning': shift-color($warning, $table-bg-scale), + 'danger': shift-color($danger, $table-bg-scale), + 'light': $light, + 'dark': $dark, +) !default; + +// scss-docs-end table-loop + +// Buttons + Forms +// +// Shared variables that are reassigned to `$input-` and `$btn-` specific variables. + +// scss-docs-start input-btn-variables +$input-btn-padding-y: 0.375rem !default; +$input-btn-padding-x: 0.75rem !default; +$input-btn-font-family: null !default; +$input-btn-font-size: $font-size-base !default; +$input-btn-line-height: $line-height-base !default; +$input-btn-focus-width: $focus-ring-width !default; +$input-btn-focus-color-opacity: $focus-ring-opacity !default; +$input-btn-focus-color: $focus-ring-color !default; +$input-btn-focus-blur: $focus-ring-blur !default; +$input-btn-focus-box-shadow: $focus-ring-box-shadow !default; +$input-btn-padding-y-sm: 0.25rem !default; +$input-btn-padding-x-sm: 0.5rem !default; +$input-btn-font-size-sm: $font-size-sm !default; +$input-btn-padding-y-lg: 0.5rem !default; +$input-btn-padding-x-lg: 1rem !default; +$input-btn-font-size-lg: $font-size-lg !default; +$input-btn-border-width: var(--#{$prefix}border-width) !default; + +// scss-docs-end input-btn-variables + +// Buttons +// +// For each of Bootstrap's buttons, define text, background, and border color. + +// scss-docs-start btn-variables +$btn-color: var(--#{$prefix}body-color) !default; +$btn-padding-y: $input-btn-padding-y !default; +$btn-padding-x: $input-btn-padding-x !default; +$btn-font-family: $input-btn-font-family !default; +$btn-font-size: $input-btn-font-size !default; +$btn-line-height: $input-btn-line-height !default; +$btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping + +$btn-padding-y-sm: $input-btn-padding-y-sm !default; +$btn-padding-x-sm: $input-btn-padding-x-sm !default; +$btn-font-size-sm: $input-btn-font-size-sm !default; +$btn-padding-y-lg: $input-btn-padding-y-lg !default; +$btn-padding-x-lg: $input-btn-padding-x-lg !default; +$btn-font-size-lg: $input-btn-font-size-lg !default; +$btn-border-width: $input-btn-border-width !default; +$btn-font-weight: $font-weight-normal !default; +$btn-box-shadow: + inset 0 1px 0 rgba($white, 0.15), + 0 1px 1px rgba($black, 0.075) !default; +$btn-focus-width: $input-btn-focus-width !default; +$btn-focus-box-shadow: $input-btn-focus-box-shadow !default; +$btn-disabled-opacity: 0.65 !default; +$btn-active-box-shadow: inset 0 3px 5px rgba($black, 0.125) !default; +$btn-link-color: var(--#{$prefix}link-color) !default; +$btn-link-hover-color: var(--#{$prefix}link-hover-color) !default; +$btn-link-disabled-color: $gray-600 !default; +$btn-link-focus-shadow-rgb: to-rgb( + mix(/*color-contrast(*/ $link-color /*)*/, $link-color, 15%) +) !default; + +// Allows for customizing button radius independently from global border radius +$btn-border-radius: var(--#{$prefix}border-radius) !default; +$btn-border-radius-sm: var(--#{$prefix}border-radius-sm) !default; +$btn-border-radius-lg: var(--#{$prefix}border-radius-lg) !default; +$btn-transition: + color 0.15s ease-in-out, + background-color 0.15s ease-in-out, + border-color 0.15s ease-in-out, + box-shadow 0.15s ease-in-out !default; +$btn-hover-bg-shade-amount: 15% !default; +$btn-hover-bg-tint-amount: 15% !default; +$btn-hover-border-shade-amount: 20% !default; +$btn-hover-border-tint-amount: 10% !default; +$btn-active-bg-shade-amount: 20% !default; +$btn-active-bg-tint-amount: 20% !default; +$btn-active-border-shade-amount: 25% !default; +$btn-active-border-tint-amount: 10% !default; + +// scss-docs-end btn-variables + +// Forms + +// scss-docs-start form-text-variables +$form-text-margin-top: 0.25rem !default; +$form-text-font-size: $small-font-size !default; +$form-text-font-style: null !default; +$form-text-font-weight: null !default; +$form-text-color: var(--#{$prefix}secondary-color) !default; + +// scss-docs-end form-text-variables + +// scss-docs-start form-label-variables +$form-label-margin-bottom: 0.5rem !default; +$form-label-font-size: null !default; +$form-label-font-style: null !default; +$form-label-font-weight: null !default; +$form-label-color: null !default; + +// scss-docs-end form-label-variables + +// scss-docs-start form-input-variables +$input-padding-y: $input-btn-padding-y !default; +$input-padding-x: $input-btn-padding-x !default; +$input-font-family: $input-btn-font-family !default; +$input-font-size: $input-btn-font-size !default; +$input-font-weight: $font-weight-base !default; +$input-line-height: $input-btn-line-height !default; +$input-padding-y-sm: $input-btn-padding-y-sm !default; +$input-padding-x-sm: $input-btn-padding-x-sm !default; +$input-font-size-sm: $input-btn-font-size-sm !default; +$input-padding-y-lg: $input-btn-padding-y-lg !default; +$input-padding-x-lg: $input-btn-padding-x-lg !default; +$input-font-size-lg: $input-btn-font-size-lg !default; +$input-bg: var(--#{$prefix}body-bg) !default; +$input-disabled-color: null !default; +$input-disabled-bg: var(--#{$prefix}secondary-bg) !default; +$input-disabled-border-color: null !default; +$input-color: var(--#{$prefix}body-color) !default; +$input-border-color: var(--#{$prefix}border-color) !default; +$input-border-width: $input-btn-border-width !default; +$input-box-shadow: var(--#{$prefix}box-shadow-inset) !default; +$input-border-radius: var(--#{$prefix}border-radius) !default; +$input-border-radius-sm: var(--#{$prefix}border-radius-sm) !default; +$input-border-radius-lg: var(--#{$prefix}border-radius-lg) !default; +$input-focus-bg: $input-bg !default; +$input-focus-border-color: tint-color($component-active-bg, 50%) !default; +$input-focus-color: $input-color !default; +$input-focus-width: $input-btn-focus-width !default; +$input-focus-box-shadow: $input-btn-focus-box-shadow !default; +$input-placeholder-color: var(--#{$prefix}secondary-color) !default; +$input-plaintext-color: var(--#{$prefix}body-color) !default; +$input-height-border: calc( + #{$input-border-width} * 2 +) !default; // stylelint-disable-line function-disallowed-list + +$input-height-inner: add( + $input-line-height * 1em, + $input-padding-y * 2 +) !default; +$input-height-inner-half: add( + $input-line-height * 0.5em, + $input-padding-y +) !default; +$input-height-inner-quarter: add( + $input-line-height * 0.25em, + $input-padding-y * 0.5 +) !default; +$input-height: add( + $input-line-height * 1em, + add($input-padding-y * 2, $input-height-border, false) +) !default; +$input-height-sm: add( + $input-line-height * 1em, + add($input-padding-y-sm * 2, $input-height-border, false) +) !default; +$input-height-lg: add( + $input-line-height * 1em, + add($input-padding-y-lg * 2, $input-height-border, false) +) !default; +$input-transition: + border-color 0.15s ease-in-out, + box-shadow 0.15s ease-in-out !default; +$form-color-width: 3rem !default; + +// scss-docs-end form-input-variables + +// scss-docs-start form-check-variables +$form-check-input-width: 1em !default; +$form-check-min-height: $font-size-base * $line-height-base !default; +$form-check-padding-start: $form-check-input-width + 0.5em !default; +$form-check-margin-bottom: 0.125rem !default; +$form-check-label-color: null !default; +$form-check-label-cursor: null !default; +$form-check-transition: null !default; +$form-check-input-active-filter: brightness(90%) !default; +$form-check-input-bg: $input-bg !default; +$form-check-input-border: var(--#{$prefix}border-width) solid + var(--#{$prefix}border-color) !default; +$form-check-input-border-radius: 0.25em !default; +$form-check-radio-border-radius: 50% !default; +$form-check-input-focus-border: $input-focus-border-color !default; +$form-check-input-focus-box-shadow: $focus-ring-box-shadow !default; +$form-check-input-checked-color: $component-active-color !default; +$form-check-input-checked-bg-color: $component-active-bg !default; +$form-check-input-checked-border-color: $form-check-input-checked-bg-color !default; +$form-check-input-checked-bg-image: url("data:image/svg+xml,") !default; +$form-check-radio-checked-bg-image: url("data:image/svg+xml,") !default; +$form-check-input-indeterminate-color: $component-active-color !default; +$form-check-input-indeterminate-bg-color: $component-active-bg !default; +$form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color !default; +$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,") !default; +$form-check-input-disabled-opacity: 0.5 !default; +$form-check-label-disabled-opacity: $form-check-input-disabled-opacity !default; +$form-check-btn-check-disabled-opacity: $btn-disabled-opacity !default; +$form-check-inline-margin-end: 1rem !default; + +// scss-docs-end form-check-variables + +// scss-docs-start form-switch-variables +$form-switch-color: rgba($black, 0.25) !default; +$form-switch-width: 2em !default; +$form-switch-padding-start: $form-switch-width + 0.5em !default; +$form-switch-bg-image: url("data:image/svg+xml,") !default; +$form-switch-border-radius: $form-switch-width !default; +$form-switch-transition: background-position 0.15s ease-in-out !default; +$form-switch-focus-color: $input-focus-border-color !default; +$form-switch-focus-bg-image: url("data:image/svg+xml,") !default; +$form-switch-checked-color: $component-active-color !default; +$form-switch-checked-bg-image: url("data:image/svg+xml,") !default; +$form-switch-checked-bg-position: right center !default; + +// scss-docs-end form-switch-variables + +// scss-docs-start input-group-variables +$input-group-addon-padding-y: $input-padding-y !default; +$input-group-addon-padding-x: $input-padding-x !default; +$input-group-addon-font-weight: $input-font-weight !default; +$input-group-addon-color: $input-color !default; +$input-group-addon-bg: var(--#{$prefix}tertiary-bg) !default; +$input-group-addon-border-color: $input-border-color !default; + +// scss-docs-end input-group-variables + +// scss-docs-start form-select-variables +$form-select-padding-y: $input-padding-y !default; +$form-select-padding-x: $input-padding-x !default; +$form-select-font-family: $input-font-family !default; +$form-select-font-size: $input-font-size !default; +$form-select-indicator-padding: $form-select-padding-x * 3 !default; // Extra padding for background-image +$form-select-font-weight: $input-font-weight !default; +$form-select-line-height: $input-line-height !default; +$form-select-color: $input-color !default; +$form-select-bg: $input-bg !default; +$form-select-disabled-color: null !default; +$form-select-disabled-bg: $input-disabled-bg !default; +$form-select-disabled-border-color: $input-disabled-border-color !default; +$form-select-bg-position: right $form-select-padding-x center !default; +$form-select-bg-size: 16px 12px !default; // In pixels because image dimensions +$form-select-indicator-color: $gray-800 !default; +$form-select-indicator: url("data:image/svg+xml,") !default; +$form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + + $form-select-indicator-padding !default; +$form-select-feedback-icon-position: center right $form-select-indicator-padding !default; +$form-select-feedback-icon-size: $input-height-inner-half + $input-height-inner-half !default; +$form-select-border-width: $input-border-width !default; +$form-select-border-color: $input-border-color !default; +$form-select-border-radius: $input-border-radius !default; +$form-select-box-shadow: var(--#{$prefix}box-shadow-inset) !default; +$form-select-focus-border-color: $input-focus-border-color !default; +$form-select-focus-width: $input-focus-width !default; +$form-select-focus-box-shadow: 0 0 0 $form-select-focus-width + $input-btn-focus-color !default; +$form-select-padding-y-sm: $input-padding-y-sm !default; +$form-select-padding-x-sm: $input-padding-x-sm !default; +$form-select-font-size-sm: $input-font-size-sm !default; +$form-select-border-radius-sm: $input-border-radius-sm !default; +$form-select-padding-y-lg: $input-padding-y-lg !default; +$form-select-padding-x-lg: $input-padding-x-lg !default; +$form-select-font-size-lg: $input-font-size-lg !default; +$form-select-border-radius-lg: $input-border-radius-lg !default; +$form-select-transition: $input-transition !default; + +// scss-docs-end form-select-variables + +// scss-docs-start form-range-variables +$form-range-track-width: 100% !default; +$form-range-track-height: 0.5rem !default; +$form-range-track-cursor: pointer !default; +$form-range-track-bg: var(--#{$prefix}secondary-bg) !default; +$form-range-track-border-radius: 1rem !default; +$form-range-track-box-shadow: var(--#{$prefix}box-shadow-inset) !default; +$form-range-thumb-width: 1rem !default; +$form-range-thumb-height: $form-range-thumb-width !default; +$form-range-thumb-bg: $component-active-bg !default; +$form-range-thumb-border: 0 !default; +$form-range-thumb-border-radius: 1rem !default; +$form-range-thumb-box-shadow: 0 0.1rem 0.25rem rgba($black, 0.1) !default; +$form-range-thumb-focus-box-shadow: + 0 0 0 1px $body-bg, + $input-focus-box-shadow !default; +$form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in Edge +$form-range-thumb-active-bg: tint-color($component-active-bg, 70%) !default; +$form-range-thumb-disabled-bg: var(--#{$prefix}secondary-color) !default; +$form-range-thumb-transition: + background-color 0.15s ease-in-out, + border-color 0.15s ease-in-out, + box-shadow 0.15s ease-in-out !default; + +// scss-docs-end form-range-variables + +// scss-docs-start form-file-variables +$form-file-button-color: $input-color !default; +$form-file-button-bg: var(--#{$prefix}tertiary-bg) !default; +$form-file-button-hover-bg: var(--#{$prefix}secondary-bg) !default; + +// scss-docs-end form-file-variables + +// scss-docs-start form-floating-variables +$form-floating-height: add(3.5rem, $input-height-border) !default; +$form-floating-line-height: 1.25 !default; +$form-floating-padding-x: $input-padding-x !default; +$form-floating-padding-y: 1rem !default; +$form-floating-input-padding-t: 1.625rem !default; +$form-floating-input-padding-b: 0.625rem !default; +$form-floating-label-height: 1.5em !default; +$form-floating-label-opacity: 0.65 !default; +$form-floating-label-transform: scale(0.85) translateY(-0.5rem) + translateX(0.15rem) !default; +$form-floating-label-disabled-color: $gray-600 !default; +$form-floating-transition: + opacity 0.1s ease-in-out, + transform 0.1s ease-in-out !default; + +// scss-docs-end form-floating-variables + +// Form validation + +// scss-docs-start form-feedback-variables +$form-feedback-margin-top: $form-text-margin-top !default; +$form-feedback-font-size: $form-text-font-size !default; +$form-feedback-font-style: $form-text-font-style !default; +$form-feedback-valid-color: $success !default; +$form-feedback-invalid-color: $danger !default; +$form-feedback-icon-valid-color: $form-feedback-valid-color !default; +$form-feedback-icon-valid: url("data:image/svg+xml,") !default; +$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default; +$form-feedback-icon-invalid: url("data:image/svg+xml,") !default; + +// scss-docs-end form-feedback-variables + +// scss-docs-start form-validation-colors +$form-valid-color: $form-feedback-valid-color !default; +$form-valid-border-color: $form-feedback-valid-color !default; +$form-invalid-color: $form-feedback-invalid-color !default; +$form-invalid-border-color: $form-feedback-invalid-color !default; + +// scss-docs-end form-validation-colors + +// scss-docs-start form-validation-states +$form-validation-states: ( + 'valid': ( + 'color': var(--#{$prefix}form-valid-color), + 'icon': $form-feedback-icon-valid, + 'tooltip-color': #fff, + 'tooltip-bg-color': var(--#{$prefix}success), + 'focus-box-shadow': 0 0 $input-btn-focus-blur $input-focus-width + rgb(var(--#{$prefix}success-rgb) $input-btn-focus-color-opacity), + 'border-color': var(--#{$prefix}form-valid-border-color), + ), + 'invalid': ( + 'color': var(--#{$prefix}form-invalid-color), + 'icon': $form-feedback-icon-invalid, + 'tooltip-color': #fff, + 'tooltip-bg-color': var(--#{$prefix}danger), + 'focus-box-shadow': 0 0 $input-btn-focus-blur $input-focus-width + rgb(var(--#{$prefix}danger-rgb) $input-btn-focus-color-opacity), + 'border-color': var(--#{$prefix}form-invalid-border-color), + ), +) !default; + +// scss-docs-end form-validation-states + +// Z-index master list +// +// Warning: Avoid customizing these values. They're used for a bird's eye view +// of components dependent on the z-axis and are designed to all work together. + +// scss-docs-start zindex-stack +$zindex-dropdown: 1000 !default; +$zindex-sticky: 1020 !default; +$zindex-fixed: 1030 !default; +$zindex-offcanvas-backdrop: 1040 !default; +$zindex-offcanvas: 1045 !default; +$zindex-modal-backdrop: 1050 !default; +$zindex-modal: 1055 !default; +$zindex-popover: 1070 !default; +$zindex-tooltip: 1080 !default; +$zindex-toast: 1090 !default; + +// scss-docs-end zindex-stack + +// scss-docs-start zindex-levels-map +$zindex-levels: ( + n1: -1, + 0: 0, + 1: 1, + 2: 2, + 3: 3, +) !default; + +// scss-docs-end zindex-levels-map + +// Navs + +// scss-docs-start nav-variables +$nav-link-padding-y: 0.5rem !default; +$nav-link-padding-x: 1rem !default; +$nav-link-font-size: null !default; +$nav-link-font-weight: null !default; +$nav-link-color: var(--#{$prefix}link-color) !default; +$nav-link-hover-color: var(--#{$prefix}link-hover-color) !default; +$nav-link-transition: + color 0.15s ease-in-out, + background-color 0.15s ease-in-out, + border-color 0.15s ease-in-out !default; +$nav-link-disabled-color: var(--#{$prefix}secondary-color) !default; +$nav-link-focus-box-shadow: $focus-ring-box-shadow !default; +$nav-tabs-border-color: var(--#{$prefix}border-color) !default; +$nav-tabs-border-width: var(--#{$prefix}border-width) !default; +$nav-tabs-border-radius: var(--#{$prefix}border-radius) !default; +$nav-tabs-link-hover-border-color: var(--#{$prefix}secondary-bg) + var(--#{$prefix}secondary-bg) $nav-tabs-border-color !default; +$nav-tabs-link-active-color: var(--#{$prefix}emphasis-color) !default; +$nav-tabs-link-active-bg: var(--#{$prefix}body-bg) !default; +$nav-tabs-link-active-border-color: var(--#{$prefix}border-color) + var(--#{$prefix}border-color) $nav-tabs-link-active-bg !default; +$nav-pills-border-radius: var(--#{$prefix}border-radius) !default; +$nav-pills-link-active-color: $component-active-color !default; +$nav-pills-link-active-bg: $component-active-bg !default; +$nav-underline-gap: 1rem !default; +$nav-underline-border-width: 0.125rem !default; +$nav-underline-link-active-color: var(--#{$prefix}emphasis-color) !default; + +// scss-docs-end nav-variables + +// Navbar + +// scss-docs-start navbar-variables +$navbar-padding-y: $spacer * 0.5 !default; +$navbar-padding-x: null !default; +$navbar-nav-link-padding-x: 0.5rem !default; +$navbar-brand-font-size: $font-size-lg !default; + +// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link +$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default; +$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default; +$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * 0.5 !default; +$navbar-brand-margin-end: 1rem !default; +$navbar-toggler-padding-y: 0.25rem !default; +$navbar-toggler-padding-x: 0.75rem !default; +$navbar-toggler-font-size: $font-size-lg !default; +$navbar-toggler-border-radius: $btn-border-radius !default; +$navbar-toggler-focus-width: $btn-focus-width !default; +$navbar-toggler-transition: box-shadow 0.15s ease-in-out !default; +$navbar-light-color: rgb(var(--#{$prefix}emphasis-color-rgb) 0.65) !default; +$navbar-light-hover-color: rgb( + var(--#{$prefix}emphasis-color-rgb) 0.8 +) !default; +$navbar-light-active-color: rgb(var(--#{$prefix}emphasis-color-rgb) 1) !default; +$navbar-light-disabled-color: rgb( + var(--#{$prefix}emphasis-color-rgb) 0.3 +) !default; +$navbar-light-icon-color: rgba($body-color, 0.75) !default; +$navbar-light-toggler-icon-bg: url("data:image/svg+xml,") !default; +$navbar-light-toggler-border-color: rgb( + var(--#{$prefix}emphasis-color-rgb) 0.15 +) !default; +$navbar-light-brand-color: $navbar-light-active-color !default; +$navbar-light-brand-hover-color: $navbar-light-active-color !default; + +// scss-docs-end navbar-variables + +// scss-docs-start navbar-dark-variables +$navbar-dark-color: rgba($white, 0.55) !default; +$navbar-dark-hover-color: rgba($white, 0.75) !default; +$navbar-dark-active-color: $white !default; +$navbar-dark-disabled-color: rgba($white, 0.25) !default; +$navbar-dark-icon-color: $navbar-dark-color !default; +$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,") !default; +$navbar-dark-toggler-border-color: rgba($white, 0.1) !default; +$navbar-dark-brand-color: $navbar-dark-active-color !default; +$navbar-dark-brand-hover-color: $navbar-dark-active-color !default; + +// scss-docs-end navbar-dark-variables + +// Dropdowns +// +// Dropdown menu container and contents. + +// scss-docs-start dropdown-variables +$dropdown-min-width: 10rem !default; +$dropdown-padding-x: 0 !default; +$dropdown-padding-y: 0.5rem !default; +$dropdown-spacer: 0.125rem !default; +$dropdown-font-size: $font-size-base !default; +$dropdown-color: var(--#{$prefix}body-color) !default; +$dropdown-bg: var(--#{$prefix}body-bg) !default; +$dropdown-border-color: var(--#{$prefix}border-color-translucent) !default; +$dropdown-border-radius: var(--#{$prefix}border-radius) !default; +$dropdown-border-width: var(--#{$prefix}border-width) !default; +$dropdown-inner-border-radius: calc( + #{$dropdown-border-radius} - #{$dropdown-border-width} +) !default; // stylelint-disable-line function-disallowed-list +$dropdown-divider-bg: $dropdown-border-color !default; +$dropdown-divider-margin-y: $spacer * 0.5 !default; +$dropdown-box-shadow: var(--#{$prefix}box-shadow) !default; +$dropdown-link-color: var(--#{$prefix}body-color) !default; +$dropdown-link-hover-color: $dropdown-link-color !default; +$dropdown-link-hover-bg: var(--#{$prefix}tertiary-bg) !default; +$dropdown-link-active-color: $component-active-color !default; +$dropdown-link-active-bg: $component-active-bg !default; +$dropdown-link-disabled-color: var(--#{$prefix}tertiary-color) !default; +$dropdown-item-padding-y: $spacer * 0.25 !default; +$dropdown-item-padding-x: $spacer !default; +$dropdown-header-color: $gray-600 !default; +$dropdown-header-padding-x: $dropdown-item-padding-x !default; +$dropdown-header-padding-y: $dropdown-padding-y !default; + +// fusv-disable +$dropdown-header-padding: $dropdown-header-padding-y $dropdown-header-padding-x !default; // Deprecated in v5.2.0 +// fusv-enable +// scss-docs-end dropdown-variables + +// scss-docs-start dropdown-dark-variables +$dropdown-dark-color: $gray-300 !default; +$dropdown-dark-bg: $gray-800 !default; +$dropdown-dark-border-color: $dropdown-border-color !default; +$dropdown-dark-divider-bg: $dropdown-divider-bg !default; +$dropdown-dark-box-shadow: null !default; +$dropdown-dark-link-color: $dropdown-dark-color !default; +$dropdown-dark-link-hover-color: $white !default; +$dropdown-dark-link-hover-bg: rgba($white, 0.15) !default; +$dropdown-dark-link-active-color: $dropdown-link-active-color !default; +$dropdown-dark-link-active-bg: $dropdown-link-active-bg !default; +$dropdown-dark-link-disabled-color: $gray-500 !default; +$dropdown-dark-header-color: $gray-500 !default; + +// scss-docs-end dropdown-dark-variables + +// Pagination + +// scss-docs-start pagination-variables +$pagination-padding-y: 0.375rem !default; +$pagination-padding-x: 0.75rem !default; +$pagination-padding-y-sm: 0.25rem !default; +$pagination-padding-x-sm: 0.5rem !default; +$pagination-padding-y-lg: 0.75rem !default; +$pagination-padding-x-lg: 1.5rem !default; +$pagination-font-size: $font-size-base !default; +$pagination-color: var(--#{$prefix}link-color) !default; +$pagination-bg: var(--#{$prefix}body-bg) !default; +$pagination-border-radius: var(--#{$prefix}border-radius) !default; +$pagination-border-width: var(--#{$prefix}border-width) !default; +$pagination-margin-start: calc( + #{$pagination-border-width} * -1 +) !default; // stylelint-disable-line function-disallowed-list +$pagination-border-color: var(--#{$prefix}border-color) !default; +$pagination-focus-color: var(--#{$prefix}link-hover-color) !default; +$pagination-focus-bg: var(--#{$prefix}secondary-bg) !default; +$pagination-focus-box-shadow: $focus-ring-box-shadow !default; +$pagination-focus-outline: 0 !default; +$pagination-hover-color: var(--#{$prefix}link-hover-color) !default; +$pagination-hover-bg: var(--#{$prefix}tertiary-bg) !default; +$pagination-hover-border-color: var( + --#{$prefix}border-color +) !default; // Todo in v6: remove this? + +$pagination-active-color: $component-active-color !default; +$pagination-active-bg: $component-active-bg !default; +$pagination-active-border-color: $component-active-bg !default; +$pagination-disabled-color: var(--#{$prefix}secondary-color) !default; +$pagination-disabled-bg: var(--#{$prefix}secondary-bg) !default; +$pagination-disabled-border-color: var(--#{$prefix}border-color) !default; +$pagination-transition: + color 0.15s ease-in-out, + background-color 0.15s ease-in-out, + border-color 0.15s ease-in-out, + box-shadow 0.15s ease-in-out !default; +$pagination-border-radius-sm: var(--#{$prefix}border-radius-sm) !default; +$pagination-border-radius-lg: var(--#{$prefix}border-radius-lg) !default; + +// scss-docs-end pagination-variables + +// Placeholders + +// scss-docs-start placeholders +$placeholder-opacity-max: 0.5 !default; +$placeholder-opacity-min: 0.2 !default; + +// scss-docs-end placeholders + +// Cards + +// scss-docs-start card-variables +$card-spacer-y: $spacer !default; +$card-spacer-x: $spacer !default; +$card-title-spacer-y: $spacer * 0.5 !default; +$card-title-color: null !default; +$card-subtitle-color: null !default; +$card-border-width: var(--#{$prefix}border-width) !default; +$card-border-color: var(--#{$prefix}border-color-translucent) !default; +$card-border-radius: var(--#{$prefix}border-radius) !default; +$card-box-shadow: null !default; +$card-inner-border-radius: subtract( + $card-border-radius, + $card-border-width +) !default; +$card-cap-padding-y: $card-spacer-y * 0.5 !default; +$card-cap-padding-x: $card-spacer-x !default; +$card-cap-bg: rgb(var(--#{$prefix}body-color-rgb) 0.03) !default; +$card-cap-color: null !default; +$card-height: null !default; +$card-color: null !default; +$card-bg: var(--#{$prefix}body-bg) !default; +$card-img-overlay-padding: $spacer !default; +$card-group-margin: $grid-gutter-width * 0.5 !default; + +// scss-docs-end card-variables + +// Accordion + +// scss-docs-start accordion-variables +$accordion-padding-y: 1rem !default; +$accordion-padding-x: 1.25rem !default; +$accordion-color: var(--#{$prefix}body-color) !default; +$accordion-bg: var(--#{$prefix}body-bg) !default; +$accordion-border-width: var(--#{$prefix}border-width) !default; +$accordion-border-color: var(--#{$prefix}border-color) !default; +$accordion-border-radius: var(--#{$prefix}border-radius) !default; +$accordion-inner-border-radius: subtract( + $accordion-border-radius, + $accordion-border-width +) !default; +$accordion-body-padding-y: $accordion-padding-y !default; +$accordion-body-padding-x: $accordion-padding-x !default; +$accordion-button-padding-y: $accordion-padding-y !default; +$accordion-button-padding-x: $accordion-padding-x !default; +$accordion-button-color: var(--#{$prefix}body-color) !default; +$accordion-button-bg: var(--#{$prefix}accordion-bg) !default; +$accordion-transition: + $btn-transition, + border-radius 0.15s ease !default; +$accordion-button-active-bg: var(--#{$prefix}primary-bg-subtle) !default; +$accordion-button-active-color: var(--#{$prefix}primary-text-emphasis) !default; +$accordion-button-focus-border-color: $input-focus-border-color !default; +$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default; +$accordion-icon-width: 1.25rem !default; +$accordion-icon-color: $body-color !default; +$accordion-icon-active-color: $primary-text-emphasis !default; +$accordion-icon-transition: transform 0.2s ease-in-out !default; +$accordion-icon-transform: rotate(-180deg) !default; +$accordion-button-icon: url("data:image/svg+xml,") !default; +$accordion-button-active-icon: url("data:image/svg+xml,") !default; + +// scss-docs-end accordion-variables + +// Tooltips + +// scss-docs-start tooltip-variables +$tooltip-font-size: $font-size-sm !default; +$tooltip-max-width: 200px !default; +$tooltip-color: var(--#{$prefix}body-bg) !default; +$tooltip-bg: var(--#{$prefix}emphasis-color) !default; +$tooltip-border-radius: var(--#{$prefix}border-radius) !default; +$tooltip-opacity: 0.9 !default; +$tooltip-padding-y: $spacer * 0.25 !default; +$tooltip-padding-x: $spacer * 0.5 !default; +$tooltip-margin: null !default; // TODO: remove this in v6 + +$tooltip-arrow-width: 0.8rem !default; +$tooltip-arrow-height: 0.4rem !default; + +// fusv-disable +$tooltip-arrow-color: null !default; // Deprecated in Bootstrap 5.2.0 for CSS variables +// fusv-enable +// scss-docs-end tooltip-variables + +// Form tooltips must come after regular tooltips +// scss-docs-start tooltip-feedback-variables +$form-feedback-tooltip-padding-y: $tooltip-padding-y !default; +$form-feedback-tooltip-padding-x: $tooltip-padding-x !default; +$form-feedback-tooltip-font-size: $tooltip-font-size !default; +$form-feedback-tooltip-line-height: null !default; +$form-feedback-tooltip-opacity: $tooltip-opacity !default; +$form-feedback-tooltip-border-radius: $tooltip-border-radius !default; + +// scss-docs-end tooltip-feedback-variables + +// Popovers + +// scss-docs-start popover-variables +$popover-font-size: $font-size-sm !default; +$popover-bg: var(--#{$prefix}body-bg) !default; +$popover-max-width: 276px !default; +$popover-border-width: var(--#{$prefix}border-width) !default; +$popover-border-color: var(--#{$prefix}border-color-translucent) !default; +$popover-border-radius: var(--#{$prefix}border-radius-lg) !default; +$popover-inner-border-radius: calc( + #{$popover-border-radius} - #{$popover-border-width} +) !default; // stylelint-disable-line function-disallowed-list +$popover-box-shadow: var(--#{$prefix}box-shadow) !default; +$popover-header-font-size: $font-size-base !default; +$popover-header-bg: var(--#{$prefix}secondary-bg) !default; +$popover-header-color: $headings-color !default; +$popover-header-padding-y: 0.5rem !default; +$popover-header-padding-x: $spacer !default; +$popover-body-color: var(--#{$prefix}body-color) !default; +$popover-body-padding-y: $spacer !default; +$popover-body-padding-x: $spacer !default; +$popover-arrow-width: 1rem !default; +$popover-arrow-height: 0.5rem !default; + +// scss-docs-end popover-variables + +// fusv-disable +// Deprecated in Bootstrap 5.2.0 for CSS variables +$popover-arrow-color: $popover-bg !default; +$popover-arrow-outer-color: var(--#{$prefix}border-color-translucent) !default; + +// fusv-enable + +// Toasts + +// scss-docs-start toast-variables +$toast-max-width: 350px !default; +$toast-padding-x: 0.75rem !default; +$toast-padding-y: 0.5rem !default; +$toast-font-size: 0.875rem !default; +$toast-color: null !default; +$toast-background-color: rgb(var(--#{$prefix}body-bg-rgb) 0.85) !default; +$toast-border-width: var(--#{$prefix}border-width) !default; +$toast-border-color: var(--#{$prefix}border-color-translucent) !default; +$toast-border-radius: var(--#{$prefix}border-radius) !default; +$toast-box-shadow: var(--#{$prefix}box-shadow) !default; +$toast-spacing: $container-padding-x !default; +$toast-header-color: var(--#{$prefix}secondary-color) !default; +$toast-header-background-color: rgb(var(--#{$prefix}body-bg-rgb) 0.85) !default; +$toast-header-border-color: $toast-border-color !default; + +// scss-docs-end toast-variables + +// Badges + +// scss-docs-start badge-variables +$badge-font-size: 0.75em !default; +$badge-font-weight: $font-weight-bold !default; +$badge-color: $white !default; +$badge-padding-y: 0.35em !default; +$badge-padding-x: 0.65em !default; +$badge-border-radius: var(--#{$prefix}border-radius) !default; + +// scss-docs-end badge-variables + +// Modals + +// scss-docs-start modal-variables +$modal-inner-padding: $spacer !default; +$modal-footer-margin-between: 0.5rem !default; +$modal-dialog-margin: 0.5rem !default; +$modal-dialog-margin-y-sm-up: 1.75rem !default; +$modal-title-line-height: $line-height-base !default; +$modal-content-color: null !default; +$modal-content-bg: var(--#{$prefix}body-bg) !default; +$modal-content-border-color: var(--#{$prefix}border-color-translucent) !default; +$modal-content-border-width: var(--#{$prefix}border-width) !default; +$modal-content-border-radius: var(--#{$prefix}border-radius-lg) !default; +$modal-content-inner-border-radius: subtract( + $modal-content-border-radius, + $modal-content-border-width +) !default; +$modal-content-box-shadow-xs: var(--#{$prefix}box-shadow-sm) !default; +$modal-content-box-shadow-sm-up: var(--#{$prefix}box-shadow) !default; +$modal-backdrop-bg: $black !default; +$modal-backdrop-opacity: 0.5 !default; +$modal-header-border-color: var(--#{$prefix}border-color) !default; +$modal-header-border-width: $modal-content-border-width !default; +$modal-header-padding-y: $modal-inner-padding !default; +$modal-header-padding-x: $modal-inner-padding !default; +$modal-header-padding: $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility + +$modal-footer-bg: null !default; +$modal-footer-border-color: $modal-header-border-color !default; +$modal-footer-border-width: $modal-header-border-width !default; +$modal-sm: 300px !default; +$modal-md: 500px !default; +$modal-lg: 800px !default; +$modal-xl: 1140px !default; +$modal-fade-transform: translate(0, -50px) !default; +$modal-show-transform: none !default; +$modal-transition: transform 0.3s ease-out !default; +$modal-scale-transform: scale(1.02) !default; + +// scss-docs-end modal-variables + +// Alerts +// +// Define alert colors, border radius, and padding. + +// scss-docs-start alert-variables +$alert-padding-y: $spacer !default; +$alert-padding-x: $spacer !default; +$alert-margin-bottom: 1rem !default; +$alert-border-radius: var(--#{$prefix}border-radius) !default; +$alert-link-font-weight: $font-weight-bold !default; +$alert-border-width: var(--#{$prefix}border-width) !default; +$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side +// scss-docs-end alert-variables + +// fusv-disable +$alert-bg-scale: -80% !default; // Deprecated in v5.2.0, to be removed in v6 +$alert-border-scale: -70% !default; // Deprecated in v5.2.0, to be removed in v6 +$alert-color-scale: 40% !default; // Deprecated in v5.2.0, to be removed in v6 +// fusv-enable + +// Progress bars + +// scss-docs-start progress-variables +$progress-height: 1rem !default; +$progress-font-size: $font-size-base * 0.75 !default; +$progress-bg: var(--#{$prefix}secondary-bg) !default; +$progress-border-radius: var(--#{$prefix}border-radius) !default; +$progress-box-shadow: var(--#{$prefix}box-shadow-inset) !default; +$progress-bar-color: $white !default; +$progress-bar-bg: $primary !default; +$progress-bar-animation-timing: 1s linear infinite !default; +$progress-bar-transition: width 0.6s ease !default; + +// scss-docs-end progress-variables + +// List group + +// scss-docs-start list-group-variables +$list-group-color: var(--#{$prefix}body-color) !default; +$list-group-bg: var(--#{$prefix}body-bg) !default; +$list-group-border-color: var(--#{$prefix}border-color) !default; +$list-group-border-width: var(--#{$prefix}border-width) !default; +$list-group-border-radius: var(--#{$prefix}border-radius) !default; +$list-group-item-padding-y: $spacer * 0.5 !default; +$list-group-item-padding-x: $spacer !default; + +// fusv-disable +$list-group-item-bg-scale: -80% !default; // Deprecated in v5.3.0 +$list-group-item-color-scale: 40% !default; // Deprecated in v5.3.0 +// fusv-enable + +$list-group-hover-bg: var(--#{$prefix}tertiary-bg) !default; +$list-group-active-color: $component-active-color !default; +$list-group-active-bg: $component-active-bg !default; +$list-group-active-border-color: $list-group-active-bg !default; +$list-group-disabled-color: var(--#{$prefix}secondary-color) !default; +$list-group-disabled-bg: $list-group-bg !default; +$list-group-action-color: var(--#{$prefix}secondary-color) !default; +$list-group-action-hover-color: var(--#{$prefix}emphasis-color) !default; +$list-group-action-active-color: var(--#{$prefix}body-color) !default; +$list-group-action-active-bg: var(--#{$prefix}secondary-bg) !default; + +// scss-docs-end list-group-variables + +// Image thumbnails + +// scss-docs-start thumbnail-variables +$thumbnail-padding: 0.25rem !default; +$thumbnail-bg: var(--#{$prefix}body-bg) !default; +$thumbnail-border-width: var(--#{$prefix}border-width) !default; +$thumbnail-border-color: var(--#{$prefix}border-color) !default; +$thumbnail-border-radius: var(--#{$prefix}border-radius) !default; +$thumbnail-box-shadow: var(--#{$prefix}box-shadow-sm) !default; + +// scss-docs-end thumbnail-variables + +// Figures + +// scss-docs-start figure-variables +$figure-caption-font-size: $small-font-size !default; +$figure-caption-color: var(--#{$prefix}secondary-color) !default; + +// scss-docs-end figure-variables + +// Breadcrumbs + +// scss-docs-start breadcrumb-variables +$breadcrumb-font-size: null !default; +$breadcrumb-padding-y: 0 !default; +$breadcrumb-padding-x: 0 !default; +$breadcrumb-item-padding-x: 0.5rem !default; +$breadcrumb-margin-bottom: 1rem !default; +$breadcrumb-bg: null !default; +$breadcrumb-divider-color: var(--#{$prefix}secondary-color) !default; +$breadcrumb-active-color: var(--#{$prefix}secondary-color) !default; +$breadcrumb-divider: '/' !default; +$breadcrumb-divider-flipped: $breadcrumb-divider !default; +$breadcrumb-border-radius: null !default; + +// scss-docs-end breadcrumb-variables + +// Carousel + +// scss-docs-start carousel-variables +$carousel-control-color: $white !default; +$carousel-control-width: 15% !default; +$carousel-control-opacity: 0.5 !default; +$carousel-control-hover-opacity: 0.9 !default; +$carousel-control-transition: opacity 0.15s ease !default; +$carousel-indicator-width: 30px !default; +$carousel-indicator-height: 3px !default; +$carousel-indicator-hit-area-height: 10px !default; +$carousel-indicator-spacer: 3px !default; +$carousel-indicator-opacity: 0.5 !default; +$carousel-indicator-active-bg: $white !default; +$carousel-indicator-active-opacity: 1 !default; +$carousel-indicator-transition: opacity 0.6s ease !default; +$carousel-caption-width: 70% !default; +$carousel-caption-color: $white !default; +$carousel-caption-padding-y: 1.25rem !default; +$carousel-caption-spacer: 1.25rem !default; +$carousel-control-icon-width: 2rem !default; +$carousel-control-prev-icon-bg: url("data:image/svg+xml,") !default; +$carousel-control-next-icon-bg: url("data:image/svg+xml,") !default; +$carousel-transition-duration: 0.6s !default; +$carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`) +// scss-docs-end carousel-variables + +// scss-docs-start carousel-dark-variables +$carousel-dark-indicator-active-bg: $black !default; +$carousel-dark-caption-color: $black !default; +$carousel-dark-control-icon-filter: invert(1) grayscale(100) !default; + +// scss-docs-end carousel-dark-variables + +// Spinners + +// scss-docs-start spinner-variables +$spinner-width: 2rem !default; +$spinner-height: $spinner-width !default; +$spinner-vertical-align: -0.125em !default; +$spinner-border-width: 0.25em !default; +$spinner-animation-speed: 0.75s !default; +$spinner-width-sm: 1rem !default; +$spinner-height-sm: $spinner-width-sm !default; +$spinner-border-width-sm: 0.2em !default; + +// scss-docs-end spinner-variables + +// Close + +// scss-docs-start close-variables +$btn-close-width: 1em !default; +$btn-close-height: $btn-close-width !default; +$btn-close-padding-x: 0.25em !default; +$btn-close-padding-y: $btn-close-padding-x !default; +$btn-close-color: $black !default; +$btn-close-bg: url("data:image/svg+xml,") !default; +$btn-close-focus-shadow: $focus-ring-box-shadow !default; +$btn-close-opacity: 0.5 !default; +$btn-close-hover-opacity: 0.75 !default; +$btn-close-focus-opacity: 1 !default; +$btn-close-disabled-opacity: 0.25 !default; +$btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default; + +// scss-docs-end close-variables + +// Offcanvas + +// scss-docs-start offcanvas-variables +$offcanvas-padding-y: $modal-inner-padding !default; +$offcanvas-padding-x: $modal-inner-padding !default; +$offcanvas-horizontal-width: 400px !default; +$offcanvas-vertical-height: 30vh !default; +$offcanvas-transition-duration: 0.3s !default; +$offcanvas-border-color: $modal-content-border-color !default; +$offcanvas-border-width: $modal-content-border-width !default; +$offcanvas-title-line-height: $modal-title-line-height !default; +$offcanvas-bg-color: var(--#{$prefix}body-bg) !default; +$offcanvas-color: var(--#{$prefix}body-color) !default; +$offcanvas-box-shadow: $modal-content-box-shadow-xs !default; +$offcanvas-backdrop-bg: $modal-backdrop-bg !default; +$offcanvas-backdrop-opacity: $modal-backdrop-opacity !default; + +// scss-docs-end offcanvas-variables + +// Code + +$code-font-size: $small-font-size !default; +$code-color: $pink !default; +$kbd-padding-y: 0.1875rem !default; +$kbd-padding-x: 0.375rem !default; +$kbd-font-size: $code-font-size !default; +$kbd-color: var(--#{$prefix}body-bg) !default; +$kbd-bg: var(--#{$prefix}body-color) !default; +$nested-kbd-font-weight: null !default; // Deprecated in v5.2.0, removing in v6 + +$pre-color: null !default; + +// @import 'variables-dark'; // TODO: can be removed safely in v6, only here to avoid breaking changes in v5.3 diff --git a/_assets/styles/_zenburn.scss b/_assets/styles/_zenburn.scss new file mode 100644 index 000000000..f7bfef9cc --- /dev/null +++ b/_assets/styles/_zenburn.scss @@ -0,0 +1,290 @@ +.highlighter-rouge code, +.highlighter-rouge pre { + color: #fdce93; + background-color: #3f3f3f; +} + +.highlighter-rouge .hll { + background-color: #222; +} + +.highlighter-rouge .c { + color: #7f9f7f; +} + +.highlighter-rouge .err { + color: #e37170; + background-color: #3d3535; +} + +.highlighter-rouge .g { + color: #7f9f7f; +} + +.highlighter-rouge .k { + color: #f0dfaf; +} + +.highlighter-rouge .l { + color: #ccc; +} + +.highlighter-rouge .n { + color: #dcdccc; +} + +.highlighter-rouge .o { + color: #f0efd0; +} + +.highlighter-rouge .x { + color: #ccc; +} + +.highlighter-rouge .p { + color: #41706f; +} + +.highlighter-rouge .cm { + color: #7f9f7f; +} + +.highlighter-rouge .cp { + color: #7f9f7f; +} + +.highlighter-rouge .c1 { + color: #7f9f7f; +} + +.highlighter-rouge .cs { + font-weight: bold; + color: #cd0000; +} + +.highlighter-rouge .gd { + color: #cd0000; +} + +.highlighter-rouge .ge { + font-style: italic; + color: #ccc; +} + +.highlighter-rouge .gr { + color: red; +} + +.highlighter-rouge .gh { + font-weight: bold; + color: #dcdccc; +} + +.highlighter-rouge .gi { + color: #00cd00; +} + +.highlighter-rouge .go { + color: gray; +} + +.highlighter-rouge .gp { + font-weight: bold; + color: #dcdccc; +} + +.highlighter-rouge .gs { + font-weight: bold; + color: #ccc; +} + +.highlighter-rouge .gu { + font-weight: bold; + color: purple; +} + +.highlighter-rouge .gt { + color: #0040d0; +} + +.highlighter-rouge .kc { + color: #dca3a3; +} + +.highlighter-rouge .kd { + color: #ffff86; +} + +.highlighter-rouge .kn { + font-weight: bold; + color: #dfaf8f; +} + +.highlighter-rouge .kp { + color: #cdcf99; +} + +.highlighter-rouge .kr { + color: #cdcd00; +} + +.highlighter-rouge .kt { + color: #00cd00; +} + +.highlighter-rouge .ld { + color: #cc9393; +} + +.highlighter-rouge .m { + color: #8cd0d3; +} + +.highlighter-rouge .s { + color: #cc9393; +} + +.highlighter-rouge .na { + color: #9ac39f; +} + +.highlighter-rouge .nb { + color: #efef8f; +} + +.highlighter-rouge .nc { + color: #efef8f; +} + +.highlighter-rouge .no { + color: #ccc; +} + +.highlighter-rouge .nd { + color: #ccc; +} + +.highlighter-rouge .ni { + color: #c28182; +} + +.highlighter-rouge .ne { + font-weight: bold; + color: #c3bf9f; +} + +.highlighter-rouge .nf { + color: #efef8f; +} + +.highlighter-rouge .nl { + color: #ccc; +} + +.highlighter-rouge .nn { + color: #8fbede; +} + +.highlighter-rouge .nx { + color: #ccc; +} + +.highlighter-rouge .py { + color: #ccc; +} + +.highlighter-rouge .nt { + color: #9ac39f; +} + +.highlighter-rouge .nv { + color: #dcdccc; +} + +.highlighter-rouge .ow { + color: #f0efd0; +} + +.highlighter-rouge .w { + color: #ccc; +} + +.highlighter-rouge .mf { + color: #8cd0d3; +} + +.highlighter-rouge .mh { + color: #8cd0d3; +} + +.highlighter-rouge .mi { + color: #8cd0d3; +} + +.highlighter-rouge .mo { + color: #8cd0d3; +} + +.highlighter-rouge .sb { + color: #cc9393; +} + +.highlighter-rouge .sc { + color: #cc9393; +} + +.highlighter-rouge .sd { + color: #cc9393; +} + +.highlighter-rouge .s2 { + color: #cc9393; +} + +.highlighter-rouge .se { + color: #cc9393; +} + +.highlighter-rouge .sh { + color: #cc9393; +} + +.highlighter-rouge .si { + color: #cc9393; +} + +.highlighter-rouge .sx { + color: #cc9393; +} + +.highlighter-rouge .sr { + color: #cc9393; +} + +.highlighter-rouge .s1 { + color: #cc9393; +} + +.highlighter-rouge .ss { + color: #cc9393; +} + +.highlighter-rouge .bp { + color: #efef8f; +} + +.highlighter-rouge .vc { + color: #efef8f; +} + +.highlighter-rouge .vg { + color: #dcdccc; +} + +.highlighter-rouge .vi { + color: #ffffc7; +} + +.highlighter-rouge .il { + color: #8cd0d3; +} diff --git a/_sass/bootstrap/_accordion.scss b/_assets/styles/bootstrap/_accordion.scss similarity index 82% rename from _sass/bootstrap/_accordion.scss rename to _assets/styles/bootstrap/_accordion.scss index 58e665b9a..07a47cdf7 100644 --- a/_sass/bootstrap/_accordion.scss +++ b/_assets/styles/bootstrap/_accordion.scss @@ -19,7 +19,9 @@ --#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width}; --#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform}; --#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition}; - --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)}; + --#{$prefix}accordion-btn-active-icon: #{escape-svg( + $accordion-button-active-icon + )}; --#{$prefix}accordion-btn-focus-border-color: #{$accordion-button-focus-border-color}; --#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow}; --#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x}; @@ -34,7 +36,8 @@ display: flex; align-items: center; width: 100%; - padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x); + padding: var(--#{$prefix}accordion-btn-padding-y) + var(--#{$prefix}accordion-btn-padding-x); @include font-size($font-size-base); color: var(--#{$prefix}accordion-btn-color); text-align: left; // Reset button style @@ -47,7 +50,8 @@ &:not(.collapsed) { color: var(--#{$prefix}accordion-active-color); background-color: var(--#{$prefix}accordion-active-bg); - box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list + box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 + var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list &::after { background-image: var(--#{$prefix}accordion-btn-active-icon); @@ -61,7 +65,7 @@ width: var(--#{$prefix}accordion-btn-icon-width); height: var(--#{$prefix}accordion-btn-icon-width); margin-left: auto; - content: ""; + content: ''; background-image: var(--#{$prefix}accordion-btn-icon); background-repeat: no-repeat; background-size: var(--#{$prefix}accordion-btn-icon-width); @@ -87,13 +91,16 @@ .accordion-item { color: var(--#{$prefix}accordion-color); background-color: var(--#{$prefix}accordion-bg); - border: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color); + border: var(--#{$prefix}accordion-border-width) solid + var(--#{$prefix}accordion-border-color); &:first-of-type { @include border-top-radius(var(--#{$prefix}accordion-border-radius)); > .accordion-header .accordion-button { - @include border-top-radius(var(--#{$prefix}accordion-inner-border-radius)); + @include border-top-radius( + var(--#{$prefix}accordion-inner-border-radius) + ); } } @@ -107,7 +114,9 @@ > .accordion-header .accordion-button { &.collapsed { - @include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius)); + @include border-bottom-radius( + var(--#{$prefix}accordion-inner-border-radius) + ); } } @@ -118,10 +127,10 @@ } .accordion-body { - padding: var(--#{$prefix}accordion-body-padding-y) var(--#{$prefix}accordion-body-padding-x); + padding: var(--#{$prefix}accordion-body-padding-y) + var(--#{$prefix}accordion-body-padding-x); } - // Flush accordion items // // Remove borders and border-radius to keep accordion items edge-to-edge. @@ -132,8 +141,12 @@ border-left: 0; @include border-radius(0); - &:first-child { border-top: 0; } - &:last-child { border-bottom: 0; } + &:first-child { + border-top: 0; + } + &:last-child { + border-bottom: 0; + } // stylelint-disable selector-max-class > .accordion-header .accordion-button { @@ -154,7 +167,9 @@ @include color-mode(dark) { .accordion-button::after { --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)}; - --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)}; + --#{$prefix}accordion-btn-active-icon: #{escape-svg( + $accordion-button-active-icon-dark + )}; } } } diff --git a/_sass/bootstrap/_alert.scss b/_assets/styles/bootstrap/_alert.scss similarity index 99% rename from _sass/bootstrap/_alert.scss rename to _assets/styles/bootstrap/_alert.scss index b8cff9b71..20df5ce60 100644 --- a/_sass/bootstrap/_alert.scss +++ b/_assets/styles/bootstrap/_alert.scss @@ -36,7 +36,6 @@ color: var(--#{$prefix}alert-link-color); } - // Dismissible alerts // // Expand the right padding and account for the close button's positioning. @@ -54,7 +53,6 @@ } } - // scss-docs-start alert-modifiers // Generate contextual modifier classes for colorizing the alert @each $state in map-keys($theme-colors) { diff --git a/_sass/bootstrap/_badge.scss b/_assets/styles/bootstrap/_badge.scss similarity index 100% rename from _sass/bootstrap/_badge.scss rename to _assets/styles/bootstrap/_badge.scss diff --git a/_sass/bootstrap/_breadcrumb.scss b/_assets/styles/bootstrap/_breadcrumb.scss similarity index 81% rename from _sass/bootstrap/_breadcrumb.scss rename to _assets/styles/bootstrap/_breadcrumb.scss index b8252ff21..83ab3b3d8 100644 --- a/_sass/bootstrap/_breadcrumb.scss +++ b/_assets/styles/bootstrap/_breadcrumb.scss @@ -13,7 +13,8 @@ display: flex; flex-wrap: wrap; - padding: var(--#{$prefix}breadcrumb-padding-y) var(--#{$prefix}breadcrumb-padding-x); + padding: var(--#{$prefix}breadcrumb-padding-y) + var(--#{$prefix}breadcrumb-padding-x); margin-bottom: var(--#{$prefix}breadcrumb-margin-bottom); @include font-size(var(--#{$prefix}breadcrumb-font-size)); list-style: none; @@ -30,7 +31,14 @@ float: left; // Suppress inline spacings and underlining of the separator padding-right: var(--#{$prefix}breadcrumb-item-padding-x); color: var(--#{$prefix}breadcrumb-divider-color); - content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"}; + content: var( + --#{$prefix}breadcrumb-divider, + escape-svg($breadcrumb-divider) + ) + #{'/* rtl:'} var( + --#{$prefix}breadcrumb-divider, + escape-svg($breadcrumb-divider-flipped) + ) #{'*/'}; } } diff --git a/_sass/bootstrap/_button-group.scss b/_assets/styles/bootstrap/_button-group.scss similarity index 82% rename from _sass/bootstrap/_button-group.scss rename to _assets/styles/bootstrap/_button-group.scss index 55ae3f65d..edf243d31 100644 --- a/_sass/bootstrap/_button-group.scss +++ b/_assets/styles/bootstrap/_button-group.scss @@ -39,7 +39,9 @@ // Prevent double borders when buttons are next to each other > :not(.btn-check:first-child) + .btn, > .btn-group:not(:first-child) { - margin-left: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list + margin-left: calc( + #{$btn-border-width} * -1 + ); // stylelint-disable-line function-disallowed-list } // Reset rounded corners @@ -64,17 +66,20 @@ // // Remix the default button sizing classes into new ones for easier manipulation. -.btn-group-sm > .btn { @extend .btn-sm; } -.btn-group-lg > .btn { @extend .btn-lg; } - +.btn-group-sm > .btn { + @extend .btn-sm; +} +.btn-group-lg > .btn { + @extend .btn-lg; +} // // Split button dropdowns // .dropdown-toggle-split { - padding-right: $btn-padding-x * .75; - padding-left: $btn-padding-x * .75; + padding-right: $btn-padding-x * 0.75; + padding-left: $btn-padding-x * 0.75; &::after, .dropup &::after, @@ -88,16 +93,15 @@ } .btn-sm + .dropdown-toggle-split { - padding-right: $btn-padding-x-sm * .75; - padding-left: $btn-padding-x-sm * .75; + padding-right: $btn-padding-x-sm * 0.75; + padding-left: $btn-padding-x-sm * 0.75; } .btn-lg + .dropdown-toggle-split { - padding-right: $btn-padding-x-lg * .75; - padding-left: $btn-padding-x-lg * .75; + padding-right: $btn-padding-x-lg * 0.75; + padding-left: $btn-padding-x-lg * 0.75; } - // The clickable button for toggling the menu // Set the same inset shadow as the :active state .btn-group.show .dropdown-toggle { @@ -109,7 +113,6 @@ } } - // // Vertical button groups // @@ -126,7 +129,9 @@ > .btn:not(:first-child), > .btn-group:not(:first-child) { - margin-top: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list + margin-top: calc( + #{$btn-border-width} * -1 + ); // stylelint-disable-line function-disallowed-list } // Reset rounded corners diff --git a/_sass/bootstrap/_buttons.scss b/_assets/styles/bootstrap/_buttons.scss similarity index 89% rename from _sass/bootstrap/_buttons.scss rename to _assets/styles/bootstrap/_buttons.scss index e14a18438..fec60e52e 100644 --- a/_sass/bootstrap/_buttons.scss +++ b/_assets/styles/bootstrap/_buttons.scss @@ -18,7 +18,7 @@ --#{$prefix}btn-hover-border-color: transparent; --#{$prefix}btn-box-shadow: #{$btn-box-shadow}; --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity}; - --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5); + --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), 0.5); // scss-docs-end btn-css-vars display: inline-block; @@ -34,7 +34,8 @@ vertical-align: middle; cursor: if($enable-button-pointers, pointer, null); user-select: none; - border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color); + border: var(--#{$prefix}btn-border-width) solid + var(--#{$prefix}btn-border-color); @include border-radius(var(--#{$prefix}btn-border-radius)); @include gradient-bg(var(--#{$prefix}btn-bg)); @include box-shadow(var(--#{$prefix}btn-box-shadow)); @@ -61,7 +62,8 @@ outline: 0; // Avoid using mixin so we can pass custom focus shadow properly @if $enable-shadows { - box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow); + box-shadow: var(--#{$prefix}btn-box-shadow), + var(--#{$prefix}btn-focus-box-shadow); } @else { box-shadow: var(--#{$prefix}btn-focus-box-shadow); } @@ -72,7 +74,8 @@ outline: 0; // Avoid using mixin so we can pass custom focus shadow properly @if $enable-shadows { - box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow); + box-shadow: var(--#{$prefix}btn-box-shadow), + var(--#{$prefix}btn-focus-box-shadow); } @else { box-shadow: var(--#{$prefix}btn-focus-box-shadow); } @@ -93,7 +96,8 @@ &:focus-visible { // Avoid using mixin so we can pass custom focus shadow properly @if $enable-shadows { - box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow); + box-shadow: var(--#{$prefix}btn-active-shadow), + var(--#{$prefix}btn-focus-box-shadow); } @else { box-shadow: var(--#{$prefix}btn-focus-box-shadow); } @@ -113,7 +117,6 @@ } } - // // Alternate buttons // @@ -121,7 +124,7 @@ // scss-docs-start btn-variant-loops @each $color, $value in $theme-colors { .btn-#{$color} { - @if $color == "light" { + @if $color == 'light' { @include button-variant( $value, $value, @@ -130,7 +133,7 @@ $active-background: shade-color($value, $btn-active-bg-shade-amount), $active-border: shade-color($value, $btn-active-border-shade-amount) ); - } @else if $color == "dark" { + } @else if $color == 'dark' { @include button-variant( $value, $value, @@ -152,7 +155,6 @@ } // scss-docs-end btn-variant-loops - // // Link buttons // @@ -193,15 +195,24 @@ // No need for an active state here } - // // Button Sizes // .btn-lg { - @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg); + @include button-size( + $btn-padding-y-lg, + $btn-padding-x-lg, + $btn-font-size-lg, + $btn-border-radius-lg + ); } .btn-sm { - @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm); + @include button-size( + $btn-padding-y-sm, + $btn-padding-x-sm, + $btn-font-size-sm, + $btn-border-radius-sm + ); } diff --git a/_sass/bootstrap/_card.scss b/_assets/styles/bootstrap/_card.scss similarity index 78% rename from _sass/bootstrap/_card.scss rename to _assets/styles/bootstrap/_card.scss index d3535a98b..51b79c5cc 100644 --- a/_sass/bootstrap/_card.scss +++ b/_assets/styles/bootstrap/_card.scss @@ -34,7 +34,8 @@ word-wrap: break-word; background-color: var(--#{$prefix}card-bg); background-clip: border-box; - border: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color); + border: var(--#{$prefix}card-border-width) solid + var(--#{$prefix}card-border-color); @include border-radius(var(--#{$prefix}card-border-radius)); @include box-shadow(var(--#{$prefix}card-box-shadow)); @@ -52,7 +53,7 @@ @include border-top-radius(var(--#{$prefix}card-inner-border-radius)); } - &:last-child { + &:last-child { border-bottom-width: 0; @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius)); } @@ -80,7 +81,9 @@ } .card-subtitle { - margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list + margin-top: calc( + -0.5 * var(--#{$prefix}card-title-spacer-y) + ); // stylelint-disable-line function-disallowed-list margin-bottom: 0; color: var(--#{$prefix}card-subtitle-color); } @@ -104,37 +107,52 @@ // .card-header { - padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x); + padding: var(--#{$prefix}card-cap-padding-y) + var(--#{$prefix}card-cap-padding-x); margin-bottom: 0; // Removes the default margin-bottom of color: var(--#{$prefix}card-cap-color); background-color: var(--#{$prefix}card-cap-bg); - border-bottom: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color); + border-bottom: var(--#{$prefix}card-border-width) solid + var(--#{$prefix}card-border-color); &:first-child { - @include border-radius(var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius) 0 0); + @include border-radius( + var(--#{$prefix}card-inner-border-radius) + var(--#{$prefix}card-inner-border-radius) 0 0 + ); } } .card-footer { - padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x); + padding: var(--#{$prefix}card-cap-padding-y) + var(--#{$prefix}card-cap-padding-x); color: var(--#{$prefix}card-cap-color); background-color: var(--#{$prefix}card-cap-bg); - border-top: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color); + border-top: var(--#{$prefix}card-border-width) solid + var(--#{$prefix}card-border-color); &:last-child { - @include border-radius(0 0 var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius)); + @include border-radius( + 0 0 var(--#{$prefix}card-inner-border-radius) + var(--#{$prefix}card-inner-border-radius) + ); } } - // // Header navs // .card-header-tabs { - margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list - margin-bottom: calc(-1 * var(--#{$prefix}card-cap-padding-y)); // stylelint-disable-line function-disallowed-list - margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list + margin-right: calc( + -0.5 * var(--#{$prefix}card-cap-padding-x) + ); // stylelint-disable-line function-disallowed-list + margin-bottom: calc( + -1 * var(--#{$prefix}card-cap-padding-y) + ); // stylelint-disable-line function-disallowed-list + margin-left: calc( + -0.5 * var(--#{$prefix}card-cap-padding-x) + ); // stylelint-disable-line function-disallowed-list border-bottom: 0; .nav-link.active { @@ -144,8 +162,12 @@ } .card-header-pills { - margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list - margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list + margin-right: calc( + -0.5 * var(--#{$prefix}card-cap-padding-x) + ); // stylelint-disable-line function-disallowed-list + margin-left: calc( + -0.5 * var(--#{$prefix}card-cap-padding-x) + ); // stylelint-disable-line function-disallowed-list } // Card image @@ -175,7 +197,6 @@ @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius)); } - // // Card groups // diff --git a/_sass/bootstrap/_carousel.scss b/_assets/styles/bootstrap/_carousel.scss similarity index 93% rename from _sass/bootstrap/_carousel.scss rename to _assets/styles/bootstrap/_carousel.scss index 0ac8f8714..543b26ced 100644 --- a/_sass/bootstrap/_carousel.scss +++ b/_assets/styles/bootstrap/_carousel.scss @@ -52,7 +52,6 @@ transform: translateX(-100%); } - // // Alternate transitions // @@ -79,7 +78,6 @@ } } - // // Left/right controls for nav // @@ -114,11 +112,19 @@ } .carousel-control-prev { left: 0; - background-image: if($enable-gradients, linear-gradient(90deg, rgba($black, .25), rgba($black, .001)), null); + background-image: if( + $enable-gradients, + linear-gradient(90deg, rgba($black, 0.25), rgba($black, 0.001)), + null + ); } .carousel-control-next { right: 0; - background-image: if($enable-gradients, linear-gradient(270deg, rgba($black, .25), rgba($black, .001)), null); + background-image: if( + $enable-gradients, + linear-gradient(270deg, rgba($black, 0.25), rgba($black, 0.001)), + null + ); } // Icons for within @@ -191,16 +197,15 @@ } } - // Optional captions // // .carousel-caption { position: absolute; - right: (100% - $carousel-caption-width) * .5; + right: (100% - $carousel-caption-width) * 0.5; bottom: $carousel-caption-spacer; - left: (100% - $carousel-caption-width) * .5; + left: (100% - $carousel-caption-width) * 0.5; padding-top: $carousel-caption-padding-y; padding-bottom: $carousel-caption-padding-y; color: $carousel-caption-color; @@ -230,7 +235,7 @@ @if $enable-dark-mode { @include color-mode(dark) { - @if $color-mode-type == "media-query" { + @if $color-mode-type == 'media-query' { .carousel { @include carousel-dark(); } diff --git a/_sass/bootstrap/_close.scss b/_assets/styles/bootstrap/_close.scss similarity index 93% rename from _sass/bootstrap/_close.scss rename to _assets/styles/bootstrap/_close.scss index 4d6e73c13..c410247f7 100644 --- a/_sass/bootstrap/_close.scss +++ b/_assets/styles/bootstrap/_close.scss @@ -6,7 +6,7 @@ .btn-close { // scss-docs-start close-css-vars --#{$prefix}btn-close-color: #{$btn-close-color}; - --#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg) }; + --#{$prefix}btn-close-bg: #{escape-svg($btn-close-bg)}; --#{$prefix}btn-close-opacity: #{$btn-close-opacity}; --#{$prefix}btn-close-hover-opacity: #{$btn-close-hover-opacity}; --#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow}; @@ -20,7 +20,8 @@ height: $btn-close-height; padding: $btn-close-padding-y $btn-close-padding-x; color: var(--#{$prefix}btn-close-color); - background: transparent var(--#{$prefix}btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements + background: transparent var(--#{$prefix}btn-close-bg) center / + $btn-close-width auto no-repeat; // include transparent for button elements border: 0; // for button elements @include border-radius(); opacity: var(--#{$prefix}btn-close-opacity); diff --git a/_sass/bootstrap/_containers.scss b/_assets/styles/bootstrap/_containers.scss similarity index 100% rename from _sass/bootstrap/_containers.scss rename to _assets/styles/bootstrap/_containers.scss diff --git a/_sass/bootstrap/_dropdown.scss b/_assets/styles/bootstrap/_dropdown.scss similarity index 92% rename from _sass/bootstrap/_dropdown.scss rename to _assets/styles/bootstrap/_dropdown.scss index 587ebb487..7cbc2fd63 100644 --- a/_sass/bootstrap/_dropdown.scss +++ b/_assets/styles/bootstrap/_dropdown.scss @@ -50,7 +50,8 @@ z-index: var(--#{$prefix}dropdown-zindex); display: none; // none by default, but block on "open" of the menu min-width: var(--#{$prefix}dropdown-min-width); - padding: var(--#{$prefix}dropdown-padding-y) var(--#{$prefix}dropdown-padding-x); + padding: var(--#{$prefix}dropdown-padding-y) + var(--#{$prefix}dropdown-padding-x); margin: 0; // Override default margin of ul @include font-size(var(--#{$prefix}dropdown-font-size)); color: var(--#{$prefix}dropdown-color); @@ -58,7 +59,8 @@ list-style: none; background-color: var(--#{$prefix}dropdown-bg); background-clip: padding-box; - border: var(--#{$prefix}dropdown-border-width) solid var(--#{$prefix}dropdown-border-color); + border: var(--#{$prefix}dropdown-border-width) solid + var(--#{$prefix}dropdown-border-color); @include border-radius(var(--#{$prefix}dropdown-border-radius)); @include box-shadow(var(--#{$prefix}dropdown-box-shadow)); @@ -75,9 +77,10 @@ } > .dropdown-item:last-child, > li:last-child .dropdown-item { - @include border-bottom-radius(var(--#{$prefix}dropdown-inner-border-radius)); + @include border-bottom-radius( + var(--#{$prefix}dropdown-inner-border-radius) + ); } - } } @@ -159,7 +162,6 @@ } } - // Dividers (basically an `
`) within the dropdown .dropdown-divider { height: 0; @@ -175,7 +177,8 @@ .dropdown-item { display: block; width: 100%; // For ` + Home + Blog + Docs + About + Contact +
-
- + +
diff --git a/_includes/toc.html b/_includes/toc.html deleted file mode 100644 index bc90d08a9..000000000 --- a/_includes/toc.html +++ /dev/null @@ -1,189 +0,0 @@ -{% capture tocWorkspace %} - {% comment %} - Copyright (c) 2017 Vladimir "allejo" Jimenez - - Permission is hereby granted, free of charge, to any person - obtaining a copy of this software and associated documentation - files (the "Software"), to deal in the Software without - restriction, including without limitation the rights to use, - copy, modify, merge, publish, distribute, sublicense, and/or sell - copies of the Software, and to permit persons to whom the - Software is furnished to do so, subject to the following - conditions: - - The above copyright notice and this permission notice shall be - included in all copies or substantial portions of the Software. - - THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, - EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES - OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND - NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT - HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, - WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING - FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR - OTHER DEALINGS IN THE SOFTWARE. - {% endcomment %} - {% comment %} - Version 1.2.1 - https://github.com/allejo/jekyll-toc - - "...like all things liquid - where there's a will, and ~36 hours to spare, there's usually a/some way" ~jaybe - - Usage: - {% include toc.html html=content sanitize=true class="inline_toc" id="my_toc" h_min=2 h_max=3 %} - - Parameters: - * html (string) - the HTML of compiled markdown generated by kramdown in Jekyll - - Optional Parameters: - * sanitize (bool) : false - when set to true, the headers will be stripped of any HTML in the TOC - * class (string) : '' - a CSS class assigned to the TOC - * id (string) : '' - an ID to assigned to the TOC - * h_min (int) : 1 - the minimum TOC header level to use; any header lower than this value will be ignored - * h_max (int) : 6 - the maximum TOC header level to use; any header greater than this value will be ignored - * ordered (bool) : false - when set to true, an ordered list will be outputted instead of an unordered list - * item_class (string) : '' - add custom class(es) for each list item; has support for '%level%' placeholder, which is the current heading level - * submenu_class (string) : '' - add custom class(es) for each child group of headings; has support for '%level%' placeholder which is the current "submenu" heading level - * base_url (string) : '' - add a base url to the TOC links for when your TOC is on another page than the actual content - * anchor_class (string) : '' - add custom class(es) for each anchor element - * skip_no_ids (bool) : false - skip headers that do not have an `id` attribute - * flat_toc (bool) : false - when set to true, the TOC will be a single level list - - Output: - An ordered or unordered list representing the table of contents of a markdown block. This snippet will only - generate the table of contents and will NOT output the markdown given to it - {% endcomment %} - - {% capture newline %} - {% endcapture %} - {% assign newline = newline | rstrip %} - - {% capture deprecation_warnings %}{% endcapture %} - - {% if include.baseurl %} - {% capture deprecation_warnings %}{{ deprecation_warnings }}{{ newline }}{% endcapture %} - {% endif %} - - {% if include.skipNoIDs %} - {% capture deprecation_warnings %}{{ deprecation_warnings }}{{ newline }}{% endcapture %} - {% endif %} - - {% capture jekyll_toc %}{% endcapture %} - {% assign orderedList = include.ordered | default: false %} - {% assign flatToc = include.flat_toc | default: false %} - {% assign baseURL = include.base_url | default: include.baseurl | default: '' %} - {% assign skipNoIDs = include.skip_no_ids | default: include.skipNoIDs | default: false %} - {% assign minHeader = include.h_min | default: 1 %} - {% assign maxHeader = include.h_max | default: 6 %} - {% assign nodes = include.html | strip | split: ' maxHeader %} - {% continue %} - {% endif %} - - {% assign _workspace = node | split: '' | first }}>{% endcapture %} - {% assign header = _workspace[0] | replace: _hAttrToStrip, '' %} - - {% if include.item_class and include.item_class != blank %} - {% capture listItemClass %} class="{{ include.item_class | replace: '%level%', currLevel | split: '.' | join: ' ' }}"{% endcapture %} - {% endif %} - - {% if include.submenu_class and include.submenu_class != blank %} - {% assign subMenuLevel = currLevel | minus: 1 %} - {% capture subMenuClass %} class="{{ include.submenu_class | replace: '%level%', subMenuLevel | split: '.' | join: ' ' }}"{% endcapture %} - {% endif %} - - {% capture anchorBody %}{% if include.sanitize %}{{ header | strip_html }}{% else %}{{ header }}{% endif %}{% endcapture %} - - {% if htmlID %} - {% capture anchorAttributes %} href="{% if baseURL %}{{ baseURL }}{% endif %}#{{ htmlID }}"{% endcapture %} - - {% if include.anchor_class %} - {% capture anchorAttributes %}{{ anchorAttributes }} class="{{ include.anchor_class | split: '.' | join: ' ' }}"{% endcapture %} - {% endif %} - - {% capture listItem %}{{ anchorBody }}{% endcapture %} - {% elsif skipNoIDs == true %} - {% continue %} - {% else %} - {% capture listItem %}{{ anchorBody }}{% endcapture %} - {% endif %} - - {% if currLevel > lastLevel and flatToc == false %} - {% capture jekyll_toc %}{{ jekyll_toc }}<{{ listModifier }}{{ subMenuClass }}>{% endcapture %} - {% elsif currLevel < lastLevel and flatToc == false %} - {% assign repeatCount = lastLevel | minus: currLevel %} - - {% for i in (1..repeatCount) %} - {% capture jekyll_toc %}{{ jekyll_toc }}{% endcapture %} - {% endfor %} - - {% capture jekyll_toc %}{{ jekyll_toc }}{% endcapture %} - {% else %} - {% capture jekyll_toc %}{{ jekyll_toc }}{% endcapture %} - {% endif %} - - {% capture jekyll_toc %}{{ jekyll_toc }}{{ listItem }}{% endcapture %} - - {% assign lastLevel = currLevel %} - {% assign firstHeader = false %} - {% endfor %} - - {% if flatToc == true %} - {% assign repeatCount = 1 %} - {% else %} - {% assign repeatCount = minHeader | minus: 1 %} - {% assign repeatCount = lastLevel | minus: repeatCount %} - {% endif %} - - {% for i in (1..repeatCount) %} - {% capture jekyll_toc %}{{ jekyll_toc }}{% endcapture %} - {% endfor %} - - {% if jekyll_toc != '' %} - {% assign rootAttributes = '' %} - {% if include.class and include.class != blank %} - {% capture rootAttributes %} class="{{ include.class | split: '.' | join: ' ' }}"{% endcapture %} - {% endif %} - - {% if include.id and include.id != blank %} - {% capture rootAttributes %}{{ rootAttributes }} id="{{ include.id }}"{% endcapture %} - {% endif %} - - {% if rootAttributes %} - {% assign nodes = jekyll_toc | split: '>' %} - {% capture jekyll_toc %}<{{ listModifier }}{{ rootAttributes }}>{{ nodes | shift | join: '>' }}>{% endcapture %} - {% endif %} - {% endif %} -{% endcapture %}{% assign tocWorkspace = '' %}{{ deprecation_warnings }}{{ jekyll_toc -}} diff --git a/_layouts/deep-page.html b/_layouts/deep-page.html index 649dccdc7..a88cb0e31 100644 --- a/_layouts/deep-page.html +++ b/_layouts/deep-page.html @@ -3,11 +3,11 @@ editable: true class: --- -
{%- if page.permalink != '/' -%} -

{{ page.title }}

- {%- endif -%} {{ content }} +

{{ page.title }}

+ {%- endif -%} + {{ content }}
diff --git a/_layouts/default.html b/_layouts/default.html index f62fe822f..f134bce5b 100755 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -1,14 +1,26 @@ ---- -layout: compress ---- + + + {%- include head.html -%} - - -{%- include head.html -%} + {%- assign classes = page.body_classes + | join: ' ' + | where: 'page.body_classes', empty + -%} -{%- assign classes = page.body_classes | join: " " | where: 'page.body_classes', empty -%} - - - {%- include header.html -%} {{- content -}} {%- include footer.html -%} - + + {%- include header.html -%} + {{- content -}} + {%- include footer.html -%} + diff --git a/_layouts/docs.html b/_layouts/docs.html index d5d9baee8..5845e62c6 100755 --- a/_layouts/docs.html +++ b/_layouts/docs.html @@ -2,18 +2,17 @@ body_classes: - docs --- -
{% if page.editable != false %} -
- Edit -
+
+ Edit +
{% endif %}

{{ page.title }}

{{ content }} diff --git a/_layouts/handbook-content-g-devdocs-style.html b/_layouts/handbook-content-g-devdocs-style.html index 58f4f4bc2..bcea29ea8 100644 --- a/_layouts/handbook-content-g-devdocs-style.html +++ b/_layouts/handbook-content-g-devdocs-style.html @@ -2,11 +2,11 @@
{%- if page.editable != false -%} -
- Edit -
+
+ Edit +
{%- endif -%}

{{ page.title }}

@@ -21,27 +21,23 @@

{{ page.title }}

rel="license nofollow noopener noreferrer" target="_blank" href="https://creativecommons.org/licenses/by/4.0/" - title="Creative Commons Attribution 4.0 International license" - > + title="Creative Commons Attribution 4.0 International license"> CC logo icon + title="Creative Commons icon"> CC BY icon + title="Attribution icon">