type-on-strap 1.3.0 → 1.4.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -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
+ }