Add some blog post resources
[WebKit-https.git] / Websites / webkit.org / demos / safe-area-insets / 4-min-max.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: min() and max()</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     }
44
45     #bottomBar a {
46         padding: 0 24px;
47
48         color: white;
49         font-size: 12pt;
50         text-decoration: none;
51     }
52
53     h1 {
54         margin: 12px 0 0 0;
55     }
56
57     h2 {
58         color: #aaa;
59         font-size: 12pt;
60         text-align: left;
61
62         margin: 0;
63     }
64
65     .post {
66         width: 100%;
67
68         margin-bottom: 50px;
69
70         padding: 12px;
71     }
72
73     .post p:first-child {
74         margin: 0;
75     }
76
77     @supports(padding: max(0px)) {
78         #bottomBar {
79             padding-left: max(8px, constant(safe-area-inset-left));
80             padding-right: max(8px, constant(safe-area-inset-right));
81             padding-bottom: max(8px, constant(safe-area-inset-bottom));
82         }
83
84         .post {
85             padding-left: max(12px, constant(safe-area-inset-left));
86             padding-right: max(12px, constant(safe-area-inset-right));
87         }
88     }
89     </style>
90 </head>
91 <body>
92     <div id="topBar"><a href="#">Blog</a><a href="#">Photos</a><a href="#">Projects</a></div>
93     <div class="post">
94     <h1>Welcome</h1>
95     <h2>two hours ago</h2>
96     <p>Hi!</p>
97     <p>Welcome to my sample blog!</p>
98     <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>
99     <p>The actual post describing how to adopt the new API is over on the <a href="#">WebKit blog</a>.</p>
100     <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>
101     <p>I hope that it helps you adopt these new features in your websites.</p>
102     </div>
103     <div id="bottomBar"><a href="#">About Me</a><a href="#">Contact</a><a href="#">Site Map</a></div>
104 </body>
105 </html>