rgb squid and layout stuff

frontend-react/public/index.html

@@ -7,6 +7,10 @@
     <meta name="theme-color" content="#232946" />
     <meta name="description" content="Competitive Splatoon hub" />
     <link rel="apple-touch-icon" href="logo192.png" />
+    <link
+      href="https://fonts.googleapis.com/css?family=Montserrat|Pacifico&display=swap"
+      rel="stylesheet"
+    />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

frontend-react/src/assets/imageImports.ts

@@ -28,6 +28,9 @@ import UNKNOWN from "./abilityIcons/UNKNOWN.png"
 import EMPTY from "./abilityIcons/EMPTY.png"
 import * as top500logo from "./top500.png"
 
+import posterGirlDrawingDark from "./poster_girl_dark.png"
+import posterGirlDrawingLight from "./poster_girl_light.png"
+
 //https://stackoverflow.com/questions/42118296/dynamically-import-images-from-a-directory-using-webpack
 export const wpnSmall: object = importAll(require.context("./wpnSmall", false))
 export const wpnMedium: object = importAll(
@@ -75,3 +78,8 @@ export const abilityIcons = {
 } as const
 
 export const top500 = top500logo
+
+export const posterGirl = {
+  light: posterGirlDrawingLight,
+  dark: posterGirlDrawingDark,
+}

frontend-react/src/components/builds/BuildsPage.tsx

@@ -11,7 +11,6 @@ import {
   Build,
 } from "../../types"
 import useBreakPoints from "../../hooks/useBreakPoints"
-import { abilitiesGameOrder } from "../../utils/lists"
 import {
   Box,
   Flex,
@@ -22,7 +21,6 @@ import {
   Alert,
   AlertIcon,
 } from "@chakra-ui/core"
-import AbilityIcon from "./AbilityIcon"
 import { useContext } from "react"
 import MyThemeContext from "../../themeContext"
 import useLocalStorage from "@rehooks/local-storage"
@@ -32,7 +30,6 @@ import Loading from "../common/Loading"
 import Error from "../common/Error"
 import BuildCard from "./BuildCard"
 import InfiniteScroll from "react-infinite-scroller"
-import FieldsetWithLegend from "../common/FieldsetWithLegend"
 import PageHeader from "../common/PageHeader"
 import AbilitySelector from "./AbilitySelector"
 

frontend-react/src/components/common/PageHeader.tsx

@@ -16,6 +16,9 @@ const PageHeader: React.FC<PageHeaderProps> = ({ title }) => {
         borderLeftWidth="5px"
         pl="5px"
         mb="0.5em"
+        fontFamily="'Pacifico', cursive"
+        fontWeight="light"
+        size="2xl"
       >
         {title}
       </Heading>

frontend-react/src/components/home/HomePage.css

@@ -0,0 +1,65 @@
+.rgb {
+  background: linear-gradient(
+    124deg,
+    #ff2400,
+    #e81d1d,
+    #e8b71d,
+    #e3e81d,
+    #1de840,
+    #1ddde8,
+    #2b1de8,
+    #dd00f3,
+    #dd00f3
+  );
+
+  -webkit-animation: rainbow 18s ease infinite;
+  -z-animation: rainbow 18s ease infinite;
+  -o-animation: rainbow 18s ease infinite;
+  animation: rainbow 18s ease infinite;
+  background-size: 1800% 1800%;
+}
+
+@-webkit-keyframes rainbow {
+  0% {
+    background-position: 0% 82%;
+  }
+  50% {
+    background-position: 100% 19%;
+  }
+  100% {
+    background-position: 0% 82%;
+  }
+}
+@-moz-keyframes rainbow {
+  0% {
+    background-position: 0% 82%;
+  }
+  50% {
+    background-position: 100% 19%;
+  }
+  100% {
+    background-position: 0% 82%;
+  }
+}
+@-o-keyframes rainbow {
+  0% {
+    background-position: 0% 82%;
+  }
+  50% {
+    background-position: 100% 19%;
+  }
+  100% {
+    background-position: 0% 82%;
+  }
+}
+@keyframes rainbow {
+  0% {
+    background-position: 0% 82%;
+  }
+  50% {
+    background-position: 100% 19%;
+  }
+  100% {
+    background-position: 0% 82%;
+  }
+}

frontend-react/src/components/home/HomePage.tsx

@@ -0,0 +1,43 @@
+import React from "react"
+import { RouteComponentProps } from "@reach/router"
+import { Image, Heading, Flex } from "@chakra-ui/core"
+import { posterGirl } from "../../assets/imageImports"
+import { useContext } from "react"
+import MyThemeContext from "../../themeContext"
+import "./HomePage.css"
+
+const HomePage: React.FC<RouteComponentProps> = ({}) => {
+  const { colorMode, grayWithShade } = useContext(MyThemeContext)
+  return (
+    <>
+      <Flex flexDirection="column" alignItems="center">
+        <Image
+          className="rgb"
+          src={posterGirl[colorMode]}
+          display="inline-block"
+          title="Made by borzoic (@borzoic_ on Twitter)"
+          w="40vw"
+          h="auto"
+        />
+        <Heading
+          letterSpacing="1px"
+          fontFamily="'Pacifico', cursive"
+          fontSize="7vw"
+          fontWeight="light"
+        >
+          Sendou.ink
+        </Heading>
+        <Heading
+          letterSpacing="1px"
+          fontFamily="'Lato', regular"
+          fontSize="2vw"
+          color={grayWithShade}
+        >
+          Competitive Splatoon Hub
+        </Heading>
+      </Flex>
+    </>
+  )
+}
+
+export default HomePage

frontend-react/src/components/root/App.tsx

@@ -57,6 +57,7 @@ const App: React.FC = () => {
         color={theme[colorMode].textColor}
         bg={theme[colorMode].bgColor}
         minH="100vh"
+        fontFamily="'Montserrat', sans-serif"
       >
         <SideNav />
         <MenuBar />

frontend-react/src/components/root/Routes.tsx

@@ -2,6 +2,7 @@ import React, { Suspense, lazy } from "react"
 import { Router } from "@reach/router"
 import Loading from "../common/Loading"
 
+const HomePage = lazy(() => import("../home/HomePage"))
 const UserPage = lazy(() => import("../user/UserPage"))
 const BuildsPage = lazy(() => import("../builds/BuildsPage"))
 
@@ -9,9 +10,8 @@ const Routes: React.FC = () => {
   return (
     <Suspense fallback={<Loading />}>
       <Router>
+        <HomePage path="/" />
         <UserPage path="/u/:id" />
-      </Router>
-      <Router>
         <BuildsPage path="/builds" />
       </Router>
     </Suspense>

frontend-react/src/index.css

@@ -1,8 +0,0 @@
-html {
-  height: 100%;
-}
-
-body {
-  height: 100%;
-  margin: 0;
-}