Migrated from @blog -> @site
[editorial.git] / assets / main / sass / layout / _banner.scss
1 ///
2 /// Editorial by HTML5 UP
3 /// html5up.net | @ajlkn
4 /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
5 ///
6
7 /* Banner */
8
9 #banner {
10 @include padding(6em, 0);
11 @include vendor('display', 'flex');
12
13 h1 {
14 margin-top: -0.125em;
15 }
16
17 .content {
18 @include vendor('flex-grow', '1');
19 @include vendor('flex-shrink', '1');
20 width: 50%;
21 }
22
23 .image {
24 @include vendor('flex-grow', '0');
25 @include vendor('flex-shrink', '0');
26 display: block;
27 margin: 0 0 _size(element-margin) (_size(element-margin) * 2);
28 width: 50%;
29
30 img {
31 height: 100%;
32 -moz-object-fit: cover;
33 -webkit-object-fit: cover;
34 -ms-object-fit: cover;
35 object-fit: cover;
36 -moz-object-position: center;
37 -webkit-object-position: center;
38 -ms-object-position: center;
39 object-position: center;
40 width: 100%;
41 }
42 }
43
44 @include orientation(portrait) {
45 @include vendor('flex-direction', 'column-reverse');
46
47 h1 {
48 br {
49 display: none;
50 }
51 }
52
53 .content {
54 @include vendor('flex-grow', '0');
55 @include vendor('flex-shrink', '0');
56 width: 100%;
57 }
58
59 .image {
60 @include vendor('flex-grow', '0');
61 @include vendor('flex-shrink', '0');
62 margin: 0 0 (_size(element-margin) * 2) 0;
63 height: 25em;
64 max-height: 50vh;
65 min-height: 18em;
66 width: 100%;
67 }
68
69 @include breakpoint('<=xsmall') {
70 .image {
71 max-height: 35vh;
72 }
73 }
74 }
75 }