From 6cd4d41c121d1b5137359fb1219a503f42ba0585 Mon Sep 17 00:00:00 2001 From: "timothy_horton@apple.com" Date: Fri, 22 Sep 2017 01:08:24 +0000 Subject: [PATCH] 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. git-svn-id: https://svn.webkit.org/repository/webkit/trunk@222375 268f45cc-cd09-0410-ab3c-d52691b4dbfc --- Websites/webkit.org/ChangeLog | 14 +++ .../demos/safe-area-insets/1-default.html | 91 ++++++++++++++++ .../demos/safe-area-insets/2-viewport-fit.html | 91 ++++++++++++++++ .../safe-area-insets/3-safe-area-constants.html | 97 +++++++++++++++++ .../demos/safe-area-insets/4-min-max.html | 105 ++++++++++++++++++ .../demos/safe-area-insets/safe-areas.html | 120 +++++++++++++++++++++ .../webkit.org/demos/safe-area-insets/style.css | 14 +++ 7 files changed, 532 insertions(+) create mode 100644 Websites/webkit.org/demos/safe-area-insets/1-default.html create mode 100644 Websites/webkit.org/demos/safe-area-insets/2-viewport-fit.html create mode 100644 Websites/webkit.org/demos/safe-area-insets/3-safe-area-constants.html create mode 100644 Websites/webkit.org/demos/safe-area-insets/4-min-max.html create mode 100644 Websites/webkit.org/demos/safe-area-insets/safe-areas.html create mode 100644 Websites/webkit.org/demos/safe-area-insets/style.css diff --git a/Websites/webkit.org/ChangeLog b/Websites/webkit.org/ChangeLog index 25e58e5..b746647 100644 --- a/Websites/webkit.org/ChangeLog +++ b/Websites/webkit.org/ChangeLog @@ -1,3 +1,17 @@ +2017-09-21 Tim Horton + + 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 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 index 0000000..da4e59b --- /dev/null +++ b/Websites/webkit.org/demos/safe-area-insets/1-default.html @@ -0,0 +1,91 @@ + + + + + Designing Websites for iPhone X: Before + + + + + +
+

Welcome

+

two hours ago

+

Hi!

+

Welcome to my sample blog!

+

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.

+

The actual post describing how to adopt the new API is over on the WebKit blog.

+

There, you will learn all about new WebKit features, including viewport-fit, constant(), safe area insets, and min() and max().

+

I hope that it helps you adopt these new features in your websites.

+
+ + + \ 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 index 0000000..71c44f5 --- /dev/null +++ b/Websites/webkit.org/demos/safe-area-insets/2-viewport-fit.html @@ -0,0 +1,91 @@ + + + + + Designing Websites for iPhone X: Using the whole screen + + + + + +
+

Welcome

+

two hours ago

+

Hi!

+

Welcome to my sample blog!

+

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.

+

The actual post describing how to adopt the new API is over on the WebKit blog.

+

There, you will learn all about new WebKit features, including viewport-fit, constant(), safe area insets, and min() and max().

+

I hope that it helps you adopt these new features in your websites.

+
+ + + \ 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 index 0000000..e0d2260 --- /dev/null +++ b/Websites/webkit.org/demos/safe-area-insets/3-safe-area-constants.html @@ -0,0 +1,97 @@ + + + + + Designing Websites for iPhone X: Respecting the safe areas + + + + + +
+

Welcome

+

two hours ago

+

Hi!

+

Welcome to my sample blog!

+

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.

+

The actual post describing how to adopt the new API is over on the WebKit blog.

+

There, you will learn all about new WebKit features, including viewport-fit, constant(), safe area insets, and min() and max().

+

I hope that it helps you adopt these new features in your websites.

+
+ + + \ 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 index 0000000..ab2493f --- /dev/null +++ b/Websites/webkit.org/demos/safe-area-insets/4-min-max.html @@ -0,0 +1,105 @@ + + + + + Designing Websites for iPhone X: min() and max() + + + + + +
+

Welcome

+

two hours ago

+

Hi!

+

Welcome to my sample blog!

+

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.

+

The actual post describing how to adopt the new API is over on the WebKit blog.

+

There, you will learn all about new WebKit features, including viewport-fit, constant(), safe area insets, and min() and max().

+

I hope that it helps you adopt these new features in your websites.

+
+ + + \ 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 index 0000000..8eb4539 --- /dev/null +++ b/Websites/webkit.org/demos/safe-area-insets/safe-areas.html @@ -0,0 +1,120 @@ + + + + + Designing Websites for iPhone X: Safe area illustration + + + + +
+

Safe Area

+
constant(safe-area-inset-left)
+
constant(safe-area-inset-right)
+
constant(safe-area-inset-bottom)
+ + \ 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 index 0000000..78efe97 --- /dev/null +++ b/Websites/webkit.org/demos/safe-area-insets/style.css @@ -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; +} -- 1.8.3.1