_layout.scss 7.04 KB
Newer Older
Jacek Lebioda's avatar
Jacek Lebioda committed
1
2
3
4
5
html {
    overflow: -moz-scrollbars-vertical;
    overflow-y: scroll;
}

6
7
8
9
10
/**
 * Site header
 */
.site-header {
  min-height: $spacing-unit * 1.865;
Yohan Jarosz's avatar
Yohan Jarosz committed
11
  height: $banner-height;
12
13
  // Positioning context for the mobile navigation icon
  position: relative;
Jacek Lebioda's avatar
Jacek Lebioda committed
14
  margin-top: 30px;
15
16
17
18
19

  @media print {
    margin-top: 0px;
    display: none;
  }
20
21
}

Yohan Jarosz's avatar
Yohan Jarosz committed
22
23
24
25
26
27

.content-wrapper {
  flex: 1 0 auto;
}


Yohan Jarosz's avatar
Yohan Jarosz committed
28
29
30
31
/**
* SVG BANNER
*/

32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
.site-title {
  @include relative-font-size(1.625);
  font-weight: 300;
  line-height: $base-line-height * $base-font-size * 2.25;
  letter-spacing: -1px;
  margin-bottom: 0;
  float: left;

  &,
  &:visited {
    color: $grey-color-dark;
  }
}

