_layout.scss 5.29 KB
Newer Older
1
2
3
4
5
/**
 * Site header
 */
.site-header {
  min-height: $spacing-unit * 1.865;
Yohan Jarosz's avatar
Yohan Jarosz committed
6
  height: $banner-height;
7
8
  // Positioning context for the mobile navigation icon
  position: relative;
Jacek Lebioda's avatar
Jacek Lebioda committed
9
  margin-top: 30px;
10
11
}

Yohan Jarosz's avatar
Yohan Jarosz committed
12
13
14
15
16
17

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


Yohan Jarosz's avatar
Yohan Jarosz committed
18
19
20
21
/**
* SVG BANNER
*/

22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.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 {
  float: right;
  line-height: $base-line-height * $base-font-size * 2.25;

Jacek Lebioda's avatar
Jacek Lebioda committed
40
41
42
43
  .page-tabs {
    padding-right: 50px;
  }

44
45
46
47
48
49
50
51
  .nav-trigger {
      display: none;
  }

  .menu-icon {
    display: none;
  }

52
  .page-link:hover {
Jacek Lebioda's avatar
Jacek Lebioda committed
53
    // color: #020202;
Jacek Lebioda's avatar
Jacek Lebioda committed
54
55
56
57
  }

  @media (min-width: 640px) {
    .page-link:hover {
Jacek Lebioda's avatar
Jacek Lebioda committed
58
59
60
61
62
        // border: solid 1px #555;
        // border-top: none;
        // border-right: solid 1px;

        border-top: 4px #333 solid;
Jacek Lebioda's avatar
Jacek Lebioda committed
63
64
65
66
67
68
69

        text-decoration: none;
        box-shadow: #0000001f 0px 5px 10px 0px;

        z-index: 100;
        margin-right: 0px;

Jacek Lebioda's avatar
Jacek Lebioda committed
70
71
      color: #222 !important;

Jacek Lebioda's avatar
Jacek Lebioda committed
72
        &:not(.active) {
Jacek Lebioda's avatar
Jacek Lebioda committed
73
          // padding-top: 20px;
Jacek Lebioda's avatar
Jacek Lebioda committed
74
75
76
77
78
79
80
81
82
83
        }
    }

    .page-link {
      min-width: 60px;
      position: relative;

      border: solid 1px #999;
      border-top: none;
      border-radius: 0 0 10px 10px;
Jacek Lebioda's avatar
Jacek Lebioda committed
84

Jacek Lebioda's avatar
Jacek Lebioda committed
85
86
      margin: 0 0 0 -1px;
      padding: 2px 10px 4px 9px;
Jacek Lebioda's avatar
Jacek Lebioda committed
87

Jacek Lebioda's avatar
Jacek Lebioda committed
88
89
//      color: #0bc5ff;

Jacek Lebioda's avatar
Jacek Lebioda committed
90
91
92
93
94
95
96
97
98
99
100
      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;

      z-index: 8;
    }

    .active {
Jacek Lebioda's avatar
Jacek Lebioda committed
101
102
      // padding-top: 20px;
      color: #222;
Jacek Lebioda's avatar
Jacek Lebioda committed
103
    }
Jacek Lebioda's avatar
Jacek Lebioda committed
104
105
  }

106
  .page-link {
Jacek Lebioda's avatar
Jacek Lebioda committed
107
    // color: $text-color;
108
    line-height: $base-line-height;
Jacek Lebioda's avatar
Jacek Lebioda committed
109
    font-weight: 600;
110
    text-align: center;
111

Jacek Lebioda's avatar
Jacek Lebioda committed
112
113
    border-top: solid 4px #b6c1cc;

114
115
    // Gaps between nav items, but not on the last one
    &:not(:last-child) {
116
      // margin-right: -6px;
117
118
119
    }
  }

Jacek Lebioda's avatar
Jacek Lebioda committed
120
  .active {
Jacek Lebioda's avatar
Jacek Lebioda committed
121
    border-top: solid 4px #333;
Jacek Lebioda's avatar
Jacek Lebioda committed
122
123
  }

124
125
126
  @include media-query($on-palm) {
    position: absolute;
    top: 9px;
Jacek Lebioda's avatar
Jacek Lebioda committed
127
    right: $spacing-unit / 2;
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
    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;
    }

    .page-link {
      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
185
186
187
188
189
  bottom: 0;
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
Yohan Jarosz's avatar
Yohan Jarosz committed
190
  margin-top: -$footer-height + $spacing-unit;
Yohan Jarosz's avatar
Yohan Jarosz committed
191
  flex-shrink: 0;
Yohan Jarosz's avatar
Yohan Jarosz committed
192
193
  height: $footer-height;
  line-height: 15px
194
195
}

Yohan Jarosz's avatar
footer    
Yohan Jarosz committed
196
197
198
199
200
201
.footer-wrapper {
  width: 100%;
  padding: $spacing-unit 0;
  border-top: 1px solid $grey-color-light;
}

202
203
204
205
206
207
208
209
210
211
212
.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
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
.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
228
229
.footer-cp {
  @include relative-font-size(0.8);
230
231
232
  color: $grey-color;
  margin-left: -$spacing-unit / 2;
  @extend %clearfix;
Yohan Jarosz's avatar
footer    
Yohan Jarosz committed
233
234
  position: relative;
  text-align: center;
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
}


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



/**
 * Page content
 */
.page-content {
252
  margin-top: 30px;
Jacek Lebioda's avatar
Jacek Lebioda committed
253
  margin-left: 5%;
Yohan Jarosz's avatar
Yohan Jarosz committed
254
  @include media-query($on-palm) {
Yohan Jarosz's avatar
fix #7    
Yohan Jarosz committed
255
    margin-top: -40px;
Jacek Lebioda's avatar
Jacek Lebioda committed
256
    margin-left: 1%;
Yohan Jarosz's avatar
Yohan Jarosz committed
257
  }
258
  padding: $spacing-unit 0;
Yohan Jarosz's avatar
Yohan Jarosz committed
259
  padding-bottom: $footer-height;
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
}

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