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 |
cb4379e1 |
31 | background-color: _palette_light(bg);\r |
748286b5 |
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 |
cb4379e1 |
41 | @media screen and (prefers-color-scheme: dark) {\r |
42 | background-color: _palette_dark(bg);\r |
43 | }\r |
748286b5 |
44 | }\r |
45 | \r |
46 | h1 {\r |
47 | font-size: 3.25em;\r |
48 | }\r |
49 | \r |
50 | > .inner {\r |
51 | @include vendor('transition', (\r |
52 | 'opacity 1.5s ease',\r |
53 | 'transform 0.5s ease-out',\r |
54 | 'filter 0.5s ease',\r |
55 | '-webkit-filter 0.5s ease'\r |
56 | ));\r |
57 | padding: 0 !important;\r |
58 | position: relative;\r |
59 | z-index: 2;\r |
60 | \r |
61 | .image {\r |
62 | display: none;\r |
63 | }\r |
64 | \r |
65 | header {\r |
66 | width: auto;\r |
67 | \r |
68 | > :first-child {\r |
69 | width: auto;\r |
70 | \r |
71 | &:after {\r |
72 | max-width: 100%;\r |
73 | }\r |
74 | }\r |
75 | }\r |
76 | \r |
77 | .content {\r |
78 | @include vendor('display', 'flex');\r |
79 | @include vendor('align-items', 'center');\r |
80 | margin: 0 0 _size(element-margin) 0;\r |
81 | \r |
82 | > * {\r |
83 | margin-right: 1.5em;\r |
84 | margin-bottom: 0;\r |
85 | }\r |
86 | \r |
87 | > :last-child {\r |
88 | margin-right: 0;\r |
89 | }\r |
90 | \r |
91 | p {\r |
92 | font-size: 0.7em;\r |
93 | font-weight: _font(weight-bold);\r |
94 | letter-spacing: _font(letter-spacing-alt);\r |
95 | text-transform: uppercase;\r |
96 | }\r |
97 | }\r |
98 | }\r |
99 | \r |
100 | &.major {\r |
101 | height: 75vh;\r |
102 | min-height: 30em;\r |
103 | max-height: 50em;\r |
104 | \r |
105 | &.alt {\r |
106 | opacity: 0.75;\r |
107 | }\r |
108 | }\r |
109 | \r |
cb4379e1 |
110 | &.style1 { &:after { background-color: _palette_light(accent1); } }\r |
111 | &.style2 { &:after { background-color: _palette_light(accent2); } }\r |
112 | &.style3 { &:after { background-color: _palette_light(accent3); } }\r |
113 | &.style4 { &:after { background-color: _palette_light(accent4); } }\r |
114 | &.style5 { &:after { background-color: _palette_light(accent5); } }\r |
115 | &.style6 { &:after { background-color: _palette_light(accent6); } }\r |
116 | \r |
117 | @media screen and (prefers-color-scheme: dark) {\r |
118 | &.style1 { &:after { background-color: _palette_dark(accent1); } }\r |
119 | &.style2 { &:after { background-color: _palette_dark(accent2); } }\r |
120 | &.style3 { &:after { background-color: _palette_dark(accent3); } }\r |
121 | &.style4 { &:after { background-color: _palette_dark(accent4); } }\r |
122 | &.style5 { &:after { background-color: _palette_dark(accent5); } }\r |
123 | &.style6 { &:after { background-color: _palette_dark(accent6); } }\r |
124 | }\r |
748286b5 |
125 | \r |
126 | body.is-preload & {\r |
127 | &:after {\r |
128 | opacity: 1.0;\r |
129 | }\r |
130 | \r |
131 | > .inner {\r |
132 | @include vendor('filter', 'blur(0.125em)');\r |
133 | @include vendor('transform', 'translateX(-0.5em)');\r |
134 | opacity: 0;\r |
135 | }\r |
136 | }\r |
137 | \r |
138 | @include breakpoint('<=large') {\r |
139 | background-attachment: scroll;\r |
140 | }\r |
141 | \r |
142 | @include breakpoint('<=small') {\r |
143 | @include padding(3em, 0, (2em, 0, 0, 0));\r |
144 | height: auto;\r |
145 | margin-bottom: -2.75em;\r |
146 | max-height: none;\r |
147 | min-height: 0;\r |
148 | top: -2.75em;\r |
149 | \r |
150 | h1 {\r |
151 | font-size: 2em;\r |
152 | }\r |
153 | \r |
154 | > .inner {\r |
155 | .content {\r |
156 | display: block;\r |
157 | \r |
158 | > * {\r |
159 | margin-right: 0;\r |
160 | margin-bottom: _size(element-margin);\r |
161 | }\r |
162 | }\r |
163 | }\r |
164 | \r |
165 | &.major {\r |
166 | height: auto;\r |
167 | min-height: 0;\r |
168 | max-height: none;\r |
169 | }\r |
170 | }\r |
171 | \r |
172 | @include breakpoint('<=xsmall') {\r |
173 | @include padding(4em, 0, (2em, 0, 0, 0));\r |
174 | \r |
175 | > .inner {\r |
176 | .content {\r |
177 | p {\r |
178 | br {\r |
179 | display: none;\r |
180 | }\r |
181 | }\r |
182 | }\r |
183 | }\r |
184 | \r |
185 | &.major {\r |
186 | @include padding(6em, 0, (2em, 0, 0, 0));\r |
187 | }\r |
188 | }\r |
189 | } |