type-on-strap 1.3.0 → 1.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,48 +1,48 @@
1
1
  /* ---- grid ---- */
2
2
 
3
3
  .grid {
4
- padding-bottom: 6%;
5
- padding-top: 1%;
4
+ padding-bottom: 6%;
5
+ padding-top: 1%;
6
6
 
7
7
 
8
- /* clear fix */
9
- &:after {
10
- content: '';
11
- display: block;
12
- clear: both;
13
- }
8
+ /* clear fix */
9
+ &:after {
10
+ content: '';
11
+ display: block;
12
+ clear: both;
13
+ }
14
14
  }
15
15
 
16
16
  /* ---- .grid-item within masonry ---- */
17
17
 
18
18
  .grid-sizer,
19
19
  .grid-item {
20
- /* state column width */
21
- width: 32.6%;
20
+ /* state column width */
21
+ width: 32.6%;
22
22
  }
23
23
 
24
24
  .grid-item {
25
- float: left;
26
- border-radius: 5px;
27
-
28
- img {
29
- /* for image formatting in the masonry */
30
- display: block;
31
- max-width: 100%;
32
- min-height: 30%;
33
- }
25
+ float: left;
26
+ border-radius: 5px;
27
+
28
+ img {
29
+ /* for image formatting in the masonry */
30
+ display: block;
31
+ max-width: 100%;
32
+ min-height: 30%;
33
+ }
34
34
  }
35
35
 
36
36
  /* --- Masonry gutter size --- */
37
37
 
38
38
  .gutter-sizer {
39
- width: 1%;
39
+ width: 1%;
40
40
  }
41
41
 
42
42
  .grid-item:first-of-type {
43
- margin-bottom: 1%;
43
+ margin-bottom: 1%;
44
44
  }
45
45
 
46
46
  .grid-item {
47
- margin-bottom: 1%;
47
+ margin-bottom: 1%;
48
48
  }
