From 8e3048012b6054902b9f182ab10a78d06f171c80 Mon Sep 17 00:00:00 2001
From: Sasha Koshka <sashakoshka@tebibyte.media>
Date: Sun, 9 Oct 2022 00:09:35 -0400
Subject: [PATCH] Added some icons

---
 prototype/icons/directory.svg | 20 ++++++++++++++++++
 prototype/icons/file.svg      | 17 +++++++++++++++
 prototype/icons/fork.svg      | 34 ++++++++++++++++++++++++++++++
 prototype/icons/link.svg      | 11 ++++++++++
 prototype/icons/star.svg      | 20 ++++++++++++++++++
 prototype/icons/unstar.svg    |  9 ++++++++
 prototype/icons/unwatch.svg   | 12 +++++++++++
 prototype/icons/watch.svg     | 24 +++++++++++++++++++++
 prototype/index.html          | 15 +++++++-------
 prototype/style.css           | 39 +++++++++++++++++++++++++++++++++++
 10 files changed, 193 insertions(+), 8 deletions(-)
 create mode 100644 prototype/icons/directory.svg
 create mode 100644 prototype/icons/file.svg
 create mode 100644 prototype/icons/fork.svg
 create mode 100644 prototype/icons/link.svg
 create mode 100644 prototype/icons/star.svg
 create mode 100644 prototype/icons/unstar.svg
 create mode 100644 prototype/icons/unwatch.svg
 create mode 100644 prototype/icons/watch.svg

