From ed4be926a7217018e052e3fecda92e4ee671d950 Mon Sep 17 00:00:00 2001 From: Darin Dimitroff Date: Tue, 3 Jan 2017 11:44:31 +0200 Subject: Cleans up and refactors CSS --- src/css/imports/_background-position.css | 131 +++++++++++-------------- src/css/imports/_background-size.css | 21 +--- src/css/imports/_border-radius.css | 16 ++++ src/css/imports/_border-style.css | 23 ----- src/css/imports/_border-widths.css | 23 ----- src/css/imports/_borders.css | 36 ++----- src/css/imports/_box-shadow.css | 41 -------- src/css/imports/_clears.css | 10 -- src/css/imports/_colors.css | 14 --- src/css/imports/_coordinates.css | 27 ------ src/css/imports/_debug-children.css | 11 --- src/css/imports/_debug-grid.css | 11 --- src/css/imports/_debug.css | 14 --- src/css/imports/_display.css | 27 ------ src/css/imports/_flexbox.css | 11 --- src/css/imports/_floats.css | 28 ------ src/css/imports/_font-family.css | 99 ------------------- src/css/imports/_font-style.css | 12 --- src/css/imports/_font-weight.css | 26 ----- src/css/imports/_forms.css | 4 +- src/css/imports/_heights.css | 35 ------- src/css/imports/_images.css | 1 + src/css/imports/_letter-spacing.css | 33 ------- src/css/imports/_line-height.css | 19 +--- src/css/imports/_links.css | 9 +- src/css/imports/_lists.css | 9 +- src/css/imports/_max-widths.css | 41 +------- src/css/imports/_module-template.css | 22 ----- src/css/imports/_overflow.css | 11 --- src/css/imports/_position.css | 12 --- src/css/imports/_skins-pseudo.css | 159 ------------------------------- src/css/imports/_skins.css | 134 -------------------------- src/css/imports/_states.css | 47 +-------- src/css/imports/_styles.css | 20 ++-- src/css/imports/_text-align.css | 21 ---- src/css/imports/_text-decoration.css | 13 --- src/css/imports/_text-transform.css | 21 ---- src/css/imports/_type-scale.css | 12 --- src/css/imports/_typography.css | 12 ++- src/css/imports/_utilities.css | 44 --------- src/css/imports/_variables.css | 41 +++++--- src/css/imports/_vertical-align.css | 11 --- src/css/imports/_visibility.css | 18 ---- src/css/imports/_white-space.css | 13 --- src/css/imports/_widths.css | 40 -------- src/css/imports/_word-break.css | 15 --- src/css/imports/_z-index.css | 36 ------- src/css/main.css | 3 - 48 files changed, 145 insertions(+), 1292 deletions(-) delete mode 100755 src/css/imports/_box-shadow.css delete mode 100755 src/css/imports/_font-family.css delete mode 100755 src/css/imports/_letter-spacing.css delete mode 100755 src/css/imports/_module-template.css delete mode 100755 src/css/imports/_skins-pseudo.css delete mode 100755 src/css/imports/_skins.css (limited to 'src') diff --git a/src/css/imports/_background-position.css b/src/css/imports/_background-position.css index 4d850b6..8da6ef5 100755 --- a/src/css/imports/_background-position.css +++ b/src/css/imports/_background-position.css @@ -1,126 +1,105 @@ -/* - - BACKGROUND POSITION - - Base: - bg = background - - Modifiers: - -center = center center - -top = top center - -right = center right - -bottom = bottom center - -left = center left - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - - */ - .bg-center { background-repeat: no-repeat; - background-position: center center; + background-position: center center; } -.bg-top { - background-repeat: no-repeat; - background-position: top center; +.bg-top { + background-repeat: no-repeat; + background-position: top center; } -.bg-right { - background-repeat: no-repeat; - background-position: center right; +.bg-right { + background-repeat: no-repeat; + background-position: center right; } -.bg-bottom { - background-repeat: no-repeat; - background-position: bottom center; +.bg-bottom { + background-repeat: no-repeat; + background-position: bottom center; } -.bg-left { - background-repeat: no-repeat; - background-position: center left; +.bg-left { + background-repeat: no-repeat; + background-position: center left; } @media (--breakpoint-not-small) { - .bg-center-ns { + .bg-center-ns { background-repeat: no-repeat; - background-position: center center; + background-position: center center; } - .bg-top-ns { - background-repeat: no-repeat; - background-position: top center; + .bg-top-ns { + background-repeat: no-repeat; + background-position: top center; } - .bg-right-ns { - background-repeat: no-repeat; - background-position: center right; + .bg-right-ns { + background-repeat: no-repeat; + background-position: center right; } - .bg-bottom-ns { - background-repeat: no-repeat; - background-position: bottom center; + .bg-bottom-ns { + background-repeat: no-repeat; + background-position: bottom center; } - .bg-left-ns { - background-repeat: no-repeat; - background-position: center left; + .bg-left-ns { + background-repeat: no-repeat; + background-position: center left; } } @media (--breakpoint-medium) { - .bg-center-m { + .bg-center-m { background-repeat: no-repeat; - background-position: center center; + background-position: center center; } - .bg-top-m { - background-repeat: no-repeat; - background-position: top center; + .bg-top-m { + background-repeat: no-repeat; + background-position: top center; } - .bg-right-m { - background-repeat: no-repeat; - background-position: center right; + .bg-right-m { + background-repeat: no-repeat; + background-position: center right; } - .bg-bottom-m { - background-repeat: no-repeat; - background-position: bottom center; + .bg-bottom-m { + background-repeat: no-repeat; + background-position: bottom center; } - .bg-left-m { - background-repeat: no-repeat; - background-position: center left; + .bg-left-m { + background-repeat: no-repeat; + background-position: center left; } } @media (--breakpoint-large) { - .bg-center-l { + .bg-center-l { background-repeat: no-repeat; - background-position: center center; + background-position: center center; } - .bg-top-l { - background-repeat: no-repeat; - background-position: top center; + .bg-top-l { + background-repeat: no-repeat; + background-position: top center; } - .bg-right-l { - background-repeat: no-repeat; - background-position: center right; + .bg-right-l { + background-repeat: no-repeat; + background-position: center right; } - .bg-bottom-l { - background-repeat: no-repeat; - background-position: bottom center; + .bg-bottom-l { + background-repeat: no-repeat; + background-position: bottom center; } - .bg-left-l { - background-repeat: no-repeat; - background-position: center left; + .bg-left-l { + background-repeat: no-repeat; + background-position: center left; } } diff --git a/src/css/imports/_background-size.css b/src/css/imports/_background-size.css index 18afe5c..bcb90a0 100755 --- a/src/css/imports/_background-size.css +++ b/src/css/imports/_background-size.css @@ -1,22 +1,5 @@ -/* - - BACKGROUND SIZE - Docs: http://tachyons.io/docs/themes/background-size/ - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - -*/ - -/* - Often used in combination with background image set as an inline style - on an html element. -*/ - - .cover { background-size: cover!important; } - .contain { background-size: contain!important; } +.cover { background-size: cover!important; } +.contain { background-size: contain!important; } @media (--breakpoint-not-small) { .cover-ns { background-size: cover!important; } diff --git a/src/css/imports/_border-radius.css b/src/css/imports/_border-radius.css index 8cde05d..232122f 100755 --- a/src/css/imports/_border-radius.css +++ b/src/css/imports/_border-radius.css @@ -1,7 +1,11 @@ .br0 { border-radius: 0!important; } + .br1 { border-radius: var(--border-radius); } + .br-100 { border-radius: 100%; } + .br-pill { border-radius: 9999px; } + .br--bottom { border-top-left-radius: 0; border-top-right-radius: 0; @@ -21,9 +25,13 @@ @media (--breakpoint-not-small) { .br0-ns { border-radius: 0; } + .br1-ns { border-radius: var(--border-radius); } + .br-100-ns { border-radius: 100%; } + .br-pill-ns { border-radius: 9999px; } + .br--bottom-ns { border-top-left-radius: 0; border-top-right-radius: 0; @@ -44,9 +52,13 @@ @media (--breakpoint-medium) { .br0-m { border-radius: 0; } + .br1-m { border-radius: var(--border-radius); } + .br-100-m { border-radius: 100%; } + .br-pill-m { border-radius: 9999px; } + .br--bottom-m { border-top-left-radius: 0; border-top-right-radius: 0; @@ -67,9 +79,13 @@ @media (--breakpoint-large) { .br0-l { border-radius: 0; } + .br1-l { border-radius: var(--border-radius); } + .br-100-l { border-radius: 100%; } + .br-pill-l { border-radius: 9999px; } + .br--bottom-l { border-radius-top-left: 0; border-radius-top-right: 0; diff --git a/src/css/imports/_border-style.css b/src/css/imports/_border-style.css index b9eb61b..ec3c8d4 100755 --- a/src/css/imports/_border-style.css +++ b/src/css/imports/_border-style.css @@ -1,26 +1,3 @@ -/* - - BORDER STYLES - Docs: http://tachyons.io/docs/themes/borders/ - - Depends on base border module in _borders.css - - Base: - b = border-style - - Modifiers: - --none = none - --dotted = dotted - --dashed = dashed - --solid = solid - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - - */ - .b--dotted { border-style: dotted; } .b--dashed { border-style: dashed; } .b--solid { border-style: solid; } diff --git a/src/css/imports/_border-widths.css b/src/css/imports/_border-widths.css index 2af7d7e..9067787 100755 --- a/src/css/imports/_border-widths.css +++ b/src/css/imports/_border-widths.css @@ -1,26 +1,3 @@ -/* - - BORDER WIDTHS - Docs: http://tachyons.io/docs/themes/borders/ - - Base: - bw = border-width - - Modifiers: - 0 = 0 width border - 1 = 1st step in border-width scale - 2 = 2nd step in border-width scale - 3 = 3rd step in border-width scale - 4 = 4th step in border-width scale - 5 = 5th step in border-width scale - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - -*/ - .bw0 { border-width: 0; } .bw1 { border-width: .125rem; } .bw2 { border-width: var(--spacing-extra-small); } diff --git a/src/css/imports/_borders.css b/src/css/imports/_borders.css index ce49e42..42cbe8e 100755 --- a/src/css/imports/_borders.css +++ b/src/css/imports/_borders.css @@ -1,32 +1,9 @@ -/* - - BORDERS - Docs: http://tachyons.io/docs/themes/borders/ - - Base: - b = border - - Modifiers: - a = all - t = top - r = right - b = bottom - l = left - n = none - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - -*/ - - .ba { border-style: solid; border-width: 1px; } - .bt { border-top-style: solid; border-top-width: 1px; } - .br { border-right-style: solid; border-right-width: 1px; } - .bb { border-bottom-style: solid; border-bottom-width: 1px; } - .bl { border-left-style: solid; border-left-width: 1px; } - .bn { border-style: none; border-width: 0; } +.ba { border-style: solid; border-width: 1px; } +.bt { border-top-style: solid; border-top-width: 1px; } +.br { border-right-style: solid; border-right-width: 1px; } +.bb { border-bottom-style: solid; border-bottom-width: 1px; } +.bl { border-left-style: solid; border-left-width: 1px; } +.bn { border-style: none; border-width: 0; } @media (--breakpoint-not-small) { @@ -55,4 +32,3 @@ .bl-l { border-left-style: solid; border-left-width: 1px; } .bn-l { border-style: none; border-width: 0; } } - diff --git a/src/css/imports/_box-shadow.css b/src/css/imports/_box-shadow.css deleted file mode 100755 index e744bc7..0000000 --- a/src/css/imports/_box-shadow.css +++ /dev/null @@ -1,41 +0,0 @@ -/* - - BOX-SHADOW - Docs: http://tachyons.io/docs/themes/box-shadow/ - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - - */ - -.shadow-1 { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); } -.shadow-2 { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); } -.shadow-3 { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); } -.shadow-4 { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); } -.shadow-5 { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); } - -@media (--breakpoint-not-small) { - .shadow-1-ns { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); } - .shadow-2-ns { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); } - .shadow-3-ns { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); } - .shadow-4-ns { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); } - .shadow-5-ns { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); } -} - -@media (--breakpoint-medium) { - .shadow-1-m { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); } - .shadow-2-m { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); } - .shadow-3-m { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); } - .shadow-4-m { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); } - .shadow-5-m { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); } -} - -@media (--breakpoint-large) { - .shadow-1-l { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); } - .shadow-2-l { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); } - .shadow-3-l { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); } - .shadow-4-l { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); } - .shadow-5-l { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); } -} diff --git a/src/css/imports/_clears.css b/src/css/imports/_clears.css index 14d8e1d..43bf2b2 100755 --- a/src/css/imports/_clears.css +++ b/src/css/imports/_clears.css @@ -1,13 +1,3 @@ -/* - - CLEARFIX - http://tachyons.io/docs/layout/clearfix/ - -*/ - -/* Nicolas Gallaghers Clearfix solution - Ref: http://nicolasgallagher.com/micro-clearfix-hack/ */ - .cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } diff --git a/src/css/imports/_colors.css b/src/css/imports/_colors.css index 7449191..f13fe57 100755 --- a/src/css/imports/_colors.css +++ b/src/css/imports/_colors.css @@ -1,17 +1,3 @@ -/* Color variables */ - -:root { - --primary: rgba(255, 68, 0, 1); - --highlight: rgba(254, 213, 198, 1); - --white: rgba(255, 255, 255, 1); - --off-white: rgba(255, 253, 252, 1); - --grey-1: rgba(245, 243, 242, 1); - --grey-2: rgba(235, 231, 230, 1); - --grey-3: rgba(89, 87, 86, 1); - --grey-4: rgba(66, 64, 64, 1); - --black: rgba(43, 37, 35, 1); -} - /* Text colors */ .primary { diff --git a/src/css/imports/_coordinates.css b/src/css/imports/_coordinates.css index 53e43de..749fed8 100755 --- a/src/css/imports/_coordinates.css +++ b/src/css/imports/_coordinates.css @@ -1,30 +1,3 @@ -/* - - COORDINATES - Docs: http://tachyons.io/docs/layout/position/ - - Use in combination with the position module. - - Base: - top - bottom - right - left - - Modifiers: - -0 = literal value 0 - -1 = literal value 1 - -2 = literal value 2 - --1 = literal value -1 - --2 = literal value -2 - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - -*/ - .top-0 { top: 0; } .right-0 { right: 0; } .bottom-0 { bottom: 0; } diff --git a/src/css/imports/_debug-children.css b/src/css/imports/_debug-children.css index 10204da..8ce1039 100755 --- a/src/css/imports/_debug-children.css +++ b/src/css/imports/_debug-children.css @@ -1,14 +1,3 @@ -/* - - DEBUG CHILDREN - Docs: http://tachyons.io/docs/debug/ - - Just add the debug class to any element to see outlines on its - children. - -*/ - .debug * { outline: 1px solid gold; } .debug-white * { outline: 1px solid white; } .debug-black * { outline: 1px solid black; } - diff --git a/src/css/imports/_debug-grid.css b/src/css/imports/_debug-grid.css index c5beeb8..2aa48fa 100755 --- a/src/css/imports/_debug-grid.css +++ b/src/css/imports/_debug-grid.css @@ -1,14 +1,3 @@ -/* - - DEBUG GRID - http://tachyons.io/docs/debug-grid/ - - Can be useful for debugging layout issues - or helping to make sure things line up perfectly. - Just tack one of these classes onto a parent element. - -*/ - .debug-grid { background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTRDOTY4N0U2N0VFMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTRDOTY4N0Q2N0VFMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3NjY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3NzY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsBS+GMAAAAjSURBVHjaYvz//z8DLsD4gcGXiYEAGBIKGBne//fFpwAgwAB98AaF2pjlUQAAAABJRU5ErkJggg==) repeat top left; } diff --git a/src/css/imports/_debug.css b/src/css/imports/_debug.css index f09f2b5..3054635 100755 --- a/src/css/imports/_debug.css +++ b/src/css/imports/_debug.css @@ -1,16 +1,3 @@ -/* - - DEBUG (PESTICIDE) - Docs: http://tachyons.io/docs/debug/ - - This is a partial you have to manually include in your - build file. It places a different colored outline on - each element which can help you debug layout issues. - There is also a handy chrome extension that can - be found at http://pesticide.io - -*/ - body { outline: 1px solid #2980B9!important; } article { outline: 1px solid #3498DB!important; } nav { outline: 1px solid #0088C3!important; } @@ -129,4 +116,3 @@ rp { outline: 1px solid #803E49!important; } span { outline: 1px solid #CC2643!important; } br { outline: 1px solid #DB687D!important; } wbr { outline: 1px solid #DB175B!important; } - diff --git a/src/css/imports/_display.css b/src/css/imports/_display.css index 13ef1be..0a7c8f7 100755 --- a/src/css/imports/_display.css +++ b/src/css/imports/_display.css @@ -1,29 +1,3 @@ -/* - - DISPLAY - Docs: http://tachyons.io/docs/layout/display - - Base: - d = display - - Modifiers: - n = none - b = block - ib = inline-block - it = inline-table - t = table - tc = table-cell - tr = table-row - tcol = table-column - tcolg = table-column-group - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - -*/ - .dn { display: none; } .di { display: inline; } .db { display: block; } @@ -101,4 +75,3 @@ width: 100%; } } - diff --git a/src/css/imports/_flexbox.css b/src/css/imports/_flexbox.css index 19409b6..e573a69 100755 --- a/src/css/imports/_flexbox.css +++ b/src/css/imports/_flexbox.css @@ -1,14 +1,3 @@ -/* - - FLEXBOX - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - -*/ - .flex { display: flex; } .inline-flex { display: inline-flex; } diff --git a/src/css/imports/_floats.css b/src/css/imports/_floats.css index d5b3912..8735205 100755 --- a/src/css/imports/_floats.css +++ b/src/css/imports/_floats.css @@ -1,31 +1,3 @@ -/* - - FLOATS - http://tachyons.io/docs/layout/floats/ - - 1. Floated elements are automatically rendered as block level elements. - Setting floats to display inline will fix the double margin bug in - ie6. You know... just in case. - - 2. Don't forget to clearfix your floats with .cf - - Base: - f = float - - Modifiers: - l = left - r = right - n = none - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - -*/ - - - .fl { float: left; _display: inline; } .fr { float: right; _display: inline; } .fn { float: none; } diff --git a/src/css/imports/_font-family.css b/src/css/imports/_font-family.css deleted file mode 100755 index f71d65d..0000000 --- a/src/css/imports/_font-family.css +++ /dev/null @@ -1,99 +0,0 @@ -/* - - FONT FAMILY GROUPS - Docs: http://tachyons.io/docs/typography/font-family/ - -*/ - - -.sans-serif { - font-family: Nunito Sans, -apple-system, BlinkMacSystemFont, - 'avenir next', avenir, - helvetica, 'helvetica neue', - ubuntu, - roboto, noto, - 'segoe ui', arial, - sans-serif; -} - -.serif { - font-family: georgia, - times, - serif; -} - -.system-sans-serif { - font-family: sans-serif; -} - -.system-serif { - font-family: serif; -} - - -/* Monospaced Typefaces (for code) */ - -/* From http://cssfontstack.com */ -code, .code { - font-family: Consolas, - monaco, - monospace; -} - -.courier { - font-family: 'Courier Next', - courier, - monospace; -} - - -/* Sans-Serif Typefaces */ - -.helvetica { - font-family: 'helvetica neue', helvetica, - sans-serif; -} - -.avenir { - font-family: 'avenir next', avenir, - sans-serif; -} - - -/* Serif Typefaces */ - -.athelas { - font-family: athelas, - georgia, - serif; -} - -.georgia { - font-family: georgia, - serif; -} - -.times { - font-family: times, - serif; -} - -.bodoni { - font-family: "Bodoni MT", - serif; -} - -.calisto { - font-family: "Calisto MT", - serif; -} - -.garamond { - font-family: garamond, - serif; -} - -.baskerville { - font-family: baskerville, - serif; -} diff --git a/src/css/imports/_font-style.css b/src/css/imports/_font-style.css index d095dfe..08f20af 100755 --- a/src/css/imports/_font-style.css +++ b/src/css/imports/_font-style.css @@ -1,15 +1,3 @@ -/* - - FONT STYLE - Docs: http://tachyons.io/docs/typography/font-style/ - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - -*/ - .i { font-style: italic; } .fs-normal { font-style: normal; } diff --git a/src/css/imports/_font-weight.css b/src/css/imports/_font-weight.css index 990a05a..fabba82 100755 --- a/src/css/imports/_font-weight.css +++ b/src/css/imports/_font-weight.css @@ -1,29 +1,3 @@ -/* - - FONT WEIGHT - Docs: http://tachyons.io/docs/typography/font-weight/ - - Base - fw = font-weight - - Modifiers: - 1 = literal value 100 - 2 = literal value 200 - 3 = literal value 300 - 4 = literal value 400 - 5 = literal value 500 - 6 = literal value 600 - 7 = literal value 700 - 8 = literal value 800 - 9 = literal value 900 - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - -*/ - .normal { font-weight: normal; } .b { font-weight: bold; } .fw1 { font-weight: 100; } diff --git a/src/css/imports/_forms.css b/src/css/imports/_forms.css index 3d7cab3..553bc4c 100755 --- a/src/css/imports/_forms.css +++ b/src/css/imports/_forms.css @@ -61,8 +61,8 @@ label { font-size: .875rem; font-weight: 800; - color: var(--primary); - background-color: var(--grey-2); + color: var(--white); + background-color: var(--primary); border-radius: var(--border-radius); padding: var(--spacing-extra-small) var(--spacing-small); position: absolute; diff --git a/src/css/imports/_heights.css b/src/css/imports/_heights.css index 6ada204..68487ab 100755 --- a/src/css/imports/_heights.css +++ b/src/css/imports/_heights.css @@ -1,38 +1,3 @@ -/* - - HEIGHTS - Docs: http://tachyons.io/docs/layout/heights/ - - Base: - h = height - min-h = min-height - min-vh = min-height vertical screen height - vh = vertical screen height - - Modifiers - 1 = 1st step in height scale - 2 = 2nd step in height scale - 3 = 3rd step in height scale - 4 = 4th step in height scale - 5 = 5th step in height scale - - -25 = literal value 25% - -50 = literal value 50% - -75 = literal value 75% - -100 = literal value 100% - - -auto = string value of auto - -inherit = string value of inherit - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - -*/ - -/* Height Scale */ - .h1 { height: var(--spacing-medium); } .h2 { height: 2rem; } .h3 { height: 4rem; } diff --git a/src/css/imports/_images.css b/src/css/imports/_images.css index 4cc50a4..23bab47 100755 --- a/src/css/imports/_images.css +++ b/src/css/imports/_images.css @@ -2,6 +2,7 @@ img { max-width: 100%; } +/* Remove border-radiius from full-width images */ img:not(.w-100) { border-radius: var(--border-radius); } diff --git a/src/css/imports/_letter-spacing.css b/src/css/imports/_letter-spacing.css deleted file mode 100755 index d226513..0000000 --- a/src/css/imports/_letter-spacing.css +++ /dev/null @@ -1,33 +0,0 @@ -/* - - LETTER SPACING - Docs: http://tachyons.io/docs/typography/tracking/ - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - -*/ - -.tracked { letter-spacing: .1em; } -.tracked-tight { letter-spacing: -.05em; } -.tracked-mega { letter-spacing: .25em; } - -@media (--breakpoint-not-small) { - .tracked-ns { letter-spacing: .1em; } - .tracked-tight-ns { letter-spacing: -.05em; } - .tracked-mega-ns { letter-spacing: .25em; } -} - -@media (--breakpoint-medium) { - .tracked-m { letter-spacing: .1em; } - .tracked-tight-m { letter-spacing: -.05em; } - .tracked-mega-m { letter-spacing: .25em; } -} - -@media (--breakpoint-large) { - .tracked-l { letter-spacing: .1em; } - .tracked-tight-l { letter-spacing: -.05em; } - .tracked-mega-l { letter-spacing: .25em; } -} diff --git a/src/css/imports/_line-height.css b/src/css/imports/_line-height.css index afbef0d..8d08a4c 100755 --- a/src/css/imports/_line-height.css +++ b/src/css/imports/_line-height.css @@ -1,18 +1,6 @@ -/* - - LINE HEIGHT / LEADING - Docs: http://tachyons.io/docs/typography/line-height - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - -*/ - - .lh-solid { line-height: 1; } - .lh-title { line-height: 1.25; } - .lh-copy { line-height: 1.5; } +.lh-solid { line-height: 1; } +.lh-title { line-height: 1.25; } +.lh-copy { line-height: 1.5; } @media (--breakpoint-not-small) { .lh-solid-ns { line-height: 1; } @@ -31,4 +19,3 @@ .lh-title-l { line-height: 1.25; } .lh-copy-l { line-height: 1.5; } } - diff --git a/src/css/imports/_links.css b/src/css/imports/_links.css index 243b5f0..7d7da39 100755 --- a/src/css/imports/_links.css +++ b/src/css/imports/_links.css @@ -1,13 +1,6 @@ -/* - - LINKS - Docs: http://tachyons.io/docs/elements/links/ - -*/ - .link { text-decoration: none; - transition: color .15s ease-in; + transition: var(--hover-transition); color: inherit; } diff --git a/src/css/imports/_lists.css b/src/css/imports/_lists.css index 88ca28d..13f96b7 100755 --- a/src/css/imports/_lists.css +++ b/src/css/imports/_lists.css @@ -1,8 +1 @@ -/* - - LISTS - http://tachyons.io/docs/elements/lists/ - -*/ - -.list { list-style-type: none; } +.list { list-style-type: none; } diff --git a/src/css/imports/_max-widths.css b/src/css/imports/_max-widths.css index 516a31a..821e117 100755 --- a/src/css/imports/_max-widths.css +++ b/src/css/imports/_max-widths.css @@ -1,41 +1,8 @@ -/* - - MAX WIDTHS - Docs: http://tachyons.io/docs/layout/max-widths/ - - Base: - mw = max-width - - Modifiers - 1 = 1st step in width scale - 2 = 2nd step in width scale - 3 = 3rd step in width scale - 4 = 4th step in width scale - 5 = 5th step in width scale - 6 = 6st step in width scale - 7 = 7nd step in width scale - 8 = 8rd step in width scale - 9 = 9th step in width scale - - -100 = literal value 100% - - -none = string value none - - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - -*/ - -/* Max Width Percentages */ - .mw-100 { max-width: 100%; } /* Max Width Scale */ -.mw1 { max-width: var(--spacing-medium); } +.mw1 { max-width: 1rem; } .mw2 { max-width: 2rem; } .mw3 { max-width: 4rem; } .mw4 { max-width: 8rem; } @@ -52,7 +19,7 @@ @media (--breakpoint-not-small) { .mw-100-ns { max-width: 100%; } - .mw1-ns { max-width: var(--spacing-medium); } + .mw1-ns { max-width: 1rem; } .mw2-ns { max-width: 2rem; } .mw3-ns { max-width: 4rem; } .mw4-ns { max-width: 8rem; } @@ -68,7 +35,7 @@ @media (--breakpoint-medium) { .mw-100-m { max-width: 100%; } - .mw1-m { max-width: var(--spacing-medium); } + .mw1-m { max-width: 1rem; } .mw2-m { max-width: 2rem; } .mw3-m { max-width: 4rem; } .mw4-m { max-width: 8rem; } @@ -84,7 +51,7 @@ @media (--breakpoint-large) { .mw-100-l { max-width: 100%; } - .mw1-l { max-width: var(--spacing-medium); } + .mw1-l { max-width: 1rem; } .mw2-l { max-width: 2rem; } .mw3-l { max-width: 4rem; } .mw4-l { max-width: 8rem; } diff --git a/src/css/imports/_module-template.css b/src/css/imports/_module-template.css deleted file mode 100755 index 0447e0c..0000000 --- a/src/css/imports/_module-template.css +++ /dev/null @@ -1,22 +0,0 @@ -/* - - MODULE NAME - - Use this scaffolding to create or extend your own modules with tachyons - style architecture. - -*/ - - -@media (--breakpoint-not-small) { - -} - -@media (--breakpoint-medium) { - -} - -@media (--breakpoint-large) { - -} - diff --git a/src/css/imports/_overflow.css b/src/css/imports/_overflow.css index 82ca8eb..d65b69d 100755 --- a/src/css/imports/_overflow.css +++ b/src/css/imports/_overflow.css @@ -1,14 +1,3 @@ -/* - - OVERFLOW - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - - */ - .overflow-visible { overflow: visible; } .overflow-hidden { overflow: hidden; } .overflow-scroll { overflow: scroll; } diff --git a/src/css/imports/_position.css b/src/css/imports/_position.css index eaccbdf..93f147f 100755 --- a/src/css/imports/_position.css +++ b/src/css/imports/_position.css @@ -1,15 +1,3 @@ -/* - - POSITIONING - Docs: http://tachyons.io/docs/layout/position/ - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - -*/ - .static { position: static; } .relative { position: relative; } .absolute { position: absolute; } diff --git a/src/css/imports/_skins-pseudo.css b/src/css/imports/_skins-pseudo.css deleted file mode 100755 index 44f1f02..0000000 --- a/src/css/imports/_skins-pseudo.css +++ /dev/null @@ -1,159 +0,0 @@ -/* - - SKINS:PSEUDO - - Customize the color of an element when - it is focused or hovered over. - - */ - -.hover-black:hover, -.hover-black:focus { color: var(--black); } -.hover-near-black:hover, -.hover-near-black:focus { color: var(--near-black); } -.hover-dark-gray:hover, -.hover-dark-gray:focus { color: var(--dark-gray); } -.hover-mid-gray:hover, -.hover-mid-gray:focus { color: var(--mid-gray); } -.hover-gray:hover, -.hover-gray:focus { color: var(--gray); } -.hover-silver:hover, -.hover-silver:focus { color: var(--silver); } -.hover-light-silver:hover, -.hover-light-silver:focus { color: var(--light-silver); } -.hover-moon-gray:hover, -.hover-moon-gray:focus { color: var(--moon-gray); } -.hover-light-gray:hover, -.hover-light-gray:focus { color: var(--light-gray); } -.hover-near-white:hover, -.hover-near-white:focus { color: var(--near-white); } -.hover-white:hover, -.hover-white:focus { color: var(--white); } - -.hover-bg-black:hover, -.hover-bg-black:focus { background-color: var(--black); } -.hover-bg-near-black:hover, -.hover-bg-near-black:focus { background-color: var(--near-black); } -.hover-bg-dark-gray:hover, -.hover-bg-dark-gray:focus { background-color: var(--dark-gray); } -.hover-bg-dark-gray:focus, -.hover-bg-mid-gray:hover { background-color: var(--mid-gray); } -.hover-bg-gray:hover, -.hover-bg-gray:focus { background-color: var(--gray); } -.hover-bg-silver:hover, -.hover-bg-silver:focus { background-color: var(--silver); } -.hover-bg-light-silver:hover, -.hover-bg-light-silver:focus { background-color: var(--light-silver); } -.hover-bg-moon-gray:hover, -.hover-bg-moon-gray:focus { background-color: var(--moon-gray); } -.hover-bg-light-gray:hover, -.hover-bg-light-gray:focus { background-color: var(--light-gray); } -.hover-bg-near-white:hover, -.hover-bg-near-white:focus { background-color: var(--near-white); } -.hover-bg-white:hover, -.hover-bg-white:focus { background-color: var(--white); } -.hover-bg-transparent:hover, -.hover-bg-transparent:focus { background-color: var(--transparent); } - -.hover-dark-red:hover, -.hover-dark-red:focus { color: var(--dark-red); } -.hover-red:hover, -.hover-red:focus { color: var(--red); } -.hover-light-red:hover, -.hover-light-red:focus { color: var(--light-red); } -.hover-orange:hover, -.hover-orange:focus { color: var(--orange); } -.hover-gold:hover, -.hover-gold:focus { color: var(--gold); } -.hover-yellow:hover, -.hover-yellow:focus { color: var(--yellow); } -.hover-light-yellow:hover, -.hover-light-yellow:focus { color: var(--light-yellow); } -.hover-purple:hover, -.hover-purple:focus { color: var(--purple); } -.hover-light-purple:hover, -.hover-light-purple:focus { color: var(--light-purple); } -.hover-dark-pink:hover, -.hover-dark-pink:focus { color: var(--dark-pink); } -.hover-hot-pink:hover, -.hover-hot-pink:focus { color: var(--hot-pink); } -.hover-pink:hover, -.hover-pink:focus { color: var(--pink); } -.hover-light-pink:hover, -.hover-light-pink:focus { color: var(--light-pink); } -.hover-dark-green:hover, -.hover-dark-green:focus { color: var(--dark-green); } -.hover-green:hover, -.hover-green:focus { color: var(--green); } -.hover-light-green:hover, -.hover-light-green:focus { color: var(--light-green); } -.hover-navy:hover, -.hover-navy:focus { color: var(--navy); } -.hover-dark-blue:hover, -.hover-dark-blue:focus { color: var(--dark-blue); } -.hover-blue:hover, -.hover-blue:focus { color: var(--blue); } -.hover-light-blue:hover, -.hover-light-blue:focus { color: var(--light-blue); } -.hover-lightest-blue:hover, -.hover-lightest-blue:focus { color: var(--lightest-blue); } -.hover-washed-blue:hover, -.hover-washed-blue:focus { color: var(--washed-blue); } -.hover-washed-green:hover, -.hover-washed-green:focus { color: var(--washed-green); } -.hover-washed-yellow:hover, -.hover-washed-yellow:focus { color: var(--washed-yellow); } -.hover-washed-red:hover, -.hover-washed-red:focus { color: var(--washed-red); } - -.hover-bg-dark-red:hover, -.hover-bg-dark-red:focus { background-color: var(--dark-red); } -.hover-bg-red:hover, -.hover-bg-red:focus { background-color: var(--red); } -.hover-bg-light-red:hover, -.hover-bg-light-red:focus { background-color: var(--light-red); } -.hover-bg-orange:hover, -.hover-bg-orange:focus { background-color: var(--orange); } -.hover-bg-gold:hover, -.hover-bg-gold:focus { background-color: var(--gold); } -.hover-bg-yellow:hover, -.hover-bg-yellow:focus { background-color: var(--yellow); } -.hover-bg-light-yellow:hover, -.hover-bg-light-yellow:focus { background-color: var(--light-yellow); } -.hover-bg-purple:hover, -.hover-bg-purple:focus { background-color: var(--purple); } -.hover-bg-light-purple:hover, -.hover-bg-light-purple:focus { background-color: var(--light-purple); } -.hover-bg-dark-pink:hover, -.hover-bg-dark-pink:focus { background-color: var(--dark-pink); } -.hover-bg-hot-pink:hover, -.hover-bg-hot-pink:focus { background-color: var(--hot-pink); } -.hover-bg-pink:hover, -.hover-bg-pink:focus { background-color: var(--pink); } -.hover-bg-light-pink:hover, -.hover-bg-light-pink:focus { background-color: var(--light-pink); } -.hover-bg-dark-green:hover, -.hover-bg-dark-green:focus { background-color: var(--dark-green); } -.hover-bg-green:hover, -.hover-bg-green:focus { background-color: var(--green); } -.hover-bg-light-green:hover, -.hover-bg-light-green:focus { background-color: var(--light-green); } -.hover-bg-navy:hover, -.hover-bg-navy:focus { background-color: var(--navy); } -.hover-bg-dark-blue:hover, -.hover-bg-dark-blue:focus { background-color: var(--dark-blue); } -.hover-bg-blue:hover, -.hover-bg-blue:focus { background-color: var(--blue); } -.hover-bg-light-blue:hover, -.hover-bg-light-blue:focus { background-color: var(--light-blue); } -.hover-bg-lightest-blue:hover, -.hover-bg-lightest-blue:focus { background-color: var(--lightest-blue); } -.hover-bg-washed-blue:hover, -.hover-bg-washed-blue:focus { background-color: var(--washed-blue); } -.hover-bg-washed-green:hover, -.hover-bg-washed-green:focus { background-color: var(--washed-green); } -.hover-bg-washed-yellow:hover, -.hover-bg-washed-yellow:focus { background-color: var(--washed-yellow); } -.hover-bg-washed-red:hover, -.hover-bg-washed-red:focus { background-color: var(--washed-red); } - diff --git a/src/css/imports/_skins.css b/src/css/imports/_skins.css deleted file mode 100755 index 9c1dcff..0000000 --- a/src/css/imports/_skins.css +++ /dev/null @@ -1,134 +0,0 @@ -/* - - SKINS - Docs: http://tachyons.io/docs/themes/skins/ - - Classes for setting foreground and background colors on elements. - If you haven't declared a border color, but set border on an element, it will - be set to the current text color. - -*/ - -/* Text colors */ - -.black-90 { color: var(--black-90); } -.black-80 { color: var(--black-80); } -.black-70 { color: var(--black-70); } -.black-60 { color: var(--black-60); } -.black-50 { color: var(--black-50); } -.black-40 { color: var(--black-40); } -.black-30 { color: var(--black-30); } -.black-20 { color: var(--black-20); } -.black-10 { color: var(--black-10); } -.black-05 { color: var(--black-05); } - -.white-90 { color: var(--white-90); } -.white-80 { color: var(--white-80); } -.white-70 { color: var(--white-70); } -.white-60 { color: var(--white-60); } -.white-50 { color: var(--white-50); } -.white-40 { color: var(--white-40); } -.white-30 { color: var(--white-30); } -.white-20 { color: var(--white-20); } -.white-10 { color: var(--white-10); } - -.black { color: var(--black); } -.near-black { color: var(--near-black); } -.dark-gray { color: var(--dark-gray); } -.mid-gray { color: var(--mid-gray); } -.gray { color: var(--gray); } -.silver { color: var(--silver); } -.light-silver { color: var(--light-silver); } -.moon-gray { color: var(--moon-gray); } -.light-gray { color: var(--light-gray); } -.near-white { color: var(--near-white); } -.white { color: var(--white); } - -.dark-red { color: var(--dark-red); } -.red { color: var(--red); } -.light-red { color: var(--light-red); } -.orange { color: var(--orange); } -.gold { color: var(--gold); } -.yellow { color: var(--yellow); } -.light-yellow { color: var(--light-yellow); } -.purple { color: var(--purple); } -.light-purple { color: var(--light-purple); } -.dark-pink { color: var(--dark-pink); } -.hot-pink { color: var(--hot-pink); } -.pink { color: var(--pink); } -.light-pink { color: var(--light-pink); } -.dark-green { color: var(--dark-green); } -.green { color: var(--green); } -.light-green { color: var(--light-green); } -.navy { color: var(--navy); } -.dark-blue { color: var(--dark-blue); } -.blue { color: var(--blue); } -.light-blue { color: var(--light-blue); } -.lightest-blue { color: var(--lightest-blue); } -.washed-blue { color: var(--washed-blue); } -.washed-green { color: var(--washed-green); } -.washed-yellow { color: var(--washed-yellow); } -.washed-red { color: var(--washed-red); } - -.bg-black-90 { background-color: var(--black-90); } -.bg-black-80 { background-color: var(--black-80); } -.bg-black-70 { background-color: var(--black-70); } -.bg-black-60 { background-color: var(--black-60); } -.bg-black-50 { background-color: var(--black-50); } -.bg-black-40 { background-color: var(--black-40); } -.bg-black-30 { background-color: var(--black-30); } -.bg-black-20 { background-color: var(--black-20); } -.bg-black-10 { background-color: var(--black-10); } -.bg-black-05 { background-color: var(--black-05); } -.bg-white-90 { background-color: var(--white-90); } -.bg-white-80 { background-color: var(--white-80); } -.bg-white-70 { background-color: var(--white-70); } -.bg-white-60 { background-color: var(--white-60); } -.bg-white-50 { background-color: var(--white-50); } -.bg-white-40 { background-color: var(--white-40); } -.bg-white-30 { background-color: var(--white-30); } -.bg-white-20 { background-color: var(--white-20); } -.bg-white-10 { background-color: var(--white-10); } - - - -/* Background colors */ - -.bg-black { background-color: var(--black); } -.bg-near-black { background-color: var(--near-black); } -.bg-dark-gray { background-color: var(--dark-gray); } -.bg-mid-gray { background-color: var(--mid-gray); } -.bg-gray { background-color: var(--gray); } -.bg-silver { background-color: var(--silver); } -.bg-light-silver { background-color: var(--light-silver); } -.bg-moon-gray { background-color: var(--moon-gray); } -.bg-light-gray { background-color: var(--light-gray); } -.bg-near-white { background-color: var(--near-white); } -.bg-white { background-color: var(--white); } -.bg-transparent { background-color: var(--transparent); } - -.bg-dark-red { background-color: var(--dark-red); } -.bg-red { background-color: var(--red); } -.bg-light-red { background-color: var(--light-red); } -.bg-orange { background-color: var(--orange); } -.bg-gold { background-color: var(--gold); } -.bg-yellow { background-color: var(--yellow); } -.bg-light-yellow { background-color: var(--light-yellow); } -.bg-purple { background-color: var(--purple); } -.bg-light-purple { background-color: var(--light-purple); } -.bg-dark-pink { background-color: var(--dark-pink); } -.bg-hot-pink { background-color: var(--hot-pink); } -.bg-pink { background-color: var(--pink); } -.bg-light-pink { background-color: var(--light-pink); } -.bg-dark-green { background-color: var(--dark-green); } -.bg-green { background-color: var(--green); } -.bg-light-green { background-color: var(--light-green); } -.bg-navy { background-color: var(--navy); } -.bg-dark-blue { background-color: var(--dark-blue); } -.bg-blue { background-color: var(--blue); } -.bg-light-blue { background-color: var(--light-blue); } -.bg-lightest-blue { background-color: var(--lightest-blue); } -.bg-washed-blue { background-color: var(--washed-blue); } -.bg-washed-green { background-color: var(--washed-green); } -.bg-washed-yellow { background-color: var(--washed-yellow); } -.bg-washed-red { background-color: var(--washed-red); } diff --git a/src/css/imports/_states.css b/src/css/imports/_states.css index f8f22a7..0dff909 100755 --- a/src/css/imports/_states.css +++ b/src/css/imports/_states.css @@ -1,12 +1,12 @@ /* Focus states */ -input:focus, textarea:focus a:focus { - box-shadow: 0 0 0 2px var(--primary); - outline: 0; +input:focus, textarea:focus, a:focus { + box-shadow: inset 0 0 0 2px var(--primary); + outline: 0!important; } button:focus { - box-shadow: 0 0 0 4px var(--primary); - outline: 0; + box-shadow: inset 0 0 0 4px var(--primary); + outline: 0!important; } .raise { @@ -41,43 +41,6 @@ button:focus { text-decoration: underline; } -/* Can combine this with overflow-hidden to make background images grow on hover - * even if you are using background-size: cover */ - -.grow { - -moz-osx-font-smoothing: grayscale; - backface-visibility: hidden; - transform: translateZ(0); - transition: transform 0.25s ease-out; -} - -.grow:hover, -.grow:focus { - transform: scale(1.05); -} - -.grow:active { - transform: scale(.90); -} - -.grow-large { - -moz-osx-font-smoothing: grayscale; - backface-visibility: hidden; - transform: translateZ(0); - transition: transform .25s ease-in-out; -} - -.grow-large:hover, -.grow-large:focus { - transform: scale(1.2); -} - -.grow-large:active { - transform: scale(.95); -} - -/* Add pointer on hover */ - .pointer:hover { cursor: pointer; } diff --git a/src/css/imports/_styles.css b/src/css/imports/_styles.css index 1b6eca0..687e1ba 100755 --- a/src/css/imports/_styles.css +++ b/src/css/imports/_styles.css @@ -1,11 +1,15 @@ -/* - - STYLES - - Add custom styles here. - -*/ - ::selection { background-color: var(--highlight); } + +/* Used in the navbar */ +.divider-grey { + box-shadow: inset 0 -4px 0 var(--grey-1); + /* Link hover states */ + & a { + transition: var(--hover-transition); + } + & ul a:hover { + box-shadow: inset 0 -4px 0 var(--primary); + } +} diff --git a/src/css/imports/_text-align.css b/src/css/imports/_text-align.css index b1e8bca..afe3b22 100755 --- a/src/css/imports/_text-align.css +++ b/src/css/imports/_text-align.css @@ -1,23 +1,3 @@ -/* - - TEXT ALIGN - Docs: http://tachyons.io/docs/typography/text-align/ - - Base - t = text-align - - Modifiers - l = left - r = right - c = center - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - -*/ - .tl { text-align: left; } .tr { text-align: right; } .tc { text-align: center; } @@ -39,4 +19,3 @@ .tr-l { text-align: right; } .tc-l { text-align: center; } } - diff --git a/src/css/imports/_text-decoration.css b/src/css/imports/_text-decoration.css index 574de27..38a813e 100755 --- a/src/css/imports/_text-decoration.css +++ b/src/css/imports/_text-decoration.css @@ -1,16 +1,3 @@ -/* - - TEXT DECORATION - Docs: http://tachyons.io/docs/typography/text-decoration/ - - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - -*/ - .strike { text-decoration: line-through; } .underline { text-decoration: underline; } .no-underline { text-decoration: none; } diff --git a/src/css/imports/_text-transform.css b/src/css/imports/_text-transform.css index 50ae73e..f4b73da 100755 --- a/src/css/imports/_text-transform.css +++ b/src/css/imports/_text-transform.css @@ -1,24 +1,3 @@ -/* - - TEXT TRANSFORM - Docs: http://tachyons.io/docs/typography/text-transform/ - - Base: - tt = text-transform - - Modifiers - c = capitalize - l = lowercase - u = uppercase - n = none - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - -*/ - .ttc { text-transform: capitalize; } .ttl { text-transform: lowercase; } .ttu { text-transform: uppercase; } diff --git a/src/css/imports/_type-scale.css b/src/css/imports/_type-scale.css index dd320a5..33436fb 100755 --- a/src/css/imports/_type-scale.css +++ b/src/css/imports/_type-scale.css @@ -1,15 +1,3 @@ -.f-6, -.f-headline { - font-size: 6rem; -} -.f-5, -.f-subheadline { - font-size: 5rem; -} - - -/* Type Scale */ - .f1 { font-size: 3rem; } .f2 { font-size: 2.25rem; } .f3 { font-size: 1.5rem; } diff --git a/src/css/imports/_typography.css b/src/css/imports/_typography.css index 3aba6ea..bf6483d 100755 --- a/src/css/imports/_typography.css +++ b/src/css/imports/_typography.css @@ -1,20 +1,22 @@ html { - font-size: 18px; + font-size: var(--font-size); @media (--breakpoint-medium) { - font-size: 20px; + font-size: var(--font-size-m); } @media (--breakpoint-large) { - font-size: 22px; + font-size: var(--font-size-l); } + background-color: var(--black); } body { + font-family: var(--font-family); font-size: var(--spacing-medium); - line-height: 1.5; + line-height: var(--line-height); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - background-color: var(--white); + background-color: var(--off-white); } p { diff --git a/src/css/imports/_utilities.css b/src/css/imports/_utilities.css index 01da910..809a749 100755 --- a/src/css/imports/_utilities.css +++ b/src/css/imports/_utilities.css @@ -1,22 +1,3 @@ -/* - - UTILITIES - -*/ - -/* This is for fluid media that is embedded from third party sites like youtube, vimeo etc. - * Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e - * Make sure there are no height and width attributes on the embedded media. - * Adapted from: https://github.com/suitcss/components-flex-embed - * - * Example: - * - *
- * - *
- * - * */ - .aspect-ratio { height: 0; position: relative; @@ -50,32 +31,7 @@ z-index: 100; } -.overflow-container { - overflow-y: scroll; -} - .center { margin-right: auto; margin-left: auto; } - -.fade-bottom-light { - position: relative; -} - -.fade-bottom-light:after { - - content: ""; - position: absolute; - z-index: 1; - bottom: 0; - left: 0; - pointer-events: none; - background-image: linear-gradient(to bottom, color(#F0F2F5 alpha(-100%)), var(--white) 90%); - width: 100%; - height: 3rem; - } - -.divider { - box-shadow: inset 0 -4px 0 var(--grey-1); -} diff --git a/src/css/imports/_variables.css b/src/css/imports/_variables.css index 177b1c1..fca464b 100644 --- a/src/css/imports/_variables.css +++ b/src/css/imports/_variables.css @@ -1,14 +1,33 @@ :root { - --border-radius: .25rem; - --hover-transition: all 150ms ease; + /* Colors */ + --primary: rgba(255, 68, 0, 1); + --highlight: rgba(254, 213, 198, 1); + --white: rgba(255, 255, 255, 1); + --off-white: rgba(255, 253, 252, 1); + --grey-1: rgba(245, 243, 242, 1); + --grey-2: rgba(235, 231, 230, 1); + --grey-3: rgba(89, 87, 86, 1); + --grey-4: rgba(66, 64, 64, 1); + --black: rgba(43, 37, 35, 1); - /* Sizing */ - --spacing-none: 0; - --spacing-extra-small: .25rem; - --spacing-small: .5rem; - --spacing-medium: 1rem; - --spacing-large: 2rem; - --spacing-extra-large: 4rem; - --spacing-extra-extra-large: 8rem; - --spacing-extra-extra-extra-large: 16rem; + /* Typography */ + --font-family: Nunito Sans, -apple-system, BlinkMacSystemFont, 'avenir next', avenir, helvetica, 'helvetica neue', ubuntu, roboto, noto, 'segoe ui', arial, sans-serif; + --line-height: 1.5; + --font-size: 18px; + --font-size-m: 20px; + --font-size-l: 22px; + + /* Sizing */ + --spacing-none: 0; + --spacing-extra-small: .25rem; + --spacing-small: .5rem; + --spacing-medium: 1rem; + --spacing-large: 2rem; + --spacing-extra-large: 4rem; + --spacing-extra-extra-large: 8rem; + --spacing-extra-extra-extra-large: 16rem; + + /* Miscelaneous */ + --border-radius: .25rem; + --hover-transition: all 150ms ease; } diff --git a/src/css/imports/_vertical-align.css b/src/css/imports/_vertical-align.css index 83f9114..26b1a89 100755 --- a/src/css/imports/_vertical-align.css +++ b/src/css/imports/_vertical-align.css @@ -1,14 +1,3 @@ -/* - - VERTICAL ALIGN - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - -*/ - .v-base { vertical-align: baseline; } .v-mid { vertical-align: middle; } .v-top { vertical-align: top; } diff --git a/src/css/imports/_visibility.css b/src/css/imports/_visibility.css index f5a8c44..bce1dc0 100755 --- a/src/css/imports/_visibility.css +++ b/src/css/imports/_visibility.css @@ -1,20 +1,3 @@ -/* - - VISIBILITY - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - -*/ - - -/* - Text that is hidden but accessible - Ref: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility -*/ - .clip { position: fixed !important; _position: absolute !important; @@ -48,4 +31,3 @@ clip: rect(1px, 1px, 1px, 1px); } } - diff --git a/src/css/imports/_white-space.css b/src/css/imports/_white-space.css index 3902f1f..e216c79 100755 --- a/src/css/imports/_white-space.css +++ b/src/css/imports/_white-space.css @@ -1,15 +1,3 @@ -/* - - WHITE SPACE - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - -*/ - - .ws-normal { white-space: normal; } .nowrap { white-space: nowrap; } .pre { white-space: pre; } @@ -31,4 +19,3 @@ .nowrap-l { white-space: nowrap; } .pre-l { white-space: pre; } } - diff --git a/src/css/imports/_widths.css b/src/css/imports/_widths.css index d02a240..65f3601 100755 --- a/src/css/imports/_widths.css +++ b/src/css/imports/_widths.css @@ -1,43 +1,3 @@ -/* - - WIDTHS - Docs: http://tachyons.io/docs/layout/widths/ - - Base: - w = width - - Modifiers - 1 = 1st step in width scale - 2 = 2nd step in width scale - 3 = 3rd step in width scale - 4 = 4th step in width scale - 5 = 5th step in width scale - - -10 = literal value 10% - -20 = literal value 20% - -25 = literal value 25% - -33 = literal value 33% - -34 = literal value 34% - -40 = literal value 40% - -50 = literal value 50% - -60 = literal value 60% - -75 = literal value 75% - -80 = literal value 80% - -100 = literal value 100% - - -third = 100% / 3 (Not supported in opera mini or IE8) - -auto = string value auto - - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - -*/ - -/* Width Scale */ - .w1 { width: var(--spacing-medium); } .w2 { width: 2rem; } .w3 { width: 4rem; } diff --git a/src/css/imports/_word-break.css b/src/css/imports/_word-break.css index bc88931..63f87df 100755 --- a/src/css/imports/_word-break.css +++ b/src/css/imports/_word-break.css @@ -1,17 +1,3 @@ -/* - - WORD BREAK - - Base: - word = word-break - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - -*/ - .word-normal { word-break: normal; } .word-wrap { word-break: break-all; } .word-nowrap { word-break: keep-all; } @@ -33,4 +19,3 @@ .word-wrap-l { word-break: break-all; } .word-nowrap-l { word-break: keep-all; } } - diff --git a/src/css/imports/_z-index.css b/src/css/imports/_z-index.css index 9f4d863..edf3a1e 100755 --- a/src/css/imports/_z-index.css +++ b/src/css/imports/_z-index.css @@ -1,38 +1,3 @@ -/* - - Z-INDEX - - Base - z = z-index - - Modifiers - -0 = literal value 0 - -1 = literal value 1 - -2 = literal value 2 - -3 = literal value 3 - -4 = literal value 4 - -5 = literal value 5 - -999 = literal value 999 - -9999 = literal value 9999 - - -max = largest accepted z-index value as integer - - -inherit = string value inherit - -initial = string value initial - -unset = string value unset - - MDN: https://developer.mozilla.org/en/docs/Web/CSS/z-index - Spec: http://www.w3.org/TR/CSS2/zindex.html - Articles: - https://philipwalton.com/articles/what-no-one-told-you-about-z-index/ - - Tips on extending: - There might be a time worth using negative z-index values. - Or if you are using tachyons with another project, you might need to - adjust these values to suit your needs. - -*/ - .z-0 { z-index: 0; } .z-1 { z-index: 1; } .z-2 { z-index: 2; } @@ -50,4 +15,3 @@ .z-inherit { z-index: inherit; } .z-initial { z-index: initial; } .z-unset { z-index: unset; } - diff --git a/src/css/main.css b/src/css/main.css index f3709f4..077cb74 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -38,19 +38,16 @@ @import './imports/_border-style'; @import './imports/_border-widths'; @import './imports/_border-colors'; -@import './imports/_box-shadow'; @import './imports/_code'; @import './imports/_coordinates'; @import './imports/_clears'; @import './imports/_display'; @import './imports/_flexbox'; @import './imports/_floats'; -@import './imports/_font-family'; @import './imports/_font-style'; @import './imports/_font-weight'; @import './imports/_forms'; @import './imports/_heights'; -@import './imports/_letter-spacing'; @import './imports/_line-height'; @import './imports/_links'; @import './imports/_lists'; -- cgit v1.3