From 1d230250d56c346295165b8cf09b5a11378097c2 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 9 Nov 2025 12:10:04 +0000 Subject: [PATCH 1/5] Initial plan From e6ab2409e7c45366c44b44e787777813ebae05ca Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 9 Nov 2025 12:22:02 +0000 Subject: [PATCH 2/5] Redesign blog page with GitHub-inspired layout and sidebar navigation Co-authored-by: Adez017 <142787780+Adez017@users.noreply.github.com> --- package-lock.json | 50 +- src/pages/blogs/blogs-new.css | 1896 +++++++-------------------------- src/pages/blogs/index.tsx | 305 +++--- 3 files changed, 538 insertions(+), 1713 deletions(-) diff --git a/package-lock.json b/package-lock.json index 89fbbbad..cf9df4f0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -280,7 +280,6 @@ "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-5.40.0.tgz", "integrity": "sha512-nlr/MMgoLNUHcfWC5Ns2ENrzKx9x51orPc6wJ8Ignv1DsrUmKm0LUih+Tj3J+kxYofzqQIQRU495d4xn3ozMbg==", "license": "MIT", - "peer": true, "dependencies": { "@algolia/client-common": "5.40.0", "@algolia/requester-browser-xhr": "5.40.0", @@ -441,7 +440,6 @@ "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.4.tgz", "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==", "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.3", @@ -2276,7 +2274,6 @@ } ], "license": "MIT", - "peer": true, "engines": { "node": ">=18" }, @@ -2299,7 +2296,6 @@ } ], "license": "MIT", - "peer": true, "engines": { "node": ">=18" } @@ -2409,7 +2405,6 @@ "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz", "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==", "license": "MIT", - "peer": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -2831,7 +2826,6 @@ "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz", "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==", "license": "MIT", - "peer": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -3819,7 +3813,6 @@ "resolved": "https://registry.npmjs.org/@docusaurus/plugin-content-docs/-/plugin-content-docs-3.9.2.tgz", "integrity": "sha512-C5wZsGuKTY8jEYsqdxhhFOe1ZDjH0uIYJ9T/jebHwkyxqnr4wW0jTkB72OMqNjsoQRcb0JN3PcSeTwFlVgzCZg==", "license": "MIT", - "peer": true, "dependencies": { "@docusaurus/core": "3.9.2", "@docusaurus/logger": "3.9.2", @@ -5928,7 +5921,6 @@ "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz", "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==", "license": "MIT", - "peer": true, "dependencies": { "@emotion/memoize": "^0.8.1" } @@ -6201,7 +6193,6 @@ "resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.9.13.tgz", "integrity": "sha512-GfiI1JxJ7ecluEmDjPzseRXk/PX31hS7+tjgBopL7XjB2hLUdR+0FTMXy2Q3/hXezypDvU6or7gVFizDESrkXw==", "license": "Apache-2.0", - "peer": true, "dependencies": { "@firebase/component": "0.6.4", "@firebase/logger": "0.4.0", @@ -6259,7 +6250,6 @@ "resolved": "https://registry.npmjs.org/@firebase/app-compat/-/app-compat-0.2.13.tgz", "integrity": "sha512-j6ANZaWjeVy5zg6X7uiqh6lM6o3n3LD1+/SJFNs9V781xyryyZWXe+tmnWNWPkP086QfJoNkWN9pMQRqSG4vMg==", "license": "Apache-2.0", - "peer": true, "dependencies": { "@firebase/app": "0.9.13", "@firebase/component": "0.6.4", @@ -6272,8 +6262,7 @@ "version": "0.9.0", "resolved": "https://registry.npmjs.org/@firebase/app-types/-/app-types-0.9.0.tgz", "integrity": "sha512-AeweANOIo0Mb8GiYm3xhTEBVCmPwTYAu9Hcd2qSkLuga/6+j9b1Jskl5bpiSQWy9eJ/j5pavxj6eYogmnuzm+Q==", - "license": "Apache-2.0", - "peer": true + "license": "Apache-2.0" }, "node_modules/@firebase/auth": { "version": "0.23.2", @@ -6683,7 +6672,6 @@ "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz", "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==", "license": "Apache-2.0", - "peer": true, "dependencies": { "tslib": "^2.1.0" } @@ -7300,7 +7288,6 @@ "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-3.1.1.tgz", "integrity": "sha512-f++rKLQgUVYDAtECQ6fn/is15GkEH9+nZPM3MS0RcxVqoTfawHvDlSCH7JbMhAM6uJ32v3eXLvLmLvjGu7PTQw==", "license": "MIT", - "peer": true, "dependencies": { "@types/mdx": "^2.0.0" }, @@ -7963,7 +7950,6 @@ "resolved": "https://registry.npmjs.org/@svgr/core/-/core-8.1.0.tgz", "integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==", "license": "MIT", - "peer": true, "dependencies": { "@babel/core": "^7.21.3", "@svgr/babel-preset": "8.1.0", @@ -8480,8 +8466,7 @@ } ], "hasInstallScript": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/@tsparticles/interaction-external-attract": { "version": "3.9.1", @@ -9434,7 +9419,6 @@ "integrity": "sha512-/EEvYBdT3BflCWvTMO7YkYBHVE9Ci6XdqZciZANQgKpaiDRGOLIlRo91jbTNRQjgPFWVaRxcYc0luVNFitz57A==", "devOptional": true, "license": "MIT", - "peer": true, "peerDependencies": { "@types/react": "^19.2.0" } @@ -9612,7 +9596,6 @@ "integrity": "sha512-BnOroVl1SgrPLywqxyqdJ4l3S2MsKVLDVxZvjI1Eoe8ev2r3kGDo+PcMihNmDE+6/KjkTubSJnmqGZZjQSBq/g==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.46.2", "@typescript-eslint/types": "8.46.2", @@ -10071,7 +10054,6 @@ "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz", "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "license": "MIT", - "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -10157,7 +10139,6 @@ "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz", "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==", "license": "MIT", - "peer": true, "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", @@ -10203,7 +10184,6 @@ "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-5.40.0.tgz", "integrity": "sha512-a9aIL2E3Z7uYUPMCmjMFFd5MWhn+ccTubEvnMy7rOTZCB62dXBJtz0R5BZ/TPuX3R9ocBsgWuAbGWQ+Ph4Fmlg==", "license": "MIT", - "peer": true, "dependencies": { "@algolia/abtesting": "1.6.0", "@algolia/client-abtesting": "5.40.0", @@ -10962,7 +10942,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "baseline-browser-mapping": "^2.8.9", "caniuse-lite": "^1.0.30001746", @@ -11317,7 +11296,6 @@ "resolved": "https://registry.npmjs.org/chevrotain/-/chevrotain-11.0.3.tgz", "integrity": "sha512-ci2iJH6LeIkvP9eJW6gpueU8cnZhv85ELY8w8WiFtNjMHA5ad6pQLaJo9mEly/9qUyCpvqX8/POVUTf18/HFdw==", "license": "Apache-2.0", - "peer": true, "dependencies": { "@chevrotain/cst-dts-gen": "11.0.3", "@chevrotain/gast": "11.0.3", @@ -12208,7 +12186,6 @@ "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz", "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==", "license": "MIT", - "peer": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -12539,7 +12516,6 @@ "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.33.1.tgz", "integrity": "sha512-iJc4TwyANnOGR1OmWhsS9ayRS3s+XQ185FmuHObThD+5AeJCakAAbWv8KimMTt08xCCLNgneQwFp+JRJOr9qGQ==", "license": "MIT", - "peer": true, "engines": { "node": ">=0.10" } @@ -12961,7 +12937,6 @@ "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz", "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==", "license": "ISC", - "peer": true, "engines": { "node": ">=12" } @@ -13555,8 +13530,7 @@ "version": "8.6.0", "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz", "integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==", - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/embla-carousel-autoplay": { "version": "8.6.0", @@ -13942,7 +13916,6 @@ "integrity": "sha512-t5aPOpmtJcZcz5UJyY2GbvpDlsK5E8JqRqoKtfiKE3cNh437KIqfJr3A3AKf5k64NPx6d0G3dno6XDY05PqPtw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -14775,7 +14748,6 @@ "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", "license": "MIT", - "peer": true, "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", @@ -14903,7 +14875,6 @@ "resolved": "https://registry.npmjs.org/firebase/-/firebase-9.23.0.tgz", "integrity": "sha512-/4lUVY0lUvBDIaeY1q6dUYhS8Sd18Qb9CgWkPZICUo9IXpJNCEagfNZXBBFCkMTTN5L5gx2Hjr27y21a9NzUcA==", "license": "Apache-2.0", - "peer": true, "dependencies": { "@firebase/analytics": "0.10.0", "@firebase/analytics-compat": "0.2.6", @@ -21110,7 +21081,6 @@ "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", "license": "MIT", - "peer": true, "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", @@ -21884,7 +21854,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", @@ -22788,7 +22757,6 @@ "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz", "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==", "license": "MIT", - "peer": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -23402,7 +23370,6 @@ "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==", "dev": true, "license": "MIT", - "peer": true, "bin": { "prettier": "bin/prettier.cjs" }, @@ -23809,7 +23776,6 @@ "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", "license": "MIT", - "peer": true, "dependencies": { "loose-envify": "^1.1.0" }, @@ -23822,7 +23788,6 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", "license": "MIT", - "peer": true, "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.2" @@ -23888,7 +23853,6 @@ "resolved": "https://registry.npmjs.org/@docusaurus/react-loadable/-/react-loadable-6.0.0.tgz", "integrity": "sha512-YMMxTUQV/QFSnbgrP3tjDzLHRg7vsbMn8e9HAa8o/1iXoiomo48b7sk/kkmWEuWNDPJVlKSJRB6Y2fHqdJk+SQ==", "license": "MIT", - "peer": true, "dependencies": { "@types/react": "*" }, @@ -23917,7 +23881,6 @@ "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz", "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==", "license": "MIT", - "peer": true, "dependencies": { "@babel/runtime": "^7.12.13", "history": "^4.9.0", @@ -26413,8 +26376,7 @@ "version": "2.8.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", - "license": "0BSD", - "peer": true + "license": "0BSD" }, "node_modules/tunnel-agent": { "version": "0.6.0", @@ -26589,7 +26551,6 @@ "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==", "devOptional": true, "license": "Apache-2.0", - "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -26984,7 +26945,6 @@ "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", "license": "MIT", - "peer": true, "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", @@ -27257,7 +27217,6 @@ "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.102.1.tgz", "integrity": "sha512-7h/weGm9d/ywQ6qzJ+Xy+r9n/3qgp/thalBbpOi5i223dPXKi04IBtqPN9nTd+jBc7QKfvDbaBnFipYp4sJAUQ==", "license": "MIT", - "peer": true, "dependencies": { "@types/eslint-scope": "^3.7.7", "@types/estree": "^1.0.8", @@ -28076,7 +28035,6 @@ "resolved": "https://registry.npmjs.org/zod/-/zod-4.1.12.tgz", "integrity": "sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==", "license": "MIT", - "peer": true, "funding": { "url": "https://github.com/sponsors/colinhacks" } diff --git a/src/pages/blogs/blogs-new.css b/src/pages/blogs/blogs-new.css index b568ff6c..075dd92f 100644 --- a/src/pages/blogs/blogs-new.css +++ b/src/pages/blogs/blogs-new.css @@ -1,1778 +1,632 @@ -/* Blog Page Styles - recode hive Design */ +/* GitHub-Inspired Blog Page Styles */ * { box-sizing: border-box; } -.blog-page { - font-family: "Inter", sans-serif; - background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 50%, #e8ebff 100%); +/* Main Container */ +.github-blog-page { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif; + background: #ffffff; min-height: 100vh; - animation: pageSlideIn 0.8s ease-out; - position: relative; - overflow-x: hidden; -} - -/* Dark theme support */ -[data-theme="dark"] .blog-page { - background: linear-gradient(135deg, #1b1b1d 0%, #121212 50%, #1a202c 100%); -} - -@keyframes pageSlideIn { - 0% { - opacity: 0; - transform: translateY(20px); - } - 100% { - opacity: 1; - transform: translateY(0); - } -} - -/* Navbar adjustments */ -:global(.navbar) { - backdrop-filter: blur(20px) !important; - background: rgba(255, 255, 255, 0.95) !important; - border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important; - transition: all 0.3s ease !important; - height: 60px !important; - min-height: 60px !important; -} - -:global(.navbar--fixed-top) { - animation: navbarSlideDown 0.6s ease-out; } -@keyframes navbarSlideDown { - 0% { - transform: translateY(-100%); - opacity: 0; - } - 100% { - transform: translateY(0); - opacity: 1; - } +[data-theme="dark"] .github-blog-page { + background: #0d1117; } -/* Hero Section */ -.blog-hero-section { - padding: 80px 20px 60px; +/* Hero Section - GitHub Style */ +.github-hero { + background: #f6f8fa; + border-bottom: 1px solid #d0d7de; + padding: 48px 24px; text-align: center; - background: linear-gradient( - 135deg, - #f8f9ff 0%, - #f0f2ff 30%, - #e8ebff 70%, - #f0f4ff 100% - ); - position: relative; - overflow: hidden; - min-height: 50vh; - display: flex; - align-items: center; - margin-top: -10px; -} - -[data-theme="dark"] .blog-hero-section { - background: linear-gradient( - 135deg, - #1b1b1d 0%, - #121212 30%, - #1a202c 70%, - #242526 100% - ); -} - -.blog-hero-section::before { - content: ""; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: - radial-gradient( - circle at 20% 30%, - rgba(99, 102, 241, 0.15) 0%, - transparent 40% - ), - radial-gradient( - circle at 80% 20%, - rgba(168, 85, 247, 0.12) 0%, - transparent 45% - ), - radial-gradient( - circle at 40% 80%, - rgba(236, 72, 153, 0.1) 0%, - transparent 50% - ); - pointer-events: none; - animation: gradientShift 8s ease-in-out infinite; -} - -.blog-hero-section::after { - content: ""; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%236366f1' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); - pointer-events: none; - animation: float 20s linear infinite; -} - -@keyframes gradientShift { - 0%, - 100% { - background: - radial-gradient( - circle at 20% 30%, - rgba(99, 102, 241, 0.15) 0%, - transparent 40% - ), - radial-gradient( - circle at 80% 20%, - rgba(168, 85, 247, 0.12) 0%, - transparent 45% - ), - radial-gradient( - circle at 40% 80%, - rgba(236, 72, 153, 0.1) 0%, - transparent 50% - ); - } - 50% { - background: - radial-gradient( - circle at 80% 70%, - rgba(99, 102, 241, 0.12) 0%, - transparent 45% - ), - radial-gradient( - circle at 20% 80%, - rgba(168, 85, 247, 0.15) 0%, - transparent 40% - ), - radial-gradient( - circle at 60% 20%, - rgba(236, 72, 153, 0.1) 0%, - transparent 50% - ); - } } -@keyframes float { - 0% { - transform: translateY(0px) translateX(0px); - } - 33% { - transform: translateY(-10px) translateX(5px); - } - 66% { - transform: translateY(5px) translateX(-5px); - } - 100% { - transform: translateY(0px) translateX(0px); - } +[data-theme="dark"] .github-hero { + background: #161b22; + border-bottom: 1px solid #30363d; } -/* Floating Particles */ -.floating-particles { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - overflow: hidden; - pointer-events: none; - z-index: 0; +.github-hero-content { + max-width: 1280px; + margin: 0 auto; } -.particle { - position: absolute; - border-radius: 50%; - opacity: 0.6; - animation-timing-function: ease-in-out; - animation-iteration-count: infinite; -} - -.particle-1 { - width: 8px; - height: 8px; - background: linear-gradient(45deg, #6366f1, #8b5cf6); - top: 20%; - left: 10%; - animation: particleFloat1 8s infinite; -} - -.particle-2 { - width: 12px; - height: 12px; - background: linear-gradient(45deg, #a855f7, #ec4899); - top: 60%; - left: 80%; - animation: particleFloat2 10s infinite; -} - -.particle-3 { - width: 6px; - height: 6px; - background: linear-gradient(45deg, #ec4899, #f59e0b); - top: 30%; - left: 70%; - animation: particleFloat3 12s infinite; -} - -.particle-4 { - width: 10px; - height: 10px; - background: linear-gradient(45deg, #f59e0b, #10b981); - top: 80%; - left: 20%; - animation: particleFloat4 9s infinite; -} - -.particle-5 { - width: 14px; - height: 14px; - background: linear-gradient(45deg, #10b981, #06b6d4); - top: 15%; - left: 90%; - animation: particleFloat5 11s infinite; -} - -.particle-6 { - width: 7px; - height: 7px; - background: linear-gradient(45deg, #06b6d4, #6366f1); - top: 70%; - left: 5%; - animation: particleFloat6 13s infinite; -} - -@keyframes particleFloat1 { - 0%, - 100% { - transform: translateY(0px) translateX(0px) rotate(0deg); - } - 25% { - transform: translateY(-30px) translateX(20px) rotate(90deg); - } - 50% { - transform: translateY(-10px) translateX(-15px) rotate(180deg); - } - 75% { - transform: translateY(20px) translateX(10px) rotate(270deg); - } +.github-hero-title { + font-size: 40px; + font-weight: 600; + color: #24292f; + margin: 0 0 12px 0; + line-height: 1.25; } -@keyframes particleFloat2 { - 0%, - 100% { - transform: translateY(0px) translateX(0px) rotate(0deg); - } - 33% { - transform: translateY(25px) translateX(-20px) rotate(120deg); - } - 66% { - transform: translateY(-15px) translateX(25px) rotate(240deg); - } +[data-theme="dark"] .github-hero-title { + color: #e6edf3; } -@keyframes particleFloat3 { - 0%, - 100% { - transform: translateY(0px) translateX(0px) rotate(0deg); - } - 50% { - transform: translateY(-40px) translateX(-30px) rotate(180deg); - } +.github-hero-subtitle { + font-size: 16px; + color: #57606a; + margin: 0; + line-height: 1.5; } -@keyframes particleFloat4 { - 0%, - 100% { - transform: translateY(0px) translateX(0px) rotate(0deg); - } - 25% { - transform: translateY(-20px) translateX(30px) rotate(90deg); - } - 50% { - transform: translateY(15px) translateX(-10px) rotate(180deg); - } - 75% { - transform: translateY(-5px) translateX(-25px) rotate(270deg); - } +[data-theme="dark"] .github-hero-subtitle { + color: #8b949e; } -@keyframes particleFloat5 { - 0%, - 100% { - transform: translateY(0px) translateX(0px) rotate(0deg); - } - 40% { - transform: translateY(30px) translateX(-35px) rotate(144deg); - } - 80% { - transform: translateY(-25px) translateX(15px) rotate(288deg); - } +/* Main Container with Sidebar */ +.github-blog-container { + max-width: 1280px; + margin: 0 auto; + padding: 48px 24px; + display: grid; + grid-template-columns: 280px 1fr; + gap: 48px; + align-items: start; } -@keyframes particleFloat6 { - 0%, - 100% { - transform: translateY(0px) translateX(0px) rotate(0deg); - } - 30% { - transform: translateY(-35px) translateX(25px) rotate(108deg); - } - 60% { - transform: translateY(20px) translateX(-20px) rotate(216deg); - } - 90% { - transform: translateY(-10px) translateX(35px) rotate(324deg); +@media (max-width: 1024px) { + .github-blog-container { + grid-template-columns: 1fr; + gap: 32px; } } -.blog-hero-container { - max-width: 900px; - margin: 0 auto; - position: relative; - z-index: 1; -} - -.hero-content { - display: flex; - flex-direction: column; - align-items: center; - gap: 24px; +/* Sidebar */ +.github-sidebar { position: relative; } -.hero-content::before { - content: ""; - position: absolute; - top: -60px; - left: -80px; - width: 120px; - height: 120px; - background: linear-gradient(45deg, #6366f1, #a855f7); - border-radius: 50%; - opacity: 0.08; - animation: floatLeft 6s ease-in-out infinite; - z-index: -1; -} - -.hero-content::after { - content: ""; - position: absolute; - top: 100px; - right: -60px; - width: 80px; - height: 80px; - background: linear-gradient(45deg, #ec4899, #f59e0b); - border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; - opacity: 0.08; - animation: floatRight 8s ease-in-out infinite; - z-index: -1; -} - -@keyframes floatLeft { - 0%, - 100% { - transform: translateY(0px) rotate(0deg); - } - 50% { - transform: translateY(-25px) rotate(180deg); - } +.sidebar-sticky { + position: sticky; + top: 80px; } -@keyframes floatRight { - 0%, - 100% { - transform: translateY(0px) rotate(0deg); - } - 50% { - transform: translateY(20px) rotate(-180deg); +@media (max-width: 1024px) { + .sidebar-sticky { + position: relative; + top: 0; } } -.blog-main-title { - font-size: 64px; - font-weight: 900; - margin: 0; - line-height: 1.1; - color: #1e293b; - letter-spacing: -0.02em; - animation: titleSlideUp 1s ease-out; -} - -[data-theme="dark"] .blog-main-title { - color: #f1f5f9; +.sidebar-title { + font-size: 20px; + font-weight: 600; + color: #24292f; + margin: 0 0 16px 0; + line-height: 1.25; } -@keyframes titleSlideUp { - 0% { - opacity: 0; - transform: translateY(30px); - } - 100% { - opacity: 1; - transform: translateY(0); - } +[data-theme="dark"] .sidebar-title { + color: #e6edf3; } -.gradient-text { - background: linear-gradient( - 135deg, - #6366f1 0%, - #a855f7 30%, - #ec4899 70%, - #f59e0b 100% - ); - background-size: 300% 300%; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - animation: gradientMove 4s ease-in-out infinite; +/* Sidebar Search */ +.sidebar-search { position: relative; + margin-bottom: 24px; } -.gradient-text::before { - content: attr(data-text); +.sidebar-search-icon { position: absolute; - top: 0; - left: 0; - background: linear-gradient( - 135deg, - #6366f1 0%, - #a855f7 30%, - #ec4899 70%, - #f59e0b 100% - ); - background-size: 300% 300%; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - filter: blur(1px); - opacity: 0.5; - z-index: -1; - animation: gradientMove 4s ease-in-out infinite reverse; -} - -@keyframes gradientMove { - 0%, - 100% { - background-position: 0% 50%; - } - 50% { - background-position: 100% 50%; - } -} - -.blog-main-subtitle { - font-size: 18px; - color: #64748b; - margin: 0; - line-height: 1.7; - max-width: 700px; - font-weight: 400; -} - -[data-theme="dark"] .blog-main-subtitle { - color: #94a3b8; -} - -.hero-stats { - display: flex; - align-items: center; - gap: 32px; - margin-top: 16px; - padding: 20px 32px; - background: rgba(255, 255, 255, 0.8); - border: 1px solid rgba(99, 102, 241, 0.1); - border-radius: 16px; - backdrop-filter: blur(10px); - box-shadow: 0 8px 32px rgba(99, 102, 241, 0.1); -} - -.stat-item { - display: flex; - flex-direction: column; - align-items: center; - gap: 4px; + left: 12px; + top: 50%; + transform: translateY(-50%); + width: 16px; + height: 16px; + color: #57606a; + pointer-events: none; } -.stat-number { - font-size: 24px; - font-weight: 700; - color: #1e293b; - line-height: 1; +[data-theme="dark"] .sidebar-search-icon { + color: #8b949e; } -.stat-label { +.sidebar-search-input { + width: 100%; + padding: 8px 12px 8px 36px; font-size: 14px; - color: #64748b; - font-weight: 500; + line-height: 20px; + color: #24292f; + background-color: #f6f8fa; + border: 1px solid #d0d7de; + border-radius: 6px; + outline: none; + transition: all 0.15s ease; } -.stat-divider { - width: 1px; - height: 32px; - background: linear-gradient( - to bottom, - transparent, - rgba(99, 102, 241, 0.2), - transparent - ); +[data-theme="dark"] .sidebar-search-input { + color: #e6edf3; + background-color: #0d1117; + border-color: #30363d; } -/* Category Icons */ -.blog-category-icons { - display: flex; - justify-content: center; - gap: 40px; - margin: 40px 0; - flex-wrap: wrap; +.sidebar-search-input:focus { + background-color: #ffffff; + border-color: #0969da; + box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.1); } -.category-icon { - display: flex; - flex-direction: column; - align-items: center; - gap: 8px; - cursor: pointer; - transition: transform 0.2s ease; +[data-theme="dark"] .sidebar-search-input:focus { + background-color: #161b22; + border-color: #1f6feb; + box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.1); } -.category-icon:hover { - transform: translateY(-2px); +.sidebar-search-input::placeholder { + color: #57606a; } -.icon-wrapper { - width: 48px; - height: 48px; - border-radius: 12px; - display: flex; - align-items: center; - justify-content: center; - background: rgba(255, 255, 255, 0.8); - border: 1px solid rgba(99, 102, 241, 0.1); - transition: all 0.2s ease; +[data-theme="dark"] .sidebar-search-input::placeholder { + color: #8b949e; } -.icon-wrapper svg { - width: 24px; - height: 24px; - color: #6366f1; +/* Sidebar Categories */ +.sidebar-categories { + margin-bottom: 32px; + padding-bottom: 24px; + border-bottom: 1px solid #d0d7de; } -/* React Icons styling */ -.icon-wrapper { - color: #6366f1; +[data-theme="dark"] .sidebar-categories { + border-bottom-color: #30363d; } -.icon-wrapper.development { - background: rgba(99, 102, 241, 0.1); - color: #6366f1; +.sidebar-categories-title { + font-size: 14px; + font-weight: 600; + color: #24292f; + margin: 0 0 8px 0; + text-transform: uppercase; + letter-spacing: 0.5px; } -.icon-wrapper.design { - background: rgba(236, 72, 153, 0.1); - color: #ec4899; +[data-theme="dark"] .sidebar-categories-title { + color: #e6edf3; } -.icon-wrapper.ai-tech { - background: rgba(168, 85, 247, 0.1); - color: #a855f7; +.sidebar-category-list { + list-style: none; + padding: 0; + margin: 0; } -.icon-wrapper.innovation { - background: rgba(245, 158, 11, 0.1); - color: #f59e0b; +.sidebar-category-list li { + margin: 0; } -.category-icon span { - font-size: 12px; - color: #64748b; +.sidebar-category-item { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + padding: 8px 12px; + font-size: 14px; font-weight: 500; -} - -.explore-articles-btn { - background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); - color: white; + color: #57606a; + background: transparent; border: none; - padding: 14px 32px; - border-radius: 25px; - font-size: 16px; - font-weight: 600; + border-radius: 6px; + text-align: left; cursor: pointer; - transition: all 0.2s ease; - box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); - margin-top: 16px; -} - -.explore-articles-btn:hover { - transform: translateY(-1px); - box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4); -} - -/* Latest Articles Section */ -.latest-articles-section { - padding: 60px 20px 80px; - background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); - position: relative; - overflow: hidden; - margin-top: -20px; -} - -[data-theme="dark"] .latest-articles-section { - background: linear-gradient(135deg, #121212 0%, #1a202c 100%); -} - -.latest-articles-section::before { - content: ""; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: - radial-gradient( - circle at 10% 20%, - rgba(99, 102, 241, 0.05) 0%, - transparent 50% - ), - radial-gradient( - circle at 90% 80%, - rgba(168, 85, 247, 0.05) 0%, - transparent 50% - ); - pointer-events: none; -} - -.articles-container { - max-width: 1200px; - margin: 0 auto; - position: relative; - z-index: 1; - animation: contentSlideUp 1s ease-out 0.3s both; -} - -@keyframes contentSlideUp { - 0% { - opacity: 0; - transform: translateY(30px); - } - 100% { - opacity: 1; - transform: translateY(0); - } -} - -.section-header { - text-align: center; - margin-bottom: 64px; - position: relative; -} - -.section-title { - font-size: 48px; - font-weight: 800; - color: #1e293b; - margin: 0 0 24px 0; - line-height: 1.1; - letter-spacing: -0.02em; - position: relative; -} - -[data-theme="dark"] .section-title { - color: #f1f5f9; -} - -.section-title::after { - content: ""; - position: absolute; - bottom: -12px; - left: 50%; - transform: translateX(-50%); - width: 80px; - height: 4px; - background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); - border-radius: 2px; -} - -.section-subtitle { - font-size: 18px; - color: #64748b; - margin: 0; - line-height: 1.6; - max-width: 600px; - margin: 0 auto; - font-weight: 400; + transition: all 0.15s ease; } -[data-theme="dark"] .section-subtitle { - color: #94a3b8; +[data-theme="dark"] .sidebar-category-item { + color: #8b949e; } -/* Search Container */ -.search-container { - max-width: 600px; - margin: 30px auto 30px; - position: relative; +.sidebar-category-item:hover { + background-color: #f6f8fa; + color: #24292f; } -.search-container::before { - content: ""; - position: absolute; - top: -20px; - left: -20px; - right: -20px; - bottom: -20px; - background: linear-gradient(45deg, #6366f1, #a855f7, #ec4899, #f59e0b); - background-size: 400% 400%; - border-radius: 32px; - opacity: 0.08; - animation: searchGlow 6s ease-in-out infinite; - z-index: -1; -} - -@keyframes searchGlow { - 0%, - 100% { - background-position: 0% 50%; - } - 50% { - background-position: 100% 50%; - } +[data-theme="dark"] .sidebar-category-item:hover { + background-color: #161b22; + color: #e6edf3; } -.search-wrapper { - position: relative; - display: flex; - align-items: center; - background: rgba(255, 255, 255, 0.95); - backdrop-filter: blur(30px); - border: 2px solid transparent; - border-radius: 12px; - padding: 0; - box-shadow: - 0 20px 60px rgba(0, 0, 0, 0.08), - 0 8px 32px rgba(99, 102, 241, 0.1), - 0 0 0 1px rgba(255, 255, 255, 0.2) inset; - transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); - background-image: - linear-gradient(white, white), - linear-gradient(135deg, #6366f1, #a855f7, #ec4899); - background-origin: border-box; - background-clip: padding-box, border-box; - animation: searchFloat 4s ease-in-out infinite; -} - -[data-theme="dark"] .search-wrapper { - background: rgba(36, 37, 38, 0.95); - box-shadow: - 0 20px 60px rgba(0, 0, 0, 0.4), - 0 8px 32px rgba(99, 102, 241, 0.2), - 0 0 0 1px rgba(255, 255, 255, 0.05) inset; - background-image: - linear-gradient(rgba(36, 37, 38, 0.95), rgba(36, 37, 38, 0.95)), - linear-gradient(135deg, #6366f1, #a855f7, #ec4899); -} - -@keyframes searchFloat { - 0%, - 100% { - transform: translateY(0px); - } - 50% { - transform: translateY(-3px); - } +.sidebar-category-item.active { + background-color: #ddf4ff; + color: #0969da; + font-weight: 600; } -.search-wrapper:focus-within { - transform: translateY(-8px) scale(1.02); - box-shadow: - 0 32px 80px rgba(0, 0, 0, 0.12), - 0 16px 48px rgba(99, 102, 241, 0.2), - 0 0 0 1px rgba(255, 255, 255, 0.3) inset; - animation-play-state: paused; +[data-theme="dark"] .sidebar-category-item.active { + background-color: rgba(31, 111, 235, 0.15); + color: #58a6ff; } -.search-icon { - position: relative; - left: auto; - top: auto; - transform: none; - width: 24px; - height: 24px; - color: #757575; - flex-shrink: 0; - display: flex; +.category-count { + display: inline-flex; align-items: center; justify-content: center; - pointer-events: none; - stroke: #757575; -} - -@keyframes iconPulse { - 0%, - 100% { - opacity: 0.8; - transform: scale(1); - } - 50% { - opacity: 1; - transform: scale(1.05); - } -} - -[data-theme="dark"] .search-icon { - color: #757575; - stroke: white; -} - -.search-wrapper:focus-within .search-icon { - color: #757575; - animation-play-state: paused; - transform: translateY(-50%) scale(1.1); -} - -.search-input { - flex: 1; - border: none; - outline: none; - font-size: 17px; - color: #1e293b; - background: transparent; + min-width: 20px; + padding: 0 6px; + font-size: 12px; font-weight: 500; - letter-spacing: 0.01em; - transition: all 0.2s ease; - padding: 16px 48px 16px 48px; + line-height: 18px; + color: #57606a; + background-color: rgba(175, 184, 193, 0.2); + border-radius: 2em; } -.search-input:focus { - color: #0f172a; +[data-theme="dark"] .category-count { + color: #8b949e; + background-color: rgba(139, 148, 158, 0.2); } -[data-theme="dark"] .search-input { - color: #f1f5f9; +.sidebar-category-item.active .category-count { + color: #0969da; + background-color: rgba(9, 105, 218, 0.15); } -[data-theme="dark"] .search-input:focus { - color: #ffffff; +[data-theme="dark"] .sidebar-category-item.active .category-count { + color: #58a6ff; + background-color: rgba(88, 166, 255, 0.15); } -.search-input::placeholder { - color: #94a3b8; - font-weight: 400; - font-size: 14px; +/* Sidebar Table of Contents */ +.sidebar-toc { + margin-bottom: 24px; } -.clear-search-icon { - position: absolute; - right: 16px; - width: 24px; - height: 24px; - color: #758090; - background: none; - border: none; - cursor: pointer; - padding: 6px; - border-radius: 50%; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - overflow: hidden; -} - -.clear-search-icon::before { - content: ""; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(45deg, #ef4444, #f97316); - border-radius: 50%; - opacity: 0; - transform: scale(0); - transition: all 0.3s ease; -} - -.clear-search-icon:hover { - color: white; - transform: scale(1.1); -} - -.clear-search-icon:hover::before { - opacity: 1; - transform: scale(1); +.sidebar-toc-title { + font-size: 14px; + font-weight: 600; + color: #24292f; + margin: 0 0 8px 0; + text-transform: uppercase; + letter-spacing: 0.5px; } -.clear-search-icon svg { - width: 100%; - height: 100%; - position: relative; - z-index: 1; - transition: transform 0.2s ease; - stroke-width: 2.5; +[data-theme="dark"] .sidebar-toc-title { + color: #e6edf3; } -.clear-search-icon:hover svg { - transform: rotate(90deg); +.sidebar-toc-list { + list-style: none; + padding: 0; + margin: 0; } -.search-decoration { - display: none; +.sidebar-toc-list li { + margin: 0 0 4px 0; } -/* Search Results Info */ -.search-results-info { - text-align: center; - margin: 32px 0 24px; - padding: 16px 24px; - background: linear-gradient( - 135deg, - rgba(99, 102, 241, 0.05) 0%, - rgba(168, 85, 247, 0.05) 100% - ); - border-radius: 12px; - border: 1px solid rgba(99, 102, 241, 0.1); - max-width: 500px; - margin-left: auto; - margin-right: auto; -} - -.search-results-info p { - font-size: 15px; - color: #475569; - margin: 0; - font-weight: 600; - display: flex; - align-items: center; - justify-content: center; - gap: 8px; +.sidebar-toc-link { + display: block; + padding: 6px 12px; + font-size: 14px; + color: #57606a; + text-decoration: none; + border-radius: 6px; + transition: all 0.15s ease; + line-height: 1.4; } -.search-results-info p::before { - content: "🔍"; - font-size: 16px; +[data-theme="dark"] .sidebar-toc-link { + color: #8b949e; } -/* No Results State */ -.no-results { - grid-column: 1 / -1; - display: flex; - justify-content: center; - align-items: center; - min-height: 300px; - text-align: center; +.sidebar-toc-link:hover { + background-color: #f6f8fa; + color: #24292f; + text-decoration: none; } -.no-results-content { - max-width: 400px; +[data-theme="dark"] .sidebar-toc-link:hover { + background-color: #161b22; + color: #e6edf3; } -.no-results-icon { - font-size: 48px; - margin-bottom: 16px; - opacity: 0.6; +/* Main Content */ +.github-main-content { + min-width: 0; } -.no-results h3 { - font-size: 24px; - font-weight: 600; - color: #1e293b; - margin: 0 0 8px 0; +.github-search-results { + margin-bottom: 24px; + padding: 12px 16px; + background-color: #ddf4ff; + border: 1px solid #54aeff; + border-radius: 6px; } -.no-results p { - font-size: 16px; - color: #64748b; - margin: 0 0 24px 0; - line-height: 1.5; +[data-theme="dark"] .github-search-results { + background-color: rgba(31, 111, 235, 0.15); + border-color: #1f6feb; } -.clear-search-btn { - background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); - color: white; - border: none; - padding: 12px 24px; - border-radius: 8px; +.github-search-results p { + margin: 0; font-size: 14px; - font-weight: 600; - cursor: pointer; - transition: all 0.2s ease; - box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3); + color: #0969da; + font-weight: 500; } -.clear-search-btn:hover { - transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4); +[data-theme="dark"] .github-search-results p { + color: #58a6ff; } -/* Articles Grid */ -.articles-grid { +/* Blog Grid */ +.github-blog-grid { display: grid; - grid-template-columns: repeat(2, 1fr); + grid-template-columns: 1fr; gap: 32px; - max-width: 1200px; - margin: 0 auto; - padding: 0 20px; -} - -/* Large Desktop - 3 columns */ -@media (min-width: 1200px) { - .articles-grid { - grid-template-columns: repeat(3, 1fr); - gap: 40px; - max-width: 1400px; - } } -/* Desktop and Tablet - 2 columns */ -@media (max-width: 1199px) and (min-width: 768px) { - .articles-grid { +@media (min-width: 768px) { + .github-blog-grid { grid-template-columns: repeat(2, 1fr); - gap: 32px; - max-width: 900px; - } -} - -/* Small Tablet - 2 columns with smaller gap */ -@media (max-width: 767px) and (min-width: 576px) { - .articles-grid { - grid-template-columns: repeat(2, 1fr); - gap: 20px; - padding: 0 16px; - max-width: 600px; - } -} - -/* Mobile - 1 column */ -@media (max-width: 575px) { - .articles-grid { - grid-template-columns: 1fr; - gap: 24px; - padding: 0 16px; - max-width: 400px; } } -/* Article Card */ -.article-card { - background: white; - border-radius: 20px; +/* Blog Card */ +.github-blog-card { + background: #ffffff; + border: 1px solid #d0d7de; + border-radius: 6px; overflow: hidden; - box-shadow: - 0 4px 20px rgba(0, 0, 0, 0.08), - 0 1px 3px rgba(0, 0, 0, 0.1); - transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); - position: relative; - border: 1px solid rgba(255, 255, 255, 0.8); - animation: cardSlideIn 0.6s ease-out both; -} - -[data-theme="dark"] .article-card { - background: #242526; - border: 1px solid rgba(74, 85, 104, 0.3); - box-shadow: - 0 4px 20px rgba(0, 0, 0, 0.4), - 0 1px 3px rgba(0, 0, 0, 0.3); -} - -.article-card:nth-child(1) { - animation-delay: 0.1s; -} -.article-card:nth-child(2) { - animation-delay: 0.2s; -} -.article-card:nth-child(3) { - animation-delay: 0.3s; -} -.article-card:nth-child(4) { - animation-delay: 0.4s; -} -.article-card:nth-child(5) { - animation-delay: 0.5s; -} -.article-card:nth-child(6) { - animation-delay: 0.6s; -} - -@keyframes cardSlideIn { - 0% { - opacity: 0; - transform: translateY(40px) scale(0.95); - } - 100% { - opacity: 1; - transform: translateY(0) scale(1); - } -} - -.article-card::before { - content: ""; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 135deg, - rgba(99, 102, 241, 0.02) 0%, - rgba(168, 85, 247, 0.02) 100% - ); - opacity: 0; - transition: opacity 0.3s ease; - pointer-events: none; -} - -.article-card:hover { - transform: translateY(-8px) scale(1.02); - box-shadow: - 0 20px 60px rgba(0, 0, 0, 0.15), - 0 8px 20px rgba(99, 102, 241, 0.1); -} - -[data-theme="dark"] .article-card:hover { - box-shadow: - 0 20px 60px rgba(0, 0, 0, 0.6), - 0 8px 20px rgba(99, 102, 241, 0.2); -} - -.article-card:hover::before { - opacity: 1; -} - -.card-category { - position: absolute; - top: 20px; - left: 20px; - background: linear-gradient( - 135deg, - rgba(255, 255, 255, 0.95) 0%, - rgba(255, 255, 255, 0.9) 100% - ); - color: #6366f1; - padding: 8px 16px; - border-radius: 25px; - font-size: 12px; - font-weight: 700; - z-index: 2; - backdrop-filter: blur(20px); - border: 1px solid rgba(99, 102, 241, 0.1); - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transition: all 0.2s ease; - text-transform: uppercase; - letter-spacing: 0.5px; } -[data-theme="dark"] .card-category { - background: linear-gradient( - 135deg, - rgba(36, 37, 38, 0.95) 0%, - rgba(26, 32, 44, 0.9) 100% - ); - color: #a78bfa; - border: 1px solid rgba(167, 139, 250, 0.2); - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); +[data-theme="dark"] .github-blog-card { + background: #161b22; + border-color: #30363d; } -.article-card:hover .card-category { - background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); - color: white; - transform: scale(1.05); +.github-blog-card:hover { + border-color: #0969da; + box-shadow: 0 3px 12px rgba(140, 149, 159, 0.15); } -[data-theme="dark"] .article-card:hover .card-category { - background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%); - color: #1a202c; +[data-theme="dark"] .github-blog-card:hover { + border-color: #1f6feb; + box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4); } -.card-image { - height: 220px; - overflow: hidden; - position: relative; - background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%); +.github-card-link { + display: block; + color: inherit; + text-decoration: none; } -.card-image::before { - content: ""; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 135deg, - rgba(99, 102, 241, 0.1) 0%, - rgba(168, 85, 247, 0.1) 100% - ); - opacity: 0; - transition: opacity 0.3s ease; - z-index: 1; +.github-card-image { + width: 100%; + height: 200px; + overflow: hidden; + background: #f6f8fa; } -.article-card:hover .card-image::before { - opacity: 1; +[data-theme="dark"] .github-card-image { + background: #0d1117; } -.card-image img { +.github-card-image img { width: 100%; height: 100%; object-fit: cover; - transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); - filter: brightness(1) saturate(1); + transition: transform 0.3s ease; } -.article-card:hover .card-image img { - transform: scale(1.08); - filter: brightness(1.1) saturate(1.2); +.github-blog-card:hover .github-card-image img { + transform: scale(1.05); } -/* Responsive card image heights */ -@media (max-width: 767px) and (min-width: 576px) { - .card-image { - height: 160px; /* Smaller height for 2-column layout on small screens */ - } +.github-card-content { + padding: 16px; } -@media (max-width: 575px) { - .card-image { - height: 200px; /* Larger height for single column on mobile */ - } +.github-card-meta { + display: flex; + align-items: center; + margin-bottom: 12px; } -.card-content { - padding: 28px; - position: relative; - background: linear-gradient( - 135deg, - rgba(255, 255, 255, 0.95) 0%, - rgba(248, 250, 252, 0.95) 100% - ); +.github-card-category { + display: inline-block; + padding: 4px 8px; + font-size: 12px; + font-weight: 500; + color: #0969da; + background-color: #ddf4ff; + border-radius: 2em; } -[data-theme="dark"] .card-content { - background: linear-gradient( - 135deg, - rgba(36, 37, 38, 0.95) 0%, - rgba(26, 32, 44, 0.95) 100% - ); +[data-theme="dark"] .github-card-category { + color: #58a6ff; + background-color: rgba(31, 111, 235, 0.15); } -.card-title { - font-size: 22px; - font-weight: 700; - color: #1e293b; - margin: 0 0 16px 0; - line-height: 1.3; - letter-spacing: -0.01em; +.github-card-title { + font-size: 18px; + font-weight: 600; + color: #24292f; + margin: 0 0 8px 0; + line-height: 1.25; transition: color 0.2s ease; } -.article-card:hover .card-title { - color: #6366f1; +[data-theme="dark"] .github-card-title { + color: #e6edf3; } -[data-theme="dark"] .card-title { - color: #f1f5f9; +.github-blog-card:hover .github-card-title { + color: #0969da; } -[data-theme="dark"] .article-card:hover .card-title { - color: #a78bfa; +[data-theme="dark"] .github-blog-card:hover .github-card-title { + color: #58a6ff; } -.card-description { - font-size: 15px; - color: #64748b; - line-height: 1.6; - margin: 0 0 24px 0; +.github-card-description { + font-size: 14px; + color: #57606a; + line-height: 1.5; + margin: 0 0 16px 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; - font-weight: 400; -} - -[data-theme="dark"] .card-description { - color: #94a3b8; -} - -/* Responsive card content */ -@media (max-width: 767px) and (min-width: 576px) { - .card-content { - padding: 20px; - } - - .card-title { - font-size: 18px; - margin-bottom: 10px; - line-height: 1.4; - } - - .card-description { - font-size: 13px; - margin-bottom: 16px; - -webkit-line-clamp: 2; - } } -@media (max-width: 575px) { - .card-content { - padding: 24px; - } - - .card-title { - font-size: 20px; - margin-bottom: 12px; - } - - .card-description { - font-size: 14px; - margin-bottom: 20px; - -webkit-line-clamp: 3; - } +[data-theme="dark"] .github-card-description { + color: #8b949e; } -.card-meta { +.github-card-footer { display: flex; align-items: center; justify-content: space-between; - margin-bottom: 20px; - padding-bottom: 20px; - border-bottom: 1px solid rgba(226, 232, 240, 0.8); - position: relative; - gap: 12px; - flex-wrap: wrap; -} - -.card-meta::before { - content: ""; - position: absolute; - bottom: -1px; - left: 0; - width: 40px; - height: 2px; - background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); - border-radius: 1px; - opacity: 0; - transition: all 0.3s ease; + padding-top: 16px; + border-top: 1px solid #d0d7de; } -.article-card:hover .card-meta::before { - opacity: 1; - width: 80px; +[data-theme="dark"] .github-card-footer { + border-top-color: #30363d; } -.card-author { +.github-card-author { display: flex; align-items: center; - gap: 10px; + gap: 8px; flex: 1; - min-width: 0; /* Allow text to shrink */ + min-width: 0; } -.author-avatar { - width: 32px; - height: 32px; +.github-author-avatar { + width: 24px; + height: 24px; border-radius: 50%; - background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); + background: linear-gradient(135deg, #0969da, #1f6feb); display: flex; align-items: center; justify-content: center; - font-size: 16px; - color: white; + font-size: 12px; + color: #ffffff; font-weight: 600; - box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3); flex-shrink: 0; - transition: all 0.3s ease; } -.author-avatar:hover { - transform: scale(1.1); - box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4); -} - -.author-name { +.github-author-name { font-size: 13px; - color: #475569; - font-weight: 600; + color: #57606a; + font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - max-width: 100%; - position: relative; - cursor: help; - transition: color 0.2s ease; -} - -.author-name:hover { - color: #6366f1; } -[data-theme="dark"] .author-name { - color: #cbd5e1; +[data-theme="dark"] .github-author-name { + color: #8b949e; } -[data-theme="dark"] .author-name:hover { - color: #a78bfa; -} - -/* Tooltip for author names */ -.author-name::after { - content: attr(data-full-name); - position: absolute; - bottom: 100%; - left: 50%; - transform: translateX(-50%); - background: rgba(0, 0, 0, 0.9); - color: white; - padding: 8px 12px; - border-radius: 6px; - font-size: 12px; - white-space: nowrap; - opacity: 0; - visibility: hidden; - transition: all 0.3s ease; - z-index: 1000; - pointer-events: none; - margin-bottom: 5px; -} - -.author-name::before { - content: ""; - position: absolute; - bottom: 100%; - left: 50%; - transform: translateX(-50%); - border: 5px solid transparent; - border-top-color: rgba(0, 0, 0, 0.9); - opacity: 0; - visibility: hidden; - transition: all 0.3s ease; - z-index: 1000; - pointer-events: none; -} - -[data-theme="dark"] .author-name::after { - background: rgba(18, 18, 18, 0.95); - color: #f7fafc; -} - -[data-theme="dark"] .author-name::before { - border-top-color: rgba(18, 18, 18, 0.95); -} - -.author-name:hover::after, -.author-name:hover::before { - opacity: 1; - visibility: visible; -} - -.card-read-time { +.github-card-read-time { font-size: 12px; - color: #94a3b8; + color: #57606a; font-weight: 500; - background: rgba(148, 163, 184, 0.1); - padding: 4px 8px; - border-radius: 12px; -} - -[data-theme="dark"] .card-read-time { - color: #64748b; - background: rgba(100, 116, 139, 0.2); + flex-shrink: 0; } -/* Responsive card meta */ -@media (max-width: 767px) and (min-width: 576px) { - .card-meta { - margin-bottom: 14px; - padding-bottom: 14px; - } - - .author-avatar { - width: 26px; - height: 26px; - font-size: 11px; - } - - .author-name { - font-size: 11px; - } - - .card-read-time { - font-size: 10px; - padding: 2px 6px; - } +[data-theme="dark"] .github-card-read-time { + color: #8b949e; } -@media (max-width: 575px) { - .card-meta { - margin-bottom: 16px; - padding-bottom: 16px; - flex-direction: column; - align-items: flex-start; - gap: 8px; - } - - .card-author { - width: 100%; - gap: 8px; - } - - .author-avatar { - width: 28px; - height: 28px; - font-size: 12px; - } - - .author-name { - font-size: 12px; - white-space: normal; - overflow: visible; - text-overflow: unset; - line-height: 1.3; - } - - .card-read-time { - font-size: 11px; - padding: 3px 6px; - align-self: flex-end; - margin-top: -4px; - } +/* No Results */ +.github-no-results { + grid-column: 1 / -1; + text-align: center; + padding: 64px 24px; } -.card-read-more { - display: inline-flex; - align-items: center; - gap: 8px; - color: #6366f1; - text-decoration: none; - font-size: 14px; - font-weight: 700; - padding: 12px 20px; - border-radius: 12px; - background: linear-gradient( - 135deg, - rgba(99, 102, 241, 0.1) 0%, - rgba(139, 92, 246, 0.1) 100% - ); - border: 1px solid rgba(99, 102, 241, 0.2); - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - position: relative; - overflow: hidden; +.github-no-results-icon { + width: 48px; + height: 48px; + margin: 0 auto 16px; + color: #57606a; } -.card-read-more::before { - content: ""; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); - transition: left 0.3s ease; - z-index: -1; +[data-theme="dark"] .github-no-results-icon { + color: #8b949e; } -.card-read-more:hover { - color: white; - transform: translateY(-2px); - box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3); +.github-no-results h3 { + font-size: 20px; + font-weight: 600; + color: #24292f; + margin: 0 0 8px 0; } -.card-read-more:hover::before { - left: 0; +[data-theme="dark"] .github-no-results h3 { + color: #e6edf3; } -/* Responsive read more button */ -@media (max-width: 767px) and (min-width: 576px) { - .card-read-more { - font-size: 12px; - padding: 8px 14px; - } +.github-no-results p { + font-size: 14px; + color: #57606a; + margin: 0 0 24px 0; } -@media (max-width: 575px) { - .card-read-more { - font-size: 13px; - padding: 10px 16px; - } +[data-theme="dark"] .github-no-results p { + color: #8b949e; } -/* Comprehensive Responsive Design */ - -/* Large Desktop */ -@media (min-width: 1400px) { - .articles-container { - max-width: 1400px; - } - - .articles-grid { - gap: 48px; - } +.github-clear-btn { + padding: 8px 16px; + font-size: 14px; + font-weight: 500; + color: #ffffff; + background-color: #0969da; + border: 1px solid rgba(27, 31, 36, 0.15); + border-radius: 6px; + cursor: pointer; + transition: all 0.15s ease; } -/* Desktop */ -@media (max-width: 1199px) and (min-width: 992px) { - .section-title { - font-size: 42px; - } - - .section-subtitle { - font-size: 17px; - } +.github-clear-btn:hover { + background-color: #0860ca; } -/* Tablet */ -@media (max-width: 991px) and (min-width: 768px) { - .blog-hero-section { - padding: 60px 20px 50px; - } - - .blog-main-title { - font-size: 40px; - } - - .blog-category-icons { - gap: 32px; - } - - .section-title { - font-size: 36px; - } - - .section-subtitle { - font-size: 16px; - } - - .search-container { - max-width: 450px; - } +[data-theme="dark"] .github-clear-btn { + background-color: #1f6feb; + border-color: rgba(240, 246, 252, 0.1); } -/* Mobile Large */ -@media (max-width: 767px) and (min-width: 576px) { - .blog-hero-section { - padding: 50px 16px 40px; - } - - .blog-main-title { - font-size: 32px; - margin-bottom: 20px; - } - - .blog-main-subtitle { - font-size: 16px; - margin-bottom: 32px; - } - - .blog-category-icons { - gap: 24px; - margin: 32px 0; - } - - .icon-wrapper { - width: 44px; - height: 44px; - } - - .section-title { - font-size: 32px; - margin-bottom: 20px; - } - - .section-subtitle { - font-size: 15px; - } - - .search-container { - max-width: 400px; - margin-top: 32px; - } - - .latest-articles-section { - padding: 60px 16px; - } +[data-theme="dark"] .github-clear-btn:hover { + background-color: #1a5cd7; } -/* Mobile Small */ -@media (max-width: 575px) { - .blog-hero-section { - padding: 40px 16px 32px; +/* Responsive */ +@media (max-width: 768px) { + .github-hero { + padding: 32px 16px; } - .blog-main-title { + .github-hero-title { font-size: 28px; - margin-bottom: 16px; - line-height: 1.2; - } - - .blog-main-subtitle { - font-size: 15px; - margin-bottom: 28px; - } - - .blog-category-icons { - gap: 20px; - margin: 28px 0; - flex-wrap: wrap; - } - - .category-icon { - flex: 0 0 calc(50% - 10px); - max-width: calc(50% - 10px); - } - - .icon-wrapper { - width: 40px; - height: 40px; - } - - .category-icon span { - font-size: 11px; } - .explore-articles-btn { - padding: 12px 24px; + .github-hero-subtitle { font-size: 14px; } - .latest-articles-section { - padding: 50px 16px; + .github-blog-container { + padding: 32px 16px; } - .section-header { - margin-bottom: 48px; - } - - .section-title { - font-size: 28px; - margin-bottom: 16px; - } - - .section-subtitle { - font-size: 14px; - } - - .search-container { - max-width: 100%; - margin-top: 28px; - } - - .search-wrapper { - padding: 14px 16px; + .github-blog-grid { + grid-template-columns: 1fr; + gap: 24px; } - .search-icon { - width: 18px; - height: 18px; - margin-right: 12px; + .sidebar-categories { + margin-bottom: 24px; + padding-bottom: 16px; } - .search-input { - font-size: 15px; + .sidebar-toc { + margin-bottom: 16px; } } diff --git a/src/pages/blogs/index.tsx b/src/pages/blogs/index.tsx index b7edb1b9..f976b5a5 100644 --- a/src/pages/blogs/index.tsx +++ b/src/pages/blogs/index.tsx @@ -23,28 +23,65 @@ export default function Blogs(): React.JSX.Element { const { siteConfig } = useDocusaurusContext(); const [searchTerm, setSearchTerm] = useState(""); const [filteredBlogs, setFilteredBlogs] = useState(blogs); + const [selectedCategory, setSelectedCategory] = useState("All"); - // Filter blogs based on search term + // Filter blogs based on search term and category useEffect(() => { - if (searchTerm.trim() === "") { - setFilteredBlogs(blogs); - } else { - const filtered = blogs.filter( + let filtered = blogs; + + // Filter by category + if (selectedCategory !== "All") { + filtered = filtered.filter((blog) => { + const category = getCategory(blog.title); + return category === selectedCategory; + }); + } + + // Filter by search term + if (searchTerm.trim() !== "") { + filtered = filtered.filter( (blog) => blog.title.toLowerCase().includes(searchTerm.toLowerCase()) || - blog.description.toLowerCase().includes(searchTerm.toLowerCase()) || - blog.tags?.some((tag) => - tag.toLowerCase().includes(searchTerm.toLowerCase()), - ), + blog.description.toLowerCase().includes(searchTerm.toLowerCase()), ); - setFilteredBlogs(filtered); } - }, [searchTerm]); + + setFilteredBlogs(filtered); + }, [searchTerm, selectedCategory]); const handleSearchChange = (e: React.ChangeEvent) => { setSearchTerm(e.target.value); }; + // Get category from blog title + const getCategory = (title: string) => { + if ( + title.toLowerCase().includes("design") || + title.toLowerCase().includes("ux") + ) + return "Design"; + if ( + title.toLowerCase().includes("ai") || + title.toLowerCase().includes("deepmind") || + title.toLowerCase().includes("agent") + ) + return "AI & Tech"; + if ( + title.toLowerCase().includes("github") || + title.toLowerCase().includes("git") + ) + return "Development"; + if ( + title.toLowerCase().includes("spark") || + title.toLowerCase().includes("n8n") || + title.toLowerCase().includes("automation") + ) + return "Engineering"; + return "Resources"; + }; + + const categories = ["All", "Design", "AI & Tech", "Development", "Engineering", "Resources"]; + return ( -
- {/* Background Geometric Shapes */} -
-
-
-
-
-
-
- - {/* Hero Section */} -
-
-
-
-
-
-
-
-
-
-
-

- Welcome to recode hive{" "} - Blogs -

-

- Discover comprehensive web development articles, tutorials, and - insights covering everything from HTML & CSS fundamentals to - advanced JavaScript, React, Node.js, Data Structures & - Algorithms, and cutting-edge technologies. -

-
+
+ {/* Hero Section - GitHub Style */} +
+
+

The recode hive Blog

+

+ Insights, updates, and best practices from the recode hive community +

- {/* Latest Articles Section */} -
-
-
- {/* Search Bar */} -
-
- - - - - - {searchTerm && ( - - )} -
+ {category} + + {category === "All" + ? blogs.length + : blogs.filter(b => getCategory(b.title) === category).length} + + + + ))} + +
+ + {/* Blog Table of Contents */} +
+