.site-nav {
Jacek Lebioda's avatar
Jacek Lebioda committed
47
  margin-top: 10px;
48
49
50
  float: right;
  line-height: $base-line-height * $base-font-size * 2.25;

Jacek Lebioda's avatar
Jacek Lebioda committed
51
52
53
54
  .page-tabs {
    padding-right: 50px;
  }

55
56
57
58
59
60
61
62
  .nav-trigger {
      display: none;
  }

  .menu-icon {
    display: none;
  }

63
  a.page-link2.active {
Jacek Lebioda's avatar
Jacek Lebioda committed
64
65
66
    color: #222;
  }

67
  .page-link:hover, .page-link2:hover {
Jacek Lebioda's avatar
Jacek Lebioda committed
68
69
70
71
72
73
74
    text-decoration: none;
  }

  .page-link:hover:after {
    border-color: #58595B;
  }

Jacek Lebioda's avatar
Jacek Lebioda committed
75
  @media (min-width: 640px) {
76
    .page-link:after {
Jacek Lebioda's avatar
Jacek Lebioda committed
77
78
79
80
81
      content: " ";
      width: 22px;
      border-bottom: solid 3px #cbcfda;
      position: absolute;
      top: 30px;
82
      left: 10px;
Jacek Lebioda's avatar
Jacek Lebioda committed
83
      float: left;
84
85
    }
    .page-link2.active {
Jacek Lebioda's avatar
Jacek Lebioda committed
86
      border-bottom: 3px solid #808080;
Jacek Lebioda's avatar
Jacek Lebioda committed
87
88
89
90
    }
  }

  @media (max-width: 640px) {
91
    .page-link.active:before, .page-link2.active:before {
92
      content: "\2023";
Jacek Lebioda's avatar
Jacek Lebioda committed
93
94
      margin-right: 10px;
      position: absolute;
95
      left: 20px;
Jacek Lebioda's avatar
Jacek Lebioda committed
96
97
      color: rgb(23, 168, 225);
    }
98
    .page-link.active, .page-link2.active {
Jacek Lebioda's avatar
Jacek Lebioda committed
99
100
101
      font-weight: 600;
      color: rgb(23, 168, 225);
    }
102
    .page-link, .page-link2 {
Jacek Lebioda's avatar
Jacek Lebioda committed
103
104
      color: #222;
    }
Jacek Lebioda's avatar
Jacek Lebioda committed
105
106
107
  }

  @media (min-width: 640px) {
108
    .page-link2:hover {
Jacek Lebioda's avatar
Jacek Lebioda committed
109
      border-bottom: 3px solid #808080;
110
    }
Jacek Lebioda's avatar
Jacek Lebioda committed
111

112
113
114
    .page-link:hover, .page-link2:hover {
      color: #222 !important;
        &:not(.active) {  // padding-top: 20px;
Jacek Lebioda's avatar
Jacek Lebioda committed
115
116
117
        }
    }

118
    .page-link2 {
Jacek Lebioda's avatar
Jacek Lebioda committed
119
120
      position: relative;

Jacek Lebioda's avatar
Jacek Lebioda committed
121
122
123
124
125
      // New version (full underline)
      min-width: 40px;
      margin: 0 15px 0 8px;
      padding: 0 2px 0 2px;
      border-bottom: 3px solid #e0e0e0;
Jacek Lebioda's avatar
Jacek Lebioda committed
126

Jacek Lebioda's avatar
Jacek Lebioda committed
127
128
129
130
131
132
133
      float: left;

      -moz-transition: padding 0.8s ease;
      -webkit-transition: padding 0.8s ease;
      -o-transition: padding 0.8s ease;
      transition: padding 0.8s ease;

Jacek Lebioda's avatar
Jacek Lebioda committed
134
135
136
137
138
      -moz-transition: border 0.3s ease;
      -webkit-transition: border 0.3s ease;
      -o-transition: border 0.3s ease;
      transition: border 0.3s ease;

Jacek Lebioda's avatar
Jacek Lebioda committed
139
140
141
      z-index: 8;
    }

142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
    .page-link {
      position: relative;

      min-width: 60px;
      margin: 0 0 0 -1px;
      padding: 2px 10px 4px 9px;

      float: left;

      -moz-transition: padding 0.8s ease;
      -webkit-transition: padding 0.8s ease;
      -o-transition: padding 0.8s ease;
      transition: padding 0.8s ease;

      -moz-transition: border 0.3s ease;
      -webkit-transition: border 0.3s ease;
      -o-transition: border 0.3s ease;
      transition: border 0.3s ease;

      z-index: 8;
    }

Jacek Lebioda's avatar
Jacek Lebioda committed
164
165
    .active:after {
      border-color: #58595B;
Jacek Lebioda's avatar
Jacek Lebioda committed
166
    }
Jacek Lebioda's avatar
Jacek Lebioda committed
167
168
  }

169
  .page-link, .page-link2 {
Jacek Lebioda's avatar
Jacek Lebioda committed
170
    // color: $text-color;
171
    line-height: $base-line-height;
Jacek Lebioda's avatar
Jacek Lebioda committed
172
    font-weight: 600;
173
    text-align: left;
174
175
176

    // Gaps between nav items, but not on the last one
    &:not(:last-child) {
177
      // margin-right: -6px;
178
179
180
181
182
    }
  }

  @include media-query($on-palm) {
    position: absolute;
Jacek Lebioda's avatar
Jacek Lebioda committed
183
    top: -25px;
Jacek Lebioda's avatar
Jacek Lebioda committed
184
    right: $spacing-unit / 2;
185
186
187
188
    background-color: $background-color;
    border: 1px solid $grey-color-light;
    border-radius: 5px;
    text-align: right;
189
    max-width: calc(100% - 30px);
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218

    label[for="nav-trigger"] {
      display: block;
      float: right;
      width: 36px;
      height: 36px;
      z-index: 2;
      cursor: pointer;
    }

    .menu-icon {
      display: block;
      float: right;
      width: 36px;
      height: 26px;
      line-height: 0;
      padding-top: 10px;
      text-align: center;

      > svg path {
        fill: $grey-color-dark;
      }
    }

    input ~ .trigger {
      clear: both;
      display: none;
    }

219
220
221
222
    input:checked ~ div {
      width: 100%;
    }

223
224
    input:checked ~ .trigger {
      display: block;
225
226
227
      padding-bottom: 15px;
      padding-right: 15px;
      width: calc(100% - 15px);
228
229
    }

230
    .page-link, .page-link2 {
231
      display: block;
232
      padding: 7px 10px;
233
234
235

      &:not(:last-child) {
        margin-right: 0;
236
        border-bottom: solid 1px #eceaea;
237
238
239
240
241
242
243
244
245
246
247
248
249
      }
      margin-left: 20px;
    }
  }
}



/**
 * Site footer
 */
.site-footer {
  padding: $spacing-unit 0;
Yohan Jarosz's avatar
Yohan Jarosz committed
250
251
252
253
254
  bottom: 0;
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
Yohan Jarosz's avatar
Yohan Jarosz committed
255
  margin-top: -$footer-height + $spacing-unit;
Yohan Jarosz's avatar
Yohan Jarosz committed
256
  flex-shrink: 0;
Yohan Jarosz's avatar
Yohan Jarosz committed
257
  height: $footer-height;
258
259
260
261
262
  line-height: 15px;

  @media print {
    display: none;
  }
263
264
}

