wlgusqkr commented on code in PR #642: URL: https://github.com/apache/fesod/pull/642#discussion_r2422910680
########## website/src/pages/team/index.css: ########## @@ -19,101 +19,101 @@ /* Derived from https://github.com/apache/streampark-website/tree/dev/src/pages/team */ .team_page { - margin-top: 50px !important; + margin-top: 50px !important; } .team_page h1:first-child { - font-size: 3rem; + font-size: 3rem; } .team_page a { - text-decoration: none; + text-decoration: none; } .team_page .team_title { - margin-top: 40px; + margin-top: 40px; } .team_page .team_desc { - margin-bottom: 40px; + margin-bottom: 40px; } .team_page .team_indent { - line-height: 40px; + line-height: 40px; } .team_page .desc { - font-size: 1rem; - margin-left: .5rem; + font-size: 1rem; + margin-left: 0.5rem; } .team-row { - --bs-gutter-x: 1.5rem; - --bs-gutter-y: 0; - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - margin-top: calc(-1 * var(--bs-gutter-y)); - margin-right: calc(-0.5 * var(--bs-gutter-x)); - margin-left: calc(-0.5 * var(--bs-gutter-x)); + --bs-gutter-x: 1.5rem; + --bs-gutter-y: 0; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-top: calc(-1 * var(--bs-gutter-y)); + margin-right: calc(-0.5 * var(--bs-gutter-x)); + margin-left: calc(-0.5 * var(--bs-gutter-x)); } .team-box { - width: 20% !important; - padding: 12px; + width: 20% !important; + padding: 12px; } .team-user-img { - width: 80px; - border-radius: 50%; - border: 2px solid #fff; + width: 80px; + border-radius: 50%; + border: 2px solid #fff; } .bg-team { - margin-top: -1.5rem !important; - padding: 2.5rem 1rem 0.5rem 1rem; - background-color: #ffffff !important; - border-radius: 0.75rem; - box-shadow: 0 0.375rem 1.5rem 0 rgba(0, 0, 0, 0.16) !important; + margin-top: -1.5rem !important; + padding: 2.5rem 1rem 0.5rem 1rem; + background-color: #ffffff !important; + border-radius: 0.75rem; + box-shadow: 0 0.375rem 1.5rem 0 rgba(0, 0, 0, 0.16) !important; } .team-link { - background-color: #fff; - border-radius: 50%; - width: 1.5rem; - height: 1.5rem; - display: inline-flex; - align-items: center; - justify-content: center; - text-align: center; - font-size: 75%; - line-height: normal; - margin-right: 0.25rem; + background-color: #fff; + border-radius: 50%; + width: 1.5rem; + height: 1.5rem; + display: inline-flex; + align-items: center; + justify-content: center; + text-align: center; + font-size: 75%; + line-height: normal; + margin-right: 0.25rem; } .team-link .github-icon { - width: 20px; - height: 20px; - color: #fff; + width: 20px; + height: 20px; + color: #fff; } [data-theme="dark"] .team-link { - background-color: #95999c; + background-color: #95999c; } [data-theme="dark"] .bg-team { - background-color: #0e1114 !important; + background-color: #0e1114 !important; } .divider { - width: 100%; - height: 1px; - background-color: #dfdfdf; + width: 100%; + height: 1px; + background-color: #dfdfdf; } -.block { - width: 1200px; - padding: 0 20px; - margin: 0 auto; +@media (max-width: 780px) { Review Comment: Thank you for your excellent feedback and suggestions! You've made a great point that 780px is not a standard breakpoint. I've changed it to the more common value of 768px. For the layout on smaller screens, I've implemented your suggestion by adding a media query. For screens narrower than 768px, the items will now display in a two-column grid (width: 50%). I have personally tested this on mobile views and confirmed that it provides a clean and visually balanced layout. Thanks again for helping improve this! -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
