minima-rock 0.7.0 → 0.7.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,309 +1,309 @@
1
- /**
2
- * Site header
3
- */
4
- .site-header {
5
- border-top: 5px solid $brand-color;
6
- border-bottom: 1px solid $grey-color-light;
7
- min-height: $spacing-unit * 1.865;
8
- line-height: $base-line-height * $base-font-size * 2.25;
9
-
10
- // Positioning context for the mobile navigation icon
11
- position: relative;
12
- }
13
-
14
- .site-title {
15
- @include relative-font-size(1.625);
16
- font-weight: 300;
17
- letter-spacing: -1px;
18
- margin-bottom: 0;
19
- float: left;
20
-
21
- @include media-query($on-palm) {
22
- padding-right: 45px;
23
- }
24
- }
25
-
26
- .site-nav {
27
- position: absolute;
28
- top: 9px;
29
- right: $spacing-unit / 2;
30
- background-color: $background-color;
31
- border: 1px solid $grey-color-light;
32
- border-radius: 5px;
33
- text-align: right;
34
-
35
- .nav-trigger {
36
- display: none;
37
- }
38
-
39
- .menu-icon {
40
- float: right;
41
- width: 36px;
42
- height: 26px;
43
- line-height: 0;
44
- padding-top: 10px;
45
- text-align: center;
46
-
47
- > svg path {
48
- fill: $grey-color-dark;
49
- }
50
- }
51
-
52
- label[for="nav-trigger"] {
53
- display: block;
54
- float: right;
55
- width: 36px;
56
- height: 36px;
57
- z-index: 2;
58
- cursor: pointer;
59
- }
60
-
61
- input ~ .trigger {
62
- clear: both;
63
- display: none;
64
- }
65
-
66
- input:checked ~ .trigger {
67
- display: block;
68
- padding-bottom: 5px;
69
- }
70
-
71
- .page-link {
72
- color: $text-color;
73
- line-height: $base-line-height;
74
- display: block;
75
- padding: 5px 10px;
76
-
77
- // Gaps between nav items, but not on the last one
78
- &:not(:last-child) {
79
- margin-right: 0;
80
- }
81
- margin-left: 20px;
82
- }
83
-
84
- @media screen and (min-width: $on-medium) {
85
- position: static;
86
- float: right;
87
- border: none;
88
- background-color: inherit;
89
-
90
- label[for="nav-trigger"] {
91
- display: none;
92
- }
93
-
94
- .menu-icon {
95
- display: none;
96
- }
97
-
98
- input ~ .trigger {
99
- display: block;
100
- }
101
-
102
- .page-link {
103
- display: inline;
104
- padding: 0;
105
-
106
- &:not(:last-child) {
107
- margin-right: 20px;
108
- }
109
- margin-left: auto;
110
- }
111
- }
112
- }
113
-
114
-
115
-
116
- /**
117
- * Site footer
118
- */
119
- .site-footer {
120
- border-top: 1px solid $grey-color-light;
121
- padding: $spacing-unit 0;
122
- }
123
-
124
- .footer-heading {
125
- @include relative-font-size(1.125);
126
- margin-bottom: $spacing-unit / 2;
127
- }
128
-
129
- .contact-list,
130
- .social-media-list {
131
- list-style: none;
132
- margin-left: 0;
133
- }
134
-
135
- .footer-col-wrapper {
136
- @include relative-font-size(0.9375);
137
- color: $grey-color;
138
- margin-left: -$spacing-unit / 2;
139
- @extend %clearfix;
140
- }
141
-
142
- .footer-col {
143
- width: -webkit-calc(100% - (#{$spacing-unit} / 2));
144
- width: calc(100% - (#{$spacing-unit} / 2));
145
- margin-bottom: $spacing-unit / 2;
146
- padding-left: $spacing-unit / 2;
147
- }
148
-
149
- .footer-col-1,
150
- .footer-col-2 {
151
- width: -webkit-calc(50% - (#{$spacing-unit} / 2));
152
- width: calc(50% - (#{$spacing-unit} / 2));
153
- }
154
-
155
- .footer-col-3 {
156
- width: -webkit-calc(100% - (#{$spacing-unit} / 2));
157
- width: calc(100% - (#{$spacing-unit} / 2));
158
- }
159
-
160
- @media screen and (min-width: $on-large) {
161
- .footer-col-1 {
162
- width: -webkit-calc(35% - (#{$spacing-unit} / 2));
163
- width: calc(35% - (#{$spacing-unit} / 2));
164
- }
165
-
166
- .footer-col-2 {
167
- width: -webkit-calc(20% - (#{$spacing-unit} / 2));
168
- width: calc(20% - (#{$spacing-unit} / 2));
169
- }
170
-
171
- .footer-col-3 {
172
- width: -webkit-calc(45% - (#{$spacing-unit} / 2));
173
- width: calc(45% - (#{$spacing-unit} / 2));
174
- }
175
- }
176
-
177
- @media screen and (min-width: $on-medium) {
178
- .footer-col {
179
- float: left;
180
- }
181
- }
182
-
183
-
184
-
185
- /**
186
- * Page content
187
- */
188
- .page-content {
189
- padding: $spacing-unit 0;
190
- flex: 1 0 auto;
191
- }
192
-
193
- .page-heading {
194
- @include relative-font-size(2);
195
- }
196
-
197
- .post-list-heading {
198
- @include relative-font-size(1.75);
199
- }
200
-
201
- .post-list {
202
- margin-left: 0;
203
- list-style: none;
204
-
205
- > li {
206
- margin-bottom: $spacing-unit;
207
- }
208
- }
209
-
210
- .post-meta {
211
- font-size: $small-font-size;
212
- color: $grey-color;
213
- }
214
-
215
- .post-link {
216
- display: block;
217
- @include relative-font-size(1.5);
218
- }
219
-
220
-
221
-
222
- /**
223
- * Posts
224
- */
225
- .post-header {
226
- margin-bottom: $spacing-unit;
227
- }
228
-
229
- .post-title,
230
- .post-content h1 {
231
- @include relative-font-size(2.625);
232
- letter-spacing: -1px;
233
- line-height: 1;
234
-
235
- @media screen and (min-width: $on-large) {
236
- @include relative-font-size(2.625);
237
- }
238
- }
239
-
240
- .post-content {
241
- margin-bottom: $spacing-unit;
242
-
243
- h2 {
244
- @include relative-font-size(1.75);
245
-
246
- @media screen and (min-width: $on-large) {
247
- @include relative-font-size(2);
248
- }
249
- }
250
-
251
- h3 {
252
- @include relative-font-size(1.375);
253
-
254
- @media screen and (min-width: $on-large) {
255
- @include relative-font-size(1.625);
256
- }
257
- }
258
-
259
- h4 {
260
- @include relative-font-size(1.125);
261
-
262
- @media screen and (min-width: $on-large) {
263
- @include relative-font-size(1.25);
264
- }
265
- }
266
- }
267
-
268
-
269
- .social-media-list {
270
- display: table;
271
- margin: 0 auto;
272
- li {
273
- float: left;
274
- margin: 0 5px;
275
- &:first-of-type { margin-left: 0 }
276
- &:last-of-type { margin-right: 0 }
277
- a {
278
- display: block;
279
- padding: $spacing-unit / 4;
280
- border: 1px solid $grey-color-light
281
- }
282
- &:hover .svg-icon { fill: currentColor; }
283
- }
284
- }
285
-
286
-
287
- .site-tag a {
288
- //color: orange;
289
- //background-color: $grey-color-light;
290
- display: inline-block;
291
- padding-left: 2px;
292
- padding-right: 2px;
293
- border: 1px solid darken($grey-color-light, 5%);
294
- border-radius: 3px;
295
-
296
- &:hover {
297
- text-decoration: unset;
298
- background-color: $grey-color;
299
- }
300
- }
301
-
302
-
303
- /**
304
- * Grid helpers
305
- */
306
- .one-half {
307
- width: -webkit-calc(50% - (#{$spacing-unit} / 2));
308
- width: calc(50% - (#{$spacing-unit} / 2));
309
- }
1
+ /**
2
+ * Site header
3
+ */
4
+ .site-header {
5
+ border-top: 5px solid $brand-color;
6
+ border-bottom: 1px solid $grey-color-light;
7
+ min-height: $spacing-unit * 1.865;
8
+ line-height: $base-line-height * $base-font-size * 2.25;
9
+
10
+ // Positioning context for the mobile navigation icon
11
+ position: relative;
12
+ }
13
+
14
+ .site-title {
15
+ @include relative-font-size(1.625);
16
+ font-weight: 300;
17
+ letter-spacing: -1px;
18
+ margin-bottom: 0;
19
+ float: left;
20
+
21
+ @include media-query($on-palm) {
22
+ padding-right: 45px;
23
+ }
24
+ }
25
+
26
+ .site-nav {
27
+ position: absolute;
28
+ top: 9px;
29
+ right: $spacing-unit / 2;
30
+ background-color: $background-color;
31
+ border: 1px solid $grey-color-light;
32
+ border-radius: 5px;
33
+ text-align: right;
34
+
35
+ .nav-trigger {
36
+ display: none;
37
+ }
38
+
39
+ .menu-icon {
40
+ float: right;
41
+ width: 36px;
42
+ height: 26px;
43
+ line-height: 0;
44
+ padding-top: 10px;
45
+ text-align: center;
46
+
47
+ > svg path {
48
+ fill: $grey-color-dark;
49
+ }
50
+ }
51
+
52
+ label[for="nav-trigger"] {
53
+ display: block;
54
+ float: right;
55
+ width: 36px;
56
+ height: 36px;
57
+ z-index: 2;
58
+ cursor: pointer;
59
+ }
60
+
61
+ input ~ .trigger {
62
+ clear: both;
63
+ display: none;
64
+ }
65
+
66
+ input:checked ~ .trigger {
67
+ display: block;
68
+ padding-bottom: 5px;
69
+ }
70
+
71
+ .page-link {
72
+ color: $text-color;
73
+ line-height: $base-line-height;
74
+ display: block;
75
+ padding: 5px 10px;
76
+
77
+ // Gaps between nav items, but not on the last one
78
+ &:not(:last-child) {
79
+ margin-right: 0;
80
+ }
81
+ margin-left: 20px;
82
+ }
83
+
84
+ @media screen and (min-width: $on-medium) {
85
+ position: static;
86
+ float: right;
87
+ border: none;
88
+ background-color: inherit;
89
+
90
+ label[for="nav-trigger"] {
91
+ display: none;
92
+ }
93
+
94
+ .menu-icon {
95
+ display: none;
96
+ }
97
+
98
+ input ~ .trigger {
99
+ display: block;
100
+ }
101
+
102
+ .page-link {
103
+ display: inline;
104
+ padding: 0;
105
+
106
+ &:not(:last-child) {
107
+ margin-right: 20px;
108
+ }
109
+ margin-left: auto;
110
+ }
111
+ }
112
+ }
113
+
114
+
115
+
116
+ /**
117
+ * Site footer
118
+ */
119
+ .site-footer {
120
+ border-top: 1px solid $grey-color-light;
121
+ padding: $spacing-unit 0;
122
+ }
123
+
124
+ .footer-heading {
125
+ @include relative-font-size(1.125);
126
+ margin-bottom: $spacing-unit / 2;
127
+ }
128
+
129
+ .contact-list,
130
+ .social-media-list {
131
+ list-style: none;
132
+ margin-left: 0;
133
+ }
134
+
135
+ .footer-col-wrapper {
136
+ @include relative-font-size(0.9375);
137
+ color: $grey-color;
138
+ margin-left: -$spacing-unit / 2;
139
+ @extend %clearfix;
140
+ }
141
+
142
+ .footer-col {
143
+ width: -webkit-calc(100% - (#{$spacing-unit} / 2));
144
+ width: calc(100% - (#{$spacing-unit} / 2));
145
+ margin-bottom: $spacing-unit / 2;
146
+ padding-left: $spacing-unit / 2;
147
+ }
148
+
149
+ .footer-col-1,
150
+ .footer-col-2 {
151
+ width: -webkit-calc(50% - (#{$spacing-unit} / 2));
152
+ width: calc(50% - (#{$spacing-unit} / 2));
153
+ }
154
+
155
+ .footer-col-3 {
156
+ width: -webkit-calc(100% - (#{$spacing-unit} / 2));
157
+ width: calc(100% - (#{$spacing-unit} / 2));
158
+ }
159
+
160
+ @media screen and (min-width: $on-large) {
161
+ .footer-col-1 {
162
+ width: -webkit-calc(35% - (#{$spacing-unit} / 2));
163
+ width: calc(35% - (#{$spacing-unit} / 2));
164
+ }
165
+
166
+ .footer-col-2 {
167
+ width: -webkit-calc(20% - (#{$spacing-unit} / 2));
168
+ width: calc(20% - (#{$spacing-unit} / 2));
169
+ }
170
+
171
+ .footer-col-3 {
172
+ width: -webkit-calc(45% - (#{$spacing-unit} / 2));
173
+ width: calc(45% - (#{$spacing-unit} / 2));
174
+ }
175
+ }
176
+
177
+ @media screen and (min-width: $on-medium) {
178
+ .footer-col {
179
+ float: left;
180
+ }
181
+ }
182
+
183
+
184
+
185
+ /**
186
+ * Page content
187
+ */
188
+ .page-content {
189
+ padding: $spacing-unit 0;
190
+ flex: 1 0 auto;
191
+ }
192
+
193
+ .page-heading {
194
+ @include relative-font-size(2);
195
+ }
196
+
197
+ .post-list-heading {
198
+ @include relative-font-size(1.75);
199
+ }
200
+
201
+ .post-list {
202
+ margin-left: 0;
203
+ list-style: none;
204
+
205
+ > li {
206
+ margin-bottom: $spacing-unit;
207
+ }
208
+ }
209
+
210
+ .post-meta {
211
+ font-size: $small-font-size;
212
+ color: $grey-color;
213
+ }
214
+
215
+ .post-link {
216
+ display: block;
217
+ @include relative-font-size(1.5);
218
+ }
219
+
220
+
221
+
222
+ /**
223
+ * Posts
224
+ */
225
+ .post-header {
226
+ margin-bottom: $spacing-unit;
227
+ }
228
+
229
+ .post-title,
230
+ .post-content h1 {
231
+ @include relative-font-size(2.625);
232
+ letter-spacing: -1px;
233
+ line-height: 1;
234
+
235
+ @media screen and (min-width: $on-large) {
236
+ @include relative-font-size(2.625);
237
+ }
238
+ }
239
+
240
+ .post-content {
241
+ margin-bottom: $spacing-unit;
242
+
243
+ h2 {
244
+ @include relative-font-size(1.75);
245
+
246
+ @media screen and (min-width: $on-large) {
247
+ @include relative-font-size(2);
248
+ }
249
+ }
250
+
251
+ h3 {
252
+ @include relative-font-size(1.375);
253
+
254
+ @media screen and (min-width: $on-large) {
255
+ @include relative-font-size(1.625);
256
+ }
257
+ }
258
+
259
+ h4 {
260
+ @include relative-font-size(1.125);
261
+
262
+ @media screen and (min-width: $on-large) {
263
+ @include relative-font-size(1.25);
264
+ }
265
+ }
266
+ }
267
+
268
+
269
+ .social-media-list {
270
+ display: table;
271
+ margin: 0 auto;
272
+ li {
273
+ float: left;
274
+ margin: 0 5px;
275
+ &:first-of-type { margin-left: 0 }
276
+ &:last-of-type { margin-right: 0 }
277
+ a {
278
+ display: block;
279
+ padding: $spacing-unit / 4;
280
+ border: 1px solid $grey-color-light
281
+ }
282
+ &:hover .svg-icon { fill: currentColor; }
283
+ }
284
+ }
285
+
286
+
287
+ .site-tag a {
288
+ //color: orange;
289
+ //background-color: $grey-color-light;
290
+ display: inline-block;
291
+ padding-left: 2px;
292
+ padding-right: 2px;
293
+ border: 1px solid darken($grey-color-light, 5%);
294
+ border-radius: 3px;
295
+
296
+ &:hover {
297
+ text-decoration: unset;
298
+ background-color: $grey-color;
299
+ }
300
+ }
301
+
302
+
303
+ /**
304
+ * Grid helpers
305
+ */
306
+ .one-half {
307
+ width: -webkit-calc(50% - (#{$spacing-unit} / 2));
308
+ width: calc(50% - (#{$spacing-unit} / 2));
309
+ }