+1 -1

src/components/Definitions/Definitions.js

Reviewed

··· 132 132 <> 133 133 <main className="definitions-page"> 134 134 <div className="alt-card"> 135 135 - <h1>Definitions | cred.blue</h1> 135 135 + <h1>Definitions</h1> 136 136 137 137 <p className="intro-text"> 138 138 This page provides explanations for key terms related to Bluesky, the AT Protocol, and how the cred.blue scoring system works.

+23

src/components/Navbar/Navbar.css

Reviewed

··· 408 408 border: 1px solid var(--card-border); 409 409 border-radius: 4px; 410 410 z-index: 1000; 411 411 + max-width: 90vw; /* Prevent extending beyond viewport */ 412 412 + } 413 413 + 414 414 + /* Prevent dropdowns from going off-screen */ 415 415 + .navbar-links ul li:last-child .dropdown-menu { 416 416 + left: auto; 417 417 + right: 0; 418 418 + transform: none; 419 419 + } 420 420 + 421 421 + .navbar-links ul li:first-child .dropdown-menu { 422 422 + left: 0; 423 423 + right: auto; 424 424 + transform: none; 411 425 } 412 426 413 427 .dropdown-container:hover .dropdown-menu, ··· 479 493 margin: auto; 480 494 margin-top: 15px; 481 495 line-height: 1.5em; 496 496 + } 497 497 + 498 498 + /* Dropdown positioning for very small screens */ 499 499 + .dropdown-menu { 500 500 + position: fixed; 501 501 + left: 50% !important; 502 502 + transform: translateX(-50%) !important; 503 503 + width: 90vw; 504 504 + max-width: 90vw; 482 505 } 483 506 }

+22 -4

src/components/Navbar/Navbar.js

Reviewed

··· 4 4 import './Navbar.css'; 5 5 6 6 // Dropdown Menu Component 7 7 - const DropdownMenu = ({ title, path, items }) => { 7 7 + const DropdownMenu = ({ title, path, items, position }) => { 8 8 const [isOpen, setIsOpen] = useState(false); 9 9 const dropdownRef = useRef(null); 10 10 ··· 26 26 }; 27 27 }, [isOpen]); 28 28 29 29 + // Add event listener to close dropdown on scroll 30 30 + useEffect(() => { 31 31 + const handleScroll = () => { 32 32 + if (isOpen) { 33 33 + setIsOpen(false); 34 34 + } 35 35 + }; 36 36 + 37 37 + window.addEventListener('scroll', handleScroll); 38 38 + return () => { 39 39 + window.removeEventListener('scroll', handleScroll); 40 40 + }; 41 41 + }, [isOpen]); 42 42 + 29 43 // Detect if we're on mobile based on window width 30 44 const [windowWidth, setWindowWidth] = useState(window.innerWidth); 31 45 const isMobile = windowWidth <= 940; ··· 34 48 useEffect(() => { 35 49 const handleResize = () => { 36 50 setWindowWidth(window.innerWidth); 51 51 + // Close dropdown on resize to prevent positioning issues 52 52 + if (isOpen) { 53 53 + setIsOpen(false); 54 54 + } 37 55 }; 38 56 39 57 window.addEventListener('resize', handleResize); 40 58 return () => { 41 59 window.removeEventListener('resize', handleResize); 42 60 }; 43 43 - }, []); 61 61 + }, [isOpen]); 44 62 45 63 return ( 46 64 <li ··· 122 140 </div> 123 141 <nav className="navbar-links"> 124 142 <ul> 125 125 - <DropdownMenu {...scoreDropdown} /> 143 143 + <DropdownMenu {...scoreDropdown} position="left" /> 126 144 <li><Link to="/resources">resources</Link></li> 127 127 - <DropdownMenu {...aboutDropdown} /> 145 145 + <DropdownMenu {...aboutDropdown} position="right" /> 128 146 </ul> 129 147 </nav> 130 148 </div>

+31 -17

src/components/ScoringMethodology/ScoringMethodology.css

Reviewed

