Change website layout (#18)

* Add basic experiments page

* Isolate experiment components

* Fix grid on small screens

* Change nav bar

* Add padding to logo

* Fix linking

* Remove right margin on ExperimentCard flask

* Change favicon

* Use humanize in formatTimePast

* Add TODO

public/favicons/safari-pinned-tab.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M7 5113 c-4 -3 -7 -352 -7 -774 0 -579 3 -770 12 -775 6 -4 226 -8
+487 -8 l476 -1 1 -1760 c1 -968 2 -1768 3 -1778 1 -16 81 -17 1584 -15 l1582
+3 0 1775 0 1775 460 2 c253 1 472 2 488 2 l27 1 -2 778 -3 777 -2551 3 c-1403
+1 -2554 -1 -2557 -5z"/>
+</g>
+</svg>

public/logo.svg

@@ -1,100 +1,8 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-
-<svg
-   version="1.1"
-   id="Layer_1"
-   x="0px"
-   y="0px"
-   viewBox="0 0 512 512"
-   style="enable-background:new 0 0 512 512;"
-   xml:space="preserve"
-   sodipodi:docname="logo.svg"
-   inkscape:version="1.2.2 (b0a8486, 2022-12-01)"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg"><defs
-   id="defs144" /><sodipodi:namedview
-   id="namedview142"
-   pagecolor="#505050"
-   bordercolor="#eeeeee"
-   borderopacity="1"
-   inkscape:showpageshadow="0"
-   inkscape:pageopacity="0"
-   inkscape:pagecheckerboard="0"
-   inkscape:deskcolor="#505050"
-   showgrid="false"
-   inkscape:zoom="0.4609375"
-   inkscape:cx="304.81356"
-   inkscape:cy="-29.288136"
-   inkscape:window-width="1440"
-   inkscape:window-height="847"
-   inkscape:window-x="1080"
-   inkscape:window-y="1105"
-   inkscape:window-maximized="0"
-   inkscape:current-layer="g429" />
-<style
-   type="text/css"
-   id="style132">
-	.st0{fill:#F39C12;}
-	.st1{fill:#F1C40F;}
-</style>
-<g
-   id="g429"
-   transform="rotate(-31.952357,237.34973,219.54994)"><g
-     id="XMLID_1_"
-     transform="matrix(0.75514475,0.02046743,-0.01995659,0.75644772,46.808592,36.430117)">
-	<path
-   id="XMLID_5_"
-   class="st0"
-   d="M 463.2,68.4 C 399.4,4.6 297.8,3 231.6,68.4 c -63.8,63.8 -63.8,167.8 0,231.6 63.8,63.8 167.8,63.8 231.6,0 66.2,-65.4 63.9,-167.8 0,-231.6 z M 424.6,107 c 21.3,21.3 21.3,55.9 0,77.2 -21.3,21.3 -55.9,21.3 -77.2,0 -21.3,-21.3 -21.3,-55.9 0,-77.2 21.3,-21.3 56,-21.3 77.2,0 z" />
-	<path
-   id="XMLID_8_"
-   class="st1"
-   d="m 462.5,48.7 c -63.8,-63.8 -167.8,-63.8 -231.6,0 -63.8,63.8 -63.8,167.8 0,231.6 63.8,63.8 167.8,63.8 231.6,0 63.8,-64.6 63.8,-167.8 0,-231.6 z m -38.6,38.6 c 21.3,21.3 21.3,55.9 0,77.2 -21.3,21.3 -55.9,21.3 -77.2,0 -21.3,-21.3 -21.3,-55.9 0,-77.2 22,-21.3 55.9,-21.3 77.2,0 z" />
-	
-		<rect
-   id="XMLID_9_"
-   x="204.10001"
-   y="197.7"
-   transform="matrix(0.7071,-0.7071,0.7071,0.7071,-130.0056,245.4256)"
-   class="st1"
-   width="54.400002"
-   height="163.89999" />
-	<polygon
-   id="XMLID_10_"
-   class="st1"
-   points="193,395.3 250.5,337.8 173.3,260.6 0,434 0,511.2 77.2,511.2 96.1,492.3 77.2,434 134.7,453.6 154.4,434 154.4,395.3 " />
-	<path
-   id="XMLID_14_"
-   class="st0"
-   d="m 231.6,318.1 -77.2,77.2 H 193 l 57.5,-57.5 z m -77.2,77.2 -48.1,48.1 29.1,9.5 18.9,-18.9 c 0.1,0 0.1,-38.7 0.1,-38.7 z m -67.7,67.8 -48.1,48.1 h 38.6 l 18.9,-18.9 z" />
-	<polygon
-   id="XMLID_15_"
-   class="st0"
-   points="193,279.5 0,472.6 0,511.2 77.2,434 211.9,299.2 " />
-</g></g>
-<text
-   xml:space="preserve"
-   style="font-style:normal;font-weight:normal;font-size:424.372px;line-height:1.25;font-family:sans-serif;fill:#1a202c;fill-opacity:1;stroke:none;stroke-width:1.06093"
-   x="-51.142395"
-   y="363.65485"
-   id="text475"
-   transform="scale(0.8254529,1.2114562)"><tspan
-     sodipodi:role="line"
-     id="tspan473"
-     x="-51.142395"
-     y="363.65485"
-     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:424.372px;font-family:'Fira Code';-inkscape-font-specification:'Fira Code';stroke-width:1.06093;fill:#1a202c;fill-opacity:1">{</tspan></text><text
-   xml:space="preserve"
-   style="font-style:normal;font-weight:normal;font-size:424.373px;line-height:1.25;font-family:sans-serif;fill:#1a202c;fill-opacity:1;stroke:none;stroke-width:1.06093"
-   x="-671.40875"
-   y="363.655"
-   id="text475-6"
-   transform="scale(-0.82545186,1.2114577)"><tspan
-     sodipodi:role="line"
-     id="tspan473-2"
-     x="-671.40875"
-     y="363.655"
-     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:424.373px;font-family:'Fira Code';-inkscape-font-specification:'Fira Code';stroke-width:1.06093;fill:#1a202c;fill-opacity:1">{</tspan></text></svg>
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M97.5238 147.526H414.476V510C414.476 511.105 413.581 512 412.476 512H99.5238C98.4192 512 97.5238 511.105 97.5238 510V147.526Z" fill="black"/>
+<rect width="512" height="156.203" rx="2" fill="black"/>
+<rect x="109.714" y="156.203" width="292.571" height="347.119" fill="#FF5733"/>
+<rect x="12.1905" y="8.67792" width="487.619" height="138.847" fill="#FF5733"/>
+<rect x="164.571" y="156.203" width="48.7619" height="347.119" fill="white"/>
+<rect x="128" y="8.67792" width="48.7619" height="138.847" fill="white"/>
+</svg>