Skip to content

Commit af6f5cd

Browse files
author
mrmrs
committed
Updates to some modules
1 parent fcf7d55 commit af6f5cd

File tree

7 files changed

+96
-19
lines changed

7 files changed

+96
-19
lines changed

‎css/tachyons.css

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -505,14 +505,22 @@ input[type="text"], input[type="url"], .border-box { box-sizing: border-box; }
505505
.dt--fixed { table-layout: fixed; width: 100%; }
506506
/*
507507
508-
FLEXBOX
508+
FLEXBOX
509509
510-
*/
510+
Media Query Extensions:
511+
-ns = not-small
512+
-m = medium
513+
-l = large
514+
515+
*/
511516
.flex { display: flex; }
512-
/* 1. Fix for Chrome 44 bug. https://code.google.com/p/chromium/issues/detail?id=506893 */
517+
.inline-flex { display: inline-flex; }
518+
/* 1. Fix for Chrome 44 bug.
519+
* https://code.google.com/p/chromium/issues/detail?id=506893 */
513520
.flex-auto { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ }
514521
.flex-none { flex: none; }
515522
.flex-column { flex-direction: column; }
523+
.flex-row { flex-direction: row; }
516524
.flex-wrap { flex-wrap: wrap; }
517525
.items-start { align-items: flex-start; }
518526
.items-end { align-items: flex-end; }
@@ -585,6 +593,7 @@ FLEXBOX
585593
/* Monospaced Typefaces (for code) */
586594
/* From http://cssfontstack.com */
587595
code, .code { font-family: Consolas, monaco, monospace; }
596+
.courier { font-family: 'Courier Next', courier, monospace; }
588597
/* Sans-Serif Typefaces */
589598
.helvetica { font-family: 'helvetica neue', helvetica, sans-serif; }
590599
.avenir { font-family: 'avenir next', avenir, sans-serif; }
@@ -594,7 +603,7 @@ code, .code { font-family: Consolas, monaco, monospace; }
594603
.bodoni { font-family: "Bodoni MT", serif; }
595604
.calisto { font-family: "Calisto MT", serif; }
596605
.garamond { font-family: garamond, serif; }
597-
.baskerville { font-family: garamond, serif; }
606+
.baskerville { font-family: baskerville, serif; }
598607
/*
599608
600609
FONT STYLE
@@ -1256,11 +1265,13 @@ code, .code { font-family: Consolas, monaco, monospace; }
12561265
/* Can combine this with overflow-hidden to make background images grow on hover
12571266
* even if you are using background-size: cover */
12581267
.grow { transition: transform .2s; }
1259-
.grow:hover { transform: scale( 1.05 ); }
1268+
.grow:hover, .grow:focus { transform: scale( 1.05 ); }
12601269
.grow-large { transition: transform .2s; }
1261-
.grow-large:hover { transform: scale( 1.2 ); }
1270+
.grow-large:hover, .grow-large:focus { transform: scale( 1.2 ); }
12621271
/* Add pointer on hover */
12631272
.pointer:hover { cursor: pointer; }
1273+
/* Add shadow on hover */
1274+
.shadow-hover:hover, .shadow-hover:focus { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); }
12641275
/*
12651276
12661277
STYLES
@@ -1404,9 +1415,11 @@ code, .code { font-family: Consolas, monaco, monospace; }
14041415
.dt-column-group-ns { display: table-column-group; }
14051416
.dt--fixed-ns { table-layout: fixed; width: 100%; }
14061417
.flex-ns { display: flex; }
1418+
.inline-flex-ns { display: inline-flex; }
14071419
.flex-auto-ns { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ }
14081420
.flex-none-ns { flex: none; }
14091421
.flex-column-ns { flex-direction: column; }
1422+
.flex-row-ns { flex-direction: row; }
14101423
.flex-wrap-ns { flex-wrap: wrap; }
14111424
.items-start-ns { align-items: flex-start; }
14121425
.items-end-ns { align-items: flex-end; }
@@ -1737,9 +1750,11 @@ code, .code { font-family: Consolas, monaco, monospace; }
17371750
.dt-column-group-m { display: table-column-group; }
17381751
.dt--fixed-m { table-layout: fixed; width: 100%; }
17391752
.flex-m { display: flex; }
1753+
.inline-flex-m { display: inline-flex; }
17401754
.flex-auto-m { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ }
17411755
.flex-none-m { flex: none; }
17421756
.flex-column-m { flex-direction: column; }
1757+
.flex-row-m { flex-direction: row; }
17431758
.flex-wrap-m { flex-wrap: wrap; }
17441759
.items-start-m { align-items: flex-start; }
17451760
.items-end-m { align-items: flex-end; }
@@ -2070,9 +2085,11 @@ code, .code { font-family: Consolas, monaco, monospace; }
20702085
.dt-column-group-l { display: table-column-group; }
20712086
.dt--fixed-l { table-layout: fixed; width: 100%; }
20722087
.flex-l { display: flex; }
2088+
.inline-flex-l { display: inline-flex; }
20732089
.flex-auto-l { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ }
20742090
.flex-none-l { flex: none; }
20752091
.flex-column-l { flex-direction: column; }
2092+
.flex-row-l { flex-direction: row; }
20762093
.flex-wrap-l { flex-wrap: wrap; }
20772094
.items-start-l { align-items: flex-start; }
20782095
.items-end-l { align-items: flex-end; }

‎css/tachyons.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/css/_colors.css

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,4 +48,29 @@
4848
--white-05: rgba(255,255,255,.05);
4949
--white-025: rgba(255,255,255,.025);
5050
--white-0125: rgba(255,255,255,.0125);
51+
52+
--dark-red: #f00008;
53+
--red: #ff3223;
54+
--orange: #f3a801;
55+
--gold: #f2c800;
56+
--yellow: #ffde37;
57+
--purple: #7d5da9;
58+
--light-purple: #8d4f92;
59+
--hot-pink: #d62288;
60+
--dark-pink: #c64774;
61+
--pink: #f49cc8;
62+
--dark-green: #006C71;
63+
--green: #41D69F;
64+
--navy: #001b44;
65+
--dark-blue: #00449e;
66+
--blue: #357edd;
67+
--light-blue: #96ccff;
68+
--lightest-blue: #cdecff;
69+
--washed-blue: #f6fffe;
70+
--washed-green: #e8fdf5;
71+
--washed-yellow: #fff8d5;
72+
--light-pink: #efa4b8;
73+
--light-yellow: #f3dd70;
74+
--light-red: #ffd3c0;
75+
5176
}

‎src/css/_flexbox.css

Lines changed: 27 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,23 @@
1+
@custom-media --breakpoint-not-small screen and (min-width: 48em);
2+
@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
3+
@custom-media --breakpoint-large screen and (min-width: 64em);
4+
15
/*
26
3-
FLEXBOX
7+
FLEXBOX
8+
9+
Media Query Extensions:
10+
-ns = not-small
11+
-m = medium
12+
-l = large
413
5-
*/
14+
*/
615

