Merge pull request #133 from tamu-datathon-org/add-tailwind-event

Add tailwind event

my-turborepo/apps/event-website2/package.json

@@ -19,6 +19,7 @@
     "@mdx-js/loader": "^3.1.0",
     "@next/mdx": "14.2.3",
     "@t3-oss/env-nextjs": "^0.10.1",
+    "@tailwindcss/postcss": "^4.0.9",
     "@tanstack/react-query": "^5.35.5",
     "@tanstack/react-table": "^8.20.5",
     "@trpc/client": "11.0.0-rc.364",

my-turborepo/apps/event-website2/postcss.config.cjs

@@ -1,5 +1,6 @@
 module.exports = {
   plugins: [
+    "tailwindcss",
     [
       "@csstools/postcss-global-data",
       {
@@ -20,5 +21,11 @@ module.exports = {
         },
       },
     ],
-  ],
+ ],
 };
+
+// module.exports = {
+//   plugins: {
+//     tailwindcss: {},
+//   },
+// };

my-turborepo/apps/event-website2/src/app/layout.tsx

@@ -1,5 +1,7 @@
 import "@/once-ui/styles/index.scss";
 import "@/once-ui/tokens/index.scss";
+import "../styles/index.css";
+
 
 import classNames from "classnames";
 

my-turborepo/apps/event-website2/src/app/og/route.tsx

@@ -7,7 +7,7 @@ export const runtime = "edge";
 export async function GET(request: Request) {
   let url = new URL(request.url);
   let title = url.searchParams.get("title") || "Portfolio";
-  const font = fetch(new URL("../../../public/fonts/Inter.ttf", import.meta.url)).then((res) =>
+  const font = fetch(new URL("../../../public/fonts/Game Of Squids.ttf", import.meta.url)).then((res) =>
     res.arrayBuffer(),
   );
   const fontData = await font;

my-turborepo/apps/event-website2/src/app/resources/config.js

@@ -6,6 +6,7 @@ const routes = {
   "/work": true,
   "/blog": true,
   "/gallery": true,
+  "/test": true,
 };
 
 // Enable password protection on selected routes

my-turborepo/apps/event-website2/src/app/test/page.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const TestPage: React.FC = () => {
+  return (
+    <div>
+      <h1 className="text-blue-500 text-sm font-squid-game">Welcome to the Test Page</h1>
+      <p>This is a simple page created with React and TypeScript.</p>
+    </div>
+  );
+};
+
+export default TestPage;

my-turborepo/apps/event-website2/src/components/about/TableOfContents.tsx

@@ -47,6 +47,9 @@ const TableOfContents: React.FC<TableOfContentsProps> = ({ structure, about }) =
       gap="32"
       hide="m"
     >
+      <div className="text-lg font-bold">
+        Table of Contents
+      </div>
       {structure
         .filter((section) => section.display)
         .map((section, sectionIndex) => (

my-turborepo/apps/event-website2/src/styles/index.css

@@ -0,0 +1,38 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+@layer base {
+    @font-face {
+        font-family: "myfont";
+        src: url("/fonts/Game Of Squids.ttf") format("truetype");
+    }
+
+    /* 
+    body {
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center center;
+    }
+
+    :root {
+        --radius: 0.5rem;
+    } */
+}
+
+/*
+#mlh-trust-badge {
+    display: block;
+    max-width: 100px;
+    min-width: 60px;
+    position: fixed;
+    left: 50px;
+    top: 0;
+    width: 10%;
+    z-index: 10000;
+}
+
+#mlh-trust-badge img {
+    width: 100%;
+} */

my-turborepo/apps/event-website2/tailwind.config.js

@@ -0,0 +1,95 @@
+/** @type {import('tailwindcss').Config} */
+const colors = require("tailwindcss/colors");
+
+module.exports = {
+  content: [
+    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  darkMode: "class",
+  theme: {
+    container: {
+      center: true,
+      padding: "1rem",
+    },
+
+    screens: {
+      xs: "450px",
+      // => @media (min-width: 450px) { ... }
+
+      sm: "575px",
+      // => @media (min-width: 576px) { ... }
+
+      md: "768px",
+      // => @media (min-width: 768px) { ... }
+
+      lg: "992px",
+      // => @media (min-width: 992px) { ... }
+
+      xl: "1200px",
+      // => @media (min-width: 1200px) { ... }
+
+      "2xl": "1400px",
+      // => @media (min-width: 1400px) { ... }
+    },
+    extend: {
+      fontFamily: {
+        "squid-game": ['myfont', 'sans-serif']
+      },
+      colors: {
+        current: "currentColor",
+        transparent: "transparent",
+        white: "#FFFFFF",
+        black: "#121723",
+        dark: "#1D2430",
+        primary: "#4A6CF7",
+        yellow: "#FBB040",
+        datablue: "#2C41DB",
+        "normal" : "#f9feff",
+        "bg-color-dark": "#171C28",
+        "body-color": {
+          DEFAULT: "#212327",
+          dark: "#9da7b9",
+        },
+        stroke: {
+          stroke: "#E3E8EF",
+          dark: "#353943",
+        },
+        gray: {
+          ...colors.gray,
+          dark: "#1E232E",
+          light: "#F0F2F9",
+        },
+      },
+
+      boxShadow: {
+        signUp: "0px 5px 10px rgba(4, 10, 34, 0.2)",
+        one: "0px 2px 3px rgba(7, 7, 77, 0.05)",
+        two: "0px 5px 10px rgba(6, 8, 15, 0.1)",
+        three: "0px 5px 15px rgba(6, 8, 15, 0.05)",
+        sticky: "inset 0 -1px 0 0 rgba(0, 0, 0, 0.1)",
+        "sticky-dark": "inset 0 -1px 0 0 rgba(255, 255, 255, 0.1)",
+        "feature-2": "0px 10px 40px rgba(48, 86, 211, 0.12)",
+        submit: "0px 5px 20px rgba(4, 10, 34, 0.1)",
+        "submit-dark": "0px 5px 20px rgba(4, 10, 34, 0.1)",
+        btn: "0px 1px 2px rgba(4, 10, 34, 0.15)",
+        "btn-hover": "0px 1px 2px rgba(0, 0, 0, 0.15)",
+        "btn-light": "0px 1px 2px rgba(0, 0, 0, 0.1)",
+      },
+      dropShadow: {
+        three: "0px 5px 15px rgba(6, 8, 15, 0.05)",
+      },
+      keyframes: {
+        floatx: {
+          "0%, 100%": { boxShadow: "none", transform: "translateY(0)" },
+          "50%": { boxShadow: "none",transform: "translateY(-20px)" },
+        },
+      },
+      animation: {
+        float: "floatx 3s ease-in-out infinite",
+      },
+    },
+  },
+  plugins: [],
+};