proportions of front page

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

@@ -83,6 +83,7 @@ const WeaponSelector: React.FC<WeaponSelectorProps> = ({
               cursor="pointer"
               onClick={() => setWeapon(weapon)}
               userSelect="none"
+              transition="0.5s"
               _hover={{
                 bg: "rgba(128, 128, 128, 0.3)",
                 borderRadius: "50%",

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

@@ -15,19 +15,19 @@ const HomePage: React.FC<RouteComponentProps> = ({}) => {
         alignItems="center"
         title="Picture by borzoic (@borzoic_ on Twitter)"
       >
-        <Image className="rgb" src={posterGirl[colorMode]} w="40vw" h="auto" />
+        <Image className="rgb" src={posterGirl[colorMode]} w="250px" h="auto" />
         <Heading
+          size="2xl"
           letterSpacing="1px"
           fontFamily="'Pacifico', cursive"
-          fontSize="7vw"
           fontWeight="light"
         >
           Sendou.ink
         </Heading>
         <Heading
+          size="md"
           letterSpacing="1px"
           fontWeight="light"
-          fontSize="2vw"
           color={grayWithShade}
         >
           Competitive Splatoon Hub

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

@@ -4,6 +4,7 @@ import Logo from "./Logo"
 import { MdDehaze } from "react-icons/md"
 import MobileNav from "./MobileNav"
 import MyThemeContext from "../../themeContext"
+import { Link } from "@reach/router"
 
 export const MenuBar: React.FC = () => {
   const btnRef = useRef<HTMLElement | null>(null)
@@ -30,7 +31,9 @@ export const MenuBar: React.FC = () => {
     >
       <Flex size="100%" px="6" justifyContent="space-between">
         <Flex alignItems="center">
-          <Logo mobile />
+          <Link to="/">
+            <Logo mobile />
+          </Link>
         </Flex>
         <Flex alignItems="center" color="gray.500" justify="flex-end">
           <IconButton