├── .babelrc ├── .dependabot └── config.yml ├── .eslintrc.yml ├── .github ├── ISSUE_TEMPLATE.md └── PULL_REQUEST_TEMPLATE.md ├── .gitignore ├── .nvmrc ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── cypress.config.js ├── cypress ├── e2e │ └── basic.cy.js ├── fixtures │ └── example.json └── support │ ├── commands.js │ └── e2e.js ├── netlify.toml ├── package.json ├── postcss.config.js ├── renovate.json ├── site ├── assets │ └── img │ │ ├── icons-facebook.svg │ │ ├── icons-instagram.svg │ │ ├── icons-twitter.svg │ │ └── icons-vimeo.svg ├── content │ ├── .keep │ ├── _index.md │ ├── contact │ │ └── _index.md │ ├── post │ │ ├── brewing-chemex │ │ │ ├── blog-chemex.jpg │ │ │ └── index.md │ │ ├── jamaica-blue │ │ │ └── index.md │ │ └── making-sense │ │ │ ├── blog-flavor_wheel.jpg │ │ │ └── index.md │ ├── products │ │ └── _index.md │ └── values │ │ └── _index.md ├── data │ ├── .keep │ └── footer.json ├── hugo.toml ├── layouts │ ├── 404.html │ ├── _default │ │ ├── baseof.html │ │ ├── li.html │ │ ├── list.html │ │ └── single.html │ ├── index.html │ ├── partials │ │ ├── 2-up.html │ │ ├── 4-up.html │ │ ├── blockquote.html │ │ ├── blog.html │ │ ├── contact-form.html │ │ ├── footer.html │ │ ├── head.html │ │ ├── image-grid.html │ │ ├── jumbotron.html │ │ ├── media-block-reverse.html │ │ ├── media-block.html │ │ ├── nav.html │ │ ├── newsletter-form.html │ │ ├── pagination.html │ │ ├── short-text.html │ │ ├── social-icon.html │ │ ├── table-column.html │ │ ├── table.html │ │ └── text-and-image.html │ ├── post │ │ └── single.html │ └── section │ │ ├── contact.html │ │ ├── products.html │ │ └── values.html └── static │ ├── .keep │ ├── admin │ └── config.yml │ ├── browserconfig.xml │ ├── img │ ├── about-direct-sourcing.jpg │ ├── about-jumbotron.jpg │ ├── about-reinvest-profits.jpg │ ├── about-shade-grown.jpg │ ├── about-single-origin.jpg │ ├── about-sustainable-farming.jpg │ ├── android-chrome-192x192.png │ ├── android-chrome-512x512.png │ ├── apple-touch-icon.png │ ├── blog-index.jpg │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ ├── home-about-section.jpg │ ├── home-jumbotron.jpg │ ├── illustrations-coffee-gear.svg │ ├── illustrations-coffee.svg │ ├── illustrations-meeting-space.svg │ ├── illustrations-tutorials.svg │ ├── logo.svg │ ├── mstile-144x144.png │ ├── mstile-150x150.png │ ├── mstile-310x150.png │ ├── mstile-310x310.png │ ├── mstile-70x70.png │ ├── og-image.jpg │ ├── products-full-width.jpg │ ├── products-grid1.jpg │ ├── products-grid2.jpg │ ├── products-grid3.jpg │ ├── products-jumbotron.jpg │ └── safari-pinned-tab.svg │ └── manifest.json ├── src ├── cms.html ├── css │ ├── imports │ │ ├── _background-position.scss │ │ ├── _background-size.scss │ │ ├── _border-colors.scss │ │ ├── _border-radius.scss │ │ ├── _border-style.scss │ │ ├── _border-widths.scss │ │ ├── _borders.scss │ │ ├── _box-sizing.scss │ │ ├── _buttons.scss │ │ ├── _clears.scss │ │ ├── _cms.scss │ │ ├── _code.scss │ │ ├── _colors.scss │ │ ├── _coordinates.scss │ │ ├── _debug-children.scss │ │ ├── _debug-grid.scss │ │ ├── _debug.scss │ │ ├── _display.scss │ │ ├── _flexbox.scss │ │ ├── _floats.scss │ │ ├── _font-style.scss │ │ ├── _font-weight.scss │ │ ├── _forms.scss │ │ ├── _heights.scss │ │ ├── _images.scss │ │ ├── _line-height.scss │ │ ├── _links.scss │ │ ├── _lists.scss │ │ ├── _max-widths.scss │ │ ├── _media-queries.scss │ │ ├── _opacity.scss │ │ ├── _outlines.scss │ │ ├── _overflow.scss │ │ ├── _position.scss │ │ ├── _reset.scss │ │ ├── _responsive-nav.scss │ │ ├── _spacing.scss │ │ ├── _states.scss │ │ ├── _styles.scss │ │ ├── _svg.scss │ │ ├── _tables.scss │ │ ├── _text-align.scss │ │ ├── _text-decoration.scss │ │ ├── _text-transform.scss │ │ ├── _type-scale.scss │ │ ├── _typography.scss │ │ ├── _utilities.scss │ │ ├── _variables.scss │ │ ├── _vertical-align.scss │ │ ├── _visibility.scss │ │ ├── _white-space.scss │ │ ├── _widths.scss │ │ ├── _word-break.scss │ │ └── _z-index.scss │ └── main.scss ├── fonts │ └── .keep ├── index.js └── js │ ├── app.js │ ├── cms-preview-templates │ ├── components │ │ └── jumbotron.js │ ├── contact.js │ ├── footer.js │ ├── home.js │ ├── post.js │ ├── products.js │ └── values.js │ └── cms.js ├── webpack.common.js ├── webpack.dev.js ├── webpack.prod.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-react" 5 | ], 6 | "plugins": [ 7 | "@babel/plugin-syntax-object-rest-spread", 8 | "@babel/plugin-proposal-object-rest-spread" 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /.dependabot/config.yml: -------------------------------------------------------------------------------- 1 | version: 1 2 | 3 | update_configs: 4 | - package_manager: javascript 5 | directory: / 6 | update_schedule: live 7 | allowed_updates: 8 | - match: 9 | update_type: security 10 | automerged_updates: 11 | - match: 12 | dependency_type: all 13 | update_type: in_range 14 | version_requirement_updates: widen_ranges -------------------------------------------------------------------------------- /.eslintrc.yml: -------------------------------------------------------------------------------- 1 | env: 2 | browser: true 3 | 4 | parser: "@babel/eslint-parser" 5 | 6 | parserOptions: 7 | ecmaVersion: 6 8 | 9 | plugins: [ "import" ] 10 | 11 | extends: [ 12 | "plugin:react/recommended", 13 | "plugin:cypress/recommended" 14 | ] 15 | 16 | settings: 17 | react: 18 | version: detect 19 | 20 | rules: 21 | # Possible Errors 22 | # https://github.com/eslint/eslint/tree/master/docs/rules#possible-errors 23 | no-control-regex: 2 24 | no-console: 1 25 | no-debugger: 2 26 | no-dupe-args: 2 27 | no-dupe-keys: 2 28 | no-duplicate-case: 2 29 | no-empty-character-class: 2 30 | no-ex-assign: 2 31 | no-extra-boolean-cast : 2 32 | no-extra-semi: 2 33 | no-invalid-regexp: 2 34 | no-irregular-whitespace: 1 35 | no-proto: 2 36 | no-unexpected-multiline: 2 37 | no-unreachable: 2 38 | valid-typeof: 2 39 | 40 | # Best Practices 41 | # https://github.com/eslint/eslint/tree/master/docs/rules#best-practices 42 | no-fallthrough: 2 43 | no-redeclare: 2 44 | 45 | # Stylistic Issues 46 | # https://github.com/eslint/eslint/tree/master/docs/rules#stylistic-issues 47 | comma-spacing: 2 48 | eol-last: 2 49 | eqeqeq: ["error", "smart"] 50 | indent: [2, 2, {SwitchCase: 1}] 51 | keyword-spacing: 2 52 | max-len: [1, 160, 2] 53 | new-parens: 2 54 | no-mixed-spaces-and-tabs: 2 55 | no-multiple-empty-lines: [2, {max: 2}] 56 | no-trailing-spaces: 2 57 | object-curly-spacing: [2, "never"] 58 | quotes: [2, "double", "avoid-escape"] 59 | semi: 2 60 | space-before-blocks: [2, "always"] 61 | space-before-function-paren: [2, "never"] 62 | space-in-parens: [2, "never"] 63 | space-infix-ops: 2 64 | space-unary-ops: 2 65 | 66 | # ECMAScript 6 67 | # http://eslint.org/docs/rules/#ecmascript-6 68 | arrow-parens: [2, "always"] 69 | arrow-spacing: [2, {"before": true, "after": true}] 70 | no-confusing-arrow: 2 71 | prefer-const: 2 72 | 73 | # JSX 74 | jsx-quotes: [2, "prefer-double"] 75 | 76 | # Import 77 | import/no-unresolved: [1, {"commonjs": true, "amd": true}] 78 | import/export: 2 79 | 80 | # Strict Mode 81 | # https://github.com/eslint/eslint/tree/master/docs/rules#strict-mode 82 | strict: [2, "global"] 83 | 84 | # Variables 85 | # https://github.com/eslint/eslint/tree/master/docs/rules#variables 86 | no-undef: 2 87 | no-unused-vars: [2, {"args": "none"}] 88 | 89 | # turn off PropType checking 90 | # https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/prop-types.md 91 | react/prop-types: [0] 92 | 93 | # Global scoped method and vars 94 | globals: 95 | __dirname: true 96 | require: true 97 | process: true 98 | ENV: true 99 | module: true 100 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 18 | 19 | **- Do you want to request a *feature* or report a *bug*?** 20 | 21 | **- What is the current behavior?** 22 | 23 | **- If the current behavior is a bug, please provide the steps to reproduce.** 24 | 25 | **- What is the expected behavior?** 26 | 27 | **- Please mention your node.js, NPM, and operating system version.** 28 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 13 | 14 | **- Summary** 15 | 16 | 20 | 21 | **- Test plan** 22 | 23 | 27 | 28 | **- Description for the changelog** 29 | 30 | 34 | 35 | **- A picture of a cute animal (not mandatory but encouraged)** 36 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ 3 | site/data/webpack.json 4 | /npm-debug.log 5 | yarn-error.log 6 | .netlify/ 7 | .hugo_build.lock 8 | 9 | cypress/videos 10 | cypress/screenshots -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 16 2 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, gender identity and expression, level of experience, 9 | nationality, personal appearance, race, religion, or sexual identity and 10 | orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at david@netlify.com. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at [http://contributor-covenant.org/version/1/4][version] 72 | 73 | [homepage]: http://contributor-covenant.org 74 | [version]: http://contributor-covenant.org/version/1/4/ 75 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # CONTRIBUTING 2 | 3 | Contributions are always welcome, no matter how large or small. Before contributing, 4 | please read the [code of conduct](CODE_OF_CONDUCT.md). 5 | 6 | ## Setup 7 | 8 | ```sh 9 | $ git clone https://github.com/decaporg/one-click-hugo-cms 10 | $ cd one-click-hugo-cms 11 | $ yarn 12 | ``` 13 | 14 | ## Building 15 | 16 | ```sh 17 | $ yarn build 18 | ``` 19 | 20 | ## Running the server 21 | 22 | ```sh 23 | $ yarn start 24 | ``` 25 | 26 | ## Testing 27 | 28 | With the development server running: 29 | 30 | ```sh 31 | $ yarn cypress:run 32 | ``` 33 | 34 | ## Linting 35 | 36 | ```sh 37 | $ yarn lint 38 | ``` 39 | 40 | ## Pull Requests 41 | 42 | We actively welcome your pull requests. 43 | 44 | 1. Fork the repo and create your branch from `main`. 45 | 2. If you've added code that should be tested, add tests. 46 | 3. If you've changed APIs, update the documentation. 47 | 4. Ensure the test suite passes. 48 | 5. Make sure your code lints. 49 | 50 | ## License 51 | 52 | By contributing to the Hugo template for Decap CMS with Netlify Identity, 53 | you agree that your contributions will be licensed 54 | under its [MIT license](LICENSE). 55 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2016 Netlify 2 | 3 | MIT License 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining 6 | a copy of this software and associated documentation files (the 7 | "Software"), to deal in the Software without restriction, including 8 | without limitation the rights to use, copy, modify, merge, publish, 9 | distribute, sublicense, and/or sell copies of the Software, and to 10 | permit persons to whom the Software is furnished to do so, subject to 11 | the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be 14 | included in all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 19 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 20 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 21 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 22 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Hugo template for Decap CMS with Netlify Identity 2 | 3 | This is a small business template built with [Hugo](https://gohugo.io) and [Decap CMS](https://github.com/decaporg/decap-cms), designed and developed by [Darin Dimitroff](https://twitter.com/deezel), [spacefarm.digital](https://www.spacefarm.digital). 4 | 5 | ## Getting started 6 | 7 | Use our deploy button to get your own copy of the repository. 8 | 9 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/decaporg/one-click-hugo-cms&stack=cms) 10 | 11 | This will setup everything needed for running the CMS: 12 | 13 | * A new repository in your GitHub account with the code 14 | * Full Continuous Deployment to Netlify's global CDN network 15 | * Control users and access with Netlify Identity 16 | * Manage content with Decap CMS 17 | 18 | Once the initial build finishes, you can invite yourself as a user. Go to the Identity tab in your new site, click "Invite" and send yourself an invite. 19 | 20 | Now you're all set, and you can start editing content! 21 | 22 | ## Local Development 23 | 24 | Clone this repository, and run `yarn` or `npm install` from the new folder to install all required dependencies. 25 | 26 | Then start the development server with `yarn start` or `npm start`. 27 | 28 | ## Testing 29 | 30 | With the development server running, run the tests locally 31 | with `yarn cypress:run` or `npm run cypress:run`. 32 | Or use `yarn cypress:open` or `npm run cypress:open` to run interactively. 33 | 34 | Cypress tests also run on deploy with the [Cypress Netlify integration](https://www.netlify.com/integrations/cypress/). 35 | 36 | ## Layouts 37 | 38 | The template is based on small, content-agnostic partials that can be mixed and matched. The pre-built pages showcase just a few of the possible combinations. Refer to the `site/layouts/partials` folder for all available partials. 39 | 40 | Use Hugo’s `dict` functionality to feed content into partials and avoid repeating yourself and creating discrepancies. 41 | 42 | ## CSS 43 | 44 | The template uses a custom fork of Tachyons and PostCSS with cssnext and cssnano. To customize the template for your brand, refer to `src/css/imports/_variables.css` where most of the important global variables like colors and spacing are stored. 45 | 46 | ## SVG Social Icons 47 | 48 | The social media icons are in `site/assets/img`. 49 | Make sure you use consistent icons in terms of viewport and art direction for optimal results. 50 | For an icon named `icons-facebook.svg`, refer to the SVG `social-icon` partial like so: 51 | 52 | ``` 53 | {{ partial "social-icon" (dict "link" "#" "svg" "icons-facebook" "alt" "Kaldi on Facebook") }} 54 | ``` 55 | -------------------------------------------------------------------------------- /cypress.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require("cypress"); 2 | 3 | module.exports = defineConfig({ 4 | projectId: "smvz27", 5 | e2e: { 6 | baseUrl: "http://localhost:3000", 7 | supportFile: false 8 | }, 9 | }); 10 | -------------------------------------------------------------------------------- /cypress/e2e/basic.cy.js: -------------------------------------------------------------------------------- 1 | describe("empty spec", () => { 2 | beforeEach(() => { 3 | cy.visit("/"); 4 | }); 5 | 6 | it("opens the index page", () => { 7 | cy.get("h1").contains("Great coffee with a conscience"); 8 | }); 9 | 10 | it("navigates to the product page", () => { 11 | cy.get('a[href="/products"]').eq(0).click(); 12 | cy.url().should("include", "/products"); 13 | cy.get("h1").contains(/Our Coffee/i); 14 | }); 15 | 16 | it("navigates to the values page", () => { 17 | cy.get('a[href="/values"]').eq(0).click(); 18 | cy.url().should("include", "/values"); 19 | cy.get("h1").contains(/Values/i); 20 | }); 21 | 22 | it("navigates to the blog page", () => { 23 | cy.get('a[href="/post"]').eq(0).click(); 24 | cy.url().should("include", "/post"); 25 | cy.get("h1").contains(/Latest Stories/i); 26 | }); 27 | }); 28 | 29 | describe("validate blog", () => { 30 | it("should have only 3 blog posts by default", () => { 31 | cy.visit("/post"); 32 | cy.get("ul#blog-list li").should("have.length", 3); 33 | }); 34 | }); 35 | -------------------------------------------------------------------------------- /cypress/fixtures/example.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Using fixtures to represent data", 3 | "email": "hello@cypress.io", 4 | "body": "Fixtures are a great way to mock data for responses to routes" 5 | } 6 | -------------------------------------------------------------------------------- /cypress/support/commands.js: -------------------------------------------------------------------------------- 1 | // *********************************************** 2 | // This example commands.js shows you how to 3 | // create various custom commands and overwrite 4 | // existing commands. 5 | // 6 | // For more comprehensive examples of custom 7 | // commands please read more here: 8 | // https://on.cypress.io/custom-commands 9 | // *********************************************** 10 | // 11 | // 12 | // -- This is a parent command -- 13 | // Cypress.Commands.add('login', (email, password) => { ... }) 14 | // 15 | // 16 | // -- This is a child command -- 17 | // Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... }) 18 | // 19 | // 20 | // -- This is a dual command -- 21 | // Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... }) 22 | // 23 | // 24 | // -- This will overwrite an existing command -- 25 | // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... }) 26 | -------------------------------------------------------------------------------- /cypress/support/e2e.js: -------------------------------------------------------------------------------- 1 | // *********************************************************** 2 | // This example support/e2e.js is processed and 3 | // loaded automatically before your test files. 4 | // 5 | // This is a great place to put global configuration and 6 | // behavior that modifies Cypress. 7 | // 8 | // You can change the location of this file or turn off 9 | // automatically serving support files with the 10 | // 'supportFile' configuration option. 11 | // 12 | // You can read more here: 13 | // https://on.cypress.io/configuration 14 | // *********************************************************** 15 | 16 | // Import commands.js using ES2015 syntax: 17 | import "./commands"; 18 | 19 | // Alternatively you can use CommonJS syntax: 20 | // require('./commands') 21 | -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [build.environment] 2 | NETLIFY_USE_YARN = "true" 3 | YARN_VERSION = "1.22.17" 4 | 5 | [build] 6 | command = "yarn build" 7 | publish = "dist" 8 | 9 | [context.deploy-preview] 10 | command = "yarn build:preview" 11 | 12 | [dev] 13 | framework = "hugo" 14 | targetPort = 3000 15 | 16 | [[plugins]] 17 | package = "netlify-plugin-cypress" 18 | 19 | [plugins.inputs] 20 | record = true -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "one-click-hugo-cms", 3 | "version": "1.0.0", 4 | "description": "Hugo template with Decap CMS ", 5 | "repository": "decaporg/one-click-hugo-cms", 6 | "main": "index.js", 7 | "scripts": { 8 | "lint": "eslint src cypress", 9 | "start": "run-p start:**", 10 | "start:hugo": "hugo -d ../dist -s site -vw", 11 | "start:webpack": "webpack-dev-server --config webpack.dev.js --hot", 12 | "preview": "run-p preview:**", 13 | "preview:hugo": "npm run start:hugo -- -D -F", 14 | "preview:webpack": "npm run start:webpack", 15 | "prebuild": "rimraf dist", 16 | "build": "npm run build:webpack && npm run build:hugo", 17 | "build:preview": "npm run build:webpack && npm run build:hugo:preview", 18 | "build:hugo": "hugo -d ../dist -s site -v", 19 | "build:hugo:preview": "npm run build:hugo -- -D -F", 20 | "build:webpack": "cross-env NODE_ENV=production webpack --config webpack.prod.js", 21 | "cypress:open": "cypress open --e2e", 22 | "cypress:run": "cypress run --e2e" 23 | }, 24 | "author": "", 25 | "license": "MIT", 26 | "devDependencies": { 27 | "@babel/core": "^7.16.0", 28 | "@babel/eslint-parser": "^7.16.3", 29 | "@babel/plugin-proposal-object-rest-spread": "^7.20.7", 30 | "@babel/preset-env": "^7.16.0", 31 | "@babel/register": "^7.16.0", 32 | "assets-webpack-plugin": "^7.1.1", 33 | "autoprefixer": "^10.4.7", 34 | "babel-loader": "^8.2.3", 35 | "clean-webpack-plugin": "^4.0.0", 36 | "copy-webpack-plugin": "^9.1.0", 37 | "cross-env": "^7.0.3", 38 | "css-loader": "^6.5.1", 39 | "css-minimizer-webpack-plugin": "^4.0.0", 40 | "eslint": "^8.2.0", 41 | "eslint-plugin-cypress": "^2.13.3", 42 | "eslint-plugin-import": "^2.26.0", 43 | "eslint-plugin-react": "^7.32.2", 44 | "exports-loader": "^3.1.0", 45 | "file-loader": "^6.2.0", 46 | "html-webpack-plugin": "^5.5.0", 47 | "hugo-bin": "^0.98.0", 48 | "imports-loader": "^3.1.1", 49 | "mini-css-extract-plugin": "^2.4.4", 50 | "npm-run-all": "^4.1.5", 51 | "postcss": "^8.3.11", 52 | "postcss-custom-media": "^8.0.2", 53 | "postcss-import": "^14.0.2", 54 | "postcss-loader": "^6.2.0", 55 | "postcss-preset-env": "^7.7.2", 56 | "sass": "^1.53.0", 57 | "sass-loader": "^12.3.0", 58 | "style-loader": "^3.3.1", 59 | "terser-webpack-plugin": "^5.2.5", 60 | "webpack": "^5.64.1", 61 | "webpack-cli": "^4.9.1", 62 | "webpack-dev-server": "^4.5.0", 63 | "webpack-merge": "^5.8.0" 64 | }, 65 | "dependencies": { 66 | "@babel/preset-react": "^7.17.12", 67 | "cypress": "^10.5.0", 68 | "date-fns": "^2.28.0", 69 | "decap-cms-app": "^3.0.2", 70 | "immutable": "^4.1.0", 71 | "netlify-plugin-cypress": "^2.2.1", 72 | "react": "^17.0.2", 73 | "react-dom": "^17.0.2", 74 | "to-string-loader": "^1.2.0" 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | ["postcss-import",{}], 4 | ["postcss-preset-env",{ 5 | browsers: "last 2 versions" 6 | }], 7 | ["postcss-custom-media",{}], 8 | ["autoprefixer",{}] 9 | ] 10 | }; 11 | -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["github>netlify/renovate-config:netlify-cms-starter"] 3 | } 4 | -------------------------------------------------------------------------------- /site/assets/img/icons-facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 9 | 10 | -------------------------------------------------------------------------------- /site/assets/img/icons-instagram.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 10 | 11 | -------------------------------------------------------------------------------- /site/assets/img/icons-twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 11 | 12 | -------------------------------------------------------------------------------- /site/assets/img/icons-vimeo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 10 | 11 | -------------------------------------------------------------------------------- /site/content/.keep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/decaporg/one-click-hugo-cms/3d692070bd1d379eea5b81ced9a7536215c5e761/site/content/.keep -------------------------------------------------------------------------------- /site/content/_index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Great coffee with a conscience" 3 | subtitle: Support sustainable farming while enjoying a cup 4 | image: /img/home-jumbotron.jpg 5 | blurb: 6 | heading: Why Kaldi? 7 | text: "Kaldi is the coffee store for everyone who believes that great coffee shouldn't just taste good, it should do good too. We source all of our beans directly from small scale sustainable farmers and make sure part of the profits are reinvested in their communities." 8 | intro: 9 | heading: "What we offer" 10 | text: "Kaldi is the ultimate spot for coffee lovers who want to learn about their java’s origin and support the farmers that grew it. We take coffee production, roasting and brewing seriously and we’re glad to pass that knowledge to anyone." 11 | products: 12 | - image: img/illustrations-coffee.svg 13 | text: "We sell green and roasted coffee beans that are sourced directly from independent farmers and farm cooperatives. We’re proud to offer a variety of coffee beans grown with great care for the environment and local communities. Check our post or contact us directly for current availability." 14 | - image: /img/illustrations-coffee-gear.svg 15 | text: "We offer a small, but carefully curated selection of brewing gear and tools for every taste and experience level. No matter if you roast your own beans or just bought your first french press, you’ll find a gadget to fall in love with in our shop." 16 | values: 17 | heading: Our values 18 | text: Coffee is an amazing part of human culture but it has a dark side too – one of colonialism and mindless abuse of natural resources and human lives. We want to turn this around and return the coffee trade to the drink’s exhilarating, empowering and unifying nature. 19 | --- 20 | 21 | -------------------------------------------------------------------------------- /site/content/contact/_index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Contact" 3 | logo: "/img/logo.svg" 4 | contact_entries: 5 | - heading: Location 6 | text: "3153 Lynn Avenue, South San Francisco, California 94080" 7 | - heading: Working hours 8 | text: "Monday – Saturday: 9AM – 7PM We’re closed on Sundays" 9 | --- 10 | 11 | We’d love to get in touch with you and hear your ideas and 12 | questions. We strive to grow and improve constantly and your feedback 13 | is valuable for us. 14 | 15 |

