From 9466c1e1e28698cb3bf8ee766be31b033220e9ab Mon Sep 17 00:00:00 2001 From: Miodec Date: Thu, 15 Jan 2026 23:50:58 +0100 Subject: [PATCH 01/46] brain mushy --- frontend/package.json | 2 + frontend/src/html/head.html | 1 + frontend/src/styles/tailwind.css | 44 ++ .../ts/components/layout/footer/Footer.scss | 48 -- .../ts/components/layout/footer/Footer.tsx | 22 +- frontend/tailwind.config.js | 26 + frontend/vite.config.ts | 2 + monkeytype.code-workspace | 1 + pnpm-lock.yaml | 458 +++++++++++++++--- 9 files changed, 477 insertions(+), 127 deletions(-) create mode 100644 frontend/src/styles/tailwind.css create mode 100644 frontend/tailwind.config.js diff --git a/frontend/package.json b/frontend/package.json index 09994f084fbe..8a923017fbd7 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -62,6 +62,7 @@ "@monkeytype/oxlint-config": "workspace:*", "@monkeytype/typescript-config": "workspace:*", "@solidjs/testing-library": "0.8.10", + "@tailwindcss/vite": "4.1.18", "@testing-library/dom": "10.4.1", "@testing-library/jest-dom": "6.9.1", "@testing-library/user-event": "14.6.1", @@ -93,6 +94,7 @@ "sass": "1.70.0", "solid-js": "1.9.10", "subset-font": "2.3.0", + "tailwindcss": "4.1.18", "tsx": "4.16.2", "typescript": "5.9.3", "unplugin-inject-preload": "3.0.0", diff --git a/frontend/src/html/head.html b/frontend/src/html/head.html index 1588dfd003b9..ee443183a4af 100644 --- a/frontend/src/html/head.html +++ b/frontend/src/html/head.html @@ -113,6 +113,7 @@ + diff --git a/frontend/src/styles/tailwind.css b/frontend/src/styles/tailwind.css new file mode 100644 index 000000000000..c7e38d3c828b --- /dev/null +++ b/frontend/src/styles/tailwind.css @@ -0,0 +1,44 @@ +@import "tailwindcss"; + +/* @config "../../tailwind.config.js"; */ + +@theme { + --color-*: initial; + --color-bg: var(--bg-color); + --color-main: var(--main-color); + --color-caret: var(--caret-color); + --color-sub: var(--sub-color); + --color-sub-alt: var(--sub-alt-color); + --color-text: var(--text-color); + --color-error: var(--error-color); + --color-error-extra: var(--error-extra-color); + --color-colorful-error: var(--colorful-error-color); + --color-colorful-error-extra: var(--colorful-error-extra-color); + + --spacing: 0.25em; + + --breakpoint-*: initial; +} + +@utility display-none { + display: none; +} + +@custom-variant 2xl (@media (min-width: calc(1537px + 5rem))); +@custom-variant xl (@media (max-width: calc(1536px + 5rem))); +@custom-variant lg (@media (max-width: calc(1280px + 5rem))); +@custom-variant md (@media (max-width: calc(1024px + 5rem))); +@custom-variant sm (@media (max-width: calc(768px + 5rem))); +@custom-variant xs (@media (max-width: calc(640px + 5rem))); +@custom-variant xxs (@media (max-width: 425px)); +@custom-variant xxxs (@media (max-width: 330px)); + +/* $breakpoints: ( */ +/* orange: calc(1536px + 5rem), + yellow: calc(1280px + 5rem), + green: calc(1024px + 5rem), + blue: calc(768px + 5rem), + purple: calc(640px + 5rem), + brown: 425px, + gray: 330px +); */ diff --git a/frontend/src/ts/components/layout/footer/Footer.scss b/frontend/src/ts/components/layout/footer/Footer.scss index 789db2135dd8..bd8c7d2a5f89 100644 --- a/frontend/src/ts/components/layout/footer/Footer.scss +++ b/frontend/src/ts/components/layout/footer/Footer.scss @@ -1,17 +1,6 @@ @use "../../../../styles/media.scss" as *; footer { - position: relative; - font-size: 0.75rem; - color: var(--sub-color); - - .keyTips { - text-align: center; - transition: 0.125s; - margin-bottom: 2em; - line-height: 2; - } - #commandLineMobileButton { display: none; // top: -4rem; @@ -31,28 +20,6 @@ footer { transition: 0.25s; } - .leftright { - margin: -0.5em; - display: flex; - justify-content: space-between; - gap: 2rem; - - .left { - text-align: left; - display: flex; - justify-items: start; - width: max-content; - } - .right { - text-align: right; - display: flex; - justify-self: right; - width: max-content; - height: max-content; - justify-items: end; - } - } - .currentVersion { display: flex; #newVersionIndicator { @@ -85,21 +52,6 @@ footer { } } - @include media-query(green) { - & { - .leftright { - .left { - display: grid; - grid-template-columns: repeat(4, auto); - } - .right { - display: grid; - grid-template-columns: 1fr; - } - } - } - } - @include media-query(purple) { & { .leftright { diff --git a/frontend/src/ts/components/layout/footer/Footer.tsx b/frontend/src/ts/components/layout/footer/Footer.tsx index 62de12629b26..dbf3effb34c7 100644 --- a/frontend/src/ts/components/layout/footer/Footer.tsx +++ b/frontend/src/ts/components/layout/footer/Footer.tsx @@ -8,7 +8,19 @@ import { ScrollToTop } from "./ScrollToTop"; export function Footer(): JSXElement { return ( -