Skip to content

Commit ca33451

Browse files
author
mrmrs
committed
Update modules.
1 parent 588c63e commit ca33451

21 files changed

+512
-388
lines changed

‎src/css/_background-size.css

+5
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,11 @@
2020
2121
*/
2222

23+
/*
24+
Often used in combination with background image set as an inline style
25+
on an html element.
26+
*/
27+
2328
.bg-cv { background-size: cover; }
2429
.bg-cn { background-size: contain; }
2530

‎src/css/_borders.css

+4
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,15 @@
2121
.br { border-right-style: solid; border-right-width: 1px; }
2222
.bb { border-bottom-style: solid; border-bottom-width: 1px; }
2323
.bl { border-left-style: solid; border-left-width: 1px; }
24+
.bn { border-style: none; border-width: 0; }
2425

2526
@media (--breakpoint-not-small) {
2627
.ba-ns { border-style: solid; border-width: 1px; }
2728
.bt-ns { border-top-style: solid; border-top-width: 1px; }
2829
.br-ns { border-right-style: solid; border-right-width: 1px; }
2930
.bb-ns { border-bottom-style: solid; border-bottom-width: 1px; }
3031
.bl-ns { border-left-style: solid; border-left-width: 1px; }
32+
.bn-ns { border-style: none; border-width: 0; }
3133
}
3234

3335
@media (--breakpoint-medium) {
@@ -36,6 +38,7 @@
3638
.br-m { border-right-style: solid; border-right-width: 1px; }
3739
.bb-m { border-bottom-style: solid; border-bottom-width: 1px; }
3840
.bl-m { border-left-style: solid; border-left-width: 1px; }
41+
.bn-m { border-style: none; border-width: 0; }
3942
}
4043

4144
@media (--breakpoint-large) {
@@ -44,5 +47,6 @@
4447
.br-l { border-right-style: solid; border-right-width: 1px; }
4548
.bb-l { border-bottom-style: solid; border-bottom-width: 1px; }
4649
.bl-l { border-left-style: solid; border-left-width: 1px; }
50+
.bn-l { border-style: none; border-width: 0; }
4751
}
4852

‎src/css/_clears.css

+29
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
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
37
CLEARFIX
@@ -12,3 +16,28 @@
1216
.cf:after { clear: both; }
1317
.cf { *zoom: 1; }
1418

19+
.cl { clear: left; }
20+
.cr { clear: right; }
21+
.cb { clear: both; }
22+
.cn { clear: none; }
23+
24+
@media (--breakpoint-not-small) {
25+
.cl-ns { clear: left; }
26+
.cr-ns { clear: right; }
27+
.cb-ns { clear: both; }
28+
.cn-ns { clear: none; }
29+
}
30+
31+
@media (--breakpoint-medium) {
32+
.cl-m { clear: left; }
33+
.cr-m { clear: right; }
34+
.cb-m { clear: both; }
35+
.cn-m { clear: none; }
36+
}
37+
38+
@media (--breakpoint-large) {
39+
.cl-l { clear: left; }
40+
.cr-l { clear: right; }
41+
.cb-l { clear: both; }
42+
.cn-l { clear: none; }
43+
}

‎src/css/_code.css

-5
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,3 @@
99
overflow-y: hidden;
1010
overflow: scroll;
1111
}
12-
13-
.code {
14-
white-space: pre;
15-
font-size: 14px;
16-
}

‎src/css/_colors.css

+30-57
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,9 @@
33
Tachyons
44
COLOR VARIABLES
55
6-
- Grayscale
7-
- Blues
8-
- Teals
9-
- Green
10-
- Reds
11-
- Oranges
12-
- Yellows
13-
- Pink
14-
- Purple
15-
6+
Grayscale
7+
- Solids
8+
- Transparencies
169
*/
1710