diff --git a/prototype/icons/directory.svg b/prototype/icons/directory.svg
new file mode 100644
index 0000000..e1ffe38
--- /dev/null
+++ b/prototype/icons/directory.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg height="100%" stroke-miterlimit="10" style="fill-rule:nonzero;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;" version="1.1" viewBox="0 0 16 16" width="100%" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<defs>
+<path d="M2 1L6 1L8 3L14 3C15.1046 3 16 3.89543 16 5L16 13C16 14.1046 15.1046 15 14 15L2 15C0.895431 15 0 14.1046 0 13L0 3C0 1.89543 0.895431 1 2 1Z" id="Fill"/>
+</defs>
+<clipPath id="ArtboardFrame">
+<rect height="16" width="16" x="0" y="0"/>
+</clipPath>
+<g clip-path="url(#ArtboardFrame)" id="Layer-1">
+<g opacity="1">
+<mask height="14" id="StrokeMask" maskUnits="userSpaceOnUse" width="16" x="0" y="1">
+<rect fill="#FF0000" height="14" stroke="none" width="16" x="0" y="1"/>
+<use fill="#ffffff" fill-rule="evenodd" stroke="none" xlink:href="#Fill"/>
+</mask>
+<use fill="none" mask="url(#StrokeMask)" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" xlink:href="#Fill"/>
+</g>
+<path d="M2.5 12.5L13.5 12.5" fill="none" opacity="1" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+</g>
+</svg>
diff --git a/prototype/icons/file.svg b/prototype/icons/file.svg
new file mode 100644
index 0000000..62f72dc
--- /dev/null
+++ b/prototype/icons/file.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg height="100%" stroke-miterlimit="10" style="fill-rule:nonzero;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;" version="1.1" viewBox="0 0 16 16" width="100%" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<defs>
+<path d="M4 0L10 0L14 4L14 14C14 15.1046 13.1046 16 12 16L4 16C2.89543 16 2 15.1046 2 14L2 2C2 0.895431 2.89543 0 4 0Z" id="Fill"/>
+</defs>
+<g id="Layer-1">
+<g opacity="1">
+<mask height="16" id="StrokeMask" maskUnits="userSpaceOnUse" width="12" x="2" y="0">
+<rect fill="#FF0000" height="16" stroke="none" width="12" x="2" y="0"/>
+<use fill="#ffffff" fill-rule="evenodd" stroke="none" xlink:href="#Fill"/>
+</mask>
+<use fill="none" mask="url(#StrokeMask)" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" xlink:href="#Fill"/>
+</g>
+<path d="M9.5 0.5L9.5 4.5L13.5 4.5" fill="none" opacity="1" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+</g>
+</svg>
diff --git a/prototype/icons/fork.svg b/prototype/icons/fork.svg
new file mode 100644
index 0000000..1315877
--- /dev/null
+++ b/prototype/icons/fork.svg
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg height="100%" stroke-miterlimit="10" style="fill-rule:nonzero;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;" version="1.1" viewBox="0 0 16 16" width="100%" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<defs>
+<path d="M6 13C6 11.8954 6.89543 11 8 11C9.10457 11 10 11.8954 10 13C10 14.1046 9.10457 15 8 15C6.89543 15 6 14.1046 6 13Z" id="Fill"/>
+<path d="M2 4C2 2.89543 2.89543 2 4 2C5.10457 2 6 2.89543 6 4C6 5.10457 5.10457 6 4 6C2.89543 6 2 5.10457 2 4Z" id="Fill_2"/>
+<path d="M10 4C10 2.89543 10.8954 2 12 2C13.1046 2 14 2.89543 14 4C14 5.10457 13.1046 6 12 6C10.8954 6 10 5.10457 10 4Z" id="Fill_3"/>
+</defs>
+<g id="Layer-1">
+<g opacity="1">
+<mask height="4" id="StrokeMask" maskUnits="userSpaceOnUse" width="4" x="6" y="11">
+<rect fill="#FF0000" height="4" stroke="none" width="4" x="6" y="11"/>
+<use fill="#ffffff" fill-rule="evenodd" stroke="none" xlink:href="#Fill"/>
+</mask>
+<use fill="none" mask="url(#StrokeMask)" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="miter" stroke-width="2" xlink:href="#Fill"/>
+</g>
+<g opacity="1">
+<mask height="4" id="StrokeMask_2" maskUnits="userSpaceOnUse" width="4" x="2" y="2">
+<rect fill="#FF0000" height="4" stroke="none" width="4" x="2" y="2"/>
+<use fill="#ffffff" fill-rule="evenodd" stroke="none" xlink:href="#Fill_2"/>
+</mask>
+<use fill="none" mask="url(#StrokeMask_2)" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="miter" stroke-width="2" xlink:href="#Fill_2"/>
+</g>
+<g opacity="1">
+<mask height="4" id="StrokeMask_3" maskUnits="userSpaceOnUse" width="4" x="10" y="2">
+<rect fill="#FF0000" height="4" stroke="none" width="4" x="10" y="2"/>
+<use fill="#ffffff" fill-rule="evenodd" stroke="none" xlink:href="#Fill_3"/>
+</mask>
+<use fill="none" mask="url(#StrokeMask_3)" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="miter" stroke-width="2" xlink:href="#Fill_3"/>
+</g>
+<path d="M4 5.5L4 7.2048C4 7.92012 4.57988 8.5 5.2952 8.5L10.7048 8.5C11.4201 8.5 12 7.92012 12 7.2048L12 5.5" fill="none" opacity="1" stroke="#FF0000" stroke-linecap="square" stroke-linejoin="round" stroke-width="1"/>
+<path d="M8 8.5L8 11.5" fill="none" opacity="1" stroke="#FF0000" stroke-linecap="square" stroke-linejoin="round" stroke-width="1"/>
+</g>
+</svg>
diff --git a/prototype/icons/link.svg b/prototype/icons/link.svg
new file mode 100644
index 0000000..4d852c4
--- /dev/null
+++ b/prototype/icons/link.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg height="100%" stroke-miterlimit="10" style="fill-rule:nonzero;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;" version="1.1" viewBox="0 0 16 16" width="100%" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<defs/>
+<g id="Layer-1">
+<g opacity="1">
+<path d="M13.0962 1.28249C12.3151 0.501437 11.0488 0.501437 10.2678 1.28249L6.02513 5.52513C5.24408 6.30618 5.24408 7.57251 6.02513 8.35355L6.73223 9.06066C7.51328 9.84171 8.77961 9.84171 9.56066 9.06066L8.85355 8.35355C8.46303 8.74408 7.82986 8.74408 7.43934 8.35355L6.73223 7.64645C6.34171 7.25592 6.34171 6.62276 6.73223 6.23223L10.9749 1.98959C11.3654 1.59907 11.9986 1.59907 12.3891 1.98959L13.0962 2.6967C13.4867 3.08722 13.4867 3.72039 13.0962 4.11091L10.9749 6.23223L11.682 6.93934L13.8033 4.81802C14.5843 4.03697 14.5843 2.77064 13.8033 1.98959L13.0962 1.28249Z" fill="#FF0000" fill-rule="nonzero" opacity="1" stroke="none"/>
+<path d="M10.2678 6.93934C9.48672 6.15829 8.22039 6.15829 7.43934 6.93934L8.14645 7.64645C8.53697 7.25592 9.17014 7.25592 9.56066 7.64645L10.2678 8.35355C10.6583 8.74408 10.6583 9.37724 10.2678 9.76777L6.02513 14.0104C5.6346 14.4009 5.00143 14.4009 4.61091 14.0104L3.90381 13.3033C3.51328 12.9128 3.51328 12.2796 3.90381 11.8891L6.02513 9.76777L5.31802 9.06066L3.1967 11.182C2.41565 11.963 2.41565 13.2294 3.1967 14.0104L3.90381 14.7175C4.68485 15.4986 5.95119 15.4986 6.73223 14.7175L10.9749 10.4749C11.7559 9.69383 11.7559 8.42749 10.9749 7.64645L10.2678 6.93934Z" fill="#FF0000" fill-rule="nonzero" opacity="1" stroke="none"/>
+</g>
+</g>
+</svg>
diff --git a/prototype/icons/star.svg b/prototype/icons/star.svg
new file mode 100644
index 0000000..9479723
--- /dev/null
+++ b/prototype/icons/star.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg height="100%" stroke-miterlimit="10" style="fill-rule:nonzero;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;" version="1.1" viewBox="0 0 16 16" width="100%" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<defs>
+<path d="" id="Fill"/>
+</defs>
+<clipPath id="ArtboardFrame">
+<rect height="16" width="16" x="0" y="0"/>
+</clipPath>
+<g clip-path="url(#ArtboardFrame)" id="Layer-1">
+<path d="M8 1.68509L6.43254 6.50925L1.36011 6.50925L5.46379 9.49075L3.89632 14.3149L8 11.3334L12.1037 14.3149L10.5362 9.49075L14.6399 6.50925L9.56746 6.50925L8 1.68509Z" fill="none" opacity="1" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+<g opacity="1">
+<mask height="9.04508" id="StrokeMask" maskUnits="userSpaceOnUse" width="9.51057" x="-0.755283" y="3.95492">
+<rect fill="#FF0000" height="9.04508" stroke="none" width="9.51057" x="-0.755283" y="3.95492"/>
+<use fill="#ffffff" fill-rule="evenodd" stroke="none" xlink:href="#Fill"/>
+</mask>
+<use fill="none" mask="url(#StrokeMask)" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="miter" stroke-width="2" xlink:href="#Fill"/>
+</g>
+</g>
+</svg>
diff --git a/prototype/icons/unstar.svg b/prototype/icons/unstar.svg
new file mode 100644
index 0000000..c0c6684
--- /dev/null
+++ b/prototype/icons/unstar.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg height="100%" stroke-miterlimit="10" style="fill-rule:nonzero;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;" version="1.1" viewBox="0 0 16 16" width="100%" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<defs/>
+<g id="Layer-1">
+<path d="M13 2.5C12.872 2.5 12.7422 2.5469 12.6445 2.64453L2.64453 12.6445C2.44927 12.8398 2.44927 13.1602 2.64453 13.3555C2.83979 13.5507 3.16021 13.5507 3.35547 13.3555L13.3555 3.35547C13.5507 3.16021 13.5507 2.83979 13.3555 2.64453C13.2578 2.5469 13.128 2.5 13 2.5Z" fill="#FF0000" fill-rule="nonzero" opacity="1" stroke="none"/>
+<path d="M8 1.1875C7.79965 1.1875 7.60609 1.30092 7.53125 1.53125L6.09375 6L1.375 6C0.890638 6 0.670643 6.62155 1.0625 6.90625L4.46875 9.40625L5.1875 8.6875L2.90625 7L6.4375 7C6.65411 7 6.83931 6.86226 6.90625 6.65625L8 3.28125C8.24758 4.04321 8.40424 4.56808 8.625 5.25L9.40625 4.46875C9.02422 3.27978 8.58815 1.89873 8.46875 1.53125C8.39391 1.30092 8.20035 1.1875 8 1.1875ZM12.125 6L11.125 7L13.0938 7L10.25 9.09375C10.0748 9.22107 9.99556 9.45024 10.0625 9.65625L11.1562 13L8.28125 10.9375C8.10601 10.8102 7.89399 10.8102 7.71875 10.9375L5.84375 12.2812L3.5625 14.5938C3.72164 14.7829 3.94912 14.8919 4.1875 14.7188L8 11.9688L11.8125 14.7188C12.2044 15.0035 12.7434 14.6169 12.5938 14.1562L11.125 9.71875L14.9375 6.90625C15.3294 6.62155 15.1094 6 14.625 6L12.125 6Z" fill="#FF0000" fill-rule="nonzero" opacity="1" stroke="none"/>
+</g>
+</svg>
diff --git a/prototype/icons/unwatch.svg b/prototype/icons/unwatch.svg
new file mode 100644
index 0000000..0b5e9e7
--- /dev/null
+++ b/prototype/icons/unwatch.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg height="100%" stroke-miterlimit="10" style="fill-rule:nonzero;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;" version="1.1" viewBox="0 0 16 16" width="100%" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<defs/>
+<g id="Layer-1">
+<path d="M13.1797 4.94531L12.4531 5.67188C12.6992 5.86021 12.9499 6.03399 13.1875 6.25C13.742 6.75406 14.2415 7.27146 14.6562 7.8125C14.7212 7.89719 14.728 7.92691 14.7812 8C14.728 8.07309 14.7212 8.1028 14.6562 8.1875C14.2415 8.72854 13.742 9.24594 13.1875 9.75C11.6377 11.1589 9.90734 12 8 12C7.43312 12 6.88318 11.9188 6.34766 11.7773L5.54297 12.582C6.29709 12.8399 7.11502 13 8 13C13 13 16 8 16 8C16 8 14.9779 6.3517 13.1797 4.94531Z" fill="#FF0000" fill-rule="nonzero" opacity="1" stroke="none"/>
+<path d="M8 3C3 3 0 8 0 8C0 8 1.02299 9.64855 2.82031 11.0547L3.54688 10.3281C3.30078 10.1398 3.05012 9.96602 2.8125 9.75C2.25803 9.24594 1.75855 8.72854 1.34375 8.1875C1.27882 8.10281 1.27202 8.07309 1.21875 8C1.27202 7.92691 1.27882 7.89719 1.34375 7.8125C1.75855 7.27146 2.25803 6.75407 2.8125 6.25C4.36227 4.84112 6.09266 4 8 4C8.56688 4 9.11682 4.08123 9.65234 4.22266L10.457 3.41797C9.70307 3.16026 8.88475 3 8 3Z" fill="#FF0000" fill-rule="nonzero" opacity="1" stroke="none"/>
+<path d="M10.8906 7.23438L9.98828 8.13672C9.91987 9.13018 9.13018 9.91987 8.13672 9.98828L7.23438 10.8906C7.47983 10.9555 7.73414 11 8 11C9.65685 11 11 9.65685 11 8C11 7.73414 10.9555 7.47983 10.8906 7.23438Z" fill="#FF0000" fill-rule="nonzero" opacity="1" stroke="none"/>
+<path d="M8 5C6.34315 5 5 6.34315 5 8C5 8.26586 5.04446 8.52017 5.10938 8.76562L6.01172 7.86328C6.08013 6.86982 6.86982 6.08013 7.86328 6.01172L8.76562 5.10938C8.52017 5.04446 8.26586 5 8 5Z" fill="#FF0000" fill-rule="nonzero" opacity="1" stroke="none"/>
+<path d="M13 2.5C12.872 2.5 12.7422 2.5469 12.6445 2.64453L2.64453 12.6445C2.44927 12.8398 2.44927 13.1602 2.64453 13.3555C2.83979 13.5507 3.16021 13.5507 3.35547 13.3555L13.3555 3.35547C13.5507 3.16021 13.5507 2.83979 13.3555 2.64453C13.2578 2.5469 13.128 2.5 13 2.5Z" fill="#FF0000" fill-rule="nonzero" opacity="1" stroke="none"/>
+</g>
+</svg>
diff --git a/prototype/icons/watch.svg b/prototype/icons/watch.svg
new file mode 100644
index 0000000..d0c562b
--- /dev/null
+++ b/prototype/icons/watch.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg height="100%" stroke-miterlimit="10" style="fill-rule:nonzero;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;" version="1.1" viewBox="0 0 16 16" width="100%" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<defs>
+<path d="M8 3C13 3 16 8 16 8C16 8 13 13 8 13C3 13 0 8 0 8C0 8 3 3 8 3Z" id="Fill"/>
+<path d="M5 8C5 6.34315 6.34315 5 8 5C9.65685 5 11 6.34315 11 8C11 9.65685 9.65685 11 8 11C6.34315 11 5 9.65685 5 8Z" id="Fill_2"/>
+</defs>
+<g id="Layer-1">
+<g opacity="1">
+<mask height="10" id="StrokeMask" maskUnits="userSpaceOnUse" width="16" x="0" y="3">
+<rect fill="#FF0000" height="10" stroke="none" width="16" x="0" y="3"/>
+<use fill="#ffffff" fill-rule="evenodd" stroke="none" xlink:href="#Fill"/>
+</mask>
+<use fill="none" mask="url(#StrokeMask)" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="miter" stroke-width="2" xlink:href="#Fill"/>
+</g>
+<g opacity="1">
+<mask height="6" id="StrokeMask_2" maskUnits="userSpaceOnUse" width="6" x="5" y="5">
+<rect fill="#FF0000" height="6" stroke="none" width="6" x="5" y="5"/>
+<use fill="#ffffff" fill-rule="evenodd" stroke="none" xlink:href="#Fill_2"/>
+</mask>
+<use fill="none" mask="url(#StrokeMask_2)" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="miter" stroke-width="2" xlink:href="#Fill_2"/>
+</g>
+</g>
+</svg>
diff --git a/prototype/index.html b/prototype/index.html
index 43b96fb..58b3482 100644
--- a/prototype/index.html
+++ b/prototype/index.html
@@ -68,13 +68,12 @@ for the JavaScript code in this page.
 		</span>
 	</span>
 	<ul class=buttonList>
