From 6649f53f9d13b98da448e470b4c36f33253864cf Mon Sep 17 00:00:00 2001
From: Cory <coryk135@gmail.com>
Date: Sun, 8 Dec 2019 14:41:27 -0800
Subject: [PATCH] URL encode the "#" character in SVG data url

The todo-list checkbox SVG is not rendered in Chrome. Replacing the "#" character with the percent encoded value "%23" seems to fix the problem.

Most likely the same problem as this question and answer on Stack Overflow: https://stackoverflow.com/a/30733736
---
 style.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/style.css b/style.css
index fc2e67b..1ea137d 100644
--- a/style.css
+++ b/style.css
@@ -193,11 +193,11 @@ label[for='toggle-all'] {
 }
 
 .todo-list li .toggle:after {
-    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" stroke-width="3"/></svg>');
+    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="%23ededed" stroke-width="3"/></svg>');
 }
 
 .todo-list li .toggle:checked:after {
-    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>');
+    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="%23bddad5" stroke-width="3"/><path fill="%235dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>');
 }
 
 .todo-list li label {
@@ -379,4 +379,4 @@ html .clear-completed:active {
     .filters {
         bottom: 10px;
     }
-}
\ No newline at end of file
+}