Added a dark mode color scheme.
[WebKit-https.git] / Websites / webkit.org / wp-content / themes / webkit / front-header.php
1     <style>
2     header {
3         position: absolute;
4     }
5
6     .page-layer {
7         overflow: hidden;
8     }
9
10     .hero {
11         position: relative;
12         overflow: hidden;
13         max-width: 100vw;
14         box-sizing: border-box;
15         padding: 0 0 6rem;
16         color: white;
17         background-color: hsl(203.6, 100%, 12%);
18         z-index: 1;
19         top: -30rem;
20         padding-top: 45rem;
21         margin-bottom: -30rem;
22     }
23
24     .hero h1 {
25         font-size: 4.8rem;
26         font-weight: 500;
27         letter-spacing: 0.006rem;
28         text-align: center;
29         line-height: 1.04167;
30     }
31
32     .hero p {
33         font-size: 2.2rem;
34         line-height: 1.45455;
35         letter-spacing: 0.016em;
36         font-weight: 300;
37         text-align: center;
38         margin-top: 1.65rem;
39     }
40
41     .hero a {
42         color: hsl(200, 100%, 50%);
43     }
44
45     #fade {
46         position: absolute;
47         width: 100%;
48         height: 1261px;
49         background-image: radial-gradient(ellipse closest-corner at center center,hsl(198, 100%, 20%) 0%,hsla(204, 100%, 20%,0) 100%);
50         z-index: 4;
51         transform: translateY(-45rem);
52     }
53
54     #template {
55         opacity: 0.1;
56         position: absolute;
57         top: 0px;
58         width: 100%;
59         height: 195.5rem;
60         background-repeat: no-repeat;
61         background-position: 50% 49.5%;
62         background-size: 101.5%;
63         z-index: 3;
64         transform: translateY(-40rem);    }
65
66     #compass {
67         position: absolute;
68         top: 0px;
69         width: 100%;
70         height: 1950px;
71         background-repeat: no-repeat;
72         background-position: 50% 50%;
73         background-size: 98%;
74         opacity: 0.3;
75         -webkit-animation: bgspin 360s ease-out;
76         animation: bgspin 360s ease-out;
77         z-index: 2;
78         will-change: transform;
79     }
80
81     @keyframes bgspin {
82         from {
83             transform: translateY(-400px) rotate(0);
84             -webkit-transform: translateY(-400px) rotate(0deg);
85         }
86         to {
87             transform: translateY(-400px) rotate(360);
88             -webkit-transform: translateY(-400px) rotate(360deg);
89         }
90     }
91
92     @-webkit-keyframes bgspin {
93         from {
94             transform: translateY(-400px) rotate(0);
95             -webkit-transform: translateY(-400px) rotate(0deg);
96         }
97
98         to {
99             transform: translateY(-400px) rotate(360);
100             -webkit-transform: translateY(-400px) rotate(360deg);
101         }
102     }
103
104     .hero .content {
105         position: relative;
106         max-width: 800px;
107         padding: 0 3rem;
108         margin: 0 auto;
109         z-index: 10;
110     }
111
112     main {
113         position: relative;
114         z-index: 10;
115     }
116
117     @media only screen and (max-width: 920px) {
118         .hero {
119             padding-top: 40rem;
120             padding-bottom: 3rem;
121         }
122     }
123
124     @media only screen and (max-width: 690px) {
125         .hero h1 {
126             font-size: 4rem;
127             line-height: 1.1;
128         }
129
130         .hero p {
131             font-size: 2rem;
132             line-height: 1.4;
133             letter-spacing: -0.016rem;
134         }
135
136         #compass {
137             background-size: 150%;
138         }
139     }
140
141     @media only screen and (max-width: 320px) {
142         .hero h1 {
143             font-size: 2.5rem;
144             letter-spacing: -0.016rem;
145         }
146     }
147
148     @media (prefers-reduced-motion) {
149         #compass {
150             animation: none;
151             transform: translateY(-400px);
152         }
153     }
154
155     </style>
156
157     <?php if ( is_front_page() && have_posts()): the_post(); ?>
158     <div class="hero">
159         <div id="template"></div>
160         <div id="compass"></div>
161         <div id="fade"></div>
162         <div class="content">
163             <?php the_content(); ?>
164         </div>
165     </div>
166     <?php endif; ?>
167
168 <div class="page-layer">