Improved the SVG icons to use SVG symbols
authorjond@apple.com <jond@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 2 Nov 2018 21:43:42 +0000 (21:43 +0000)
committerjond@apple.com <jond@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 2 Nov 2018 21:43:42 +0000 (21:43 +0000)
https://bugs.webkit.org/show_bug.cgi?id=191205

Reviewed by Timothy Hatcher.

This change makes it far easier to add new SVG icons to the
icons.svg sprite and provides better positioning control
over the icons within the blog post tile frame.

* wp-content/themes/webkit/front-page.php:
* wp-content/themes/webkit/functions.php:
* wp-content/themes/webkit/header.php:
* wp-content/themes/webkit/images/icons.svg:
* wp-content/themes/webkit/index.php:
* wp-content/themes/webkit/loop.php:
* wp-content/themes/webkit/style.css:
(@supports ( -webkit-backdrop-filter: blur(10px) )):
(footer):
(#icons):
(.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):
(header .menu-item-has-children .label-toggle::after):
(@media only screen and (max-width: 920px)):
(.main-menu.label-toggle):
(header .menu):
(@media only screen and (max-width: 690px)):
(@media only screen and (max-width: 415px)):
(@media only screen and (max-height: 415px)):
(.tile.category-web-inspector .background-image): Deleted.
(.tile.category-performance .background-image): Deleted.
(.tile.category-javascript .background-image): Deleted.
(.tile.category-css .background-image): Deleted.
(.tile.category-standards .background-image): Deleted.
(.tile.category-contributing .background-image): Deleted.
(.tile.category-storage .background-image): Deleted.
(.tile.category-layout .background-image): Deleted.
(.tile.category-safari-technology-preview .background-image): Deleted.
(.tile.category-accessibility .background-image): Deleted.
(.tile.tag-console .background-image,): Deleted.
(.tile.tag-console .background-image): Deleted.
(.tile.tag-debugger .background-image): Deleted.
(.tile.tag-shortcuts .background-image): Deleted.
(.tile.tag-timeline .background-image): Deleted.
* wp-content/themes/webkit/widgets/post.php:

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

Websites/webkit.org/ChangeLog
Websites/webkit.org/wp-content/themes/webkit/front-page.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/icons.svg
Websites/webkit.org/wp-content/themes/webkit/index.php
Websites/webkit.org/wp-content/themes/webkit/loop.php
Websites/webkit.org/wp-content/themes/webkit/style.css
Websites/webkit.org/wp-content/themes/webkit/widgets/post.php

index 8c89f85..2885a01 100644 (file)
@@ -1,3 +1,62 @@
+2018-11-02  Jon Davis  <jond@apple.com>
+
+        Improved the SVG icons to use SVG symbols
+        https://bugs.webkit.org/show_bug.cgi?id=191205
+
+        Reviewed by Timothy Hatcher.
+        
+        This change makes it far easier to add new SVG icons to the 
+        icons.svg sprite and provides better positioning control
+        over the icons within the blog post tile frame.
+
+        * wp-content/themes/webkit/front-page.php:
+        * wp-content/themes/webkit/functions.php:
+        * wp-content/themes/webkit/header.php:
+        * wp-content/themes/webkit/images/icons.svg:
+        * wp-content/themes/webkit/index.php:
+        * wp-content/themes/webkit/loop.php:
+        * wp-content/themes/webkit/style.css:
+        (@supports ( -webkit-backdrop-filter: blur(10px) )):
+        (footer):
+        (#icons):
+        (.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):
+        (header .menu-item-has-children .label-toggle::after):
+        (@media only screen and (max-width: 920px)):
+        (.main-menu.label-toggle):
+        (header .menu):
+        (@media only screen and (max-width: 690px)):
+        (@media only screen and (max-width: 415px)):
+        (@media only screen and (max-height: 415px)):
+        (.tile.category-web-inspector .background-image): Deleted.
+        (.tile.category-performance .background-image): Deleted.
+        (.tile.category-javascript .background-image): Deleted.
+        (.tile.category-css .background-image): Deleted.
+        (.tile.category-standards .background-image): Deleted.
+        (.tile.category-contributing .background-image): Deleted.
+        (.tile.category-storage .background-image): Deleted.
+        (.tile.category-layout .background-image): Deleted.
+        (.tile.category-safari-technology-preview .background-image): Deleted.
+        (.tile.category-accessibility .background-image): Deleted.
+        (.tile.tag-console .background-image,): Deleted.
+        (.tile.tag-console .background-image): Deleted.
+        (.tile.tag-debugger .background-image): Deleted.
+        (.tile.tag-shortcuts .background-image): Deleted.
+        (.tile.tag-timeline .background-image): Deleted.
+        * wp-content/themes/webkit/widgets/post.php:
+
 2018-11-01  Jon Davis  <jond@apple.com>
 
         Prevent homepage animation for users that prefer reduced motion
index e905f4d..c992ebe 100644 (file)
@@ -1,16 +1,18 @@
 <?php get_header(); ?>
-
 <div id="posts" class="tiles">
-<?php
+    <?php 
+
+include_post_icons();
 Front_Page_Posts::object(); // Initialize Front Page Posts query
 
 if ( ! dynamic_sidebar('Home Tiles') ):
     $Query = Front_Page_Posts::WP_Query();
-    while ( $Query->have_posts() ): 
-        $Query->the_post(); 
-        get_template_part('loop'); 
+    while ( $Query->have_posts() ):
+        $Query->the_post();
+        get_template_part('loop');
     endwhile;
-endif; 
+endif;
+
 ?>
 </div>
 
index 804713a..e79aa50 100644 (file)
@@ -234,7 +234,29 @@ function is_super_cache_enabled() {
     return (isset($super_cache_enabled) && true === $super_cache_enabled);
 }
 
-function tag_post_image_luminance( $post_id ) {
+function include_post_icons() {
+    echo WebKit_Post_Icons::parse_icons();
+}
+
+function get_post_icon() {
+
+    $categories = get_the_category();
+    if (isset($categories[0]))
+        $slug = $categories[0]->slug;
+
+    if ('web-inspector' == $slug) {
+        $tags = get_the_tags();
+        if (isset($tags[0]))
+            $slug = $tags[0]->slug;
+    }
+
+    if (!WebKit_Post_Icons::has_icon($slug))
+        return 'default';
+
+    return $slug;
+}
+
+function tag_post_image_luminance($post_id) {
     $threshold = 128;
     $tags = array();
 
@@ -428,6 +450,31 @@ class Responsive_Toggle_Walker_Nav_Menu extends Walker_Nav_Menu {
 
 }
 
+class WebKit_Post_Icons {
+
+    private static $registry = array();
+
+    public static function parse_icons() {
+        if (!empty(self::$registry))
+            return '';
+
+        $svg_string = file_get_contents(get_stylesheet_directory() . '/images/icons.svg');
+        $svg = new SimpleXMLElement( $svg_string );
+        $svg->registerXPathNamespace('svg', 'http://www.w3.org/2000/svg');
+
+        $matches = $svg->xpath('//svg:symbol/@id');
+        foreach ($matches as $symbol)
+            self::$registry[(string)$symbol['id']] = true;
+
+        return $svg_string;
+    }
+
+    public static function has_icon($id) {
+        return isset(self::$registry[$id]);
+    }
+
+}
+
 class Front_Page_Posts {
 
     private static $object;     // Singleton instance
index cf98c13..b9cc263 100644 (file)
@@ -5,8 +5,8 @@
     <meta name="robots" content="noodp">
 
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, viewport-fit=cover">
-    
-    <title><?php if ( is_front_page() ) echo "WebKit"; 
+
+    <title><?php if ( is_front_page() ) echo "WebKit";
         else { wp_title(''); echo ' | WebKit'; } ?></title>
 
     <meta name="application-name" content="WebKit">
@@ -20,7 +20,6 @@
     <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
 
     <link rel="shortcut icon" sizes="32x32" type="image/x-icon" href="/favicon.ico">
-    <link rel="mask-icon" href="tabicon.svg" color="#0088cc">
 
     <?php wp_head(); ?>
 </head>
@@ -38,7 +37,7 @@
         </div>
     </header>
 
-<?php 
+<?php
 if ( is_front_page() )
     include('front-header.php');
 ?>
index f0fe6a4..38f86fa 100644 (file)
@@ -1,14 +1,13 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Copyright © 2015 Apple Inc. All rights reserved. -->
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="48"
-    height="528">
+<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; }
     </style>
-    
+
     <defs>
-        
-        <symbol id="compass">
+
+        <symbol id="default">
             <path d="M 24 45.7600002 L 24 45.7600002 C 36.0177159 45.7600002 45.7599999 36.0177161 45.7599999 24.0000001 C 45.7599999 11.9822838 36.0177159 2.24000001 24 2.24000001 C 11.9822838 2.24000001 2.23999999 11.9822838 2.23999999 24.0000001 C 2.23999999 36.0177161 11.9822838 45.7600002 24 45.7600002 L 24 45.7600002 L 24 45.7600002 L 24 45.7600002 Z M 24 48 L 24 48 C 10.745166 48 8.52651283e-14 37.254834 8.52651283e-14 24.0000001 C 8.52651283e-14 10.745166 10.745166 0 24 0 C 37.254834 0 48 10.745166 48 24.0000001 C 48 37.254834 37.254834 48 24 48 L 24 48 L 24 48 L 24 48 Z" fill="currentColor"/>
             <path d="M 19.2141787 30.7527044 C 20.0566026 31.3582067 21.0164459 31.8087988 22.052466 32.0629879 L 24.0150243 38.3621108 L 25.9644157 32.0671275 C 28.9532689 31.3397602 31.304042 28.97474 32.0270276 25.9677724 L 38.2840894 24.0065666 L 32.38318 22.1457238 L 30.1049072 24.2136546 C 29.9995478 27.5073249 27.2907334 30.1510903 24.0134391 30.1359337 C 23.1661809 30.1431339 22.3840431 29.959524 21.6645278 29.6641888 L 19.2141787 30.7527044 L 19.2141787 30.7527044 L 19.2141787 30.7527044 Z M 28.8019182 17.2563866 C 27.4120183 16.2548466 25.9438825 15.9331447 25.9438825 15.9331447 L 23.9849759 9.63788916 L 22.0355845 15.9328727 C 19.0467312 16.6602398 16.695958 19.0252601 15.9729726 22.0322277 L 9.71591065 23.9934336 C 9.71591065 23.9934336 13.7573684 25.2679011 15.7780972 25.9051349 L 17.8923556 23.9486543 C 17.9116726 20.5783691 20.6200789 17.8803136 23.9912031 17.8674375 C 24.8266313 17.8130168 26.1806153 18.2277657 26.3381938 18.3358993 C 26.3381937 18.3358993 28.8019182 17.2563866 28.8019182 17.2563866 L 28.8019182 17.2563866 L 28.8019182 17.2563866 Z" fill="currentColor"/>
             <path d="M 22.4528571 21.5612813 L 10.1267612 32.8610634 L 25.4820204 26.3285511 L 37.8732388 15.1389366 L 22.4528571 21.5612813 L 22.4528571 21.5612813 L 22.4528571 21.5612813 Z" fill="currentColor"/>
             <path d="M 25.4586474 22.9633529 L 36.6273818 12.9367924 L 19.3784717 20.0882179 L 22.54035 25.0378408 L 11.3720064 35.0646845 L 28.6179627 27.9103051 L 25.4586474 22.9633529 L 25.4586474 22.9633529 Z" fill="currentColor"/>
         </symbol>
 
-        <symbol id="inspector">
+        <symbol id="web-inspector">
             <path d="M 28.5 25.5 L 48 25.5 L 48 23 L 28.5 23 L 28.5 25.5" fill="currentColor"/>
             <path d="M 23 28.5 L 23 48 L 25.5 48 L 25.5 28.5 L 23 28.5" fill="currentColor"/>
             <path d="M 0 25.5 L 19.5 25.5 L 19.5 23 L 5.99520433e-15 23 L 0 25.5" fill="currentColor"/>
             <path d="M 23 0 L 23 19.5 L 25.5 19.5 L 25.5 0 L 23 0" fill="currentColor"/>
             <circle stroke="currentColor" fill="none" stroke-width="2.5" cx="24" cy="24" r="18"/>
         </symbol>
-        
-        <symbol id="script">
-            <path d="M 11.4057939 18.0146224 C 12.1528885 17.323319 13.14598 16.88131 14.2562501 16.88131 C 16.6587038 16.88131 18.5125003 18.9853621 18.5125003 21.1375602 C 18.5125003 21.1375602 20.178953 19.4758651 21.0121793 18.6450175 C 23.6138782 16.0507463 28.817276 10.8622038 28.817276 10.8622038 C 28.817276 10.8622038 39.1931445 22.2383022 39.5748423 22.7381568 C 40.0895548 23.4122017 41.2154452 24.6437363 41.2154452 26.8207002 C 41.2154452 27.9043457 40.7691081 28.9601004 40.0240604 29.7480538 C 39.2725506 30.5428415 23.5041804 46.2228621 24.256517 45.5146369 C 25.0871144 44.7325638 25.6062505 43.6260296 25.6062505 42.4188109 C 25.6062505 40.105895 24.4995839 38.9998346 23.9516194 38.3444074 C 23.9377433 38.32781 23.4369464 37.7753288 22.6469581 36.9043367 L 17.0937502 42.4188109 C 17.0937502 44.7694729 18.9993383 46.675061 21.3500004 46.675061 C 22.4737422 46.675061 23.4957691 46.2309411 24.256517 45.5146369 L 24.256517 45.5146368 C 24.2567055 45.5144594 24.256895 45.5142809 24.2570855 45.5141014 C 25.0873513 44.7320588 25.6062505 43.6257541 25.6062505 42.4188109 C 25.6062505 40.105895 24.4995839 38.9998346 23.9516194 38.3444074 C 23.4036549 37.6889802 12.6902909 25.9456715 11.9591809 25.1002579 C 11.2280709 24.2548443 10 23.3242225 10 21.1375602 C 10 19.9614421 10.5362909 18.819193 11.4057939 18.0146224 C 10.5362926 18.8191912 26.254167 3.0662162 27.2247918 2.26492532 C 27.9645636 1.65421303 28.8917931 1.2750595 29.8625007 1.2750595 C 32.1068344 1.2750595 34.1634331 3.37253043 34.1634331 5.53130965 L 18.5125003 21.1375602 C 18.5125003 18.9853621 16.6587038 16.88131 14.2562501 16.88131 C 13.1459801 16.88131 12.1528886 17.323319 11.405794 18.0146222 Z" stroke="currentColor" stroke-width="2.5" fill="none"/>            
+
+        <symbol id="javascript">
+            <path d="M 11.4057939 18.0146224 C 12.1528885 17.323319 13.14598 16.88131 14.2562501 16.88131 C 16.6587038 16.88131 18.5125003 18.9853621 18.5125003 21.1375602 C 18.5125003 21.1375602 20.178953 19.4758651 21.0121793 18.6450175 C 23.6138782 16.0507463 28.817276 10.8622038 28.817276 10.8622038 C 28.817276 10.8622038 39.1931445 22.2383022 39.5748423 22.7381568 C 40.0895548 23.4122017 41.2154452 24.6437363 41.2154452 26.8207002 C 41.2154452 27.9043457 40.7691081 28.9601004 40.0240604 29.7480538 C 39.2725506 30.5428415 23.5041804 46.2228621 24.256517 45.5146369 C 25.0871144 44.7325638 25.6062505 43.6260296 25.6062505 42.4188109 C 25.6062505 40.105895 24.4995839 38.9998346 23.9516194 38.3444074 C 23.9377433 38.32781 23.4369464 37.7753288 22.6469581 36.9043367 L 17.0937502 42.4188109 C 17.0937502 44.7694729 18.9993383 46.675061 21.3500004 46.675061 C 22.4737422 46.675061 23.4957691 46.2309411 24.256517 45.5146369 L 24.256517 45.5146368 C 24.2567055 45.5144594 24.256895 45.5142809 24.2570855 45.5141014 C 25.0873513 44.7320588 25.6062505 43.6257541 25.6062505 42.4188109 C 25.6062505 40.105895 24.4995839 38.9998346 23.9516194 38.3444074 C 23.4036549 37.6889802 12.6902909 25.9456715 11.9591809 25.1002579 C 11.2280709 24.2548443 10 23.3242225 10 21.1375602 C 10 19.9614421 10.5362909 18.819193 11.4057939 18.0146224 C 10.5362926 18.8191912 26.254167 3.0662162 27.2247918 2.26492532 C 27.9645636 1.65421303 28.8917931 1.2750595 29.8625007 1.2750595 C 32.1068344 1.2750595 34.1634331 3.37253043 34.1634331 5.53130965 L 18.5125003 21.1375602 C 18.5125003 18.9853621 16.6587038 16.88131 14.2562501 16.88131 C 13.1459801 16.88131 12.1528886 17.323319 11.405794 18.0146222 Z" stroke="currentColor" stroke-width="2.5" fill="none"/>
         </symbol>
 
-        <symbol id="style">
+        <symbol id="css">
             <path d="M 34.3509426 18.7507162 C 32.564454 17.6916021 31.096954 15.1643395 31.0728076 13.0728197 L 30.9858202 5.538126 C 30.9618449 3.46142442 32.3778969 2.62894951 34.1771329 3.69562079 L 40.6588754 7.538301 C 42.445364 8.597415 43.912864 11.1246777 43.9370104 13.2161974 L 44.0239979 20.7508912 C 44.0479731 22.8275927 42.6319212 23.6600677 40.8326851 22.5933964 L 34.3509426 18.7507162 L 34.3509426 18.7507162 L 34.3509426 18.7507162 Z" stroke="currentColor" stroke-width="2.5" fill="none"/>
             <path d="M 22.3883659 25.2906441 C 20.6046264 24.23316 19.1392369 21.6969806 19.1152755 19.6214854 L 18.9412495 4.54767084 C 18.9173111 2.47416506 20.3422003 1.64950223 22.1276511 2.70800103 L 35.0949445 10.3956191 C 36.8786839 11.4531034 38.3440734 13.9892828 38.3680349 16.064778 L 38.5420608 31.1385925 C 38.5659993 33.2120983 37.14111 34.0367611 35.3556591 32.9782623 L 22.3883659 25.2906441 L 22.3883659 25.2906441 L 22.3883659 25.2906441 Z" stroke="currentColor" stroke-width="2.5" fill="none"/>
-            <path d="M 8.57225363 34.8880373 C 6.19393433 33.4780584 4.24008165 30.0964858 4.2081331 27.3291589 L 3.97609854 7.2307395 C 3.94418061 4.46606514 5.84403281 3.36651469 8.224634 4.77784643 L 25.5143585 15.0280039 C 27.8926778 16.4379829 29.8465304 19.8195554 29.8784789 22.5868824 L 30.1105135 42.6853018 C 30.1424314 45.4499761 28.2425793 46.5495265 25.861978 45.1381948 L 8.57225363 34.8880373 L 8.57225363 34.8880373 L 8.57225363 34.8880373 Z" stroke="currentColor" stroke-width="2.5" fill="none"/>       
+            <path d="M 8.57225363 34.8880373 C 6.19393433 33.4780584 4.24008165 30.0964858 4.2081331 27.3291589 L 3.97609854 7.2307395 C 3.94418061 4.46606514 5.84403281 3.36651469 8.224634 4.77784643 L 25.5143585 15.0280039 C 27.8926778 16.4379829 29.8465304 19.8195554 29.8784789 22.5868824 L 30.1105135 42.6853018 C 30.1424314 45.4499761 28.2425793 46.5495265 25.861978 45.1381948 L 8.57225363 34.8880373 L 8.57225363 34.8880373 L 8.57225363 34.8880373 Z" stroke="currentColor" stroke-width="2.5" fill="none"/>
         </symbol>
-        
+
         <symbol id="standards">
             <path d="M 8.20156221 41.7446204 L 4.60455725 1.39999998 L 44.1294427 1.39999998 L 40.5286241 41.7383005 L 24.34281 46.2255399 L 8.20156221 41.7446204 Z" stroke="currentColor" stroke-width="2.5" fill="none"/>
             <path d="M 42.0710239 24.0177617 C 39.1538386 16.9070258 32.1617573 11.8990479 24 11.8990479 C 16.3635634 11.8990479 9.75107907 16.2831086 6.54212676 22.6716502" stroke="currentColor" stroke-width="2.5" fill="none"/>
             <path d="M 7.57792629 35.5492537 C 10.9596878 37.443268 17.049483 38.7070228 24 38.7070228 C 31.5250917 38.7070228 38.041274 37.2256916 41.204187 35.0669761" stroke="currentColor" stroke-width="2.5" fill="none"/>
             <path d="M 24.25 12.9990234 L 24.25 45" stroke="currentColor" stroke-width="2.5" fill="none"/>
         </symbol>
-        
-        
-        <symbol id="contribute">
+
+        <symbol id="contributing">
             <path d="M 24 45.76 L 24 45.76 C 36.0177161 45.76 45.76 36.0177162 45.76 24 C 45.76 11.9822838 36.0177161 2.24 24 2.24 C 11.9822838 2.24 2.24 11.9822838 2.24 24 C 2.24 36.0177162 11.9822838 45.76 24 45.76 L 24 45.76 L 24 45.76 L 24 45.76 Z M 24 48 L 24 48 C 10.745166 48 -1.77635684e-14 37.254834 -1.77635684e-14 24 C -1.77635684e-14 10.745166 10.745166 2.84217094e-14 24 2.84217094e-14 C 37.254834 2.84217094e-14 48 10.745166 48 24 C 48 37.254834 37.254834 48 24 48 L 24 48 L 24 48 L 24 48 Z" fill="currentColor"/>
             <path d="M 29.4897098 23.3065925 L 26.2706917 20.9393745 L 26.6482584 24.3031351 L 28.4802897 29.4247528 L 29.4897098 33.8205977 L 30.4989581 29.4247528 L 32.3309894 24.3031351 L 32.7087278 20.9393745 L 29.4897098 23.3065925 Z M 18.8503641 23.3065925 L 15.631346 20.9393745 L 16.0090845 24.3031351 L 17.8411157 29.4247528 L 18.8503641 33.8205977 L 19.8597841 29.4247528 L 21.6916437 24.3031351 L 22.0693821 20.9393745 L 18.8503641 23.3065925 Z M 37.2876041 24.3031351 L 39.1196354 29.4247528 L 40.3400738 34.740219 L 38.3454433 35 L 36.6368638 29.562799 C 36.6368638 29.562799 34.8092967 25.6310573 34.8092967 25.4866582 C 34.8092967 25.6310573 32.9819013 29.562799 32.9819013 29.562799 L 31.2733218 35 L 29.4897098 34.7676909 L 27.7060977 35 L 25.9975182 29.562799 C 25.9975182 29.562799 24.1701228 25.6310573 24.1701228 25.4866582 C 24.1701228 25.6310573 22.3425557 29.562799 22.3425557 29.562799 L 20.6339762 35 L 18.8503641 34.7676909 L 17.066752 35 L 15.3581725 29.562799 C 15.3581725 29.562799 13.5307771 25.6310573 13.5307771 25.4866582 C 13.5307771 25.6310573 11.7033817 29.562799 11.7033817 29.562799 L 9.9946305 35 L 8 34.740219 L 9.22043846 29.4247528 L 11.0524697 24.3031351 L 11.4302081 20.9393745 L 8.21101841 23.3065925 L 8.21101841 21.228001 L 11.6719607 18.326455 L 12.3810787 18.2218901 L 12.3810787 17.9233051 C 11.4619725 17.51054 10.825655 16.6183906 10.825655 15.5839024 C 10.825655 14.156738 12.0368217 13 13.5307771 13 C 15.0247325 13 16.2358992 14.156738 16.2358992 15.5839024 C 16.2358992 16.6183906 15.5995817 17.51054 14.6804755 17.9233051 L 14.6804755 18.2218901 L 15.3895935 18.326455 L 18.8503641 21.228001 L 22.3113064 18.326455 L 23.0204244 18.2218901 L 23.0204244 17.9233051 C 22.1013182 17.51054 21.4650007 16.6183906 21.4650007 15.5839024 C 21.4650007 14.156738 22.6761674 13 24.1701228 13 C 25.6640782 13 26.8750732 14.156738 26.8750732 15.5839024 C 26.8750732 16.6183906 26.2387556 17.51054 25.3198211 17.9233051 L 25.3198211 18.2218901 L 26.0289391 18.326455 L 29.4897098 21.228001 L 32.9504804 18.326455 L 33.6595984 18.2218901 L 33.6595984 17.9233051 C 32.7406639 17.51054 32.1043463 16.6183906 32.1043463 15.5839024 C 32.1043463 14.156738 33.3153413 13 34.8092967 13 C 36.3034238 13 37.5142471 14.156738 37.5144188 15.5839024 C 37.5144188 16.6183906 36.8781013 17.51054 35.9591668 17.9233051 L 35.9591668 18.2218901 L 36.6682848 18.326455 L 40.1290554 21.228001 L 40.1290554 23.3065925 L 36.9100374 20.9393745 L 37.2876041 24.3031351 Z" fill="currentColor"/>
         </symbol>
-        
+
         <symbol id="storage">
                 <path d="M 39.9236499 31.5126111 C 41.869091 32.6498521 43 34.0625041 43 35.6923077 C 43 40.1632127 34.4896382 43 24 43 C 13.5103618 43 5 40.1632127 5 35.6923077 C 5 34.0625041 6.130909 32.6498521 8.07635005 31.5126111 C 9.14708175 31.9858647 10.3798534 32.4104194 11.7445378 32.7755154 C 9.22593316 33.7562269 7.92307692 34.9214488 7.92307692 35.6923077 C 7.92307692 36.4947878 9.3350136 37.7246485 12.0606138 38.728817 C 15.168606 39.8738668 19.433505 40.5384615 24 40.5384615 C 28.566495 40.5384615 32.831394 39.8738668 35.9393862 38.728817 C 38.6649864 37.7246485 40.0769231 36.4947878 40.0769231 35.6923077 C 40.0769231 34.9214488 38.7740668 33.7562269 36.2554622 32.7755154 C 37.6201466 32.4104194 38.8529182 31.9858647 39.9236499 31.5126111 Z M 39.9236499 19.8203034 C 41.869091 20.9575444 43 22.3701964 43 24 C 43 28.470905 34.4896382 31.3076923 24 31.3076923 C 13.5103618 31.3076923 5 28.470905 5 24 C 5 22.3701964 6.130909 20.9575444 8.07635005 19.8203034 C 9.06881359 20.2589632 10.2004933 20.6557834 11.4473978 21.0021956 C 9.12353139 22.0250817 7.92307692 23.2072017 7.92307692 24 C 7.92307692 24.8598001 9.3350136 26.177508 12.0606138 27.2534028 C 15.168606 28.4802419 19.433505 29.1923077 24 29.1923077 C 28.566495 29.1923077 32.831394 28.4802419 35.9393862 27.2534028 C 38.6649864 26.177508 40.0769231 24.8598001 40.0769231 24 C 40.0769231 23.2072017 38.8764686 22.0250817 36.5526022 21.0021956 C 37.7995067 20.6557834 38.9311864 20.2589632 39.9236499 19.8203034 Z M 43 12.3076923 C 43 7.83678727 34.4896382 5 24 5 C 13.5103618 5 5 7.83678727 5 12.3076923 C 5 16.7785973 13.5103618 19.6153846 24 19.6153846 C 34.4896382 19.6153846 43 16.7785973 43 12.3076923 Z M 12.0606138 15.3442016 C 9.3350136 14.3400331 7.92307692 13.1101724 7.92307692 12.3076923 C 7.92307692 11.5052122 9.3350136 10.2753515 12.0606138 9.27118298 C 15.168606 8.12613322 19.433505 7.46153846 24 7.46153846 C 28.566495 7.46153846 32.831394 8.12613322 35.9393862 9.27118298 C 38.6649864 10.2753515 40.0769231 11.5052122 40.0769231 12.3076923 C 40.0769231 13.1101724 38.6649864 14.3400331 35.9393862 15.3442016 C 32.831394 16.4892514 28.566495 17.1538462 24 17.1538462 C 19.433505 17.1538462 15.168606 16.4892514 12.0606138 15.3442016 Z" fill="currentColor"/>
         </symbol>
-        
+
         <symbol id="layout">
             <path d="M 44.5086986 24.2230775 L 24.1090229 24.2230775 L 24.1090229 4.50363839 L 24.1090229 4.50363839" stroke="currentColor" stroke-width="2.5" fill="none"/>
             <rect id="Rectangle-1-Copy" x="3.70934714" y="4.50363839" width="40.7993514" height="39.4388783" stroke="currentColor" stroke-width="2.5" fill="none"/>
         </symbol>
-        
+
         <symbol id="accessibility">
             <path d="M 24 45.76 L 24 45.76 C 36.0177161 45.76 45.76 36.0177162 45.76 24 C 45.76 11.9822838 36.0177161 2.24 24 2.24 C 11.9822838 2.24 2.24 11.9822838 2.24 24 C 2.24 36.0177162 11.9822838 45.76 24 45.76 L 24 45.76 L 24 45.76 L 24 45.76 Z M 24 48 L 24 48 C 10.745166 48 -1.77635684e-14 37.254834 -1.77635684e-14 24 C -1.77635684e-14 10.745166 10.745166 2.84217094e-14 24 2.84217094e-14 C 37.254834 2.84217094e-14 48 10.745166 48 24 C 48 37.254834 37.254834 48 24 48 L 24 48 L 24 48 L 24 48 Z" fill="currentColor"/>
             <path d="M 21.2941031 10.9732032C 21.2941031 9.47814808 22.5062404 8.2657032 24.0017464 8.2657032L 24.0017464 8.2657032 24.0056947 8.2657032 24.009643 8.2657032C 25.5054527 8.2657032 26.7180456 9.47814808 26.7180456 10.9732032L 26.7180456 10.9732032C 26.7180456 12.4699287 25.5054527 13.6817661 24.009643 13.6817661L 24.009643 13.6817661C 24.0087319 13.6817661 24.0072133 13.6817661 24.0056947 13.680855L 24.0056947 13.680855C 24.0044798 13.6817661 24.003265 13.6817661 24.0017464 13.6817661L 24.0017464 13.6817661C 22.5062404 13.6817661 21.2941031 12.4699287 21.2941031 10.9732032L 21.2941031 10.9732032zM 36.0001139 14.8094735C 36.5893262 14.8094735 37.0670742 15.2869192 37.0670742 15.8764371L 37.0670742 15.8764371C 37.0670742 16.3657279 36.7352626 16.7740776 36.2854567 16.8992097L 36.2854567 16.8992097C 36.2778637 16.9011839 29.0669982 17.7329174 29.0669982 17.7329174L 29.0669982 17.7329174C 29.0200738 17.7459773 28.9600896 17.7640486 28.8905382 17.7881942L 28.8905382 17.7881942C 28.6130921 17.8856879 28.1933543 18.082042 27.9395981 18.4301036L 27.9395981 18.4301036C 27.8733877 18.5288121 27.8196297 18.6340507 27.7781722 18.7465784L 27.7781722 18.7465784C 27.7692125 18.7754317 27.7581268 18.8026145 27.7509895 18.8326827L 27.7509895 18.8326827 27.7502302 18.8322271C 27.7013316 18.9912238 27.6732377 19.16161 27.6618483 19.3430819L 27.6618483 19.3430819 27.6618483 23.5734271 27.6633669 23.574642C 27.6633669 23.574642 27.6949535 25.3620263 28.019324 27.0936782L 28.019324 27.0936782C 28.0701968 27.3685436 30.0944752 37.1009042 30.0944752 37.1009042L 30.0944752 37.1009042 30.1055609 37.1526882 30.1063202 37.1554217 30.1058646 37.1554217C 30.1192282 37.2267956 30.1283397 37.3002955 30.1283397 37.3759214L 30.1283397 37.3759214C 30.1283397 38.0488101 29.582559 38.5945925 28.9098243 38.5945925L 28.9098243 38.5945925C 28.3578174 38.5945925 27.8973814 38.2255744 27.7470411 37.7227681L 27.7470411 37.7227681 27.7426372 37.7244386 24.9494974 28.2516056 24.9490419 28.2552502C 24.8633935 27.9793218 24.6456279 27.7639853 24.3690929 27.682285L 24.3690929 27.682285C 24.3476808 27.6756032 24.3209537 27.6684658 24.2873929 27.6613284L 24.2873929 27.6613284C 24.2763072 27.6590505 24.2656771 27.6578356 24.2550469 27.6558615L 24.2550469 27.6558615C 24.171069 27.641283 24.0600602 27.6341456 23.9274874 27.6519131L 23.9274874 27.6519131C 23.8465466 27.6598098 23.7695542 27.6783366 23.696662 27.7071899L 23.696662 27.7071899C 23.6860318 27.7106827 23.6757054 27.7128087 23.664316 27.7170608L 23.664316 27.7170608 23.6682643 27.7194905C 23.4406279 27.8200214 23.2634087 28.0140976 23.188846 28.2552502L 23.188846 28.2552502 23.1885422 28.2516056 20.3950988 37.7244386 20.3908467 37.7227681C 20.2405064 38.2255744 19.7800704 38.5945925 19.2283672 38.5945925L 19.2283672 38.5945925C 18.5553288 38.5945925 18.0100037 38.0488101 18.0100037 37.3759214L 18.0100037 37.3759214C 18.0100037 37.3002955 18.0186597 37.2267956 18.0320232 37.1554217L 18.0320232 37.1554217 18.0317195 37.1554217 18.0324788 37.1526882 18.0435645 37.1009042C 18.0435645 37.1009042 20.0672355 27.3685436 20.1190194 27.0936782L 20.1190194 27.0936782C 20.4429343 25.3620263 20.4745209 23.574642 20.4745209 23.574642L 20.4745209 23.574642 20.4760395 23.5734271 20.4760395 19.3430819C 20.4646501 19.16161 20.4367081 18.9912238 20.387354 18.8322271L 20.387354 18.8322271 20.3865947 18.8326827C 20.3799129 18.8026145 20.3688272 18.7754317 20.3597156 18.7465784L 20.3597156 18.7465784C 20.3182582 18.6340507 20.264652 18.5288121 20.1982897 18.4301036L 20.1982897 18.4301036C 19.9445336 18.082042 19.5252513 17.8856879 19.2470459 17.7881942L 19.2470459 17.7881942C 19.1771908 17.7640486 19.1175103 17.7459773 19.0713452 17.7329174L 19.0713452 17.7329174C 19.0713452 17.7329174 11.8600241 16.9011839 11.852583 16.8992097L 11.852583 16.8992097C 11.4032327 16.7740776 11.0712693 16.3657279 11.0712693 15.8764371L 11.0712693 15.8764371C 11.0712693 15.2869192 11.5487135 14.8094735 12.1377739 14.8094735L 12.1377739 14.8094735C 12.1875836 14.8094735 12.2348117 14.8173702 12.2826473 14.824052L 12.2826473 14.824052 12.2841659 14.8176739 35.853722 14.8176739 35.8553924 14.824052C 35.9030761 14.8173702 35.9504561 14.8094735 36.0001139 14.8094735L 36.0001139 14.8094735z" fill="currentColor"/>
         </symbol>
-        
-    </defs>
 
-    <use y="0" xlink:href="#compass"/>
-    <use y="48" xlink:href="#inspector"/>
-    <use y="96" xlink:href="#performance"/>
-    <use y="144" xlink:href="#script"/>
-    <use y="192" xlink:href="#style"/>
-    <use y="240" xlink:href="#standards"/>
-    <use y="288" xlink:href="#contribute"/>
-    <use y="336" xlink:href="#storage"/>
-    <use y="384" xlink:href="#layout"/>
-    <use y="432" xlink:href="#accessibility"/>
-        
+        <symbol id="safari-technology-preview">
+            <path fill="currentColor" d="M 24 45.7600002 L 24 45.7600002 C 36.0177159 45.7600002 45.7599999 36.0177161 45.7599999 24.0000001 C 45.7599999 11.9822838 36.0177159 2.24000001 24 2.24000001 C 11.9822838 2.24000001 2.23999999 11.9822838 2.23999999 24.0000001 C 2.23999999 36.0177161 11.9822838 45.7600002 24 45.7600002 L 24 45.7600002 L 24 45.7600002 L 24 45.7600002 Z M 24 48 L 24 48 C 10.745166 48 8.52651283e-14 37.254834 8.52651283e-14 24.0000001 C 8.52651283e-14 10.745166 10.745166 0 24 0 C 37.254834 0 48 10.745166 48 24.0000001 C 48 37.254834 37.254834 48 24 48 L 24 48 L 24 48 L 24 48 Z"/>
+            <polygon fill="currentColor" points="22.453 21.561 10.127 32.861 25.482 26.329 37.873 15.139 22.453 21.561"/>
+        </symbol>
+
+        <symbol id="privacy">
+             <path fill="currentColor" d="M 15.1685425 22.4941973 L 15.1685425 12.388782 C 15.1685425 9.69393273 11.9195136 10.0438255 11.9195136 12.388782 C 11.9195136 14.7337385 11.4121047 32.9981208 12.5127398 36.791912 C 15.7058774 47.7983735 27.8522124 45.6566123 30.9533121 42.2509347 C 34.0544119 38.8452571 35.8653963 32.8762332 37.0588085 29.8327181 C 38.2522207 26.7892031 41.6333465 22.9334922 41.6333465 22.5465483 C 41.6333465 22.1596044 39.7727879 21.0338966 37.3194354 22.4340812 C 34.8660829 23.8342658 33.9888369 27.6603443 32.7864178 27.6603443 C 32.0030918 27.6603443 31.5285623 26.0635537 31.3628292 22.8699725 C 31.3874544 14.5599594 31.399767 9.3992148 31.399767 7.3877388 C 31.399767 4.37052481 27.5358136 4.795092 27.5358136 7.3877388 L 27.5358136 22.2770282 C 27.5358136 23.2870868 26.0021868 23.2870868 26.0021868 22.2770282 C 26.0021868 21.2669696 26.0103761 8.09132176 26.0103761 5.18199504 C 26.0103761 2.27266832 22.1464227 2.27266832 22.1464227 5.18199504 C 22.1464227 8.09132176 22.1382334 20.9905839 22.1382334 22.1596044 C 22.1382334 23.3286249 20.5935527 23.3286249 20.5935527 22.1596044 L 20.5935527 6.60705859 C 20.5935527 4.22138407 16.8868104 3.78049185 16.8868104 6.65940958 L 16.8868104 22.5465483 C 16.8868104 24.3345929 15.1685425 24.3345929 15.1685425 22.4941973 Z M 14.3868104 6.65940958 C 14.3868104 3.91189632 16.3888941 2.0323497 18.8710271 2.16243845 C 19.4064988 2.19050256 19.9212719 2.31118201 20.3960158 2.51120572 C 21.1877723 1.27053788 22.5338737 0.5 24.0783994 0.5 C 25.8329397 0.5 27.3314259 1.49432954 28.0521144 3.04262047 C 28.4563953 2.89966794 28.8859215 2.81223849 29.3306484 2.78780542 C 31.8648524 2.64857757 33.899767 4.5808987 33.899767 7.3877388 C 33.899767 9.34637369 33.8881312 14.2782337 33.864856 22.187356 C 34.5202025 21.3829967 35.2264688 20.7500823 36.0802432 20.2628137 C 39.436804 18.3471473 44.1333465 19.2889515 44.1333465 22.5465483 C 44.1333465 23.128154 44.0064029 23.4570378 43.7758938 23.8828557 C 43.696642 24.0292571 43.6066485 24.1738915 43.4964616 24.3384554 C 43.3490867 24.5585595 43.1729356 24.8042179 42.8700195 25.2170834 C 42.806542 25.3036015 42.553006 25.6483262 42.4922733 25.7310538 C 42.3365877 25.9431221 42.2077478 26.1195718 42.0809068 26.2947759 C 41.7586267 26.7399377 41.4753868 27.1414123 41.2083271 27.5344165 C 40.7821735 28.161543 40.415498 28.7410189 40.1080823 29.2802128 C 39.7959116 29.8277471 39.552971 30.3202329 39.3862735 30.7453553 C 39.1818924 31.266581 38.2603789 33.7727457 38.3029435 33.6585515 C 37.7697308 35.0890777 37.3098255 36.243653 36.8074885 37.3755123 C 35.6023636 40.090884 34.3213906 42.2652752 32.8018031 43.9341106 C 30.548363 46.4088748 25.8352037 47.8817882 21.4979867 47.4114012 C 16.0964787 46.825588 11.8453759 43.4641638 10.1117407 37.4884774 C 9.55240337 35.5604914 9.3355005 31.2870616 9.30591571 24.8221077 C 9.29392339 22.2015107 9.31516557 19.4953509 9.3614022 16.3674639 C 9.35539556 16.7738105 9.4195136 12.7514823 9.4195136 12.388782 C 9.4195136 9.97655668 11.1818898 8.12242436 13.4096084 8.00247119 C 13.7471824 7.98429426 14.0741531 8.00621829 14.3868104 8.06463687 L 14.3868104 6.65940958 Z"/>
+        </symbol>
+
+        <symbol id="security">
+            <path fill="currentColor" d="M 15.8033934 20.1726723 L 12.729666 20.1726723 C 11.5979508 20.1726723 10.6805143 21.0901087 10.6805143 22.2218239 L 10.6805143 40.6641887 C 10.6805143 41.7959039 11.5979508 42.7133403 12.729666 42.7133403 L 35.270334 42.7133403 C 36.4020492 42.7133403 37.3194857 41.7959039 37.3194857 40.6641887 L 37.3194857 22.2218239 C 37.3194857 21.0901087 36.4020492 20.1726723 35.270334 20.1726723 L 32.1966066 20.1726723 L 32.1966066 13.4832662 C 32.1966066 8.95640542 28.5268608 5.28665966 24 5.28665966 C 19.4731392 5.28665966 15.8033934 8.95640542 15.8033934 13.4832662 L 15.8033934 20.1726723 Z M 13.3033934 17.6726723 L 13.3033934 13.4832662 C 13.3033934 7.57569355 18.0924273 2.78665966 24 2.78665966 C 29.9075727 2.78665966 34.6966066 7.57569355 34.6966066 13.4832662 L 34.6966066 17.6726723 L 35.270334 17.6726723 C 37.7827611 17.6726723 39.8194857 19.7093968 39.8194857 22.2218239 L 39.8194857 40.6641887 C 39.8194857 43.1766158 37.7827611 45.2133403 35.270334 45.2133403 L 12.729666 45.2133403 C 10.2172389 45.2133403 8.18051432 43.1766158 8.18051432 40.6641887 L 8.18051432 22.2218239 C 8.18051432 19.7093968 10.2172389 17.6726723 12.729666 17.6726723 L 13.3033934 17.6726723 Z"/>
+            <path fill="currentColor" d="M 21.21522 29.8126384C 21.21522 28.1150656 22.5913746 26.7389109 24.2889475 26.7389109 25.9865203 26.7389109 27.3626749 28.1150656 27.3626749 29.8126384 27.3626749 30.9503515 26.7445504 31.9436939 25.8258112 32.4751558L 25.8258112 35.9600933C 25.8258112 36.8088797 25.1377339 37.496957 24.2889475 37.496957 23.440161 37.496957 22.7520837 36.8088797 22.7520837 35.9600933L 22.7520837 32.4751558C 21.8333445 31.9436939 21.21522 30.9503515 21.21522 29.8126384zM 26.6228791 12.8501838C 26.6228791 11.8299912 25.5165562 10.8603871 24 10.8603871 22.4834438 10.8603871 21.3771209 11.8299912 21.3771209 12.8501838L 21.3771209 17.6726723 26.6228791 17.6726723 26.6228791 12.8501838zM 29.1228791 20.1726723L 18.8771209 20.1726723 18.8771209 12.8501838C 18.8771209 10.3705376 21.170712 8.36038712 24 8.36038712 26.829288 8.36038712 29.1228791 10.3705376 29.1228791 12.8501838L 29.1228791 20.1726723z"/>
+        </symbol>
+
+        <symbol id="console">
+            <rect x="5.03735352" y="5.03735352" width="37.925293" height="37.925293" rx="4" stroke="currentColor" stroke-width="2.5" fill="none"/>
+            <path d="M 13.164202 13.164202 L 24 24 L 13.164202 34.835798" stroke="currentColor" stroke-width="2.5" fill="none"/>
+            <path d="M 24 14 L 35 14" stroke="currentColor" stroke-width="2.5" fill="none"/>
+            <path d="M 29.5 24 L 34.9999999 24" stroke="currentColor" stroke-width="2.5" fill="none"/>
+            <path d="M 24 34 L 35 34" stroke="currentColor" stroke-width="2.5" fill="none"/>
+        </symbol>
+
+        <symbol id="debugger">
+            <path d="M 24.1320008 44.328125 C 32.1512251 44.328125 38.6520901 35.226914 38.6520901 24 C 38.6520901 12.773086 32.1512251 3.671875 24.1320008 3.671875 C 16.1127765 3.671875 9.61191153 12.773086 9.61191153 24 C 9.61191153 35.226914 16.1127765 44.328125 24.1320008 44.328125 Z" stroke="currentColor" stroke-width="2.5" fill="none"/>
+            <path d="M 13.7861328 10.5 L 34.4768075 10.5 L 13.7861328 10.5 Z" stroke="currentColor" stroke-width="2.5" fill="none"/>
+            <path d="M 24.25 11 L 24.25 44.328125" stroke="currentColor" stroke-width="2.5" fill="none"/>
+            <path d="M 34.1640625 37.0680804 L 39.9720982 42.8761161" stroke="currentColor" stroke-width="2.5" fill="none"/>
+            <path d="M 38.5200893 22.25 L 44.328125 22.25" stroke="currentColor" stroke-width="2.5" fill="none"/>
+            <path d="M 9.47991071 22.25 L 3.671875 22.25" stroke="currentColor" stroke-width="2.5" fill="none"/>
+            <path d="M 13.8359375 10.9319196 L 8.02790179 5.12388393" stroke="currentColor" stroke-width="2.5" fill="none"/>
+            <path d="M 34.1640625 10.9319196 L 39.9720982 5.12388393" stroke="currentColor" stroke-width="2.5" fill="none"/>
+            <path d="M 13.972 37.068 L 8.164 42.876" stroke="currentColor" stroke-width="2.5" fill="none"/>
+        </symbol>
+
+        <symbol id="shortcuts">
+            <path d="M 5 35.8242187 C 5 39.7527757 8.1847243 42.9375 12.1132812 42.9375 C 16.0418382 42.9375 19.2265625 39.7527757 19.2265625 35.8242187 L 19.2265625 11.9442883 C 19.2265625 8.1847243 16.0418382 5 12.1132812 5 C 8.1847243 5 5 8.1847243 5 12.1132812 C 5 16.0418382 8.1847243 19.2265625 12.1132812 19.2265625 L 35.8928161 19.2265625 C 39.7527757 19.2265625 42.9375 16.0418382 42.9375 12.1132812 C 42.9375 8.1847243 39.7527757 5 35.8242188 5 C 31.8956618 5 28.7109375 8.1847243 28.7109375 12.1132812 L 28.7109375 35.8190088 C 28.7109375 39.7527757 31.8956618 42.9375 35.8242187 42.9375 C 39.7527757 42.9375 42.9375 39.7527757 42.9375 35.8242188 C 42.9375 31.8956618 39.7527757 28.7109375 35.8242187 28.7109375 L 12.1184912 28.7109375 C 8.1847243 28.7109375 5 31.8956618 5 35.8242187 Z" stroke="currentColor" stroke-width="2.5" fill="none" />
+        </symbol>
+
+        <symbol id="timeline">
+            <path d="M 24.625 7.57617187 L 24.625 24.5833333 L 15 24.5833333" stroke="currentColor" stroke-width="2.5" fill="none"/>
+            <path d="M 24 45.76 L 24 45.76 C 36.0177161 45.76 45.76 36.0177162 45.76 24 C 45.76 11.9822838 36.0177161 2.24 24 2.24 C 11.9822838 2.24 2.24 11.9822838 2.24 24 C 2.24 36.0177162 11.9822838 45.76 24 45.76 L 24 45.76 L 24 45.76 L 24 45.76 Z M 24 48 L 24 48 C 10.745166 48 0 37.254834 0 24 C 0 10.745166 10.745166 0 24 0 C 37.254834 0 48 10.745166 48 24 C 48 37.254834 37.254834 48 24 48 L 24 48 L 24 48 L 24 48 Z" fill="currentColor"/>
+        </symbol>
+
+    </defs>
 </svg>
\ No newline at end of file
index 9034dab..44931e9 100644 (file)
@@ -1,35 +1,35 @@
 <?php get_header(); ?>
 
-
-               <?php if ( have_posts() ) : ?>
+        <?php if ( have_posts() ) 
+            include_post_icons(); ?>
             <div id="posts" class="tiles">
-                       <?php 
-            
+            <?php
+
             $count = 1;
             while ( have_posts() ) : the_post();
-                               get_template_part( 'loop', get_post_format() );
+                get_template_part( 'loop', get_post_format() );
                 $offset = $count++ % 3;
-                       endwhile; 
-            
+            endwhile;
+
             if ( $offset > 0 ) {
                 for ($offset; $offset < 3; $offset++)
                     echo "<div class=\"tile third-tile spacer\"></div>";
             }
-            
+
             ?>
-        </div>
+            </div>
 
-        <?php 
+        <?php
             the_posts_pagination( array(
                 'prev_text'          => __( 'Previous page' ),
                 'next_text'          => __( 'Next page' ),
                 'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page' ) . ' </span>',
             ) );
 
-               else :
-                       get_template_part( 'loop', 'none' );
+        else :
+            get_template_part( 'loop', 'none' );
 
-               endif;
-               ?>
+        endif;
+        ?>
 
 <?php get_footer(); ?>
\ No newline at end of file
index f7326ed..a2ee740 100644 (file)
@@ -1,13 +1,11 @@
 <?php
-    
+
 $background_image = '';
 if ( $post_thumbnail_id = get_post_thumbnail_id() ) {
     $post_thumbnail_url = wp_get_attachment_url( $post_thumbnail_id );
-    // $background_image = " style=\"background-image: url('" . $post_thumbnail_url . "')\"";
     $background_image = " data-url=\"" . $post_thumbnail_url . "\"";
 }
 
-
 $classes = array('tile', 'third-tile');
 $classes[] = 'third-tile';
 ?>
@@ -15,11 +13,14 @@ $classes[] = 'third-tile';
         <a class="tile-link" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
         <div class="background-image">
             <div class="featured-image"<?php echo $background_image; ?>></div>
+            <svg viewbox="0 0 100 100">
+                <use xlink:href="#<?php echo esc_attr(get_post_icon()); ?>" />
+            </svg>
             <?php if ( $featured ): ?><div class="background-vignette"></div><?php endif; ?>
         </div>
         <div class="tile-content">
             <h1><?php the_title(); ?></h1>
             <div class="summary"><?php the_excerpt(); ?></div>
             <p><a href="<?php the_permalink(); ?>" class="readmore">Read more</a></p>
-        </div>        
+        </div>
     </div>
\ No newline at end of file
index e12183b..2712df9 100644 (file)
@@ -250,13 +250,13 @@ header {
 }
 
 @supports ( -webkit-backdrop-filter: blur(10px) ) {
-    
+
     .home header {
         background-color: transparent;
         backdrop-filter: blur(0px);
         -webkit-backdrop-filter: blur(0px);
     }
-    
+
     .sub-menu-layer {
         backdrop-filter: blur(10px);
         -webkit-backdrop-filter: blur(10px);
@@ -424,7 +424,7 @@ footer {
     clear: both;
     width: 100%;
     padding-bottom: 1.65rem;
-    box-sizing: border-box;    
+    box-sizing: border-box;
 }
 
 footer .menu {
@@ -485,18 +485,26 @@ footer .menu {
     padding: 0;
 }
 
+#icons {
+    display: none;
+}
+
 .tile .background-image {
     position: relative;
     margin-top: -1px;
     height: 0;
     padding-bottom: 80%;
     overflow: hidden;
+    width: 100%;
 
-    background-size: cover;
-    background-position: 50% 1%;
     background-color: #636a74;
-    background-repeat: no-repeat;
-    background-image: url('images/icons.svg');
+}
+
+.tile .background-image svg {
+    position: relative;
+    top: -12%;
+    width: 209%;
+    height: auto;
 }
 
 .tile .background-image.has-featured-image {
@@ -509,76 +517,54 @@ footer .menu {
     display: none;
 }
 
-.tile.category-web-inspector .background-image {
+.tile.category-web-inspector svg {
     background-color: #08c;
-    background-position: 50% 10.75%; /* Must use this notation for Firefox */
 }
 
-.tile.category-performance .background-image {
+.tile.category-performance svg {
     background-color: rgb(152, 188, 77);
-    background-position: 50% 20.5%;
 }
 
-.tile.category-javascript .background-image {
+.tile.category-javascript svg {
     background-color: #997FA6;
-    background-position: 50% 30.5%;
 }
 
-.tile.category-css .background-image {
+.tile.category-css svg {
     background-color: #bf6d71;
-    background-position: 50% 40.4%;
 }
 
-.tile.category-standards .background-image {
+.tile.category-standards svg {
+    top: -20%;
     background-color: #BF7600;
-    background-position: 50% 50.4%;
 }
 
-.tile.category-contributing .background-image {
+.tile.category-contributing svg {
     background-color: #CBAA44;
-    background-position: 50% 59.8%;
 }
 
-.tile.category-storage .background-image {
+.tile.category-storage svg {
     background-color: #997FA6;
-    background-position: 50% 69.6%;
 }
 
-.tile.category-layout .background-image {
+.tile.category-layout svg {
     background-color: #bf6d71;
-    background-position: 50% 79.45%;
 }
 
-.tile.category-safari-technology-preview .background-image {
+.tile.category-safari-technology-preview svg {
     background-color: #8e56b1;
 }
 
-.tile.category-accessibility .background-image {
+.tile.category-accessibility svg {
+    top: -8%;
     background-color: #08c;
-    background-position: 50% 89.2%;
-}
-
-.tile.tag-console .background-image,
-.tile.tag-debugger .background-image,
-.tile.tag-shortcuts .background-image,
-.tile.tag-timeline .background-image {
-     background-image: url('images/inspector.svg');
 }
 
-.tile.tag-console .background-image {
-    background-position: 50% 3%;
-}
-
-.tile.tag-debugger .background-image {
-    background-position: 50% 34%;
-}
-
-.tile.tag-shortcuts .background-image {
-    background-position: 50% 66%;
+.tile.category-security svg {
+    background-color: #CBAA44;
 }
 
-.tile.tag-timeline .background-image {
-    background-position: 50% 97%;
+.tile.category-privacy svg {
+    background-color: #CBAA44;
 }
 
 .tile .background-image.loaded {
@@ -1567,7 +1553,7 @@ input.menu-toggle {
 }
 
 footer {
-    
+
 }
 
 footer nav {
@@ -1624,11 +1610,11 @@ header .menu-item-has-children .label-toggle::after {
     margin-left: 0.5rem;
     margin-top: -0.1rem;
     content: '';
-    
+
     -webkit-filter: invert(100%);
     filter: invert(100%);
-    perspective: 600;        
-    
+    perspective: 600;
+
     transition: transform 0.3s ease-out;
 }
 
@@ -1769,7 +1755,7 @@ header .menu-item { /* add bottom dimension to main menu items */
         cursor: pointer;
 
         transition: transform 0.3s ease-out;
-        
+
         -webkit-filter: invert(100%);
         filter: invert(100%);
         perspective: 600;
@@ -1794,12 +1780,12 @@ header .menu-item { /* add bottom dimension to main menu items */
         width: 100vw;
         overflow: hidden;
         box-shadow: 0px 5px 5px rgba(0,0,0,0.10);
-        
+
         backdrop-filter: blur(20px);
         -webkit-backdrop-filter: blur(10px);
         background-color: rgba(255,255,255,0.8);
     }
-    
+
     header nav a {
         color: #333333;
     }
@@ -1874,14 +1860,14 @@ header .menu-item { /* add bottom dimension to main menu items */
     footer nav li {
         padding: 0 3rem 3rem 0;
     }
-    
+
 }
 
 @media only screen and (max-width: 690px) {
     article h1 {
         font-size: 3.4rem;
     }
-    
+
     .featured-tile {
         padding: 0;
     }
@@ -1944,7 +1930,7 @@ header .menu-item { /* add bottom dimension to main menu items */
     .nextrouter-copy {
         font-size: 2.2rem;
     }
-    
+
     article .scrollable {
         overflow: auto;
         -webkit-overflow-scrolling: touch;
@@ -2045,7 +2031,7 @@ header .menu-item { /* add bottom dimension to main menu items */
 
 }
 
-@media only screen and (max-width: 415px) {    
+@media only screen and (max-width: 415px) {
     .table-of-contents {
         /* Go one-column */
         width: 100vw;
@@ -2055,7 +2041,7 @@ header .menu-item { /* add bottom dimension to main menu items */
         float: none;
         margin: 0 0 3rem 0;
     }
-    
+
     .nextrouter-copy {
         font-size: 1.7rem;
         letter-spacing: -0.016rem;
@@ -2063,7 +2049,7 @@ header .menu-item { /* add bottom dimension to main menu items */
 }
 
 @media only screen and (max-height: 415px) {
-    
+
     .home .site-logo {
         opacity: 1;
         margin-top: 0;
@@ -2073,7 +2059,7 @@ header .menu-item { /* add bottom dimension to main menu items */
     .home header {
         padding-top: 1rem;
     }
-    
+
     @supports(padding:max(0px)) {
         header,
         header .menu,
@@ -2087,21 +2073,21 @@ header .menu-item { /* add bottom dimension to main menu items */
             padding-left: env(safe-area-inset-left);
             padding-right: env(safe-area-inset-right);
         }
-        
+
         header .menu .menu-item > .sub-menu {
             border: none;
             background: none;
         }
-        
+
         .sub-menu-layer {
             padding: 0 3rem;
         }
-        
+
         .sub-menu-layer .menu-item:first-child,
         .sub-menu-layer .menu-item {
             padding: 0 0 1.5rem 1.5rem;
         }
-        
+
     }
 
     .tile {
@@ -2112,13 +2098,10 @@ header .menu-item { /* add bottom dimension to main menu items */
         padding-bottom: 33%;
     }
 
-    .tile.category-performance .background-image {
-        background-position-y: 21.5%;
+    .tile .background-image svg {
+        top: -65%;
     }
 
-    .tile.category-web-inspector .background-image {
-        background-position-y: 12.5%;
-    }
 
     .table-of-contents {
         height: 9rem;
index 66f0eaa..e3eb58b 100644 (file)
@@ -7,24 +7,24 @@
 defined('WPINC') || header('HTTP/1.1 403') & exit; // Prevent direct access
 
 if ( ! class_exists('WP_Widget') ) return;
-       
+
 class WebKitPostTileWidget extends WP_Widget {
 
     public function __construct() {
-        parent::WP_Widget(false, 
-                       __('Post Tile'), 
-                       array('description' => __('Post tile for the home page'))
-               );
+        parent::WP_Widget(false,
+            __('Post Tile'),
+            array('description' => __('Post tile for the home page'))
+        );
     }
-    
+
     public function load( array $options = array() ) {
         return Front_Page_Posts::WP_Query();
     }
 
     public function widget( array $args, array $options ) {
         $Query = $this->load($options);
-        
-        // Get the next post, if available     
+
+        // Get the next post, if available
         if ( ! $Query->have_posts() ) return;
 
         // Queue the post data
@@ -41,17 +41,17 @@ class WebKitPostTileWidget extends WP_Widget {
 
         if ( ! empty($args) )
             extract($args, EXTR_SKIP);
-        
-               $title = $before_title . ( ! empty($options['title']) ? $options['title'] : get_the_title() ) . $after_title;
-               $summary = ! empty($options['summary']) ? $options['summary'] : get_the_excerpt();
-               $link = ! empty($options['link']) ? $options['link'] : __('Read more');
-        
+
+        $title = $before_title . ( ! empty($options['title']) ? $options['title'] : get_the_title() ) . $after_title;
+        $summary = ! empty($options['summary']) ? $options['summary'] : get_the_excerpt();
+        $link = ! empty($options['link']) ? $options['link'] : __('Read more');
+
         $image = '';
         if ( $post_thumbnail_id = get_post_thumbnail_id() ) {
             $post_thumbnail_url = wp_get_attachment_url( $post_thumbnail_id );
             $image = " data-url=\"" . $post_thumbnail_url . "\"";
         }
-        
+
         $classes = array('tile');
         if ( $featured ) {
             $classes[] = 'featured-tile';
@@ -59,14 +59,17 @@ class WebKitPostTileWidget extends WP_Widget {
         } else {
             $classes[] = 'third-tile';
         }
-        
+
         if ( isset($options['vignette']) && 'dark' == $options['vignette'] )
             $classes[] = 'tag-dark';
-        
+
         ?>
             <div <?php echo post_class(join(' ', $classes)); ?>>
                 <a class="tile-link" href="<?php the_permalink(); ?>"><?php echo $title; ?></a>
                 <div class="background-image">
+                    <svg viewbox="0 0 100 100">
+                        <use xlink:href="#<?php echo esc_attr(get_post_icon()); ?>" />
+                    </svg>
                     <div class="featured-image"<?php echo $image; ?>></div>
                     <?php if ( $featured ): ?><div class="background-vignette"></div><?php endif; ?>
                 </div>
@@ -74,29 +77,29 @@ class WebKitPostTileWidget extends WP_Widget {
                     <h1><?php echo $title; ?></h1>
                     <div class="summary"><?php echo $summary; ?></div>
                     <p><a href="<?php the_permalink(); ?>" class="readmore"><?php echo $link; ?></a></p>
-                </div>        
+                </div>
             </div>
         <?php
     }
 
     public function form( array $options ) {
         if ( empty( $options['link'] ) ) $options['link'] = __('Read more');
-               ?>
-               <p><label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title'); ?></label>
-               <input type="text" name="<?php echo $this->get_field_name('title'); ?>" id="<?php echo $this->get_field_id('title'); ?>" class="widefat" value="<?php echo $options['title']; ?>" placeholder="Current Post Title"></p>
+        ?>
+        <p><label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title'); ?></label>
+        <input type="text" name="<?php echo $this->get_field_name('title'); ?>" id="<?php echo $this->get_field_id('title'); ?>" class="widefat" value="<?php echo $options['title']; ?>" placeholder="Current Post Title"></p>
+
+        <p><label for="<?php echo $this->get_field_id('summary'); ?>"><?php _e('Summary'); ?></label>
+        <input type="text" name="<?php echo $this->get_field_name('summary'); ?>" id="<?php echo $this->get_field_id('summary'); ?>" class="widefat" value="<?php echo $options['summary']; ?>" placeholder="Current Post Excerpt"></p>
 
-               <p><label for="<?php echo $this->get_field_id('summary'); ?>"><?php _e('Summary'); ?></label>
-               <input type="text" name="<?php echo $this->get_field_name('summary'); ?>" id="<?php echo $this->get_field_id('summary'); ?>" class="widefat" value="<?php echo $options['summary']; ?>" placeholder="Current Post Excerpt"></p>
+        <p><label for="<?php echo $this->get_field_id('link'); ?>"><?php _e('Call to Action'); ?></label>
+        <input type="text" name="<?php echo $this->get_field_name('link'); ?>" id="<?php echo $this->get_field_id('link'); ?>" class="widefat" value="<?php echo $options['link']; ?>"></p>
 
-               <p><label for="<?php echo $this->get_field_id('link'); ?>"><?php _e('Call to Action'); ?></label>
-               <input type="text" name="<?php echo $this->get_field_name('link'); ?>" id="<?php echo $this->get_field_id('link'); ?>" class="widefat" value="<?php echo $options['link']; ?>"></p>
-        
-               <p><label for="<?php echo $this->get_field_id('featured'); ?>">
+        <p><label for="<?php echo $this->get_field_id('featured'); ?>">
             <input type="hidden" name="<?php echo $this->get_field_name('featured'); ?>" value="off">
             <input type="checkbox" name="<?php echo $this->get_field_name('featured'); ?>" id="<?php echo $this->get_field_id('featured'); ?>" class="widefat" value="on" <?php echo ( 'on' == $options['featured'] ) ? 'checked' : ''; ?>>
             <?php _e('Featured'); ?></label>
-               </p>
-               <?php
+        </p>
+        <?php
     }
 
 } // END class WebKitPostTileWidget