Pawlik
/
gohugo-theme-ananke
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 43 Wiki Activity
Browse Source

first commit

tags/v1.1
Bud Parr 7 years ago
commit
98bc281a57
No account linked to committer's email address
97 changed files with 8958 additions and 0 deletions
Unified View Show Diff Stats
  1. 30
    0
      .gitignore
  2. 6
    0
      404.html
  3. 20
    0
      LICENSE.md
  4. 7
    0
      archetypes/default.md
  5. 6
    0
      layouts/404.html
  6. 40
    0
      layouts/_default/baseof.html
  7. 12
    0
      layouts/_default/list.html
  8. 32
    0
      layouts/_default/single.html
  9. 43
    0
      layouts/article/single.html
  10. 24
    0
      layouts/article/summary.html
  11. 12
    0
      layouts/index.html
  12. 21
    0
      layouts/partials/page-header.html
  13. 13
    0
      layouts/partials/section-boxes.html
  14. 5
    0
      layouts/partials/site-footer.html
  15. 29
    0
      layouts/partials/site-header.html
  16. 16
    0
      layouts/partials/site-navigation.html
  17. 1
    0
      layouts/partials/site-scripts.html
  18. 1
    0
      layouts/partials/svg/facebook.svg
  19. 1
    0
      layouts/partials/svg/instagram.svg
  20. 1
    0
      layouts/partials/svg/twitter.svg
  21. 8
    0
      layouts/robots.txt
  22. 16
    0
      layouts/section/article.html
  23. 20
    0
      package.json
  24. 28
    0
      readme.md
  25. 10
    0
      sitemap.xml
  26. 5
    0
      src/css/_styles.css
  27. 94
    0
      src/css/_tachyons.css
  28. 2
    0
      src/css/main.css
  29. 16
    0
      src/css/postcss.config.js
  30. 135
    0
      src/css/tachyons/_aspect-ratios.css
  31. 126
    0
      src/css/tachyons/_background-position.css
  32. 34
    0
      src/css/tachyons/_background-size.css
  33. 86
    0
      src/css/tachyons/_border-colors.css
  34. 127
    0
      src/css/tachyons/_border-radius.css
  35. 48
    0
      src/css/tachyons/_border-style.css
  36. 74
    0
      src/css/tachyons/_border-widths.css
  37. 58
    0
      src/css/tachyons/_borders.css
  38. 41
    0
      src/css/tachyons/_box-shadow.css
  39. 43
    0
      src/css/tachyons/_box-sizing.css
  40. 40
    0
      src/css/tachyons/_clears.css
  41. 11
    0
      src/css/tachyons/_code.css
  42. 80
    0
      src/css/tachyons/_colors.css
  43. 146
    0
      src/css/tachyons/_coordinates.css
  44. 14
    0
      src/css/tachyons/_debug-children.css
  45. 26
    0
      src/css/tachyons/_debug-grid.css
  46. 132
    0
      src/css/tachyons/_debug.css
  47. 104
    0
      src/css/tachyons/_display.css
  48. 222
    0
      src/css/tachyons/_flexbox.css
  49. 49
    0
      src/css/tachyons/_floats.css
  50. 100
    0
      src/css/tachyons/_font-family.css
  51. 29
    0
      src/css/tachyons/_font-style.css
  52. 80
    0
      src/css/tachyons/_font-weight.css
  53. 16
    0
      src/css/tachyons/_forms.css
  54. 124
    0
      src/css/tachyons/_heights.css
  55. 159
    0
      src/css/tachyons/_hovers.css
  56. 11
    0
      src/css/tachyons/_images.css
  57. 33
    0
      src/css/tachyons/_letter-spacing.css
  58. 34
    0
      src/css/tachyons/_line-height.css
  59. 27
    0
      src/css/tachyons/_links.css
  60. 8
    0
      src/css/tachyons/_lists.css
  61. 98
    0
      src/css/tachyons/_max-widths.css
  62. 36
    0
      src/css/tachyons/_media-queries.css
  63. 22
    0
      src/css/tachyons/_module-template.css
  64. 199
    0
      src/css/tachyons/_negative-margins.css
  65. 57
    0
      src/css/tachyons/_nested.css
  66. 427
    0
      src/css/tachyons/_normalize.css
  67. 20
    0
      src/css/tachyons/_opacity.css
  68. 32
    0
      src/css/tachyons/_outlines.css
  69. 75
    0
      src/css/tachyons/_overflow.css
  70. 37
    0
      src/css/tachyons/_position.css
  71. 43
    0
      src/css/tachyons/_rotations.css
  72. 236
    0
      src/css/tachyons/_skins-pseudo.css
  73. 136
    0
      src/css/tachyons/_skins.css
  74. 952
    0
      src/css/tachyons/_spacing.css
  75. 8
    0
      src/css/tachyons/_styles.css
  76. 35
    0
      src/css/tachyons/_tables.css
  77. 42
    0
      src/css/tachyons/_text-align.css
  78. 35
    0
      src/css/tachyons/_text-decoration.css
  79. 46
    0
      src/css/tachyons/_text-transform.css
  80. 95
    0
      src/css/tachyons/_type-scale.css
  81. 122
    0
      src/css/tachyons/_typography.css
  82. 41
    0
      src/css/tachyons/_utilities.css
  83. 36
    0
      src/css/tachyons/_vertical-align.css
  84. 51
    0
      src/css/tachyons/_visibility.css
  85. 34
    0
      src/css/tachyons/_white-space.css
  86. 143
    0
      src/css/tachyons/_widths.css
  87. 36
    0
      src/css/tachyons/_word-break.css
  88. 53
    0
      src/css/tachyons/_z-index.css
  89. 94
    0
      src/css/tachyons/tachyons.css
  90. 14
    0
      src/js/main.js
  91. 30
    0
      src/package.json
  92. 9
    0
      src/readme.md
  93. 47
    0
      src/webpack.config.js
  94. 2854
    0
      src/yarn.lock
  95. 1
    0
      static/dist/app.bundle.js
  96. 1
    0
      static/dist/main.css
  97. 25
    0
      theme.toml

+ 30
- 0
.gitignore View File

# OS
.DS_Store
Thumbs.db

# IDEs
.buildpath
.project
.settings/
.build/
.idea/
public/
nbproject/

# Vagrant
.vagrant/

# FE Setup
.bin/node_modules/
/node_modules/
src/node_modules/
/npm-debug.log.*
/npm-debug.log
/npm-debug.log*
/dist/
/src/client.config.json
/styleguide/
/docs/

/junit.xml
partials/structure/stylesheet.html

+ 6
- 0
404.html View File

{{ define "main" }}
<!-- TODO: Juice up the 404 page -->
404 page hee
{{ .Content }}

{{ end }}

+ 20
- 0
LICENSE.md View File

The MIT License (MIT)

Copyright (c) 2016 Bud Parr

Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

+ 7
- 0
archetypes/default.md View File

+++
title = ""
date = ""
tags = []
featured_image = ""
description = ""
+++

+ 6
- 0
layouts/404.html View File

{{ define "main" }}
<main class="cf pa5 pa4-l f4 tc center measure-wide lh-copy gray">
<h1>Page not found</h1>
{{ .Content }}
</main>
{{ end }}

+ 40
- 0
layouts/_default/baseof.html View File

<!DOCTYPE html>
<html lang="{{ with $.Site.LanguageCode }}{{ . }}{{ else }}en-us{{ end }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
{{/* NOTE: the Site's title, and if there is a page title, that is set too */}}
<title>{{ block "title" . }}{{ .Site.Title }} {{ with .Title }} | {{ . }}{{ end }}{{ end }}</title>
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

{{ .Hugo.Generator }}
{{/* NOTE: For Production make sure you add `HUGO_ENV="production"` before your build command */}}
{{ if eq (getenv "HUGO_ENV") "production" }}
<META NAME="ROBOTS" CONTENT="INDEX, FOLLOW">
{{ else }}
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
{{ end }}

<link href='/dist/main.css' rel='stylesheet' type="text/css" />

{{/* NOTE: These Hugo Internal Templates can be found starting at https://github.com/spf13/hugo/blob/master/tpl/tplimpl/template_embedded.go#L158 */}}
{{- template "_internal/opengraph.html" . -}}
{{- template "_internal/google_news.html" . -}}
{{- template "_internal/schema.html" . -}}
{{- template "_internal/twitter_cards.html" . -}}

{{ if eq (getenv "HUGO_ENV") "production" }}
{{ template "_internal/google_analytics_async.html" . }}
{{ end }}
</head>
<body class="sans-serif bg-near-white">
{{ block "header" . }}{{ partial "site-header.html" .}}{{ end }}
<main class="pb7" role="main">
{{ block "main" . }}{{ end }}
</main>
{{ block "footer" . }}{{ partial "site-footer.html" . }}{{ end }}
{{ block "scripts" . }}{{ partial "site-scripts.html" . }}{{ end }}
</body>
</html>

+ 12
- 0
layouts/_default/list.html View File

{{ define "main" }}

<article class="cf pa3 pa4-m pa4-l nested-copy-line-height nested-img">
<h1>
{{ .Title }}
</h1>
<div class="{{ .Site.Params.copyClass }}">
{{ .Content }}
</div>
</article>
<!-- w-100 w-40-ns -->
{{ end }}

+ 32
- 0
layouts/_default/single.html View File

{{ define "header" }}{{ partial "page-header.html" . }}{{ end }}
{{ define "main" }}
{{ $currentPageUrl := .URL }}
{{ $currentSection := where .Site.Pages "Section" .Section }}

<div class="flex flex-wrap">
<aside class="w-20 pa4 bg-light-silver">
<ul>
{{ range $currentSection }}
<li>
<a href="{{ .URL }}" class="link">
{{ .Title }}
</a>
</li>
{{ end }}
</ul>
</aside>

<article class="center cf pv5 measure-wide-l">

<h4 class="f6">
{{ humanize .Section | upper }}
</h4>
<h1>
{{ .Title }}
</h1>
<div class="nested-copy-line-height nested-links nested-img mid-gray measure-wide-l">
{{ .Content | markdownify }}
</div>
</article>
</div>
{{ end }}

+ 43
- 0
layouts/article/single.html View File

{{ define "header" }}{{ partial "page-header.html" . }}{{ end }}
{{ define "main" }}
{{ $currentPageUrl := .URL }}

<article class="center cf pv5 measure-wide-l">

<h4 class="f6">
{{ humanize .Section | upper }}
</h4>
<h1>
{{ .Title }}
</h1>
<div class="nested-copy-line-height nested-links nested-img mid-gray measure-wide-l">
{{ .Content | markdownify }}
</div>

{{ if .Params.tags }}
<div class="mt5 f6 gray nested-lh-copy bg-light-gray ph3 pv2 measure-wide-l">
{{ $name := index .Params.tags 0 }}
{{ $name := $name | urlize }}
{{ $tags := index .Site.Taxonomies.tags $name }}

<ul class="list dib nested-links ml0 pl0">
<li class="dib mb2 mr2">Related:</li>
{{ range $tags.Pages }}
{{ if ne .URL $currentPageUrl }}
<li class="mb2 mr3">
<a href="{{ .URL }}" class="link">
{{ .LinkTitle }}
</a>
</li>
{{ end }}
{{end}}
</ul>
</div>
{{end}}

<div class="gray f6 mv6">
Last Update: {{ .Lastmod.Format "January 2, 2006" }}
</div>

</article>
{{ end }}

+ 24
- 0
layouts/article/summary.html View File

<div class="relative flex-auto w-100 w-40-ns mr4 mb4 bg-white nested-copy-line-height">

<div class="bg-white mb3 ph4 pv3 gray">
{{ if .Date }}
<date class="f6">
{{ .Date.Format "January 2, 2006" }}
</date>
{{ end }}

<h1 class="f3 near-black">
<a href="{{ .URL }}" class="link dim">
{{ .Title }}
</a>
</h1>

<div class="nested-links f5 nested-copy-line-height">
<p>
{{ .Summary }}
</p>
</div>


</div>
</div>

+ 12
- 0
layouts/index.html View File

{{ define "main" }}
{{ $section := where .Data.Pages "Section" "article" }}
<main class="cf ph3 ph5-l pv3 pv4-l f4 tc center measure-wide lh-copy gray">
{{ .Content }}
</main>

<section class="flex-ns flex-wrap justify-between w-100 mt5 v-top">
{{ range sort $section "Date" "desc" }}
{{ .Render "summary" }}
{{ end }}
</section>
{{ end }}

+ 21
- 0
layouts/partials/page-header.html View File

{{ if .Params.featured_image }}
<header class="cover bg-center"{{ with .Params.featured_image }} style="background-image: url('{{ . }}');"{{ end }}>
<div class="pb3-m pb6-l bg-black-60">
{{ partial "site-navigation.html" .}}
<div class="tc-l pv6 ph3">
<h1 class="f2 f1-l fw2 white-90 mb0 lh-title">{{ .Title | default .Site.Title }}</h1>
{{ if .Params.description }}
<h2 class="fw1 f3 white-80 measure-wide-l center lh-copy mt3 mb4">
{{ .Params.description }}
</h2>
{{ end }}
</div>
</div>
</header>
{{ else }}
<header>
<div class="bg-near-blackTK bg-near-black">
{{ partial "site-navigation.html" . }}
</div>
</header>
{{ end }}

+ 13
- 0
layouts/partials/section-boxes.html View File

<div class="relative flex-auto w-100 w-40-ns mr4 mb4 bg-white nested-copy-line-height">

<div class="bg-white mb3 ph4 pv3 gray">
{{ if .Date }}
<date class="f6">
{{ .Date.Format "January 2, 2006" }}
</date>
{{ end }}



</div>
</div>

+ 5
- 0
layouts/partials/site-footer.html View File

<footer class="cf fixed relative-l bg-near-black bottom-0 w-100 pa3" role="contentinfo">
<a class="f4 fw4 hover-white no-underline white-70 dn dib-ns pv2 ph3" href="{{ .Site.BaseURL }}" >
{{ .Site.Title }}
</a>
</footer>

+ 29
- 0
layouts/partials/site-header.html View File

{{ if .Params.featured_image }}
<header class="cover bg-center"{{ with .Params.featured_image }} style="background-image: url('{{ . }}');"{{ end }}>
<div class="bg-black-60">
{{ partial "site-navigation.html" .}}
<div class="tc-l pv6 ph3">
<h1 class="f2 f1-l fw2 white-90 mb0 lh-title">{{ .Title | default .Site.Title }}</h1>
{{ if .Params.description }}
<h2 class="fw1 f3 white-80 mt3">
{{ .Params.description }}
</h2>
{{ end }}
</div>
</div>
</header>
{{ else }}
<header>
<div class="pb3-m pb6-l bg-near-black">
{{ partial "site-navigation.html" . }}
<div class="tc-l pv3 ph3">
<h1 class="f2 f1-l fw2 light-silver mb0 lh-title">{{ .Title | default .Site.Title }}</h1>
{{ if .Params.description }}
<h2 class="fw1 f3 white-80 measure-wide-l center lh-copy mt3 mb4">
{{ .Params.description }}
</h2>
{{ end }}
</div>
</div>
</header>
{{ end }}

+ 16
- 0
layouts/partials/site-navigation.html View File

<nav class="w-100 flex-ns justify-between items-center pv3" role="navigation">
<a href="/" class="f3 fw8 hover-white no-underline white-90 dib pv2 ph3">
{{ .Site.Title }}
</a>
<div>
<ul>
{{ range .Site.Menus.main }}
<li class="list f5 f4-ns fw4 dib">
<a class="hover-white no-underline white-70 pv2 ph3" href="{{ .URL }}" >
{{ .Name }}
</a>
</li>
{{ end }}
</ul>
</div>
</nav>

+ 1
- 0
layouts/partials/site-scripts.html View File

<script src="/dist/app.bundle.js" async></script>

+ 1
- 0
layouts/partials/svg/facebook.svg View File

<svg width="32px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M15.117 0H.883C.395 0 0 .395 0 .883v14.234c0 .488.395.883.883.883h7.663V9.804H6.46V7.39h2.086V5.607c0-2.066 1.262-3.19 3.106-3.19.883 0 1.642.064 1.863.094v2.16h-1.28c-1 0-1.195.48-1.195 1.18v1.54h2.39l-.31 2.42h-2.08V16h4.077c.488 0 .883-.395.883-.883V.883C16 .395 15.605 0 15.117 0" fill-rule="nonzero" fill="#8d99ae"/></svg>

+ 1
- 0
layouts/partials/svg/instagram.svg View File

<svg width="32px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M8 0C5.827 0 5.555.01 4.702.048 3.85.088 3.27.222 2.76.42c-.526.204-.973.478-1.417.923-.445.444-.72.89-.923 1.417-.198.51-.333 1.09-.372 1.942C.008 5.555 0 5.827 0 8s.01 2.445.048 3.298c.04.852.174 1.433.372 1.942.204.526.478.973.923 1.417.444.445.89.72 1.417.923.51.198 1.09.333 1.942.372.853.04 1.125.048 3.298.048s2.445-.01 3.298-.048c.852-.04 1.433-.174 1.942-.372.526-.204.973-.478 1.417-.923.445-.444.72-.89.923-1.417.198-.51.333-1.09.372-1.942.04-.853.048-1.125.048-3.298s-.01-2.445-.048-3.298c-.04-.852-.174-1.433-.372-1.942-.204-.526-.478-.973-.923-1.417-.444-.445-.89-.72-1.417-.923-.51-.198-1.09-.333-1.942-.372C10.445.008 10.173 0 8 0zm0 1.44c2.136 0 2.39.01 3.233.048.78.036 1.203.166 1.485.276.374.145.64.318.92.598.28.28.453.546.598.92.11.282.24.705.276 1.485.038.844.047 1.097.047 3.233s-.01 2.39-.05 3.233c-.04.78-.17 1.203-.28 1.485-.15.374-.32.64-.6.92-.28.28-.55.453-.92.598-.28.11-.71.24-1.49.276-.85.038-1.1.047-3.24.047s-2.39-.01-3.24-.05c-.78-.04-1.21-.17-1.49-.28-.38-.15-.64-.32-.92-.6-.28-.28-.46-.55-.6-.92-.11-.28-.24-.71-.28-1.49-.03-.84-.04-1.1-.04-3.23s.01-2.39.04-3.24c.04-.78.17-1.21.28-1.49.14-.38.32-.64.6-.92.28-.28.54-.46.92-.6.28-.11.7-.24 1.48-.28.85-.03 1.1-.04 3.24-.04zm0 2.452c-2.27 0-4.108 1.84-4.108 4.108 0 2.27 1.84 4.108 4.108 4.108 2.27 0 4.108-1.84 4.108-4.108 0-2.27-1.84-4.108-4.108-4.108zm0 6.775c-1.473 0-2.667-1.194-2.667-2.667 0-1.473 1.194-2.667 2.667-2.667 1.473 0 2.667 1.194 2.667 2.667 0 1.473-1.194 2.667-2.667 2.667zm5.23-6.937c0 .53-.43.96-.96.96s-.96-.43-.96-.96.43-.96.96-.96.96.43.96.96z" fill="#8d99ae"/></svg>

+ 1
- 0
layouts/partials/svg/twitter.svg View File

<svg width="32px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M16 3.038c-.59.26-1.22.437-1.885.517.677-.407 1.198-1.05 1.443-1.816-.634.37-1.337.64-2.085.79-.598-.64-1.45-1.04-2.396-1.04-1.812 0-3.282 1.47-3.282 3.28 0 .26.03.51.085.75-2.728-.13-5.147-1.44-6.766-3.42C.83 2.58.67 3.14.67 3.75c0 1.14.58 2.143 1.46 2.732-.538-.017-1.045-.165-1.487-.41v.04c0 1.59 1.13 2.918 2.633 3.22-.276.074-.566.114-.865.114-.21 0-.41-.02-.61-.058.42 1.304 1.63 2.253 3.07 2.28-1.12.88-2.54 1.404-4.07 1.404-.26 0-.52-.015-.78-.045 1.46.93 3.18 1.474 5.04 1.474 6.04 0 9.34-5 9.34-9.33 0-.14 0-.28-.01-.42.64-.46 1.2-1.04 1.64-1.7z" fill-rule="nonzero" fill="#8d99ae"/></svg>