7-
.flex { display: flex }
16+
.flex { display: flex; }
17+
.inline-flex { display: inline-flex; }
818

9-
/* 1. Fix for Chrome 44 bug. https://code.google.com/p/chromium/issues/detail?id=506893 */
19+
/* 1. Fix for Chrome 44 bug.
20+
* https://code.google.com/p/chromium/issues/detail?id=506893 */
1021
.flex-auto {
1122
flex: 1 1 auto;
1223
min-width: 0; /* 1 */
@@ -16,6 +27,7 @@ FLEXBOX
1627
.flex-none { flex: none; }
1728

1829
.flex-column { flex-direction: column; }
30+
.flex-row { flex-direction: row; }
1931
.flex-wrap { flex-wrap: wrap; }
2032

2133
.items-start { align-items: flex-start; }
@@ -53,15 +65,18 @@ FLEXBOX
5365
.order-7 { order: 7; }
5466
.order-8 { order: 8; }
5567
.order-last { order: 99999; }
68+
5669
@media (--breakpoint-not-small) {
57-
.flex-ns { display: flex }
70+
.flex-ns { display: flex; }
71+
.inline-flex-ns { display: inline-flex; }
5872
.flex-auto-ns {
5973
flex: 1 1 auto;
6074
min-width: 0; /* 1 */
6175
min-height: 0; /* 1 */
6276
}
6377
.flex-none-ns { flex: none; }
6478
.flex-column-ns { flex-direction: column; }
79+
.flex-row-ns { flex-direction: row; }
6580
.flex-wrap-ns { flex-wrap: wrap; }
6681
.items-start-ns { align-items: flex-start; }
6782
.items-end-ns { align-items: flex-end; }
@@ -100,14 +115,16 @@ FLEXBOX
100115
.order-last-ns { order: 99999; }
101116
}
102117
@media (--breakpoint-medium) {
103-
.flex-m { display: flex }
118+
.flex-m { display: flex; }
119+
.inline-flex-m { display: inline-flex; }
104120
.flex-auto-m {
105121
flex: 1 1 auto;
106122
min-width: 0; /* 1 */
107123
min-height: 0; /* 1 */
108124
}
109125
.flex-none-m { flex: none; }
110126
.flex-column-m { flex-direction: column; }
127+
.flex-row-m { flex-direction: row; }
111128
.flex-wrap-m { flex-wrap: wrap; }
112129
.items-start-m { align-items: flex-start; }
113130
.items-end-m { align-items: flex-end; }
@@ -145,15 +162,18 @@ FLEXBOX
145162
.order-8-m { order: 8; }
146163
.order-last-m { order: 99999; }
147164
}
165+
148166
@media (--breakpoint-large) {
149-
.flex-l { display: flex }
167+
.flex-l { display: flex; }
168+
.inline-flex-l { display: inline-flex; }
150169
.flex-auto-l {
151170
flex: 1 1 auto;
152171
min-width: 0; /* 1 */
153172
min-height: 0; /* 1 */
154173
}
155174
.flex-none-l { flex: none; }
156175
.flex-column-l { flex-direction: column; }
176+
.flex-row-l { flex-direction: row; }
157177
.flex-wrap-l { flex-wrap: wrap; }
158178
.items-start-l { align-items: flex-start; }
159179
.items-end-l { align-items: flex-end; }

‎src/css/_font-family.css

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,12 @@ code, .code {
3939
monospace;
4040
}
4141

42+
.courier {
43+
font-family: 'Courier Next',
44+
courier,
45+
monospace;
46+
}
47+
4248

4349
/* Sans-Serif Typefaces */
4450

@@ -81,7 +87,7 @@ code, .code {
8187
}
8288

8389
.baskerville {
84-
font-family: garamond,
90+
font-family: baskerville,
8591
serif;
8692
}
8793

‎src/css/_hovers.css

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,15 +64,17 @@
6464
transition: transform .2s;
6565
}
6666

67-
.grow:hover {
67+
.grow:hover,
68+
.grow:focus {
6869
transform: scale(1.05);
6970
}
7071

7172
.grow-large {
7273
transition: transform .2s;
7374
}
7475

75-
.grow-large:hover {
76+
.grow-large:hover,
77+
.grow-large:focus {
7678
transform: scale(1.2);
7779
}
7880

@@ -82,3 +84,10 @@
8284
cursor: pointer;
8385
}
8486

87+
/* Add shadow on hover */
88+
89+
.shadow-hover:hover,
90+
.shadow-hover:focus {
91+
box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 );
92+
}
93+

‎src/css/_skins.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,8 @@
5555
--hot-pink: #d62288;
5656
--dark-pink: #c64774;
5757
--pink: #f49cc8;
58-
--dark-green: #006C71;
59-
--green: #41D69F;
58+
--dark-green: #006c71;
59+
--green: #41d69f;
6060
--navy: #001b44;
6161
--dark-blue: #00449e;
6262
--blue: #357edd;

0 commit comments

Comments
 (0)