From b296ed2c3b75303dd62149ee1ee05dc737a49296 Mon Sep 17 00:00:00 2001 From: VINEETH ASOK KUMAR Date: Wed, 24 Sep 2025 19:03:55 +0200 Subject: [PATCH] Refactor global styles and remove unused assets Moved global body styles from index.css to App.module.css and removed index.css import from main.tsx. Deleted unused CSS files, Home.module.css, and several SVG assets from the stories/assets directory to clean up the codebase. --- src/App.css | 1 - src/App.module.css | 9 + src/index.css | 8 - src/main.tsx | 1 - src/stories/assets/code-brackets.svg | 1 - src/stories/assets/colors.svg | 1 - src/stories/assets/comments.svg | 1 - src/stories/assets/direction.svg | 1 - src/stories/assets/flow.svg | 1 - src/stories/assets/plugin.svg | 1 - src/stories/assets/repo.svg | 1 - src/stories/assets/stackalt.svg | 1 - src/styles/Home.module.css | 235 --------------------------- 13 files changed, 9 insertions(+), 253 deletions(-) delete mode 100644 src/App.css delete mode 100644 src/index.css delete mode 100644 src/stories/assets/code-brackets.svg delete mode 100644 src/stories/assets/colors.svg delete mode 100644 src/stories/assets/comments.svg delete mode 100644 src/stories/assets/direction.svg delete mode 100644 src/stories/assets/flow.svg delete mode 100644 src/stories/assets/plugin.svg delete mode 100644 src/stories/assets/repo.svg delete mode 100644 src/stories/assets/stackalt.svg delete mode 100644 src/styles/Home.module.css diff --git a/src/App.css b/src/App.css deleted file mode 100644 index 8b1378917..000000000 --- a/src/App.css +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/App.module.css b/src/App.module.css index 3904fef61..db38957ec 100644 --- a/src/App.module.css +++ b/src/App.module.css @@ -233,3 +233,12 @@ gap: 10px; padding: 10px 0; } + +/* Global body styles from index.css */ +:global(body) { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + min-height: 100vh; +} diff --git a/src/index.css b/src/index.css deleted file mode 100644 index a6ede10ec..000000000 --- a/src/index.css +++ /dev/null @@ -1,8 +0,0 @@ - -body { - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; - min-height: 100vh; -} diff --git a/src/main.tsx b/src/main.tsx index 8914ebdd1..64eacd7a1 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,7 +1,6 @@ import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App.tsx"; -import "./index.css"; ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( diff --git a/src/stories/assets/code-brackets.svg b/src/stories/assets/code-brackets.svg deleted file mode 100644 index 73de94776..000000000 --- a/src/stories/assets/code-brackets.svg +++ /dev/null @@ -1 +0,0 @@ -illustration/code-brackets \ No newline at end of file diff --git a/src/stories/assets/colors.svg b/src/stories/assets/colors.svg deleted file mode 100644 index 17d58d516..000000000 --- a/src/stories/assets/colors.svg +++ /dev/null @@ -1 +0,0 @@ -illustration/colors \ No newline at end of file diff --git a/src/stories/assets/comments.svg b/src/stories/assets/comments.svg deleted file mode 100644 index 6493a139f..000000000 --- a/src/stories/assets/comments.svg +++ /dev/null @@ -1 +0,0 @@ -illustration/comments \ No newline at end of file diff --git a/src/stories/assets/direction.svg b/src/stories/assets/direction.svg deleted file mode 100644 index 65676ac27..000000000 --- a/src/stories/assets/direction.svg +++ /dev/null @@ -1 +0,0 @@ -illustration/direction \ No newline at end of file diff --git a/src/stories/assets/flow.svg b/src/stories/assets/flow.svg deleted file mode 100644 index 8ac27db40..000000000 --- a/src/stories/assets/flow.svg +++ /dev/null @@ -1 +0,0 @@ -illustration/flow \ No newline at end of file diff --git a/src/stories/assets/plugin.svg b/src/stories/assets/plugin.svg deleted file mode 100644 index 29e5c690c..000000000 --- a/src/stories/assets/plugin.svg +++ /dev/null @@ -1 +0,0 @@ -illustration/plugin \ No newline at end of file diff --git a/src/stories/assets/repo.svg b/src/stories/assets/repo.svg deleted file mode 100644 index f386ee902..000000000 --- a/src/stories/assets/repo.svg +++ /dev/null @@ -1 +0,0 @@ -illustration/repo \ No newline at end of file diff --git a/src/stories/assets/stackalt.svg b/src/stories/assets/stackalt.svg deleted file mode 100644 index 9b7ad2743..000000000 --- a/src/stories/assets/stackalt.svg +++ /dev/null @@ -1 +0,0 @@ -illustration/stackalt \ No newline at end of file diff --git a/src/styles/Home.module.css b/src/styles/Home.module.css deleted file mode 100644 index 6037d2b4f..000000000 --- a/src/styles/Home.module.css +++ /dev/null @@ -1,235 +0,0 @@ -.main { - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; - padding: 6rem; - min-height: 100vh; -} - -.description { - display: inherit; - justify-content: inherit; - align-items: inherit; - font-size: 0.85rem; - max-width: var(--max-width); - width: 100%; - z-index: 2; - font-family: var(--font-mono); -} - -.description a { - display: flex; - justify-content: center; - align-items: center; - gap: 0.5rem; -} - -.description p { - position: relative; - margin: 0; - padding: 1rem; - background-color: rgba(var(--callout-rgb), 0.5); - border: 1px solid rgba(var(--callout-border-rgb), 0.3); - border-radius: var(--border-radius); -} - -.code { - font-weight: 700; - font-family: var(--font-mono); -} - -.grid { - display: grid; - grid-template-columns: repeat(4, minmax(25%, auto)); - width: var(--max-width); - max-width: 100%; -} - -.card { - padding: 1rem 1.2rem; - border-radius: var(--border-radius); - background: rgba(var(--card-rgb), 0); - border: 1px solid rgba(var(--card-border-rgb), 0); - transition: background 200ms, border 200ms; -} - -.card span { - display: inline-block; - transition: transform 200ms; -} - -.card h2 { - font-weight: 600; - margin-bottom: 0.7rem; -} - -.card p { - margin: 0; - opacity: 0.6; - font-size: 0.9rem; - line-height: 1.5; - max-width: 30ch; -} - -.center { - display: flex; - justify-content: center; - align-items: center; - position: relative; - padding: 4rem 0; -} - -.center::before { - background: var(--secondary-glow); - border-radius: 50%; - width: 480px; - height: 360px; - margin-left: -400px; -} - -.center::after { - background: var(--primary-glow); - width: 240px; - height: 180px; - z-index: -1; -} - -.center::before, -.center::after { - content: ''; - left: 50%; - position: absolute; - filter: blur(45px); - transform: translateZ(0); -} - -.logo { - position: relative; -} -/* Enable hover only on non-touch devices */ -@media (hover: hover) and (pointer: fine) { - .card:hover { - background: rgba(var(--card-rgb), 0.1); - border: 1px solid rgba(var(--card-border-rgb), 0.15); - } - - .card:hover span { - transform: translateX(4px); - } -} - -@media (prefers-reduced-motion) { - .card:hover span { - transform: none; - } -} - -/* Mobile */ -@media (max-width: 700px) { - .content { - padding: 4rem; - } - - .grid { - grid-template-columns: 1fr; - margin-bottom: 120px; - max-width: 320px; - text-align: center; - } - - .card { - padding: 1rem 2.5rem; - } - - .card h2 { - margin-bottom: 0.5rem; - } - - .center { - padding: 8rem 0 6rem; - } - - .center::before { - transform: none; - height: 300px; - } - - .description { - font-size: 0.8rem; - } - - .description a { - padding: 1rem; - } - - .description p, - .description div { - display: flex; - justify-content: center; - position: fixed; - width: 100%; - } - - .description p { - align-items: center; - inset: 0 0 auto; - padding: 2rem 1rem 1.4rem; - border-radius: 0; - border: none; - border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25); - background: linear-gradient( - to bottom, - rgba(var(--background-start-rgb), 1), - rgba(var(--callout-rgb), 0.5) - ); - background-clip: padding-box; - backdrop-filter: blur(24px); - } - - .description div { - align-items: flex-end; - pointer-events: none; - inset: auto 0 0; - padding: 2rem; - height: 200px; - background: linear-gradient( - to bottom, - transparent 0%, - rgb(var(--background-end-rgb)) 40% - ); - z-index: 1; - } -} - -/* Tablet and Smaller Desktop */ -@media (min-width: 701px) and (max-width: 1120px) { - .grid { - grid-template-columns: repeat(2, 50%); - } -} - -@media (prefers-color-scheme: dark) { - .vercelLogo { - filter: invert(1); - } - - .logo { - filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70); - } -} - -@keyframes rotate { - from { - transform: rotate(360deg); - } - to { - transform: rotate(0deg); - } -} - -.flexWrap { - display: flex; - flex-flow: row wrap; - gap: 10px; -}