_layout.scss 6.85 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 {
Jacek Lebioda's avatar
Jacek Lebioda committed
92
93
94
      content: "\2022";
      margin-right: 10px;
      position: absolute;
Jacek Lebioda's avatar
Jacek Lebioda committed
95
      left: 12%;
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
189
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
219
220
221
222
    background-color: $background-color;
    border: 1px solid $grey-color-light;
    border-radius: 5px;
    text-align: right;

    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;
    }

    input:checked ~ .trigger {
      display: block;
      padding-bottom: 5px;
    }

223
    .page-link, .page-link2 {
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
      display: block;
      padding: 5px 10px;

      &:not(:last-child) {
        margin-right: 0;
      }
      margin-left: 20px;
    }
  }
}



/**
 * Site footer
 */
.site-footer {
  padding: $spacing-unit 0;
Yohan Jarosz's avatar
Yohan Jarosz committed
242
243
244
245
246
  bottom: 0;
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
Yohan Jarosz's avatar
Yohan Jarosz committed
247
  margin-top: -$footer-height + $spacing-unit;
Yohan Jarosz's avatar
Yohan Jarosz committed
248
  flex-shrink: 0;
Yohan Jarosz's avatar
Yohan Jarosz committed
249
  height: $footer-height;
250
251
252
253
254
  line-height: 15px;

  @media print {
    display: none;
  }
255
256
}

Yohan Jarosz's avatar
footer    
Yohan Jarosz committed
257
258
259
260
261
262
.footer-wrapper {
  width: 100%;
  padding: $spacing-unit 0;
  border-top: 1px solid $grey-color-light;
}

263
264
265
266
267
268
269
270
271
272
273
.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
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
.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
289
290
.footer-cp {
  @include relative-font-size(0.8);
291
292
293
  color: $grey-color;
  margin-left: -$spacing-unit / 2;
  @extend %clearfix;
Yohan Jarosz's avatar
footer    
Yohan Jarosz committed
294
295
  position: relative;
  text-align: center;
296
297
298
299
300
301
302
303
304
305
306
}


@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
307
308
309
310
.site-footer-share {
  margin-bottom: 4px;
}

311
312
313
314
315
316


/**
 * Page content
 */
.page-content {
317
  margin-top: 30px;
Jacek Lebioda's avatar
Jacek Lebioda committed
318
  margin-left: 5%;
Yohan Jarosz's avatar
Yohan Jarosz committed
319
  @include media-query($on-palm) {
Jacek Lebioda's avatar
Jacek Lebioda committed
320
321
    margin-top: 5px;
    padding-top: 0px;
Jacek Lebioda's avatar
Jacek Lebioda committed
322
    margin-left: 1%;
Yohan Jarosz's avatar
Yohan Jarosz committed
323
  }
324
  padding: $spacing-unit 0;
Yohan Jarosz's avatar
Yohan Jarosz committed
325
  padding-bottom: $footer-height;
326
327
328
329
330

  @media print {
    margin-top: 2px;
    margin-left: unset;
  }
331
332
333
334
335
336
337
338
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
}

.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
406

Yohan Jarosz's avatar
Yohan Jarosz committed
407
.pager-active {
Yohan Jarosz's avatar
Yohan Jarosz committed
408
  background-color: #cbdce9;
Yohan Jarosz's avatar
Yohan Jarosz committed
409
410
411
412
413
414
}


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