Attachment 357813 Details for Bug 192930 – Patch

[patch] Patch

bug-192930-20181220083656.patch (text/plain), 115.33 KB, created by Jon Davis on 2018-12-20 08:36:57 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Jon Davis

Created: 2018-12-20 08:36:57 PST

Size: 115.33 KB

patch

obsolete

>Subversion Revision: 239438
>diff --git a/Websites/webkit.org/ChangeLog b/Websites/webkit.org/ChangeLog
>index 8e2ce9978a1a6f4d5384cd011b36b75a68351eb2..570f8414f314d688df6592b3b18bd1da6dc6aa92 100644
>--- a/Websites/webkit.org/ChangeLog
>+++ b/Websites/webkit.org/ChangeLog
>@@ -1,3 +1,176 @@
>+2018-12-20  Jon Davis  <jond@apple.com>
>+
>+        Added a dark mode color scheme.
>+        https://bugs.webkit.org/show_bug.cgi?id=192930
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        * .htaccess: Added convenience redirects for /features and /css-features
>+        * wp-content/themes/webkit/build-archives.php: Customized dark color styles for the page.
>+        * wp-content/themes/webkit/css-status.php: Implemented new design and dark styles support.
>+        * wp-content/themes/webkit/front-header.php: Added dark color styles.
>+        * wp-content/themes/webkit/functions.php: Added new feature status navigation menu.
>+        * wp-content/themes/webkit/header.php: Specify support for light and dark color schemes.
>+        * wp-content/themes/webkit/images/chevron-dark.svg: Added.
>+        * wp-content/themes/webkit/images/chevron.svg: Switch to HSL color.
>+        * wp-content/themes/webkit/images/filter.svg: Added.
>+        * wp-content/themes/webkit/images/icons.svg: Use currentColor for dark mode.
>+        * wp-content/themes/webkit/images/invert-lightness.svg: Added.
>+        * wp-content/themes/webkit/images/search.svg: Added.
>+        * wp-content/themes/webkit/sitemap.php: Customized dark color styles for the page.
>+        * wp-content/themes/webkit/status.php: Updated design and dark styles support.
>+        * wp-content/themes/webkit/style.css: Added dark style rules and switched to custom properties.
>+        (:root):
>+        (@media(prefers-color-scheme:dark)):
>+        (body):
>+        (a):
>+        (a,):
>+        (hr):
>+        (code):
>+        (main):
>+        (a[name]):
>+        (p > a[name]::before):
>+        (a[name]:hover):
>+        (a[name]:hover::before):
>+        (p:hover > a[name]::before):
>+        (input[type=text]):
>+        (input[type=submit]):
>+        (.screen-reader-text:focus):
>+        (.pagination .page-numbers,):
>+        (.pagination .menu-item a):
>+        (.pagination .page-numbers:not(.current, .dots):hover):
>+        (.pagination .dots,):
>+        (.connected.pagination .menu-item):
>+        (.connected.pagination .menu-item:hover a):
>+        (.connected.pagination .menu-item:first-child a):
>+        (.connected.pagination .menu-item:last-child a):
>+        (.connected.pagination .menu-item.current-menu-item a,):
>+        (.menu-feature-pages-container):
>+        (.nextrouter):
>+        (.nextrouter.previous):
>+        (.nextrouter:hover,):
>+        (.nextrouter a):
>+        (.nextrouter-copy):
>+        (.nextrouter .label):
>+        (.nextrouter .link):
>+        (.tiles):
>+        (.tile):
>+        (.tile .background-image):
>+        (.tile .background-image svg):
>+        (.tile.category-web-inspector svg):
>+        (.tile.category-performance svg):
>+        (.tile.category-javascript svg):
>+        (.tile.category-css svg):
>+        (.tile.category-standards svg):
>+        (.tile.category-contributing svg):
>+        (.tile.category-storage svg):
>+        (.tile.category-layout svg):
>+        (.tile.category-safari-technology-preview svg):
>+        (.tile.category-accessibility svg):
>+        (.tile.category-security svg):
>+        (.tile.category-privacy svg):
>+        (.tile .background-image.loaded):
>+        (.tile:not(.has-post-thumbnail) .background-image,):
>+        (.featured-tile .tile-content):
>+        (.background-vignette):
>+        (.tag-window .background-image):
>+        (.tag-window .background-vignette):
>+        (.featured-tile.tag-dark .background-vignette):
>+        (.featured-tile.tag-dark .tile-content):
>+        (.featured-tile.tag-dark .tile-content a):
>+        (.icon-tile .icon):
>+        (.icon-tile,):
>+        (.gray-tile):
>+        (.gray-tile a):
>+        (.amber-tile):
>+        (.blue-tile):
>+        (.twitter-tile):
>+        (.icon.twitter-icon):
>+        (pre):
>+        (code .keyword,):
>+        (code .keyword.builtin,):
>+        (code .keyword.type):
>+        (code .preprocessor):
>+        (code .comment):
>+        (code .comment .doc):
>+        (code .identifier):
>+        (code .string,):
>+        (code .escaped):
>+        (code .number,):
>+        (code .regex,):
>+        (code .attribute.value):
>+        (code .operator):
>+        (code .keyword.operator):
>+        (code .whitespace):
>+        (code .error):
>+        (code .doctype):
>+        (code .property):
>+        (code.xml .comment,):
>+        (code.xml .preprocessor .keyword):
>+        (code.xml .meta,):
>+        (code.cpp .preprocessor .identifier):
>+        (pre::-moz-selection,):
>+        (pre::selection, pre span::selection):
>+        (code.css .attribute,):
>+        (code.css .keyword):
>+        (code.css .number):
>+        (article h1,):
>+        (article .byline p):
>+        (article thead, article tfoot):
>+        (article tr):
>+        (article blockquote):
>+        (.post .bodycopy > p:last-child:after):
>+        (article div.note):
>+        (article .foreword):
>+        (article .cliptop):
>+        (article .clipbottom):
>+        (article .clipright):
>+        (article .clipleft):
>+        (article .mattewhite):
>+        (article .mattewhite:not(.widescreen)):
>+        (figure.table):
>+        (article figcaption):
>+        (article figcaption::before):
>+        (.table-of-contents):
>+        (.site-logo):
>+        (.feature-header:after,):
>+        (header nav a,):
>+        (header nav a:hover,):
>+        (.sub-menu-layer):
>+        (.sub-menu-layer:after):
>+        (.sub-menu-layer:before):
>+        (@media only screen and (max-width: 920px)):
>+        (header .menu):
>+        (header nav a):
>+        (header .menu > .menu-item > .sub-menu):
>+        (@media only screen and (max-width: 690px)):
>+        (article .scrollable):
>+        (@media only screen and (max-width: 600px)):
>+        (.table-of-contents label:after):
>+        (@media only screen and (max-width: 415px)):
>+        (article .invert-brightness,):
>+        (.preserve-color, video):
>+        (.preserve-color:hover,):
>+        (.nextrouter .link,):
>+        (.search-input):
>+        (.filters-toggle-button):
>+        (a > code): Deleted.
>+        (.pagination .page-numbers): Deleted.
>+        (.nextrouter:hover): Deleted.
>+        (.nextrouter.previous:hover): Deleted.
>+        (.icon-tile, .icon-tile a): Deleted.
>+        (.gray-tile, .gray-tile a): Deleted.
>+        (code .string, code .char): Deleted.
>+        (code .number, code .tag): Deleted.
>+        (code .regex, code .attribute): Deleted.
>+        (code.xml .meta, code.xml .meta .keyword): Deleted.
>+        (code::-moz-selection, code span::-moz-selection): Deleted.
>+        (code::selection, code span::selection): Deleted.
>+        (article h1 a): Deleted.
>+        (.feature-header:after): Deleted.
>+        (.feature.opened .feature-header:after): Deleted.
>+        * wp-content/themes/webkit/team.php: Customized dark color styles for the page.
>+
> 2018-12-01  Simon Fraser  <simon.fraser@apple.com>
> 
>         webkit.org/css-status is broken
>diff --git a/Websites/webkit.org/.htaccess b/Websites/webkit.org/.htaccess
>index c9b965c9103ee1084180c36327cc75cfa258ad13..ae1613ab7f31f98ee8afa0b66e51fdfdf7c9cc17 100644
>--- a/Websites/webkit.org/.htaccess
>+++ b/Websites/webkit.org/.htaccess
>@@ -68,6 +68,8 @@ Redirect 301 /security /security-policy/
> Redirect 301 /status.html /status/
> Redirect 301 /team.html /team/
> Redirect 301 /nightly /downloads/
>+Redirect 301 /features /status/
>+Redirect 301 /css-features /css-features/
> 
> # Old B3 Documentation
> Redirect 301 /documentation/b3/air/ /docs/b3/assembly-intermediate-representation.html
>diff --git a/Websites/webkit.org/wp-content/themes/webkit/build-archives.php b/Websites/webkit.org/wp-content/themes/webkit/build-archives.php
>index b0e014ab95f6bdbb648df1e74f73118de23b71bb..2338de329e09a93763b58b670c948df11752c96e 100644
>--- a/Websites/webkit.org/wp-content/themes/webkit/build-archives.php
>+++ b/Websites/webkit.org/wp-content/themes/webkit/build-archives.php
>@@ -162,26 +162,6 @@ get_header();
>         text-align: center;
>     }
> 
>-    #downloads blockquote:first-child {
>-        color: #8E8E93;
>-        text-align: center;
>-        font-size: 4rem;
>-        line-height: 6rem;
>-        font-weight: 200;
>-    }
>-
>-    #downloads .bodycopy > div {
>-        box-sizing: border-box;
>-        padding: 0 1.5rem 3rem;
>-        width: 50%;
>-        text-align: center;
>-        float: left;
>-    }
>-
>-    #downloads h2 {
>-        font-size: 3.2rem;
>-    }
>-
>     .bodycopy ul > li {
>         line-height: 1;
>     }
>@@ -193,7 +173,8 @@ get_header();
>         text-transform: uppercase;
>         padding-left: 0;
>         line-height: 3rem;
>-        color: #8E8E93;
>+        color: hsl(0, 0%, 87%);
>+        color: var(--text-color-light);
>     }
> 
>     .bodycopy ul {
>@@ -267,7 +248,8 @@ get_header();
>         padding-left: 60px;
>         border-bottom-width: 1px;
>         border-bottom-style: solid;
>-        border-bottom-color: rgb(214, 214, 214);
>+        border-bottom-color: hsl(0, 0%, 86.7%);
>+        border-bottom-color: var(--horizontal-rule-color);
>         display: inline-block;
>         list-style-type: none;
>         list-style-position: initial;
>@@ -301,7 +283,8 @@ get_header();
> 
>     .tabnav-link.current {
>         pointer-events: none;
>-        color: rgb(51, 51, 51);
>+        color: hsl(0, 0%, 26.7%);
>+        color: var(--text-color-heading);
>         text-decoration: none;
>         cursor: default;
>         z-index: 10;
>@@ -314,12 +297,14 @@ get_header();
>         width: 100%;
>         border-bottom-width: 1px;
>         border-bottom-style: solid;
>-        border-bottom-color: rgb(102, 102, 102);
>+        border-bottom-color: hsl(0, 0%, 26.7%);
>+        border-bottom-color: var(--text-color-heading);
>         content: "";
>     }
> 
>     .tabnav-link:hover {
>-        color: rgb(0, 112, 201);
>+        color: hsl(200, 100%, 40%);
>+        color: var(--link-color);
>         text-decoration: none;
>     }
> 
>diff --git a/Websites/webkit.org/wp-content/themes/webkit/css-status.php b/Websites/webkit.org/wp-content/themes/webkit/css-status.php
>index 7f8b4f90b18fd0674f4d9aa51e438ca187221ee8..1328df1c3ada191f5271d8aecd704dc1c45a24ae 100644
>--- a/Websites/webkit.org/wp-content/themes/webkit/css-status.php
>+++ b/Websites/webkit.org/wp-content/themes/webkit/css-status.php
>@@ -35,6 +35,37 @@ var loadCSSProperties = xhrPromise(new URL("/repository/webkit/trunk/Source/WebC
> </script>
> 
> <style>
>+:root {
>+    --feature-rule-color: hsl(0, 0%, 89.4%);
>+    --status-color: hsl(0, 0%, 60%);
>+    --supported-color: hsl(100, 100%, 30%);
>+    --non-standard-color: hsl(275.4, 77.7%, 35.1%);
>+    --in-development-color: hsl(24.5, 91.3%, 50.6%);
>+    --no-active-development-color: hsl(240, 60.6%, 59.2%);
>+    --partially-supported-color: hsl(180, 25%, 43.9%);
>+    --experimental-color: hsl(211.3, 100%, 50%);
>+    --under-consideration-color: hsl(5.9, 40.2%, 60%);
>+    --removed-not-considering-color: hsl(0, 0%, 49.8%);
>+    --not-implemented-color: hsl(0, 0%, 29.8%);
>+    --obsolete-color: hsl(50, 100%, 25.1%);
>+}
>+
>+@media(prefers-color-scheme:dark) {
>+    :root {
>+        --feature-rule-color: hsl(0, 0%, 20%);
>+        --status-color: hsl(0, 0%, 51%);
>+        --supported-color: hsl(79.5, 45.3%, 52%);
>+        --non-standard-color: hsl(276.7, 36.3%, 51.4%);
>+        --in-development-color: hsl(24.5, 91.3%, 50.6%);
>+        --no-active-development-color: hsl(240, 60.6%, 59.2%);
>+        --partially-supported-color: hsl(180, 30%, 52%);
>+        --exoerimental-color: hsl(211.3, 100%, 50%);
>+        --under-consideration-color: hsl(0, 35%, 61%);
>+        --removed-not-considering-color: hsl(0, 0%, 49.8%);
>+        --not-implemented-color: hsl(0, 0%, 70.2%);
>+        --obsolete-color: hsl(31.9, 20.5%, 33.1%);
>+    }
>+}
> 
> .feature-status-page {
>     animation: none !important; /* This animation can trigger a hit-testing bug, so remove it for now */
>@@ -50,42 +81,17 @@ var loadCSSProperties = xhrPromise(new URL("/repository/webkit/trunk/Source/WebC
>     width: 100%;
> }
> 
>-section.side-by-side {
>-    display: flex;
>-    display: -webkit-flex;
>-    flex: 1;
>-    -webkit-flex: 1;
>-}
>-
>-sidebar {
>-    flex: 0 400px;
>-    margin-right: 3rem;
>-    font-size: 2rem;
>-    margin-left: 1rem;
>-}
>-
>-section.primary {
>-    flex: 1;
>-    -webkit-flex: 1;
>-}
>-
>-.sticky {
>-    position: -webkit-sticky;
>-    top: 0;
>-}
>-
> .page h1 {
>     font-size: 4.2rem;
>-    font-weight: 200;
>+    font-weight: 500;
>     line-height: 6rem;
>-    color: black;
>-    text-align: left;
>     margin: 3rem auto;
>     width: 100%;
>+    text-align: center;
> }
> 
> .page h1 a {
>-    color: #444;
>+    color: inherit;
> }
> 
> .page h2 {
>@@ -98,17 +104,147 @@ section.primary {
>     font-size: 2.2rem;
> }
> 
>-.property-count {
>-    text-align: right;
>-    color: #999;
>+.css-feature-page {
>+    padding-bottom: 3rem;
> }
> 
>-.property-count p {
>-    margin: 0;
>+.css-feature-page p {
>+    max-width: 920px;
>+    margin: 0 auto 3rem;
>+}
>+
>+/* Feature Filters */
>+.feature-filters {
>+    background-color: hsl(0, 0%, 0%);
>+    background-color: var(--figure-mattewhite-background-color);
>+    width: 100vw;
>+    left: 50%;
>+    position: relative;
>+    transform: translate(-50vw, 0);
>+    box-sizing: border-box;
>+    margin-bottom: 3rem;
>+    border: 1px solid hsl(0, 0%, 90.6%);
>+    border-color: var(--article-border-color);
>+    border-left: none;
>+    border-right: none;
>+}
>+
>+.feature-filters .search-input {
>+    background-repeat: no-repeat;
>+    background-position-x: 0.5rem;
>+    background-position-y: 1rem;
>+    background-size: 2rem;
>+    padding: 1rem;
>+    padding-left: 3rem;
>+    padding-right: 8.5rem;
>+    font-size: 2rem;
>+    width: 100%;
>+    margin-top: 0rem;
>+    margin-bottom: 0rem;
>+    box-sizing: border-box;
>+    border-color: transparent;
> }
> 
>-#property-list {
>-/*    word-wrap: break-word;*/
>+.feature-filters li {
>+    display: inline-block;
>+    white-space: no-wrap;
>+}
>+
>+.property-status label,
>+.feature-filters label {
>+    display: table-cell;
>+    padding: 0.5rem 1rem;
>+    border-style: solid;
>+    border-width: 1px;
>+    border-radius: 3px;
>+    cursor: pointer;
>+    float: right;
>+    line-height: 1;
>+    font-size: 1.6rem;
>+}
>+
>+#status-filters {
>+    display: none;
>+    text-align: center;
>+    margin-top: 1rem;
>+    margin-bottom: 0;
>+}
>+
>+.property-filters {
>+    max-width: 920px;
>+    margin: 0 auto 0;
>+    position: relative;
>+    top: 0;
>+}
>+
>+.property-filters.opened {
>+    margin-top: 1.5rem;
>+}
>+
>+.property-filters.opened #status-filters {
>+    display: block;
>+}
>+
>+#status-filters label {
>+    margin-left: 1rem;
>+    margin-bottom: 1rem;
>+    float: none;
>+    display: inline-block;
>+    position: relative;
>+}
>+
>+.feature-filters label {
>+    float: none;
>+    display: inline-block;
>+}
>+
>+.status-filters {
>+    list-style: none;
>+    display: inline-block;
>+    text-align: center;
>+}
>+
>+.filter-toggle:checked + .filter-status {
>+    color: hsl(240, 1.3%, 84.5%);
>+    color: var(--text-color);
>+}
>+
>+.filter-status,
>+.feature-status {
>+    color: hsl(0, 0%, 60%);
>+    color: var(--status-color);
>+    border-color: hsl(0, 0%, 60%);
>+    border-color: var(--status-color);
>+}
>+
>+.feature-status a {
>+    color: inherit;
>+}
>+
>+.status-filter,
>+.status-marker {
>+    border-color: hsl(0, 0%, 60%);
>+    border-color: var(--status-color)
>+}
>+
>+.filter-toggle:checked + .filter-status {
>+    background-color: hsl(0, 0%, 60%);
>+    background-color: var(--status-color);
>+}
>+
>+.property-description.status-marker {
>+    border-left-width: 3px;
>+    border-left-style: solid;
>+    padding: 0.5rem 0 0.5rem 1rem;
>+}
>+
>+.property-count {
>+    max-width: 920px;
>+    margin: 0 auto 3rem;
>+
>+    text-align: right;
>+    color: hsl(240, 2.3%, 56.7%);
>+    color: var(--text-color-coolgray);
> }
> 
> .property-header > h3:first-of-type {
>@@ -117,34 +253,59 @@ section.primary {
>     margin: 0;
> }
> 
>-ul.properties {
>+.property-header:after {
>+    position: relative;
>+    width: 2rem;
>+    height: 2rem;
>+    right: 0;
>+    top: 0.5rem;
>+    margin-left: 1rem;
>+    transition: transform 0.3s ease-out;
>+}
>+
>+.properties {
>     padding: 0;
>+    max-width: 920px;
>+    margin: 0 auto 3rem;
>+    border-bottom: 1px solid hsl(0, 0%, 89.4%);
>+    border-color: var(--feature-rule-color);
> }
> 
> .properties .property {
>     position: relative;
>     display: block;
>-    background-color: #f9f9f9;
>-    border: 1px solid #ddd;
>-    border-radius: 3px;
>-    padding: 1em;
>-    margin: 1em 0 !important;
>     max-height: intrinsic;
>     min-height: 3rem;
>     overflow-y: hidden;
>     cursor: pointer;
>+    background-color: transparent;
>+    border-color: transparent;
>+    border-width: 1px;
>+    border-style: solid;
>+    border-top-color: hsl(0, 0%, 89.4%);
>+    border-top-color: var(--feature-rule-color);
>+    padding: 0.5rem;
>+    line-height: 1.618;
>     transition: background-color 0.3s ease-in;
> }
> 
>-.properties .property:hover {
>-    background-color: white;
>-}
>-
> .property.opened {
>-    background-color: white;
>+    background-color: hsl(0, 0%, 100%);
>+    background-color: var(--figure-mattewhite-background-color);
>+    border-left-color: hsl(0, 0%, 89.4%);
>+    border-left-color: var(--feature-rule-color);
>+    border-right-color: hsl(0, 0%, 89.4%);
>+    border-right-color: var(--feature-rule-color);
>     max-height: 120rem;
> }
> 
>+.property.opened .property-header:after {
>+    -webkit-transform: rotateX(-180deg);
>+    -moz-transform: rotateX(-180deg);
>+    transform: rotateX(-180deg);
>+    perspective: 600;
>+}
>+
> .property-description .toggleable {
>     display: none;
> }
>@@ -199,7 +360,6 @@ ul.values {
> 
> .property-header {
>     position: relative;
>-    padding-right: 3rem;
>     display: -webkit-flex;
>     display: flex;
>     -webkit-flex-direction: row;
>@@ -220,33 +380,34 @@ ul.values {
> }
> 
> .property.opened .property-header .toggle {
>-    -webkit-transform: rotateX(-180deg);
>-    -moz-transform: rotateX(-180deg);
>     transform: rotateX(-180deg);
> }
> 
>-.property-header h3 .spec-label {
>-    color: #999;
>-    text-decoration: none;
>-    font-weight: 200;
>-}
>-
>+.property-header h3 .spec-label ,
> .property-header h3 .spec-label a {
>-    color: #999;
>     text-decoration: none;
>     font-weight: 200;
>+    color: hsl(0, 0%, 33.3%);
>+    color: var(--text-color-medium);
> }
> 
> .spec-label::before {
>     content: ' â ';
> }
>-.property-header h3 a {
>-    color: #444;
>+
>+.property-description .toggleable {
>+    color: hsl(0, 0%, 20%);
>+    color: var(--text-color);
>+}
>+
>+.property-header h3,
>+.property-header a[name] {
>+    color: hsl(0, 0%, 26.7%);
>+    color: var(--text-color-heading);
> }
> 
> .property-alias {
>     font-size: smaller;
>-    color: #999;
> }
> 
> .property-header p {
>@@ -254,12 +415,11 @@ ul.values {
>     margin-bottom: 0.5rem;
> }
> 
>-.value-alias {
>-    color: #999;
>-}
>-
>+.property-alias,
>+.value-alias,
> .value-status {
>-    color: #999;
>+    color: hsl(240, 2.3%, 56.7%);
>+    color: var(--text-color-coolgray);
> }
> 
> .property.is-hidden {
>@@ -273,13 +433,6 @@ ul.property-details {
>     margin-right: 0.5em;
> }
> 
>-.property-status {
>-    display: inline-block;
>-    position: relative;
>-    font-size: 2rem;
>-    min-width: 4em;
>-    text-align: right;
>-}
> 
> .property-status,
> .property-status a {
>@@ -287,155 +440,123 @@ ul.property-details {
> }
> 
> .property .status-marker {
>-    width: 0;
>-    height: 0;
>-    position: absolute;
>-    top: 0;
>-    left: 0;
>-    border-style: solid;
>-    border-width: 20px 20px 0 0;
>-    border-color: transparent transparent transparent transparent;
>-}
>-
>-#status-filters .supported,
>-.property-status.supported,
>-.property-status.supported a {
>-    color: #339900;
>-}
>-
>-.status-marker.supported {
>-    border-color: #339900 transparent transparent transparent;
>-}
>-
>-#status-filters .in-development,
>-.property-status.in-development,
>-.property-status.in-development a {
>-    color: #f46c0e;
>-}
>-
>-.status-marker.in-development {
>-    border-color: #f46c0e transparent transparent transparent;
>-}
>-
>-#status-filters .no-active-development,
>-.property-status.no-active-development,
>-.property-status.no-active-development a {
>-    color: #5858D6;
>-}
>-
>-.status-marker.no-active-development {
>-    border-color: #5858D6 transparent transparent transparent;
>-}
>-
>-#status-filters .partial-support,
>-.property-status.partial-support,
>-.property-status.partial-support a {
>-    color: #548c8c;
>-}
>-
>-.status-marker.partial-support {
>-    border-color: #548c8c transparent transparent transparent;
>+    border-left-width: 3px;
>+    border-left-style: solid;
>+    padding: 0.5rem 0 0.5rem 1rem;
> }
> 
>-#status-filters .prototyping,
>-.property-status.prototyping,
>-.property-status.prototyping a {
>-    color: #007AFF;
>-}
> 
>-.status-marker.prototyping {
>-    border-color: #007AFF transparent transparent transparent;
>+.status-marker {
>+    border-color: hsl(0, 0%, 60%);
>+    border-color: var(--status-color)
> }
> 
>-#status-filters .experimental,
>-.property-status.experimental,
>-.property-status.experimental a {
>-    color: #007AFF;
>+.supported {
>+    color: hsl(100, 100%, 30%);
>+    color: var(--supported-color);
>+    border-color: hsl(100, 100%, 30%);
>+    border-color: var(--supported-color);
> }
> 
>-.status-marker.experimental {
>-    border-color: #007AFF transparent transparent transparent;
>+.in-development {
>+    color: hsl(24.5, 91.3%, 50.6%);
>+    color: var(--in-development-color);
>+    border-color: hsl(24.5, 91.3%, 50.6%);
>+    border-color: var(--in-development-color);
> }
> 
>-#status-filters .under-consideration,
>-.property-status.under-consideration,
>-.property-status.under-consideration a {
>-    color: #cc9d00;
>+.under-consideration {
>+    color: hsl(5.9, 40.2%, 60%);
>+    color: var(--under-consideration-color);
>+    border-color: hsl(5.9, 40.2%, 60%);
>+    border-color: var(--under-consideration-color);
> }
> 
>-.status-marker.under-consideration {
>-    border-color: #FFC500 transparent transparent transparent;
>+.no-active-development {
>+    color: hsl(240, 60.6%, 59.2%);
>+    color: var(--no-active-development-color);
>+    border-color: hsl(240, 60.6%, 59.2%);
>+    border-color: var(--no-active-development-color);
> }
> 
>-#status-filters .removed,
>-.property-status.removed,
>-.property-status.removed a {
>-    color: #7F7F7F;
>+.experimental {
>+    color: hsl(211.3, 100%, 50%);
>+    color: var(--experimental-color);
>+    border-color: hsl(211.3, 100%, 50%);
>+    border-color: var(--experimental-color);
> }
> 
>-.status-marker.removed {
>-    border-color: #7F7F7F transparent transparent transparent;
>+.partial-support {
>+    color: hsl(180, 25%, 43.9%);
>+    color: var(--partially-supported-color);
>+    border-color: hsl(180, 25%, 43.9%);
>+    border-color: var(--partially-supported-color);
> }
> 
>-#status-filters .non-standard,
>-.property-status.non-standard,
>-.property-status.non-standard a {
>-    color: #8000FF;
>+.non-standard {
>+    color: hsl(275.4, 77.7%, 35.1%);
>+    color: var(--non-standard-color);
>+    border-color: hsl(275.4, 77.7%, 35.1%);
>+    border-color: var(--non-standard-color);
> }
> 
>-.status-marker.non-standard {
>-    border-color: #8000FF transparent transparent transparent;
>+.removed,
>+.not-considering {
>+    color: hsl(0, 0%, 49.8%);
>+    color: var(--removed-not-considering-color);
>+    border-color: hsl(0, 0%, 49.8%);
>+    border-color: var(--removed-not-considering-color);
> }
> 
>-#status-filters .not-considering,
>-.property-status.not-considering,
>-.property-status.not-considering a {
>-    color: #7F7F7F;
>+.not-implemented {
>+    color: hsl(0, 0%, 29.8%);
>+    color: var(--not-implemented-color);
>+    border-color: hsl(0, 0%, 29.8%);
>+    border-color: var(--not-implemented-color);
> }
> 
>-.status-marker.not-considering {
>-    border-color: #7F7F7F transparent transparent transparent;
>+.obsolete {
>+    color: hsl(50, 100%, 25.1%);
>+    color: var(--obsolete-color);
>+    border-color: hsl(50, 100%, 25.1%);
>+    border-color: var(--obsolete-color);
> }
> 
>-#status-filters .not-implemented,
>-.property-status.not-implemented,
>-.property-status.not-implemented a {
>-    color: #4C4C4C;
>+.by-specification {
>+    background-color: hsl(0, 0%, 96.9%);
>+    background-color: var(--content-background-color);
>+    border-color: hsl(0, 0%, 83.9%);
>+    border-color: var(--input-border-color);
> }
> 
>-.status-marker.not-implemented {
>-    border-color: #4C4C4C transparent transparent transparent;
>+.property-filters.opened .search-input {
>+    border-color: hsl(0, 0%, 83.9%);
>+    border-color: var(--input-border-color);
> }
> 
>-#status-filters .obsolete,
>-.property-status.obsolete,
>-.property-status.obsolete a {
>-    color: #804000;
>+.feature-filters .filters-toggle-button {
>+    background-repeat: no-repeat;
>+    background-size: 2rem;
>+    background-position: right;
>+    background-filter: lightness(2);
>+    position: absolute;
>+    padding-right: 2.5rem;
>+    right: 1rem;
>+    top: 1rem;
>+    border: none;
>+    color: hsl(240, 2.3%, 56.7%);
> }
> 
>-.status-marker.obsolete {
>-    border-color: #804000 transparent transparent transparent;
>+.feature-filters .filters-toggle-button:hover {
>+    filter: brightness(0);
> }
> 
>-.property-filters {
>-    position: relative;
>-    top: 0;
>-    margin-top: 0.5em;
>-}
>-
>-#search {
>-    font-size: 2rem;
>-    padding: 1rem;
>-    border-radius: 3px;
>-    border: 1px solid #cccccc;
>-    width: 100%;
>-    margin-top: 1.5rem;
>-    box-sizing: border-box;
>+#filters-toggle {
>+    display: none;
> }
> 
> .property-filters ul {
>     margin-top: 0.5rem;
>-    margin-bottom: 1.5rem;
> }
> 
> .property-filters ul li {
>@@ -444,7 +565,7 @@ ul.property-details {
> 
> .property-filters label > input {
>     position: relative;
>-    top: -3px;
>+    top: -1px;
> }
> 
> .prefixes {
>@@ -452,12 +573,26 @@ ul.property-details {
> }
> 
> #specifications {
>-    display: block;
>+    display: inline-block;
>     font-size: 1.6rem;
>-    border: 1px solid silver;
>-    width: calc(100% - 2rem);
>-    height: 3rem;
>-    margin: 1rem 2rem;
>+    color: hsl(0, 0%, 20%);
>+    color: var(--text-color);
>+    margin-left: 1rem;
>+}
>+
>+.filter-by-specifications-toggle {
>+    position: absolute;
>+    display: none;
>+    left: 1000rem;
>+    top: 0;
>+    width: 100%;
>+    height: 100%;
>+}
>+
>+#specifications:disabled + .filter-by-specifications-toggle {
>+    display: block;
>+    top: 0;
>+    left: 0;
> }
> 
> h3 a[name], .admin-bar h3 a[name] {
>@@ -467,6 +602,21 @@ h3 a[name], .admin-bar h3 a[name] {
>     visibility: visible; /* Override visibility:hidden from themes/webkit/style.css */
> }
> 
>+.pagination:after {
>+    display: none;
>+}
>+
>+.pagination,
>+.pagination + h1 {
>+    margin-top: 0;
>+}
>+
>+@media only screen and (max-width: 1180px) {
>+    .feature-filters .filters-toggle-button {
>+        right: 3rem;
>+    }
>+}
>+
> @media only screen and (max-width: 508px) {
>     #property-filters,
>     #property-list {
>@@ -474,70 +624,114 @@ h3 a[name], .admin-bar h3 a[name] {
>     }
> 
>     #property-filters {
>-        border: 1px solid #ddd;
>-        border-radius: 3px;
>-        background: #f6f6f6;
>-        padding: 1rem;
>-        box-sizing: border-box;
>-        margin-right: 0;
>-        margin-bottom: 3rem;
>+        padding-left: 2rem;
>+        padding-right: 2rem;
>     }
> 
>     .property-header h3 {
>         font-size: 2rem;
>+        padding-right: 0.5rem;
>     }
> 
>     .property-status {
>         font-size: 1.6rem;
>         margin-top: 0.4rem;
>+        float: left;
>+    }
>+
>+    .property-header:after {
>+        width: 1rem;
>+        height: 1rem;
>+        background-size: 1rem;
>+        top: 1rem;
>+    }
>+
>+    .property h3 {
>+        font-size: 2rem;
>+        padding-top: 4rem;
>+    }
>+
>+    .property-header .property-status {
>+        font-size: 1.6rem;
>+        position: absolute;
>+        text-align: left;
>+    }
>+
>+    .property .moreinfo {
>+        flex-wrap: wrap;
>+    }
>+
>+    .property .moreinfo .contact {
>+        text-align: left;
>+    }
>+
>+    .status-filters {
>+        flex-basis: 100%;
>+    }
>+
>+    .status-filters label {
>+        margin-left: 0;
>+        margin-right: 1rem;
>     }
> }
>+
>+@media(prefers-color-scheme:dark) {
>+    .property-header:after {
>+        filter: invert(1);
>+    }
>+
>+    .search-input:hover,
>+    .search-input:focus,
>+    .feature-filters .filters-toggle-button:hover {
>+        filter: brightness(2);
>+    }
>+}
>+
> </style>
>     <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
> 
>-        <div class="page feature-status-page" id="post-<?php the_ID(); ?>">
>-            <?php echo str_repeat('&nbsp;', 200);?>
>+        <div class="page css-feature-page" id="post-<?php the_ID(); ?>">
>+
>+            <div class="connected pagination">
>+                <?php wp_nav_menu( array('theme_location'  => 'feature-subnav') ); ?>
>+            </div>
>+
>             <h1><a href="<?php echo get_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php the_title(); ?></a></h1>
> 
>-            <section class="side-by-side">
>-                <sidebar>
>-                    <section class="sticky">
>-                        <form id="property-filters" class="property-filters">
>-                            <h2>Filters</h2>
>-                            <input type="text" id="search" placeholder="Search filter&hellip;" title="Filter the property list." required>
>-                            <h2>Filter by Status</h2>
>-                            <ul id="status-filters">
>-                            </ul>
>-                        </form>
>-
>-                        <div class="prefixes">
>-                            <h2>Filter by Prefix</h2>
>-                            <ul id="prefix-filters">
>-                            </ul>
>-                        </div>
>-                    </section>
>-                </sidebar>
>-
>-                <section class="primary">
>-                    <div id="property-list">
>-                        <div class="property-count">
>-                            <p><span id="property-count"></span> <span id="property-pluralize">properties</span></p>
>-                        </div>
>+            <section class="feature-filters">
>+                <form id="property-filters" class="property-filters page-width">
>+                    <input type="text" id="search" class="search-input" placeholder="Search CSS Features&hellip;" title="Filter the property list." required><label class="filters-toggle-button">Filters</label>
>+                    <ul id="status-filters">
>+                    </ul>
>+
>+                    <div class="prefixes">
>+                        <h2>Filter by Prefix</h2>
>+                        <ul id="prefix-filters">
>+                        </ul>
>+                    </div>
>+
>+                </form>
>+            </section>
>+
>+            <section class="primary">
>+                <div id="property-list">
>+                    <div class="property-count">
>+                        <p><span id="property-count"></span> <span id="property-pluralize">properties</span></p>
>                     </div>
>+                </div>
> 
>-                    <template id="success-template">
>-                        <ul class="properties" id="properties-container"></ul>
>+                <template id="success-template">
>+                    <ul class="properties" id="properties-container"></ul>
> 
>-                        <p>Cannot find something? You can contact <a href="https://twitter.com/webkit">@webkit</a> on Twitter or contact the <a href="https://lists.webkit.org/mailman/listinfo/webkit-help">webkit-help</a> mailing list for questions.</p>
>-                        <p>You can also <a href="/contributing-code/">contribute to features</a> directly, the entire project is Open Source. To report bugs on existing features or check existing bug reports, see <a href="https://bugs.webkit.org">https://bugs.webkit.org</a>.</p>
>-                    </template>
>+                    <p>Cannot find something? You can contact <a href="https://twitter.com/webkit">@webkit</a> on Twitter or contact the <a href="https://lists.webkit.org/mailman/listinfo/webkit-help">webkit-help</a> mailing list for questions.</p>
>+                    <p>You can also <a href="/contributing-code/">contribute to features</a> directly, the entire project is Open Source. To report bugs on existing features or check existing bug reports, see <a href="https://bugs.webkit.org">https://bugs.webkit.org</a>.</p>
>+                </template>
> 
>-                    <template id="error-template">
>-                        <p>Error: unable to load the features list (<span id="error-message"></span>).</p>
>-                        <p>If this is not resolved soon, please contact <a href="https://twitter.com/webkit">@webkit</a> on Twitter or the <a href="https://lists.webkit.org/mailman/listinfo/webkit-help">webkit-help</a> mailing list.</p>
>-                    </template>
>+                <template id="error-template">
>+                    <p>Error: unable to load the features list (<span id="error-message"></span>).</p>
>+                    <p>If this is not resolved soon, please contact <a href="https://twitter.com/webkit">@webkit</a> on Twitter or the <a href="https://lists.webkit.org/mailman/listinfo/webkit-help">webkit-help</a> mailing list.</p>
>+                </template>
> 
>-                </section>
>             </section>
>         </div>
> 
>@@ -667,12 +861,8 @@ function initializeStatusPage() {
>         var slug = propertyObject.name.toLowerCase().replace(/ /g, '-');
>         container.setAttribute("id", "property-" + slug);
> 
>-        var cornerStatus = document.createElement('div');
>-        cornerStatus.className = "status-marker ";
>-        container.appendChild(cornerStatus);
>-
>         var descriptionContainer = document.createElement('div');
>-        descriptionContainer.className = "property-description";
>+        descriptionContainer.className = "property-description status-marker";
> 
>         var featureHeaderContainer = document.createElement('div');
>         featureHeaderContainer.className = "property-header";
>@@ -809,23 +999,26 @@ function initializeStatusPage() {
>             toggledContentContainer.appendChild(valuesList);
>         }
> 
>-        var statusContainer = document.createElement("span");
>-        cornerStatus.className += propertyObject.status.status;
>+        var statusContainer = document.createElement("div");
>+        descriptionContainer.classList.add(propertyObject.status.status);
>         statusContainer.className = "property-status " + propertyObject.status.status;
>+        var statusLabel = document.createElement("label");
>+
>         if ("webkit-url" in propertyObject) {
>             var statusLink = document.createElement("a");
>             statusLink.href = propertyObject["webkit-url"];
>             statusLink.textContent = readableStatus[propertyObject.status.status];
>-            statusContainer.appendChild(statusLink);
>+            statusLabel.appendChild(statusLink);
>         } else {
>-            statusContainer.textContent = readableStatus[propertyObject.status.status];
>+            statusLabel.textContent = readableStatus[propertyObject.status.status];
>         }
>+        statusContainer.appendChild(statusLabel);
>         featureHeaderContainer.appendChild(statusContainer);
> 
>         var toggle = document.createElement('button');
>         toggle.className = 'toggle';
> 
>-        toggle.addEventListener('click', function (e) {
>+        container.addEventListener('click', function (e) {
>             container.classList.toggle('opened');
>         });
> 
>@@ -974,6 +1167,7 @@ function initializeStatusPage() {
>     function initSearch(properties, categories)
>     {
>         var filtersForm = document.getElementById('property-filters');
>+        var filtersToggleButton = document.getElementsByClassName('filters-toggle-button')[0];
>         var statusContainer = document.getElementById('status-filters');
>         var inputField = document.getElementById('search');
>         var featuresEls = document.querySelectorAll('.properties > li');
>@@ -1007,12 +1201,14 @@ function initializeStatusPage() {
>             var input = document.createElement("input");
>             input.setAttribute('type','checkbox');
>             input.setAttribute('value', canonicalStatus);
>-            if (selectedStatuses.indexOf(canonicalStatus) != -1)
>+            if (selectedStatuses.indexOf(canonicalStatus) != -1) {
>+                filtersForm.classList.add('opened');
>                 input.checked = true;
>+            }
>             input.className = 'status-checkbox';
>             input.addEventListener('change', function() { updateSearch(properties); });
>             label.appendChild(input);
>-            label.className = canonicalStatus;
>+            label.className = "status-filter " + canonicalStatus;
>             label.appendChild(document.createTextNode(" " + readableStatus[status]));
>             entry.appendChild(label);
>             statusContainer.appendChild(entry);
>@@ -1029,43 +1225,29 @@ function initializeStatusPage() {
>                 input.checked = true;
>             input.addEventListener('change', function() { updateSearch(properties); });
>             label.appendChild(input);
>+            label.className = "status-filter by-specification";
>             label.appendChild(document.createTextNode(" By Specification:"));
>-            entry.appendChild(label);
> 
>             var specsList = document.createElement('select');
>             specsList.className = 'specifications';
>             specsList.id = 'specifications';
>-            entry.appendChild(specsList);
>+            specsList.addEventListener('mousedown', function() {
>+                input.setAttribute('checked','checked');
>+                input.checked = true;
>+                console.log(input);
>+                input.checked = true;
>+            });
>+            var specsListToggle = document.createElement('div');
>+            specsListToggle.className = 'filter-by-specifications-toggle';
>+            label.appendChild(specsList);
>+            label.appendChild(specsListToggle);
>+            entry.appendChild(label);
> 
>             statusContainer.appendChild(entry);
>         }
> 
>-        var prefixContainer = document.getElementById('prefix-filters');
>-        var prefixFilters = {};
>-        prefixFilters['prefix-supported-property'] = 'Property with and without prefix';
>-        prefixFilters['prefix-only-property'] = 'Prefixed-only Properties';
>-        prefixFilters['prefix-supported-value'] = 'Prefixed Values';
>-        prefixFilters['prefix-only-value'] = 'Prefixed-only Values';
>-
>-        for (var key in prefixFilters) {
>-            var status = prefixFilters[key];
>-            var entry = document.createElement("li");
>-            var label = document.createElement("label");
>-            var input = document.createElement("input");
>-            input.setAttribute('type','checkbox');
>-            input.setAttribute('value', key);
>-            input.addEventListener('change', function() { updateSearch(properties); });
>-            label.appendChild(input);
>-            label.className = status.toLocaleLowerCase().replace(/ /g, '-');
>-            label.appendChild(document.createTextNode(" " + status));
>-            entry.appendChild(label);
>-            prefixContainer.appendChild(entry);
>-        }
>-
>-        filtersForm.addEventListener('click', function (e) {
>-            if ( filtersForm.className.indexOf('opened') !== -1 ) {
>-                filtersForm.className = filtersForm.className.replace(' opened','');
>-            } else filtersForm.className += ' opened';
>+        filtersToggleButton.addEventListener('mousedown', function (e) {
>+            filtersForm.classList.toggle('opened');
>         });
> 
>         var searchTerm = searchTermFromURL();
>@@ -1475,7 +1657,7 @@ function initializeStatusPage() {
> 
>     function canonicalizeStatus(propertyObject, categories)
>     {
>-        // Inherit "status" from the cateogry if not explicitly specified.
>+        // Inherit "status" from the category if not explicitly specified.
>         if (!('status' in propertyObject)) {
>             var category = getSpecificationCategory(propertyObject)
>             if (category) {
>@@ -1561,4 +1743,4 @@ function initializeStatusPage() {
> document.addEventListener("DOMContentLoaded", initializeStatusPage);
> </script>
> 
>-<?php get_footer(); ?>
>+<?php get_footer(); ?>
>\ No newline at end of file
>diff --git a/Websites/webkit.org/wp-content/themes/webkit/front-header.php b/Websites/webkit.org/wp-content/themes/webkit/front-header.php
>index 8824a7143194ca9009710694758c41dbae6bcf04..9bf16a21e3ac8b2b77eb91fbdafebc491201f236 100644
>--- a/Websites/webkit.org/wp-content/themes/webkit/front-header.php
>+++ b/Websites/webkit.org/wp-content/themes/webkit/front-header.php
>@@ -2,34 +2,25 @@
>     header {
>         position: absolute;
>     }
>-    
>-    .home .site-logo {
>-        color: #ffffff;
>-    }
>-    
>-    .content-scroll #menu-main-menu > li > a:not(:hover),
>-    .content-scroll .site-logo {
>-        color: #333333;
>-    }
>-    
>+
>     .page-layer {
>         overflow: hidden;
>     }
>-    
>+
>     .hero {
>         position: relative;
>         overflow: hidden;
>         max-width: 100vw;
>         box-sizing: border-box;
>         padding: 0 0 6rem;
>-        color: #ffffff;
>-        background-color: #00253D;
>+        color: white;
>+        background-color: hsl(203.6, 100%, 12%);
>         z-index: 1;
>         top: -30rem;
>         padding-top: 45rem;
>         margin-bottom: -30rem;
>     }
>-    
>+
>     .hero h1 {
>         font-size: 4.8rem;
>         font-weight: 500;
>@@ -37,7 +28,7 @@
>         text-align: center;
>         line-height: 1.04167;
>     }
>-    
>+
>     .hero p {
>         font-size: 2.2rem;
>         line-height: 1.45455;
>@@ -48,7 +39,7 @@
>     }
> 
>     .hero a {
>-        color: #0af;
>+        color: hsl(200, 100%, 50%);
>     }
> 
>     #fade {
>@@ -59,7 +50,7 @@
>         z-index: 4;
>         transform: translateY(-45rem);
>     }
>-    
>+
>     #template {
>         opacity: 0.1;
>         position: absolute;
>@@ -71,7 +62,7 @@
>         background-size: 101.5%;
>         z-index: 3;
>         transform: translateY(-40rem);    }
>-    
>+
>     #compass {
>         position: absolute;
>         top: 0px;
>@@ -109,7 +100,7 @@
>             -webkit-transform: translateY(-400px) rotate(360deg);
>         }
>     }
>-    
>+
>     .hero .content {
>         position: relative;
>         max-width: 800px;
>@@ -117,25 +108,25 @@
>         margin: 0 auto;
>         z-index: 10;
>     }
>-    
>+
>     main {
>         position: relative;
>         z-index: 10;
>     }
>-    
>+
>     @media only screen and (max-width: 920px) {
>         .hero {
>             padding-top: 40rem;
>             padding-bottom: 3rem;
>         }
>     }
>-    
>+
>     @media only screen and (max-width: 690px) {
>         .hero h1 {
>             font-size: 4rem;
>             line-height: 1.1;
>         }
>-        
>+
>         .hero p {
>             font-size: 2rem;
>             line-height: 1.4;
>@@ -146,20 +137,21 @@
>             background-size: 150%;
>         }
>     }
>-    
>+
>     @media only screen and (max-width: 320px) {
>         .hero h1 {
>             font-size: 2.5rem;
>             letter-spacing: -0.016rem;
>         }
>-    }    
>-    
>+    }
>+
>     @media (prefers-reduced-motion) {
>         #compass {
>             animation: none;
>             transform: translateY(-400px);
>         }
>     }
>+
>     </style>
> 
>     <?php if ( is_front_page() && have_posts()): the_post(); ?>
>@@ -172,5 +164,5 @@
>         </div>
>     </div>
>     <?php endif; ?>
>-        
>-<div class="page-layer">
>\ No newline at end of file
>+
>+<div class="page-layer">
>diff --git a/Websites/webkit.org/wp-content/themes/webkit/functions.php b/Websites/webkit.org/wp-content/themes/webkit/functions.php
>index e79aa508cfbd16e3840235917888075daea419b6..b10e7f957f754e16cde3e60c0d0a638d37b9b46b 100644
>--- a/Websites/webkit.org/wp-content/themes/webkit/functions.php
>+++ b/Websites/webkit.org/wp-content/themes/webkit/functions.php
>@@ -7,8 +7,11 @@ add_action( 'init', function () {
>     register_nav_menu('site-nav', __( 'Site Navigation' ));
>     register_nav_menu('footer-nav', __( 'Footer Navigation' ));
>     register_nav_menu('sitemap', __( 'Site Map Page' ));
>+    register_nav_menu('feature-subnav', __( 'Feature Page Buttons' ));
> } );
> 
>+//add_action( 'wp_header', 'include_invert_lightness_filter');
>+
> add_action( 'wp_dashboard_setup', function () {
>     $SurveyWidget = new WebKit_Nightly_Survey();
>     $SurveyWidget->add_widget();
>@@ -238,6 +241,10 @@ function include_post_icons() {
>     echo WebKit_Post_Icons::parse_icons();
> }
> 
>+function include_invert_lightness_filter() {
>+    include('images/invert-lightness.svg');
>+}
>+
> function get_post_icon() {
> 
>     $categories = get_the_category();
>diff --git a/Websites/webkit.org/wp-content/themes/webkit/header.php b/Websites/webkit.org/wp-content/themes/webkit/header.php
>index b9cc263b527db2e77b7572655712f67b1a00ff88..4a2d75028f79ced8ab60a9986180357719130590 100644
>--- a/Websites/webkit.org/wp-content/themes/webkit/header.php
>+++ b/Websites/webkit.org/wp-content/themes/webkit/header.php
>@@ -13,6 +13,7 @@
> 
>     <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>?20171013" media="all">
>     <link rel="stylesheet" href="https://www.apple.com/wss/fonts?families=SF+Pro,v1" type="text/css">
>+    <meta name="supported-color-schemes" content="light dark">
> 
>     <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>">
>     <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>">
>@@ -24,7 +25,7 @@
>     <?php wp_head(); ?>
> </head>
> <body <?php body_class(); ?>>
>-
>+    <?php include_invert_lightness_filter(); ?>
>     <header aria-label="WebKit.org Header" id="header">
>         <div class="page-width">
>         <a href="/"><div id="logo" class="site-logo">WebKit</div></a>
>diff --git a/Websites/webkit.org/wp-content/themes/webkit/images/chevron-dark.svg b/Websites/webkit.org/wp-content/themes/webkit/images/chevron-dark.svg
>new file mode 100644
>index 0000000000000000000000000000000000000000..ffa0e05125f2943216101af40c8fc195cd724df3
>--- /dev/null
>+++ b/Websites/webkit.org/wp-content/themes/webkit/images/chevron-dark.svg
>@@ -0,0 +1,5 @@
>+
>+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="32" viewBox="0 0 18 32">
>+  <style> polygon { color: hsl(206.7, 100%, 70%); } </style>
>+  <polygon fill="currentColor" fill-rule="evenodd" points="17.177 16.198 3.084 0 0 2.649 11.296 16.198 0 29.226 3.084 32"/>
>+</svg>
>\ No newline at end of file
>diff --git a/Websites/webkit.org/wp-content/themes/webkit/images/chevron.svg b/Websites/webkit.org/wp-content/themes/webkit/images/chevron.svg
>index 3665dca1816565813ae68ca763eb777aa643c6f7..6ebd61bcf1399953dc8027ca98362abd3326189a 100644
>--- a/Websites/webkit.org/wp-content/themes/webkit/images/chevron.svg
>+++ b/Websites/webkit.org/wp-content/themes/webkit/images/chevron.svg
>@@ -1,4 +1,5 @@
> 
> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="32" viewBox="0 0 18 32">
>-  <polygon fill="#0070C9" fill-rule="evenodd" points="17.177 16.198 3.084 0 0 2.649 11.296 16.198 0 29.226 3.084 32"/>
>+  <style> polygon { color: hsl(200, 100%, 40%); } </style>
>+  <polygon fill="currentColor" fill-rule="evenodd" points="17.177 16.198 3.084 0 0 2.649 11.296 16.198 0 29.226 3.084 32"/>
> </svg>
>\ No newline at end of file
>diff --git a/Websites/webkit.org/wp-content/themes/webkit/images/filter.svg b/Websites/webkit.org/wp-content/themes/webkit/images/filter.svg
>new file mode 100644
>index 0000000000000000000000000000000000000000..58a7e2b9e4a535e28d201008af07f9cd21507c8a
>--- /dev/null
>+++ b/Websites/webkit.org/wp-content/themes/webkit/images/filter.svg
>@@ -0,0 +1,5 @@
>+<?xml version="1.0" encoding="utf-8"?>
>+
>+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
>+    <path fill="hsl(240, 2.3%, 56.7%)" fill-rule="evenodd" d="M 10 20 C 15.5228462 20 20 15.5228477 20 10 C 20 4.47715385 15.5228462 0 10 0 C 4.47715231 0 0 4.47715385 0 10 C 0 15.5228477 4.47715231 20 10 20 L 10 20 L 10 20 Z M 10 17.9985352 C 14.4174688 17.9985352 17.9985352 14.4174688 17.9985352 10 C 17.9985352 5.58253119 14.4174688 2.00146484 10 2.00146484 C 5.58253119 2.00146484 2.00146484 5.58253119 2.00146484 10 C 2.00146484 14.4174688 5.58253119 17.9985352 10 17.9985352 L 10 17.9985352 L 10 17.9985352 Z M 8.35454673 15 L 8.35454673 13 L 11.610756 13 L 11.610756 15 L 8.35454673 15 Z M 6.29802601 12 L 6.29802601 10 L 13.6980874 10 L 13.6980874 12 L 6.29802601 12 Z M 4.49986963 9 L 4.49986963 7 L 15.5110923 7 L 15.5110923 9 L 4.49986963 9 Z"/>
>+</svg>
>diff --git a/Websites/webkit.org/wp-content/themes/webkit/images/icons.svg b/Websites/webkit.org/wp-content/themes/webkit/images/icons.svg
>index 38f86fa96f3b39a79327d8c30244af58071824f0..957134b527fbfa1f000fcb02406d4bf1e71e75a4 100644
>--- a/Websites/webkit.org/wp-content/themes/webkit/images/icons.svg
>+++ b/Websites/webkit.org/wp-content/themes/webkit/images/icons.svg
>@@ -2,7 +2,7 @@
> 
> <svg id="icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
>     <style>
>-        svg,symbol { color: white; }
>+        svg,symbol { color: currentColor; }
>     </style>
> 
>     <defs>
>diff --git a/Websites/webkit.org/wp-content/themes/webkit/images/invert-lightness.svg b/Websites/webkit.org/wp-content/themes/webkit/images/invert-lightness.svg
>new file mode 100644
>index 0000000000000000000000000000000000000000..415079867a6b1744469de0f69ae58abdbcf81cde
>--- /dev/null
>+++ b/Websites/webkit.org/wp-content/themes/webkit/images/invert-lightness.svg
>@@ -0,0 +1,22 @@
>+<?xml version="1.0" encoding="utf-8"?>
>+
>+<svg xmlns="http://www.w3.org/2000/svg">
>+	<style> svg { display: block; width: 0; height: 0; } </style>
>+    <filter id="invertLightness" x="0" y="0" style="color-interpolation-filters: sRGB">
>+        <feColorMatrix type="matrix" in="SourceGraphic" result="red" values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1" />
>+        <feColorMatrix type="matrix" in="SourceGraphic" result="green" values="0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1" />
>+        <feColorMatrix type="matrix" in="SourceGraphic" result="blue" values="0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 1" />
>+        <feBlend in="red" in2="green" mode="lighten" result="maxyellow" />
>+        <feBlend in="maxyellow" in2="blue" mode="lighten" result="max" />
>+        <feBlend in="red" in2="green" mode="darken" result="minyellow" />
>+        <feBlend in="minyellow" in2="blue" mode="darken" result="min" />
>+        <feComponentTransfer result="adjustment" in="min">
>+            <feFuncR type="linear" intercept="1" slope="-1" />
>+            <feFuncG type="linear" intercept="1" slope="-1" />
>+            <feFuncB type="linear" intercept="1" slope="-1" />
>+        </feComponentTransfer>
>+        <feComposite operator="arithmetic" in="SourceGraphic" in2="adjustment" k1="0" k2="1" k3="1" k4="-1" result="channelAdjustment" />
>+        <feComposite operator="arithmetic" in="channelAdjustment" in2="max" k1="0" k2="1" k3="-1" k4="1" result="finalColors" />
>+        <feComposite operator="in" in="finalColors" in2="SourceAlpha" />
>+    </filter>
>+</svg>
>\ No newline at end of file
>diff --git a/Websites/webkit.org/wp-content/themes/webkit/images/search.svg b/Websites/webkit.org/wp-content/themes/webkit/images/search.svg
>new file mode 100644
>index 0000000000000000000000000000000000000000..3bc03c0a40d7d49af3a0a4fc91f3e27d6aad8723
>--- /dev/null
>+++ b/Websites/webkit.org/wp-content/themes/webkit/images/search.svg
>@@ -0,0 +1,5 @@
>+<?xml version="1.0" encoding="utf-8"?>
>+
>+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 22">
>+    <path fill="hsl(240, 2.3%, 56.7%)" d="M 11.8360196 13.5 L 14.0160155 11.4064292 L 22.4436989 19.5 L 20.263703 21.5935708 L 11.8360196 13.5 Z M 8.28896869 14 C 11.7711172 14 14.5779374 11.3044556 14.5779374 8 C 14.5779374 4.69554511 11.7711168 2 8.28896869 2 C 4.80681985 2 2 4.69554471 2 8 C 2 11.304456 4.80681944 14 8.28896869 14 Z M 8.28896869 16 C 3.71994516 16 0 12.4275308 0 8 C 0 3.57246993 3.71994553 0 8.28896869 0 C 12.8579911 0 16.5779374 3.57247028 16.5779374 8 C 16.5779374 12.4275305 12.8579915 16 8.28896869 16 Z"/>
>+</svg>
>diff --git a/Websites/webkit.org/wp-content/themes/webkit/sitemap.php b/Websites/webkit.org/wp-content/themes/webkit/sitemap.php
>index c2699ce4effe87a93e68ba49d199e3257e1bacc4..240ee198c70edc133740e37b94cd87d3e4dfd3ea 100644
>--- a/Websites/webkit.org/wp-content/themes/webkit/sitemap.php
>+++ b/Websites/webkit.org/wp-content/themes/webkit/sitemap.php
>@@ -8,12 +8,14 @@
>     <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
>         <style>
>         article .menu a {
>-            color: #444444;
>+            color: hsl(0, 0%, 26.7%);
>+            color: var(--text-color-heading);
>             text-decoration: none;
>         }
> 
>         article .menu a:hover {
>-            color: #08c;
>+            color: hsl(200, 100%, 40%);
>+            color: var(--link-color);
>         }
> 
>         article .menu,
>@@ -46,7 +48,8 @@
>             font-weight: 200;
>             letter-spacing: -0.01em;
>             padding-bottom: 1rem;
>-            border-bottom: 1px solid #dddddd;
>+            border-bottom: 1px solid hsl(0, 0%, 86.7%);
>+            border-color: var(--horizontal-rule-color);
>             margin-bottom: 1rem;
>         }
> 
>diff --git a/Websites/webkit.org/wp-content/themes/webkit/status.php b/Websites/webkit.org/wp-content/themes/webkit/status.php
>index 62a87aab945fbc01338ea9be82846c8e686a9309..bf7c9cf1d3afac4e12a306b3a1512b8f7dd56dab 100644
>--- a/Websites/webkit.org/wp-content/themes/webkit/status.php
>+++ b/Websites/webkit.org/wp-content/themes/webkit/status.php
>@@ -35,6 +35,32 @@ var loadWebCoreFeatures = xhrPromise(new URL("/repository/webkit/trunk/Source/We
> 
> <style>
> 
>+:root {
>+    --feature-rule-color: hsl(0, 0%, 89.4%);
>+    --status-color: hsl(0, 0%, 60%);
>+    --supported-color: hsl(100, 100%, 30%);
>+    --supported-in-preview-color: hsl(275.4, 77.7%, 35.1%);
>+    --in-development-color: hsl(24.5, 91.3%, 50.6%);
>+    --no-active-development-color: hsl(240, 60.6%, 59.2%);
>+    --partially-supported-color: hsl(180, 25%, 43.9%);
>+    --prototyping-color: hsl(211.3, 100%, 50%);
>+    --under-consideration-color: hsl(5.9, 40.2%, 60%);
>+}
>+
>+@media(prefers-color-scheme:dark) {
>+    :root {
>+        --feature-rule-color: hsl(0, 0%, 20%);
>+        --status-color: hsl(0, 0%, 51%);
>+        --supported-color: hsl(79.5, 45.3%, 52%);
>+        --supported-in-preview-color: hsl(276.7, 36.3%, 51.4%);
>+        --in-development-color: hsl(24.5, 91.3%, 50.6%);
>+        --no-active-development-color: hsl(240, 60.6%, 59.2%);
>+        --partially-supported-color: hsl(180, 30%, 52%);
>+        --prototyping-color: hsl(211.3, 100%, 50%);
>+        --under-consideration-color: hsl(0, 35%, 61%);
>+    }
>+}
>+
> .page h1 {
>     font-size: 4.2rem;
>     font-weight: 500;
>@@ -42,7 +68,6 @@ var loadWebCoreFeatures = xhrPromise(new URL("/repository/webkit/trunk/Source/We
>     margin: 3rem auto;
>     width: 100%;
>     text-align: center;
>-    color: #333333;
> }
> 
> .page h1 a {
>@@ -59,29 +84,62 @@ var loadWebCoreFeatures = xhrPromise(new URL("/repository/webkit/trunk/Source/We
> }
> 
> .feature-filters {
>-    background-color: #ffffff;
>+    background-color: hsl(0, 0%, 0%);
>+    background-color: var(--figure-mattewhite-background-color);
>     width: 100vw;
>     left: 50%;
>     position: relative;
>     transform: translate(-50vw, 0);
>     box-sizing: border-box;
>     margin-bottom: 3rem;
>-    border: 1px solid #DDDDDD;
>+    border: 1px solid hsl(0, 0%, 90.6%);
>+    border-color: var(--article-border-color);
>     border-left: none;
>     border-right: none;
> }
> 
> .feature-filters form {
>+    max-width: 920px;
>+    margin: 0 auto 0;
>+    position: relative;
>+    top: 0;
>+}
>+/*.feature-filters form {
>     padding-top: 3rem;
>     padding-bottom: 3rem;
>-    display: flex;
>-    flex-wrap: wrap;
>+}*/
>+
>+.feature-filters .search-input {
>+    background-repeat: no-repeat;
>+    background-position-x: 0.5rem;
>+    background-position-y: 1rem;
>+    background-size: 2rem;
>+    padding: 1rem;
>+    padding-left: 3rem;
>+    padding-right: 8.5rem;
>+    font-size: 2rem;
>+    width: 100%;
>+    margin-top: 0rem;
>+    margin-bottom: 0rem;
>+    box-sizing: border-box;
>+    border-color: transparent;
> }
> 
>-input[type=text].search-input {
>-    margin-bottom: 1rem;
>-    width: 100%;
>-    flex: 1;
>+.feature-filters .filters-toggle-button {
>+    background-repeat: no-repeat;
>+    background-size: 2rem;
>+    background-position: right;
>+    background-filter: lightness(2);
>+    position: absolute;
>+    padding-right: 2.5rem;
>+    right: 1rem;
>+    top: 1rem;
>+    border: none;
>+    color: hsl(240, 2.3%, 56.7%);
>+}
>+
>+.feature-filters .filters-toggle-button:hover {
>+    filter: brightness(0);
> }
> 
> .feature-filters li {
>@@ -103,24 +161,50 @@ input[type=text].search-input {
> 
> .status-filters label {
>     margin-left: 1rem;
>+    margin-bottom: 1rem;
>+}
>+
>+.feature-filters label {
>+    float: none;
>+    display: inline-block;
> }
> 
> .status-filters {
>     list-style: none;
>-    display: inline-block;
>-    text-align: right;
>-    flex: 2;
>-    flex-grow: 1;
>+    display: none;
>+    text-align: center;
>+    margin-top: 1rem;
>+    margin-bottom: 0.5rem;
>+}
>+
>+#feature-filters.opened {
>+    margin-top: 1.5rem;
>+}
>+
>+#feature-filters.opened .status-filters {
>+    display: block;
>+}
>+#feature-filters.opened .search-input {
>+    border-color: hsl(0, 0%, 83.9%);
>+    border-color: var(--input-border-color);
> }
> 
> .filter-toggle:checked + .filter-status {
>-    color: #ffffff;
>+    color: hsl(240, 1.3%, 84.5%);
>+    color: var(--text-color);
>+}
>+
>+.feature-filters label > input {
>+    position: relative;
>+    top: -1px;
> }
> 
> .filter-status,
> .feature-status {
>-    color: #999999;
>-    border-color: #999999;
>+    color: hsl(0, 0%, 60%);
>+    color: var(--status-color);
>+    border-color: hsl(0, 0%, 60%);
>+    border-color: var(--status-color);
> }
> 
> .feature-status a {
>@@ -129,102 +213,124 @@ input[type=text].search-input {
> 
> .filter-status,
> .status-marker {
>-    border-color: #999999;
>+    border-color: hsl(0, 0%, 60%);
>+    border-color: var(--status-color)
> }
> .filter-toggle:checked + .filter-status {
>-    background-color: #999999;
>+    background-color: hsl(0, 0%, 60%);
>+    background-color: var(--status-color);
> }
> 
>+/** Status color mapping **/
> .supported {
>-    color: #339900;
>-    border-color: #339900;
>+    color: hsl(100, 100%, 30%);
>+    color: var(--supported-color);
>+    border-color: hsl(100, 100%, 30%);
>+    border-color: var(--supported-color);
> }
> 
> .filter-toggle:checked + .supported {
>-    background-color: #339900;
>+    background-color: hsl(100, 100%, 30%);
>+    background-color: var(--supported-color);
> }
> 
> .supported-in-preview {
>-    color: #66149f;
>-    border-color: #66149f;
>+    color: hsl(275.4, 77.7%, 35.1%);
>+    color: var(--supported-in-preview-color);
>+    border-color: hsl(275.4, 77.7%, 35.1%);
>+    border-color: var(--supported-in-preview-color);
> }
> 
> .filter-toggle:checked + .supported-in-preview {
>-    background-color: #66149f;
>+    background-color: hsl(275.4, 77.7%, 35.1%);
>+    background-color: var(--supported-in-preview-color);
> }
> 
> .in-development {
>-    color: #f46c0e;
>-    border-color: #f46c0e;
>+    color: hsl(24.5, 91.3%, 50.6%);
>+    color: var(--in-development-color);
>+    border-color: hsl(24.5, 91.3%, 50.6%);
>+    border-color: var(--in-development-color);
> }
> .filter-toggle:checked + .in-development {
>-    background-color: #f46c0e;
>+    background-color: hsl(24.5, 91.3%, 50.6%);
>+    background-color: var(--in-development-color);
> }
> 
> .no-active-development {
>-    color: #5858D6;
>-    border-color: #5858D6;
>+    color: hsl(240, 60.6%, 59.2%);
>+    color: var(--no-active-development-color);
>+    border-color: hsl(240, 60.6%, 59.2%);
>+    border-color: var(--no-active-development-color);
> }
> 
> .filter-toggle:checked + .no-active-development {
>-    background-color: #5858D6;
>+    background-color: hsl(240, 60.6%, 59.2%);
>+    background-color: var(--no-active-development-color);
> }
> 
> .partially-supported  {
>-    color: #548c8c;
>-    border-color: #548c8c;
>+    color: hsl(180, 25%, 43.9%);
>+    color: var(--partially-supported-color);
>+    border-color: hsl(180, 25%, 43.9%);
>+    border-color: var(--partially-supported-color);
> }
> 
> .filter-toggle:checked + .partially-supported {
>-    background-color: #548c8c;
>+    background-color: hsl(180, 25%, 43.9%);
>+    background-color: var(--partially-supported-color);
> }
> 
> .prototyping {
>-    color: #007AFF;
>-    border-color: #007AFF;
>+    color: hsl(211.3, 100%, 50%);
>+    color: var(--prototyping-color);
>+    border-color: hsl(211.3, 100%, 50%);
>+    border-color: var(--prototyping-color);
> }
> 
> .filter-toggle:checked + .prototyping {
>-    background-color: #007AFF;
>+    background-color: hsl(211.3, 100%, 50%);
>+    background-color: var(--prototyping-color);
> }
> 
> .under-consideration {
>-    color: #c27870;
>-    border-color: #c27870;
>+    color: hsl(5.9, 40.2%, 60%);
>+    color: var(--under-consideration-color);
>+    border-color: hsl(5.9, 40.2%, 60%);
>+    border-color: var(--under-consideration-color);
> }
> 
> .filter-toggle:checked + .under-consideration {
>-    background-color: #c27870;
>+    background-color: hsl(5.9, 40.2%, 60%);
>+    background-color: var(--under-consideration-color);
> }
> 
> .feature.is-hidden {
>     display: none;
> }
> 
>-.features {
>+.features,
>+.features-count {
>     max-width: 920px;
>     margin: 0 auto 3rem;
>-    border-bottom: 1px solid #e4e4e4;
>+}
> 
>+.features {
>+    border-bottom: 1px solid hsl(0, 0%, 89.4%);
>+    border-color: var(--feature-rule-color);
> }
> 
> .feature-count {
>-    max-width: 920px;
>-    margin: 0 auto 3rem;
>-
>     text-align: right;
>     color: #999;
> }
> 
>-.feature-count p {
>-    margin: 0;
>-}
>-
> .feature {
>     border-color: transparent;
>     border-width: 1px;
>     border-style: solid;
>-    border-top-color: #e4e4e4;
>+    border-top-color: hsl(0, 0%, 89.4%);
>+    border-top-color: var(--feature-rule-color);
>     padding: 0.5rem;
>     line-height: 1.618;
>     transition: background-color 0.3s ease-out;
>@@ -260,7 +366,8 @@ input[type=text].search-input {
> }
> 
> .feature-header a[name] {
>-    color: #444444;
>+    color: hsl(0, 0%, 26.7%);
>+    color: var(--text-color-heading);
> }
> 
> .feature-header .internal-reference {
>@@ -271,7 +378,27 @@ input[type=text].search-input {
> }
> 
> .feature-header .internal-reference a {
>-    color: #999999;
>+    color: hsl(0, 0%, 33.3%);
>+    color: var(--text-color-medium);
>+}
>+
>+@media(prefers-color-scheme:dark) {
>+    .feature-header:after {
>+        filter: invert(1);
>+    }
>+
>+    .search-input:hover,
>+    .search-input:focus,
>+    .feature-filters .filters-toggle-button:hover {
>+        filter: brightness(2);
>+    }
>+}
>+
>+.feature.opened .feature-header:after {
>+    -webkit-transform: rotateX(-180deg);
>+    -moz-transform: rotateX(-180deg);
>+    transform: rotateX(-180deg);
>+    perspective: 600;
> }
> 
> .feature-header:after {
>@@ -290,9 +417,12 @@ input[type=text].search-input {
> }
> 
> .feature.opened {
>-    background: #ffffff;
>-    border-left-color: #e4e4e4;
>-    border-right-color: #e4e4e4;
>+    background-color: hsl(0, 0%, 100%);
>+    background-color: var(--figure-mattewhite-background-color);
>+    border-left-color: hsl(0, 0%, 89.4%);
>+    border-left-color: var(--feature-rule-color);
>+    border-right-color: hsl(0, 0%, 89.4%);
>+    border-right-color: var(--feature-rule-color);
> }
> 
> .feature.opened .feature-details {
>@@ -300,10 +430,11 @@ input[type=text].search-input {
> }
> 
> .feature h4 {
>-    color: #999999;
>     font-weight: 600;
>     margin-top: 1rem;
>     margin-bottom: 0;
>+    color: hsl(0, 0%, 33.3%);
>+    color: var(--text-color-medium);
> }
> 
> .feature .moreinfo {
>@@ -321,17 +452,20 @@ input[type=text].search-input {
> }
> 
> .feature .feature-desc {
>-    color: #444444;
>+    color: hsl(0, 0%, 20%);
>+    color: var(--text-color);
> }
> 
> .feature .comment {
>-    color: #666666;
>+    color: hsl(0, 0%, 33.3%);
>+    color: var(--text-color-medium);
>     font-style: italic;
> }
> 
> .sub-features {
>     font-size: 1.5rem;
>-    color: #555;
>+    color: hsl(0, 0%, 24%);
>+    color: var(--text-color-light);
> }
> 
> .sub-features ul {
>@@ -354,10 +488,23 @@ input[type=text].search-input {
>     content: "";
> }
> 
>-@media only screen and (max-width: 1000px) {
>+.pagination:after {
>+    display: none;
>+}
>+
>+.pagination,
>+.pagination + h1 {
>+    margin-top: 0;
>+}
>+
>+@media only screen and (max-width: 1180px) {
>     .feature-details {
>         width: 100%;
>     }
>+
>+    .feature-filters .filters-toggle-button {
>+        right: 3rem;
>+    }
> }
> 
> @media only screen and (max-width: 508px) {
>@@ -409,7 +556,6 @@ input[type=text].search-input {
>     }
> 
>     .status-filters {
>-        text-align: left;
>         flex-basis: 100%;
>     }
> 
>@@ -430,23 +576,26 @@ h3 a[name], .admin-bar h3 a[name] {
> </style>
> 	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
> 
>-        <div id="content">
>         <div class="page feature-status-page" id="post-<?php the_ID(); ?>">
>-			<h1><a href="<?php echo get_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php the_title(); ?></a></h1>
>+            <div class="connected pagination">
>+                <?php wp_nav_menu( array('theme_location'  => 'feature-subnav') ); ?>
>+            </div>
>+
>+            <h1><a href="<?php echo get_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php the_title(); ?></a></h1>
> 
>-            <div class="feature-filters">
>+            <section class="feature-filters">
>                 <form id="feature-filters" class="page-width">
>-                    <input type="text" id="search" class="search-input" placeholder="Search features&hellip;" title="Filter the feature list." required>
>+                    <input type="text" id="search" class="search-input" placeholder="Search features&hellip;" title="Filter the feature list." required><label class="filters-toggle-button">Filters</label>
>                     <ul id="status-filters" class="status-filters"></ul>
>                 </form>
>-            </div>
>+            </section>
> 
>-            <div id="feature-list">
>+            <section id="feature-list">
>                 <div class="feature-count">
>                     <p><span id="feature-count"></span> <span id="feature-pluralize">features</span></p>
>                 </div>
> 
>-            </div>
>+            </section>
> 
>             <template id="success-template">
>                 <ul class="features" id="features-container"></ul>
>@@ -458,15 +607,12 @@ h3 a[name], .admin-bar h3 a[name] {
>                 <p>If this is not resolved soon, please contact <a href="https://twitter.com/webkit">@webkit</a> on Twitter or the <a href="https://lists.webkit.org/mailman/listinfo/webkit-help">webkit-help</a> mailing list.</p>
>             </template>
>         </div>
>-        </div>
> 
>-	<?php //comments_template(); ?>
>+    <?php endwhile; else: ?>
> 
>-	<?php endwhile; else: ?>
>+        <p>No posts.</p>
> 
>-		<p>No posts.</p>
>-
>-	<?php endif; ?>
>+    <?php endif; ?>
> 
> 
> <script>
>@@ -697,6 +843,7 @@ function initializeStatusPage() {
>     function initSearch(featuresArray)
>     {
>         var filtersForm = document.getElementById('feature-filters');
>+        var filtersToggleButton = document.getElementsByClassName('filters-toggle-button')[0];
>         var statusContainer = document.getElementById('status-filters');
>         var inputField = document.getElementById('search');
>         var featuresEls = document.querySelectorAll('.features > li');
>@@ -718,6 +865,9 @@ function initializeStatusPage() {
>             }
>         });
> 
>+        var searchTerm = searchTermFromURL();
>+        var selectedStatuses = statusesFromURL();
>+
>         for (var key of statusOrder) {
>             if (statusFilters[key] == undefined)
>                 continue;
>@@ -734,6 +884,10 @@ function initializeStatusPage() {
>             input.className = 'filter-toggle';
>             input.addEventListener('change', function() { updateSearch(featuresArray); });
> 
>+            if (selectedStatuses.indexOf(statusId) != -1) {
>+                filtersForm.classList.add('opened');
>+                input.checked = true;
>+            }
> 
>             label.className = "filter-status " + statusId;
>             label.setAttribute('for', 'toggle-' + statusId);
>@@ -745,13 +899,10 @@ function initializeStatusPage() {
>             statusContainer.appendChild(entry);
>         }
> 
>-        filtersForm.addEventListener('click', function (e) {
>-            if ( filtersForm.className.indexOf('opened') !== -1 ) {
>-                filtersForm.className = filtersForm.className.replace(' opened','');
>-            } else filtersForm.className += " opened";
>+        filtersToggleButton.addEventListener('click', function (e) {
>+            filtersForm.classList.toggle('opened');
>         });
> 
>-        var searchTerm = searchTermFromURL();
>         if (searchTerm.length) {
>             inputField.value = searchTerm;
>             inputField.placeholder = '';
>@@ -841,6 +992,18 @@ function initializeStatusPage() {
>         return '';
>     }
> 
>+    function statusesFromURL()
>+    {
>+        var search = window.location.search;
>+        var statusRegExp = /\#.*status=([^&]+)/;
>+
>+        var result;
>+        if (result = window.location.href.match(statusRegExp))
>+            return result[1].split(',');
>+
>+        return [];
>+    }
>+
>     function isSearchMatch(feature, searchTerm)
>     {
>         if (feature.name.toLowerCase().indexOf(searchTerm) !== -1)
>diff --git a/Websites/webkit.org/wp-content/themes/webkit/style.css b/Websites/webkit.org/wp-content/themes/webkit/style.css
>index 2712df9c3bed1a884bd309e5b747c885e2ddb229..6641e174e9b5fba110db586920093fed23fd213c 100644
>--- a/Websites/webkit.org/wp-content/themes/webkit/style.css
>+++ b/Websites/webkit.org/wp-content/themes/webkit/style.css
>@@ -7,6 +7,236 @@ Description: Modern, adaptive theme for the WebKit project.
> Version: 1.0
> */
> 
>+:root {
>+    --background-color: hsl(203.6, 100%, 12%);
>+    --link-color: hsl(200, 100%, 40%);
>+    --text-color: hsl(0, 0%, 20%);
>+    --text-color-light: hsl(0, 0%, 87%);
>+    --text-color-medium: hsl(0, 0%, 33.3%);
>+    --text-color-heading: hsl(0, 0%, 26.7%);
>+    --text-color-coolgray: hsl(240, 2.3%, 56.7%);
>+    --inverse-text-color: hsl(0, 0%, 100%);
>+    --inverse-link-color: hsl(206.7, 100%, 70%);
>+
>+    --content-background-color: hsl(0, 0%, 96.9%);
>+    --horizontal-rule-color: hsl(0, 0%, 86.7%);
>+
>+    --code-background-color: hsl(0, 0%, 94.9%);
>+    --code-border-color: hsl(0, 0%, 90.6%);
>+    --code-text-color: hsl(0, 0%, 26.7%);
>+
>+    --note-background-color: hsl(50, 100%, 94%);
>+    --note-border-color: hsl(40, 100%, 90%);
>+    --note-text-color: hsl(30, 90%, 35%);
>+
>+    --foreword-background-color: hsl(0, 0%, 94.1%);
>+    --foreword-border-color: hsl(0, 0%, 90.2%);
>+    --foreword-text-color: hsl(240, 2.3%, 56.7%);
>+
>+    --input-border-color: hsl(0, 0%, 83.9%);
>+    --input-background-color: hsl(0, 0%, 100%);
>+    --button-background-color: hsl(0, 0%, 100%);
>+
>+    --submit-button-background-color: hsl(199.8, 76.4%, 48.2%);
>+    --submit-button-background-gradient: linear-gradient(hsl(199.9, 78.2%, 56.9%), hsl(200, 100%, 40%));
>+    --submit-button-text-color: hsl(0, 0%, 100%);
>+
>+    --pagination-border-color: hsla(0, 0%, 0%, 0.07);
>+    --pagination-button-shadow: inset hsla(0, 0%, 0%, 0.07) 0 0 0 1px;
>+    --pagination-button-text-color: hsl(0, 0%, 100%);
>+
>+    --screen-reader-text-focus-color: hsl(198.7, 64.9%, 36.9%);
>+    --screen-reader-text-border-color: hsla(0, 0%, 0%, 0.6);
>+    --screen-reader-text-background-color: hsl(0, 0%, 94.5%);
>+    --screen-reader-text-shadow: 0 0 2px 2px hsla(0, 0%, 0%, 0.6);
>+
>+    --next-router-background-color: hsl(0, 0%, 98%);
>+    --previous-router-background-color: hsl(0, 0%, 95.7%);
>+    --router-background-hover-color: hsl(0, 0%, 100%);
>+    --router-text-color: hsl(0, 0%, 26.7%);
>+    --router-text-color-light: hsl(0, 0%, 40%);
>+
>+    --tile-background-color: hsl(0, 0%, 100%);
>+    --tile-border-color: hsla(0, 0%, 0%, 0.1);
>+    --tile-subtle-border-shadow: inset hsla(0, 0%, 0%, 0.1) 0 0 0 1px;
>+    --tile-subtle-image-border-shadoww: inset hsla(0, 0%, 0%, 0.1) 0 1px 0 1px;
>+
>+    --tile-default-background-color: hsl(215.3, 7.9%, 42.2%);
>+    --tile-background-color-blue: hsl(200, 100%, 40%);
>+    --tile-background-color-green: hsl(79.5, 45.3%, 52%);
>+    --tile-background-color-violet: hsl(280, 18%, 57.5%);
>+    --tile-background-color-rose: hsl(357.1, 39%, 58.8%);
>+    --tile-background-color-orange: hsl(37.1, 100%, 37.5%);
>+    --tile-background-color-goldenrod: hsl(45.3, 56.5%, 53.1%);
>+    --tile-background-color-purplesafari: hsl(276.7, 36.3%, 51.4%);
>+    --tile-background-color-amber: hsl(48, 100%, 50%);
>+    --tile-background-vignette: linear-gradient(-180deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.95) 80%, hsla(0, 0%, 100%, 1));
>+    --tile-background-vignette-dark: linear-gradient(-180deg, hsla(0, 0%, 0%, 0) 33%, hsla(0, 0%, 0%, 0.85));
>+
>+    --tag-window-background-color-gray: hsl(0, 0%, 94.9%);
>+    --tag-window-vignette: linear-gradient(-180deg, hsla(0, 0%, 94.9%, 0) 25%, hsla(0, 0%, 94.9%, 1) 65%);
>+
>+    --submenu-background-color: hsla(0, 0%, 100%, 0.95);
>+    --submenu-shadow: 0px 3px 20px 0px hsla(0, 0%, 0%, 0.1);
>+    --submenu-border-color: hsl(0, 0%, 90.6%);
>+    --header-menu-shadow: 0px 5px 5px hsla(0, 0%, 0%, 0.1);
>+    --header-menu-background-color: hsla(0, 0%, 100%, 0.8);
>+
>+    --tile-background-color-amber: hsl(48, 100%, 50%);
>+    --tile-background-color-twitter: hsl(197.9, 70.6%, 53.3%);
>+    --gray-tile-text-color: hsl(232.8, 100%, 37.5%);
>+
>+    --article-border-color: hsl(0, 0%, 90.6%);
>+    --article-scrollable-border-color: hsl(0, 0%, 80%);
>+    --figure-caption-rule-color: hsl(0, 0%, 80%);
>+    --toc-border-color: hsl(0, 0%, 83.9%);
>+    --table-top-rule-color: hsl(0, 0%, 73.3%);
>+    --table-rule-color: hsl(0, 0%, 87.8%);
>+    --figure-mattewhite-background-color: hsl(0, 0%, 100%);
>+
>+    --syntax-color-keyword: hsl(292.5, 100%, 26.7%);
>+    --syntax-color-keyword-operator: hsl(357.5, 100%, 33.1%);
>+    --syntax-color-builtin: hsl(309.6, 85.8%, 35.9%);
>+    --syntax-color-keyword-type: hsl(17.6, 80.4%, 44.1%);
>+    --syntax-color-preprocessor: hsl(60, 20%, 50%);
>+    --syntax-color-comment: hsl(180, 6.9%, 60.4%);
>+    --syntax-color-comment-doc: hsl(186.3, 8.3%, 55.1%);
>+    --syntax-color-identifier: hsl(209.6, 71.4%, 38.4%);
>+    --syntax-color-string: hsl(70.8, 93%, 22.4%);
>+    --syntax-color-escaped: hsl(0, 0%, 66.7%);
>+    --syntax-color-number: hsl(194.5, 14.1%, 40.2%);
>+    --syntax-color-attribute: hsl(44.8, 53.2%, 33.5%);
>+    --syntax-color-attribute-value: hsl(1.4, 79.8%, 42.7%);
>+    --syntax-color-operator: hsl(0, 0%, 53.3%);
>+    --syntax-color-whitespace-background-color: hsl(0, 0%, 20%);
>+    --syntax-color-doctype: hsl(0, 0%, 75.3%);
>+    --syntax-color-error-border: hsl(0, 100%, 50%);
>+    --syntax-color-property: hsl(295.7, 76.8%, 32.2%);
>+    --syntax-color-xml-comment: hsl(120, 100%, 22.7%);
>+    --syntax-color-xml-meta: hsl(180, 50%, 40%);
>+    --syntax-color-css-property: hsl(309.6, 85.8%, 35.9%);
>+    --syntax-color-css-selector: hsl(0, 0%, 0%);
>+    --syntax-color-css-number: hsl(248.1, 100%, 40.6%);
>+
>+    --code-selection-background-color: hsl(212.3, 97.8%, 81.8%);
>+}
>+
>+@media(prefers-color-scheme:dark) {
>+    :root {
>+        --background-color: hsl(203.6, 100%, 12%);
>+        --link-color: hsl(206.7, 100%, 70%);
>+        --text-color: hsl(240, 1.3%, 84.5%);
>+        --text-color-light: hsl(0, 0%, 33.3%);
>+        --text-color-medium: hsl(0, 0%, 51%);
>+        --text-color-heading: hsl(120, 100%, 99.8%);
>+        --text-color-coolgray: hsl(240, 2.3%, 56.7%);
>+        --inverse-text-color: hsl(0, 0%, 100%);
>+        --inverse-link-color: hsl(206.7, 100%, 70%);
>+
>+        --content-background-color: hsl(120, 2%, 9%);
>+        --horizontal-rule-color: hsl(0, 0%, 33.3%);
>+
>+        --code-background-color: hsl(120, 1%, 19.4%);
>+        --code-border-color: hsl(0, 0%, 26.7%);
>+        --code-text-color: hsl(180, 6.9%, 84.5%);
>+
>+        --note-background-color: hsl(31.9, 20.5%, 33.1%);
>+        --note-border-color: hsl(31.9, 20.5%, 42%);
>+        --note-text-color: hsl(48.7, 55.2%, 75.5%);
>+
>+        --foreword-background-color: hsl(120, 1%, 19.4%);
>+        --foreword-border-color: hsl(0, 0%, 26.7%);
>+        --foreword-text-color: hsl(120, 1.3%, 55%);
>+
>+        --input-border-color: hsl(0, 0%, 26.7%);
>+        --input-background-color: hsl(0, 0%, 0%);
>+        --button-background-color: hsl(120, 2%, 14%);
>+
>+        --submit-button-background-color: hsl(199.8, 76.4%, 48.2%);
>+        --submit-button-background-gradient: linear-gradient(hsl(199.9, 78.2%, 56.9%), hsl(200, 100%, 40%));
>+        --submit-button-text-color: hsl(0, 0%, 100%);
>+
>+        --pagination-border-color: hsla(0, 0%, 100%, 0.1);
>+        --pagination-button-shadow: inset hsla(0, 0%, 50%, 0.1) 0 0 0 1px;
>+        --pagination-button-text-color: hsl(0, 0%, 100%);
>+
>+        --screen-reader-text-focus-color: hsl(198.7, 64.9%, 36.9%);
>+        --screen-reader-text-border-color: hsla(0, 0%, 0%, 0.6);
>+        --screen-reader-text-background-color: hsl(0, 0%, 94.5%);
>+        --screen-reader-text-shadow: 0 0 2px 2px hsla(0, 0%, 0%, 0.6);
>+
>+        --next-router-background-color: hsl(120, 6.7%, 4.9%);
>+        --previous-router-background-color: hsl(120, 4%, 8%);
>+        --router-background-hover-color: hsl(0, 0%, 0%);
>+        --router-text-color: hsl(120, 100%, 99.8%);
>+        --router-text-color-light: hsl(30, 1%, 62%);
>+
>+        --tile-background-color: hsl(120, 2%, 12%);
>+        --tile-border-color: hsl(0, 0%, 29%);
>+        --tile-subtle-border-shadow: inset hsla(0, 0%, 50%, 0.1) 0 0 0 1px;
>+        --tile-subtle-image-border-shadoww: inset hsla(0, 0%, 100%, 0.1) 0 1px 0 1px;
>+
>+        --tile-default-background-color: hsl(215.3, 7.9%, 42.2%);
>+        --tile-background-color-blue: hsl(200, 100%, 40%);
>+        --tile-background-color-green: hsl(79.5, 45.3%, 52%);
>+        --tile-background-color-violet: hsl(280, 18%, 57.5%);
>+        --tile-background-color-rose: hsl(357.1, 39%, 58.8%);
>+        --tile-background-color-orange: hsl(37.1, 100%, 37.5%);
>+        --tile-background-color-goldenrod: hsl(45.3, 56.5%, 53.1%);
>+        --tile-background-color-purplesafari: hsl(276.7, 36.3%, 51.4%);
>+        --tile-background-color-amber: hsl(48, 100%, 50%);
>+        --tile-background-vignette: linear-gradient(-180deg, hsla(120, 2%, 12%, 0%), hsla(120, 2%, 12%, 0.95) 80%, hsla(120, 2%, 12%, 1));
>+        --tile-background-vignette-dark: linear-gradient(-180deg, hsla(0, 0%, 0%, 0) 33%, hsla(0, 0%, 0%, 0.85));
>+
>+        --tag-window-background-color-gray: hsl(0, 0%, 94.9%);
>+        --tag-window-vignette: linear-gradient(-180deg, hsla(0, 0%, 94.9%, 0) 25%, hsla(0, 0%, 94.9%, 1) 65%);
>+
>+        --submenu-background-color: hsla(0, 0%, 0%, 0.95);
>+        --submenu-shadow: 0px 3px 20px 0px hsla(0, 0%, 20%, 0.1);
>+        --submenu-border-color: hsl(0, 0%, 15%);
>+        --header-menu-shadow: 0px 5px 5px hsla(0, 0%, 0%, 0.1);
>+        --header-menu-background-color: hsla(0, 0%, 0%, 0.8);
>+
>+        --tile-background-color-amber: hsl(48, 100%, 50%);
>+        --tile-background-color-twitter: hsl(197.9, 70.6%, 53.3%);
>+        --gray-tile-text-color: hsl(232.8, 100%, 37.5%);
>+
>+        --article-border-color: hsl(120, 4.1%, 19.2%);
>+        --article-scrollable-border-color: hsl(120, 4.1%, 19.2%);
>+        --figure-caption-rule-color: hsl(0, 0%, 80%);
>+        --toc-border-color: hsl(0, 0%, 83.9%);
>+        --table-top-rule-color: hsl(0, 0%, 73.3%);
>+        --table-rule-color: hsl(0, 0%, 87.8%);
>+        --figure-mattewhite-background-color: hsl(0, 0%, 0%);
>+
>+        --syntax-color-keyword: hsl(299.2, 58.7%, 51.6%);
>+        --syntax-color-keyword-operator: hsl(6.8, 69.4%, 57.6%);
>+        --syntax-color-builtin: hsl(279.2, 84.3%, 57.6%);
>+        --syntax-color-keyword-type: hsl(28.1, 72.2%, 46.5%);
>+        --syntax-color-preprocessor: hsl(43.9, 51.4%, 58.8%);
>+        --syntax-color-comment: hsl(0, 0%, 51%);
>+        --syntax-color-comment-doc: hsl(186.3, 8.3%, 55.1%);
>+        --syntax-color-identifier: hsl(210.2, 70.7%, 46.9%);
>+        --syntax-color-string: hsl(119.2, 34.3%, 57.6%);
>+        --syntax-color-escaped: hsl(0, 0%, 44%);
>+        --syntax-color-number: hsl(200, 100%, 40%);
>+        --syntax-color-attribute: hsl(43.9, 51.4%, 58.8%);
>+        --syntax-color-attribute-value: hsl(28.1, 72.2%, 46.5%);
>+        --syntax-color-operator: hsl(180, 6.9%, 60.4%);
>+        --syntax-color-whitespace-background-color: hsl(0, 0%, 20%);
>+        --syntax-color-doctype: hsl(0, 0%, 42%);
>+        --syntax-color-error-border: hsl(0, 100%, 20%);
>+        --syntax-color-property: hsl(299.2, 58.7%, 51.6%);
>+        --syntax-color-xml-comment: hsl(119.2, 34.3%, 57.6%);
>+        --syntax-color-xml-meta: hsl(180, 50%, 40%);
>+        --syntax-color-css-property: hsl(309.6, 85.8%, 35.9%);
>+        --syntax-color-css-selector: hsl(240, 1.3%, 84.5%);
>+        --syntax-color-css-number: hsl(200, 100%, 40%);
>+
>+        --code-selection-background-color: hsl(214.2, 42.9%, 32.9%);
>+    }
>+}
>+
> /** Resets **/
> html, body, div, span, object, iframe,
> h1, h2, h3, h4, h5, h6, p, blockquote, pre,
>@@ -37,12 +267,14 @@ html {
>     font-synthesis: none;
> }
> body {
>-    background-color: #00253D;
>     font-size: 1.7rem;
>     font-weight: 400;
>     line-height: 1.52947;
>     letter-spacing: -0.021rem;
>-    color: #333333;
>+    background-color: hsl(203.6, 100%, 12%);
>+    background-color: var(--background-color);
>+    color: hsl(0, 0%, 20%);
>+    color: var(--text-color);
> }
> ol, ul {
>     list-style: none;
>@@ -72,15 +304,17 @@ p:empty {
>     display: none;
> }
> a {
>-    color: #08c;
>     text-decoration: none;
>     transition: color 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); /* ease-out-exponential */
> }
> a:hover {
>     text-decoration: underline;
> }
>-a > code {
>-    color: #08c;
>+a,
>+a > code,
>+a[name]:hover {
>+    color: hsl(200, 100%, 40%);
>+    color: var(--link-color);
> }
> 
> h1 a:hover {
>@@ -88,7 +322,8 @@ h1 a:hover {
> }
> hr {
>     border: none;
>-    border-bottom: 1px solid #ddd;
>+    border-bottom: 1px solid hsl(0, 0%, 86.7%);
>+    border-bottom-color: var(--horizontal-rule-color);
> }
> strong {
>     font-weight: 600;
>@@ -104,16 +339,20 @@ sup {
> }
> code {
>     font-family: "SF Mono", "Menlo", monospace;
>-    background: #f2f2f2;
>-    border-radius: 2px;
>-    border: 1px solid #e7e7e7;
>-    padding: 0 0.5rem;
>     font-size: 80%;
>-    color: #444;
>+    padding: 0 0.5rem;
>+    border-radius: 2px;
>+    border: 1px solid hsl(0, 0%, 90.6%);
>+    border-color: var(--code-border-color);
>+    background-color: hsl(0, 0%, 94.9%);
>+    background-color: var(--code-background-color);
>+    color: hsl(0, 0%, 26.7%);
>+    color: var(--code-text-color);
> }
> 
> main {
>-    background-color: #f7f7f7;
>+    background-color: hsl(0, 0%, 96.9%);
>+    background-color: var(--content-background-color);
> }
> 
> /** Accessibility Helpers **/
>@@ -121,8 +360,10 @@ a[name] {
>     display: inline-block;
>     position: relative;
>     top: -3rem;
>-    color: #ddd;
>+    color: hsl(0, 0%, 86.7%);
>+    color: var(--text-color-light);
>     width: 0;
>+    text-decoration: none;
> }
> 
> p > a[name]::before {
>@@ -130,14 +371,25 @@ p > a[name]::before {
>     margin-left: -1.7rem;
>     position: relative;
>     top: 3rem;
>-
>+    color: hsl(240, 2.3%, 56.7%);
>+    color: var(--text-color-coolgray);
>+    transition: color 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 500ms ease-in; /* ease-out-exponential */
>+    opacity: 0.3;
> }
> 
> a[name]:hover {
>-    color: #08c;
>     text-decoration: none;
> }
> 
>+a[name]:hover::before {
>+    color: hsl(200, 100%, 40%);
>+    color: var(--link-color);
>+}
>+
>+p:hover > a[name]::before {
>+    opacity: 1;
>+}
>+
> h1,
> h2,
> h3,
>@@ -166,22 +418,27 @@ input[type=text] {
>     margin-bottom: 3rem;
>     padding-left: 1.5rem;
>     padding-right: 1.5rem;
>-    color: #333333;
>     text-align: left;
>-    border: 1px solid #d6d6d6;
>     border-radius: 4px;
>-    background: white;
>+    border: 1px solid hsl(0, 0%, 83.9%);
>+    border-color: var(--input-border-color);
>+    background-color: hsl(0, 0%, 100%);
>+    background-color: var(--input-background-color);
>     background-clip: padding-box;
>+    color: hsl(0, 0%, 20%);
>+    color: var(--text-color);
>     font-family: "SF Hello", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
>-    line-height: 1.33333;
>     font-weight: 400;
>-    letter-spacing: normal;
>     font-size: 2rem;
>+    line-height: 1.33333;
>+    letter-spacing: normal;
> }
> 
> input[type=submit] {
>-    background-color: #1d9bd9;
>-    background: linear-gradient(#3baee7, #0088cc);
>+    background-color: hsl(199.8, 76.4%, 48.2%);
>+    background-color: var(--submit-button-background-color);
>+    background-image: linear-gradient(hsl(199.9, 78.2%, 56.9%), hsl(200, 100%, 40%));
>+    background-image: var(--submit-button-background-gradient);
>     border-radius: 4px;
>     color: white;
>     cursor: pointer;
>@@ -208,11 +465,14 @@ input[type=submit] {
> }
> 
> .screen-reader-text:focus {
>-    background-color: #f1f1f1;
>+    background-color: hsl(0, 0%, 94.5%);
>+    background-color: var(--screen-reader-text-background-color);
>+    box-shadow: 0 0 2px 2px hsla(0, 0%, 0%, 0.6);
>+    box-shadow: var(--screen-reader-text-shadow);
>+    color: hsl(198.7, 64.9%, 36.9%);
>+    color: var(--screen-reader-text-focus-color);
>     border-radius: 3px;
>-    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
>     clip: auto !important;
>-    color: #21759b;
>     display: block;
>     font-size: 14px;
>     font-size: 0.875rem;
>@@ -288,12 +548,15 @@ a.download {
>     padding-bottom: 3rem;
> }
> 
>-.pagination .page-numbers {
>+.pagination .page-numbers,
>+.pagination .menu-item a {
>     display: inline-block;
>     padding: 0.3rem 1rem 0.5rem;
>-    background: white;
>+    background-color: hsl(0, 0%, 100%);
>+    background-color: var(--button-background-color);
>     border-radius: 4px;
>-    box-shadow: inset rgba(0, 0, 0, 0.07) 0 0 0 1px;
>+    box-shadow: inset hsla(0, 0%, 0%, 0.07) 0 0 0 1px;
>+    box-shadow: var(--pagination-button-shadow);
>     height: 2rem;
>     font-size: 1.7rem;
>     line-height: 1.29412;
>@@ -301,15 +564,23 @@ a.download {
>     letter-spacing: -0.021em;
> }
> 
>+.pagination .menu-item a {
>+    box-shadow: none;
>+    border: 1px solid hsla(0, 0%, 0%, 0.07);
>+    border-color: var(--pagination-border-color);
>+}
>+
> .pagination .page-numbers:not(.current, .dots):hover {
>     text-decoration: none;
>-    background: #08c;
>-    color: white;
>+    background-color: hsl(200, 100%, 40%);
>+    background-color: var(--link-color);
>+    color: hsl(0, 0%, 100%);
>+    color: var(--inverse-text-color);
> }
> 
> .pagination .dots,
> .pagination .page-numbers.current {
>-    background: none;
>+    background-color: transparent;
>     box-shadow: none;
> }
> 
>@@ -333,6 +604,41 @@ a.download {
>     font-weight: normal;
> }
> 
>+.connected.pagination .menu-item {
>+    display: table-cell;
>+}
>+
>+.connected.pagination .menu-item:hover a {
>+    background-color: hsl(0, 0%, 98%);
>+    background-color: var(--next-router-background-color);
>+    box-shadow: hsla(206.7, 100%, 70%, 0.3) 0 0 5px 0px;
>+    text-decoration: none;
>+    border-radius: 4px;
>+}
>+
>+.connected.pagination .menu-item:first-child a {
>+    border-top-right-radius: 0px;
>+    border-bottom-right-radius: 0px;
>+    border-right-width: 0px;
>+}
>+.connected.pagination .menu-item:last-child a {
>+    border-top-left-radius: 0px;
>+    border-bottom-left-radius: 0px;
>+}
>+
>+.connected.pagination .menu-item.current-menu-item a,
>+.connected.pagination .menu-item.current-menu-item:hover a
>+.connected.pagination .menu-item.current-menu-item a:hover {
>+    background-color: transparent;
>+    color: var(--text-color);
>+    box-shadow: none;
>+    text-decoration: none;
>+}
>+
>+.menu-feature-pages-container {
>+    display: inline-block;
>+}
>+
> /* Front page next button */
> .pagination .next-button {
>     display: inline-block;
>@@ -342,25 +648,25 @@ a.download {
> 
> .nextrouter {
>     position: relative;
>-    background-color: #fafafa;
>+    background-color: hsl(0, 0%, 98%);
>+    background-color: var(--next-router-background-color);
>     padding: 0;
>     width: 100vw;
>     left: 50%;
>     transform: translateX(-50%);
> }
> 
>-.nextrouter:hover {
>-    background-color: #ffffff;
>-    transition: background-color 300ms ease-out;
>-}
>-
> .nextrouter.previous {
>     text-align: right;
>-    background-color: #f4f4f4;
>+    background-color: hsl(0, 0%, 95.7%);
>+    background-color: var(--previous-router-background-color);
> }
> 
>+.nextrouter:hover,
> .nextrouter.previous:hover {
>-    background-color: #ffffff;
>+    background-color: hsl(0, 0%, 100%);
>+    background-color: var(--router-background-hover-color);
>+    transition: background-color 300ms ease-out;
> }
> 
> .nextrouter .bodycopy {
>@@ -371,7 +677,8 @@ a.download {
> .nextrouter a {
>     display: block;
>     cursor: pointer;
>-    color: #444444;
>+    color: hsl(0, 0%, 26.7%);
>+    color: var(--router-text-color);
>     width: 66%;
>     margin: 0 auto;
> }
>@@ -383,8 +690,8 @@ a.download {
> .nextrouter-copy {
>     padding: 10rem 0 9.5rem 0;
>     font-size: 3.2rem;
>-    line-height: 1.09375;
>     font-weight: 500;
>+    line-height: 1.09375;
>     letter-spacing: 0.011rem;
> }
> 
>@@ -393,7 +700,8 @@ a.download {
>     line-height: 1;
>     font-weight: 300;
>     letter-spacing: 0.016rem;
>-    color: #666666;
>+    color: hsl(0, 0%, 40%);
>+    color: var(--router-text-color-light);
>     display: block;
>     margin-bottom: 1.8rem;
> }
>@@ -409,7 +717,8 @@ a.download {
>     font-weight: 400;
>     line-height: 1.52947;
>     letter-spacing: -0.021rem;
>-    color: #08c;
>+    color: hsl(200, 100%, 40%);
>+    color: var(--link-color);
>     background-position-y: 1rem;
> }
> 
>@@ -436,23 +745,23 @@ footer .menu {
>     font-size: 0;
>     display: -webkit-flex;
>     display: flex;
>-    -webkit-flex-wrap: wrap;
>     flex-wrap: wrap;
>-    -webkit-justify-content: space-between;
>     justify-content: space-between;
>     box-sizing: border-box;
>     width: 100%;
> }
> 
> .tile {
>-    background: #ffffff;
>+    background-color: hsl(120, 2%, 9%);
>+    background-color: var(--tile-background-color);
>+    box-shadow: inset hsla(0, 0%, 0%, 0.1) 0 0 0 1px;
>+    box-shadow: var(--tile-subtle-border-shadow);
>     display: block;
>     margin: 0 0 15px;
>     position: relative;
>     vertical-align: top;
>     box-sizing: border-box;
>     overflow: hidden;
>-    box-shadow: inset rgba(0, 0, 0, 0.1) 0 0 0 1px;
> }
> 
> .tile.spacer {
>@@ -496,8 +805,8 @@ footer .menu {
>     padding-bottom: 80%;
>     overflow: hidden;
>     width: 100%;
>-
>-    background-color: #636a74;
>+    background-color: hsl(215.3, 7.9%, 42.2%);
>+    background-color: var(--tile-default-background-color);
> }
> 
> .tile .background-image svg {
>@@ -505,6 +814,8 @@ footer .menu {
>     top: -12%;
>     width: 209%;
>     height: auto;
>+    color: hsl(120, 2%, 9%);
>+    color: var(--tile-background-color);
> }
> 
> .tile .background-image.has-featured-image {
>@@ -518,58 +829,71 @@ footer .menu {
> }
> 
> .tile.category-web-inspector svg {
>-    background-color: #08c;
>+    background-color: hsl(200, 100%, 40%);
>+    background-color: var(--tile-background-color-blue);
> }
> 
> .tile.category-performance svg {
>-    background-color: rgb(152, 188, 77);
>+    background-color: hsl(79.5, 45.3%, 52%);
>+    background-color: var(--tile-background-color-green);
> }
> 
> .tile.category-javascript svg {
>-    background-color: #997FA6;
>+    background-color: hsl(280, 18%, 57.5%);
>+    background-color: var(--tile-background-color-violet);
> }
> 
> .tile.category-css svg {
>-    background-color: #bf6d71;
>+    background-color: hsl(357.1, 39%, 58.8%);
>+    background-color: var(--tile-background-color-rose);
> }
> 
> .tile.category-standards svg {
>     top: -20%;
>-    background-color: #BF7600;
>+    background-color: hsl(37.1, 100%, 37.5%);
>+    background-color: var(--tile-background-color-orange);
> }
> 
> .tile.category-contributing svg {
>-    background-color: #CBAA44;
>+    background-color: hsl(45.3, 56.5%, 53.1%);
>+    background-color: var(--tile-background-color-goldenrod);
> }
> 
> .tile.category-storage svg {
>-    background-color: #997FA6;
>+    background-color: hsl(280, 18%, 57.5%);
>+    background-color: var(--tile-background-color-violet);
> }
> 
> .tile.category-layout svg {
>-    background-color: #bf6d71;
>+    background-color: hsl(357.1, 39%, 58.8%);
>+    background-color: var(--tile-background-color-rose);
> }
> 
> .tile.category-safari-technology-preview svg {
>-    background-color: #8e56b1;
>+    background-color: hsl(276.7, 36.3%, 51.4%);
>+    background-color: var(--tile-background-color-purplesafari);
> }
> 
> .tile.category-accessibility svg {
>     top: -8%;
>-    background-color: #08c;
>+    background-color: hsl(200, 100%, 40%);
>+    background-color: var(--tile-background-color-blue);
> }
> 
> .tile.category-security svg {
>-    background-color: #CBAA44;
>+    background-color: hsl(45.3, 56.5%, 53.1%);
>+    background-color: var(--tile-background-color-goldenrod);
> }
> 
> .tile.category-privacy svg {
>-    background-color: #CBAA44;
>+    background-color: hsl(45.3, 56.5%, 53.1%);
>+    background-color: var(--tile-background-color-goldenrod);
> }
> 
> .tile .background-image.loaded {
>     background: none;
>-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
>+    border-bottom: 1px solid hsla(0, 0%, 0%, 0.1);
>+    border-color: var(--tile-border-color);
>     -webkit-filter: saturate(1);
>             filter: saturate(1);
> }
>@@ -593,7 +917,8 @@ footer .menu {
> 
> .tile:not(.has-post-thumbnail) .background-image,
> .tile .background-vignette {
>-    box-shadow: inset rgba(0, 0, 0, 0.1) 0 1px 0 1px;
>+    box-shadow: inset hsla(0, 0%, 0%, 0.1) 0 1px 0 1px;
>+    box-shadow: var(--tile-subtle-image-border-shadow);
> }
> 
> .has-post-thumbnail .background-image {
>@@ -624,7 +949,6 @@ footer .menu {
>     padding: 0 24px;
>     box-sizing: border-box;
>     position: absolute;
>-    -webkit-transform: none;
>     transform: none;
>     bottom: 15px;
>     top: auto;
>@@ -635,15 +959,18 @@ footer .menu {
>     padding-bottom: 60%;
>     position: absolute;
>     top:0;
>-    background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0) , rgba(255, 255, 255, 0.95) 80%, rgba(255, 255, 255, 1));
>+    background-image: linear-gradient(-180deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.95) 80%, hsla(0, 0%, 100%, 1));
>+    background-image: var(--tile-background-vignette);
> }
> 
> .tag-window .background-image {
>-    background-color: #f2f2f2;
>+    background-color: hsl(0, 0%, 94.9%);
>+    background-color: var(--tag-window-background-color-gray);
> }
> 
> .tag-window .background-vignette {
>-    background-image: linear-gradient(-180deg, rgba(242,242,242,0) 25%,rgba(242,242,242,1) 65%);
>+    background-image: linear-gradient(-180deg, hsla(0, 0%, 94.9%, 0) 25%, hsla(0, 0%, 94.9%, 1) 65%);
>+    background-image: var(--tag-window-vignette);
> }
> 
> .featured-tile.tag-dark.tile {
>@@ -651,15 +978,18 @@ footer .menu {
> }
> 
> .featured-tile.tag-dark .background-vignette {
>-    background-image: linear-gradient(-180deg, rgba(0,0,0,0) 33%,rgba(0,0,0,0.85));
>+    background-image: linear-gradient(-180deg, hsla(0, 0%, 0%, 0) 33%, hsla(0, 0%, 0%, 0.85));
>+    background-image: var(--tile-background-vignette-dark);
> }
> 
> .featured-tile.tag-dark .tile-content {
>-    color: white;
>+    color: hsl(0, 0%, 100%);
>+    color: var(--inverse-text-color);
> }
> 
> .featured-tile.tag-dark .tile-content a {
>-    color: #6cf;
>+    color: hsl(206.7, 100%, 70%);
>+    color: var(--inverse-link-color);
> }
> 
> .tag-transparent:not(.featured-tile) .featured-image {
>@@ -712,7 +1042,6 @@ footer .menu {
>     background-position: 50% 50%;
>     margin: 0 auto 3rem;
>     padding: 40%;
>-    color: #fff;
> }
> 
> .icon-tile.download .icon {
>@@ -723,32 +1052,38 @@ footer .menu {
>     background-image: url('images/developer.svg');
> }
> 
>-.icon-tile, .icon-tile a {
>-    color: white;
>-}
>-.amber-tile {
>-    background-color: #FFCC00;
>-}
>-.gray-tile, .gray-tile a {
>-    color: #017BFD;
>+.icon-tile,
>+.icon-tile a {
>+    color: hsl(0, 0%, 100%);
>+    color: var(--inverse-text-color);
> }
> 
> .gray-tile {
>     background: linear-gradient(rgb(40, 40, 40), rgb(74, 74, 74));
>+    background-image: var(--tile-background-color-gray);
> }
>-.gray-tile, .gray-tile a {
>-    color: #fff;
>+.gray-tile {
>+    color: hsl(0, 0%, 100%);
>+    color: var(--inverse-text-color);
>+}
>+.gray-tile a {
>+    color: hsl(232.8, 100%, 37.5%);
>+    color: var(--gray-tile-text-color);
> }
> 
>+
> .amber-tile {
>-    background-color: #FFCC00;
>+    background-color: hsl(48, 100%, 50%);
>+    background-color: var(--tile-background-color-amber);
> }
> .blue-tile {
>-    background-color: #08c;
>+    background-color: hsl(200, 100%, 40%);
>+    background-color: var(--tile-background-color-blue);
> }
> 
> .twitter-tile {
>-    background-color: #34AADC;
>+    background-color: hsl(197.9, 70.6%, 53.3%);
>+    background-color: var(--tile-background-color-twitter);
> }
> 
> .twitter-tile, .twitter-tile a {
>@@ -836,11 +1171,12 @@ footer .menu {
> }
> 
> .icon.twitter-icon {
>+    color: hsl(0, 0%, 100%);
>+    color: var(--inverse-text-color);
>     position: relative;
>     margin: 3rem auto 3rem;
>     width: 1px;
>     padding: 33%;
>-    color: #ffffff;
>     opacity: 0.33;
> }
> 
>@@ -872,17 +1208,19 @@ pre {
>     width: calc(100% + 6rem);
>     overflow: auto;
>     -webkit-overflow-scrolling: touch;
>-    background: #f2f2f2;
>-    border: 1px solid #E6E6E6;
>+    background-color: hsl(0, 0%, 94.9%);
>+    background-color: var(--code-background-color);
>+    border: 1px solid hsl(0, 0%, 90.6%);
>+    border-color: var(--code-border-color);
>     border-radius: 2px;
>-
>     box-sizing: border-box;
>     padding: 3rem;
>     margin-left: -3rem;
> }
> 
> code {
>-    color: #555555;
>+    color: hsl(0, 0%, 26.7%);
>+    color: var(--code-text-color);
>     font-size: 1.6rem;
>     line-height: 2.5rem;
> }
>@@ -893,40 +1231,116 @@ pre code {
> }
> 
> code .keyword,
>-code.html .tag { color: #708; }
>+code.html .tag {
>+    color: hsl(292.5, 100%, 26.7%);
>+    color: var(--syntax-color-keyword);
>+}
> code .keyword.builtin,
>-code .keyword.literal { color: #aa0d91;}
>-code .keyword.type { color: #cb4b16; }
>-code .preprocessor { color: #996; }
>-code .comment { color: #93a1a1; float: none; display: inline; }
>-code .comment .doc { color: #839496; font-weight: bold; }
>-code .identifier { color: #1C63A8; }
>-code .string, code .char { color: #5B6E04; }
>-code .escaped { color: #AAA; }
>-code .number, code .tag { color: #586e75; }
>-code .regex, code .attribute { color: rgb(131, 108, 40); }
>-code .attribute.value { color: rgb(196, 26, 22) ;}
>-code .operator { color: #888; }
>-code .keyword.operator { color: #A90007; }
>-code .whitespace { background: #333; }
>-code .error { border-bottom: 1px solid red; }
>-code .doctype { color: rgb(192, 192, 192); }
>-code .property { color: #881391; }
>+code .keyword.literal {
>+    color: hsl(309.6, 85.8%, 35.9%);
>+    color: var(--syntax-color-builtin);
>+}
>+code .keyword.type {
>+    color: hsl(17.6, 80.4%, 44.1%);
>+    color: var(--syntax-color-keyword-type);
>+}
>+code .preprocessor {
>+    color: hsl(60, 20%, 50%);
>+    color: var(--syntax-color-preprocessor);
>+}
>+code .comment {
>+    color: hsl(180, 6.9%, 60.4%);
>+    color: var(--syntax-color-comment);
>+    float: none;
>+    display: inline;
>+}
>+code .comment .doc {
>+    color: hsl(186.3, 8.3%, 55.1%);
>+    color: var(--syntax-color-comment-doc);
>+    font-weight: bold;
>+}
>+code .identifier {
>+    color: hsl(209.6, 71.4%, 38.4%);
>+    color: var(--syntax-color-identifier);
>+}
>+code .string,
>+code .char {
>+    color: hsl(70.8, 93%, 22.4%);
>+    color: var(--syntax-color-string);
>+}
>+code .escaped {
>+    color: hsl(0, 0%, 66.7%);
>+    color: var(--syntax-color-escaped);
>+}
>+code .number,
>+code .tag {
>+    color: hsl(194.5, 14.1%, 40.2%);
>+    color: var(--syntax-color-number);
>+}
>+code .regex,
>+code .attribute {
>+    color: hsl(44.8, 53.2%, 33.5%);
>+    color: var(--syntax-color-attribute);
>+}
>+code .attribute.value {
>+    color: hsl(1.4, 79.8%, 42.7%);
>+    color: var(--syntax-color-attribute-value);
>+}
>+code .operator {
>+    color: hsl(0, 0%, 53.3%);
>+    color: var(--syntax-color-operator);
>+}
>+code .keyword.operator {
>+    color: hsl(357.5, 100%, 33.1%);
>+    color: var(--syntax-color-keyword-operator);
>+}
>+code .whitespace {
>+    background-color: hsl(0, 0%, 20%);
>+    background-color: var(--syntax-color-whitespace-background-color);
>+}
>+code .error {
>+    border-bottom: 1px solid hsl(0, 100%, 50%);
>+    border-color: var(--syntax-color-error-border);
>+}
>+code .doctype {
>+    color: hsl(0, 0%, 75.3%);
>+    color: var(--syntax-color-doctype);
>+}
>+code .property {
>+    color: hsl(295.7, 76.8%, 32.2%);
>+    color: var(--syntax-color-property);
>+}
> 
> code.xml .comment,
>-code.html .comment { color: rgb(0, 116, 0); }
>+code.html .comment {
>+    color: hsl(120, 100%, 22.7%);
>+    color: var(--syntax-color-xml-comment);
>+}
> 
>-code.xml .preprocessor .keyword { color: #996; }
>-code.xml .meta, code.xml .meta .keyword { color: #399; }
>+code.xml .preprocessor .keyword {
>+    color: hsl(60, 20%, 50%);
>+    color: var(--syntax-color-preprocessor);
>+}
>+code.xml .meta,
>+code.xml .meta .keyword {
>+    color: hsl(180, 50%, 40%);
>+    color: var(--syntax-color-xml-meta);
>+}
> 
>-code.cpp .preprocessor .identifier { color: #996; }
>+code.cpp .preprocessor .identifier {
>+    color: hsl(60, 20%, 50%);
>+    color: var(--syntax-color-preprocessor);
>+}
> 
>-code::-moz-selection, code span::-moz-selection {
>-    background: #A3CDFE;
>+pre::-moz-selection,
>+pre span::-moz-selection {
>+    background-color: hsl(212.3, 97.8%, 81.8%);
>+    background-color: var(--code-selection-background-color);
> }
> 
>-code::selection, code span::selection {
>-    background: #A3CDFE;
>+pre::selection, pre span::selection {
>+    background-color: hsl(212.3, 97.8%, 81.8%);
>+    background-color: var(--code-selection-background-color);
> }
> 
> code.syntax { white-space: normal; }
>@@ -934,10 +1348,19 @@ code.syntax .newlines { white-space: pre; display: block; }
> 
> code.css .attribute,
> code.css .identifier,
>-code.css .preprocessor { color: rgb(170, 13, 145); }
>+code.css .preprocessor {
>+    color: hsl(309.6, 85.8%, 35.9%);
>+    color: var(--syntax-color-css-property);
>+}
> 
>-code.css .keyword { color: black; }
>-code.css .number { color: rgb(28, 0, 207); }
>+code.css .keyword {
>+    color: hsl(0, 0%, 0%);
>+    color: var(--syntax-color-css-selector);
>+}
>+code.css .number {
>+    color: hsl(248.1, 100%, 40.6%);
>+    color: var(--syntax-color-css-number);
>+}
> 
> /** Post Typography **/
> 
>@@ -959,19 +1382,17 @@ article::after {
>     display: table;
> }
> 
>-article h1 {
>+article h1,
>+article h1 a {
>+    margin: 0 auto 3rem;
>     font-size: 5.6rem;
>-    line-height: 1.10746;
>     font-weight: 500;
>     letter-spacing: 0.004rem;
>+    line-height: 1.10746;
>     text-align: center;
>-    color: #037DFD;
>-    margin: 0 auto 3rem;
>-}
>-
>-article h1 a {
>-    color: #444444;
>     text-decoration: none;
>+    color: hsl(0, 0%, 26.7%);
>+    color: var(--text-color-heading);
> }
> 
> article h2 {
>@@ -1032,7 +1453,8 @@ article .byline p {
>     font-size: 1.5rem;
>     line-height: 3rem;
>     margin-bottom: 0;
>-    color: #8E8E93;
>+    color: hsl(240, 2.3%, 56.7%);
>+    color: var(--text-color-coolgray);
> }
> 
> article .byline .date {
>@@ -1053,12 +1475,15 @@ article table {
> }
> 
> article thead, article tfoot {
>-    border-top: 1px solid #bbbbbb;
>-    border-bottom: 1px solid #e0e0e0;
>+    border-top: 1px solid hsl(0, 0%, 73.3%);
>+    border-top-color: var(--table-top-rule-color);
>+    border-bottom: 1px solid hsl(0, 0%, 87.8%);
>+    border-bottom-color: var(--table-rule-color);
> }
> 
> article tr {
>-    border-top: 1px solid #e0e0e0;
>+    border-top: 1px solid hsl(0, 0%, 87.8%);
>+    border-color: var(--table-rule-color);;
> }
> 
> article tr:first-child {
>@@ -1112,7 +1537,8 @@ article blockquote {
>     font-size: 3rem;
>     line-height: 4.2rem;
>     text-align: center;
>-    color: #555555;
>+    color: hsl(240, 2.3%, 56.7%);
>+    color: var(--text-color-coolgray);
> }
> article blockquote > * {
>     max-width: 1140px;
>@@ -1130,7 +1556,8 @@ article blockquote:first-child {
> 
> .post .bodycopy > p:last-child:after {
>     content: " \220E"; /* Tombstone */
>-    color: #666666;
>+    color: hsl(0, 0%, 33.3%);
>+    color: var(--text-color-medium);
> }
> 
> article div.note {
>@@ -1138,8 +1565,11 @@ article div.note {
>     margin-right: -3rem;
>     padding: 3rem;
>     background-color: hsl(50, 100%, 94%);
>+    background-color: var(--note-background-color);
>     border: 1px solid hsl(40, 100%, 90%);
>+    border-color: var(--note-border-color);
>     color: hsl(30, 90%, 35%);
>+    color: var(--note-text-color);
>     border-radius: 3px;
>     margin-bottom: 3rem;
>     box-sizing: normal;
>@@ -1148,9 +1578,12 @@ article div.note {
> article .foreword {
>     padding: 1.6rem 2.2rem 1.6rem;
>     line-height: 2.6rem;
>-    background-color: #f0f0f0;
>-    border: 1px solid #e6e6e6;
>-    color: #8E8E93;
>+    background-color: hsl(0, 0%, 94.1%);
>+    background-color: var(--foreword-background-color);
>+    border: 1px solid hsl(0, 0%, 90.2%);
>+    border-color: var(--foreword-border-color);
>+    color: hsl(240, 2.3%, 56.7%);
>+    color: var(--foreword-text-color);
>     border-radius: 3px;
>     margin-bottom: 3rem;
>     box-sizing: normal;
>@@ -1252,31 +1685,38 @@ article .pull-right {
> }
> 
> article .cliptop {
>-    border-top: 1px solid #dddddd;
>+    border-top: 1px solid hsl(0, 0%, 86.7%);
>+    border-color: var(--horizontal-rule-color);
> }
> 
> article .clipbottom {
>-    border-bottom: 1px solid #dddddd;
>+    border-bottom: 1px solid hsl(0, 0%, 86.7%);
>+    border-color: var(--horizontal-rule-color);
> }
> 
> article .clipright {
>-    border-right: 1px solid #dddddd;
>+    border-right: 1px solid hsl(0, 0%, 86.7%);
>+    border-color: var(--horizontal-rule-color);
> }
> 
> article .clipleft {
>-    border-left: 1px solid #dddddd;
>+    border-left: 1px solid hsl(0, 0%, 86.7%);
>+    border-color: var(--horizontal-rule-color);
> }
> 
> article .mattewhite {
>-    background: white;
>-    border-top: 1px solid #e7e7e7;
>-    border-bottom: 1px solid #e7e7e7;
>+    background-color: hsl(0, 0%, 100%);
>+    background-color: var(--figure-mattewhite-background-color);
>+    border-top: 1px solid hsl(0, 0%, 90.6%);
>+    border-bottom: 1px solid hsl(0, 0%, 90.6%);
>+    border-color: var(--article-border-color);
>     padding-top: 3rem;
>     padding-bottom: 3rem;
> }
> 
> article .mattewhite:not(.widescreen) {
>-    border: 1px solid #e7e7e7;
>+    border: 1px solid hsl(0, 0%, 90.6%);
>+    border-color: var(--article-border-color);
>     padding: 3rem;
>     margin-left: -3rem;
>     margin-right: -3rem;
>@@ -1322,6 +1762,20 @@ figure.widescreen video {
>     max-width: 66%;
> }
> 
>+figure.table {
>+    -webkit-overflow-scrolling: touch;
>+    width: calc(100% + 6rem);
>+    overflow: auto;
>+    border: 1px solid hsl(0, 0%, 90.6%);
>+    border-color: var(--code-border-color);
>+    background-color: hsl(0, 0%, 94.9%);
>+    background-color: var(--code-background-color);
>+    border-radius: 3px;
>+    box-sizing: border-box;
>+    padding: 3rem;
>+    margin-left: -3rem;
>+}
>+
> article video.alignleft,
> article video.alignright {
>     max-width: 50%;
>@@ -1342,7 +1796,8 @@ article figcaption {
>     box-sizing: border-box;
>     font-size: 1.3rem;
>     font-weight: 400;
>-    color: #666666;
>+    color: hsl(0, 0%, 33.3%);
>+    color: var(--text-color-medium);
>     position: relative;
> }
> 
>@@ -1351,7 +1806,8 @@ article figcaption::before {
>     width: 15%;
>     height: 100%;
>     bottom: 2.5rem;
>-    border-top: 1px solid #cccccc;
>+    border-top: 1px solid hsl(0, 0%, 80%);
>+    border-color: var(--figure-caption-rule-color);
>     content: '';
>     opacity: 1;
>     display: inline-block;
>@@ -1462,8 +1918,8 @@ article,
>     z-index: 5;
>     font-size: 1.4rem;
>     line-height: 1.20849;
>-    border-top: 1px solid #d6d6d6;
>-
>+    border-top: 1px solid hsl(0, 0%, 83.9%);
>+    border-color: var(--toc-border-color);
> }
> 
> article .table-of-contents label {
>@@ -1511,7 +1967,8 @@ article .table-of-contents label {
>     display: inline-block;
>     background: url('images/webkit.svg') no-repeat;
>     padding: 1rem 0 1rem 5.5rem;
>-    color: #ffffff;
>+    color: hsl(0, 0%, 100%);
>+    color: var(--inverse-text-color);
> }
> 
> .hero .logo {
>@@ -1520,20 +1977,14 @@ article .table-of-contents label {
> 
> /** Status Page **/
> 
>-.feature-header:after {
>+.feature-header:after,
>+.property-header:after {
>     display: inline-block;
>     content: "";
>     background: url('images/menu-down.svg') no-repeat 50%;
>     background-size: 2rem;
> }
> 
>-.feature.opened .feature-header:after {
>-    -webkit-transform: rotateX(-180deg);
>-    -moz-transform: rotateX(-180deg);
>-    transform: rotateX(-180deg);
>-    perspective: 600;
>-}
>-
> /** Navigation **/
> 
> .label-toggle {
>@@ -1587,17 +2038,20 @@ footer nav a {
>     letter-spacing: 0;
>     cursor: pointer;
>     font-weight: 500;
>-    color: #333333;
>+    color: hsl(0, 0%, 20%);
>+    color: var(--text-color);
> }
> 
> header nav a,
> footer nav a {
>-    color: #ffffff;
>+    color: hsl(0, 0%, 100%);
>+    color: var(--inverse-text-color);
> }
> 
> header nav a:hover,
> footer nav a:hover {
>-    color: #08c;
>+    color: hsl(200, 100%, 40%);
>+    color: var(--link-color);
>     text-decoration: none;
> }
> 
>@@ -1635,9 +2089,12 @@ header .menu-item { /* add bottom dimension to main menu items */
>     top: 7rem;
>     transform: translateY(-1rem);
> 
>-    background: rgba(255,255,255,0.95);
>-    box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.10);
>-    border: 1px solid #e7e7e7;
>+    background-color: hsla(0, 0%, 100%, 0.95);
>+    background-color: var(--submenu-background-color);
>+    box-shadow: 0px 3px 20px 0px hsla(0, 0%, 0%, 0.1);
>+    box-shadow: var(--submenu-shadow);
>+    border: 1px solid hsl(0, 0%, 90.6%);
>+    border-color: var(--submenu-border-color);
>     border-radius: 5px;
> 
>     transition: opacity 0.6s;
>@@ -1657,13 +2114,15 @@ header .menu-item { /* add bottom dimension to main menu items */
> }
> 
> .sub-menu-layer:after {
>-    border-bottom-color: rgba(255,255,255,0.9);
>+    border-bottom-color: hsla(0, 0%, 100%, 0.95);
>+    border-bottom-color: var(--submenu-background-color);
>     border-width: 10px;
>     margin-left: -10px;
> }
> 
> .sub-menu-layer:before {
>-    border-bottom-color: #e7e7e7;
>+    border-bottom-color: hsla(0, 0%, 100%, 0.95);
>+    border-bottom-color: var(--submenu-background-color);
>     border-width: 11px;
>     margin-left: -11px;
> }
>@@ -1779,15 +2238,18 @@ header .menu-item { /* add bottom dimension to main menu items */
>         text-align: left;
>         width: 100vw;
>         overflow: hidden;
>-        box-shadow: 0px 5px 5px rgba(0,0,0,0.10);
>+        box-shadow: 0px 5px 5px hsla(0, 0%, 0%, 0.1);
>+        box-shadow: var(--header-menu-shadow);
> 
>         backdrop-filter: blur(20px);
>         -webkit-backdrop-filter: blur(10px);
>-        background-color: rgba(255,255,255,0.8);
>+        background-color: hsla(0, 0%, 100%, 0.8);
>+        background-color: var(--header-menu-background-color);
>     }
> 
>     header nav a {
>-        color: #333333;
>+        color: hsl(0, 0, 100%);
>+        color: var(--text-color);
>     }
> 
>     header .menu-toggle:checked ~ ul {
>@@ -1810,7 +2272,8 @@ header .menu-item { /* add bottom dimension to main menu items */
> 
>     header .menu > .menu-item > .sub-menu {
>         box-shadow: none;
>-        border-bottom: 1px solid #e7e7e7;
>+        border-bottom: 1px solid hsl(0, 0%, 90.6%);
>+        border-color: var(--submenu-border-color);
>     }
> 
>     header .menu > .menu-item-has-children {
>@@ -1939,7 +2402,8 @@ header .menu-item { /* add bottom dimension to main menu items */
>         left: 50%;
>         transform: translate(-50%);
>         margin: 3rem 0;
>-        border: 1px solid #cccccc;
>+        border: 1px solid hsl(0, 0%, 80%);
>+        border-color: var(--article-scrollable-border-color);
>         border-left: none;
>         border-right: none;
>     }
>@@ -1975,9 +2439,19 @@ header .menu-item { /* add bottom dimension to main menu items */
>     }
> 
>     .table-of-contents {
>-        height: 9rem;
>+        /* Collapse */
>+        height: 7rem;
>         overflow: hidden;
>-        margin-right: -10%;
>+        border-bottom-width: 1px;
>+        border-bottom-style: solid;
>+
>+        /* one-column */
>+        width: 100vw;
>+        max-width: 100%;
>+        position: relative;
>+        float: none;
>+        padding-bottom: 2.5rem;
>+        margin: 0 0 3rem 0;
>     }
> 
>     .menu-toggle:checked ~ .table-of-contents {
>@@ -1992,12 +2466,10 @@ header .menu-item { /* add bottom dimension to main menu items */
>         display: inline-block;
>         content: "";
>         background: url('images/menu-down.svg') no-repeat 50%;
>-        background-size: 2rem;
>+        background-size: 1rem;
>         width: 2rem;
>         height: 2rem;
>         position: absolute;
>-        right: 3rem;
>-        top: 3.5rem;
>         transition: transform 0.3s ease-out;
>         perspective: 600;
>     }
>@@ -2032,15 +2504,6 @@ header .menu-item { /* add bottom dimension to main menu items */
> }
> 
> @media only screen and (max-width: 415px) {
>-    .table-of-contents {
>-        /* Go one-column */
>-        width: 100vw;
>-        left: 50%;
>-        position: relative;
>-        transform: translate(-50%);
>-        float: none;
>-        margin: 0 0 3rem 0;
>-    }
> 
>     .nextrouter-copy {
>         font-size: 1.7rem;
>@@ -2121,12 +2584,10 @@ header .menu-item { /* add bottom dimension to main menu items */
>         display: inline-block;
>         content: "";
>         background: url('images/menu-down.svg') no-repeat 50%;
>-        background-size: 2rem;
>+        background-size: 1rem;
>         width: 2rem;
>         height: 2rem;
>         position: absolute;
>-        right: 3rem;
>-        top: 3.5rem;
>         transition: transform 0.3s ease-out;
>         perspective: 600;
>     }
>@@ -2147,6 +2608,30 @@ header .menu-item { /* add bottom dimension to main menu items */
>     }
> }
> 
>+@media(prefers-color-scheme:dark) {
>+    article .invert-brightness,
>+    figure img {
>+        filter: url(#invertLightness);
>+    }
>+
>+    .preserve-color, video {
>+        filter: brightness(0.7);
>+        transition: filter 0.3s ease-out;
>+    }
>+
>+    .preserve-color:hover,
>+    figure:hover .preserve-color,
>+    figure:hover video,
>+    video:hover {
>+        filter: brightness(1);
>+    }
>+
>+    .nextrouter .link,
>+    a.readmore {
>+        background-image: url('images/chevron-dark.svg');
>+    }
>+}
>+
> #template {
>     background-image: url('images/template.svg');
> }
>@@ -2154,3 +2639,11 @@ header .menu-item { /* add bottom dimension to main menu items */
> #compass {
>     background-image: url('images/compass.svg');
> }
>+
>+.search-input {
>+    background-image: url('images/search.svg');
>+}
>+
>+.filters-toggle-button {
>+    background-image: url('images/filter.svg');
>+}
>\ No newline at end of file
>diff --git a/Websites/webkit.org/wp-content/themes/webkit/team.php b/Websites/webkit.org/wp-content/themes/webkit/team.php
>index a7e9417629e20afbf94aaeacc6a5d274ef23d743..0ef151b1e033b79d50f9424723556ee42f3dd681 100644
>--- a/Websites/webkit.org/wp-content/themes/webkit/team.php
>+++ b/Websites/webkit.org/wp-content/themes/webkit/team.php
>@@ -5,6 +5,19 @@
> ?>
> <?php get_header(); ?>
> <style>
>+:root {
>+    --contributor-shadow: 0px 0px 10px 0px hsla(0, 0%, 0%, 0.1);
>+    --expertise-shadow: 0px 10px 10px 0px hsla(0, 0%, 0%, 0.1);
>+    --hover-text-color: hsl(0, 0%, 0%);
>+}
>+
>+@media only screen and (prefers-color-scheme:dark) {
>+    :root {
>+        --contributor-shadow: 0px 0px 10px 0px hsla(0, 0%, 100%, 0.1);
>+        --expertise-shadow: 0px 5px 10px 0px hsla(0, 0%, 100%, 0.1);
>+        --hover-text-color: hsl(0, 0%, 100%);
>+    }
>+}
> article ul {
>     list-style: none;
>     padding-left: 0;
>@@ -20,10 +33,13 @@ article ul > li {
>     padding: 1rem;
>     margin-bottom: 1rem;
>     border: 1px solid transparent;
>+    color: hsl(0, 0%, 33.3%);
>+    color: var(--text-color-medium);
> }
>+
> li span,
> li em {
>-    font-size: 1.6rem;
>+    font-size: 1.3rem;
> }
> 
> li em {
>@@ -31,27 +47,37 @@ li em {
>     line-height: 2rem;
> }
> 
>-article ul > li li {
>+.expertise {
>+    background-color: hsl(0, 0%, 100%);
>+    background-color: var(--button-background-color);
>+    box-shadow: 0px 10px 10px 0px hsla(0, 0%, 0%, 0.1);
>+    box-shadow: var(--expertise-shadow);
>+
>     position: absolute;
>     font-size: 1.6rem;
>     line-height: 2rem;
>-    width: 100%;
>+    margin-left: -1px;
>+    width: calc(100.3% + 2px);
>     box-sizing: border-box;
>     display: none;
>-    z-index: 1;
>-
>+    z-index: 100;
>+    color: hsl(0, 0%, 0%);
>+    color: var(--hover-text-color);
> }
> 
> .bodycopy > ul > li:hover {
>-    background: #ffffff;
>-    border: 1px solid #e7e7e7;
>-    box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.10);
>+    background-color: hsl(0, 0%, 100%);
>+    background-color: var(--button-background-color);
>+    box-shadow: 0px 0px 10px 0px hsla(0, 0%, 0%, 0.1);
>+    box-shadow: var(--contributor-shadow);
>+    filter: none;
>+    color: hsl(0, 0%, 0%);
>+    color: var(--hover-text-color);
> }
> 
>-article ul > li:hover li {
>-    background: #ffffff;
>+.bodycopy ul li:hover .expertise {
>+    filter: none;
>     display: block;
>-    box-shadow: none;
> }
> 
> @media only screen and (max-width: 675px) {

Actions: View | Formatted Diff | Diff

Attachments on bug 192930: 357813