Add a CSS class to remove padding when using mattewhite class for figures
[WebKit-https.git] / Websites / webkit.org / wp-content / themes / webkit / front-header.php
1     <style>
2     body.home {
3         background-color: white;
4     }
5
6     .home .site-logo {
7         opacity: 0;
8         transition: opacity 0.5s ease-out;
9     }
10
11     .home .page-layer {
12         background-color: #f7f7f7;
13         border-top: 1px solid #e7e7e7;
14         position: relative;
15         z-index: 1;
16     }
17
18     .admin-bar header {
19         top: 32px;
20     }
21
22     .home header {
23         -webkit-backdrop-filter: none;
24         border: none;
25         background: none;
26         position: fixed;
27
28     }
29
30     .hero a {
31         text-decoration: none;
32         z-index: 5;
33     }
34
35     .hero {
36         height: 800px;
37         margin-bottom: 3rem;
38         overflow: hidden;
39         background: none;
40         box-sizing: border-box;
41
42         position: fixed;
43         top: 0;
44         left: 0;
45         width: 100vw;
46
47         background-image: radial-gradient(65vw at 50% 40%, white 50%, rgba(255, 255, 255, 0.00) 100%), linear-gradient(180deg, rgb(255, 255, 255) 10%, rgb(232, 232, 232) 32%);
48         background-position: 0% 0%;
49     }
50
51     .admin-bar .hero.spacing {
52         margin-top: -32px;
53     }
54
55     .hero.spacing {
56         position: relative;
57         height: auto;
58         visibility: hidden;
59     }
60
61     .hero .logo {
62         text-align: left;
63         margin: 3rem auto 0;
64         padding-left: 12rem;
65         padding-bottom: 3px;
66         box-sizing: border-box;
67
68         line-height: 10rem;
69         font-size: 6rem;
70         font-weight: 200;
71         color: #444;
72
73         background-repeat: no-repeat;
74         background-size: 10rem;
75         background-position: left 1rem;
76     }
77
78     .admin-bar .hero .logo {
79         margin-top: 5rem;
80     }
81
82     .hero .tagline {
83         text-align: left;
84         display: block;
85         font-size: 3rem;
86         font-weight: 200;
87         line-height: 1.125;
88         margin-top: -2.5rem;
89         margin-bottom: 2rem;
90         color: #555;
91     }
92
93     .intro .column {
94         position: relative;
95         font-size: 2.4rem;
96         line-height: 1.35417;
97         font-weight: 200;
98         box-sizing: border-box;
99         width: 42.24561404%;
100         display: inline-block;
101         vertical-align: text-top;
102     }
103
104     .intro .column h2 {
105         font-size: 3.2rem;
106         line-height: 1.125;
107         font-weight: 200;
108         letter-spacing: 0em;
109         display: block;
110         margin-top: 3rem;
111         margin-bottom: 1.8rem;
112     }
113
114     .intro .column:first-child {
115         margin-right: 14.63157894%;
116     }
117
118
119     .home .floating {
120         border-bottom: 1px solid #e7e7e7;
121         background: rgba(255,255,255,0.9);
122     }
123
124     @supports ( -webkit-backdrop-filter: blur(10px) ) {
125         .home .floating {
126             backdrop-filter: blur(10px);
127             -webkit-backdrop-filter: blur(10px);
128             background: rgba(255,255,255,0.8);
129         }
130     }
131
132     .home .site-logo.fade {
133         opacity: 1;
134     }
135
136     .particles {
137         position: relative;
138         top: 0;
139         left: 0;
140         width: 100%;
141         height: 100%;
142         -webkit-transform-origin: center center;
143           -ms-transform-origin: center center;
144               transform-origin: center center;
145     }
146
147     .particle {
148         position: absolute;
149         background: white;
150         opacity: .7;
151         border-radius: 50%;
152         z-index: -2;
153     }
154     
155     @media only screen and (max-width: 782px) {
156         
157         .admin-bar header {
158             top: 46px;
159         }
160     
161         .admin-bar .hero.spacing {
162             margin-top: -46px;
163         }
164     
165         .hero {
166             position: absolute;
167         }
168         
169         .intro .column {
170             width: 100%;
171         }
172         
173     }
174     
175     @media only screen and (max-width: 600px) {
176     
177         .hero .logo,
178         .hero .tagline,
179         .hero .particle {
180             display: none;
181         }
182     
183         .hero {
184            padding-top: 8rem;
185         }
186         
187         .admin-bar .hero {
188             padding-top: 13rem;
189         }
190         
191 /*        .admin-bar .hero.spacing {
192             margin-top: calc(13rem - 46px);
193         }*/
194     
195         .home header {
196             padding-top: 1rem;
197             position: absolute;
198         }
199
200         .home .site-logo {
201             opacity: 1;
202             margin-top: 0;
203         }
204
205         .home header {
206             border-bottom: 1px solid #e7e7e7;
207             background: rgba(255,255,255,0.9);
208         }
209
210         @supports ( -webkit-backdrop-filter: blur(10px) ) {
211             .home header {
212                 backdrop-filter: blur(10px);
213                 -webkit-backdrop-filter: blur(10px);
214                 background: rgba(255,255,255,0.8);
215             }
216         }
217     
218         .home .pagination .next-button {
219             width: 100%;
220         }
221     
222     }
223     
224     @media only screen and (max-height: 415px) {
225         .hero .logo,
226         .hero .tagline,
227         .hero .particle {
228             display: none;
229         }
230     
231         .home .site-logo {
232             opacity: 1;
233             margin-top: 0;
234         }
235         .home .hero {
236             margin: 7rem 0 0;
237         }
238     
239         .home.admin-bar .hero {
240             margin-top: 12rem;
241         }
242     
243         header,
244         .home header {
245             padding-top: 1rem;
246             position: absolute;
247         }
248         .home header {
249             border-bottom: 1px solid #e7e7e7;
250             background: rgba(255,255,255,0.9);
251         }
252
253         @supports ( -webkit-backdrop-filter: blur(10px) ) {
254             .home header {
255                 backdrop-filter: blur(10px);
256                 -webkit-backdrop-filter: blur(10px);
257                 background: rgba(255,255,255,0.8);
258             }
259         }
260     }
261         
262     <?php 
263         
264         function rand_outside_circle() {
265             srand();
266             $circle_x = 50;
267             $circle_y = 40;
268             $circle_r = 32;
269             $x = rand(0, 100); 
270             $y = rand(0, 100);
271             
272             // Avoid starting or ending inside the white fill gradient
273             if ( pow(($x - $circle_x), 2) + pow(($y - $circle_y), 2) <= pow($circle_r, 2) )
274                 return rand_outside_circle();
275             
276             return array($x . "vw", $y . "vh");
277         }
278         
279         for ($i = 1; $i < 101; $i++): 
280             $size = rand(5, 80) . "px";
281             list($Xorigin, $Yorigin) = rand_outside_circle();
282             list($Xend, $Yend) = rand_outside_circle();
283             $from_opacity = rand(3, 8) / 10;
284             $to_opacity = rand(3, 8) / 10;
285         ?>
286         .particle:nth-child(<?php echo $i; ?>){
287             height: <?php echo $size; ?>; width: <?php echo $size; ?>;
288             transform: translate(<?php echo $Xorigin; ?>,  <?php echo $Yorigin; ?>);
289             opacity: <?php echo $from_opacity; ?>;
290             animation: move-<?php echo $i; ?> 60s ease-out;
291             animation-direction: alternate;
292             animation-fill-mode: forwards;
293             -webkit-animation-fill-mode: forwards;
294         }
295
296         @keyframes move-<?php echo $i; ?> {
297             100% {
298                 transform: translate(<?php echo $Xend; ?>, <?php echo $Yend; ?>);
299                 opacity: <?php echo $to_opacity; ?>;
300             }
301         }
302     <?php endfor; ?>
303     </style>
304     <div id="hero" class="hero">
305         <?php for ($i = 0; $i < 101; $i++)
306             echo "<div class=\"particle\"></div>"; ?>
307         <div class="intro page-width">
308         <a href="/"><h1 class="logo">WebKit <span class="tagline">Open Source Web Browser Engine</span></h1></a>
309        
310         <?php if ( is_front_page() && have_posts()): the_post(); ?><div class="intro-copy"><?php 
311             $content = get_the_content();
312             $columns = explode('<br />', $content);
313             foreach ( $columns as $column )
314                 echo "<div class=\"column\">$column</div>";
315         ?></div><?php endif; ?>
316         </div>
317     </div>
318     <div class="hero spacing">
319         <div class="intro page-width">
320         <a href="/"><h1 class="logo">WebKit <span class="tagline">Open Source Web Browser Engine</span></h1></a>
321        
322         <?php if ( ! empty($columns) ): ?><div class="intro-copy"><?php 
323             foreach ( $columns as $column )
324                 echo "<div class=\"column\">$column</div>";
325         ?></div><?php endif; ?>
326         </div>
327     </div>
328     <script>
329     var latestScrollY = NaN, scrollV = 0, updating = false, layer = false,
330         header = document.getElementById("header"),
331         hero = document.getElementById("hero"),
332         scrollBoundary = 353;
333         
334     header.animating = false;
335     logo.animating = false;
336     
337     function onScroll() {
338         if (isNaN(latestScrollY)) 
339             latestScrollY = window.scrollY;
340         
341         if (!updating)
342                 requestAnimationFrame(update);
343         updating = true;
344     }
345
346     function update() {
347         updating = false;
348         
349         if (document.body.offsetWidth <= 508) return;
350         
351         if (latestScrollY != window.scrollY) {
352             scrollV = window.scrollY - latestScrollY;
353             latestScrollY = window.scrollY;
354             
355             if (!layer) {
356                 layer = document.getElementsByClassName("page-layer").item(0);
357             }
358             
359             scrollBoundary = layer.offsetTop - header.offsetHeight;
360         }
361                 
362         if (latestScrollY >= scrollBoundary) {
363             addAnimationClass(header, "floating");
364             if (!logo.classList.contains('fade'))
365                 setAnimateSpeed(logo, scrollV);
366             addAnimationClass(logo, "fade");
367         } else if (latestScrollY < scrollBoundary) {
368             removeAnimationClass(header, "floating");
369             if (logo.classList.contains('fade'))
370                 setAnimateSpeed(logo, 10);
371             removeAnimationClass(logo, "fade");
372         }
373         
374     }
375
376     function setAnimateSpeed(element, velocity) {
377         if (element.animating) return;
378         var duration = Math.abs(3 / (velocity * 1.618));
379         element.style["-webkit-transition-duration"] = duration + "s";
380     }
381     
382     function addAnimationClass(element, classname) {
383         if (element.classList.contains(classname)) return;
384         if (element.animating) return;
385         
386         element.classList.add(classname.trim());
387         animatingElement(element);
388     }
389     
390     function animatingElement(element) {
391         element.animating = true;
392         element.addEventListener("transitionend", function () {
393             element.animating = false;
394         });            
395     }
396     
397     function removeAnimationClass(element, classname) {
398         if (!element.classList.contains(classname)) return;
399         if (element.animating) return;
400
401         element.classList.remove(classname.trim());
402         animatingElement(element);
403     }
404
405     window.addEventListener("scroll", onScroll, false);
406     window.addEventListener("resize", onScroll, false);
407     </script>
408         
409 <div class="page-layer">