+ 8
- 0
layouts/robots.txt View File

User-agent: *
# robotstxt.org - if ENV production variable is false robots will be disallowed.
{{ if eq (getenv "HUGO_ENV") "production" }}
Disallow: admin/
Disallow:
{{ else }}
Disallow: /
{{ end }}

+ 16
- 0
layouts/section/article.html View File

{{ define "main" }}
{{ $section := where .Data.Pages "Section" .Section }}
<article class="cf pa3 pa4-m pa4-l nested-copy-line-height nested-img">
<h1>
{{ .Title }}
</h1>
<div class="{{ .Site.Params.copyClass }}">
{{ .Content }}
</div>
<section class="flex-ns flex-wrap justify-between w-100 mt5 v-top">
{{ range sort $section "Date" "desc" }}
{{ .Render "summary" }}
{{ end }}
</section>
</article>
{{ end }}

+ 20
- 0
package.json View File

{
"name": "gohugo-default-theme",
"version": "1.0.0",
"description": "Base Theme to start Hugo Sites",
"main": "index.js",
"repository": {
"type": "git",
"url": "git+https://github.com/theNewDynamic/thenewdynamic.com.git"
},
"keywords": [
"hugo",
"gohugo"
],
"author": "budparr",
"license": "MIT",
"bugs": {
"url": "https://github.com/theNewDynamic/thenewdynamic.com/issues"
},
"homepage": "https://github.com/theNewDynamic/thenewdynamic.com#readme"
}

+ 28
- 0
readme.md View File

### [wip] A Base theme for [Hugo](http://gohugo.io/), a framework for building websites.

A base theme for Hugo sites. Though it looks like a theme, the intent is to provide a solid starting place for Hugo sites and include best practices for performance, A11y, and rapid development.

It's subject to change quite a bit at this point.


Features

- Automated Robots.txt (changes values based on environment)

includes examples of

- internal templates for meta data and google analytics
- pagination (internal template)
- with
- HUGO_ENV
- first
- after
- sort
- site LanguageCode
- where
- Content Views
- partials
- template layouts (type "article" uses a special list template, single template, and a content view)
- tags

accessible

+ 10
- 0
sitemap.xml View File

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
{{ range .Data.Pages }}
<url>
<loc>{{ .Permalink }}</loc>
<lastmod>{{ safeHTML ( .Date.Format "2006-01-02T15:04:05-07:00" ) }}</lastmod>{{ with .Sitemap.ChangeFreq }}
<changefreq>{{ . }}</changefreq>{{ end }}{{ if ge .Sitemap.Priority 0.0 }}
<priority>{{ .Sitemap.Priority }}</priority>{{ end }}
</url>
{{ end }}
</urlset>

+ 5
- 0
src/css/_styles.css View File

/*reset */

body {
margin: 0;
}

+ 94
- 0
src/css/_tachyons.css View File

/*! TACHYONS v4.7.0 | http://tachyons.io */

/*
*
* ________ ______
* ___ __/_____ _________ /______ ______________________
* __ / _ __ `/ ___/_ __ \_ / / / __ \_ __ \_ ___/
* _ / / /_/ // /__ _ / / / /_/ // /_/ / / / /(__ )
* /_/ \__,_/ \___/ /_/ /_/_\__, / \____//_/ /_//____/
* /____/
*
* TABLE OF CONTENTS
*
* 1. External Library Includes
* - Normalize.css | http://normalize.css.github.io
* 2. Tachyons Modules
* 3. Variables
* - Media Queries
* - Colors
* 4. Debugging
* - Debug all
* - Debug children
*
*/


/* External Library Includes */
@import 'tachyons/_normalize';


/* Modules */
@import 'tachyons/_box-sizing';
@import 'tachyons/_aspect-ratios';
@import 'tachyons/_images';
@import 'tachyons/_background-size';
@import 'tachyons/_background-position';
@import 'tachyons/_outlines';
@import 'tachyons/_borders';
@import 'tachyons/_border-colors';
@import 'tachyons/_border-radius';
@import 'tachyons/_border-style';
@import 'tachyons/_border-widths';
@import 'tachyons/_box-shadow';
@import 'tachyons/_code';
@import 'tachyons/_coordinates';
@import 'tachyons/_clears';
@import 'tachyons/_display';
@import 'tachyons/_flexbox';
@import 'tachyons/_floats';
@import 'tachyons/_font-family';
@import 'tachyons/_font-style';
@import 'tachyons/_font-weight';
@import 'tachyons/_forms';
@import 'tachyons/_heights';
@import 'tachyons/_letter-spacing';
@import 'tachyons/_line-height';
@import 'tachyons/_links';
@import 'tachyons/_lists';
@import 'tachyons/_max-widths';
@import 'tachyons/_widths';
@import 'tachyons/_overflow';
@import 'tachyons/_position';
@import 'tachyons/_opacity';
@import 'tachyons/_rotations';
@import 'tachyons/_skins';
@import 'tachyons/_skins-pseudo';
@import 'tachyons/_spacing';
@import 'tachyons/_negative-margins';
@import 'tachyons/_tables';
@import 'tachyons/_text-decoration';
@import 'tachyons/_text-align';
@import 'tachyons/_text-transform';
@import 'tachyons/_type-scale';
@import 'tachyons/_typography';
@import 'tachyons/_utilities';
@import 'tachyons/_visibility';
@import 'tachyons/_white-space';
@import 'tachyons/_vertical-align';
@import 'tachyons/_hovers';
@import 'tachyons/_z-index';
@import 'tachyons/_nested';
@import 'tachyons/_styles';

/* Variables */
/* Importing here will allow you to override any variables in the modules */
@import 'tachyons/_colors';
@import 'tachyons/_media-queries';

/* Debugging */
/*@import 'tachyons/_debug-children';
@import 'tachyons/_debug-grid';*/

/* Uncomment out the line below to help debug layout issues */
/* @import 'tachyons/_debug'; */

+ 2
- 0
src/css/main.css View File

@import '_tachyons';
@import '_styles';

+ 16
- 0
src/css/postcss.config.js View File

module.exports = {
output: './../static/css/mainyo.min.css',
plugins: {
'postcss-import': {},
'postcss-cssnext': {
browsers: ['last 2 versions', '> 5%'],
},
'cssnano': {
discardComments: {
removeAll: true
},
minifyFontValues: false,
autoprefixer: false
}
}
};

+ 135
- 0
src/css/tachyons/_aspect-ratios.css View File

/*

ASPECT RATIOS

*/

/* This is for fluid media that is embedded from third party sites like youtube, vimeo etc.
* Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e
* Make sure there are no height and width attributes on the embedded media.
* Adapted from: https://github.com/suitcss/components-flex-embed
*
* Example:
*
* <div class="aspect-ratio aspect-ratio--16x9">
* <iframe class="aspect-ratio--object"></iframe>
* </div>
*
* */

.aspect-ratio {
height: 0;
position: relative;
}

.aspect-ratio--16x9 { padding-bottom: 56.25%; }
.aspect-ratio--9x16 { padding-bottom: 177.77%; }

.aspect-ratio--4x3 { padding-bottom: 75%; }
.aspect-ratio--3x4 { padding-bottom: 133.33%; }

.aspect-ratio--6x4 { padding-bottom: 66.6%; }
.aspect-ratio--4x6 { padding-bottom: 150%; }

.aspect-ratio--8x5 { padding-bottom: 62.5%; }
.aspect-ratio--5x8 { padding-bottom: 160%; }

.aspect-ratio--7x5 { padding-bottom: 71.42%; }
.aspect-ratio--5x7 { padding-bottom: 140%; }

.aspect-ratio--1x1 { padding-bottom: 100%; }

.aspect-ratio--object {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}

@media (--breakpoint-not-small){
.aspect-ratio-ns {
height: 0;
position: relative;
}
.aspect-ratio--16x9-ns { padding-bottom: 56.25%; }
.aspect-ratio--9x16-ns { padding-bottom: 177.77%; }
.aspect-ratio--4x3-ns { padding-bottom: 75%; }
.aspect-ratio--3x4-ns { padding-bottom: 133.33%; }
.aspect-ratio--6x4-ns { padding-bottom: 66.6%; }
.aspect-ratio--4x6-ns { padding-bottom: 150%; }
.aspect-ratio--8x5-ns { padding-bottom: 62.5%; }
.aspect-ratio--5x8-ns { padding-bottom: 160%; }
.aspect-ratio--7x5-ns { padding-bottom: 71.42%; }
.aspect-ratio--5x7-ns { padding-bottom: 140%; }
.aspect-ratio--1x1-ns { padding-bottom: 100%; }
.aspect-ratio--object-ns {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}
}

@media (--breakpoint-medium){
.aspect-ratio-m {
height: 0;
position: relative;
}
.aspect-ratio--16x9-m { padding-bottom: 56.25%; }
.aspect-ratio--9x16-m { padding-bottom: 177.77%; }
.aspect-ratio--4x3-m { padding-bottom: 75%; }
.aspect-ratio--3x4-m { padding-bottom: 133.33%; }
.aspect-ratio--6x4-m { padding-bottom: 66.6%; }
.aspect-ratio--4x6-m { padding-bottom: 150%; }
.aspect-ratio--8x5-m { padding-bottom: 62.5%; }
.aspect-ratio--5x8-m { padding-bottom: 160%; }
.aspect-ratio--7x5-m { padding-bottom: 71.42%; }
.aspect-ratio--5x7-m { padding-bottom: 140%; }
.aspect-ratio--1x1-m { padding-bottom: 100%; }
.aspect-ratio--object-m {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}
}

@media (--breakpoint-large){
.aspect-ratio-l {
height: 0;
position: relative;
}
.aspect-ratio--16x9-l { padding-bottom: 56.25%; }
.aspect-ratio--9x16-l { padding-bottom: 177.77%; }
.aspect-ratio--4x3-l { padding-bottom: 75%; }
.aspect-ratio--3x4-l { padding-bottom: 133.33%; }
.aspect-ratio--6x4-l { padding-bottom: 66.6%; }
.aspect-ratio--4x6-l { padding-bottom: 150%; }
.aspect-ratio--8x5-l { padding-bottom: 62.5%; }
.aspect-ratio--5x8-l { padding-bottom: 160%; }
.aspect-ratio--7x5-l { padding-bottom: 71.42%; }
.aspect-ratio--5x7-l { padding-bottom: 140%; }
.aspect-ratio--1x1-l { padding-bottom: 100%; }
.aspect-ratio--object-l {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}
}

+ 126
- 0
src/css/tachyons/_background-position.css View File

/*

BACKGROUND POSITION

Base:
bg = background

Modifiers:
-center = center center
-top = top center
-right = center right
-bottom = bottom center
-left = center left

Media Query Extensions:
-ns = not-small
-m = medium
-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 (--breakpoint-not-small) {
.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 (--breakpoint-medium) {
.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 (--breakpoint-large) {
.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;
}
}

+ 34
- 0
src/css/tachyons/_background-size.css View File

/*

BACKGROUND SIZE
Docs: http://tachyons.io/docs/themes/background-size/

Media Query Extensions:
-ns = not-small
-m = medium
-l = large

*/

/*
Often used in combination with background image set as an inline style
on an html element.
*/

.cover { background-size: cover!important; }
.contain { background-size: contain!important; }

@media (--breakpoint-not-small) {
.cover-ns { background-size: cover!important; }
.contain-ns { background-size: contain!important; }
}

@media (--breakpoint-medium) {
.cover-m { background-size: cover!important; }
.contain-m { background-size: contain!important; }
}

@media (--breakpoint-large) {
.cover-l { background-size: cover!important; }
.contain-l { background-size: contain!important; }
}

+ 86
- 0
src/css/tachyons/_border-colors.css View File

/*

BORDER COLORS
Docs: http://tachyons.io/docs/themes/borders/

Border colors can be used to extend the base
border classes ba,bt,bb,br,bl found in the _borders.css file.

The base border class by default will set the color of the border
to that of the current text color. These classes are for the cases
where you desire for the text and border colors to be different.

Base:
b = border

Modifiers:
--color-name = each color variable name is also a border color name

*/

.b--black { border-color: var(--black); }
.b--near-black { border-color: var(--near-black); }
.b--dark-gray { border-color: var(--dark-gray); }
.b--mid-gray { border-color: var(--mid-gray); }
.b--gray { border-color: var(--gray); }
.b--silver { border-color: var(--silver); }
.b--light-silver { border-color: var(--light-silver); }
.b--moon-gray { border-color: var(--moon-gray); }
.b--light-gray { border-color: var(--light-gray); }
.b--near-white { border-color: var(--near-white); }
.b--white { border-color: var(--white); }

.b--white-90 { border-color: var(--white-90); }
.b--white-80 { border-color: var(--white-80); }
.b--white-70 { border-color: var(--white-70); }
.b--white-60 { border-color: var(--white-60); }
.b--white-50 { border-color: var(--white-50); }
.b--white-40 { border-color: var(--white-40); }
.b--white-30 { border-color: var(--white-30); }
.b--white-20 { border-color: var(--white-20); }
.b--white-10 { border-color: var(--white-10); }
.b--white-05 { border-color: var(--white-05); }
.b--white-025 { border-color: var(--white-025); }
.b--white-0125 { border-color: var(--white-0125); }

.b--black-90 { border-color: var(--black-90); }
.b--black-80 { border-color: var(--black-80); }
.b--black-70 { border-color: var(--black-70); }
.b--black-60 { border-color: var(--black-60); }
.b--black-50 { border-color: var(--black-50); }
.b--black-40 { border-color: var(--black-40); }
.b--black-30 { border-color: var(--black-30); }
.b--black-20 { border-color: var(--black-20); }
.b--black-10 { border-color: var(--black-10); }
.b--black-05 { border-color: var(--black-05); }
.b--black-025 { border-color: var(--black-025); }
.b--black-0125 { border-color: var(--black-0125); }

.b--dark-red { border-color: var(--dark-red); }
.b--red { border-color: var(--red); }
.b--light-red { border-color: var(--light-red); }
.b--orange { border-color: var(--orange); }
.b--gold { border-color: var(--gold); }
.b--yellow { border-color: var(--yellow); }
.b--light-yellow { border-color: var(--light-yellow); }
.b--purple { border-color: var(--purple); }
.b--light-purple { border-color: var(--light-purple); }
.b--dark-pink { border-color: var(--dark-pink); }
.b--hot-pink { border-color: var(--hot-pink); }
.b--pink { border-color: var(--pink); }
.b--light-pink { border-color: var(--light-pink); }
.b--dark-green { border-color: var(--dark-green); }
.b--green { border-color: var(--green); }
.b--light-green { border-color: var(--light-green); }
.b--navy { border-color: var(--navy); }
.b--dark-blue { border-color: var(--dark-blue); }
.b--blue { border-color: var(--blue); }
.b--light-blue { border-color: var(--light-blue); }
.b--lightest-blue { border-color: var(--lightest-blue); }
.b--washed-blue { border-color: var(--washed-blue); }
.b--washed-green { border-color: var(--washed-green); }
.b--washed-yellow { border-color: var(--washed-yellow); }
.b--washed-red { border-color: var(--washed-red); }

.b--transparent { border-color: var(--transparent); }
.b--inherit { border-color: inherit; }

+ 127
- 0
src/css/tachyons/_border-radius.css View File

/*

BORDER RADIUS
Docs: http://tachyons.io/docs/themes/border-radius/

Base:
br = border-radius

Modifiers:
0 = 0/none
1 = 1st step in scale
2 = 2nd step in scale
3 = 3rd step in scale
4 = 4th step in scale

Literal values:
-100 = 100%
-pill = 9999px

Media Query Extensions:
-ns = not-small
-m = medium
-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 (--breakpoint-not-small) {
.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 (--breakpoint-medium) {
.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 (--breakpoint-large) {
.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;
}
}

+ 48
- 0
src/css/tachyons/_border-style.css View File

/*

BORDER STYLES
Docs: http://tachyons.io/docs/themes/borders/

Depends on base border module in _borders.css

Base:
b = border-style

Modifiers:
--none = none
--dotted = dotted
--dashed = dashed
--solid = solid

Media Query Extensions:
-ns = not-small
-m = medium
-l = large

*/

.b--dotted { border-style: dotted; }
.b--dashed { border-style: dashed; }
.b--solid { border-style: solid; }
.b--none { border-style: none; }

@media (--breakpoint-not-small) {
.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 (--breakpoint-medium) {
.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 (--breakpoint-large) {
.b--dotted-l { border-style: dotted; }
.b--dashed-l { border-style: dashed; }
.b--solid-l { border-style: solid; }
.b--none-l { border-style: none; }
}

+ 74
- 0
src/css/tachyons/_border-widths.css View File

/*

BORDER WIDTHS
Docs: http://tachyons.io/docs/themes/borders/

Base:
bw = border-width

Modifiers:
0 = 0 width border
1 = 1st step in border-width scale
2 = 2nd step in border-width scale
3 = 3rd step in border-width scale
4 = 4th step in border-width scale
5 = 5th step in border-width scale

Media Query Extensions:
-ns = not-small
-m = medium
-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 (--breakpoint-not-small) {
.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 (--breakpoint-medium) {
.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 (--breakpoint-large) {
.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; }
}

+ 58
- 0
src/css/tachyons/_borders.css View File

/*

BORDERS
Docs: http://tachyons.io/docs/themes/borders/

Base:
b = border

Modifiers:
a = all
t = top
r = right
b = bottom
l = left
n = none

Media Query Extensions:
-ns = not-small
-m = medium
-l = large

*/

.ba { border-style: solid; border-width: 1px; }
.bt { border-top-style: solid; border-top-width: 1px; }
.br { border-right-style: solid; border-right-width: 1px; }
.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 (--breakpoint-not-small) {
.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 (--breakpoint-medium) {
.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 (--breakpoint-large) {
.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; }
}


+ 41
- 0
src/css/tachyons/_box-shadow.css View File

/*

BOX-SHADOW
Docs: http://tachyons.io/docs/themes/box-shadow/

Media Query Extensions:
-ns = not-small
-m = medium
-l = large

*/

.shadow-1 { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); }
.shadow-2 { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); }
.shadow-3 { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); }
.shadow-4 { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); }
.shadow-5 { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); }

@media (--breakpoint-not-small) {
.shadow-1-ns { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); }
.shadow-2-ns { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); }
.shadow-3-ns { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); }
.shadow-4-ns { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); }
.shadow-5-ns { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); }
}

@media (--breakpoint-medium) {
.shadow-1-m { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); }
.shadow-2-m { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); }
.shadow-3-m { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); }
.shadow-4-m { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); }
.shadow-5-m { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); }
}

@media (--breakpoint-large) {
.shadow-1-l { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); }
.shadow-2-l { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); }
.shadow-3-l { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); }
.shadow-4-l { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); }
.shadow-5-l { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); }
}

+ 43
- 0
src/css/tachyons/_box-sizing.css View File

/*
BOX SIZING

*/

html,
body,
div,
article,
section,
main,
footer,
header,
form,
fieldset,
legend,
pre,
code,
a,
h1,h2,h3,h4,h5,h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
textarea,
table,
td,
th,
tr,
input[type="email"],
input[type="number"],
input[type="password"],
input[type="tel"],
input[type="text"],
input[type="url"],
.border-box {
box-sizing: border-box;
}