How can I get…?

16 | 17 | You can also use the form below for any inquiries about coffee 18 | availability, monthly subscriptions and scheduling a 1-on-1 session 19 | with our baristas. Don’t be shy, drop us a line! 20 | -------------------------------------------------------------------------------- /site/content/post/brewing-chemex/blog-chemex.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/decaporg/one-click-hugo-cms/3d692070bd1d379eea5b81ced9a7536215c5e761/site/content/post/brewing-chemex/blog-chemex.jpg -------------------------------------------------------------------------------- /site/content/post/brewing-chemex/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: A beginners’ guide to brewing with Chemex 3 | date: 2017-01-04T15:04:10.000Z 4 | description: Brewing with a Chemex probably seems like a complicated, 5 | time-consuming ordeal, but once you get used to the process, it becomes a 6 | soothing ritual that's worth the effort every time. 7 | image: blog-chemex.jpg 8 | --- 9 | 10 | This [week](/wdwdw) we’ll **take** a look at all the steps required to make astonishing coffee with a Chemex at home. The Chemex Coffeemaker is a manual, pour-over style glass-container coffeemaker that Peter Schlumbohm invented in 1941, and which continues to be manufactured by the Chemex Corporation in Chicopee, Massachusetts\*. 11 | 12 | In 1958, designers at the [Illinois Institute of Technology](https://www.spacefarm.digital) said that the Chemex Coffeemaker is *"one of the best-designed products of modern times"*, and so is included in the collection of the Museum of Modern Art in New York City. 13 | 14 | ## The little secrets of Chemex brewing 15 | 16 | The Chemex Coffeemaker consists of an hourglass-shaped glass flask with a conical funnel-like neck (rather than the cylindrical neck of an Erlenmeyer flask) and uses proprietary filters, made of bonded paper (thicker-gauge paper than the standard paper filters for a drip-method coffeemaker) that removes most of the coffee oils, brewing coffee with a taste that is different than coffee brewed in other coffee-making systems; also, the thicker paper of the Chemex coffee filters may assist in removing cafestol, a cholesterol-containing compound found in coffee oils. Here’s three important tips newbies forget about: 17 | 18 | 1. Always buy dedicated Chemex filters. 19 | 2. Use a scale, don’t try to eyeball it. 20 | 3. Never skip preheating the glass. 21 | 4. Timing is key, don’t forget the clock. 22 | 23 | The most visually distinctive feature of the Chemex is the heatproof wooden collar around the neck, allowing it to be handled and poured when full of hot water. This is turned, then split in two to allow it to fit around the glass neck. The two pieces are held loosely in place by a tied leather thong. The pieces are not tied tightly and can still move slightly, retained by the shape of the conical glass. 24 | 25 | For a design piece that became popular post-war at a time of Modernism and precision manufacture, this juxtaposition of natural wood and the organic nature of a hand-tied knot with the laboratory nature of glassware was a distinctive feature of its appearance. 26 | -------------------------------------------------------------------------------- /site/content/post/jamaica-blue/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Just in: small batch of Jamaican Blue Mountain in store next week' 3 | date: 2017-01-04T15:04:10.000Z 4 | description: >- 5 | We’re proud to announce that we’ll be offering a small batch of Jamaica Blue 6 | Mountain coffee beans in our store next week. 7 | --- 8 | 9 | We expect the shipment of a limited quantity of green beans next Monday. We’ll be offering the roasted beans from Tuesday, but quantities are limited, so be quick. 10 | 11 | Blue Mountain Peak is the highest mountain in Jamaica and one of the highest peaks in the Caribbean at 7,402 ft. It is the home of Blue Mountain coffee and their famous tours. It is located on the border of the Portland and Saint Thomas parishes of Jamaica. 12 | 13 | ## A little history 14 | 15 | The Blue Mountains are considered by many to be a hiker's and camper's paradise. The traditional Blue Mountain trek is a 7-mile hike to the peak and consists of a 3,000-foot increase in elevation. Jamaicans prefer to reach the peak at sunrise, thus the 3–4 hour hike is usually undertaken in darkness. Since the sky is usually very clear in the mornings, Cuba can be seen in the distance. 16 | 17 | >Some of the plants found on the Blue Mountain cannot be found anywhere else in the world and they are often of a dwarfed sort. 18 | 19 | This is mainly due to the cold climate which inhibits growth. The small coffee farming communities of Claverty Cottage and Hagley Gap are located near the peak. 20 | 21 | ## What you need to know before trying 22 | 23 | Jamaican Blue Mountain Coffee or Jamaica Blue Mountain Coffee is a classification of coffee grown in the Blue Mountains of Jamaica. The best lots of Blue Mountain coffee are noted for their mild flavor and lack of bitterness. Over the past few decades, this coffee has developed a reputation that has made it one of the most expensive and sought-after coffees in the world. Over 80% of all Jamaican Blue Mountain Coffee is exported to Japan. In addition to its use for brewed coffee, the beans are the flavor base of Tia Maria coffee liqueur. 24 | 25 | Jamaican Blue Mountain Coffee is a globally protected certification mark, meaning only coffee certified by the Coffee Industry Board of Jamaica can be labeled as such. It comes from a recognized growing region in the Blue Mountain region of Jamaica, and its cultivation is monitored by the Coffee Industry Board of Jamaica. 26 | 27 | The Blue Mountains are generally located between Kingston to the south and Port Antonio to the north. Rising 7,402 ft, they are some of the highest mountains in the Caribbean. The climate of the region is cool and misty with high rainfall. The soil is rich, with excellent drainage. This combination of climate and soil is considered ideal for coffee. 28 | 29 | -------------------------------------------------------------------------------- /site/content/post/making-sense/blog-flavor_wheel.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/decaporg/one-click-hugo-cms/3d692070bd1d379eea5b81ced9a7536215c5e761/site/content/post/making-sense/blog-flavor_wheel.jpg -------------------------------------------------------------------------------- /site/content/post/making-sense/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Making sense of the SCAA’s new Flavor Wheel 3 | date: 2016-12-17T15:04:10.000Z 4 | description: The Coffee Taster’s Flavor Wheel, the official resource used by 5 | coffee tasters, has been revised for the first time this year. 6 | image: blog-flavor_wheel.jpg 7 | --- 8 | 9 | The SCAA updated the wheel to reflect the finer nuances needed to describe flavors more precisely. The new descriptions are more detailed and hence allow cuppers to distinguish between more flavors. 10 | 11 | While this is going to be a big change for professional coffee tasters, it means a lot to you as a consumer as well. We’ll explain how the wheel came to be, how pros use it and what the flavors actually mean. 12 | 13 | ## What the updates mean to you 14 | 15 | The Specialty Coffee Association of America (SCAA), founded in 1982, is a non-profit trade organization for the specialty coffee industry. With members located in more than 40 countries, SCAA represents every segment of the specialty coffee industry, including: 16 | 17 | - producers 18 | - roasters 19 | - importers/exporters 20 | - retailers 21 | - manufacturers 22 | - baristas 23 | 24 | For over 30 years, SCAA has been dedicated to creating a vibrant specialty coffee community by recognizing, developing and promoting specialty coffee. SCAA sets and maintains quality standards for the industry, conducts market research, and provides education, training, resources, and business services for its members. 25 | 26 | Coffee cupping, or coffee tasting, is the practice of observing the tastes and aromas of brewed coffee. It is a professional practice but can be done informally by anyone or by professionals known as "Q Graders". A standard coffee cupping procedure involves deeply sniffing the coffee, then loudly slurping the coffee so it spreads to the back of the tongue. 27 | 28 | The coffee taster attempts to measure aspects of the coffee's taste, specifically the body (the texture or mouthfeel, such as oiliness), sweetness, acidity (a sharp and tangy feeling, like when biting into an orange), flavour (the characters in the cup), and aftertaste. Since coffee beans embody telltale flavours from the region where they were grown, cuppers may attempt to identify the coffee's origin. 29 | -------------------------------------------------------------------------------- /site/content/products/_index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Our Coffee 3 | type: products 4 | image: /img/products-jumbotron.jpg 5 | intro: 6 | heading: What we offer 7 | description: >- 8 | Kaldi is the ultimate spot for coffee lovers who want to learn about their 9 | java’s origin and support the farmers that grew it. We take coffee production, 10 | roasting and brewing seriously and we’re glad to pass that knowledge to 11 | anyone. 12 | blurbs: 13 | - image: /img/illustrations-coffee.svg 14 | text: > 15 | We sell green and roasted coffee beans that are sourced directly from 16 | independent farmers and farm cooperatives. We’re proud to offer a 17 | variety of coffee beans grown with great care for the environment and 18 | local communities. Check our post or contact us directly for current 19 | availability. 20 | - image: /img/illustrations-coffee-gear.svg 21 | text: > 22 | We offer a small, but carefully curated selection of brewing gear and 23 | tools for every taste and experience level. No matter if you roast your 24 | own beans or just bought your first french press, you’ll find a gadget 25 | to fall in love with in our shop. 26 | - image: /img/illustrations-tutorials.svg 27 | text: > 28 | Love a great cup of coffee, but never knew how to make one? Bought a 29 | fancy new Chemex but have no clue how to use it? Don't worry, we’re here 30 | to help. You can schedule a custom 1-on-1 consultation with our baristas 31 | to learn anything you want to know about coffee roasting and brewing. 32 | Email us or call the store for details. 33 | - image: /img/illustrations-meeting-space.svg 34 | text: > 35 | We believe that good coffee has the power to bring people together. 36 | That’s why we decided to turn a corner of our shop into a cozy meeting 37 | space where you can hang out with fellow coffee lovers and learn about 38 | coffee making techniques. All of the artwork on display there is for 39 | sale. The full price you pay goes to the artist. 40 | main: 41 | heading: Great coffee with no compromises 42 | description: > 43 | We hold our coffee to the highest standards from the shrub to the cup. 44 | That’s why we’re meticulous and transparent about each step of the coffee’s 45 | journey. We personally visit each farm to make sure the conditions are 46 | optimal for the plants, farmers and the local environment. 47 | image1: 48 | alt: A close-up of a paper filter filled with ground coffee 49 | image: /img/products-grid3.jpg 50 | image2: 51 | alt: A green cup of a coffee on a wooden table 52 | image: /img/products-grid2.jpg 53 | image3: 54 | alt: Coffee beans 55 | image: /img/products-grid1.jpg 56 | testimonials: 57 | - author: Elisabeth Kaurismäki 58 | quote: >- 59 | The first time I tried Kaldi’s coffee, I couldn’t even believe that was 60 | the same thing I’ve been drinking every morning. 61 | - author: Philipp Trommler 62 | quote: >- 63 | Kaldi is the place to go if you want the best quality coffee. I love their 64 | stance on empowering farmers and transparency. 65 | full_image: /img/products-full-width.jpg 66 | pricing: 67 | heading: Monthly subscriptions 68 | description: >- 69 | We make it easy to make great coffee a part of your life. Choose one of our 70 | monthly subscription plans to receive great coffee at your doorstep each 71 | month. Contact us about more details and payment info. 72 | plans: 73 | - description: Perfect for the drinker who likes to enjoy 1-2 cups per day. 74 | items: 75 | - 3 lbs of coffee per month 76 | - Green or roasted beans 77 | - One or two varieties of beans 78 | plan: Small 79 | price: '50' 80 | - description: Great for avid drinkers, java-loving couples and bigger crowds 81 | items: 82 | - 6 lbs of coffee per month 83 | - Green or roasted beans 84 | - Up to 4 different varieties of beans 85 | plan: Big 86 | price: '80' 87 | - description: Want a few tiny batches from different varieties? Try our custom plan 88 | items: 89 | - Whatever you need 90 | - Green or roasted beans 91 | - Unlimited varieties 92 | plan: Custom 93 | price: '?' 94 | --- 95 | 96 | 97 | -------------------------------------------------------------------------------- /site/content/values/_index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Values" 3 | image: /img/about-jumbotron.jpg 4 | values: 5 | - heading: "Shade-grown coffee" 6 | text: > 7 | Coffee is a small tree or shrub that grows in the forest 8 | understory in its wild form, and traditionally was grown 9 | commercially under other trees that provided shade. The 10 | forest-like structure of shade coffee farms provides habitat for 11 | a great number of migratory and resident species. 12 | imageUrl: "/img/about-shade-grown.jpg" 13 | - heading: "Single origin" 14 | text: > 15 | Single-origin coffee is coffee grown within a single known 16 | geographic origin. Sometimes, this is a single farm or a 17 | specific collection of beans from a single country. The name of 18 | the coffee is then usually the place it was grown to whatever 19 | degree available. 20 | imageUrl: "/img/about-single-origin.jpg" 21 | - heading: "Sustainable farming" 22 | text: > 23 | Sustainable agriculture is farming in sustainable ways based on 24 | an understanding of ecosystem services, the study of 25 | relationships between organisms and their environment. What 26 | grows where and how it is grown are a matter of choice and 27 | careful consideration for nature and communities. 28 | imageUrl: "/img/about-sustainable-farming.jpg" 29 | - heading: "Direct sourcing" 30 | text: > 31 | We want to truly empower the communities that bring amazing 32 | coffee to you. That’s why we reinvest 20% of our profits into 33 | farms, local businesses and schools everywhere our coffee is 34 | grown. You can see the communities grow and learn more about 35 | coffee farming on our blog. 36 | imageUrl: "/img/about-direct-sourcing.jpg" 37 | - heading: "Reinvest profits" 38 | text: > 39 | We want to truly empower the communities that bring amazing 40 | coffee to you. That’s why we reinvest 20% of our profits into 41 | farms, local businesses and schools everywhere our coffee is 42 | grown. You can see the communities grow and learn more about 43 | coffee farming on our blog. 44 | imageUrl: "/img/about-reinvest-profits.jpg" 45 | --- 46 | -------------------------------------------------------------------------------- /site/data/.keep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/decaporg/one-click-hugo-cms/3d692070bd1d379eea5b81ced9a7536215c5e761/site/data/.keep -------------------------------------------------------------------------------- /site/data/footer.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Newsletter subscribe", 3 | "blurb": "Get awesome news from us in your inbox every two weeks. Be the first to learn about new products." 4 | } 5 | -------------------------------------------------------------------------------- /site/hugo.toml: -------------------------------------------------------------------------------- 1 | baseurl = "/" 2 | languageCode = "en-us" 3 | languageLang = "en" 4 | title = "Kaldi" 5 | 6 | # RSS, categories and tags disabled for an easy start 7 | # See configuration options for more details: 8 | # https://gohugo.io/getting-started/configuration/#toml-configuration 9 | disableKinds = ["RSS", "taxonomy", "taxonomyTerm"] 10 | 11 | [params] 12 | images = ["img/og-image.jpg"] -------------------------------------------------------------------------------- /site/layouts/404.html: -------------------------------------------------------------------------------- 1 | {{ define "main" }} 2 | 3 |

Nothing Here...

4 |

Go Home

5 | 6 | {{ end }} 7 | -------------------------------------------------------------------------------- /site/layouts/_default/baseof.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | {{ partial "head" . }} 4 | 5 | 6 | {{ block "header" . }}{{ partial "nav" . }}{{end}} 7 | 8 | {{ block "main" . }}{{ end }} 9 | 10 | {{ block "footer" . }}{{ partial "footer" . }}{{end}} 11 | 12 | {{ $script := .Site.Data.webpack.main }} 13 | {{ with $script.js }} 14 | 15 | {{ end }} 16 | 17 | 18 | -------------------------------------------------------------------------------- /site/layouts/_default/li.html: -------------------------------------------------------------------------------- 1 | 2 |

{{ .Title }}

3 |

{{ .Date.Format "Mon, Jan 2, 2006" }}

4 |

{{ .Description }}

5 |

Read more →

6 | 7 | -------------------------------------------------------------------------------- /site/layouts/_default/list.html: -------------------------------------------------------------------------------- 1 | {{ define "main" }} 2 | 3 | {{ partial "jumbotron" (dict "imageUrl" "/img/blog-index.jpg" "title" "Latest stories") }} 4 | 5 |
6 | 13 | {{ partial "pagination" . }} 14 |
15 | 16 | {{end}} 17 | -------------------------------------------------------------------------------- /site/layouts/_default/single.html: -------------------------------------------------------------------------------- 1 | {{ define "main" }} 2 | 3 | {{ partial "jumbotron" (dict "imageUrl" "/img/7.jpg" "title" "This is where the heading goes" "subtitle" "This is where the subtitle goes") }} 4 | {{ .Content }} 5 | 6 | {{ end }} 7 | -------------------------------------------------------------------------------- /site/layouts/index.html: -------------------------------------------------------------------------------- 1 | {{ define "main" }} 2 | 3 | {{ partial "jumbotron" (dict "imageUrl" .Params.image "title" .Title "subtitle" .Params.subtitle) }} 4 | 5 | {{ partial "short-text" .Params.blurb}} 6 | 7 | {{ partial "2-up" .Params }} 8 | 9 | {{ partial "text-and-image" (dict "heading" .Params.values.heading "text" .Params.values.text "buttonText" "Read more" "buttonLink" "/values") }} 10 | 11 | {{ partial "blog" . }} 12 | 13 | {{ end }} 14 | -------------------------------------------------------------------------------- /site/layouts/partials/2-up.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

{{.intro.heading}}

4 |

{{.intro.text}}

5 | 6 |
7 | {{ range .products }} 8 |
9 | 10 |

{{.text}}

11 |
12 | {{ end }} 13 |
14 | 15 |
16 | See all products 17 |
18 |
19 |
20 | -------------------------------------------------------------------------------- /site/layouts/partials/4-up.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

{{.heading}}

4 |

{{.description}}

5 | 6 |
7 | {{ range .blurbs }} 8 |
9 | 10 |

{{ .text }}

11 |
12 | {{ end }} 13 |
14 |
15 |
16 | -------------------------------------------------------------------------------- /site/layouts/partials/blockquote.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

“{{ .quote }}”

