refactor: redesign

playliga · Nov 4, 2024 · eadaf6a · eadaf6a
1 parent 1a9c7d0
commit eadaf6a
Show file tree

Hide file tree

Showing 33 changed files with 411 additions and 709 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,25 +1,22 @@
-# Logs
-logs
+.DS_Store
+.idea
+dist/
+generated/
+logs/
+node_modules/
+
+*.local
 *.log
+*.njsproj
+*.ntvs*
+*.sln
+*.suo
+*.sw?
+lerna-debug.log*
 npm-debug.log*
+pnpm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
-generated/
 
-# Editor directories and files
 .vscode/*
 !.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
diff --git a/index.html b/index.html
@@ -3,7 +3,10 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
+    />
     <title>LIGA Esports Manager</title>
   </head>
   <body>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "liga-public",
-  "version": "3.0.1",
+  "version": "4.0.0",
   "private": true,
   "type": "module",
   "homepage": "https://lemonpole.github.io/liga-public/",

diff --git a/src/assets/cs16.png → public/cs16.png b/src/assets/cs16.png → public/cs16.png
diff --git a/src/assets/demo.mp4 → public/demo.mp4 b/src/assets/demo.mp4 → public/demo.mp4
diff --git a/public/squad.png b/public/squad.png
diff --git a/public/transfers.png b/public/transfers.png
diff --git a/src/assets/footer.png b/src/assets/footer.png
diff --git a/src/assets/market.png b/src/assets/market.png
diff --git a/src/assets/splash.png b/src/assets/splash.png
diff --git a/src/assets/splash.webm b/src/assets/splash.webm
diff --git a/src/assets/squad.png b/src/assets/squad.png
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -1 +1 @@
-export { default as Octocat } from "./octocat";
+// silence is golden...
diff --git a/src/components/octocat.tsx b/src/components/octocat.tsx
diff --git a/src/index.css b/src/index.css
@@ -3,107 +3,41 @@
 @tailwind utilities;
 
 /** global styles */
-html {
-  @apply h-full cursor-default motion-safe:scroll-smooth;
-  font-family: "Montserrat Variable", Helvetica, sans-serif;
-}
-
+html,
 body {
-  @apply h-full overflow-x-hidden bg-base-100;
-}
-
-main {
-  @apply center gap-24 py-24;
-}
-
-h2 {
-  @apply gradient-text text-5xl font-extrabold tracking-tighter sm:text-8xl;
+  @apply h-full;
 }
 
