minima-rock 0.3.0 → 0.3.1

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