source: main/waeup-hugo/public/sass/layout/_header.scss @ 16536

Last change on this file since 16536 was 14926, checked in by Henrik Bettermann, 7 years ago
File size: 4.8 KB
Line 
1///
2/// Dimension 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/* Header */
8
9        #header {
10                @include vendor('display', 'flex');
11                @include vendor('flex-direction', 'column');
12                @include vendor('align-items', 'center');
13                @include vendor('transition', (
14                        'transform #{_duration(article)} ease-in-out',
15                        'filter #{_duration(article)} ease-in-out',
16                        'opacity #{_duration(article)} ease-in-out',
17                ));
18                background-image: -moz-radial-gradient(rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 55%);
19                background-image: -webkit-radial-gradient(rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 55%);
20                background-image: -ms-radial-gradient(rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 55%);
21                background-image: radial-gradient(rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 55%);
22                max-width: 100%;
23                text-align: center;
24
25                > * {
26                        @include vendor('transition', 'opacity #{_duration(article)} ease-in-out');
27                        position: relative;
28                        margin-top: 3.5rem;
29
30                        &:before {
31                                content: '';
32                                display: block;
33                                position: absolute;
34                                top: calc(-3.5rem - 1px);
35                                left: calc(50% - #{_size(border-width) * 1});
36                                width: _size(border-width);
37                                height: calc(3.5rem + 1px);
38                                background: _palette(border);
39                        }
40                }
41
42                > :first-child {
43                        margin-top: 0;
44
45                        &:before {
46                                display: none;
47                        }
48                }
49
50                .logo {
51                        width: 5.5rem;
52                        height: 5.5rem;
53                        line-height: 5.5rem;
54                        border: solid _size(border-width) _palette(border);
55                        border-radius: 100%;
56
57                        .icon {
58                                &:before {
59                                        font-size: 2rem;
60                                }
61                        }
62                }
63
64                .content {
65                        border-style: solid;
66                        border-color: _palette(border);
67                        border-top-width: _size(border-width);
68                        border-bottom-width: _size(border-width);
69                        max-width: 100%;
70
71                        .inner {
72                                @include vendor('transition', (
73                                        'max-height #{_duration(intro)} ease',
74                                        'padding #{_duration(intro)} ease',
75                                        'opacity #{_duration(article)} ease-in-out'
76                                ));
77                                @include vendor('transition-delay', '0.25s');
78                                padding: 3rem 2rem;
79                                max-height: 40rem;
80                                overflow: hidden;
81
82                                > :last-child {
83                                        margin-bottom: 0;
84                                }
85                        }
86
87                        p {
88                                text-transform: uppercase;
89                                letter-spacing: _font(letter-spacing);
90                                font-size: 0.8rem;
91                                line-height: 2;
92                        }
93                }
94
95                nav {
96                        ul {
97                                @include vendor('display', 'flex');
98                                margin-bottom: 0;
99                                list-style: none;
100                                padding-left: 0;
101                                border: solid _size(border-width) _palette(border);
102                                border-radius: _size(border-radius);
103
104                                li {
105                                        padding-left: 0;
106                                        border-left: solid _size(border-width) _palette(border);
107
108                                        &:first-child {
109                                                border-left: 0;
110                                        }
111
112                                        a {
113                                                display: block;
114                                                min-width: 7.5rem;
115                                                height: 2.75rem;
116                                                line-height: 2.75rem;
117                                                padding: 0 1.25rem 0 (1.25rem + _font(letter-spacing));
118                                                text-transform: uppercase;
119                                                letter-spacing: _font(letter-spacing);
120                                                font-size: 0.8rem;
121                                                border-bottom: 0;
122
123                                                &:hover {
124                                                        background-color: _palette(border-bg);
125                                                }
126
127                                                &:active {
128                                                        background-color: _palette(border-bg-alt);
129                                                }
130                                        }
131                                }
132                        }
133
134                        &.use-middle {
135                                &:after {
136                                        content: '';
137                                        display: block;
138                                        position: absolute;
139                                        top: 0;
140                                        left: calc(50% - #{_size(border-width) * 1});
141                                        width: _size(border-width);
142                                        height: 100%;
143                                        background: _palette(border);
144                                }
145
146                                ul {
147                                        li {
148                                                &.is-middle {
149                                                        border-left: 0;
150                                                }
151                                        }
152                                }
153                        }
154                }
155
156                body.is-article-visible & {
157                        @include vendor('transform', 'scale(0.95)');
158                        @include vendor('filter', 'blur(0.1rem)');
159                        opacity: 0;
160                }
161
162                body.is-loading & {
163                        > * {
164                                opacity: 0;
165                        }
166
167                        @include vendor('filter', 'blur(0.125rem)');
168
169                        .content {
170                                .inner {
171                                        max-height: 0;
172                                        padding-top: 0;
173                                        padding-bottom: 0;
174                                        opacity: 0;
175                                }
176                        }
177                }
178
179                @include breakpoint(medium) {
180                        .content {
181                                p {
182                                        br {
183                                                display: none;
184                                        }
185                                }
186                        }
187                }
188
189                @include breakpoint(small) {
190                        > * {
191                                margin-top: 2rem;
192
193                                &:before {
194                                        top: calc(-2rem - 1px);
195                                        height: calc(2rem + 1px);
196                                }
197                        }
198
199                        .logo {
200                                width: 4.75rem;
201                                height: 4.75rem;
202                                line-height: 4.75rem;
203
204                                .icon {
205                                        &:before {
206                                                font-size: 1.75rem;
207                                        }
208                                }
209                        }
210
211                        .content {
212                                .inner {
213                                        padding: 2.5rem 1rem;
214                                }
215
216                                p {
217                                        line-height: 1.875;
218                                }
219                        }
220                }
221
222                @include breakpoint(xsmall) {
223                        padding: 1.5rem 0;
224
225                        .content {
226                                .inner {
227                                        padding: 2.5rem 0;
228                                }
229                        }
230
231                        nav {
232                                ul {
233                                        @include vendor('flex-direction', 'column');
234                                        min-width: 10rem;
235                                        max-width: 100%;
236
237                                        li {
238                                                border-left: 0;
239                                                border-top: solid _size(border-width) _palette(border);
240
241                                                &:first-child {
242                                                        border-top: 0;
243                                                }
244
245                                                a {
246                                                        height: 3rem;
247                                                        line-height: 3rem;
248                                                        min-width: 0;
249                                                        width: 100%;
250                                                }
251                                        }
252                                }
253
254                                &.use-middle {
255                                        &:after {
256                                                display: none;
257                                        }
258                                }
259                        }
260                }
261        }
Note: See TracBrowser for help on using the repository browser.