-code {
-  @apply gradient-text;
+html {
+  @apply cursor-default bg-base-100 motion-safe:scroll-smooth;
   font-family: "JetBrains Mono Variable", Courier, monospace;
 }
 
-a {
-  @apply transition-colors duration-200 hover:text-secondary;
+h1,
+h2,
+h3,
+code {
+  font-family: "Montserrat Variable", Helvetica, sans-serif;
 }
 
-/** image and video gradient background */
-figure:has(video),
-figure:has(img),
-p:has(img:only-child) {
-  @apply gradient-media;
+img,
+video {
+  @apply drop-shadow;
 }
 
-/** container sections */
-section[id] {
-  @apply center scroll-mt-24 gap-12 px-4 sm:w-2/3;
-
-  & > header {
-    @apply center order-first gap-4;
-  }
-
-  & > header + p {
-    @apply order-first max-w-xl text-center text-2xl font-extrabold;
-  }
+button,
+code {
+  @apply !rounded-none;
 }
 
-/** react root container */
-#root {
-  @apply h-full;
+/** adds a hash to anchor elements */
+a:is([id], [title]) {
+  @apply before:text-muted no-underline before:content-["#_"] hover:underline hover:before:text-base-content;
 }
 
-/** animations */
-@keyframes octocat-wave {
-  0%,
-  100% {
-    transform: rotate(0);
-  }
-
-  20%,
-  60% {
-    transform: rotate(-25deg);
-  }
-
-  40%,
-  80% {
-    transform: rotate(10deg);
-  }
-}
-
-/** components */
-@layer components {
-  .fixed-header {
-    @apply !fixed !bottom-auto top-0 !border-b-base-content/10 bg-base-100 !text-base-content;
-
-    & > a > img {
-      @apply !ml-0 !scale-100;
-    }
-  }
-
-  .github-corner {
-    @apply absolute right-0 top-0 z-10;
-
-    .octo-arm,
-    &:hover .octo-arm {
-      animation: octocat-wave 560ms ease-in-out;
-    }
-  }
-
-  .gradient-media {
-    @apply relative;
-
-    &:before {
-      content: "";
-      @apply gradient-bg absolute -inset-1 block w-full origin-[50%_50%] rotate-3 rounded-2xl;
-    }
-
-    img,
-    video {
-      @apply relative w-full self-center justify-self-center rounded-xl object-cover;
-    }
-  }
+/** the main container */
+main {
+  @apply px-8 py-16 md:col-span-3;
 }
 
 /** utilities */
@@ -118,12 +52,15 @@ section[id] {
     }
   }
 
-  .gradient-bg {
-    @apply bg-gradient-to-br from-indigo-500 via-fuchsia-500 to-pink-500;
+  .stack-x {
+    @apply flex;
+  }
+
+  .stack-y {
+    @apply flex flex-col;
   }
 
-  .gradient-text {
-    @apply bg-clip-text text-transparent;
-    @apply bg-gradient-to-br from-indigo-500 via-fuchsia-500 to-pink-500;
+  .text-muted {
+    @apply text-base-content/40 dark:text-base-content/20;
   }
 }
diff --git a/src/index.tsx b/src/index.tsx
@@ -9,13 +9,12 @@ import "./index.css";
 import React from "react";
 import ReactDOM from "react-dom/client";
 import Routes from "@liga/routes";
-import Partials from "@liga/partials";
 import { Api } from "@liga/lib";
+import { Header } from "@liga/partials";
 import {
   createHashRouter,
   Outlet,
   RouterProvider,
-  ScrollRestoration,
   useLocation,
 } from "react-router-dom";
 
@@ -30,9 +29,18 @@ const routes = createHashRouter([
         loader: Routes.Home.loader,
       },
       {
-        path: "/blog",
-        element: <Routes.Blog.Component />,
-        loader: Routes.Blog.loader,
+        path: "changelog",
+        element: <Routes.Changelog />,
+        loader: Routes.Home.loader,
+      },
+      {
+        path: "blog",
+        element: <Routes.Blog />,
+        loader: Routes.Home.loader,
+      },
+      {
+        path: "features",
+        element: <Routes.Features />,
       },
     ],
   },
@@ -54,12 +62,10 @@ function Root() {
   }, [location.hash]);
 
   return (
-    <React.Fragment>
-      <ScrollRestoration />
-      <Partials.Header />
+    <div className="w-full md:mx-auto md:grid md:w-1/2 md:grid-cols-4">
+      <Header />
       <Outlet />
-      <Partials.Footer />
-    </React.Fragment>
+    </div>
   );
 }
 

diff --git a/src/lib/api.ts b/src/lib/api.ts
@@ -63,6 +63,7 @@ export const Query = {
               nodes {
                 downloadUrl
                 name
+                size
               }
             }
           }

diff --git a/src/lib/constants.ts b/src/lib/constants.ts
@@ -0,0 +1,15 @@
+/**
+ * Shared constants and enums.
+ *
+ * @module
+ */
+
+/**
+ * Theme settings.
+ *
+ * @enum
+ */
+export enum ThemeSetting {
+  LIGHT = "nord",
+  DARK = "coffee",
+}
diff --git a/src/lib/index.ts b/src/lib/index.ts
@@ -1 +1,3 @@
 export * as Api from "./api";
+export * as Constants from "./constants";
+export * as Util from "./util";
diff --git a/src/lib/util.ts b/src/lib/util.ts
@@ -0,0 +1,35 @@
+/**
+ * Utility functions.
+ *
+ * @module
+ */
+
+/**
+ * Converts bits to human-readable sizes.
+ *
+ * @param bytes     The bytes.
+ * @param decimals  The decimals.
+ * @function
+ */
+export function formatBytes(bytes: number, decimals = 2) {
+  if (!+bytes) {
+    return "0 Bytes";
+  }
+
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = [
+    "Bytes",
+    "KiB",
+    "MiB",
+    "GiB",
+    "TiB",
+    "PiB",
+    "EiB",
+    "ZiB",
+    "YiB",
+  ];
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+}
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export { default as Octocat } from "./octocat";
		// silence is golden...
-Original file line number
+Diff line change
@@ Expand Up / @@ -63,6 +63,7 @@ export const Query = { @@
                   nodes {
                     downloadUrl
                     name
+                    size
                   }
                 }
               }
@@ Expand Down @@