1811
:root {
@@ -28,51 +21,31 @@
2821
--near-white: #f4f4f4;
2922
--white: #fff;
3023

31-
--blue: #0074D9;
32-
--light-blue: #64a8ff;
33-
--lightest-blue: #a2dfff;
34-
--dark-blue: #0045a1;
35-
--darkest-blue: #002f86;
36-
37-
--teal: #27bfa8;
38-
--light-teal: #4eddc5;
39-
--lightest-teal: #6ffae0;
40-
--dark-teal: #25a28f;
41-
--darkest-teal: #008876;
42-
43-
--green: #3D9970;
44-
--light-green: #5ab48a;
45-
--lightest-green: #75d0a4;
46-
--dark-green: #1e7f58;
47-
--darkest-green: #006540;
48-
49-
--red: #d82c2c;
50-
--light-red: #f94f44;
51-
--lightest-red: #ff6c5c;
52-
--dark-red: #bd001a;
53-
--darkest-red: #9d0003;
54-
55-
--orange: #FF851B;
56-
--light-orange: #ffa942;
57-
--lightest-orange: #ffc55d;
58-
--dark-orange: #d05e00;
59-
--darkest-orange: #b14400;
60-
61-
--yellow: #fff93c;
62-
--light-yellow: #fffa60;
63-
--lightest-yellow: #fffca6;
64-
--dark-yellow: #e2c100;
65-
--darkest-yellow: #c4a600;
66-
67-
--pink: #F012BE;
68-
--light-pink: #ff57e8;
69-
--lightest-pink: #ff81ff;
70-
--dark-pink: #d100a3;
71-
--darkest-pink: #b20088;
72-
73-
--purple: #980bc6;
74-
--light-purple: #b536e2;
75-
--lightest-purple: #d355ff;
76-
--dark-purple: #7b00a9;
77-
--darkest-purple: #5f008e;
24+
--transparent:transparent;
25+
26+
--black-90: rgba(0,0,0,.9);
27+
--black-80: rgba(0,0,0,.8);
28+
--black-70: rgba(0,0,0,.7);
29+
--black-60: rgba(0,0,0,.6);
30+
--black-50: rgba(0,0,0,.5);
31+
--black-40: rgba(0,0,0,.4);
32+
--black-30: rgba(0,0,0,.3);
33+
--black-20: rgba(0,0,0,.2);
34+
--black-10: rgba(0,0,0,.1);
35+
--black-05: rgba(0,0,0,.05);
36+
--black-025: rgba(0,0,0,.025);
37+
--black-0125: rgba(0,0,0,.0125);
38+
39+
--white-90: rgba(255,255,255,.9);
40+
--white-80: rgba(255,255,255,.8);
41+
--white-70: rgba(255,255,255,.7);
42+
--white-60: rgba(255,255,255,.6);
43+
--white-50: rgba(255,255,255,.5);
44+
--white-40: rgba(255,255,255,.4);
45+
--white-30: rgba(255,255,255,.3);
46+
--white-20: rgba(255,255,255,.2);
47+
--white-10: rgba(255,255,255,.1);
48+
--white-05: rgba(255,255,255,.05);
49+
--white-025: rgba(255,255,255,.025);
50+
--white-0125: rgba(255,255,255,.0125);
7851
}

‎src/css/_coordinates.css

+4-4
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
.left--2 { left: -2rem; }
3737

3838

