Add some blog post resources
[WebKit-https.git] / Websites / webkit.org / demos / safe-area-insets / 3-safe-area-constants.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4     <meta name="viewport" content="initial-scale=1, viewport-fit=cover">
5     <title>Designing Websites for iPhone X: Respecting the safe areas</title>
6     <link rel="stylesheet" type="text/css" href="style.css">
7     <style>
8     #topBar {
9         background-color: #729fcf;
10         padding: constant(safe-area-inset-top) constant(safe-area-inset-right) 0 constant(safe-area-inset-left);
11     }
12
13     #topBar a {
14         display: inline-block;
15
16         height: 100%;
17         padding: 12px;
18
19         border-right: 3px solid rgba(255, 255, 255, 0.5);
20
21         color: white;
22         text-decoration: none;
23         font-weight: bold;
24         font-size: 18pt;
25     }
26
27     #topBar a:last-child {
28         border-right: none;
29     }
30
31     #bottomBar {
32         position: fixed;
33
34         left: 0;
35         right: 0;
36         bottom: 0;
37
38         background-color: #3465a4;
39
40         text-align: center;
41
42         padding: 8px;
43         padding-left: constant(safe-area-inset-left);
44         padding-right: constant(safe-area-inset-right);
45         padding-bottom: constant(safe-area-inset-bottom);
46     }
47
48     #bottomBar a {
49         padding: 0 24px;
50
51         color: white;
52         font-size: 12pt;
53         text-decoration: none;
54     }
55
56     h1 {
57         margin: 12px 0 0 0;
58     }
59
60     h2 {
61         color: #aaa;
62         font-size: 12pt;
63         text-align: left;
64
65         margin: 0;
66     }
67
68     .post {
69         width: 100%;
70
71         margin-bottom: 50px;
72
73         padding: 12px;
74         padding-left: constant(safe-area-inset-left);
75         padding-right: constant(safe-area-inset-right);
76     }
77
78     .post p:first-child {
79         margin: 0;
80     }
81     </style>
82 </head>
83 <body>
84     <div id="topBar"><a href="#">Blog</a><a href="#">Photos</a><a href="#">Projects</a></div>
85     <div class="post">
86     <h1>Welcome</h1>
87     <h2>two hours ago</h2>
88     <p>Hi!</p>
89     <p>Welcome to my sample blog!</p>
90     <p>This post is here to help demonstrate how easy it is to take an existing site, along with full-width bars and fixed-position elements, and make it take full advantage of iPhone X's edge-to-edge display.</p>
91     <p>The actual post describing how to adopt the new API is over on the <a href="#">WebKit blog</a>.</p>
92     <p>There, you will learn all about new WebKit features, including <code>viewport-fit</code>, <code>constant()</code>, safe area insets, and <code>min()</code> and <code>max()</code>.</p>
93     <p>I hope that it helps you adopt these new features in your websites.</p>
94     </div>
95     <div id="bottomBar"><a href="#">About Me</a><a href="#">Contact</a><a href="#">Site Map</a></div>
96 </body>
97 </html>