Recent posts

+
    + {filteredBlogs.slice(0, 8).map((blog) => ( +
  • + + {blog.title} + +
    • + ))} +
+ - {/* Search Results Counter */} + {/* Main Content Area */} +
{searchTerm && ( -
+

{filteredBlogs.length > 0 - ? `Found ${filteredBlogs.length} article${filteredBlogs.length !== 1 ? "s" : ""} for "${searchTerm}"` - : `No articles found for "${searchTerm}"`} + ? `${filteredBlogs.length} article${filteredBlogs.length !== 1 ? "s" : ""} found` + : `No articles found`}

)} -
+
{filteredBlogs.length > 0 ? ( - filteredBlogs.map((blog, index) => ( - + filteredBlogs.map((blog) => ( + )) ) : ( -
-
-
🔍
-

No articles found

-

- Try adjusting your search terms or browse all articles. -

- +
+
+ + +
+

No articles found

+

Try adjusting your search or filters.

+
)}
-
-
+ +
); } -const BlogCard = ({ blog, index }) => { - // Get category from blog title or description for demo purposes - const getCategory = (title) => { - if ( - title.toLowerCase().includes("design") || - title.toLowerCase().includes("ux") - ) - return "Design"; - if ( - title.toLowerCase().includes("ai") || - title.toLowerCase().includes("deepmind") - ) - return "AI & Tech"; - if ( - title.toLowerCase().includes("github") || - title.toLowerCase().includes("git") - ) - return "Development"; - return "Resources"; - }; - +const BlogCard = ({ blog, getCategory }) => { // Get authors for this blog post const getAuthors = (slug) => { const authors = authorMapping[slug] || ["recode hive Team"]; @@ -214,27 +226,28 @@ const BlogCard = ({ blog, index }) => { const authorName = getAuthors(blog.slug); return ( -
-
{category}
-
- {blog.title} -
-
-

{blog.title}

-

{blog.description}

-
-
- 👤 - - {authorName} - +
+ +
+ {blog.title} +
+
+
+ {category} +
+

{blog.title}

+

{blog.description}

+
+
+
+ {authorName.charAt(0).toUpperCase()} +
+ {authorName} +
+ 5 min read
- 5 min read
- - Read Article → - -
-
+ + ); }; From 8bae0a9db2e2e1b34d91205146f0c3c72633e958 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 11 Nov 2025 13:43:43 +0000 Subject: [PATCH 3/5] Initial plan From f32de2f86cc4b65e3da668fea5b33dd765d4a1ee Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 11 Nov 2025 13:52:20 +0000 Subject: [PATCH 4/5] Revert showcase card design to original simpler style Co-authored-by: Adez017 <142787780+Adez017@users.noreply.github.com> --- sidebars.ts | 2 +- src/components/Community/LandingCommunity.css | 105 ++++++-- .../HomepageFeatures/styles.module.css | 2 +- src/components/StatsSection/styles.module.css | 4 +- .../dashboard/LeaderBoard/leaderboard.css | 77 ++++-- .../dashboard/LeaderBoard/leaderboard.tsx | 24 +- src/css/custom.css | 198 ++++++++------ src/pages/badges/github-badges.module.css | 1 - src/pages/badges/github-badges.tsx | 188 ++++++------- src/pages/blogs/blogs-new.css | 4 +- src/pages/blogs/index.tsx | 39 ++- src/pages/broadcasts/video.css | 151 +++++++---- src/pages/code-of-conduct/index.css | 2 +- src/pages/community/index.tsx | 5 +- src/pages/dashboard/dashboard.css | 14 +- src/pages/dashboard/index.tsx | 15 +- src/pages/ebooks/index.tsx | 18 +- src/pages/index.module.css | 2 +- src/pages/interview-prep/CompaniesTab.tsx | 19 +- src/pages/interview-prep/OverviewTab.tsx | 19 +- src/pages/podcasts/index.css | 200 ++++++++------ .../_components/ShowcaseCard/index.tsx | 23 +- .../ShowcaseCard/styles.module.css | 250 +----------------- src/pages/terms-service/index.module.css | 17 +- src/theme/Footer/Layout/enhanced-footer.css | 16 +- src/theme/Footer/Layout/index.tsx | 13 +- src/theme/Root.module.css | 2 +- 27 files changed, 701 insertions(+), 709 deletions(-) diff --git a/sidebars.ts b/sidebars.ts index 1e9b510c..11ec70b3 100644 --- a/sidebars.ts +++ b/sidebars.ts @@ -124,7 +124,7 @@ const sidebars: SidebarsConfig = { "Pandas/pd_intro", "Pandas/pd_dataframes", "Pandas/pd_input_output", - "Pandas/pd_data_analysis", + "Pandas/pd_data_analysis", ], }, { diff --git a/src/components/Community/LandingCommunity.css b/src/components/Community/LandingCommunity.css index 3067bf13..9f568573 100644 --- a/src/components/Community/LandingCommunity.css +++ b/src/components/Community/LandingCommunity.css @@ -47,7 +47,10 @@ gap: 1rem; } -.landing-community .landing-community__content .landing-community__stats .landing-community__stat-item { +.landing-community + .landing-community__content + .landing-community__stats + .landing-community__stat-item { display: flex; flex-direction: column; justify-content: center; @@ -60,28 +63,47 @@ position: relative; } -.landing-community .landing-community__content .landing-community__stats .landing-community__stat-item.clickable { +.landing-community + .landing-community__content + .landing-community__stats + .landing-community__stat-item.clickable { cursor: pointer; } -.landing-community .landing-community__content .landing-community__stats .landing-community__stat-item.clickable:hover, -.landing-community .landing-community__content .landing-community__stats .landing-community__stat-item.clickable:focus { +.landing-community + .landing-community__content + .landing-community__stats + .landing-community__stat-item.clickable:hover, +.landing-community + .landing-community__content + .landing-community__stats + .landing-community__stat-item.clickable:focus { transform: scale(1.02); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); outline: none; } -.landing-community .landing-community__content .landing-community__stats .landing-community__stat-item.loading { +.landing-community + .landing-community__content + .landing-community__stats + .landing-community__stat-item.loading { opacity: 0.7; } -.landing-community .landing-community__content .landing-community__stats .landing-community__stat-item:hover { +.landing-community + .landing-community__content + .landing-community__stats + .landing-community__stat-item:hover { cursor: pointer; transform: scale(1.01); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); } -.landing-community .landing-community__content .landing-community__stats .landing-community__stat-item .landing-community__stat-value { +.landing-community + .landing-community__content + .landing-community__stats + .landing-community__stat-item + .landing-community__stat-value { font-size: 3.5rem; font-weight: 600; color: var(--ifm-color-primary); @@ -105,7 +127,11 @@ text-shadow: inherit; } -.landing-community .landing-community__content .landing-community__stats .landing-community__stat-item .landing-community__loading { +.landing-community + .landing-community__content + .landing-community__stats + .landing-community__stat-item + .landing-community__loading { display: flex; align-items: center; justify-content: center; @@ -133,11 +159,19 @@ transition: opacity 0.2s ease; } -.landing-community .landing-community__content .landing-community__stats .landing-community__stat-item.clickable:hover .external-link-icon { +.landing-community + .landing-community__content + .landing-community__stats + .landing-community__stat-item.clickable:hover + .external-link-icon { opacity: 1; } -.landing-community .landing-community__content .landing-community__stats .landing-community__stat-item .landing-community__stat-description { +.landing-community + .landing-community__content + .landing-community__stats + .landing-community__stat-item + .landing-community__stat-description { font-size: 1rem; text-shadow: 0 0 1px var(--ifm-color-primary); } @@ -152,38 +186,58 @@ position: relative; } -.landing-community .landing-community__content .landing-community__info.clickable { +.landing-community + .landing-community__content + .landing-community__info.clickable { cursor: pointer; } -.landing-community .landing-community__content .landing-community__info.clickable:hover, -.landing-community .landing-community__content .landing-community__info.clickable:focus { +.landing-community + .landing-community__content + .landing-community__info.clickable:hover, +.landing-community + .landing-community__content + .landing-community__info.clickable:focus { transform: scale(1.01); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); outline: none; } -.landing-community .landing-community__content .landing-community__info .landing-community__image { +.landing-community + .landing-community__content + .landing-community__info + .landing-community__image { width: 100%; object-fit: cover; border-radius: 1rem; } -.landing-community .landing-community__content .landing-community__info .landing-community__info-text { +.landing-community + .landing-community__content + .landing-community__info + .landing-community__info-text { margin-top: 1rem; padding: 0; font-size: 1rem; text-shadow: 0 0 1px var(--ifm-color-primary); } -.landing-community .landing-community__content .landing-community__info .landing-community__info-text .landing-community__link { +.landing-community + .landing-community__content + .landing-community__info + .landing-community__info-text + .landing-community__link { color: var(--ifm-color-primary); text-shadow: 0 0 1px var(--ifm-color-primary); text-decoration: none; font-weight: 600; } -.landing-community .landing-community__content .landing-community__info .landing-community__info-text .landing-community__link:hover { +.landing-community + .landing-community__content + .landing-community__info + .landing-community__info-text + .landing-community__link:hover { text-decoration: underline; } @@ -197,7 +251,10 @@ transition: opacity 0.2s ease; } -.landing-community .landing-community__content .landing-community__info.clickable:hover .external-link-indicator { +.landing-community + .landing-community__content + .landing-community__info.clickable:hover + .external-link-indicator { opacity: 1; } @@ -214,14 +271,20 @@ width: 100%; } - .landing-community .landing-community__content .landing-community__info .landing-community__image { + .landing-community + .landing-community__content + .landing-community__info + .landing-community__image { width: 100%; } - .landing-community .landing-community__content .landing-community__info .landing-community__info-text { + .landing-community + .landing-community__content + .landing-community__info + .landing-community__info-text { margin-top: 1rem; padding: 0; font-size: 1rem; text-shadow: 0 0 1px var(--ifm-color-primary); } -} \ No newline at end of file +} diff --git a/src/components/HomepageFeatures/styles.module.css b/src/components/HomepageFeatures/styles.module.css index 036cd579..69126a23 100644 --- a/src/components/HomepageFeatures/styles.module.css +++ b/src/components/HomepageFeatures/styles.module.css @@ -9,4 +9,4 @@ .featureSvg { height: 200px; width: 200px; -} \ No newline at end of file +} diff --git a/src/components/StatsSection/styles.module.css b/src/components/StatsSection/styles.module.css index 6c565622..0bc3745e 100644 --- a/src/components/StatsSection/styles.module.css +++ b/src/components/StatsSection/styles.module.css @@ -144,7 +144,6 @@ /* Animation keyframes */ @keyframes float { - 0%, 100% { transform: translateY(0); @@ -156,7 +155,6 @@ } @keyframes pulse { - 0%, 100% { transform: scale(1); @@ -181,4 +179,4 @@ 100% { box-shadow: 0 0 5px rgba(79, 70, 229, 0.5); } -} \ No newline at end of file +} diff --git a/src/components/dashboard/LeaderBoard/leaderboard.css b/src/components/dashboard/LeaderBoard/leaderboard.css index fa0ade04..f8458b1e 100644 --- a/src/components/dashboard/LeaderBoard/leaderboard.css +++ b/src/components/dashboard/LeaderBoard/leaderboard.css @@ -92,7 +92,10 @@ padding: 20px; border-radius: 16px; width: 200px; - transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, border 0.3s; + transition: + transform 0.3s ease-in-out, + box-shadow 0.3s ease-in-out, + border 0.3s; position: relative; cursor: pointer; display: flex; @@ -114,13 +117,19 @@ } /* Staircase Height Adjustment */ -.first-place { transform: translateY(-60px); } -.second-place { transform: translateY(0px); } -.third-place { transform: translateY(0); } +.first-place { + transform: translateY(-60px); +} +.second-place { + transform: translateY(0px); +} +.third-place { + transform: translateY(0); +} /* Reflection Effect */ .podium-card::after { - content: ''; + content: ""; position: absolute; top: 100%; left: 0; @@ -132,7 +141,7 @@ rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.3) 25%, rgba(255, 255, 255, 0.1) 75%, - rgba(255, 255, 255, 0.0) 100% + rgba(255, 255, 255, 0) 100% ); transform: scaleY(-1); z-index: 1; @@ -145,14 +154,20 @@ rgba(43, 48, 59, 0.4) 0%, rgba(43, 48, 59, 0.3) 25%, rgba(43, 48, 59, 0.1) 75%, - rgba(43, 48, 59, 0.0) 100% + rgba(43, 48, 59, 0) 100% ); } /* Reflection box-shadows */ -.first-place::after { box-shadow: 0 2px 6px rgba(255, 215, 0, 0.1); } -.second-place::after { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); } -.third-place::after { box-shadow: 0 2px 6px rgba(205, 127, 50, 0.1); } +.first-place::after { + box-shadow: 0 2px 6px rgba(255, 215, 0, 0.1); +} +.second-place::after { + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); +} +.third-place::after { + box-shadow: 0 2px 6px rgba(205, 127, 50, 0.1); +} /* User Photo */ .podium-card .user-photo { @@ -192,9 +207,15 @@ border-color: #2b303b; } -.first-place .rank-badge { background-color: #FFD700; } -.second-place .rank-badge { background-color: #555; } -.third-place .rank-badge { background-color: #CD7F32; } +.first-place .rank-badge { + background-color: #ffd700; +} +.second-place .rank-badge { + background-color: #555; +} +.third-place .rank-badge { + background-color: #cd7f32; +} /* User Details */ .podium-card .details { @@ -250,33 +271,45 @@ .first-place:hover { transform: translateY(-65px); - border-color: #FFD700; - box-shadow: 0 0 15px rgba(255, 215, 0, 0.7), 0 10px 30px rgba(0, 0, 0, 0.15); + border-color: #ffd700; + box-shadow: + 0 0 15px rgba(255, 215, 0, 0.7), + 0 10px 30px rgba(0, 0, 0, 0.15); } .second-place:hover { transform: translateY(-35px); - border-color: #C0C0C0; - box-shadow: 0 0 15px rgba(192, 192, 192, 0.7), 0 10px 30px rgba(0, 0, 0, 0.15); + border-color: #c0c0c0; + box-shadow: + 0 0 15px rgba(192, 192, 192, 0.7), + 0 10px 30px rgba(0, 0, 0, 0.15); } .third-place:hover { transform: translateY(-5px); - border-color: #CD7F32; - box-shadow: 0 0 15px rgba(205, 127, 50, 0.7), 0 10px 30px rgba(0, 0, 0, 0.15); + border-color: #cd7f32; + box-shadow: + 0 0 15px rgba(205, 127, 50, 0.7), + 0 10px 30px rgba(0, 0, 0, 0.15); } /* Dark Mode Hover Effects */ .dark .first-place:hover { - box-shadow: 0 0 15px rgba(255, 215, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.3); + box-shadow: + 0 0 15px rgba(255, 215, 0, 0.3), + 0 10px 30px rgba(0, 0, 0, 0.3); } .dark .second-place:hover { - box-shadow: 0 0 15px rgba(192, 192, 192, 0.3), 0 10px 30px rgba(0, 0, 0, 0.3); + box-shadow: + 0 0 15px rgba(192, 192, 192, 0.3), + 0 10px 30px rgba(0, 0, 0, 0.3); } .dark .third-place:hover { - box-shadow: 0 0 15px rgba(205, 127, 50, 0.3), 0 10px 30px rgba(0, 0, 0, 0.3); + box-shadow: + 0 0 15px rgba(205, 127, 50, 0.3), + 0 10px 30px rgba(0, 0, 0, 0.3); } /* Stats Grid */ diff --git a/src/components/dashboard/LeaderBoard/leaderboard.tsx b/src/components/dashboard/LeaderBoard/leaderboard.tsx index ea24970c..7ac70a6c 100644 --- a/src/components/dashboard/LeaderBoard/leaderboard.tsx +++ b/src/components/dashboard/LeaderBoard/leaderboard.tsx @@ -376,7 +376,9 @@ export default function LeaderBoard(): JSX.Element { className="user-photo" />
-

{filteredContributors[1].username}

+

+ {filteredContributors[1].username} +

- {filteredContributors[1].points} Points + + {filteredContributors[1].points} Points +
@@ -401,7 +405,9 @@ export default function LeaderBoard(): JSX.Element { className="user-photo" />
-

{filteredContributors[0].username}

+

+ {filteredContributors[0].username} +

- {filteredContributors[0].points} Points + + {filteredContributors[0].points} Points +
@@ -426,7 +434,9 @@ export default function LeaderBoard(): JSX.Element { className="user-photo" />
-

{filteredContributors[2].username}

+

+ {filteredContributors[2].username} +

- {filteredContributors[2].points} Points + + {filteredContributors[2].points} Points +
diff --git a/src/css/custom.css b/src/css/custom.css index f4e2be12..be920687 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -121,7 +121,7 @@ a.menu__link.menu__link--active div span:first-child { /* ================= SECTION 4: CUSTOM SIDEBAR CATEGORY THEMES ================= */ /* GitHub theme */ -.custom-sidebar-github>.menu__list-item-collapsible>.menu__link { +.custom-sidebar-github > .menu__list-item-collapsible > .menu__link { background: linear-gradient(135deg, #24292e, #586069); color: white; border-radius: 8px; @@ -130,7 +130,7 @@ a.menu__link.menu__link--active div span:first-child { } /* Python theme */ -.custom-sidebar-python>.menu__list-item-collapsible>.menu__link { +.custom-sidebar-python > .menu__list-item-collapsible > .menu__link { background: linear-gradient(135deg, #3776ab, #ffd43b); color: white; border-radius: 8px; @@ -139,7 +139,7 @@ a.menu__link.menu__link--active div span:first-child { } /* SQL theme */ -.custom-sidebar-sql>.menu__list-item-collapsible>.menu__link { +.custom-sidebar-sql > .menu__list-item-collapsible > .menu__link { background: linear-gradient(135deg, #336791, #4479a1); color: white; border-radius: 8px; @@ -148,7 +148,7 @@ a.menu__link.menu__link--active div span:first-child { } /* Next.js theme */ -.custom-sidebar-nextjs>.menu__list-item-collapsible>.menu__link { +.custom-sidebar-nextjs > .menu__list-item-collapsible > .menu__link { background: linear-gradient(135deg, #000000, #333333); color: white; border-radius: 8px; @@ -157,7 +157,7 @@ a.menu__link.menu__link--active div span:first-child { } /* Google Student Ambassador theme */ -.custom-sidebar-gsa>.menu__list-item-collapsible>.menu__link { +.custom-sidebar-gsa > .menu__list-item-collapsible > .menu__link { background: linear-gradient(135deg, #4285f4, #34a853); color: white; border-radius: 8px; @@ -166,7 +166,7 @@ a.menu__link.menu__link--active div span:first-child { } /* Technical theme */ -.custom-sidebar-technical>.menu__list-item-collapsible>.menu__link { +.custom-sidebar-technical > .menu__list-item-collapsible > .menu__link { background: linear-gradient(135deg, #ff6b6b, #ee5a24); color: white; border-radius: 8px; @@ -175,9 +175,9 @@ a.menu__link.menu__link--active div span:first-child { } /* Custom subcategory styling */ -.custom-sidebar-setup>.menu__list-item-collapsible>.menu__link, -.custom-sidebar-basics>.menu__list-item-collapsible>.menu__link, -.custom-sidebar-maintainer>.menu__list-item-collapsible>.menu__link { +.custom-sidebar-setup > .menu__list-item-collapsible > .menu__link, +.custom-sidebar-basics > .menu__list-item-collapsible > .menu__link, +.custom-sidebar-maintainer > .menu__list-item-collapsible > .menu__link { background: rgba(36, 41, 46, 0.1); border-left: 3px solid #24292e; padding-left: 16px; @@ -185,12 +185,12 @@ a.menu__link.menu__link--active div span:first-child { } /* Hover effects for all custom categories */ -.custom-sidebar-github>.menu__list-item-collapsible>.menu__link:hover, -.custom-sidebar-python>.menu__list-item-collapsible>.menu__link:hover, -.custom-sidebar-sql>.menu__list-item-collapsible>.menu__link:hover, -.custom-sidebar-nextjs>.menu__list-item-collapsible>.menu__link:hover, -.custom-sidebar-gsa>.menu__list-item-collapsible>.menu__link:hover, -.custom-sidebar-technical>.menu__list-item-collapsible>.menu__link:hover { +.custom-sidebar-github > .menu__list-item-collapsible > .menu__link:hover, +.custom-sidebar-python > .menu__list-item-collapsible > .menu__link:hover, +.custom-sidebar-sql > .menu__list-item-collapsible > .menu__link:hover, +.custom-sidebar-nextjs > .menu__list-item-collapsible > .menu__link:hover, +.custom-sidebar-gsa > .menu__list-item-collapsible > .menu__link:hover, +.custom-sidebar-technical > .menu__list-item-collapsible > .menu__link:hover { transform: translateX(4px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transition: all 0.3s ease; @@ -269,7 +269,7 @@ html[data-theme="dark"] .menu__link--active::after { } /* ======== SECTION 7 : Adjust individual navbar items ==========*/ -.navbar__items>.navbar__item { +.navbar__items > .navbar__item { padding: 0.2rem 0.3rem !important; margin: 0 !important; } @@ -300,7 +300,6 @@ html[data-theme="dark"] .menu__link--active::after { /* Ensure dropdowns are visible on big screens */ @media (min-width: 1300px) { - .navbar__item.dropdown, .navbar__item:has(.dropdown-content) { position: relative !important; @@ -456,7 +455,6 @@ body { /* ===== SECTION 10: DESKTOP NAVBAR ENHANCEMENTS ===== */ @media (min-width: 1300px) { - /* Better spacing for desktop navbar */ .navbar__inner { max-width: 1400px; @@ -481,7 +479,10 @@ body { * This hides all navbar items on small screens, *except* for the * toggle, brand, and the item :has() the GitHub auth button. */ - .navbar__items .navbar__item:not(.navbar__toggle):not(.navbar__brand):not(:has(#firebase-auth-github-navbar)) { + .navbar__items + .navbar__item:not(.navbar__toggle):not(.navbar__brand):not( + :has(#firebase-auth-github-navbar) + ) { display: none !important; } @@ -686,8 +687,8 @@ body { } /* Prevent grid content from forcing overflow in the dropdown rows */ -.dropdown__menu .grid>.col-span-2, -.dropdown-content .grid>.col-span-2 { +.dropdown__menu .grid > .col-span-2, +.dropdown-content .grid > .col-span-2 { min-width: 0 !important; /* allow the icon column to shrink inside the 3-col grid */ } @@ -710,8 +711,8 @@ body { } /* Add breathing room between the left label and the vertical separator */ -.dropdown__menu .grid>.border-r.col-span-1, -.dropdown-content .grid>.border-r.col-span-1 { +.dropdown__menu .grid > .border-r.col-span-1, +.dropdown-content .grid > .border-r.col-span-1 { padding-right: 0.5rem !important; } @@ -872,7 +873,11 @@ html.theme-light .text-gray-900 { /* Ensure the specific block is forced light in light mode */ html[data-theme="light"] .interview-prep-page .technical-outer { - background-image: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%) !important; + background-image: linear-gradient( + 135deg, + #eff6ff 0%, + #f8fafc 100% + ) !important; background-color: #ffffff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; @@ -883,7 +888,11 @@ html[data-theme="light"] .interview-prep-page .technical-outer { /* Companies tab: use white gradients in light mode and remove overlays */ [data-theme="light"] .company-outer { - background-image: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important; + background-image: linear-gradient( + 135deg, + #ffffff 0%, + #f8fafc 100% + ) !important; background-color: #ffffff !important; color: #0f172a !important; isolation: isolate !important; @@ -893,7 +902,7 @@ html[data-theme="light"] .interview-prep-page .technical-outer { } /* hide the subtle pattern overlay added inside the component */ -[data-theme="light"] .company-outer>.absolute.inset-0, +[data-theme="light"] .company-outer > .absolute.inset-0, [data-theme="light"] .company-outer .absolute.inset-0.opacity-5 { display: none !important; background: none !important; @@ -977,12 +986,14 @@ html { /* ===== FOOTER BACKGROUND PROTECTION ===== */ /* Ensure footer maintains its gradient background in dark mode */ [data-theme="dark"] .enhanced-footer { - background: linear-gradient(135deg, - #0f0f23 0%, - #1a1a2e 25%, - #16213e 50%, - #0f3460 75%, - #533483 100%) !important; + background: linear-gradient( + 135deg, + #0f0f23 0%, + #1a1a2e 25%, + #16213e 50%, + #0f3460 75%, + #533483 100% + ) !important; color: #e2e8f0 !important; } @@ -998,17 +1009,22 @@ html { /* ===== STEP 6: MAXIMUM SPECIFICITY PROTECTION ===== */ /* Override the exact problematic global rule with same specificity */ -[data-theme="dark"] body:not(:has(.community-page)) .enhanced-footer .container { +[data-theme="dark"] + body:not(:has(.community-page)) + .enhanced-footer + .container { background-color: transparent !important; } [data-theme="dark"] body:not(:has(.community-page)) .enhanced-footer { - background: linear-gradient(135deg, - #0f0f23 0%, - #1a1a2e 25%, - #16213e 50%, - #0f3460 75%, - #533483 100%) !important; + background: linear-gradient( + 135deg, + #0f0f23 0%, + #1a1a2e 25%, + #16213e 50%, + #0f3460 75%, + #533483 100% + ) !important; color: #e2e8f0 !important; } @@ -1030,14 +1046,15 @@ html { /* ===== REMOVE THEME TOGGLE FROM MOBILE SIDEBAR AS THERE IS ONE ON THE NAVBAR ===== */ @media (max-width: 1200px) { - /* Aggressively hide theme toggle in mobile sidebar */ - .navbar-sidebar__brand button:not(.navbar-sidebar__close):not([class*="close"]), + .navbar-sidebar__brand + button:not(.navbar-sidebar__close):not([class*="close"]), .navbar-sidebar__brand .colorModeToggle, .navbar-sidebar .colorModeToggle, .navbar-sidebar__brand button[class*="colorModeToggle"], .navbar-sidebar button[class*="colorModeToggle"], - .navbar-sidebar__brand .clean-btn[class*="toggle"]:not(.navbar-sidebar__close), + .navbar-sidebar__brand + .clean-btn[class*="toggle"]:not(.navbar-sidebar__close), .navbar-sidebar .clean-btn[class*="toggle"]:not(.navbar-sidebar__close), .navbar-sidebar__brand [class*="toggle_"]:not(.navbar-sidebar__close), .navbar-sidebar [class*="toggle_"]:not(.navbar-sidebar__close), @@ -1109,7 +1126,6 @@ html { /* Mobile-only visibility & spacing fixes for Tutorials icons (320–768px) */ @media screen and (max-width: 768px) { - /* Ensure the label + icons row inside Docs dropdown uses the full width */ .navbar-sidebar .grid, .navbar-sidebar .dropdown__menu .grid, @@ -1122,12 +1138,12 @@ html { } /* So the icon column doesn't get clipped in the 3-col layout */ - .navbar-sidebar .grid>.col-span-2 { + .navbar-sidebar .grid > .col-span-2 { min-width: 0 !important; } /* Tighten label space and drop the border on very small screens */ - .navbar-sidebar .grid>.border-r.col-span-1 { + .navbar-sidebar .grid > .border-r.col-span-1 { border-right: 0 !important; padding-right: 0.25rem !important; font-weight: 600; @@ -1172,7 +1188,7 @@ html { } /* Add vertical space between Tutorials, Courses, Interview Prep blocks */ - .navbar-sidebar .dropdown__menu>.grid { + .navbar-sidebar .dropdown__menu > .grid { padding: 1rem 0 !important; margin: 1rem 0 !important; } @@ -1498,8 +1514,8 @@ html { padding-right: var(--ifm-navbar-padding-horizontal) !important; } -.navbar>.container, -.navbar>.container-fluid { +.navbar > .container, +.navbar > .container-fluid { max-width: none !important; width: 100% !important; padding: 0 !important; @@ -1545,12 +1561,16 @@ main { right: 0; bottom: 0; background: - radial-gradient(circle at 20% 30%, + radial-gradient( + circle at 20% 30%, rgba(99, 102, 241, 0.08) 0%, - transparent 40%), - radial-gradient(circle at 80% 70%, + transparent 40% + ), + radial-gradient( + circle at 80% 70%, rgba(168, 85, 247, 0.06) 0%, - transparent 45%); + transparent 45% + ); pointer-events: none; } @@ -1602,74 +1622,74 @@ a { /* ================= MISCELLANEOUS ================= */ /* Fix Home icon alignment with text in breadcrumbs [Docs] */ -.theme-doc-breadcrumbs a.breadcrumbs__link>svg { +.theme-doc-breadcrumbs a.breadcrumbs__link > svg { display: inline-block; } /* Fix difficulty and topic pill backgrounds in light/dark mode */ -[data-theme='light'] .rounded.bg-gray-100, -[data-theme='light'] .rounded-full.bg-green-100, -[data-theme='light'] .rounded-full.bg-yellow-100, -[data-theme='light'] .rounded-full.bg-red-100, -[data-theme='light'] .rounded-full.bg-blue-100 { +[data-theme="light"] .rounded.bg-gray-100, +[data-theme="light"] .rounded-full.bg-green-100, +[data-theme="light"] .rounded-full.bg-yellow-100, +[data-theme="light"] .rounded-full.bg-red-100, +[data-theme="light"] .rounded-full.bg-blue-100 { background-color: var(--ifm-color-emphasis-100) !important; } -[data-theme='light'] .rounded-full.bg-green-100 { +[data-theme="light"] .rounded-full.bg-green-100 { background-color: #dcfce7 !important; /* green-100 */ } -[data-theme='light'] .rounded-full.bg-yellow-100 { +[data-theme="light"] .rounded-full.bg-yellow-100 { background-color: #fef9c3 !important; /* yellow-100 */ } -[data-theme='light'] .rounded-full.bg-red-100 { +[data-theme="light"] .rounded-full.bg-red-100 { background-color: #fee2e2 !important; /* red-100 */ } -[data-theme='light'] .rounded-full.bg-blue-100 { +[data-theme="light"] .rounded-full.bg-blue-100 { background-color: #dbeafe !important; /* blue-100 */ } -[data-theme='light'] .rounded.bg-gray-100 { +[data-theme="light"] .rounded.bg-gray-100 { background-color: #f3f4f6 !important; /* gray-100 */ } /* Dark mode overrides */ -[data-theme='dark'] .rounded.dark\:bg-gray-700, -[data-theme='dark'] .rounded-full.dark\:bg-green-900, -[data-theme='dark'] .rounded-full.dark\:bg-yellow-900, -[data-theme='dark'] .rounded-full.dark\:bg-red-900, -[data-theme='dark'] .rounded-full.dark\:bg-blue-900 { +[data-theme="dark"] .rounded.dark\:bg-gray-700, +[data-theme="dark"] .rounded-full.dark\:bg-green-900, +[data-theme="dark"] .rounded-full.dark\:bg-yellow-900, +[data-theme="dark"] .rounded-full.dark\:bg-red-900, +[data-theme="dark"] .rounded-full.dark\:bg-blue-900 { opacity: 1 !important; } -[data-theme='dark'] .rounded-full.dark\:bg-green-900 { +[data-theme="dark"] .rounded-full.dark\:bg-green-900 { background-color: #14532d !important; /* green-900 */ } -[data-theme='dark'] .rounded-full.dark\:bg-yellow-900 { +[data-theme="dark"] .rounded-full.dark\:bg-yellow-900 { background-color: #713f12 !important; /* yellow-900 */ } -[data-theme='dark'] .rounded-full.dark\:bg-red-900 { +[data-theme="dark"] .rounded-full.dark\:bg-red-900 { background-color: #7f1d1d !important; /* red-900 */ } -[data-theme='dark'] .rounded-full.dark\:bg-blue-900 { +[data-theme="dark"] .rounded-full.dark\:bg-blue-900 { background-color: #1e3a8a !important; /* blue-900 */ } -[data-theme='dark'] .rounded.dark\:bg-gray-700 { +[data-theme="dark"] .rounded.dark\:bg-gray-700 { background-color: #374151 !important; /* gray-700 */ } @@ -1683,21 +1703,21 @@ a { /* Light mode: explicit background + text for each variant */ [data-theme="light"] .interview-prep-page .difficulty-badge.bg-green-200 { - background-color: #DCFCE7 !important; + background-color: #dcfce7 !important; /* green-200 -> higher contrast */ - color: #14532D !important; + color: #14532d !important; } [data-theme="light"] .interview-prep-page .difficulty-badge.bg-yellow-200 { - background-color: #FEF3C7 !important; + background-color: #fef3c7 !important; /* yellow-200 */ - color: #78350F !important; + color: #78350f !important; } [data-theme="light"] .interview-prep-page .difficulty-badge.bg-red-200 { - background-color: #FEE2E2 !important; + background-color: #fee2e2 !important; /* red-200 */ - color: #7F1D1D !important; + color: #7f1d1d !important; } /* Keep all duration badges grey in light mode */ @@ -1717,7 +1737,11 @@ html[data-theme="light"] .bg-gradient-to-r.from-blue-50.to-purple-50 { /* Companies: force white/near-white surface in light mode for .company-outer */ html[data-theme="light"] .company-outer { - background-image: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important; + background-image: linear-gradient( + 135deg, + #ffffff 0%, + #f8fafc 100% + ) !important; background-color: #ffffff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; @@ -1761,7 +1785,11 @@ html[data-theme="light"] a.company-tab-link { /* If any Tailwind gradient utility still applies, remove it for these containers in light mode */ html[data-theme="light"] .company-outer.bg-gradient-to-br, html[data-theme="light"] [data-slot="card-header"].bg-gradient-to-br { - background-image: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important; + background-image: linear-gradient( + 135deg, + #ffffff 0%, + #f8fafc 100% + ) !important; background-color: #ffffff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; @@ -1782,14 +1810,12 @@ html[data-theme="light"] [data-slot="card-header"].bg-gradient-to-br { border: none !important; } - .avatar.margin-bottom--sm { width: auto !important; height: auto !important; border: none !important; } - .blog-page .margin-bottom--xl { margin-bottom: 0rem !important; } @@ -1798,7 +1824,7 @@ html[data-theme="light"] [data-slot="card-header"].bg-gradient-to-br { /* Issue #980: Fix inconsistent padding and margins across sections */ /* Standard section spacing: 2rem vertical, 1.5rem horizontal on smaller screens */ -main>div:not(.m-0) { +main > div:not(.m-0) { margin-top: 2rem; margin-bottom: 2rem; } @@ -1810,7 +1836,7 @@ main>div:not(.m-0) { /* Responsive: reduce spacing on mobile devices */ @media (max-width: 768px) { - main>div:not(.m-0) { + main > div:not(.m-0) { margin-top: 1.5rem; margin-bottom: 1.5rem; } @@ -1841,4 +1867,4 @@ h2:first-child, h3:first-child { margin-top: 0; margin-bottom: 1rem; -} \ No newline at end of file +} diff --git a/src/pages/badges/github-badges.module.css b/src/pages/badges/github-badges.module.css index 5b78c1ff..e83e4e96 100644 --- a/src/pages/badges/github-badges.module.css +++ b/src/pages/badges/github-badges.module.css @@ -1519,7 +1519,6 @@ table tr:last-child td:last-child { 0 1px 2px rgba(0, 0, 0, 0.04); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; - } .skinToneTable .levelImages img:hover { diff --git a/src/pages/badges/github-badges.tsx b/src/pages/badges/github-badges.tsx index 2aaad04c..b10d257f 100644 --- a/src/pages/badges/github-badges.tsx +++ b/src/pages/badges/github-badges.tsx @@ -254,7 +254,7 @@ const GithubBadgesContent = (): React.ReactElement => { src="https://github.githubassets.com/images/modules/profile/achievements/starstruck-default.png" alt="Starstruck" className={styles.badgeImgSmall} - whileHover={{ scale: 1.13}} + whileHover={{ scale: 1.13 }} transition={{ type: "spring", stiffness: 300 }} /> @@ -331,7 +331,7 @@ const GithubBadgesContent = (): React.ReactElement => { src="https://github.githubassets.com/images/modules/profile/achievements/quickdraw-default.png" alt="Quickdraw" className={styles.badgeImgSmall} - whileHover={{ scale: 1.13}} + whileHover={{ scale: 1.13 }} transition={{ type: "spring", stiffness: 300 }} /> @@ -344,16 +344,14 @@ const GithubBadgesContent = (): React.ReactElement => {
-
- Level: Default -
+
Level: Default
- Quickdraw Default + Quickdraw Default
Needed: 1
@@ -373,7 +371,7 @@ const GithubBadgesContent = (): React.ReactElement => { src="https://github.githubassets.com/images/modules/profile/achievements/pair-extraordinaire-default.png" alt="Pair Extraordinaire" className={styles.badgeImgSmall} - whileHover={{ scale: 1.13}} + whileHover={{ scale: 1.13 }} transition={{ type: "spring", stiffness: 300 }} /> @@ -408,33 +406,35 @@ const GithubBadgesContent = (): React.ReactElement => { Levels: Default, Bronze, Silver, Gold
- Pair Extraordinarie Default - Pair Extraordinarie Bronze - Pair Extraordinarie Silver - Pair Extraordinarie Gold + Pair Extraordinarie Default + Pair Extraordinarie Bronze + Pair Extraordinarie Silver + Pair Extraordinarie Gold +
+
+ Needed: 1, 10, 24, 48 +
-
Needed: 1, 10, 24, 48
- {/* Pull Shark */} @@ -451,7 +451,7 @@ const GithubBadgesContent = (): React.ReactElement => { src="https://github.githubassets.com/images/modules/profile/achievements/pull-shark-default.png" alt="Pull Shark" className={styles.badgeImgSmall} - whileHover={{ scale: 1.13}} + whileHover={{ scale: 1.13 }} transition={{ type: "spring", stiffness: 300 }} /> @@ -483,33 +483,35 @@ const GithubBadgesContent = (): React.ReactElement => { Levels: Default, Bronze, Silver, Gold
- Pull Shark Default - Pull Shark Bronze - Pull Shark Silver - Pull Shark Gold + Pull Shark Default + Pull Shark Bronze + Pull Shark Silver + Pull Shark Gold +
+
+ Needed: 2, 16, 128, 1024 +
-
Needed: 2, 16, 128, 1024
- {/* Galaxy Brain */} @@ -526,7 +528,7 @@ const GithubBadgesContent = (): React.ReactElement => { src="https://github.githubassets.com/images/modules/profile/achievements/galaxy-brain-default.png" alt="Galaxy Brain" className={styles.badgeImgSmall} - whileHover={{ scale: 1.13}} + whileHover={{ scale: 1.13 }} transition={{ type: "spring", stiffness: 300 }} /> @@ -558,33 +560,35 @@ const GithubBadgesContent = (): React.ReactElement => { Levels: Default, Bronze, Silver, Gold
- Galaxy Brain Default - Galaxy Brain Bronze - Galaxy Brain Silver - Galaxy Brain Gold + Galaxy Brain Default + Galaxy Brain Bronze + Galaxy Brain Silver + Galaxy Brain Gold +
+
+ Needed: 2, 8, 16, 32 +
-
Needed: 2, 8, 16, 32
- {/* YOLO */} diff --git a/src/pages/blogs/blogs-new.css b/src/pages/blogs/blogs-new.css index 075dd92f..2173a5ff 100644 --- a/src/pages/blogs/blogs-new.css +++ b/src/pages/blogs/blogs-new.css @@ -5,7 +5,9 @@ /* Main Container */ .github-blog-page { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif; + font-family: + -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, + Arial, sans-serif; background: #ffffff; min-height: 100vh; } diff --git a/src/pages/blogs/index.tsx b/src/pages/blogs/index.tsx index f976b5a5..b8770726 100644 --- a/src/pages/blogs/index.tsx +++ b/src/pages/blogs/index.tsx @@ -80,7 +80,14 @@ export default function Blogs(): React.JSX.Element { return "Resources"; }; - const categories = ["All", "Design", "AI & Tech", "Development", "Engineering", "Resources"]; + const categories = [ + "All", + "Design", + "AI & Tech", + "Development", + "Engineering", + "Resources", + ]; return (

The recode hive Blog

- Insights, updates, and best practices from the recode hive community + Insights, updates, and best practices from the recode hive + community

@@ -117,10 +125,14 @@ export default function Blogs(): React.JSX.Element {