feat: frosty navbar

.vscode/settings.json

@@ -13,6 +13,7 @@
     "Everytime",
     "fullstats",
     "fuzzysort",
+    "gamemode",
     "immer",
     "kranvagn",
     "krieg",

src/app/layout.tsx

@@ -36,6 +36,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
       <body
         style={{
           margin: 0,
+          marginTop: isEmbed ? 0 : '3.25rem',
           background: isEmbed
             ? 'transparent'
             : 'url(https://i.imgur.com/PhS06NJ.png)',

src/app/tools/tankopedia/page.tsx

@@ -22,7 +22,7 @@ import { Options } from './components/Options';
 import { PageTurner } from './components/PageTurner';
 import * as styles from './page.css';
 
-const TANKS_PER_PAGE = 30;
+const TANKS_PER_PAGE = 3 * 2 ** 4;
 
 export default function Page() {
   const tankopediaState = useTankopedia();

src/components/Navbar/index.tsx

@@ -1,16 +1,24 @@
 import { DiscordLogoIcon } from '@radix-ui/react-icons';
-import { Card, Flex, Text, Theme } from '@radix-ui/themes';
+import { Flex, Text, Theme } from '@radix-ui/themes';
 import Link from 'next/link';
+import { theme } from '../../stitches.config';
 import { BlitzkriegWormWide } from '../BlitzkriegWormWide';
 
 export default function Navbar() {
   return (
     <Theme radius="none">
-      <Card
+      <div
         style={{
-          borderLeft: 'none',
-          borderTop: 'none',
-          borderRight: 'none',
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          width: '100%',
+          zIndex: 1,
+          padding: '1rem',
+          background: theme.colors.appBackground1_alpha,
+          borderBottom: theme.borderStyles.nonInteractive,
+          backdropFilter: 'blur(4rem)',
+          boxSizing: 'border-box',
         }}
       >
         <Flex justify="center">
@@ -36,6 +44,7 @@ export default function Navbar() {
                 <Link
                   href="https://tresabhi.github.io/"
                   style={{ color: 'inherit', textDecoration: 'none' }}
+                  target="_blank"
                 >
                   by TrèsAbhi
                 </Link>
@@ -57,7 +66,7 @@ export default function Navbar() {
             </Flex>
           </Flex>
         </Flex>
-      </Card>
+      </div>
     </Theme>
   );
 }

src/constants/tools.ts

@@ -14,12 +14,12 @@ export const TOOLS: Tool[] = [
   {
     id: 'ratings',
     title: 'Ratings',
-    description: 'Current and archived ratings leaderboards',
+    description: 'Ratings gamemode leaderboards',
   },
   {
     id: 'tankopedia',
     title: 'Tankopedia',
-    description: 'Full Blitz tank encyclopedia',
+    description: 'Blitz tank encyclopedia',
   },
   {
     id: 'inactive',

src/stitches.config.ts

@@ -4,6 +4,7 @@ import {
   orangeDark,
   slate,
   slateDark,
+  slateDarkA,
   tealDark,
 } from '@radix-ui/colors';
 import { createBorderStyles, createColors, createSpaces } from 'bepaint';
@@ -14,6 +15,7 @@ export const theme = {
 
   colors: {
     ...createColors(slateDark),
+    ...createColors(slateDarkA, 'alpha'),
     ...createColors(slate, 'light'),
 
     ...createColors(amberDark, 'amber'),