-		<li><a href="/">watch</a></li>
-		<li><a href="/">star</a></li>
-		<li><a href="/">fork</a></li>
+		<li><a class=watchButton href="/">watch</a></li>
+		<li><a class=starButton href="/">star</a></li>
+		<li><a class=forkButton href="/">fork</a></li>
 	</ul>
 </header>
 
-
 <div id=contentWrap>
 	<aside>		
 		<p class=sidebarLabel>
@@ -83,22 +82,22 @@ for the JavaScript code in this page.
 		<table class=files border=1>
 		<tbody>
 		  <tr>
-		    <td><a href="/">file name</a></td>
+		    <td><a class=file href="/">file name</a></td>
 		    <td><a href="/">most recent commit</a></td>
 		    <td><time datetime="2023-01-01">in 2 months</time></td>
 		  </tr>
 		  <tr>
-		    <td><a href="/">file name</a></td>
+		    <td><a class=directory href="/">directory/</a></td>
 		    <td><a href="/">most recent commit</a></td>
 		    <td><time datetime="2023-01-01">in 2 months</time></td>
 		  </tr>
 		  <tr>
-		    <td><a href="/">file name</a></td>
+		    <td><a class=file href="/">file name</a></td>
 		    <td><a href="/">most recent commit</a></td>
 		    <td><time datetime="2023-01-01">in 2 months</time></td>
 		  </tr>
 		  <tr>