Yohan Jarosz's avatar
footer    
Yohan Jarosz committed
265
266
267
268
269
270
.footer-wrapper {
  width: 100%;
  padding: $spacing-unit 0;
  border-top: 1px solid $grey-color-light;
}

271
272
273
274
275
276
277
278
279
280
281
.footer-heading {
  @include relative-font-size(1.125);
  margin-bottom: $spacing-unit / 2;
}

.contact-list,
.social-media-list {
  list-style: none;
  margin-left: 0;
}

Yohan Jarosz's avatar
Yohan Jarosz committed
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
.social-media-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: center;

  li {
    display: inline;
    a {
      text-decoration: none;
      padding: .2em 1em;
    }
  }
}

Yohan Jarosz's avatar
footer    
Yohan Jarosz committed
297
298
.footer-cp {
  @include relative-font-size(0.8);
299
300
301
  color: $grey-color;
  margin-left: -$spacing-unit / 2;
  @extend %clearfix;
Yohan Jarosz's avatar
footer    
Yohan Jarosz committed
302
303
  position: relative;
  text-align: center;
304
305
306
307
308
309
310
311
312
313
314
}


@include media-query($on-palm) {
  .footer-col {
    float: none;
    width: -webkit-calc(100% - (#{$spacing-unit} / 2));
    width:         calc(100% - (#{$spacing-unit} / 2));
  }
}

Jacek Lebioda's avatar
Jacek Lebioda committed
315
316
317
318
.site-footer-share {
  margin-bottom: 4px;
}

319
320
321
322
323
324


/**
 * Page content
 */
.page-content {
325
  margin-top: 30px;
Jacek Lebioda's avatar
Jacek Lebioda committed
326
  margin-left: 5%;
Yohan Jarosz's avatar
Yohan Jarosz committed
327
  @include media-query($on-palm) {
Jacek Lebioda's avatar
Jacek Lebioda committed
328
329
    margin-top: 5px;
    padding-top: 0px;
Jacek Lebioda's avatar
Jacek Lebioda committed
330
    margin-left: 1%;
Yohan Jarosz's avatar
Yohan Jarosz committed
331
  }
332
  padding: $spacing-unit 0;
Yohan Jarosz's avatar
Yohan Jarosz committed
333
  padding-bottom: $footer-height;
334
335
336
337
338

  @media print {
    margin-top: 2px;
    margin-left: unset;
  }
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
}

.page-heading {
  @include relative-font-size(2);
}

.post-list-heading {
  @include relative-font-size(1.75);
}

.post-list {
  margin-left: 0;
  list-style: none;

  > li {
    margin-bottom: $spacing-unit;
  }
}

.post-meta {
  font-size: $small-font-size;
  color: $grey-color;
}

.post-link {
  display: block;
  @include relative-font-size(1.5);
}



/**
 * Posts
 */
.post-header {
  margin-bottom: $spacing-unit;
}

.post-title {
  @include relative-font-size(2.625);
  letter-spacing: -1px;
  line-height: 1;

  @include media-query($on-laptop) {
    @include relative-font-size(2.25);
  }
}

.post-content {
  margin-bottom: $spacing-unit;

  h2 {
    @include relative-font-size(2);

    @include media-query($on-laptop) {
      @include relative-font-size(1.75);
    }
  }

  h3 {
    @include relative-font-size(1.625);

    @include media-query($on-laptop) {
      @include relative-font-size(1.375);
    }
  }

  h4 {
    @include relative-font-size(1.25);

    @include media-query($on-laptop) {
      @include relative-font-size(1.125);
    }
  }
}
Yohan Jarosz's avatar
Yohan Jarosz committed
414

Yohan Jarosz's avatar
Yohan Jarosz committed
415
.pager-active {
Yohan Jarosz's avatar
Yohan Jarosz committed
416
  background-color: #cbdce9;
Yohan Jarosz's avatar
Yohan Jarosz committed
417
418
419
420
421
422
}


.center-image {
  margin: 0 auto;
  display: block;
Jacek Lebioda's avatar
Jacek Lebioda committed
423
}