+ 40
- 0
src/css/tachyons/_clears.css View File

/*

CLEARFIX
http://tachyons.io/docs/layout/clearfix/

*/

/* Nicolas Gallaghers Clearfix solution
Ref: http://nicolasgallagher.com/micro-clearfix-hack/ */

.cf:before,
.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 (--breakpoint-not-small) {
.cl-ns { clear: left; }
.cr-ns { clear: right; }
.cb-ns { clear: both; }
.cn-ns { clear: none; }
}

@media (--breakpoint-medium) {
.cl-m { clear: left; }
.cr-m { clear: right; }
.cb-m { clear: both; }
.cn-m { clear: none; }
}

@media (--breakpoint-large) {
.cl-l { clear: left; }
.cr-l { clear: right; }
.cb-l { clear: both; }
.cn-l { clear: none; }
}

+ 11
- 0
src/css/tachyons/_code.css View File

/*

CODE

*/

.pre {
overflow-x: auto;
overflow-y: hidden;
overflow: scroll;
}

+ 80
- 0
src/css/tachyons/_colors.css View File

/*

Tachyons
COLOR VARIABLES

Grayscale
- Solids
- Transparencies
Colors

*/

:root {
--black: #000;
--near-black: #111;
--dark-gray:#333;
--mid-gray:#555;
--gray: #777;
--silver: #999;
--light-silver: #aaa;
--moon-gray: #ccc;
--light-gray: #eee;
--near-white: #f4f4f4;
--white: #fff;

--transparent:transparent;

--black-90: rgba(0,0,0,.9);
--black-80: rgba(0,0,0,.8);
--black-70: rgba(0,0,0,.7);
--black-60: rgba(0,0,0,.6);
--black-50: rgba(0,0,0,.5);
--black-40: rgba(0,0,0,.4);
--black-30: rgba(0,0,0,.3);
--black-20: rgba(0,0,0,.2);
--black-10: rgba(0,0,0,.1);
--black-05: rgba(0,0,0,.05);
--black-025: rgba(0,0,0,.025);
--black-0125: rgba(0,0,0,.0125);

--white-90: rgba(255,255,255,.9);
--white-80: rgba(255,255,255,.8);
--white-70: rgba(255,255,255,.7);
--white-60: rgba(255,255,255,.6);
--white-50: rgba(255,255,255,.5);
--white-40: rgba(255,255,255,.4);
--white-30: rgba(255,255,255,.3);
--white-20: rgba(255,255,255,.2);
--white-10: rgba(255,255,255,.1);
--white-05: rgba(255,255,255,.05);
--white-025: rgba(255,255,255,.025);
--white-0125: rgba(255,255,255,.0125);

--dark-red: #e7040f;
--red: #ff4136;
--light-red: #ff725c;
--orange: #ff6300;
--gold: #ffb700;
--yellow: #ffd700;
--light-yellow: #fbf1a9;
--purple: #5e2ca5;
--light-purple: #a463f2;
--dark-pink: #d5008f;
--hot-pink: #ff41b4;
--pink: #ff80cc;
--light-pink: #ffa3d7;
--dark-green: #137752;
--green: #19a974;
--light-green: #9eebcf;
--navy: #001b44;
--dark-blue: #00449e;
--blue: #357edd;
--light-blue: #96ccff;
--lightest-blue: #cdecff;
--washed-blue: #f6fffe;
--washed-green: #e8fdf5;
--washed-yellow: #fffceb;
--washed-red: #ffdfdf;

}

+ 146
- 0
src/css/tachyons/_coordinates.css View File

/*

COORDINATES
Docs: http://tachyons.io/docs/layout/position/

Use in combination with the position module.

Base:
top
bottom
right
left

Modifiers:
-0 = literal value 0
-1 = literal value 1
-2 = literal value 2
--1 = literal value -1
--2 = literal value -2

Media Query Extensions:
-ns = not-small
-m = medium
-l = large

*/

.top-0 { top: 0; }
.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 (--breakpoint-not-small) {
.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 (--breakpoint-medium) {
.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 (--breakpoint-large) {
.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;
}
}

+ 14
- 0
src/css/tachyons/_debug-children.css View File

/*

DEBUG CHILDREN
Docs: http://tachyons.io/docs/debug/

Just add the debug class to any element to see outlines on its
children.

*/

.debug * { outline: 1px solid gold; }
.debug-white * { outline: 1px solid white; }
.debug-black * { outline: 1px solid black; }


+ 26
- 0
src/css/tachyons/_debug-grid.css View File

/*

DEBUG GRID
http://tachyons.io/docs/debug-grid/

Can be useful for debugging layout issues
or helping to make sure things line up perfectly.
Just tack one of these classes onto a parent element.

*/

.debug-grid {
background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTRDOTY4N0U2N0VFMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTRDOTY4N0Q2N0VFMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3NjY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3NzY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsBS+GMAAAAjSURBVHjaYvz//z8DLsD4gcGXiYEAGBIKGBne//fFpwAgwAB98AaF2pjlUQAAAABJRU5ErkJggg==) repeat top left;
}

.debug-grid-16 {
background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODYyRjhERDU2N0YyMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODYyRjhERDQ2N0YyMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3QTY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3QjY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvCS01IAAABMSURBVHjaYmR4/5+BFPBfAMFm/MBgx8RAGWCn1AAmSg34Q6kBDKMGMDCwICeMIemF/5QawEipAWwUhwEjMDvbAWlWkvVBwu8vQIABAEwBCph8U6c0AAAAAElFTkSuQmCC) repeat top left;
}

.debug-grid-8-solid {
background:white url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAAAAAD/4QMxaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzExMSA3OS4xNTgzMjUsIDIwMTUvMDkvMTAtMDE6MTA6MjAgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkIxMjI0OTczNjdCMzExRTZCMkJDRTI0MDgxMDAyMTcxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkIxMjI0OTc0NjdCMzExRTZCMkJDRTI0MDgxMDAyMTcxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QjEyMjQ5NzE2N0IzMTFFNkIyQkNFMjQwODEwMDIxNzEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QjEyMjQ5NzI2N0IzMTFFNkIyQkNFMjQwODEwMDIxNzEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAbGhopHSlBJiZBQi8vL0JHPz4+P0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHAR0pKTQmND8oKD9HPzU/R0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0f/wAARCAAIAAgDASIAAhEBAxEB/8QAWQABAQAAAAAAAAAAAAAAAAAAAAYBAQEAAAAAAAAAAAAAAAAAAAIEEAEBAAMBAAAAAAAAAAAAAAABADECA0ERAAEDBQAAAAAAAAAAAAAAAAARITFBUWESIv/aAAwDAQACEQMRAD8AoOnTV1QTD7JJshP3vSM3P//Z) repeat top left;
}

.debug-grid-16-solid {
background:white url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzY3MkJEN0U2N0M1MTFFNkIyQkNFMjQwODEwMDIxNzEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzY3MkJEN0Y2N0M1MTFFNkIyQkNFMjQwODEwMDIxNzEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3QzY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3RDY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pve6J3kAAAAzSURBVHjaYvz//z8D0UDsMwMjSRoYP5Gq4SPNbRjVMEQ1fCRDg+in/6+J1AJUxsgAEGAA31BAJMS0GYEAAAAASUVORK5CYII=) repeat top left;
}

+ 132
- 0
src/css/tachyons/_debug.css View File

/*
DEBUG (PESTICIDE)
Docs: http://tachyons.io/docs/debug/

This is a partial you have to manually include in your
build file. It places a different colored outline on
each element which can help you debug layout issues.
There is also a handy chrome extension that can
be found at http://pesticide.io

*/

