Add some blog post resources
[WebKit-https.git] / Websites / webkit.org / demos / safe-area-insets / safe-areas.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: Safe area illustration</title>
6     <link rel="stylesheet" type="text/css" href="style.css">
7     <style>
8     body {
9         height: 10000px;
10     }
11
12     #unsafeArea {
13         background: repeating-linear-gradient(45deg, #a40000, #a40000 10px, #cc0000 10px, #cc0000 20px);
14
15         position: fixed;
16         top: 0;
17         left: 0;
18         right: 0;
19         bottom: 0;
20     }
21
22     #safeArea {
23         background-color: #4e9a06;
24
25         display: flex;
26         align-items: center;
27         justify-content: center;
28         
29         position: fixed;
30         top: constant(safe-area-inset-top);
31         left: constant(safe-area-inset-left);
32         right: constant(safe-area-inset-right);
33         bottom: constant(safe-area-inset-bottom);
34     }
35
36     .horizontalInsetIndicator {
37         border-left: 4px solid white;
38         border-right: 4px solid white;
39
40         display: flex;
41         align-items: center;
42         justify-content: center;
43
44         position: fixed;
45
46         top: 45px;
47         height: 25px;
48     }
49
50     .horizontalInsetIndicator .midline {
51         border-top: 2px solid white;
52         border-bottom: 2px solid white;
53         width: 100%;
54         height: 0px;
55     }
56
57     .verticalInsetIndicator {
58         border-top: 4px solid white;
59         border-bottom: 4px solid white;
60
61         display: flex;
62         align-items: center;
63         justify-content: center;
64
65         position: fixed;
66
67         left: calc(constant(safe-area-inset-left) + 45px);
68         width: 25px;
69     }
70
71     .verticalInsetIndicator .midline {
72         border-left: 2px solid white;
73         border-right: 2px solid white;
74         width: 0px;
75         height: 100%;
76     }
77
78     .indicatorLabel {
79         position: fixed;
80         font-family: monospace;
81         font-size: 12pt;
82     }
83
84     #leftInsetIndicator {
85         left: 0;
86         width: constant(safe-area-inset-left);
87     }
88
89     #leftInsetIndicator .indicatorLabel {
90         left: calc(constant(safe-area-inset-left) + 12px);
91     }
92
93     #rightInsetIndicator {
94         right: 0;
95         width: constant(safe-area-inset-left);
96     }
97
98     #rightInsetIndicator .indicatorLabel {
99         right: calc(constant(safe-area-inset-right) + 12px);
100     }
101
102     #bottomInsetIndicator {
103         bottom: 0;
104         height: constant(safe-area-inset-bottom);
105     }
106
107     #bottomInsetIndicator .indicatorLabel {
108         left: calc(constant(safe-area-inset-left) + 12px);
109         bottom: calc(constant(safe-area-inset-bottom) + 12px);
110     }
111     </style>
112 </head>
113 <body>
114     <div id="unsafeArea"></div>
115     <div id="safeArea"><h1>Safe Area</h1></div>
116     <div id="leftInsetIndicator" class="horizontalInsetIndicator"><div class="midline"></div><div class="indicatorLabel">constant(safe-area-inset-left)</div></div>
117     <div id="rightInsetIndicator" class="horizontalInsetIndicator"><div class="midline"></div><div class="indicatorLabel">constant(safe-area-inset-right)</div></div>
118     <div id="bottomInsetIndicator" class="verticalInsetIndicator"><div class="midline"></div><div class="indicatorLabel">constant(safe-area-inset-bottom)</div></div>
119 </body>
120 </html>