Attachment 342758 Details for Bug 186529 – Patch

[patch] Patch

bug-186529-20180614134413.patch (text/plain), 5.56 KB, created by Jon Davis on 2018-06-14 13:44:13 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Jon Davis

Created: 2018-06-14 13:44:13 PDT

Size: 5.56 KB

patch

obsolete

>Subversion Revision: 232851
>diff --git a/Websites/webkit.org/ChangeLog b/Websites/webkit.org/ChangeLog
>index d2f3c4e11f056f2adeee8f026e7f50a7e1e348bb..870b425062b633fa09c8fe255eff0472d4e3c920 100644
>--- a/Websites/webkit.org/ChangeLog
>+++ b/Websites/webkit.org/ChangeLog
>@@ -1,5 +1,25 @@
> 2018-06-14  Jon Davis  <jond@apple.com>
> 
>+        Disable some vestibular trigger animations when prefers-reduced-motion is active.
>+        https://bugs.webkit.org/show_bug.cgi?id=186529
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        * wp-content/themes/webkit/style.css:
>+        (@supports ( -webkit-backdrop-filter: blur(10px) )):
>+        (footer):
>+        (header .menu-item-has-children .label-toggle::after):
>+        (@media (prefers-reduced-motion)): Added.
>+        (article,):
>+        (@media only screen and (max-width: 920px)):
>+        (.main-menu.label-toggle):
>+        (header .menu):
>+        (@media only screen and (max-width: 690px)):
>+        (@media only screen and (max-width: 415px)):
>+        (@media only screen and (max-height: 415px)):
>+
>+2018-06-14  Jon Davis  <jond@apple.com>
>+
>         Minor layout fix for WebKit Feature Status Page
>         https://bugs.webkit.org/show_bug.cgi?id=186539
> 
>diff --git a/Websites/webkit.org/wp-content/themes/webkit/style.css b/Websites/webkit.org/wp-content/themes/webkit/style.css
>index 1ac8da1d3612a1fa559e73dfeea7ca5c809adf7d..40f7919a9c80625dbaf165ef987f15a12f8da7d7 100644
>--- a/Websites/webkit.org/wp-content/themes/webkit/style.css
>+++ b/Websites/webkit.org/wp-content/themes/webkit/style.css
>@@ -250,13 +250,13 @@ header {
> }
> 
> @supports ( -webkit-backdrop-filter: blur(10px) ) {
>-    
>+
>     .home header {
>         background-color: transparent;
>         backdrop-filter: blur(0px);
>         -webkit-backdrop-filter: blur(0px);
>     }
>-    
>+
>     .sub-menu-layer {
>         backdrop-filter: blur(10px);
>         -webkit-backdrop-filter: blur(10px);
>@@ -424,7 +424,7 @@ footer {
>     clear: both;
>     width: 100%;
>     padding-bottom: 1.65rem;
>-    box-sizing: border-box;    
>+    box-sizing: border-box;
> }
> 
> footer .menu {
>@@ -1567,7 +1567,7 @@ input.menu-toggle {
> }
> 
> footer {
>-    
>+
> }
> 
> footer nav {
>@@ -1624,11 +1624,11 @@ header .menu-item-has-children .label-toggle::after {
>     margin-left: 0.5rem;
>     margin-top: -0.1rem;
>     content: '';
>-    
>+
>     -webkit-filter: invert(100%);
>     filter: invert(100%);
>-    perspective: 600;        
>-    
>+    perspective: 600;
>+
>     transition: transform 0.3s ease-out;
> }
> 
>@@ -1703,6 +1703,16 @@ header .menu-item { /* add bottom dimension to main menu items */
>     margin-top: 0;
> }
> 
>+/** Accessibility **/
>+
>+@media (prefers-reduced-motion) {
>+    article,
>+    .feature-status-page {
>+        -webkit-animation: fade-in 0.7s;
>+        animation: fade-in 0.7s;
>+    }
>+}
>+
> /** Screen Breakpoints **/
> 
> @media only screen and (max-width: 1180px) {
>@@ -1759,7 +1769,7 @@ header .menu-item { /* add bottom dimension to main menu items */
>         cursor: pointer;
> 
>         transition: transform 0.3s ease-out;
>-        
>+
>         -webkit-filter: invert(100%);
>         filter: invert(100%);
>         perspective: 600;
>@@ -1784,12 +1794,12 @@ header .menu-item { /* add bottom dimension to main menu items */
>         width: 100vw;
>         overflow: hidden;
>         box-shadow: 0px 5px 5px rgba(0,0,0,0.10);
>-        
>+
>         backdrop-filter: blur(20px);
>         -webkit-backdrop-filter: blur(10px);
>         background-color: rgba(255,255,255,0.8);
>     }
>-    
>+
>     header nav a {
>         color: #333333;
>     }
>@@ -1864,14 +1874,14 @@ header .menu-item { /* add bottom dimension to main menu items */
>     footer nav li {
>         padding: 0 3rem 3rem 0;
>     }
>-    
>+
> }
> 
> @media only screen and (max-width: 690px) {
>     article h1 {
>         font-size: 3.4rem;
>     }
>-    
>+
>     .featured-tile {
>         padding: 0;
>     }
>@@ -1934,7 +1944,7 @@ header .menu-item { /* add bottom dimension to main menu items */
>     .nextrouter-copy {
>         font-size: 2.2rem;
>     }
>-    
>+
>     article .scrollable {
>         overflow: auto;
>         -webkit-overflow-scrolling: touch;
>@@ -2035,7 +2045,7 @@ header .menu-item { /* add bottom dimension to main menu items */
> 
> }
> 
>-@media only screen and (max-width: 415px) {    
>+@media only screen and (max-width: 415px) {
>     .table-of-contents {
>         /* Go one-column */
>         width: 100vw;
>@@ -2045,7 +2055,7 @@ header .menu-item { /* add bottom dimension to main menu items */
>         float: none;
>         margin: 0 0 3rem 0;
>     }
>-    
>+
>     .nextrouter-copy {
>         font-size: 1.7rem;
>         letter-spacing: -0.016rem;
>@@ -2053,7 +2063,7 @@ header .menu-item { /* add bottom dimension to main menu items */
> }
> 
> @media only screen and (max-height: 415px) {
>-    
>+
>     .home .site-logo {
>         opacity: 1;
>         margin-top: 0;
>@@ -2063,7 +2073,7 @@ header .menu-item { /* add bottom dimension to main menu items */
>     .home header {
>         padding-top: 1rem;
>     }
>-    
>+
>     @supports(padding:max(0px)) {
>         header,
>         header .menu,
>@@ -2077,21 +2087,21 @@ header .menu-item { /* add bottom dimension to main menu items */
>             padding-left: env(safe-area-inset-left);
>             padding-right: env(safe-area-inset-right);
>         }
>-        
>+
>         header .menu .menu-item > .sub-menu {
>             border: none;
>             background: none;
>         }
>-        
>+
>         .sub-menu-layer {
>             padding: 0 3rem;
>         }
>-        
>+
>         .sub-menu-layer .menu-item:first-child,
>         .sub-menu-layer .menu-item {
>             padding: 0 0 1.5rem 1.5rem;
>         }
>-        
>+
>     }
> 
>     .tile {

Actions: View | Formatted Diff | Diff

Attachments on bug 186529: 342758 | 344977 | 345003