ref: 876e5f67b14a3707b757fd008bbcc7792057c69d
parent: 9bc6187b8337c4a370bd3f21130a764d9ef6f7b3
parent: c2037f0c9a3a35b9db9c404f6b5f94ec8b690a53
author: Bjørn Erik Pedersen <[email protected]>
date: Tue Mar 26 14:41:36 EDT 2019
Merge commit 'c2037f0c9a3a35b9db9c404f6b5f94ec8b690a53'
--- a/docs/config/_default/config.toml
+++ b/docs/config/_default/config.toml
@@ -1,5 +1,5 @@
baseURL = "https://gohugo.io/"
-paginate = 100
+paginate = 100
defaultContentLanguage = "en"
enableEmoji = true
# Set the unicode character used for the "return" link in page footnotes.
@@ -48,6 +48,21 @@
isPlainText = true
notAlternative = true
+[caches]
+[caches.getjson]
+dir = ":cacheDir/:project"
+maxAge = -1
+[caches.getcsv]
+dir = ":cacheDir/:project"
+maxAge = -1
+[caches.images]
+dir = ":resourceDir/_gen"
+maxAge = -1
+[caches.assets]
+dir = ":resourceDir/_gen"
+maxAge = -1
+
+
[related]
threshold = 80
@@ -58,7 +73,7 @@
name = "keywords"
weight = 100
[[related.indices]]
-name = "date"
+name = "date"
weight = 10
pattern = "2006"
--- a/docs/config/production/params.toml
+++ b/docs/config/production/params.toml
@@ -1,6 +1,2 @@
# Params for production
-# This is turned off in development as it is relatively slow.
-# This is needed to get accurate lastMod and Git commit info
-# on the docs pages.
-enableGitInfo = true
--- a/docs/content/en/_index.md
+++ b/docs/content/en/_index.md
@@ -32,7 +32,7 @@
tagline: HTML not enough?
copy: Hugo allows you to output your content in multiple formats, including JSON or AMP, and makes it easy to create your own.
sections:
- - heading: "100s of Themes"
+ - heading: "300+ Themes"
cta: Check out the Hugo themes.
link: http://themes.gohugo.io/
color_classes: bg-accent-color white
--- a/docs/content/en/commands/hugo_convert.md
+++ b/docs/content/en/commands/hugo_convert.md
@@ -10,9 +10,11 @@
### Synopsis
-Convert your content (e.g. front matter) to different formats.
+Convert your content files (front matter) to different formats.
See convert's subcommands toJSON, toTOML and toYAML for more information.
+
+**Please Note:** This will convert front matter only. It does not convert theme and configuration files (e.g. config.toml, theme.toml). Those files will need to be manually changed to your preference.
### Options
--- a/docs/content/en/content-management/cross-references.md
+++ b/docs/content/en/content-management/cross-references.md
@@ -76,7 +76,7 @@
The behaviour can, since Hugo 0.45, be configured in `config.toml`:
refLinksErrorLevel ("ERROR")
-: When using `ref` or `relref` to resolve page links and a link cannot resolved, it will be logged with this logg level. Valid values are `ERROR` (default) or `WARNING`. Any `ERROR` will fail the build (`exit -1`).
+: When using `ref` or `relref` to resolve page links and a link cannot resolved, it will be logged with this log level. Valid values are `ERROR` (default) or `WARNING`. Any `ERROR` will fail the build (`exit -1`).
refLinksNotFoundURL
: URL to be used as a placeholder when a page reference cannot be found in `ref` or `relref`. Is used as-is.
--- a/docs/content/en/content-management/multilingual.md
+++ b/docs/content/en/content-management/multilingual.md
@@ -49,7 +49,7 @@
help = "Aide"
{{< /code-toggle >}}
-Anything not defined in a `[languages]` block will fall back to the global value for that key (e.g., `copyright` for the English [`en`] language). This also works for `params`, as demonstrated witgh `help` above: You will get the value `Aide` in French and `Help` in all the languages without this parameter set.
+Anything not defined in a `[languages]` block will fall back to the global value for that key (e.g., `copyright` for the English [`en`] language). This also works for `params`, as demonstrated with `help` above: you will get the value `Aide` in French and `Help` in all the languages without this parameter set.
With the configuration above, all content, sitemap, RSS feeds, paginations,
and taxonomy pages will be rendered below `/` in English (your default content language) and then below `/fr` in French.
--- a/docs/content/en/content-management/shortcodes.md
+++ b/docs/content/en/content-management/shortcodes.md
@@ -243,7 +243,7 @@
### `param`
-Gets a value from the current `Page's` params set in front matter, with a fall back to the site param value. If will log an `ERROR` if the param with the given key could not be found in either.
+Gets a value from the current `Page's` params set in front matter, with a fall back to the site param value. It will log an `ERROR` if the param with the given key could not be found in either.
```bash
{{</* param testparam */>}}
@@ -372,7 +372,7 @@
{{</* youtube w7Ft2ymGmfc */>}}
{{< /code >}}
-Furthermore, you can automatically start playback of the embedded video by setting the `autoplay` parameter to `true`. Remember that you can't mix named an unnamed parameters, so you'll need to assign the yet unnamed video id to the parameter `id`:
+Furthermore, you can automatically start playback of the embedded video by setting the `autoplay` parameter to `true`. Remember that you can't mix named and unnamed parameters, so you'll need to assign the yet unnamed video id to the parameter `id`:
{{< code file="example-youtube-input-with-autoplay.md" >}}
--- a/docs/content/en/content-management/toc.md
+++ b/docs/content/en/content-management/toc.md
@@ -89,7 +89,7 @@
{{% /note %}}
[conditionals]: /templates/introduction/#conditionals
-[front matter]: /content-management/table-of-contents/
+[front matter]: /content-management/front-matter/
[pagevars]: /variables/page/
[partials]: /templates/partials/
[single page template]: /templates/single-page-templates/
--- a/docs/content/en/contribute/development.md
+++ b/docs/content/en/contribute/development.md
@@ -52,7 +52,7 @@
You should see something similar to the following written to the console. Note that the version here reflects the most recent version of Go as of the last update for this page:
```
-go version go1.8 darwin/amd64
+go version go1.12 darwin/amd64
```
Next, make sure that you set up your `GOPATH` [as described in the installation guide][setupgopath].
@@ -116,8 +116,8 @@
Confirm the installation:
```
-git version 2.6.3
-hub version 2.2.2
+git version 2.21.0
+hub version 2.10.0
```
## Set up your working copy
@@ -132,18 +132,31 @@
We're going to clone the [master Hugo repository](https://github.com/gohugoio/hugo). That seems counter-intuitive, since you won't have commit rights on it. But it's required for the Go workflow. You'll work on a copy of the master and push your changes to your own repository on GitHub.
-So, let's clone that master repository:
+So, let's make a new directory and clone that master repository:
```
-go get -v -u github.com/gohugoio/hugo
+mkdir $HOME/src
+cd $HOME/src
+git clone https://github.com/gohugoio/hugo.git
```
-Hugo relies on [Testify](https://github.com/stretchr/testify) for testing Go code. If you don't already have it, get the Testify testing tools:
+> Since Hugo 0.48, Hugo uses the Go Modules support built into Go 1.11 to build.
+> The easiest is to clone Hugo in a directory outside of GOPATH
+And then, install dependencies of Hugo by running the following in the cloned directory:
+
```
-go get github.com/stretchr/testify
+cd $HOME/src/hugo
+go install
```
+
+Hugo relies on [mage](github.com/magefile/mage) for some convenient build and test targets. If you don't already have it, get it:
+
+```
+go get github.com/magefile/mage
+```
+
### Fork the repository
If you're not familiar with this term, GitHub's [help pages](https://help.github.com/articles/fork-a-repo/) provide again a simple explanation:
@@ -163,7 +176,7 @@
Switch back to the terminal and move into the directory of the cloned master repository from the last step.
```
-cd $GOPATH/src/github.com/gohugoio/hugo
+cd $HOME/src/hugo
```
Now Git needs to know that our fork exists by adding the copied remote url:
@@ -233,19 +246,33 @@
While making changes in the codebase it's a good idea to build the binary to test them:
```
-go build -o hugo main.go
+mage hugo
```
+This command generates the binary file at the root of the repository.
+
+If you want to install the binary in `$GOPATH/bin`, run
+
+```
+mage install
+```
+
### Test
Sometimes changes on the codebase can cause unintended side effects. Or they don't work as expected. Most functions have their own test cases. You can find them in files ending with `_test.go`.
-Make sure the commands `go test ./...` passes, and `go build` completes.
+Make sure the commands
+```
+mage -v check
+```
+
+passes.
+
### Formatting
The Go code styleguide maybe is opinionated but it ensures that the codebase looks the same, regardless who wrote the code. Go comes with its own formatting tool. Let's apply the styleguide to our additions:
```
-go fmt ./...
+mage fmt
```
Once you made your additions commit your changes. Make sure that you follow our [code contribution guidelines](https://github.com/gohugoio/hugo/blob/master/CONTRIBUTING.md):
--- a/docs/content/en/contribute/themes.md
+++ b/docs/content/en/contribute/themes.md
@@ -30,7 +30,7 @@
4. Add a descriptive `README.md` to the root of the theme source
5. Add `/images/screenshot.png` and `/images/tn.png`
-\* If your theme doesn't fit into the `Hugo Basic Example` site, we encourage theme authors to supply a self-contained Hugo site in `/exampleSite`.
+\* If your theme doesn't fit into the `Hugo Basic Example` site, we encourage theme authors to supply a self-contained Hugo site in `/exampleSite/`, but note that for security reasons the content directory on the Hugo showcase will still be published from the [`Hugo Basic Example`](https://github.com/gohugoio/hugoBasicExample/tree/master/content) repository.
{{% note %}}
The folder name here---`exampleSite`---is important, as this folder will be picked up and used by the script that generates the Hugo Theme Site. It mirrors the root directory of a Hugo website and allows you to add custom content, assets, and a `config` file with preset values.
@@ -125,22 +125,7 @@
Your theme's README file should be written in markdown and saved at the root of your theme's directory structure. Your `README.md` serves as
1. Content for your theme's details page at <https://themes.gohugo.io>
-2. General information about the theme in your GitHub repository (i.e., it's usual purpose)
-
-#### Example `README.md`
-
-You can download the following `README.md` as an outline:
-
-{{< code file="README.md" download="README.md" >}}
-
-# Theme Title
-
-**Need input from @digitalcraftsman on what could be added to this file.**
-
-
-
-
-{{< /code >}}
+2. General information about the theme in your GitHub repository (i.e., it's usual purpose, features and instructions)
{{% note "Screenshots in your `README.md`"%}}
If you add screenshots to the README, please make use of absolute file paths instead of relative ones like `/images/screenshot.png`. Relative paths work great on GitHub but they don't correspond to the directory structure of [themes.gohugo.io](http://themes.gohugo.io/). Therefore, browsers will not be able to display screenshots on the theme site under the given (relative) path.
--- a/docs/content/en/getting-started/configuration.md
+++ b/docs/content/en/getting-started/configuration.md
@@ -114,6 +114,9 @@
defaultContentLanguageInSubdir (false)
: Render the default content language in subdir, e.g. `content/en/`. The site root `/` will then redirect to `/en/`.
+disableAliases (false)
+: Will disable generation of alias redirects. Note that even if `disableAliases` is set, the aliases themselves are preserved on the page. The motivation with this is to be able to generate 301 redirects in an `.htacess`, a Netlify `_redirects` file or similar using a custom output format.
+
disableHugoGeneratorInject (false)
: Hugo will, by default, inject a generator meta tag in the HTML head on the _home page only_. You can turn it off, but we would really appreciate if you don't, as this is a good way to watch Hugo's popularity on the rise.
@@ -251,7 +254,7 @@
: Display memory and timing of different steps of the program.
summaryLength (70)
-: The length of text to show in a [`.Summary`](/content-management/summaries/#hugo-defined-automatic-summary-splitting).
+: The length of text in words to show in a [`.Summary`](/content-management/summaries/#hugo-defined-automatic-summary-splitting).
taxonomies
: See [Configure Taxonomies](/content-management/taxonomies#configure-taxonomies).
--- a/docs/content/en/getting-started/quick-start.md
+++ b/docs/content/en/getting-started/quick-start.md
@@ -43,7 +43,7 @@
```
-{{< asciicast HDlKrUrbfT7yiWsbd6QoxzRTN >}}
+{{< asciicast ItACREbFgvJ0HjnSNeTknxWy9 >}}
## Step 2: Create a New Site
@@ -54,7 +54,7 @@
The above will create a new Hugo site in a folder named `quickstart`.
-{{< asciicast 1PH9A2fs14Dnyarx5v8OMYQer >}}
+{{< asciicast 3mf1JGaN0AX0Z7j5kLGl3hSh8 >}}
## Step 3: Add a Theme
@@ -81,7 +81,7 @@
```
-{{< asciicast WJM2LEZQs8VRhNeuZ5NiGPp9I >}}
+{{< asciicast 7naKerRYUGVPj8kiDmdh5k5h9 >}}
## Step 4: Add Some Content
@@ -89,7 +89,9 @@
hugo new posts/my-first-post.md
```
+{{< asciicast eUojYCfRTZvkEiqc52fUsJRBR >}}
+
Edit the newly created content file if you want.
@@ -97,23 +99,30 @@
Now, start the Hugo server with [drafts](/getting-started/usage/#draft-future-and-expired-content) enabled:
+{{< asciicast BvJBsF6egk9c163bMsObhuNXj >}}
+
+
+
```
▶ hugo server -D
-Started building sites ...
-Built site for language en:
-1 of 1 draft rendered
-0 future content
-0 expired content
-1 regular pages created
-8 other pages created
-0 non-page files copied
-1 paginator pages created
-0 categories created
-0 tags created
-total in 18 ms
-Watching for changes in /Users/bep/sites/quickstart/{data,content,layouts,static,themes}
+ | EN
++------------------+----+
+ Pages | 10
+ Paginator pages | 0
+ Non-page files | 0
+ Static files | 3
+ Processed images | 0
+ Aliases | 1
+ Sitemaps | 1
+ Cleaned | 0
+
+Total in 11 ms
+Watching for changes in /Users/bep/quickstart/{content,data,layouts,static,themes}
+Watching for config changes in /Users/bep/quickstart/config.toml
+Environment: "development"
Serving pages from memory
+Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
```
@@ -148,6 +157,3 @@
**For further theme customization, see [Customize a Theme](/themes/customizing/).**
-## Recapitulation
-
-{{< asciicast pWp4uvyAkdWgQllD9RCfeBL5k >}}
--- /dev/null
+++ b/docs/content/en/hosting-and-deployment/hosting-on-aws-amplify.md
@@ -1,0 +1,43 @@
+---
+title: Host on AWS Amplify
+linktitle: Host on AWS Amplify
+description: Develop and deploy a cloud-powered web app with AWS Amplify.
+date: 2018-01-31
+publishdate: 2018-01-31
+lastmod: 2018-01-31
+categories: [hosting and deployment]
+keywords: [amplify,hosting,deployment]
+authors: [Nikhil Swaminathan]
+menu:
+ docs:
+ parent: "hosting-and-deployment"
+ weight: 10
+weight: 10
+sections_weight: 10
+draft: false
+aliases: []
+toc: true
+---
+
+In this guide we'll walk through how to deploy and host your Hugo site using the [AWS Amplify Console](https://console.amplify.aws).
+
+AWS Amplify is a combination of client library, CLI toolchain, and a Console for continuous deployment and hosting. The Amplify CLI and library allow developers to get up & running with full-stack cloud-powered applications with features like authentication, storage, serverless GraphQL or REST APIs, analytics, Lambda functions, & more. The Amplify Console provides continuous deployment and hosting for modern web apps (single page apps and static site generators). Continuous deployment allows developers to deploy updates to their web app on every code commit to their Git repository. Hosting includes features such as globally available CDNs, easy custom domain setup + HTTPS, feature branch deployments, and password protection.
+
+## Pre-requisites
+
+* [Sign up for an AWS Account](https://portal.aws.amazon.com/billing/signup?redirect_url=https%3A%2F%2Faws.amazon.com%2Fregistration-confirmation). There are no upfront charges or any term commitments to create an AWS account and signing up gives you immediate access to the AWS Free Tier.
+* You have an account with GitHub, GitLab, or Bitbucket.
+* You have completed the [Quick Start][] or have a Hugo website you are ready to deploy and share with the world.
+
+## Hosting
+
+1. Log in to the [AWS Amplify Console](https://console.aws.amazon.com/amplify/home) and choose Get Started under Deploy.
+ ![Hugo Amplify](/images/hosting-and-deployment/hosting-on-aws-amplify/amplify-gettingstarted.png)
+
+1. Connect a branch from your GitHub, Bitbucket, GitLab, or AWS CodeCommit repository. Connecting your repository allows Amplify to deploy updates on every code commit to a branch.
+ ![Hugo Amplify](/images/hosting-and-deployment/hosting-on-aws-amplify/amplify-connect-repo.gif)
+
+1. Accept the default build settings. The Amplify Console automatically detects your Hugo build settings and output directory.
+ ![Hugo Amplify](/images/hosting-and-deployment/hosting-on-aws-amplify/amplify-build-settings.png)
+
+1. Review your changes and then choose **Save and deploy**. The Amplify Console will pull code from your repository, build changes to the backend and frontend, and deploy your build artifacts at `https://master.unique-id.amplifyapp.com`. Bonus: Screenshots of your app on different devices to find layout issues.
\ No newline at end of file
--- a/docs/content/en/news/0.16-relnotes/index.md
+++ b/docs/content/en/news/0.16-relnotes/index.md
@@ -100,16 +100,13 @@
`PygmentsCodeFencesGuessSyntax = true` {{<gh 2034>}}
* Make `ByCount` sort consistently {{<gh 1930>}}
* Add `Scratch` to shortcode {{<gh 2000>}}
-* Add support for symbolic links for content, layout, static, theme {{<gh 1855
- >}}
-* Add '+' as one of the valid characters in URLs specified in the front matter
- {{<gh 1290 >}}
-* Make alias redirect output URLs relative when `RelativeURLs = true` {{<gh
- 2093 >}}
-* Hugo injects meta generator tag on homepage if missing {{<gh
- 2182 >}}
+* Add support for symbolic links for content, layout, static, theme {{<gh 1855 >}}
+* Add '+' as one of the valid characters in URLs specified in the front matter {{<gh 1290 >}}
+* Make alias redirect output URLs relative when `RelativeURLs = true` {{<gh 2093 >}}
+* Hugo injects meta generator tag on homepage if missing {{<gh 2182 >}}
### Fixes
+
* Fix file change watcher for TextMate 2 and friends on OS X {{<gh 1053 >}}
* Make dynamic reloading of config file reliable on all platform {{<gh 1684 >}}
* Hugo now works on Linux/arm64 {{<gh 1772 >}}
binary files /dev/null b/docs/content/en/news/0.54.0-relnotes/featured-hugo-54.0-poster.png differ
--- a/docs/content/en/news/0.54.0-relnotes/index.md
+++ b/docs/content/en/news/0.54.0-relnotes/index.md
@@ -1,15 +1,12 @@
---
date: 2019-02-01
-title: "0.54.0"
-description: "0.54.0"
+title: "0.54.0: Mostly Bugfixes"
+description: "0.54.0 is mostly a bugfix-release, but also some nice improvements."
categories: ["Releases"]
-images:
-- images/blog/hugo-bug-poster.png
---
-
This release represents **27 contributions by 7 contributors** to the main Hugo code base. [@bep](https://github.com/bep) leads the Hugo development with a significant amount of contributions, but also a big shoutout to [@tryzniak](https://github.com/tryzniak), [@anthonyfok](https://github.com/anthonyfok), and [@mywaiting](https://github.com/mywaiting) for their ongoing contributions. And a big thanks to [@digitalcraftsman](https://github.com/digitalcraftsman) and [@onedrawingperday](https://github.com/onedrawingperday) for their relentless work on keeping the themes site in pristine condition and to [@kaushalmodi](https://github.com/kaushalmodi) for his great work on the documentation site.
Many have also been busy writing and fixing the documentation in [hugoDocs](https://github.com/gohugoio/hugoDocs), which has received **38 contributions by 17 contributors**. A special thanks to [@bep](https://github.com/bep), [@kaushalmodi](https://github.com/kaushalmodi), [@onedrawingperday](https://github.com/onedrawingperday), and [@peaceiris](https://github.com/peaceiris) for their work on the documentation site.
--- /dev/null
+++ b/docs/content/en/showcase/fireship/bio.md
@@ -1,0 +1,6 @@
+
+**Fireship.io** is an ecosystem of detailed and practical resources for developers who want to build and ship high-quality apps.
+
+The site is built by:
+
+* [Jeff Delaney](https://fireship.io/contributors/jeff-delaney/)
binary files /dev/null b/docs/content/en/showcase/fireship/featured.png differ
--- /dev/null
+++ b/docs/content/en/showcase/fireship/index.md
@@ -1,0 +1,18 @@
+---
+
+title: fireship.io
+date: 2019-02-02
+description: "Showcase: \"Hugo helps us create complex technical content that integrates engaging web components\""
+siteURL: https://fireship.io
+siteSource: https://github.com/fireship-io/fireship.io
+byline: "[Jeff Delaney](https://github.com/codediodeio), Fireship.io Creator"
+---
+
+After careful consideration of JavaScript/JSX-based static site generators, it became clear that Hugo was the only tool capable of handling our project's complex demands. Not only do we have multiple content formats and taxonomies, but we often need to customize the experience at a more granular level. The problems Hugo has solved for us include:
+
+- **Render speed.** We know from past experience that JavaScript-based static site generators become very slow when you have thousands of pages and images.
+- **Feature-rich.** Our site has a long list of specialized needs and Hugo somehow manages to cover every single use case.
+- **Composability.** Hugo's partial and shortcode systems empower us to write DRY and maintainable templates.
+- **Simplicity.** Hugo is easy to learn (even without Go experience) and doesn't burden us with brittle dependencies.
+
+The site is able to achieve Lighthouse performance scores of 95+, despite the fact that it is a fully interactive PWA that ships Angular and Firebase in the JS bundle. This is made possible by (1) prerendering content with Hugo and (2) lazily embedding native web components directly in the HTML and markdown. We provide a [detailed explanation](https://youtu.be/gun8OiGtlNc) of the architecture on YouTube and can't imagine development without Hugo.
--- a/docs/content/en/templates/files.md
+++ b/docs/content/en/templates/files.md
@@ -1,7 +1,7 @@
---
title: Local File Templates
linktitle: Local File Templates
-description: Hugo's `readerDir` and `readFile` functions make it easy to traverse your project's directory structure and write file contents to your templates.
+description: Hugo's `readDir` and `readFile` functions make it easy to traverse your project's directory structure and write file contents to your templates.
godocref: https://golang.org/pkg/os/#FileInfo
date: 2017-02-01
publishdate: 2017-02-01
--- a/docs/content/en/templates/lists.md
+++ b/docs/content/en/templates/lists.md
@@ -162,7 +162,7 @@
### Section Template
-This list template has been modified slightly from a template originally used in [spf13.com](http://spf13.com/). It makes use of [partial templates][partials] for the chrome of the rendered page rather than using a [base template][base] The examples that follow also use the [content view templates][views] `li.html` or `summary.html`.
+This list template has been modified slightly from a template originally used in [spf13.com](http://spf13.com/). It makes use of [partial templates][partials] for the chrome of the rendered page rather than using a [base template][base]. The examples that follow also use the [content view templates][views] `li.html` or `summary.html`.
{{< code file="layouts/section/posts.html" >}}
{{ partial "header.html" . }}
--- a/docs/content/en/themes/theme-components.md
+++ b/docs/content/en/themes/theme-components.md
@@ -45,7 +45,7 @@
The same rules apply here: The left-most param/menu etc. with the same ID will win. There are some hidden and experimental namespace support in the above, which we will work to improve in the future, but theme authors are encouraged to create their own namespaces to avoid naming conflicts.
-[^1]: Including theme components in the themes is currently not supported for themes hosted on [The Hugo Themes Site](https://themes.gohugo.io/), but can be really useful if you want to create your own theme based on a theme you find on that site.
+[^1]: For themes hosted on the [Hugo Themes Showcase](https://themes.gohugo.io/) components need to be added as git submodules that point to the directory `exampleSite/themes`
--- a/docs/content/en/tools/frontends.md
+++ b/docs/content/en/tools/frontends.md
@@ -19,10 +19,9 @@
---
* [enwrite](https://github.com/zzamboni/enwrite). Enwrite enables evernote-powered, statically generated blogs and websites. Now posting to your blog or updating your website is as easy as writing a new note in Evernote!
-* [caddy-hugo](https://github.com/hacdias/caddy-hugo). `caddy-hugo` is an add-on for [Caddy](https://caddyserver.com/) that delivers a good UI to edit the content of your Hugo website.
* [Lipi](https://github.com/SohanChy/Lipi). Lipi is a native GUI frontend written in Java to manage your Hugo websites.
* [Netlify CMS](https://netlifycms.org). Netlify CMS is an open source, serverless solution for managing Git based content in static sites, and it works on any platform that can host static sites. A [Hugo/Netlify CMS starter](https://github.com/netlify-templates/one-click-hugo-cms) is available to get new projects running quickly.
-* [Hokus CMS](https://www.hokus.io). Hokus CMS is an open source, multiplatform, easy to use, desktop application for Hugo. Build from simple to complex user interfaces for Hugo websites by choosing from a dozen ready-to-use components — all for free, with no vendor lock-in.
+* [Hokus CMS](https://github.com/julianoappelklein/hokus). Hokus CMS is an open source, multiplatform, easy to use, desktop application for Hugo. Build from simple to complex user interfaces for Hugo websites by choosing from a dozen ready-to-use components — all for free, with no vendor lock-in.
## Commercial Services
--- a/docs/content/en/tools/starter-kits.md
+++ b/docs/content/en/tools/starter-kits.md
@@ -24,11 +24,11 @@
{{% /note %}}
* [Hugo Wrapper][hugow]. Hugo Wrapper is a POSIX-style shell script which acts as a wrapper to download and run Hugo binary for your platform. It can be executed in variety of [Operating Systems][hugow-test] and [Command Shells][hugow-test].
-* [Victor Hugo][]. Victor Hugo is a Hugo boilerplate for creating truly epic websites using Gulp + Webpack as an asset pipeline. Victor Hugo uses post-css and Babel for CSS and JavaScript, respectively, and is actively maintained.
+* [Victor Hugo][]. Victor Hugo is a Hugo boilerplate for creating truly epic websites using Webpack as an asset pipeline. Victor Hugo uses post-css and Babel for CSS and JavaScript, respectively, and is actively maintained.
* [GOHUGO AMP][]. GoHugo AMP is a starter theme that aims to make it easy to adopt [Google's AMP Project][amp]. The starter kit comes with 40+ shortcodes and partials plus automatic structured data. The project also includes a [separate site with extensive documentation][gohugodocs].
* [Blaupause][]. Blaupause is a developer-friendly Hugo starter kit based on Gulp tasks. It comes ES6-ready with several helpers for SVG and fonts and basic structure for HTML, SCSS, and JavaScript.
* [hugulp][]. hugulp is a tool to optimize the assets of a Hugo website. The main idea is to recreate the famous Ruby on Rails Asset Pipeline, which minifies, concatenates and fingerprints the assets used in your website.
-* [Atlas][]. Atlas is a Hugo boilerplate designed to speed up development with support for Netlify, Netlify CMS, Gulp, Linting, SCSS, ES6 & more. It's actively maintained and contributions are always welcome.
+* [Atlas][]. Atlas is a Hugo boilerplate designed to speed up development with support for Netlify, Hugo Pipes, SCSS & more. It's actively maintained and contributions are always welcome.
[addkit]: https://github.com/gohugoio/hugo/edit/master/docs/content/en/tools/starter-kits.md
--- a/docs/content/en/troubleshooting/faq.md
+++ b/docs/content/en/troubleshooting/faq.md
@@ -42,3 +42,15 @@
## Can I use the latest Hugo version on Netlify?
Yes you can! Read [this](/hosting-and-deployment/hosting-on-netlify/#configure-hugo-version-in-netlify).
+
+## I get "this feature is not available in your current Hugo version"
+
+If you process `SCSS` or `SASS` to `CSS` in your Hugo project, you need the Hugo `extended` version, or else you may see this error message:
+
+```bash
+error: failed to transform resource: TOCSS: failed to transform "scss/main.scss" (text/x-scss): this feature is not available in your current Hugo version
+```
+
+We release two set of binaries for technical reasons. The extended is what you get by default, as an example, when you run `brew install hugo` on `macOS`. On the [release page](https://github.com/gohugoio/hugo/releases), look for archives with `extended` in the name.
+
+To confirm, run `hugo version` and look for the word `extended`.
--- a/docs/content/en/variables/files.md
+++ b/docs/content/en/variables/files.md
@@ -25,7 +25,7 @@
The `.File` object contains the following fields:
.File.Path
-: the original relative path of the page (e.g., `content/posts/foo.en.md`)
+: the original relative path of the page, relative to the content dir (e.g., `posts/foo.en.md`)
.File.LogicalName
: the name of the content file that represents a page (e.g., `foo.en.md`)
--- a/docs/netlify.toml
+++ b/docs/netlify.toml
@@ -3,28 +3,28 @@
command = "hugo --gc --minify"
[context.production.environment]
-HUGO_VERSION = "0.53"
+HUGO_VERSION = "0.54.0"
HUGO_ENV = "production"
HUGO_ENABLEGITINFO = "true"
[context.split1]
-command = "hugo --gc --minify --enableGitInfo"
+command = "hugo --gc --minify --enableGitInfo"
[context.split1.environment]
-HUGO_VERSION = "0.53"
+HUGO_VERSION = "0.54.0"
HUGO_ENV = "production"
[context.deploy-preview]
-command = "hugo --gc --minify --buildFuture -b $DEPLOY_PRIME_URL"
+command = "hugo --gc --minify --buildFuture -b $DEPLOY_PRIME_URL"
[context.deploy-preview.environment]
-HUGO_VERSION = "0.53"
+HUGO_VERSION = "0.54.0"
[context.branch-deploy]
-command = "hugo --gc --minify -b $DEPLOY_PRIME_URL"
+command = "hugo --gc --minify -b $DEPLOY_PRIME_URL"
[context.branch-deploy.environment]
-HUGO_VERSION = "0.53"
+HUGO_VERSION = "0.54.0"
[context.next.environment]
HUGO_ENABLEGITINFO = "true"
binary files /dev/null b/docs/resources/_gen/images/news/0.54.0-relnotes/featured-hugo-54.0-poster_hufa0b7b755124a76fe71c5c70a25724c2_59805_480x0_resize_catmullrom_2.png differ
binary files /dev/null b/docs/resources/_gen/images/news/0.54.0-relnotes/featured-hugo-54.0-poster_hufa0b7b755124a76fe71c5c70a25724c2_59805_640x0_resize_catmullrom_2.png differ
binary files /dev/null b/docs/static/images/hosting-and-deployment/hosting-on-aws-amplify/amplify-build-settings.png differ
binary files /dev/null b/docs/static/images/hosting-and-deployment/hosting-on-aws-amplify/amplify-connect-repo.gif differ
binary files /dev/null b/docs/static/images/hosting-and-deployment/hosting-on-aws-amplify/amplify-gettingstarted.png differ
--- a/docs/themes/gohugoioTheme/assets/css/main.css
+++ b/docs/themes/gohugoioTheme/assets/css/main.css
@@ -5,7 +5,8 @@
@import '_anchorforid';
@import '_animation';
@import '_documentation-styles';
-@import '_algolia';
+
+@import 'docsearch.js/dist/cdn/docsearch.min';
@import '_carousel';
@import '_code';
@import '_tabs';
--- a/docs/themes/gohugoioTheme/assets/js/main.js
+++ b/docs/themes/gohugoioTheme/assets/js/main.js
@@ -3,7 +3,6 @@
import './clipboardjs.js'
import './codeblocks.js'
import './docsearch.js'
-//import './hljs.js'
import './lazysizes.js'
import './menutoggle.js'
import './scrolldir.js'
--- a/docs/themes/gohugoioTheme/assets/output/css/app.css
+++ b/docs/themes/gohugoioTheme/assets/output/css/app.css
@@ -252,6 +252,12 @@
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
+abbr[title] {
+ border-bottom: none; /* 1 */
+ text-decoration: underline; /* 2 */
+ -webkit-text-decoration: underline dotted;
+ text-decoration: underline dotted; /* 2 */
+}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
@@ -263,7 +269,9 @@
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
-code {
+code,
+kbd,
+samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
@@ -277,6 +285,19 @@
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+sub {
+ bottom: -0.25em;
+}
+sup {
+ top: -0.5em;
+}
/* Embedded content
========================================================================== */
/**
@@ -292,7 +313,10 @@
* 2. Remove the margin in Firefox and Safari.
*/
button,
-input {
+input,
+optgroup,
+select,
+textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
@@ -310,7 +334,8 @@
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
-button { /* 1 */
+button,
+select { /* 1 */
text-transform: none;
}
/**
@@ -365,9 +390,15 @@
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
+progress {
+ vertical-align: baseline;
+}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
+textarea {
+ overflow: auto;
+}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
@@ -418,6 +449,9 @@
/*
* Add the correct display in all browsers.
*/
+summary {
+ display: list-item;
+}
/* Misc
========================================================================== */
/**
@@ -457,9 +491,15 @@
h1,h2,h3,h4,h5,h6,
p,
ul,
+ol,
li,
+dl,
+dt,
+dd,
blockquote,
figcaption,
+figure,
+textarea,
table,
td,
th,
@@ -469,7 +509,8 @@
input[type="password"],
input[type="tel"],
input[type="text"],
-input[type="url"] {
+input[type="url"],
+.border-box {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
@@ -498,6 +539,19 @@
on an html element.
*/
.cover { background-size: cover!important; }
+.contain { background-size: contain!important; }
+@media screen and (min-width: 30em) {
+ .cover-ns { background-size: cover!important; }
+ .contain-ns { background-size: contain!important; }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .cover-m { background-size: cover!important; }
+ .contain-m { background-size: contain!important; }
+}
+@media screen and (min-width: 60em) {
+ .cover-l { background-size: cover!important; }
+ .contain-l { background-size: contain!important; }
+}
/*
BACKGROUND POSITION
@@ -518,6 +572,104 @@
-l = large
*/
+.bg-center {
+ background-repeat: no-repeat;
+ background-position: center center;
+}
+.bg-top {
+ background-repeat: no-repeat;
+ background-position: top center;
+}
+.bg-right {
+ background-repeat: no-repeat;
+ background-position: center right;
+}
+.bg-bottom {
+ background-repeat: no-repeat;
+ background-position: bottom center;
+}
+.bg-left {
+ background-repeat: no-repeat;
+ background-position: center left;
+}
+@media screen and (min-width: 30em) {
+ .bg-center-ns {
+ background-repeat: no-repeat;
+ background-position: center center;
+ }
+
+ .bg-top-ns {
+ background-repeat: no-repeat;
+ background-position: top center;
+ }
+
+ .bg-right-ns {
+ background-repeat: no-repeat;
+ background-position: center right;
+ }
+
+ .bg-bottom-ns {
+ background-repeat: no-repeat;
+ background-position: bottom center;
+ }
+
+ .bg-left-ns {
+ background-repeat: no-repeat;
+ background-position: center left;
+ }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .bg-center-m {
+ background-repeat: no-repeat;
+ background-position: center center;
+ }
+
+ .bg-top-m {
+ background-repeat: no-repeat;
+ background-position: top center;
+ }
+
+ .bg-right-m {
+ background-repeat: no-repeat;
+ background-position: center right;
+ }
+
+ .bg-bottom-m {
+ background-repeat: no-repeat;
+ background-position: bottom center;
+ }
+
+ .bg-left-m {
+ background-repeat: no-repeat;
+ background-position: center left;
+ }
+}
+@media screen and (min-width: 60em) {
+ .bg-center-l {
+ background-repeat: no-repeat;
+ background-position: center center;
+ }
+
+ .bg-top-l {
+ background-repeat: no-repeat;
+ background-position: top center;
+ }
+
+ .bg-right-l {
+ background-repeat: no-repeat;
+ background-position: center right;
+ }
+
+ .bg-bottom-l {
+ background-repeat: no-repeat;
+ background-position: bottom center;
+ }
+
+ .bg-left-l {
+ background-repeat: no-repeat;
+ background-position: center left;
+ }
+}
/*@import 'tachyons/src/_outlines';*/
/*
@@ -547,8 +699,29 @@
.bb { border-bottom-style: solid; border-bottom-width: 1px; }
.bl { border-left-style: solid; border-left-width: 1px; }
.bn { border-style: none; border-width: 0; }
+@media screen and (min-width: 30em) {
+ .ba-ns { border-style: solid; border-width: 1px; }
+ .bt-ns { border-top-style: solid; border-top-width: 1px; }
+ .br-ns { border-right-style: solid; border-right-width: 1px; }
+ .bb-ns { border-bottom-style: solid; border-bottom-width: 1px; }
+ .bl-ns { border-left-style: solid; border-left-width: 1px; }
+ .bn-ns { border-style: none; border-width: 0; }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .ba-m { border-style: solid; border-width: 1px; }
+ .bt-m { border-top-style: solid; border-top-width: 1px; }
+ .br-m { border-right-style: solid; border-right-width: 1px; }
+ .bb-m { border-bottom-style: solid; border-bottom-width: 1px; }
+ .bl-m { border-left-style: solid; border-left-width: 1px; }
+ .bn-m { border-style: none; border-width: 0; }
+}
@media screen and (min-width: 60em) {
+ .ba-l { border-style: solid; border-width: 1px; }
+ .bt-l { border-top-style: solid; border-top-width: 1px; }
+ .br-l { border-right-style: solid; border-right-width: 1px; }
+ .bb-l { border-bottom-style: solid; border-bottom-width: 1px; }
.bl-l { border-left-style: solid; border-left-width: 1px; }
+ .bn-l { border-style: none; border-width: 0; }
}
/*
@@ -569,13 +742,68 @@
--color-name = each color variable name is also a border color name
*/
+.b--black { border-color: #000; }
+.b--near-black { border-color: #111; }
.b--dark-gray { border-color: #333; }
.b--mid-gray { border-color: #555; }
+.b--gray { border-color: #777; }
+.b--silver { border-color: #999; }
+.b--light-silver { border-color: #aaa; }
.b--moon-gray { border-color: #ccc; }
.b--light-gray { border-color: #eee; }
+.b--near-white { border-color: #f4f4f4; }
+.b--white { border-color: #fff; }
+.b--white-90 { border-color: rgba(255, 255, 255, .9); }
+.b--white-80 { border-color: rgba(255, 255, 255, .8); }
+.b--white-70 { border-color: rgba(255, 255, 255, .7); }
+.b--white-60 { border-color: rgba(255, 255, 255, .6); }
+.b--white-50 { border-color: rgba(255, 255, 255, .5); }
.b--white-40 { border-color: rgba(255, 255, 255, .4); }
+.b--white-30 { border-color: rgba(255, 255, 255, .3); }
+.b--white-20 { border-color: rgba(255, 255, 255, .2); }
+.b--white-10 { border-color: rgba(255, 255, 255, .1); }
+.b--white-05 { border-color: rgba(255, 255, 255, .05); }
+.b--white-025 { border-color: rgba(255, 255, 255, .025); }
+.b--white-0125 { border-color: rgba(255, 255, 255, .0125); }
+.b--black-90 { border-color: rgba(0, 0, 0, .9); }
+.b--black-80 { border-color: rgba(0, 0, 0, .8); }
+.b--black-70 { border-color: rgba(0, 0, 0, .7); }
+.b--black-60 { border-color: rgba(0, 0, 0, .6); }
+.b--black-50 { border-color: rgba(0, 0, 0, .5); }
+.b--black-40 { border-color: rgba(0, 0, 0, .4); }
+.b--black-30 { border-color: rgba(0, 0, 0, .3); }
+.b--black-20 { border-color: rgba(0, 0, 0, .2); }
.b--black-10 { border-color: rgba(0, 0, 0, .1); }
+.b--black-05 { border-color: rgba(0, 0, 0, .05); }
+.b--black-025 { border-color: rgba(0, 0, 0, .025); }
+.b--black-0125 { border-color: rgba(0, 0, 0, .0125); }
+.b--dark-red { border-color: #e7040f; }
+.b--red { border-color: #ff4136; }
+.b--light-red { border-color: #ff725c; }
+.b--orange { border-color: #ff6300; }
+.b--gold { border-color: #ffb700; }
+.b--yellow { border-color: #ffd700; }
+.b--light-yellow { border-color: #fbf1a9; }
+.b--purple { border-color: #5e2ca5; }
+.b--light-purple { border-color: #a463f2; }
+.b--dark-pink { border-color: #d5008f; }
+.b--hot-pink { border-color: #ff41b4; }
+.b--pink { border-color: #ff80cc; }
+.b--light-pink { border-color: #ffa3d7; }
+.b--dark-green { border-color: #137752; }
+.b--green { border-color: #19a974; }
+.b--light-green { border-color: #9eebcf; }
+.b--navy { border-color: #001b44; }
+.b--dark-blue { border-color: #00449e; }
.b--blue { border-color: #0594CB; }
+.b--light-blue { border-color: #96ccff; }
+.b--lightest-blue { border-color: #cdecff; }
+.b--washed-blue { border-color: #f6fffe; }
+.b--washed-green { border-color: #e8fdf5; }
+.b--washed-yellow { border-color: #fffceb; }
+.b--washed-red { border-color: #ffdfdf; }
+.b--transparent { border-color: transparent; }
+.b--inherit { border-color: inherit; }
/*
BORDER RADIUS
@@ -601,10 +829,104 @@
-l = large
*/
+.br0 { border-radius: 0; }
.br1 { border-radius: .125rem; }
.br2 { border-radius: .25rem; }
.br3 { border-radius: .5rem; }
+.br4 { border-radius: 1rem; }
.br-100 { border-radius: 100%; }
+.br-pill { border-radius: 9999px; }
+.br--bottom {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ }
+.br--top {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+.br--right {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+.br--left {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+@media screen and (min-width: 30em) {
+ .br0-ns { border-radius: 0; }
+ .br1-ns { border-radius: .125rem; }
+ .br2-ns { border-radius: .25rem; }
+ .br3-ns { border-radius: .5rem; }
+ .br4-ns { border-radius: 1rem; }
+ .br-100-ns { border-radius: 100%; }
+ .br-pill-ns { border-radius: 9999px; }
+ .br--bottom-ns {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ }
+ .br--top-ns {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+ .br--right-ns {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+ .br--left-ns {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .br0-m { border-radius: 0; }
+ .br1-m { border-radius: .125rem; }
+ .br2-m { border-radius: .25rem; }
+ .br3-m { border-radius: .5rem; }
+ .br4-m { border-radius: 1rem; }
+ .br-100-m { border-radius: 100%; }
+ .br-pill-m { border-radius: 9999px; }
+ .br--bottom-m {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ }
+ .br--top-m {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+ .br--right-m {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+ .br--left-m {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+}
+@media screen and (min-width: 60em) {
+ .br0-l { border-radius: 0; }
+ .br1-l { border-radius: .125rem; }
+ .br2-l { border-radius: .25rem; }
+ .br3-l { border-radius: .5rem; }
+ .br4-l { border-radius: 1rem; }
+ .br-100-l { border-radius: 100%; }
+ .br-pill-l { border-radius: 9999px; }
+ .br--bottom-l {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ }
+ .br--top-l {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+ .br--right-l {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+ .br--left-l {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+}
/*
BORDER STYLES
@@ -627,6 +949,28 @@
-l = large
*/
+.b--dotted { border-style: dotted; }
+.b--dashed { border-style: dashed; }
+.b--solid { border-style: solid; }
+.b--none { border-style: none; }
+@media screen and (min-width: 30em) {
+ .b--dotted-ns { border-style: dotted; }
+ .b--dashed-ns { border-style: dashed; }
+ .b--solid-ns { border-style: solid; }
+ .b--none-ns { border-style: none; }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .b--dotted-m { border-style: dotted; }
+ .b--dashed-m { border-style: dashed; }
+ .b--solid-m { border-style: solid; }
+ .b--none-m { border-style: none; }
+}
+@media screen and (min-width: 60em) {
+ .b--dotted-l { border-style: dotted; }
+ .b--dashed-l { border-style: dashed; }
+ .b--solid-l { border-style: solid; }
+ .b--none-l { border-style: none; }
+}
/*
BORDER WIDTHS
@@ -649,8 +993,53 @@
-l = large
*/
+.bw0 { border-width: 0; }
.bw1 { border-width: .125rem; }
+.bw2 { border-width: .25rem; }
+.bw3 { border-width: .5rem; }
+.bw4 { border-width: 1rem; }
+.bw5 { border-width: 2rem; }
/* Resets */
+.bt-0 { border-top-width: 0; }
+.br-0 { border-right-width: 0; }
+.bb-0 { border-bottom-width: 0; }
+.bl-0 { border-left-width: 0; }
+@media screen and (min-width: 30em) {
+ .bw0-ns { border-width: 0; }
+ .bw1-ns { border-width: .125rem; }
+ .bw2-ns { border-width: .25rem; }
+ .bw3-ns { border-width: .5rem; }
+ .bw4-ns { border-width: 1rem; }
+ .bw5-ns { border-width: 2rem; }
+ .bt-0-ns { border-top-width: 0; }
+ .br-0-ns { border-right-width: 0; }
+ .bb-0-ns { border-bottom-width: 0; }
+ .bl-0-ns { border-left-width: 0; }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .bw0-m { border-width: 0; }
+ .bw1-m { border-width: .125rem; }
+ .bw2-m { border-width: .25rem; }
+ .bw3-m { border-width: .5rem; }
+ .bw4-m { border-width: 1rem; }
+ .bw5-m { border-width: 2rem; }
+ .bt-0-m { border-top-width: 0; }
+ .br-0-m { border-right-width: 0; }
+ .bb-0-m { border-bottom-width: 0; }
+ .bl-0-m { border-left-width: 0; }
+}
+@media screen and (min-width: 60em) {
+ .bw0-l { border-width: 0; }
+ .bw1-l { border-width: .125rem; }
+ .bw2-l { border-width: .25rem; }
+ .bw3-l { border-width: .5rem; }
+ .bw4-l { border-width: 1rem; }
+ .bw5-l { border-width: 2rem; }
+ .bt-0-l { border-top-width: 0; }
+ .br-0-l { border-right-width: 0; }
+ .bb-0-l { border-bottom-width: 0; }
+ .bl-0-l { border-left-width: 0; }
+}
/*
BOX-SHADOW
@@ -662,8 +1051,32 @@
-l = large
*/
+.shadow-1 { -webkit-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .2); box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .2); }
.shadow-2 { -webkit-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, .2); box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, .2); }
+.shadow-3 { -webkit-box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); }
+.shadow-4 { -webkit-box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .2); box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .2); }
.shadow-5 { -webkit-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, .2); box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, .2); }
+@media screen and (min-width: 30em) {
+ .shadow-1-ns { -webkit-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .2); box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .2); }
+ .shadow-2-ns { -webkit-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, .2); box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, .2); }
+ .shadow-3-ns { -webkit-box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); }
+ .shadow-4-ns { -webkit-box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .2); box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .2); }
+ .shadow-5-ns { -webkit-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, .2); box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, .2); }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .shadow-1-m { -webkit-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .2); box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .2); }
+ .shadow-2-m { -webkit-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, .2); box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, .2); }
+ .shadow-3-m { -webkit-box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); }
+ .shadow-4-m { -webkit-box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .2); box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .2); }
+ .shadow-5-m { -webkit-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, .2); box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, .2); }
+}
+@media screen and (min-width: 60em) {
+ .shadow-1-l { -webkit-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .2); box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .2); }
+ .shadow-2-l { -webkit-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, .2); box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, .2); }
+ .shadow-3-l { -webkit-box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); }
+ .shadow-4-l { -webkit-box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .2); box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .2); }
+ .shadow-5-l { -webkit-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, .2); box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, .2); }
+}
/*@import 'tachyons/src/_code';*/
/*
@@ -695,6 +1108,112 @@
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
+.top-1 { top: 1rem; }
+.right-1 { right: 1rem; }
+.bottom-1 { bottom: 1rem; }
+.left-1 { left: 1rem; }
+.top-2 { top: 2rem; }
+.right-2 { right: 2rem; }
+.bottom-2 { bottom: 2rem; }
+.left-2 { left: 2rem; }
+.top--1 { top: -1rem; }
+.right--1 { right: -1rem; }
+.bottom--1 { bottom: -1rem; }
+.left--1 { left: -1rem; }
+.top--2 { top: -2rem; }
+.right--2 { right: -2rem; }
+.bottom--2 { bottom: -2rem; }
+.left--2 { left: -2rem; }
+.absolute--fill {
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+}
+@media screen and (min-width: 30em) {
+ .top-0-ns { top: 0; }
+ .left-0-ns { left: 0; }
+ .right-0-ns { right: 0; }
+ .bottom-0-ns { bottom: 0; }
+ .top-1-ns { top: 1rem; }
+ .left-1-ns { left: 1rem; }
+ .right-1-ns { right: 1rem; }
+ .bottom-1-ns { bottom: 1rem; }
+ .top-2-ns { top: 2rem; }
+ .left-2-ns { left: 2rem; }
+ .right-2-ns { right: 2rem; }
+ .bottom-2-ns { bottom: 2rem; }
+ .top--1-ns { top: -1rem; }
+ .right--1-ns { right: -1rem; }
+ .bottom--1-ns { bottom: -1rem; }
+ .left--1-ns { left: -1rem; }
+ .top--2-ns { top: -2rem; }
+ .right--2-ns { right: -2rem; }
+ .bottom--2-ns { bottom: -2rem; }
+ .left--2-ns { left: -2rem; }
+ .absolute--fill-ns {
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .top-0-m { top: 0; }
+ .left-0-m { left: 0; }
+ .right-0-m { right: 0; }
+ .bottom-0-m { bottom: 0; }
+ .top-1-m { top: 1rem; }
+ .left-1-m { left: 1rem; }
+ .right-1-m { right: 1rem; }
+ .bottom-1-m { bottom: 1rem; }
+ .top-2-m { top: 2rem; }
+ .left-2-m { left: 2rem; }
+ .right-2-m { right: 2rem; }
+ .bottom-2-m { bottom: 2rem; }
+ .top--1-m { top: -1rem; }
+ .right--1-m { right: -1rem; }
+ .bottom--1-m { bottom: -1rem; }
+ .left--1-m { left: -1rem; }
+ .top--2-m { top: -2rem; }
+ .right--2-m { right: -2rem; }
+ .bottom--2-m { bottom: -2rem; }
+ .left--2-m { left: -2rem; }
+ .absolute--fill-m {
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ }
+}
+@media screen and (min-width: 60em) {
+ .top-0-l { top: 0; }
+ .left-0-l { left: 0; }
+ .right-0-l { right: 0; }
+ .bottom-0-l { bottom: 0; }
+ .top-1-l { top: 1rem; }
+ .left-1-l { left: 1rem; }
+ .right-1-l { right: 1rem; }
+ .bottom-1-l { bottom: 1rem; }
+ .top-2-l { top: 2rem; }
+ .left-2-l { left: 2rem; }
+ .right-2-l { right: 2rem; }
+ .bottom-2-l { bottom: 2rem; }
+ .top--1-l { top: -1rem; }
+ .right--1-l { right: -1rem; }
+ .bottom--1-l { bottom: -1rem; }
+ .left--1-l { left: -1rem; }
+ .top--2-l { top: -2rem; }
+ .right--2-l { right: -2rem; }
+ .bottom--2-l { bottom: -2rem; }
+ .left--2-l { left: -2rem; }
+ .absolute--fill-l {
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ }
+}
/*
CLEARFIX
@@ -707,6 +1226,28 @@
.cf:after { content: " "; display: table; }
.cf:after { clear: both; }
.cf { *zoom: 1; }
+.cl { clear: left; }
+.cr { clear: right; }
+.cb { clear: both; }
+.cn { clear: none; }
+@media screen and (min-width: 30em) {
+ .cl-ns { clear: left; }
+ .cr-ns { clear: right; }
+ .cb-ns { clear: both; }
+ .cn-ns { clear: none; }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .cl-m { clear: left; }
+ .cr-m { clear: right; }
+ .cb-m { clear: both; }
+ .cn-m { clear: none; }
+}
+@media screen and (min-width: 60em) {
+ .cl-l { clear: left; }
+ .cr-l { clear: right; }
+ .cb-l { clear: both; }
+ .cn-l { clear: none; }
+}
/*
DISPLAY
@@ -733,19 +1274,77 @@
*/
.dn { display: none; }
+.di { display: inline; }
.db { display: block; }
.dib { display: inline-block; }
+.dit { display: inline-table; }
+.dt { display: table; }
+.dtc { display: table-cell; }
+.dt-row { display: table-row; }
+.dt-row-group { display: table-row-group; }
+.dt-column { display: table-column; }
+.dt-column-group { display: table-column-group; }
/*
This will set table to full width and then
all cells will be equal width
*/
+.dt--fixed {
+ table-layout: fixed;
+ width: 100%;
+}
@media screen and (min-width: 30em) {
+ .dn-ns { display: none; }
+ .di-ns { display: inline; }
+ .db-ns { display: block; }
.dib-ns { display: inline-block; }
+ .dit-ns { display: inline-table; }
+ .dt-ns { display: table; }
+ .dtc-ns { display: table-cell; }
+ .dt-row-ns { display: table-row; }
+ .dt-row-group-ns { display: table-row-group; }
+ .dt-column-ns { display: table-column; }
+ .dt-column-group-ns { display: table-column-group; }
+
+ .dt--fixed-ns {
+ table-layout: fixed;
+ width: 100%;
+ }
}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .dn-m { display: none; }
+ .di-m { display: inline; }
+ .db-m { display: block; }
+ .dib-m { display: inline-block; }
+ .dit-m { display: inline-table; }
+ .dt-m { display: table; }
+ .dtc-m { display: table-cell; }
+ .dt-row-m { display: table-row; }
+ .dt-row-group-m { display: table-row-group; }
+ .dt-column-m { display: table-column; }
+ .dt-column-group-m { display: table-column-group; }
+
+ .dt--fixed-m {
+ table-layout: fixed;
+ width: 100%;
+ }
+}
@media screen and (min-width: 60em) {
.dn-l { display: none; }
+ .di-l { display: inline; }
.db-l { display: block; }
.dib-l { display: inline-block; }
+ .dit-l { display: inline-table; }
+ .dt-l { display: table; }
+ .dtc-l { display: table-cell; }
+ .dt-row-l { display: table-row; }
+ .dt-row-group-l { display: table-row-group; }
+ .dt-column-l { display: table-column; }
+ .dt-column-group-l { display: table-column-group; }
+
+ .dt--fixed-l {
+ table-layout: fixed;
+ width: 100%;
+ }
}
/*
@@ -758,6 +1357,7 @@
*/
.flex { display: -webkit-box; display: -ms-flexbox; display: flex; }
+.inline-flex { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; }
/* 1. Fix for Chrome 44 bug.
* https://code.google.com/p/chromium/issues/detail?id=506893 */
.flex-auto {
@@ -769,19 +1369,50 @@
}
.flex-none { -webkit-box-flex: 0; -ms-flex: none; flex: none; }
.flex-column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
+.flex-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
.flex-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; }
.flex-nowrap { -ms-flex-wrap: nowrap; flex-wrap: nowrap; }
+.flex-wrap-reverse { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; }
+.flex-column-reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; }
+.flex-row-reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; }
+.items-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
+.items-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }
.items-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
+.items-baseline { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; }
.items-stretch { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }
+.self-start { -ms-flex-item-align: start; align-self: flex-start; }
+.self-end { -ms-flex-item-align: end; align-self: flex-end; }
+.self-center { -ms-flex-item-align: center; align-self: center; }
+.self-baseline { -ms-flex-item-align: baseline; align-self: baseline; }
+.self-stretch { -ms-flex-item-align: stretch; align-self: stretch; }
.justify-start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
.justify-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
.justify-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.justify-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
+.justify-around { -ms-flex-pack: distribute; justify-content: space-around; }
+.content-start { -ms-flex-line-pack: start; align-content: flex-start; }
+.content-end { -ms-flex-line-pack: end; align-content: flex-end; }
+.content-center { -ms-flex-line-pack: center; align-content: center; }
+.content-between { -ms-flex-line-pack: justify; align-content: space-between; }
+.content-around { -ms-flex-line-pack: distribute; align-content: space-around; }
+.content-stretch { -ms-flex-line-pack: stretch; align-content: stretch; }
.order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; }
.order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
.order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }
+.order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; }
+.order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; }
+.order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; }
+.order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; }
+.order-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; }
+.order-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; }
+.order-last { -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; }
+.flex-grow-0 { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; }
+.flex-grow-1 { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
+.flex-shrink-0 { -ms-flex-negative: 0; flex-shrink: 0; }
+.flex-shrink-1 { -ms-flex-negative: 1; flex-shrink: 1; }
@media screen and (min-width: 30em) {
.flex-ns { display: -webkit-box; display: -ms-flexbox; display: flex; }
+ .inline-flex-ns { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; }
.flex-auto-ns {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
@@ -789,12 +1420,176 @@
min-width: 0; /* 1 */
min-height: 0; /* 1 */
}
+ .flex-none-ns { -webkit-box-flex: 0; -ms-flex: none; flex: none; }
+ .flex-column-ns { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
+ .flex-row-ns { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
+ .flex-wrap-ns { -ms-flex-wrap: wrap; flex-wrap: wrap; }
+ .flex-nowrap-ns { -ms-flex-wrap: nowrap; flex-wrap: nowrap; }
+ .flex-wrap-reverse-ns { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; }
+ .flex-column-reverse-ns { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; }
+ .flex-row-reverse-ns { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; }
+ .items-start-ns { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
+ .items-end-ns { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }
+ .items-center-ns { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
+ .items-baseline-ns { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; }
+ .items-stretch-ns { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }
+
+ .self-start-ns { -ms-flex-item-align: start; align-self: flex-start; }
+ .self-end-ns { -ms-flex-item-align: end; align-self: flex-end; }
+ .self-center-ns { -ms-flex-item-align: center; align-self: center; }
+ .self-baseline-ns { -ms-flex-item-align: baseline; align-self: baseline; }
+ .self-stretch-ns { -ms-flex-item-align: stretch; align-self: stretch; }
+
+ .justify-start-ns { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
+ .justify-end-ns { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
+ .justify-center-ns { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
+ .justify-between-ns { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
+ .justify-around-ns { -ms-flex-pack: distribute; justify-content: space-around; }
+
+ .content-start-ns { -ms-flex-line-pack: start; align-content: flex-start; }
+ .content-end-ns { -ms-flex-line-pack: end; align-content: flex-end; }
+ .content-center-ns { -ms-flex-line-pack: center; align-content: center; }
+ .content-between-ns { -ms-flex-line-pack: justify; align-content: space-between; }
+ .content-around-ns { -ms-flex-line-pack: distribute; align-content: space-around; }
+ .content-stretch-ns { -ms-flex-line-pack: stretch; align-content: stretch; }
+
+ .order-0-ns { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; }
+ .order-1-ns { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
+ .order-2-ns { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }
+ .order-3-ns { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; }
+ .order-4-ns { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; }
+ .order-5-ns { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; }
+ .order-6-ns { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; }
+ .order-7-ns { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; }
+ .order-8-ns { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; }
+ .order-last-ns { -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; }
+
+ .flex-grow-0-ns { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; }
+ .flex-grow-1-ns { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
+
+ .flex-shrink-0-ns { -ms-flex-negative: 0; flex-shrink: 0; }
+ .flex-shrink-1-ns { -ms-flex-negative: 1; flex-shrink: 1; }
}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .flex-m { display: -webkit-box; display: -ms-flexbox; display: flex; }
+ .inline-flex-m { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; }
+ .flex-auto-m {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ min-width: 0; /* 1 */
+ min-height: 0; /* 1 */
+ }
+ .flex-none-m { -webkit-box-flex: 0; -ms-flex: none; flex: none; }
+ .flex-column-m { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
+ .flex-row-m { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
+ .flex-wrap-m { -ms-flex-wrap: wrap; flex-wrap: wrap; }
+ .flex-nowrap-m { -ms-flex-wrap: nowrap; flex-wrap: nowrap; }
+ .flex-wrap-reverse-m { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; }
+ .flex-column-reverse-m { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; }
+ .flex-row-reverse-m { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; }
+ .items-start-m { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
+ .items-end-m { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }
+ .items-center-m { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
+ .items-baseline-m { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; }
+ .items-stretch-m { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }
+
+ .self-start-m { -ms-flex-item-align: start; align-self: flex-start; }
+ .self-end-m { -ms-flex-item-align: end; align-self: flex-end; }
+ .self-center-m { -ms-flex-item-align: center; align-self: center; }
+ .self-baseline-m { -ms-flex-item-align: baseline; align-self: baseline; }
+ .self-stretch-m { -ms-flex-item-align: stretch; align-self: stretch; }
+
+ .justify-start-m { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
+ .justify-end-m { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
+ .justify-center-m { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
+ .justify-between-m { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
+ .justify-around-m { -ms-flex-pack: distribute; justify-content: space-around; }
+
+ .content-start-m { -ms-flex-line-pack: start; align-content: flex-start; }
+ .content-end-m { -ms-flex-line-pack: end; align-content: flex-end; }
+ .content-center-m { -ms-flex-line-pack: center; align-content: center; }
+ .content-between-m { -ms-flex-line-pack: justify; align-content: space-between; }
+ .content-around-m { -ms-flex-line-pack: distribute; align-content: space-around; }
+ .content-stretch-m { -ms-flex-line-pack: stretch; align-content: stretch; }
+
+ .order-0-m { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; }
+ .order-1-m { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
+ .order-2-m { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }
+ .order-3-m { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; }
+ .order-4-m { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; }
+ .order-5-m { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; }
+ .order-6-m { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; }
+ .order-7-m { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; }
+ .order-8-m { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; }
+ .order-last-m { -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; }
+
+ .flex-grow-0-m { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; }
+ .flex-grow-1-m { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
+
+ .flex-shrink-0-m { -ms-flex-negative: 0; flex-shrink: 0; }
+ .flex-shrink-1-m { -ms-flex-negative: 1; flex-shrink: 1; }
+}
@media screen and (min-width: 60em) {
.flex-l { display: -webkit-box; display: -ms-flexbox; display: flex; }
+ .inline-flex-l { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; }
+ .flex-auto-l {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ min-width: 0; /* 1 */
+ min-height: 0; /* 1 */
+ }
+ .flex-none-l { -webkit-box-flex: 0; -ms-flex: none; flex: none; }
+ .flex-column-l { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
+ .flex-row-l { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
+ .flex-wrap-l { -ms-flex-wrap: wrap; flex-wrap: wrap; }
+ .flex-nowrap-l { -ms-flex-wrap: nowrap; flex-wrap: nowrap; }
+ .flex-wrap-reverse-l { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; }
+ .flex-column-reverse-l { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; }
+ .flex-row-reverse-l { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; }
+ .items-start-l { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
+ .items-end-l { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }
+ .items-center-l { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
+ .items-baseline-l { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; }
+ .items-stretch-l { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }
+
+ .self-start-l { -ms-flex-item-align: start; align-self: flex-start; }
+ .self-end-l { -ms-flex-item-align: end; align-self: flex-end; }
+ .self-center-l { -ms-flex-item-align: center; align-self: center; }
+ .self-baseline-l { -ms-flex-item-align: baseline; align-self: baseline; }
+ .self-stretch-l { -ms-flex-item-align: stretch; align-self: stretch; }
+
+ .justify-start-l { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
+ .justify-end-l { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
+ .justify-center-l { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
+ .justify-between-l { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
+ .justify-around-l { -ms-flex-pack: distribute; justify-content: space-around; }
+
+ .content-start-l { -ms-flex-line-pack: start; align-content: flex-start; }
+ .content-end-l { -ms-flex-line-pack: end; align-content: flex-end; }
+ .content-center-l { -ms-flex-line-pack: center; align-content: center; }
+ .content-between-l { -ms-flex-line-pack: justify; align-content: space-between; }
+ .content-around-l { -ms-flex-line-pack: distribute; align-content: space-around; }
+ .content-stretch-l { -ms-flex-line-pack: stretch; align-content: stretch; }
+
.order-0-l { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; }
.order-1-l { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
+ .order-2-l { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }
+ .order-3-l { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; }
+ .order-4-l { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; }
+ .order-5-l { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; }
+ .order-6-l { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; }
+ .order-7-l { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; }
+ .order-8-l { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; }
+ .order-last-l { -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; }
+
+ .flex-grow-0-l { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; }
+ .flex-grow-1-l { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
+
+ .flex-shrink-0-l { -ms-flex-negative: 0; flex-shrink: 0; }
+ .flex-shrink-1-l { -ms-flex-negative: 1; flex-shrink: 1; }
}
/*
@@ -821,7 +1616,24 @@
-l = large
*/
+.fl { float: left; _display: inline; }
+.fr { float: right; _display: inline; }
.fn { float: none; }
+@media screen and (min-width: 30em) {
+ .fl-ns { float: left; _display: inline; }
+ .fr-ns { float: right; _display: inline; }
+ .fn-ns { float: none; }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .fl-m { float: left; _display: inline; }
+ .fr-m { float: right; _display: inline; }
+ .fn-m { float: none; }
+}
+@media screen and (min-width: 60em) {
+ .fl-l { float: left; _display: inline; }
+ .fr-l { float: right; _display: inline; }
+ .fn-l { float: none; }
+}
/*@import 'tachyons/src/_font-family';*/
/*
@@ -835,6 +1647,19 @@
*/
.i { font-style: italic; }
+.fs-normal { font-style: normal; }
+@media screen and (min-width: 30em) {
+ .i-ns { font-style: italic; }
+ .fs-normal-ns { font-style: normal; }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .i-m { font-style: italic; }
+ .fs-normal-m { font-style: normal; }
+}
+@media screen and (min-width: 60em) {
+ .i-l { font-style: italic; }
+ .fs-normal-l { font-style: normal; }
+}
/*
FONT WEIGHT
@@ -860,12 +1685,56 @@
-l = large
*/
+.normal { font-weight: normal; }
.b { font-weight: bold; }
+.fw1 { font-weight: 100; }
.fw2 { font-weight: 200; }
+.fw3 { font-weight: 300; }
.fw4 { font-weight: 400; }
+.fw5 { font-weight: 500; }
+.fw6 { font-weight: 600; }
.fw7 { font-weight: 700; }
.fw8 { font-weight: 800; }
.fw9 { font-weight: 900; }
+@media screen and (min-width: 30em) {
+ .normal-ns { font-weight: normal; }
+ .b-ns { font-weight: bold; }
+ .fw1-ns { font-weight: 100; }
+ .fw2-ns { font-weight: 200; }
+ .fw3-ns { font-weight: 300; }
+ .fw4-ns { font-weight: 400; }
+ .fw5-ns { font-weight: 500; }
+ .fw6-ns { font-weight: 600; }
+ .fw7-ns { font-weight: 700; }
+ .fw8-ns { font-weight: 800; }
+ .fw9-ns { font-weight: 900; }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .normal-m { font-weight: normal; }
+ .b-m { font-weight: bold; }
+ .fw1-m { font-weight: 100; }
+ .fw2-m { font-weight: 200; }
+ .fw3-m { font-weight: 300; }
+ .fw4-m { font-weight: 400; }
+ .fw5-m { font-weight: 500; }
+ .fw6-m { font-weight: 600; }
+ .fw7-m { font-weight: 700; }
+ .fw8-m { font-weight: 800; }
+ .fw9-m { font-weight: 900; }
+}
+@media screen and (min-width: 60em) {
+ .normal-l { font-weight: normal; }
+ .b-l { font-weight: bold; }
+ .fw1-l { font-weight: 100; }
+ .fw2-l { font-weight: 200; }
+ .fw3-l { font-weight: 300; }
+ .fw4-l { font-weight: 400; }
+ .fw5-l { font-weight: 500; }
+ .fw6-l { font-weight: 600; }
+ .fw7-l { font-weight: 700; }
+ .fw8-l { font-weight: 800; }
+ .fw9-l { font-weight: 900; }
+}
/*
FORMS
@@ -875,7 +1744,7 @@
-webkit-appearance: none;
-moz-appearance: none;
}
-
+.button-reset::-moz-focus-inner,
.input-reset::-moz-focus-inner {
border: 0;
padding: 0;
@@ -919,10 +1788,77 @@
.h4 { height: 8rem; }
.h5 { height: 16rem; }
/* Height Percentages - Based off of height of parent */
+.h-25 { height: 25%; }
+.h-50 { height: 50%; }
+.h-75 { height: 75%; }
.h-100 { height: 100%; }
+.min-h-100 { min-height: 100%; }
/* Screen Height Percentage */
+.vh-25 { height: 25vh; }
+.vh-50 { height: 50vh; }
+.vh-75 { height: 75vh; }
+.vh-100 { height: 100vh; }
.min-vh-100 { min-height: 100vh; }
/* String Properties */
+.h-auto { height: auto; }
+.h-inherit { height: inherit; }
+@media screen and (min-width: 30em) {
+ .h1-ns { height: 1rem; }
+ .h2-ns { height: 2rem; }
+ .h3-ns { height: 4rem; }
+ .h4-ns { height: 8rem; }
+ .h5-ns { height: 16rem; }
+ .h-25-ns { height: 25%; }
+ .h-50-ns { height: 50%; }
+ .h-75-ns { height: 75%; }
+ .h-100-ns { height: 100%; }
+ .min-h-100-ns { min-height: 100%; }
+ .vh-25-ns { height: 25vh; }
+ .vh-50-ns { height: 50vh; }
+ .vh-75-ns { height: 75vh; }
+ .vh-100-ns { height: 100vh; }
+ .min-vh-100-ns { min-height: 100vh; }
+ .h-auto-ns { height: auto; }
+ .h-inherit-ns { height: inherit; }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .h1-m { height: 1rem; }
+ .h2-m { height: 2rem; }
+ .h3-m { height: 4rem; }
+ .h4-m { height: 8rem; }
+ .h5-m { height: 16rem; }
+ .h-25-m { height: 25%; }
+ .h-50-m { height: 50%; }
+ .h-75-m { height: 75%; }
+ .h-100-m { height: 100%; }
+ .min-h-100-m { min-height: 100%; }
+ .vh-25-m { height: 25vh; }
+ .vh-50-m { height: 50vh; }
+ .vh-75-m { height: 75vh; }
+ .vh-100-m { height: 100vh; }
+ .min-vh-100-m { min-height: 100vh; }
+ .h-auto-m { height: auto; }
+ .h-inherit-m { height: inherit; }
+}
+@media screen and (min-width: 60em) {
+ .h1-l { height: 1rem; }
+ .h2-l { height: 2rem; }
+ .h3-l { height: 4rem; }
+ .h4-l { height: 8rem; }
+ .h5-l { height: 16rem; }
+ .h-25-l { height: 25%; }
+ .h-50-l { height: 50%; }
+ .h-75-l { height: 75%; }
+ .h-100-l { height: 100%; }
+ .min-h-100-l { min-height: 100%; }
+ .vh-25-l { height: 25vh; }
+ .vh-50-l { height: 50vh; }
+ .vh-75-l { height: 75vh; }
+ .vh-100-l { height: 100vh; }
+ .min-vh-100-l { min-height: 100vh; }
+ .h-auto-l { height: auto; }
+ .h-inherit-l { height: inherit; }
+}
/*
LETTER SPACING
@@ -935,6 +1871,23 @@
*/
.tracked { letter-spacing: .1em; }
+.tracked-tight { letter-spacing: -.05em; }
+.tracked-mega { letter-spacing: .25em; }
+@media screen and (min-width: 30em) {
+ .tracked-ns { letter-spacing: .1em; }
+ .tracked-tight-ns { letter-spacing: -.05em; }
+ .tracked-mega-ns { letter-spacing: .25em; }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .tracked-m { letter-spacing: .1em; }
+ .tracked-tight-m { letter-spacing: -.05em; }
+ .tracked-mega-m { letter-spacing: .25em; }
+}
+@media screen and (min-width: 60em) {
+ .tracked-l { letter-spacing: .1em; }
+ .tracked-tight-l { letter-spacing: -.05em; }
+ .tracked-mega-l { letter-spacing: .25em; }
+}
/*
LINE HEIGHT / LEADING
@@ -949,6 +1902,21 @@
.lh-solid { line-height: 1; }
.lh-title { line-height: 1.25; }
.lh-copy { line-height: 1.5; }
+@media screen and (min-width: 30em) {
+ .lh-solid-ns { line-height: 1; }
+ .lh-title-ns { line-height: 1.25; }
+ .lh-copy-ns { line-height: 1.5; }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .lh-solid-m { line-height: 1; }
+ .lh-title-m { line-height: 1.25; }
+ .lh-copy-m { line-height: 1.5; }
+}
+@media screen and (min-width: 60em) {
+ .lh-solid-l { line-height: 1; }
+ .lh-title-l { line-height: 1.25; }
+ .lh-copy-l { line-height: 1.5; }
+}
/*
LINKS
@@ -1018,13 +1986,61 @@
/* Max Width Percentages */
.mw-100 { max-width: 100%; }
/* Max Width Scale */
+.mw1 { max-width: 1rem; }
+.mw2 { max-width: 2rem; }
.mw3 { max-width: 4rem; }
+.mw4 { max-width: 8rem; }
.mw5 { max-width: 16rem; }
+.mw6 { max-width: 32rem; }
.mw7 { max-width: 48rem; }
+.mw8 { max-width: 64rem; }
.mw9 { max-width: 96rem; }
/* Max Width String Properties */
+.mw-none { max-width: none; }
+@media screen and (min-width: 30em) {
+ .mw-100-ns { max-width: 100%; }
+
+ .mw1-ns { max-width: 1rem; }
+ .mw2-ns { max-width: 2rem; }
+ .mw3-ns { max-width: 4rem; }
+ .mw4-ns { max-width: 8rem; }
+ .mw5-ns { max-width: 16rem; }
+ .mw6-ns { max-width: 32rem; }
+ .mw7-ns { max-width: 48rem; }
+ .mw8-ns { max-width: 64rem; }
+ .mw9-ns { max-width: 96rem; }
+
+ .mw-none-ns { max-width: none; }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .mw-100-m { max-width: 100%; }
+
+ .mw1-m { max-width: 1rem; }
+ .mw2-m { max-width: 2rem; }
+ .mw3-m { max-width: 4rem; }
+ .mw4-m { max-width: 8rem; }
+ .mw5-m { max-width: 16rem; }
+ .mw6-m { max-width: 32rem; }
+ .mw7-m { max-width: 48rem; }
+ .mw8-m { max-width: 64rem; }
+ .mw9-m { max-width: 96rem; }
+
+ .mw-none-m { max-width: none; }
+}
@media screen and (min-width: 60em) {
+ .mw-100-l { max-width: 100%; }
+
+ .mw1-l { max-width: 1rem; }
+ .mw2-l { max-width: 2rem; }
+ .mw3-l { max-width: 4rem; }
+ .mw4-l { max-width: 8rem; }
.mw5-l { max-width: 16rem; }
+ .mw6-l { max-width: 32rem; }
+ .mw7-l { max-width: 48rem; }
+ .mw8-l { max-width: 64rem; }
+ .mw9-l { max-width: 96rem; }
+
+ .mw-none-l { max-width: none; }
}
/*
@@ -1068,37 +2084,99 @@
*/
/* Width Scale */
+.w1 { width: 1rem; }
+.w2 { width: 2rem; }
.w3 { width: 4rem; }
.w4 { width: 8rem; }
.w5 { width: 16rem; }
+.w-10 { width: 10%; }
.w-20 { width: 20%; }
+.w-25 { width: 25%; }
+.w-30 { width: 30%; }
+.w-33 { width: 33%; }
+.w-34 { width: 34%; }
+.w-40 { width: 40%; }
+.w-50 { width: 50%; }
+.w-60 { width: 60%; }
.w-70 { width: 70%; }
+.w-75 { width: 75%; }
.w-80 { width: 80%; }
.w-90 { width: 90%; }
.w-100 { width: 100%; }
+.w-third { width: 33.33333%; }
+.w-two-thirds { width: 66.66667%; }
.w-auto { width: auto; }
@media screen and (min-width: 30em) {
+ .w1-ns { width: 1rem; }
+ .w2-ns { width: 2rem; }
+ .w3-ns { width: 4rem; }
.w4-ns { width: 8rem; }
+ .w5-ns { width: 16rem; }
+ .w-10-ns { width: 10%; }
.w-20-ns { width: 20%; }
+ .w-25-ns { width: 25%; }
+ .w-30-ns { width: 30%; }
+ .w-33-ns { width: 33%; }
+ .w-34-ns { width: 34%; }
+ .w-40-ns { width: 40%; }
.w-50-ns { width: 50%; }
+ .w-60-ns { width: 60%; }
.w-70-ns { width: 70%; }
+ .w-75-ns { width: 75%; }
.w-80-ns { width: 80%; }
.w-90-ns { width: 90%; }
+ .w-100-ns { width: 100%; }
+ .w-third-ns { width: 33.33333%; }
+ .w-two-thirds-ns { width: 66.66667%; }
+ .w-auto-ns { width: auto; }
}
@media screen and (min-width: 30em) and (max-width: 60em) {
+ .w1-m { width: 1rem; }
+ .w2-m { width: 2rem; }
+ .w3-m { width: 4rem; }
+ .w4-m { width: 8rem; }
+ .w5-m { width: 16rem; }
+ .w-10-m { width: 10%; }
+ .w-20-m { width: 20%; }
+ .w-25-m { width: 25%; }
+ .w-30-m { width: 30%; }
+ .w-33-m { width: 33%; }
+ .w-34-m { width: 34%; }
+ .w-40-m { width: 40%; }
.w-50-m { width: 50%; }
+ .w-60-m { width: 60%; }
+ .w-70-m { width: 70%; }
+ .w-75-m { width: 75%; }
+ .w-80-m { width: 80%; }
+ .w-90-m { width: 90%; }
+ .w-100-m { width: 100%; }
+ .w-third-m { width: 33.33333%; }
+ .w-two-thirds-m { width: 66.66667%; }
+ .w-auto-m { width: auto; }
}
@media screen and (min-width: 60em) {
+ .w1-l { width: 1rem; }
+ .w2-l { width: 2rem; }
+ .w3-l { width: 4rem; }
+ .w4-l { width: 8rem; }
+ .w5-l { width: 16rem; }
.w-10-l { width: 10%; }
.w-20-l { width: 20%; }
.w-25-l { width: 25%; }
.w-30-l { width: 30%; }
+ .w-33-l { width: 33%; }
+ .w-34-l { width: 34%; }
.w-40-l { width: 40%; }
.w-50-l { width: 50%; }
.w-60-l { width: 60%; }
+ .w-70-l { width: 70%; }
+ .w-75-l { width: 75%; }
.w-80-l { width: 80%; }
.w-90-l { width: 90%; }
+ .w-100-l { width: 100%; }
.w-third-l { width: 33.33333%; }
+ .w-two-thirds-l { width: 66.66667%; }
+ .w-auto-l { width: auto; }
}
/*
@@ -1110,8 +2188,65 @@
-l = large
*/
+.overflow-visible { overflow: visible; }
.overflow-hidden { overflow: hidden; }
+.overflow-scroll { overflow: scroll; }
+.overflow-auto { overflow: auto; }
+.overflow-x-visible { overflow-x: visible; }
+.overflow-x-hidden { overflow-x: hidden; }
.overflow-x-scroll { overflow-x: scroll; }
+.overflow-x-auto { overflow-x: auto; }
+.overflow-y-visible { overflow-y: visible; }
+.overflow-y-hidden { overflow-y: hidden; }
+.overflow-y-scroll { overflow-y: scroll; }
+.overflow-y-auto { overflow-y: auto; }
+@media screen and (min-width: 30em) {
+ .overflow-visible-ns { overflow: visible; }
+ .overflow-hidden-ns { overflow: hidden; }
+ .overflow-scroll-ns { overflow: scroll; }
+ .overflow-auto-ns { overflow: auto; }
+ .overflow-x-visible-ns { overflow-x: visible; }
+ .overflow-x-hidden-ns { overflow-x: hidden; }
+ .overflow-x-scroll-ns { overflow-x: scroll; }
+ .overflow-x-auto-ns { overflow-x: auto; }
+
+ .overflow-y-visible-ns { overflow-y: visible; }
+ .overflow-y-hidden-ns { overflow-y: hidden; }
+ .overflow-y-scroll-ns { overflow-y: scroll; }
+ .overflow-y-auto-ns { overflow-y: auto; }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .overflow-visible-m { overflow: visible; }
+ .overflow-hidden-m { overflow: hidden; }
+ .overflow-scroll-m { overflow: scroll; }
+ .overflow-auto-m { overflow: auto; }
+
+ .overflow-x-visible-m { overflow-x: visible; }
+ .overflow-x-hidden-m { overflow-x: hidden; }
+ .overflow-x-scroll-m { overflow-x: scroll; }
+ .overflow-x-auto-m { overflow-x: auto; }
+
+ .overflow-y-visible-m { overflow-y: visible; }
+ .overflow-y-hidden-m { overflow-y: hidden; }
+ .overflow-y-scroll-m { overflow-y: scroll; }
+ .overflow-y-auto-m { overflow-y: auto; }
+}
+@media screen and (min-width: 60em) {
+ .overflow-visible-l { overflow: visible; }
+ .overflow-hidden-l { overflow: hidden; }
+ .overflow-scroll-l { overflow: scroll; }
+ .overflow-auto-l { overflow: auto; }
+
+ .overflow-x-visible-l { overflow-x: visible; }
+ .overflow-x-hidden-l { overflow-x: hidden; }
+ .overflow-x-scroll-l { overflow-x: scroll; }
+ .overflow-x-auto-l { overflow-x: auto; }
+
+ .overflow-y-visible-l { overflow-y: visible; }
+ .overflow-y-hidden-l { overflow-y: hidden; }
+ .overflow-y-scroll-l { overflow-y: scroll; }
+ .overflow-y-auto-l { overflow-y: auto; }
+}
/*
POSITIONING
@@ -1127,8 +2262,23 @@
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
+@media screen and (min-width: 30em) {
+ .static-ns { position: static; }
+ .relative-ns { position: relative; }
+ .absolute-ns { position: absolute; }
+ .fixed-ns { position: fixed; }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .static-m { position: static; }
+ .relative-m { position: relative; }
+ .absolute-m { position: absolute; }
+ .fixed-m { position: fixed; }
+}
@media screen and (min-width: 60em) {
+ .static-l { position: static; }
+ .relative-l { position: relative; }
.absolute-l { position: absolute; }
+ .fixed-l { position: fixed; }
}
/*
@@ -1137,9 +2287,17 @@
*/
.o-100 { opacity: 1; }
+.o-90 { opacity: .9; }
.o-80 { opacity: .8; }
+.o-70 { opacity: .7; }
+.o-60 { opacity: .6; }
.o-50 { opacity: .5; }
+.o-40 { opacity: .4; }
+.o-30 { opacity: .3; }
+.o-20 { opacity: .2; }
.o-10 { opacity: .1; }
+.o-05 { opacity: .05; }
+.o-025 { opacity: .025; }
.o-0 { opacity: 0; }
/*@import 'tachyons/src/_rotations';*/
/*
@@ -1153,9 +2311,25 @@
*/
/* Text colors */
+.black-90 { color: rgba(0, 0, 0, .9); }
+.black-80 { color: rgba(0, 0, 0, .8); }
.black-70 { color: rgba(0, 0, 0, .7); }
.black-60 { color: rgba(0, 0, 0, .6); }
+.black-50 { color: rgba(0, 0, 0, .5); }
+.black-40 { color: rgba(0, 0, 0, .4); }
+.black-30 { color: rgba(0, 0, 0, .3); }
+.black-20 { color: rgba(0, 0, 0, .2); }
+.black-10 { color: rgba(0, 0, 0, .1); }
+.black-05 { color: rgba(0, 0, 0, .05); }
.white-90 { color: rgba(255, 255, 255, .9); }
+.white-80 { color: rgba(255, 255, 255, .8); }
+.white-70 { color: rgba(255, 255, 255, .7); }
+.white-60 { color: rgba(255, 255, 255, .6); }
+.white-50 { color: rgba(255, 255, 255, .5); }
+.white-40 { color: rgba(255, 255, 255, .4); }
+.white-30 { color: rgba(255, 255, 255, .3); }
+.white-20 { color: rgba(255, 255, 255, .2); }
+.white-10 { color: rgba(255, 255, 255, .1); }
.black { color: #000; }
.near-black { color: #111; }
.dark-gray { color: #333; }
@@ -1165,15 +2339,92 @@
.light-silver { color: #aaa; }
.moon-gray { color: #ccc; }
.light-gray { color: #eee; }
+.near-white { color: #f4f4f4; }
.white { color: #fff; }
+.dark-red { color: #e7040f; }
+.red { color: #ff4136; }
+.light-red { color: #ff725c; }
+.orange { color: #ff6300; }
+.gold { color: #ffb700; }
+.yellow { color: #ffd700; }
+.light-yellow { color: #fbf1a9; }
+.purple { color: #5e2ca5; }
+.light-purple { color: #a463f2; }
+.dark-pink { color: #d5008f; }
+.hot-pink { color: #ff41b4; }
+.pink { color: #ff80cc; }
+.light-pink { color: #ffa3d7; }
+.dark-green { color: #137752; }
+.green { color: #19a974; }
.light-green { color: #9eebcf; }
+.navy { color: #001b44; }
+.dark-blue { color: #00449e; }
.blue { color: #0594CB; }
+.light-blue { color: #96ccff; }
+.lightest-blue { color: #cdecff; }
+.washed-blue { color: #f6fffe; }
+.washed-green { color: #e8fdf5; }
+.washed-yellow { color: #fffceb; }
+.washed-red { color: #ffdfdf; }
+.color-inherit { color: inherit; }
+.bg-black-90 { background-color: rgba(0, 0, 0, .9); }
+.bg-black-80 { background-color: rgba(0, 0, 0, .8); }
+.bg-black-70 { background-color: rgba(0, 0, 0, .7); }
+.bg-black-60 { background-color: rgba(0, 0, 0, .6); }
+.bg-black-50 { background-color: rgba(0, 0, 0, .5); }
+.bg-black-40 { background-color: rgba(0, 0, 0, .4); }
+.bg-black-30 { background-color: rgba(0, 0, 0, .3); }
+.bg-black-20 { background-color: rgba(0, 0, 0, .2); }
+.bg-black-10 { background-color: rgba(0, 0, 0, .1); }
+.bg-black-05 { background-color: rgba(0, 0, 0, .05); }
+.bg-white-90 { background-color: rgba(255, 255, 255, .9); }
+.bg-white-80 { background-color: rgba(255, 255, 255, .8); }
+.bg-white-70 { background-color: rgba(255, 255, 255, .7); }
+.bg-white-60 { background-color: rgba(255, 255, 255, .6); }
+.bg-white-50 { background-color: rgba(255, 255, 255, .5); }
+.bg-white-40 { background-color: rgba(255, 255, 255, .4); }
+.bg-white-30 { background-color: rgba(255, 255, 255, .3); }
+.bg-white-20 { background-color: rgba(255, 255, 255, .2); }
+.bg-white-10 { background-color: rgba(255, 255, 255, .1); }
/* Background colors */
.bg-black { background-color: #000; }
+.bg-near-black { background-color: #111; }
+.bg-dark-gray { background-color: #333; }
+.bg-mid-gray { background-color: #555; }
+.bg-gray { background-color: #777; }
+.bg-silver { background-color: #999; }
+.bg-light-silver { background-color: #aaa; }
+.bg-moon-gray { background-color: #ccc; }
.bg-light-gray { background-color: #eee; }
.bg-near-white { background-color: #f4f4f4; }
.bg-white { background-color: #fff; }
+.bg-transparent { background-color: transparent; }
+.bg-dark-red { background-color: #e7040f; }
+.bg-red { background-color: #ff4136; }
+.bg-light-red { background-color: #ff725c; }
+.bg-orange { background-color: #ff6300; }
+.bg-gold { background-color: #ffb700; }
+.bg-yellow { background-color: #ffd700; }
+.bg-light-yellow { background-color: #fbf1a9; }
+.bg-purple { background-color: #5e2ca5; }
+.bg-light-purple { background-color: #a463f2; }
+.bg-dark-pink { background-color: #d5008f; }
+.bg-hot-pink { background-color: #ff41b4; }
+.bg-pink { background-color: #ff80cc; }
+.bg-light-pink { background-color: #ffa3d7; }
+.bg-dark-green { background-color: #137752; }
+.bg-green { background-color: #19a974; }
+.bg-light-green { background-color: #9eebcf; }
+.bg-navy { background-color: #001b44; }
+.bg-dark-blue { background-color: #00449e; }
.bg-blue { background-color: #0594CB; }
+.bg-light-blue { background-color: #96ccff; }
+.bg-lightest-blue { background-color: #cdecff; }
+.bg-washed-blue { background-color: #f6fffe; }
+.bg-washed-green { background-color: #e8fdf5; }
+.bg-washed-yellow { background-color: #fffceb; }
+.bg-washed-red { background-color: #ffdfdf; }
+.bg-inherit { background-color: inherit; }
/*
SKINS:PSEUDO
@@ -1184,20 +2435,226 @@
*/
.hover-black:hover,
.hover-black:focus { color: #000; }
+.hover-near-black:hover,
+.hover-near-black:focus { color: #111; }
+.hover-dark-gray:hover,
+.hover-dark-gray:focus { color: #333; }
+.hover-mid-gray:hover,
+.hover-mid-gray:focus { color: #555; }
+.hover-gray:hover,
+.hover-gray:focus { color: #777; }
+.hover-silver:hover,
+.hover-silver:focus { color: #999; }
+.hover-light-silver:hover,
+.hover-light-silver:focus { color: #aaa; }
+.hover-moon-gray:hover,
+.hover-moon-gray:focus { color: #ccc; }
+.hover-light-gray:hover,
+.hover-light-gray:focus { color: #eee; }
+.hover-near-white:hover,
+.hover-near-white:focus { color: #f4f4f4; }
.hover-white:hover,
.hover-white:focus { color: #fff; }
+.hover-black-90:hover,
+.hover-black-90:focus { color: rgba(0, 0, 0, .9); }
+.hover-black-80:hover,
+.hover-black-80:focus { color: rgba(0, 0, 0, .8); }
+.hover-black-70:hover,
+.hover-black-70:focus { color: rgba(0, 0, 0, .7); }
+.hover-black-60:hover,
+.hover-black-60:focus { color: rgba(0, 0, 0, .6); }
+.hover-black-50:hover,
+.hover-black-50:focus { color: rgba(0, 0, 0, .5); }
+.hover-black-40:hover,
+.hover-black-40:focus { color: rgba(0, 0, 0, .4); }
+.hover-black-30:hover,
+.hover-black-30:focus { color: rgba(0, 0, 0, .3); }
+.hover-black-20:hover,
+.hover-black-20:focus { color: rgba(0, 0, 0, .2); }
+.hover-black-10:hover,
+.hover-black-10:focus { color: rgba(0, 0, 0, .1); }
+.hover-white-90:hover,
+.hover-white-90:focus { color: rgba(255, 255, 255, .9); }
+.hover-white-80:hover,
+.hover-white-80:focus { color: rgba(255, 255, 255, .8); }
+.hover-white-70:hover,
+.hover-white-70:focus { color: rgba(255, 255, 255, .7); }
+.hover-white-60:hover,
+.hover-white-60:focus { color: rgba(255, 255, 255, .6); }
+.hover-white-50:hover,
+.hover-white-50:focus { color: rgba(255, 255, 255, .5); }
+.hover-white-40:hover,
+.hover-white-40:focus { color: rgba(255, 255, 255, .4); }
+.hover-white-30:hover,
+.hover-white-30:focus { color: rgba(255, 255, 255, .3); }
+.hover-white-20:hover,
+.hover-white-20:focus { color: rgba(255, 255, 255, .2); }
+.hover-white-10:hover,
+.hover-white-10:focus { color: rgba(255, 255, 255, .1); }
+.hover-inherit:hover,
+.hover-inherit:focus { color: inherit; }
.hover-bg-black:hover,
.hover-bg-black:focus { background-color: #000; }
+.hover-bg-near-black:hover,
+.hover-bg-near-black:focus { background-color: #111; }
+.hover-bg-dark-gray:hover,
+.hover-bg-dark-gray:focus { background-color: #333; }
+.hover-bg-mid-gray:hover,
+.hover-bg-mid-gray:focus { background-color: #555; }
.hover-bg-gray:hover,
.hover-bg-gray:focus { background-color: #777; }
+.hover-bg-silver:hover,
+.hover-bg-silver:focus { background-color: #999; }
+.hover-bg-light-silver:hover,
+.hover-bg-light-silver:focus { background-color: #aaa; }
+.hover-bg-moon-gray:hover,
+.hover-bg-moon-gray:focus { background-color: #ccc; }
.hover-bg-light-gray:hover,
.hover-bg-light-gray:focus { background-color: #eee; }
.hover-bg-near-white:hover,
.hover-bg-near-white:focus { background-color: #f4f4f4; }
+.hover-bg-white:hover,
+.hover-bg-white:focus { background-color: #fff; }
+.hover-bg-transparent:hover,
+.hover-bg-transparent:focus { background-color: transparent; }
+.hover-bg-black-90:hover,
+.hover-bg-black-90:focus { background-color: rgba(0, 0, 0, .9); }
+.hover-bg-black-80:hover,
+.hover-bg-black-80:focus { background-color: rgba(0, 0, 0, .8); }
+.hover-bg-black-70:hover,
+.hover-bg-black-70:focus { background-color: rgba(0, 0, 0, .7); }
+.hover-bg-black-60:hover,
+.hover-bg-black-60:focus { background-color: rgba(0, 0, 0, .6); }
+.hover-bg-black-50:hover,
+.hover-bg-black-50:focus { background-color: rgba(0, 0, 0, .5); }
+.hover-bg-black-40:hover,
+.hover-bg-black-40:focus { background-color: rgba(0, 0, 0, .4); }
+.hover-bg-black-30:hover,
+.hover-bg-black-30:focus { background-color: rgba(0, 0, 0, .3); }
+.hover-bg-black-20:hover,
+.hover-bg-black-20:focus { background-color: rgba(0, 0, 0, .2); }
+.hover-bg-black-10:hover,
+.hover-bg-black-10:focus { background-color: rgba(0, 0, 0, .1); }
+.hover-bg-white-90:hover,
+.hover-bg-white-90:focus { background-color: rgba(255, 255, 255, .9); }
+.hover-bg-white-80:hover,
+.hover-bg-white-80:focus { background-color: rgba(255, 255, 255, .8); }
+.hover-bg-white-70:hover,
+.hover-bg-white-70:focus { background-color: rgba(255, 255, 255, .7); }
+.hover-bg-white-60:hover,
+.hover-bg-white-60:focus { background-color: rgba(255, 255, 255, .6); }
+.hover-bg-white-50:hover,
+.hover-bg-white-50:focus { background-color: rgba(255, 255, 255, .5); }
+.hover-bg-white-40:hover,
+.hover-bg-white-40:focus { background-color: rgba(255, 255, 255, .4); }
+.hover-bg-white-30:hover,
+.hover-bg-white-30:focus { background-color: rgba(255, 255, 255, .3); }
+.hover-bg-white-20:hover,
+.hover-bg-white-20:focus { background-color: rgba(255, 255, 255, .2); }
+.hover-bg-white-10:hover,
+.hover-bg-white-10:focus { background-color: rgba(255, 255, 255, .1); }
+.hover-dark-red:hover,
+.hover-dark-red:focus { color: #e7040f; }
+.hover-red:hover,
+.hover-red:focus { color: #ff4136; }
+.hover-light-red:hover,
+.hover-light-red:focus { color: #ff725c; }
+.hover-orange:hover,
+.hover-orange:focus { color: #ff6300; }
+.hover-gold:hover,
+.hover-gold:focus { color: #ffb700; }
+.hover-yellow:hover,
+.hover-yellow:focus { color: #ffd700; }
+.hover-light-yellow:hover,
+.hover-light-yellow:focus { color: #fbf1a9; }
+.hover-purple:hover,
+.hover-purple:focus { color: #5e2ca5; }
+.hover-light-purple:hover,
+.hover-light-purple:focus { color: #a463f2; }
+.hover-dark-pink:hover,
+.hover-dark-pink:focus { color: #d5008f; }
+.hover-hot-pink:hover,
+.hover-hot-pink:focus { color: #ff41b4; }
+.hover-pink:hover,
+.hover-pink:focus { color: #ff80cc; }
+.hover-light-pink:hover,
+.hover-light-pink:focus { color: #ffa3d7; }
+.hover-dark-green:hover,
+.hover-dark-green:focus { color: #137752; }
+.hover-green:hover,
+.hover-green:focus { color: #19a974; }
+.hover-light-green:hover,
+.hover-light-green:focus { color: #9eebcf; }
+.hover-navy:hover,
+.hover-navy:focus { color: #001b44; }
+.hover-dark-blue:hover,
+.hover-dark-blue:focus { color: #00449e; }
.hover-blue:hover,
.hover-blue:focus { color: #0594CB; }
+.hover-light-blue:hover,
+.hover-light-blue:focus { color: #96ccff; }
+.hover-lightest-blue:hover,
+.hover-lightest-blue:focus { color: #cdecff; }
+.hover-washed-blue:hover,
+.hover-washed-blue:focus { color: #f6fffe; }
+.hover-washed-green:hover,
+.hover-washed-green:focus { color: #e8fdf5; }
+.hover-washed-yellow:hover,
+.hover-washed-yellow:focus { color: #fffceb; }
+.hover-washed-red:hover,
+.hover-washed-red:focus { color: #ffdfdf; }
+.hover-bg-dark-red:hover,
+.hover-bg-dark-red:focus { background-color: #e7040f; }
+.hover-bg-red:hover,
+.hover-bg-red:focus { background-color: #ff4136; }
+.hover-bg-light-red:hover,
+.hover-bg-light-red:focus { background-color: #ff725c; }
+.hover-bg-orange:hover,
+.hover-bg-orange:focus { background-color: #ff6300; }
+.hover-bg-gold:hover,
+.hover-bg-gold:focus { background-color: #ffb700; }
+.hover-bg-yellow:hover,
+.hover-bg-yellow:focus { background-color: #ffd700; }
+.hover-bg-light-yellow:hover,
+.hover-bg-light-yellow:focus { background-color: #fbf1a9; }
+.hover-bg-purple:hover,
+.hover-bg-purple:focus { background-color: #5e2ca5; }
+.hover-bg-light-purple:hover,
+.hover-bg-light-purple:focus { background-color: #a463f2; }
+.hover-bg-dark-pink:hover,
+.hover-bg-dark-pink:focus { background-color: #d5008f; }
+.hover-bg-hot-pink:hover,
+.hover-bg-hot-pink:focus { background-color: #ff41b4; }
+.hover-bg-pink:hover,
+.hover-bg-pink:focus { background-color: #ff80cc; }
+.hover-bg-light-pink:hover,
+.hover-bg-light-pink:focus { background-color: #ffa3d7; }
+.hover-bg-dark-green:hover,
+.hover-bg-dark-green:focus { background-color: #137752; }
.hover-bg-green:hover,
.hover-bg-green:focus { background-color: #19a974; }
+.hover-bg-light-green:hover,
+.hover-bg-light-green:focus { background-color: #9eebcf; }
+.hover-bg-navy:hover,
+.hover-bg-navy:focus { background-color: #001b44; }
+.hover-bg-dark-blue:hover,
+.hover-bg-dark-blue:focus { background-color: #00449e; }
+.hover-bg-blue:hover,
+.hover-bg-blue:focus { background-color: #0594CB; }
+.hover-bg-light-blue:hover,
+.hover-bg-light-blue:focus { background-color: #96ccff; }
+.hover-bg-lightest-blue:hover,
+.hover-bg-lightest-blue:focus { background-color: #cdecff; }
+.hover-bg-washed-blue:hover,
+.hover-bg-washed-blue:focus { background-color: #f6fffe; }
+.hover-bg-washed-green:hover,
+.hover-bg-washed-green:focus { background-color: #e8fdf5; }
+.hover-bg-washed-yellow:hover,
+.hover-bg-washed-yellow:focus { background-color: #fffceb; }
+.hover-bg-washed-red:hover,
+.hover-bg-washed-red:focus { background-color: #ffdfdf; }
+.hover-bg-inherit:hover,
+.hover-bg-inherit:focus { background-color: inherit; }
/* Variables */
/*
SPACING
@@ -1239,25 +2696,44 @@
.pa3 { padding: 1rem; }
.pa4 { padding: 2rem; }
.pa5 { padding: 4rem; }
+.pa6 { padding: 8rem; }
+.pa7 { padding: 16rem; }
.pl0 { padding-left: 0; }
.pl1 { padding-left: .25rem; }
.pl2 { padding-left: .5rem; }
.pl3 { padding-left: 1rem; }
.pl4 { padding-left: 2rem; }
+.pl5 { padding-left: 4rem; }
+.pl6 { padding-left: 8rem; }
+.pl7 { padding-left: 16rem; }
+.pr0 { padding-right: 0; }
.pr1 { padding-right: .25rem; }
.pr2 { padding-right: .5rem; }
.pr3 { padding-right: 1rem; }
+.pr4 { padding-right: 2rem; }
+.pr5 { padding-right: 4rem; }
+.pr6 { padding-right: 8rem; }
+.pr7 { padding-right: 16rem; }
+.pb0 { padding-bottom: 0; }
.pb1 { padding-bottom: .25rem; }
.pb2 { padding-bottom: .5rem; }
.pb3 { padding-bottom: 1rem; }
.pb4 { padding-bottom: 2rem; }
.pb5 { padding-bottom: 4rem; }
+.pb6 { padding-bottom: 8rem; }
.pb7 { padding-bottom: 16rem; }
+.pt0 { padding-top: 0; }
.pt1 { padding-top: .25rem; }
.pt2 { padding-top: .5rem; }
.pt3 { padding-top: 1rem; }
.pt4 { padding-top: 2rem; }
.pt5 { padding-top: 4rem; }
+.pt6 { padding-top: 8rem; }
+.pt7 { padding-top: 16rem; }
+.pv0 {
+ padding-top: 0;
+ padding-bottom: 0;
+}
.pv1 {
padding-top: .25rem;
padding-bottom: .25rem;
@@ -1274,6 +2750,18 @@
padding-top: 2rem;
padding-bottom: 2rem;
}
+.pv5 {
+ padding-top: 4rem;
+ padding-bottom: 4rem;
+}
+.pv6 {
+ padding-top: 8rem;
+ padding-bottom: 8rem;
+}
+.pv7 {
+ padding-top: 16rem;
+ padding-bottom: 16rem;
+}
.ph0 {
padding-left: 0;
padding-right: 0;
@@ -1298,17 +2786,38 @@
padding-left: 4rem;
padding-right: 4rem;
}
+.ph6 {
+ padding-left: 8rem;
+ padding-right: 8rem;
+}
+.ph7 {
+ padding-left: 16rem;
+ padding-right: 16rem;
+}
.ma0 { margin: 0; }
+.ma1 { margin: .25rem; }
.ma2 { margin: .5rem; }
+.ma3 { margin: 1rem; }
+.ma4 { margin: 2rem; }
+.ma5 { margin: 4rem; }
+.ma6 { margin: 8rem; }
+.ma7 { margin: 16rem; }
.ml0 { margin-left: 0; }
.ml1 { margin-left: .25rem; }
+.ml2 { margin-left: .5rem; }
+.ml3 { margin-left: 1rem; }
.ml4 { margin-left: 2rem; }
+.ml5 { margin-left: 4rem; }
.ml6 { margin-left: 8rem; }
+.ml7 { margin-left: 16rem; }
.mr0 { margin-right: 0; }
+.mr1 { margin-right: .25rem; }
.mr2 { margin-right: .5rem; }
.mr3 { margin-right: 1rem; }
.mr4 { margin-right: 2rem; }
.mr5 { margin-right: 4rem; }
+.mr6 { margin-right: 8rem; }
+.mr7 { margin-right: 16rem; }
.mb0 { margin-bottom: 0; }
.mb1 { margin-bottom: .25rem; }
.mb2 { margin-bottom: .5rem; }
@@ -1315,6 +2824,7 @@
.mb3 { margin-bottom: 1rem; }
.mb4 { margin-bottom: 2rem; }
.mb5 { margin-bottom: 4rem; }
+.mb6 { margin-bottom: 8rem; }
.mb7 { margin-bottom: 16rem; }
.mt0 { margin-top: 0; }
.mt1 { margin-top: .25rem; }
@@ -1322,6 +2832,8 @@
.mt3 { margin-top: 1rem; }
.mt4 { margin-top: 2rem; }
.mt5 { margin-top: 4rem; }
+.mt6 { margin-top: 8rem; }
+.mt7 { margin-top: 16rem; }
.mv0 {
margin-top: 0;
margin-bottom: 0;
@@ -1342,23 +2854,112 @@
margin-top: 2rem;
margin-bottom: 2rem;
}
+.mv5 {
+ margin-top: 4rem;
+ margin-bottom: 4rem;
+}
.mv6 {
margin-top: 8rem;
margin-bottom: 8rem;
}
+.mv7 {
+ margin-top: 16rem;
+ margin-bottom: 16rem;
+}
+.mh0 {
+ margin-left: 0;
+ margin-right: 0;
+}
+.mh1 {
+ margin-left: .25rem;
+ margin-right: .25rem;
+}
+.mh2 {
+ margin-left: .5rem;
+ margin-right: .5rem;
+}
+.mh3 {
+ margin-left: 1rem;
+ margin-right: 1rem;
+}
+.mh4 {
+ margin-left: 2rem;
+ margin-right: 2rem;
+}
+.mh5 {
+ margin-left: 4rem;
+ margin-right: 4rem;
+}
+.mh6 {
+ margin-left: 8rem;
+ margin-right: 8rem;
+}
+.mh7 {
+ margin-left: 16rem;
+ margin-right: 16rem;
+}
@media screen and (min-width: 30em) {
+ .pa0-ns { padding: 0; }
+ .pa1-ns { padding: .25rem; }
+ .pa2-ns { padding: .5rem; }
+ .pa3-ns { padding: 1rem; }
.pa4-ns { padding: 2rem; }
+ .pa5-ns { padding: 4rem; }
+ .pa6-ns { padding: 8rem; }
+ .pa7-ns { padding: 16rem; }
+
+ .pl0-ns { padding-left: 0; }
+ .pl1-ns { padding-left: .25rem; }
+ .pl2-ns { padding-left: .5rem; }
+ .pl3-ns { padding-left: 1rem; }
.pl4-ns { padding-left: 2rem; }
+ .pl5-ns { padding-left: 4rem; }
+ .pl6-ns { padding-left: 8rem; }
+ .pl7-ns { padding-left: 16rem; }
+ .pr0-ns { padding-right: 0; }
+ .pr1-ns { padding-right: .25rem; }
+ .pr2-ns { padding-right: .5rem; }
+ .pr3-ns { padding-right: 1rem; }
+ .pr4-ns { padding-right: 2rem; }
+ .pr5-ns { padding-right: 4rem; }
+ .pr6-ns { padding-right: 8rem; }
+ .pr7-ns { padding-right: 16rem; }
+
.pb0-ns { padding-bottom: 0; }
+ .pb1-ns { padding-bottom: .25rem; }
+ .pb2-ns { padding-bottom: .5rem; }
+ .pb3-ns { padding-bottom: 1rem; }
+ .pb4-ns { padding-bottom: 2rem; }
+ .pb5-ns { padding-bottom: 4rem; }
.pb6-ns { padding-bottom: 8rem; }
+ .pb7-ns { padding-bottom: 16rem; }
+
+ .pt0-ns { padding-top: 0; }
+ .pt1-ns { padding-top: .25rem; }
+ .pt2-ns { padding-top: .5rem; }
.pt3-ns { padding-top: 1rem; }
+ .pt4-ns { padding-top: 2rem; }
.pt5-ns { padding-top: 4rem; }
+ .pt6-ns { padding-top: 8rem; }
+ .pt7-ns { padding-top: 16rem; }
.pv0-ns {
padding-top: 0;
padding-bottom: 0;
}
+ .pv1-ns {
+ padding-top: .25rem;
+ padding-bottom: .25rem;
+ }
+ .pv2-ns {
+ padding-top: .5rem;
+ padding-bottom: .5rem;
+ }
+ .pv3-ns {
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+ }
.pv4-ns {
padding-top: 2rem;
padding-bottom: 2rem;
@@ -1371,6 +2972,26 @@
padding-top: 8rem;
padding-bottom: 8rem;
}
+ .pv7-ns {
+ padding-top: 16rem;
+ padding-bottom: 16rem;
+ }
+ .ph0-ns {
+ padding-left: 0;
+ padding-right: 0;
+ }
+ .ph1-ns {
+ padding-left: .25rem;
+ padding-right: .25rem;
+ }
+ .ph2-ns {
+ padding-left: .5rem;
+ padding-right: .5rem;
+ }
+ .ph3-ns {
+ padding-left: 1rem;
+ padding-right: 1rem;
+ }
.ph4-ns {
padding-left: 2rem;
padding-right: 2rem;
@@ -1379,29 +3000,413 @@
padding-left: 4rem;
padding-right: 4rem;
}
+ .ph6-ns {
+ padding-left: 8rem;
+ padding-right: 8rem;
+ }
+ .ph7-ns {
+ padding-left: 16rem;
+ padding-right: 16rem;
+ }
+ .ma0-ns { margin: 0; }
+ .ma1-ns { margin: .25rem; }
+ .ma2-ns { margin: .5rem; }
+ .ma3-ns { margin: 1rem; }
+ .ma4-ns { margin: 2rem; }
+ .ma5-ns { margin: 4rem; }
+ .ma6-ns { margin: 8rem; }
+ .ma7-ns { margin: 16rem; }
+
.ml0-ns { margin-left: 0; }
+ .ml1-ns { margin-left: .25rem; }
+ .ml2-ns { margin-left: .5rem; }
+ .ml3-ns { margin-left: 1rem; }
+ .ml4-ns { margin-left: 2rem; }
+ .ml5-ns { margin-left: 4rem; }
+ .ml6-ns { margin-left: 8rem; }
+ .ml7-ns { margin-left: 16rem; }
+ .mr0-ns { margin-right: 0; }
+ .mr1-ns { margin-right: .25rem; }
+ .mr2-ns { margin-right: .5rem; }
+ .mr3-ns { margin-right: 1rem; }
+ .mr4-ns { margin-right: 2rem; }
+ .mr5-ns { margin-right: 4rem; }
+ .mr6-ns { margin-right: 8rem; }
+ .mr7-ns { margin-right: 16rem; }
+
.mb0-ns { margin-bottom: 0; }
+ .mb1-ns { margin-bottom: .25rem; }
+ .mb2-ns { margin-bottom: .5rem; }
+ .mb3-ns { margin-bottom: 1rem; }
+ .mb4-ns { margin-bottom: 2rem; }
+ .mb5-ns { margin-bottom: 4rem; }
+ .mb6-ns { margin-bottom: 8rem; }
+ .mb7-ns { margin-bottom: 16rem; }
.mt0-ns { margin-top: 0; }
+ .mt1-ns { margin-top: .25rem; }
+ .mt2-ns { margin-top: .5rem; }
+ .mt3-ns { margin-top: 1rem; }
.mt4-ns { margin-top: 2rem; }
+ .mt5-ns { margin-top: 4rem; }
+ .mt6-ns { margin-top: 8rem; }
+ .mt7-ns { margin-top: 16rem; }
+ .mv0-ns {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+ .mv1-ns {
+ margin-top: .25rem;
+ margin-bottom: .25rem;
+ }
+ .mv2-ns {
+ margin-top: .5rem;
+ margin-bottom: .5rem;
+ }
+ .mv3-ns {
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+ }
+ .mv4-ns {
+ margin-top: 2rem;
+ margin-bottom: 2rem;
+ }
+ .mv5-ns {
+ margin-top: 4rem;
+ margin-bottom: 4rem;
+ }
+ .mv6-ns {
+ margin-top: 8rem;
+ margin-bottom: 8rem;
+ }
+ .mv7-ns {
+ margin-top: 16rem;
+ margin-bottom: 16rem;
+ }
+
+ .mh0-ns {
+ margin-left: 0;
+ margin-right: 0;
+ }
+ .mh1-ns {
+ margin-left: .25rem;
+ margin-right: .25rem;
+ }
+ .mh2-ns {
+ margin-left: .5rem;
+ margin-right: .5rem;
+ }
+ .mh3-ns {
+ margin-left: 1rem;
+ margin-right: 1rem;
+ }
+ .mh4-ns {
+ margin-left: 2rem;
+ margin-right: 2rem;
+ }
+ .mh5-ns {
+ margin-left: 4rem;
+ margin-right: 4rem;
+ }
+ .mh6-ns {
+ margin-left: 8rem;
+ margin-right: 8rem;
+ }
+ .mh7-ns {
+ margin-left: 16rem;
+ margin-right: 16rem;
+ }
+
}
@media screen and (min-width: 30em) and (max-width: 60em) {
+ .pa0-m { padding: 0; }
+ .pa1-m { padding: .25rem; }
+ .pa2-m { padding: .5rem; }
+ .pa3-m { padding: 1rem; }
.pa4-m { padding: 2rem; }
+ .pa5-m { padding: 4rem; }
+ .pa6-m { padding: 8rem; }
+ .pa7-m { padding: 16rem; }
+
+ .pl0-m { padding-left: 0; }
+ .pl1-m { padding-left: .25rem; }
+ .pl2-m { padding-left: .5rem; }
+ .pl3-m { padding-left: 1rem; }
+ .pl4-m { padding-left: 2rem; }
+ .pl5-m { padding-left: 4rem; }
+ .pl6-m { padding-left: 8rem; }
+ .pl7-m { padding-left: 16rem; }
+
+ .pr0-m { padding-right: 0; }
+ .pr1-m { padding-right: .25rem; }
+ .pr2-m { padding-right: .5rem; }
+ .pr3-m { padding-right: 1rem; }
+ .pr4-m { padding-right: 2rem; }
+ .pr5-m { padding-right: 4rem; }
+ .pr6-m { padding-right: 8rem; }
+ .pr7-m { padding-right: 16rem; }
+
+ .pb0-m { padding-bottom: 0; }
+ .pb1-m { padding-bottom: .25rem; }
+ .pb2-m { padding-bottom: .5rem; }
+ .pb3-m { padding-bottom: 1rem; }
+ .pb4-m { padding-bottom: 2rem; }
+ .pb5-m { padding-bottom: 4rem; }
+ .pb6-m { padding-bottom: 8rem; }
+ .pb7-m { padding-bottom: 16rem; }
+
+ .pt0-m { padding-top: 0; }
+ .pt1-m { padding-top: .25rem; }
+ .pt2-m { padding-top: .5rem; }
+ .pt3-m { padding-top: 1rem; }
+ .pt4-m { padding-top: 2rem; }
+ .pt5-m { padding-top: 4rem; }
+ .pt6-m { padding-top: 8rem; }
+ .pt7-m { padding-top: 16rem; }
+
+ .pv0-m {
+ padding-top: 0;
+ padding-bottom: 0;
+ }
+ .pv1-m {
+ padding-top: .25rem;
+ padding-bottom: .25rem;
+ }
+ .pv2-m {
+ padding-top: .5rem;
+ padding-bottom: .5rem;
+ }
+ .pv3-m {
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+ }
+ .pv4-m {
+ padding-top: 2rem;
+ padding-bottom: 2rem;
+ }
+ .pv5-m {
+ padding-top: 4rem;
+ padding-bottom: 4rem;
+ }
+ .pv6-m {
+ padding-top: 8rem;
+ padding-bottom: 8rem;
+ }
+ .pv7-m {
+ padding-top: 16rem;
+ padding-bottom: 16rem;
+ }
+
+ .ph0-m {
+ padding-left: 0;
+ padding-right: 0;
+ }
+ .ph1-m {
+ padding-left: .25rem;
+ padding-right: .25rem;
+ }
+ .ph2-m {
+ padding-left: .5rem;
+ padding-right: .5rem;
+ }
+ .ph3-m {
+ padding-left: 1rem;
+ padding-right: 1rem;
+ }
+ .ph4-m {
+ padding-left: 2rem;
+ padding-right: 2rem;
+ }
.ph5-m {
padding-left: 4rem;
padding-right: 4rem;
}
+ .ph6-m {
+ padding-left: 8rem;
+ padding-right: 8rem;
+ }
+ .ph7-m {
+ padding-left: 16rem;
+ padding-right: 16rem;
+ }
+ .ma0-m { margin: 0; }
+ .ma1-m { margin: .25rem; }
+ .ma2-m { margin: .5rem; }
+ .ma3-m { margin: 1rem; }
+ .ma4-m { margin: 2rem; }
+ .ma5-m { margin: 4rem; }
+ .ma6-m { margin: 8rem; }
+ .ma7-m { margin: 16rem; }
+
+ .ml0-m { margin-left: 0; }
+ .ml1-m { margin-left: .25rem; }
+ .ml2-m { margin-left: .5rem; }
+ .ml3-m { margin-left: 1rem; }
+ .ml4-m { margin-left: 2rem; }
+ .ml5-m { margin-left: 4rem; }
+ .ml6-m { margin-left: 8rem; }
+ .ml7-m { margin-left: 16rem; }
+
+ .mr0-m { margin-right: 0; }
+ .mr1-m { margin-right: .25rem; }
+ .mr2-m { margin-right: .5rem; }
+ .mr3-m { margin-right: 1rem; }
+ .mr4-m { margin-right: 2rem; }
+ .mr5-m { margin-right: 4rem; }
+ .mr6-m { margin-right: 8rem; }
+ .mr7-m { margin-right: 16rem; }
+
+ .mb0-m { margin-bottom: 0; }
+ .mb1-m { margin-bottom: .25rem; }
+ .mb2-m { margin-bottom: .5rem; }
+ .mb3-m { margin-bottom: 1rem; }
+ .mb4-m { margin-bottom: 2rem; }
+ .mb5-m { margin-bottom: 4rem; }
+ .mb6-m { margin-bottom: 8rem; }
+ .mb7-m { margin-bottom: 16rem; }
+
+ .mt0-m { margin-top: 0; }
+ .mt1-m { margin-top: .25rem; }
+ .mt2-m { margin-top: .5rem; }
+ .mt3-m { margin-top: 1rem; }
+ .mt4-m { margin-top: 2rem; }
+ .mt5-m { margin-top: 4rem; }
+ .mt6-m { margin-top: 8rem; }
+ .mt7-m { margin-top: 16rem; }
+
+ .mv0-m {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+ .mv1-m {
+ margin-top: .25rem;
+ margin-bottom: .25rem;
+ }
+ .mv2-m {
+ margin-top: .5rem;
+ margin-bottom: .5rem;
+ }
+ .mv3-m {
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+ }
+ .mv4-m {
+ margin-top: 2rem;
+ margin-bottom: 2rem;
+ }
+ .mv5-m {
+ margin-top: 4rem;
+ margin-bottom: 4rem;
+ }
+ .mv6-m {
+ margin-top: 8rem;
+ margin-bottom: 8rem;
+ }
+ .mv7-m {
+ margin-top: 16rem;
+ margin-bottom: 16rem;
+ }
+
+ .mh0-m {
+ margin-left: 0;
+ margin-right: 0;
+ }
+ .mh1-m {
+ margin-left: .25rem;
+ margin-right: .25rem;
+ }
+ .mh2-m {
+ margin-left: .5rem;
+ margin-right: .5rem;
+ }
+ .mh3-m {
+ margin-left: 1rem;
+ margin-right: 1rem;
+ }
+ .mh4-m {
+ margin-left: 2rem;
+ margin-right: 2rem;
+ }
+ .mh5-m {
+ margin-left: 4rem;
+ margin-right: 4rem;
+ }
+ .mh6-m {
+ margin-left: 8rem;
+ margin-right: 8rem;
+ }
+ .mh7-m {
+ margin-left: 16rem;
+ margin-right: 16rem;
+ }
+
}
@media screen and (min-width: 60em) {
+ .pa0-l { padding: 0; }
+ .pa1-l { padding: .25rem; }
+ .pa2-l { padding: .5rem; }
+ .pa3-l { padding: 1rem; }
.pa4-l { padding: 2rem; }
+ .pa5-l { padding: 4rem; }
+ .pa6-l { padding: 8rem; }
+ .pa7-l { padding: 16rem; }
+
+ .pl0-l { padding-left: 0; }
+ .pl1-l { padding-left: .25rem; }
+ .pl2-l { padding-left: .5rem; }
+ .pl3-l { padding-left: 1rem; }
+ .pl4-l { padding-left: 2rem; }
.pl5-l { padding-left: 4rem; }
+ .pl6-l { padding-left: 8rem; }
+ .pl7-l { padding-left: 16rem; }
+
+ .pr0-l { padding-right: 0; }
+ .pr1-l { padding-right: .25rem; }
+ .pr2-l { padding-right: .5rem; }
+ .pr3-l { padding-right: 1rem; }
+ .pr4-l { padding-right: 2rem; }
+ .pr5-l { padding-right: 4rem; }
+ .pr6-l { padding-right: 8rem; }
+ .pr7-l { padding-right: 16rem; }
+
+ .pb0-l { padding-bottom: 0; }
+ .pb1-l { padding-bottom: .25rem; }
+ .pb2-l { padding-bottom: .5rem; }
+ .pb3-l { padding-bottom: 1rem; }
+ .pb4-l { padding-bottom: 2rem; }
.pb5-l { padding-bottom: 4rem; }
+ .pb6-l { padding-bottom: 8rem; }
+ .pb7-l { padding-bottom: 16rem; }
.pt0-l { padding-top: 0; }
+ .pt1-l { padding-top: .25rem; }
+ .pt2-l { padding-top: .5rem; }
+ .pt3-l { padding-top: 1rem; }
+ .pt4-l { padding-top: 2rem; }
+ .pt5-l { padding-top: 4rem; }
+ .pt6-l { padding-top: 8rem; }
+ .pt7-l { padding-top: 16rem; }
+
+ .pv0-l {
+ padding-top: 0;
+ padding-bottom: 0;
+ }
+ .pv1-l {
+ padding-top: .25rem;
+ padding-bottom: .25rem;
+ }
+ .pv2-l {
+ padding-top: .5rem;
+ padding-bottom: .5rem;
+ }
+ .pv3-l {
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+ }
.pv4-l {
padding-top: 2rem;
padding-bottom: 2rem;
@@ -1410,11 +3415,31 @@
padding-top: 4rem;
padding-bottom: 4rem;
}
+ .pv6-l {
+ padding-top: 8rem;
+ padding-bottom: 8rem;
+ }
+ .pv7-l {
+ padding-top: 16rem;
+ padding-bottom: 16rem;
+ }
.ph0-l {
padding-left: 0;
padding-right: 0;
}
+ .ph1-l {
+ padding-left: .25rem;
+ padding-right: .25rem;
+ }
+ .ph2-l {
+ padding-left: .5rem;
+ padding-right: .5rem;
+ }
+ .ph3-l {
+ padding-left: 1rem;
+ padding-right: 1rem;
+ }
.ph4-l {
padding-left: 2rem;
padding-right: 2rem;
@@ -1423,12 +3448,125 @@
padding-left: 4rem;
padding-right: 4rem;
}
+ .ph6-l {
+ padding-left: 8rem;
+ padding-right: 8rem;
+ }
+ .ph7-l {
+ padding-left: 16rem;
+ padding-right: 16rem;
+ }
+
+ .ma0-l { margin: 0; }
+ .ma1-l { margin: .25rem; }
+ .ma2-l { margin: .5rem; }
+ .ma3-l { margin: 1rem; }
+ .ma4-l { margin: 2rem; }
+ .ma5-l { margin: 4rem; }
+ .ma6-l { margin: 8rem; }
+ .ma7-l { margin: 16rem; }
+
+ .ml0-l { margin-left: 0; }
+ .ml1-l { margin-left: .25rem; }
+ .ml2-l { margin-left: .5rem; }
+ .ml3-l { margin-left: 1rem; }
+ .ml4-l { margin-left: 2rem; }
+ .ml5-l { margin-left: 4rem; }
+ .ml6-l { margin-left: 8rem; }
+ .ml7-l { margin-left: 16rem; }
+
+ .mr0-l { margin-right: 0; }
+ .mr1-l { margin-right: .25rem; }
+ .mr2-l { margin-right: .5rem; }
+ .mr3-l { margin-right: 1rem; }
.mr4-l { margin-right: 2rem; }
+ .mr5-l { margin-right: 4rem; }
+ .mr6-l { margin-right: 8rem; }
+ .mr7-l { margin-right: 16rem; }
.mb0-l { margin-bottom: 0; }
+ .mb1-l { margin-bottom: .25rem; }
+ .mb2-l { margin-bottom: .5rem; }
+ .mb3-l { margin-bottom: 1rem; }
+ .mb4-l { margin-bottom: 2rem; }
+ .mb5-l { margin-bottom: 4rem; }
+ .mb6-l { margin-bottom: 8rem; }
+ .mb7-l { margin-bottom: 16rem; }
.mt0-l { margin-top: 0; }
+ .mt1-l { margin-top: .25rem; }
.mt2-l { margin-top: .5rem; }
+ .mt3-l { margin-top: 1rem; }
+ .mt4-l { margin-top: 2rem; }
+ .mt5-l { margin-top: 4rem; }
+ .mt6-l { margin-top: 8rem; }
+ .mt7-l { margin-top: 16rem; }
+
+ .mv0-l {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+ .mv1-l {
+ margin-top: .25rem;
+ margin-bottom: .25rem;
+ }
+ .mv2-l {
+ margin-top: .5rem;
+ margin-bottom: .5rem;
+ }
+ .mv3-l {
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+ }
+ .mv4-l {
+ margin-top: 2rem;
+ margin-bottom: 2rem;
+ }
+ .mv5-l {
+ margin-top: 4rem;
+ margin-bottom: 4rem;
+ }
+ .mv6-l {
+ margin-top: 8rem;
+ margin-bottom: 8rem;
+ }
+ .mv7-l {
+ margin-top: 16rem;
+ margin-bottom: 16rem;
+ }
+
+ .mh0-l {
+ margin-left: 0;
+ margin-right: 0;
+ }
+ .mh1-l {
+ margin-left: .25rem;
+ margin-right: .25rem;
+ }
+ .mh2-l {
+ margin-left: .5rem;
+ margin-right: .5rem;
+ }
+ .mh3-l {
+ margin-left: 1rem;
+ margin-right: 1rem;
+ }
+ .mh4-l {
+ margin-left: 2rem;
+ margin-right: 2rem;
+ }
+ .mh5-l {
+ margin-left: 4rem;
+ margin-right: 4rem;
+ }
+ .mh6-l {
+ margin-left: 8rem;
+ margin-right: 8rem;
+ }
+ .mh7-l {
+ margin-left: 16rem;
+ margin-right: 16rem;
+ }
}
/*
NEGATIVE MARGINS
@@ -1457,9 +3595,167 @@
-l = large
*/
+.na1 { margin: -0.25rem; }
+.na2 { margin: -0.5rem; }
+.na3 { margin: -1rem; }
+.na4 { margin: -2rem; }
+.na5 { margin: -4rem; }
+.na6 { margin: -8rem; }
+.na7 { margin: -16rem; }
+.nl1 { margin-left: -0.25rem; }
.nl2 { margin-left: -0.5rem; }
.nl3 { margin-left: -1rem; }
+.nl4 { margin-left: -2rem; }
+.nl5 { margin-left: -4rem; }
+.nl6 { margin-left: -8rem; }
+.nl7 { margin-left: -16rem; }
+.nr1 { margin-right: -0.25rem; }
+.nr2 { margin-right: -0.5rem; }
+.nr3 { margin-right: -1rem; }
+.nr4 { margin-right: -2rem; }
+.nr5 { margin-right: -4rem; }
+.nr6 { margin-right: -8rem; }
+.nr7 { margin-right: -16rem; }
+.nb1 { margin-bottom: -0.25rem; }
+.nb2 { margin-bottom: -0.5rem; }
+.nb3 { margin-bottom: -1rem; }
+.nb4 { margin-bottom: -2rem; }
+.nb5 { margin-bottom: -4rem; }
+.nb6 { margin-bottom: -8rem; }
+.nb7 { margin-bottom: -16rem; }
+.nt1 { margin-top: -0.25rem; }
+.nt2 { margin-top: -0.5rem; }
.nt3 { margin-top: -1rem; }
+.nt4 { margin-top: -2rem; }
+.nt5 { margin-top: -4rem; }
+.nt6 { margin-top: -8rem; }
+.nt7 { margin-top: -16rem; }
+@media screen and (min-width: 30em) {
+
+ .na1-ns { margin: -0.25rem; }
+ .na2-ns { margin: -0.5rem; }
+ .na3-ns { margin: -1rem; }
+ .na4-ns { margin: -2rem; }
+ .na5-ns { margin: -4rem; }
+ .na6-ns { margin: -8rem; }
+ .na7-ns { margin: -16rem; }
+
+ .nl1-ns { margin-left: -0.25rem; }
+ .nl2-ns { margin-left: -0.5rem; }
+ .nl3-ns { margin-left: -1rem; }
+ .nl4-ns { margin-left: -2rem; }
+ .nl5-ns { margin-left: -4rem; }
+ .nl6-ns { margin-left: -8rem; }
+ .nl7-ns { margin-left: -16rem; }
+
+ .nr1-ns { margin-right: -0.25rem; }
+ .nr2-ns { margin-right: -0.5rem; }
+ .nr3-ns { margin-right: -1rem; }
+ .nr4-ns { margin-right: -2rem; }
+ .nr5-ns { margin-right: -4rem; }
+ .nr6-ns { margin-right: -8rem; }
+ .nr7-ns { margin-right: -16rem; }
+
+ .nb1-ns { margin-bottom: -0.25rem; }
+ .nb2-ns { margin-bottom: -0.5rem; }
+ .nb3-ns { margin-bottom: -1rem; }
+ .nb4-ns { margin-bottom: -2rem; }
+ .nb5-ns { margin-bottom: -4rem; }
+ .nb6-ns { margin-bottom: -8rem; }
+ .nb7-ns { margin-bottom: -16rem; }
+
+ .nt1-ns { margin-top: -0.25rem; }
+ .nt2-ns { margin-top: -0.5rem; }
+ .nt3-ns { margin-top: -1rem; }
+ .nt4-ns { margin-top: -2rem; }
+ .nt5-ns { margin-top: -4rem; }
+ .nt6-ns { margin-top: -8rem; }
+ .nt7-ns { margin-top: -16rem; }
+
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .na1-m { margin: -0.25rem; }
+ .na2-m { margin: -0.5rem; }
+ .na3-m { margin: -1rem; }
+ .na4-m { margin: -2rem; }
+ .na5-m { margin: -4rem; }
+ .na6-m { margin: -8rem; }
+ .na7-m { margin: -16rem; }
+
+ .nl1-m { margin-left: -0.25rem; }
+ .nl2-m { margin-left: -0.5rem; }
+ .nl3-m { margin-left: -1rem; }
+ .nl4-m { margin-left: -2rem; }
+ .nl5-m { margin-left: -4rem; }
+ .nl6-m { margin-left: -8rem; }
+ .nl7-m { margin-left: -16rem; }
+
+ .nr1-m { margin-right: -0.25rem; }
+ .nr2-m { margin-right: -0.5rem; }
+ .nr3-m { margin-right: -1rem; }
+ .nr4-m { margin-right: -2rem; }
+ .nr5-m { margin-right: -4rem; }
+ .nr6-m { margin-right: -8rem; }
+ .nr7-m { margin-right: -16rem; }
+
+ .nb1-m { margin-bottom: -0.25rem; }
+ .nb2-m { margin-bottom: -0.5rem; }
+ .nb3-m { margin-bottom: -1rem; }
+ .nb4-m { margin-bottom: -2rem; }
+ .nb5-m { margin-bottom: -4rem; }
+ .nb6-m { margin-bottom: -8rem; }
+ .nb7-m { margin-bottom: -16rem; }
+
+ .nt1-m { margin-top: -0.25rem; }
+ .nt2-m { margin-top: -0.5rem; }
+ .nt3-m { margin-top: -1rem; }
+ .nt4-m { margin-top: -2rem; }
+ .nt5-m { margin-top: -4rem; }
+ .nt6-m { margin-top: -8rem; }
+ .nt7-m { margin-top: -16rem; }
+
+}
+@media screen and (min-width: 60em) {
+ .na1-l { margin: -0.25rem; }
+ .na2-l { margin: -0.5rem; }
+ .na3-l { margin: -1rem; }
+ .na4-l { margin: -2rem; }
+ .na5-l { margin: -4rem; }
+ .na6-l { margin: -8rem; }
+ .na7-l { margin: -16rem; }
+
+ .nl1-l { margin-left: -0.25rem; }
+ .nl2-l { margin-left: -0.5rem; }
+ .nl3-l { margin-left: -1rem; }
+ .nl4-l { margin-left: -2rem; }
+ .nl5-l { margin-left: -4rem; }
+ .nl6-l { margin-left: -8rem; }
+ .nl7-l { margin-left: -16rem; }
+
+ .nr1-l { margin-right: -0.25rem; }
+ .nr2-l { margin-right: -0.5rem; }
+ .nr3-l { margin-right: -1rem; }
+ .nr4-l { margin-right: -2rem; }
+ .nr5-l { margin-right: -4rem; }
+ .nr6-l { margin-right: -8rem; }
+ .nr7-l { margin-right: -16rem; }
+
+ .nb1-l { margin-bottom: -0.25rem; }
+ .nb2-l { margin-bottom: -0.5rem; }
+ .nb3-l { margin-bottom: -1rem; }
+ .nb4-l { margin-bottom: -2rem; }
+ .nb5-l { margin-bottom: -4rem; }
+ .nb6-l { margin-bottom: -8rem; }
+ .nb7-l { margin-bottom: -16rem; }
+
+ .nt1-l { margin-top: -0.25rem; }
+ .nt2-l { margin-top: -0.5rem; }
+ .nt3-l { margin-top: -1rem; }
+ .nt4-l { margin-top: -2rem; }
+ .nt5-l { margin-top: -4rem; }
+ .nt6-l { margin-top: -8rem; }
+ .nt7-l { margin-top: -16rem; }
+}
/*
TABLES
@@ -1466,6 +3762,28 @@
Docs: http://tachyons.io/docs/elements/tables/
*/
+.collapse {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+.striped--light-silver:nth-child(odd) {
+ background-color: #aaa;
+}
+.striped--moon-gray:nth-child(odd) {
+ background-color: #ccc;
+}
+.striped--light-gray:nth-child(odd) {
+ background-color: #eee;
+}
+.striped--near-white:nth-child(odd) {
+ background-color: #f4f4f4;
+}
+.stripe-light:nth-child(odd) {
+ background-color: rgba(255, 255, 255, .1);
+}
+.stripe-dark:nth-child(odd) {
+ background-color: rgba(0, 0, 0, .1);
+}
/*
TEXT DECORATION
@@ -1478,7 +3796,24 @@
-l = large
*/
+.strike { text-decoration: line-through; }
+.underline { text-decoration: underline; }
.no-underline { text-decoration: none; }
+@media screen and (min-width: 30em) {
+ .strike-ns { text-decoration: line-through; }
+ .underline-ns { text-decoration: underline; }
+ .no-underline-ns { text-decoration: none; }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .strike-m { text-decoration: line-through; }
+ .underline-m { text-decoration: underline; }
+ .no-underline-m { text-decoration: none; }
+}
+@media screen and (min-width: 60em) {
+ .strike-l { text-decoration: line-through; }
+ .underline-l { text-decoration: underline; }
+ .no-underline-l { text-decoration: none; }
+}
/*
TEXT ALIGN
@@ -1502,13 +3837,24 @@
.tl { text-align: left; }
.tr { text-align: right; }
.tc { text-align: center; }
+.tj { text-align: justify; }
@media screen and (min-width: 30em) {
.tl-ns { text-align: left; }
.tr-ns { text-align: right; }
.tc-ns { text-align: center; }
+ .tj-ns { text-align: justify; }
}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .tl-m { text-align: left; }
+ .tr-m { text-align: right; }
+ .tc-m { text-align: center; }
+ .tj-m { text-align: justify; }
+}
@media screen and (min-width: 60em) {
.tl-l { text-align: left; }
+ .tr-l { text-align: right; }
+ .tc-l { text-align: center; }
+ .tj-l { text-align: justify; }
}
/*
@@ -1530,7 +3876,28 @@
-l = large
*/
+.ttc { text-transform: capitalize; }
+.ttl { text-transform: lowercase; }
.ttu { text-transform: uppercase; }
+.ttn { text-transform: none; }
+@media screen and (min-width: 30em) {
+ .ttc-ns { text-transform: capitalize; }
+ .ttl-ns { text-transform: lowercase; }
+ .ttu-ns { text-transform: uppercase; }
+ .ttn-ns { text-transform: none; }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .ttc-m { text-transform: capitalize; }
+ .ttl-m { text-transform: lowercase; }
+ .ttu-m { text-transform: uppercase; }
+ .ttn-m { text-transform: none; }
+}
+@media screen and (min-width: 60em) {
+ .ttc-l { text-transform: capitalize; }
+ .ttl-l { text-transform: lowercase; }
+ .ttu-l { text-transform: uppercase; }
+ .ttn-l { text-transform: none; }
+}
/*
TYPE SCALE
@@ -1559,6 +3926,14 @@
* These generally are too large for mobile
* so be careful using them on smaller screens.
* */
+.f-6,
+.f-headline {
+ font-size: 6rem;
+}
+.f-5,
+.f-subheadline {
+ font-size: 5rem;
+}
/* Type Scale */
.f1 { font-size: 3rem; }
.f2 { font-size: 2.25rem; }
@@ -1569,13 +3944,47 @@
.f7 { font-size: .75rem; }
/* Small and hard to read for many people so use with extreme caution */
@media screen and (min-width: 30em){
+ .f-6-ns,
+ .f-headline-ns { font-size: 6rem; }
+ .f-5-ns,
+ .f-subheadline-ns { font-size: 5rem; }
+ .f1-ns { font-size: 3rem; }
.f2-ns { font-size: 2.25rem; }
.f3-ns { font-size: 1.5rem; }
+ .f4-ns { font-size: 1.25rem; }
.f5-ns { font-size: 1rem; }
+ .f6-ns { font-size: .875rem; }
+ .f7-ns { font-size: .75rem; }
}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .f-6-m,
+ .f-headline-m { font-size: 6rem; }
+ .f-5-m,
+ .f-subheadline-m { font-size: 5rem; }
+ .f1-m { font-size: 3rem; }
+ .f2-m { font-size: 2.25rem; }
+ .f3-m { font-size: 1.5rem; }
+ .f4-m { font-size: 1.25rem; }
+ .f5-m { font-size: 1rem; }
+ .f6-m { font-size: .875rem; }
+ .f7-m { font-size: .75rem; }
+}
@media screen and (min-width: 60em) {
+ .f-6-l,
+ .f-headline-l {
+ font-size: 6rem;
+ }
+ .f-5-l,
+ .f-subheadline-l {
+ font-size: 5rem;
+ }
.f1-l { font-size: 3rem; }
+ .f2-l { font-size: 2.25rem; }
+ .f3-l { font-size: 1.5rem; }
.f4-l { font-size: 1.25rem; }
+ .f5-l { font-size: 1rem; }
+ .f6-l { font-size: .875rem; }
+ .f7-l { font-size: .75rem; }
}
/*
@@ -1597,7 +4006,20 @@
max-width: 34em;
}
/* Measure is limited to ~45 characters */
+.measure-narrow {
+ max-width: 20em;
+}
/* Book paragraph style - paragraphs are indented with no vertical spacing. */
+.indent {
+ text-indent: 1em;
+ margin-top: 0;
+ margin-bottom: 0;
+}
+.small-caps {
+ -webkit-font-feature-settings: "c2sc";
+ font-feature-settings: "c2sc";
+ font-variant: small-caps;
+}
/* Combine this class with a width to truncate text (or just leave as is to truncate at width of containing element. */
.truncate {
white-space: nowrap;
@@ -1604,10 +4026,83 @@
overflow: hidden;
text-overflow: ellipsis;
}
+@media screen and (min-width: 30em) {
+ .measure-ns {
+ max-width: 30em;
+ }
+ .measure-wide-ns {
+ max-width: 34em;
+ }
+ .measure-narrow-ns {
+ max-width: 20em;
+ }
+ .indent-ns {
+ text-indent: 1em;
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+ .small-caps-ns {
+ -webkit-font-feature-settings: "c2sc";
+ font-feature-settings: "c2sc";
+ font-variant: small-caps;
+ }
+ .truncate-ns {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .measure-m {
+ max-width: 30em;
+ }
+ .measure-wide-m {
+ max-width: 34em;
+ }
+ .measure-narrow-m {
+ max-width: 20em;
+ }
+ .indent-m {
+ text-indent: 1em;
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+ .small-caps-m {
+ -webkit-font-feature-settings: "c2sc";
+ font-feature-settings: "c2sc";
+ font-variant: small-caps;
+ }
+ .truncate-m {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+}
@media screen and (min-width: 60em) {
+ .measure-l {
+ max-width: 30em;
+ }
.measure-wide-l {
max-width: 34em;
}
+ .measure-narrow-l {
+ max-width: 20em;
+ }
+ .indent-l {
+ text-indent: 1em;
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+ .small-caps-l {
+ -webkit-font-feature-settings: "c2sc";
+ font-feature-settings: "c2sc";
+ font-variant: small-caps;
+ }
+ .truncate-l {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
}
/*
@@ -1620,10 +4115,39 @@
*/
/* Equivalent to .overflow-y-scroll */
+.overflow-container {
+ overflow-y: scroll;
+}
.center {
margin-right: auto;
margin-left: auto;
}
+.mr-auto { margin-right: auto; }
+.ml-auto { margin-left: auto; }
+@media screen and (min-width: 30em){
+ .center-ns {
+ margin-right: auto;
+ margin-left: auto;
+ }
+ .mr-auto-ns { margin-right: auto; }
+ .ml-auto-ns { margin-left: auto; }
+}
+@media screen and (min-width: 30em) and (max-width: 60em){
+ .center-m {
+ margin-right: auto;
+ margin-left: auto;
+ }
+ .mr-auto-m { margin-right: auto; }
+ .ml-auto-m { margin-left: auto; }
+}
+@media screen and (min-width: 60em){
+ .center-l {
+ margin-right: auto;
+ margin-left: auto;
+ }
+ .mr-auto-l { margin-right: auto; }
+ .ml-auto-l { margin-left: auto; }
+}
/*
VISIBILITY
@@ -1644,6 +4168,30 @@
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
+@media screen and (min-width: 30em) {
+ .clip-ns {
+ position: fixed !important;
+ _position: absolute !important;
+ clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+ clip: rect(1px, 1px, 1px, 1px);
+ }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .clip-m {
+ position: fixed !important;
+ _position: absolute !important;
+ clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+ clip: rect(1px, 1px, 1px, 1px);
+ }
+}
+@media screen and (min-width: 60em) {
+ .clip-l {
+ position: fixed !important;
+ _position: absolute !important;
+ clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+ clip: rect(1px, 1px, 1px, 1px);
+ }
+}
/*
WHITE SPACE
@@ -1654,8 +4202,24 @@
-l = large
*/
+.ws-normal { white-space: normal; }
.nowrap { white-space: nowrap; }
.pre { white-space: pre; }
+@media screen and (min-width: 30em) {
+ .ws-normal-ns { white-space: normal; }
+ .nowrap-ns { white-space: nowrap; }
+ .pre-ns { white-space: pre; }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .ws-normal-m { white-space: normal; }
+ .nowrap-m { white-space: nowrap; }
+ .pre-m { white-space: pre; }
+}
+@media screen and (min-width: 60em) {
+ .ws-normal-l { white-space: normal; }
+ .nowrap-l { white-space: nowrap; }
+ .pre-l { white-space: pre; }
+}
/*
VERTICAL ALIGN
@@ -1666,8 +4230,28 @@
-l = large
*/
+.v-base { vertical-align: baseline; }
.v-mid { vertical-align: middle; }
.v-top { vertical-align: top; }
+.v-btm { vertical-align: bottom; }
+@media screen and (min-width: 30em) {
+ .v-base-ns { vertical-align: baseline; }
+ .v-mid-ns { vertical-align: middle; }
+ .v-top-ns { vertical-align: top; }
+ .v-btm-ns { vertical-align: bottom; }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .v-base-m { vertical-align: baseline; }
+ .v-mid-m { vertical-align: middle; }
+ .v-top-m { vertical-align: top; }
+ .v-btm-m { vertical-align: bottom; }
+}
+@media screen and (min-width: 60em) {
+ .v-base-l { vertical-align: baseline; }
+ .v-mid-l { vertical-align: middle; }
+ .v-top-l { vertical-align: top; }
+ .v-btm-l { vertical-align: bottom; }
+}
/*
HOVER EFFECTS
@@ -1706,6 +4290,16 @@
Animate opacity to 100% on hover by adding the glow class.
*/
+.glow {
+ -webkit-transition: opacity .15s ease-in;
+ transition: opacity .15s ease-in;
+}
+.glow:hover,
+.glow:focus {
+ opacity: 1;
+ -webkit-transition: opacity .15s ease-in;
+ transition: opacity .15s ease-in;
+}
/*
Hide child & reveal on hover:
@@ -1732,6 +4326,10 @@
-webkit-transition: opacity .15s ease-in;
transition: opacity .15s ease-in;
}
+.underline-hover:hover,
+.underline-hover:focus {
+ text-decoration: underline;
+}
/* Can combine this with overflow-hidden to make background images grow on hover
* even if you are using background-size: cover */
.grow {
@@ -1754,7 +4352,30 @@
-webkit-transform: scale(.90);
transform: scale(.90);
}
+.grow-large {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden;
+ -webkit-transform: translateZ(0);
+ transform: translateZ(0);
+ -webkit-transition: -webkit-transform .25s ease-in-out;
+ transition: -webkit-transform .25s ease-in-out;
+ transition: transform .25s ease-in-out;
+ transition: transform .25s ease-in-out, -webkit-transform .25s ease-in-out;
+}
+.grow-large:hover,
+.grow-large:focus {
+ -webkit-transform: scale(1.2);
+ transform: scale(1.2);
+}
+.grow-large:active {
+ -webkit-transform: scale(.95);
+ transform: scale(.95);
+}
/* Add pointer on hover */
+.pointer:hover {
+ cursor: pointer;
+}
/*
Add shadow on hover.
@@ -1761,6 +4382,31 @@
Performant box-shadow animation pattern from
http://tobiasahlin.com/blog/how-to-animate-box-shadow/
*/
+.shadow-hover {
+ cursor: pointer;
+ position: relative;
+ -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
+ transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+.shadow-hover::after {
+ content: '';
+ -webkit-box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, .2);
+ box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, .2);
+ border-radius: inherit;
+ opacity: 0;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: -1;
+ -webkit-transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
+ transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+.shadow-hover:hover::after,
+.shadow-hover:focus::after {
+ opacity: 1;
+}
/* Combine with classes in skins and skins-pseudo for
* many different transition possibilities. */
.bg-animate,
@@ -1803,8 +4449,20 @@
adjust these values to suit your needs.
*/
+.z-0 { z-index: 0; }
+.z-1 { z-index: 1; }
+.z-2 { z-index: 2; }
+.z-3 { z-index: 3; }
+.z-4 { z-index: 4; }
.z-5 { z-index: 5; }
.z-999 { z-index: 999; }
+.z-9999 { z-index: 9999; }
+.z-max {
+ z-index: 2147483647;
+}
+.z-inherit { z-index: inherit; }
+.z-initial { z-index: auto; z-index: initial; }
+.z-unset { z-index: unset; }
/*
NESTED
@@ -1813,14 +4471,32 @@
*/
.nested-copy-line-height p,
-.nested-copy-line-height ul {
+.nested-copy-line-height ul,
+.nested-copy-line-height ol {
line-height: 1.5;
}
-.nested-list-reset ul {
+.nested-headline-line-height h1,
+.nested-headline-line-height h2,
+.nested-headline-line-height h3,
+.nested-headline-line-height h4,
+.nested-headline-line-height h5,
+.nested-headline-line-height h6 {
+ line-height: 1.25;
+}
+.nested-list-reset ul,
+.nested-list-reset ol {
padding-left: 0;
margin-left: 0;
list-style-type: none;
}
+.nested-copy-indent p+p {
+ text-indent: 1em;
+ margin-top: 0;
+ margin-bottom: 0;
+}
+.nested-copy-separator p+p {
+ margin-top: 1.5em;
+}
.nested-img img {
width: 100%;
max-width: 100%;
@@ -2053,15 +4729,6 @@
.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight{color:#3f4145;font-weight:700;-webkit-box-shadow:none;box-shadow:none}
.algolia-autocomplete .algolia-docsearch-footer{width:134px;height:20px;z-index:2000;margin-top:10.66667px;float:right;font-size:0;line-height:0}
.algolia-autocomplete .algolia-docsearch-footer--logo{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='168' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M78.988.938h16.594a2.968 2.968 0 0 1 2.966 2.966V20.5a2.967 2.967 0 0 1-2.966 2.964H78.988a2.967 2.967 0 0 1-2.966-2.964V3.897A2.961 2.961 0 0 1 78.988.938zm41.937 17.866c-4.386.02-4.386-3.54-4.386-4.106l-.007-13.336 2.675-.424v13.254c0 .322 0 2.358 1.718 2.364v2.248zm-10.846-2.18c.821 0 1.43-.047 1.855-.129v-2.719a6.334 6.334 0 0 0-1.574-.199 5.7 5.7 0 0 0-.897.069 2.699 2.699 0 0 0-.814.24c-.24.116-.439.28-.582.491-.15.212-.219.335-.219.656 0 .628.219.991.616 1.23s.938.362 1.615.362zm-.233-9.7c.883 0 1.629.109 2.231.328.602.218 1.088.525 1.444.915.363.396.609.922.76 1.483.157.56.232 1.175.232 1.85v6.874a32.5 32.5 0 0 1-1.868.314c-.834.123-1.772.185-2.813.185-.69 0-1.327-.069-1.895-.198a4.001 4.001 0 0 1-1.471-.636 3.085 3.085 0 0 1-.951-1.134c-.226-.465-.343-1.12-.343-1.803 0-.656.13-1.073.384-1.525a3.24 3.24 0 0 1 1.047-1.106c.445-.287.95-.492 1.532-.615a8.8 8.8 0 0 1 1.82-.185 8.404 8.404 0 0 1 1.972.24v-.438c0-.307-.035-.6-.11-.874a1.88 1.88 0 0 0-.384-.73 1.784 1.784 0 0 0-.724-.493 3.164 3.164 0 0 0-1.143-.205c-.616 0-1.177.075-1.69.164a7.735 7.735 0 0 0-1.26.307l-.321-2.192c.335-.117.834-.233 1.478-.349a10.98 10.98 0 0 1 2.073-.178zm52.842 9.626c.822 0 1.43-.048 1.854-.13V13.7a6.347 6.347 0 0 0-1.574-.199c-.294 0-.595.021-.896.069a2.7 2.7 0 0 0-.814.24 1.46 1.46 0 0 0-.582.491c-.15.212-.218.335-.218.656 0 .628.218.991.615 1.23.404.245.938.362 1.615.362zm-.226-9.694c.883 0 1.629.108 2.231.327.602.219 1.088.526 1.444.915.355.39.609.923.759 1.483a6.8 6.8 0 0 1 .233 1.852v6.873c-.41.088-1.034.19-1.868.314-.834.123-1.772.184-2.813.184-.69 0-1.327-.068-1.895-.198a4.001 4.001 0 0 1-1.471-.635 3.085 3.085 0 0 1-.951-1.134c-.226-.465-.343-1.12-.343-1.804 0-.656.13-1.073.384-1.524.26-.45.608-.82 1.047-1.107.445-.286.95-.491 1.532-.614a8.803 8.803 0 0 1 2.751-.13c.329.034.671.096 1.04.185v-.437a3.3 3.3 0 0 0-.109-.875 1.873 1.873 0 0 0-.384-.731 1.784 1.784 0 0 0-.724-.492 3.165 3.165 0 0 0-1.143-.205c-.616 0-1.177.075-1.69.164a7.75 7.75 0 0 0-1.26.307l-.321-2.193c.335-.116.834-.232 1.478-.348a11.633 11.633 0 0 1 2.073-.177zm-8.034-1.271a1.626 1.626 0 0 1-1.628-1.62c0-.895.725-1.62 1.628-1.62.904 0 1.63.725 1.63 1.62 0 .895-.733 1.62-1.63 1.62zm1.348 13.22h-2.689V7.27l2.69-.423v11.956zm-4.714 0c-4.386.02-4.386-3.54-4.386-4.107l-.008-13.336 2.676-.424v13.254c0 .322 0 2.358 1.718 2.364v2.248zm-8.698-5.903c0-1.156-.253-2.119-.746-2.788-.493-.677-1.183-1.01-2.067-1.01-.882 0-1.574.333-2.065 1.01-.493.676-.733 1.632-.733 2.788 0 1.168.246 1.953.74 2.63.492.683 1.183 1.018 2.066 1.018.882 0 1.574-.342 2.067-1.019.492-.683.738-1.46.738-2.63zm2.737-.007c0 .902-.13 1.584-.397 2.33a5.52 5.52 0 0 1-1.128 1.906 4.986 4.986 0 0 1-1.752 1.223c-.685.286-1.739.45-2.265.45-.528-.006-1.574-.157-2.252-.45a5.096 5.096 0 0 1-1.744-1.223c-.487-.527-.863-1.162-1.137-1.906a6.345 6.345 0 0 1-.41-2.33c0-.902.123-1.77.397-2.508a5.554 5.554 0 0 1 1.15-1.892 5.133 5.133 0 0 1 1.75-1.216c.679-.287 1.425-.423 2.232-.423.808 0 1.553.142 2.237.423a4.88 4.88 0 0 1 1.753 1.216 5.644 5.644 0 0 1 1.135 1.892c.287.738.431 1.606.431 2.508zm-20.138 0c0 1.12.246 2.363.738 2.882.493.52 1.13.78 1.91.78.424 0 .828-.062 1.204-.178.377-.116.677-.253.917-.417V9.33a10.476 10.476 0 0 0-1.766-.226c-.971-.028-1.71.37-2.23 1.004-.513.636-.773 1.75-.773 2.788zm7.438 5.274c0 1.824-.466 3.156-1.404 4.004-.936.846-2.367 1.27-4.296 1.27-.705 0-2.17-.137-3.34-.396l.431-2.118c.98.205 2.272.26 2.95.26 1.074 0 1.84-.219 2.299-.656.459-.437.684-1.086.684-1.948v-.437a8.07 8.07 0 0 1-1.047.397c-.43.13-.93.198-1.492.198-.739 0-1.41-.116-2.018-.349a4.206 4.206 0 0 1-1.567-1.025c-.431-.45-.774-1.017-1.013-1.694-.24-.677-.363-1.885-.363-2.773 0-.834.13-1.88.384-2.577.26-.696.629-1.298 1.129-1.796.493-.498 1.095-.881 1.8-1.162a6.605 6.605 0 0 1 2.428-.457c.87 0 1.67.109 2.45.24.78.129 1.444.265 1.985.415V18.17z' fill='%235468FF'/%3E%3Cpath d='M6.972 6.677v1.627c-.712-
\ No newline at end of file
-.446-1.52-.67-2.425-.67-.585 0-1.045.13-1.38.391a1.24 1.24 0 0 0-.502 1.03c0 .425.164.765.494 1.02.33.256.835.532 1.516.83.447.192.795.356 1.045.495.25.138.537.332.862.582.324.25.563.548.718.894.154.345.23.741.23 1.188 0 .947-.334 1.691-1.004 2.234-.67.542-1.537.814-2.601.814-1.18 0-2.16-.229-2.936-.686v-1.708c.84.628 1.814.942 2.92.942.585 0 1.048-.136 1.388-.407.34-.271.51-.646.51-1.125 0-.287-.1-.55-.302-.79-.203-.24-.42-.42-.655-.542-.234-.123-.585-.29-1.053-.503a61.27 61.27 0 0 1-.582-.271 13.67 13.67 0 0 1-.55-.287 4.275 4.275 0 0 1-.567-.351 6.92 6.92 0 0 1-.455-.4c-.18-.17-.31-.34-.39-.51-.08-.17-.155-.37-.224-.598a2.553 2.553 0 0 1-.104-.742c0-.915.333-1.638.998-2.17.664-.532 1.523-.798 2.576-.798.968 0 1.793.17 2.473.51zm7.468 5.696v-.287c-.022-.607-.187-1.088-.495-1.444-.309-.357-.75-.535-1.324-.535-.532 0-.99.194-1.373.583-.382.388-.622.949-.717 1.683h3.909zm1.005 2.792v1.404c-.596.34-1.383.51-2.362.51-1.255 0-2.255-.377-3-1.132-.744-.755-1.116-1.744-1.116-2.968 0-1.297.34-2.316 1.021-3.055.68-.74 1.548-1.11 2.6-1.11 1.033 0 1.852.323 2.458.966.606.644.91 1.572.91 2.784 0 .33-.033.676-.096 1.038h-5.314c.107.702.405 1.239.894 1.611.49.372 1.106.558 1.85.558.862 0 1.58-.202 2.155-.606zm6.605-1.77h-1.212c-.596 0-1.045.116-1.349.35-.303.234-.454.532-.454.894 0 .372.117.664.35.877.235.213.575.32 1.022.32.51 0 .912-.142 1.204-.424.293-.281.44-.651.44-1.108v-.91zm-4.068-2.554V9.325c.627-.361 1.457-.542 2.489-.542 2.116 0 3.175 1.026 3.175 3.08V17h-1.548v-.957c-.415.68-1.143 1.02-2.186 1.02-.766 0-1.38-.22-1.843-.661-.462-.442-.694-1.003-.694-1.684 0-.776.293-1.38.878-1.81.585-.431 1.404-.647 2.457-.647h1.34V11.8c0-.554-.133-.971-.399-1.253-.266-.282-.707-.423-1.324-.423a4.07 4.07 0 0 0-2.345.718zm9.333-1.93v1.42c.394-1 1.101-1.5 2.123-1.5.148 0 .313.016.494.048v1.531a1.885 1.885 0 0 0-.75-.143c-.542 0-.989.24-1.34.718-.351.479-.527 1.048-.527 1.707V17h-1.563V8.91h1.563zm5.01 4.084c.022.82.272 1.492.75 2.019.479.526 1.15.79 2.01.79.639 0 1.235-.176 1.788-.527v1.404c-.521.319-1.186.479-1.995.479-1.265 0-2.276-.4-3.031-1.197-.755-.798-1.133-1.792-1.133-2.984 0-1.16.38-2.151 1.14-2.975.761-.825 1.79-1.237 3.088-1.237.702 0 1.346.149 1.93.447v1.436a3.242 3.242 0 0 0-1.77-.495c-.84 0-1.513.266-2.019.798-.505.532-.758 1.213-.758 2.042zM40.24 5.72v4.579c.458-1 1.293-1.5 2.505-1.5.787 0 1.42.245 1.899.734.479.49.718 1.17.718 2.042V17h-1.564v-5.106c0-.553-.14-.98-.422-1.284-.282-.303-.652-.455-1.11-.455-.531 0-1.002.202-1.411.606-.41.405-.615 1.022-.615 1.851V17h-1.563V5.72h1.563zm14.966 10.02c.596 0 1.096-.253 1.5-.758.404-.506.606-1.157.606-1.955 0-.915-.202-1.62-.606-2.114-.404-.495-.92-.742-1.548-.742-.553 0-1.05.224-1.491.67-.442.447-.662 1.133-.662 2.058 0 .958.212 1.67.638 2.138.425.469.946.703 1.563.703zM53.004 5.72v4.42c.574-.894 1.388-1.341 2.44-1.341 1.022 0 1.857.383 2.506 1.149.649.766.973 1.781.973 3.047 0 1.138-.309 2.109-.925 2.912-.617.803-1.463 1.205-2.537 1.205-1.075 0-1.894-.447-2.457-1.34V17h-1.58V5.72h1.58zm9.908 11.104l-3.223-7.913h1.739l1.005 2.632 1.26 3.415c.096-.32.48-1.458 1.15-3.415l.909-2.632h1.66l-2.92 7.866c-.777 2.074-1.963 3.11-3.559 3.11a2.92 2.92 0 0 1-.734-.079v-1.34c.17.042.351.064.543.064 1.032 0 1.755-.57 2.17-1.708z' fill='%235D6494'/%3E%3Cpath d='M89.632 5.967v-.772a.978.978 0 0 0-.978-.977h-2.28a.978.978 0 0 0-.978.977v.793c0 .088.082.15.171.13a7.127 7.127 0 0 1 1.984-.28c.65 0 1.295.088 1.917.259.082.02.164-.04.164-.13m-6.248 1.01l-.39-.389a.977.977 0 0 0-1.382 0l-.465.465a.973.973 0 0 0 0 1.38l.383.383c.062.061.15.047.205-.014.226-.307.472-.601.746-.874.281-.28.568-.526.883-.751.068-.042.075-.137.02-.2m4.16 2.453v3.341c0 .096.104.165.192.117l2.97-1.537c.068-.034.089-.117.055-.184a3.695 3.695 0 0 0-3.08-1.866c-.068 0-.136.054-.136.13m0 8.048a4.489 4.489 0 0 1-4.49-4.482 4.488 4.488 0 0 1 4.49-4.482 4.488 4.488 0 0 1 4.489 4.482 4.484 4.484 0 0 1-4.49 4.482m0-10.85a6.363 6.363 0 1 0 0 12.729 6.37 6.37 0 0 0 6.372-6.368 6.358 6.358 0 0 0-6.371-6.36' fill='%23FFF'/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;background-position:50%;background-size:100%;overflow:hidden;text-inde
\ No newline at end of file
-a.algolia-docsearch-suggestion {
- text-decoration: none !important;
-}
-.algolia-docsearch-suggestion--category-header {
- background: #0594cb;
- padding-left: .25rem !important;
- color: white !important;
- border-radius: 3px;
4 1.691-1.004 2.234-.67.542-1.537.814-2.601.814-1.18 0-2.16-.229-2.936-.686v-1.708c.84.628 1.814.942 2.92.942.585 0 1.048-.136 1.388-.407.34-.271.51-.646.51-1.125 0-.287-.1-.55-.302-.79-.203-.24-.42-.42-.655-.542-.234-.123-.585-.29-1.053-.503a61.27 61.27 0 0 1-.582-.271 13.67 13.67 0 0 1-.55-.287 4.275 4.275 0 0 1-.567-.351 6.92 6.92 0 0 1-.455-.4c-.18-.17-.31-.34-.39-.51-.08-.17-.155-.37-.224-.598a2.553 2.553 0 0 1-.104-.742c0-.915.333-1.638.998-2.17.664-.532 1.523-.798 2.576-.798.968 0 1.793.17 2.473.51zm7.468 5.696v-.287c-.022-.607-.187-1.088-.495-1.444-.309-.357-.75-.535-1.324-.535-.532 0-.99.194-1.373.583-.382.388-.622.949-.717 1.683h3.909zm1.005 2.792v1.404c-.596.34-1.383.51-2.362.51-1.255 0-2.255-.377-3-1.132-.744-.755-1.116-1.744-1.116-2.968 0-1.297.34-2.316 1.021-3.055.68-.74 1.548-1.11 2.6-1.11 1.033 0 1.852.323 2.458.966.606.644.91 1.572.91 2.784 0 .33-.033.676-.096 1.038h-5.314c.107.702.405 1.239.894 1.611.49.372 1.106.558 1.85.558.862 0 1.58-.202 2.155-.606zm6.605-1.77h-1.212c-.596 0-1.045.116-1.349.35-.303.234-.454.532-.454.894 0 .372.117.664.35.877.235.213.575.32 1.022.32.51 0 .912-.142 1.204-.424.293-.281.44-.651.44-1.108v-.91zm-4.068-2.554V9.325c.627-.361 1.457-.542 2.489-.542 2.116 0 3.175 1.026 3.175 3.08V17h-1.548v-.957c-.415.68-1.143 1.02-2.186 1.02-.766 0-1.38-.22-1.843-.661-.462-.442-.694-1.003-.694-1.684 0-.776.293-1.38.878-1.81.585-.431 1.404-.647 2.457-.647h1.34V11.8c0-.554-.133-.971-.399-1.253-.266-.282-.707-.423-1.324-.423a4.07 4.07 0 0 0-2.345.718zm9.333-1.93v1.42c.394-1 1.101-1.5 2.123-1.5.148 0 .313.016.494.048v1.531a1.885 1.885 0 0 0-.75-.143c-.542 0-.989.24-1.34.718-.351.479-.527 1.048-.527 1.707V17h-1.563V8.91h1.563zm5.01 4.084c.022.82.272 1.492.75 2.019.479.526 1.15.79 2.01.79.639 0 1.235-.176 1.788-.527v1.404c-.521.319-1.186.479-1.995.479-1.265 0-2.276-.4-3.031-1.197-.755-.798-1.133-1.792-1.133-2.984 0-1.16.38-2.151 1.14-2.975.761-.825 1.79-1.237 3.088-1.237.702 0 1.346.149 1.93.447v1.436a3.242 3.242 0 0 0-1.77-.495c-.84 0-1.513.266-2.019.798-.505.532-.758 1.213-.758 2.042zM40.24 5.72v4.579c.458-1 1.293-1.5 2.505-1.5.787 0 1.42.245 1.899.734.479.49.718 1.17.718 2.042V17h-1.564v-5.106c0-.553-.14-.98-.422-1.284-.282-.303-.652-.455-1.11-.455-.531 0-1.002.202-1.411.606-.41.405-.615 1.022-.615 1.851V17h-1.563V5.72h1.563zm14.966 10.02c.596 0 1.096-.253 1.5-.758.404-.506.606-1.157.606-1.955 0-.915-.202-1.62-.606-2.114-.404-.495-.92-.742-1.548-.742-.553 0-1.05.224-1.491.67-.442.447-.662 1.133-.662 2.058 0 .958.212 1.67.638 2.138.425.469.946.703 1.563.703zM53.004 5.72v4.42c.574-.894 1.388-1.341 2.44-1.341 1.022 0 1.857.383 2.506 1.149.649.766.973 1.781.973 3.047 0 1.138-.309 2.109-.925 2.912-.617.803-1.463 1.205-2.537 1.205-1.075 0-1.894-.447-2.457-1.34V17h-1.58V5.72h1.58zm9.908 11.104l-3.223-7.913h1.739l1.005 2.632 1.26 3.415c.096-.32.48-1.458 1.15-3.415l.909-2.632h1.66l-2.92 7.866c-.777 2.074-1.963 3.11-3.559 3.11a2.92 2.92 0 0 1-.734-.079v-1.34c.17.042.351.064.543.064 1.032 0 1.755-.57 2.17-1.708z' fill='%235D6494'/%3E%3Cpath d='M89.632 5.967v-.772a.978.978 0 0 0-.978-.977h-2.28a.978.978 0 0 0-.978.977v.793c0 .088.082.15.171.13a7.127 7.127 0 0 1 1.984-.28c.65 0 1.295.088 1.917.259.082.02.164-.04.164-.13m-6.248 1.01l-.39-.389a.977.977 0 0 0-1.382 0l-.465.465a.973.973 0 0 0 0 1.38l.383.383c.062.061.15.047.205-.014.226-.307.472-.601.746-.874.281-.28.568-.526.883-.751.068-.042.075-.137.02-.2m4.16 2.453v3.341c0 .096.104.165.192.117l2.97-1.537c.068-.034.089-.117.055-.184a3.695 3.695 0 0 0-3.08-1.866c-.068 0-.136.054-.136.13m0 8.048a4.489 4.489 0 0 1-4.49-4.482 4.488 4.488 0 0 1 4.49-4.482 4.488 4.488 0 0 1 4.489 4.482 4.484 4.484 0 0 1-4.49 4.482m0-10.85a6.363 6.363 0 1 0 0 12.729 6.37 6.37 0 0 0 6.372-6.368 6.358 6.358 0 0 0-6.371-6.36' fill='%23FFF'/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;background-position:50%;background-size:100%;overflow:hidden;text-indent:-9000px;padding:0!important;width:100%;height:100%;display:block}
a.algolia-docsearch-suggestion {
text-decoration: none !important;
--- a/docs/themes/gohugoioTheme/layouts/_default/baseof.html
+++ b/docs/themes/gohugoioTheme/layouts/_default/baseof.html
@@ -10,8 +10,6 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
{{/* NOTE: the Site's title, and if there is a page title, that is set too */}}
<title>{{ block "title" . }}{{ with .Title }}{{ . }} | {{ end }}{{ .Site.Title }}{{ end }}</title>
- <meta name="HandheldFriendly" content="True">
- <meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width,minimum-scale=1">
{{ .Hugo.Generator }}
--- a/docs/themes/gohugoioTheme/layouts/partials/home-page-sections/open-source-involvement.html
+++ b/docs/themes/gohugoioTheme/layouts/partials/home-page-sections/open-source-involvement.html
@@ -16,7 +16,7 @@
</a>
</li>
<li class="mb3 f4">
- <a href="http://themes.gohugo.io" class="link mid-gray dim">
+ <a href="https://themes.gohugo.io/" class="link mid-gray dim">
Design a theme {{ partial "svg/link-ext.svg" (dict "fill" "#333" "size" "14") }}
</a>
</li>
--- a/docs/themes/gohugoioTheme/layouts/partials/site-search.html
+++ b/docs/themes/gohugoioTheme/layouts/partials/site-search.html
@@ -1,6 +1,6 @@
<form id="site-search-form" action="" role="search">
<fieldset class="bn ma0 pa0">
<label class="clip" for="search-input">Search</label>
- <input type="search" id="search-input" class="needs-js bg-left bg-transparent bn f5 input-reset lh-solid mt3 mt0-ns pl4 pv2 w5 white" placeholder="Search the Docs" name="search-input" value="" style="background: url('/images/icon-search.png') no-repeat 0 8px /16px 16px;;">
+ <input type="search" id="search-input" class="needs-js bg-left bn f5 input-reset lh-solid mt3 mt0-ns pl4 pv2 w5 white" placeholder="Search the Docs" name="search-input" value="" style="background: transparent url('/images/icon-search.png') no-repeat 0 8px /16px 16px;">
</fieldset>
</form>
--- a/docs/themes/gohugoioTheme/layouts/shortcodes/nohighlight.html
+++ b/docs/themes/gohugoioTheme/layouts/shortcodes/nohighlight.html
@@ -1,1 +1,1 @@
-<pre><code class="hljs nohighlight">{{ .Inner }}</code></pre>
\ No newline at end of file
+<pre><code class="nohighlight">{{ .Inner }}</code></pre>
--- a/docs/themes/gohugoioTheme/src/package-lock.json
+++ b/docs/themes/gohugoioTheme/src/package-lock.json
@@ -2690,12 +2690,6 @@
"minimalistic-assert": "^1.0.0"
}
},
- "highlight.js": {
- "version": "9.12.0",
- "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.12.0.tgz",
- "integrity": "sha1-5tnb5Xy+/mB1HwKvM2GVhwyQwB4=",
- "dev": true
- },
"hmac-drbg": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
--- a/docs/themes/gohugoioTheme/src/package.json
+++ b/docs/themes/gohugoioTheme/src/package.json
@@ -21,7 +21,6 @@
"docsearch.js": "^2.3.3",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^0.11.1",
- "highlight.js": "^9.11.0",
"lazysizes": "^3.0.0",
"postcss": "^5.2.16",
"postcss-cssnext": "^2.10.0",
--- /dev/null
+++ b/docs/themes/gohugoioTheme/src/readme.md
@@ -1,0 +1,37 @@
+## Welcome to the SRC folder for the Gohugo Theme.
+
+The contents of this folder are used to generate CSS and JavaScript. You may never have to touch anything here, unless you want to more deeply customize your styles.
+
+## Tools
+
+### npm
+
+We use [npm](https://www.npmjs.com/) for package management The theme's `.gitignore` file should be kept intact to make sure that all files in the `node_modules` folder are not pushed to the repository.
+
+### Webpack
+
+We use Webpack to manage our asset pipeline. Arguably, Webpack is overkill for this use-case, but we're using it here because once it's set up (which we've done for you), it's really easy to use. If you want to use an external script, just add it via Yarn, and reference it in main.js. You'll find instructions in the js/main.js file.
+
+### PostCSS
+
+PostCSS is just CSS. You'll find `postcss.config.js` in the css folder. There you'll find that we're using [`postcss-import`](https://github.com/postcss/postcss-import) which allows us import css files directly from the node_modules folder, [`postcss-cssnext`](http://cssnext.io/features/) which gives us the power to use upcoming CSS features today. If you miss Sass you can find PostCss modules for those capabilities, too.
+
+### Tachyons
+
+This theme uses the [Tachyons CSS Library](http://tachyons.io/). It's about 15kb gzipped, highly modular, and each class is atomic so you never have to worry about overwriting your styles. It's a great library for themes because you can make most all the style changes you need right in your layouts.
+
+## How to Use
+
+You'll find the commands to run in `src/package.json`.
+
+For development, you'll need Node with npm installed:
+
+```bash
+$ cd themes/gohugo-theme/src/
+$ npm install
+$ npm start
+```
+
+This will process both the postcss and scripts.
+
+For production, instead of `npm start`, run `npm run build:production,` which will output minified versions of your files.
--- a/docs/themes/gohugoioTheme/theme.toml
+++ b/docs/themes/gohugoioTheme/theme.toml
@@ -3,9 +3,9 @@
name = "Hugo Theme"
license = "MIT"
-licenselink = "https://github.com/budparr/gohugo.io/blob/master/LICENSE.md"
+licenselink = "https://github.com/gohugoio/gohugoioTheme/blob/master/license.md"
description = ""
-homepage = "https://github.com/budparr/gohugo.io"
+homepage = "https://github.com/gohugoio/gohugoioTheme"
tags = ["website"]
features = ["", ""]
min_version = 0.38
--- a/docs/themes/gohugoioTheme/webpack.config.js
+++ b/docs/themes/gohugoioTheme/webpack.config.js
@@ -89,7 +89,6 @@
};
if (process.env.NODE_ENV == "production") {
- console.log("now with purge");
CONFIG.plugins.push(
new CleanWebpackPlugin(["./assets/output"], {
root: __dirname,
@@ -96,26 +95,27 @@
verbose: true,
dry: false,
allowExternal: true
- }),
- new PurgecssPlugin({
- paths: glob.sync([
- path.join(__dirname, "layouts/**/*.html")
- ]),
- extractors: [
- {
- extractor: TailwindExtractor,
- extensions: ["html"]
- }
- ],
- fontFace: false,
- whitelist: [
- "pagination",
- "#TableOfContents ul li",
- "chroma",
- "expand",
- "hljs"
- ]
})
+ //, Temporarily moving purge to fix themes site.
+ // new PurgecssPlugin({
+ // paths: glob.sync([
+ // path.join(__dirname, "layouts/**/*.html")
+ // ]),
+ // extractors: [
+ // {
+ // extractor: TailwindExtractor,
+ // extensions: ["html"]
+ // }
+ // ],
+ // fontFace: false,
+ // whitelist: [
+ // "pagination",
+ // "#TableOfContents ul li",
+ // "chroma",
+ // "expand",
+ // "hljs"
+ // ]
+ // })
);
}