··· 46 46 padding-bottom: 10.5px; 47 47 } 48 48 49 49 - /* Link to Definitions page */ 49 49 + /* Updated Link to Definitions page */ 50 50 .definitions-link-container { 51 51 margin-top: 40px; 52 52 - padding: 15px; 53 53 - background-color: rgba(59, 154, 248, 0.1); 54 54 - border-radius: 8px; 55 55 - border-left: 4px solid var(--button-bg); 52 52 + margin-bottom: 10px; 53 53 + border-radius: 6px; 54 54 + background-color: var(--navbar-bg, #fff); 55 55 + overflow: hidden; 56 56 + transition: all 0.3s ease; 57 57 + border: 1px solid var(--card-border, #e2e8f0); 58 58 + } 59 59 + 60 60 + .definitions-link-container:hover { 61 61 + border-color: var(--button-bg, #3B9AF8); 62 62 + } 63 63 + 64 64 + .definitions-link-container p { 65 65 + padding: 12px 15px; 66 66 + margin: 0; 67 67 + font-weight: 500; 56 68 } 57 69 58 70 .definitions-link { 59 59 - display: inline-block; 60 60 - margin-top: 10px; 61 61 - color: var(--button-bg); 71 71 + display: block; 72 72 + margin-top: 0; 73 73 + color: var(--button-bg, #3B9AF8); 62 74 text-decoration: none; 63 63 - padding: 8px 16px; 64 64 - border-radius: 4px; 65 65 - background-color: rgba(59, 154, 248, 0.15); 75 75 + padding: 12px 15px; 76 76 + background-color: var(--navbar-bg, #fff); 66 77 transition: all 0.2s ease; 67 78 font-weight: 500; 79 79 + text-align: center; 80 80 + border-top: 1px solid var(--card-border, #e2e8f0); 68 81 } 69 82 70 83 .definitions-link:hover { 71 71 - background-color: rgba(59, 154, 248, 0.25); 72 72 - text-decoration: underline; 84 84 + background-color: var(--background, #f8f9fa); 85 85 + text-decoration: none; 73 86 } 74 87 75 88 /* Dark mode specific overrides */ 76 89 .dark-mode .definitions-link-container { 77 77 - background-color: rgba(59, 154, 248, 0.1); 78 78 - border-left-color: var(--button-bg); 90 90 + background-color: var(--navbar-bg); 91 91 + border-color: var(--card-border); 79 92 } 80 93 81 94 .dark-mode .definitions-link { 82 95 color: var(--button-bg); 83 83 - background-color: rgba(59, 154, 248, 0.2); 96 96 + background-color: var(--navbar-bg); 97 97 + border-top-color: var(--card-border); 84 98 } 85 99 86 100 .dark-mode .definitions-link:hover { 87 87 - background-color: rgba(59, 154, 248, 0.3); 101 101 + background-color: #2d2d2d; 88 102 }

+3 -3

src/components/ScoringMethodology/ScoringMethodology.js

Reviewed

··· 8 8 <main className="methodology-page"> 9 9 <div className="alt-card"> 10 10 <h1>The Scoring Methodology</h1> 11 11 + 11 12 <div className="methodology-page-chart"> 12 13 <ScoreGauge score={500} /> 13 14 </div> 15 15 + 14 16 <p>Your cred.blue score is generated based on two major categories...</p> 15 17 16 18 <h3>1. Bluesky Data</h3> ··· 58 60 <li>Set your pronouns</li> 59 61 </ol> 60 62 <p> 61 61 - This is not an exhaustive list by any means, but it should get you started. The goal of the cred.blue score isn't to attempt to max it out... rather, the point is to foster healthy behavior and activity that benefits the 62 62 - entire community. 63 63 + This is not an exhaustive list by any means, but it should get you started. The goal of the cred.blue score isn't to attempt to max it out... rather, the point is to foster healthy behavior and activity that benefits the entire community. 63 64 </p> 64 65 65 66 <div className="definitions-link-container"> ··· 70 71 View Definitions & Social Status Details → 71 72 </Link> 72 73 </div> 73 73 - 74 74 </div> 75 75 </main> 76 76 );