body { outline: 1px solid #2980B9!important; }
article { outline: 1px solid #3498DB!important; }
nav { outline: 1px solid #0088C3!important; }
aside { outline: 1px solid #33A0CE!important; }
section { outline: 1px solid #66B8DA!important; }
header { outline: 1px solid #99CFE7!important; }
footer { outline: 1px solid #CCE7F3!important; }
h1 { outline: 1px solid #162544!important; }
h2 { outline: 1px solid #314E6E!important; }
h3 { outline: 1px solid #3E5E85!important; }
h4 { outline: 1px solid #449BAF!important; }
h5 { outline: 1px solid #C7D1CB!important; }
h6 { outline: 1px solid #4371D0!important; }
main { outline: 1px solid #2F4F90!important; }
address { outline: 1px solid #1A2C51!important; }
div { outline: 1px solid #036CDB!important; }


p { outline: 1px solid #AC050B!important; }
hr { outline: 1px solid #FF063F!important; }
pre { outline: 1px solid #850440!important; }
blockquote { outline: 1px solid #F1B8E7!important; }
ol { outline: 1px solid #FF050C!important; }
ul { outline: 1px solid #D90416!important; }
li { outline: 1px solid #D90416!important; }
dl { outline: 1px solid #FD3427!important; }
dt { outline: 1px solid #FF0043!important; }
dd { outline: 1px solid #E80174!important; }
figure { outline: 1px solid #FF00BB!important; }
figcaption { outline: 1px solid #BF0032!important; }



table { outline: 1px solid #00CC99!important; }
caption { outline: 1px solid #37FFC4!important; }
thead { outline: 1px solid #98DACA!important; }
tbody { outline: 1px solid #64A7A0!important; }
tfoot { outline: 1px solid #22746B!important; }
tr { outline: 1px solid #86C0B2!important; }
th { outline: 1px solid #A1E7D6!important; }
td { outline: 1px solid #3F5A54!important; }
col { outline: 1px solid #6C9A8F!important; }
colgroup { outline: 1px solid #6C9A9D!important; }


button { outline: 1px solid #DA8301!important; }
datalist { outline: 1px solid #C06000!important; }
fieldset { outline: 1px solid #D95100!important; }
form { outline: 1px solid #D23600!important; }
input { outline: 1px solid #FCA600!important; }
keygen { outline: 1px solid #B31E00!important; }
label { outline: 1px solid #EE8900!important; }
legend { outline: 1px solid #DE6D00!important; }
meter { outline: 1px solid #E8630C!important; }
optgroup { outline: 1px solid #B33600!important; }
option { outline: 1px solid #FF8A00!important; }
output { outline: 1px solid #FF9619!important; }
progress { outline: 1px solid #E57C00!important; }
select { outline: 1px solid #E26E0F!important; }
textarea { outline: 1px solid #CC5400!important; }



details { outline: 1px solid #33848F!important; }
summary { outline: 1px solid #60A1A6!important; }
command { outline: 1px solid #438DA1!important; }
menu { outline: 1px solid #449DA6!important; }



del { outline: 1px solid #BF0000!important; }
ins { outline: 1px solid #400000!important; }



img { outline: 1px solid #22746B!important; }
iframe { outline: 1px solid #64A7A0!important; }
embed { outline: 1px solid #98DACA!important; }
object { outline: 1px solid #00CC99!important; }
param { outline: 1px solid #37FFC4!important; }
video { outline: 1px solid #6EE866!important; }
audio { outline: 1px solid #027353!important; }
source { outline: 1px solid #012426!important; }
canvas { outline: 1px solid #A2F570!important; }
track { outline: 1px solid #59A600!important; }
map { outline: 1px solid #7BE500!important; }
area { outline: 1px solid #305900!important; }



a { outline: 1px solid #FF62AB!important; }
em { outline: 1px solid #800B41!important; }
strong { outline: 1px solid #FF1583!important; }
i { outline: 1px solid #803156!important; }
b { outline: 1px solid #CC1169!important; }
u { outline: 1px solid #FF0430!important; }
s { outline: 1px solid #F805E3!important; }
small { outline: 1px solid #D107B2!important; }
abbr { outline: 1px solid #4A0263!important; }
q { outline: 1px solid #240018!important; }
cite { outline: 1px solid #64003C!important; }
dfn { outline: 1px solid #B4005A!important; }
sub { outline: 1px solid #DBA0C8!important; }
sup { outline: 1px solid #CC0256!important; }
time { outline: 1px solid #D6606D!important; }
code { outline: 1px solid #E04251!important; }
kbd { outline: 1px solid #5E001F!important; }
samp { outline: 1px solid #9C0033!important; }
var { outline: 1px solid #D90047!important; }
mark { outline: 1px solid #FF0053!important; }
bdi { outline: 1px solid #BF3668!important; }
bdo { outline: 1px solid #6F1400!important; }
ruby { outline: 1px solid #FF7B93!important; }
rt { outline: 1px solid #FF2F54!important; }
rp { outline: 1px solid #803E49!important; }
span { outline: 1px solid #CC2643!important; }
br { outline: 1px solid #DB687D!important; }
wbr { outline: 1px solid #DB175B!important; }


+ 104
- 0
src/css/tachyons/_display.css View File

/*

DISPLAY
Docs: http://tachyons.io/docs/layout/display

Base:
d = display

Modifiers:
n = none
b = block
ib = inline-block
it = inline-table
t = table
tc = table-cell
t-row = table-row
t-columm = table-column
t-column-group = table-column-group

Media Query Extensions:
-ns = not-small
-m = medium
-l = large

*/

.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 (--breakpoint-not-small) {
.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 (--breakpoint-medium) {
.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 (--breakpoint-large) {
.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%;
}
}


+ 222
- 0
src/css/tachyons/_flexbox.css View File

/*

FLEXBOX

Media Query Extensions:
-ns = not-small
-m = medium
-l = large

*/

.flex { display: flex; }
.inline-flex { display: inline-flex; }

/* 1. Fix for Chrome 44 bug.
* https://code.google.com/p/chromium/issues/detail?id=506893 */
.flex-auto {
flex: 1 1 auto;
min-width: 0; /* 1 */
min-height: 0; /* 1 */
}

.flex-none { flex: none; }

.flex-column { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-column-reverse { flex-direction: column-reverse; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }

.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }

.self-start { align-self: flex-start; }
.self-end { align-self: flex-end; }
.self-center { align-self: center; }
.self-baseline { align-self: baseline; }
.self-stretch { align-self: stretch; }

.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }

.content-start { align-content: flex-start; }
.content-end { align-content: flex-end; }
.content-center { align-content: center; }
.content-between { align-content: space-between; }
.content-around { align-content: space-around; }
.content-stretch { align-content: stretch; }

.order-0 { order: 0; }
.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.order-4 { order: 4; }
.order-5 { order: 5; }
.order-6 { order: 6; }
.order-7 { order: 7; }
.order-8 { order: 8; }
.order-last { order: 99999; }

@media (--breakpoint-not-small) {
.flex-ns { display: flex; }
.inline-flex-ns { display: inline-flex; }
.flex-auto-ns {
flex: 1 1 auto;
min-width: 0; /* 1 */
min-height: 0; /* 1 */
}
.flex-none-ns { flex: none; }
.flex-column-ns { flex-direction: column; }
.flex-row-ns { flex-direction: row; }
.flex-wrap-ns { flex-wrap: wrap; }
.flex-column-reverse-ns { flex-direction: column-reverse; }
.flex-row-reverse-ns { flex-direction: row-reverse; }
.flex-wrap-reverse-ns { flex-wrap: wrap-reverse; }
.items-start-ns { align-items: flex-start; }
.items-end-ns { align-items: flex-end; }
.items-center-ns { align-items: center; }
.items-baseline-ns { align-items: baseline; }
.items-stretch-ns { align-items: stretch; }

.self-start-ns { align-self: flex-start; }
.self-end-ns { align-self: flex-end; }
.self-center-ns { align-self: center; }
.self-baseline-ns { align-self: baseline; }
.self-stretch-ns { align-self: stretch; }

.justify-start-ns { justify-content: flex-start; }
.justify-end-ns { justify-content: flex-end; }
.justify-center-ns { justify-content: center; }
.justify-between-ns { justify-content: space-between; }
.justify-around-ns { justify-content: space-around; }

.content-start-ns { align-content: flex-start; }
.content-end-ns { align-content: flex-end; }
.content-center-ns { align-content: center; }
.content-between-ns { align-content: space-between; }
.content-around-ns { align-content: space-around; }
.content-stretch-ns { align-content: stretch; }

.order-0-ns { order: 0; }
.order-1-ns { order: 1; }
.order-2-ns { order: 2; }
.order-3-ns { order: 3; }
.order-4-ns { order: 4; }
.order-5-ns { order: 5; }
.order-6-ns { order: 6; }
.order-7-ns { order: 7; }
.order-8-ns { order: 8; }
.order-last-ns { order: 99999; }
}
@media (--breakpoint-medium) {
.flex-m { display: flex; }
.inline-flex-m { display: inline-flex; }
.flex-auto-m {
flex: 1 1 auto;
min-width: 0; /* 1 */
min-height: 0; /* 1 */
}
.flex-none-m { flex: none; }
.flex-column-m { flex-direction: column; }
.flex-row-m { flex-direction: row; }
.flex-wrap-m { flex-wrap: wrap; }
.flex-column-reverse-m { flex-direction: column-reverse; }
.flex-row-reverse-m { flex-direction: row-reverse; }
.flex-wrap-reverse-m { flex-wrap: wrap-reverse; }
.items-start-m { align-items: flex-start; }
.items-end-m { align-items: flex-end; }
.items-center-m { align-items: center; }
.items-baseline-m { align-items: baseline; }
.items-stretch-m { align-items: stretch; }

.self-start-m { align-self: flex-start; }
.self-end-m { align-self: flex-end; }
.self-center-m { align-self: center; }
.self-baseline-m { align-self: baseline; }
.self-stretch-m { align-self: stretch; }

.justify-start-m { justify-content: flex-start; }
.justify-end-m { justify-content: flex-end; }
.justify-center-m { justify-content: center; }
.justify-between-m { justify-content: space-between; }
.justify-around-m { justify-content: space-around; }

.content-start-m { align-content: flex-start; }
.content-end-m { align-content: flex-end; }
.content-center-m { align-content: center; }
.content-between-m { align-content: space-between; }
.content-around-m { align-content: space-around; }
.content-stretch-m { align-content: stretch; }

.order-0-m { order: 0; }
.order-1-m { order: 1; }
.order-2-m { order: 2; }
.order-3-m { order: 3; }
.order-4-m { order: 4; }
.order-5-m { order: 5; }
.order-6-m { order: 6; }
.order-7-m { order: 7; }
.order-8-m { order: 8; }
.order-last-m { order: 99999; }
}

@media (--breakpoint-large) {
.flex-l { display: flex; }
.inline-flex-l { display: inline-flex; }
.flex-auto-l {
flex: 1 1 auto;
min-width: 0; /* 1 */
min-height: 0; /* 1 */
}
.flex-none-l { flex: none; }
.flex-column-l { flex-direction: column; }
.flex-row-l { flex-direction: row; }
.flex-wrap-l { flex-wrap: wrap; }
.flex-column-reverse-l { flex-direction: column-reverse; }
.flex-row-reverse-l { flex-direction: row-reverse; }
.flex-wrap-reverse-l { flex-wrap: wrap-reverse; }

.items-start-l { align-items: flex-start; }
.items-end-l { align-items: flex-end; }
.items-center-l { align-items: center; }
.items-baseline-l { align-items: baseline; }
.items-stretch-l { align-items: stretch; }

.self-start-l { align-self: flex-start; }
.self-end-l { align-self: flex-end; }
.self-center-l { align-self: center; }
.self-baseline-l { align-self: baseline; }
.self-stretch-l { align-self: stretch; }

.justify-start-l { justify-content: flex-start; }
.justify-end-l { justify-content: flex-end; }
.justify-center-l { justify-content: center; }
.justify-between-l { justify-content: space-between; }
.justify-around-l { justify-content: space-around; }

.content-start-l { align-content: flex-start; }
.content-end-l { align-content: flex-end; }
.content-center-l { align-content: center; }
.content-between-l { align-content: space-between; }
.content-around-l { align-content: space-around; }
.content-stretch-l { align-content: stretch; }

.order-0-l { order: 0; }
.order-1-l { order: 1; }
.order-2-l { order: 2; }
.order-3-l { order: 3; }
.order-4-l { order: 4; }
.order-5-l { order: 5; }
.order-6-l { order: 6; }
.order-7-l { order: 7; }
.order-8-l { order: 8; }
.order-last-l { order: 99999; }
}

+ 49
- 0
src/css/tachyons/_floats.css View File

/*

FLOATS
http://tachyons.io/docs/layout/floats/

1. Floated elements are automatically rendered as block level elements.
Setting floats to display inline will fix the double margin bug in
ie6. You know... just in case.

2. Don't forget to clearfix your floats with .cf

Base:
f = float

Modifiers:
l = left
r = right
n = none

Media Query Extensions:
-ns = not-small
-m = medium
-l = large

*/



.fl { float: left; _display: inline; }
.fr { float: right; _display: inline; }
.fn { float: none; }

@media (--breakpoint-not-small) {
.fl-ns { float: left; _display: inline; }
.fr-ns { float: right; _display: inline; }
.fn-ns { float: none; }
}

@media (--breakpoint-medium) {
.fl-m { float: left; _display: inline; }
.fr-m { float: right; _display: inline; }
.fn-m { float: none; }
}

@media (--breakpoint-large) {
.fl-l { float: left; _display: inline; }
.fr-l { float: right; _display: inline; }
.fn-l { float: none; }
}

+ 100
- 0
src/css/tachyons/_font-family.css View File

/*

FONT FAMILY GROUPS
Docs: http://tachyons.io/docs/typography/font-family/

*/


.sans-serif {
font-family: -apple-system, BlinkMacSystemFont,
'avenir next', avenir,
'helvetica neue', helvetica,
ubuntu,
roboto, noto,
'segoe ui', arial,
sans-serif;
}

.serif {
font-family: georgia,
times,
serif;
}

.system-sans-serif {
font-family: sans-serif;
}

.system-serif {
font-family: serif;
}


/* Monospaced Typefaces (for code) */

/* From http://cssfontstack.com */
code, .code {
font-family: Consolas,
monaco,
monospace;
}

.courier {
font-family: 'Courier Next',
courier,
monospace;
}


/* Sans-Serif Typefaces */

.helvetica {
font-family: 'helvetica neue', helvetica,
sans-serif;
}

.avenir {
font-family: 'avenir next', avenir,
sans-serif;
}


/* Serif Typefaces */

.athelas {
font-family: athelas,
georgia,
serif;
}

.georgia {
font-family: georgia,
serif;
}

.times {
font-family: times,
serif;
}

.bodoni {
font-family: "Bodoni MT",
serif;
}

.calisto {
font-family: "Calisto MT",
serif;
}

.garamond {
font-family: garamond,
serif;
}

.baskerville {
font-family: baskerville,
serif;
}


+ 29
- 0
src/css/tachyons/_font-style.css View File

/*

FONT STYLE
Docs: http://tachyons.io/docs/typography/font-style/

Media Query Extensions:
-ns = not-small
-m = medium
-l = large

*/

.i { font-style: italic; }
.fs-normal { font-style: normal; }

@media (--breakpoint-not-small) {
.i-ns { font-style: italic; }
.fs-normal-ns { font-style: normal; }
}

@media (--breakpoint-medium) {
.i-m { font-style: italic; }
.fs-normal-m { font-style: normal; }
}

@media (--breakpoint-large) {
.i-l { font-style: italic; }
.fs-normal-l { font-style: normal; }
}

+ 80
- 0
src/css/tachyons/_font-weight.css View File

/*

FONT WEIGHT
Docs: http://tachyons.io/docs/typography/font-weight/

Base
fw = font-weight

Modifiers:
1 = literal value 100
2 = literal value 200
3 = literal value 300
4 = literal value 400
5 = literal value 500
6 = literal value 600
7 = literal value 700
8 = literal value 800
9 = literal value 900

Media Query Extensions:
-ns = not-small
-m = medium
-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 (--breakpoint-not-small) {
.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 (--breakpoint-medium) {
.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 (--breakpoint-large) {
.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; }
}

+ 16
- 0
src/css/tachyons/_forms.css View File

/*

FORMS
*/

.input-reset {
-webkit-appearance: none;
-moz-appearance: none;
}

.button-reset::-moz-focus-inner,
.input-reset::-moz-focus-inner {
border: 0;
padding: 0;
}

+ 124
- 0
src/css/tachyons/_heights.css View File

/*

HEIGHTS
Docs: http://tachyons.io/docs/layout/heights/

Base:
h = height
min-h = min-height
min-vh = min-height vertical screen height
vh = vertical screen height

Modifiers
1 = 1st step in height scale
2 = 2nd step in height scale
3 = 3rd step in height scale
4 = 4th step in height scale
5 = 5th step in height scale

-25 = literal value 25%
-50 = literal value 50%
-75 = literal value 75%
-100 = literal value 100%

-auto = string value of auto
-inherit = string value of inherit

Media Query Extensions:
-ns = not-small
-m = medium
-l = large

*/

/* Height Scale */

.h1 { height: 1rem; }
.h2 { height: 2rem; }
.h3 { height: 4rem; }
.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 (--breakpoint-not-small) {
.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 (--breakpoint-medium) {
.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 (--breakpoint-large) {
.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; }
}

+ 159
- 0
src/css/tachyons/_hovers.css View File

/*

HOVER EFFECTS
Docs: http://tachyons.io/docs/themes/hovers/

- Dim
- Glow
- Hide Child
- Underline text
- Grow
- Pointer
- Shadow

*/

/*

Dim element on hover by adding the dim class.

*/
.dim {
opacity: 1;
transition: opacity .15s ease-in;
}
.dim:hover,
.dim:focus {
opacity: .5;
transition: opacity .15s ease-in;
}
.dim:active {
opacity: .8; transition: opacity .15s ease-out;
}

/*

Animate opacity to 100% on hover by adding the glow class.

*/
.glow {
transition: opacity .15s ease-in;
}
.glow:hover,
.glow:focus {
opacity: 1;
transition: opacity .15s ease-in;
}

/*

Hide child & reveal on hover:

Put the hide-child class on a parent element and any nested element with the
child class will be hidden and displayed on hover or focus.

<div class="hide-child">
<div class="child"> Hidden until hover or focus </div>
<div class="child"> Hidden until hover or focus </div>
<div class="child"> Hidden until hover or focus </div>
<div class="child"> Hidden until hover or focus </div>
</div>
*/

.hide-child .child {
opacity: 0;
transition: opacity .15s ease-in;
}
.hide-child:hover .child,
.hide-child:focus .child,
.hide-child:active .child {
opacity: 1;
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 {
-moz-osx-font-smoothing: grayscale;
backface-visibility: hidden;
transform: translateZ(0);
transition: transform 0.25s ease-out;
}

.grow:hover,
.grow:focus {
transform: scale(1.05);
}

.grow:active {
transform: scale(.90);
}

.grow-large {
-moz-osx-font-smoothing: grayscale;
backface-visibility: hidden;
transform: translateZ(0);
transition: transform .25s ease-in-out;
}

.grow-large:hover,
.grow-large:focus {
transform: scale(1.2);
}

.grow-large:active {
transform: scale(.95);
}

/* Add pointer on hover */

.pointer:hover {
cursor: pointer;
}

/*
Add shadow on hover.

Performant box-shadow animation pattern from
http://tobiasahlin.com/blog/how-to-animate-box-shadow/
*/

.shadow-hover {
cursor: pointer;
position: relative;
transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.shadow-hover::after {
content: '';
box-shadow: 0px 0px 16px 2px rgba( 0, 0, 0, .2 );
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -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,
.bg-animate:hover,
.bg-animate:focus {
transition: background-color .15s ease-in-out;
}


+ 11
- 0
src/css/tachyons/_images.css View File

/*

IMAGES
Docs: http://tachyons.io/docs/elements/images/

*/

/* Responsive images! */

img { max-width: 100%; }


+ 33
- 0
src/css/tachyons/_letter-spacing.css View File

/*

LETTER SPACING
Docs: http://tachyons.io/docs/typography/tracking/

Media Query Extensions:
-ns = not-small
-m = medium
-l = large

*/

.tracked { letter-spacing: .1em; }
.tracked-tight { letter-spacing: -.05em; }
.tracked-mega { letter-spacing: .25em; }

@media (--breakpoint-not-small) {
.tracked-ns { letter-spacing: .1em; }
.tracked-tight-ns { letter-spacing: -.05em; }
.tracked-mega-ns { letter-spacing: .25em; }
}

@media (--breakpoint-medium) {
.tracked-m { letter-spacing: .1em; }
.tracked-tight-m { letter-spacing: -.05em; }
.tracked-mega-m { letter-spacing: .25em; }
}

@media (--breakpoint-large) {
.tracked-l { letter-spacing: .1em; }
.tracked-tight-l { letter-spacing: -.05em; }
.tracked-mega-l { letter-spacing: .25em; }
}

+ 34
- 0
src/css/tachyons/_line-height.css View File

/*

LINE HEIGHT / LEADING
Docs: http://tachyons.io/docs/typography/line-height

Media Query Extensions:
-ns = not-small
-m = medium
-l = large

*/

.lh-solid { line-height: 1; }
.lh-title { line-height: 1.25; }
.lh-copy { line-height: 1.5; }

@media (--breakpoint-not-small) {
.lh-solid-ns { line-height: 1; }
.lh-title-ns { line-height: 1.25; }
.lh-copy-ns { line-height: 1.5; }
}

@media (--breakpoint-medium) {
.lh-solid-m { line-height: 1; }
.lh-title-m { line-height: 1.25; }
.lh-copy-m { line-height: 1.5; }
}

@media (--breakpoint-large) {
.lh-solid-l { line-height: 1; }
.lh-title-l { line-height: 1.25; }
.lh-copy-l { line-height: 1.5; }
}


+ 27
- 0
src/css/tachyons/_links.css View File

/*

LINKS
Docs: http://tachyons.io/docs/elements/links/

*/

.link {
text-decoration: none;
transition: color .15s ease-in;
}

.link:link,
.link:visited {
transition: color .15s ease-in;
}
.link:hover {
transition: color .15s ease-in;
}
.link:active {
transition: color .15s ease-in;
}
.link:focus {
transition: color .15s ease-in;
outline: 1px dotted currentColor;
}


+ 8
- 0
src/css/tachyons/_lists.css View File

/*

LISTS
http://tachyons.io/docs/elements/lists/

*/

.list { list-style-type: none; }

+ 98
- 0
src/css/tachyons/_max-widths.css View File

/*

MAX WIDTHS
Docs: http://tachyons.io/docs/layout/max-widths/

Base:
mw = max-width

Modifiers
1 = 1st step in width scale
2 = 2nd step in width scale
3 = 3rd step in width scale
4 = 4th step in width scale
5 = 5th step in width scale
6 = 6st step in width scale
7 = 7nd step in width scale
8 = 8rd step in width scale
9 = 9th step in width scale

-100 = literal value 100%

-none = string value none


Media Query Extensions:
-ns = not-small
-m = medium
-l = large

*/

/* 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 (--breakpoint-not-small) {
.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 (--breakpoint-medium) {
.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 (--breakpoint-large) {
.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; }
}

+ 36
- 0
src/css/tachyons/_media-queries.css View File

/*

CUSTOM MEDIA QUERIES

Media query values can be changed to fit your own content.
There are no magic bullets when it comes to media query width values.
They should be declared in em units - and they should be set to meet
the needs of your content. You can also add additional media queries,
or remove some of the existing ones.

These media queries can be referenced like so:

@media (--breakpoint-not-small) {
.medium-and-larger-specific-style {
background-color: red;
}
}

@media (--breakpoint-medium) {
.medium-screen-specific-style {
background-color: red;
}
}

@media (--breakpoint-large) {
.large-and-larger-screen-specific-style {
background-color: red;
}
}

*/

/* Media Queries */
@custom-media --breakpoint-not-small screen and (min-width: 30em);
@custom-media --breakpoint-medium screen and (min-width: 30em) and (max-width: 60em);
@custom-media --breakpoint-large screen and (min-width: 60em);

+ 22
- 0
src/css/tachyons/_module-template.css View File

/*

MODULE NAME

Use this scaffolding to create or extend your own modules with tachyons
style architecture.

*/


@media (--breakpoint-not-small) {

}

@media (--breakpoint-medium) {

}

@media (--breakpoint-large) {

}


+ 199
- 0
src/css/tachyons/_negative-margins.css View File

/*
NEGATIVE MARGINS

Base:
n = negative

Modifiers:
a = all
t = top
r = right
b = bottom
l = left

1 = 1st step in spacing scale
2 = 2nd step in spacing scale
3 = 3rd step in spacing scale
4 = 4th step in spacing scale
5 = 5th step in spacing scale
6 = 6th step in spacing scale
7 = 7th step in spacing scale

Media Query Extensions:
-ns = not-small
-m = medium
-l = large

*/



.na1 { margin: -var(--spacing-extra-small); }
.na2 { margin: -var(--spacing-small); }
.na3 { margin: -var(--spacing-medium); }
.na4 { margin: -var(--spacing-large); }
.na5 { margin: -var(--spacing-extra-large); }
.na6 { margin: -var(--spacing-extra-extra-large); }
.na7 { margin: -var(--spacing-extra-extra-extra-large); }

.nl1 { margin-left: -var(--spacing-extra-small); }
.nl2 { margin-left: -var(--spacing-small); }
.nl3 { margin-left: -var(--spacing-medium); }
.nl4 { margin-left: -var(--spacing-large); }
.nl5 { margin-left: -var(--spacing-extra-large); }
.nl6 { margin-left: -var(--spacing-extra-extra-large); }
.nl7 { margin-left: -var(--spacing-extra-extra-extra-large); }

.nr1 { margin-right: -var(--spacing-extra-small); }
.nr2 { margin-right: -var(--spacing-small); }
.nr3 { margin-right: -var(--spacing-medium); }
.nr4 { margin-right: -var(--spacing-large); }
.nr5 { margin-right: -var(--spacing-extra-large); }
.nr6 { margin-right: -var(--spacing-extra-extra-large); }
.nr7 { margin-right: -var(--spacing-extra-extra-extra-large); }

.nb1 { margin-bottom: -var(--spacing-extra-small); }
.nb2 { margin-bottom: -var(--spacing-small); }
.nb3 { margin-bottom: -var(--spacing-medium); }
.nb4 { margin-bottom: -var(--spacing-large); }
.nb5 { margin-bottom: -var(--spacing-extra-large); }
.nb6 { margin-bottom: -var(--spacing-extra-extra-large); }
.nb7 { margin-bottom: -var(--spacing-extra-extra-extra-large); }

.nt1 { margin-top: -var(--spacing-extra-small); }
.nt2 { margin-top: -var(--spacing-small); }
.nt3 { margin-top: -var(--spacing-medium); }
.nt4 { margin-top: -var(--spacing-large); }
.nt5 { margin-top: -var(--spacing-extra-large); }
.nt6 { margin-top: -var(--spacing-extra-extra-large); }
.nt7 { margin-top: -var(--spacing-extra-extra-extra-large); }

@media (--breakpoint-not-small) {

.na1-ns { margin: -var(--spacing-extra-small); }
.na2-ns { margin: -var(--spacing-small); }
.na3-ns { margin: -var(--spacing-medium); }
.na4-ns { margin: -var(--spacing-large); }
.na5-ns { margin: -var(--spacing-extra-large); }
.na6-ns { margin: -var(--spacing-extra-extra-large); }
.na7-ns { margin: -var(--spacing-extra-extra-extra-large); }

.nl1-ns { margin-left: -var(--spacing-extra-small); }
.nl2-ns { margin-left: -var(--spacing-small); }
.nl3-ns { margin-left: -var(--spacing-medium); }
.nl4-ns { margin-left: -var(--spacing-large); }
.nl5-ns { margin-left: -var(--spacing-extra-large); }
.nl6-ns { margin-left: -var(--spacing-extra-extra-large); }
.nl7-ns { margin-left: -var(--spacing-extra-extra-extra-large); }

.nr1-ns { margin-right: -var(--spacing-extra-small); }
.nr2-ns { margin-right: -var(--spacing-small); }
.nr3-ns { margin-right: -var(--spacing-medium); }
.nr4-ns { margin-right: -var(--spacing-large); }
.nr5-ns { margin-right: -var(--spacing-extra-large); }
.nr6-ns { margin-right: -var(--spacing-extra-extra-large); }
.nr7-ns { margin-right: -var(--spacing-extra-extra-extra-large); }

.nb1-ns { margin-bottom: -var(--spacing-extra-small); }
.nb2-ns { margin-bottom: -var(--spacing-small); }
.nb3-ns { margin-bottom: -var(--spacing-medium); }
.nb4-ns { margin-bottom: -var(--spacing-large); }
.nb5-ns { margin-bottom: -var(--spacing-extra-large); }
.nb6-ns { margin-bottom: -var(--spacing-extra-extra-large); }
.nb7-ns { margin-bottom: -var(--spacing-extra-extra-extra-large); }

.nt1-ns { margin-top: -var(--spacing-extra-small); }
.nt2-ns { margin-top: -var(--spacing-small); }
.nt3-ns { margin-top: -var(--spacing-medium); }
.nt4-ns { margin-top: -var(--spacing-large); }
.nt5-ns { margin-top: -var(--spacing-extra-large); }
.nt6-ns { margin-top: -var(--spacing-extra-extra-large); }
.nt7-ns { margin-top: -var(--spacing-extra-extra-extra-large); }

}

@media (--breakpoint-medium) {
.na1-m { margin: -var(--spacing-extra-small); }
.na2-m { margin: -var(--spacing-small); }
.na3-m { margin: -var(--spacing-medium); }
.na4-m { margin: -var(--spacing-large); }
.na5-m { margin: -var(--spacing-extra-large); }
.na6-m { margin: -var(--spacing-extra-extra-large); }
.na7-m { margin: -var(--spacing-extra-extra-extra-large); }

.nl1-m { margin-left: -var(--spacing-extra-small); }
.nl2-m { margin-left: -var(--spacing-small); }
.nl3-m { margin-left: -var(--spacing-medium); }
.nl4-m { margin-left: -var(--spacing-large); }
.nl5-m { margin-left: -var(--spacing-extra-large); }
.nl6-m { margin-left: -var(--spacing-extra-extra-large); }
.nl7-m { margin-left: -var(--spacing-extra-extra-extra-large); }

.nr1-m { margin-right: -var(--spacing-extra-small); }
.nr2-m { margin-right: -var(--spacing-small); }
.nr3-m { margin-right: -var(--spacing-medium); }
.nr4-m { margin-right: -var(--spacing-large); }
.nr5-m { margin-right: -var(--spacing-extra-large); }
.nr6-m { margin-right: -var(--spacing-extra-extra-large); }
.nr7-m { margin-right: -var(--spacing-extra-extra-extra-large); }

.nb1-m { margin-bottom: -var(--spacing-extra-small); }
.nb2-m { margin-bottom: -var(--spacing-small); }
.nb3-m { margin-bottom: -var(--spacing-medium); }
.nb4-m { margin-bottom: -var(--spacing-large); }
.nb5-m { margin-bottom: -var(--spacing-extra-large); }
.nb6-m { margin-bottom: -var(--spacing-extra-extra-large); }
.nb7-m { margin-bottom: -var(--spacing-extra-extra-extra-large); }

.nt1-m { margin-top: -var(--spacing-extra-small); }
.nt2-m { margin-top: -var(--spacing-small); }
.nt3-m { margin-top: -var(--spacing-medium); }
.nt4-m { margin-top: -var(--spacing-large); }
.nt5-m { margin-top: -var(--spacing-extra-large); }
.nt6-m { margin-top: -var(--spacing-extra-extra-large); }
.nt7-m { margin-top: -var(--spacing-extra-extra-extra-large); }

}

@media (--breakpoint-large) {
.na1-l { margin: -var(--spacing-extra-small); }
.na2-l { margin: -var(--spacing-small); }
.na3-l { margin: -var(--spacing-medium); }
.na4-l { margin: -var(--spacing-large); }
.na5-l { margin: -var(--spacing-extra-large); }
.na6-l { margin: -var(--spacing-extra-extra-large); }
.na7-l { margin: -var(--spacing-extra-extra-extra-large); }

.nl1-l { margin-left: -var(--spacing-extra-small); }
.nl2-l { margin-left: -var(--spacing-small); }
.nl3-l { margin-left: -var(--spacing-medium); }
.nl4-l { margin-left: -var(--spacing-large); }
.nl5-l { margin-left: -var(--spacing-extra-large); }
.nl6-l { margin-left: -var(--spacing-extra-extra-large); }
.nl7-l { margin-left: -var(--spacing-extra-extra-extra-large); }

.nr1-l { margin-right: -var(--spacing-extra-small); }
.nr2-l { margin-right: -var(--spacing-small); }
.nr3-l { margin-right: -var(--spacing-medium); }
.nr4-l { margin-right: -var(--spacing-large); }
.nr5-l { margin-right: -var(--spacing-extra-large); }
.nr6-l { margin-right: -var(--spacing-extra-extra-large); }
.nr7-l { margin-right: -var(--spacing-extra-extra-extra-large); }

.nb1-l { margin-bottom: -var(--spacing-extra-small); }
.nb2-l { margin-bottom: -var(--spacing-small); }
.nb3-l { margin-bottom: -var(--spacing-medium); }
.nb4-l { margin-bottom: -var(--spacing-large); }
.nb5-l { margin-bottom: -var(--spacing-extra-large); }
.nb6-l { margin-bottom: -var(--spacing-extra-extra-large); }
.nb7-l { margin-bottom: -var(--spacing-extra-extra-extra-large); }

.nt1-l { margin-top: -var(--spacing-extra-small); }
.nt2-l { margin-top: -var(--spacing-small); }
.nt3-l { margin-top: -var(--spacing-medium); }
.nt4-l { margin-top: -var(--spacing-large); }
.nt5-l { margin-top: -var(--spacing-extra-large); }
.nt6-l { margin-top: -var(--spacing-extra-extra-large); }
.nt7-l { margin-top: -var(--spacing-extra-extra-extra-large); }
}


+ 57
- 0
src/css/tachyons/_nested.css View File

/*

NESTED
Tachyons module for styling nested elements
that are generated by a cms.

*/

.nested-copy-line-height p,
.nested-copy-line-height ul,
.nested-copy-line-height ol {
line-height: 1.5;
}

.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-seperator p+p {
margin-top: 1.5em;
}

.nested-img img {
width: 100%;
max-width: 100%;
display: block;
}

.nested-links a {
color: var(--blue);
transition: color .15s ease-in;
}

.nested-links a:hover,
.nested-links a:focus {
color: var(--light-blue);
transition: color .15s ease-in;
}


+ 427
- 0
src/css/tachyons/_normalize.css View File

/*! normalize.css v6.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document
========================================================================== */

/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in
* IE on Windows Phone and in iOS.
*/

html {
line-height: 1.15; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
========================================================================== */

/**
* Add the correct display in IE 9-.
*/

article,
aside,
footer,
header,
nav,
section {
display: block;
}

/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/

h1 {
font-size: 2em;
margin: 0.67em 0;
}

/* Grouping content
========================================================================== */

/**
* Add the correct display in IE 9-.
* 1. Add the correct display in IE.
*/

figcaption,
figure,
main { /* 1 */
display: block;
}

/**
* Add the correct margin in IE 8.
*/

figure {
margin: 1em 40px;
}

/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/

hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}

/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/

pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}

/* Text-level semantics
========================================================================== */

/**
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/

a {
background-color: transparent; /* 1 */
-webkit-text-decoration-skip: objects; /* 2 */
}

/**
* 1. Remove the bottom border in Chrome 57- and Firefox 39-.
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/

abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}

/**
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
*/

b,
strong {
font-weight: inherit;
}

/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/

b,
strong {
font-weight: bolder;
}

/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}

/**
* Add the correct font style in Android 4.3-.
*/

dfn {
font-style: italic;
}

/**
* Add the correct background and color in IE 9-.
*/

mark {
background-color: #ff0;
color: #000;
}

/**
* Add the correct font size in all browsers.
*/

small {
font-size: 80%;
}

/**
* 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
========================================================================== */

/**
* Add the correct display in IE 9-.
*/

audio,
video {
display: inline-block;
}

/**
* Add the correct display in iOS 4-7.
*/

audio:not([controls]) {
display: none;
height: 0;
}

/**
* Remove the border on images inside links in IE 10-.
*/

img {
border-style: none;
}

/**
* Hide the overflow in IE.
*/

svg:not(:root) {
overflow: hidden;
}

/* Forms
========================================================================== */

/**
* Remove the margin in Firefox and Safari.
*/

button,
input,
optgroup,
select,
textarea {
margin: 0;
}

/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/

button,
input { /* 1 */
overflow: visible;
}

/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/

button,
select { /* 1 */
text-transform: none;
}

/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
* controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.
*/

button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
-webkit-appearance: button; /* 2 */
}

/**
* Remove the inner border and padding in Firefox.
*/

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}

/**
* Restore the focus styles unset by the previous rule.
*/

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}

/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/

legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}

/**
* 1. Add the correct display in IE 9-.
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/

progress {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}

/**
* Remove the default vertical scrollbar in IE.
*/

textarea {
overflow: auto;
}

/**
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.
*/

[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}

/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}

/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/

[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}

/**
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
*/

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}

/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}

/* Interactive
========================================================================== */

/*
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
*/

details, /* 1 */
menu {
display: block;
}

/*
* Add the correct display in all browsers.
*/

summary {
display: list-item;
}

/* Scripting
========================================================================== */

/**
* Add the correct display in IE 9-.
*/

canvas {
display: inline-block;
}

/**
* Add the correct display in IE.
*/

template {
display: none;
}

/* Hidden
========================================================================== */

/**
* Add the correct display in IE 10-.
*/

[hidden] {
display: none;
}

+ 20
- 0
src/css/tachyons/_opacity.css View File

/*

OPACITY
Docs: http://tachyons.io/docs/themes/opacity/

*/

.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; }

+ 32
- 0
src/css/tachyons/_outlines.css View File

/*

OUTLINES

Media Query Extensions:
-ns = not-small
-m = medium
-l = large

*/

.outline { outline: 1px solid; }
.outline-transparent { outline: 1px solid transparent; }
.outline-0 { outline: 0; }

@media (--breakpoint-not-small) {
.outline-ns { outline: 1px solid; }
.outline-transparent-ns { outline: 1px solid transparent; }
.outline-0-ns { outline: 0; }
}

@media (--breakpoint-medium) {
.outline-m { outline: 1px solid; }
.outline-transparent-m { outline: 1px solid transparent; }
.outline-0-m { outline: 0; }
}

@media (--breakpoint-large) {
.outline-l { outline: 1px solid; }
.outline-transparent-l { outline: 1px solid transparent; }
.outline-0-l { outline: 0; }
}

+ 75
- 0
src/css/tachyons/_overflow.css View File

/*

OVERFLOW

Media Query Extensions:
-ns = not-small
-m = medium
-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 (--breakpoint-not-small) {
.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 (--breakpoint-medium) {
.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 (--breakpoint-large) {
.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; }
}

+ 37
- 0
src/css/tachyons/_position.css View File

/*

POSITIONING
Docs: http://tachyons.io/docs/layout/position/

Media Query Extensions:
-ns = not-small
-m = medium
-l = large

*/

.static { position: static; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }

@media (--breakpoint-not-small) {
.static-ns { position: static; }
.relative-ns { position: relative; }
.absolute-ns { position: absolute; }
.fixed-ns { position: fixed; }
}

@media (--breakpoint-medium) {
.static-m { position: static; }
.relative-m { position: relative; }
.absolute-m { position: absolute; }
.fixed-m { position: fixed; }
}

@media (--breakpoint-large) {
.static-l { position: static; }
.relative-l { position: relative; }
.absolute-l { position: absolute; }
.fixed-l { position: fixed; }
}

+ 43
- 0
src/css/tachyons/_rotations.css View File

/*

ROTATIONS

*/

.rotate-45 { transform: rotate(45deg); }
.rotate-90 { transform: rotate(90deg); }
.rotate-135 { transform: rotate(135deg); }
.rotate-180 { transform: rotate(180deg); }
.rotate-225 { transform: rotate(225deg); }
.rotate-270 { transform: rotate(270deg); }
.rotate-315 { transform: rotate(315deg); }

@media (--breakpoint-not-small){
.rotate-45-ns { transform: rotate(45deg); }
.rotate-90-ns { transform: rotate(90deg); }
.rotate-135-ns { transform: rotate(135deg); }
.rotate-180-ns { transform: rotate(180deg); }
.rotate-225-ns { transform: rotate(225deg); }
.rotate-270-ns { transform: rotate(270deg); }
.rotate-315-ns { transform: rotate(315deg); }
}

@media (--breakpoint-medium){
.rotate-45-m { transform: rotate(45deg); }
.rotate-90-m { transform: rotate(90deg); }
.rotate-135-m { transform: rotate(135deg); }
.rotate-180-m { transform: rotate(180deg); }
.rotate-225-m { transform: rotate(225deg); }
.rotate-270-m { transform: rotate(270deg); }
.rotate-315-m { transform: rotate(315deg); }
}

@media (--breakpoint-large){
.rotate-45-l { transform: rotate(45deg); }
.rotate-90-l { transform: rotate(90deg); }
.rotate-135-l { transform: rotate(135deg); }
.rotate-180-l { transform: rotate(180deg); }
.rotate-225-l { transform: rotate(225deg); }
.rotate-270-l { transform: rotate(270deg); }
.rotate-315-l { transform: rotate(315deg); }
}

+ 236
- 0
src/css/tachyons/_skins-pseudo.css View File

/*
SKINS:PSEUDO

Customize the color of an element when
it is focused or hovered over.
*/

.hover-black:hover,
.hover-black:focus { color: var(--black); }
.hover-near-black:hover,
.hover-near-black:focus { color: var(--near-black); }
.hover-dark-gray:hover,
.hover-dark-gray:focus { color: var(--dark-gray); }
.hover-mid-gray:hover,
.hover-mid-gray:focus { color: var(--mid-gray); }
.hover-gray:hover,
.hover-gray:focus { color: var(--gray); }
.hover-silver:hover,
.hover-silver:focus { color: var(--silver); }
.hover-light-silver:hover,
.hover-light-silver:focus { color: var(--light-silver); }
.hover-moon-gray:hover,
.hover-moon-gray:focus { color: var(--moon-gray); }
.hover-light-gray:hover,
.hover-light-gray:focus { color: var(--light-gray); }
.hover-near-white:hover,
.hover-near-white:focus { color: var(--near-white); }
.hover-white:hover,
.hover-white:focus { color: var(--white); }

.hover-black-90:hover,
.hover-black-90:focus { color: var(--black-90); }
.hover-black-80:hover,
.hover-black-80:focus { color: var(--black-80); }
.hover-black-70:hover,
.hover-black-70:focus { color: var(--black-70); }
.hover-black-60:hover,
.hover-black-60:focus { color: var(--black-60); }
.hover-black-50:hover,
.hover-black-50:focus { color: var(--black-50); }
.hover-black-40:hover,
.hover-black-40:focus { color: var(--black-40); }
.hover-black-30:hover,
.hover-black-30:focus { color: var(--black-30); }
.hover-black-20:hover,
.hover-black-20:focus { color: var(--black-20); }
.hover-black-10:hover,
.hover-black-10:focus { color: var(--black-10); }
.hover-white-90:hover,
.hover-white-90:focus { color: var(--white-90); }
.hover-white-80:hover,
.hover-white-80:focus { color: var(--white-80); }
.hover-white-70:hover,
.hover-white-70:focus { color: var(--white-70); }
.hover-white-60:hover,
.hover-white-60:focus { color: var(--white-60); }
.hover-white-50:hover,
.hover-white-50:focus { color: var(--white-50); }
.hover-white-40:hover,
.hover-white-40:focus { color: var(--white-40); }
.hover-white-30:hover,
.hover-white-30:focus { color: var(--white-30); }
.hover-white-20:hover,
.hover-white-20:focus { color: var(--white-20); }
.hover-white-10:hover,
.hover-white-10:focus { color: var(--white-10); }
.hover-inherit:hover,
.hover-inherit:focus { color: inherit; }

.hover-bg-black:hover,
.hover-bg-black:focus { background-color: var(--black); }
.hover-bg-near-black:hover,
.hover-bg-near-black:focus { background-color: var(--near-black); }
.hover-bg-dark-gray:hover,
.hover-bg-dark-gray:focus { background-color: var(--dark-gray); }
.hover-bg-dark-gray:focus,
.hover-bg-mid-gray:hover { background-color: var(--mid-gray); }
.hover-bg-gray:hover,
.hover-bg-gray:focus { background-color: var(--gray); }
.hover-bg-silver:hover,
.hover-bg-silver:focus { background-color: var(--silver); }
.hover-bg-light-silver:hover,
.hover-bg-light-silver:focus { background-color: var(--light-silver); }
.hover-bg-moon-gray:hover,
.hover-bg-moon-gray:focus { background-color: var(--moon-gray); }
.hover-bg-light-gray:hover,
.hover-bg-light-gray:focus { background-color: var(--light-gray); }
.hover-bg-near-white:hover,
.hover-bg-near-white:focus { background-color: var(--near-white); }
.hover-bg-white:hover,
.hover-bg-white:focus { background-color: var(--white); }
.hover-bg-transparent:hover,
.hover-bg-transparent:focus { background-color: var(--transparent); }

.hover-bg-black-90:hover,
.hover-bg-black-90:focus { background-color: var(--black-90); }
.hover-bg-black-80:hover,
.hover-bg-black-80:focus { background-color: var(--black-80); }
.hover-bg-black-70:hover,
.hover-bg-black-70:focus { background-color: var(--black-70); }
.hover-bg-black-60:hover,
.hover-bg-black-60:focus { background-color: var(--black-60); }
.hover-bg-black-50:hover,
.hover-bg-black-50:focus { background-color: var(--black-50); }
.hover-bg-black-40:hover,
.hover-bg-black-40:focus { background-color: var(--black-40); }
.hover-bg-black-30:hover,
.hover-bg-black-30:focus { background-color: var(--black-30); }
.hover-bg-black-20:hover,
.hover-bg-black-20:focus { background-color: var(--black-20); }
.hover-bg-black-10:hover,
.hover-bg-black-10:focus { background-color: var(--black-10); }
.hover-bg-white-90:hover,
.hover-bg-white-90:focus { background-color: var(--white-90); }
.hover-bg-white-80:hover,
.hover-bg-white-80:focus { background-color: var(--white-80); }
.hover-bg-white-70:hover,
.hover-bg-white-70:focus { background-color: var(--white-70); }
.hover-bg-white-60:hover,
.hover-bg-white-60:focus { background-color: var(--white-60); }
.hover-bg-white-50:hover,
.hover-bg-white-50:focus { background-color: var(--white-50); }
.hover-bg-white-40:hover,
.hover-bg-white-40:focus { background-color: var(--white-40); }
.hover-bg-white-30:hover,
.hover-bg-white-30:focus { background-color: var(--white-30); }
.hover-bg-white-20:hover,
.hover-bg-white-20:focus { background-color: var(--white-20); }
.hover-bg-white-10:hover,
.hover-bg-white-10:focus { background-color: var(--white-10); }

.hover-dark-red:hover,
.hover-dark-red:focus { color: var(--dark-red); }
.hover-red:hover,
.hover-red:focus { color: var(--red); }
.hover-light-red:hover,
.hover-light-red:focus { color: var(--light-red); }
.hover-orange:hover,
.hover-orange:focus { color: var(--orange); }
.hover-gold:hover,
.hover-gold:focus { color: var(--gold); }
.hover-yellow:hover,
.hover-yellow:focus { color: var(--yellow); }
.hover-light-yellow:hover,
.hover-light-yellow:focus { color: var(--light-yellow); }
.hover-purple:hover,
.hover-purple:focus { color: var(--purple); }
.hover-light-purple:hover,
.hover-light-purple:focus { color: var(--light-purple); }
.hover-dark-pink:hover,
.hover-dark-pink:focus { color: var(--dark-pink); }
.hover-hot-pink:hover,
.hover-hot-pink:focus { color: var(--hot-pink); }
.hover-pink:hover,
.hover-pink:focus { color: var(--pink); }
.hover-light-pink:hover,
.hover-light-pink:focus { color: var(--light-pink); }
.hover-dark-green:hover,
.hover-dark-green:focus { color: var(--dark-green); }
.hover-green:hover,
.hover-green:focus { color: var(--green); }
.hover-light-green:hover,
.hover-light-green:focus { color: var(--light-green); }
.hover-navy:hover,
.hover-navy:focus { color: var(--navy); }
.hover-dark-blue:hover,
.hover-dark-blue:focus { color: var(--dark-blue); }
.hover-blue:hover,
.hover-blue:focus { color: var(--blue); }
.hover-light-blue:hover,
.hover-light-blue:focus { color: var(--light-blue); }
.hover-lightest-blue:hover,
.hover-lightest-blue:focus { color: var(--lightest-blue); }
.hover-washed-blue:hover,
.hover-washed-blue:focus { color: var(--washed-blue); }
.hover-washed-green:hover,
.hover-washed-green:focus { color: var(--washed-green); }
.hover-washed-yellow:hover,
.hover-washed-yellow:focus { color: var(--washed-yellow); }
.hover-washed-red:hover,
.hover-washed-red:focus { color: var(--washed-red); }

.hover-bg-dark-red:hover,
.hover-bg-dark-red:focus { background-color: var(--dark-red); }
.hover-bg-red:hover,
.hover-bg-red:focus { background-color: var(--red); }
.hover-bg-light-red:hover,
.hover-bg-light-red:focus { background-color: var(--light-red); }
.hover-bg-orange:hover,
.hover-bg-orange:focus { background-color: var(--orange); }
.hover-bg-gold:hover,
.hover-bg-gold:focus { background-color: var(--gold); }
.hover-bg-yellow:hover,
.hover-bg-yellow:focus { background-color: var(--yellow); }
.hover-bg-light-yellow:hover,
.hover-bg-light-yellow:focus { background-color: var(--light-yellow); }
.hover-bg-purple:hover,
.hover-bg-purple:focus { background-color: var(--purple); }
.hover-bg-light-purple:hover,
.hover-bg-light-purple:focus { background-color: var(--light-purple); }
.hover-bg-dark-pink:hover,
.hover-bg-dark-pink:focus { background-color: var(--dark-pink); }
.hover-bg-hot-pink:hover,
.hover-bg-hot-pink:focus { background-color: var(--hot-pink); }
.hover-bg-pink:hover,
.hover-bg-pink:focus { background-color: var(--pink); }
.hover-bg-light-pink:hover,
.hover-bg-light-pink:focus { background-color: var(--light-pink); }
.hover-bg-dark-green:hover,
.hover-bg-dark-green:focus { background-color: var(--dark-green); }
.hover-bg-green:hover,
.hover-bg-green:focus { background-color: var(--green); }
.hover-bg-light-green:hover,
.hover-bg-light-green:focus { background-color: var(--light-green); }
.hover-bg-navy:hover,
.hover-bg-navy:focus { background-color: var(--navy); }
.hover-bg-dark-blue:hover,
.hover-bg-dark-blue:focus { background-color: var(--dark-blue); }
.hover-bg-blue:hover,
.hover-bg-blue:focus { background-color: var(--blue); }
.hover-bg-light-blue:hover,
.hover-bg-light-blue:focus { background-color: var(--light-blue); }
.hover-bg-lightest-blue:hover,
.hover-bg-lightest-blue:focus { background-color: var(--lightest-blue); }
.hover-bg-washed-blue:hover,
.hover-bg-washed-blue:focus { background-color: var(--washed-blue); }
.hover-bg-washed-green:hover,
.hover-bg-washed-green:focus { background-color: var(--washed-green); }
.hover-bg-washed-yellow:hover,
.hover-bg-washed-yellow:focus { background-color: var(--washed-yellow); }
.hover-bg-washed-red:hover,
.hover-bg-washed-red:focus { background-color: var(--washed-red); }
.hover-bg-inherit:hover,
.hover-bg-inherit:focus { background-color: inherit; }

+ 136
- 0
src/css/tachyons/_skins.css View File

/*

SKINS
Docs: http://tachyons.io/docs/themes/skins/

Classes for setting foreground and background colors on elements.
If you haven't declared a border color, but set border on an element, it will
be set to the current text color.

*/

/* Text colors */

.black-90 { color: var(--black-90); }
.black-80 { color: var(--black-80); }
.black-70 { color: var(--black-70); }
.black-60 { color: var(--black-60); }
.black-50 { color: var(--black-50); }
.black-40 { color: var(--black-40); }
.black-30 { color: var(--black-30); }
.black-20 { color: var(--black-20); }
.black-10 { color: var(--black-10); }
.black-05 { color: var(--black-05); }

.white-90 { color: var(--white-90); }
.white-80 { color: var(--white-80); }
.white-70 { color: var(--white-70); }
.white-60 { color: var(--white-60); }
.white-50 { color: var(--white-50); }
.white-40 { color: var(--white-40); }
.white-30 { color: var(--white-30); }
.white-20 { color: var(--white-20); }
.white-10 { color: var(--white-10); }

.black { color: var(--black); }
.near-black { color: var(--near-black); }
.dark-gray { color: var(--dark-gray); }
.mid-gray { color: var(--mid-gray); }
.gray { color: var(--gray); }
.silver { color: var(--silver); }
.light-silver { color: var(--light-silver); }
.moon-gray { color: var(--moon-gray); }
.light-gray { color: var(--light-gray); }
.near-white { color: var(--near-white); }
.white { color: var(--white); }

.dark-red { color: var(--dark-red); }
.red { color: var(--red); }
.light-red { color: var(--light-red); }
.orange { color: var(--orange); }
.gold { color: var(--gold); }
.yellow { color: var(--yellow); }
.light-yellow { color: var(--light-yellow); }
.purple { color: var(--purple); }
.light-purple { color: var(--light-purple); }
.dark-pink { color: var(--dark-pink); }
.hot-pink { color: var(--hot-pink); }
.pink { color: var(--pink); }
.light-pink { color: var(--light-pink); }
.dark-green { color: var(--dark-green); }
.green { color: var(--green); }
.light-green { color: var(--light-green); }
.navy { color: var(--navy); }
.dark-blue { color: var(--dark-blue); }
.blue { color: var(--blue); }
.light-blue { color: var(--light-blue); }
.lightest-blue { color: var(--lightest-blue); }
.washed-blue { color: var(--washed-blue); }
.washed-green { color: var(--washed-green); }
.washed-yellow { color: var(--washed-yellow); }
.washed-red { color: var(--washed-red); }
.color-inherit { color: inherit; }

.bg-black-90 { background-color: var(--black-90); }
.bg-black-80 { background-color: var(--black-80); }
.bg-black-70 { background-color: var(--black-70); }
.bg-black-60 { background-color: var(--black-60); }
.bg-black-50 { background-color: var(--black-50); }
.bg-black-40 { background-color: var(--black-40); }
.bg-black-30 { background-color: var(--black-30); }
.bg-black-20 { background-color: var(--black-20); }
.bg-black-10 { background-color: var(--black-10); }
.bg-black-05 { background-color: var(--black-05); }
.bg-white-90 { background-color: var(--white-90); }
.bg-white-80 { background-color: var(--white-80); }
.bg-white-70 { background-color: var(--white-70); }
.bg-white-60 { background-color: var(--white-60); }
.bg-white-50 { background-color: var(--white-50); }
.bg-white-40 { background-color: var(--white-40); }
.bg-white-30 { background-color: var(--white-30); }
.bg-white-20 { background-color: var(--white-20); }
.bg-white-10 { background-color: var(--white-10); }



/* Background colors */

.bg-black { background-color: var(--black); }
.bg-near-black { background-color: var(--near-black); }
.bg-dark-gray { background-color: var(--dark-gray); }
.bg-mid-gray { background-color: var(--mid-gray); }
.bg-gray { background-color: var(--gray); }
.bg-silver { background-color: var(--silver); }
.bg-light-silver { background-color: var(--light-silver); }
.bg-moon-gray { background-color: var(--moon-gray); }
.bg-light-gray { background-color: var(--light-gray); }
.bg-near-white { background-color: var(--near-white); }
.bg-white { background-color: var(--white); }
.bg-transparent { background-color: var(--transparent); }

.bg-dark-red { background-color: var(--dark-red); }
.bg-red { background-color: var(--red); }
.bg-light-red { background-color: var(--light-red); }
.bg-orange { background-color: var(--orange); }
.bg-gold { background-color: var(--gold); }
.bg-yellow { background-color: var(--yellow); }
.bg-light-yellow { background-color: var(--light-yellow); }
.bg-purple { background-color: var(--purple); }
.bg-light-purple { background-color: var(--light-purple); }
.bg-dark-pink { background-color: var(--dark-pink); }
.bg-hot-pink { background-color: var(--hot-pink); }
.bg-pink { background-color: var(--pink); }
.bg-light-pink { background-color: var(--light-pink); }
.bg-dark-green { background-color: var(--dark-green); }
.bg-green { background-color: var(--green); }
.bg-light-green { background-color: var(--light-green); }
.bg-navy { background-color: var(--navy); }
.bg-dark-blue { background-color: var(--dark-blue); }
.bg-blue { background-color: var(--blue); }
.bg-light-blue { background-color: var(--light-blue); }
.bg-lightest-blue { background-color: var(--lightest-blue); }
.bg-washed-blue { background-color: var(--washed-blue); }
.bg-washed-green { background-color: var(--washed-green); }
.bg-washed-yellow { background-color: var(--washed-yellow); }
.bg-washed-red { background-color: var(--washed-red); }
.bg-inherit { background-color: inherit; }

+ 952
- 0
src/css/tachyons/_spacing.css View File

/* Variables */

:root {
--spacing-none: 0;
--spacing-extra-small: .25rem;
--spacing-small: .5rem;
--spacing-medium: 1rem;
--spacing-large: 2rem;
--spacing-extra-large: 4rem;
--spacing-extra-extra-large: 8rem;
--spacing-extra-extra-extra-large: 16rem;
}

/*
SPACING
Docs: http://tachyons.io/docs/layout/spacing/

An eight step powers of two scale ranging from 0 to 16rem.

Base:
p = padding
m = margin

Modifiers:
a = all
h = horizontal
v = vertical
t = top
r = right
b = bottom
l = left

0 = none
1 = 1st step in spacing scale
2 = 2nd step in spacing scale
3 = 3rd step in spacing scale
4 = 4th step in spacing scale
5 = 5th step in spacing scale
6 = 6th step in spacing scale
7 = 7th step in spacing scale

Media Query Extensions:
-ns = not-small
-m = medium
-l = large

*/


.pa0 { padding: var(--spacing-none); }
.pa1 { padding: var(--spacing-extra-small); }
.pa2 { padding: var(--spacing-small); }
.pa3 { padding: var(--spacing-medium); }
.pa4 { padding: var(--spacing-large); }
.pa5 { padding: var(--spacing-extra-large); }
.pa6 { padding: var(--spacing-extra-extra-large); }
.pa7 { padding: var(--spacing-extra-extra-extra-large); }

.pl0 { padding-left: var(--spacing-none); }
.pl1 { padding-left: var(--spacing-extra-small); }
.pl2 { padding-left: var(--spacing-small); }
.pl3 { padding-left: var(--spacing-medium); }
.pl4 { padding-left: var(--spacing-large); }
.pl5 { padding-left: var(--spacing-extra-large); }
.pl6 { padding-left: var(--spacing-extra-extra-large); }
.pl7 { padding-left: var(--spacing-extra-extra-extra-large); }

.pr0 { padding-right: var(--spacing-none); }
.pr1 { padding-right: var(--spacing-extra-small); }
.pr2 { padding-right: var(--spacing-small); }
.pr3 { padding-right: var(--spacing-medium); }
.pr4 { padding-right: var(--spacing-large); }
.pr5 { padding-right: var(--spacing-extra-large); }
.pr6 { padding-right: var(--spacing-extra-extra-large); }
.pr7 { padding-right: var(--spacing-extra-extra-extra-large); }

.pb0 { padding-bottom: var(--spacing-none); }
.pb1 { padding-bottom: var(--spacing-extra-small); }
.pb2 { padding-bottom: var(--spacing-small); }
.pb3 { padding-bottom: var(--spacing-medium); }
.pb4 { padding-bottom: var(--spacing-large); }
.pb5 { padding-bottom: var(--spacing-extra-large); }
.pb6 { padding-bottom: var(--spacing-extra-extra-large); }
.pb7 { padding-bottom: var(--spacing-extra-extra-extra-large); }

.pt0 { padding-top: var(--spacing-none); }
.pt1 { padding-top: var(--spacing-extra-small); }
.pt2 { padding-top: var(--spacing-small); }
.pt3 { padding-top: var(--spacing-medium); }
.pt4 { padding-top: var(--spacing-large); }
.pt5 { padding-top: var(--spacing-extra-large); }
.pt6 { padding-top: var(--spacing-extra-extra-large); }
.pt7 { padding-top: var(--spacing-extra-extra-extra-large); }

.pv0 {
padding-top: var(--spacing-none);
padding-bottom: var(--spacing-none);
}
.pv1 {
padding-top: var(--spacing-extra-small);
padding-bottom: var(--spacing-extra-small);
}
.pv2 {
padding-top: var(--spacing-small);
padding-bottom: var(--spacing-small);
}
.pv3 {
padding-top: var(--spacing-medium);
padding-bottom: var(--spacing-medium);
}
.pv4 {
padding-top: var(--spacing-large);
padding-bottom: var(--spacing-large);
}
.pv5 {
padding-top: var(--spacing-extra-large);
padding-bottom: var(--spacing-extra-large);
}
.pv6 {
padding-top: var(--spacing-extra-extra-large);
padding-bottom: var(--spacing-extra-extra-large);
}

.pv7 {
padding-top: var(--spacing-extra-extra-extra-large);
padding-bottom: var(--spacing-extra-extra-extra-large);
}

.ph0 {
padding-left: var(--spacing-none);
padding-right: var(--spacing-none);
}

.ph1 {
padding-left: var(--spacing-extra-small);
padding-right: var(--spacing-extra-small);
}

.ph2 {
padding-left: var(--spacing-small);
padding-right: var(--spacing-small);
}

.ph3 {
padding-left: var(--spacing-medium);
padding-right: var(--spacing-medium);
}

.ph4 {
padding-left: var(--spacing-large);
padding-right: var(--spacing-large);
}

.ph5 {
padding-left: var(--spacing-extra-large);
padding-right: var(--spacing-extra-large);
}

.ph6 {
padding-left: var(--spacing-extra-extra-large);
padding-right: var(--spacing-extra-extra-large);
}

.ph7 {
padding-left: var(--spacing-extra-extra-extra-large);
padding-right: var(--spacing-extra-extra-extra-large);
}

.ma0 { margin: var(--spacing-none); }
.ma1 { margin: var(--spacing-extra-small); }
.ma2 { margin: var(--spacing-small); }
.ma3 { margin: var(--spacing-medium); }
.ma4 { margin: var(--spacing-large); }
.ma5 { margin: var(--spacing-extra-large); }
.ma6 { margin: var(--spacing-extra-extra-large); }
.ma7 { margin: var(--spacing-extra-extra-extra-large); }

.ml0 { margin-left: var(--spacing-none); }
.ml1 { margin-left: var(--spacing-extra-small); }
.ml2 { margin-left: var(--spacing-small); }
.ml3 { margin-left: var(--spacing-medium); }
.ml4 { margin-left: var(--spacing-large); }
.ml5 { margin-left: var(--spacing-extra-large); }
.ml6 { margin-left: var(--spacing-extra-extra-large); }
.ml7 { margin-left: var(--spacing-extra-extra-extra-large); }

.mr0 { margin-right: var(--spacing-none); }
.mr1 { margin-right: var(--spacing-extra-small); }
.mr2 { margin-right: var(--spacing-small); }
.mr3 { margin-right: var(--spacing-medium); }
.mr4 { margin-right: var(--spacing-large); }
.mr5 { margin-right: var(--spacing-extra-large); }
.mr6 { margin-right: var(--spacing-extra-extra-large); }
.mr7 { margin-right: var(--spacing-extra-extra-extra-large); }

.mb0 { margin-bottom: var(--spacing-none); }
.mb1 { margin-bottom: var(--spacing-extra-small); }
.mb2 { margin-bottom: var(--spacing-small); }
.mb3 { margin-bottom: var(--spacing-medium); }
.mb4 { margin-bottom: var(--spacing-large); }
.mb5 { margin-bottom: var(--spacing-extra-large); }
.mb6 { margin-bottom: var(--spacing-extra-extra-large); }
.mb7 { margin-bottom: var(--spacing-extra-extra-extra-large); }

.mt0 { margin-top: var(--spacing-none); }
.mt1 { margin-top: var(--spacing-extra-small); }
.mt2 { margin-top: var(--spacing-small); }
.mt3 { margin-top: var(--spacing-medium); }
.mt4 { margin-top: var(--spacing-large); }
.mt5 { margin-top: var(--spacing-extra-large); }
.mt6 { margin-top: var(--spacing-extra-extra-large); }
.mt7 { margin-top: var(--spacing-extra-extra-extra-large); }

.mv0 {
margin-top: var(--spacing-none);
margin-bottom: var(--spacing-none);
}
.mv1 {
margin-top: var(--spacing-extra-small);
margin-bottom: var(--spacing-extra-small);
}
.mv2 {
margin-top: var(--spacing-small);
margin-bottom: var(--spacing-small);
}
.mv3 {
margin-top: var(--spacing-medium);
margin-bottom: var(--spacing-medium);
}
.mv4 {
margin-top: var(--spacing-large);
margin-bottom: var(--spacing-large);
}
.mv5 {
margin-top: var(--spacing-extra-large);
margin-bottom: var(--spacing-extra-large);
}
.mv6 {
margin-top: var(--spacing-extra-extra-large);
margin-bottom: var(--spacing-extra-extra-large);
}
.mv7 {
margin-top: var(--spacing-extra-extra-extra-large);
margin-bottom: var(--spacing-extra-extra-extra-large);
}

.mh0 {
margin-left: var(--spacing-none);
margin-right: var(--spacing-none);
}
.mh1 {
margin-left: var(--spacing-extra-small);
margin-right: var(--spacing-extra-small);
}
.mh2 {
margin-left: var(--spacing-small);
margin-right: var(--spacing-small);
}
.mh3 {
margin-left: var(--spacing-medium);
margin-right: var(--spacing-medium);
}
.mh4 {
margin-left: var(--spacing-large);
margin-right: var(--spacing-large);
}
.mh5 {
margin-left: var(--spacing-extra-large);
margin-right: var(--spacing-extra-large);
}
.mh6 {
margin-left: var(--spacing-extra-extra-large);
margin-right: var(--spacing-extra-extra-large);
}
.mh7 {
margin-left: var(--spacing-extra-extra-extra-large);
margin-right: var(--spacing-extra-extra-extra-large);
}

@media (--breakpoint-not-small) {
.pa0-ns { padding: var(--spacing-none); }
.pa1-ns { padding: var(--spacing-extra-small); }
.pa2-ns { padding: var(--spacing-small); }
.pa3-ns { padding: var(--spacing-medium); }
.pa4-ns { padding: var(--spacing-large); }
.pa5-ns { padding: var(--spacing-extra-large); }
.pa6-ns { padding: var(--spacing-extra-extra-large); }
.pa7-ns { padding: var(--spacing-extra-extra-extra-large); }

.pl0-ns { padding-left: var(--spacing-none); }
.pl1-ns { padding-left: var(--spacing-extra-small); }
.pl2-ns { padding-left: var(--spacing-small); }
.pl3-ns { padding-left: var(--spacing-medium); }
.pl4-ns { padding-left: var(--spacing-large); }
.pl5-ns { padding-left: var(--spacing-extra-large); }
.pl6-ns { padding-left: var(--spacing-extra-extra-large); }
.pl7-ns { padding-left: var(--spacing-extra-extra-extra-large); }

.pr0-ns { padding-right: var(--spacing-none); }
.pr1-ns { padding-right: var(--spacing-extra-small); }
.pr2-ns { padding-right: var(--spacing-small); }
.pr3-ns { padding-right: var(--spacing-medium); }
.pr4-ns { padding-right: var(--spacing-large); }
.pr5-ns { padding-right: var(--spacing-extra-large); }
.pr6-ns { padding-right: var(--spacing-extra-extra-large); }
.pr7-ns { padding-right: var(--spacing-extra-extra-extra-large); }

.pb0-ns { padding-bottom: var(--spacing-none); }
.pb1-ns { padding-bottom: var(--spacing-extra-small); }
.pb2-ns { padding-bottom: var(--spacing-small); }
.pb3-ns { padding-bottom: var(--spacing-medium); }
.pb4-ns { padding-bottom: var(--spacing-large); }
.pb5-ns { padding-bottom: var(--spacing-extra-large); }
.pb6-ns { padding-bottom: var(--spacing-extra-extra-large); }
.pb7-ns { padding-bottom: var(--spacing-extra-extra-extra-large); }

.pt0-ns { padding-top: var(--spacing-none); }
.pt1-ns { padding-top: var(--spacing-extra-small); }
.pt2-ns { padding-top: var(--spacing-small); }
.pt3-ns { padding-top: var(--spacing-medium); }
.pt4-ns { padding-top: var(--spacing-large); }
.pt5-ns { padding-top: var(--spacing-extra-large); }
.pt6-ns { padding-top: var(--spacing-extra-extra-large); }
.pt7-ns { padding-top: var(--spacing-extra-extra-extra-large); }

.pv0-ns {
padding-top: var(--spacing-none);
padding-bottom: var(--spacing-none);
}
.pv1-ns {
padding-top: var(--spacing-extra-small);
padding-bottom: var(--spacing-extra-small);
}
.pv2-ns {
padding-top: var(--spacing-small);
padding-bottom: var(--spacing-small);
}
.pv3-ns {
padding-top: var(--spacing-medium);
padding-bottom: var(--spacing-medium);
}
.pv4-ns {
padding-top: var(--spacing-large);
padding-bottom: var(--spacing-large);
}
.pv5-ns {
padding-top: var(--spacing-extra-large);
padding-bottom: var(--spacing-extra-large);
}
.pv6-ns {
padding-top: var(--spacing-extra-extra-large);
padding-bottom: var(--spacing-extra-extra-large);
}
.pv7-ns {
padding-top: var(--spacing-extra-extra-extra-large);
padding-bottom: var(--spacing-extra-extra-extra-large);
}
.ph0-ns {
padding-left: var(--spacing-none);
padding-right: var(--spacing-none);
}
.ph1-ns {
padding-left: var(--spacing-extra-small);
padding-right: var(--spacing-extra-small);
}
.ph2-ns {
padding-left: var(--spacing-small);
padding-right: var(--spacing-small);
}
.ph3-ns {
padding-left: var(--spacing-medium);
padding-right: var(--spacing-medium);
}
.ph4-ns {
padding-left: var(--spacing-large);
padding-right: var(--spacing-large);
}
.ph5-ns {
padding-left: var(--spacing-extra-large);
padding-right: var(--spacing-extra-large);
}
.ph6-ns {
padding-left: var(--spacing-extra-extra-large);
padding-right: var(--spacing-extra-extra-large);
}
.ph7-ns {
padding-left: var(--spacing-extra-extra-extra-large);
padding-right: var(--spacing-extra-extra-extra-large);
}

.ma0-ns { margin: var(--spacing-none); }
.ma1-ns { margin: var(--spacing-extra-small); }
.ma2-ns { margin: var(--spacing-small); }
.ma3-ns { margin: var(--spacing-medium); }
.ma4-ns { margin: var(--spacing-large); }
.ma5-ns { margin: var(--spacing-extra-large); }
.ma6-ns { margin: var(--spacing-extra-extra-large); }
.ma7-ns { margin: var(--spacing-extra-extra-extra-large); }

.ml0-ns { margin-left: var(--spacing-none); }
.ml1-ns { margin-left: var(--spacing-extra-small); }
.ml2-ns { margin-left: var(--spacing-small); }
.ml3-ns { margin-left: var(--spacing-medium); }
.ml4-ns { margin-left: var(--spacing-large); }
.ml5-ns { margin-left: var(--spacing-extra-large); }
.ml6-ns { margin-left: var(--spacing-extra-extra-large); }
.ml7-ns { margin-left: var(--spacing-extra-extra-extra-large); }

.mr0-ns { margin-right: var(--spacing-none); }
.mr1-ns { margin-right: var(--spacing-extra-small); }
.mr2-ns { margin-right: var(--spacing-small); }
.mr3-ns { margin-right: var(--spacing-medium); }
.mr4-ns { margin-right: var(--spacing-large); }
.mr5-ns { margin-right: var(--spacing-extra-large); }
.mr6-ns { margin-right: var(--spacing-extra-extra-large); }
.mr7-ns { margin-right: var(--spacing-extra-extra-extra-large); }

.mb0-ns { margin-bottom: var(--spacing-none); }
.mb1-ns { margin-bottom: var(--spacing-extra-small); }
.mb2-ns { margin-bottom: var(--spacing-small); }
.mb3-ns { margin-bottom: var(--spacing-medium); }
.mb4-ns { margin-bottom: var(--spacing-large); }
.mb5-ns { margin-bottom: var(--spacing-extra-large); }
.mb6-ns { margin-bottom: var(--spacing-extra-extra-large); }
.mb7-ns { margin-bottom: var(--spacing-extra-extra-extra-large); }

.mt0-ns { margin-top: var(--spacing-none); }
.mt1-ns { margin-top: var(--spacing-extra-small); }
.mt2-ns { margin-top: var(--spacing-small); }
.mt3-ns { margin-top: var(--spacing-medium); }
.mt4-ns { margin-top: var(--spacing-large); }
.mt5-ns { margin-top: var(--spacing-extra-large); }
.mt6-ns { margin-top: var(--spacing-extra-extra-large); }
.mt7-ns { margin-top: var(--spacing-extra-extra-extra-large); }

.mv0-ns {
margin-top: var(--spacing-none);
margin-bottom: var(--spacing-none);
}
.mv1-ns {
margin-top: var(--spacing-extra-small);
margin-bottom: var(--spacing-extra-small);
}
.mv2-ns {
margin-top: var(--spacing-small);
margin-bottom: var(--spacing-small);
}
.mv3-ns {
margin-top: var(--spacing-medium);
margin-bottom: var(--spacing-medium);
}
.mv4-ns {
margin-top: var(--spacing-large);
margin-bottom: var(--spacing-large);
}
.mv5-ns {
margin-top: var(--spacing-extra-large);
margin-bottom: var(--spacing-extra-large);
}
.mv6-ns {
margin-top: var(--spacing-extra-extra-large);
margin-bottom: var(--spacing-extra-extra-large);
}
.mv7-ns {
margin-top: var(--spacing-extra-extra-extra-large);
margin-bottom: var(--spacing-extra-extra-extra-large);
}

.mh0-ns {
margin-left: var(--spacing-none);
margin-right: var(--spacing-none);
}
.mh1-ns {
margin-left: var(--spacing-extra-small);
margin-right: var(--spacing-extra-small);
}
.mh2-ns {
margin-left: var(--spacing-small);
margin-right: var(--spacing-small);
}
.mh3-ns {
margin-left: var(--spacing-medium);
margin-right: var(--spacing-medium);
}
.mh4-ns {
margin-left: var(--spacing-large);
margin-right: var(--spacing-large);
}
.mh5-ns {
margin-left: var(--spacing-extra-large);
margin-right: var(--spacing-extra-large);
}
.mh6-ns {
margin-left: var(--spacing-extra-extra-large);
margin-right: var(--spacing-extra-extra-large);
}
.mh7-ns {
margin-left: var(--spacing-extra-extra-extra-large);
margin-right: var(--spacing-extra-extra-extra-large);
}

}

@media (--breakpoint-medium) {
.pa0-m { padding: var(--spacing-none); }
.pa1-m { padding: var(--spacing-extra-small); }
.pa2-m { padding: var(--spacing-small); }
.pa3-m { padding: var(--spacing-medium); }
.pa4-m { padding: var(--spacing-large); }
.pa5-m { padding: var(--spacing-extra-large); }
.pa6-m { padding: var(--spacing-extra-extra-large); }
.pa7-m { padding: var(--spacing-extra-extra-extra-large); }

.pl0-m { padding-left: var(--spacing-none); }
.pl1-m { padding-left: var(--spacing-extra-small); }
.pl2-m { padding-left: var(--spacing-small); }
.pl3-m { padding-left: var(--spacing-medium); }
.pl4-m { padding-left: var(--spacing-large); }
.pl5-m { padding-left: var(--spacing-extra-large); }
.pl6-m { padding-left: var(--spacing-extra-extra-large); }
.pl7-m { padding-left: var(--spacing-extra-extra-extra-large); }

.pr0-m { padding-right: var(--spacing-none); }
.pr1-m { padding-right: var(--spacing-extra-small); }
.pr2-m { padding-right: var(--spacing-small); }
.pr3-m { padding-right: var(--spacing-medium); }
.pr4-m { padding-right: var(--spacing-large); }
.pr5-m { padding-right: var(--spacing-extra-large); }
.pr6-m { padding-right: var(--spacing-extra-extra-large); }
.pr7-m { padding-right: var(--spacing-extra-extra-extra-large); }

.pb0-m { padding-bottom: var(--spacing-none); }
.pb1-m { padding-bottom: var(--spacing-extra-small); }
.pb2-m { padding-bottom: var(--spacing-small); }
.pb3-m { padding-bottom: var(--spacing-medium); }
.pb4-m { padding-bottom: var(--spacing-large); }
.pb5-m { padding-bottom: var(--spacing-extra-large); }
.pb6-m { padding-bottom: var(--spacing-extra-extra-large); }
.pb7-m { padding-bottom: var(--spacing-extra-extra-extra-large); }

.pt0-m { padding-top: var(--spacing-none); }
.pt1-m { padding-top: var(--spacing-extra-small); }
.pt2-m { padding-top: var(--spacing-small); }
.pt3-m { padding-top: var(--spacing-medium); }
.pt4-m { padding-top: var(--spacing-large); }
.pt5-m { padding-top: var(--spacing-extra-large); }
.pt6-m { padding-top: var(--spacing-extra-extra-large); }
.pt7-m { padding-top: var(--spacing-extra-extra-extra-large); }

.pv0-m {
padding-top: var(--spacing-none);
padding-bottom: var(--spacing-none);
}
.pv1-m {
padding-top: var(--spacing-extra-small);
padding-bottom: var(--spacing-extra-small);
}
.pv2-m {
padding-top: var(--spacing-small);
padding-bottom: var(--spacing-small);
}
.pv3-m {
padding-top: var(--spacing-medium);
padding-bottom: var(--spacing-medium);
}
.pv4-m {
padding-top: var(--spacing-large);
padding-bottom: var(--spacing-large);
}
.pv5-m {
padding-top: var(--spacing-extra-large);
padding-bottom: var(--spacing-extra-large);
}
.pv6-m {
padding-top: var(--spacing-extra-extra-large);
padding-bottom: var(--spacing-extra-extra-large);
}
.pv7-m {
padding-top: var(--spacing-extra-extra-extra-large);
padding-bottom: var(--spacing-extra-extra-extra-large);
}

.ph0-m {
padding-left: var(--spacing-none);
padding-right: var(--spacing-none);
}
.ph1-m {
padding-left: var(--spacing-extra-small);
padding-right: var(--spacing-extra-small);
}
.ph2-m {
padding-left: var(--spacing-small);
padding-right: var(--spacing-small);
}
.ph3-m {
padding-left: var(--spacing-medium);
padding-right: var(--spacing-medium);
}
.ph4-m {
padding-left: var(--spacing-large);
padding-right: var(--spacing-large);
}
.ph5-m {
padding-left: var(--spacing-extra-large);
padding-right: var(--spacing-extra-large);
}
.ph6-m {
padding-left: var(--spacing-extra-extra-large);
padding-right: var(--spacing-extra-extra-large);
}
.ph7-m {
padding-left: var(--spacing-extra-extra-extra-large);
padding-right: var(--spacing-extra-extra-extra-large);
}

.ma0-m { margin: var(--spacing-none); }
.ma1-m { margin: var(--spacing-extra-small); }
.ma2-m { margin: var(--spacing-small); }
.ma3-m { margin: var(--spacing-medium); }
.ma4-m { margin: var(--spacing-large); }
.ma5-m { margin: var(--spacing-extra-large); }
.ma6-m { margin: var(--spacing-extra-extra-large); }
.ma7-m { margin: var(--spacing-extra-extra-extra-large); }

.ml0-m { margin-left: var(--spacing-none); }
.ml1-m { margin-left: var(--spacing-extra-small); }
.ml2-m { margin-left: var(--spacing-small); }
.ml3-m { margin-left: var(--spacing-medium); }
.ml4-m { margin-left: var(--spacing-large); }
.ml5-m { margin-left: var(--spacing-extra-large); }
.ml6-m { margin-left: var(--spacing-extra-extra-large); }
.ml7-m { margin-left: var(--spacing-extra-extra-extra-large); }

.mr0-m { margin-right: var(--spacing-none); }
.mr1-m { margin-right: var(--spacing-extra-small); }
.mr2-m { margin-right: var(--spacing-small); }
.mr3-m { margin-right: var(--spacing-medium); }
.mr4-m { margin-right: var(--spacing-large); }
.mr5-m { margin-right: var(--spacing-extra-large); }
.mr6-m { margin-right: var(--spacing-extra-extra-large); }
.mr7-m { margin-right: var(--spacing-extra-extra-extra-large); }

.mb0-m { margin-bottom: var(--spacing-none); }
.mb1-m { margin-bottom: var(--spacing-extra-small); }
.mb2-m { margin-bottom: var(--spacing-small); }
.mb3-m { margin-bottom: var(--spacing-medium); }
.mb4-m { margin-bottom: var(--spacing-large); }
.mb5-m { margin-bottom: var(--spacing-extra-large); }
.mb6-m { margin-bottom: var(--spacing-extra-extra-large); }
.mb7-m { margin-bottom: var(--spacing-extra-extra-extra-large); }

.mt0-m { margin-top: var(--spacing-none); }
.mt1-m { margin-top: var(--spacing-extra-small); }
.mt2-m { margin-top: var(--spacing-small); }
.mt3-m { margin-top: var(--spacing-medium); }
.mt4-m { margin-top: var(--spacing-large); }
.mt5-m { margin-top: var(--spacing-extra-large); }
.mt6-m { margin-top: var(--spacing-extra-extra-large); }
.mt7-m { margin-top: var(--spacing-extra-extra-extra-large); }

.mv0-m {
margin-top: var(--spacing-none);
margin-bottom: var(--spacing-none);
}
.mv1-m {
margin-top: var(--spacing-extra-small);
margin-bottom: var(--spacing-extra-small);
}
.mv2-m {
margin-top: var(--spacing-small);
margin-bottom: var(--spacing-small);
}
.mv3-m {
margin-top: var(--spacing-medium);
margin-bottom: var(--spacing-medium);
}
.mv4-m {
margin-top: var(--spacing-large);
margin-bottom: var(--spacing-large);
}
.mv5-m {
margin-top: var(--spacing-extra-large);
margin-bottom: var(--spacing-extra-large);
}
.mv6-m {
margin-top: var(--spacing-extra-extra-large);
margin-bottom: var(--spacing-extra-extra-large);
}
.mv7-m {
margin-top: var(--spacing-extra-extra-extra-large);
margin-bottom: var(--spacing-extra-extra-extra-large);
}

.mh0-m {
margin-left: var(--spacing-none);
margin-right: var(--spacing-none);
}
.mh1-m {
margin-left: var(--spacing-extra-small);
margin-right: var(--spacing-extra-small);
}
.mh2-m {
margin-left: var(--spacing-small);
margin-right: var(--spacing-small);
}
.mh3-m {
margin-left: var(--spacing-medium);
margin-right: var(--spacing-medium);
}
.mh4-m {
margin-left: var(--spacing-large);
margin-right: var(--spacing-large);
}
.mh5-m {
margin-left: var(--spacing-extra-large);
margin-right: var(--spacing-extra-large);
}
.mh6-m {
margin-left: var(--spacing-extra-extra-large);
margin-right: var(--spacing-extra-extra-large);
}
.mh7-m {
margin-left: var(--spacing-extra-extra-extra-large);
margin-right: var(--spacing-extra-extra-extra-large);
}

}

@media (--breakpoint-large) {
.pa0-l { padding: var(--spacing-none); }
.pa1-l { padding: var(--spacing-extra-small); }
.pa2-l { padding: var(--spacing-small); }
.pa3-l { padding: var(--spacing-medium); }
.pa4-l { padding: var(--spacing-large); }
.pa5-l { padding: var(--spacing-extra-large); }
.pa6-l { padding: var(--spacing-extra-extra-large); }
.pa7-l { padding: var(--spacing-extra-extra-extra-large); }

.pl0-l { padding-left: var(--spacing-none); }
.pl1-l { padding-left: var(--spacing-extra-small); }
.pl2-l { padding-left: var(--spacing-small); }
.pl3-l { padding-left: var(--spacing-medium); }
.pl4-l { padding-left: var(--spacing-large); }
.pl5-l { padding-left: var(--spacing-extra-large); }
.pl6-l { padding-left: var(--spacing-extra-extra-large); }
.pl7-l { padding-left: var(--spacing-extra-extra-extra-large); }

.pr0-l { padding-right: var(--spacing-none); }
.pr1-l { padding-right: var(--spacing-extra-small); }
.pr2-l { padding-right: var(--spacing-small); }
.pr3-l { padding-right: var(--spacing-medium); }
.pr4-l { padding-right: var(--spacing-large); }
.pr5-l { padding-right: var(--spacing-extra-large); }
.pr6-l { padding-right: var(--spacing-extra-extra-large); }
.pr7-l { padding-right: var(--spacing-extra-extra-extra-large); }

.pb0-l { padding-bottom: var(--spacing-none); }
.pb1-l { padding-bottom: var(--spacing-extra-small); }
.pb2-l { padding-bottom: var(--spacing-small); }
.pb3-l { padding-bottom: var(--spacing-medium); }
.pb4-l { padding-bottom: var(--spacing-large); }
.pb5-l { padding-bottom: var(--spacing-extra-large); }
.pb6-l { padding-bottom: var(--spacing-extra-extra-large); }
.pb7-l { padding-bottom: var(--spacing-extra-extra-extra-large); }

.pt0-l { padding-top: var(--spacing-none); }
.pt1-l { padding-top: var(--spacing-extra-small); }
.pt2-l { padding-top: var(--spacing-small); }
.pt3-l { padding-top: var(--spacing-medium); }
.pt4-l { padding-top: var(--spacing-large); }
.pt5-l { padding-top: var(--spacing-extra-large); }
.pt6-l { padding-top: var(--spacing-extra-extra-large); }
.pt7-l { padding-top: var(--spacing-extra-extra-extra-large); }

.pv0-l {
padding-top: var(--spacing-none);
padding-bottom: var(--spacing-none);
}
.pv1-l {
padding-top: var(--spacing-extra-small);
padding-bottom: var(--spacing-extra-small);
}
.pv2-l {
padding-top: var(--spacing-small);
padding-bottom: var(--spacing-small);
}
.pv3-l {
padding-top: var(--spacing-medium);
padding-bottom: var(--spacing-medium);
}
.pv4-l {
padding-top: var(--spacing-large);
padding-bottom: var(--spacing-large);
}
.pv5-l {
padding-top: var(--spacing-extra-large);
padding-bottom: var(--spacing-extra-large);
}
.pv6-l {
padding-top: var(--spacing-extra-extra-large);
padding-bottom: var(--spacing-extra-extra-large);
}
.pv7-l {
padding-top: var(--spacing-extra-extra-extra-large);
padding-bottom: var(--spacing-extra-extra-extra-large);
}

.ph0-l {
padding-left: var(--spacing-none);
padding-right: var(--spacing-none);
}
.ph1-l {
padding-left: var(--spacing-extra-small);
padding-right: var(--spacing-extra-small);
}
.ph2-l {
padding-left: var(--spacing-small);
padding-right: var(--spacing-small);
}
.ph3-l {
padding-left: var(--spacing-medium);
padding-right: var(--spacing-medium);
}
.ph4-l {
padding-left: var(--spacing-large);
padding-right: var(--spacing-large);
}
.ph5-l {
padding-left: var(--spacing-extra-large);
padding-right: var(--spacing-extra-large);
}
.ph6-l {
padding-left: var(--spacing-extra-extra-large);
padding-right: var(--spacing-extra-extra-large);
}
.ph7-l {
padding-left: var(--spacing-extra-extra-extra-large);
padding-right: var(--spacing-extra-extra-extra-large);
}

.ma0-l { margin: var(--spacing-none); }
.ma1-l { margin: var(--spacing-extra-small); }
.ma2-l { margin: var(--spacing-small); }
.ma3-l { margin: var(--spacing-medium); }
.ma4-l { margin: var(--spacing-large); }
.ma5-l { margin: var(--spacing-extra-large); }
.ma6-l { margin: var(--spacing-extra-extra-large); }
.ma7-l { margin: var(--spacing-extra-extra-extra-large); }

.ml0-l { margin-left: var(--spacing-none); }
.ml1-l { margin-left: var(--spacing-extra-small); }
.ml2-l { margin-left: var(--spacing-small); }
.ml3-l { margin-left: var(--spacing-medium); }
.ml4-l { margin-left: var(--spacing-large); }
.ml5-l { margin-left: var(--spacing-extra-large); }
.ml6-l { margin-left: var(--spacing-extra-extra-large); }
.ml7-l { margin-left: var(--spacing-extra-extra-extra-large); }

.mr0-l { margin-right: var(--spacing-none); }
.mr1-l { margin-right: var(--spacing-extra-small); }
.mr2-l { margin-right: var(--spacing-small); }
.mr3-l { margin-right: var(--spacing-medium); }
.mr4-l { margin-right: var(--spacing-large); }
.mr5-l { margin-right: var(--spacing-extra-large); }
.mr6-l { margin-right: var(--spacing-extra-extra-large); }
.mr7-l { margin-right: var(--spacing-extra-extra-extra-large); }

.mb0-l { margin-bottom: var(--spacing-none); }
.mb1-l { margin-bottom: var(--spacing-extra-small); }
.mb2-l { margin-bottom: var(--spacing-small); }
.mb3-l { margin-bottom: var(--spacing-medium); }
.mb4-l { margin-bottom: var(--spacing-large); }
.mb5-l { margin-bottom: var(--spacing-extra-large); }
.mb6-l { margin-bottom: var(--spacing-extra-extra-large); }
.mb7-l { margin-bottom: var(--spacing-extra-extra-extra-large); }

.mt0-l { margin-top: var(--spacing-none); }
.mt1-l { margin-top: var(--spacing-extra-small); }
.mt2-l { margin-top: var(--spacing-small); }
.mt3-l { margin-top: var(--spacing-medium); }
.mt4-l { margin-top: var(--spacing-large); }
.mt5-l { margin-top: var(--spacing-extra-large); }
.mt6-l { margin-top: var(--spacing-extra-extra-large); }
.mt7-l { margin-top: var(--spacing-extra-extra-extra-large); }

.mv0-l {
margin-top: var(--spacing-none);
margin-bottom: var(--spacing-none);
}
.mv1-l {
margin-top: var(--spacing-extra-small);
margin-bottom: var(--spacing-extra-small);
}
.mv2-l {
margin-top: var(--spacing-small);
margin-bottom: var(--spacing-small);
}
.mv3-l {
margin-top: var(--spacing-medium);
margin-bottom: var(--spacing-medium);
}
.mv4-l {
margin-top: var(--spacing-large);
margin-bottom: var(--spacing-large);
}
.mv5-l {
margin-top: var(--spacing-extra-large);
margin-bottom: var(--spacing-extra-large);
}
.mv6-l {
margin-top: var(--spacing-extra-extra-large);
margin-bottom: var(--spacing-extra-extra-large);
}
.mv7-l {
margin-top: var(--spacing-extra-extra-extra-large);
margin-bottom: var(--spacing-extra-extra-extra-large);
}

.mh0-l {
margin-left: var(--spacing-none);
margin-right: var(--spacing-none);
}
.mh1-l {
margin-left: var(--spacing-extra-small);
margin-right: var(--spacing-extra-small);
}
.mh2-l {
margin-left: var(--spacing-small);
margin-right: var(--spacing-small);
}
.mh3-l {
margin-left: var(--spacing-medium);
margin-right: var(--spacing-medium);
}
.mh4-l {
margin-left: var(--spacing-large);
margin-right: var(--spacing-large);
}
.mh5-l {
margin-left: var(--spacing-extra-large);
margin-right: var(--spacing-extra-large);
}
.mh6-l {
margin-left: var(--spacing-extra-extra-large);
margin-right: var(--spacing-extra-extra-large);
}
.mh7-l {
margin-left: var(--spacing-extra-extra-extra-large);
margin-right: var(--spacing-extra-extra-extra-large);
}
}


+ 8
- 0
src/css/tachyons/_styles.css View File

/*

STYLES

Add custom styles here.

*/


+ 35
- 0
src/css/tachyons/_tables.css View File

/*

TABLES
Docs: http://tachyons.io/docs/elements/tables/

*/

.collapse {
border-collapse: collapse;
border-spacing: 0;
}

.striped--light-silver:nth-child(odd) {
background-color: var(--light-silver);
}

.striped--moon-gray:nth-child(odd) {
background-color: var(--moon-gray);
}

.striped--light-gray:nth-child(odd) {
background-color: var(--light-gray);
}

.striped--near-white:nth-child(odd) {
background-color: var(--near-white);
}

.stripe-light:nth-child(odd) {
background-color: var(--white-10);
}

.stripe-dark:nth-child(odd) {
background-color: var(--black-10);
}

+ 42
- 0
src/css/tachyons/_text-align.css View File

/*

TEXT ALIGN
Docs: http://tachyons.io/docs/typography/text-align/

Base
t = text-align

Modifiers
l = left
r = right
c = center

Media Query Extensions:
-ns = not-small
-m = medium
-l = large

*/

.tl { text-align: left; }
.tr { text-align: right; }
.tc { text-align: center; }

@media (--breakpoint-not-small) {
.tl-ns { text-align: left; }
.tr-ns { text-align: right; }
.tc-ns { text-align: center; }
}

@media (--breakpoint-medium) {
.tl-m { text-align: left; }
.tr-m { text-align: right; }
.tc-m { text-align: center; }
}

@media (--breakpoint-large) {
.tl-l { text-align: left; }
.tr-l { text-align: right; }
.tc-l { text-align: center; }
}


+ 35
- 0
src/css/tachyons/_text-decoration.css View File

/*

TEXT DECORATION
Docs: http://tachyons.io/docs/typography/text-decoration/


Media Query Extensions:
-ns = not-small
-m = medium
-l = large

*/

.strike { text-decoration: line-through; }
.underline { text-decoration: underline; }
.no-underline { text-decoration: none; }


@media (--breakpoint-not-small) {
.strike-ns { text-decoration: line-through; }
.underline-ns { text-decoration: underline; }
.no-underline-ns { text-decoration: none; }
}

@media (--breakpoint-medium) {
.strike-m { text-decoration: line-through; }
.underline-m { text-decoration: underline; }
.no-underline-m { text-decoration: none; }
}

@media (--breakpoint-large) {
.strike-l { text-decoration: line-through; }
.underline-l { text-decoration: underline; }
.no-underline-l { text-decoration: none; }
}

+ 46
- 0
src/css/tachyons/_text-transform.css View File

/*

TEXT TRANSFORM
Docs: http://tachyons.io/docs/typography/text-transform/

Base:
tt = text-transform

Modifiers
c = capitalize
l = lowercase
u = uppercase
n = none

Media Query Extensions:
-ns = not-small
-m = medium
-l = large

*/

.ttc { text-transform: capitalize; }
.ttl { text-transform: lowercase; }
.ttu { text-transform: uppercase; }
.ttn { text-transform: none; }

@media (--breakpoint-not-small) {
.ttc-ns { text-transform: capitalize; }
.ttl-ns { text-transform: lowercase; }
.ttu-ns { text-transform: uppercase; }
.ttn-ns { text-transform: none; }
}

@media (--breakpoint-medium) {
.ttc-m { text-transform: capitalize; }
.ttl-m { text-transform: lowercase; }
.ttu-m { text-transform: uppercase; }
.ttn-m { text-transform: none; }
}

@media (--breakpoint-large) {
.ttc-l { text-transform: capitalize; }
.ttl-l { text-transform: lowercase; }
.ttu-l { text-transform: uppercase; }
.ttn-l { text-transform: none; }
}

+ 95
- 0
src/css/tachyons/_type-scale.css View File

/*

TYPE SCALE
Docs: http://tachyons.io/docs/typography/scale/

Base:
f = font-size

Modifiers
1 = 1st step in size scale
2 = 2nd step in size scale
3 = 3rd step in size scale
4 = 4th step in size scale
5 = 5th step in size scale
6 = 6th step in size scale
7 = 7th step in size scale

Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/

/*
* For Hero/Marketing Titles
*
* 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; }
.f3 { font-size: 1.5rem; }
.f4 { font-size: 1.25rem; }
.f5 { font-size: 1rem; }
.f6 { font-size: .875rem; }
.f7 { font-size: .75rem; } /* Small and hard to read for many people so use with extreme caution */

@media (--breakpoint-not-small){
.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 (--breakpoint-medium) {
.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 (--breakpoint-large) {
.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; }
}

+ 122
- 0
src/css/tachyons/_typography.css View File

/*

TYPOGRAPHY
http://tachyons.io/docs/typography/measure/

Media Query Extensions:
-ns = not-small
-m = medium
-l = large

*/



/* Measure is limited to ~66 characters */
.measure {
max-width: 30em;
}

/* Measure is limited to ~80 characters */
.measure-wide {
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 {
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;
overflow: hidden;
text-overflow: ellipsis;
}

@media (--breakpoint-not-small) {
.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 {
font-variant: small-caps;
}
.truncate-ns {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}

@media (--breakpoint-medium) {
.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 {
font-variant: small-caps;
}
.truncate-m {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}

@media (--breakpoint-large) {
.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 {
font-variant: small-caps;
}
.truncate-l {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}

+ 41
- 0
src/css/tachyons/_utilities.css View File

/*

UTILITIES

Media Query Extensions:
-ns = not-small
-m = medium
-l = large

*/

/* Equivalent to .overflow-y-scroll */
.overflow-container {
overflow-y: scroll;
}

.center {
margin-right: auto;
margin-left: auto;
}

@media (--breakpoint-not-small){
.center-ns {
margin-right: auto;
margin-left: auto;
}
}

@media (--breakpoint-medium){
.center-m {
margin-right: auto;
margin-left: auto;
}
}

@media (--breakpoint-large){
.center-l {
margin-right: auto;
margin-left: auto;
}
}

+ 36
- 0
src/css/tachyons/_vertical-align.css View File

/*

VERTICAL ALIGN

Media Query Extensions:
-ns = not-small
-m = medium
-l = large

*/

.v-base { vertical-align: baseline; }
.v-mid { vertical-align: middle; }
.v-top { vertical-align: top; }
.v-btm { vertical-align: bottom; }

@media (--breakpoint-not-small) {
.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 (--breakpoint-medium) {
.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 (--breakpoint-large) {
.v-base-l { vertical-align: baseline; }
.v-mid-l { vertical-align: middle; }
.v-top-l { vertical-align: top; }
.v-btm-l { vertical-align: bottom; }
}

+ 51
- 0
src/css/tachyons/_visibility.css View File

/*

VISIBILITY

Media Query Extensions:
-ns = not-small
-m = medium
-l = large

*/


/*
Text that is hidden but accessible
Ref: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*/

.clip {
position: fixed !important;
_position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}

@media (--breakpoint-not-small) {
.clip-ns {
position: fixed !important;
_position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
}

@media (--breakpoint-medium) {
.clip-m {
position: fixed !important;
_position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
}

@media (--breakpoint-large) {
.clip-l {
position: fixed !important;
_position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
}


+ 34
- 0
src/css/tachyons/_white-space.css View File

/*

WHITE SPACE

Media Query Extensions:
-ns = not-small
-m = medium
-l = large

*/


.ws-normal { white-space: normal; }
.nowrap { white-space: nowrap; }
.pre { white-space: pre; }

@media (--breakpoint-not-small) {
.ws-normal-ns { white-space: normal; }
.nowrap-ns { white-space: nowrap; }
.pre-ns { white-space: pre; }
}

@media (--breakpoint-medium) {
.ws-normal-m { white-space: normal; }
.nowrap-m { white-space: nowrap; }
.pre-m { white-space: pre; }
}

@media (--breakpoint-large) {
.ws-normal-l { white-space: normal; }
.nowrap-l { white-space: nowrap; }
.pre-l { white-space: pre; }
}


+ 143
- 0
src/css/tachyons/_widths.css View File

/*

WIDTHS
Docs: http://tachyons.io/docs/layout/widths/

Base:
w = width

Modifiers
1 = 1st step in width scale
2 = 2nd step in width scale
3 = 3rd step in width scale
4 = 4th step in width scale
5 = 5th step in width scale

-10 = literal value 10%
-20 = literal value 20%
-25 = literal value 25%
-30 = literal value 30%
-33 = literal value 33%
-34 = literal value 34%
-40 = literal value 40%
-50 = literal value 50%
-60 = literal value 60%
-70 = literal value 70%
-75 = literal value 75%
-80 = literal value 80%
-90 = literal value 90%
-100 = literal value 100%

-third = 100% / 3 (Not supported in opera mini or IE8)
-two-thirds = 100% / 1.5 (Not supported in opera mini or IE8)
-auto = string value auto


Media Query Extensions:
-ns = not-small
-m = medium
-l = large

*/

/* 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: calc(100% / 3); }
.w-two-thirds { width: calc(100% / 1.5); }
.w-auto { width: auto; }

@media (--breakpoint-not-small) {
.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: calc(100% / 3); }
.w-two-thirds-ns { width: calc(100% / 1.5); }
.w-auto-ns { width: auto; }
}

@media (--breakpoint-medium) {
.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: calc(100% / 3); }
.w-two-thirds-m { width: calc(100% / 1.5); }
.w-auto-m { width: auto; }
}

@media (--breakpoint-large) {
.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: calc(100% / 3); }
.w-two-thirds-l { width: calc(100% / 1.5); }
.w-auto-l { width: auto; }
}

+ 36
- 0
src/css/tachyons/_word-break.css View File

/*

WORD BREAK

Base:
word = word-break

Media Query Extensions:
-ns = not-small
-m = medium
-l = large

*/

.word-normal { word-break: normal; }
.word-wrap { word-break: break-all; }
.word-nowrap { word-break: keep-all; }

@media (--breakpoint-not-small) {
.word-normal-ns { word-break: normal; }
.word-wrap-ns { word-break: break-all; }
.word-nowrap-ns { word-break: keep-all; }
}

@media (--breakpoint-medium) {
.word-normal-m { word-break: normal; }
.word-wrap-m { word-break: break-all; }
.word-nowrap-m { word-break: keep-all; }
}

@media (--breakpoint-large) {
.word-normal-l { word-break: normal; }
.word-wrap-l { word-break: break-all; }
.word-nowrap-l { word-break: keep-all; }
}


+ 53
- 0
src/css/tachyons/_z-index.css View File

/*

Z-INDEX

Base
z = z-index

Modifiers
-0 = literal value 0
-1 = literal value 1
-2 = literal value 2
-3 = literal value 3
-4 = literal value 4
-5 = literal value 5
-999 = literal value 999
-9999 = literal value 9999

-max = largest accepted z-index value as integer

-inherit = string value inherit
-initial = string value initial
-unset = string value unset

MDN: https://developer.mozilla.org/en/docs/Web/CSS/z-index
Spec: http://www.w3.org/TR/CSS2/zindex.html
Articles:
https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Tips on extending:
There might be a time worth using negative z-index values.
Or if you are using tachyons with another project, you might need to
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: initial; }
.z-unset { z-index: unset; }


+ 94
- 0
src/css/tachyons/tachyons.css View File

/*! TACHYONS v4.6.1 | http://tachyons.io */

/*
*
* ________ ______
* ___ __/_____ _________ /______ ______________________
* __ / _ __ `/ ___/_ __ \_ / / / __ \_ __ \_ ___/
* _ / / /_/ // /__ _ / / / /_/ // /_/ / / / /(__ )
* /_/ \__,_/ \___/ /_/ /_/_\__, / \____//_/ /_//____/
* /____/
*
* TABLE OF CONTENTS
*
* 1. External Library Includes
* - Normalize.css | http://normalize.css.github.io
* 2. Tachyons Modules
* 3. Variables
* - Media Queries
* - Colors
* 4. Debugging
* - Debug all
* - Debug children
*
*/


/* External Library Includes */
@import './_normalize';


/* Modules */
@import './_box-sizing';
@import './_aspect-ratios';
@import './_images';
@import './_background-size';
@import './_background-position';
@import './_outlines';
@import './_borders';
@import './_border-colors';
@import './_border-radius';
@import './_border-style';
@import './_border-widths';
@import './_box-shadow';
@import './_code';
@import './_coordinates';
@import './_clears';
@import './_display';
@import './_flexbox';
@import './_floats';
@import './_font-family';
@import './_font-style';
@import './_font-weight';
@import './_forms';
@import './_heights';
@import './_letter-spacing';
@import './_line-height';
@import './_links';
@import './_lists';
@import './_max-widths';
@import './_widths';
@import './_overflow';
@import './_position';
@import './_opacity';
@import './_rotations';
@import './_skins';
@import './_skins-pseudo';
@import './_spacing';
@import './_negative-margins';
@import './_tables';
@import './_text-decoration';
@import './_text-align';
@import './_text-transform';
@import './_type-scale';
@import './_typography';
@import './_utilities';
@import './_visibility';
@import './_white-space';
@import './_vertical-align';
@import './_hovers';
@import './_z-index';
@import './_nested';
@import './_styles';

/* Variables */
/* Importing here will allow you to override any variables in the modules */
@import './_colors';
@import './_media-queries';

/* Debugging */
@import './_debug-children';
@import './_debug-grid';

/* Uncomment out the line below to help debug layout issues */
/* @import './_debug'; */

+ 14
- 0
src/js/main.js View File

import styles from './../css/main.css';


// NOTE: TO use Jquery, just call the modules you want
// var $ = require('jquery/src/core');
// require('jquery/src/core/init');
// require('jquery/src/manipulation');

// OR, use all of them
// var $ = require('jquery/src/jquery');

// And write your code
// $('body').append('<p>Jquery is working</p>');
//

+ 30
- 0
src/package.json View File

{
"name": "gohugo-default-styles",
"version": "1.0.0",
"description": "Default Theme for Hugo Sites",
"main": "index.js",
"repository": "",
"author": "budparr",
"license": "MIT",
"scripts": {
"build:production": "rm -rf ../static/dist && webpack -p",
"build": "webpack --progress --colors --watch",
"css:copy-tachyons": "rm -rf 'css/tachyons' && copyfiles -f 'node_modules/tachyons/src/*.css' 'css/tachyons/'",
"start": "npm run build"
},
"devDependencies": {
"css-loader": "^0.28.0",
"cssnano": "^3.10.0",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^0.11.1",
"jquery": "^3.2.1",
"postcss": "^5.2.16",
"postcss-cssnext": "^2.10.0",
"postcss-import": "^9.1.0",
"postcss-loader": "^1.3.3",
"style-loader": "^0.16.1",
"tachyons": "^4.7.0",
"webpack": "^2.3.3"
},
"dependencies": {}
}

+ 9
- 0
src/readme.md View File

## Welcome to the Src folder for the Gohugo Default Theme


You may never have to touch anything in this folder. It's here in case you want to more deeply customize your styles.


Yarn.

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.

+ 47
- 0
src/webpack.config.js View File

var path = require("path");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var webpack = require("webpack");
module.exports = {
// context: path.resolve(__dirname, './src'),
entry: {
app: './js/main.js'
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: 'css-loader?importLoaders=1!postcss-loader'
})
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: [
'url-loader?limit=10000',
'img-loader'
]
}
]
},

output: {
path: path.join(__dirname, "./../static/dist"),
filename: '[name].bundle.js',
},

resolve: {
modules: [path.resolve(__dirname, 'src'), 'node_modules'],
},

plugins: [
new ExtractTextPlugin("main.css"),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
],
watchOptions: {
watch: true
}
}

+ 2854
- 0
src/yarn.lock
File diff suppressed because it is too large
View File


+ 1
- 0
static/dist/app.bundle.js View File

!function(e){function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var t={};n.m=e,n.c=t,n.i=function(e){return e},n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},n.p="",n(n.s=28)}({26:function(e,n){},28:function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var r=t(26);t.n(r)}});

+ 1
- 0
static/dist/main.css
File diff suppressed because it is too large
View File


+ 25
- 0
theme.toml View File

# theme.toml template for a Hugo theme
# See https://github.com/spf13/hugoThemes#themetoml for an example

name = "Gohugo Default"
license = "MIT"
licenselink = "https://github.com/yourname/yourtheme/blob/master/LICENSE.md"
description = ""
homepage = "http://siteforthistheme.com/"
tags = ["website", "starter"]
features = ["", ""]
min_version = 0.18

[author]
name = "Bud Parr"
homepage = "https://github.com/budparr"

# If porting an existing theme
[original]
name = ""
homepage = ""
repo = ""

[params]

hero_copy = "Some great copy here"

Write Preview
Loading…
Cancel
Save