Removes old links and refs in readme to sites not using tachyons

Revert "V5 final final"

.npmrc

@@ -0,0 +1 @@
+package-lock=false

README.md

@@ -0,0 +1,118 @@
+# TACHYONS
+
+Functional CSS for humans.
+
+Quickly build and design new UI without writing CSS.
+
+## Principles
+
+* Everything should be 100% responsive
+* Everything should be readable on any device
+* Everything should be as fast as possible
+* Designing in the browser should be easy
+* It should be easy to change any interface or part of an interface without breaking any existing interfaces
+* Doing one thing extremely well promotes reusability and reduces repetition
+* Documentation helps promote reusability and shared knowledge
+* CSS shouldn't impede accessibility or the default functionality of HTML
+* You should send the smallest possible amount of code to the user
+
+## Features
+
+* Mobile-first CSS architecture
+* 490 accessible color combinations
+* 8px baseline grid
+* Multiple debugging utilities to reduce layout struggles
+* Single-purpose class structure
+* Optimized for maximum gzip compression
+* Lightweight (~14kB)
+* Usable across projects
+* Growing open source component library
+* Works well with plain HTML, React, Ember, Angular, Rails and more
+* Infinitely nestable responsive grid system
+* Built with PostCSS
+
+## Getting Started
+
+Docs can be found at http://tachyons.io/docs
+The modules are generally pretty small and thus quick and easy to read.
+
+### Use the CDN
+
+The quickest and easiest way to start using Tachyons is to include a reference
+to the minified file in the head of your HTML file.
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/tachyons@4/css/tachyons.min.css">
+```
+
+### Local Setup
+
+Clone the repo from Github and install dependencies through npm.
+
+```
+git clone https://github.com/tachyons-css/tachyons.git
+cd tachyons
+npm install
+```
+
+#### Dev
+
+If you want to just use everything in tachyons/src as a jumping off point and
+edit all the code yourself, you can compile all of your wonderful changes by
+running:
+
+```npm start```
+
+This will output both minified and unminified versions of the CSS to the CSS directory and watch the src directory for changes.
+It's aliased to the command:
+
+```npm run build:watch```
+
+If you'd like to just build the CSS once without watching the src directory, run:
+
+```npm run build```
+
+If you want to check that a class hasn't been redefined or 'mutated,' there is a linter to check that all of the classes have only been defined once. This can be useful if you are using another library or have written some of your own CSS and want to make sure there are no naming collisions. To do this run the command:
+
+```npm run mutations```
+
+## Docs
+
+The tachyons docs located at http://tachyons.io are all open source and located at https://github.com/tachyons-css/tachyons-css.github.io
+
+You can clone the docs and use them as a template for documenting your own design system / patterns / components.
+While not everything is automated, the component library generation makes it extremely easy to
+generate and organize the documentation for components as demonstrated at http://tachyons.io/components
+
+### Community Resources
+
+- [DWYL Learn Tachyons](https://github.com/dwyl/learn-tachyons): Learn how to use Tachyons to craft beautiful, responsive, functional and fast UI with minimal CSS
+- [Tachyons TLDR](https://tachyons-tldr.now.sh/#/classes): Quick lookup for Tachyons classes, scales and color palette
+- [Tachyons Pro](https://tachyonspro.netlify.app/): Fun quiz for memorizing class names
+
+## Contributing
+
+Please read our [code of conduct](https://github.com/tachyons-css/tachyons/blob/master/code-of-conduct.md) for contributors.
+
+## Tachyons in Production
+
+A longer list of sites that use tachyons in production can be found in sites.md
+We love letting the community see what people are building. Please add your link to sites.md in a PR or by opening an issue if you're willing to share to your site or project.
+
+**Featured Sites**
+
+* https://npmjs.com
+* http://www.philipyoungg.com
+* https://gitpoint.co
+* https://purple3.herokuapp.com
+* http://blunt.af/tachy.app/
+* https://fenderdigital.github.io/css-utilities/intro/
+* https://play.cash
+* https://bitmidi.com
+
+And of course...
+* http://tachyons.io
+
+## Help
+
+If you have a question or need help feel free to [open an issue here](https://github.com/tachyons-css/tachyons/issues/new) or jump into the [Tachyons slack channel](http://tachyons-slack-invite.herokuapp.com).

bower.json

@@ -1,24 +0,0 @@
-{
-  "name": "tachyons",
-  "description": "Functional CSS for humans",
-  "main": "css/tachyons.css",
-  "authors": [
-    "mrmrs"
-  ],
-  "license": "MIT",
-  "keywords": [
-    "css",
-    "design",
-    "system",
-    "responsive",
-    "design"
-  ],
-  "homepage": "http://tachyons.io",
-  "ignore": [
-    "**/.*",
-    "node_modules",
-    "bower_components",
-    "test",
-    "tests"
-  ]
-}

license

@@ -1,5 +1,7 @@
 The MIT License (MIT)
 
+Copyright © 2020 Adam Morse & John Otander 
+
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 
 The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

llms.txt

@@ -0,0 +1,321 @@
+# Tachyons CSS
+
+> Functional CSS for humans. Quickly build and design new UI without writing CSS.
+
+Tachyons is a functional/atomic CSS framework that provides single-purpose utility classes. Instead of writing custom CSS, you compose classes directly in HTML to style elements. The framework is mobile-first, lightweight (~14kB), and optimized for maximum gzip compression.
+
+## Project Structure
+
+```
+/css/                 # Compiled CSS output
+  tachyons.css        # Full compiled CSS
+  tachyons.min.css    # Minified production CSS
+
+/src/                 # Source CSS modules (PostCSS)
+  tachyons.css        # Main entry point that imports all modules
+  _*.css              # Individual module files (prefixed with underscore)
+```
+
+## Core Principles
+
+- Everything should be 100% responsive
+- Single-purpose class structure (one class = one CSS property)
+- Mobile-first CSS architecture
+- 8px baseline grid for spacing
+- Designing in the browser should be easy
+- Changes to one interface shouldn't break others
+
+## Naming Conventions
+
+Tachyons uses abbreviated class names following consistent patterns:
+
+### Base + Modifier Pattern
+Classes follow the pattern: `{property}{value}` or `{property}{direction}{value}`
+
+Examples:
+- `pa3` = padding-all: 1rem
+- `mt2` = margin-top: 0.5rem  
+- `f4` = font-size: 1.25rem
+- `w-50` = width: 50%
+
+### Responsive Suffixes
+All classes support responsive variants via breakpoint suffixes:
+
+| Suffix | Breakpoint | Description |
+|--------|------------|-------------|
+| (none) | All | Mobile-first base styles |
+| `-ns`  | ≥30em (480px) | Not small (medium and up) |
+| `-m`   | 30em–60em | Medium only |
+| `-l`   | ≥60em (960px) | Large and up |
+
+Example: `dn db-ns` = display:none on mobile, display:block on medium+
+
+## Spacing Scale
+
+Uses powers of two scale (8px baseline):
+
+| Step | Value | CSS Variable |
+|------|-------|--------------|
+| 0 | 0 | --spacing-none |
+| 1 | 0.25rem (4px) | --spacing-extra-small |
+| 2 | 0.5rem (8px) | --spacing-small |
+| 3 | 1rem (16px) | --spacing-medium |
+| 4 | 2rem (32px) | --spacing-large |
+| 5 | 4rem (64px) | --spacing-extra-large |
+| 6 | 8rem (128px) | --spacing-extra-extra-large |
+| 7 | 16rem (256px) | --spacing-extra-extra-extra-large |
+
+### Spacing Classes
+- **Padding**: `pa`, `pl`, `pr`, `pt`, `pb`, `pv` (vertical), `ph` (horizontal)
+- **Margin**: `ma`, `ml`, `mr`, `mt`, `mb`, `mv` (vertical), `mh` (horizontal)
+
+Examples: `pa3`, `mt4`, `ph2-ns`, `mb0-l`
+
+## Type Scale
+
+| Class | Size |
+|-------|------|
+| `.f-headline`, `.f-6` | 6rem |
+| `.f-subheadline`, `.f-5` | 5rem |
+| `.f1` | 3rem |
+| `.f2` | 2.25rem |
+| `.f3` | 1.5rem |
+| `.f4` | 1.25rem |
+| `.f5` | 1rem |
+| `.f6` | 0.875rem |
+| `.f7` | 0.75rem (use sparingly) |
+
+## Width Scale
+
+### Fixed Widths (powers of 2)
+| Class | Width |
+|-------|-------|
+| `.w1` | 1rem |
+| `.w2` | 2rem |
+| `.w3` | 4rem |
+| `.w4` | 8rem |
+| `.w5` | 16rem |
+
+### Percentage Widths
+`.w-10`, `.w-20`, `.w-25`, `.w-30`, `.w-33`, `.w-34`, `.w-40`, `.w-50`, `.w-60`, `.w-70`, `.w-75`, `.w-80`, `.w-90`, `.w-100`
+
+Also: `.w-third`, `.w-two-thirds`, `.w-auto`
+
+## Color System
+
+### Grayscale
+`black`, `near-black`, `dark-gray`, `mid-gray`, `gray`, `silver`, `light-silver`, `moon-gray`, `light-gray`, `near-white`, `white`
+
+### Transparency
+- Black: `black-90` through `black-05` (90% to 5% opacity)
+- White: `white-90` through `white-10`
+
+### Colors
+`dark-red`, `red`, `light-red`, `orange`, `gold`, `yellow`, `light-yellow`, `purple`, `light-purple`, `dark-pink`, `hot-pink`, `pink`, `light-pink`, `dark-green`, `green`, `light-green`, `navy`, `dark-blue`, `blue`, `light-blue`, `lightest-blue`, `washed-blue`, `washed-green`, `washed-yellow`, `washed-red`
+
+### Color Classes
+- **Text color**: Use color name directly (e.g., `blue`, `dark-gray`)
+- **Background**: Prefix with `bg-` (e.g., `bg-blue`, `bg-dark-gray`)
+- **Border**: Prefix with `b--` (e.g., `b--blue`, `b--dark-gray`)
+
+## Common Class Categories
+
+### Display
+`dn` (none), `di` (inline), `db` (block), `dib` (inline-block), `dt` (table), `dtc` (table-cell), `flex`, `inline-flex`
+
+### Flexbox
+- Container: `flex`, `inline-flex`, `flex-column`, `flex-row`, `flex-wrap`
+- Alignment: `items-center`, `items-start`, `items-end`, `items-baseline`, `items-stretch`
+- Justify: `justify-center`, `justify-start`, `justify-end`, `justify-between`, `justify-around`
+- Self: `self-center`, `self-start`, `self-end`
+- Flex: `flex-auto`, `flex-none`, `flex-grow-0`, `flex-grow-1`, `flex-shrink-0`, `flex-shrink-1`
+- Order: `order-0` through `order-8`, `order-last`
+
+### Position
+`static`, `relative`, `absolute`, `fixed`, `sticky`
+
+### Coordinates
+`top-0`, `right-0`, `bottom-0`, `left-0`, `top-1`, `top-2`, etc.
+
+### Border Radius
+`br0`, `br1`, `br2`, `br3`, `br4`, `br-100` (circle), `br-pill` (rounded pill)
+Directional: `br--top`, `br--bottom`, `br--left`, `br--right`
+
+### Borders
+- Width: `bw0`, `bw1`, `bw2`, `bw3`, `bw4`, `bw5`
+- Style: `b--solid`, `b--dashed`, `b--dotted`, `b--none`
+- Sides: `ba` (all), `bt` (top), `br` (right), `bb` (bottom), `bl` (left), `bn` (none)
+
+### Typography
+- Weight: `fw1` (100) through `fw9` (900), `normal`, `b` (bold)
+- Style: `i` (italic), `fs-normal`
+- Alignment: `tl` (left), `tr` (right), `tc` (center), `tj` (justify)
+- Transform: `ttc` (capitalize), `ttl` (lowercase), `ttu` (uppercase), `ttn` (none)
+- Decoration: `no-underline`, `underline`, `strike`
+- Line height: `lh-solid` (1), `lh-title` (1.25), `lh-copy` (1.5)
+- Letter spacing: `tracked`, `tracked-tight`, `tracked-mega`
+
+### Visibility
+`o-0` through `o-100` (opacity), `v-hidden`, `v-visible`, `clip` (visually hidden)
+
+### Overflow
+`overflow-visible`, `overflow-hidden`, `overflow-scroll`, `overflow-auto`
+X/Y: `overflow-x-visible`, `overflow-y-hidden`, etc.
+
+### Heights
+Fixed: `h1`, `h2`, `h3`, `h4`, `h5` (1rem to 16rem)
+Percentage: `h-25`, `h-50`, `h-75`, `h-100`
+Viewport: `vh-25`, `vh-50`, `vh-75`, `vh-100`, `min-vh-100`
+
+### Max Width
+`mw1` through `mw9`, `mw-100`, `mw-none`
+
+### Z-Index
+`z-0`, `z-1`, `z-2`, `z-3`, `z-4`, `z-5`, `z-999`, `z-9999`, `z-max`, `z-inherit`, `z-initial`, `z-unset`
+
+### Floats & Clears
+`fl` (left), `fr` (right), `fn` (none), `cf` (clearfix)
+
+### Lists
+`list` (removes default styling)
+
+### Box Sizing
+`border-box` (applied globally via `*`)
+
+### Hovers
+Prefix with `hover-` for hover states: `hover-bg-blue`, `hover-black`, etc.
+
+## Usage Examples
+
+### Card Component
+```html
+<article class="mw5 center bg-white br3 pa3 pa4-ns mv3 ba b--black-10">
+  <div class="tc">
+    <img src="avatar.jpg" class="br-100 h4 w4 dib ba b--black-05 pa2">
+    <h1 class="f3 mb2">Jane Doe</h1>
+    <h2 class="f5 fw4 gray mt0">Designer</h2>
+  </div>
+</article>
+```
+
+### Responsive Navigation
+```html
+<nav class="flex flex-column flex-row-ns justify-between items-center pa3">
+  <a class="f4 fw6 link black">Logo</a>
+  <div class="flex flex-column flex-row-ns">
+    <a class="link black pa2">About</a>
+    <a class="link black pa2">Work</a>
+    <a class="link black pa2">Contact</a>
+  </div>
+</nav>
+```
+
+### Button
+```html
+<a class="f6 link dim br-pill ph3 pv2 mb2 dib white bg-dark-blue">
+  Click Me
+</a>
+```
+
+### Responsive Grid
+```html
+<div class="cf">
+  <div class="fl w-100 w-50-m w-25-l pa2">Column 1</div>
+  <div class="fl w-100 w-50-m w-25-l pa2">Column 2</div>
+  <div class="fl w-100 w-50-m w-25-l pa2">Column 3</div>
+  <div class="fl w-100 w-50-m w-25-l pa2">Column 4</div>
+</div>
+```
+
+### Flexbox Grid
+```html
+<div class="flex flex-wrap">
+  <div class="w-100 w-50-m w-25-l pa2">Column 1</div>
+  <div class="w-100 w-50-m w-25-l pa2">Column 2</div>
+  <div class="w-100 w-50-m w-25-l pa2">Column 3</div>
+  <div class="w-100 w-50-m w-25-l pa2">Column 4</div>
+</div>
+```
+
+## Build Commands
+
+```bash
+npm install           # Install dependencies
+npm start             # Build and watch for changes
+npm run build         # Build CSS once
+npm run mutations     # Check for class mutations/redefinitions
+```
+
+## CDN Usage
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/tachyons@4/css/tachyons.min.css">
+```
+
+## Source Modules
+
+The source is organized into focused single-responsibility modules:
+
+| Module | Description |
+|--------|-------------|
+| `_normalize.css` | CSS reset/normalization |
+| `_box-sizing.css` | Border-box sizing |
+| `_spacing.css` | Margin and padding |
+| `_type-scale.css` | Font sizes |
+| `_typography.css` | Font families, measures |
+| `_widths.css` | Width utilities |
+| `_heights.css` | Height utilities |
+| `_max-widths.css` | Max-width utilities |
+| `_display.css` | Display properties |
+| `_flexbox.css` | Flexbox utilities |
+| `_position.css` | Position utilities |
+| `_coordinates.css` | Top/right/bottom/left |
+| `_floats.css` | Float utilities |
+| `_colors.css` | CSS color variables |
+| `_skins.css` | Text and background colors |
+| `_border-colors.css` | Border colors |
+| `_borders.css` | Border utilities |
+| `_border-radius.css` | Border radius |
+| `_border-widths.css` | Border widths |
+| `_border-style.css` | Border styles |
+| `_box-shadow.css` | Box shadows |
+| `_opacity.css` | Opacity utilities |
+| `_overflow.css` | Overflow utilities |
+| `_visibility.css` | Visibility utilities |
+| `_z-index.css` | Z-index scale |
+| `_hovers.css` | Hover state utilities |
+| `_font-family.css` | Font stacks |
+| `_font-weight.css` | Font weights |
+| `_font-style.css` | Italic/normal |
+| `_line-height.css` | Line heights |
+| `_letter-spacing.css` | Letter spacing |
+| `_text-align.css` | Text alignment |
+| `_text-transform.css` | Text transforms |
+| `_text-decoration.css` | Underlines, etc. |
+| `_vertical-align.css` | Vertical alignment |
+| `_white-space.css` | White space handling |
+| `_word-break.css` | Word breaking |
+| `_aspect-ratios.css` | Aspect ratio containers |
+| `_images.css` | Image utilities |
+| `_background-size.css` | Background sizing |
+| `_background-position.css` | Background positioning |
+| `_lists.css` | List styling |
+| `_tables.css` | Table utilities |
+| `_forms.css` | Form element resets |
+| `_utilities.css` | Misc utilities |
+| `_negative-margins.css` | Negative margin utilities |
+| `_debug.css` | Layout debugging |
+| `_debug-children.css` | Debug children outlines |
+| `_debug-grid.css` | Grid overlay debugging |
+| `_media-queries.css` | Breakpoint definitions |
+
+## Key CSS Variables
+
+Spacing, colors, and breakpoints are defined as CSS custom properties in their respective modules. Override these in your own CSS to customize the design system.
+
+## Documentation
+
+Full documentation: http://tachyons.io/docs
+Component library: http://tachyons.io/components
+GitHub: https://github.com/tachyons-css/tachyons
+

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tachyons",
-  "version": "4.7.2",
+  "version": "4.12.0",
   "description": "Functional CSS for humans",
   "author": "mrmrs",
   "style": "css/tachyons.min.css",