4 | {{ .author }} 5 |
6 |
7 | -------------------------------------------------------------------------------- /site/layouts/partials/blog.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |

Latest stories

5 | 6 |
7 | {{ range first 4 (where .Data.Pages "Type" "post") }} 8 |
9 | {{ .Render "li" }} 10 |
11 | {{ end }} 12 |
13 | 14 |
15 | Read more 16 |
17 | 18 |
19 |
20 | -------------------------------------------------------------------------------- /site/layouts/partials/contact-form.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |

Drop us a line below

4 | 5 |
6 |
7 | 8 |
9 |
10 | 11 | 12 |
13 |
14 | 15 |
16 |
17 | 18 | 19 |
20 |
21 |
22 | 23 | 24 |
25 | 26 | 27 |
28 | 29 |
30 | 31 |
32 |
33 |
34 | -------------------------------------------------------------------------------- /site/layouts/partials/footer.html: -------------------------------------------------------------------------------- 1 | 50 | 51 | -------------------------------------------------------------------------------- /site/layouts/partials/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | {{ .Title }} | {{ $.Site.Title }} 4 | 5 | {{ $stylesheet := .Site.Data.webpack.main }} 6 | {{ with $stylesheet.css }} 7 | 8 | {{ end }} 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | {{ template "_internal/opengraph.html" . }} 27 | 28 | {{ if .IsHome }} 29 | 30 | {{ end }} 31 | -------------------------------------------------------------------------------- /site/layouts/partials/image-grid.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 |
5 | {{ .image1.alt }} 6 |
7 | 8 |
9 | {{ .image2.alt }} 10 |
11 | 12 |
13 | {{ .image3.alt }} 14 |
15 |
16 | 17 |
18 | -------------------------------------------------------------------------------- /site/layouts/partials/jumbotron.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |

6 | {{.title}} 7 |

8 |
9 |
10 | {{ if .subtitle }} 11 |

12 | {{.subtitle}} 13 |

14 | {{ end }} 15 |
16 |
17 |
18 |
19 | -------------------------------------------------------------------------------- /site/layouts/partials/media-block-reverse.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | 5 |
6 | 7 |
8 |

{{.heading}}

9 |

{{.text}}

10 |
11 | 12 |
13 | -------------------------------------------------------------------------------- /site/layouts/partials/media-block.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | 5 |
6 | 7 |
8 |

{{.heading}}

9 |

{{.text}}

10 |
11 | 12 |
13 | -------------------------------------------------------------------------------- /site/layouts/partials/nav.html: -------------------------------------------------------------------------------- 1 | 28 | -------------------------------------------------------------------------------- /site/layouts/partials/newsletter-form.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | 5 | 6 |
7 | 8 | 9 | 10 |
11 | -------------------------------------------------------------------------------- /site/layouts/partials/pagination.html: -------------------------------------------------------------------------------- 1 | {{ if gt .Paginator.TotalPages 1 }} 2 | 3 | 17 | 18 | {{ end }} -------------------------------------------------------------------------------- /site/layouts/partials/short-text.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

{{.heading}}

4 |

{{.text}}

