├── .gitignore
├── README.md
├── Rakefile
├── _config.yml
├── _includes
├── _archives.html
├── _footer.html
├── _google_analytics.html
├── _head.html
├── _navigation.html
└── _related_posts.html
├── _layouts
├── default.html
└── posts.html
├── _posts
├── 2013-01-01-photo-template.html
├── 2013-01-03-soundcloud-template.html
├── 2013-03-08-smarter-defaults.html
├── 2013-03-17-naming-things-is-hard.html
├── 2013-09-22-a-really-really-long-title-for-a-post-because-layouts-need-to-be-tested.html
├── 2014-02-14-post-future-example.html
├── 2014-04-04-styles.html
├── 2015-01-01-introducing-jkl.html
└── 2015-05-20-quote-post.html
├── about
└── index.html
├── archives
└── index.html
├── css
├── i.css
├── jkl-tachyons.css
├── jkl-tachyons.min.css
├── tachyons.css
└── tachyons.min.css
├── gulpfile.js
├── img
├── city.jpg
├── jkl.jpg
└── photo.jpg
├── index.html
├── package.json
└── src
├── _aspect-ratios.css
├── _background-position.css
├── _background-size.css
├── _base.css
├── _border-colors.css
├── _border-radius.css
├── _border-style.css
├── _border-widths.css
├── _borders.css
├── _box-shadow.css
├── _box-sizing.css
├── _button-skins.css
├── _buttons.css
├── _children.css
├── _clears.css
├── _code.css
├── _colors.css
├── _coordinates.css
├── _debug-children.css
├── _debug-grid.css
├── _debug.css
├── _dimension-utilities.css
├── _display.css
├── _flexbox.css
├── _floats.css
├── _font-family.css
├── _font-style.css
├── _font-weight.css
├── _forms.css
├── _grid.css
├── _heights.css
├── _hovers.css
├── _images.css
├── _letter-spacing.css
├── _line-height.css
├── _links.css
├── _lists.css
├── _max-widths.css
├── _media-queries.css
├── _module-template.css
├── _negative-margins.css
├── _normalize.css
├── _opacity.css
├── _outlines.css
├── _overflow.css
├── _position.css
├── _skins-pseudo.css
├── _skins.css
├── _spacing.css
├── _states.css
├── _styles.css
├── _svg-fills.css
├── _svg-strokes.css
├── _tables.css
├── _text-align.css
├── _text-decoration.css
├── _text-transform.css
├── _type-scale.css
├── _typography.css
├── _utilities.css
├── _vertical-align.css
├── _visibility.css
├── _white-space.css
├── _widths.css
├── _word-break.css
├── _z-index.css
├── jkl-tachyons.css
└── tachyons.css
/.gitignore:
--------------------------------------------------------------------------------
1 | npm-debug.log
2 | node_modules
3 | .DS_Store
4 | _site
5 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # JKL + TACHYONS
2 |
3 | A light-weight Jekyll v1.0 blog scaffolding that's ready to deploy after setting up one
4 | config. Still under development. Pull requests encouraged && accepted.
5 |
6 | # Get Started
7 | ```
8 | git clone git@github.com:mrmrs/jkl-tachyons.git && cd jkl-tachyons && npm
9 | install && npm start
10 | ```
11 | That should do the trick. More verbose explanations below.
12 |
13 | You'll also want to open another tab in terminal and run
14 | ```
15 | jekyll serve --watch
16 | ```
17 |
18 | This will build the site.
19 |
20 | This sets up a jekyll server for dev on port 4000. Site is regenerated everytime you save a file.
21 | NOTE: Changing _config.yml will require a restart of the jekyll server to see changes.
22 | To restart server, go to terminal tab that server is running in then press
23 | ```
24 | ctrl+C ⇧ enter
25 | ```
26 |
27 |
28 | ## Notes
29 | Example posts are in jkl/_posts/
30 | There are two layouts, one for posts, one for other pages. Layouts are stored, creatively,
31 | in jkl/_layouts/ Folders that begin with an underscore are not copied over to
32 | _site.
33 |
34 | # License
35 |
36 | The MIT License (MIT)
37 |
38 | Copyright (c) 2015 @mrmrs
39 |
40 | Permission is hereby granted, free of charge, to any person obtaining a copy
41 | of this software and associated documentation files (the "Software"), to deal
42 | in the Software without restriction, including without limitation the rights
43 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
44 | copies of the Software, and to permit persons to whom the Software is
45 | furnished to do so, subject to the following conditions:
46 |
47 | The above copyright notice and this permission notice shall be included in
48 | all copies or substantial portions of the Software.
49 |
50 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
51 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
52 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
53 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
54 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
55 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
56 | THE SOFTWARE.
57 |
58 |
59 |
--------------------------------------------------------------------------------
/Rakefile:
--------------------------------------------------------------------------------
1 | require "rubygems"
2 | require 'rake'
3 |
4 | desc "Automatically generate site at :4000 for local dev"
5 | task :dev do
6 | system "jekyll serve --watch"
7 | end # task :dev
8 |
9 | desc "Start Sass so that is compiles to css upon file save"
10 | task :sass do
11 | system "sass --watch _sass:css"
12 | end # task :sass
13 |
14 | desc "Start Sass so that is compiles to css upon file save"
15 | task :minify do
16 | system "sass --watch _sass:css --style compress"
17 | end # task :minify
18 |
19 | desc "Remove _site from directory before committing"
20 | task :clean do
21 | system "rm -rf _site"
22 | end # task :clean
23 |
--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
1 | # This will be the first part of the title tag for your site site.name + page.title
2 | name: "JKL"
3 | # Populates the meta description for the site. Should be under 150 characters for best SEO purposes.
4 | descripiton: "Light-weight scaffolding for a Jekyll project with Tachyons"
5 |
6 | # Owner (organization or individual) of site content
7 | author: "mrmrs"
8 |
9 | #url: http://
10 | url: "http://localhost:4000"
11 |
12 | # Your UA tracking number (i.e 35858753-1) for Google Analytics.
13 | # If you comment this out, or don't fill out this parameter - Google analytics won't be included.
14 | googleID:
15 |
16 | # Pagination variable for how many posts to show in a list
17 | paginate: 5
18 |
19 | # Style of permalinks
20 | permalink: pretty
21 |
22 | # Variable format options for URL styles below
23 | # pretty => /2009/04/29/slap-chop/index.html
24 | # /:month-month:day-:year/:title.html/ => 04-29-2009/slap-chop.html
25 | # /blog/:yearr/:month/:day/:title => /blog/2009/04/29/slap-chop/index.html
26 |
27 | # UnComment once you have pygments installed. Used for code syntax highlighting.
28 | #pygments: true
29 |
30 | exclude: [Rakefile]
31 |
--------------------------------------------------------------------------------
/_includes/_archives.html:
--------------------------------------------------------------------------------
1 |
2 | Archives
3 |
13 |
14 |
--------------------------------------------------------------------------------
/_includes/_footer.html:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/_includes/_google_analytics.html:
--------------------------------------------------------------------------------
1 | {% if site.googleID %}
2 |
13 | {% endif %}
14 |
--------------------------------------------------------------------------------
/_includes/_head.html:
--------------------------------------------------------------------------------
1 |
2 |
5 | {{ site.title }}
6 |
7 |
2 |
13 |
14 |
--------------------------------------------------------------------------------
/_includes/_related_posts.html:
--------------------------------------------------------------------------------
1 |
2 | Related Posts
3 |
13 |
14 |
--------------------------------------------------------------------------------
/_layouts/default.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | {% include _head.html %}
4 |
5 | {{content}}
6 | {% include _navigation.html %}
7 | {% include _footer.html %}
8 | {% include _google_analytics.html %}
9 |
10 |
11 |
--------------------------------------------------------------------------------
/_layouts/posts.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | {% include _head.html %}
4 |
5 |
6 |
7 |
8 | {{page.title}}
9 |
10 |
11 | {{content}}
12 |
13 |
14 | {% include _related_posts.html %}
15 | {% include _navigation.html %}
16 | {% include _footer.html %}
17 | {% include _google_analytics.html %}
18 |
19 |
20 |
--------------------------------------------------------------------------------
/_posts/2013-01-01-photo-template.html:
--------------------------------------------------------------------------------
1 | ---
2 | title: Photo Template
3 | layout: posts
4 | author: Adam
5 | ---
6 |
7 |
9 | A photo caption.
10 |
11 |
--------------------------------------------------------------------------------
/_posts/2013-01-03-soundcloud-template.html:
--------------------------------------------------------------------------------
1 | ---
2 | title: Soundcloud Post
3 | layout: posts
4 | author: adam
5 | ---
6 |
7 | Bump this all day. Spooky, scary.
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/_posts/2013-03-08-smarter-defaults.html:
--------------------------------------------------------------------------------
1 | ---
2 | title: An Essay About Design
3 | layout: posts
4 | author: Adam Morse
5 | ---
6 |
7 |
8 | I'm tired of saying I want a medium coffee. Everyone wants a medium coffee. I should only have to clarify if I want something else.
9 |
12 |
13 |
14 | We need smarter defaults. Everywhere.
15 |
16 |
--------------------------------------------------------------------------------
/_posts/2013-03-17-naming-things-is-hard.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: posts
3 |
4 | title: Naming Things is Hard
5 | author: Adam M.
6 | ---
7 |
8 |
9 | There are only two hard things in Computer Science: cache invalidation and naming things.
10 |
13 |
14 |
15 | Naming things is hard. It's also, very important. The people who read your code later
16 | (most likely, you) - will thank you. I don't write code with the goal of never having
17 | to change it. I write it with the intention of being able to change it quickly and easily
18 | in the future. Being able to quickly read/understand the code, will allow for this to be a
19 | reality. The first step in this, is naming things well.
20 |
21 |
22 | When I'm naming variables - I normally write them down (with an actual pen --gasp-- ), on
23 | post-it notes and stick them to my monitor. Every hour or so I'll glance at them and
24 | see what jumps out at me. Often times my most critical/constructive thoughts are within the first 4
25 | seconds. When I don't do this, I invent a series of variable names that are tied for first
26 | place in horribleness.
27 |
28 |
29 | variable_19, portW, curr, navCURR, currLeft, pos2, and one of my real gems...
30 | to_do_changeLater.Those are actual variable names from slop that I have written. I named these variables in
31 | haste. And now I have no idea what data they store. How could I expect anyone else
32 | to have any semblence of a fucking clue what my shitty variables are storing behind their thick veiled walls.
33 | Variable names like this are basically keeping secrets from the reader. Great variable names don't keep
34 | secrets. They stand at the tops of mountains and broadcast to the world in big neon lights what they're up to.
35 |
36 |
37 | Important points from other people:
38 | Variables are our first step in the notion of abstraction
39 |
40 |
41 | Data and Data2
42 | http://www.oreillynet.com/onlamp/blog/2004/03/the_worlds_two_worst_variable.html
43 |
44 |
--------------------------------------------------------------------------------
/_posts/2013-09-22-a-really-really-long-title-for-a-post-because-layouts-need-to-be-tested.html:
--------------------------------------------------------------------------------
1 | ---
2 | title: A Really Long Title for a Post Because Layouts Need to be Tested Thoroughly and Often
3 | layout: posts
4 | ---
5 |
6 |
8 | A photo caption.
9 |
10 |
--------------------------------------------------------------------------------
/_posts/2014-02-14-post-future-example.html:
--------------------------------------------------------------------------------
1 | ---
2 | title: A Post About Coding Things with Examples
3 | layout: posts
4 | ---
5 |
6 |
7 | We call it the after after after party.
8 |
9 |
10 | CSS Code
11 | {% highlight css %}
12 | .ct-r {
13 | text-align:center;
14 | @include breakpoint(one-hand) {
15 | text-align:left;
16 | }
17 | }
18 | {% endhighlight %}
19 |
20 | Ruby Code
21 | {% highlight ruby %}
22 | class KeychainPromotion
23 | def initialize(purchase_process)
24 | @purchase_process = purchase_process
25 | end
26 |
27 | def sign_up_for_mailing_list(customer)
28 | MailingList.add(customer)
29 | keychain = Product.find("promo-keychain")
30 | @purchase_process.purchase_product(customer,keychain)
31 | end
32 | end
33 | {% endhighlight %}
34 |
35 |
--------------------------------------------------------------------------------
/_posts/2014-04-04-styles.html:
--------------------------------------------------------------------------------
1 | ---
2 | title: Style Guide
3 | layout: posts
4 | author: Adam
5 | ---
6 |
7 | Header One
8 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
9 | Header Two
10 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
11 | Header Three
12 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
13 | Header Four
14 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
15 | Header Five
16 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
17 | Header Six
18 |
19 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
20 |
21 |
22 |
23 | List Item Number One
24 |
25 |
26 | List Item Number Two
27 |
28 |
29 | List Item Number Three
30 |
31 |
32 | List Item Number Four
33 |
34 |
35 | List Item Number Five
36 |
37 |
38 | List Item Number Six
39 |
40 |
41 | List Item Number Seven
42 |
43 |
44 | List Item Number Eight
45 |
46 |
47 |
48 |
49 | Test Term
50 | Test Description
51 | :e filename
52 | Open filename for edition
53 | Test term that is a bit longer than some of the others.
54 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
55 | What is reality
56 | Reality is that which, when you stop believing in it, doesn't go away.
57 | Test Term
58 | Test Description
59 | Test Term
60 | Test Description
61 | Test Term
62 | Test Description
63 | Test Term
64 | Test Description
65 | Test Term
66 | Test Description
67 | Test Term
68 | Test Description
69 | Test Term
70 | Test Description
71 |
72 |
--------------------------------------------------------------------------------
/_posts/2015-01-01-introducing-jkl.html:
--------------------------------------------------------------------------------
1 | ---
2 | title: JKL
3 | layout: posts
4 | author: MRMRS
5 | ---
6 |
7 |
8 | Introducing JKL - a lightweight boilerplate for creating a responsive Jekyll blog. Minimal styles focused on readability.
9 | You shouldn't have to do busy work to get going. After filling out a few small details in the config file, the only thing you need
10 | to do to start writing is...write. Start dropping markdown or html files into the posts directory, run Jekyll, and deploy.
11 |
12 |
13 | JKL is comprised of ~5kb of responsive type friendly CSS. No JS needed. When I say light, I mean light.
14 | It doesn't get much lighter than that.
15 |
16 |
17 | Typography is ace.
18 |
19 | Default body copy is set to 20px.
20 |
21 |
22 | Works on big desktops and small mobile phones.
23 |
24 |
25 |
--------------------------------------------------------------------------------
/_posts/2015-05-20-quote-post.html:
--------------------------------------------------------------------------------
1 | ---
2 | title: Photo Template
3 | layout: posts
4 | author: Adam
5 | ---
6 |
7 |
9 | A photo caption.
10 |
11 |
--------------------------------------------------------------------------------
/about/index.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | ---
4 |
5 |
6 |
7 |
8 | Content about the stuff.
9 |
10 |
12 |
13 |
--------------------------------------------------------------------------------
/archives/index.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | ---
4 |
5 |
6 | {% include _archives.html %}
7 |
8 |
--------------------------------------------------------------------------------
/css/i.css:
--------------------------------------------------------------------------------
1 | /* normalize.css v2.1.0 | MIT License | git.io/normalize */
2 | /* ==========================================================================
3 | HTML5 display definitions
4 | ========================================================================== */
5 | /**
6 | * Correct `block` display not defined in IE 8/9.
7 | */
8 | article,
9 | aside,
10 | details,
11 | figcaption,
12 | figure,
13 | footer,
14 | header,
15 | hgroup,
16 | main,
17 | nav,
18 | section,
19 | summary {
20 | display: block; }
21 |
22 | /**
23 | * Correct `inline-block` display not defined in IE 8/9.
24 | */
25 | audio,
26 | canvas,
27 | video {
28 | display: inline-block; }
29 |
30 | /**
31 | * Prevent modern browsers from displaying `audio` without controls.
32 | * Remove excess height in iOS 5 devices.
33 | */
34 | audio:not([controls]) {
35 | display: none;
36 | height: 0; }
37 |
38 | /**
39 | * Address styling not present in IE 8/9.
40 | */
41 | [hidden] {
42 | display: none; }
43 |
44 | /* ==========================================================================
45 | Base
46 | ========================================================================== */
47 | /**
48 | * 1. Prevent iOS text size adjust after orientation change, without disabling
49 | * user zoom.
50 | */
51 | html {
52 | font-family: serif;
53 | -webkit-text-size-adjust: 100%;
54 | /* 1 */
55 | -ms-text-size-adjust: 100%;
56 | /* 1 */ }
57 |
58 | /**
59 | * Remove default margin.
60 | */
61 | body {
62 | margin: 0; }
63 |
64 | /* ==========================================================================
65 | Links
66 | ========================================================================== */
67 | /**
68 | * Address `outline` inconsistency between Chrome and other browsers.
69 | */
70 | a:focus {
71 | outline: thin dotted; }
72 |
73 | /**
74 | * Improve readability when focused and also mouse hovered in all browsers.
75 | */
76 | a:active,
77 | a:hover {
78 | outline: 0; }
79 |
80 | /* ==========================================================================
81 | Typography
82 | ========================================================================== */
83 | /**
84 | * Address variable `h1` font-size and margin within `section` and `article`
85 | * contexts in Firefox 4+, Safari 5, and Chrome.
86 | */
87 | h1 {
88 | font-size: 2em;
89 | margin: 0.67em 0; }
90 |
91 | /**
92 | * Address styling not present in IE 8/9, Safari 5, and Chrome.
93 | */
94 | abbr[title] {
95 | border-bottom: 1px dotted; }
96 |
97 | /**
98 | * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
99 | */
100 | b,
101 | strong {
102 | font-weight: bold; }
103 |
104 | /**
105 | * Address styling not present in Safari 5 and Chrome.
106 | */
107 | dfn {
108 | font-style: italic; }
109 |
110 | /**
111 | * Address differences between Firefox and other browsers.
112 | */
113 | hr {
114 | -moz-box-sizing: content-box;
115 | box-sizing: content-box;
116 | height: 0; }
117 |
118 | /**
119 | * Address styling not present in IE 8/9.
120 | */
121 | mark {
122 | background: #ff0;
123 | color: #000; }
124 |
125 | /**
126 | * Correct font family set oddly in Safari 5 and Chrome.
127 | */
128 | code,
129 | kbd,
130 | pre,
131 | samp {
132 | font-family: monospace, serif;
133 | font-size: 1em; }
134 |
135 | /**
136 | * Improve readability of pre-formatted text in all browsers.
137 | */
138 | pre {
139 | white-space: pre-wrap; }
140 |
141 | /**
142 | * Set consistent quote types.
143 | */
144 | q {
145 | quotes: "\201C" "\201D" "\2018" "\2019"; }
146 |
147 | /**
148 | * Address inconsistent and variable font size in all browsers.
149 | */
150 | small {
151 | font-size: 80%; }
152 |
153 | /**
154 | * Prevent `sub` and `sup` affecting `line-height` in all browsers.
155 | */
156 | sub,
157 | sup {
158 | font-size: 75%;
159 | line-height: 0;
160 | position: relative;
161 | vertical-align: baseline; }
162 |
163 | sup {
164 | top: -0.5em; }
165 |
166 | sub {
167 | bottom: -0.25em; }
168 |
169 | /* ==========================================================================
170 | Embedded content
171 | ========================================================================== */
172 | /**
173 | * Remove border when inside `a` element in IE 8/9.
174 | */
175 | img {
176 | border: 0; }
177 |
178 | /**
179 | * Correct overflow displayed oddly in IE 9.
180 | */
181 | svg:not(:root) {
182 | overflow: hidden; }
183 |
184 | /* ==========================================================================
185 | Figures
186 | ========================================================================== */
187 | /**
188 | * Address margin not present in IE 8/9 and Safari 5.
189 | */
190 | figure {
191 | margin: 0; }
192 |
193 | /* ==========================================================================
194 | Forms
195 | ========================================================================== */
196 | /**
197 | * Define consistent border, margin, and padding.
198 | */
199 | fieldset {
200 | border: 1px solid silver;
201 | margin: 0 2px;
202 | padding: 0.35em 0.625em 0.75em; }
203 |
204 | /**
205 | * 1. Correct `color` not being inherited in IE 8/9.
206 | * 2. Remove padding so people aren't caught out if they zero out fieldsets.
207 | */
208 | legend {
209 | border: 0;
210 | /* 1 */
211 | padding: 0;
212 | /* 2 */ }
213 |
214 | /**
215 | * 1. Correct font family not being inherited in all browsers.
216 | * 2. Correct font size not being inherited in all browsers.
217 | * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
218 | */
219 | button,
220 | input,
221 | select,
222 | textarea {
223 | font-family: inherit;
224 | /* 1 */
225 | font-size: 100%;
226 | /* 2 */
227 | margin: 0;
228 | /* 3 */ }
229 |
230 | /**
231 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in
232 | * the UA stylesheet.
233 | */
234 | button,
235 | input {
236 | line-height: normal; }
237 |
238 | /**
239 | * Address inconsistent `text-transform` inheritance for `button` and `select`.
240 | * All other form control elements do not inherit `text-transform` values.
241 | * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
242 | * Correct `select` style inheritance in Firefox 4+ and Opera.
243 | */
244 | button,
245 | select {
246 | text-transform: none; }
247 |
248 | /**
249 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
250 | * and `video` controls.
251 | * 2. Correct inability to style clickable `input` types in iOS.
252 | * 3. Improve usability and consistency of cursor style between image-type
253 | * `input` and others.
254 | */
255 | button,
256 | html input[type="button"],
257 | input[type="reset"],
258 | input[type="submit"] {
259 | -webkit-appearance: button;
260 | /* 2 */
261 | cursor: pointer;
262 | /* 3 */ }
263 |
264 | /**
265 | * Re-set default cursor for disabled elements.
266 | */
267 | button[disabled],
268 | html input[disabled] {
269 | cursor: default; }
270 |
271 | /**
272 | * 1. Address box sizing set to `content-box` in IE 8/9.
273 | * 2. Remove excess padding in IE 8/9.
274 | */
275 | input[type="checkbox"],
276 | input[type="radio"] {
277 | box-sizing: border-box;
278 | /* 1 */
279 | padding: 0;
280 | /* 2 */ }
281 |
282 | /**
283 | * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
284 | * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
285 | * (include `-moz` to future-proof).
286 | */
287 | input[type="search"] {
288 | -webkit-appearance: textfield;
289 | /* 1 */
290 | -moz-box-sizing: content-box;
291 | -webkit-box-sizing: content-box;
292 | /* 2 */
293 | box-sizing: content-box; }
294 |
295 | /**
296 | * Remove inner padding and search cancel button in Safari 5 and Chrome
297 | * on OS X.
298 | */
299 | input[type="search"]::-webkit-search-cancel-button,
300 | input[type="search"]::-webkit-search-decoration {
301 | -webkit-appearance: none; }
302 |
303 | /**
304 | * Remove inner padding and border in Firefox 4+.
305 | */
306 | button::-moz-focus-inner,
307 | input::-moz-focus-inner {
308 | border: 0;
309 | padding: 0; }
310 |
311 | /**
312 | * 1. Remove default vertical scrollbar in IE 8/9.
313 | * 2. Improve readability and alignment in all browsers.
314 | */
315 | textarea {
316 | overflow: auto;
317 | /* 1 */
318 | vertical-align: top;
319 | /* 2 */ }
320 |
321 | /* ==========================================================================
322 | Tables
323 | ========================================================================== */
324 | /**
325 | * Remove most spacing between table cells.
326 | */
327 | table {
328 | border-collapse: collapse;
329 | border-spacing: 0; }
330 |
331 | /* ==========================================================================
332 | More Reset than Normalize
333 | ========================================================================== */
334 | ol, ul {
335 | list-style-type: none;
336 | margin: 1em 0;
337 | padding: 0; }
338 |
339 | /* ==========================================================================
340 | Better Box Model
341 | ========================================================================== */
342 | * {
343 | -moz-box-sizing: border-box;
344 | -webkit-box-sizing: border-box;
345 | box-sizing: border-box; }
346 |
347 | /*
348 | $primary-color:;
349 | $secondary-color:;
350 | $tertiary-color:;
351 |
352 | $padding:;
353 | $margin:;
354 |
355 | */
356 | .single-column {
357 | margin: 0 auto;
358 | padding: 1em;
359 | width: 100%;
360 | max-width: 768px!important; }
361 |
362 | h1, h2, h3, h4, h5, h6 {
363 | font-weight: 100; }
364 |
365 | h1, .h2, .h3, .h4, .h5, .h6 {
366 | margin-bottom: .25em; }
367 |
368 | h1, .h1 {
369 | font-size: 128px; }
370 |
371 | h2, .h2 {
372 | font-size: 64px; }
373 |
374 | h3, .h3 {
375 | font-size: 32px; }
376 |
377 | h4, .h4 {
378 | font-size: 20px;
379 | font-weight: 900; }
380 |
381 | h5, .h5 {
382 | font-size: 20px;
383 | font-style: italic; }
384 |
385 | h6, .h6 {
386 | font-size: 12px; }
387 |
388 | p {
389 | font-size: 20px;
390 | line-height: 1.5; }
391 | p + p {
392 | margin-top: 1em; }
393 |
394 | .intro {
395 | font-size: 32px; }
396 |
397 | .post h1 {
398 | font-size: 64px; }
399 | @media screen and (min-width: 100px) and (max-width: 479px) {
400 | .post h1 {
401 | font-size: 32px; } }
402 | .post footer {
403 | color: #eeeeee; }
404 |
405 | @media screen and (min-width: 100px) and (max-width: 479px) {
406 | .h1-r {
407 | font-size: 64px; } }
408 |
409 | .meta {
410 | font-size: 12px; }
411 |
412 | .ct {
413 | text-align: center; }
414 | @media screen and (min-width: 100px) and (max-width: 479px) {
415 | .ct {
416 | text-align: left; } }
417 |
418 | blockquote {
419 | padding: 1em 0 1.75em 0;
420 | font-style: italic; }
421 | blockquote p {
422 | font-size: 32px; }
423 | blockquote footer, blockquote footer a {
424 | font-size: 20px;
425 | line-height: 2;
426 | text-decoration: none;
427 | color: #999; }
428 |
429 | em {
430 | font-style: italic; }
431 |
432 | .bump-it {
433 | font-size: 32px;
434 | margin-bottom: 1em; }
435 |
436 | .author {
437 | text-transform: uppercase; }
438 |
439 | date {
440 | color: #777777; }
441 |
442 | .bb {
443 | border-bottom: 1px dotted #eeeeee; }
444 |
445 | .large-list {
446 | font-size: 20px; }
447 | .large-list li {
448 | border-top: 1px solid #eeeeee; }
449 | .large-list a {
450 | display: block;
451 | padding: 1em 0;
452 | color: #222222;
453 | line-height: 1.5;
454 | text-decoration: none; }
455 | .large-list a:hover, .large-list a:active {
456 | color: #ff5335; }
457 | .large-list a:hover .meta, .large-list a:active .meta {
458 | color: #ff5335; }
459 | .large-list a .meta {
460 | display: block; }
461 |
462 | .post ul, .post dl {
463 | line-height: 1.618;
464 | font-size: 20px;
465 | margin-bottom: 1em; }
466 | .post dt {
467 | font-weight: bold; }
468 | .post dd {
469 | margin-bottom: .5em;
470 | color: #777777; }
471 | .post ul {
472 | list-style-type: disc;
473 | margin-left: 1em; }
474 |
475 | a {
476 | text-decoration: none; }
477 |
478 | nav[role="navigation"] li,
479 | ul.social li {
480 | display: inline-block;
481 | font-size: 20px; }
482 | nav[role="navigation"] li:last-child,
483 | ul.social li:last-child {
484 | border-right: none; }
485 | nav[role="navigation"] li a,
486 | ul.social li a {
487 | font-weight: 100;
488 | color: #777777;
489 | display: block;
490 | padding-right: 1em;
491 | text-decoration: none; }
492 | nav[role="navigation"] li a:hover, nav[role="navigation"] li a:focus,
493 | ul.social li a:hover,
494 | ul.social li a:focus {
495 | color: #ff5335; }
496 | nav[role="navigation"] li a:active,
497 | ul.social li a:active {
498 | color: #666; }
499 |
500 | .horizontal li {
501 | display: inline-block; }
502 | .horizontal li a {
503 | padding: 0.5em 1em;
504 | border-radius: 4px;
505 | background: #eee;
506 | outline: 1px solid #e3e3e3;
507 | text-decoration: none; }
508 |
509 | .row {
510 | padding: 2em 0; }
511 |
512 | .mt-1 {
513 | margin-top: 1em; }
514 |
515 | .mt-2 {
516 | margin-top: 2em; }
517 |
518 | .mt-4 {
519 | margin-top: 8em; }
520 |
521 | img {
522 | width: 100%;
523 | margin: 1em 0; }
524 |
525 | .hll {
526 | background-color: #333333; }
527 |
528 | .c {
529 | color: #008800;
530 | font-style: italic;
531 | background-color: #0f140f; }
532 |
533 | /* Comment */
534 | .err {
535 | color: white; }
536 |
537 | /* Error */
538 | .g {
539 | color: white; }
540 |
541 | /* Generic */
542 | .k {
543 | color: #fb660a;
544 | font-weight: bold; }
545 |
546 | /* Keyword */
547 | .l {
548 | color: white; }
549 |
550 | /* Literal */
551 | .n {
552 | color: white; }
553 |
554 | /* Name */
555 | .o {
556 | color: white; }
557 |
558 | /* Operator */
559 | .x {
560 | color: white; }
561 |
562 | /* Other */
563 | .p {
564 | color: white; }
565 |
566 | /* Punctuation */
567 | .cm {
568 | color: #008800;
569 | font-style: italic;
570 | background-color: #0f140f; }
571 |
572 | /* Comment.Multiline */
573 | .cp {
574 | color: #ff0007;
575 | font-weight: bold;
576 | font-style: italic;
577 | background-color: #0f140f; }
578 |
579 | /* Comment.Preproc */
580 | .c1 {
581 | color: #008800;
582 | font-style: italic;
583 | background-color: #0f140f; }
584 |
585 | /* Comment.Single */
586 | .cs {
587 | color: #008800;
588 | font-style: italic;
589 | background-color: #0f140f; }
590 |
591 | /* Comment.Special */
592 | .gd {
593 | color: white; }
594 |
595 | /* Generic.Deleted */
596 | .ge {
597 | color: white; }
598 |
599 | /* Generic.Emph */
600 | .gr {
601 | color: white; }
602 |
603 | /* Generic.Error */
604 | .gh {
605 | color: #ffffff;
606 | font-weight: bold; }
607 |
608 | /* Generic.Heading */
609 | .gi {
610 | color: white; }
611 |
612 | /* Generic.Inserted */
613 | .go {
614 | color: #444444;
615 | background-color: #222222; }
616 |
617 | /* Generic.Output */
618 | .gp {
619 | color: white; }
620 |
621 | /* Generic.Prompt */
622 | .gs {
623 | color: white; }
624 |
625 | /* Generic.Strong */
626 | .gu {
627 | color: #ffffff;
628 | font-weight: bold; }
629 |
630 | /* Generic.Subheading */
631 | .gt {
632 | color: white; }
633 |
634 | /* Generic.Traceback */
635 | .kc {
636 | color: #fb660a;
637 | font-weight: bold; }
638 |
639 | /* Keyword.Constant */
640 | .kd {
641 | color: #fb660a;
642 | font-weight: bold; }
643 |
644 | /* Keyword.Declaration */
645 | .kn {
646 | color: #fb660a;
647 | font-weight: bold; }
648 |
649 | /* Keyword.Namespace */
650 | .kp {
651 | color: #fb660a; }
652 |
653 | /* Keyword.Pseudo */
654 | .kr {
655 | color: #fb660a;
656 | font-weight: bold; }
657 |
658 | /* Keyword.Reserved */
659 | .kt {
660 | color: #cdcaa9;
661 | font-weight: bold; }
662 |
663 | /* Keyword.Type */
664 | .ld {
665 | color: white; }
666 |
667 | /* Literal.Date */
668 | .m {
669 | color: #0086f7;
670 | font-weight: bold; }
671 |
672 | /* Literal.Number */
673 | .s {
674 | color: #0086d2; }
675 |
676 | /* Literal.String */
677 | .na {
678 | color: #ff0086;
679 | font-weight: bold; }
680 |
681 | /* Name.Attribute */
682 | .nb {
683 | color: white; }
684 |
685 | /* Name.Builtin */
686 | .nc {
687 | color: white; }
688 |
689 | /* Name.Class */
690 | .no {
691 | color: #0086d2; }
692 |
693 | /* Name.Constant */
694 | .nd {
695 | color: white; }
696 |
697 | /* Name.Decorator */
698 | .ni {
699 | color: white; }
700 |
701 | /* Name.Entity */
702 | .ne {
703 | color: white; }
704 |
705 | /* Name.Exception */
706 | .nf {
707 | color: #ff0086;
708 | font-weight: bold; }
709 |
710 | /* Name.Function */
711 | .nl {
712 | color: white; }
713 |
714 | /* Name.Label */
715 | .nn {
716 | color: white; }
717 |
718 | /* Name.Namespace */
719 | .nx {
720 | color: white; }
721 |
722 | /* Name.Other */
723 | .py {
724 | color: white; }
725 |
726 | /* Name.Property */
727 | .nt {
728 | color: #fb660a;
729 | font-weight: bold; }
730 |
731 | /* Name.Tag */
732 | .nv {
733 | color: #fb660a; }
734 |
735 | /* Name.Variable */
736 | .ow {
737 | color: white; }
738 |
739 | /* Operator.Word */
740 | .w {
741 | color: #888888; }
742 |
743 | /* Text.Whitespace */
744 | .mf {
745 | color: #0086f7;
746 | font-weight: bold; }
747 |
748 | /* Literal.Number.Float */
749 | .mh {
750 | color: #0086f7;
751 | font-weight: bold; }
752 |
753 | /* Literal.Number.Hex */
754 | .mi {
755 | color: #0086f7;
756 | font-weight: bold; }
757 |
758 | /* Literal.Number.Integer */
759 | .mo {
760 | color: #0086f7;
761 | font-weight: bold; }
762 |
763 | /* Literal.Number.Oct */
764 | .sb {
765 | color: #0086d2; }
766 |
767 | /* Literal.String.Backtick */
768 | .sc {
769 | color: #0086d2; }
770 |
771 | /* Literal.String.Char */
772 | .sd {
773 | color: #0086d2; }
774 |
775 | /* Literal.String.Doc */
776 | .s2 {
777 | color: #0086d2; }
778 |
779 | /* Literal.String.Double */
780 | .se {
781 | color: #0086d2; }
782 |
783 | /* Literal.String.Escape */
784 | .sh {
785 | color: #0086d2; }
786 |
787 | /* Literal.String.Heredoc */
788 | .si {
789 | color: #0086d2; }
790 |
791 | /* Literal.String.Interpol */
792 | .sx {
793 | color: #0086d2; }
794 |
795 | /* Literal.String.Other */
796 | .sr {
797 | color: #0086d2; }
798 |
799 | /* Literal.String.Regex */
800 | .s1 {
801 | color: #0086d2; }
802 |
803 | /* Literal.String.Single */
804 | .ss {
805 | color: #0086d2; }
806 |
807 | /* Literal.String.Symbol */
808 | .bp {
809 | color: white; }
810 |
811 | /* Name.Builtin.Pseudo */
812 | .vc {
813 | color: #fb660a; }
814 |
815 | /* Name.Variable.Class */
816 | .vg {
817 | color: #fb660a; }
818 |
819 | /* Name.Variable.Global */
820 | .vi {
821 | color: #fb660a; }
822 |
823 | /* Name.Variable.Instance */
824 | .il {
825 | color: #0086f7;
826 | font-weight: bold; }
827 |
828 | /* Literal.Number.Integer.Long */
829 | code {
830 | background: #222222;
831 | -webkit-border-radius: 3px;
832 | -moz-border-radius: 3px;
833 | border-radius: 3px;
834 | display: block;
835 | font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
836 | font-size: 14px;
837 | line-height: 1.4;
838 | letter-spacing: 0.1em;
839 | margin: 1em 0;
840 | overflow: scroll;
841 | padding: 1em; }
842 | @media screen and (min-width: 100px) and (max-width: 479px) {
843 | code {
844 | padding: 1em 0.2em; } }
845 |
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | // Gulp tasks for JKL Tachyons
2 |
3 | // Load plugins
4 | var gulp = require('gulp'),
5 | gutil = require('gulp-util'),
6 | basswork = require('gulp-basswork'),
7 | watch = require('gulp-watch'),
8 | prefix = require('gulp-autoprefixer'),
9 | //uncss = require('gulp-uncss'),
10 | minifyCSS = require('gulp-minify-css'),
11 | //sass = require('gulp-sass'),
12 | size = require('gulp-size'),
13 | rename = require('gulp-rename'),
14 | csslint = require('gulp-csslint'),
15 | css = require('css'),
16 | browserSync = require('browser-sync'),
17 | browserReload = browserSync.reload;
18 |
19 | gulp.task('css', function() {
20 | gulp.src('./src/jkl-tachyons.css')
21 | .pipe(basswork())
22 | .pipe(size({gzip: false, showFiles: true, title:'basswork css'}))
23 | .pipe(size({gzip: true, showFiles: true, title:'basswork gzipped css'}))
24 | .pipe(gulp.dest('./css'))
25 | .pipe(minifyCSS())
26 | .pipe(rename({ extname: '.min.css' }))
27 | .pipe(size({gzip: false, showFiles: true, title:'basswork minified'}))
28 | .pipe(size({gzip: true, showFiles: true, title:'basswork minified'}))
29 | .pipe(gulp.dest('./css'));
30 | });
31 |
32 | // Initialize browser-sync which starts a static server also allows for
33 | // browsers to reload on filesave
34 | gulp.task('browser-sync', function() {
35 | browserSync.init(null, {
36 | server: {
37 | baseDir: "./_site/"
38 | }
39 | });
40 | });
41 |
42 | // Function to call for reloading browsers
43 | gulp.task('bs-reload', function () {
44 | browserSync.reload();
45 | });
46 |
47 | /*
48 | DEFAULT TASK
49 |
50 | • Process sass then auto-prefixes and lints outputted css
51 | • Starts a server on port 3000
52 | • Reloads browsers when you change html or sass files
53 |
54 | */
55 | gulp.task('default', ['css', 'bs-reload', 'browser-sync'], function(){
56 | gulp.start(['css', 'bs-reload']);
57 | gulp.watch('src/*', ['css']);
58 | gulp.watch(['*.html', './**/*.html'], ['bs-reload']);
59 | });
60 |
61 |
--------------------------------------------------------------------------------
/img/city.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tachyons-css/jekyll-tachyons/d59b06956b19602ad57780ce0b11293c62945719/img/city.jpg
--------------------------------------------------------------------------------
/img/jkl.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tachyons-css/jekyll-tachyons/d59b06956b19602ad57780ce0b11293c62945719/img/jkl.jpg
--------------------------------------------------------------------------------
/img/photo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tachyons-css/jekyll-tachyons/d59b06956b19602ad57780ce0b11293c62945719/img/photo.jpg
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | ---
4 |
5 |
6 |
7 | {% for post in site.posts limit: 1 %}
8 | {{ post.title }}
9 | {{ post.content }}
10 | {% endfor %}
11 |
12 |
13 |
14 |
26 | ...
27 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "jkl-tachyons",
3 | "version": "1.1.0",
4 | "description": "Boilerplate for starting a project with Jekyll and Tachyons",
5 | "main": "index.html",
6 | "repository": {
7 | "type": "git",
8 | "url": "git://github.com/mrmrs/jkl-tachyons.git"
9 | },
10 | "keywords": [
11 | "css",
12 | "sass",
13 | "oocss",
14 | "performance"
15 | ],
16 | "author": "mrmrs",
17 | "license": "MIT",
18 | "bugs": {
19 | "url": "https://github.com/mrmrs/tachyons/issues"
20 | },
21 | "devDependencies": {
22 | "browser-sync": "^1.1.1",
23 | "copy-files": "^0.1.0",
24 | "immutable-css-cli": "^1.1.1",
25 | "tachyons-cli": "^1.0.8",
26 | "watch": "^0.19.2"
27 | },
28 | "contributors": [
29 | {
30 | "name": "adam morse",
31 | "email": "hi@mrmrs.cc"
32 | }
33 | ],
34 | "scripts": {
35 | "start": "npm run build:watch",
36 | "mutations": "immutable-css src/tachyons.css --strict",
37 | "build": "npm run build:css && npm run build:minify",
38 | "build:css": "tachyons src/tachyons.css > css/tachyons.css",
39 | "build:minify": "tachyons src/tachyons.css -m > css/tachyons.min.css",
40 | "build:watch": "watch 'npm run build' ./src/"
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/src/_aspect-ratios.css:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | ASPECT RATIOS
4 |
5 | */
6 |
7 | /* This is for fluid media that is embedded from third party sites like youtube, vimeo etc.
8 | * Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e
9 | * Make sure there are no height and width attributes on the embedded media.
10 | * Adapted from: https://github.com/suitcss/components-flex-embed
11 | *
12 | * Example:
13 | *
14 | *
15 | *
16 | *
17 | *
18 | * */
19 |
20 | .aspect-ratio {
21 | height: 0;
22 | position: relative;
23 | }
24 |
25 | .aspect-ratio--16x9 { padding-bottom: 56.25%; }
26 | .aspect-ratio--9x16 { padding-bottom: 177.77%; }
27 |
28 | .aspect-ratio--4x3 { padding-bottom: 75%; }
29 | .aspect-ratio--3x4 { padding-bottom: 133.33%; }
30 |
31 | .aspect-ratio--6x4 { padding-bottom: 66.6%; }
32 | .aspect-ratio--4x6 { padding-bottom: 150%; }
33 |
34 | .aspect-ratio--8x5 { padding-bottom: 62.5%; }
35 | .aspect-ratio--5x8 { padding-bottom: 160%; }
36 |
37 | .aspect-ratio--7x5 { padding-bottom: 71.42%; }
38 | .aspect-ratio--5x7 { padding-bottom: 140%; }
39 |
40 | .aspect-ratio--1x1 { padding-bottom: 100%; }
41 |
42 | .aspect-ratio--object {
43 | position: absolute;
44 | top: 0;
45 | right: 0;
46 | bottom: 0;
47 | left: 0;
48 | width: 100%;
49 | height: 100%;
50 | z-index: 100;
51 | }
52 |
53 | @media (--breakpoint-not-small){
54 | .aspect-ratio-ns {
55 | height: 0;
56 | position: relative;
57 | }
58 | .aspect-ratio--16x9-ns { padding-bottom: 56.25%; }
59 | .aspect-ratio--9x16-ns { padding-bottom: 177.77%; }
60 | .aspect-ratio--4x3-ns { padding-bottom: 75%; }
61 | .aspect-ratio--3x4-ns { padding-bottom: 133.33%; }
62 | .aspect-ratio--6x4-ns { padding-bottom: 66.6%; }
63 | .aspect-ratio--4x6-ns { padding-bottom: 150%; }
64 | .aspect-ratio--8x5-ns { padding-bottom: 62.5%; }
65 | .aspect-ratio--5x8-ns { padding-bottom: 160%; }
66 | .aspect-ratio--7x5-ns { padding-bottom: 71.42%; }
67 | .aspect-ratio--5x7-ns { padding-bottom: 140%; }
68 | .aspect-ratio--1x1-ns { padding-bottom: 100%; }
69 | .aspect-ratio--object-ns {
70 | position: absolute;
71 | top: 0;
72 | right: 0;
73 | bottom: 0;
74 | left: 0;
75 | width: 100%;
76 | height: 100%;
77 | z-index: 100;
78 | }
79 | }
80 |
81 | @media (--breakpoint-medium){
82 | .aspect-ratio-m {
83 | height: 0;
84 | position: relative;
85 | }
86 | .aspect-ratio--16x9-m { padding-bottom: 56.25%; }
87 | .aspect-ratio--9x16-m { padding-bottom: 177.77%; }
88 | .aspect-ratio--4x3-m { padding-bottom: 75%; }
89 | .aspect-ratio--3x4-m { padding-bottom: 133.33%; }
90 | .aspect-ratio--6x4-m { padding-bottom: 66.6%; }
91 | .aspect-ratio--4x6-m { padding-bottom: 150%; }
92 | .aspect-ratio--8x5-m { padding-bottom: 62.5%; }
93 | .aspect-ratio--5x8-m { padding-bottom: 160%; }
94 | .aspect-ratio--7x5-m { padding-bottom: 71.42%; }
95 | .aspect-ratio--5x7-m { padding-bottom: 140%; }
96 | .aspect-ratio--1x1-m { padding-bottom: 100%; }
97 | .aspect-ratio--object-m {
98 | position: absolute;
99 | top: 0;
100 | right: 0;
101 | bottom: 0;
102 | left: 0;
103 | width: 100%;
104 | height: 100%;
105 | z-index: 100;
106 | }
107 | }
108 |
109 | @media (--breakpoint-large){
110 | .aspect-ratio-l {
111 | height: 0;
112 | position: relative;
113 | }
114 | .aspect-ratio--16x9-l { padding-bottom: 56.25%; }
115 | .aspect-ratio--9x16-l { padding-bottom: 177.77%; }
116 | .aspect-ratio--4x3-l { padding-bottom: 75%; }
117 | .aspect-ratio--3x4-l { padding-bottom: 133.33%; }
118 | .aspect-ratio--6x4-l { padding-bottom: 66.6%; }
119 | .aspect-ratio--4x6-l { padding-bottom: 150%; }
120 | .aspect-ratio--8x5-l { padding-bottom: 62.5%; }
121 | .aspect-ratio--5x8-l { padding-bottom: 160%; }
122 | .aspect-ratio--7x5-l { padding-bottom: 71.42%; }
123 | .aspect-ratio--5x7-l { padding-bottom: 140%; }
124 | .aspect-ratio--1x1-l { padding-bottom: 100%; }
125 | .aspect-ratio--object-l {
126 | position: absolute;
127 | top: 0;
128 | right: 0;
129 | bottom: 0;
130 | left: 0;
131 | width: 100%;
132 | height: 100%;
133 | z-index: 100;
134 | }
135 | }
136 |
--------------------------------------------------------------------------------
/src/_background-position.css:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | BACKGROUND POSITION
4 |
5 | Base:
6 | bg = background
7 |
8 | Modifiers:
9 | -center = center center
10 | -top = top center
11 | -right = center right
12 | -bottom = bottom center
13 | -left = center left
14 |
15 | Media Query Extensions:
16 | -ns = not-small
17 | -m = medium
18 | -l = large
19 |
20 | */
21 |
22 | .bg-center {
23 | background-repeat: no-repeat;
24 | background-position: center center;
25 | }
26 |
27 | .bg-top {
28 | background-repeat: no-repeat;
29 | background-position: top center;
30 | }
31 |
32 | .bg-right {
33 | background-repeat: no-repeat;
34 | background-position: center right;
35 | }
36 |
37 | .bg-bottom {
38 | background-repeat: no-repeat;
39 | background-position: bottom center;
40 | }
41 |
42 | .bg-left {
43 | background-repeat: no-repeat;
44 | background-position: center left;
45 | }
46 |
47 | @media (--breakpoint-not-small) {
48 | .bg-center-ns {
49 | background-repeat: no-repeat;
50 | background-position: center center;
51 | }
52 |
53 | .bg-top-ns {
54 | background-repeat: no-repeat;
55 | background-position: top center;
56 | }
57 |
58 | .bg-right-ns {
59 | background-repeat: no-repeat;
60 | background-position: center right;
61 | }
62 |
63 | .bg-bottom-ns {
64 | background-repeat: no-repeat;
65 | background-position: bottom center;
66 | }
67 |
68 | .bg-left-ns {
69 | background-repeat: no-repeat;
70 | background-position: center left;
71 | }
72 | }
73 |
74 | @media (--breakpoint-medium) {
75 | .bg-center-m {
76 | background-repeat: no-repeat;
77 | background-position: center center;
78 | }
79 |
80 | .bg-top-m {
81 | background-repeat: no-repeat;
82 | background-position: top center;
83 | }
84 |
85 | .bg-right-m {
86 | background-repeat: no-repeat;
87 | background-position: center right;
88 | }
89 |
90 | .bg-bottom-m {
91 | background-repeat: no-repeat;
92 | background-position: bottom center;
93 | }
94 |
95 | .bg-left-m {
96 | background-repeat: no-repeat;
97 | background-position: center left;
98 | }
99 | }
100 |
101 | @media (--breakpoint-large) {
102 | .bg-center-l {
103 | background-repeat: no-repeat;
104 | background-position: center center;
105 | }
106 |
107 | .bg-top-l {
108 | background-repeat: no-repeat;
109 | background-position: top center;
110 | }
111 |
112 | .bg-right-l {
113 | background-repeat: no-repeat;
114 | background-position: center right;
115 | }
116 |
117 | .bg-bottom-l {
118 | background-repeat: no-repeat;
119 | background-position: bottom center;
120 | }
121 |
122 | .bg-left-l {
123 | background-repeat: no-repeat;
124 | background-position: center left;
125 | }
126 | }
127 |
--------------------------------------------------------------------------------
/src/_background-size.css:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | BACKGROUND SIZE
4 | Docs: http://tachyons.io/docs/themes/background-size/
5 |
6 | Media Query Extensions:
7 | -ns = not-small
8 | -m = medium
9 | -l = large
10 |
11 | */
12 |
13 | /*
14 | Often used in combination with background image set as an inline style
15 | on an html element.
16 | */
17 |
18 | .cover { background-size: cover!important; }
19 | .contain { background-size: contain!important; }
20 |
21 | @media (--breakpoint-not-small) {
22 | .cover-ns { background-size: cover!important; }
23 | .contain-ns { background-size: contain!important; }
24 | }
25 |
26 | @media (--breakpoint-medium) {
27 | .cover-m { background-size: cover!important; }
28 | .contain-m { background-size: contain!important; }
29 | }
30 |
31 | @media (--breakpoint-large) {
32 | .cover-l { background-size: cover!important; }
33 | .contain-l { background-size: contain!important; }
34 | }
35 |
--------------------------------------------------------------------------------
/src/_base.css:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | height: 100%;
4 | }
5 |
--------------------------------------------------------------------------------
/src/_border-colors.css:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | BORDER COLORS
4 | Docs: http://tachyons.io/docs/themes/borders/
5 |
6 | Border colors can be used to extend the base
7 | border classes ba,bt,bb,br,bl found in the _borders.css file.
8 |
9 | The base border class by default will set the color of the border
10 | to that of the current text color. These classes are for the cases
11 | where you desire for the text and border colors to be different.
12 |
13 | Base:
14 | b = border
15 |
16 | Modifiers:
17 | --color-name = each color variable name is also a border color name
18 |
19 | */
20 |
21 | .b--black { border-color: var(--black); }
22 | .b--near-black { border-color: var(--near-black); }
23 | .b--dark-gray { border-color: var(--dark-gray); }
24 | .b--mid-gray { border-color: var(--mid-gray); }
25 | .b--gray { border-color: var(--gray); }
26 | .b--silver { border-color: var(--silver); }
27 | .b--light-silver { border-color: var(--light-silver); }
28 | .b--light-gray { border-color: var(--light-gray); }
29 | .b--near-white { border-color: var(--near-white); }
30 | .b--white { border-color: var(--white); }
31 |
32 | .b--white-90 { border-color: var(--white-90); }
33 | .b--white-80 { border-color: var(--white-80); }
34 | .b--white-70 { border-color: var(--white-70); }
35 | .b--white-60 { border-color: var(--white-60); }
36 | .b--white-50 { border-color: var(--white-50); }
37 | .b--white-40 { border-color: var(--white-40); }
38 | .b--white-30 { border-color: var(--white-30); }
39 | .b--white-20 { border-color: var(--white-20); }
40 | .b--white-10 { border-color: var(--white-10); }
41 | .b--white-05 { border-color: var(--white-05); }
42 | .b--white-025 { border-color: var(--white-025); }
43 | .b--white-0125 { border-color: var(--white-0125); }
44 |
45 | .b--black-90 { border-color: var(--black-90); }
46 | .b--black-80 { border-color: var(--black-80); }
47 | .b--black-70 { border-color: var(--black-70); }
48 | .b--black-60 { border-color: var(--black-60); }
49 | .b--black-50 { border-color: var(--black-50); }
50 | .b--black-40 { border-color: var(--black-40); }
51 | .b--black-30 { border-color: var(--black-30); }
52 | .b--black-20 { border-color: var(--black-20); }
53 | .b--black-10 { border-color: var(--black-10); }
54 | .b--black-05 { border-color: var(--black-05); }
55 | .b--black-025 { border-color: var(--black-025); }
56 | .b--black-0125 { border-color: var(--black-0125); }
57 |
58 | .b--dark-red { border-color: var(--dark-red); }
59 | .b--red { border-color: var(--red); }
60 | .b--light-red { border-color: var(--light-red); }
61 | .b--orange { border-color: var(--orange); }
62 | .b--gold { border-color: var(--gold); }
63 | .b--yellow { border-color: var(--yellow); }
64 | .b--light-yellow { border-color: var(--light-yellow); }
65 | .b--purple { border-color: var(--purple); }
66 | .b--light-purple { border-color: var(--light-purple); }
67 | .b--dark-pink { border-color: var(--dark-pink); }
68 | .b--hot-pink { border-color: var(--hot-pink); }
69 | .b--pink { border-color: var(--pink); }
70 | .b--light-pink { border-color: var(--light-pink); }
71 | .b--dark-green { border-color: var(--dark-green); }
72 | .b--green { border-color: var(--green); }
73 | .b--light-green { border-color: var(--light-green); }
74 | .b--navy { border-color: var(--navy); }
75 | .b--dark-blue { border-color: var(--dark-blue); }
76 | .b--blue { border-color: var(--blue); }
77 | .b--light-blue { border-color: var(--light-blue); }
78 | .b--lightest-blue { border-color: var(--lightest-blue); }
79 | .b--washed-blue { border-color: var(--washed-blue); }
80 | .b--washed-green { border-color: var(--washed-green); }
81 | .b--washed-yellow { border-color: var(--washed-yellow); }
82 | .b--washed-red { border-color: var(--washed-red); }
83 |
84 | .b--transparent { border-color: var(--transparent); }
85 |
--------------------------------------------------------------------------------
/src/_border-radius.css:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | BORDER RADIUS
4 | Docs: http://tachyons.io/docs/themes/border-radius/
5 |
6 | Base:
7 | br = border-radius
8 |
9 | Modifiers:
10 | 0 = 0/none
11 | 1 = 1st step in scale
12 | 2 = 2nd step in scale
13 | 3 = 3rd step in scale
14 | 4 = 4th step in scale
15 |
16 | Literal values:
17 | -100 = 100%
18 | -pill = 9999px
19 |
20 | Media Query Extensions:
21 | -ns = not-small
22 | -m = medium
23 | -l = large
24 |
25 | */
26 |
27 | .br0 { border-radius: 0; }
28 | .br1 { border-radius: .125rem; }
29 | .br2 { border-radius: .25rem; }
30 | .br3 { border-radius: .5rem; }
31 | .br4 { border-radius: 1rem; }
32 | .br-100 { border-radius: 100%; }
33 | .br-pill { border-radius: 9999px; }
34 | .br--bottom {
35 | border-top-left-radius: 0;
36 | border-top-right-radius: 0;
37 | }
38 | .br--top {
39 | border-bottom-left-radius: 0;
40 | border-bottom-right-radius: 0;
41 | }
42 | .br--right {
43 | border-top-left-radius: 0;
44 | border-bottom-left-radius: 0;
45 | }
46 | .br--left {
47 | border-top-right-radius: 0;
48 | border-bottom-right-radius: 0;
49 | }
50 |
51 | @media (--breakpoint-not-small) {
52 | .br0-ns { border-radius: 0; }
53 | .br1-ns { border-radius: .125rem; }
54 | .br2-ns { border-radius: .25rem; }
55 | .br3-ns { border-radius: .5rem; }
56 | .br4-ns { border-radius: 1rem; }
57 | .br-100-ns { border-radius: 100%; }
58 | .br-pill-ns { border-radius: 9999px; }
59 | .br--bottom-ns {
60 | border-top-left-radius: 0;
61 | border-top-right-radius: 0;
62 | }
63 | .br--top-ns {
64 | border-bottom-left-radius: 0;
65 | border-bottom-right-radius: 0;
66 | }
67 | .br--right-ns {
68 | border-top-left-radius: 0;
69 | border-bottom-left-radius: 0;
70 | }
71 | .br--left-ns {
72 | border-top-right-radius: 0;
73 | border-bottom-right-radius: 0;
74 | }
75 | }
76 |
77 | @media (--breakpoint-medium) {
78 | .br0-m { border-radius: 0; }
79 | .br1-m { border-radius: .125rem; }
80 | .br2-m { border-radius: .25rem; }
81 | .br3-m { border-radius: .5rem; }
82 | .br4-m { border-radius: 1rem; }
83 | .br-100-m { border-radius: 100%; }
84 | .br-pill-m { border-radius: 9999px; }
85 | .br--bottom-m {
86 | border-top-left-radius: 0;
87 | border-top-right-radius: 0;
88 | }
89 | .br--top-m {
90 | border-bottom-left-radius: 0;
91 | border-bottom-right-radius: 0;
92 | }
93 | .br--right-m {
94 | border-top-left-radius: 0;
95 | border-bottom-left-radius: 0;
96 | }
97 | .br--left-m {
98 | border-top-right-radius: 0;
99 | border-bottom-right-radius: 0;
100 | }
101 | }
102 |
103 | @media (--breakpoint-large) {
104 | .br0-l { border-radius: 0; }
105 | .br1-l { border-radius: .125rem; }
106 | .br2-l { border-radius: .25rem; }
107 | .br3-l { border-radius: .5rem; }
108 | .br4-l { border-radius: 1rem; }
109 | .br-100-l { border-radius: 100%; }
110 | .br-pill-l { border-radius: 9999px; }
111 | .br--bottom-l {
112 | border-radius-top-left: 0;
113 | border-radius-top-right: 0;
114 | }
115 | .br--top-l {
116 | border-bottom-left-radius: 0;
117 | border-bottom-right-radius: 0;
118 | }
119 | .br--right-l {
120 | border-top-left-radius: 0;
121 | border-bottom-left-radius: 0;
122 | }
123 | .br--left-l {
124 | border-top-right-radius: 0;
125 | border-bottom-right-radius: 0;
126 | }
127 | }
128 |
--------------------------------------------------------------------------------
/src/_border-style.css:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | BORDER STYLES
4 | Docs: http://tachyons.io/docs/themes/borders/
5 |
6 | Depends on base border module in _borders.css
7 |
8 | Base:
9 | b = border-style
10 |
11 | Modifiers:
12 | --none = none
13 | --dotted = dotted
14 | --dashed = dashed
15 | --solid = solid
16 |
17 | Media Query Extensions:
18 | -ns = not-small
19 | -m = medium
20 | -l = large
21 |
22 | */
23 |
24 | .b--dotted { border-style: dotted; }
25 | .b--dashed { border-style: dashed; }
26 | .b--solid { border-style: solid; }
27 | .b--none { border-style: none; }
28 |
29 | @media (--breakpoint-not-small) {
30 | .b--dotted-ns { border-style: dotted; }
31 | .b--dashed-ns { border-style: dashed; }
32 | .b--solid-ns { border-style: solid; }
33 | .b--none-ns { border-style: none; }
34 | }
35 |
36 | @media (--breakpoint-medium) {
37 | .b--dotted-m { border-style: dotted; }
38 | .b--dashed-m { border-style: dashed; }
39 | .b--solid-m { border-style: solid; }
40 | .b--none-m { border-style: none; }
41 | }
42 |
43 | @media (--breakpoint-large) {
44 | .b--dotted-l { border-style: dotted; }
45 | .b--dashed-l { border-style: dashed; }
46 | .b--solid-l { border-style: solid; }
47 | .b--none-l { border-style: none; }
48 | }
49 |
--------------------------------------------------------------------------------
/src/_border-widths.css:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | BORDER WIDTHS
4 | Docs: http://tachyons.io/docs/themes/borders/
5 |
6 | Base:
7 | bw = border-width
8 |
9 | Modifiers:
10 | 0 = 0 width border
11 | 1 = 1st step in border-width scale
12 | 2 = 2nd step in border-width scale
13 | 3 = 3rd step in border-width scale
14 | 4 = 4th step in border-width scale
15 | 5 = 5th step in border-width scale
16 |
17 | Media Query Extensions:
18 | -ns = not-small
19 | -m = medium
20 | -l = large
21 |
22 | */
23 |
24 | .bw0 { border-width: 0; }
25 | .bw1 { border-width: .125rem; }
26 | .bw2 { border-width: .25rem; }
27 | .bw3 { border-width: .5rem; }
28 | .bw4 { border-width: 1rem; }
29 | .bw5 { border-width: 2rem; }
30 |
31 | /* Resets */
32 | .bt-0 { border-top-width: 0; }
33 | .br-0 { border-right-width: 0; }
34 | .bb-0 { border-bottom-width: 0; }
35 | .bl-0 { border-left-width: 0; }
36 |
37 | @media (--breakpoint-not-small) {
38 | .bw0-ns { border-width: 0; }
39 | .bw1-ns { border-width: .125rem; }
40 | .bw2-ns { border-width: .25rem; }
41 | .bw3-ns { border-width: .5rem; }
42 | .bw4-ns { border-width: 1rem; }
43 | .bw5-ns { border-width: 2rem; }
44 | .bt-0-ns { border-top-width: 0; }
45 | .br-0-ns { border-right-width: 0; }
46 | .bb-0-ns { border-bottom-width: 0; }
47 | .bl-0-ns { border-left-width: 0; }
48 | }
49 |
50 | @media (--breakpoint-medium) {
51 | .bw0-m { border-width: 0; }
52 | .bw1-m { border-width: .125rem; }
53 | .bw2-m { border-width: .25rem; }
54 | .bw3-m { border-width: .5rem; }
55 | .bw4-m { border-width: 1rem; }
56 | .bw5-m { border-width: 2rem; }
57 | .bt-0-m { border-top-width: 0; }
58 | .br-0-m { border-right-width: 0; }
59 | .bb-0-m { border-bottom-width: 0; }
60 | .bl-0-m { border-left-width: 0; }
61 | }
62 |
63 | @media (--breakpoint-large) {
64 | .bw0-l { border-width: 0; }
65 | .bw1-l { border-width: .125rem; }
66 | .bw2-l { border-width: .25rem; }
67 | .bw3-l { border-width: .5rem; }
68 | .bw4-l { border-width: 1rem; }
69 | .bw5-l { border-width: 2rem; }
70 | .bt-0-l { border-top-width: 0; }
71 | .br-0-l { border-right-width: 0; }
72 | .bb-0-l { border-bottom-width: 0; }
73 | .bl-0-l { border-left-width: 0; }
74 | }
75 |
--------------------------------------------------------------------------------
/src/_borders.css:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | BORDERS
4 | Docs: http://tachyons.io/docs/themes/borders/
5 |
6 | Base:
7 | b = border
8 |
9 | Modifiers:
10 | a = all
11 | t = top
12 | r = right
13 | b = bottom
14 | l = left
15 | n = none
16 |
17 | Media Query Extensions:
18 | -ns = not-small
19 | -m = medium
20 | -l = large
21 |
22 | */
23 |
24 | .ba { border-style: solid; border-width: 1px; }
25 | .bt { border-top-style: solid; border-top-width: 1px; }
26 | .br { border-right-style: solid; border-right-width: 1px; }
27 | .bb { border-bottom-style: solid; border-bottom-width: 1px; }
28 | .bl { border-left-style: solid; border-left-width: 1px; }
29 | .bn { border-style: none; border-width: 0; }
30 |
31 |
32 | @media (--breakpoint-not-small) {
33 | .ba-ns { border-style: solid; border-width: 1px; }
34 | .bt-ns { border-top-style: solid; border-top-width: 1px; }
35 | .br-ns { border-right-style: solid; border-right-width: 1px; }
36 | .bb-ns { border-bottom-style: solid; border-bottom-width: 1px; }
37 | .bl-ns { border-left-style: solid; border-left-width: 1px; }
38 | .bn-ns { border-style: none; border-width: 0; }
39 | }
40 |
41 | @media (--breakpoint-medium) {
42 | .ba-m { border-style: solid; border-width: 1px; }
43 | .bt-m { border-top-style: solid; border-top-width: 1px; }
44 | .br-m { border-right-style: solid; border-right-width: 1px; }
45 | .bb-m { border-bottom-style: solid; border-bottom-width: 1px; }
46 | .bl-m { border-left-style: solid; border-left-width: 1px; }
47 | .bn-m { border-style: none; border-width: 0; }
48 | }
49 |
50 | @media (--breakpoint-large) {
51 | .ba-l { border-style: solid; border-width: 1px; }
52 | .bt-l { border-top-style: solid; border-top-width: 1px; }
53 | .br-l { border-right-style: solid; border-right-width: 1px; }
54 | .bb-l { border-bottom-style: solid; border-bottom-width: 1px; }
55 | .bl-l { border-left-style: solid; border-left-width: 1px; }
56 | .bn-l { border-style: none; border-width: 0; }
57 | }
58 |
59 |
--------------------------------------------------------------------------------
/src/_box-shadow.css:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | BOX-SHADOW
4 | Docs: http://tachyons.io/docs/themes/box-shadow/
5 |
6 | Media Query Extensions:
7 | -ns = not-small
8 | -m = medium
9 | -l = large
10 |
11 | */
12 |
13 | .shadow-1 { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); }
14 | .shadow-2 { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); }
15 | .shadow-3 { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); }
16 | .shadow-4 { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); }
17 | .shadow-5 { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); }
18 |
19 | @media (--breakpoint-not-small) {
20 | .shadow-1-ns { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); }
21 | .shadow-2-ns { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); }
22 | .shadow-3-ns { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); }
23 | .shadow-4-ns { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); }
24 | .shadow-5-ns { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); }
25 | }
26 |
27 | @media (--breakpoint-medium) {
28 | .shadow-1-m { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); }
29 | .shadow-2-m { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); }
30 | .shadow-3-m { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); }
31 | .shadow-4-m { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); }
32 | .shadow-5-m { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); }
33 | }
34 |
35 | @media (--breakpoint-large) {
36 | .shadow-1-l { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); }
37 | .shadow-2-l { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); }
38 | .shadow-3-l { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); }
39 | .shadow-4-l { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); }
40 | .shadow-5-l { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); }
41 | }
42 |
--------------------------------------------------------------------------------
/src/_box-sizing.css:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | BOX SIZING
4 |
5 | */
6 |
7 | html,
8 | body,
9 | div,
10 | article,
11 | section,
12 | main,
13 | footer,
14 | header,
15 | form,
16 | fieldset,
17 | pre,
18 | code,
19 | p,
20 | ul,
21 | ol,
22 | li,
23 | dl,
24 | dt,
25 | dd,
26 | textarea,
27 | input[type="email"],
28 | input[type="number"],
29 | input[type="password"],
30 | input[type="tel"],
31 | input[type="text"],
32 | input[type="url"],
33 | .border-box {
34 | box-sizing: border-box;
35 | }
36 |
37 |
--------------------------------------------------------------------------------
/src/_button-skins.css:
--------------------------------------------------------------------------------
1 | /*
2 | *
3 | * Button Skins
4 | *
5 | * */
6 |
7 | /*
8 |
9 | Skins
10 |
11 | * Black & White
12 | * Grays
13 | * Colors
14 |
15 | Code:
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | */
24 |
25 | /* BLACK & WHITE */
26 |
27 | .btn--black,
28 | .btn--black:link,
29 | .btn--black:visited {
30 | color: #fff;
31 | background-color: #000;
32 | }
33 |
34 | .btn--black:hover {
35 | color: #fff;
36 | background-color: #777;
37 | border-color: #777;
38 | }
39 |
40 | .btn--black:active {
41 | color: #fff;
42 | background-color: #999;
43 | border-color: #999;
44 | }
45 |
46 | .btn--black:hover {
47 | background-color: #444;
48 | }
49 |
50 | .btn--black {
51 | background-color: #000;
52 | }
53 |
54 | .btn--gray:link,
55 | .btn--gray:visited, {
56 | background-color: #f0f0f0;
57 | border-color: #f0f0f0;
58 | color: #555;
59 | }
60 |
61 | .btn--gray:hover {
62 | background-color: #ddd;
63 | border-color: #ddd;
64 | color: #444;
65 | }
66 |
67 | .btn--gray:active {
68 | background-color: #ccc;
69 | border-color: #ccc;
70 | color: #444;
71 | }
72 |
73 | .btn--gray-border:link,
74 | .btn--gray-border:visited, {
75 | background-color: #fff;
76 | border-color: #555;
77 | border-width: 2px;
78 | color: #555;
79 | }
80 |
81 | .btn--gray-border:hover {
82 | background-color: #fff;
83 | border-color: #ddd;
84 | color: #777;
85 | }
86 |
87 | .btn--gray-border:active {
88 | background-color: #ccc;
89 | border-color: #ccc;
90 | color: #444;
91 | }
92 |
93 | .btn--gray-dark:link,
94 | .btn--gray-dark:visited {
95 | background-color: #555;
96 | color: #eee;
97 | }
98 |
99 | .btn--gray-dark:hover {
100 | background-color: #333;
101 | border-color: #333;
102 | color: #eee;
103 | }
104 |
105 | .btn--gray-dark:active {
106 | background-color: #777;
107 | border-color: #777;
108 | color: #eee;
109 | }
110 |
111 |
112 | /* BLUES */
113 |
114 | .btn--blue:link,
115 | .btn--blue:visited {
116 | color: #fff;
117 | background-color: #0074D9;
118 | }
119 |
120 | .btn--blue:hover {
121 | color: #fff!important;
122 | background-color: #0063aa;
123 | border-color: #0063aa;
124 | }
125 |
126 | .btn--blue:active {
127 | color: #fff;
128 | background-color: #001F3F;
129 | border-color: #001F3F;
130 | }
131 |
132 | /* Keep it mobile-first and responsive */
133 |
134 | @media screen and (min-width: 32em) {
135 | .btn--full {
136 | max-width: 16em!important;
137 | }
138 | }
139 |
--------------------------------------------------------------------------------
/src/_buttons.css:
--------------------------------------------------------------------------------
1 | /*
2 | *
3 | * btns.css
4 | * Simple css utilities for building responsive buttons
5 | * Author: mrmrs
6 | * License: MIT
7 | *
8 | * */
9 |
10 | /*
11 |
12 | Base .btn class
13 |
14 | Code:
15 | Default button
16 |
17 | */
18 |
19 | .btn,
20 | .btn:link,
21 | .btn:visited {
22 | border-radius: .3em;
23 | border-style: solid;
24 | border-width: 1px;
25 | color: #111;
26 | display: inline-block;
27 | letter-spacing: .15em;
28 | text-decoration: none;
29 | text-transform: uppercase;
30 | transition: color .4s, background-color .4s, border .4s;
31 | }
32 |
33 | .btn:hover {
34 | color: #7FDBFF;
35 | border: 1px solid #7FDBFF;
36 | transition: background-color .3s, color .3s, border .3s;
37 | }
38 |
39 | .btn:active {
40 | color: #0074D9;
41 | border: 1px solid #0074D9;
42 | transition: background-color .3s, color .3s, border .3s;
43 | }
44 |
45 |
46 | /*
47 |
48 | Sizes
49 |
50 | Small = .btn--s
51 | Medium = .btn--m
52 | Large = .btn--l
53 |
54 | Code:
55 |
56 |
57 |
58 |
59 | */
60 |
61 | .btn--s { font-size: 12px; }
62 | .btn--m { font-size: 14px; }
63 | .btn--l { font-size: 20px; border-radius: .25em!important; }
64 |
65 |
66 | /*
67 |
68 | Layout utility for responsive buttons
69 |
70 | Code:
71 |
72 |
73 | */
74 |
75 | .btn--full,
76 | .btn--full:link {
77 | border-radius: .25em;
78 | display: block;
79 | margin-left: auto;
80 | margin-right: auto;
81 | text-align: center;
82 | width: 100%;
83 | }
84 |
85 |
86 | /*
87 |
88 | Skins
89 |
90 | * Black & White
91 | * Grays
92 | * Colors
93 |
94 | Code:
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 | */
103 |
104 | /* BLACK & WHITE */
105 |
106 | .btn--black,
107 | .btn--black:link,
108 | .btn--black:visited {
109 | color: #fff;
110 | background-color: #000;
111 | }
112 |
113 | .btn--black:hover {
114 | color: #fff;
115 | background-color: #777;
116 | border-color: #777;
117 | }
118 |
119 | .btn--black:active {
120 | color: #fff;
121 | background-color: #999;
122 | border-color: #999;
123 | }
124 |
125 | .btn--black:hover {
126 | background-color: #444;
127 | }
128 |
129 | .btn--black {
130 | background-color: #000;
131 | }
132 |
133 | .btn--gray:link,
134 | .btn--gray:visited, {
135 | background-color: #f0f0f0;
136 | border-color: #f0f0f0;
137 | color: #555;
138 | }
139 |
140 | .btn--gray:hover {
141 | background-color: #ddd;
142 | border-color: #ddd;
143 | color: #444;
144 | }
145 |
146 | .btn--gray:active {
147 | background-color: #ccc;
148 | border-color: #ccc;
149 | color: #444;
150 | }
151 |
152 | .btn--gray-border:link,
153 | .btn--gray-border:visited, {
154 | background-color: #fff;
155 | border-color: #555;
156 | border-width: 2px;
157 | color: #555;
158 | }
159 |
160 | .btn--gray-border:hover {
161 | background-color: #fff;
162 | border-color: #ddd;
163 | color: #777;
164 | }
165 |
166 | .btn--gray-border:active {
167 | background-color: #ccc;
168 | border-color: #ccc;
169 | color: #444;
170 | }
171 |
172 | .btn--gray-dark:link,
173 | .btn--gray-dark:visited {
174 | background-color: #555;
175 | color: #eee;
176 | }
177 |
178 | .btn--gray-dark:hover {
179 | background-color: #333;
180 | border-color: #333;
181 | color: #eee;
182 | }
183 |
184 | .btn--gray-dark:active {
185 | background-color: #777;
186 | border-color: #777;
187 | color: #eee;
188 | }
189 |
190 |
191 | /* BLUES */
192 |
193 | .btn--blue:link,
194 | .btn--blue:visited {
195 | color: #fff;
196 | background-color: #0074D9;
197 | }
198 |
199 | .btn--blue:hover {
200 | color: #fff!important;
201 | background-color: #0063aa;
202 | border-color: #0063aa;
203 | }
204 |
205 | .btn--blue:active {
206 | color: #fff;
207 | background-color: #001F3F;
208 | border-color: #001F3F;
209 | }
210 |
211 | .btn--animated {
212 | background: #f9f9f9;
213 | color: #444;
214 | border: 4px solid #f1f1f1;
215 | padding: .5rem;
216 | transition: padding .4s ease-out;
217 | transition-delay: .1s;
218 | }
219 |
220 | .btn--animated:hover {
221 | background: #f9f9f9;
222 | border: 4px solid #f1f1f1;
223 | padding: .75rem;
224 | transition: padding .2s ease-in;
225 | }
226 |
227 |
228 |
229 | /* Keep it mobile-first and responsive */
230 |
231 | @media screen and (min-width: 32em) {
232 | .btn--full {
233 | max-width: 16em!important;
234 | }
235 | }
236 |
--------------------------------------------------------------------------------
/src/_children.css:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | CHILDREN
4 | Tachyons module for styling nested elements
5 | that are generated by a cms.
6 |
7 | */
8 |
9 | .nested-copy-line-height p,
10 | .nested-copy-line-height ul,
11 | .nested-copy-line-height ol {
12 | line-height: 1.5;
13 | }
14 |
15 | .nested-headline-line-height h1,
16 | .nested-headline-line-height h2,
17 | .nested-headline-line-height h3,
18 | .nested-headline-line-height h4,
19 | .nested-headline-line-height h5,
20 | .nested-headline-line-height h6 {
21 | line-height: 1.25;
22 | }
23 |
24 | .nested-list-reset ul,
25 | .nested-list-reset ol {
26 | padding-left: 0;
27 | margin-left: 0;
28 | list-style-type: none;
29 | }
30 |
31 | .nested-copy-indent p+p {
32 | text-indent: 1em;
33 | margin-top: 0;
34 | margin-bottom: 0;
35 | }
36 |
37 | .nested-copy-seperator p+p {
38 | margin-top: 1.5em;
39 | }
40 |
41 | .nested-img img {
42 | width: 100%;
43 | max-width: 100%;
44 | display: block;
45 | }
46 |
47 |
--------------------------------------------------------------------------------
/src/_clears.css:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | CLEARFIX
4 | http://tachyons.io/docs/layout/clearfix/
5 |
6 | */
7 |
8 | /* Nicolas Gallaghers Clearfix solution
9 | Ref: http://nicolasgallagher.com/micro-clearfix-hack/ */
10 |
11 | .cf:before,
12 | .cf:after { content: " "; display: table; }
13 | .cf:after { clear: both; }
14 | .cf { *zoom: 1; }
15 |
16 | .cl { clear: left; }
17 | .cr { clear: right; }
18 | .cb { clear: both; }
19 | .cn { clear: none; }
20 |
21 | @media (--breakpoint-not-small) {
22 | .cl-ns { clear: left; }
23 | .cr-ns { clear: right; }
24 | .cb-ns { clear: both; }
25 | .cn-ns { clear: none; }
26 | }
27 |
28 | @media (--breakpoint-medium) {
29 | .cl-m { clear: left; }
30 | .cr-m { clear: right; }
31 | .cb-m { clear: both; }
32 | .cn-m { clear: none; }
33 | }
34 |
35 | @media (--breakpoint-large) {
36 | .cl-l { clear: left; }
37 | .cr-l { clear: right; }
38 | .cb-l { clear: both; }
39 | .cn-l { clear: none; }
40 | }
41 |
--------------------------------------------------------------------------------
/src/_code.css:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | CODE
4 |
5 | */
6 |
7 | .pre {
8 | overflow-x: auto;
9 | overflow-y: hidden;
10 | overflow: scroll;
11 | }
12 |
--------------------------------------------------------------------------------
/src/_colors.css:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | Tachyons
4 | COLOR VARIABLES
5 |
6 | Grayscale
7 | - Solids
8 | - Transparencies
9 | Colors
10 |
11 | */
12 |
13 | :root {
14 | --black: #000;
15 | --near-black: #111;
16 | --dark-gray:#333;
17 | --mid-gray:#555;
18 | --gray: #777;
19 | --silver: #999;
20 | --light-silver: #aaa;
21 | --moon-gray: #ccc;
22 | --light-gray: #eee;
23 | --near-white: #f4f4f4;
24 | --white: #fff;
25 |
26 | --transparent:transparent;
27 |
28 | --black-90: rgba(0,0,0,.9);
29 | --black-80: rgba(0,0,0,.8);
30 | --black-70: rgba(0,0,0,.7);
31 | --black-60: rgba(0,0,0,.6);
32 | --black-50: rgba(0,0,0,.5);
33 | --black-40: rgba(0,0,0,.4);
34 | --black-30: rgba(0,0,0,.3);
35 | --black-20: rgba(0,0,0,.2);
36 | --black-10: rgba(0,0,0,.1);
37 | --black-05: rgba(0,0,0,.05);
38 | --black-025: rgba(0,0,0,.025);
39 | --black-0125: rgba(0,0,0,.0125);
40 |
41 | --white-90: rgba(255,255,255,.9);
42 | --white-80: rgba(255,255,255,.8);
43 | --white-70: rgba(255,255,255,.7);
44 | --white-60: rgba(255,255,255,.6);
45 | --white-50: rgba(255,255,255,.5);
46 | --white-40: rgba(255,255,255,.4);
47 | --white-30: rgba(255,255,255,.3);
48 | --white-20: rgba(255,255,255,.2);
49 | --white-10: rgba(255,255,255,.1);
50 | --white-05: rgba(255,255,255,.05);
51 | --white-025: rgba(255,255,255,.025);
52 | --white-0125: rgba(255,255,255,.0125);
53 |
54 | --dark-red: #e7040f;
55 | --red: #ff4136;
56 | --light-red: #ff725c;
57 | --orange: #ff6300;
58 | --gold: #ffb700;
59 | --yellow: #ffd700;
60 | --light-yellow: #fbf1a9;
61 | --purple: #5e2ca5;
62 | --light-purple: #a463f2;
63 | --dark-pink: #d5008f;
64 | --hot-pink: #ff41b4;
65 | --pink: #ff80cc;
66 | --light-pink: #ffa3d7;
67 | --dark-green: #137752;
68 | --green: #19a974;
69 | --light-green: #9eebcf;
70 | --navy: #001b44;
71 | --dark-blue: #00449e;
72 | --blue: #357edd;
73 | --light-blue: #96ccff;
74 | --lightest-blue: #cdecff;
75 | --washed-blue: #f6fffe;
76 | --washed-green: #e8fdf5;
77 | --washed-yellow: #fffceb;
78 | --washed-red: #ffdfdf;
79 |
80 | }
81 |
--------------------------------------------------------------------------------
/src/_coordinates.css:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | COORDINATES
4 | Docs: http://tachyons.io/docs/layout/position/
5 |
6 | Use in combination with the position module.
7 |
8 | Base:
9 | top
10 | bottom
11 | right
12 | left
13 |
14 | Modifiers:
15 | -0 = literal value 0
16 | -1 = literal value 1
17 | -2 = literal value 2
18 | --1 = literal value -1
19 | --2 = literal value -2
20 |
21 | Media Query Extensions:
22 | -ns = not-small
23 | -m = medium
24 | -l = large
25 |
26 | */
27 |
28 | .top-0 { top: 0; }
29 | .right-0 { right: 0; }
30 | .bottom-0 { bottom: 0; }
31 | .left-0 { left: 0; }
32 |
33 | .top-1 { top: 1rem; }
34 | .right-1 { right: 1rem; }
35 | .bottom-1 { bottom: 1rem; }
36 | .left-1 { left: 1rem; }
37 |
38 | .top-2 { top: 2rem; }
39 | .right-2 { right: 2rem; }
40 | .bottom-2 { bottom: 2rem; }
41 | .left-2 { left: 2rem; }
42 |
43 | .top--1 { top: -1rem; }
44 | .right--1 { right: -1rem; }
45 | .bottom--1 { bottom: -1rem; }
46 | .left--1 { left: -1rem; }
47 |
48 | .top--2 { top: -2rem; }
49 | .right--2 { right: -2rem; }
50 | .bottom--2 { bottom: -2rem; }
51 | .left--2 { left: -2rem; }
52 |
53 |
54 | .absolute--fill {
55 | top: 0;
56 | right: 0;
57 | bottom: 0;
58 | left: 0;
59 | }
60 |
61 | @media (--breakpoint-not-small) {
62 | .top-0-ns { top: 0; }
63 | .left-0-ns { left: 0; }
64 | .right-0-ns { right: 0; }
65 | .bottom-0-ns { bottom: 0; }
66 | .top-1-ns { top: 1rem; }
67 | .left-1-ns { left: 1rem; }
68 | .right-1-ns { right: 1rem; }
69 | .bottom-1-ns { bottom: 1rem; }
70 | .top-2-ns { top: 2rem; }
71 | .left-2-ns { left: 2rem; }
72 | .right-2-ns { right: 2rem; }
73 | .bottom-2-ns { bottom: 2rem; }
74 | .top--1-ns { top: -1rem; }
75 | .right--1-ns { right: -1rem; }
76 | .bottom--1-ns { bottom: -1rem; }
77 | .left--1-ns { left: -1rem; }
78 | .top--2-ns { top: -2rem; }
79 | .right--2-ns { right: -2rem; }
80 | .bottom--2-ns { bottom: -2rem; }
81 | .left--2-ns { left: -2rem; }
82 | .absolute--fill-ns {
83 | top: 0;
84 | right: 0;
85 | bottom: 0;
86 | left: 0;
87 | }
88 | }
89 |
90 | @media (--breakpoint-medium) {
91 | .top-0-m { top: 0; }
92 | .left-0-m { left: 0; }
93 | .right-0-m { right: 0; }
94 | .bottom-0-m { bottom: 0; }
95 | .top-1-m { top: 1rem; }
96 | .left-1-m { left: 1rem; }
97 | .right-1-m { right: 1rem; }
98 | .bottom-1-m { bottom: 1rem; }
99 | .top-2-m { top: 2rem; }
100 | .left-2-m { left: 2rem; }
101 | .right-2-m { right: 2rem; }
102 | .bottom-2-m { bottom: 2rem; }
103 | .top--1-m { top: -1rem; }
104 | .right--1-m { right: -1rem; }
105 | .bottom--1-m { bottom: -1rem; }
106 | .left--1-m { left: -1rem; }
107 | .top--2-m { top: -2rem; }
108 | .right--2-m { right: -2rem; }
109 | .bottom--2-m { bottom: -2rem; }
110 | .left--2-m { left: -2rem; }
111 | .absolute--fill-m {
112 | top: 0;
113 | right: 0;
114 | bottom: 0;
115 | left: 0;
116 | }
117 | }
118 |
119 | @media (--breakpoint-large) {
120 | .top-0-l { top: 0; }
121 | .left-0-l { left: 0; }
122 | .right-0-l { right: 0; }
123 | .bottom-0-l { bottom: 0; }
124 | .top-1-l { top: 1rem; }
125 | .left-1-l { left: 1rem; }
126 | .right-1-l { right: 1rem; }
127 | .bottom-1-l { bottom: 1rem; }
128 | .top-2-l { top: 2rem; }
129 | .left-2-l { left: 2rem; }
130 | .right-2-l { right: 2rem; }
131 | .bottom-2-l { bottom: 2rem; }
132 | .top--1-l { top: -1rem; }
133 | .right--1-l { right: -1rem; }
134 | .bottom--1-l { bottom: -1rem; }
135 | .left--1-l { left: -1rem; }
136 | .top--2-l { top: -2rem; }
137 | .right--2-l { right: -2rem; }
138 | .bottom--2-l { bottom: -2rem; }
139 | .left--2-l { left: -2rem; }
140 | .absolute--fill-l {
141 | top: 0;
142 | right: 0;
143 | bottom: 0;
144 | left: 0;
145 | }
146 | }
147 |
--------------------------------------------------------------------------------
/src/_debug-children.css:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | DEBUG CHILDREN
4 | Docs: http://tachyons.io/docs/debug/
5 |
6 | Just add the debug class to any element to see outlines on its
7 | children.
8 |
9 | */
10 |
11 | .debug * { outline: 1px solid gold; }
12 | .debug-white * { outline: 1px solid white; }
13 | .debug-black * { outline: 1px solid black; }
14 |
15 |
--------------------------------------------------------------------------------
/src/_debug-grid.css:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | DEBUG GRID
4 | http://tachyons.io/docs/debug-grid/
5 |
6 | Can be useful for debugging layout issues
7 | or helping to make sure things line up perfectly.
8 | Just tack one of these classes onto a parent element.
9 |
10 | */
11 |
12 | .debug-grid {
13 | background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTRDOTY4N0U2N0VFMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTRDOTY4N0Q2N0VFMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3NjY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3NzY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsBS+GMAAAAjSURBVHjaYvz//z8DLsD4gcGXiYEAGBIKGBne//fFpwAgwAB98AaF2pjlUQAAAABJRU5ErkJggg==) repeat top left;
14 | }
15 |
16 | .debug-grid-16 {
17 | background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODYyRjhERDU2N0YyMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODYyRjhERDQ2N0YyMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3QTY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3QjY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvCS01IAAABMSURBVHjaYmR4/5+BFPBfAMFm/MBgx8RAGWCn1AAmSg34Q6kBDKMGMDCwICeMIemF/5QawEipAWwUhwEjMDvbAWlWkvVBwu8vQIABAEwBCph8U6c0AAAAAElFTkSuQmCC) repeat top left;
18 | }
19 |
20 | .debug-grid-8-solid {
21 | 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;
22 | }
23 |
24 | .debug-grid-16-solid {
25 | background:white url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzY3MkJEN0U2N0M1MTFFNkIyQkNFMjQwODEwMDIxNzEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzY3MkJEN0Y2N0M1MTFFNkIyQkNFMjQwODEwMDIxNzEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3QzY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3RDY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pve6J3kAAAAzSURBVHjaYvz//z8D0UDsMwMjSRoYP5Gq4SPNbRjVMEQ1fCRDg+in/6+J1AJUxsgAEGAA31BAJMS0GYEAAAAASUVORK5CYII=) repeat top left;
26 | }
27 |
--------------------------------------------------------------------------------
/src/_debug.css:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | DEBUG (PESTICIDE)
4 | Docs: http://tachyons.io/docs/debug/
5 |
6 | This is a partial you have to manually include in your
7 | build file. It places a different colored outline on
8 | each element which can help you debug layout issues.
9 | There is also a handy chrome extension that can
10 | be found at http://pesticide.io
11 |
12 | */
13 |
14 | body { outline: 1px solid #2980B9!important; }
15 | article { outline: 1px solid #3498DB!important; }
16 | nav { outline: 1px solid #0088C3!important; }
17 | aside { outline: 1px solid #33A0CE!important; }
18 | section { outline: 1px solid #66B8DA!important; }
19 | header { outline: 1px solid #99CFE7!important; }
20 | footer { outline: 1px solid #CCE7F3!important; }
21 | h1 { outline: 1px solid #162544!important; }
22 | h2 { outline: 1px solid #314E6E!important; }
23 | h3 { outline: 1px solid #3E5E85!important; }
24 | h4 { outline: 1px solid #449BAF!important; }
25 | h5 { outline: 1px solid #C7D1CB!important; }
26 | h6 { outline: 1px solid #4371D0!important; }
27 | main { outline: 1px solid #2F4F90!important; }
28 | address { outline: 1px solid #1A2C51!important; }
29 | div { outline: 1px solid #036CDB!important; }
30 |
31 |
32 | p { outline: 1px solid #AC050B!important; }
33 | hr { outline: 1px solid #FF063F!important; }
34 | pre { outline: 1px solid #850440!important; }
35 | blockquote { outline: 1px solid #F1B8E7!important; }
36 | ol { outline: 1px solid #FF050C!important; }
37 | ul { outline: 1px solid #D90416!important; }
38 | li { outline: 1px solid #D90416!important; }
39 | dl { outline: 1px solid #FD3427!important; }
40 | dt { outline: 1px solid #FF0043!important; }
41 | dd { outline: 1px solid #E80174!important; }
42 | figure { outline: 1px solid #FF00BB!important; }
43 | figcaption { outline: 1px solid #BF0032!important; }
44 |
45 |
46 |
47 | table { outline: 1px solid #00CC99!important; }
48 | caption { outline: 1px solid #37FFC4!important; }
49 | thead { outline: 1px solid #98DACA!important; }
50 | tbody { outline: 1px solid #64A7A0!important; }
51 | tfoot { outline: 1px solid #22746B!important; }
52 | tr { outline: 1px solid #86C0B2!important; }
53 | th { outline: 1px solid #A1E7D6!important; }
54 | td { outline: 1px solid #3F5A54!important; }
55 | col { outline: 1px solid #6C9A8F!important; }
56 | colgroup { outline: 1px solid #6C9A9D!important; }
57 |
58 |
59 | button { outline: 1px solid #DA8301!important; }
60 | datalist { outline: 1px solid #C06000!important; }
61 | fieldset { outline: 1px solid #D95100!important; }
62 | form { outline: 1px solid #D23600!important; }
63 | input { outline: 1px solid #FCA600!important; }
64 | keygen { outline: 1px solid #B31E00!important; }
65 | label { outline: 1px solid #EE8900!important; }
66 | legend { outline: 1px solid #DE6D00!important; }
67 | meter { outline: 1px solid #E8630C!important; }
68 | optgroup { outline: 1px solid #B33600!important; }
69 | option { outline: 1px solid #FF8A00!important; }
70 | output { outline: 1px solid #FF9619!important; }
71 | progress { outline: 1px solid #E57C00!important; }
72 | select { outline: 1px solid #E26E0F!important; }
73 | textarea { outline: 1px solid #CC5400!important; }
74 |
75 |
76 |
77 | details { outline: 1px solid #33848F!important; }
78 | summary { outline: 1px solid #60A1A6!important; }
79 | command { outline: 1px solid #438DA1!important; }
80 | menu { outline: 1px solid #449DA6!important; }
81 |
82 |
83 |
84 | del { outline: 1px solid #BF0000!important; }
85 | ins { outline: 1px solid #400000!important; }
86 |
87 |
88 |
89 | img { outline: 1px solid #22746B!important; }
90 | iframe { outline: 1px solid #64A7A0!important; }
91 | embed { outline: 1px solid #98DACA!important; }
92 | object { outline: 1px solid #00CC99!important; }
93 | param { outline: 1px solid #37FFC4!important; }
94 | video { outline: 1px solid #6EE866!important; }
95 | audio { outline: 1px solid #027353!important; }
96 | source { outline: 1px solid #012426!important; }
97 | canvas { outline: 1px solid #A2F570!important; }
98 | track { outline: 1px solid #59A600!important; }
99 | map { outline: 1px solid #7BE500!important; }
100 | area { outline: 1px solid #305900!important; }
101 |
102 |
103 |
104 | a { outline: 1px solid #FF62AB!important; }
105 | em { outline: 1px solid #800B41!important; }
106 | strong { outline: 1px solid #FF1583!important; }
107 | i { outline: 1px solid #803156!important; }
108 | b { outline: 1px solid #CC1169!important; }
109 | u { outline: 1px solid #FF0430!important; }
110 | s { outline: 1px solid #F805E3!important; }
111 | small { outline: 1px solid #D107B2!important; }
112 | abbr { outline: 1px solid #4A0263!important; }
113 | q { outline: 1px solid #240018!important; }
114 | cite { outline: 1px solid #64003C!important; }
115 | dfn { outline: 1px solid #B4005A!important; }
116 | sub { outline: 1px solid #DBA0C8!important; }
117 | sup { outline: 1px solid #CC0256!important; }
118 | time { outline: 1px solid #D6606D!important; }
119 | code { outline: 1px solid #E04251!important; }
120 | kbd { outline: 1px solid #5E001F!important; }
121 | samp { outline: 1px solid #9C0033!important; }
122 | var { outline: 1px solid #D90047!important; }
123 | mark { outline: 1px solid #FF0053!important; }
124 | bdi { outline: 1px solid #BF3668!important; }
125 | bdo { outline: 1px solid #6F1400!important; }
126 | ruby { outline: 1px solid #FF7B93!important; }
127 | rt { outline: 1px solid #FF2F54!important; }
128 | rp { outline: 1px solid #803E49!important; }
129 | span { outline: 1px solid #CC2643!important; }
130 | br { outline: 1px solid #DB687D!important; }
131 | wbr { outline: 1px solid #DB175B!important; }
132 |
133 |
--------------------------------------------------------------------------------
/src/_dimension-utilities.css:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | DIMENSION UTILITIES
4 |
5 | */
6 |
7 | .wrap {
8 | display: block;
9 | width: auto !important;
10 | }
11 |
12 | .fill {
13 | display: block;
14 | overflow: hidden;
15 | width: auto !important;
16 | }
17 |
18 |
--------------------------------------------------------------------------------
/src/_display.css:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | DISPLAY
4 | Docs: http://tachyons.io/docs/layout/display
5 |
6 | Base:
7 | d = display
8 |
9 | Modifiers:
10 | n = none
11 | b = block
12 | ib = inline-block
13 | it = inline-table
14 | t = table
15 | tc = table-cell
16 | tr = table-row
17 | tcol = table-column
18 | tcolg = table-column-group
19 |
20 | Media Query Extensions:
21 | -ns = not-small
22 | -m = medium
23 | -l = large
24 |
25 | */
26 |
27 | .dn { display: none; }
28 | .di { display: inline; }
29 | .db { display: block; }
30 | .dib { display: inline-block; }
31 | .dit { display: inline-table; }
32 | .dt { display: table; }
33 | .dtc { display: table-cell; }
34 | .dt-row { display: table-row; }
35 | .dt-row-group { display: table-row-group; }
36 | .dt-column { display: table-column; }
37 | .dt-column-group { display: table-column-group; }
38 |
39 | /*
40 | This will set table to full width and then
41 | all cells will be equal width
42 | */
43 | .dt--fixed {
44 | table-layout: fixed;
45 | width: 100%;
46 | }
47 |
48 | @media (--breakpoint-not-small) {
49 | .dn-ns { display: none; }
50 | .di-ns { display: inline; }
51 | .db-ns { display: block; }
52 | .dib-ns { display: inline-block; }
53 | .dit-ns { display: inline-table; }
54 | .dt-ns { display: table; }
55 | .dtc-ns { display: table-cell; }
56 | .dt-row-ns { display: table-row; }
57 | .dt-row-group-ns { display: table-row-group; }
58 | .dt-column-ns { display: table-column; }
59 | .dt-column-group-ns { display: table-column-group; }
60 |
61 | .dt--fixed-ns {
62 | table-layout: fixed;
63 | width: 100%;
64 | }
65 | }
66 |
67 | @media (--breakpoint-medium) {
68 | .dn-m { display: none; }
69 | .di-m { display: inline; }
70 | .db-m { display: block; }
71 | .dib-m { display: inline-block; }
72 | .dit-m { display: inline-table; }
73 | .dt-m { display: table; }
74 | .dtc-m { display: table-cell; }
75 | .dt-row-m { display: table-row; }
76 | .dt-row-group-m { display: table-row-group; }
77 | .dt-column-m { display: table-column; }
78 | .dt-column-group-m { display: table-column-group; }
79 |
80 | .dt--fixed-m {
81 | table-layout: fixed;
82 | width: 100%;
83 | }
84 | }
85 |
86 | @media (--breakpoint-large) {
87 | .dn-l { display: none; }
88 | .di-l { display: inline; }
89 | .db-l { display: block; }
90 | .dib-l { display: inline-block; }
91 | .dit-l { display: inline-table; }
92 | .dt-l { display: table; }
93 | .dtc-l { display: table-cell; }
94 | .dt-row-l { display: table-row; }
95 | .dt-row-group-l { display: table-row-group; }
96 | .dt-column-l { display: table-column; }
97 | .dt-column-group-l { display: table-column-group; }
98 |
99 | .dt--fixed-l {
100 | table-layout: fixed;
101 | width: 100%;
102 | }
103 | }
104 |
105 |
--------------------------------------------------------------------------------
/src/_flexbox.css:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | FLEXBOX
4 |
5 | Media Query Extensions:
6 | -ns = not-small
7 | -m = medium
8 | -l = large
9 |
10 | */
11 |
12 | .flex { display: flex; }
13 | .inline-flex { display: inline-flex; }
14 |
15 | /* 1. Fix for Chrome 44 bug.
16 | * https://code.google.com/p/chromium/issues/detail?id=506893 */
17 | .flex-auto {
18 | flex: 1 1 auto;
19 | min-width: 0; /* 1 */
20 | min-height: 0; /* 1 */
21 | }
22 |
23 | .flex-none { flex: none; }
24 |
25 | .flex-column { flex-direction: column; }
26 | .flex-row { flex-direction: row; }
27 | .flex-wrap { flex-wrap: wrap; }
28 |
29 | .items-start { align-items: flex-start; }
30 | .items-end { align-items: flex-end; }
31 | .items-center { align-items: center; }
32 | .items-baseline { align-items: baseline; }
33 | .items-stretch { align-items: stretch; }
34 |
35 | .self-start { align-self: flex-start; }
36 | .self-end { align-self: flex-end; }
37 | .self-center { align-self: center; }
38 | .self-baseline { align-self: baseline; }
39 | .self-stretch { align-self: stretch; }
40 |
41 | .justify-start { justify-content: flex-start; }
42 | .justify-end { justify-content: flex-end; }
43 | .justify-center { justify-content: center; }
44 | .justify-between { justify-content: space-between; }
45 | .justify-around { justify-content: space-around; }
46 |
47 | .content-start { align-content: flex-start; }
48 | .content-end { align-content: flex-end; }
49 | .content-center { align-content: center; }
50 | .content-between { align-content: space-between; }
51 | .content-around { align-content: space-around; }
52 | .content-stretch { align-content: stretch; }
53 |
54 | .order-0 { order: 0; }
55 | .order-1 { order: 1; }
56 | .order-2 { order: 2; }
57 | .order-3 { order: 3; }
58 | .order-4 { order: 4; }
59 | .order-5 { order: 5; }
60 | .order-6 { order: 6; }
61 | .order-7 { order: 7; }
62 | .order-8 { order: 8; }
63 | .order-last { order: 99999; }
64 |
65 | @media (--breakpoint-not-small) {
66 | .flex-ns { display: flex; }
67 | .inline-flex-ns { display: inline-flex; }
68 | .flex-auto-ns {
69 | flex: 1 1 auto;
70 | min-width: 0; /* 1 */
71 | min-height: 0; /* 1 */
72 | }
73 | .flex-none-ns { flex: none; }
74 | .flex-column-ns { flex-direction: column; }
75 | .flex-row-ns { flex-direction: row; }
76 | .flex-wrap-ns { flex-wrap: wrap; }
77 | .items-start-ns { align-items: flex-start; }
78 | .items-end-ns { align-items: flex-end; }
79 | .items-center-ns { align-items: center; }
80 | .items-baseline-ns { align-items: baseline; }
81 | .items-stretch-ns { align-items: stretch; }
82 |
83 | .self-start-ns { align-self: flex-start; }
84 | .self-end-ns { align-self: flex-end; }
85 | .self-center-ns { align-self: center; }
86 | .self-baseline-ns { align-self: baseline; }
87 | .self-stretch-ns { align-self: stretch; }
88 |
89 | .justify-start-ns { justify-content: flex-start; }
90 | .justify-end-ns { justify-content: flex-end; }
91 | .justify-center-ns { justify-content: center; }
92 | .justify-between-ns { justify-content: space-between; }
93 | .justify-around-ns { justify-content: space-around; }
94 |
95 | .content-start-ns { align-content: flex-start; }
96 | .content-end-ns { align-content: flex-end; }
97 | .content-center-ns { align-content: center; }
98 | .content-between-ns { align-content: space-between; }
99 | .content-around-ns { align-content: space-around; }
100 | .content-stretch-ns { align-content: stretch; }
101 |
102 | .order-0-ns { order: 0; }
103 | .order-1-ns { order: 1; }
104 | .order-2-ns { order: 2; }
105 | .order-3-ns { order: 3; }
106 | .order-4-ns { order: 4; }
107 | .order-5-ns { order: 5; }
108 | .order-6-ns { order: 6; }
109 | .order-7-ns { order: 7; }
110 | .order-8-ns { order: 8; }
111 | .order-last-ns { order: 99999; }
112 | }
113 | @media (--breakpoint-medium) {
114 | .flex-m { display: flex; }
115 | .inline-flex-m { display: inline-flex; }
116 | .flex-auto-m {
117 | flex: 1 1 auto;
118 | min-width: 0; /* 1 */
119 | min-height: 0; /* 1 */
120 | }
121 | .flex-none-m { flex: none; }
122 | .flex-column-m { flex-direction: column; }
123 | .flex-row-m { flex-direction: row; }
124 | .flex-wrap-m { flex-wrap: wrap; }
125 | .items-start-m { align-items: flex-start; }
126 | .items-end-m { align-items: flex-end; }
127 | .items-center-m { align-items: center; }
128 | .items-baseline-m { align-items: baseline; }
129 | .items-stretch-m { align-items: stretch; }
130 |
131 | .self-start-m { align-self: flex-start; }
132 | .self-end-m { align-self: flex-end; }
133 | .self-center-m { align-self: center; }
134 | .self-baseline-m { align-self: baseline; }
135 | .self-stretch-m { align-self: stretch; }
136 |
137 | .justify-start-m { justify-content: flex-start; }
138 | .justify-end-m { justify-content: flex-end; }
139 | .justify-center-m { justify-content: center; }
140 | .justify-between-m { justify-content: space-between; }
141 | .justify-around-m { justify-content: space-around; }
142 |
143 | .content-start-m { align-content: flex-start; }
144 | .content-end-m { align-content: flex-end; }
145 | .content-center-m { align-content: center; }
146 | .content-between-m { align-content: space-between; }
147 | .content-around-m { align-content: space-around; }
148 | .content-stretch-m { align-content: stretch; }
149 |
150 | .order-0-m { order: 0; }
151 | .order-1-m { order: 1; }
152 | .order-2-m { order: 2; }
153 | .order-3-m { order: 3; }
154 | .order-4-m { order: 4; }
155 | .order-5-m { order: 5; }
156 | .order-6-m { order: 6; }
157 | .order-7-m { order: 7; }
158 | .order-8-m { order: 8; }
159 | .order-last-m { order: 99999; }
160 | }
161 |
162 | @media (--breakpoint-large) {
163 | .flex-l { display: flex; }
164 | .inline-flex-l { display: inline-flex; }
165 | .flex-auto-l {
166 | flex: 1 1 auto;
167 | min-width: 0; /* 1 */
168 | min-height: 0; /* 1 */
169 | }
170 | .flex-none-l { flex: none; }
171 | .flex-column-l { flex-direction: column; }
172 | .flex-row-l { flex-direction: row; }
173 | .flex-wrap-l { flex-wrap: wrap; }
174 | .items-start-l { align-items: flex-start; }
175 | .items-end-l { align-items: flex-end; }
176 | .items-center-l { align-items: center; }
177 | .items-baseline-l { align-items: baseline; }
178 | .items-stretch-l { align-items: stretch; }
179 |
180 | .self-start-l { align-self: flex-start; }
181 | .self-end-l { align-self: flex-end; }
182 | .self-center-l { align-self: center; }
183 | .self-baseline-l { align-self: baseline; }
184 | .self-stretch-l { align-self: stretch; }
185 |
186 | .justify-start-l { justify-content: flex-start; }
187 | .justify-end-l { justify-content: flex-end; }
188 | .justify-center-l { justify-content: center; }
189 | .justify-between-l { justify-content: space-between; }
190 | .justify-around-l { justify-content: space-around; }
191 |
192 | .content-start-l { align-content: flex-start; }
193 | .content-end-l { align-content: flex-end; }
194 | .content-center-l { align-content: center; }
195 | .content-between-l { align-content: space-between; }
196 | .content-around-l { align-content: space-around; }
197 | .content-stretch-l { align-content: stretch; }
198 |
199 | .order-0-l { order: 0; }
200 | .order-1-l { order: 1; }
201 | .order-2-l { order: 2; }
202 | .order-3-l { order: 3; }
203 | .order-4-l { order: 4; }
204 | .order-5-l { order: 5; }
205 | .order-6-l { order: 6; }
206 | .order-7-l { order: 7; }
207 | .order-8-l { order: 8; }
208 | .order-last-l { order: 99999; }
209 | }
210 |
--------------------------------------------------------------------------------
/src/_floats.css:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | FLOATS
4 | http://tachyons.io/docs/layout/floats/
5 |
6 | 1. Floated elements are automatically rendered as block level elements.
7 | Setting floats to display inline will fix the double margin bug in
8 | ie6. You know... just in case.
9 |
10 | 2. Don't forget to clearfix your floats with .cf
11 |
12 | Base:
13 | f = float
14 |
15 | Modifiers:
16 | l = left
17 | r = right
18 | n = none
19 |
20 | Media Query Extensions:
21 | -ns = not-small
22 | -m = medium
23 | -l = large
24 |
25 | */
26 |
27 |
28 |
29 | .fl { float: left; _display: inline; }
30 | .fr { float: right; _display: inline; }
31 | .fn { float: none; }
32 |
33 | @media (--breakpoint-not-small) {
34 | .fl-ns { float: left; _display: inline; }
35 | .fr-ns { float: right; _display: inline; }
36 | .fn-ns { float: none; }
37 | }
38 |
39 | @media (--breakpoint-medium) {
40 | .fl-m { float: left; _display: inline; }
41 | .fr-m { float: right; _display: inline; }
42 | .fn-m { float: none; }
43 | }
44 |
45 | @media (--breakpoint-large) {
46 | .fl-l { float: left; _display: inline; }
47 | .fr-l { float: right; _display: inline; }
48 | .fn-l { float: none; }
49 | }
50 |
--------------------------------------------------------------------------------
/src/_font-family.css:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | FONT FAMILY GROUPS
4 | Docs: http://tachyons.io/docs/typography/font-family/
5 |
6 | */
7 |
8 |
9 | .sans-serif {
10 | font-family: -apple-system, BlinkMacSystemFont,
11 | 'avenir next', avenir,
12 | helvetica, 'helvetica neue',
13 | ubuntu,
14 | roboto, noto,
15 | 'segoe ui', arial,
16 | sans-serif;
17 | }
18 |
19 | .serif {
20 | font-family: georgia,
21 | times,
22 | serif;
23 | }
24 |
25 | .system-sans-serif {
26 | font-family: sans-serif;
27 | }
28 |
29 | .system-serif {
30 | font-family: serif;
31 | }
32 |
33 |
34 | /* Monospaced Typefaces (for code) */
35 |
36 | /* From http://cssfontstack.com */
37 | code, .code {
38 | font-family: Consolas,
39 | monaco,
40 | monospace;
41 | }
42 |
43 | .courier {
44 | font-family: 'Courier Next',
45 | courier,
46 | monospace;
47 | }
48 |
49 |
50 | /* Sans-Serif Typefaces */
51 |
52 | .helvetica {
53 | font-family: 'helvetica neue', helvetica,
54 | sans-serif;
55 | }
56 |
57 | .avenir {
58 | font-family: 'avenir next', avenir,
59 | sans-serif;
60 | }
61 |
62 |
63 | /* Serif Typefaces */
64 |
65 | .athelas {
66 | font-family: athelas,
67 | georgia,
68 | serif;
69 | }
70 |
71 | .georgia {
72 | font-family: georgia,
73 | serif;
74 | }
75 |
76 | .times {
77 | font-family: times,
78 | serif;
79 | }
80 |
81 | .bodoni {
82 | font-family: "Bodoni MT",
83 | serif;
84 | }
85 |
86 | .calisto {
87 | font-family: "Calisto MT",
88 | serif;
89 | }
90 |
91 | .garamond {
92 | font-family: garamond,
93 | serif;
94 | }
95 |
96 | .baskerville {
97 | font-family: baskerville,
98 | serif;
99 | }
100 |
101 |
--------------------------------------------------------------------------------
/src/_font-style.css:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | FONT STYLE
4 | Docs: http://tachyons.io/docs/typography/font-style/
5 |
6 | Media Query Extensions:
7 | -ns = not-small
8 | -m = medium
9 | -l = large
10 |
11 | */
12 |
13 | .i { font-style: italic; }
14 | .fs-normal { font-style: normal; }
15 |
16 | @media (--breakpoint-not-small) {
17 | .i-ns { font-style: italic; }
18 | .fs-normal-ns { font-style: normal; }
19 | }
20 |
21 | @media (--breakpoint-medium) {
22 | .i-m { font-style: italic; }
23 | .fs-normal-m { font-style: normal; }
24 | }
25 |
26 | @media (--breakpoint-large) {
27 | .i-l { font-style: italic; }
28 | .fs-normal-l { font-style: normal; }
29 | }
30 |
--------------------------------------------------------------------------------
/src/_font-weight.css:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | FONT WEIGHT
4 | Docs: http://tachyons.io/docs/typography/font-weight/
5 |
6 | Base
7 | fw = font-weight
8 |
9 | Modifiers:
10 | 1 = literal value 100
11 | 2 = literal value 200
12 | 3 = literal value 300
13 | 4 = literal value 400
14 | 5 = literal value 500
15 | 6 = literal value 600
16 | 7 = literal value 700
17 | 8 = literal value 800
18 | 9 = literal value 900
19 |
20 | Media Query Extensions:
21 | -ns = not-small
22 | -m = medium
23 | -l = large
24 |
25 | */
26 |
27 | .normal { font-weight: normal; }
28 | .b { font-weight: bold; }
29 | .fw1 { font-weight: 100; }
30 | .fw2 { font-weight: 200; }
31 | .fw3 { font-weight: 300; }
32 | .fw4 { font-weight: 400; }
33 | .fw5 { font-weight: 500; }
34 | .fw6 { font-weight: 600; }
35 | .fw7 { font-weight: 700; }
36 | .fw8 { font-weight: 800; }
37 | .fw9 { font-weight: 900; }
38 |
39 |
40 | @media (--breakpoint-not-small) {
41 | .normal-ns { font-weight: normal; }
42 | .b-ns { font-weight: bold; }
43 | .fw1-ns { font-weight: 100; }
44 | .fw2-ns { font-weight: 200; }
45 | .fw3-ns { font-weight: 300; }
46 | .fw4-ns { font-weight: 400; }
47 | .fw5-ns { font-weight: 500; }
48 | .fw6-ns { font-weight: 600; }
49 | .fw7-ns { font-weight: 700; }
50 | .fw8-ns { font-weight: 800; }
51 | .fw9-ns { font-weight: 900; }
52 | }
53 |
54 | @media (--breakpoint-medium) {
55 | .normal-m { font-weight: normal; }
56 | .b-m { font-weight: bold; }
57 | .fw1-m { font-weight: 100; }
58 | .fw2-m { font-weight: 200; }
59 | .fw3-m { font-weight: 300; }
60 | .fw4-m { font-weight: 400; }
61 | .fw5-m { font-weight: 500; }
62 | .fw6-m { font-weight: 600; }
63 | .fw7-m { font-weight: 700; }
64 | .fw8-m { font-weight: 800; }
65 | .fw9-m { font-weight: 900; }
66 | }
67 |
68 | @media (--breakpoint-large) {
69 | .normal-l { font-weight: normal; }
70 | .b-l { font-weight: bold; }
71 | .fw1-l { font-weight: 100; }
72 | .fw2-l { font-weight: 200; }
73 | .fw3-l { font-weight: 300; }
74 | .fw4-l { font-weight: 400; }
75 | .fw5-l { font-weight: 500; }
76 | .fw6-l { font-weight: 600; }
77 | .fw7-l { font-weight: 700; }
78 | .fw8-l { font-weight: 800; }
79 | .fw9-l { font-weight: 900; }
80 | }
81 |
--------------------------------------------------------------------------------
/src/_forms.css:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | FORMS
4 |
5 | */
6 |
7 | .input-reset {
8 | -webkit-appearance: none;
9 | -moz-appearance: none;
10 | }
11 |
12 | .button-reset::-moz-focus-inner,
13 | .input-reset::-moz-focus-inner {
14 | border: 0;
15 | padding: 0;
16 | }
17 |
--------------------------------------------------------------------------------
/src/_grid.css:
--------------------------------------------------------------------------------
1 | @media (--breakpoint-not-small) {
2 |
3 | }
4 |
5 | @media (--breakpoint-medium) {
6 |
7 | }
8 |
9 | @media (--breakpoint-large) {
10 |
11 | }
12 |
13 |
--------------------------------------------------------------------------------
/src/_heights.css:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | HEIGHTS
4 | Docs: http://tachyons.io/docs/layout/heights/
5 |
6 | Base:
7 | h = height
8 | min-h = min-height
9 | min-vh = min-height vertical screen height
10 | vh = vertical screen height
11 |
12 | Modifiers
13 | 1 = 1st step in height scale
14 | 2 = 2nd step in height scale
15 | 3 = 3rd step in height scale
16 | 4 = 4th step in height scale
17 | 5 = 5th step in height scale
18 |
19 | -25 = literal value 25%
20 | -50 = literal value 50%
21 | -75 = literal value 75%
22 | -100 = literal value 100%
23 |
24 | -auto = string value of auto
25 | -inherit = string value of inherit
26 |
27 | Media Query Extensions:
28 | -ns = not-small
29 | -m = medium
30 | -l = large
31 |
32 | */
33 |
34 | /* Height Scale */
35 |
36 | .h1 { height: 1rem; }
37 | .h2 { height: 2rem; }
38 | .h3 { height: 4rem; }
39 | .h4 { height: 8rem; }
40 | .h5 { height: 16rem; }
41 |
42 | /* Height Percentages - Based off of height of parent */
43 |
44 | .h-25 { height: 25%; }
45 | .h-50 { height: 50%; }
46 | .h-75 { height: 75%; }
47 | .h-100 { height: 100%; }
48 |
49 | .min-h-100 { min-height: 100%; }
50 |
51 | /* Screen Height Percentage */
52 |
53 | .vh-25 { height: 25vh; }
54 | .vh-50 { height: 50vh; }
55 | .vh-75 { height: 75vh; }
56 | .vh-100 { height: 100vh; }
57 |
58 | .min-vh-100 { min-height: 100vh; }
59 |
60 |
61 | /* String Properties */
62 |
63 | .h-auto { height: auto; }
64 | .h-inherit { height: inherit; }
65 |
66 | @media (--breakpoint-not-small) {
67 | .h1-ns { height: 1rem; }
68 | .h2-ns { height: 2rem; }
69 | .h3-ns { height: 4rem; }
70 | .h4-ns { height: 8rem; }
71 | .h5-ns { height: 16rem; }
72 | .h-25-ns { height: 25%; }
73 | .h-50-ns { height: 50%; }
74 | .h-75-ns { height: 75%; }
75 | .h-100-ns { height: 100%; }
76 | .min-h-100-ns { min-height: 100%; }
77 | .vh-25-ns { height: 25vh; }
78 | .vh-50-ns { height: 50vh; }
79 | .vh-75-ns { height: 75vh; }
80 | .vh-100-ns { height: 100vh; }
81 | .min-vh-100-ns { min-height: 100vh; }
82 | .h-auto-ns { height: auto; }
83 | .h-inherit-ns { height: inherit; }
84 | }
85 |
86 | @media (--breakpoint-medium) {
87 | .h1-m { height: 1rem; }
88 | .h2-m { height: 2rem; }
89 | .h3-m { height: 4rem; }
90 | .h4-m { height: 8rem; }
91 | .h5-m { height: 16rem; }
92 | .h-25-m { height: 25%; }
93 | .h-50-m { height: 50%; }
94 | .h-75-m { height: 75%; }
95 | .h-100-m { height: 100%; }
96 | .min-h-100-ns { min-height: 100%; }
97 | .vh-25-m { height: 25vh; }
98 | .vh-50-m { height: 50vh; }
99 | .vh-75-m { height: 75vh; }
100 | .vh-100-m { height: 100vh; }
101 | .min-vh-100-m { min-height: 100vh; }
102 | .h-auto-m { height: auto; }
103 | .h-inherit-m { height: inherit; }
104 | }
105 |
106 | @media (--breakpoint-large) {
107 | .h1-l { height: 1rem; }
108 | .h2-l { height: 2rem; }
109 | .h3-l { height: 4rem; }
110 | .h4-l { height: 8rem; }
111 | .h5-l { height: 16rem; }
112 | .h-25-l { height: 25%; }
113 | .h-50-l { height: 50%; }
114 | .h-75-l { height: 75%; }
115 | .h-100-l { height: 100%; }
116 | .min-h-100-l { min-height: 100%; }
117 | .vh-25-l { height: 25vh; }
118 | .vh-50-l { height: 50vh; }
119 | .vh-75-l { height: 75vh; }
120 | .vh-100-l { height: 100vh; }
121 | .min-vh-100-l { min-height: 100vh; }
122 | .h-auto-l { height: auto; }
123 | .h-inherit-l { height: inherit; }
124 | }
125 |
--------------------------------------------------------------------------------
/src/_hovers.css:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | HOVER EFFECTS
4 | Docs: http://tachyons.io/docs/themes/hovers/
5 |
6 | - Dim
7 | - Hide Child
8 | - Underline text
9 | - Grow
10 | - Pointer
11 | - Shadow
12 |
13 | */
14 |
15 | /*
16 |
17 | Dim element on hover by adding the dim class.
18 |
19 | */
20 | .dim {
21 | opacity: 1;
22 | transition: opacity .15s ease-in;
23 | }
24 | .dim:hover,
25 | .dim:focus {
26 | opacity: .5;
27 | transition: opacity .15s ease-in;
28 | }
29 | .dim:active {
30 | opacity: .8; transition: opacity .15s ease-out;
31 | }
32 |
33 | /*
34 |
35 | Hide child & reveal on hover:
36 |
37 | Put the hide-child class on a parent element and any nested element with the
38 | child class will be hidden and displayed on hover or focus.
39 |
40 |
41 |
Hidden until hover or focus
42 |
Hidden until hover or focus
43 |
Hidden until hover or focus
44 |
Hidden until hover or focus
45 |
11 | 
8 | 
7 |