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

src/pages/experiments/index.tsx

@@ -0,0 +1,40 @@
+import {
+  SimpleGrid,
+  HStack,
+  Icon,
+  VStack,
+  Breadcrumb,
+  BreadcrumbItem,
+  Flex,
+} from "@chakra-ui/react";
+import { RiFlaskLine } from "react-icons/ri";
+import AppShell from "~/components/nav/AppShell";
+import { api } from "~/utils/api";
+import { NewExperimentButton } from "~/components/experiments/NewExperimentButton";
+import { ExperimentCard } from "~/components/experiments/ExperimentCard";
+
+export default function ExperimentsPage() {
+  const experiments = api.experiments.list.useQuery();
+
+  return (
+    <AppShell>
+      <VStack alignItems={"flex-start"} m={4}>
+        <HStack w="full" justifyContent="space-between" mb={4}>
+          <Breadcrumb flex={1}>
+            <BreadcrumbItem>
+              <Flex alignItems="center">
+                <Icon as={RiFlaskLine} boxSize={4} mr={2} /> Experiments
+              </Flex>
+            </BreadcrumbItem>
+          </Breadcrumb>
+          <NewExperimentButton mr={4} borderRadius={8} />
+        </HStack>
+        <SimpleGrid w="full" columns={{ sm: 1, md: 2, lg: 3, xl: 4 }} spacing={8} p="4">
+          {experiments?.data?.map((exp) => (
+            <ExperimentCard key={exp.id} exp={exp} />
+          ))}
+        </SimpleGrid>
+      </VStack>
+    </AppShell>
+  );
+}