From b4c5362e29318668e8584ffd5baf046cab552e24 Mon Sep 17 00:00:00 2001 From: Mahesh ghosh Date: Tue, 19 May 2026 12:39:10 +0530 Subject: [PATCH] Style sheet change APP.CSS & INDEX.CSS --- src/App.css | 163 ++++++++++++++++++++++++++++++++++--- src/index.css | 221 ++++++++++++++++++++++++++++++++++++++++---------- 2 files changed, 329 insertions(+), 55 deletions(-) diff --git a/src/App.css b/src/App.css index b9d355d..e5b70f9 100644 --- a/src/App.css +++ b/src/App.css @@ -1,42 +1,181 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +/* ========================================= + ROOT VARIABLES +========================================= */ + +:root { + --max-width: 1280px; + + --primary-color: #646cff; + --react-color: #61dafb; + + --text-muted: #94a3b8; + + --card-bg: rgba(255, 255, 255, 0.05); + --card-border: rgba(255, 255, 255, 0.08); + + --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.1); + --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.2); + + --transition: 0.3s ease; + --radius: 1rem; +} + +/* ========================================= + GLOBAL STYLES +========================================= */ + +* { + box-sizing: border-box; +} + +body { + margin: 0; + + min-width: 320px; + min-height: 100vh; + + font-family: Inter, sans-serif; + + background: linear-gradient( + 135deg, + #0f172a, + #111827 + ); + + color: white; + + -webkit-font-smoothing: antialiased; +} + +/* ========================================= + ROOT CONTAINER +========================================= */ + #root { - max-width: 1280px; - margin: 0 auto; + max-width: var(--max-width); + + margin-inline: auto; + padding: 2rem; + text-align: center; } +/* ========================================= + LOGO +========================================= */ + .logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; + height: 6rem; + + padding: 1.25rem; + + border-radius: 50%; + + transition: + transform var(--transition), + filter var(--transition); + + will-change: transform, filter; } + .logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); + transform: scale(1.05); + + filter: + drop-shadow(0 0 2rem rgba(100, 108, 255, 0.6)); } + .logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); + filter: + drop-shadow(0 0 2rem rgba(97, 218, 251, 0.7)); } +/* ========================================= + SPIN ANIMATION +========================================= */ + @keyframes logo-spin { from { transform: rotate(0deg); } + to { transform: rotate(360deg); } } +/* Motion-safe animation */ + @media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; + .logo-spin { + animation: + logo-spin 20s linear infinite; } } +/* ========================================= + CARD +========================================= */ + .card { - padding: 2em; + padding: 2rem; + + margin-top: 2rem; + + border-radius: var(--radius); + + background: var(--card-bg); + + border: 1px solid var(--card-border); + + backdrop-filter: blur(12px); + + box-shadow: var(--shadow-sm); + + transition: + transform var(--transition), + box-shadow var(--transition); } +.card:hover { + transform: translateY(-4px); + + box-shadow: var(--shadow-md); +} + +/* ========================================= + TEXT +========================================= */ + .read-the-docs { - color: #888; + margin-top: 1rem; + + color: var(--text-muted); + + font-size: 0.95rem; + + line-height: 1.6; } + +/* ========================================= + RESPONSIVE +========================================= */ + +@media (max-width: 768px) { + #root { + padding: 1rem; + } + + .logo { + height: 4.5rem; + } + + .card { + padding: 1.5rem; + } +} \ No newline at end of file diff --git a/src/index.css b/src/index.css index 3f5943c..3b1d739 100644 --- a/src/index.css +++ b/src/index.css @@ -2,7 +2,37 @@ @tailwind components; @tailwind utilities; -@keyframes how-it-works-dash-flow { +/* ========================================================= + ROOT DESIGN TOKENS +========================================================= */ + +:root { + --flow-primary: rgba(96, 165, 250, 0.78); + --flow-secondary: rgba(96, 165, 250, 0.08); + + --flow-primary-light: rgba(59, 130, 246, 0.6); + --flow-secondary-light: rgba(59, 130, 246, 0.12); + + --flow-shadow: 0 0 18px rgba(59, 130, 246, 0.24); + --flow-shadow-light: 0 0 14px rgba(59, 130, 246, 0.14); + + --flow-radius: 9999px; + + --flow-horizontal-size: 28px 2px; + --flow-vertical-size: 2px 28px; + + --flow-animation-speed: 10s; + + --success: #2ea44f; + --danger: #cf222e; + --primary: #0969da; +} + +/* ========================================================= + ANIMATIONS +========================================================= */ + +@keyframes flow-horizontal { from { background-position: 0 0; } @@ -12,7 +42,7 @@ } } -@keyframes how-it-works-dash-flow-vertical { +@keyframes flow-vertical { from { background-position: 0 0; } @@ -22,70 +52,175 @@ } } -.how-it-works-flow-line { +/* ========================================================= + FLOW LINE BASE +========================================================= */ + +.flow-line { + position: relative; + display: block; - height: 2px; - border-radius: 9999px; - background-image: repeating-linear-gradient( - 90deg, - rgba(96, 165, 250, 0.78) 0, - rgba(96, 165, 250, 0.78) 14px, - rgba(96, 165, 250, 0.08) 14px, - rgba(96, 165, 250, 0.08) 26px - ); - background-size: 28px 2px; - animation: how-it-works-dash-flow 10s linear infinite; - box-shadow: 0 0 18px rgba(59, 130, 246, 0.24); + + border-radius: var(--flow-radius); + + will-change: background-position; + + transform: translateZ(0); + + backface-visibility: hidden; + + transition: + opacity 0.3s ease, + transform 0.3s ease, + box-shadow 0.3s ease; } -.how-it-works-flow-line.light { +/* ========================================================= + HORIZONTAL FLOW LINE +========================================================= */ + +.flow-line--horizontal { + width: 100%; + height: 2px; + background-image: repeating-linear-gradient( 90deg, - rgba(59, 130, 246, 0.6) 0, - rgba(59, 130, 246, 0.6) 12px, - rgba(59, 130, 246, 0.12) 12px, - rgba(59, 130, 246, 0.12) 24px + var(--flow-primary) 0, + var(--flow-primary) 14px, + var(--flow-secondary) 14px, + var(--flow-secondary) 26px ); - box-shadow: 0 0 14px rgba(59, 130, 246, 0.14); + + background-size: var(--flow-horizontal-size); + + animation: + flow-horizontal + var(--flow-animation-speed) + linear + infinite; + + box-shadow: var(--flow-shadow); } -.how-it-works-flow-line.vertical { +/* ========================================================= + VERTICAL FLOW LINE +========================================================= */ + +.flow-line--vertical { width: 2px; height: 100%; + background-image: repeating-linear-gradient( 180deg, - rgba(96, 165, 250, 0.78) 0, - rgba(96, 165, 250, 0.78) 14px, - rgba(96, 165, 250, 0.08) 14px, - rgba(96, 165, 250, 0.08) 26px + var(--flow-primary) 0, + var(--flow-primary) 14px, + var(--flow-secondary) 14px, + var(--flow-secondary) 26px ); - background-size: 2px 28px; - animation: how-it-works-dash-flow-vertical 10s linear infinite; + + background-size: var(--flow-vertical-size); + + animation: + flow-vertical + var(--flow-animation-speed) + linear + infinite; + + box-shadow: var(--flow-shadow); } -.how-it-works-flow-line.vertical.light { +/* ========================================================= + LIGHT VARIANT +========================================================= */ + +.flow-line--light.flow-line--horizontal { + background-image: repeating-linear-gradient( + 90deg, + var(--flow-primary-light) 0, + var(--flow-primary-light) 12px, + var(--flow-secondary-light) 12px, + var(--flow-secondary-light) 24px + ); + + box-shadow: var(--flow-shadow-light); +} + +.flow-line--light.flow-line--vertical { background-image: repeating-linear-gradient( 180deg, - rgba(59, 130, 246, 0.6) 0, - rgba(59, 130, 246, 0.6) 12px, - rgba(59, 130, 246, 0.12) 12px, - rgba(59, 130, 246, 0.12) 24px + var(--flow-primary-light) 0, + var(--flow-primary-light) 12px, + var(--flow-secondary-light) 12px, + var(--flow-secondary-light) 24px ); + + box-shadow: var(--flow-shadow-light); } +/* ========================================================= + INTERACTIVE STATES +========================================================= */ -.icon-merged { - color: #2ea44f; /* Or use your theme color */ +.flow-line:hover { + opacity: 0.9; + transform: scale(1.01); } -.icon-pr-open { - color: #0969da; + +/* ========================================================= + REDUCED MOTION ACCESSIBILITY +========================================================= */ + +@media (prefers-reduced-motion: reduce) { + .flow-line--horizontal, + .flow-line--vertical { + animation: none; + } } -.icon-pr-closed { - color: #cf222e; + +/* ========================================================= + ICON STATES +========================================================= */ + +.icon { + transition: + color 0.25s ease, + transform 0.25s ease; } -.icon-issue-open { - color: #2ea44f; + +.icon:hover { + transform: scale(1.08); +} + +.icon--merged { + color: var(--success); +} + +.icon--pr-open { + color: var(--primary); +} + +.icon--pr-closed { + color: var(--danger); } -.icon-issue-closed { - color: #cf222e; + +.icon--issue-open { + color: var(--success); +} + +.icon--issue-closed { + color: var(--danger); } + +/* ========================================================= + DARK MODE SUPPORT +========================================================= */ + +.dark { + --flow-primary: rgba(147, 197, 253, 0.8); + --flow-secondary: rgba(147, 197, 253, 0.08); + + --flow-primary-light: rgba(96, 165, 250, 0.6); + --flow-secondary-light: rgba(96, 165, 250, 0.1); + + --flow-shadow: 0 0 20px rgba(96, 165, 250, 0.2); +} \ No newline at end of file