├── .babelrc ├── .eslintrc ├── .gitignore ├── LICENSE ├── README.md ├── bin ├── hugo.darwin ├── hugo.exe └── hugo.linux ├── gulpfile.babel.js ├── netlify.toml ├── package.json ├── site ├── config.toml ├── content │ ├── .keep │ ├── contact.md │ ├── post │ │ ├── brewing-chemex.md │ │ ├── jamaica-blue.md │ │ └── making-sense.md │ ├── products.md │ └── values.md ├── data │ └── .keep ├── layouts │ ├── _default │ │ ├── li.html │ │ ├── list.html │ │ └── single.html │ ├── contact │ │ └── 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 │ │ ├── short-text.html │ │ ├── social-icon.html │ │ ├── svg.html │ │ ├── table-column.html │ │ ├── table.html │ │ └── text-and-image.html │ ├── post │ │ └── single.html │ ├── products │ │ └── single.html │ └── values │ │ └── single.html └── static │ ├── .keep │ ├── android-chrome-192x192.png │ ├── android-chrome-512x512.png │ ├── apple-touch-icon.png │ ├── browserconfig.xml │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ ├── img │ ├── about │ │ ├── direct-sourcing.jpg │ │ ├── jumbotron.jpg │ │ ├── reinvest-profits.jpg │ │ ├── shade-grown.jpg │ │ ├── single-origin.jpg │ │ └── sustainable-farming.jpg │ ├── blog-index.jpg │ ├── blog │ │ ├── chemex.jpg │ │ └── flavor_wheel.jpg │ ├── home │ │ ├── about-section.jpg │ │ └── jumbotron.jpg │ ├── icon.svg │ ├── icons │ │ ├── facebook.svg │ │ ├── instagram.svg │ │ ├── twitter.svg │ │ └── vimeo.svg │ ├── illustrations │ │ ├── coffee-gear.svg │ │ ├── coffee.svg │ │ ├── meeting-space.svg │ │ └── tutorials.svg │ ├── logo.svg │ └── products │ │ ├── jumbotron.jpg │ │ ├── products-full-width.jpg │ │ ├── products-grid1.jpg │ │ ├── products-grid2.jpg │ │ └── products-grid3.jpg │ ├── manifest.json │ ├── mstile-144x144.png │ ├── mstile-150x150.png │ ├── mstile-310x150.png │ ├── mstile-310x310.png │ ├── mstile-70x70.png │ ├── og-image.jpg │ └── safari-pinned-tab.svg ├── src ├── cms │ ├── config.yml │ └── index.html ├── css │ ├── imports │ │ ├── _background-position.css │ │ ├── _background-size.css │ │ ├── _border-colors.css │ │ ├── _border-radius.css │ │ ├── _border-style.css │ │ ├── _border-widths.css │ │ ├── _borders.css │ │ ├── _box-sizing.css │ │ ├── _buttons.css │ │ ├── _clears.css │ │ ├── _cms.css │ │ ├── _code.css │ │ ├── _colors.css │ │ ├── _coordinates.css │ │ ├── _custom.css │ │ ├── _debug-children.css │ │ ├── _debug-grid.css │ │ ├── _debug.css │ │ ├── _display.css │ │ ├── _flexbox.css │ │ ├── _floats.css │ │ ├── _font-style.css │ │ ├── _font-weight.css │ │ ├── _forms.css │ │ ├── _heights.css │ │ ├── _images.css │ │ ├── _line-height.css │ │ ├── _links.css │ │ ├── _lists.css │ │ ├── _max-widths.css │ │ ├── _media-queries.css │ │ ├── _opacity.css │ │ ├── _outlines.css │ │ ├── _overflow.css │ │ ├── _position.css │ │ ├── _reset.css │ │ ├── _spacing.css │ │ ├── _states.css │ │ ├── _styles.css │ │ ├── _svg.css │ │ ├── _tables.css │ │ ├── _text-align.css │ │ ├── _text-decoration.css │ │ ├── _text-transform.css │ │ ├── _type-scale.css │ │ ├── _typography.css │ │ ├── _utilities.css │ │ ├── _variables.css │ │ ├── _vertical-align.css │ │ ├── _visibility.css │ │ ├── _white-space.css │ │ ├── _widths.css │ │ ├── _word-break.css │ │ └── _z-index.css │ └── main.css └── js │ ├── app.js │ ├── cms-preview-templates │ ├── post.js │ └── products.js │ └── cms.js ├── webpack.conf.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "react"], 3 | "plugins": [ 4 | "syntax-object-rest-spread", 5 | "transform-object-rest-spread" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | env: 2 | browser: true 3 | 4 | parser: babel-eslint 5 | 6 | plugins: [ "import" ] 7 | 8 | # enable ECMAScript features 9 | ecmaFeatures: 10 | arrowFunctions: true 11 | binaryLiterals: true 12 | blockBindings: true 13 | classes: true 14 | defaultParams: true 15 | destructuring: true 16 | forOf: true 17 | generators: true 18 | jsx: true 19 | modules: true 20 | objectLiteralShorthandMethods: true 21 | objectLiteralShorthandProperties: true 22 | octalLiterals: true 23 | spread: true 24 | templateStrings: true 25 | 26 | rules: 27 | # Possible Errors 28 | # https://github.com/eslint/eslint/tree/master/docs/rules#possible-errors 29 | no-control-regex: 2 30 | no-console: 1 31 | no-debugger: 2 32 | no-dupe-args: 2 33 | no-dupe-keys: 2 34 | no-duplicate-case: 2 35 | no-empty-character-class: 2 36 | no-ex-assign: 2 37 | no-extra-boolean-cast : 2 38 | no-extra-semi: 2 39 | no-invalid-regexp: 2 40 | no-irregular-whitespace: 1 41 | no-proto: 2 42 | no-unexpected-multiline: 2 43 | no-unreachable: 2 44 | valid-typeof: 2 45 | 46 | # Best Practices 47 | # https://github.com/eslint/eslint/tree/master/docs/rules#best-practices 48 | no-fallthrough: 2 49 | no-redeclare: 2 50 | 51 | # Stylistic Issues 52 | # https://github.com/eslint/eslint/tree/master/docs/rules#stylistic-issues 53 | comma-spacing: 2 54 | eol-last: 2 55 | eqeqeq: ["error", "smart"] 56 | indent: [2, 2, {SwitchCase: 1}] 57 | keyword-spacing: 2 58 | max-len: [1, 160, 2] 59 | new-parens: 2 60 | no-mixed-spaces-and-tabs: 2 61 | no-multiple-empty-lines: [2, {max: 2}] 62 | no-trailing-spaces: 2 63 | object-curly-spacing: [2, "never"] 64 | quotes: [2, "double", "avoid-escape"] 65 | semi: 2 66 | space-before-blocks: [2, "always"] 67 | space-before-function-paren: [2, "never"] 68 | space-in-parens: [2, "never"] 69 | space-infix-ops: 2 70 | space-unary-ops: 2 71 | 72 | # ECMAScript 6 73 | # http://eslint.org/docs/rules/#ecmascript-6 74 | arrow-parens: [2, "always"] 75 | arrow-spacing: [2, {"before": true, "after": true}] 76 | no-confusing-arrow: 2 77 | prefer-const: 2 78 | 79 | # JSX 80 | jsx-quotes: [2, "prefer-double"] 81 | 82 | # Import 83 | import/no-unresolved: [1, {"commonjs": true, "amd": true}] 84 | import/export: 2 85 | 86 | # Strict Mode 87 | # https://github.com/eslint/eslint/tree/master/docs/rules#strict-mode 88 | strict: [2, "global"] 89 | 90 | # Variables 91 | # https://github.com/eslint/eslint/tree/master/docs/rules#variables 92 | no-undef: 2 93 | no-unused-vars: [2, {"args": "none"}] 94 | 95 | # Global scoped method and vars 96 | globals: 97 | __dirname: true 98 | require: true 99 | process: true 100 | ENV: true 101 | module: true 102 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ 3 | /npm-debug.log 4 | -------------------------------------------------------------------------------- /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 | ### * * * 2 | ### This template is no longer maintained. [Check out one-click-hugo-cms instead.](https://github.com/netlify-templates/one-click-hugo-cms) 3 | ### * * * 4 | 5 | --- 6 | 7 | # Netlify CMS small-business template 8 | 9 | This is a small business template built with [Victor Hugo](https://github.com/netlify/victor-hugo) and [Netlify CMS](https://github.com/netlify/netlify-cms), designed and developed by [Darin Dimitroff](http://www.darindimitroff.com/), [spacefarm.digital](https://www.spacefarm.digital). 10 | 11 | ## Getting started 12 | 13 | Use our deploy button to get your own copy of the repository: 14 | 15 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/netlify-templates/kaldi-hugo-cms-template) 16 | 17 | Once that is done, you need to setup the GitHub integration for Netlify CMS. 18 | 19 | Go to https://github.com/settings/developers and register a new application. 20 | 21 | Then go to the "Access" tab in your new Netlify site and add a GitHub authentication provider. 22 | 23 | Once that's done, you'll be able to enter the CMS by going to the URL of your new site and appending `/admin` 24 | 25 | ## Local Development 26 | 27 | Clone this repository, and run `yarn` or `npm install` from the new folder to install all required dependencies. 28 | 29 | Then start the development server with `yarn start` or `npm start`. 30 | 31 | ## Layouts 32 | 33 | 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. 34 | 35 | Use Hugo’s `dict` functionality to feed content into partials and avoid repeating yourself and creating discrepancies. 36 | 37 | ## CSS 38 | 39 | 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. 40 | 41 | ## SVG 42 | 43 | All SVG icons stored in `site/static/img/icons` are automatically optimized with SVGO (gulp-svgmin) and concatenated into a single SVG sprite stored as a a partial called `svg.html`. Make sure you use consistent icons in terms of viewport and art direction for optimal results. Refer to an SVG via the `` tag like so: 44 | 45 | ``` 46 | 47 | 48 | 49 | ``` 50 | -------------------------------------------------------------------------------- /bin/hugo.darwin: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netlify-templates/kaldi-hugo-cms-template/471950a72fcaee2fdf8d565343d54274f9f24a97/bin/hugo.darwin -------------------------------------------------------------------------------- /bin/hugo.exe: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netlify-templates/kaldi-hugo-cms-template/471950a72fcaee2fdf8d565343d54274f9f24a97/bin/hugo.exe -------------------------------------------------------------------------------- /bin/hugo.linux: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netlify-templates/kaldi-hugo-cms-template/471950a72fcaee2fdf8d565343d54274f9f24a97/bin/hugo.linux -------------------------------------------------------------------------------- /gulpfile.babel.js: -------------------------------------------------------------------------------- 1 | import gulp from "gulp"; 2 | import cp from "child_process"; 3 | import gutil from "gulp-util"; 4 | import postcss from "gulp-postcss"; 5 | import cssImport from "postcss-import"; 6 | import cssnext from "postcss-cssnext"; 7 | import BrowserSync from "browser-sync"; 8 | import webpack from "webpack"; 9 | import webpackConfig from "./webpack.conf"; 10 | import svgstore from "gulp-svgstore"; 11 | import svgmin from "gulp-svgmin"; 12 | import inject from "gulp-inject"; 13 | import replace from "gulp-replace"; 14 | import cssnano from "cssnano"; 15 | 16 | const browserSync = BrowserSync.create(); 17 | const hugoBin = `./bin/hugo.${process.platform === "win32" ? "exe" : process.platform}`; 18 | const defaultArgs = ["-d", "../dist", "-s", "site"]; 19 | 20 | gulp.task("hugo", (cb) => buildSite(cb)); 21 | gulp.task("hugo-preview", (cb) => buildSite(cb, ["--buildDrafts", "--buildFuture"])); 22 | 23 | gulp.task("cms", () => { 24 | const match = process.env.REPOSITORY_URL ? process.env.REPOSITORY_URL : cp.execSync("git remote -v", {encoding: "utf-8"}); 25 | let repo = null; 26 | match.replace(/github.com[:/](\S+)(\.git)?/, (_, m) => { 27 | repo = m.replace(/\.git$/, ""); 28 | }); 29 | gulp.src("./src/cms/*") 30 | .pipe(replace("<% GITHUB_REPOSITORY %>", repo)) 31 | .pipe(gulp.dest("./dist/admin")) 32 | .pipe(browserSync.stream()); 33 | gulp.src(["./node_modules/netlify-cms/dist/*.*", "!./node_modules/netlify-cms/dist/*.html"]) 34 | .pipe(gulp.dest("./dist")) 35 | .pipe(browserSync.stream()) 36 | }); 37 | 38 | gulp.task("build", ["css", "js", "hugo", "cms"]); 39 | gulp.task("build-preview", ["css", "js", "hugo-preview"]); 40 | 41 | gulp.task("css", () => ( 42 | gulp.src("./src/css/*.css") 43 | .pipe(postcss([ 44 | cssImport({from: "./src/css/main.css"}), 45 | cssnext(), 46 | cssnano(), 47 | ])) 48 | .pipe(gulp.dest("./dist/css")) 49 | .pipe(browserSync.stream()) 50 | )); 51 | 52 | gulp.task("js", (cb) => { 53 | const myConfig = Object.assign({}, webpackConfig); 54 | 55 | webpack(myConfig, (err, stats) => { 56 | if (err) throw new gutil.PluginError("webpack", err); 57 | gutil.log("[webpack]", stats.toString({ 58 | colors: true, 59 | progress: true 60 | })); 61 | browserSync.reload(); 62 | cb(); 63 | }); 64 | }); 65 | 66 | gulp.task("svg", () => { 67 | const svgs = gulp 68 | .src("site/static/img/icons/*.svg") 69 | .pipe(svgmin()) 70 | .pipe(svgstore({inlineSvg: true})); 71 | 72 | function fileContents(filePath, file) { 73 | return file.contents.toString(); 74 | } 75 | 76 | return gulp 77 | .src("site/layouts/partials/svg.html") 78 | .pipe(inject(svgs, {transform: fileContents})) 79 | .pipe(gulp.dest("site/layouts/partials/")); 80 | }); 81 | 82 | gulp.task("server", ["hugo", "css", "js", "svg", "cms"], () => { 83 | browserSync.init({ 84 | server: { 85 | baseDir: "./dist" 86 | } 87 | }); 88 | gulp.watch("./src/js/**/*.js", ["js"]); 89 | gulp.watch("./src/css/**/*.css", ["css"]); 90 | gulp.watch("./src/cms/*", ["cms"]); 91 | gulp.watch("./site/static/img/icons/*.svg", ["svg"]); 92 | gulp.watch("./site/**/*", ["hugo"]); 93 | }); 94 | 95 | function buildSite(cb, options) { 96 | const args = options ? defaultArgs.concat(options) : defaultArgs; 97 | 98 | return cp.spawn(hugoBin, args, {stdio: "inherit"}).on("close", (code) => { 99 | if (code === 0) { 100 | browserSync.reload("notify:false"); 101 | cb(); 102 | } else { 103 | browserSync.notify("Hugo build failed :("); 104 | cb("Hugo build failed"); 105 | } 106 | }); 107 | } 108 | -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | command = "npm run build" 3 | publish = "dist" 4 | 5 | [context.deploy-preview] 6 | command = "npm run build-preview" 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "victor-hugo", 3 | "version": "1.0.0", 4 | "description": "Victor Hugo is a Hugo boilerplate for creating truly epic websites!", 5 | "main": "index.js", 6 | "scripts": { 7 | "hugo": "gulp hugo", 8 | "webpack": "gulp webpack", 9 | "build": "gulp build", 10 | "build-preview": "gulp build-preview", 11 | "start": "gulp server", 12 | "lint": "eslint src" 13 | }, 14 | "author": "", 15 | "license": "MIT", 16 | "dependencies": { 17 | "babel-core": "^6.26.0", 18 | "babel-eslint": "^6.1.2", 19 | "babel-loader": "^6.2.4", 20 | "babel-plugin-syntax-object-rest-spread": "^6.13.0", 21 | "babel-plugin-transform-class-properties": "^6.10.2", 22 | "babel-plugin-transform-object-assign": "^6.8.0", 23 | "babel-plugin-transform-object-rest-spread": "^6.8.0", 24 | "babel-preset-es2015": "^6.9.0", 25 | "babel-preset-react": "^6.24.1", 26 | "babel-register": "^6.11.6", 27 | "browser-sync": "^2.13.0", 28 | "css-loader": "^0.23.1", 29 | "cssnano": "^3.9.1", 30 | "date-fns": "^1.27.2", 31 | "eslint": "^3.1.1", 32 | "eslint-plugin-import": "^1.11.1", 33 | "exports-loader": "^0.6.3", 34 | "file-loader": "^0.9.0", 35 | "gulp": "^3.9.1", 36 | "gulp-babel": "^6.1.2", 37 | "gulp-inject": "^4.2.0", 38 | "gulp-postcss": "^6.1.1", 39 | "gulp-replace": "^0.5.4", 40 | "gulp-svgmin": "^1.2.3", 41 | "gulp-svgstore": "^6.1.0", 42 | "gulp-util": "^3.0.7", 43 | "imports-loader": "^0.6.5", 44 | "netlify-cms": "^1.0.0", 45 | "postcss-cssnext": "^2.7.0", 46 | "postcss-import": "^11.0.0", 47 | "postcss-loader": "^0.9.1", 48 | "postcss-uncss": "^0.14.0", 49 | "svg-sprite-loader": "^0.1.2", 50 | "uncss": "^0.14.1", 51 | "url-loader": "^0.5.7", 52 | "webpack": "^3.0.0", 53 | "whatwg-fetch": "^1.0.0" 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /site/config.toml: -------------------------------------------------------------------------------- 1 | baseurl = "/" 2 | languageCode = "en-us" 3 | title = "Homepage" 4 | -------------------------------------------------------------------------------- /site/content/.keep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netlify-templates/kaldi-hugo-cms-template/471950a72fcaee2fdf8d565343d54274f9f24a97/site/content/.keep -------------------------------------------------------------------------------- /site/content/contact.md: -------------------------------------------------------------------------------- 1 | +++ 2 | title = "Contact" 3 | type = "contact" 4 | page="/contact.html" 5 | +++ 6 | -------------------------------------------------------------------------------- /site/content/post/brewing-chemex.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: A beginners’ guide to brewing with Chemex 3 | date: 2017-01-04T15:04:10.000Z 4 | description: >- 5 | Brewing with a Chemex probably seems like a complicated, time-consuming 6 | ordeal, but once you get used to the process, it becomes a soothing ritual 7 | that's worth the effort every time. 8 | image: /img/blog/chemex.jpg 9 | --- 10 | 11 | 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\*. 12 | 13 | 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. 14 | 15 | ## The little secrets of Chemex brewing 16 | 17 | 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: 18 | 19 | 1. Always buy dedicated Chemex filters. 20 | 2. Use a scale, don’t try to eyeball it. 21 | 3. Never skip preheating the glass. 22 | 4. Timing is key, don’t forget the clock. 23 | 24 | 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. 25 | 26 | 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. -------------------------------------------------------------------------------- /site/content/post/jamaica-blue.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Just in: small batch of Jamaica Blue Mountain in store next week" 3 | date: 2017-01-04T15:04:10.000Z 4 | description: We’re proud to announce that we’ll be offering a small batch of Jamaica Blue Mountain coffee beans in our store next week. 5 | --- 6 | 7 | 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. 8 | 9 | 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. 10 | 11 | ## A little history 12 | 13 | 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. 14 | 15 | >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. 16 | 17 | 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. 18 | 19 | ## What you need to know before trying 20 | 21 | 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. 22 | 23 | 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. 24 | 25 | 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. 26 | -------------------------------------------------------------------------------- /site/content/post/making-sense.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 coffee tasters, has been revised for the first time this year. 5 | image: /img/blog/flavor_wheel.jpg 6 | --- 7 | 8 | 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. 9 | 10 | 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. 11 | 12 | ## What the updates mean to you 13 | 14 | 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: 15 | 16 | - producers 17 | - roasters 18 | - importers/exporters 19 | - retailers 20 | - manufacturers 21 | - baristas 22 | 23 | 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. 24 | 25 | 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. 26 | 27 | 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. 28 | -------------------------------------------------------------------------------- /site/content/products.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Our Coffee 3 | type: products 4 | page: /products.html 5 | image: /img/products/jumbotron.jpg 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 | intro: 13 | blurbs: 14 | - image: /img/illustrations/coffee.svg 15 | text: > 16 | We sell green and roasted coffee beans that are sourced directly from 17 | independent farmers and farm cooperatives. We’re proud to offer a 18 | variety of coffee beans grown with great care for the environment and 19 | local communities. Check our post or contact us directly for current 20 | availability. 21 | - image: /img/illustrations/coffee-gear.svg 22 | text: > 23 | We offer a small, but carefully curated selection of brewing gear and 24 | tools for every taste and experience level. No matter if you roast your 25 | own beans or just bought your first french press, you’ll find a gadget 26 | to fall in love with in our shop. 27 | - image: /img/illustrations/tutorials.svg 28 | text: > 29 | Love a great cup of coffee, but never knew how to make one? Bought a 30 | fancy new Chemex but have no clue how to use it? Don't worry, we’re here 31 | to help. You can schedule a custom 1-on-1 consultation with our baristas 32 | to learn anything you want to know about coffee roasting and brewing. 33 | Email us or call the store for details. 34 | - image: /img/illustrations/meeting-space.svg 35 | text: > 36 | We believe that good coffee has the power to bring people together. 37 | That’s why we decided to turn a corner of our shop into a cozy meeting 38 | space where you can hang out with fellow coffee lovers and learn about 39 | coffee making techniques. All of the artwork on display there is for 40 | sale. The full price you pay goes to the artist. 41 | heading: What we offer 42 | description: > 43 | Kaldi is the ultimate spot for coffee lovers who want to learn about their 44 | java’s origin and support the farmers that grew it. We take coffee 45 | production, roasting and brewing seriously and we’re glad to pass that 46 | knowledge to anyone. 47 | main: 48 | heading: Great coffee with no compromises 49 | description: > 50 | We hold our coffee to the highest standards from the shrub to the cup. 51 | That’s why we’re meticulous and transparent about each step of the coffee’s 52 | journey. We personally visit each farm to make sure the conditions are 53 | optimal for the plants, farmers and the local environment. 54 | image1: 55 | alt: A close-up of a paper filter filled with ground coffee 56 | image: /img/products/products-grid3.jpg 57 | image2: 58 | alt: A green cup of a coffee on a wooden table 59 | image: /img/products/products-grid2.jpg 60 | image3: 61 | alt: Coffee beans 62 | image: /img/products/products-grid1.jpg 63 | testimonials: 64 | - author: Elisabeth Kaurismäki 65 | quote: >- 66 | The first time I tried Kaldi’s coffee, I couldn’t even believe that was 67 | the same thing I’ve been drinking every morning. 68 | - author: Philipp Trommler 69 | quote: >- 70 | Kaldi is the place to go if you want the best quality coffee. I love their 71 | stance on empowering farmers and transparency. 72 | full_image: /img/products/products-full-width.jpg 73 | pricing: 74 | heading: Monthly subscriptions 75 | description: >- 76 | We make it easy to make great coffee a part of your life. Choose one of our 77 | monthly subscription plans to receive great coffee at your doorstep each 78 | month. Contact us about more details and payment info. 79 | plans: 80 | - description: Perfect for the drinker who likes to enjoy 1-2 cups per day. 81 | items: 82 | - 3 lbs of coffee per month 83 | - Green or roasted beans" 84 | - One or two varieties of beans" 85 | plan: Small 86 | price: '50' 87 | - description: 'Great for avid drinkers, java-nsoving couples and bigger crowds' 88 | items: 89 | - 6 lbs of coffee per month 90 | - Green or roasted beans 91 | - Up to 4 different varieties of beans 92 | plan: Big 93 | price: '80' 94 | - description: Want a few tiny batches from different varieties? Try our custom plan 95 | items: 96 | - Whatever you need 97 | - Green or roasted beans 98 | - Unlimited varieties 99 | plan: Custom 100 | price: '?' 101 | --- 102 | 103 | -------------------------------------------------------------------------------- /site/content/values.md: -------------------------------------------------------------------------------- 1 | +++ 2 | title = "Values" 3 | type = "values" 4 | page="/values.html" 5 | +++ 6 | -------------------------------------------------------------------------------- /site/data/.keep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netlify-templates/kaldi-hugo-cms-template/471950a72fcaee2fdf8d565343d54274f9f24a97/site/data/.keep -------------------------------------------------------------------------------- /site/layouts/_default/li.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |

{{ .Title }}

5 |

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

6 |

{{ .Description }}

7 |

Read more →

8 | 9 | 10 | -------------------------------------------------------------------------------- /site/layouts/_default/list.html: -------------------------------------------------------------------------------- 1 | {{ partial "head" . }} 2 | {{ partial "nav" . }} 3 | 4 | {{ partial "jumbotron" (dict "imageUrl" "/img/blog-index.jpg" "title" "Latest stories") }} 5 | 6 |
7 |
    8 | {{ range .Data.Pages }} 9 |
    10 | {{ .Render "li"}} 11 |
    12 | {{ end }} 13 |
14 |
15 | 16 | {{ partial "footer" . }} 17 | -------------------------------------------------------------------------------- /site/layouts/_default/single.html: -------------------------------------------------------------------------------- 1 | {{ partial "head" . }} 2 | {{ partial "nav" . }} 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 | {{ partial "footer" . }} 6 | -------------------------------------------------------------------------------- /site/layouts/contact/single.html: -------------------------------------------------------------------------------- 1 | {{ partial "head" . }} 2 | 3 | {{ partial "nav" . }} 4 | 5 |
6 |
7 | 8 | 9 | 10 |

We’d love to get in touch with you and hear your ideas and questions. We strive to grow and improve constantly and your feedback is valuable for us.

11 | 12 |

How can I get…?

13 |

You can also use the form below for any inquiries about coffee availability, monthly subscriptions and scheduling a 1-on-1 session with our baristas. Don’t be shy, drop us a line!

14 | 15 |
16 | 17 |
18 |

Location

19 |

3153 Lynn Avenue, South San Francisco, California 94080

20 |
21 | 22 |
23 |

Working hours

24 |

Monday – Saturday: 9AM – 7PM We’re closed on Sundays

25 |
26 | 27 |
28 | 29 | {{ partial "contact-form" . }} 30 | 31 |
32 |
33 | 34 | {{ partial "footer" . }} 35 | -------------------------------------------------------------------------------- /site/layouts/index.html: -------------------------------------------------------------------------------- 1 | {{ partial "head" . }} 2 | 3 | {{ partial "nav" . }} 4 | 5 | {{ partial "jumbotron" (dict "imageUrl" "/img/home/jumbotron.jpg" "title" "Great coffee with a conscience" "subtitle" "Support sustainable farming while enjoying a cup") }} 6 | 7 | {{ partial "short-text" (dict "heading" "Why Kaldi?" "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 | 9 | {{ partial "2-up" (dict "heading" "What we offer" "description" "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." "svg1" "img/illustrations/coffee.svg" "text1" "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." "svg2" "/img/illustrations/coffee-gear.svg" "text2" "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." "buttonText" "See all products" "buttonLink" "/products" ) }} 10 | 11 | {{ partial "text-and-image" (dict "heading" "Our values" "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." "buttonText" "Read more" "buttonLink" "/values") }} 12 | 13 | {{ partial "blog" . }} 14 | 15 | {{ partial "footer" . }} 16 | -------------------------------------------------------------------------------- /site/layouts/partials/2-up.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

{{.heading}}

4 |

{{.description}}

5 | 6 |
7 |
8 | 9 |

{{.text1}}

10 |
11 | 12 |
13 | 14 |

{{.text2}}

15 |
16 |
17 | 18 | {{ if .buttonText }} 19 |
20 | {{.buttonText}} 21 |
22 | {{ end }} 23 |
24 |
25 | -------------------------------------------------------------------------------- /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 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 |
2 | 3 |
4 | 5 |
6 | 7 | Kaldi logo 8 |

Newsletter subscribe

9 |

Get awesome news from us in your inbox every two weeks. Be the first to learn about new products.

10 | 11 | {{ partial "newsletter-form" . }} 12 | 13 |
14 | 15 |
16 | 17 |
18 |

Kaldi

19 | 26 |
27 | 28 |
29 |

Find out more

30 | 34 |
35 | 36 |
37 |

Social media

38 |
    39 | {{ partial "social-icon" (dict "link" "#" "svg" "facebook") }} 40 | {{ partial "social-icon" (dict "link" "#" "svg" "twitter") }} 41 | {{ partial "social-icon" (dict "link" "#" "svg" "instagram") }} 42 | {{ partial "social-icon" (dict "link" "#" "svg" "vimeo") }} 43 |
44 |
45 | 46 |
47 |
48 | 49 |
50 | 51 | {{ partial "svg" . }} 52 | 53 | 54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /site/layouts/partials/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{ .Title }} | Kaldi 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 | -------------------------------------------------------------------------------- /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 | 20 | -------------------------------------------------------------------------------- /site/layouts/partials/newsletter-form.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | 5 | 6 |
7 | 8 | 9 | 10 |
11 | -------------------------------------------------------------------------------- /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 | 6 | 7 |
    • 8 | -------------------------------------------------------------------------------- /site/layouts/partials/svg.html: -------------------------------------------------------------------------------- 1 |
    2 | 3 | 4 | 5 |
    6 | -------------------------------------------------------------------------------- /site/layouts/partials/table-column.html: -------------------------------------------------------------------------------- 1 |
    2 | 3 | 4 |

    {{.plan}}

    5 | 6 | 7 |

    8 | ${{.price}} 9 |

    10 | 11 | 12 |

    {{.description}}

    13 | 14 | 15 |
      16 | {{ $itemCount := len .items }} 17 | {{ range $index, $item := .items }} 18 |
    • 19 |

      {{ $item }}

      20 |
      • 21 | {{ end }} 22 |
    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 | {{ partial "head" . }} 2 | {{ partial "nav" . }} 3 |
    4 |

    {{.Title}}

    5 |
    6 |

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

    7 |

    Read in {{ .ReadingTime }} minutes

    8 |
    9 |
    10 |

    {{ .Description }}

    11 | {{ if .Params.image }}{{ .Title }}{{ end }} 12 | {{ .Content }} 13 |
    14 |
    15 | {{ partial "footer" . }} 16 | -------------------------------------------------------------------------------- /site/layouts/products/single.html: -------------------------------------------------------------------------------- 1 | {{ partial "head" . }} 2 | {{ partial "nav" . }} 3 | 4 | {{ partial "jumbotron" (dict "imageUrl" .Params.image "title" .Title) }} 5 | 6 | {{ partial "4-up" .Params.intro }} 7 | 8 | 9 | {{ with .Params.main }} 10 |
    11 |
    12 |

    {{ .heading }}

    13 |

    {{ .description }}

    14 |
    15 |
    16 | 17 | 18 | {{ partial "image-grid" . }} 19 | {{ end }} 20 | 21 |
    22 | {{ range .Params.testimonials }} 23 | {{ partial "blockquote" . }} 24 | {{ end }} 25 |
    26 | 27 | 28 | 29 | 30 | {{ partial "table" .Params.pricing }} 31 | 32 | {{ partial "footer" . }} 33 | -------------------------------------------------------------------------------- /site/layouts/values/single.html: -------------------------------------------------------------------------------- 1 | {{ partial "head" . }} 2 | {{ partial "nav" . }} 3 | {{ partial "jumbotron" (dict "imageUrl" "/img/about/jumbotron.jpg" "title" "Values") }} 4 | 5 |
    6 | 7 | {{ partial "media-block" (dict "heading" "Shade-grown coffee" "text" "Coffee is a small tree or shrub that grows in the forest understory in its wild form, and traditionally was grown commercially under other trees that provided shade. The forest-like structure of shade coffee farms provides habitat for a great number of migratory and resident species." "imageUrl" "/img/about/shade-grown.jpg") }} 8 | 9 | {{ partial "media-block-reverse" (dict "heading" "Single origin" "text" "Single-origin coffee is coffee grown within a single known geographic origin. Sometimes, this is a single farm or a specific collection of beans from a single country. The name of the coffee is then usually the place it was grown to whatever degree available." "imageUrl" "/img/about/single-origin.jpg") }} 10 | 11 | {{ partial "media-block" (dict "heading" "Sustainable farming" "text" "Sustainable agriculture is farming in sustainable ways based on an understanding of ecosystem services, the study of relationships between organisms and their environment. What grows where and how it is grown are a matter of choice and careful consideration for nature and communities." "imageUrl" "/img/about/sustainable-farming.jpg") }} 12 | 13 | {{ partial "media-block-reverse" (dict "heading" "Direct sourcing" "text" "Direct trade is a form of sourcing practiced by some coffee roasters. Advocates of direct trade practices promote direct communication and price negotiation between buyer and farmer, along with systems that encourage and incentivize quality." "imageUrl" "/img/about/direct-sourcing.jpg") }} 14 | 15 | {{ partial "media-block" (dict "heading" "Reinvest profits" "text" "We want to truly empower the communities that bring amazing coffee to you. That’s why we reinvest 20% of our profits into farms, local businesses and schools everywhere our coffee is grown. You can see the communities grow and learn more about coffee farming on our blog." "imageUrl" "/img/about/reinvest-profits.jpg") }} 16 |
    17 | 18 | {{ partial "footer" . }} 19 | -------------------------------------------------------------------------------- /site/static/.keep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netlify-templates/kaldi-hugo-cms-template/471950a72fcaee2fdf8d565343d54274f9f24a97/site/static/.keep -------------------------------------------------------------------------------- /site/static/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netlify-templates/kaldi-hugo-cms-template/471950a72fcaee2fdf8d565343d54274f9f24a97/site/static/android-chrome-192x192.png -------------------------------------------------------------------------------- /site/static/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netlify-templates/kaldi-hugo-cms-template/471950a72fcaee2fdf8d565343d54274f9f24a97/site/static/android-chrome-512x512.png -------------------------------------------------------------------------------- /site/static/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netlify-templates/kaldi-hugo-cms-template/471950a72fcaee2fdf8d565343d54274f9f24a97/site/static/apple-touch-icon.png -------------------------------------------------------------------------------- /site/static/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #ff4400 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /site/static/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netlify-templates/kaldi-hugo-cms-template/471950a72fcaee2fdf8d565343d54274f9f24a97/site/static/favicon-16x16.png -------------------------------------------------------------------------------- /site/static/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netlify-templates/kaldi-hugo-cms-template/471950a72fcaee2fdf8d565343d54274f9f24a97/site/static/favicon-32x32.png -------------------------------------------------------------------------------- /site/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netlify-templates/kaldi-hugo-cms-template/471950a72fcaee2fdf8d565343d54274f9f24a97/site/static/favicon.ico -------------------------------------------------------------------------------- /site/static/img/about/direct-sourcing.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netlify-templates/kaldi-hugo-cms-template/471950a72fcaee2fdf8d565343d54274f9f24a97/site/static/img/about/direct-sourcing.jpg -------------------------------------------------------------------------------- /site/static/img/about/jumbotron.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netlify-templates/kaldi-hugo-cms-template/471950a72fcaee2fdf8d565343d54274f9f24a97/site/static/img/about/jumbotron.jpg -------------------------------------------------------------------------------- /site/static/img/about/reinvest-profits.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netlify-templates/kaldi-hugo-cms-template/471950a72fcaee2fdf8d565343d54274f9f24a97/site/static/img/about/reinvest-profits.jpg -------------------------------------------------------------------------------- /site/static/img/about/shade-grown.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netlify-templates/kaldi-hugo-cms-template/471950a72fcaee2fdf8d565343d54274f9f24a97/site/static/img/about/shade-grown.jpg -------------------------------------------------------------------------------- /site/static/img/about/single-origin.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netlify-templates/kaldi-hugo-cms-template/471950a72fcaee2fdf8d565343d54274f9f24a97/site/static/img/about/single-origin.jpg -------------------------------------------------------------------------------- /site/static/img/about/sustainable-farming.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netlify-templates/kaldi-hugo-cms-template/471950a72fcaee2fdf8d565343d54274f9f24a97/site/static/img/about/sustainable-farming.jpg -------------------------------------------------------------------------------- /site/static/img/blog-index.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netlify-templates/kaldi-hugo-cms-template/471950a72fcaee2fdf8d565343d54274f9f24a97/site/static/img/blog-index.jpg -------------------------------------------------------------------------------- /site/static/img/blog/chemex.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netlify-templates/kaldi-hugo-cms-template/471950a72fcaee2fdf8d565343d54274f9f24a97/site/static/img/blog/chemex.jpg -------------------------------------------------------------------------------- /site/static/img/blog/flavor_wheel.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netlify-templates/kaldi-hugo-cms-template/471950a72fcaee2fdf8d565343d54274f9f24a97/site/static/img/blog/flavor_wheel.jpg -------------------------------------------------------------------------------- /site/static/img/home/about-section.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netlify-templates/kaldi-hugo-cms-template/471950a72fcaee2fdf8d565343d54274f9f24a97/site/static/img/home/about-section.jpg -------------------------------------------------------------------------------- /site/static/img/home/jumbotron.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netlify-templates/kaldi-hugo-cms-template/471950a72fcaee2fdf8d565343d54274f9f24a97/site/static/img/home/jumbotron.jpg -------------------------------------------------------------------------------- /site/static/img/icon.svg: -------------------------------------------------------------------------------- 1 | 2 | icon 3 | Created using Figma 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 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /site/static/img/icons/facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 9 | 10 | -------------------------------------------------------------------------------- /site/static/img/icons/instagram.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 10 | 11 | -------------------------------------------------------------------------------- /site/static/img/icons/twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 11 | 12 | -------------------------------------------------------------------------------- /site/static/img/icons/vimeo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 10 | 11 | -------------------------------------------------------------------------------- /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/products/jumbotron.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netlify-templates/kaldi-hugo-cms-template/471950a72fcaee2fdf8d565343d54274f9f24a97/site/static/img/products/jumbotron.jpg -------------------------------------------------------------------------------- /site/static/img/products/products-full-width.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netlify-templates/kaldi-hugo-cms-template/471950a72fcaee2fdf8d565343d54274f9f24a97/site/static/img/products/products-full-width.jpg -------------------------------------------------------------------------------- /site/static/img/products/products-grid1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netlify-templates/kaldi-hugo-cms-template/471950a72fcaee2fdf8d565343d54274f9f24a97/site/static/img/products/products-grid1.jpg -------------------------------------------------------------------------------- /site/static/img/products/products-grid2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netlify-templates/kaldi-hugo-cms-template/471950a72fcaee2fdf8d565343d54274f9f24a97/site/static/img/products/products-grid2.jpg -------------------------------------------------------------------------------- /site/static/img/products/products-grid3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netlify-templates/kaldi-hugo-cms-template/471950a72fcaee2fdf8d565343d54274f9f24a97/site/static/img/products/products-grid3.jpg -------------------------------------------------------------------------------- /site/static/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "icons": [ 4 | { 5 | "src": "\/android-chrome-192x192.png", 6 | "sizes": "192x192", 7 | "type": "image\/png" 8 | }, 9 | { 10 | "src": "\/android-chrome-512x512.png", 11 | "sizes": "512x512", 12 | "type": "image\/png" 13 | } 14 | ], 15 | "theme_color": "#ffffff", 16 | "display": "standalone" 17 | } 18 | -------------------------------------------------------------------------------- /site/static/mstile-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netlify-templates/kaldi-hugo-cms-template/471950a72fcaee2fdf8d565343d54274f9f24a97/site/static/mstile-144x144.png -------------------------------------------------------------------------------- /site/static/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netlify-templates/kaldi-hugo-cms-template/471950a72fcaee2fdf8d565343d54274f9f24a97/site/static/mstile-150x150.png -------------------------------------------------------------------------------- /site/static/mstile-310x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netlify-templates/kaldi-hugo-cms-template/471950a72fcaee2fdf8d565343d54274f9f24a97/site/static/mstile-310x150.png -------------------------------------------------------------------------------- /site/static/mstile-310x310.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netlify-templates/kaldi-hugo-cms-template/471950a72fcaee2fdf8d565343d54274f9f24a97/site/static/mstile-310x310.png -------------------------------------------------------------------------------- /site/static/mstile-70x70.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netlify-templates/kaldi-hugo-cms-template/471950a72fcaee2fdf8d565343d54274f9f24a97/site/static/mstile-70x70.png -------------------------------------------------------------------------------- /site/static/og-image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netlify-templates/kaldi-hugo-cms-template/471950a72fcaee2fdf8d565343d54274f9f24a97/site/static/og-image.jpg -------------------------------------------------------------------------------- /site/static/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 | -------------------------------------------------------------------------------- /src/cms/config.yml: -------------------------------------------------------------------------------- 1 | backend: 2 | name: github 3 | repo: <% GITHUB_REPOSITORY %> # Gulp will replace this with your GitHub repository 4 | branch: master # Branch to update (master by default) 5 | 6 | media_folder: "site/static/img" # Folder where user uploaded files should go 7 | public_folder: "img" 8 | 9 | collections: # A list of collections the CMS should be able to edit 10 | - name: "post" # Used in routes, ie.: /admin/collections/:slug/edit 11 | label: "Post" # Used in the UI, ie.: "New Post" 12 | folder: "site/content/post" # The path to the folder where the documents are stored 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/products.md" 24 | label: "Products Page" 25 | name: "products" 26 | fields: 27 | - {label: Title, name: title, widget: string} 28 | - {label: Type, name: type, widget: hidden, default: products} 29 | - {label: Page, name: page, widget: hidden, default: "/products.html"} 30 | - {label: Image, name: image, widget: image} 31 | - {label: Heading, name: heading, widget: string} 32 | - {label: Description, name: description, widget: string} 33 | - {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}]}]} 34 | - {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}]}]} 35 | - {label: Testimonials, name: testimonials, widget: list, fields: [{label: Quote, name: quote, widget: string}, {label: Author, name: author, widget: string}]} 36 | - {label: Full_image, name: full_image, widget: image} 37 | - {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}]}]} 38 | -------------------------------------------------------------------------------- /src/cms/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Content Manager 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/css/imports/_background-position.css: -------------------------------------------------------------------------------- 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.css: -------------------------------------------------------------------------------- 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.css: -------------------------------------------------------------------------------- 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.css: -------------------------------------------------------------------------------- 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-radius-top-left: 0; 91 | border-radius-top-right: 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.css: -------------------------------------------------------------------------------- 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.css: -------------------------------------------------------------------------------- 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.css: -------------------------------------------------------------------------------- 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.css: -------------------------------------------------------------------------------- 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.css: -------------------------------------------------------------------------------- 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.css: -------------------------------------------------------------------------------- 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.css: -------------------------------------------------------------------------------- 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 | position: absolute; 80 | height: 100%; 81 | content: counter(i); 82 | counter-increment: i; 83 | color: var(--primary); 84 | } 85 | } 86 | 87 | /* Blockquotes */ 88 | & blockquote { 89 | background-color: var(--grey-1); 90 | display: block; 91 | border-radius: var(--border-radius); 92 | padding: var(--spacing-medium); 93 | color: var(--primary); 94 | font-weight: 700; 95 | font-size: 1.25rem;; 96 | margin-bottom: var(--spacing-medium); 97 | & p { 98 | margin: 0; 99 | } 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /src/css/imports/_code.css: -------------------------------------------------------------------------------- 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.css: -------------------------------------------------------------------------------- 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.css: -------------------------------------------------------------------------------- 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/_custom.css: -------------------------------------------------------------------------------- 1 | button { 2 | cursor: pointer; 3 | } 4 | 5 | button, 6 | input, 7 | textarea { 8 | font-family: inherit; 9 | } 10 | -------------------------------------------------------------------------------- /src/css/imports/_debug-children.css: -------------------------------------------------------------------------------- 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.css: -------------------------------------------------------------------------------- 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.css: -------------------------------------------------------------------------------- 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.css: -------------------------------------------------------------------------------- 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.css: -------------------------------------------------------------------------------- 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.css: -------------------------------------------------------------------------------- 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.css: -------------------------------------------------------------------------------- 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.css: -------------------------------------------------------------------------------- 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.css: -------------------------------------------------------------------------------- 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.css: -------------------------------------------------------------------------------- 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.css: -------------------------------------------------------------------------------- 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.css: -------------------------------------------------------------------------------- 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.css: -------------------------------------------------------------------------------- 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.css: -------------------------------------------------------------------------------- 1 | .list { list-style-type: none; } 2 | -------------------------------------------------------------------------------- /src/css/imports/_max-widths.css: -------------------------------------------------------------------------------- 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.css: -------------------------------------------------------------------------------- 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.css: -------------------------------------------------------------------------------- 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.css: -------------------------------------------------------------------------------- 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.css: -------------------------------------------------------------------------------- 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.css: -------------------------------------------------------------------------------- 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.css: -------------------------------------------------------------------------------- 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/_spacing.css: -------------------------------------------------------------------------------- 1 | .pa0 { padding: var(--spacing-none); } 2 | .pa1 { padding: var(--spacing-extra-small); } 3 | .pa2 { padding: var(--spacing-small); } 4 | .pa3 { padding: var(--spacing-medium); } 5 | .pa4 { padding: var(--spacing-large); } 6 | .pa5 { padding: var(--spacing-extra-large); } 7 | .pa6 { padding: var(--spacing-extra-extra-large); } 8 | .pa7 { padding: var(--spacing-extra-extra-extra-large); } 9 | 10 | .pl0 { padding-left: var(--spacing-none); } 11 | .pl1 { padding-left: var(--spacing-extra-small); } 12 | .pl2 { padding-left: var(--spacing-small); } 13 | .pl3 { padding-left: var(--spacing-medium); } 14 | .pl4 { padding-left: var(--spacing-large); } 15 | .pl5 { padding-left: var(--spacing-extra-large); } 16 | .pl6 { padding-left: var(--spacing-extra-extra-large); } 17 | .pl7 { padding-left: var(--spacing-extra-extra-extra-large); } 18 | 19 | .pr0 { padding-right: var(--spacing-none); } 20 | .pr1 { padding-right: var(--spacing-extra-small); } 21 | .pr2 { padding-right: var(--spacing-small); } 22 | .pr3 { padding-right: var(--spacing-medium); } 23 | .pr4 { padding-right: var(--spacing-large); } 24 | .pr5 { padding-right: var(--spacing-extra-large); } 25 | .pr6 { padding-right: var(--spacing-extra-extra-large); } 26 | .pr7 { padding-right: var(--spacing-extra-extra-extra-large); } 27 | 28 | .pb0 { padding-bottom: var(--spacing-none); } 29 | .pb1 { padding-bottom: var(--spacing-extra-small); } 30 | .pb2 { padding-bottom: var(--spacing-small); } 31 | .pb3 { padding-bottom: var(--spacing-medium); } 32 | .pb4 { padding-bottom: var(--spacing-large); } 33 | .pb5 { padding-bottom: var(--spacing-extra-large); } 34 | .pb6 { padding-bottom: var(--spacing-extra-extra-large); } 35 | .pb7 { padding-bottom: var(--spacing-extra-extra-extra-large); } 36 | 37 | .pt0 { padding-top: var(--spacing-none); } 38 | .pt1 { padding-top: var(--spacing-extra-small); } 39 | .pt2 { padding-top: var(--spacing-small); } 40 | .pt3 { padding-top: var(--spacing-medium); } 41 | .pt4 { padding-top: var(--spacing-large); } 42 | .pt5 { padding-top: var(--spacing-extra-large); } 43 | .pt6 { padding-top: var(--spacing-extra-extra-large); } 44 | .pt7 { padding-top: var(--spacing-extra-extra-extra-large); } 45 | 46 | .pv0 { 47 | padding-top: var(--spacing-none); 48 | padding-bottom: var(--spacing-none); 49 | } 50 | .pv1 { 51 | padding-top: var(--spacing-extra-small); 52 | padding-bottom: var(--spacing-extra-small); 53 | } 54 | .pv2 { 55 | padding-top: var(--spacing-small); 56 | padding-bottom: var(--spacing-small); 57 | } 58 | .pv3 { 59 | padding-top: var(--spacing-medium); 60 | padding-bottom: var(--spacing-medium); 61 | } 62 | .pv4 { 63 | padding-top: var(--spacing-large); 64 | padding-bottom: var(--spacing-large); 65 | } 66 | .pv5 { 67 | padding-top: var(--spacing-extra-large); 68 | padding-bottom: var(--spacing-extra-large); 69 | } 70 | .pv6 { 71 | padding-top: var(--spacing-extra-extra-large); 72 | padding-bottom: var(--spacing-extra-extra-large); 73 | } 74 | 75 | .pv7 { 76 | padding-top: var(--spacing-extra-extra-extra-large); 77 | padding-bottom: var(--spacing-extra-extra-extra-large); 78 | } 79 | 80 | .ph0 { 81 | padding-left: var(--spacing-none); 82 | padding-right: var(--spacing-none); 83 | } 84 | 85 | .ph1 { 86 | padding-left: var(--spacing-extra-small); 87 | padding-right: var(--spacing-extra-small); 88 | } 89 | 90 | .ph2 { 91 | padding-left: var(--spacing-small); 92 | padding-right: var(--spacing-small); 93 | } 94 | 95 | .ph3 { 96 | padding-left: var(--spacing-medium); 97 | padding-right: var(--spacing-medium); 98 | } 99 | 100 | .ph4 { 101 | padding-left: var(--spacing-large); 102 | padding-right: var(--spacing-large); 103 | } 104 | 105 | .ph5 { 106 | padding-left: var(--spacing-extra-large); 107 | padding-right: var(--spacing-extra-large); 108 | } 109 | 110 | .ph6 { 111 | padding-left: var(--spacing-extra-extra-large); 112 | padding-right: var(--spacing-extra-extra-large); 113 | } 114 | 115 | .ph7 { 116 | padding-left: var(--spacing-extra-extra-extra-large); 117 | padding-right: var(--spacing-extra-extra-extra-large); 118 | } 119 | 120 | .ma0 { margin: var(--spacing-none); } 121 | .ma1 { margin: var(--spacing-extra-small); } 122 | .ma2 { margin: var(--spacing-small); } 123 | .ma3 { margin: var(--spacing-medium); } 124 | .ma4 { margin: var(--spacing-large); } 125 | .ma5 { margin: var(--spacing-extra-large); } 126 | .ma6 { margin: var(--spacing-extra-extra-large); } 127 | .ma7 { margin: var(--spacing-extra-extra-extra-large); } 128 | 129 | .ml0 { margin-left: var(--spacing-none); } 130 | .ml1 { margin-left: var(--spacing-extra-small); } 131 | .ml2 { margin-left: var(--spacing-small); } 132 | .ml3 { margin-left: var(--spacing-medium); } 133 | .ml4 { margin-left: var(--spacing-large); } 134 | .ml5 { margin-left: var(--spacing-extra-large); } 135 | .ml6 { margin-left: var(--spacing-extra-extra-large); } 136 | .ml7 { margin-left: var(--spacing-extra-extra-extra-large); } 137 | 138 | .mr0 { margin-right: var(--spacing-none); } 139 | .mr1 { margin-right: var(--spacing-extra-small); } 140 | .mr2 { margin-right: var(--spacing-small); } 141 | .mr3 { margin-right: var(--spacing-medium); } 142 | .mr4 { margin-right: var(--spacing-large); } 143 | .mr5 { margin-right: var(--spacing-extra-large); } 144 | .mr6 { margin-right: var(--spacing-extra-extra-large); } 145 | .mr7 { margin-right: var(--spacing-extra-extra-extra-large); } 146 | 147 | .mb0 { margin-bottom: var(--spacing-none); } 148 | .mb1 { margin-bottom: var(--spacing-extra-small); } 149 | .mb2 { margin-bottom: var(--spacing-small); } 150 | .mb3 { margin-bottom: var(--spacing-medium); } 151 | .mb4 { margin-bottom: var(--spacing-large); } 152 | .mb5 { margin-bottom: var(--spacing-extra-large); } 153 | .mb6 { margin-bottom: var(--spacing-extra-extra-large); } 154 | .mb7 { margin-bottom: var(--spacing-extra-extra-extra-large); } 155 | 156 | .mt0 { margin-top: var(--spacing-none); } 157 | .mt1 { margin-top: var(--spacing-extra-small); } 158 | .mt2 { margin-top: var(--spacing-small); } 159 | .mt3 { margin-top: var(--spacing-medium); } 160 | .mt4 { margin-top: var(--spacing-large); } 161 | .mt5 { margin-top: var(--spacing-extra-large); } 162 | .mt6 { margin-top: var(--spacing-extra-extra-large); } 163 | .mt7 { margin-top: var(--spacing-extra-extra-extra-large); } 164 | 165 | .mv0 { 166 | margin-top: var(--spacing-none); 167 | margin-bottom: var(--spacing-none); 168 | } 169 | .mv1 { 170 | margin-top: var(--spacing-extra-small); 171 | margin-bottom: var(--spacing-extra-small); 172 | } 173 | .mv2 { 174 | margin-top: var(--spacing-small); 175 | margin-bottom: var(--spacing-small); 176 | } 177 | .mv3 { 178 | margin-top: var(--spacing-medium); 179 | margin-bottom: var(--spacing-medium); 180 | } 181 | .mv4 { 182 | margin-top: var(--spacing-large); 183 | margin-bottom: var(--spacing-large); 184 | } 185 | .mv5 { 186 | margin-top: var(--spacing-extra-large); 187 | margin-bottom: var(--spacing-extra-large); 188 | } 189 | .mv6 { 190 | margin-top: var(--spacing-extra-extra-large); 191 | margin-bottom: var(--spacing-extra-extra-large); 192 | } 193 | .mv7 { 194 | margin-top: var(--spacing-extra-extra-extra-large); 195 | margin-bottom: var(--spacing-extra-extra-extra-large); 196 | } 197 | 198 | .mh0 { 199 | margin-left: var(--spacing-none); 200 | margin-right: var(--spacing-none); 201 | } 202 | .mh1 { 203 | margin-left: var(--spacing-extra-small); 204 | margin-right: var(--spacing-extra-small); 205 | } 206 | .mh2 { 207 | margin-left: var(--spacing-small); 208 | margin-right: var(--spacing-small); 209 | } 210 | .mh3 { 211 | margin-left: var(--spacing-medium); 212 | margin-right: var(--spacing-medium); 213 | } 214 | .mh4 { 215 | margin-left: var(--spacing-large); 216 | margin-right: var(--spacing-large); 217 | } 218 | .mh5 { 219 | margin-left: var(--spacing-extra-large); 220 | margin-right: var(--spacing-extra-large); 221 | } 222 | .mh6 { 223 | margin-left: var(--spacing-extra-extra-large); 224 | margin-right: var(--spacing-extra-extra-large); 225 | } 226 | .mh7 { 227 | margin-left: var(--spacing-extra-extra-extra-large); 228 | margin-right: var(--spacing-extra-extra-extra-large); 229 | } 230 | 231 | .mhn1 { margin-left: -var(--spacing-extra-small); margin-right: -var(--spacing-extra-small); } 232 | .mhn2 { margin-left: -var(--spacing-small); margin-right: -var(--spacing-small); } 233 | .mhn3 { margin-left: -var(--spacing-medium); margin-right: -var(--spacing-medium); } 234 | 235 | @media (--breakpoint-not-small) { 236 | .pa0-ns { padding: var(--spacing-none); } 237 | .pa1-ns { padding: var(--spacing-extra-small); } 238 | .pa2-ns { padding: var(--spacing-small); } 239 | .pa3-ns { padding: var(--spacing-medium); } 240 | .pa4-ns { padding: var(--spacing-large); } 241 | .pa5-ns { padding: var(--spacing-extra-large); } 242 | .pa6-ns { padding: var(--spacing-extra-extra-large); } 243 | .pa7-ns { padding: var(--spacing-extra-extra-extra-large); } 244 | 245 | .pl0-ns { padding-left: var(--spacing-none); } 246 | .pl1-ns { padding-left: var(--spacing-extra-small); } 247 | .pl2-ns { padding-left: var(--spacing-small); } 248 | .pl3-ns { padding-left: var(--spacing-medium); } 249 | .pl4-ns { padding-left: var(--spacing-large); } 250 | .pl5-ns { padding-left: var(--spacing-extra-large); } 251 | .pl6-ns { padding-left: var(--spacing-extra-extra-large); } 252 | .pl7-ns { padding-left: var(--spacing-extra-extra-extra-large); } 253 | 254 | .pr0-ns { padding-right: var(--spacing-none); } 255 | .pr1-ns { padding-right: var(--spacing-extra-small); } 256 | .pr2-ns { padding-right: var(--spacing-small); } 257 | .pr3-ns { padding-right: var(--spacing-medium); } 258 | .pr4-ns { padding-right: var(--spacing-large); } 259 | .pr5-ns { padding-right: var(--spacing-extra-large); } 260 | .pr6-ns { padding-right: var(--spacing-extra-extra-large); } 261 | .pr7-ns { padding-right: var(--spacing-extra-extra-extra-large); } 262 | 263 | .pb0-ns { padding-bottom: var(--spacing-none); } 264 | .pb1-ns { padding-bottom: var(--spacing-extra-small); } 265 | .pb2-ns { padding-bottom: var(--spacing-small); } 266 | .pb3-ns { padding-bottom: var(--spacing-medium); } 267 | .pb4-ns { padding-bottom: var(--spacing-large); } 268 | .pb5-ns { padding-bottom: var(--spacing-extra-large); } 269 | .pb6-ns { padding-bottom: var(--spacing-extra-extra-large); } 270 | .pb7-ns { padding-bottom: var(--spacing-extra-extra-extra-large); } 271 | 272 | .pt0-ns { padding-top: var(--spacing-none); } 273 | .pt1-ns { padding-top: var(--spacing-extra-small); } 274 | .pt2-ns { padding-top: var(--spacing-small); } 275 | .pt3-ns { padding-top: var(--spacing-medium); } 276 | .pt4-ns { padding-top: var(--spacing-large); } 277 | .pt5-ns { padding-top: var(--spacing-extra-large); } 278 | .pt6-ns { padding-top: var(--spacing-extra-extra-large); } 279 | .pt7-ns { padding-top: var(--spacing-extra-extra-extra-large); } 280 | 281 | .pv0-ns { 282 | padding-top: var(--spacing-none); 283 | padding-bottom: var(--spacing-none); 284 | } 285 | .pv1-ns { 286 | padding-top: var(--spacing-extra-small); 287 | padding-bottom: var(--spacing-extra-small); 288 | } 289 | .pv2-ns { 290 | padding-top: var(--spacing-small); 291 | padding-bottom: var(--spacing-small); 292 | } 293 | .pv3-ns { 294 | padding-top: var(--spacing-medium); 295 | padding-bottom: var(--spacing-medium); 296 | } 297 | .pv4-ns { 298 | padding-top: var(--spacing-large); 299 | padding-bottom: var(--spacing-large); 300 | } 301 | .pv5-ns { 302 | padding-top: var(--spacing-extra-large); 303 | padding-bottom: var(--spacing-extra-large); 304 | } 305 | .pv6-ns { 306 | padding-top: var(--spacing-extra-extra-large); 307 | padding-bottom: var(--spacing-extra-extra-large); 308 | } 309 | .pv7-ns { 310 | padding-top: var(--spacing-extra-extra-extra-large); 311 | padding-bottom: var(--spacing-extra-extra-extra-large); 312 | } 313 | .ph0-ns { 314 | padding-left: var(--spacing-none); 315 | padding-right: var(--spacing-none); 316 | } 317 | .ph1-ns { 318 | padding-left: var(--spacing-extra-small); 319 | padding-right: var(--spacing-extra-small); 320 | } 321 | .ph2-ns { 322 | padding-left: var(--spacing-small); 323 | padding-right: var(--spacing-small); 324 | } 325 | .ph3-ns { 326 | padding-left: var(--spacing-medium); 327 | padding-right: var(--spacing-medium); 328 | } 329 | .ph4-ns { 330 | padding-left: var(--spacing-large); 331 | padding-right: var(--spacing-large); 332 | } 333 | .ph5-ns { 334 | padding-left: var(--spacing-extra-large); 335 | padding-right: var(--spacing-extra-large); 336 | } 337 | .ph6-ns { 338 | padding-left: var(--spacing-extra-extra-large); 339 | padding-right: var(--spacing-extra-extra-large); 340 | } 341 | .ph7-ns { 342 | padding-left: var(--spacing-extra-extra-extra-large); 343 | padding-right: var(--spacing-extra-extra-extra-large); 344 | } 345 | 346 | .ma0-ns { margin: var(--spacing-none); } 347 | .ma1-ns { margin: var(--spacing-extra-small); } 348 | .ma2-ns { margin: var(--spacing-small); } 349 | .ma3-ns { margin: var(--spacing-medium); } 350 | .ma4-ns { margin: var(--spacing-large); } 351 | .ma5-ns { margin: var(--spacing-extra-large); } 352 | .ma6-ns { margin: var(--spacing-extra-extra-large); } 353 | .ma7-ns { margin: var(--spacing-extra-extra-extra-large); } 354 | 355 | .ml0-ns { margin-left: var(--spacing-none); } 356 | .ml1-ns { margin-left: var(--spacing-extra-small); } 357 | .ml2-ns { margin-left: var(--spacing-small); } 358 | .ml3-ns { margin-left: var(--spacing-medium); } 359 | .ml4-ns { margin-left: var(--spacing-large); } 360 | .ml5-ns { margin-left: var(--spacing-extra-large); } 361 | .ml6-ns { margin-left: var(--spacing-extra-extra-large); } 362 | .ml7-ns { margin-left: var(--spacing-extra-extra-extra-large); } 363 | 364 | .mr0-ns { margin-right: var(--spacing-none); } 365 | .mr1-ns { margin-right: var(--spacing-extra-small); } 366 | .mr2-ns { margin-right: var(--spacing-small); } 367 | .mr3-ns { margin-right: var(--spacing-medium); } 368 | .mr4-ns { margin-right: var(--spacing-large); } 369 | .mr5-ns { margin-right: var(--spacing-extra-large); } 370 | .mr6-ns { margin-right: var(--spacing-extra-extra-large); } 371 | .mr7-ns { margin-right: var(--spacing-extra-extra-extra-large); } 372 | 373 | .mb0-ns { margin-bottom: var(--spacing-none); } 374 | .mb1-ns { margin-bottom: var(--spacing-extra-small); } 375 | .mb2-ns { margin-bottom: var(--spacing-small); } 376 | .mb3-ns { margin-bottom: var(--spacing-medium); } 377 | .mb4-ns { margin-bottom: var(--spacing-large); } 378 | .mb5-ns { margin-bottom: var(--spacing-extra-large); } 379 | .mb6-ns { margin-bottom: var(--spacing-extra-extra-large); } 380 | .mb7-ns { margin-bottom: var(--spacing-extra-extra-extra-large); } 381 | 382 | .mt0-ns { margin-top: var(--spacing-none); } 383 | .mt1-ns { margin-top: var(--spacing-extra-small); } 384 | .mt2-ns { margin-top: var(--spacing-small); } 385 | .mt3-ns { margin-top: var(--spacing-medium); } 386 | .mt4-ns { margin-top: var(--spacing-large); } 387 | .mt5-ns { margin-top: var(--spacing-extra-large); } 388 | .mt6-ns { margin-top: var(--spacing-extra-extra-large); } 389 | .mt7-ns { margin-top: var(--spacing-extra-extra-extra-large); } 390 | 391 | .mv0-ns { 392 | margin-top: var(--spacing-none); 393 | margin-bottom: var(--spacing-none); 394 | } 395 | .mv1-ns { 396 | margin-top: var(--spacing-extra-small); 397 | margin-bottom: var(--spacing-extra-small); 398 | } 399 | .mv2-ns { 400 | margin-top: var(--spacing-small); 401 | margin-bottom: var(--spacing-small); 402 | } 403 | .mv3-ns { 404 | margin-top: var(--spacing-medium); 405 | margin-bottom: var(--spacing-medium); 406 | } 407 | .mv4-ns { 408 | margin-top: var(--spacing-large); 409 | margin-bottom: var(--spacing-large); 410 | } 411 | .mv5-ns { 412 | margin-top: var(--spacing-extra-large); 413 | margin-bottom: var(--spacing-extra-large); 414 | } 415 | .mv6-ns { 416 | margin-top: var(--spacing-extra-extra-large); 417 | margin-bottom: var(--spacing-extra-extra-large); 418 | } 419 | .mv7-ns { 420 | margin-top: var(--spacing-extra-extra-extra-large); 421 | margin-bottom: var(--spacing-extra-extra-extra-large); 422 | } 423 | 424 | .mh0-ns { 425 | margin-left: var(--spacing-none); 426 | margin-right: var(--spacing-none); 427 | } 428 | .mh1-ns { 429 | margin-left: var(--spacing-extra-small); 430 | margin-right: var(--spacing-extra-small); 431 | } 432 | .mh2-ns { 433 | margin-left: var(--spacing-small); 434 | margin-right: var(--spacing-small); 435 | } 436 | .mh3-ns { 437 | margin-left: var(--spacing-medium); 438 | margin-right: var(--spacing-medium); 439 | } 440 | .mh4-ns { 441 | margin-left: var(--spacing-large); 442 | margin-right: var(--spacing-large); 443 | } 444 | .mh5-ns { 445 | margin-left: var(--spacing-extra-large); 446 | margin-right: var(--spacing-extra-large); 447 | } 448 | .mh6-ns { 449 | margin-left: var(--spacing-extra-extra-large); 450 | margin-right: var(--spacing-extra-extra-large); 451 | } 452 | .mh7-ns { 453 | margin-left: var(--spacing-extra-extra-extra-large); 454 | margin-right: var(--spacing-extra-extra-extra-large); 455 | } 456 | 457 | .mhn1-ns { margin-left: -var(--spacing-extra-small); margin-right: -var(--spacing-extra-small); } 458 | .mhn2-ns { margin-left: -var(--spacing-small); margin-right: -var(--spacing-small); } 459 | .mhn3-ns { margin-left: -var(--spacing-medium); margin-right: -var(--spacing-medium); } 460 | 461 | } 462 | 463 | @media (--breakpoint-medium) { 464 | .pa0-m { padding: var(--spacing-none); } 465 | .pa1-m { padding: var(--spacing-extra-small); } 466 | .pa2-m { padding: var(--spacing-small); } 467 | .pa3-m { padding: var(--spacing-medium); } 468 | .pa4-m { padding: var(--spacing-large); } 469 | .pa5-m { padding: var(--spacing-extra-large); } 470 | .pa6-m { padding: var(--spacing-extra-extra-large); } 471 | .pa7-m { padding: var(--spacing-extra-extra-extra-large); } 472 | 473 | .pl0-m { padding-left: var(--spacing-none); } 474 | .pl1-m { padding-left: var(--spacing-extra-small); } 475 | .pl2-m { padding-left: var(--spacing-small); } 476 | .pl3-m { padding-left: var(--spacing-medium); } 477 | .pl4-m { padding-left: var(--spacing-large); } 478 | .pl5-m { padding-left: var(--spacing-extra-large); } 479 | .pl6-m { padding-left: var(--spacing-extra-extra-large); } 480 | .pl7-m { padding-left: var(--spacing-extra-extra-extra-large); } 481 | 482 | .pr0-m { padding-right: var(--spacing-none); } 483 | .pr1-m { padding-right: var(--spacing-extra-small); } 484 | .pr2-m { padding-right: var(--spacing-small); } 485 | .pr3-m { padding-right: var(--spacing-medium); } 486 | .pr4-m { padding-right: var(--spacing-large); } 487 | .pr5-m { padding-right: var(--spacing-extra-large); } 488 | .pr6-m { padding-right: var(--spacing-extra-extra-large); } 489 | .pr7-m { padding-right: var(--spacing-extra-extra-extra-large); } 490 | 491 | .pb0-m { padding-bottom: var(--spacing-none); } 492 | .pb1-m { padding-bottom: var(--spacing-extra-small); } 493 | .pb2-m { padding-bottom: var(--spacing-small); } 494 | .pb3-m { padding-bottom: var(--spacing-medium); } 495 | .pb4-m { padding-bottom: var(--spacing-large); } 496 | .pb5-m { padding-bottom: var(--spacing-extra-large); } 497 | .pb6-m { padding-bottom: var(--spacing-extra-extra-large); } 498 | .pb7-m { padding-bottom: var(--spacing-extra-extra-extra-large); } 499 | 500 | .pt0-m { padding-top: var(--spacing-none); } 501 | .pt1-m { padding-top: var(--spacing-extra-small); } 502 | .pt2-m { padding-top: var(--spacing-small); } 503 | .pt3-m { padding-top: var(--spacing-medium); } 504 | .pt4-m { padding-top: var(--spacing-large); } 505 | .pt5-m { padding-top: var(--spacing-extra-large); } 506 | .pt6-m { padding-top: var(--spacing-extra-extra-large); } 507 | .pt7-m { padding-top: var(--spacing-extra-extra-extra-large); } 508 | 509 | .pv0-m { 510 | padding-top: var(--spacing-none); 511 | padding-bottom: var(--spacing-none); 512 | } 513 | .pv1-m { 514 | padding-top: var(--spacing-extra-small); 515 | padding-bottom: var(--spacing-extra-small); 516 | } 517 | .pv2-m { 518 | padding-top: var(--spacing-small); 519 | padding-bottom: var(--spacing-small); 520 | } 521 | .pv3-m { 522 | padding-top: var(--spacing-medium); 523 | padding-bottom: var(--spacing-medium); 524 | } 525 | .pv4-m { 526 | padding-top: var(--spacing-large); 527 | padding-bottom: var(--spacing-large); 528 | } 529 | .pv5-m { 530 | padding-top: var(--spacing-extra-large); 531 | padding-bottom: var(--spacing-extra-large); 532 | } 533 | .pv6-m { 534 | padding-top: var(--spacing-extra-extra-large); 535 | padding-bottom: var(--spacing-extra-extra-large); 536 | } 537 | .pv7-m { 538 | padding-top: var(--spacing-extra-extra-extra-large); 539 | padding-bottom: var(--spacing-extra-extra-extra-large); 540 | } 541 | 542 | .ph0-m { 543 | padding-left: var(--spacing-none); 544 | padding-right: var(--spacing-none); 545 | } 546 | .ph1-m { 547 | padding-left: var(--spacing-extra-small); 548 | padding-right: var(--spacing-extra-small); 549 | } 550 | .ph2-m { 551 | padding-left: var(--spacing-small); 552 | padding-right: var(--spacing-small); 553 | } 554 | .ph3-m { 555 | padding-left: var(--spacing-medium); 556 | padding-right: var(--spacing-medium); 557 | } 558 | .ph4-m { 559 | padding-left: var(--spacing-large); 560 | padding-right: var(--spacing-large); 561 | } 562 | .ph5-m { 563 | padding-left: var(--spacing-extra-large); 564 | padding-right: var(--spacing-extra-large); 565 | } 566 | .ph6-m { 567 | padding-left: var(--spacing-extra-extra-large); 568 | padding-right: var(--spacing-extra-extra-large); 569 | } 570 | .ph7-m { 571 | padding-left: var(--spacing-extra-extra-extra-large); 572 | padding-right: var(--spacing-extra-extra-extra-large); 573 | } 574 | 575 | .ma0-m { margin: var(--spacing-none); } 576 | .ma1-m { margin: var(--spacing-extra-small); } 577 | .ma2-m { margin: var(--spacing-small); } 578 | .ma3-m { margin: var(--spacing-medium); } 579 | .ma4-m { margin: var(--spacing-large); } 580 | .ma5-m { margin: var(--spacing-extra-large); } 581 | .ma6-m { margin: var(--spacing-extra-extra-large); } 582 | .ma7-m { margin: var(--spacing-extra-extra-extra-large); } 583 | 584 | .ml0-m { margin-left: var(--spacing-none); } 585 | .ml1-m { margin-left: var(--spacing-extra-small); } 586 | .ml2-m { margin-left: var(--spacing-small); } 587 | .ml3-m { margin-left: var(--spacing-medium); } 588 | .ml4-m { margin-left: var(--spacing-large); } 589 | .ml5-m { margin-left: var(--spacing-extra-large); } 590 | .ml6-m { margin-left: var(--spacing-extra-extra-large); } 591 | .ml7-m { margin-left: var(--spacing-extra-extra-extra-large); } 592 | 593 | .mr0-m { margin-right: var(--spacing-none); } 594 | .mr1-m { margin-right: var(--spacing-extra-small); } 595 | .mr2-m { margin-right: var(--spacing-small); } 596 | .mr3-m { margin-right: var(--spacing-medium); } 597 | .mr4-m { margin-right: var(--spacing-large); } 598 | .mr5-m { margin-right: var(--spacing-extra-large); } 599 | .mr6-m { margin-right: var(--spacing-extra-extra-large); } 600 | .mr7-m { margin-right: var(--spacing-extra-extra-extra-large); } 601 | 602 | .mb0-m { margin-bottom: var(--spacing-none); } 603 | .mb1-m { margin-bottom: var(--spacing-extra-small); } 604 | .mb2-m { margin-bottom: var(--spacing-small); } 605 | .mb3-m { margin-bottom: var(--spacing-medium); } 606 | .mb4-m { margin-bottom: var(--spacing-large); } 607 | .mb5-m { margin-bottom: var(--spacing-extra-large); } 608 | .mb6-m { margin-bottom: var(--spacing-extra-extra-large); } 609 | .mb7-m { margin-bottom: var(--spacing-extra-extra-extra-large); } 610 | 611 | .mt0-m { margin-top: var(--spacing-none); } 612 | .mt1-m { margin-top: var(--spacing-extra-small); } 613 | .mt2-m { margin-top: var(--spacing-small); } 614 | .mt3-m { margin-top: var(--spacing-medium); } 615 | .mt4-m { margin-top: var(--spacing-large); } 616 | .mt5-m { margin-top: var(--spacing-extra-large); } 617 | .mt6-m { margin-top: var(--spacing-extra-extra-large); } 618 | .mt7-m { margin-top: var(--spacing-extra-extra-extra-large); } 619 | 620 | .mv0-m { 621 | margin-top: var(--spacing-none); 622 | margin-bottom: var(--spacing-none); 623 | } 624 | .mv1-m { 625 | margin-top: var(--spacing-extra-small); 626 | margin-bottom: var(--spacing-extra-small); 627 | } 628 | .mv2-m { 629 | margin-top: var(--spacing-small); 630 | margin-bottom: var(--spacing-small); 631 | } 632 | .mv3-m { 633 | margin-top: var(--spacing-medium); 634 | margin-bottom: var(--spacing-medium); 635 | } 636 | .mv4-m { 637 | margin-top: var(--spacing-large); 638 | margin-bottom: var(--spacing-large); 639 | } 640 | .mv5-m { 641 | margin-top: var(--spacing-extra-large); 642 | margin-bottom: var(--spacing-extra-large); 643 | } 644 | .mv6-m { 645 | margin-top: var(--spacing-extra-extra-large); 646 | margin-bottom: var(--spacing-extra-extra-large); 647 | } 648 | .mv7-m { 649 | margin-top: var(--spacing-extra-extra-extra-large); 650 | margin-bottom: var(--spacing-extra-extra-extra-large); 651 | } 652 | 653 | .mh0-m { 654 | margin-left: var(--spacing-none); 655 | margin-right: var(--spacing-none); 656 | } 657 | .mh1-m { 658 | margin-left: var(--spacing-extra-small); 659 | margin-right: var(--spacing-extra-small); 660 | } 661 | .mh2-m { 662 | margin-left: var(--spacing-small); 663 | margin-right: var(--spacing-small); 664 | } 665 | .mh3-m { 666 | margin-left: var(--spacing-medium); 667 | margin-right: var(--spacing-medium); 668 | } 669 | .mh4-m { 670 | margin-left: var(--spacing-large); 671 | margin-right: var(--spacing-large); 672 | } 673 | .mh5-m { 674 | margin-left: var(--spacing-extra-large); 675 | margin-right: var(--spacing-extra-large); 676 | } 677 | .mh6-m { 678 | margin-left: var(--spacing-extra-extra-large); 679 | margin-right: var(--spacing-extra-extra-large); 680 | } 681 | .mh7-m { 682 | margin-left: var(--spacing-extra-extra-extra-large); 683 | margin-right: var(--spacing-extra-extra-extra-large); 684 | } 685 | 686 | .mhn1-m { margin-left: -var(--spacing-extra-small); margin-right: -var(--spacing-extra-small); } 687 | .mhn2-m { margin-left: -var(--spacing-small); margin-right: -var(--spacing-small); } 688 | .mhn3-m { margin-left: -var(--spacing-medium); margin-right: -var(--spacing-medium); } 689 | 690 | } 691 | 692 | @media (--breakpoint-large) { 693 | .pa0-l { padding: var(--spacing-none); } 694 | .pa1-l { padding: var(--spacing-extra-small); } 695 | .pa2-l { padding: var(--spacing-small); } 696 | .pa3-l { padding: var(--spacing-medium); } 697 | .pa4-l { padding: var(--spacing-large); } 698 | .pa5-l { padding: var(--spacing-extra-large); } 699 | .pa6-l { padding: var(--spacing-extra-extra-large); } 700 | .pa7-l { padding: var(--spacing-extra-extra-extra-large); } 701 | 702 | .pl0-l { padding-left: var(--spacing-none); } 703 | .pl1-l { padding-left: var(--spacing-extra-small); } 704 | .pl2-l { padding-left: var(--spacing-small); } 705 | .pl3-l { padding-left: var(--spacing-medium); } 706 | .pl4-l { padding-left: var(--spacing-large); } 707 | .pl5-l { padding-left: var(--spacing-extra-large); } 708 | .pl6-l { padding-left: var(--spacing-extra-extra-large); } 709 | .pl7-l { padding-left: var(--spacing-extra-extra-extra-large); } 710 | 711 | .pr0-l { padding-right: var(--spacing-none); } 712 | .pr1-l { padding-right: var(--spacing-extra-small); } 713 | .pr2-l { padding-right: var(--spacing-small); } 714 | .pr3-l { padding-right: var(--spacing-medium); } 715 | .pr4-l { padding-right: var(--spacing-large); } 716 | .pr5-l { padding-right: var(--spacing-extra-large); } 717 | .pr6-l { padding-right: var(--spacing-extra-extra-large); } 718 | .pr7-l { padding-right: var(--spacing-extra-extra-extra-large); } 719 | 720 | .pb0-l { padding-bottom: var(--spacing-none); } 721 | .pb1-l { padding-bottom: var(--spacing-extra-small); } 722 | .pb2-l { padding-bottom: var(--spacing-small); } 723 | .pb3-l { padding-bottom: var(--spacing-medium); } 724 | .pb4-l { padding-bottom: var(--spacing-large); } 725 | .pb5-l { padding-bottom: var(--spacing-extra-large); } 726 | .pb6-l { padding-bottom: var(--spacing-extra-extra-large); } 727 | .pb7-l { padding-bottom: var(--spacing-extra-extra-extra-large); } 728 | 729 | .pt0-l { padding-top: var(--spacing-none); } 730 | .pt1-l { padding-top: var(--spacing-extra-small); } 731 | .pt2-l { padding-top: var(--spacing-small); } 732 | .pt3-l { padding-top: var(--spacing-medium); } 733 | .pt4-l { padding-top: var(--spacing-large); } 734 | .pt5-l { padding-top: var(--spacing-extra-large); } 735 | .pt6-l { padding-top: var(--spacing-extra-extra-large); } 736 | .pt7-l { padding-top: var(--spacing-extra-extra-extra-large); } 737 | 738 | .pv0-l { 739 | padding-top: var(--spacing-none); 740 | padding-bottom: var(--spacing-none); 741 | } 742 | .pv1-l { 743 | padding-top: var(--spacing-extra-small); 744 | padding-bottom: var(--spacing-extra-small); 745 | } 746 | .pv2-l { 747 | padding-top: var(--spacing-small); 748 | padding-bottom: var(--spacing-small); 749 | } 750 | .pv3-l { 751 | padding-top: var(--spacing-medium); 752 | padding-bottom: var(--spacing-medium); 753 | } 754 | .pv4-l { 755 | padding-top: var(--spacing-large); 756 | padding-bottom: var(--spacing-large); 757 | } 758 | .pv5-l { 759 | padding-top: var(--spacing-extra-large); 760 | padding-bottom: var(--spacing-extra-large); 761 | } 762 | .pv6-l { 763 | padding-top: var(--spacing-extra-extra-large); 764 | padding-bottom: var(--spacing-extra-extra-large); 765 | } 766 | .pv7-l { 767 | padding-top: var(--spacing-extra-extra-extra-large); 768 | padding-bottom: var(--spacing-extra-extra-extra-large); 769 | } 770 | 771 | .ph0-l { 772 | padding-left: var(--spacing-none); 773 | padding-right: var(--spacing-none); 774 | } 775 | .ph1-l { 776 | padding-left: var(--spacing-extra-small); 777 | padding-right: var(--spacing-extra-small); 778 | } 779 | .ph2-l { 780 | padding-left: var(--spacing-small); 781 | padding-right: var(--spacing-small); 782 | } 783 | .ph3-l { 784 | padding-left: var(--spacing-medium); 785 | padding-right: var(--spacing-medium); 786 | } 787 | .ph4-l { 788 | padding-left: var(--spacing-large); 789 | padding-right: var(--spacing-large); 790 | } 791 | .ph5-l { 792 | padding-left: var(--spacing-extra-large); 793 | padding-right: var(--spacing-extra-large); 794 | } 795 | .ph6-l { 796 | padding-left: var(--spacing-extra-extra-large); 797 | padding-right: var(--spacing-extra-extra-large); 798 | } 799 | .ph7-l { 800 | padding-left: var(--spacing-extra-extra-extra-large); 801 | padding-right: var(--spacing-extra-extra-extra-large); 802 | } 803 | 804 | .ma0-l { margin: var(--spacing-none); } 805 | .ma1-l { margin: var(--spacing-extra-small); } 806 | .ma2-l { margin: var(--spacing-small); } 807 | .ma3-l { margin: var(--spacing-medium); } 808 | .ma4-l { margin: var(--spacing-large); } 809 | .ma5-l { margin: var(--spacing-extra-large); } 810 | .ma6-l { margin: var(--spacing-extra-extra-large); } 811 | .ma7-l { margin: var(--spacing-extra-extra-extra-large); } 812 | 813 | .ml0-l { margin-left: var(--spacing-none); } 814 | .ml1-l { margin-left: var(--spacing-extra-small); } 815 | .ml2-l { margin-left: var(--spacing-small); } 816 | .ml3-l { margin-left: var(--spacing-medium); } 817 | .ml4-l { margin-left: var(--spacing-large); } 818 | .ml5-l { margin-left: var(--spacing-extra-large); } 819 | .ml6-l { margin-left: var(--spacing-extra-extra-large); } 820 | .ml7-l { margin-left: var(--spacing-extra-extra-extra-large); } 821 | 822 | .mr0-l { margin-right: var(--spacing-none); } 823 | .mr1-l { margin-right: var(--spacing-extra-small); } 824 | .mr2-l { margin-right: var(--spacing-small); } 825 | .mr3-l { margin-right: var(--spacing-medium); } 826 | .mr4-l { margin-right: var(--spacing-large); } 827 | .mr5-l { margin-right: var(--spacing-extra-large); } 828 | .mr6-l { margin-right: var(--spacing-extra-extra-large); } 829 | .mr7-l { margin-right: var(--spacing-extra-extra-extra-large); } 830 | 831 | .mb0-l { margin-bottom: var(--spacing-none); } 832 | .mb1-l { margin-bottom: var(--spacing-extra-small); } 833 | .mb2-l { margin-bottom: var(--spacing-small); } 834 | .mb3-l { margin-bottom: var(--spacing-medium); } 835 | .mb4-l { margin-bottom: var(--spacing-large); } 836 | .mb5-l { margin-bottom: var(--spacing-extra-large); } 837 | .mb6-l { margin-bottom: var(--spacing-extra-extra-large); } 838 | .mb7-l { margin-bottom: var(--spacing-extra-extra-extra-large); } 839 | 840 | .mt0-l { margin-top: var(--spacing-none); } 841 | .mt1-l { margin-top: var(--spacing-extra-small); } 842 | .mt2-l { margin-top: var(--spacing-small); } 843 | .mt3-l { margin-top: var(--spacing-medium); } 844 | .mt4-l { margin-top: var(--spacing-large); } 845 | .mt5-l { margin-top: var(--spacing-extra-large); } 846 | .mt6-l { margin-top: var(--spacing-extra-extra-large); } 847 | .mt7-l { margin-top: var(--spacing-extra-extra-extra-large); } 848 | 849 | .mv0-l { 850 | margin-top: var(--spacing-none); 851 | margin-bottom: var(--spacing-none); 852 | } 853 | .mv1-l { 854 | margin-top: var(--spacing-extra-small); 855 | margin-bottom: var(--spacing-extra-small); 856 | } 857 | .mv2-l { 858 | margin-top: var(--spacing-small); 859 | margin-bottom: var(--spacing-small); 860 | } 861 | .mv3-l { 862 | margin-top: var(--spacing-medium); 863 | margin-bottom: var(--spacing-medium); 864 | } 865 | .mv4-l { 866 | margin-top: var(--spacing-large); 867 | margin-bottom: var(--spacing-large); 868 | } 869 | .mv5-l { 870 | margin-top: var(--spacing-extra-large); 871 | margin-bottom: var(--spacing-extra-large); 872 | } 873 | .mv6-l { 874 | margin-top: var(--spacing-extra-extra-large); 875 | margin-bottom: var(--spacing-extra-extra-large); 876 | } 877 | .mv7-l { 878 | margin-top: var(--spacing-extra-extra-extra-large); 879 | margin-bottom: var(--spacing-extra-extra-extra-large); 880 | } 881 | 882 | .mh0-l { 883 | margin-left: var(--spacing-none); 884 | margin-right: var(--spacing-none); 885 | } 886 | .mh1-l { 887 | margin-left: var(--spacing-extra-small); 888 | margin-right: var(--spacing-extra-small); 889 | } 890 | .mh2-l { 891 | margin-left: var(--spacing-small); 892 | margin-right: var(--spacing-small); 893 | } 894 | .mh3-l { 895 | margin-left: var(--spacing-medium); 896 | margin-right: var(--spacing-medium); 897 | } 898 | .mh4-l { 899 | margin-left: var(--spacing-large); 900 | margin-right: var(--spacing-large); 901 | } 902 | .mh5-l { 903 | margin-left: var(--spacing-extra-large); 904 | margin-right: var(--spacing-extra-large); 905 | } 906 | .mh6-l { 907 | margin-left: var(--spacing-extra-extra-large); 908 | margin-right: var(--spacing-extra-extra-large); 909 | } 910 | .mh7-l { 911 | margin-left: var(--spacing-extra-extra-extra-large); 912 | margin-right: var(--spacing-extra-extra-extra-large); 913 | } 914 | 915 | .mhn1-l { margin-left: -var(--spacing-extra-small); margin-right: -var(--spacing-extra-small); } 916 | .mhn2-l { margin-left: -var(--spacing-small); margin-right: -var(--spacing-small); } 917 | .mhn3-l { margin-left: -var(--spacing-medium); margin-right: -var(--spacing-medium); } 918 | } 919 | -------------------------------------------------------------------------------- /src/css/imports/_states.css: -------------------------------------------------------------------------------- 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.css: -------------------------------------------------------------------------------- 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.css: -------------------------------------------------------------------------------- 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.css: -------------------------------------------------------------------------------- 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.css: -------------------------------------------------------------------------------- 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.css: -------------------------------------------------------------------------------- 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.css: -------------------------------------------------------------------------------- 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.css: -------------------------------------------------------------------------------- 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.css: -------------------------------------------------------------------------------- 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.css: -------------------------------------------------------------------------------- 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.css: -------------------------------------------------------------------------------- 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.css: -------------------------------------------------------------------------------- 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.css: -------------------------------------------------------------------------------- 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.css: -------------------------------------------------------------------------------- 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.css: -------------------------------------------------------------------------------- 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.css: -------------------------------------------------------------------------------- 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.css: -------------------------------------------------------------------------------- 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.css: -------------------------------------------------------------------------------- 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 | 28 | /* Modules */ 29 | @import './imports/_box-sizing'; 30 | @import './imports/_images'; 31 | @import './imports/_background-size'; 32 | @import './imports/_background-position'; 33 | @import './imports/_outlines'; 34 | @import './imports/_borders'; 35 | @import './imports/_border-radius'; 36 | @import './imports/_border-style'; 37 | @import './imports/_border-widths'; 38 | @import './imports/_border-colors'; 39 | @import './imports/_code'; 40 | @import './imports/_coordinates'; 41 | @import './imports/_clears'; 42 | @import './imports/_display'; 43 | @import './imports/_flexbox'; 44 | @import './imports/_floats'; 45 | @import './imports/_font-style'; 46 | @import './imports/_font-weight'; 47 | @import './imports/_forms'; 48 | @import './imports/_heights'; 49 | @import './imports/_line-height'; 50 | @import './imports/_links'; 51 | @import './imports/_lists'; 52 | @import './imports/_max-widths'; 53 | @import './imports/_widths'; 54 | @import './imports/_overflow'; 55 | @import './imports/_position'; 56 | @import './imports/_opacity'; 57 | @import './imports/_spacing'; 58 | @import './imports/_text-decoration'; 59 | @import './imports/_text-align'; 60 | @import './imports/_text-transform'; 61 | @import './imports/_type-scale'; 62 | @import './imports/_typography'; 63 | @import './imports/_utilities'; 64 | @import './imports/_visibility'; 65 | @import './imports/_white-space'; 66 | @import './imports/_vertical-align'; 67 | @import './imports/_states'; 68 | @import './imports/_z-index'; 69 | @import './imports/_styles'; 70 | @import './imports/_buttons'; 71 | @import './imports/_svg'; 72 | @import './imports/_cms'; 73 | 74 | /* Variables */ 75 | /* Importing here will allow you to override any variables in the modules */ 76 | @import './imports/_colors'; 77 | @import './imports/_media-queries'; 78 | @import './imports/_variables'; 79 | 80 | /* Debugging */ 81 | @import './imports/_debug-children'; 82 | @import './imports/_debug-grid'; 83 | 84 | /* Uncomment out the line below to help debug layout issues */ 85 | /*@import './imports/_debug';*/ 86 | 87 | @import './imports/_custom'; 88 | 89 | -------------------------------------------------------------------------------- /src/js/app.js: -------------------------------------------------------------------------------- 1 | // JS Goes here - ES6 supported 2 | -------------------------------------------------------------------------------- /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} = this.props; 7 | 8 | return
    9 |

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

    10 |
    11 |
    15 |

    { format(entry.getIn(["data", "date"]), "ddd, MMM D, YYYY") }

    16 |

    Read in x minutes

    17 |
    18 |
    19 | { widgetFor("body") } 20 |
    21 |
    ; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/js/cms-preview-templates/products.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, getAsset, widgetFor} = this.props; 7 | let image = getAsset(entry.getIn(["data", "image"])); 8 | 9 | // Bit of a nasty hack to make relative paths work as expected as a background image here 10 | if (image && !image.fileObj) { 11 | image = window.parent.location.protocol + "//" + window.parent.location.host + image; 12 | } 13 | 14 | return
    15 |
    18 |
    19 |
    20 |
    21 |

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

    24 |
    25 |
    26 |
    27 |
    28 |
    29 |
    30 | 31 |
    32 |
    33 |

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

    34 |

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

    35 | 36 |
    37 | {(entry.getIn(["data","intro", "blurbs"]) || []).map((blurb, index) =>
    38 | 39 |

    {blurb.get("text")}

    40 |
    )} 41 |
    42 |
    43 |
    44 | 45 |
    46 |
    47 |

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

    48 |

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

    49 |
    50 |
    51 | 52 |
    53 | 54 |
    55 |
    56 | 57 |
    58 | 59 |
    60 | 61 |
    62 | 63 |
    64 | 65 |
    66 |
    67 |
    68 | 69 |
    70 | {(entry.getIn(['data', 'testimonials']) || []).map((testimonial, index) =>
    71 |
    72 |

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

    73 | {testimonial.get('author')} 74 |
    75 |
    )} 76 |
    77 | 78 | 79 | 80 |
    81 |
    82 | 83 |

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

    84 |

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

    85 | 86 |
    87 | {(entry.getIn(['data', 'pricing', 'plans']) || []).map((plan, index) =>
    88 |
    89 | 90 |

    {plan.get('plan')}

    91 | 92 |

    93 | ${plan.get('price')} 94 |

    95 | 96 | -

    {plan.get('description')}

    97 | 98 |
      99 | {(plan.get('items') || []).map((item, index) =>
    • 100 |

      {item}

      101 |
      • )} 102 |
    103 | 104 |
    105 | 106 |
    )} 107 |
    108 |
    109 |
    110 |
    ; 111 | } 112 | } 113 | -------------------------------------------------------------------------------- /src/js/cms.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import CMS from "netlify-cms"; 3 | 4 | import PostPreview from "./cms-preview-templates/post"; 5 | import ProductsPreview from "./cms-preview-templates/products"; 6 | 7 | 8 | // Example of creating a custom color widget 9 | class ColorControl extends React.Component { 10 | render() { 11 | return this.props.onChange(e.target.value)} 16 | />; 17 | } 18 | } 19 | 20 | CMS.registerPreviewStyle("/css/main.css"); 21 | CMS.registerPreviewTemplate("post", PostPreview); 22 | CMS.registerPreviewTemplate("products", ProductsPreview); 23 | CMS.registerWidget("color", ColorControl); 24 | -------------------------------------------------------------------------------- /webpack.conf.js: -------------------------------------------------------------------------------- 1 | import webpack from "webpack"; 2 | import path from "path"; 3 | 4 | export default { 5 | module: { 6 | loaders: [ 7 | { 8 | test: /\.((png)|(eot)|(woff)|(woff2)|(ttf)|(svg)|(gif))(\?v=\d+\.\d+\.\d+)?$/, 9 | loader: "file-loader?name=/[hash].[ext]" 10 | }, 11 | { 12 | loader: "babel-loader", 13 | test: /\.js?$/, 14 | exclude: /node_modules/, 15 | query: {cacheDirectory: true} 16 | } 17 | ] 18 | }, 19 | 20 | plugins: [ 21 | new webpack.ProvidePlugin({ 22 | "fetch": "imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch" 23 | }) 24 | ], 25 | 26 | context: path.join(__dirname, "src"), 27 | entry: { 28 | app: ["./js/app"], 29 | cms: ["./js/cms"] 30 | }, 31 | output: { 32 | path: path.join(__dirname, "dist"), 33 | publicPath: "/", 34 | filename: "[name].js" 35 | }, 36 | externals: [/^vendor\/.+\.js$/] 37 | }; 38 | --------------------------------------------------------------------------------