@@ -23,10 +23,10 @@
   "devDependencies": {
     "copy-files": "^0.1.0",
     "immutable-css-cli": "^1.1.1",
-    "normalize.css": "^6.0.0",
-    "tachyons-modules": "^1.1.8",
-    "tachyons-cli": "^1.0.10",
-    "watch": "^1.0.1"
+    "normalize.css": "^8.0.0",
+    "tachyons-modules": "^1.1.10",
+    "tachyons-cli": "^1.3.2",
+    "watch": "^1.0.2"
   },
   "contributors": [
     {
@@ -43,7 +43,7 @@
     "mutations": "immutable-css src/tachyons.css --strict",
     "build": "npm run build:css && npm run build:minify",
     "build:css": "tachyons src/tachyons.css > css/tachyons.css",
-    "build:minify": "tachyons src/tachyons.css -m > css/tachyons.min.css",
+    "build:minify": "tachyons src/tachyons.css --minify > css/tachyons.min.css",
     "build:watch": "watch \"npm run build\" ./src/"
   }
 }

readme.md

@@ -1,175 +0,0 @@
-# TACHYONS
-
-Functional css for humans.
-
-Quickly build and design new UI without writing css.
-
-## Principles
-
-* Everything should be 100% responsive
-* Everything should be readable on any device
-* Everything should be as fast as possible
-* Designing in the browser should be easy
-* It should be easy to change any interface or part of an interface without breaking any existing interfaces
-* Doing one thing extremely well promotes reusability and reduces repetition
-* Documentation helps promote reusability and shared knowledge
-* Css shouldn't impede accessibility or the default functionality of Html
-* You should send the smallest possible amount of code to the user
-
-## Features
-
-* Mobile-first css architecture
-* 490 accessible color combinations
-* 8px baseline grid
-* Multiple debugging utilities to reduce layout struggles
-* Single-purpose class structure
-* Optimized for maximum gzip compression
-* Lightweight (~14kB)
-* Usable across projects
-* Growing open source component library
-* Works well with plain html, react, ember, angular, rails, and more
-* Infinitely nestable responsive grid system
-* Built with Postcss
-
-## Getting started
-
-Docs can be found at http://tachyons.io/docs
-The modules are generally pretty small and thus quick and easy to read.
-
-### Use the CDN
-
-The quickest and easiest way to start using tachyons is to include a reference
-to the minified file in the head of your html file.
-
-You can always grab the latest version with
-```html
-<link rel="stylesheet" href="https://unpkg.com/tachyons/css/tachyons.min.css">
-```
-You can also specify a specific version. The latest version is 4.6.1
-```html
-<link rel="stylesheet" href="https://unpkg.com/tachyons@4.6.1/css/tachyons.min.css">
-```
-
-### Local Setup
-
-Clone the repo from github and install dependencies through npm.
-
-```
-git clone https://github.com/tachyons-css/tachyons.git
-cd tachyons
-npm install
-```
-
-#### Dev
-
-If you want to just use everything in tachyons/src as a jumping off point and
-edit all the code yourself, you can compile all of your wonderful changes by
-running
-
-```npm start```
-
-This will output both minified and unminified versions of the css to the css directory and watch the src directory for changes.
-It's aliased to the command:
-
-```npm run build:watch```
-
-If you'd like to just build the css once without watching the src directory run
-
-```npm run build```
-
-If you want to check that a class hasn't been redefined or 'mutated' there is a linter to check that all of the classes have only been defined once. This can be useful if you are using another library or have written some of your own css and want to make sure there are no naming collisions. To do this run the command
-
-```npm run mutations```
-
-## Docs
-The tachyons docs located at http://tachyons.io are all open source and located at https://github.com/tachyons-css/tachyons-css.github.io
-
-You can clone the docs and use them as a template for documenting your own design system / patterns / components.
-While not everything is automated, the component library generation makes it extremely easy to 
-generate and organize the documentation for components as demonstrated at http://tachyons.io/components
-
-
-## Contributing
-
-Please read our [code of conduct](https://github.com/tachyons-css/tachyons/blob/master/code-of-conduct.md) for contributors.
-
-## Websites that Use Tachyons
-(if you have a project that uses Tachyons feel free to make a PR to add it to this list)
-
-* https://nicenice.co
-* https://coralproject.net
-* https://goldenstaterecord.com
-* http://www.sogol.co
-* https://segment.com
-* http://hicuties.com
-* https://urlbox.io
-* https://community.algolia.com/wordpress/
-* http://studiocraft.cc
-* http://samueldregan.com
-* https://filmstrip.cf
-* https://voteplz.com
-* http://bluebottlecoffee.com
-* http://cyclelove.cc
-* http://topher.design
-* http://iheanyi.com/
-* http://johnotander.com
-* https://vimgifs.com
-* http://jon.gold/txt
-* http://rene.jon.gold
-* https://tinychime.github.io/jekyons/
-* http://prnt.cc
-* http://spenhar.com
-* http://randoma11y.com
-* http://www.csspurge.com
-* http://clrs.cc
-* https://cljsjs.github.io
-* https://www.getnoodl.es
-* https://natwelch.com
-* http://pesticide.io
-* http://zachhurd.com
-* http://gfffs.com
-* https://wordpress.org/themes/vanilla-milkshake/
-* http://comics.hongkonggong.com/
-* https://accessmyinfo.hk/#/
-* https://accessmyinfo.org/#/
-* http://rene.jon.gold
-* http://randoma11y.com
-* http://designbytyping.com
-* http://colepeters.com
-* https://atmin.github.io/funponent/
-* http://blog.colepeters.com
-* http://aboutlife.com
-* http://joinoneroom.com
-* http://filipaonunes.com
-* https://vakra.band
-* http://tylernford.com
-* https://adventuretron.org
-* https://uptimeumbrella.com
-* http://www.talbs.me
-* http://seanoshea.me
-* https://www.hiaida.com
-* http://maxogden.github.io/screencat/
-* http://numenta.com
-* https://windtoday.co
-* http://claudio.netlify.com
-* http://devday-ar.com
-* http://mrmrs.io/mnml
-* http://mrmrs.io/up
-* http://mrmrs.io/profile/
-* http://mrmrs.io/gradients
-* http://mrmrs.io/btns/
-* http://mrmrs.io/beats/
-* http://mrmrs.io/writing
-* http://mrmrs.cc
-* https://fontawesome.com
-
-And of course...
-* http://tachyons.io
-
-## Help
-
-If you have a question or need help feel free to open an issue here or jump into the [Tachyons slack channel](http://tachyons-slack-invite.herokuapp.com).
-
-## License
-
-MIT

sites.md

@@ -0,0 +1,111 @@
+* https://gohugo.io
+* https://npmjs.com
+* https://www.offen.dev
+* https://interfacelovers.com
+* https://friendstalkfrontend.com
+* http://www.philipyoungg.com
+* https://antonsten.com
+* https://enbytech.github.io
+* https://fontawesome.com
+* https://asay.io
+* https://detroitjs.com
+* https://purple3.herokuapp.com
+* https://watsonmulkey.github.io
+* http://vuenosair.es
+* http://www.codeblocq.com
+* http://blunt.af/tachy.app/
+* https://aframevr-userland.github.io/mainframe/
+* https://coralproject.net
+* https://goldenstaterecord.com
+* http://www.sogol.co
+* http://lastjapan.com
+* https://segment.com
+* http://hicuties.com
+* https://urlbox.io
+* https://loronarecords.com
+* https://community.algolia.com/wordpress/
+* http://studiocraft.cc
+* http://samueldregan.com
+* https://filmstrip.cf
+* https://voteplz.com
+* http://bluebottlecoffee.com
+* http://cyclelove.cc
+* http://topher.design
+* http://kerem.co
+* http://iheanyi.com/
+* http://johnotander.com
+* https://vimgifs.com
+* http://jon.gold/txt
+* http://rene.jon.gold
+* https://tinychime.github.io/jekyons/
+* http://prnt.cc
+* http://spenhar.com
+* http://randoma11y.com
+* http://www.csspurge.com
+* http://clrs.cc
+* https://cljsjs.github.io
+* https://www.getnoodl.es
+* https://natwelch.com
+* http://pesticide.io
+* http://zachhurd.com
+* http://gfffs.com
+* https://wordpress.org/themes/vanilla-milkshake/
+* http://comics.hongkonggong.com/
+* https://accessmyinfo.hk/#/
+* https://accessmyinfo.org/#/
+* http://rene.jon.gold
+* http://randoma11y.com
+* http://designbytyping.com
+* http://colepeters.com
+* https://atmin.github.io/funponent/
+* http://blog.colepeters.com
+* http://aboutlife.com
+* http://joinoneroom.com
+* http://filipaonunes.com
+* https://vakra.band
+* http://tylernford.com
+* https://adventuretron.org
+* https://uptimeumbrella.com
+* http://www.talbs.me
+* https://podviaznikov.com
+* http://seanoshea.me
+* https://www.hiaida.com
+* http://maxogden.github.io/screencat/
+* http://numenta.com
+* https://windtoday.co
+* https://crunchbangplusplus.org
+* http://claudio.netlify.com
+* http://devday-ar.com
+* https://zoneii.github.io
+* http://kow.fm
+* http://jonshort.me
+* https://nuxtjs.org
+* http://devgame.surge.sh
+* https://scottmathson.com
+* https://podviaznikov.com
+* https://hero-patterns.lowmess.com
+* https://colinwilson.uk
+* https://grodziski.com
+* https://hatchloyalty.com
+* http://www.spokesman.com/
+* https://enveloop.studio
+* http://tylerdeitz.com
+* https://www.dcdesignweek.org/
+* https://tribekampala.com
+* https://www.classaction.org
+* https://gaest.com
+* https://aravindh.net
+* https://www.starklabs.io/
+* https://pylon.design
+* https://lasttramfrom.com/
+* https://www.stepahead.de
+* https://cryptocurrencyjobs.co/
+* https://foundlo.st
+* https://jjude.com
+* http://www.spokesman.com
+* https://beta.observablehq.com/
+* https://www.medienblau.de
+* https://c.atet.in
+* https://tools.kaklabs.com
+* https://eppendocs.de
+* https://sparrowmobile.com/

src/_border-colors.css

@@ -84,3 +84,5 @@
 
 .b--transparent { border-color: var(--transparent); }
 .b--inherit { border-color: inherit; }
+.b--initial { border-color: initial; }
+.b--unset { border-color: unset; }

src/_border-radius.css

@@ -47,6 +47,9 @@
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
   }
+  .br-inherit { border-radius: inherit; }
+  .br-initial { border-radius: initial; }
+  .br-unset { border-radius: unset; }
 
 @media (--breakpoint-not-small) {
   .br0-ns {     border-radius: 0; }
@@ -72,6 +75,9 @@
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
   }
+  .br-inherit-ns { border-radius: inherit; }
+  .br-initial-ns { border-radius: initial; }
+  .br-unset-ns { border-radius: unset; }
 }
 
 @media (--breakpoint-medium) {
@@ -98,6 +104,9 @@
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
   }
