Add some blog post resources
authortimothy_horton@apple.com <timothy_horton@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 22 Sep 2017 01:08:24 +0000 (01:08 +0000)
committertimothy_horton@apple.com <timothy_horton@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 22 Sep 2017 01:08:24 +0000 (01:08 +0000)
https://bugs.webkit.org/show_bug.cgi?id=177333

Reviewed by Sam Weinig.

* demos/safe-area-insets/1-default.html: Added.
* demos/safe-area-insets/2-viewport-fit.html: Added.
* demos/safe-area-insets/3-safe-area-constants.html: Added.
* demos/safe-area-insets/4-min-max.html: Added.
* demos/safe-area-insets/safe-areas.html: Added.
* demos/safe-area-insets/style.css: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@222375 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Websites/webkit.org/ChangeLog
Websites/webkit.org/demos/safe-area-insets/1-default.html [new file with mode: 0644]
Websites/webkit.org/demos/safe-area-insets/2-viewport-fit.html [new file with mode: 0644]
Websites/webkit.org/demos/safe-area-insets/3-safe-area-constants.html [new file with mode: 0644]
Websites/webkit.org/demos/safe-area-insets/4-min-max.html [new file with mode: 0644]
Websites/webkit.org/demos/safe-area-insets/safe-areas.html [new file with mode: 0644]
Websites/webkit.org/demos/safe-area-insets/style.css [new file with mode: 0644]

index 25e58e5..b746647 100644 (file)
@@ -1,3 +1,17 @@
+2017-09-21  Tim Horton  <timothy_horton@apple.com>
+
+        Add some blog post resources
+        https://bugs.webkit.org/show_bug.cgi?id=177333
+
+        Reviewed by Sam Weinig.
+
+        * demos/safe-area-insets/1-default.html: Added.
+        * demos/safe-area-insets/2-viewport-fit.html: Added.
+        * demos/safe-area-insets/3-safe-area-constants.html: Added.
+        * demos/safe-area-insets/4-min-max.html: Added.
+        * demos/safe-area-insets/safe-areas.html: Added.
+        * demos/safe-area-insets/style.css: Added.
+
 2017-08-21  Ross Kirsling  <ross.kirsling@sony.com>
 
         Add Sony to domain affiliations on team page
