Diff
Modified: trunk/Websites/webkit.org/ChangeLog (222374 => 222375)
--- trunk/Websites/webkit.org/ChangeLog 2017-09-22 00:42:49 UTC (rev 222374)
+++ trunk/Websites/webkit.org/ChangeLog 2017-09-22 01:08:24 UTC (rev 222375)
@@ -1,3 +1,17 @@
+2017-09-21 Tim Horton <[email protected]>
+
+ 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 <[email protected]>
Add Sony to domain affiliations on team page
Added: trunk/Websites/webkit.org/demos/safe-area-insets/1-default.html (0 => 222375)
--- trunk/Websites/webkit.org/demos/safe-area-insets/1-default.html (rev 0)
+++ trunk/Websites/webkit.org/demos/safe-area-insets/1-default.html 2017-09-22 01:08:24 UTC (rev 222375)
@@ -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>
+ #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="" href="" href=""
+ <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="" 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="" Me</a><a href="" href="" Map</a></div>
+</body>
+</html>
\ No newline at end of file
Added: trunk/Websites/webkit.org/demos/safe-area-insets/2-viewport-fit.html (0 => 222375)
--- trunk/Websites/webkit.org/demos/safe-area-insets/2-viewport-fit.html (rev 0)
+++ trunk/Websites/webkit.org/demos/safe-area-insets/2-viewport-fit.html 2017-09-22 01:08:24 UTC (rev 222375)
@@ -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>
+ #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="" href="" href=""
+ <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="" 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="" Me</a><a href="" href="" Map</a></div>
+</body>
+</html>
\ No newline at end of file
Added: trunk/Websites/webkit.org/demos/safe-area-insets/3-safe-area-constants.html (0 => 222375)
--- trunk/Websites/webkit.org/demos/safe-area-insets/3-safe-area-constants.html (rev 0)
+++ trunk/Websites/webkit.org/demos/safe-area-insets/3-safe-area-constants.html 2017-09-22 01:08:24 UTC (rev 222375)
@@ -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>
+ #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="" href="" href=""
+ <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="" 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="" Me</a><a href="" href="" Map</a></div>
+</body>
+</html>
\ No newline at end of file
Added: trunk/Websites/webkit.org/demos/safe-area-insets/4-min-max.html (0 => 222375)
--- trunk/Websites/webkit.org/demos/safe-area-insets/4-min-max.html (rev 0)
+++ trunk/Websites/webkit.org/demos/safe-area-insets/4-min-max.html 2017-09-22 01:08:24 UTC (rev 222375)
@@ -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>
+ #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="" href="" href=""
+ <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="" 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="" Me</a><a href="" href="" Map</a></div>
+</body>
+</html>
\ No newline at end of file
Added: trunk/Websites/webkit.org/demos/safe-area-insets/safe-areas.html (0 => 222375)
--- trunk/Websites/webkit.org/demos/safe-area-insets/safe-areas.html (rev 0)
+++ trunk/Websites/webkit.org/demos/safe-area-insets/safe-areas.html 2017-09-22 01:08:24 UTC (rev 222375)
@@ -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>
+ 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
Added: trunk/Websites/webkit.org/demos/safe-area-insets/style.css (0 => 222375)
--- trunk/Websites/webkit.org/demos/safe-area-insets/style.css (rev 0)
+++ trunk/Websites/webkit.org/demos/safe-area-insets/style.css 2017-09-22 01:08:24 UTC (rev 222375)
@@ -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;
+}
