@@ -79,6 +79,19 @@ const links: Link[] = [
7979 });
8080 })();
8181</script >
82+ <script is:inline >
83+ (function() {
84+ var btn = document.querySelector('[data-gh-stars]');
85+ if (!btn) return;
86+ if (localStorage.getItem('gh-starred')) {
87+ btn.classList.add('starred');
88+ }
89+ btn.addEventListener('click', function() {
90+ localStorage.setItem('gh-starred', '1');
91+ btn.classList.add('starred');
92+ });
93+ })();
94+ </script >
8295<div class =" header sl-flex" >
8396 <div class =" full-width sl-flex" >
8497 <SiteTitle />
@@ -101,11 +114,14 @@ const links: Link[] = [
101114 href =" https://github.com/skiptools/skip"
102115 target =" _blank"
103116 rel =" noopener noreferrer"
104- aria-label =" Star us on GitHub"
117+ aria-label =" Star Skip on GitHub"
105118 data-gh-stars
106119 >
107- <svg fill =" none" viewBox =" 0 0 24 24" width =" 20" height =" 20" aria-hidden =" true" >
108- <path fill="currentColor" d="M12 1.60205C5.9225 1.60205 1 6.41965 1 12.3676C1 17.1314 4.14875 21.155 8.52125 22.5815C9.07125 22.6757 9.2775 22.3527 9.2775 22.0701C9.2775 21.8144 9.26375 20.9666 9.26375 20.065C6.5 20.5629 5.785 19.4056 5.565 18.8001C5.44125 18.4906 4.905 17.5351 4.4375 17.2794C4.0525 17.0776 3.5025 16.5797 4.42375 16.5662C5.29 16.5528 5.90875 17.3467 6.115 17.6697C7.105 19.298 8.68625 18.8404 9.31875 18.5578C9.415 17.8581 9.70375 17.3871 10.02 17.1179C7.5725 16.8488 5.015 15.9203 5.015 11.8024C5.015 10.6317 5.44125 9.66278 6.1425 8.90919C6.0325 8.64005 5.6475 7.53658 6.2525 6.05631C6.2525 6.05631 7.17375 5.77372 9.2775 7.15978C10.1575 6.91756 11.0925 6.79645 12.0275 6.79645C12.9625 6.79645 13.8975 6.91756 14.7775 7.15978C16.8813 5.76026 17.8025 6.05631 17.8025 6.05631C18.4075 7.53658 18.0225 8.64005 17.9125 8.90919C18.6138 9.66278 19.04 10.6182 19.04 11.8024C19.04 15.9337 16.4688 16.8488 14.0213 17.1179C14.42 17.4544 14.7638 18.1003 14.7638 19.1096C14.7638 20.5495 14.75 21.7068 14.75 22.0701C14.75 22.3527 14.9563 22.6891 15.5063 22.5815C17.69 21.86 19.5875 20.4865 20.9318 18.6542C22.2761 16.822 22.9994 14.6233 23 12.3676C23 6.41965 18.0775 1.60205 12 1.60205Z"/>
120+ <svg class =" star-outline" viewBox =" 0 0 24 24" width =" 18" height =" 18" aria-hidden =" true" >
121+ <path fill =" none" stroke =" currentColor" stroke-width =" 1.8" stroke-linejoin =" round" d =" M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.77 5.82 21 7 14.14l-5-4.87 6.91-1.01L12 2z" />
122+ </svg >
123+ <svg class =" star-filled" viewBox =" 0 0 24 24" width =" 18" height =" 18" aria-hidden =" true" >
124+ <path fill =" currentColor" d =" M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.77 5.82 21 7 14.14l-5-4.87 6.91-1.01L12 2z" />
109125 </svg >
110126 <span class =" gh-stars-count" >{ starCount } </span >
111127 </a >
@@ -234,10 +250,32 @@ const links: Link[] = [
234250 .gh-stars:active {
235251 transform: scale(0.98);
236252 }
237- .gh-stars svg {
253+ .gh-stars .star-outline,
254+ .gh-stars .star-filled {
238255 flex-shrink: 0;
256+ transition: transform 0.2s, color 0.2s;
257+ }
258+ .gh-stars .star-outline {
239259 color: var(--sl-color-gray-3);
240260 }
261+ .gh-stars .star-filled {
262+ display: none;
263+ color: hsl(45, 95%, 55%);
264+ }
265+ .gh-stars:hover .star-outline {
266+ color: hsl(45, 80%, 60%);
267+ transform: scale(1.15);
268+ }
269+ .gh-stars.starred .star-outline {
270+ display: none;
271+ }
272+ .gh-stars.starred .star-filled {
273+ display: block;
274+ color: hsl(45, 95%, 55%);
275+ }
276+ .gh-stars.starred:hover .star-filled {
277+ transform: scale(1.15);
278+ }
241279 .gh-stars-count {
242280 line-height: 1;
243281 }
@@ -254,9 +292,15 @@ const links: Link[] = [
254292 background: var(--sl-color-gray-5);
255293 color: var(--sl-color-gray-2);
256294 }
257- :root[data-theme='light'] .gh-stars svg {
295+ :root[data-theme='light'] .gh-stars .star-outline {
258296 color: var(--sl-color-gray-3);
259297 }
298+ :root[data-theme='light'] .gh-stars:hover .star-outline {
299+ color: hsl(45, 80%, 45%);
300+ }
301+ :root[data-theme='light'] .gh-stars.starred .star-filled {
302+ color: hsl(45, 90%, 48%);
303+ }
260304 .desktop,
261305 .release-link::after,
262306 .social-icons::after {
0 commit comments