diff --git a/Websites/webkit.org/demos/safe-area-insets/1-default.html b/Websites/webkit.org/demos/safe-area-insets/1-default.html
new file mode 100644 (file)
index 0000000..da4e59b
--- /dev/null
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="initial-scale=1">
+    <title>Designing Websites for iPhone X: Before</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <style>
+    #topBar {
+        background-color: #729fcf;
+    }
+
+    #topBar a {
+        display: inline-block;
+
+        height: 100%;
+        padding: 12px;
+
+        border-right: 3px solid rgba(255, 255, 255, 0.5);
+
+        color: white;
+        text-decoration: none;
+        font-weight: bold;
+        font-size: 18pt;
+    }
+
+    #topBar a:last-child {
+        border-right: none;
+    }
+
+    #bottomBar {
+        position: fixed;
+
+        left: 0;
+        right: 0;
+        bottom: 0;
+
+        background-color: #3465a4;
+
+        text-align: center;
+
+        padding: 8px;
+    }
+
+    #bottomBar a {
+        padding: 0 24px;
+
+        color: white;
+        font-size: 12pt;
+        text-decoration: none;
+    }
+
+    h1 {
+        margin: 12px 0 0 0;
+    }
+
+    h2 {
+        color: #aaa;
+        font-size: 12pt;
+        text-align: left;
+
+        margin: 0;
+    }
+
+    .post {
+        width: 100%;
+
+        margin-bottom: 50px;
+
+        padding: 12px;
+    }
+
+    .post p:first-child {
+        margin: 0;
+    }
+    </style>
+</head>
+<body>
+    <div id="topBar"><a href="#">Blog</a><a href="#">Photos</a><a href="#">Projects</a></div>
+    <div class="post">
+    <h1>Welcome</h1>
+    <h2>two hours ago</h2>
+    <p>Hi!</p>
+    <p>Welcome to my sample blog!</p>
+    <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>
+    <p>The actual post describing how to adopt the new API is over on the <a href="#">WebKit blog</a>.</p>
+    <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>
+    <p>I hope that it helps you adopt these new features in your websites.</p>
+    </div>
+    <div id="bottomBar"><a href="#">About Me</a><a href="#">Contact</a><a href="#">Site Map</a></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/Websites/webkit.org/demos/safe-area-insets/2-viewport-fit.html b/Websites/webkit.org/demos/safe-area-insets/2-viewport-fit.html
new file mode 100644 (file)
index 0000000..71c44f5
--- /dev/null
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="initial-scale=1, viewport-fit=cover">
+    <title>Designing Websites for iPhone X: Using the whole screen</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <style>
+    #topBar {
+        background-color: #729fcf;
+    }
+
+    #topBar a {
+        display: inline-block;
+
+        height: 100%;
+        padding: 12px;
+
+        border-right: 3px solid rgba(255, 255, 255, 0.5);
+
+        color: white;
+        text-decoration: none;
+        font-weight: bold;
+        font-size: 18pt;
+    }
+
+    #topBar a:last-child {
+        border-right: none;
+    }
+
+    #bottomBar {
+        position: fixed;
+
+        left: 0;
+        right: 0;
+        bottom: 0;
+
+        background-color: #3465a4;
+
+        text-align: center;
+
+        padding: 8px;
+    }
+
+    #bottomBar a {
+        padding: 0 24px;
+
+        color: white;
+        font-size: 12pt;
+        text-decoration: none;
+    }
+
+    h1 {
+        margin: 12px 0 0 0;
+    }
+
+    h2 {
+        color: #aaa;
+        font-size: 12pt;
+        text-align: left;
+
+        margin: 0;
+    }
+
+    .post {
+        width: 100%;
+
+        margin-bottom: 50px;
+
+        padding: 12px;
+    }
+
+    .post p:first-child {
+        margin: 0;
+    }
+    </style>
+</head>
+<body>
+    <div id="topBar"><a href="#">Blog</a><a href="#">Photos</a><a href="#">Projects</a></div>
+    <div class="post">
+    <h1>Welcome</h1>
+    <h2>two hours ago</h2>
+    <p>Hi!</p>
+    <p>Welcome to my sample blog!</p>
+    <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>
+    <p>The actual post describing how to adopt the new API is over on the <a href="#">WebKit blog</a>.</p>
+    <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>
+    <p>I hope that it helps you adopt these new features in your websites.</p>
+    </div>
+    <div id="bottomBar"><a href="#">About Me</a><a href="#">Contact</a><a href="#">Site Map</a></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/Websites/webkit.org/demos/safe-area-insets/3-safe-area-constants.html b/Websites/webkit.org/demos/safe-area-insets/3-safe-area-constants.html
new file mode 100644 (file)
index 0000000..e0d2260
--- /dev/null
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="initial-scale=1, viewport-fit=cover">
+    <title>Designing Websites for iPhone X: Respecting the safe areas</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <style>
+    #topBar {
+        background-color: #729fcf;
+        padding: constant(safe-area-inset-top) constant(safe-area-inset-right) 0 constant(safe-area-inset-left);
+    }
+
+    #topBar a {
+        display: inline-block;
+
+        height: 100%;
+        padding: 12px;
+
+        border-right: 3px solid rgba(255, 255, 255, 0.5);
+
+        color: white;
+        text-decoration: none;
+        font-weight: bold;
+        font-size: 18pt;
+    }
+
+    #topBar a:last-child {
+        border-right: none;
+    }
+
+    #bottomBar {
+        position: fixed;
+
+        left: 0;
+        right: 0;
+        bottom: 0;
+
+        background-color: #3465a4;
+
+        text-align: center;
+
+        padding: 8px;
+        padding-left: constant(safe-area-inset-left);
+        padding-right: constant(safe-area-inset-right);
+        padding-bottom: constant(safe-area-inset-bottom);
+    }
+
+    #bottomBar a {
+        padding: 0 24px;
+
+        color: white;
+        font-size: 12pt;
+        text-decoration: none;
+    }
+
+    h1 {
+        margin: 12px 0 0 0;
+    }
+
+    h2 {
+        color: #aaa;
+        font-size: 12pt;
+        text-align: left;
+
+        margin: 0;
+    }
+
+    .post {
+        width: 100%;
+
+        margin-bottom: 50px;
+
+        padding: 12px;
+        padding-left: constant(safe-area-inset-left);
+        padding-right: constant(safe-area-inset-right);
+    }
+
+    .post p:first-child {
+        margin: 0;
+    }
+    </style>
+</head>
+<body>
+    <div id="topBar"><a href="#">Blog</a><a href="#">Photos</a><a href="#">Projects</a></div>
+    <div class="post">
+    <h1>Welcome</h1>
+    <h2>two hours ago</h2>
+    <p>Hi!</p>
+    <p>Welcome to my sample blog!</p>
+    <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>
+    <p>The actual post describing how to adopt the new API is over on the <a href="#">WebKit blog</a>.</p>
+    <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>
+    <p>I hope that it helps you adopt these new features in your websites.</p>
+    </div>
+    <div id="bottomBar"><a href="#">About Me</a><a href="#">Contact</a><a href="#">Site Map</a></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/Websites/webkit.org/demos/safe-area-insets/4-min-max.html b/Websites/webkit.org/demos/safe-area-insets/4-min-max.html
new file mode 100644 (file)
index 0000000..ab2493f
--- /dev/null
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="initial-scale=1, viewport-fit=cover">
+    <title>Designing Websites for iPhone X: min() and max()</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <style>
+    #topBar {
+        background-color: #729fcf;
+        padding: constant(safe-area-inset-top) constant(safe-area-inset-right) 0 constant(safe-area-inset-left);
+    }
+
+    #topBar a {
+        display: inline-block;
+
+        height: 100%;
+        padding: 12px;
+
+        border-right: 3px solid rgba(255, 255, 255, 0.5);
+
+        color: white;
+        text-decoration: none;
+        font-weight: bold;
+        font-size: 18pt;
+    }
+
+    #topBar a:last-child {
+        border-right: none;
+    }
+
+    #bottomBar {
+        position: fixed;
+
+        left: 0;
+        right: 0;
+        bottom: 0;
+
+        background-color: #3465a4;
+
+        text-align: center;
+
+        padding: 8px;
+    }
+
+    #bottomBar a {
+        padding: 0 24px;
+
+        color: white;
+        font-size: 12pt;
+        text-decoration: none;
+    }
+
+    h1 {
+        margin: 12px 0 0 0;
+    }
+
+    h2 {
+        color: #aaa;
+        font-size: 12pt;
+        text-align: left;
+
+        margin: 0;
+    }
+
+    .post {
+        width: 100%;
+
+        margin-bottom: 50px;
+
+        padding: 12px;
+    }
+
+    .post p:first-child {
+        margin: 0;
+    }
+
+    @supports(padding: max(0px)) {
+        #bottomBar {
+            padding-left: max(8px, constant(safe-area-inset-left));
+            padding-right: max(8px, constant(safe-area-inset-right));
+            padding-bottom: max(8px, constant(safe-area-inset-bottom));
+        }
+
+        .post {
+            padding-left: max(12px, constant(safe-area-inset-left));
+            padding-right: max(12px, constant(safe-area-inset-right));
+        }
+    }
+    </style>
+</head>
+<body>
+    <div id="topBar"><a href="#">Blog</a><a href="#">Photos</a><a href="#">Projects</a></div>
+    <div class="post">
+    <h1>Welcome</h1>
+    <h2>two hours ago</h2>
+    <p>Hi!</p>
+    <p>Welcome to my sample blog!</p>
+    <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>
+    <p>The actual post describing how to adopt the new API is over on the <a href="#">WebKit blog</a>.</p>
+    <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>
+    <p>I hope that it helps you adopt these new features in your websites.</p>
+    </div>
+    <div id="bottomBar"><a href="#">About Me</a><a href="#">Contact</a><a href="#">Site Map</a></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/Websites/webkit.org/demos/safe-area-insets/safe-areas.html b/Websites/webkit.org/demos/safe-area-insets/safe-areas.html
new file mode 100644 (file)
index 0000000..8eb4539
--- /dev/null
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="initial-scale=1, viewport-fit=cover">
+    <title>Designing Websites for iPhone X: Safe area illustration</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <style>
+    body {
+        height: 10000px;
+    }
+
+    #unsafeArea {
+        background: repeating-linear-gradient(45deg, #a40000, #a40000 10px, #cc0000 10px, #cc0000 20px);
+
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+    }
+
+    #safeArea {
+        background-color: #4e9a06;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        
+        position: fixed;
+        top: constant(safe-area-inset-top);
+        left: constant(safe-area-inset-left);
+        right: constant(safe-area-inset-right);
+        bottom: constant(safe-area-inset-bottom);
+    }
+
+    .horizontalInsetIndicator {
+        border-left: 4px solid white;
+        border-right: 4px solid white;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        position: fixed;
+
+        top: 45px;
+        height: 25px;
+    }
+
+    .horizontalInsetIndicator .midline {
+        border-top: 2px solid white;
+        border-bottom: 2px solid white;
+        width: 100%;
+        height: 0px;
+    }
+
+    .verticalInsetIndicator {
+        border-top: 4px solid white;
+        border-bottom: 4px solid white;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        position: fixed;
+
+        left: calc(constant(safe-area-inset-left) + 45px);
+        width: 25px;
+    }
+
+    .verticalInsetIndicator .midline {
+        border-left: 2px solid white;
+        border-right: 2px solid white;
+        width: 0px;
+        height: 100%;
+    }
+
+    .indicatorLabel {
+        position: fixed;
+        font-family: monospace;
+        font-size: 12pt;
+    }
+
+    #leftInsetIndicator {
+        left: 0;
+        width: constant(safe-area-inset-left);
+    }
+
+    #leftInsetIndicator .indicatorLabel {
+        left: calc(constant(safe-area-inset-left) + 12px);
+    }
+
+    #rightInsetIndicator {
+        right: 0;
+        width: constant(safe-area-inset-left);
+    }
+
+    #rightInsetIndicator .indicatorLabel {
+        right: calc(constant(safe-area-inset-right) + 12px);
+    }
+
+    #bottomInsetIndicator {
+        bottom: 0;
+        height: constant(safe-area-inset-bottom);
+    }
+
+    #bottomInsetIndicator .indicatorLabel {
+        left: calc(constant(safe-area-inset-left) + 12px);
+        bottom: calc(constant(safe-area-inset-bottom) + 12px);
+    }
+    </style>
+</head>
+<body>
+    <div id="unsafeArea"></div>
+    <div id="safeArea"><h1>Safe Area</h1></div>
+    <div id="leftInsetIndicator" class="horizontalInsetIndicator"><div class="midline"></div><div class="indicatorLabel">constant(safe-area-inset-left)</div></div>
+    <div id="rightInsetIndicator" class="horizontalInsetIndicator"><div class="midline"></div><div class="indicatorLabel">constant(safe-area-inset-right)</div></div>
+    <div id="bottomInsetIndicator" class="verticalInsetIndicator"><div class="midline"></div><div class="indicatorLabel">constant(safe-area-inset-bottom)</div></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/Websites/webkit.org/demos/safe-area-insets/style.css b/Websites/webkit.org/demos/safe-area-insets/style.css
new file mode 100644 (file)
index 0000000..78efe97
--- /dev/null
@@ -0,0 +1,14 @@
+body {
+    margin: 0;
+
+    font-family: Helvetica;
+    font-size: 16pt;
+
+    -webkit-text-size-adjust: 100%;
+
+    background-color: #eef;
+}
+
+* {
+    box-sizing: border-box;
+}