39-
.pos-abs--fill {
39+
.absolute--fill {
4040
top: 0;
4141
right: 0;
4242
bottom: 0;
@@ -64,7 +64,7 @@
6464
.right--2-ns { right: -2rem; }
6565
.bottom--2-ns { bottom: -2rem; }
6666
.left--2-ns { left: -2rem; }
67-
.pos-abs--fill-ns {
67+
.absolute--fill-ns {
6868
top: 0;
6969
right: 0;
7070
bottom: 0;
@@ -93,7 +93,7 @@
9393
.right--2-m { right: -2rem; }
9494
.bottom--2-m { bottom: -2rem; }
9595
.left--2-m { left: -2rem; }
96-
.pos-abs--fill-m {
96+
.absolute--fill-m {
9797
top: 0;
9898
right: 0;
9999
bottom: 0;
@@ -122,7 +122,7 @@
122122
.right--2-l { right: -2rem; }
123123
.bottom--2-l { bottom: -2rem; }
124124
.left--2-l { left: -2rem; }
125-
.pos-abs--fill-l {
125+
.absolute--fill-l {
126126
top: 0;
127127
right: 0;
128128
bottom: 0;

‎src/css/_display.css

+60-36
Original file line numberDiff line numberDiff line change
@@ -27,57 +27,81 @@
2727
2828
*/
2929

30-
.dn { display: none; }
31-
.di { display: inline; }
32-
.db { display: block; }
33-
.dib { display: inline-block; }
34-
.dit { display: inline-table; }
35-
.dt { display: table; }
36-
.dtc { display: table-cell; }
37-
.dt-row { display: table-row; }
30+
.dn { display: none; }
31+
.di { display: inline; }
32+
.db { display: block; }
33+
.dib { display: inline-block; }
34+
.dit { display: inline-table; }
35+
.dt { display: table; }
36+
.dtc { display: table-cell; }
37+
.dt-row { display: table-row; }
3838
.dt-row-group { display: table-row-group; }
39-
.dt-column { display: table-column; }
39+
.dt-column { display: table-column; }
4040
.dt-column-group { display: table-column-group; }
4141

42+
/*
43+
This will set table to full width and then
44+
all cells will be equal width
45+
*/
46+
.dt--fixed {
47+
table-layout: fixed;
48+
width: 100%;
49+
}
50+
4251
@media (--breakpoint-not-small) {
43-
.dn-ns { display: none; }
44-
.di-ns { display: inline; }
45-
.db-ns { display: block; }
46-
.dib-ns { display: inline-block; }
47-
.dit-ns { display: inline-table; }
48-
.dt-ns { display: table; }
49-
.dtc-ns { display: table-cell; }
50-
.dt-row-ns { display: table-row; }
52+
.dn-ns { display: none; }
53+
.di-ns { display: inline; }
54+
.db-ns { display: block; }
55+
.dib-ns { display: inline-block; }
56+
.dit-ns { display: inline-table; }
57+
.dt-ns { display: table; }
58+
.dtc-ns { display: table-cell; }
59+
.dt-row-ns { display: table-row; }
5160
.dt-row-group-ns { display: table-row-group; }
52-
.dt-column-ns { display: table-column; }
61+
.dt-column-ns { display: table-column; }
5362
.dt-column-group-ns { display: table-column-group; }
63+
64+
.dt--fixed-ns {
65+
table-layout: fixed;
66+
width: 100%;
67+
}
5468
}
5569

5670
@media (--breakpoint-medium) {
57-
.dn-m { display: none; }
58-
.di-m { display: inline; }
59-
.db-m { display: block; }
60-
.dib-m { display: inline-block; }
61-
.dit-m { display: inline-table; }
62-
.dt-m { display: table; }
63-
.dtc-m { display: table-cell; }
64-
.dt-row-m { display: table-row; }
71+
.dn-m { display: none; }
72+
.di-m { display: inline; }
73+
.db-m { display: block; }
74+
.dib-m { display: inline-block; }
75+
.dit-m { display: inline-table; }
76+
.dt-m { display: table; }
77+
.dtc-m { display: table-cell; }
78+
.dt-row-m { display: table-row; }
6579
.dt-row-group-m { display: table-row-group; }
66-
.dt-column-m { display: table-column; }
80+
.dt-column-m { display: table-column; }
6781
.dt-column-group-m { display: table-column-group; }
82+
83+
.dt--fixed-m {
84+
table-layout: fixed;
85+
width: 100%;
86+
}
6887
}
6988

7089
@media (--breakpoint-large) {
71-
.dn-l { display: none; }
72-
.di-l { display: inline; }
73-
.db-l { display: block; }
74-
.dib-l { display: inline-block; }
75-
.dit-l { display: inline-table; }
76-
.dt-l { display: table; }
77-
.dtc-l { display: table-cell; }
78-
.dt-row-l { display: table-row; }
90+
.dn-l { display: none; }
91+
.di-l { display: inline; }
92+
.db-l { display: block; }
93+
.dib-l { display: inline-block; }
94+
.dit-l { display: inline-table; }
95+
.dt-l { display: table; }
96+
.dtc-l { display: table-cell; }
97+
.dt-row-l { display: table-row; }
7998
.dt-row-group-l { display: table-row-group; }
80-
.dt-column-l { display: table-column; }
99+
.dt-column-l { display: table-column; }
81100
.dt-column-group-l { display: table-column-group; }
101+
102+
.dt--fixed-l {
103+
table-layout: fixed;
104+
width: 100%;
105+
}
82106
}
83107

‎src/css/_font-family.css

+5-5
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@
99
font-family: -apple-system, BlinkMacSystemFont,
1010
'avenir next', avenir,
1111
helvetica, 'helvetica neue',
12-
Ubuntu,
12+
ubuntu,
13+
roboto, noto,
1314
'segoe ui', arial,
1415
sans-serif;
1516
}
@@ -42,9 +43,8 @@ code, .code {
4243
/* Sans-Serif Typefaces */
4344

4445
.helvetica {
45-
font-family: helvetica, 'helvetica neue',
46-
arial,
47-
sans-serif;
46+
font-family: 'helvetica neue', helvetica,
47+
sans-serif;
4848
}
4949

5050

@@ -56,7 +56,7 @@ code, .code {
5656
}
5757

5858
.times {
59-
font-family: Times,
59+
font-family: times,
6060
serif;
6161
}
6262

‎src/css/_font-style.css

+5-5
Original file line numberDiff line numberDiff line change
@@ -8,20 +8,20 @@
88
99
*/
1010

11-
.i { font-style: italic; }
12-
.fsn { font-style: normal; }
11+
.i { font-style: italic; }
12+
.fs-normal { font-style: normal; }
1313

1414
@media (--breakpoint-not-small) {
1515
.i-ns { font-style: italic; }
16-
.fsn-ns { font-style: normal; }
16+
.fs-normal-ns { font-style: normal; }
1717
}
1818

1919
@media (--breakpoint-medium) {
2020
.i-m { font-style: italic; }
21-
.fsn-m { font-style: normal; }
21+
.fs-normal-m { font-style: normal; }
2222
}
2323

2424
@media (--breakpoint-large) {
2525
.i-l { font-style: italic; }
26-
.fsn-l { font-style: normal; }
26+
.fs-normal-l { font-style: normal; }
2727
}

0 commit comments

Comments
 (0)