Added a dark mode color scheme.
authorjond@apple.com <jond@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 20 Dec 2018 18:14:52 +0000 (18:14 +0000)
committerjond@apple.com <jond@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 20 Dec 2018 18:14:52 +0000 (18:14 +0000)
https://bugs.webkit.org/show_bug.cgi?id=192930

Reviewed by Timothy Hatcher.

* .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.

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

17 files changed:
Websites/webkit.org/.htaccess
Websites/webkit.org/ChangeLog
Websites/webkit.org/wp-content/themes/webkit/build-archives.php
Websites/webkit.org/wp-content/themes/webkit/css-status.php
Websites/webkit.org/wp-content/themes/webkit/front-header.php
Websites/webkit.org/wp-content/themes/webkit/functions.php
Websites/webkit.org/wp-content/themes/webkit/header.php
Websites/webkit.org/wp-content/themes/webkit/images/chevron-dark.svg [new file with mode: 0644]
Websites/webkit.org/wp-content/themes/webkit/images/chevron.svg
Websites/webkit.org/wp-content/themes/webkit/images/filter.svg [new file with mode: 0644]
Websites/webkit.org/wp-content/themes/webkit/images/icons.svg
Websites/webkit.org/wp-content/themes/webkit/images/invert-lightness.svg [new file with mode: 0644]
Websites/webkit.org/wp-content/themes/webkit/images/search.svg [new file with mode: 0644]
Websites/webkit.org/wp-content/themes/webkit/sitemap.php
Websites/webkit.org/wp-content/themes/webkit/status.php
Websites/webkit.org/wp-content/themes/webkit/style.css
Websites/webkit.org/wp-content/themes/webkit/team.php

index c9b965c..ae1613a 100644 (file)
@@ -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
index 8e2ce99..325643e 100644 (file)
@@ -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 Timothy Hatcher.
+
+        * .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
index b0e014a..2338de3 100644 (file)
@@ -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;
     }
 
index 7f8b4f9..1328df1 100644 (file)
@@ -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
index 8824a71..9bf16a2 100644 (file)
@@ -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;
             -webkit-transform: translateY(-400px) rotate(360deg);
         }
     }
-    
+
     .hero .content {
         position: relative;
         max-width: 800px;
         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;
             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(); ?>
         </div>
     </div>
     <?php endif; ?>
-        
-<div class="page-layer">
\ No newline at end of file
+
+<div class="page-layer">
index e79aa50..b10e7f9 100644 (file)
@@ -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();
index b9cc263..4a2d750 100644 (file)
@@ -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 (file)
index 0000000..ffa0e05
--- /dev/null
@@ -0,0 +1,5 @@
+<!-- Copyright © 2017 Apple Inc. All rights reserved. -->
+<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
index 3665dca..6ebd61b 100644 (file)
@@ -1,4 +1,5 @@
 <!-- Copyright © 2017 Apple Inc. All rights reserved. -->
 <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 (file)
index 0000000..58a7e2b
--- /dev/null
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2018 Apple Inc. All rights reserved. -->
+<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>
index 38f86fa..957134b 100644 (file)
@@ -2,7 +2,7 @@
 <!-- Copyright © 2015 Apple Inc. All rights reserved. -->
 <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 (file)
index 0000000..4150798
--- /dev/null
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2018 Apple Inc. All rights reserved. -->
+<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 (file)
index 0000000..3bc03c0
--- /dev/null
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2018 Apple Inc. All rights reserved. -->
+<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>
index c2699ce..240ee19 100644 (file)
@@ -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;
         }
 
index 62a87aa..bf7c9cf 100644 (file)
@@ -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)
index 2712df9..6641e17 100644 (file)
@@ -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
index a7e9417..0ef151b 100644 (file)
@@ -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) {