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="#">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>