@@ -1,162 +1,168 @@
1
1
  .site-header {
2
- //padding-bottom: 1%;
3
- padding: 2% 2% 1% 2%;
4
- background: $brand-color;
5
- display: inline-block;
6
- float: left;
7
- width: 100%;
8
-
9
- .separator {
10
- user-select: none;
11
- opacity: $navbar-separator-opacity;
12
- &:first-child {
13
- display: none;
14
- }
2
+ //padding-bottom: 1%;
3
+ padding: 2% 2% 1% 2%;
4
+ background: $brand-color;
5
+ display: inline-block;
6
+ float: left;
7
+ width: 100%;
8
+
9
+ .separator {
10
+ user-select: none;
11
+ opacity: $navbar-separator-opacity;
12
+
13
+ &:first-child {
14
+ display: none;
15
15
  }
16
+ }
16
17
 
17
- a {
18
- color: $header-link-color;
19
- }
18
+ a {
19
+ color: $header-link-color;
20
+ }
21
+
22
+ .avatar {
23
+ height: 3em;
24
+ width: 3em;
25
+ float: left;
26
+ margin-top: -13px;
27
+ border-radius: 0.2em;
28
+ margin-right: 0.5em;
29
+ padding: 10px 10px;
20
30
 
21
- .avatar {
22
- height: 3em;
23
- width: 3em;
24
- float: left;
25
- margin-top: -13px;
26
- border-radius: 0.2em;
27
- margin-right: 0.5em;
28
- padding: 10px 10px;
31
+ }
29
32
 
33
+ .site-title {
34
+ float: left;
35
+ font-weight: bold;
36
+ font-family: $font-family-logo;
37
+ font-size: 1.3em;
38
+ }
39
+
40
+ nav {
41
+ list-style: none;
42
+ margin: 0;
43
+ padding: 0;
44
+
45
+ ul {
46
+ margin: 0;
47
+ padding: 0;
48
+ list-style: none;
49
+ line-height: 1.5;
50
+ float: right;
51
+ text-align: right;
52
+ display: block;
30
53
  }
31
54
 
32
- .site-title {
33
- float: left;
34
- font-weight: bold;
35
- font-family: $font-family-logo;
36
- font-size: 1.3em;
55
+ li {
56
+ display: inline;
57
+ float: left;
58
+ margin-right: 0.4em;
37
59
  }
38
60
 
39
- nav {
40
- list-style: none;
41
- margin: 0;
42
- padding: 0;
43
- ul {
44
- margin: 0;
45
- padding: 0;
46
- list-style: none;
47
- line-height: 1.5;
48
- float: right;
49
- text-align: right;
50
- display: block;
51
- }
52
- li {
53
- display: inline;
54
- float: left;
55
- margin-right: 0.4em;
61
+ a {
62
+ &:hover {
63
+ color: $link-color;
64
+ }
65
+
66
+ &#pull {
67
+ i {
68
+ margin-top: 13px;
69
+ float: right;
56
70
  }
57
- a {
58
- &:hover {
59
- color: $link-color;
60
- }
61
- &#pull {
62
- i {
63
- margin-top: 13px;
64
- float: right;
65
- }
66
-
67
- }
68
71
 
69
- }
72
+ }
73
+
70
74
  }
75
+ }
71
76
  }
72
77
 
73
78
 
74
79
  // To clear things when we float the element inisde nav and ul
75
80
  .clear {
76
- *zoom: 1;
81
+ *zoom: 1;
77
82
 
78
- &:after {
79
- clear: both;
80
- }
83
+ &:after {
84
+ clear: both;
85
+ }
81
86
 
82
- &:before,
83
- &:after {
84
- content: " ";
85
- display: table;
86
- }
87
+ &:before,
88
+ &:after {
89
+ content: " ";
90
+ display: table;
91
+ }
87
92
  }
88
93
 
89
94
  /* ---- Responsive ---- */
90
95
 
91
96
  @media (min-width: $break) {
92
- a#pull {
93
- display: none;
94
- }
97
+ a#pull {
98
+ display: none;
99
+ }
95
100
  }
96
101
 
97
102
  @media screen and (max-width: $break) {
98
- .site-header {
99
- img.avatar {
100
- margin-top: -7px
101
- }
102
- .site-title {
103
- margin-top: 7px;
104
- }
103
+ .site-header {
104
+ img.avatar {
105
+ margin-top: -7px
106
+ }
107
+
108
+ .site-title {
109
+ margin-top: 7px;
105
110
  }
111
+ }
106
112
 
107
- nav {
108
- height: auto;
113
+ nav {
114
+ height: auto;
109
115
 
110
- .separator {
111
- display: none !important;
112
- }
116
+ .separator {
117
+ display: none !important;
118
+ }
113
119
 
114
- ul {
115
- width: 100%;
116
- overflow: hidden;
120
+ ul {
121
+ width: 100%;
122
+ overflow: hidden;
117
123
 
118
- transition: font-size .25s,
119
- margin .25s,
120
- padding .25s,
121
- opacity .5s .25s;
122
- }
124
+ transition: font-size .25s,
125
+ margin .25s,
126
+ padding .25s,
127
+ opacity .5s .25s;
128
+ }
123
129
 
124
- ul.hide {
125
- font-size: 0;
126
- margin: 0;
127
- opacity: 0;
128
- padding: 0;
129
-
130
- /* fade out, then shrink */
131
- transition: opacity .25s,
132
- font-size .5s .25s,
133
- margin .5s .25s,
134
- padding .5s .25s;
135
- }
130
+ ul.hide {
131
+ font-size: 0;
132
+ margin: 0;
133
+ opacity: 0;
134
+ padding: 0;
135
+
136
+ /* fade out, then shrink */
137
+ transition: opacity .25s,
138
+ font-size .5s .25s,
139
+ margin .5s .25s,
140
+ padding .5s .25s;
141
+ }
136
142
 
137
- li {
138
- width: 100%;
139
- float: left;
140
- position: relative;
141
- }
143
+ li {
144
+ width: 100%;
145
+ float: left;
146
+ position: relative;
147
+ }
142
148
 
143
- a {
144
- text-align: left;
145
- width: 100%;
146
-
147
- &#pull {
148
- display: block;
149
- width: 100%;
150
- position: relative;
151
-
152
- &:after {
153
- content: "";
154
- display: inline-block;
155
- position: absolute;
156
- right: 15px;
157
- top: 10px;
158
- }
159
- }
149
+ a {
150
+ text-align: left;
151
+ width: 100%;
152
+
153
+ &#pull {
154
+ display: block;
155
+ width: 100%;
156
+ position: relative;
157
+
158
+ &:after {
159
+ content: "";
160
+ display: inline-block;
161
+ position: absolute;
162
+ right: 15px;
163
+ top: 10px;
160
164
  }
165
+ }
161
166
  }
167
+ }
162
168
  }
@@ -1,43 +1,43 @@
1
1
  .portfolio-link {
2
- display: block;
3
- position: relative;
4
- margin: 0 auto;
5
- max-width: 400px;
6
-
7
- .caption {
8
- margin: 0;
9
- position: absolute;
10
- width: 100%;
11
- height: 100%;
12
- text-align: center;
13
- opacity: 0;
14
- -webkit-transition: all ease .5s;
15
- -moz-transition: all ease .5s;
16
- transition: all ease .5s;
17
-
18
- &::before {
19
- content: ' ';
20
- display: inline-block;
21
- vertical-align: middle;
22
- height: 100%;
23
- }
24
-
25
- &:hover {
26
- opacity: 1;
27
- }
28
-
29
- .caption-content {
30
- font-size: 15px;
31
- color: white;
32
- text-shadow: -1px 0 #ddd, 0 1px #ddd, 1px 0 #ddd, 0 -1px #ddd;
33
- display: inline-block;
34
- vertical-align: middle;
35
-
36
- @media screen and (max-width: $sm-break) {
37
- font-size: 7px;
38
- }
39
- }
2
+ display: block;
3
+ position: relative;
4
+ margin: 0 auto;
5
+ max-width: 400px;
6
+
7
+ .caption {
8
+ margin: 0;
9
+ position: absolute;
10
+ width: 100%;
11
+ height: 100%;
12
+ text-align: center;
13
+ opacity: 0;
14
+ -webkit-transition: all ease .5s;
15
+ -moz-transition: all ease .5s;
16
+ transition: all ease .5s;
17
+
18
+ &::before {
19
+ content: ' ';
20
+ display: inline-block;
21
+ vertical-align: middle;
22
+ height: 100%;
40
23
  }
24
+
25
+ &:hover {
26
+ opacity: 1;
27
+ }
28
+
29
+ .caption-content {
30
+ font-size: 15px;
31
+ color: white;
32
+ text-shadow: -1px 0 #ddd, 0 1px #ddd, 1px 0 #ddd, 0 -1px #ddd;
33
+ display: inline-block;
34
+ vertical-align: middle;
35
+
36
+ @media screen and (max-width: $sm-break) {
37
+ font-size: 7px;
38
+ }
39
+ }
40
+ }
41
41
  }
42
42
 
43
43
  .portfolio-grid {
@@ -46,7 +46,8 @@
46
46
  justify-content: space-around;
47
47
 
48
48
  }
49
+
49
50
  .portfolio-cell {
50
51
  flex: 0 0 32%;
51
52
  margin-bottom: 10px;
52
- }
53
+ }