-		    <td><a href="/">file name</a></td>
+		    <td><a class=file href="/">file name</a></td>
 		    <td><a href="/">most recent commit</a></td>
 		    <td><time datetime="2023-01-01">in 2 months</time></td>
 		  </tr>
diff --git a/prototype/style.css b/prototype/style.css
index 86b1760..fdce8b7 100644
--- a/prototype/style.css
+++ b/prototype/style.css
@@ -9,6 +9,7 @@
 	--accent:            #209D6E;
 	--subtle-accent:     #209D6E30;
 	--shadow:            0 4px 32px #03281A12;
+	--icon-filter:       hue-rotate(157deg) saturate(0.80) brightness(0.62);
 } */
 
 /* martian theme */
@@ -22,6 +23,7 @@
 	--accent:            hsl(0, 80%, 40%);
 	--subtle-accent:     hsla(0, 80%, 40%, 0.2);
 	--shadow:            0 4px 32px #00000070;
+	--icon-filter:       saturate(0.89) brightness(0.72);
 }
 
 * {
@@ -86,6 +88,7 @@ h3 {
 #stickyWrap.lifted {
 	background: var(--glass);
 	backdrop-filter: blur(32px);
+	-webkit-backdrop-filter: blur(32px);
 	box-shadow: var(--shadow);
 	border-bottom: 1px solid var(--shine);
 }
@@ -226,6 +229,42 @@ header .buttonList {
 	color: var(--subtle-foreground);
 }
 
+.files .file::before,
+.files .directory::before,
+.watchButton::before,
+.starButton::before,
+.forkButton::before
+{
+	content: "";
+	width: 16px;
+	height: 16px;
+	background-repeat: no-repeat;
+	display: inline-block;
+	filter: var(--icon-filter);
+	margin-right: 0.5em;
+	vertical-align: sub;
+}
+
+.files .file::before {
+	background-image: url("icons/file.svg");
+}
+
+.files .directory::before {
+	background-image: url("icons/directory.svg");
+}
+
+.watchButton::before {
+	background-image: url("icons/watch.svg");
+}
+
+.starButton::before {
+	background-image: url("icons/star.svg");
+}
+
+.forkButton::before {
+	background-image: url("icons/fork.svg");
+}
+
 .previewLabel {
 	color: var(--subtle-foreground);
 }