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