748286b5 |
1 | ///\r |
2 | /// Forty by HTML5 UP\r |
3 | /// html5up.net | @ajlkn\r |
4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)\r |
5 | ///\r |
6 | \r |
7 | /* Banner */\r |
8 | \r |
9 | #banner {\r |
10 | @include vendor('align-items', 'center');\r |
b8ef5fe0 |
11 | @include vendor('background-image', 'url("../bg/bg2.jpg")');\r |
748286b5 |
12 | @include vendor('display', 'flex');\r |
13 | @include padding(4em, 0, (2em, 0, 0, 0));\r |
14 | background-attachment: fixed;\r |
15 | background-position: center;\r |
16 | background-repeat: no-repeat;\r |
17 | background-size: cover;\r |
18 | border-bottom: 0 !important;\r |
19 | cursor: default;\r |
20 | height: 60vh;\r |
b8ef5fe0 |
21 | margin-bottom: -5.25em;\r |
748286b5 |
22 | max-height: 32em;\r |
23 | min-height: 22em;\r |
24 | position: relative;\r |
25 | top: -3.25em;\r |
26 | \r |
27 | &:after {\r |
28 | @include vendor('transition', 'opacity #{_duration(banner)} ease');\r |
29 | @include vendor('transition-delay', '0.75s');\r |
30 | @include vendor('pointer-events', 'none');\r |
31 | background-color: _palette(bg);\r |
32 | content: '';\r |
33 | display: block;\r |
34 | height: 100%;\r |
35 | left: 0;\r |
b8ef5fe0 |
36 | opacity: 0.7;\r |
748286b5 |
37 | position: absolute;\r |
38 | top: 0;\r |
39 | width: 100%;\r |
40 | z-index: 1;\r |
41 | }\r |
42 | \r |
43 | h1 {\r |
44 | font-size: 3.25em;\r |
45 | }\r |
46 | \r |
47 | > .inner {\r |
48 | @include vendor('transition', (\r |
49 | 'opacity 1.5s ease',\r |
50 | 'transform 0.5s ease-out',\r |
51 | 'filter 0.5s ease',\r |
52 | '-webkit-filter 0.5s ease'\r |
53 | ));\r |
54 | padding: 0 !important;\r |
55 | position: relative;\r |
56 | z-index: 2;\r |
57 | \r |
58 | .image {\r |
59 | display: none;\r |
60 | }\r |
61 | \r |
62 | header {\r |
63 | width: auto;\r |
64 | \r |
65 | > :first-child {\r |
66 | width: auto;\r |
67 | \r |
68 | &:after {\r |
69 | max-width: 100%;\r |
70 | }\r |
71 | }\r |
72 | }\r |
73 | \r |
74 | .content {\r |
75 | @include vendor('display', 'flex');\r |
76 | @include vendor('align-items', 'center');\r |
77 | margin: 0 0 _size(element-margin) 0;\r |
78 | \r |
79 | > * {\r |
80 | margin-right: 1.5em;\r |
81 | margin-bottom: 0;\r |
82 | }\r |
83 | \r |
84 | > :last-child {\r |
85 | margin-right: 0;\r |
86 | }\r |
87 | \r |
88 | p {\r |
89 | font-size: 0.7em;\r |
90 | font-weight: _font(weight-bold);\r |
91 | letter-spacing: _font(letter-spacing-alt);\r |
92 | text-transform: uppercase;\r |
93 | }\r |
94 | }\r |
95 | }\r |
96 | \r |
97 | &.major {\r |
98 | height: 75vh;\r |
99 | min-height: 30em;\r |
100 | max-height: 50em;\r |
101 | \r |
102 | &.alt {\r |
103 | opacity: 0.75;\r |
104 | }\r |
105 | }\r |
106 | \r |
107 | &.style1 { &:after { background-color: _palette(accent1); } }\r |
108 | &.style2 { &:after { background-color: _palette(accent2); } }\r |
109 | &.style3 { &:after { background-color: _palette(accent3); } }\r |
110 | &.style4 { &:after { background-color: _palette(accent4); } }\r |
111 | &.style5 { &:after { background-color: _palette(accent5); } }\r |
112 | &.style6 { &:after { background-color: _palette(accent6); } }\r |
113 | \r |
114 | body.is-preload & {\r |
115 | &:after {\r |
116 | opacity: 1.0;\r |
117 | }\r |
118 | \r |
119 | > .inner {\r |
120 | @include vendor('filter', 'blur(0.125em)');\r |
121 | @include vendor('transform', 'translateX(-0.5em)');\r |
122 | opacity: 0;\r |
123 | }\r |
124 | }\r |
125 | \r |
126 | @include breakpoint('<=large') {\r |
127 | background-attachment: scroll;\r |
128 | }\r |
129 | \r |
130 | @include breakpoint('<=small') {\r |
131 | @include padding(3em, 0, (2em, 0, 0, 0));\r |
132 | height: auto;\r |
133 | margin-bottom: -2.75em;\r |
134 | max-height: none;\r |
135 | min-height: 0;\r |
136 | top: -2.75em;\r |
137 | \r |
138 | h1 {\r |
139 | font-size: 2em;\r |
140 | }\r |
141 | \r |
142 | > .inner {\r |
143 | .content {\r |
144 | display: block;\r |
145 | \r |
146 | > * {\r |
147 | margin-right: 0;\r |
148 | margin-bottom: _size(element-margin);\r |
149 | }\r |
150 | }\r |
151 | }\r |
152 | \r |
153 | &.major {\r |
154 | height: auto;\r |
155 | min-height: 0;\r |
156 | max-height: none;\r |
157 | }\r |
158 | }\r |
159 | \r |
160 | @include breakpoint('<=xsmall') {\r |
161 | @include padding(4em, 0, (2em, 0, 0, 0));\r |
162 | \r |
163 | > .inner {\r |
164 | .content {\r |
165 | p {\r |
166 | br {\r |
167 | display: none;\r |
168 | }\r |
169 | }\r |
170 | }\r |
171 | }\r |
172 | \r |
173 | &.major {\r |
174 | @include padding(6em, 0, (2em, 0, 0, 0));\r |
175 | }\r |
176 | }\r |
177 | } |