+  .br-inherit-m { border-radius: inherit; }
+  .br-initial-m { border-radius: initial; }
+  .br-unset-m { border-radius: unset; }
 }
 
 @media (--breakpoint-large) {
@@ -124,4 +133,7 @@
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
   }
+  .br-inherit-l { border-radius: inherit; }
+  .br-initial-l { border-radius: initial; }
+  .br-unset-l { border-radius: unset; }
 }

src/_box-sizing.css

@@ -8,8 +8,10 @@ html,
 body,
 div,
 article,
+aside,
 section,
 main,
+nav,
 footer,
 header,
 form,
@@ -26,6 +28,9 @@ li,
 dl,
 dt,
 dd,
+blockquote,
+figcaption,
+figure,
 textarea,
 table, 
 td,

src/_debug-grid.css

@@ -10,17 +10,17 @@
 */
 
 .debug-grid {
-  background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTRDOTY4N0U2N0VFMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTRDOTY4N0Q2N0VFMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3NjY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3NzY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsBS+GMAAAAjSURBVHjaYvz//z8DLsD4gcGXiYEAGBIKGBne//fFpwAgwAB98AaF2pjlUQAAAABJRU5ErkJggg==) repeat top left;
+  background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFElEQVR4AWPAC97/9x0eCsAEPgwAVLshdpENIxcAAAAASUVORK5CYII=) repeat top left;
 }
 
 .debug-grid-16 {
-  background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODYyRjhERDU2N0YyMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODYyRjhERDQ2N0YyMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3QTY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3QjY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvCS01IAAABMSURBVHjaYmR4/5+BFPBfAMFm/MBgx8RAGWCn1AAmSg34Q6kBDKMGMDCwICeMIemF/5QawEipAWwUhwEjMDvbAWlWkvVBwu8vQIABAEwBCph8U6c0AAAAAElFTkSuQmCC) repeat top left;
+  background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMklEQVR4AWOgCLz/b0epAa6UGuBOqQHOQHLUgFEDnAbcBZ4UGwDOkiCnkIhdgNgNxAYAiYlD+8sEuo8AAAAASUVORK5CYII=) repeat top left;
 }
 
 .debug-grid-8-solid {
-  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;
+  background:white url(data:image/gif;base64,R0lGODdhCAAIAPEAAADw/wDx/////wAAACwAAAAACAAIAAACDZQvgaeb/lxbAIKA8y0AOw==) repeat top left;
 }
 
 .debug-grid-16-solid {
-  background:white url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzY3MkJEN0U2N0M1MTFFNkIyQkNFMjQwODEwMDIxNzEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzY3MkJEN0Y2N0M1MTFFNkIyQkNFMjQwODEwMDIxNzEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3QzY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3RDY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pve6J3kAAAAzSURBVHjaYvz//z8D0UDsMwMjSRoYP5Gq4SPNbRjVMEQ1fCRDg+in/6+J1AJUxsgAEGAA31BAJMS0GYEAAAAASUVORK5CYII=) repeat top left;
+  background:white url(data:image/gif;base64,R0lGODdhEAAQAPEAAADw/wDx/xXy/////ywAAAAAEAAQAAACIZyPKckYDQFsb6ZqD85jZ2+BkwiRFKehhqQCQgDHcgwEBQA7) repeat top left;
 }

src/_flexbox.css

@@ -25,9 +25,10 @@
 .flex-column  { flex-direction: column; }
 .flex-row     { flex-direction: row; }
 .flex-wrap    { flex-wrap: wrap; }
+.flex-nowrap    { flex-wrap: nowrap; }
+.flex-wrap-reverse    { flex-wrap: wrap-reverse; }
 .flex-column-reverse  { flex-direction: column-reverse; }
 .flex-row-reverse     { flex-direction: row-reverse; }
-.flex-wrap-reverse    { flex-wrap: wrap-reverse; }
 
 .items-start    { align-items: flex-start; }
 .items-end      { align-items: flex-end; }
@@ -65,6 +66,12 @@
 .order-8 { order: 8; }
 .order-last { order: 99999; }
 
+.flex-grow-0 { flex-grow: 0; }
+.flex-grow-1 { flex-grow: 1; }
+
+.flex-shrink-0 { flex-shrink: 0; }
+.flex-shrink-1 { flex-shrink: 1; }
+
 @media (--breakpoint-not-small) {
   .flex-ns { display: flex; }
   .inline-flex-ns { display: inline-flex; }
@@ -77,9 +84,10 @@
   .flex-column-ns { flex-direction: column; }
   .flex-row-ns { flex-direction: row; }
   .flex-wrap-ns { flex-wrap: wrap; }
+  .flex-nowrap-ns { flex-wrap: nowrap; }
+  .flex-wrap-reverse-ns { flex-wrap: wrap-reverse; }
   .flex-column-reverse-ns { flex-direction: column-reverse; }
   .flex-row-reverse-ns { flex-direction: row-reverse; }
-  .flex-wrap-reverse-ns { flex-wrap: wrap-reverse; }
   .items-start-ns { align-items: flex-start; }
   .items-end-ns { align-items: flex-end; }
   .items-center-ns { align-items: center; }
@@ -115,6 +123,12 @@
   .order-7-ns { order: 7; }
   .order-8-ns { order: 8; }
   .order-last-ns { order: 99999; }
+
+  .flex-grow-0-ns { flex-grow: 0; }
+  .flex-grow-1-ns { flex-grow: 1; }
+
+  .flex-shrink-0-ns { flex-shrink: 0; }
+  .flex-shrink-1-ns { flex-shrink: 1; }
 }
 @media (--breakpoint-medium) {
   .flex-m { display: flex; }
@@ -128,9 +142,10 @@
   .flex-column-m { flex-direction: column; }
   .flex-row-m     { flex-direction: row; }
   .flex-wrap-m { flex-wrap: wrap; }
+  .flex-nowrap-m { flex-wrap: nowrap; }
+  .flex-wrap-reverse-m { flex-wrap: wrap-reverse; }
   .flex-column-reverse-m { flex-direction: column-reverse; }
   .flex-row-reverse-m { flex-direction: row-reverse; }
-  .flex-wrap-reverse-m { flex-wrap: wrap-reverse; }
   .items-start-m { align-items: flex-start; }
   .items-end-m { align-items: flex-end; }
   .items-center-m { align-items: center; }
@@ -166,6 +181,12 @@
   .order-7-m { order: 7; }
   .order-8-m { order: 8; }
   .order-last-m { order: 99999; }
+
+  .flex-grow-0-m { flex-grow: 0; }
+  .flex-grow-1-m { flex-grow: 1; }
+
+  .flex-shrink-0-m { flex-shrink: 0; }
+  .flex-shrink-1-m { flex-shrink: 1; }
 }
 
 @media (--breakpoint-large) {
@@ -180,9 +201,10 @@
   .flex-column-l { flex-direction: column; }
   .flex-row-l { flex-direction: row; }
   .flex-wrap-l { flex-wrap: wrap; }
+  .flex-nowrap-l { flex-wrap: nowrap; }
+  .flex-wrap-reverse-l { flex-wrap: wrap-reverse; }
   .flex-column-reverse-l { flex-direction: column-reverse; }
   .flex-row-reverse-l { flex-direction: row-reverse; }
-  .flex-wrap-reverse-l { flex-wrap: wrap-reverse; }
 
   .items-start-l { align-items: flex-start; }
   .items-end-l { align-items: flex-end; }
@@ -219,4 +241,10 @@
   .order-7-l { order: 7; }
   .order-8-l { order: 8; }
   .order-last-l { order: 99999; }
+
+  .flex-grow-0-l { flex-grow: 0; }
+  .flex-grow-1-l { flex-grow: 1; }
+
+  .flex-shrink-0-l { flex-shrink: 0; }
+  .flex-shrink-1-l { flex-shrink: 1; }
 }

src/_hovers.css

@@ -133,6 +133,7 @@
 .shadow-hover::after {
   content: '';
   box-shadow: 0px 0px 16px 2px rgba( 0, 0, 0, .2 );
+  border-radius: inherit;
   opacity: 0;
   position: absolute;
   top: 0;

src/_negative-margins.css

@@ -28,172 +28,172 @@
 
 
 
-.na1 { margin: -var(--spacing-extra-small); }
-.na2 { margin: -var(--spacing-small); }
-.na3 { margin: -var(--spacing-medium); }
-.na4 { margin: -var(--spacing-large); }
-.na5 { margin: -var(--spacing-extra-large); }
-.na6 { margin: -var(--spacing-extra-extra-large); }
-.na7 { margin: -var(--spacing-extra-extra-extra-large); }
+.na1 { margin: calc(-1 * var(--spacing-extra-small)); }
+.na2 { margin: calc(-1 * var(--spacing-small)); }
+.na3 { margin: calc(-1 * var(--spacing-medium)); }
+.na4 { margin: calc(-1 * var(--spacing-large)); }
+.na5 { margin: calc(-1 * var(--spacing-extra-large)); }
+.na6 { margin: calc(-1 * var(--spacing-extra-extra-large)); }
+.na7 { margin: calc(-1 * var(--spacing-extra-extra-extra-large)); }
 
-.nl1 { margin-left: -var(--spacing-extra-small); }
-.nl2 { margin-left: -var(--spacing-small); }
-.nl3 { margin-left: -var(--spacing-medium); }
-.nl4 { margin-left: -var(--spacing-large); }
-.nl5 { margin-left: -var(--spacing-extra-large); }
-.nl6 { margin-left: -var(--spacing-extra-extra-large); }
-.nl7 { margin-left: -var(--spacing-extra-extra-extra-large); }
+.nl1 { margin-left: calc(-1 * var(--spacing-extra-small)); }
+.nl2 { margin-left: calc(-1 * var(--spacing-small)); }
+.nl3 { margin-left: calc(-1 * var(--spacing-medium)); }
+.nl4 { margin-left: calc(-1 * var(--spacing-large)); }
+.nl5 { margin-left: calc(-1 * var(--spacing-extra-large)); }
+.nl6 { margin-left: calc(-1 * var(--spacing-extra-extra-large)); }
+.nl7 { margin-left: calc(-1 * var(--spacing-extra-extra-extra-large)); }
 
-.nr1 { margin-right: -var(--spacing-extra-small); }
-.nr2 { margin-right: -var(--spacing-small); }
-.nr3 { margin-right: -var(--spacing-medium); }
-.nr4 { margin-right: -var(--spacing-large); }
-.nr5 { margin-right: -var(--spacing-extra-large); }
-.nr6 { margin-right: -var(--spacing-extra-extra-large); }
-.nr7 { margin-right: -var(--spacing-extra-extra-extra-large); }
+.nr1 { margin-right: calc(-1 * var(--spacing-extra-small)); }
+.nr2 { margin-right: calc(-1 * var(--spacing-small)); }
+.nr3 { margin-right: calc(-1 * var(--spacing-medium)); }
+.nr4 { margin-right: calc(-1 * var(--spacing-large)); }
+.nr5 { margin-right: calc(-1 * var(--spacing-extra-large)); }
+.nr6 { margin-right: calc(-1 * var(--spacing-extra-extra-large)); }
+.nr7 { margin-right: calc(-1 * var(--spacing-extra-extra-extra-large)); }
 
-.nb1 { margin-bottom: -var(--spacing-extra-small); }
-.nb2 { margin-bottom: -var(--spacing-small); }
-.nb3 { margin-bottom: -var(--spacing-medium); }
-.nb4 { margin-bottom: -var(--spacing-large); }
-.nb5 { margin-bottom: -var(--spacing-extra-large); }
-.nb6 { margin-bottom: -var(--spacing-extra-extra-large); }
-.nb7 { margin-bottom: -var(--spacing-extra-extra-extra-large); }
+.nb1 { margin-bottom: calc(-1 * var(--spacing-extra-small)); }
+.nb2 { margin-bottom: calc(-1 * var(--spacing-small)); }
+.nb3 { margin-bottom: calc(-1 * var(--spacing-medium)); }
+.nb4 { margin-bottom: calc(-1 * var(--spacing-large)); }
+.nb5 { margin-bottom: calc(-1 * var(--spacing-extra-large)); }
+.nb6 { margin-bottom: calc(-1 * var(--spacing-extra-extra-large)); }
+.nb7 { margin-bottom: calc(-1 * var(--spacing-extra-extra-extra-large)); }
 
-.nt1 { margin-top: -var(--spacing-extra-small); }
-.nt2 { margin-top: -var(--spacing-small); }
-.nt3 { margin-top: -var(--spacing-medium); }
-.nt4 { margin-top: -var(--spacing-large); }
-.nt5 { margin-top: -var(--spacing-extra-large); }
-.nt6 { margin-top: -var(--spacing-extra-extra-large); }
-.nt7 { margin-top: -var(--spacing-extra-extra-extra-large); }
+.nt1 { margin-top: calc(-1 * var(--spacing-extra-small)); }
+.nt2 { margin-top: calc(-1 * var(--spacing-small)); }
+.nt3 { margin-top: calc(-1 * var(--spacing-medium)); }
+.nt4 { margin-top: calc(-1 * var(--spacing-large)); }
+.nt5 { margin-top: calc(-1 * var(--spacing-extra-large)); }
+.nt6 { margin-top: calc(-1 * var(--spacing-extra-extra-large)); }
+.nt7 { margin-top: calc(-1 * var(--spacing-extra-extra-extra-large)); }
 
 @media (--breakpoint-not-small) {
 
-  .na1-ns { margin: -var(--spacing-extra-small); }
-  .na2-ns { margin: -var(--spacing-small); }
-  .na3-ns { margin: -var(--spacing-medium); }
-  .na4-ns { margin: -var(--spacing-large); }
-  .na5-ns { margin: -var(--spacing-extra-large); }
-  .na6-ns { margin: -var(--spacing-extra-extra-large); }
-  .na7-ns { margin: -var(--spacing-extra-extra-extra-large); }
+  .na1-ns { margin: calc(-1 * var(--spacing-extra-small)); }
+  .na2-ns { margin: calc(-1 * var(--spacing-small)); }
+  .na3-ns { margin: calc(-1 * var(--spacing-medium)); }
+  .na4-ns { margin: calc(-1 * var(--spacing-large)); }
+  .na5-ns { margin: calc(-1 * var(--spacing-extra-large)); }
+  .na6-ns { margin: calc(-1 * var(--spacing-extra-extra-large)); }
+  .na7-ns { margin: calc(-1 * var(--spacing-extra-extra-extra-large)); }
 
-  .nl1-ns { margin-left: -var(--spacing-extra-small); }
-  .nl2-ns { margin-left: -var(--spacing-small); }
-  .nl3-ns { margin-left: -var(--spacing-medium); }
-  .nl4-ns { margin-left: -var(--spacing-large); }
-  .nl5-ns { margin-left: -var(--spacing-extra-large); }
-  .nl6-ns { margin-left: -var(--spacing-extra-extra-large); }
-  .nl7-ns { margin-left: -var(--spacing-extra-extra-extra-large); }
+  .nl1-ns { margin-left: calc(-1 * var(--spacing-extra-small)); }
+  .nl2-ns { margin-left: calc(-1 * var(--spacing-small)); }
+  .nl3-ns { margin-left: calc(-1 * var(--spacing-medium)); }
+  .nl4-ns { margin-left: calc(-1 * var(--spacing-large)); }
+  .nl5-ns { margin-left: calc(-1 * var(--spacing-extra-large)); }
+  .nl6-ns { margin-left: calc(-1 * var(--spacing-extra-extra-large)); }
+  .nl7-ns { margin-left: calc(-1 * var(--spacing-extra-extra-extra-large)); }
 
-  .nr1-ns { margin-right: -var(--spacing-extra-small); }
-  .nr2-ns { margin-right: -var(--spacing-small); }
-  .nr3-ns { margin-right: -var(--spacing-medium); }
-  .nr4-ns { margin-right: -var(--spacing-large); }
-  .nr5-ns { margin-right: -var(--spacing-extra-large); }
-  .nr6-ns { margin-right: -var(--spacing-extra-extra-large); }
-  .nr7-ns { margin-right: -var(--spacing-extra-extra-extra-large); }
+  .nr1-ns { margin-right: calc(-1 * var(--spacing-extra-small)); }
+  .nr2-ns { margin-right: calc(-1 * var(--spacing-small)); }
+  .nr3-ns { margin-right: calc(-1 * var(--spacing-medium)); }
+  .nr4-ns { margin-right: calc(-1 * var(--spacing-large)); }
+  .nr5-ns { margin-right: calc(-1 * var(--spacing-extra-large)); }
+  .nr6-ns { margin-right: calc(-1 * var(--spacing-extra-extra-large)); }
+  .nr7-ns { margin-right: calc(-1 * var(--spacing-extra-extra-extra-large)); }
 
-  .nb1-ns { margin-bottom: -var(--spacing-extra-small); }
-  .nb2-ns { margin-bottom: -var(--spacing-small); }
-  .nb3-ns { margin-bottom: -var(--spacing-medium); }
-  .nb4-ns { margin-bottom: -var(--spacing-large); }
-  .nb5-ns { margin-bottom: -var(--spacing-extra-large); }
-  .nb6-ns { margin-bottom: -var(--spacing-extra-extra-large); }
-  .nb7-ns { margin-bottom: -var(--spacing-extra-extra-extra-large); }
+  .nb1-ns { margin-bottom: calc(-1 * var(--spacing-extra-small)); }
+  .nb2-ns { margin-bottom: calc(-1 * var(--spacing-small)); }
+  .nb3-ns { margin-bottom: calc(-1 * var(--spacing-medium)); }
+  .nb4-ns { margin-bottom: calc(-1 * var(--spacing-large)); }
+  .nb5-ns { margin-bottom: calc(-1 * var(--spacing-extra-large)); }
+  .nb6-ns { margin-bottom: calc(-1 * var(--spacing-extra-extra-large)); }
+  .nb7-ns { margin-bottom: calc(-1 * var(--spacing-extra-extra-extra-large)); }
 
-  .nt1-ns { margin-top: -var(--spacing-extra-small); }
-  .nt2-ns { margin-top: -var(--spacing-small); }
-  .nt3-ns { margin-top: -var(--spacing-medium); }
-  .nt4-ns { margin-top: -var(--spacing-large); }
-  .nt5-ns { margin-top: -var(--spacing-extra-large); }
-  .nt6-ns { margin-top: -var(--spacing-extra-extra-large); }
-  .nt7-ns { margin-top: -var(--spacing-extra-extra-extra-large); }
+  .nt1-ns { margin-top: calc(-1 * var(--spacing-extra-small)); }
+  .nt2-ns { margin-top: calc(-1 * var(--spacing-small)); }
+  .nt3-ns { margin-top: calc(-1 * var(--spacing-medium)); }
+  .nt4-ns { margin-top: calc(-1 * var(--spacing-large)); }
+  .nt5-ns { margin-top: calc(-1 * var(--spacing-extra-large)); }
+  .nt6-ns { margin-top: calc(-1 * var(--spacing-extra-extra-large)); }
+  .nt7-ns { margin-top: calc(-1 * var(--spacing-extra-extra-extra-large)); }
 
 }
 
 @media (--breakpoint-medium) {
-  .na1-m { margin: -var(--spacing-extra-small); }
-  .na2-m { margin: -var(--spacing-small); }
-  .na3-m { margin: -var(--spacing-medium); }
-  .na4-m { margin: -var(--spacing-large); }
-  .na5-m { margin: -var(--spacing-extra-large); }
-  .na6-m { margin: -var(--spacing-extra-extra-large); }
-  .na7-m { margin: -var(--spacing-extra-extra-extra-large); }
+  .na1-m { margin: calc(-1 * var(--spacing-extra-small)); }
+  .na2-m { margin: calc(-1 * var(--spacing-small)); }
+  .na3-m { margin: calc(-1 * var(--spacing-medium)); }
+  .na4-m { margin: calc(-1 * var(--spacing-large)); }
+  .na5-m { margin: calc(-1 * var(--spacing-extra-large)); }
+  .na6-m { margin: calc(-1 * var(--spacing-extra-extra-large)); }
+  .na7-m { margin: calc(-1 * var(--spacing-extra-extra-extra-large)); }
 
-  .nl1-m { margin-left: -var(--spacing-extra-small); }
-  .nl2-m { margin-left: -var(--spacing-small); }
-  .nl3-m { margin-left: -var(--spacing-medium); }
-  .nl4-m { margin-left: -var(--spacing-large); }
-  .nl5-m { margin-left: -var(--spacing-extra-large); }
-  .nl6-m { margin-left: -var(--spacing-extra-extra-large); }
-  .nl7-m { margin-left: -var(--spacing-extra-extra-extra-large); }
+  .nl1-m { margin-left: calc(-1 * var(--spacing-extra-small)); }
+  .nl2-m { margin-left: calc(-1 * var(--spacing-small)); }
+  .nl3-m { margin-left: calc(-1 * var(--spacing-medium)); }
+  .nl4-m { margin-left: calc(-1 * var(--spacing-large)); }
+  .nl5-m { margin-left: calc(-1 * var(--spacing-extra-large)); }
+  .nl6-m { margin-left: calc(-1 * var(--spacing-extra-extra-large)); }
+  .nl7-m { margin-left: calc(-1 * var(--spacing-extra-extra-extra-large)); }
 
-  .nr1-m { margin-right: -var(--spacing-extra-small); }
-  .nr2-m { margin-right: -var(--spacing-small); }
-  .nr3-m { margin-right: -var(--spacing-medium); }
-  .nr4-m { margin-right: -var(--spacing-large); }
-  .nr5-m { margin-right: -var(--spacing-extra-large); }
-  .nr6-m { margin-right: -var(--spacing-extra-extra-large); }
-  .nr7-m { margin-right: -var(--spacing-extra-extra-extra-large); }
+  .nr1-m { margin-right: calc(-1 * var(--spacing-extra-small)); }
+  .nr2-m { margin-right: calc(-1 * var(--spacing-small)); }
+  .nr3-m { margin-right: calc(-1 * var(--spacing-medium)); }
+  .nr4-m { margin-right: calc(-1 * var(--spacing-large)); }
+  .nr5-m { margin-right: calc(-1 * var(--spacing-extra-large)); }
+  .nr6-m { margin-right: calc(-1 * var(--spacing-extra-extra-large)); }
+  .nr7-m { margin-right: calc(-1 * var(--spacing-extra-extra-extra-large)); }
 
-  .nb1-m { margin-bottom: -var(--spacing-extra-small); }
-  .nb2-m { margin-bottom: -var(--spacing-small); }
-  .nb3-m { margin-bottom: -var(--spacing-medium); }
-  .nb4-m { margin-bottom: -var(--spacing-large); }
-  .nb5-m { margin-bottom: -var(--spacing-extra-large); }
-  .nb6-m { margin-bottom: -var(--spacing-extra-extra-large); }
-  .nb7-m { margin-bottom: -var(--spacing-extra-extra-extra-large); }
+  .nb1-m { margin-bottom: calc(-1 * var(--spacing-extra-small)); }
+  .nb2-m { margin-bottom: calc(-1 * var(--spacing-small)); }
+  .nb3-m { margin-bottom: calc(-1 * var(--spacing-medium)); }
+  .nb4-m { margin-bottom: calc(-1 * var(--spacing-large)); }
+  .nb5-m { margin-bottom: calc(-1 * var(--spacing-extra-large)); }
+  .nb6-m { margin-bottom: calc(-1 * var(--spacing-extra-extra-large)); }
+  .nb7-m { margin-bottom: calc(-1 * var(--spacing-extra-extra-extra-large)); }
 
-  .nt1-m { margin-top: -var(--spacing-extra-small); }
-  .nt2-m { margin-top: -var(--spacing-small); }
-  .nt3-m { margin-top: -var(--spacing-medium); }
-  .nt4-m { margin-top: -var(--spacing-large); }
-  .nt5-m { margin-top: -var(--spacing-extra-large); }
-  .nt6-m { margin-top: -var(--spacing-extra-extra-large); }
-  .nt7-m { margin-top: -var(--spacing-extra-extra-extra-large); }
+  .nt1-m { margin-top: calc(-1 * var(--spacing-extra-small)); }
+  .nt2-m { margin-top: calc(-1 * var(--spacing-small)); }
+  .nt3-m { margin-top: calc(-1 * var(--spacing-medium)); }
+  .nt4-m { margin-top: calc(-1 * var(--spacing-large)); }
+  .nt5-m { margin-top: calc(-1 * var(--spacing-extra-large)); }
+  .nt6-m { margin-top: calc(-1 * var(--spacing-extra-extra-large)); }
+  .nt7-m { margin-top: calc(-1 * var(--spacing-extra-extra-extra-large)); }
 
 }
 
 @media (--breakpoint-large) {
-  .na1-l { margin: -var(--spacing-extra-small); }
-  .na2-l { margin: -var(--spacing-small); }
-  .na3-l { margin: -var(--spacing-medium); }
-  .na4-l { margin: -var(--spacing-large); }
-  .na5-l { margin: -var(--spacing-extra-large); }
-  .na6-l { margin: -var(--spacing-extra-extra-large); }
-  .na7-l { margin: -var(--spacing-extra-extra-extra-large); }
+  .na1-l { margin: calc(-1 * var(--spacing-extra-small)); }
+  .na2-l { margin: calc(-1 * var(--spacing-small)); }
+  .na3-l { margin: calc(-1 * var(--spacing-medium)); }
+  .na4-l { margin: calc(-1 * var(--spacing-large)); }
+  .na5-l { margin: calc(-1 * var(--spacing-extra-large)); }
+  .na6-l { margin: calc(-1 * var(--spacing-extra-extra-large)); }
+  .na7-l { margin: calc(-1 * var(--spacing-extra-extra-extra-large)); }
 
-  .nl1-l { margin-left: -var(--spacing-extra-small); }
-  .nl2-l { margin-left: -var(--spacing-small); }
-  .nl3-l { margin-left: -var(--spacing-medium); }
-  .nl4-l { margin-left: -var(--spacing-large); }
-  .nl5-l { margin-left: -var(--spacing-extra-large); }
-  .nl6-l { margin-left: -var(--spacing-extra-extra-large); }
-  .nl7-l { margin-left: -var(--spacing-extra-extra-extra-large); }
+  .nl1-l { margin-left: calc(-1 * var(--spacing-extra-small)); }
+  .nl2-l { margin-left: calc(-1 * var(--spacing-small)); }
+  .nl3-l { margin-left: calc(-1 * var(--spacing-medium)); }
+  .nl4-l { margin-left: calc(-1 * var(--spacing-large)); }
+  .nl5-l { margin-left: calc(-1 * var(--spacing-extra-large)); }
+  .nl6-l { margin-left: calc(-1 * var(--spacing-extra-extra-large)); }
+  .nl7-l { margin-left: calc(-1 * var(--spacing-extra-extra-extra-large)); }
 
-  .nr1-l { margin-right: -var(--spacing-extra-small); }
-  .nr2-l { margin-right: -var(--spacing-small); }
-  .nr3-l { margin-right: -var(--spacing-medium); }
-  .nr4-l { margin-right: -var(--spacing-large); }
-  .nr5-l { margin-right: -var(--spacing-extra-large); }
-  .nr6-l { margin-right: -var(--spacing-extra-extra-large); }
-  .nr7-l { margin-right: -var(--spacing-extra-extra-extra-large); }
+  .nr1-l { margin-right: calc(-1 * var(--spacing-extra-small)); }
+  .nr2-l { margin-right: calc(-1 * var(--spacing-small)); }
+  .nr3-l { margin-right: calc(-1 * var(--spacing-medium)); }
+  .nr4-l { margin-right: calc(-1 * var(--spacing-large)); }
+  .nr5-l { margin-right: calc(-1 * var(--spacing-extra-large)); }
+  .nr6-l { margin-right: calc(-1 * var(--spacing-extra-extra-large)); }
+  .nr7-l { margin-right: calc(-1 * var(--spacing-extra-extra-extra-large)); }
 
-  .nb1-l { margin-bottom: -var(--spacing-extra-small); }
-  .nb2-l { margin-bottom: -var(--spacing-small); }
-  .nb3-l { margin-bottom: -var(--spacing-medium); }
-  .nb4-l { margin-bottom: -var(--spacing-large); }
-  .nb5-l { margin-bottom: -var(--spacing-extra-large); }
-  .nb6-l { margin-bottom: -var(--spacing-extra-extra-large); }
-  .nb7-l { margin-bottom: -var(--spacing-extra-extra-extra-large); }
+  .nb1-l { margin-bottom: calc(-1 * var(--spacing-extra-small)); }
+  .nb2-l { margin-bottom: calc(-1 * var(--spacing-small)); }
+  .nb3-l { margin-bottom: calc(-1 * var(--spacing-medium)); }
+  .nb4-l { margin-bottom: calc(-1 * var(--spacing-large)); }
+  .nb5-l { margin-bottom: calc(-1 * var(--spacing-extra-large)); }
+  .nb6-l { margin-bottom: calc(-1 * var(--spacing-extra-extra-large)); }
+  .nb7-l { margin-bottom: calc(-1 * var(--spacing-extra-extra-extra-large)); }
 
-  .nt1-l { margin-top: -var(--spacing-extra-small); }
-  .nt2-l { margin-top: -var(--spacing-small); }
-  .nt3-l { margin-top: -var(--spacing-medium); }
-  .nt4-l { margin-top: -var(--spacing-large); }
-  .nt5-l { margin-top: -var(--spacing-extra-large); }
-  .nt6-l { margin-top: -var(--spacing-extra-extra-large); }
-  .nt7-l { margin-top: -var(--spacing-extra-extra-extra-large); }
+  .nt1-l { margin-top: calc(-1 * var(--spacing-extra-small)); }
+  .nt2-l { margin-top: calc(-1 * var(--spacing-small)); }
+  .nt3-l { margin-top: calc(-1 * var(--spacing-medium)); }
+  .nt4-l { margin-top: calc(-1 * var(--spacing-large)); }
+  .nt5-l { margin-top: calc(-1 * var(--spacing-extra-large)); }
+  .nt6-l { margin-top: calc(-1 * var(--spacing-extra-extra-large)); }
+  .nt7-l { margin-top: calc(-1 * var(--spacing-extra-extra-extra-large)); }
 }
 

src/_nested.css

@@ -34,7 +34,7 @@
   margin-bottom: 0;
 }
 
-.nested-copy-seperator p+p {
+.nested-copy-separator p+p {
   margin-top: 1.5em;
 }
 

src/_normalize.css

@@ -1,17 +1,15 @@
-/*! normalize.css v6.0.0 | MIT License | github.com/necolas/normalize.css */
+/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
 
 /* Document
    ========================================================================== */
 
 /**
  * 1. Correct the line height in all browsers.
- * 2. Prevent adjustments of font size after orientation changes in
- *    IE on Windows Phone and in iOS.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
  */
 
 html {
   line-height: 1.15; /* 1 */
-  -ms-text-size-adjust: 100%; /* 2 */
   -webkit-text-size-adjust: 100%; /* 2 */
 }
 
@@ -19,16 +17,11 @@ html {
    ========================================================================== */
 
 /**
- * Add the correct display in IE 9-.
+ * Remove the margin in all browsers.
  */
 
-article,
-aside,
-footer,
-header,
-nav,
-section {
-  display: block;
+body {
+  margin: 0;
 }
 
 /**
@@ -44,25 +37,6 @@ h1 {
 /* Grouping content
    ========================================================================== */
 
-/**
- * Add the correct display in IE 9-.
- * 1. Add the correct display in IE.
- */
-
-figcaption,
-figure,
-main { /* 1 */
-  display: block;
-}
-
-/**
- * Add the correct margin in IE 8.
- */
-
-figure {
-  margin: 1em 40px;
-}
-
 /**
  * 1. Add the correct box sizing in Firefox.
  * 2. Show the overflow in Edge and IE.
@@ -88,17 +62,15 @@ pre {
    ========================================================================== */
 
 /**
- * 1. Remove the gray background on active links in IE 10.
- * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
+ * Remove the gray background on active links in IE 10.
  */
 
 a {
-  background-color: transparent; /* 1 */
-  -webkit-text-decoration-skip: objects; /* 2 */
+  background-color: transparent;
 }
 
 /**
- * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
+ * 1. Remove the bottom border in Chrome 57-
  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
  */
 
@@ -108,15 +80,6 @@ abbr[title] {
   text-decoration: underline dotted; /* 2 */
 }
 
-/**
- * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
- */
-
-b,
-strong {
-  font-weight: inherit;
-}
-
 /**
  * Add the correct font weight in Chrome, Edge, and Safari.
  */
@@ -138,23 +101,6 @@ samp {
   font-size: 1em; /* 2 */
 }
 
-/**
- * Add the correct font style in Android 4.3-.
- */
-
-dfn {
-  font-style: italic;
-}
-
-/**
- * Add the correct background and color in IE 9-.
- */
-
-mark {
-  background-color: #ff0;
-  color: #000;
-}
-
 /**
  * Add the correct font size in all browsers.
  */
@@ -188,44 +134,19 @@ sup {
    ========================================================================== */
 
 /**
- * Add the correct display in IE 9-.
- */
-
-audio,
-video {
-  display: inline-block;
-}
-
-/**
- * Add the correct display in iOS 4-7.
- */
-
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-
-/**
- * Remove the border on images inside links in IE 10-.
+ * Remove the border on images inside links in IE 10.
  */
 
 img {
   border-style: none;
 }
 
-/**
- * Hide the overflow in IE.
- */
-
-svg:not(:root) {
-  overflow: hidden;
-}
-
 /* Forms
    ========================================================================== */
 
 /**
- * Remove the margin in Firefox and Safari.
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
  */
 
 button,
@@ -233,7 +154,10 @@ input,
 optgroup,
 select,
 textarea {
-  margin: 0;
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
 }
 
 /**
@@ -257,16 +181,14 @@ select { /* 1 */
 }
 
 /**
- * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
- *    controls in Android 4.
- * 2. Correct the inability to style clickable types in iOS and Safari.
+ * Correct the inability to style clickable types in iOS and Safari.
  */
 
 button,
-html [type="button"], /* 1 */
+[type="button"],
 [type="reset"],
 [type="submit"] {
-  -webkit-appearance: button; /* 2 */
+  -webkit-appearance: button;
 }
 
 /**
@@ -292,6 +214,14 @@ button:-moz-focusring,
   outline: 1px dotted ButtonText;
 }
 
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
 /**
  * 1. Correct the text wrapping in Edge and IE.
  * 2. Correct the color inheritance from `fieldset` elements in IE.
@@ -309,17 +239,15 @@ legend {
 }
 
 /**
- * 1. Add the correct display in IE 9-.
- * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
  */
 
 progress {
-  display: inline-block; /* 1 */
-  vertical-align: baseline; /* 2 */
+  vertical-align: baseline;
 }
 
 /**
- * Remove the default vertical scrollbar in IE.
+ * Remove the default vertical scrollbar in IE 10+.
  */
 
 textarea {
@@ -327,8 +255,8 @@ textarea {
 }
 
 /**
- * 1. Add the correct box sizing in IE 10-.
- * 2. Remove the padding in IE 10-.
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
  */
 
 [type="checkbox"],
@@ -357,10 +285,9 @@ textarea {
 }
 
 /**
- * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+ * Remove the inner padding in Chrome and Safari on macOS.
  */
 
-[type="search"]::-webkit-search-cancel-button,
 [type="search"]::-webkit-search-decoration {
   -webkit-appearance: none;
 }
@@ -379,12 +306,10 @@ textarea {
    ========================================================================== */
 
 /*
- * Add the correct display in IE 9-.
- * 1. Add the correct display in Edge, IE, and Firefox.
+ * Add the correct display in Edge, IE 10+, and Firefox.
  */
 
-details, /* 1 */
-menu {
+details {
   display: block;
 }
 
@@ -396,30 +321,19 @@ summary {
   display: list-item;
 }
 
-/* Scripting
+/* Misc
    ========================================================================== */
 
 /**
- * Add the correct display in IE 9-.
- */
-
-canvas {
-  display: inline-block;
-}
-
-/**
- * Add the correct display in IE.
+ * Add the correct display in IE 10+.
  */
 
 template {
   display: none;
 }
 
-/* Hidden
-   ========================================================================== */
-
 /**
- * Add the correct display in IE 10-.
+ * Add the correct display in IE 10.
  */
 
 [hidden] {

src/_skins-pseudo.css

@@ -75,8 +75,8 @@
 .hover-bg-near-black:focus { background-color: var(--near-black); }
 .hover-bg-dark-gray:hover, 
 .hover-bg-dark-gray:focus { background-color: var(--dark-gray); }
-.hover-bg-dark-gray:focus, 
-.hover-bg-mid-gray:hover { background-color: var(--mid-gray); }
+.hover-bg-mid-gray:hover, 
+.hover-bg-mid-gray:focus { background-color: var(--mid-gray); }
 .hover-bg-gray:hover, 
 .hover-bg-gray:focus { background-color: var(--gray); }
 .hover-bg-silver:hover, 

src/_skins.css

@@ -71,6 +71,10 @@
 .washed-red { color: var(--washed-red); }
 .color-inherit { color: inherit; }
 
+
+
+/* Background colors */
+
 .bg-black-90 {         background-color: var(--black-90); }
 .bg-black-80 {         background-color: var(--black-80); }
 .bg-black-70 {         background-color: var(--black-70); }
@@ -91,10 +95,6 @@
 .bg-white-20 {        background-color: var(--white-20); }
 .bg-white-10 {        background-color: var(--white-10); }
 
-
-
-/* Background colors */
-
 .bg-black {         background-color: var(--black); }
 .bg-near-black {    background-color: var(--near-black); }
 .bg-dark-gray {     background-color: var(--dark-gray); }

src/_text-align.css

@@ -10,6 +10,7 @@
     l = left
     r = right
     c = center
+    j = justify
 
   Media Query Extensions:
     -ns = not-small
@@ -21,22 +22,26 @@
 .tl  { text-align: left; }
 .tr  { text-align: right; }
 .tc  { text-align: center; }
+.tj  { text-align: justify; }
 
 @media (--breakpoint-not-small) {
   .tl-ns  { text-align: left; }
   .tr-ns  { text-align: right; }
   .tc-ns  { text-align: center; }
+  .tj-ns  { text-align: justify; }
 }
 
 @media (--breakpoint-medium) {
   .tl-m  { text-align: left; }
   .tr-m  { text-align: right; }
   .tc-m  { text-align: center; }
+  .tj-m  { text-align: justify; }
 }
 
 @media (--breakpoint-large) {
   .tl-l  { text-align: left; }
   .tr-l  { text-align: right; }
   .tc-l  { text-align: center; }
+  .tj-l  { text-align: justify; }
 }
 

src/_utilities.css

@@ -19,11 +19,16 @@
   margin-left: auto;
 }
 
+.mr-auto { margin-right: auto; }
+.ml-auto { margin-left:  auto; }
+
 @media (--breakpoint-not-small){
   .center-ns {
     margin-right: auto;
     margin-left: auto;
   }
+  .mr-auto-ns { margin-right: auto; }
+  .ml-auto-ns { margin-left:  auto; }
 }
 
 @media (--breakpoint-medium){
@@ -31,6 +36,8 @@
     margin-right: auto;
     margin-left: auto;
   }
+  .mr-auto-m { margin-right: auto; }
+  .ml-auto-m { margin-left:  auto; }
 }
 
 @media (--breakpoint-large){
@@ -38,4 +45,6 @@
     margin-right: auto;
     margin-left: auto;
   }
+  .mr-auto-l { margin-right: auto; }
+  .ml-auto-l { margin-left:  auto; }
 }

src/tachyons.css

@@ -1,4 +1,4 @@
-/*! TACHYONS v4.6.1 | http://tachyons.io */
+/*! TACHYONS v4.12.0 | http://tachyons.io */
 
 /*
  *