minima-rock 0.9.2 → 0.9.3

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