5 |
6 |
7 | -------------------------------------------------------------------------------- /site/layouts/partials/social-icon.html: -------------------------------------------------------------------------------- 1 |
  • 2 | 3 | 4 | 5 | {{.alt}} 6 | {{ $imageFile := (print "/img/" .svg ".svg") }} 7 | {{ with resources.Get $imageFile }} 8 | {{ (resources.Minify .).Content | safe.HTML }} 9 | {{ else }} 10 | {{ warnf "missing icon %s" $imageFile }} 11 | {{ end }} 12 | 13 | 14 |
    • 15 | -------------------------------------------------------------------------------- /site/layouts/partials/table-column.html: -------------------------------------------------------------------------------- 1 |
    2 | 3 | 4 |

    {{.plan}}

    5 | 6 | 7 |

    8 | ${{.price}} 9 |

    10 | 11 | 12 |

    {{.description}}

    13 | 14 | 15 | 23 | 24 |
    25 | -------------------------------------------------------------------------------- /site/layouts/partials/table.html: -------------------------------------------------------------------------------- 1 |
    2 | 3 |
    4 | 5 |

    {{.heading}}

    6 |

    {{.description}}

    7 | 8 |
    9 | {{ range .plans }} 10 |
    {{ partial "table-column" . }}
    11 | {{ end }} 12 |
    13 | 14 |
    15 | 16 |
    17 | -------------------------------------------------------------------------------- /site/layouts/partials/text-and-image.html: -------------------------------------------------------------------------------- 1 |
    2 |
    3 | 4 |
    5 |
    6 |

    {{.heading}}

    7 | 8 |

    {{.text}}

    9 |
    10 | 11 |
    12 | 13 |
    14 |
    15 | 16 |
    17 | {{.buttonText}} 18 |
    19 | 20 |
    21 |
    22 | -------------------------------------------------------------------------------- /site/layouts/post/single.html: -------------------------------------------------------------------------------- 1 | {{ define "main" }} 2 | 3 |
    4 |

    {{.Title}}

    5 |
    6 |

    {{ .Date.Format "Mon, Jan 2, 2006" }}

    7 |

    Read in {{ .ReadingTime }} minutes

    8 |
    9 |
    10 |

    {{ .Description }}

    11 | {{ with .Resources.Get .Params.image }}{{ $.Title }}{{ end }} 12 | {{ .Content }} 13 |
    14 |
    15 | {{ end }} 16 | -------------------------------------------------------------------------------- /site/layouts/section/contact.html: -------------------------------------------------------------------------------- 1 | {{ define "main" }} 2 | 3 |
    4 |
    5 | 6 | 7 | 8 | {{ .Content }} 9 | 10 |
    11 | {{ range .Params.contact_entries }} 12 |
    13 |

    {{ .heading }}

    14 |

    {{ .text }}

    15 |
    16 | {{ end }} 17 |
    18 | 19 | {{ partial "contact-form" . }} 20 | 21 |
    22 |
    23 | 24 | {{ end }} 25 | -------------------------------------------------------------------------------- /site/layouts/section/products.html: -------------------------------------------------------------------------------- 1 | {{ define "main" }} 2 | 3 | {{ partial "jumbotron" (dict "imageUrl" .Params.image "title" .Title) }} 4 | 5 | {{ partial "4-up" .Params.intro }} 6 | 7 | 8 | {{ with .Params.main }} 9 |
    10 |
    11 |

    {{ .heading }}

    12 |

    {{ .description }}

    13 |
    14 |
    15 | 16 | 17 | {{ partial "image-grid" . }} 18 | {{ end }} 19 | 20 |
    21 | {{ range .Params.testimonials }} 22 | {{ partial "blockquote" . }} 23 | {{ end }} 24 |
    25 | 26 | 27 | 28 | 29 | {{ partial "table" .Params.pricing }} 30 | 31 | {{ end }} 32 | -------------------------------------------------------------------------------- /site/layouts/section/values.html: -------------------------------------------------------------------------------- 1 | {{ define "main" }} 2 | 3 | {{ partial "jumbotron" (dict "imageUrl" .Params.image "title" .Title) }} 4 | 5 |
    6 | 7 | {{ range $index, $element := .Params.values }} 8 | {{ if modBool $index 2 }} 9 | {{ partial "media-block" $element }} 10 | {{ else }} 11 | {{ partial "media-block-reverse" $element }} 12 | {{ end }} 13 | {{ end }} 14 | 15 |
    16 | 17 | {{ end }} 18 | -------------------------------------------------------------------------------- /site/static/.keep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/decaporg/one-click-hugo-cms/3d692070bd1d379eea5b81ced9a7536215c5e761/site/static/.keep -------------------------------------------------------------------------------- /site/static/admin/config.yml: -------------------------------------------------------------------------------- 1 | backend: 2 | name: git-gateway 3 | branch: main 4 | 5 | media_folder: "site/static/img" # Folder where user uploaded files should go 6 | public_folder: "img" 7 | 8 | collections: # A list of collections the CMS should be able to edit 9 | - name: "post" # Used in routes, ie.: /admin/collections/:slug/edit 10 | label: "Post" # Used in the UI, ie.: "New Post" 11 | folder: "site/content/post" # The path to the folder where the documents are stored 12 | path: "{{slug}}/index" # Each document is inside a folder with the slug name. 13 | create: true # Allow users to create new documents in this collection 14 | fields: # The fields each document in this collection have 15 | - {label: "Title", name: "title", widget: "string"} 16 | - {label: "Publish Date", name: "date", widget: "datetime"} 17 | - {label: "Intro Blurb", name: "description", widget: "text"} 18 | - {label: "Image", name: "image", widget: "image", required: false} 19 | - {label: "Body", name: "body", widget: "markdown"} 20 | - name: "pages" 21 | label: "Pages" 22 | files: 23 | - file: "site/content/_index.md" 24 | label: "Home Page" 25 | name: "home" 26 | fields: 27 | - {label: Title, name: title, widget: string} 28 | - {label: Subtitle, name: subtitle, widget: string} 29 | - {label: Image, name: image, widget: image} 30 | - {label: "Blurb", name: blurb, widget: object, fields: [ 31 | {label: "Heading", name: "heading", widget: string}, 32 | {label: "Text", name: "text", widget: "text"}]} 33 | - {label: "Intro", name: intro, widget: object, fields: [ 34 | {label: "Heading", name: "heading", widget: string}, 35 | {label: "Text", name: "text", widget: "text"}]} 36 | - {label: "Products", name: products, widget: list, fields: [ 37 | {label: "Image", name: "image", widget: "image"}, 38 | {label: "Text", name: "text", widget: "text"}]} 39 | - {label: "Values", name: "values", widget: "object", fields: [ 40 | {label: "Heading", name: "heading", widget: string}, 41 | {label: "Text", name: "text", widget: "text"}]} 42 | - file: "site/content/contact/_index.md" 43 | label: "Contact Page" 44 | name: "contact" 45 | fields: 46 | - {label: Title, name: title, widget: string} 47 | - {label: Logo, name: logo, widget: image} 48 | - {label: Body, name: body, widget: markdown} 49 | - label: Contact Entries 50 | name: contact_entries 51 | widget: list 52 | fields: 53 | - label: Heading 54 | name: heading 55 | widget: string 56 | - label: Text 57 | name: text 58 | widget: text 59 | - file: "site/content/products/_index.md" 60 | label: "Products Page" 61 | name: "products" 62 | fields: 63 | - {label: Title, name: title, widget: string} 64 | - {label: Image, name: image, widget: image} 65 | - {label: Intro, name: intro, widget: object, fields: [{label: Heading, name: heading, widget: string}, {label: Description, name: description, widget: text}, {label: Blurbs, name: blurbs, widget: list, fields: [{label: Image, name: image, widget: image}, {label: Text, name: text, widget: text}]}]} 66 | - {label: Main, name: main, widget: object, fields: [{label: Heading, name: heading, widget: string}, {label: Description, name: description, widget: text}, {label: Image1, name: image1, widget: object, fields: [{label: Image, name: image, widget: image}, {label: Alt, name: alt, widget: string}]}, {label: Image2, name: image2, widget: object, fields: [{label: Image, name: image, widget: image}, {label: Alt, name: alt, widget: string}]}, {label: Image3, name: image3, widget: object, fields: [{label: Image, name: image, widget: image}, {label: Alt, name: alt, widget: string}]}]} 67 | - {label: Testimonials, name: testimonials, widget: list, fields: [{label: Quote, name: quote, widget: string}, {label: Author, name: author, widget: string}]} 68 | - {label: Full_image, name: full_image, widget: image} 69 | - {label: Pricing, name: pricing, widget: object, fields: [{label: Heading, name: heading, widget: string}, {label: Description, name: description, widget: string}, {label: Plans, name: plans, widget: list, fields: [{label: Plan, name: plan, widget: string}, {label: Price, name: price, widget: string}, {label: Description, name: description, widget: string}, {label: Items, name: items, widget: list}]}]} 70 | - file: "site/content/values/_index.md" 71 | label: "Values Page" 72 | name: "values" 73 | fields: 74 | - {label: Title, name: title, widget: string} 75 | - {label: Image, name: image, widget: image} 76 | - label: Values 77 | name: values 78 | widget: list 79 | fields: 80 | - {label: Heading, name: heading, widget: string} 81 | - {label: Text, name: text, widget: text} 82 | - {label: Image, name: imageUrl, widget: image} 83 | - name: "site_settings" 84 | label: "Site Settings" 85 | files: 86 | - file: "site/data/footer.json" 87 | label: Footer 88 | name: footer 89 | fields: 90 | - {label: Title, name: title, widget: string} 91 | - {label: Blurb, name: blurb, widget: text} 92 | - file: "site/hugo.toml" 93 | label: Hugo Config 94 | name: config 95 | editor: 96 | preview: false 97 | fields: 98 | - {label: Site Title for Browser Tab, name: title, widget: string} 99 | - label: Params 100 | name: params 101 | widget: object 102 | fields: 103 | - label: Open Graph Image 104 | name: images 105 | widget: list 106 | field: { label: Image, name: image, widget: image } 107 | -------------------------------------------------------------------------------- /site/static/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #ff4400 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /site/static/img/about-direct-sourcing.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/decaporg/one-click-hugo-cms/3d692070bd1d379eea5b81ced9a7536215c5e761/site/static/img/about-direct-sourcing.jpg -------------------------------------------------------------------------------- /site/static/img/about-jumbotron.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/decaporg/one-click-hugo-cms/3d692070bd1d379eea5b81ced9a7536215c5e761/site/static/img/about-jumbotron.jpg -------------------------------------------------------------------------------- /site/static/img/about-reinvest-profits.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/decaporg/one-click-hugo-cms/3d692070bd1d379eea5b81ced9a7536215c5e761/site/static/img/about-reinvest-profits.jpg -------------------------------------------------------------------------------- /site/static/img/about-shade-grown.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/decaporg/one-click-hugo-cms/3d692070bd1d379eea5b81ced9a7536215c5e761/site/static/img/about-shade-grown.jpg -------------------------------------------------------------------------------- /site/static/img/about-single-origin.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/decaporg/one-click-hugo-cms/3d692070bd1d379eea5b81ced9a7536215c5e761/site/static/img/about-single-origin.jpg -------------------------------------------------------------------------------- /site/static/img/about-sustainable-farming.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/decaporg/one-click-hugo-cms/3d692070bd1d379eea5b81ced9a7536215c5e761/site/static/img/about-sustainable-farming.jpg -------------------------------------------------------------------------------- /site/static/img/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/decaporg/one-click-hugo-cms/3d692070bd1d379eea5b81ced9a7536215c5e761/site/static/img/android-chrome-192x192.png -------------------------------------------------------------------------------- /site/static/img/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/decaporg/one-click-hugo-cms/3d692070bd1d379eea5b81ced9a7536215c5e761/site/static/img/android-chrome-512x512.png -------------------------------------------------------------------------------- /site/static/img/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/decaporg/one-click-hugo-cms/3d692070bd1d379eea5b81ced9a7536215c5e761/site/static/img/apple-touch-icon.png -------------------------------------------------------------------------------- /site/static/img/blog-index.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/decaporg/one-click-hugo-cms/3d692070bd1d379eea5b81ced9a7536215c5e761/site/static/img/blog-index.jpg -------------------------------------------------------------------------------- /site/static/img/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/decaporg/one-click-hugo-cms/3d692070bd1d379eea5b81ced9a7536215c5e761/site/static/img/favicon-16x16.png -------------------------------------------------------------------------------- /site/static/img/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/decaporg/one-click-hugo-cms/3d692070bd1d379eea5b81ced9a7536215c5e761/site/static/img/favicon-32x32.png -------------------------------------------------------------------------------- /site/static/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/decaporg/one-click-hugo-cms/3d692070bd1d379eea5b81ced9a7536215c5e761/site/static/img/favicon.ico -------------------------------------------------------------------------------- /site/static/img/home-about-section.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/decaporg/one-click-hugo-cms/3d692070bd1d379eea5b81ced9a7536215c5e761/site/static/img/home-about-section.jpg -------------------------------------------------------------------------------- /site/static/img/home-jumbotron.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/decaporg/one-click-hugo-cms/3d692070bd1d379eea5b81ced9a7536215c5e761/site/static/img/home-jumbotron.jpg -------------------------------------------------------------------------------- /site/static/img/illustrations-coffee-gear.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/static/img/illustrations-coffee.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/static/img/illustrations-meeting-space.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/static/img/illustrations-tutorials.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/static/img/logo.svg: -------------------------------------------------------------------------------- 1 | Logo 2 | -------------------------------------------------------------------------------- /site/static/img/mstile-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/decaporg/one-click-hugo-cms/3d692070bd1d379eea5b81ced9a7536215c5e761/site/static/img/mstile-144x144.png -------------------------------------------------------------------------------- /site/static/img/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/decaporg/one-click-hugo-cms/3d692070bd1d379eea5b81ced9a7536215c5e761/site/static/img/mstile-150x150.png -------------------------------------------------------------------------------- /site/static/img/mstile-310x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/decaporg/one-click-hugo-cms/3d692070bd1d379eea5b81ced9a7536215c5e761/site/static/img/mstile-310x150.png -------------------------------------------------------------------------------- /site/static/img/mstile-310x310.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/decaporg/one-click-hugo-cms/3d692070bd1d379eea5b81ced9a7536215c5e761/site/static/img/mstile-310x310.png -------------------------------------------------------------------------------- /site/static/img/mstile-70x70.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/decaporg/one-click-hugo-cms/3d692070bd1d379eea5b81ced9a7536215c5e761/site/static/img/mstile-70x70.png -------------------------------------------------------------------------------- /site/static/img/og-image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/decaporg/one-click-hugo-cms/3d692070bd1d379eea5b81ced9a7536215c5e761/site/static/img/og-image.jpg -------------------------------------------------------------------------------- /site/static/img/products-full-width.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/decaporg/one-click-hugo-cms/3d692070bd1d379eea5b81ced9a7536215c5e761/site/static/img/products-full-width.jpg -------------------------------------------------------------------------------- /site/static/img/products-grid1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/decaporg/one-click-hugo-cms/3d692070bd1d379eea5b81ced9a7536215c5e761/site/static/img/products-grid1.jpg -------------------------------------------------------------------------------- /site/static/img/products-grid2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/decaporg/one-click-hugo-cms/3d692070bd1d379eea5b81ced9a7536215c5e761/site/static/img/products-grid2.jpg -------------------------------------------------------------------------------- /site/static/img/products-grid3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/decaporg/one-click-hugo-cms/3d692070bd1d379eea5b81ced9a7536215c5e761/site/static/img/products-grid3.jpg -------------------------------------------------------------------------------- /site/static/img/products-jumbotron.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/decaporg/one-click-hugo-cms/3d692070bd1d379eea5b81ced9a7536215c5e761/site/static/img/products-jumbotron.jpg -------------------------------------------------------------------------------- /site/static/img/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.11, written by Peter Selinger 2001-2013 9 | 10 | 12 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /site/static/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "icons": [ 4 | { 5 | "src": "\/img\/android-chrome-192x192.png", 6 | "sizes": "192x192", 7 | "type": "image\/png" 8 | }, 9 | { 10 | "src": "\/img\/android-chrome-512x512.png", 11 | "sizes": "512x512", 12 | "type": "image\/png" 13 | } 14 | ], 15 | "theme_color": "#ffffff", 16 | "display": "standalone" 17 | } 18 | -------------------------------------------------------------------------------- /src/cms.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Content Manager 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/css/imports/_background-position.scss: -------------------------------------------------------------------------------- 1 | .bg-center { 2 | background-repeat: no-repeat; 3 | background-position: center center; 4 | } 5 | 6 | .bg-top { 7 | background-repeat: no-repeat; 8 | background-position: top center; 9 | } 10 | 11 | .bg-right { 12 | background-repeat: no-repeat; 13 | background-position: center right; 14 | } 15 | 16 | .bg-bottom { 17 | background-repeat: no-repeat; 18 | background-position: bottom center; 19 | } 20 | 21 | .bg-left { 22 | background-repeat: no-repeat; 23 | background-position: center left; 24 | } 25 | 26 | @media (--breakpoint-not-small) { 27 | .bg-center-ns { 28 | background-repeat: no-repeat; 29 | background-position: center center; 30 | } 31 | 32 | .bg-top-ns { 33 | background-repeat: no-repeat; 34 | background-position: top center; 35 | } 36 | 37 | .bg-right-ns { 38 | background-repeat: no-repeat; 39 | background-position: center right; 40 | } 41 | 42 | .bg-bottom-ns { 43 | background-repeat: no-repeat; 44 | background-position: bottom center; 45 | } 46 | 47 | .bg-left-ns { 48 | background-repeat: no-repeat; 49 | background-position: center left; 50 | } 51 | } 52 | 53 | @media (--breakpoint-medium) { 54 | .bg-center-m { 55 | background-repeat: no-repeat; 56 | background-position: center center; 57 | } 58 | 59 | .bg-top-m { 60 | background-repeat: no-repeat; 61 | background-position: top center; 62 | } 63 | 64 | .bg-right-m { 65 | background-repeat: no-repeat; 66 | background-position: center right; 67 | } 68 | 69 | .bg-bottom-m { 70 | background-repeat: no-repeat; 71 | background-position: bottom center; 72 | } 73 | 74 | .bg-left-m { 75 | background-repeat: no-repeat; 76 | background-position: center left; 77 | } 78 | } 79 | 80 | @media (--breakpoint-large) { 81 | .bg-center-l { 82 | background-repeat: no-repeat; 83 | background-position: center center; 84 | } 85 | 86 | .bg-top-l { 87 | background-repeat: no-repeat; 88 | background-position: top center; 89 | } 90 | 91 | .bg-right-l { 92 | background-repeat: no-repeat; 93 | background-position: center right; 94 | } 95 | 96 | .bg-bottom-l { 97 | background-repeat: no-repeat; 98 | background-position: bottom center; 99 | } 100 | 101 | .bg-left-l { 102 | background-repeat: no-repeat; 103 | background-position: center left; 104 | } 105 | } 106 | -------------------------------------------------------------------------------- /src/css/imports/_background-size.scss: -------------------------------------------------------------------------------- 1 | .cover { background-size: cover!important; } 2 | .contain { background-size: contain!important; } 3 | 4 | @media (--breakpoint-not-small) { 5 | .cover-ns { background-size: cover!important; } 6 | .contain-ns { background-size: contain!important; } 7 | } 8 | 9 | @media (--breakpoint-medium) { 10 | .cover-m { background-size: cover!important; } 11 | .contain-m { background-size: contain!important; } 12 | } 13 | 14 | @media (--breakpoint-large) { 15 | .cover-l { background-size: cover!important; } 16 | .contain-l { background-size: contain!important; } 17 | } 18 | -------------------------------------------------------------------------------- /src/css/imports/_border-colors.scss: -------------------------------------------------------------------------------- 1 | .b--primary { 2 | border-color: var(--primary); 3 | } 4 | 5 | .b--highlight { 6 | border-color: --var(--highlight); 7 | } 8 | 9 | .b--white { 10 | border-color: var(--white); 11 | } 12 | 13 | .b--off-white { 14 | border-color: var(--off-white); 15 | } 16 | 17 | .b--grey-1 { 18 | border-color: var(--grey-1); 19 | } 20 | 21 | .b--grey-2 { 22 | border-color: var(--grey-2); 23 | } 24 | 25 | .b--grey-3 { 26 | border-color: var(--grey-3); 27 | } 28 | 29 | .b--grey-4 { 30 | border-color: var(--grey-4); 31 | } 32 | 33 | .b--black { 34 | border-color: var(--black); 35 | } 36 | -------------------------------------------------------------------------------- /src/css/imports/_border-radius.scss: -------------------------------------------------------------------------------- 1 | .br0 { border-radius: 0!important; } 2 | 3 | .br1 { border-radius: var(--border-radius); } 4 | 5 | .br-100 { border-radius: 100%; } 6 | 7 | .br-pill { border-radius: 9999px; } 8 | 9 | .br--bottom { 10 | border-top-left-radius: 0; 11 | border-top-right-radius: 0; 12 | } 13 | .br--top { 14 | border-bottom-left-radius: 0; 15 | border-bottom-right-radius: 0; 16 | } 17 | .br--right { 18 | border-top-left-radius: 0; 19 | border-bottom-left-radius: 0; 20 | } 21 | .br--left { 22 | border-top-right-radius: 0; 23 | border-bottom-right-radius: 0; 24 | } 25 | 26 | @media (--breakpoint-not-small) { 27 | .br0-ns { border-radius: 0; } 28 | 29 | .br1-ns { border-radius: var(--border-radius); } 30 | 31 | .br-100-ns { border-radius: 100%; } 32 | 33 | .br-pill-ns { border-radius: 9999px; } 34 | 35 | .br--bottom-ns { 36 | border-top-left-radius: 0; 37 | border-top-right-radius: 0; 38 | } 39 | .br--top-ns { 40 | border-bottom-left-radius: 0; 41 | border-bottom-right-radius: 0; 42 | } 43 | .br--right-ns { 44 | border-top-left-radius: 0; 45 | border-bottom-left-radius: 0; 46 | } 47 | .br--left-ns { 48 | border-top-right-radius: 0; 49 | border-bottom-right-radius: 0; 50 | } 51 | } 52 | 53 | @media (--breakpoint-medium) { 54 | .br0-m { border-radius: 0; } 55 | 56 | .br1-m { border-radius: var(--border-radius); } 57 | 58 | .br-100-m { border-radius: 100%; } 59 | 60 | .br-pill-m { border-radius: 9999px; } 61 | 62 | .br--bottom-m { 63 | border-top-left-radius: 0; 64 | border-top-right-radius: 0; 65 | } 66 | .br--top-m { 67 | border-bottom-left-radius: 0; 68 | border-bottom-right-radius: 0; 69 | } 70 | .br--right-m { 71 | border-top-left-radius: 0; 72 | border-bottom-left-radius: 0; 73 | } 74 | .br--left-m { 75 | border-top-right-radius: 0; 76 | border-bottom-right-radius: 0; 77 | } 78 | } 79 | 80 | @media (--breakpoint-large) { 81 | .br0-l { border-radius: 0; } 82 | 83 | .br1-l { border-radius: var(--border-radius); } 84 | 85 | .br-100-l { border-radius: 100%; } 86 | 87 | .br-pill-l { border-radius: 9999px; } 88 | 89 | .br--bottom-l { 90 | border-top-left-radius: 0; 91 | border-top-right-radius: 0; 92 | } 93 | .br--top-l { 94 | border-bottom-left-radius: 0; 95 | border-bottom-right-radius: 0; 96 | } 97 | .br--right-l { 98 | border-top-left-radius: 0; 99 | border-bottom-left-radius: 0; 100 | } 101 | .br--left-l { 102 | border-top-right-radius: 0; 103 | border-bottom-right-radius: 0; 104 | } 105 | } 106 | -------------------------------------------------------------------------------- /src/css/imports/_border-style.scss: -------------------------------------------------------------------------------- 1 | .b--dotted { border-style: dotted; } 2 | .b--dashed { border-style: dashed; } 3 | .b--solid { border-style: solid; } 4 | .b--none { border-style: none; } 5 | 6 | @media (--breakpoint-not-small) { 7 | .b--dotted-ns { border-style: dotted; } 8 | .b--dashed-ns { border-style: dashed; } 9 | .b--solid-ns { border-style: solid; } 10 | .b--none-ns { border-style: none; } 11 | } 12 | 13 | @media (--breakpoint-medium) { 14 | .b--dotted-m { border-style: dotted; } 15 | .b--dashed-m { border-style: dashed; } 16 | .b--solid-m { border-style: solid; } 17 | .b--none-m { border-style: none; } 18 | } 19 | 20 | @media (--breakpoint-large) { 21 | .b--dotted-l { border-style: dotted; } 22 | .b--dashed-l { border-style: dashed; } 23 | .b--solid-l { border-style: solid; } 24 | .b--none-l { border-style: none; } 25 | } 26 | -------------------------------------------------------------------------------- /src/css/imports/_border-widths.scss: -------------------------------------------------------------------------------- 1 | .bw0 { border-width: 0; } 2 | .bw1 { border-width: .125rem; } 3 | .bw2 { border-width: var(--spacing-extra-small); } 4 | .bw3 { border-width: var(--spacing-small); } 5 | .bw4 { border-width: var(--spacing-medium); } 6 | .bw5 { border-width: 2rem; } 7 | 8 | /* Resets */ 9 | .bt-0 { border-top-width: 0; } 10 | .br-0 { border-right-width: 0; } 11 | .bb-0 { border-bottom-width: 0; } 12 | .bl-0 { border-left-width: 0; } 13 | 14 | @media (--breakpoint-not-small) { 15 | .bw0-ns { border-width: 0; } 16 | .bw1-ns { border-width: .125rem; } 17 | .bw2-ns { border-width: var(--spacing-extra-small); } 18 | .bw3-ns { border-width: var(--spacing-small); } 19 | .bw4-ns { border-width: var(--spacing-medium); } 20 | .bw5-ns { border-width: 2rem; } 21 | .bt-0-ns { border-top-width: 0; } 22 | .br-0-ns { border-right-width: 0; } 23 | .bb-0-ns { border-bottom-width: 0; } 24 | .bl-0-ns { border-left-width: 0; } 25 | } 26 | 27 | @media (--breakpoint-medium) { 28 | .bw0-m { border-width: 0; } 29 | .bw1-m { border-width: .125rem; } 30 | .bw2-m { border-width: var(--spacing-extra-small); } 31 | .bw3-m { border-width: var(--spacing-small); } 32 | .bw4-m { border-width: var(--spacing-medium); } 33 | .bw5-m { border-width: 2rem; } 34 | .bt-0-m { border-top-width: 0; } 35 | .br-0-m { border-right-width: 0; } 36 | .bb-0-m { border-bottom-width: 0; } 37 | .bl-0-m { border-left-width: 0; } 38 | } 39 | 40 | @media (--breakpoint-large) { 41 | .bw0-l { border-width: 0; } 42 | .bw1-l { border-width: .125rem; } 43 | .bw2-l { border-width: var(--spacing-extra-small); } 44 | .bw3-l { border-width: var(--spacing-small); } 45 | .bw4-l { border-width: var(--spacing-medium); } 46 | .bw5-l { border-width: 2rem; } 47 | .bt-0-l { border-top-width: 0; } 48 | .br-0-l { border-right-width: 0; } 49 | .bb-0-l { border-bottom-width: 0; } 50 | .bl-0-l { border-left-width: 0; } 51 | } 52 | -------------------------------------------------------------------------------- /src/css/imports/_borders.scss: -------------------------------------------------------------------------------- 1 | .ba { border-style: solid; border-width: 1px; } 2 | .bt { border-top-style: solid; border-top-width: 1px; } 3 | .br { border-right-style: solid; border-right-width: 1px; } 4 | .bb { border-bottom-style: solid; border-bottom-width: 1px; } 5 | .bl { border-left-style: solid; border-left-width: 1px; } 6 | .bn { border-style: none; border-width: 0; } 7 | 8 | 9 | @media (--breakpoint-not-small) { 10 | .ba-ns { border-style: solid; border-width: 1px; } 11 | .bt-ns { border-top-style: solid; border-top-width: 1px; } 12 | .br-ns { border-right-style: solid; border-right-width: 1px; } 13 | .bb-ns { border-bottom-style: solid; border-bottom-width: 1px; } 14 | .bl-ns { border-left-style: solid; border-left-width: 1px; } 15 | .bn-ns { border-style: none; border-width: 0; } 16 | } 17 | 18 | @media (--breakpoint-medium) { 19 | .ba-m { border-style: solid; border-width: 1px; } 20 | .bt-m { border-top-style: solid; border-top-width: 1px; } 21 | .br-m { border-right-style: solid; border-right-width: 1px; } 22 | .bb-m { border-bottom-style: solid; border-bottom-width: 1px; } 23 | .bl-m { border-left-style: solid; border-left-width: 1px; } 24 | .bn-m { border-style: none; border-width: 0; } 25 | } 26 | 27 | @media (--breakpoint-large) { 28 | .ba-l { border-style: solid; border-width: 1px; } 29 | .bt-l { border-top-style: solid; border-top-width: 1px; } 30 | .br-l { border-right-style: solid; border-right-width: 1px; } 31 | .bb-l { border-bottom-style: solid; border-bottom-width: 1px; } 32 | .bl-l { border-left-style: solid; border-left-width: 1px; } 33 | .bn-l { border-style: none; border-width: 0; } 34 | } 35 | -------------------------------------------------------------------------------- /src/css/imports/_box-sizing.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | BOX SIZING 4 | 5 | */ 6 | 7 | html, 8 | body, 9 | div, 10 | article, 11 | section, 12 | main, 13 | footer, 14 | header, 15 | form, 16 | fieldset, 17 | pre, 18 | code, 19 | p, 20 | ul, 21 | ol, 22 | li, 23 | dl, 24 | dt, 25 | dd, 26 | textarea, 27 | input[type="email"], 28 | input[type="number"], 29 | input[type="password"], 30 | input[type="tel"], 31 | input[type="text"], 32 | input[type="url"], 33 | .border-box { 34 | box-sizing: border-box; 35 | } 36 | 37 | -------------------------------------------------------------------------------- /src/css/imports/_buttons.scss: -------------------------------------------------------------------------------- 1 | .btn { 2 | display: inline-block; 3 | padding: 12px 16px 10px; 4 | font-size: var(--spacing-medium); 5 | line-height: 1.25; 6 | background-color: var(--white); 7 | border-radius: var(--border-radius); 8 | text-decoration: none; 9 | font-weight: var(--bold-font-weight); 10 | color: var(--primary); 11 | text-align: center; 12 | box-shadow: inset 0 0 0 2px var(--primary); 13 | transition: var(--hover-transition); 14 | } 15 | -------------------------------------------------------------------------------- /src/css/imports/_clears.scss: -------------------------------------------------------------------------------- 1 | .cf:before, 2 | .cf:after { content: " "; display: table; } 3 | .cf:after { clear: both; } 4 | .cf { *zoom: 1; } 5 | 6 | .cl { clear: left; } 7 | .cr { clear: right; } 8 | .cb { clear: both; } 9 | .cn { clear: none; } 10 | 11 | @media (--breakpoint-not-small) { 12 | .cl-ns { clear: left; } 13 | .cr-ns { clear: right; } 14 | .cb-ns { clear: both; } 15 | .cn-ns { clear: none; } 16 | } 17 | 18 | @media (--breakpoint-medium) { 19 | .cl-m { clear: left; } 20 | .cr-m { clear: right; } 21 | .cb-m { clear: both; } 22 | .cn-m { clear: none; } 23 | } 24 | 25 | @media (--breakpoint-large) { 26 | .cl-l { clear: left; } 27 | .cr-l { clear: right; } 28 | .cb-l { clear: both; } 29 | .cn-l { clear: none; } 30 | } 31 | -------------------------------------------------------------------------------- /src/css/imports/_cms.scss: -------------------------------------------------------------------------------- 1 | .cms { 2 | 3 | /* Headings */ 4 | & h1, & h2, & h3, & h4, & h5, & h6 { 5 | font-weight: var(--bold-font-weight); 6 | line-height: 1.25; 7 | margin-bottom: var(--spacing-small); 8 | } 9 | 10 | & h1 { 11 | font-size: 2.25rem; 12 | } 13 | 14 | & h2 { 15 | font-size: 1.5rem; 16 | } 17 | 18 | & h3 { 19 | font-size: 1.25rem; 20 | } 21 | 22 | & h4 { 23 | font-size: 1rem;; 24 | } 25 | 26 | & h5 { 27 | font-size: .875rem; 28 | } 29 | 30 | /* Images */ 31 | & img { 32 | display: block; 33 | margin-bottom: var(--spacing-medium); 34 | margin-left: auto; 35 | margin-right: auto; 36 | max-width: 100%; 37 | } 38 | 39 | /* Links */ 40 | & a { 41 | color: var(--primary); 42 | transition: var(--hover-transition); 43 | &:hover { 44 | background-color: var(--highlight); 45 | color: var(--black); 46 | } 47 | } 48 | 49 | /* Lists */ 50 | & ul, & ol, & li { 51 | position: relative; 52 | } 53 | 54 | & ul, & ol { 55 | margin-bottom: var(--spacing-medium); 56 | } 57 | 58 | & ul ul, & ol ol { 59 | padding-left: var(--spacing-small); 60 | } 61 | 62 | & ul { 63 | margin-left: 1.33rem; 64 | & >li:before { 65 | content: '✱'; 66 | left: -1.33rem; 67 | position: absolute; 68 | color: var(--primary); 69 | } 70 | } 71 | 72 | & ol { 73 | list-style: none; 74 | margin-left: var(--spacing-medium); 75 | counter-reset: i 0; 76 | & >li:before { 77 | font-weight: 800; 78 | left: var(--spacing-medium); 79 | margin-right: 1.33rem; 80 | position: relative; 81 | height: 100%; 82 | content: counter(i); 83 | counter-increment: i; 84 | color: var(--primary); 85 | } 86 | } 87 | 88 | /* Blockquotes */ 89 | & blockquote { 90 | background-color: var(--grey-1); 91 | display: block; 92 | border-radius: var(--border-radius); 93 | padding: var(--spacing-medium); 94 | color: var(--primary); 95 | font-weight: 700; 96 | font-size: 1.25rem;; 97 | margin-bottom: var(--spacing-medium); 98 | & p { 99 | margin: 0; 100 | } 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /src/css/imports/_code.scss: -------------------------------------------------------------------------------- 1 | pre { 2 | overflow-x: auto; 3 | overflow-y: hidden; 4 | overflow: scroll; 5 | margin-bottom: var(--spacing-medium); 6 | background-color: var(--grey-1); 7 | padding: var(--spacing-small); 8 | } 9 | -------------------------------------------------------------------------------- /src/css/imports/_colors.scss: -------------------------------------------------------------------------------- 1 | /* Text colors */ 2 | 3 | .primary { 4 | color: var(--primary); 5 | } 6 | 7 | .highlight { 8 | color: var(--highlight); 9 | } 10 | 11 | .white { 12 | color: var(--white); 13 | } 14 | 15 | .off-white { 16 | color: var(--off-white); 17 | } 18 | 19 | .grey-1 { 20 | color: var(--grey-1); 21 | } 22 | 23 | .grey-2 { 24 | color: var(--grey-2); 25 | } 26 | 27 | .grey-3 { 28 | color: var(--grey-3); 29 | } 30 | 31 | .grey-4 { 32 | color: var(--grey-4); 33 | } 34 | 35 | .black { 36 | color: var(--black); 37 | } 38 | 39 | .bg-primary { 40 | background-color: var(--primary); 41 | } 42 | 43 | .bg-highlight { 44 | background-color: var(--highlight); 45 | } 46 | 47 | .bg-white { 48 | background-color: var(--white); 49 | } 50 | 51 | .bg-off-white { 52 | background-color: var(--off-white); 53 | } 54 | 55 | .bg-grey-1 { 56 | background-color: var(--grey-1); 57 | } 58 | 59 | .bg-grey-2 { 60 | background-color: var(--grey-2); 61 | } 62 | 63 | .bg-grey-3 { 64 | background-color: var(--grey-4); 65 | } 66 | 67 | .bg-grey-4 { 68 | background-color: var(--grey-4); 69 | } 70 | 71 | .bg-black { 72 | background-color: var(--black); 73 | } 74 | 75 | .bg-fix-primary { 76 | padding: 0 var(--spacing-small); 77 | & :first-child { 78 | box-shadow: var(--spacing-small) 0 0 var(--primary), -var(--spacing-small) 0 0 var(--primary); 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /src/css/imports/_coordinates.scss: -------------------------------------------------------------------------------- 1 | .top-0 { top: 0; } 2 | .right-0 { right: 0; } 3 | .bottom-0 { bottom: 0; } 4 | .left-0 { left: 0; } 5 | 6 | .top-1 { top: var(--spacing-medium); } 7 | .right-1 { right: var(--spacing-medium); } 8 | .bottom-1 { bottom: var(--spacing-medium); } 9 | .left-1 { left: var(--spacing-medium); } 10 | 11 | .top-2 { top: 2rem; } 12 | .right-2 { right: 2rem; } 13 | .bottom-2 { bottom: 2rem; } 14 | .left-2 { left: 2rem; } 15 | 16 | .top--1 { top: -var(--spacing-medium); } 17 | .right--1 { right: -var(--spacing-medium); } 18 | .bottom--1 { bottom: -var(--spacing-medium); } 19 | .left--1 { left: -var(--spacing-medium); } 20 | 21 | .top--2 { top: -2rem; } 22 | .right--2 { right: -2rem; } 23 | .bottom--2 { bottom: -2rem; } 24 | .left--2 { left: -2rem; } 25 | 26 | 27 | .absolute--fill { 28 | top: 0; 29 | right: 0; 30 | bottom: 0; 31 | left: 0; 32 | } 33 | 34 | @media (--breakpoint-not-small) { 35 | .top-0-ns { top: 0; } 36 | .left-0-ns { left: 0; } 37 | .right-0-ns { right: 0; } 38 | .bottom-0-ns { bottom: 0; } 39 | .top-1-ns { top: var(--spacing-medium); } 40 | .left-1-ns { left: var(--spacing-medium); } 41 | .right-1-ns { right: var(--spacing-medium); } 42 | .bottom-1-ns { bottom: var(--spacing-medium); } 43 | .top-2-ns { top: 2rem; } 44 | .left-2-ns { left: 2rem; } 45 | .right-2-ns { right: 2rem; } 46 | .bottom-2-ns { bottom: 2rem; } 47 | .top--1-ns { top: -var(--spacing-medium); } 48 | .right--1-ns { right: -var(--spacing-medium); } 49 | .bottom--1-ns { bottom: -var(--spacing-medium); } 50 | .left--1-ns { left: -var(--spacing-medium); } 51 | .top--2-ns { top: -2rem; } 52 | .right--2-ns { right: -2rem; } 53 | .bottom--2-ns { bottom: -2rem; } 54 | .left--2-ns { left: -2rem; } 55 | .absolute--fill-ns { 56 | top: 0; 57 | right: 0; 58 | bottom: 0; 59 | left: 0; 60 | } 61 | } 62 | 63 | @media (--breakpoint-medium) { 64 | .top-0-m { top: 0; } 65 | .left-0-m { left: 0; } 66 | .right-0-m { right: 0; } 67 | .bottom-0-m { bottom: 0; } 68 | .top-1-m { top: var(--spacing-medium); } 69 | .left-1-m { left: var(--spacing-medium); } 70 | .right-1-m { right: var(--spacing-medium); } 71 | .bottom-1-m { bottom: var(--spacing-medium); } 72 | .top-2-m { top: 2rem; } 73 | .left-2-m { left: 2rem; } 74 | .right-2-m { right: 2rem; } 75 | .bottom-2-m { bottom: 2rem; } 76 | .top--1-m { top: -var(--spacing-medium); } 77 | .right--1-m { right: -var(--spacing-medium); } 78 | .bottom--1-m { bottom: -var(--spacing-medium); } 79 | .left--1-m { left: -var(--spacing-medium); } 80 | .top--2-m { top: -2rem; } 81 | .right--2-m { right: -2rem; } 82 | .bottom--2-m { bottom: -2rem; } 83 | .left--2-m { left: -2rem; } 84 | .absolute--fill-m { 85 | top: 0; 86 | right: 0; 87 | bottom: 0; 88 | left: 0; 89 | } 90 | } 91 | 92 | @media (--breakpoint-large) { 93 | .top-0-l { top: 0; } 94 | .left-0-l { left: 0; } 95 | .right-0-l { right: 0; } 96 | .bottom-0-l { bottom: 0; } 97 | .top-1-l { top: var(--spacing-medium); } 98 | .left-1-l { left: var(--spacing-medium); } 99 | .right-1-l { right: var(--spacing-medium); } 100 | .bottom-1-l { bottom: var(--spacing-medium); } 101 | .top-2-l { top: 2rem; } 102 | .left-2-l { left: 2rem; } 103 | .right-2-l { right: 2rem; } 104 | .bottom-2-l { bottom: 2rem; } 105 | .top--1-l { top: -var(--spacing-medium); } 106 | .right--1-l { right: -var(--spacing-medium); } 107 | .bottom--1-l { bottom: -var(--spacing-medium); } 108 | .left--1-l { left: -var(--spacing-medium); } 109 | .top--2-l { top: -2rem; } 110 | .right--2-l { right: -2rem; } 111 | .bottom--2-l { bottom: -2rem; } 112 | .left--2-l { left: -2rem; } 113 | .absolute--fill-l { 114 | top: 0; 115 | right: 0; 116 | bottom: 0; 117 | left: 0; 118 | } 119 | } 120 | -------------------------------------------------------------------------------- /src/css/imports/_debug-children.scss: -------------------------------------------------------------------------------- 1 | .debug * { outline: 1px solid gold; } 2 | .debug-white * { outline: 1px solid white; } 3 | .debug-black * { outline: 1px solid black; } 4 | -------------------------------------------------------------------------------- /src/css/imports/_debug-grid.scss: -------------------------------------------------------------------------------- 1 | .debug-grid { 2 | background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTRDOTY4N0U2N0VFMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTRDOTY4N0Q2N0VFMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3NjY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3NzY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsBS+GMAAAAjSURBVHjaYvz//z8DLsD4gcGXiYEAGBIKGBne//fFpwAgwAB98AaF2pjlUQAAAABJRU5ErkJggg==) repeat top left; 3 | } 4 | 5 | .debug-grid-16 { 6 | background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODYyRjhERDU2N0YyMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODYyRjhERDQ2N0YyMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3QTY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3QjY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvCS01IAAABMSURBVHjaYmR4/5+BFPBfAMFm/MBgx8RAGWCn1AAmSg34Q6kBDKMGMDCwICeMIemF/5QawEipAWwUhwEjMDvbAWlWkvVBwu8vQIABAEwBCph8U6c0AAAAAElFTkSuQmCC) repeat top left; 7 | } 8 | 9 | .debug-grid-8-solid { 10 | background:white url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAAAAAD/4QMxaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzExMSA3OS4xNTgzMjUsIDIwMTUvMDkvMTAtMDE6MTA6MjAgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkIxMjI0OTczNjdCMzExRTZCMkJDRTI0MDgxMDAyMTcxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkIxMjI0OTc0NjdCMzExRTZCMkJDRTI0MDgxMDAyMTcxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QjEyMjQ5NzE2N0IzMTFFNkIyQkNFMjQwODEwMDIxNzEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QjEyMjQ5NzI2N0IzMTFFNkIyQkNFMjQwODEwMDIxNzEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAbGhopHSlBJiZBQi8vL0JHPz4+P0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHAR0pKTQmND8oKD9HPzU/R0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0f/wAARCAAIAAgDASIAAhEBAxEB/8QAWQABAQAAAAAAAAAAAAAAAAAAAAYBAQEAAAAAAAAAAAAAAAAAAAIEEAEBAAMBAAAAAAAAAAAAAAABADECA0ERAAEDBQAAAAAAAAAAAAAAAAARITFBUWESIv/aAAwDAQACEQMRAD8AoOnTV1QTD7JJshP3vSM3P//Z) repeat top left; 11 | } 12 | 13 | .debug-grid-16-solid { 14 | background:white url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzY3MkJEN0U2N0M1MTFFNkIyQkNFMjQwODEwMDIxNzEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzY3MkJEN0Y2N0M1MTFFNkIyQkNFMjQwODEwMDIxNzEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3QzY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3RDY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pve6J3kAAAAzSURBVHjaYvz//z8D0UDsMwMjSRoYP5Gq4SPNbRjVMEQ1fCRDg+in/6+J1AJUxsgAEGAA31BAJMS0GYEAAAAASUVORK5CYII=) repeat top left; 15 | } 16 | -------------------------------------------------------------------------------- /src/css/imports/_debug.scss: -------------------------------------------------------------------------------- 1 | body { outline: 1px solid #2980B9!important; } 2 | article { outline: 1px solid #3498DB!important; } 3 | nav { outline: 1px solid #0088C3!important; } 4 | aside { outline: 1px solid #33A0CE!important; } 5 | section { outline: 1px solid #66B8DA!important; } 6 | header { outline: 1px solid #99CFE7!important; } 7 | footer { outline: 1px solid #CCE7F3!important; } 8 | h1 { outline: 1px solid #162544!important; } 9 | h2 { outline: 1px solid #314E6E!important; } 10 | h3 { outline: 1px solid #3E5E85!important; } 11 | h4 { outline: 1px solid #449BAF!important; } 12 | h5 { outline: 1px solid #C7D1CB!important; } 13 | h6 { outline: 1px solid #4371D0!important; } 14 | main { outline: 1px solid #2F4F90!important; } 15 | address { outline: 1px solid #1A2C51!important; } 16 | div { outline: 1px solid #036CDB!important; } 17 | 18 | 19 | p { outline: 1px solid #AC050B!important; } 20 | hr { outline: 1px solid #FF063F!important; } 21 | pre { outline: 1px solid #850440!important; } 22 | blockquote { outline: 1px solid #F1B8E7!important; } 23 | ol { outline: 1px solid #FF050C!important; } 24 | ul { outline: 1px solid #D90416!important; } 25 | li { outline: 1px solid #D90416!important; } 26 | dl { outline: 1px solid #FD3427!important; } 27 | dt { outline: 1px solid #FF0043!important; } 28 | dd { outline: 1px solid #E80174!important; } 29 | figure { outline: 1px solid #FF00BB!important; } 30 | figcaption { outline: 1px solid #BF0032!important; } 31 | 32 | 33 | 34 | table { outline: 1px solid #00CC99!important; } 35 | caption { outline: 1px solid #37FFC4!important; } 36 | thead { outline: 1px solid #98DACA!important; } 37 | tbody { outline: 1px solid #64A7A0!important; } 38 | tfoot { outline: 1px solid #22746B!important; } 39 | tr { outline: 1px solid #86C0B2!important; } 40 | th { outline: 1px solid #A1E7D6!important; } 41 | td { outline: 1px solid #3F5A54!important; } 42 | col { outline: 1px solid #6C9A8F!important; } 43 | colgroup { outline: 1px solid #6C9A9D!important; } 44 | 45 | 46 | button { outline: 1px solid #DA8301!important; } 47 | datalist { outline: 1px solid #C06000!important; } 48 | fieldset { outline: 1px solid #D95100!important; } 49 | form { outline: 1px solid #D23600!important; } 50 | input { outline: 1px solid #FCA600!important; } 51 | keygen { outline: 1px solid #B31E00!important; } 52 | label { outline: 1px solid #EE8900!important; } 53 | legend { outline: 1px solid #DE6D00!important; } 54 | meter { outline: 1px solid #E8630C!important; } 55 | optgroup { outline: 1px solid #B33600!important; } 56 | option { outline: 1px solid #FF8A00!important; } 57 | output { outline: 1px solid #FF9619!important; } 58 | progress { outline: 1px solid #E57C00!important; } 59 | select { outline: 1px solid #E26E0F!important; } 60 | textarea { outline: 1px solid #CC5400!important; } 61 | 62 | 63 | 64 | details { outline: 1px solid #33848F!important; } 65 | summary { outline: 1px solid #60A1A6!important; } 66 | command { outline: 1px solid #438DA1!important; } 67 | menu { outline: 1px solid #449DA6!important; } 68 | 69 | 70 | 71 | del { outline: 1px solid #BF0000!important; } 72 | ins { outline: 1px solid #400000!important; } 73 | 74 | 75 | 76 | img { outline: 1px solid #22746B!important; } 77 | iframe { outline: 1px solid #64A7A0!important; } 78 | embed { outline: 1px solid #98DACA!important; } 79 | object { outline: 1px solid #00CC99!important; } 80 | param { outline: 1px solid #37FFC4!important; } 81 | video { outline: 1px solid #6EE866!important; } 82 | audio { outline: 1px solid #027353!important; } 83 | source { outline: 1px solid #012426!important; } 84 | canvas { outline: 1px solid #A2F570!important; } 85 | track { outline: 1px solid #59A600!important; } 86 | map { outline: 1px solid #7BE500!important; } 87 | area { outline: 1px solid #305900!important; } 88 | 89 | 90 | 91 | a { outline: 1px solid #FF62AB!important; } 92 | em { outline: 1px solid #800B41!important; } 93 | strong { outline: 1px solid #FF1583!important; } 94 | i { outline: 1px solid #803156!important; } 95 | b { outline: 1px solid #CC1169!important; } 96 | u { outline: 1px solid #FF0430!important; } 97 | s { outline: 1px solid #F805E3!important; } 98 | small { outline: 1px solid #D107B2!important; } 99 | abbr { outline: 1px solid #4A0263!important; } 100 | q { outline: 1px solid #240018!important; } 101 | cite { outline: 1px solid #64003C!important; } 102 | dfn { outline: 1px solid #B4005A!important; } 103 | sub { outline: 1px solid #DBA0C8!important; } 104 | sup { outline: 1px solid #CC0256!important; } 105 | time { outline: 1px solid #D6606D!important; } 106 | code { outline: 1px solid #E04251!important; } 107 | kbd { outline: 1px solid #5E001F!important; } 108 | samp { outline: 1px solid #9C0033!important; } 109 | var { outline: 1px solid #D90047!important; } 110 | mark { outline: 1px solid #FF0053!important; } 111 | bdi { outline: 1px solid #BF3668!important; } 112 | bdo { outline: 1px solid #6F1400!important; } 113 | ruby { outline: 1px solid #FF7B93!important; } 114 | rt { outline: 1px solid #FF2F54!important; } 115 | rp { outline: 1px solid #803E49!important; } 116 | span { outline: 1px solid #CC2643!important; } 117 | br { outline: 1px solid #DB687D!important; } 118 | wbr { outline: 1px solid #DB175B!important; } 119 | -------------------------------------------------------------------------------- /src/css/imports/_display.scss: -------------------------------------------------------------------------------- 1 | .dn { display: none; } 2 | .di { display: inline; } 3 | .db { display: block; } 4 | .dib { display: inline-block; } 5 | .dit { display: inline-table; } 6 | .dt { display: table; } 7 | .dtc { display: table-cell; } 8 | .dt-row { display: table-row; } 9 | .dt-row-group { display: table-row-group; } 10 | .dt-column { display: table-column; } 11 | .dt-column-group { display: table-column-group; } 12 | 13 | /* 14 | This will set table to full width and then 15 | all cells will be equal width 16 | */ 17 | .dt--fixed { 18 | table-layout: fixed; 19 | width: 100%; 20 | } 21 | 22 | @media (--breakpoint-not-small) { 23 | .dn-ns { display: none; } 24 | .di-ns { display: inline; } 25 | .db-ns { display: block; } 26 | .dib-ns { display: inline-block; } 27 | .dit-ns { display: inline-table; } 28 | .dt-ns { display: table; } 29 | .dtc-ns { display: table-cell; } 30 | .dt-row-ns { display: table-row; } 31 | .dt-row-group-ns { display: table-row-group; } 32 | .dt-column-ns { display: table-column; } 33 | .dt-column-group-ns { display: table-column-group; } 34 | 35 | .dt--fixed-ns { 36 | table-layout: fixed; 37 | width: 100%; 38 | } 39 | } 40 | 41 | @media (--breakpoint-medium) { 42 | .dn-m { display: none; } 43 | .di-m { display: inline; } 44 | .db-m { display: block; } 45 | .dib-m { display: inline-block; } 46 | .dit-m { display: inline-table; } 47 | .dt-m { display: table; } 48 | .dtc-m { display: table-cell; } 49 | .dt-row-m { display: table-row; } 50 | .dt-row-group-m { display: table-row-group; } 51 | .dt-column-m { display: table-column; } 52 | .dt-column-group-m { display: table-column-group; } 53 | 54 | .dt--fixed-m { 55 | table-layout: fixed; 56 | width: 100%; 57 | } 58 | } 59 | 60 | @media (--breakpoint-large) { 61 | .dn-l { display: none; } 62 | .di-l { display: inline; } 63 | .db-l { display: block; } 64 | .dib-l { display: inline-block; } 65 | .dit-l { display: inline-table; } 66 | .dt-l { display: table; } 67 | .dtc-l { display: table-cell; } 68 | .dt-row-l { display: table-row; } 69 | .dt-row-group-l { display: table-row-group; } 70 | .dt-column-l { display: table-column; } 71 | .dt-column-group-l { display: table-column-group; } 72 | 73 | .dt--fixed-l { 74 | table-layout: fixed; 75 | width: 100%; 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /src/css/imports/_flexbox.scss: -------------------------------------------------------------------------------- 1 | .flex { display: flex; } 2 | .inline-flex { display: inline-flex; } 3 | 4 | /* 1. Fix for Chrome 44 bug. 5 | * https://code.google.com/p/chromium/issues/detail?id=506893 */ 6 | .flex-auto { 7 | flex: 1 1 auto; 8 | min-width: 0; /* 1 */ 9 | min-height: 0; /* 1 */ 10 | } 11 | 12 | .flex-none { flex: none; } 13 | 14 | .flex-column { flex-direction: column; } 15 | .flex-row { flex-direction: row; } 16 | .flex-wrap { flex-wrap: wrap; } 17 | 18 | .items-start { align-items: flex-start; } 19 | .items-end { align-items: flex-end; } 20 | .items-center { align-items: center; } 21 | .items-baseline { align-items: baseline; } 22 | .items-stretch { align-items: stretch; } 23 | 24 | .self-start { align-self: flex-start; } 25 | .self-end { align-self: flex-end; } 26 | .self-center { align-self: center; } 27 | .self-baseline { align-self: baseline; } 28 | .self-stretch { align-self: stretch; } 29 | 30 | .justify-start { justify-content: flex-start; } 31 | .justify-end { justify-content: flex-end; } 32 | .justify-center { justify-content: center; } 33 | .justify-between { justify-content: space-between; } 34 | .justify-around { justify-content: space-around; } 35 | 36 | .content-start { align-content: flex-start; } 37 | .content-end { align-content: flex-end; } 38 | .content-center { align-content: center; } 39 | .content-between { align-content: space-between; } 40 | .content-around { align-content: space-around; } 41 | .content-stretch { align-content: stretch; } 42 | 43 | .order-0 { order: 0; } 44 | .order-1 { order: 1; } 45 | .order-2 { order: 2; } 46 | .order-3 { order: 3; } 47 | .order-4 { order: 4; } 48 | .order-5 { order: 5; } 49 | .order-6 { order: 6; } 50 | .order-7 { order: 7; } 51 | .order-8 { order: 8; } 52 | .order-last { order: 99999; } 53 | 54 | @media (--breakpoint-not-small) { 55 | .flex-ns { display: flex; } 56 | .inline-flex-ns { display: inline-flex; } 57 | .flex-auto-ns { 58 | flex: 1 1 auto; 59 | min-width: 0; /* 1 */ 60 | min-height: 0; /* 1 */ 61 | } 62 | .flex-none-ns { flex: none; } 63 | .flex-column-ns { flex-direction: column; } 64 | .flex-row-ns { flex-direction: row; } 65 | .flex-wrap-ns { flex-wrap: wrap; } 66 | .items-start-ns { align-items: flex-start; } 67 | .items-end-ns { align-items: flex-end; } 68 | .items-center-ns { align-items: center; } 69 | .items-baseline-ns { align-items: baseline; } 70 | .items-stretch-ns { align-items: stretch; } 71 | 72 | .self-start-ns { align-self: flex-start; } 73 | .self-end-ns { align-self: flex-end; } 74 | .self-center-ns { align-self: center; } 75 | .self-baseline-ns { align-self: baseline; } 76 | .self-stretch-ns { align-self: stretch; } 77 | 78 | .justify-start-ns { justify-content: flex-start; } 79 | .justify-end-ns { justify-content: flex-end; } 80 | .justify-center-ns { justify-content: center; } 81 | .justify-between-ns { justify-content: space-between; } 82 | .justify-around-ns { justify-content: space-around; } 83 | 84 | .content-start-ns { align-content: flex-start; } 85 | .content-end-ns { align-content: flex-end; } 86 | .content-center-ns { align-content: center; } 87 | .content-between-ns { align-content: space-between; } 88 | .content-around-ns { align-content: space-around; } 89 | .content-stretch-ns { align-content: stretch; } 90 | 91 | .order-0-ns { order: 0; } 92 | .order-1-ns { order: 1; } 93 | .order-2-ns { order: 2; } 94 | .order-3-ns { order: 3; } 95 | .order-4-ns { order: 4; } 96 | .order-5-ns { order: 5; } 97 | .order-6-ns { order: 6; } 98 | .order-7-ns { order: 7; } 99 | .order-8-ns { order: 8; } 100 | .order-last-ns { order: 99999; } 101 | } 102 | @media (--breakpoint-medium) { 103 | .flex-m { display: flex; } 104 | .inline-flex-m { display: inline-flex; } 105 | .flex-auto-m { 106 | flex: 1 1 auto; 107 | min-width: 0; /* 1 */ 108 | min-height: 0; /* 1 */ 109 | } 110 | .flex-none-m { flex: none; } 111 | .flex-column-m { flex-direction: column; } 112 | .flex-row-m { flex-direction: row; } 113 | .flex-wrap-m { flex-wrap: wrap; } 114 | .items-start-m { align-items: flex-start; } 115 | .items-end-m { align-items: flex-end; } 116 | .items-center-m { align-items: center; } 117 | .items-baseline-m { align-items: baseline; } 118 | .items-stretch-m { align-items: stretch; } 119 | 120 | .self-start-m { align-self: flex-start; } 121 | .self-end-m { align-self: flex-end; } 122 | .self-center-m { align-self: center; } 123 | .self-baseline-m { align-self: baseline; } 124 | .self-stretch-m { align-self: stretch; } 125 | 126 | .justify-start-m { justify-content: flex-start; } 127 | .justify-end-m { justify-content: flex-end; } 128 | .justify-center-m { justify-content: center; } 129 | .justify-between-m { justify-content: space-between; } 130 | .justify-around-m { justify-content: space-around; } 131 | 132 | .content-start-m { align-content: flex-start; } 133 | .content-end-m { align-content: flex-end; } 134 | .content-center-m { align-content: center; } 135 | .content-between-m { align-content: space-between; } 136 | .content-around-m { align-content: space-around; } 137 | .content-stretch-m { align-content: stretch; } 138 | 139 | .order-0-m { order: 0; } 140 | .order-1-m { order: 1; } 141 | .order-2-m { order: 2; } 142 | .order-3-m { order: 3; } 143 | .order-4-m { order: 4; } 144 | .order-5-m { order: 5; } 145 | .order-6-m { order: 6; } 146 | .order-7-m { order: 7; } 147 | .order-8-m { order: 8; } 148 | .order-last-m { order: 99999; } 149 | } 150 | 151 | @media (--breakpoint-large) { 152 | .flex-l { display: flex; } 153 | .inline-flex-l { display: inline-flex; } 154 | .flex-auto-l { 155 | flex: 1 1 auto; 156 | min-width: 0; /* 1 */ 157 | min-height: 0; /* 1 */ 158 | } 159 | .flex-none-l { flex: none; } 160 | .flex-column-l { flex-direction: column; } 161 | .flex-row-l { flex-direction: row; } 162 | .flex-wrap-l { flex-wrap: wrap; } 163 | .items-start-l { align-items: flex-start; } 164 | .items-end-l { align-items: flex-end; } 165 | .items-center-l { align-items: center; } 166 | .items-baseline-l { align-items: baseline; } 167 | .items-stretch-l { align-items: stretch; } 168 | 169 | .self-start-l { align-self: flex-start; } 170 | .self-end-l { align-self: flex-end; } 171 | .self-center-l { align-self: center; } 172 | .self-baseline-l { align-self: baseline; } 173 | .self-stretch-l { align-self: stretch; } 174 | 175 | .justify-start-l { justify-content: flex-start; } 176 | .justify-end-l { justify-content: flex-end; } 177 | .justify-center-l { justify-content: center; } 178 | .justify-between-l { justify-content: space-between; } 179 | .justify-around-l { justify-content: space-around; } 180 | 181 | .content-start-l { align-content: flex-start; } 182 | .content-end-l { align-content: flex-end; } 183 | .content-center-l { align-content: center; } 184 | .content-between-l { align-content: space-between; } 185 | .content-around-l { align-content: space-around; } 186 | .content-stretch-l { align-content: stretch; } 187 | 188 | .order-0-l { order: 0; } 189 | .order-1-l { order: 1; } 190 | .order-2-l { order: 2; } 191 | .order-3-l { order: 3; } 192 | .order-4-l { order: 4; } 193 | .order-5-l { order: 5; } 194 | .order-6-l { order: 6; } 195 | .order-7-l { order: 7; } 196 | .order-8-l { order: 8; } 197 | .order-last-l { order: 99999; } 198 | } 199 | -------------------------------------------------------------------------------- /src/css/imports/_floats.scss: -------------------------------------------------------------------------------- 1 | .fl { float: left; _display: inline; } 2 | .fr { float: right; _display: inline; } 3 | .fn { float: none; } 4 | 5 | @media (--breakpoint-not-small) { 6 | .fl-ns { float: left; _display: inline; } 7 | .fr-ns { float: right; _display: inline; } 8 | .fn-ns { float: none; } 9 | } 10 | 11 | @media (--breakpoint-medium) { 12 | .fl-m { float: left; _display: inline; } 13 | .fr-m { float: right; _display: inline; } 14 | .fn-m { float: none; } 15 | } 16 | 17 | @media (--breakpoint-large) { 18 | .fl-l { float: left; _display: inline; } 19 | .fr-l { float: right; _display: inline; } 20 | .fn-l { float: none; } 21 | } 22 | -------------------------------------------------------------------------------- /src/css/imports/_font-style.scss: -------------------------------------------------------------------------------- 1 | .i { font-style: italic; } 2 | .fs-normal { font-style: normal; } 3 | 4 | @media (--breakpoint-not-small) { 5 | .i-ns { font-style: italic; } 6 | .fs-normal-ns { font-style: normal; } 7 | } 8 | 9 | @media (--breakpoint-medium) { 10 | .i-m { font-style: italic; } 11 | .fs-normal-m { font-style: normal; } 12 | } 13 | 14 | @media (--breakpoint-large) { 15 | .i-l { font-style: italic; } 16 | .fs-normal-l { font-style: normal; } 17 | } 18 | -------------------------------------------------------------------------------- /src/css/imports/_font-weight.scss: -------------------------------------------------------------------------------- 1 | .normal { font-weight: normal; } 2 | .b { font-weight: var(--bold-font-weight); } 3 | .fw1 { font-weight: 100; } 4 | .fw2 { font-weight: 200; } 5 | .fw3 { font-weight: 300; } 6 | .fw4 { font-weight: 400; } 7 | .fw5 { font-weight: 500; } 8 | .fw6 { font-weight: 600; } 9 | .fw7 { font-weight: 700; } 10 | .fw8 { font-weight: 800; } 11 | .fw9 { font-weight: 900; } 12 | 13 | 14 | @media (--breakpoint-not-small) { 15 | .normal-ns { font-weight: normal; } 16 | .b-ns { font-weight: var(--bold-font-weight); } 17 | .fw1-ns { font-weight: 100; } 18 | .fw2-ns { font-weight: 200; } 19 | .fw3-ns { font-weight: 300; } 20 | .fw4-ns { font-weight: 400; } 21 | .fw5-ns { font-weight: 500; } 22 | .fw6-ns { font-weight: 600; } 23 | .fw7-ns { font-weight: 700; } 24 | .fw8-ns { font-weight: 800; } 25 | .fw9-ns { font-weight: 900; } 26 | } 27 | 28 | @media (--breakpoint-medium) { 29 | .normal-m { font-weight: normal; } 30 | .b-m { font-weight: var(--bold-font-weight); } 31 | .fw1-m { font-weight: 100; } 32 | .fw2-m { font-weight: 200; } 33 | .fw3-m { font-weight: 300; } 34 | .fw4-m { font-weight: 400; } 35 | .fw5-m { font-weight: 500; } 36 | .fw6-m { font-weight: 600; } 37 | .fw7-m { font-weight: 700; } 38 | .fw8-m { font-weight: 800; } 39 | .fw9-m { font-weight: 900; } 40 | } 41 | 42 | @media (--breakpoint-large) { 43 | .normal-l { font-weight: normal; } 44 | .b-l { font-weight: var(--bold-font-weight); } 45 | .fw1-l { font-weight: 100; } 46 | .fw2-l { font-weight: 200; } 47 | .fw3-l { font-weight: 300; } 48 | .fw4-l { font-weight: 400; } 49 | .fw5-l { font-weight: 500; } 50 | .fw6-l { font-weight: 600; } 51 | .fw7-l { font-weight: 700; } 52 | .fw8-l { font-weight: 800; } 53 | .fw9-l { font-weight: 900; } 54 | } 55 | -------------------------------------------------------------------------------- /src/css/imports/_forms.scss: -------------------------------------------------------------------------------- 1 | fieldset 2 | { 3 | position: relative; 4 | } 5 | 6 | .input-reset { 7 | -webkit-appearance: none; 8 | -moz-appearance: none; 9 | } 10 | 11 | .button-reset::-moz-focus-inner, 12 | .input-reset::-moz-focus-inner { 13 | border: 0; 14 | padding: 0; 15 | } 16 | 17 | input, textarea { 18 | background-color: var(--grey-2); 19 | border-radius: var(--border-radius); 20 | padding: 12px 16px 10px; 21 | font-size: var(--spacing-medium); 22 | line-height: 1.25; 23 | position: relative; 24 | transition: var(--hover-transition); 25 | z-index: 2; 26 | :focus { 27 | background-color: var(--white); 28 | } 29 | &:focus + label { 30 | opacity: 1; 31 | pointer-events: auto; 32 | transform: translateY(-120%); 33 | } 34 | } 35 | 36 | ::-webkit-input-placeholder { 37 | color: var(--black); 38 | font-size: var(--spacing-medium); 39 | line-height: normal; 40 | } 41 | 42 | :-moz-placeholder { 43 | color: var(--black); 44 | font-size: var(--spacing-medium); 45 | line-height: normal; 46 | } 47 | 48 | ::-moz-placeholder { 49 | color: var(--black); 50 | font-size: var(--spacing-medium); 51 | line-height: normal; 52 | } 53 | 54 | :-ms-input-placeholder { 55 | color: var(--black); 56 | font-size: var(--spacing-medium); 57 | line-height: normal; 58 | } 59 | 60 | label 61 | { 62 | font-size: .875rem; 63 | font-weight: 800; 64 | color: var(--white); 65 | background-color: var(--primary); 66 | border-radius: var(--border-radius); 67 | padding: var(--spacing-extra-small) var(--spacing-small); 68 | position: absolute; 69 | left: 0; 70 | top: 0; 71 | pointer-events: none; 72 | opacity: 0; 73 | line-height: 1; 74 | transition: var(--hover-transition); 75 | z-index: 2; 76 | } 77 | -------------------------------------------------------------------------------- /src/css/imports/_heights.scss: -------------------------------------------------------------------------------- 1 | .h1 { height: var(--spacing-medium); } 2 | .h2 { height: 2rem; } 3 | .h3 { height: 4rem; } 4 | .h4 { height: 8rem; } 5 | .h5 { height: 16rem; } 6 | 7 | /* Height Percentages - Based off of height of parent */ 8 | 9 | .h-25 { height: 25%; } 10 | .h-50 { height: 50%; } 11 | .h-75 { height: 75%; } 12 | .h-100 { height: 100%; } 13 | 14 | .min-h-100 { min-height: 100%; } 15 | 16 | /* Screen Height Percentage */ 17 | 18 | .vh-25 { height: 25vh; } 19 | .vh-50 { height: 50vh; } 20 | .vh-75 { height: 75vh; } 21 | .vh-100 { height: 100vh; } 22 | 23 | .min-vh-100 { min-height: 100vh; } 24 | 25 | 26 | /* String Properties */ 27 | 28 | .h-auto { height: auto; } 29 | .h-inherit { height: inherit; } 30 | 31 | @media (--breakpoint-not-small) { 32 | .h1-ns { height: var(--spacing-medium); } 33 | .h2-ns { height: 2rem; } 34 | .h3-ns { height: 4rem; } 35 | .h4-ns { height: 8rem; } 36 | .h5-ns { height: 16rem; } 37 | .h-25-ns { height: 25%; } 38 | .h-50-ns { height: 50%; } 39 | .h-75-ns { height: 75%; } 40 | .h-100-ns { height: 100%; } 41 | .min-h-100-ns { min-height: 100%; } 42 | .vh-25-ns { height: 25vh; } 43 | .vh-50-ns { height: 50vh; } 44 | .vh-75-ns { height: 75vh; } 45 | .vh-100-ns { height: 100vh; } 46 | .min-vh-100-ns { min-height: 100vh; } 47 | .h-auto-ns { height: auto; } 48 | .h-inherit-ns { height: inherit; } 49 | } 50 | 51 | @media (--breakpoint-medium) { 52 | .h1-m { height: var(--spacing-medium); } 53 | .h2-m { height: 2rem; } 54 | .h3-m { height: 4rem; } 55 | .h4-m { height: 8rem; } 56 | .h5-m { height: 16rem; } 57 | .h-25-m { height: 25%; } 58 | .h-50-m { height: 50%; } 59 | .h-75-m { height: 75%; } 60 | .h-100-m { height: 100%; } 61 | .min-h-100-ns { min-height: 100%; } 62 | .vh-25-m { height: 25vh; } 63 | .vh-50-m { height: 50vh; } 64 | .vh-75-m { height: 75vh; } 65 | .vh-100-m { height: 100vh; } 66 | .min-vh-100-m { min-height: 100vh; } 67 | .h-auto-m { height: auto; } 68 | .h-inherit-m { height: inherit; } 69 | } 70 | 71 | @media (--breakpoint-large) { 72 | .h1-l { height: var(--spacing-medium); } 73 | .h2-l { height: 2rem; } 74 | .h3-l { height: 4rem; } 75 | .h4-l { height: 8rem; } 76 | .h5-l { height: 16rem; } 77 | .h-25-l { height: 25%; } 78 | .h-50-l { height: 50%; } 79 | .h-75-l { height: 75%; } 80 | .h-100-l { height: 100%; } 81 | .min-h-100-l { min-height: 100%; } 82 | .vh-25-l { height: 25vh; } 83 | .vh-50-l { height: 50vh; } 84 | .vh-75-l { height: 75vh; } 85 | .vh-100-l { height: 100vh; } 86 | .min-vh-100-l { min-height: 100vh; } 87 | .h-auto-l { height: auto; } 88 | .h-inherit-l { height: inherit; } 89 | } 90 | -------------------------------------------------------------------------------- /src/css/imports/_images.scss: -------------------------------------------------------------------------------- 1 | img { 2 | max-width: 100%; 3 | } 4 | 5 | /* Remove border-radiius from full-width images */ 6 | img:not(.w-100) { 7 | border-radius: var(--border-radius); 8 | } 9 | -------------------------------------------------------------------------------- /src/css/imports/_line-height.scss: -------------------------------------------------------------------------------- 1 | .lh-solid { line-height: 1; } 2 | .lh-title { line-height: 1.25; } 3 | .lh-copy { line-height: 1.5; } 4 | 5 | @media (--breakpoint-not-small) { 6 | .lh-solid-ns { line-height: 1; } 7 | .lh-title-ns { line-height: 1.25; } 8 | .lh-copy-ns { line-height: 1.5; } 9 | } 10 | 11 | @media (--breakpoint-medium) { 12 | .lh-solid-m { line-height: 1; } 13 | .lh-title-m { line-height: 1.25; } 14 | .lh-copy-m { line-height: 1.5; } 15 | } 16 | 17 | @media (--breakpoint-large) { 18 | .lh-solid-l { line-height: 1; } 19 | .lh-title-l { line-height: 1.25; } 20 | .lh-copy-l { line-height: 1.5; } 21 | } 22 | -------------------------------------------------------------------------------- /src/css/imports/_links.scss: -------------------------------------------------------------------------------- 1 | .link { 2 | text-decoration: none; 3 | transition: var(--hover-transition); 4 | color: inherit; 5 | } 6 | 7 | .link:link, 8 | .link:visited { 9 | transition: color .15s ease-in; 10 | } 11 | .link:hover { 12 | transition: color .15s ease-in; 13 | text-decoration: underline; 14 | } 15 | .link:active { 16 | transition: color .15s ease-in; 17 | } 18 | .link:focus { 19 | transition: color .15s ease-in; 20 | outline: 1px dotted currentColor; 21 | } 22 | -------------------------------------------------------------------------------- /src/css/imports/_lists.scss: -------------------------------------------------------------------------------- 1 | .list { list-style-type: none; } 2 | -------------------------------------------------------------------------------- /src/css/imports/_max-widths.scss: -------------------------------------------------------------------------------- 1 | .mw-100 { max-width: 100%; } 2 | 3 | /* Max Width Scale */ 4 | 5 | .mw1 { max-width: 1rem; } 6 | .mw2 { max-width: 2rem; } 7 | .mw3 { max-width: 4rem; } 8 | .mw4 { max-width: 8rem; } 9 | .mw5 { max-width: 16rem; } 10 | .mw6 { max-width: 32rem; } 11 | .mw7 { max-width: 48rem; } 12 | .mw8 { max-width: 64rem; } 13 | .mw9 { max-width: 96rem; } 14 | 15 | /* Max Width String Properties */ 16 | 17 | .mw-none { max-width: none; } 18 | 19 | @media (--breakpoint-not-small) { 20 | .mw-100-ns { max-width: 100%; } 21 | 22 | .mw1-ns { max-width: 1rem; } 23 | .mw2-ns { max-width: 2rem; } 24 | .mw3-ns { max-width: 4rem; } 25 | .mw4-ns { max-width: 8rem; } 26 | .mw5-ns { max-width: 16rem; } 27 | .mw6-ns { max-width: 32rem; } 28 | .mw7-ns { max-width: 48rem; } 29 | .mw8-ns { max-width: 64rem; } 30 | .mw9-ns { max-width: 96rem; } 31 | 32 | .mw-none-ns { max-width: none; } 33 | } 34 | 35 | @media (--breakpoint-medium) { 36 | .mw-100-m { max-width: 100%; } 37 | 38 | .mw1-m { max-width: 1rem; } 39 | .mw2-m { max-width: 2rem; } 40 | .mw3-m { max-width: 4rem; } 41 | .mw4-m { max-width: 8rem; } 42 | .mw5-m { max-width: 16rem; } 43 | .mw6-m { max-width: 32rem; } 44 | .mw7-m { max-width: 48rem; } 45 | .mw8-m { max-width: 64rem; } 46 | .mw9-m { max-width: 96rem; } 47 | 48 | .mw-none-m { max-width: none; } 49 | } 50 | 51 | @media (--breakpoint-large) { 52 | .mw-100-l { max-width: 100%; } 53 | 54 | .mw1-l { max-width: 1rem; } 55 | .mw2-l { max-width: 2rem; } 56 | .mw3-l { max-width: 4rem; } 57 | .mw4-l { max-width: 8rem; } 58 | .mw5-l { max-width: 16rem; } 59 | .mw6-l { max-width: 32rem; } 60 | .mw7-l { max-width: 48rem; } 61 | .mw8-l { max-width: 64rem; } 62 | .mw9-l { max-width: 96rem; } 63 | 64 | .mw-none-l { max-width: none; } 65 | } 66 | -------------------------------------------------------------------------------- /src/css/imports/_media-queries.scss: -------------------------------------------------------------------------------- 1 | @custom-media --breakpoint-not-small screen and (min-width: 40em); 2 | 3 | @custom-media --breakpoint-medium screen and (min-width: 50em); 4 | 5 | @custom-media --breakpoint-large screen and (min-width: 60em); 6 | -------------------------------------------------------------------------------- /src/css/imports/_opacity.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | OPACITY 4 | Docs: http://tachyons.io/docs/themes/opacity/ 5 | 6 | */ 7 | 8 | .o-100 { opacity: 1; } 9 | .o-90 { opacity: .9; } 10 | .o-80 { opacity: .8; } 11 | .o-70 { opacity: .7; } 12 | .o-60 { opacity: .6; } 13 | .o-50 { opacity: .5; } 14 | .o-40 { opacity: .4; } 15 | .o-30 { opacity: .3; } 16 | .o-20 { opacity: .2; } 17 | .o-10 { opacity: .1; } 18 | .o-05 { opacity: .05; } 19 | .o-025 { opacity: .025; } 20 | .o-0 { opacity: 0; } 21 | -------------------------------------------------------------------------------- /src/css/imports/_outlines.scss: -------------------------------------------------------------------------------- 1 | .outline { outline: 1px solid; } 2 | .outline-transparent { outline: 1px solid transparent; } 3 | .outline-0 { outline: 0; } 4 | 5 | @media (--breakpoint-not-small) { 6 | .outline-ns { outline: 1px solid; } 7 | .outline-transparent-ns { outline: 1px solid transparent; } 8 | .outline-0-ns { outline: 0; } 9 | } 10 | 11 | @media (--breakpoint-medium) { 12 | .outline-m { outline: 1px solid; } 13 | .outline-transparent-m { outline: 1px solid transparent; } 14 | .outline-0-m { outline: 0; } 15 | } 16 | 17 | @media (--breakpoint-medium) { 18 | .outline-l { outline: 1px solid; } 19 | .outline-transparent-l { outline: 1px solid transparent; } 20 | .outline-0-l { outline: 0; } 21 | } 22 | -------------------------------------------------------------------------------- /src/css/imports/_overflow.scss: -------------------------------------------------------------------------------- 1 | .overflow-visible { overflow: visible; } 2 | .overflow-hidden { overflow: hidden; } 3 | .overflow-scroll { overflow: scroll; } 4 | .overflow-auto { overflow: auto; } 5 | 6 | .overflow-x-visible { overflow-x: visible; } 7 | .overflow-x-hidden { overflow-x: hidden; } 8 | .overflow-x-scroll { overflow-x: scroll; -webkit-overflow-scrolling: touch; } 9 | .overflow-x-auto { overflow-x: auto; } 10 | 11 | .overflow-y-visible { overflow-y: visible; } 12 | .overflow-y-hidden { overflow-y: hidden; } 13 | .overflow-y-scroll { overflow-y: scroll; } 14 | .overflow-y-auto { overflow-y: auto; } 15 | 16 | @media (--breakpoint-not-small) { 17 | .overflow-visible-ns { overflow: visible; } 18 | .overflow-hidden-ns { overflow: hidden; } 19 | .overflow-scroll-ns { overflow: scroll; } 20 | .overflow-auto-ns { overflow: auto; } 21 | .overflow-x-visible-ns { overflow-x: visible; } 22 | .overflow-x-hidden-ns { overflow-x: hidden; } 23 | .overflow-x-scroll-ns { overflow-x: scroll; -webkit-overflow-scrolling: touch; } 24 | .overflow-x-auto-ns { overflow-x: auto; } 25 | 26 | .overflow-y-visible-ns { overflow-y: visible; } 27 | .overflow-y-hidden-ns { overflow-y: hidden; } 28 | .overflow-y-scroll-ns { overflow-y: scroll; } 29 | .overflow-y-auto-ns { overflow-y: auto; } 30 | } 31 | 32 | @media (--breakpoint-medium) { 33 | .overflow-visible-m { overflow: visible; } 34 | .overflow-hidden-m { overflow: hidden; } 35 | .overflow-scroll-m { overflow: scroll; } 36 | .overflow-auto-m { overflow: auto; } 37 | 38 | .overflow-x-visible-m { overflow-x: visible; } 39 | .overflow-x-hidden-m { overflow-x: hidden; } 40 | .overflow-x-scroll-m { overflow-x: scroll; -webkit-overflow-scrolling: touch; } 41 | .overflow-x-auto-m { overflow-x: auto; } 42 | 43 | .overflow-y-visible-m { overflow-y: visible; } 44 | .overflow-y-hidden-m { overflow-y: hidden; } 45 | .overflow-y-scroll-m { overflow-y: scroll; } 46 | .overflow-y-auto-m { overflow-y: auto; } 47 | } 48 | 49 | @media (--breakpoint-large) { 50 | .overflow-visible-l { overflow: visible; } 51 | .overflow-hidden-l { overflow: hidden; } 52 | .overflow-scroll-l { overflow: scroll; } 53 | .overflow-auto-l { overflow: auto; } 54 | 55 | .overflow-x-visible-l { overflow-x: visible; } 56 | .overflow-x-hidden-l { overflow-x: hidden; } 57 | .overflow-x-scroll-l { overflow-x: scroll; -webkit-overflow-scrolling: touch; } 58 | .overflow-x-auto-l { overflow-x: auto; } 59 | 60 | .overflow-y-visible-l { overflow-y: visible; } 61 | .overflow-y-hidden-l { overflow-y: hidden; } 62 | .overflow-y-scroll-l { overflow-y: scroll; } 63 | .overflow-y-auto-l { overflow-y: auto; } 64 | } 65 | -------------------------------------------------------------------------------- /src/css/imports/_position.scss: -------------------------------------------------------------------------------- 1 | .static { position: static; } 2 | .relative { position: relative; } 3 | .absolute { position: absolute; } 4 | .fixed { position: fixed; } 5 | 6 | @media (--breakpoint-not-small) { 7 | .static-ns { position: static; } 8 | .relative-ns { position: relative; } 9 | .absolute-ns { position: absolute; } 10 | .fixed-ns { position: fixed; } 11 | } 12 | 13 | @media (--breakpoint-medium) { 14 | .static-m { position: static; } 15 | .relative-m { position: relative; } 16 | .absolute-m { position: absolute; } 17 | .fixed-m { position: fixed; } 18 | } 19 | 20 | @media (--breakpoint-large) { 21 | .static-l { position: static; } 22 | .relative-l { position: relative; } 23 | .absolute-l { position: absolute; } 24 | .fixed-l { position: fixed; } 25 | } 26 | -------------------------------------------------------------------------------- /src/css/imports/_reset.scss: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } 49 | 50 | input, textarea { 51 | font-size: var(--spacing-medium); 52 | border: none; 53 | font-family: inherit; 54 | border: 0; 55 | margin: 0; 56 | } 57 | 58 | button { 59 | font-family: inherit; 60 | border: 0; 61 | margin: 0; 62 | cursor: pointer; 63 | } 64 | 65 | a { 66 | color: inherit; 67 | } 68 | -------------------------------------------------------------------------------- /src/css/imports/_responsive-nav.scss: -------------------------------------------------------------------------------- 1 | .mobile-menu-container { 2 | cursor: pointer; 3 | display: block; 4 | padding: var(--spacing-medium) var(--spacing-small) 0 0; 5 | position: absolute; 6 | right: 0; 7 | top: 0; 8 | z-index: 2; 9 | } 10 | 11 | .nav-menu { 12 | background: white; 13 | box-shadow: inset 0 -4px 0 var(--grey-1); 14 | flex-direction: column; 15 | height: 0; 16 | right: 0; 17 | overflow-y: auto; 18 | position: absolute; 19 | top: calc(var(--spacing-medium) + 30px); 20 | transition: height .3s ease-in-out; 21 | min-width: 100%; 22 | z-index: 1; 23 | } 24 | 25 | .mobile-menu-inner { 26 | transition: all .3s ease-in-out; 27 | } 28 | 29 | .menu-open .nav-menu { 30 | height: auto; 31 | } 32 | 33 | .menu-open .menu-icon-top { 34 | transform: rotate(45deg); 35 | } 36 | 37 | .menu-open .menu-icon-middle { 38 | opacity: 0; 39 | } 40 | 41 | .menu-open .menu-icon-bottom { 42 | transform: translatex(-48px) translatey(28px) rotate(-45deg); 43 | } 44 | 45 | @media (--breakpoint-large) { 46 | .mobile-menu-container { 47 | display: none; 48 | } 49 | 50 | .nav-menu { 51 | flex-direction: row; 52 | position: static; 53 | min-width: unset; 54 | height: auto; 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/css/imports/_states.scss: -------------------------------------------------------------------------------- 1 | /* Focus states */ 2 | input:focus, textarea:focus, a:focus, button:focus { 3 | box-shadow: inset 0 0 0 2px var(--primary); 4 | outline: 0!important; 5 | } 6 | 7 | .raise { 8 | transition: var(--hover-transition); 9 | transform: translateY(0) translateZ(0); 10 | } 11 | 12 | .raise:hover, 13 | .raise:focus { 14 | transition: var(--hover-transition); 15 | transform: translateY(-.12rem) translateZ(0); 16 | } 17 | 18 | .raise:active { 19 | transition: var(--hover-transition); 20 | opacity: .5; 21 | } 22 | 23 | .hide-child .child { 24 | opacity: 0; 25 | transition: opacity .15s ease-in; 26 | } 27 | .hide-child:hover .child, 28 | .hide-child:focus .child, 29 | .hide-child:active .child { 30 | opacity: 1; 31 | transition: opacity .15s ease-in; 32 | } 33 | 34 | .underline-hover:hover, 35 | .underline-hover:focus { 36 | text-decoration: underline; 37 | } 38 | 39 | .pointer:hover { 40 | cursor: pointer; 41 | } 42 | -------------------------------------------------------------------------------- /src/css/imports/_styles.scss: -------------------------------------------------------------------------------- 1 | ::selection { 2 | background-color: var(--highlight); 3 | } 4 | 5 | /* Used in the navbar */ 6 | .divider-grey { 7 | box-shadow: inset 0 -4px 0 var(--grey-1); 8 | /* Link hover states */ 9 | & a { 10 | transition: var(--hover-transition); 11 | } 12 | & ul a:hover, & ul a:focus { 13 | box-shadow: inset 0 -4px 0 var(--primary); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/css/imports/_svg.scss: -------------------------------------------------------------------------------- 1 | svg { 2 | fill: currentColor; 3 | fill-rule:evenodd; 4 | clip-rule:evenodd; 5 | max-width: 100%; 6 | max-height: 100%; 7 | } 8 | -------------------------------------------------------------------------------- /src/css/imports/_tables.scss: -------------------------------------------------------------------------------- 1 | table 2 | { 3 | border-radius: var(--border-radius); 4 | overflow: hidden; 5 | } 6 | 7 | td, th { 8 | padding: $spacing-medium; 9 | } 10 | 11 | th:not(:first-child), td:not(:first-child) { 12 | text-align: right; 13 | } 14 | 15 | th { 16 | color: var(--grey-3); 17 | font-weight: 700; 18 | white-space: nowrap; 19 | { 20 | white-space: wrap; 21 | } 22 | } 23 | 24 | tr th { 25 | text-align: center; 26 | } 27 | 28 | tbody tr:nth-child(even) { 29 | background-color: var(--grey-1); 30 | } 31 | -------------------------------------------------------------------------------- /src/css/imports/_text-align.scss: -------------------------------------------------------------------------------- 1 | .tl { text-align: left; } 2 | .tr { text-align: right; } 3 | .tc { text-align: center; } 4 | 5 | @media (--breakpoint-not-small) { 6 | .tl-ns { text-align: left; } 7 | .tr-ns { text-align: right; } 8 | .tc-ns { text-align: center; } 9 | } 10 | 11 | @media (--breakpoint-medium) { 12 | .tl-m { text-align: left; } 13 | .tr-m { text-align: right; } 14 | .tc-m { text-align: center; } 15 | } 16 | 17 | @media (--breakpoint-large) { 18 | .tl-l { text-align: left; } 19 | .tr-l { text-align: right; } 20 | .tc-l { text-align: center; } 21 | } 22 | -------------------------------------------------------------------------------- /src/css/imports/_text-decoration.scss: -------------------------------------------------------------------------------- 1 | .strike { text-decoration: line-through; } 2 | .underline { text-decoration: underline; } 3 | .no-underline { text-decoration: none; } 4 | 5 | 6 | @media (--breakpoint-not-small) { 7 | .strike-ns { text-decoration: line-through; } 8 | .underline-ns { text-decoration: underline; } 9 | .no-underline-ns { text-decoration: none; } 10 | } 11 | 12 | @media (--breakpoint-medium) { 13 | .strike-m { text-decoration: line-through; } 14 | .underline-m { text-decoration: underline; } 15 | .no-underline-m { text-decoration: none; } 16 | } 17 | 18 | @media (--breakpoint-large) { 19 | .strike-l { text-decoration: line-through; } 20 | .underline-l { text-decoration: underline; } 21 | .no-underline-l { text-decoration: none; } 22 | } 23 | -------------------------------------------------------------------------------- /src/css/imports/_text-transform.scss: -------------------------------------------------------------------------------- 1 | .ttc { text-transform: capitalize; } 2 | .ttl { text-transform: lowercase; } 3 | .ttu { text-transform: uppercase; } 4 | .ttn { text-transform: none; } 5 | 6 | @media (--breakpoint-not-small) { 7 | .ttc-ns { text-transform: capitalize; } 8 | .ttl-ns { text-transform: lowercase; } 9 | .ttu-ns { text-transform: uppercase; } 10 | .ttn-ns { text-transform: none; } 11 | } 12 | 13 | @media (--breakpoint-medium) { 14 | .ttc-m { text-transform: capitalize; } 15 | .ttl-m { text-transform: lowercase; } 16 | .ttu-m { text-transform: uppercase; } 17 | .ttn-m { text-transform: none; } 18 | } 19 | 20 | @media (--breakpoint-large) { 21 | .ttc-l { text-transform: capitalize; } 22 | .ttl-l { text-transform: lowercase; } 23 | .ttu-l { text-transform: uppercase; } 24 | .ttn-l { text-transform: none; } 25 | } 26 | -------------------------------------------------------------------------------- /src/css/imports/_type-scale.scss: -------------------------------------------------------------------------------- 1 | .f1 { font-size: 3rem; } 2 | .f2 { font-size: 2.25rem; } 3 | .f3 { font-size: 1.5rem; } 4 | .f4 { font-size: 1.25rem;; } 5 | .f5 { font-size: var(--spacing-medium); } 6 | .f6 { font-size: .875rem; } 7 | 8 | @media (--breakpoint-not-small) { 9 | .f-6-ns, 10 | .f-headline-ns { font-size: 6rem; } 11 | .f-5-ns, 12 | .f-subheadline-ns { font-size: 5rem; } 13 | .f1-ns { font-size: 3rem; } 14 | .f2-ns { font-size: 2.25rem; } 15 | .f3-ns { font-size: 1.5rem; } 16 | .f4-ns { font-size: 1.25rem;; } 17 | .f5-ns { font-size: var(--spacing-medium); } 18 | .f6-ns { font-size: .875rem; } 19 | } 20 | 21 | @media (--breakpoint-medium) { 22 | .f-6-m, 23 | .f-headline-m { font-size: 6rem; } 24 | .f-5-m, 25 | .f-subheadline-m { font-size: 5rem; } 26 | .f1-m { font-size: 3rem; } 27 | .f2-m { font-size: 2.25rem; } 28 | .f3-m { font-size: 1.5rem; } 29 | .f4-m { font-size: 1.25rem;; } 30 | .f5-m { font-size: var(--spacing-medium); } 31 | .f6-m { font-size: .875rem; } 32 | } 33 | 34 | @media (--breakpoint-large) { 35 | .f-6-l, 36 | .f-headline-l { 37 | font-size: 6rem; 38 | } 39 | .f-5-l, 40 | .f-subheadline-l { 41 | font-size: 5rem; 42 | } 43 | .f1-l { font-size: 3rem; } 44 | .f2-l { font-size: 2.25rem; } 45 | .f3-l { font-size: 1.5rem; } 46 | .f4-l { font-size: 1.25rem;; } 47 | .f5-l { font-size: var(--spacing-medium); } 48 | .f6-l { font-size: .875rem; } 49 | } 50 | -------------------------------------------------------------------------------- /src/css/imports/_typography.scss: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: var(--font-size); 3 | @media (--breakpoint-medium) { 4 | font-size: var(--font-size-m); 5 | } 6 | @media (--breakpoint-large) { 7 | font-size: var(--font-size-l); 8 | } 9 | background-color: var(--black); 10 | } 11 | 12 | 13 | body { 14 | font-family: var(--font-family); 15 | font-size: var(--spacing-medium); 16 | line-height: var(--line-height); 17 | font-weight: var(--body-font-weight); 18 | -webkit-font-smoothing: antialiased; 19 | -moz-osx-font-smoothing: grayscale; 20 | background-color: var(--off-white); 21 | } 22 | 23 | p { 24 | margin-bottom: var(--spacing-medium); 25 | max-width: 32rem; 26 | } 27 | 28 | strong { 29 | font-weight: var(--bold-font-weight); 30 | } 31 | 32 | em { 33 | font-style: italic; 34 | } 35 | 36 | sup { 37 | font-size: .6rem; 38 | font-weight: 700; 39 | vertical-align: super; 40 | } 41 | 42 | /* Measure is limited to ~66 characters */ 43 | .measure { 44 | max-width: 30em; 45 | } 46 | 47 | /* Measure is limited to ~80 characters */ 48 | .measure-wide { 49 | max-width: 34em; 50 | } 51 | 52 | /* Measure is limited to ~45 characters */ 53 | .measure-narrow { 54 | max-width: 25em; 55 | } 56 | 57 | /* Book paragraph style - paragraphs are indented with no vertical spacing. */ 58 | .indent { 59 | text-indent: 1em; 60 | margin-top: 0; 61 | margin-bottom: 0; 62 | } 63 | 64 | .small-caps { 65 | font-variant: small-caps; 66 | } 67 | 68 | /* Combine this class with a width to truncate text (or just leave as is to truncate at width of containing element. */ 69 | 70 | .truncate { 71 | white-space: nowrap; 72 | overflow: hidden; 73 | text-overflow: ellipsis; 74 | } 75 | 76 | @media (--breakpoint-not-small) { 77 | .measure-ns { 78 | max-width: 30em; 79 | } 80 | .measure-wide-ns { 81 | max-width: 34em; 82 | } 83 | .measure-narrow-ns { 84 | max-width: 20em; 85 | } 86 | .indent-ns { 87 | text-indent: 1em; 88 | margin-top: 0; 89 | margin-bottom: 0; 90 | } 91 | .small-caps-ns { 92 | font-variant: small-caps; 93 | } 94 | .truncate-ns { 95 | white-space: nowrap; 96 | overflow: hidden; 97 | text-overflow: ellipsis; 98 | } 99 | } 100 | 101 | @media (--breakpoint-medium) { 102 | .measure-m { 103 | max-width: 30em; 104 | } 105 | .measure-wide-m { 106 | max-width: 34em; 107 | } 108 | .measure-narrow-m { 109 | max-width: 20em; 110 | } 111 | .indent-m { 112 | text-indent: 1em; 113 | margin-top: 0; 114 | margin-bottom: 0; 115 | } 116 | .small-caps-m { 117 | font-variant: small-caps; 118 | } 119 | .truncate-m { 120 | white-space: nowrap; 121 | overflow: hidden; 122 | text-overflow: ellipsis; 123 | } 124 | } 125 | 126 | @media (--breakpoint-large) { 127 | .measure-l { 128 | max-width: 30em; 129 | } 130 | .measure-wide-l { 131 | max-width: 34em; 132 | } 133 | .measure-narrow-l { 134 | max-width: 20em; 135 | } 136 | .indent-l { 137 | text-indent: 1em; 138 | margin-top: 0; 139 | margin-bottom: 0; 140 | } 141 | .small-caps-l { 142 | font-variant: small-caps; 143 | } 144 | .truncate-l { 145 | white-space: nowrap; 146 | overflow: hidden; 147 | text-overflow: ellipsis; 148 | } 149 | } 150 | -------------------------------------------------------------------------------- /src/css/imports/_utilities.scss: -------------------------------------------------------------------------------- 1 | .aspect-ratio { 2 | height: 0; 3 | position: relative; 4 | } 5 | 6 | .aspect-ratio--16x9 { padding-bottom: 56.25%; } 7 | .aspect-ratio--9x16 { padding-bottom: 177.77%; } 8 | 9 | .aspect-ratio--4x3 { padding-bottom: 75%; } 10 | .aspect-ratio--3x4 { padding-bottom: 133.33%; } 11 | 12 | .aspect-ratio--6x4 { padding-bottom: 66.6%; } 13 | .aspect-ratio--4x6 { padding-bottom: 150%; } 14 | 15 | .aspect-ratio--8x5 { padding-bottom: 62.5%; } 16 | .aspect-ratio--5x8 { padding-bottom: 160%; } 17 | 18 | .aspect-ratio--7x5 { padding-bottom: 71.42%; } 19 | .aspect-ratio--5x7 { padding-bottom: 140%; } 20 | 21 | .aspect-ratio--1x1 { padding-bottom: 100%; } 22 | 23 | .aspect-ratio--object { 24 | position: absolute; 25 | top: 0; 26 | right: 0; 27 | bottom: 0; 28 | left: 0; 29 | width: 100%; 30 | height: 100%; 31 | z-index: 100; 32 | } 33 | 34 | .center { 35 | margin-right: auto; 36 | margin-left: auto; 37 | } 38 | -------------------------------------------------------------------------------- /src/css/imports/_variables.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | /* Colors */ 3 | --primary: rgba(255, 68, 0, 1); 4 | --highlight: rgba(254, 213, 198, 1); 5 | --white: rgba(255, 255, 255, 1); 6 | --off-white: rgba(255, 253, 252, 1); 7 | --grey-1: rgba(245, 243, 242, 1); 8 | --grey-2: rgba(235, 231, 230, 1); 9 | --grey-3: rgba(89, 87, 86, 1); 10 | --grey-4: rgba(66, 64, 64, 1); 11 | --black: rgba(43, 37, 35, 1); 12 | 13 | /* Typography */ 14 | --font-family: Nunito Sans, -apple-system, BlinkMacSystemFont, 'avenir next', avenir, helvetica, 'helvetica neue', ubuntu, roboto, noto, 'segoe ui', arial, sans-serif; 15 | --line-height: 1.5; 16 | 17 | --font-size: 18px; 18 | --font-size-m: 20px; 19 | --font-size-l: 22px; 20 | 21 | --body-font-weight: 400; 22 | --bold-font-weight: 700; 23 | 24 | /* Sizing */ 25 | --spacing-none: 0; 26 | --spacing-extra-small: .25rem; 27 | --spacing-small: .5rem; 28 | --spacing-medium: 1rem; 29 | --spacing-large: 2rem; 30 | --spacing-extra-large: 4rem; 31 | --spacing-extra-extra-large: 8rem; 32 | --spacing-extra-extra-extra-large: 16rem; 33 | 34 | /* Miscelaneous */ 35 | --border-radius: .25rem; 36 | --hover-transition: all 150ms ease; 37 | } 38 | -------------------------------------------------------------------------------- /src/css/imports/_vertical-align.scss: -------------------------------------------------------------------------------- 1 | .v-base { vertical-align: baseline; } 2 | .v-mid { vertical-align: middle; } 3 | .v-top { vertical-align: top; } 4 | .v-btm { vertical-align: bottom; } 5 | 6 | @media (--breakpoint-not-small) { 7 | .v-base-ns { vertical-align: baseline; } 8 | .v-mid-ns { vertical-align: middle; } 9 | .v-top-ns { vertical-align: top; } 10 | .v-btm-ns { vertical-align: bottom; } 11 | } 12 | 13 | @media (--breakpoint-medium) { 14 | .v-base-m { vertical-align: baseline; } 15 | .v-mid-m { vertical-align: middle; } 16 | .v-top-m { vertical-align: top; } 17 | .v-btm-m { vertical-align: bottom; } 18 | } 19 | 20 | @media (--breakpoint-large) { 21 | .v-base-l { vertical-align: baseline; } 22 | .v-mid-l { vertical-align: middle; } 23 | .v-top-l { vertical-align: top; } 24 | .v-btm-l { vertical-align: bottom; } 25 | } 26 | -------------------------------------------------------------------------------- /src/css/imports/_visibility.scss: -------------------------------------------------------------------------------- 1 | .clip { 2 | position: fixed !important; 3 | _position: absolute !important; 4 | clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 5 | clip: rect(1px, 1px, 1px, 1px); 6 | } 7 | 8 | @media (--breakpoint-not-small) { 9 | .clip-ns { 10 | position: fixed !important; 11 | _position: absolute !important; 12 | clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 13 | clip: rect(1px, 1px, 1px, 1px); 14 | } 15 | } 16 | 17 | @media (--breakpoint-medium) { 18 | .clip-m { 19 | position: fixed !important; 20 | _position: absolute !important; 21 | clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 22 | clip: rect(1px, 1px, 1px, 1px); 23 | } 24 | } 25 | 26 | @media (--breakpoint-large) { 27 | .clip-l { 28 | position: fixed !important; 29 | _position: absolute !important; 30 | clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 31 | clip: rect(1px, 1px, 1px, 1px); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/css/imports/_white-space.scss: -------------------------------------------------------------------------------- 1 | .ws-normal { white-space: normal; } 2 | .nowrap { white-space: nowrap; } 3 | .pre { white-space: pre; } 4 | 5 | @media (--breakpoint-not-small) { 6 | .ws-normal-ns { white-space: normal; } 7 | .nowrap-ns { white-space: nowrap; } 8 | .pre-ns { white-space: pre; } 9 | } 10 | 11 | @media (--breakpoint-medium) { 12 | .ws-normal-m { white-space: normal; } 13 | .nowrap-m { white-space: nowrap; } 14 | .pre-m { white-space: pre; } 15 | } 16 | 17 | @media (--breakpoint-large) { 18 | .ws-normal-l { white-space: normal; } 19 | .nowrap-l { white-space: nowrap; } 20 | .pre-l { white-space: pre; } 21 | } 22 | -------------------------------------------------------------------------------- /src/css/imports/_widths.scss: -------------------------------------------------------------------------------- 1 | .w1 { width: var(--spacing-medium); } 2 | .w2 { width: 2rem; } 3 | .w3 { width: 4rem; } 4 | .w4 { width: 8rem; } 5 | .w5 { width: 16rem; } 6 | 7 | .w-10 { width: 10%; } 8 | .w-20 { width: 20%; } 9 | .w-25 { width: 25%; } 10 | .w-30 { width: 30%; } 11 | .w-33 { width: 33%; } 12 | .w-34 { width: 34%; } 13 | .w-40 { width: 40%; } 14 | .w-50 { width: 50%; } 15 | .w-60 { width: 60%; } 16 | .w-70 { width: 70%; } 17 | .w-75 { width: 75%; } 18 | .w-80 { width: 80%; } 19 | .w-90 { width: 90%; } 20 | .w-100 { width: 100%; } 21 | 22 | .w-third { width: calc(100% / 3); } 23 | .w-two-thirds { width: calc(100% / 1.5); } 24 | .w-auto { width: auto; } 25 | 26 | @media (--breakpoint-not-small) { 27 | .w1-ns { width: var(--spacing-medium); } 28 | .w2-ns { width: 2rem; } 29 | .w3-ns { width: 4rem; } 30 | .w4-ns { width: 8rem; } 31 | .w5-ns { width: 16rem; } 32 | .w-10-ns { width: 10%; } 33 | .w-20-ns { width: 20%; } 34 | .w-25-ns { width: 25%; } 35 | .w-30-ns { width: 30%; } 36 | .w-33-ns { width: 33%; } 37 | .w-34-ns { width: 34%; } 38 | .w-40-ns { width: 40%; } 39 | .w-50-ns { width: 50%; } 40 | .w-60-ns { width: 60%; } 41 | .w-70-ns { width: 70%; } 42 | .w-75-ns { width: 75%; } 43 | .w-80-ns { width: 80%; } 44 | .w-90-ns { width: 90%; } 45 | .w-100-ns { width: 100%; } 46 | .w-third-ns { width: calc(100% / 3); } 47 | .w-two-thirds-ns { width: calc(100% / 1.5); } 48 | .w-auto-ns { width: auto; } 49 | } 50 | 51 | @media (--breakpoint-medium) { 52 | .w1-m { width: var(--spacing-medium); } 53 | .w2-m { width: 2rem; } 54 | .w3-m { width: 4rem; } 55 | .w4-m { width: 8rem; } 56 | .w5-m { width: 16rem; } 57 | .w-10-m { width: 10%; } 58 | .w-20-m { width: 20%; } 59 | .w-25-m { width: 25%; } 60 | .w-30-m { width: 30%; } 61 | .w-33-m { width: 33%; } 62 | .w-34-m { width: 34%; } 63 | .w-40-m { width: 40%; } 64 | .w-50-m { width: 50%; } 65 | .w-60-m { width: 60%; } 66 | .w-70-m { width: 70%; } 67 | .w-75-m { width: 75%; } 68 | .w-80-m { width: 80%; } 69 | .w-90-m { width: 90%; } 70 | .w-100-m { width: 100%; } 71 | .w-third-m { width: calc(100% / 3); } 72 | .w-two-thirds-m { width: calc(100% / 1.5); } 73 | .w-auto-m { width: auto; } 74 | } 75 | 76 | @media (--breakpoint-large) { 77 | .w1-l { width: var(--spacing-medium); } 78 | .w2-l { width: 2rem; } 79 | .w3-l { width: 4rem; } 80 | .w4-l { width: 8rem; } 81 | .w5-l { width: 16rem; } 82 | .w-10-l { width: 10%; } 83 | .w-20-l { width: 20%; } 84 | .w-25-l { width: 25%; } 85 | .w-30-l { width: 30%; } 86 | .w-33-l { width: 33%; } 87 | .w-34-l { width: 34%; } 88 | .w-40-l { width: 40%; } 89 | .w-50-l { width: 50%; } 90 | .w-60-l { width: 60%; } 91 | .w-70-l { width: 70%; } 92 | .w-75-l { width: 75%; } 93 | .w-80-l { width: 80%; } 94 | .w-90-l { width: 90%; } 95 | .w-100-l { width: 100%; } 96 | .w-third-l { width: calc(100% / 3); } 97 | .w-two-thirds-l { width: calc(100% / 1.5); } 98 | .w-auto-l { width: auto; } 99 | } 100 | -------------------------------------------------------------------------------- /src/css/imports/_word-break.scss: -------------------------------------------------------------------------------- 1 | .word-normal { word-break: normal; } 2 | .word-wrap { word-break: break-all; } 3 | .word-nowrap { word-break: keep-all; } 4 | 5 | @media (--breakpoint-not-small) { 6 | .word-normal-ns { word-break: normal; } 7 | .word-wrap-ns { word-break: break-all; } 8 | .word-nowrap-ns { word-break: keep-all; } 9 | } 10 | 11 | @media (--breakpoint-medium) { 12 | .word-normal-m { word-break: normal; } 13 | .word-wrap-m { word-break: break-all; } 14 | .word-nowrap-m { word-break: keep-all; } 15 | } 16 | 17 | @media (--breakpoint-large) { 18 | .word-normal-l { word-break: normal; } 19 | .word-wrap-l { word-break: break-all; } 20 | .word-nowrap-l { word-break: keep-all; } 21 | } 22 | -------------------------------------------------------------------------------- /src/css/imports/_z-index.scss: -------------------------------------------------------------------------------- 1 | .z-0 { z-index: 0; } 2 | .z-1 { z-index: 1; } 3 | .z-2 { z-index: 2; } 4 | .z-3 { z-index: 3; } 5 | .z-4 { z-index: 4; } 6 | .z-5 { z-index: 5; } 7 | 8 | .z-999 { z-index: 999; } 9 | .z-9999 { z-index: 9999; } 10 | 11 | .z-max { 12 | z-index: 2147483647; 13 | } 14 | 15 | .z-inherit { z-index: inherit; } 16 | .z-initial { z-index: initial; } 17 | .z-unset { z-index: unset; } 18 | -------------------------------------------------------------------------------- /src/css/main.scss: -------------------------------------------------------------------------------- 1 | /*! TACHYONS v4.5.5 | http://tachyons.io */ 2 | 3 | /* 4 | * 5 | * ________ ______ 6 | * ___ __/_____ _________ /______ ______________________ 7 | * __ / _ __ `/ ___/_ __ \_ / / / __ \_ __ \_ ___/ 8 | * _ / / /_/ // /__ _ / / / /_/ // /_/ / / / /(__ ) 9 | * /_/ \__,_/ \___/ /_/ /_/_\__, / \____//_/ /_//____/ 10 | * /____/ 11 | * 12 | * TABLE OF CONTENTS 13 | * 14 | * 1. External Library Includes 15 | * - Reset.css | http://meyerweb.com/eric/tools/css/reset/ 16 | * 2. Tachyons Modules 17 | * 3. Variables 18 | * - Media Queries 19 | * - Colors 20 | * 4. Debugging 21 | * - Debug all 22 | * - Debug children 23 | * 24 | */ 25 | 26 | 27 | /* External Library Includes */ 28 | @use './imports/_reset'; 29 | 30 | /* Modules */ 31 | @use './imports/_box-sizing'; 32 | @use './imports/_images'; 33 | @use './imports/_background-size'; 34 | @use './imports/_background-position'; 35 | @use './imports/_outlines'; 36 | @use './imports/_borders'; 37 | @use './imports/_border-radius'; 38 | @use './imports/_border-style'; 39 | @use './imports/_border-widths'; 40 | @use './imports/_border-colors'; 41 | @use './imports/_code'; 42 | @use './imports/_coordinates'; 43 | @use './imports/_clears'; 44 | @use './imports/_display'; 45 | @use './imports/_flexbox'; 46 | @use './imports/_floats'; 47 | @use './imports/_font-style'; 48 | @use './imports/_font-weight'; 49 | @use './imports/_forms'; 50 | @use './imports/_heights'; 51 | @use './imports/_line-height'; 52 | @use './imports/_links'; 53 | @use './imports/_lists'; 54 | @use './imports/_max-widths'; 55 | @use './imports/_widths'; 56 | @use './imports/_overflow'; 57 | @use './imports/_position'; 58 | @use './imports/_opacity'; 59 | @use './imports/_spacing'; 60 | @use './imports/_text-decoration'; 61 | @use './imports/_text-align'; 62 | @use './imports/_text-transform'; 63 | @use './imports/_type-scale'; 64 | @use './imports/_typography'; 65 | @use './imports/_utilities'; 66 | @use './imports/_visibility'; 67 | @use './imports/_white-space'; 68 | @use './imports/_vertical-align'; 69 | @use './imports/_states'; 70 | @use './imports/_z-index'; 71 | @use './imports/_responsive-nav'; 72 | @use './imports/_styles'; 73 | @use './imports/_buttons'; 74 | @use './imports/_svg'; 75 | @use './imports/_cms'; 76 | 77 | /* Variables */ 78 | /* Importing here will allow you to override any variables in the modules */ 79 | @use './imports/_colors'; 80 | @use './imports/_media-queries'; 81 | @use './imports/_variables'; 82 | 83 | /* Debugging */ 84 | @use './imports/_debug-children'; 85 | @use './imports/_debug-grid'; 86 | 87 | /* Uncomment out the line below to help debug layout issues */ 88 | /*@use './imports/_debug';*/ 89 | -------------------------------------------------------------------------------- /src/fonts/.keep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/decaporg/one-click-hugo-cms/3d692070bd1d379eea5b81ced9a7536215c5e761/src/fonts/.keep -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | // JS Goes here - ES6 supported 2 | 3 | import "./css/main.scss"; 4 | 5 | const mobileMenu = document.querySelector("[data-mobile-menu]"); 6 | const nav = document.querySelector("[data-nav]"); 7 | 8 | function toggleMobileMenu() { 9 | nav.classList.toggle("menu-open"); 10 | } 11 | 12 | mobileMenu.addEventListener("click", toggleMobileMenu); 13 | 14 | // Say hello 15 | // eslint-disable-next-line no-console 16 | console.log("🦊 Hello! Edit me in src/index.js"); 17 | -------------------------------------------------------------------------------- /src/js/app.js: -------------------------------------------------------------------------------- 1 | // JS Goes here - ES6 supported 2 | if (window.netlifyIdentity) { 3 | window.netlifyIdentity.on("init", (user) => { 4 | if (!user) { 5 | window.netlifyIdentity.on("login", () => { 6 | document.location.href = "/admin/"; 7 | }); 8 | } 9 | }); 10 | } 11 | -------------------------------------------------------------------------------- /src/js/cms-preview-templates/components/jumbotron.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default class Jumbotron extends React.Component { 4 | render() { 5 | const {image, title, subtitle} = this.props; 6 | return
    7 |
    10 |
    11 |
    12 |
    13 |

    14 | { title } 15 |

    16 |
    17 |
    18 | {subtitle &&

    { subtitle }

    } 19 |
    20 |
    21 |
    22 |
    23 |
    ; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/js/cms-preview-templates/contact.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const ContactEntry = ({heading, text}) => 4 |
    5 |

    { heading }

    6 |

    { text }

    7 |
    ; 8 | 9 | const ContactEntries = ({data}) => 10 | (data && data.length > 0 11 | ?
    12 | {// eslint-disable-next-line react/jsx-key 13 | data.map(({heading, text}) => )} 14 |
    15 | : ""); 16 | 17 | export default class ContactPreview extends React.Component { 18 | render() { 19 | const {entry, getAsset, widgetFor} = this.props; 20 | const entryContactEntries = entry.getIn(["data", "contact_entries"]); 21 | const contactEntries = entryContactEntries ? entryContactEntries.toJS() : []; 22 | return
    23 | 24 |
    25 | { widgetFor("body") } 26 | 27 |
    28 |
    ; 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/js/cms-preview-templates/footer.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default class FooterPreview extends React.Component { 4 | render() { 5 | const {entry} = this.props; 6 | return
    7 | 8 |

    {entry.getIn(["data", "title"])}

    9 |

    {entry.getIn(["data", "blurb"])}

    10 | 11 |
    ; 12 | } 13 | } 14 | 15 | -------------------------------------------------------------------------------- /src/js/cms-preview-templates/home.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import Jumbotron from "./components/jumbotron"; 4 | 5 | export default class HomePreview extends React.Component { 6 | render() { 7 | const {entry, getAsset} = this.props; 8 | const image = getAsset(entry.getIn(["data", "image"])); 9 | 10 | return
    11 | 12 | 13 |
    14 |
    15 |

    {entry.getIn(["data", "blurb", "heading"])}

    16 |

    {entry.getIn(["data", "blurb", "text"])}

    17 |
    18 |
    19 | 20 |
    21 |
    22 |

    {entry.getIn(["data", "intro", "heading"])}

    23 |

    {entry.getIn(["data", "intro", "text"])}

    24 | 25 |
    26 | {(entry.getIn(["data", "products"]) || []).map((product, i) =>
    27 | 28 |

    {product.get("text")}

    29 |
    )} 30 |
    31 | 32 |
    33 | See all products 34 |
    35 |
    36 |
    37 | 38 |
    39 |
    40 | 41 |
    42 |
    43 |

    {entry.getIn(["data", "values", "heading"])}

    44 | 45 |

    {entry.getIn(["data", "values", "text"])}

    46 |
    47 | 48 |
    49 | 50 |
    51 |
    52 | 53 |
    54 | Read more 55 |
    56 | 57 |
    58 |
    59 | 60 | 61 |
    ; 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /src/js/cms-preview-templates/post.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import format from "date-fns/format"; 3 | 4 | export default class PostPreview extends React.Component { 5 | render() { 6 | const {entry, widgetFor, getAsset} = this.props; 7 | const image = getAsset(entry.getIn(["data", "image"])); 8 | 9 | return
    10 |

    { entry.getIn(["data", "title"])}

    11 |
    12 |

    { format(entry.getIn(["data", "date"]), "iii, MMM d, yyyy") }

    13 |

    Read in x minutes

    14 |
    15 |
    16 |

    { entry.getIn(["data", "description"]) }

    17 | { image && { } 18 | { widgetFor("body") } 19 |
    20 |
    ; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/js/cms-preview-templates/products.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import Jumbotron from "./components/jumbotron"; 4 | 5 | export default class ProductsPreview extends React.Component { 6 | render() { 7 | const {entry, getAsset} = this.props; 8 | const image = getAsset(entry.getIn(["data", "image"])); 9 | 10 | return
    11 | 12 | 13 |
    14 |
    15 |

    {entry.getIn(["data", "intro", "heading"])}

    16 |

    {entry.getIn(["data", "intro", "description"])}

    17 | 18 |
    19 | {(entry.getIn(["data", "intro", "blurbs"]) || []).map((blurb, index) =>
    20 | 21 |

    {blurb.get("text")}

    22 |
    )} 23 |
    24 |
    25 |
    26 | 27 |
    28 |
    29 |

    {entry.getIn(["data", "main", "heading"])}

    30 |

    {entry.getIn(["data", "main", "description"])}

    31 |
    32 |
    33 | 34 |
    35 | 36 |
    37 |
    38 | 39 |
    40 | 41 |
    42 | 43 |
    44 | 45 |
    46 | 47 |
    48 |
    49 |
    50 | 51 |
    52 | {(entry.getIn(["data", "testimonials"]) || []).map((testimonial, index) =>
    53 |
    54 |

    “{testimonial.get("quote")}”

    55 | {testimonial.get("author")} 56 |
    57 |
    )} 58 |
    59 | 60 | 61 | 62 |
    63 |
    64 | 65 |

    {entry.getIn(["data", "pricing", "heading"])}

    66 |

    {entry.getIn(["data", "pricing", "description"])}

    67 | 68 |
    69 | {(entry.getIn(["data", "pricing", "plans"]) || []).map((plan, index) =>
    70 |
    71 | 72 |

    {plan.get("plan")}

    73 | 74 |

    75 | ${plan.get("price")} 76 |

    77 | 78 | -

    {plan.get("description")}

    79 | 80 |
      81 | {(plan.get("items") || []).map((item, index) =>
    • 82 |

      {item}

      83 |
      • )} 84 |
    85 | 86 |
    87 | 88 |
    )} 89 |
    90 |
    91 |
    92 |
    ; 93 | } 94 | } 95 | -------------------------------------------------------------------------------- /src/js/cms-preview-templates/values.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import Jumbotron from "./components/jumbotron"; 4 | 5 | const MediaBlock = ({heading, text, imageUrl, reverse}) => { 6 | const imageContainerClassName = reverse 7 | ? "ph3-m w-50-m" 8 | : "ph3-m w-50-m order-last-m"; 9 | return
    10 |
    11 | 12 |
    13 |
    14 |

    {heading}

    15 |

    {text}

    16 |
    17 |
    ; 18 | }; 19 | 20 | export default class ValuesPreview extends React.Component { 21 | render() { 22 | const {entry, getAsset} = this.props; 23 | 24 | const image = getAsset(entry.getIn(["data", "image"])); 25 | const entryValues = entry.getIn(["data", "values"]); 26 | const values = entryValues ? entryValues.toJS() : []; 27 | 28 | return
    29 | 30 |
    31 |
    32 | {values.map(({text, heading, imageUrl}, i) => 33 | 34 | )} 35 |
    36 |
    37 |
    ; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/js/cms.js: -------------------------------------------------------------------------------- 1 | import CMS from "decap-cms-app"; 2 | 3 | // Import main site styles as a string to inject into the CMS preview pane 4 | // eslint-disable-next-line import/no-unresolved 5 | import styles from "!to-string-loader!css-loader!postcss-loader!sass-loader!../css/main.scss"; 6 | 7 | import HomePreview from "./cms-preview-templates/home"; 8 | import PostPreview from "./cms-preview-templates/post"; 9 | import ProductsPreview from "./cms-preview-templates/products"; 10 | import ValuesPreview from "./cms-preview-templates/values"; 11 | import ContactPreview from "./cms-preview-templates/contact"; 12 | import FooterPreview from "./cms-preview-templates/footer"; 13 | 14 | CMS.registerPreviewStyle(styles, {raw: true}); 15 | CMS.registerPreviewTemplate("home", HomePreview); 16 | CMS.registerPreviewTemplate("post", PostPreview); 17 | CMS.registerPreviewTemplate("products", ProductsPreview); 18 | CMS.registerPreviewTemplate("values", ValuesPreview); 19 | CMS.registerPreviewTemplate("contact", ContactPreview); 20 | CMS.registerPreviewTemplate("footer", FooterPreview); 21 | CMS.init(); 22 | -------------------------------------------------------------------------------- /webpack.common.js: -------------------------------------------------------------------------------- 1 | const webpack = require("webpack"); 2 | const path = require("path"); 3 | const CopyWebpackPlugin = require("copy-webpack-plugin"); 4 | const MiniCssExtractPlugin = require("mini-css-extract-plugin"); 5 | const AssetsPlugin = require("assets-webpack-plugin"); 6 | const HtmlWebpackPlugin = require("html-webpack-plugin"); 7 | 8 | module.exports = { 9 | entry: { 10 | main: path.join(__dirname, "src", "index.js"), 11 | cms: path.join(__dirname, "src", "js", "cms.js"), 12 | }, 13 | 14 | output: { 15 | path: path.join(__dirname, "dist"), 16 | publicPath: "" 17 | }, 18 | 19 | module: { 20 | rules: [ 21 | { 22 | test: /\.((png)|(eot)|(woff)|(woff2)|(ttf)|(svg)|(gif))(\?v=\d+\.\d+\.\d+)?$/, 23 | loader: "file-loader", 24 | options: { 25 | name: "name=/[hash].[ext]" 26 | } 27 | }, 28 | { 29 | loader: "babel-loader", 30 | test: /\.js?$/, 31 | exclude: /node_modules/, 32 | options: {cacheDirectory: true} 33 | }, 34 | { 35 | test: /\.(sa|sc|c)ss$/, 36 | exclude: /node_modules/, 37 | use: [ 38 | "style-loader", 39 | { 40 | loader: MiniCssExtractPlugin.loader, 41 | options: { 42 | esModule: false 43 | } 44 | }, 45 | "css-loader", 46 | "postcss-loader", 47 | { 48 | loader: "sass-loader", 49 | options: { 50 | sassOptions: { 51 | outputStyle: "expanded", 52 | }, 53 | }, 54 | } 55 | ] 56 | } 57 | ] 58 | }, 59 | 60 | plugins: [ 61 | new AssetsPlugin({ 62 | filename: "webpack.json", 63 | path: path.join(process.cwd(), "site/data"), 64 | prettyPrint: true 65 | }), 66 | new CopyWebpackPlugin({ 67 | patterns: [{ 68 | from: "./src/fonts/", 69 | to: "fonts/", 70 | }] 71 | }), 72 | new HtmlWebpackPlugin({ 73 | filename: "admin/index.html", 74 | template: 'src/cms.html', 75 | inject: true, 76 | }) 77 | ] 78 | }; 79 | -------------------------------------------------------------------------------- /webpack.dev.js: -------------------------------------------------------------------------------- 1 | const {merge} = require("webpack-merge"); 2 | const path = require("path"); 3 | const { CleanWebpackPlugin } = require('clean-webpack-plugin'); 4 | const MiniCssExtractPlugin = require("mini-css-extract-plugin"); 5 | 6 | const common = require("./webpack.common"); 7 | 8 | module.exports = merge(common, { 9 | mode: "development", 10 | 11 | output: { 12 | filename: "[name].js", 13 | chunkFilename: "[id].css" 14 | }, 15 | 16 | devServer: { 17 | port: process.env.PORT || 3000, 18 | static: { 19 | directory: path.join(process.cwd(), "./dist"), 20 | watch: true 21 | }, 22 | open: true, 23 | historyApiFallback: { 24 | rewrites: [{from: /./, to: "404.html"}] 25 | } 26 | }, 27 | 28 | plugins: [ 29 | new CleanWebpackPlugin({ 30 | cleanOnceBeforeBuildPatterns: [ 31 | "dist/**/*.js", 32 | "dist/**/*.css", 33 | "site/data/webpack.json" 34 | ]}), 35 | 36 | new MiniCssExtractPlugin({ 37 | filename: "[name].css", 38 | chunkFilename: "[id].css" 39 | }) 40 | ] 41 | }); 42 | -------------------------------------------------------------------------------- /webpack.prod.js: -------------------------------------------------------------------------------- 1 | const {merge} = require("webpack-merge"); 2 | const path = require("path"); 3 | 4 | const TerserPlugin = require("terser-webpack-plugin"); 5 | const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); 6 | const MiniCssExtractPlugin = require("mini-css-extract-plugin"); 7 | 8 | const common = require("./webpack.common.js"); 9 | 10 | module.exports = merge(common, { 11 | mode: "production", 12 | 13 | output: { 14 | filename: "[name].[hash:5].js", 15 | chunkFilename: "[id].[hash:5].css", 16 | path: path.resolve(__dirname, "dist") 17 | }, 18 | 19 | optimization: { 20 | minimize: true, 21 | minimizer: [ 22 | new TerserPlugin({ 23 | terserOptions: { 24 | sourceMap: true, 25 | }, 26 | exclude: /\/node_modules\//, 27 | }), 28 | new MiniCssExtractPlugin({ 29 | filename: "[name].[hash:5].css", 30 | chunkFilename: "[id].[hash:5].css" 31 | }), 32 | new CssMinimizerPlugin(), 33 | ] 34 | } 35 | }); 36 | --------------------------------------------------------------------------------