Copilot commented on code in PR #1966:
URL: https://github.com/apache/apisix-website/pull/1966#discussion_r2807187472
##########
website/src/css/landing-sections/endcta.module.scss:
##########
@@ -67,5 +167,36 @@ $apisix-color: #e8433e;
margin: -1rem 0;
}
}
+
+ & .links {
+ :global(.btn-download) {
+ font-size: 0.8rem;
+ padding: 4px 16px;
+ }
+
+ :global(.btn-docs) {
+ :global(.goto) {
+ font-size: 0.75rem;
+ }
+ }
+ }
+ }
+}
+
+/* Extra small devices */
+@media (max-width: 480px) {
+ .endcta {
+ & .links {
+ :global(.btn-download) {
+ font-size: 0.7rem;
+ padding: 3px 14px;
+ }
+
+ :global(.btn-docs) {
+ :global(.goto) {
+ font-size: 0.65rem;
+ }
+ }
+ }
}
}
Review Comment:
The endcta button styling changes are outside the scope of issue #1965,
which specifically addresses responsive table design for the code samples page.
These changes to CTA button styling should be in a separate PR.
##########
website/src/pages/plugins.tsx:
##########
@@ -204,15 +204,19 @@ const Plugins: FC = () => {
return (
<div key={plugin.name}>
<PluginCard href={plugin.beta ?
`/docs/apisix/next/plugins/${pluginUrl}` : `/docs/apisix/plugins/${pluginUrl}`}
target="_blank">
+
<PluginIcon>
- {plugin.useDefaultIcon
- ? <img className="plugin-logo shadow default"
src="/img/plugin/default-icon.png" alt={plugin.name} />
- : (
+ {['batch-requests', 'grpc-transcode', 'error-log-logger',
'proxy-cache', 'http-logger', 'proxy-mirror', 'proxy-rewrite',
'response-rewrite', 'request-id', 'tcp-logger', 'zipkin', 'udp-logger',
'sls-logger', 'syslog', 'limit-conn', 'api-breaker', 'consumer-restriction',
'basic-auth', 'fault-injection', 'ip-restriction', 'hmac-auth', 'key-auth',
'limit-count', 'cors', 'limit-req', 'traffic-split', 'request-validation',
'referer-restriction', 'wolf-rbac', 'jwt-auth', 'authz-casbin',
'authz-keycloak', 'kafka-logger', 'openid-connect', 'prometheus', 'skywalking',
'datadog', 'google-cloud-logging', 'uri-blocker', 'redirect', 'echo', 'gzip',
'real-ip', 'server-info', 'grpc-web', 'mocking', 'authz-casdoor', 'cas-auth',
'ldap-auth', 'opa', 'forward-auth', 'ext-plugin-pre-req',
'ext-plugin-post-req', 'ext-plugin-post-resp', 'ua-restriction', 'csrf',
'public-api', 'node-status', 'opentelemetry', 'skywalking-loggerr',
'rocketmq-logger', 'clickhouse-logger', 'log-rotate', 'splunk-h
ec-logging', 'file-logger', 'loggly', 'elasticsearch-logger',
'tencent-cloud-cls', 'serverless', 'azure-functions', 'openwhisk',
'aws-lambda', 'workflow', 'openfunction', 'dubbo-proxy', 'mqtt-proxy',
'kafka-proxy', 'proxy-control', 'client-control', 'CSRF'].includes(plugin.name)
Review Comment:
The plugin name 'skywalking-loggerr' appears to have a typo with an extra
'r'. This should likely be 'skywalking-logger' to match the naming pattern of
other logger plugins in the list (tcp-logger, udp-logger, http-logger, etc.).
```suggestion
{['batch-requests', 'grpc-transcode', 'error-log-logger',
'proxy-cache', 'http-logger', 'proxy-mirror', 'proxy-rewrite',
'response-rewrite', 'request-id', 'tcp-logger', 'zipkin', 'udp-logger',
'sls-logger', 'syslog', 'limit-conn', 'api-breaker', 'consumer-restriction',
'basic-auth', 'fault-injection', 'ip-restriction', 'hmac-auth', 'key-auth',
'limit-count', 'cors', 'limit-req', 'traffic-split', 'request-validation',
'referer-restriction', 'wolf-rbac', 'jwt-auth', 'authz-casbin',
'authz-keycloak', 'kafka-logger', 'openid-connect', 'prometheus', 'skywalking',
'datadog', 'google-cloud-logging', 'uri-blocker', 'redirect', 'echo', 'gzip',
'real-ip', 'server-info', 'grpc-web', 'mocking', 'authz-casdoor', 'cas-auth',
'ldap-auth', 'opa', 'forward-auth', 'ext-plugin-pre-req',
'ext-plugin-post-req', 'ext-plugin-post-resp', 'ua-restriction', 'csrf',
'public-api', 'node-status', 'opentelemetry', 'skywalking-logger',
'rocketmq-logger', 'clickhouse-logger', 'log-rotate', 'splunk-
hec-logging', 'file-logger', 'loggly', 'elasticsearch-logger',
'tencent-cloud-cls', 'serverless', 'azure-functions', 'openwhisk',
'aws-lambda', 'workflow', 'openfunction', 'dubbo-proxy', 'mqtt-proxy',
'kafka-proxy', 'proxy-control', 'client-control', 'CSRF'].includes(plugin.name)
```
##########
website/src/css/customTheme.scss:
##########
@@ -530,3 +778,557 @@ button[class*="announcementBarClose"] {
font-weight: 500;
}
}
+
+/* Enhanced Table Styles for Code Samples Page */
+.markdown table {
+ width: 130%;
+ max-width: 1600px;
+ border-collapse: collapse;
+ margin: 2rem auto;
+ margin-left: 64%;
+ transform: translateX(-50%);
+ font-size: 0.99rem;
+ box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
+ border-radius: 8px;
+ overflow: hidden;
+ table-layout: fixed;
+}
+
+.markdown table thead {
+ background: linear-gradient(135deg, var(--ifm-color-primary) 0%, #d0312d
100%);
+ color: white;
+}
+
+.markdown table th {
+ padding: 1rem 0.8rem;
+ font-weight: 600;
+ text-align: left;
+ font-size: 0.9rem;
+ letter-spacing: 0.3px;
+ border: none;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+}
+
+.markdown table td {
+ padding: 1rem 0.8rem;
+ border-bottom: 1px solid var(--ifm-table-border-color);
+ vertical-align: top;
+ line-height: 1.5;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+ hyphens: auto;
+ font-size: 0.9rem;
+}
+
+/* Enhanced column widths for code samples table - Larger size with better
spacing */
+.markdown table th:nth-child(1),
+.markdown table td:nth-child(1) {
+ min-width: 200px;
+ width: 20%;
+ max-width: 250px;
+}
+
+.markdown table th:nth-child(2),
+.markdown table td:nth-child(2) {
+ min-width: 260px;
+ width: 25%;
+ max-width: 320px;
+}
+
+.markdown table th:nth-child(3),
+.markdown table td:nth-child(3) {
+ min-width: 180px;
+ width: 18%;
+ max-width: 220px;
+}
+
+.markdown table th:nth-child(4),
+.markdown table td:nth-child(4) {
+ min-width: 180px;
+ width: 18%;
+ max-width: 220px;
+}
+
+.markdown table th:nth-child(5),
+.markdown table td:nth-child(5) {
+ min-width: 150px;
+ width: 12%;
+ max-width: 190px;
+}
+
+.markdown table th:nth-child(6),
+.markdown table td:nth-child(6) {
+ min-width: 150px;
+ width: 12%;
+ max-width: 180px;
+}
+
+/* Badge-like styling for categories and levels */
+.markdown table td:nth-child(5) {
+ font-size: 0.8rem;
+ font-weight: 500;
+}
+
+.markdown table td:nth-child(6) {
+ font-size: 0.8rem;
+ font-weight: 600;
+ text-transform: uppercase;
+}
+
+.markdown table tbody tr:hover {
+ background-color: var(--ifm-hover-overlay);
+ transition: background-color 0.2s ease;
+}
+
+.markdown table tbody tr:last-child td {
+ border-bottom: none;
+}
+
+/* Responsive table wrapper */
+.table-wrapper {
+ width: 100%;
+ overflow-x: auto;
+ margin: 2rem 0;
+ border-radius: 8px;
+ box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
+}
+
+/* Links styling in table */
+.markdown table a {
+ color: var(--ifm-color-primary);
+ text-decoration: none;
+ font-weight: 500;
+ transition: all 0.2s ease;
+ opacity: 1;
+}
+
+.markdown table a:hover {
+ color: var(--ifm-color-primary-darker);
+ text-decoration: underline;
+}
+
+/* Dark mode link styling */
+html[data-theme="dark"] .markdown table a {
+ color: #ff6b6b;
+}
+
+html[data-theme="dark"] .markdown table a:hover {
+ color: #ff5252;
+}
+
+/* responsive adjustments (1024px - 1366px) */
+@media screen and (max-width: 1366px) and (min-width: 1025px) {
+ .markdown table {
+ width: 125%;
+ margin-left: 62%;
+ font-size: 0.9rem;
+ }
+
+ .markdown table th,
+ .markdown table td {
+ padding: 0.9rem 0.7rem;
+ }
+
+ .markdown table th:nth-child(1),
+ .markdown table td:nth-child(1) {
+ min-width: 180px;
+ width: 19%;
+ }
+
+ .markdown table th:nth-child(2),
+ .markdown table td:nth-child(2) {
+ min-width: 220px;
+ width: 24%;
+ }
+
+ .markdown table th:nth-child(6),
+ .markdown table td:nth-child(6) {
+ min-width: 130px;
+ width: 11%;
+ }
+}
+
+/* Medium screens/Small laptops (768px - 1024px) */
+@media screen and (max-width: 1024px) and (min-width: 769px) {
+ .markdown table {
+ width: 120%;
+ margin-left: 60%;
+ font-size: 0.85rem;
+ }
+
+ .markdown table th,
+ .markdown table td {
+ padding: 0.8rem 0.6rem;
+ }
+
+ .markdown table th:nth-child(1),
+ .markdown table td:nth-child(1) {
+ min-width: 160px;
+ width: 18%;
+ }
+
+ .markdown table th:nth-child(2),
+ .markdown table td:nth-child(2) {
+ min-width: 200px;
+ width: 23%;
+ }
+
+ .markdown table th:nth-child(3),
+ .markdown table td:nth-child(3) {
+ min-width: 140px;
+ width: 16%;
+ }
+
+ .markdown table th:nth-child(4),
+ .markdown table td:nth-child(4) {
+ min-width: 140px;
+ width: 16%;
+ }
+
+ .markdown table th:nth-child(5),
+ .markdown table td:nth-child(5) {
+ min-width: 120px;
+ width: 14%;
+ }
+
+ .markdown table th:nth-child(6),
+ .markdown table td:nth-child(6) {
+ min-width: 110px;
+ width: 10%;
+ }
+
+ .markdown table th:nth-child(7),
+ .markdown table td:nth-child(7) {
+ min-width: 70px;
+ width: 3%;
+ }
+}
+
+/* Large Tablets (768px - 1024px) - NO horizontal scroll */
+@media screen and (max-width: 1024px) and (min-width: 769px) {
+ .markdown table {
+ width: 110%;
+ margin-left: 55%;
+ font-size: 0.82rem;
+ table-layout: fixed;
+ }
+
+ .markdown table th,
+ .markdown table td {
+ padding: 0.75rem 0.55rem;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .markdown table th:nth-child(6),
+ .markdown table td:nth-child(6) {
+ width: 9%;
+ }
+}
Review Comment:
There are three overlapping media query ranges for large tablets/small
laptops (768px-1024px). Lines 953-1006 define styles for (max-width: 1024px)
and (min-width: 769px), and then lines 1009-1028 redefine styles for the exact
same range. This causes the second block to override the first, making the
first block dead code. Additionally, line 1031 starts a query for (max-width:
768px) and (min-width: 601px), which overlaps at 768px. Consolidate these media
queries to avoid confusion and remove redundant code.
##########
website/src/css/customTheme.scss:
##########
@@ -291,23 +512,63 @@ a:hover {
}
.hero-sec-wrap {
- display: block;
- height: fit-content;
+ display: flex !important;
+ height: 100vh !important;
+ background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
+ position: relative !important;
}
.homeCanvas-overlay {
position: absolute;
- width: 100vw;
- height: 50vh;
- background: #ebe6dc;
- top: -1px;
- right: 0;
+ width: 100%;
+ height: 100%;
+ background: transparent;
+ top: 0;
+ left: 0;
+ z-index: 1;
+ pointer-events: none;
}
- .hero-text {
- height: 50%;
+ .homeCanvas {
+ width: 100% !important;
+ height: 100% !important;
+ position: absolute !important;
+ top: 0 !important;
+ left: 0 !important;
+ z-index: 0 !important;
+ opacity: 0.2 !important;
+ }
+
+ .hero-infograph {
+ position: absolute !important;
+ top: 0 !important;
+ left: 0 !important;
+ width: 100% !important;
+ height: 100% !important;
+ z-index: 0 !important;
+ pointer-events: none !important;
+ }
+
+ .add-margin {
+ position: absolute;
+ top: 0;
+ left: 0;
width: 100%;
- padding: 5rem 0 0 6vw;
+ height: 100%;
+ z-index: 0;
+ pointer-events: none;
+ }
+
+ .hero-text {
+ height: 100%;
+ width: 50%;
+ padding: 0 4vw 0 6vw;
+ position: relative;
+ z-index: 2;
+ display: flex;
+ flex-wrap: wrap;
+ align-content: center;
+ box-sizing: border-box;
}
Review Comment:
The hero section changes modify existing desktop layout from a split layout
(50% text, 50% canvas) to a centered overlay design where the canvas is
full-width with text overlaid. This is a breaking change to the existing
desktop experience, not just a responsive enhancement. Combined with the
extensive styling changes (colors, shadows, animations), this represents a
major redesign that was not mentioned in the PR description or issue #1965.
Such significant visual changes should be reviewed separately.
##########
website/src/css/customTheme.scss:
##########
@@ -150,15 +150,236 @@ header h2 {
}
}
-/* navbar */
-.navbar__link:hover,
-.navbar__link--active {
- color: var(--color-primary);
+/* navbar - Default styling for all pages */
+.navbar {
+ background: #fff !important;
+ backdrop-filter: blur(10px) !important;
+ border-bottom: 1px solid rgb(0 0 0 / 15%) !important;
+ box-shadow: 0 2px 15px rgb(0 0 0 / 10%) !important;
+ transition: all 0.3s ease !important;
}
.navbar__title {
font-size: 18px;
height: 30px;
+ color: #000 !important;
+ font-weight: 800 !important;
+}
+
+.navbar__link {
+ color: #1a202c !important;
+ font-weight: 600 !important;
+ transition: all 0.3s ease !important;
+ padding: 8px 14px !important;
+ border-radius: 8px !important;
+ margin: 0 2px !important;
+}
+
+.navbar__link:hover,
+.navbar__link--active {
+ color: #000 !important;
+ background: rgb(0 0 0 / 8%) !important;
+ font-weight: 700 !important;
+}
+
+.navbar__toggle {
+ color: #1a202c !important;
+ font-weight: 700 !important;
+ background: none !important;
+ border: none !important;
+ cursor: pointer !important;
+ z-index: 9999 !important;
+}
+
+.navbar__toggle:hover,
+.navbar__toggle:focus {
+ background: rgb(0 0 0 / 10%) !important;
+ border-radius: 4px !important;
+}
+
+.navbar__search-input {
+ background: rgb(0 0 0 / 8%) !important;
+ border: 1px solid rgb(0 0 0 / 20%) !important;
+ color: #000 !important;
+ border-radius: 8px !important;
+ font-weight: 500 !important;
+}
+
+.navbar__search-input::placeholder {
+ color: rgb(0 0 0 / 60%) !important;
+ font-weight: 500 !important;
+}
+
+/* Mobile menu styling */
+.navbar-sidebar {
+ background: #fff !important;
+ box-shadow: 0 4px 20px rgb(0 0 0 / 10%) !important;
+ z-index: 9999 !important;
+ position: fixed !important;
+ top: 0 !important;
+ right: 0 !important;
+ height: 100vh !important;
+ width: 300px !important;
+ transform: translateX(0) !important;
+}
+
+.navbar-sidebar__brand {
+ background: #fff !important;
+ box-shadow: 0 2px 10px rgb(0 0 0 / 10%) !important;
+ padding: 16px !important;
+}
+
+.navbar-sidebar__items {
+ background: #fff !important;
+ padding: 20px 0 !important;
+ overflow-y: auto !important;
+}
+
+.navbar-sidebar .menu__link {
+ color: #1a202c !important;
+ font-weight: 600 !important;
+ padding: 12px 16px !important;
+ border-radius: 8px !important;
+ margin: 4px 8px !important;
+ display: block !important;
+ text-decoration: none !important;
+}
+
+.navbar-sidebar .menu__link:hover,
+.navbar-sidebar .menu__link--active {
+ background: rgb(0 0 0 / 8%) !important;
+ color: #000 !important;
+}
+
+.navbar-sidebar__backdrop {
+ background: rgb(0 0 0 / 50%) !important;
+ z-index: 9998 !important;
+}
+
+/* Hero section mobile menu */
+.hero-navbar .navbar-sidebar {
+ background: rgb(0 0 0 / 95%) !important;
+ z-index: 9999 !important;
+ position: fixed !important;
+ top: 0 !important;
+ right: 0 !important;
+ height: 100vh !important;
+ width: 300px !important;
+}
+
+.hero-navbar .navbar-sidebar__brand {
+ background: rgb(0 0 0 / 95%) !important;
+ padding: 16px !important;
+}
+
+.hero-navbar .navbar-sidebar__items {
+ background: rgb(0 0 0 / 95%) !important;
+ padding: 20px 0 !important;
+}
+
+.hero-navbar .navbar-sidebar .menu__link {
+ color: #fff !important;
+ text-shadow: 1px 1px 2px rgb(0 0 0 / 50%) !important;
+ font-weight: 600 !important;
+ padding: 12px 16px !important;
+ border-radius: 8px !important;
+ margin: 4px 8px !important;
+ display: block !important;
+ text-decoration: none !important;
+}
+
+.hero-navbar .navbar-sidebar .menu__link:hover,
+.hero-navbar .navbar-sidebar .menu__link--active {
+ background: rgb(255 255 255 / 20%) !important;
+ color: #fff !important;
+}
+
+.hero-navbar .navbar-sidebar__backdrop {
+ background: rgb(0 0 0 / 70%) !important;
+ z-index: 9998 !important;
+}
+
+/* Hero section specific navbar styling - only when in hero viewport */
+.hero-navbar .navbar {
+ background: rgb(0 0 0 / 70%) !important;
+ border-bottom: 1px solid rgb(255 255 255 / 30%) !important;
+ box-shadow: 0 4px 20px rgb(0 0 0 / 30%) !important;
+}
+
+/* Mobile specific navbar enhancement */
+@media (max-width: 768px) {
+ .hero-navbar .navbar {
+ background: rgb(0 0 0 / 85%) !important;
+ border-bottom: 2px solid rgb(255 255 255 / 40%) !important;
+ box-shadow: 0 6px 25px rgb(0 0 0 / 40%) !important;
+ }
+
+ .hero-navbar .navbar__title {
+ font-size: 1.1rem !important;
+ font-weight: 900 !important;
+ text-shadow: 2px 2px 6px rgb(0 0 0 / 100%) !important;
+ }
+
+ .hero-navbar .navbar__link {
+ font-size: 0.9rem !important;
+ font-weight: 700 !important;
+ text-shadow: 2px 2px 6px rgb(0 0 0 / 100%) !important;
+ padding: 10px 14px !important;
+ }
+
+ .hero-navbar .navbar__toggle {
+ font-size: 1.2rem !important;
+ font-weight: 900 !important;
+ text-shadow: 2px 2px 6px rgb(0 0 0 / 100%) !important;
+ }
+}
+
+.hero-navbar .navbar__title {
+ color: #fff !important;
+ text-shadow: 1px 1px 2px rgb(0 0 0 / 30%) !important;
+}
+
+.hero-navbar .navbar__link {
+ color: rgb(255 255 255 / 90%) !important;
+ text-shadow: 1px 1px 2px rgb(0 0 0 / 30%) !important;
+ padding: 8px 16px !important;
+ border-radius: 20px !important;
+ margin: 0 4px !important;
+}
+
+.hero-navbar .navbar__link:hover,
+.hero-navbar .navbar__link--active {
+ color: #fff !important;
+ background: rgb(255 255 255 / 20%) !important;
+ backdrop-filter: blur(10px) !important;
+ text-shadow: 1px 1px 3px rgb(0 0 0 / 50%) !important;
+ transform: translateY(-1px) !important;
+}
+
+.hero-navbar .navbar__toggle {
+ color: #fff !important;
+ background: none !important;
+ border: none !important;
+ cursor: pointer !important;
+ z-index: 9999 !important;
+}
+
+.hero-navbar .navbar__toggle:hover,
+.hero-navbar .navbar__toggle:focus {
+ background: rgb(255 255 255 / 20%) !important;
+ border-radius: 4px !important;
+}
+
+.hero-navbar .navbar__search-input {
+ background: rgb(255 255 255 / 20%) !important;
+ border: 1px solid rgb(255 255 255 / 30%) !important;
+ color: #fff !important;
+ backdrop-filter: blur(10px) !important;
+ border-radius: 20px !important;
+}
+
+.hero-navbar .navbar__search-input::placeholder {
+ color: rgb(255 255 255 / 70%) !important;
}
Review Comment:
The navbar styling changes with hero-specific behavior are not related to
issue #1965 about responsive table design for the code samples page. These
extensive navbar styling modifications (230+ lines) completely change the
navbar appearance and behavior, which should be in a separate PR with its own
issue and review.
##########
website/src/css/customTheme.scss:
##########
@@ -530,3 +778,557 @@ button[class*="announcementBarClose"] {
font-weight: 500;
}
}
+
+/* Enhanced Table Styles for Code Samples Page */
+.markdown table {
+ width: 130%;
+ max-width: 1600px;
+ border-collapse: collapse;
+ margin: 2rem auto;
+ margin-left: 64%;
+ transform: translateX(-50%);
+ font-size: 0.99rem;
+ box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
+ border-radius: 8px;
+ overflow: hidden;
+ table-layout: fixed;
+}
+
+.markdown table thead {
+ background: linear-gradient(135deg, var(--ifm-color-primary) 0%, #d0312d
100%);
+ color: white;
+}
+
+.markdown table th {
+ padding: 1rem 0.8rem;
+ font-weight: 600;
+ text-align: left;
+ font-size: 0.9rem;
+ letter-spacing: 0.3px;
+ border: none;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+}
+
+.markdown table td {
+ padding: 1rem 0.8rem;
+ border-bottom: 1px solid var(--ifm-table-border-color);
+ vertical-align: top;
+ line-height: 1.5;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+ hyphens: auto;
+ font-size: 0.9rem;
+}
+
+/* Enhanced column widths for code samples table - Larger size with better
spacing */
+.markdown table th:nth-child(1),
+.markdown table td:nth-child(1) {
+ min-width: 200px;
+ width: 20%;
+ max-width: 250px;
+}
+
+.markdown table th:nth-child(2),
+.markdown table td:nth-child(2) {
+ min-width: 260px;
+ width: 25%;
+ max-width: 320px;
+}
+
+.markdown table th:nth-child(3),
+.markdown table td:nth-child(3) {
+ min-width: 180px;
+ width: 18%;
+ max-width: 220px;
+}
+
+.markdown table th:nth-child(4),
+.markdown table td:nth-child(4) {
+ min-width: 180px;
+ width: 18%;
+ max-width: 220px;
+}
+
+.markdown table th:nth-child(5),
+.markdown table td:nth-child(5) {
+ min-width: 150px;
+ width: 12%;
+ max-width: 190px;
+}
+
+.markdown table th:nth-child(6),
+.markdown table td:nth-child(6) {
+ min-width: 150px;
+ width: 12%;
+ max-width: 180px;
+}
+
+/* Badge-like styling for categories and levels */
+.markdown table td:nth-child(5) {
+ font-size: 0.8rem;
+ font-weight: 500;
+}
+
+.markdown table td:nth-child(6) {
+ font-size: 0.8rem;
+ font-weight: 600;
+ text-transform: uppercase;
+}
+
+.markdown table tbody tr:hover {
+ background-color: var(--ifm-hover-overlay);
+ transition: background-color 0.2s ease;
+}
+
+.markdown table tbody tr:last-child td {
+ border-bottom: none;
+}
+
+/* Responsive table wrapper */
+.table-wrapper {
+ width: 100%;
+ overflow-x: auto;
+ margin: 2rem 0;
+ border-radius: 8px;
+ box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
+}
+
+/* Links styling in table */
+.markdown table a {
+ color: var(--ifm-color-primary);
+ text-decoration: none;
+ font-weight: 500;
+ transition: all 0.2s ease;
+ opacity: 1;
+}
+
+.markdown table a:hover {
+ color: var(--ifm-color-primary-darker);
+ text-decoration: underline;
+}
+
+/* Dark mode link styling */
+html[data-theme="dark"] .markdown table a {
+ color: #ff6b6b;
+}
+
+html[data-theme="dark"] .markdown table a:hover {
+ color: #ff5252;
+}
+
+/* responsive adjustments (1024px - 1366px) */
+@media screen and (max-width: 1366px) and (min-width: 1025px) {
+ .markdown table {
+ width: 125%;
+ margin-left: 62%;
+ font-size: 0.9rem;
+ }
+
+ .markdown table th,
+ .markdown table td {
+ padding: 0.9rem 0.7rem;
+ }
+
+ .markdown table th:nth-child(1),
+ .markdown table td:nth-child(1) {
+ min-width: 180px;
+ width: 19%;
+ }
+
+ .markdown table th:nth-child(2),
+ .markdown table td:nth-child(2) {
+ min-width: 220px;
+ width: 24%;
+ }
+
+ .markdown table th:nth-child(6),
+ .markdown table td:nth-child(6) {
+ min-width: 130px;
+ width: 11%;
+ }
+}
+
+/* Medium screens/Small laptops (768px - 1024px) */
+@media screen and (max-width: 1024px) and (min-width: 769px) {
+ .markdown table {
+ width: 120%;
+ margin-left: 60%;
+ font-size: 0.85rem;
+ }
+
+ .markdown table th,
+ .markdown table td {
+ padding: 0.8rem 0.6rem;
+ }
+
+ .markdown table th:nth-child(1),
+ .markdown table td:nth-child(1) {
+ min-width: 160px;
+ width: 18%;
+ }
+
+ .markdown table th:nth-child(2),
+ .markdown table td:nth-child(2) {
+ min-width: 200px;
+ width: 23%;
+ }
+
+ .markdown table th:nth-child(3),
+ .markdown table td:nth-child(3) {
+ min-width: 140px;
+ width: 16%;
+ }
+
+ .markdown table th:nth-child(4),
+ .markdown table td:nth-child(4) {
+ min-width: 140px;
+ width: 16%;
+ }
+
+ .markdown table th:nth-child(5),
+ .markdown table td:nth-child(5) {
+ min-width: 120px;
+ width: 14%;
+ }
+
+ .markdown table th:nth-child(6),
+ .markdown table td:nth-child(6) {
+ min-width: 110px;
+ width: 10%;
+ }
+
+ .markdown table th:nth-child(7),
+ .markdown table td:nth-child(7) {
+ min-width: 70px;
+ width: 3%;
+ }
+}
+
+/* Large Tablets (768px - 1024px) - NO horizontal scroll */
+@media screen and (max-width: 1024px) and (min-width: 769px) {
+ .markdown table {
+ width: 110%;
+ margin-left: 55%;
+ font-size: 0.82rem;
+ table-layout: fixed;
+ }
+
+ .markdown table th,
+ .markdown table td {
+ padding: 0.75rem 0.55rem;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .markdown table th:nth-child(6),
+ .markdown table td:nth-child(6) {
+ width: 9%;
+ }
+}
+
+/* Standard Tablets Portrait (600px - 768px) - NO horizontal scroll */
+@media screen and (max-width: 768px) and (min-width: 601px) {
+ .markdown table {
+ width: 100%;
+ margin-left: 0;
+ transform: none;
+ font-size: 0.78rem;
+ table-layout: fixed;
+ }
+
+ .markdown table th,
+ .markdown table td {
+ padding: 0.7rem 0.5rem;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .markdown table th:nth-child(1),
+ .markdown table td:nth-child(1) {
+ width: 18%;
+ }
+
+ .markdown table th:nth-child(2),
+ .markdown table td:nth-child(2) {
+ width: 22%;
+ }
+
+ .markdown table th:nth-child(3),
+ .markdown table td:nth-child(3) {
+ width: 16%;
+ }
+
+ .markdown table th:nth-child(4),
+ .markdown table td:nth-child(4) {
+ width: 16%;
+ }
+
+ .markdown table th:nth-child(5),
+ .markdown table td:nth-child(5) {
+ width: 14%;
+ }
+
+ .markdown table th:nth-child(6),
+ .markdown table td:nth-child(6) {
+ width: 9%;
+ }
+
+ .markdown table th:nth-child(7),
+ .markdown table td:nth-child(7) {
+ width: 5%;
+ }
+}
+
+/* Large Mobile Phones (480px - 600px) - WITH horizontal scroll for all
columns */
+@media screen and (max-width: 600px) and (min-width: 481px) {
+ .markdown {
+ overflow-x: auto;
+ -webkit-overflow-scrolling: touch;
+ padding-right: 50px;
+ }
+
+ .markdown table {
+ width: auto;
+ min-width: 1400px;
+ margin-left: 0;
+ transform: none;
+ font-size: 0.76rem;
+ table-layout: fixed;
+ border-collapse: separate;
+ border-spacing: 0;
+ }
+
+ .markdown table th,
+ .markdown table td {
+ padding: 0.7rem 0.5rem;
+ line-height: 1.4;
+ vertical-align: top;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+ hyphens: auto;
+ border-right: 1px solid var(--ifm-table-border-color);
+ }
+
+ .markdown table th:last-child,
+ .markdown table td:last-child {
+ border-right: none;
+ padding-right: 50px;
+ }
+
+ .markdown table th:nth-child(1),
+ .markdown table td:nth-child(1) {
+ width: 160px;
+ white-space: normal;
+ position: sticky;
+ left: 0;
+ background: var(--ifm-background-color);
+ z-index: 1;
+ border-right: 2px solid var(--ifm-table-border-color);
+ }
Review Comment:
The sticky first column implementation may cause accessibility issues for
keyboard navigation and screen reader users. When scrolling horizontally via
keyboard (using Tab or arrow keys), users may lose context as the focus moves
to columns that are scrolled out of view while the first column remains
visible. Consider adding `tabindex` attributes or ARIA labels to help screen
reader users understand the sticky column behavior, or ensure that keyboard
focus scrolls the table appropriately to keep the focused element in view.
##########
website/src/css/customTheme.scss:
##########
@@ -530,3 +778,557 @@ button[class*="announcementBarClose"] {
font-weight: 500;
}
}
+
+/* Enhanced Table Styles for Code Samples Page */
+.markdown table {
+ width: 130%;
+ max-width: 1600px;
+ border-collapse: collapse;
+ margin: 2rem auto;
+ margin-left: 64%;
+ transform: translateX(-50%);
Review Comment:
The table positioning uses an unusual approach with `margin-left: 64%` and
`transform: translateX(-50%)`. This means the table's left edge starts at 64%
of the container width, then shifts left by 50% of the table's width. For a
130% wide table, this calculation results in: 64% - (130% * 0.5) = -1% from the
left edge. This is a fragile approach that may break with different container
widths or table sizes. Consider using standard centering techniques like
`margin: 0 auto` with appropriate max-width constraints, or CSS Grid/Flexbox
for more predictable layout behavior.
```suggestion
```
##########
website/src/components/sections/Architecture.tsx:
##########
@@ -42,10 +42,10 @@ const Architecture: FC = () => (
</div>
<div className="arch-card-caption">
<p>
- <Translate id="architecture.component.card.caption">
- Apache APISIX is based on NGINX and etcd. Compared with
traditional API Gateways, APISIX
- has features like dynamic routing and hot-loading plugins, etc.
- </Translate>
+ Apache APISIX is based on NGINX and etcd.
+ Compared with traditional API Gateways,
+ APISIX has features like dynamic routing<br />
+ and hot-loading plugins, etc.
Review Comment:
Removing the Translate component breaks internationalization for Chinese
users. The translation "architecture.component.card.caption" exists in
website/i18n/zh/code.json. Hardcoding the English text with line breaks makes
the text untranslatable and is not related to the PR's stated objective of
enhancing the code samples table. This change should be reverted.
```suggestion
<Translate id="architecture.component.card.caption">
Apache APISIX is based on NGINX and etcd. Compared with
traditional API Gateways, APISIX
has features like dynamic routing and hot-loading plugins, etc.
</Translate>
```
##########
website/src/css/landing-sections/architecture.scss:
##########
@@ -113,6 +121,83 @@
.docs-promo-subtitle,
.oss-promo-subtitle {
left: 7%;
- width: 85%;
+ width: 80%;
+ max-width: 80%;
+ padding-right: 13%;
+ box-sizing: border-box;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+ hyphens: auto;
+ line-height: 1.5;
+ }
+
+ .arch-card-caption > p {
+ width: 95%;
+ font-size: 0.9rem;
+ padding: 5px;
+ }
+}
+
+/* Medium tablets and large phones */
+@media (max-width: 768px) {
+ .arch-card-caption > p {
+ width: 92%;
+ font-size: 0.85rem;
+ padding: 6px;
+ line-height: 1.5;
+ }
+}
+
+@media (max-width: 480px) {
+ .arch-card-border {
+ width: 85% !important;
+ left: 7.5% !important;
+ height: 110% !important;
+ }
+
+ .arch-card-caption {
+ padding: 0 10px;
+ overflow: hidden;
+ width: 100%;
+ max-width: 100%;
+ box-sizing: border-box;
+ }
+
+ .arch-card-caption > p {
+ font-size: 0.65rem;
+ width: 80%;
+ max-width: 80%;
+ padding: 8px 0;
+ margin: 15px 0;
+ word-wrap: break-word !important;
+ overflow-wrap: break-word !important;
+ word-break: break-word !important;
+ hyphens: auto;
+ line-height: 1.4;
+ box-sizing: border-box;
+ overflow: hidden;
+ }
+}
+
+/* Extra small devices */
+@media (max-width: 360px) {
+ .arch-card-border {
+ width: 90% !important;
+ left: 5% !important;
+ height: 115% !important;
+ }
+
+ .arch-card-caption {
+ padding: 0 8px;
+ }
+
+ .arch-card-caption > p {
+ font-size: 0.6rem;
+ width: 75%;
+ max-width: 75%;
+ word-break: break-all !important;
+ line-height: 1.3;
+ margin: 12px 0;
+ padding: 6px 0;
}
}
Review Comment:
The architecture section styling changes are not related to the code samples
table responsive design mentioned in issue #1965. These changes should be part
of a separate PR focused on landing page improvements.
##########
website/src/pages/plugins.tsx:
##########
@@ -204,15 +204,19 @@ const Plugins: FC = () => {
return (
<div key={plugin.name}>
<PluginCard href={plugin.beta ?
`/docs/apisix/next/plugins/${pluginUrl}` : `/docs/apisix/plugins/${pluginUrl}`}
target="_blank">
+
<PluginIcon>
- {plugin.useDefaultIcon
- ? <img className="plugin-logo shadow default"
src="/img/plugin/default-icon.png" alt={plugin.name} />
- : (
+ {['batch-requests', 'grpc-transcode', 'error-log-logger',
'proxy-cache', 'http-logger', 'proxy-mirror', 'proxy-rewrite',
'response-rewrite', 'request-id', 'tcp-logger', 'zipkin', 'udp-logger',
'sls-logger', 'syslog', 'limit-conn', 'api-breaker', 'consumer-restriction',
'basic-auth', 'fault-injection', 'ip-restriction', 'hmac-auth', 'key-auth',
'limit-count', 'cors', 'limit-req', 'traffic-split', 'request-validation',
'referer-restriction', 'wolf-rbac', 'jwt-auth', 'authz-casbin',
'authz-keycloak', 'kafka-logger', 'openid-connect', 'prometheus', 'skywalking',
'datadog', 'google-cloud-logging', 'uri-blocker', 'redirect', 'echo', 'gzip',
'real-ip', 'server-info', 'grpc-web', 'mocking', 'authz-casdoor', 'cas-auth',
'ldap-auth', 'opa', 'forward-auth', 'ext-plugin-pre-req',
'ext-plugin-post-req', 'ext-plugin-post-resp', 'ua-restriction', 'csrf',
'public-api', 'node-status', 'opentelemetry', 'skywalking-loggerr',
'rocketmq-logger', 'clickhouse-logger', 'log-rotate', 'splunk-h
ec-logging', 'file-logger', 'loggly', 'elasticsearch-logger',
'tencent-cloud-cls', 'serverless', 'azure-functions', 'openwhisk',
'aws-lambda', 'workflow', 'openfunction', 'dubbo-proxy', 'mqtt-proxy',
'kafka-proxy', 'proxy-control', 'client-control', 'CSRF'].includes(plugin.name)
Review Comment:
This change to the plugin icon logic is not related to the stated PR
objective of enhancing the code samples table with responsive design. The PR
description mentions fixes to issue #1965 about responsive table design, but
this file modifies plugin icon display logic. This change appears to invert the
condition from "useDefaultIcon ? default : svg" to a hardcoded array check with
inverted logic. The change scope should be limited to the table styling as
described in the PR.
##########
website/src/components/sections/HeroSection.tsx:
##########
@@ -24,39 +21,69 @@ const LazyLoadHeroCanvas = () => {
);
};
-const HeroSection: FC = () => (
- <div className="hero-sec-wrap" style={{ width: '100%' }}>
- <div className="hero-text">
- <h1 className="hero-title">
- <Translate id="hero.component.title.fragment1">API Gateway & AI
Gateway for APIs and AI Agents</Translate>
- </h1>
- <h2
- className="hero-subtitle"
- style={{
- color: '#E8433E', fontSize: 32, fontWeight: 700, lineHeight: 1.2,
- }}
- >
- <Translate id="hero.component.title.fragment2">
- Open-Source, Community-Driven, Future-Ready
- </Translate>
- </h2>
- <h3 className="hero-subtitle">
- <Translate id="hero.component.subtitle.content">
- APISIX API Gateway provides rich traffic management features like
load balancing, dynamic
- upstream, canary release, circuit breaking, auth, and observability.
- </Translate>
- </h3>
- <div className="hero-ctas">
- <Link target="_parent" to={useBaseUrl('docs/apisix/getting-started')}
className="btn btn-download">
- <Translate id="hero.component.download.btn">Getting
Started</Translate>
- </Link>
- <ArrowAnim />
- </div>
- </div>
- <div className="add-margin">
+const HeroSection: FC = () => {
+ useEffect(() => {
+ const handleScroll = () => {
+ const heroSection = document.querySelector('.hero-sec-wrap');
+ const navbar = document.querySelector('.navbar');
+
+ if (heroSection && navbar) {
+ const heroRect = heroSection.getBoundingClientRect();
+ const isInHeroSection = heroRect.top <= 100 && heroRect.bottom >= 0;
+
+ if (isInHeroSection) {
+ document.body.classList.add('hero-navbar');
+ } else {
+ document.body.classList.remove('hero-navbar');
+ }
+ }
+ };
+
+ // Set initial state
+ handleScroll();
+
+ // Add scroll listener
+ window.addEventListener('scroll', handleScroll);
+
+ // Cleanup
+ return () => {
+ window.removeEventListener('scroll', handleScroll);
+ document.body.classList.remove('hero-navbar');
+ };
+ }, []);
Review Comment:
The LazyLoadHeroCanvas function now renders the canvas on mobile devices,
removing the conditional check that prevented it. This change, along with the
scroll event handler for navbar styling, is not related to the PR's stated
objective of enhancing the code samples table with responsive design per issue
#1965. These changes should be in a separate PR.
##########
website/src/components/sections/HeroSection.tsx:
##########
@@ -24,39 +21,69 @@ const LazyLoadHeroCanvas = () => {
);
};
-const HeroSection: FC = () => (
- <div className="hero-sec-wrap" style={{ width: '100%' }}>
- <div className="hero-text">
- <h1 className="hero-title">
- <Translate id="hero.component.title.fragment1">API Gateway & AI
Gateway for APIs and AI Agents</Translate>
- </h1>
- <h2
- className="hero-subtitle"
- style={{
- color: '#E8433E', fontSize: 32, fontWeight: 700, lineHeight: 1.2,
- }}
- >
- <Translate id="hero.component.title.fragment2">
- Open-Source, Community-Driven, Future-Ready
- </Translate>
- </h2>
- <h3 className="hero-subtitle">
- <Translate id="hero.component.subtitle.content">
- APISIX API Gateway provides rich traffic management features like
load balancing, dynamic
- upstream, canary release, circuit breaking, auth, and observability.
- </Translate>
- </h3>
- <div className="hero-ctas">
- <Link target="_parent" to={useBaseUrl('docs/apisix/getting-started')}
className="btn btn-download">
- <Translate id="hero.component.download.btn">Getting
Started</Translate>
- </Link>
- <ArrowAnim />
- </div>
- </div>
- <div className="add-margin">
+const HeroSection: FC = () => {
+ useEffect(() => {
+ const handleScroll = () => {
+ const heroSection = document.querySelector('.hero-sec-wrap');
+ const navbar = document.querySelector('.navbar');
+
+ if (heroSection && navbar) {
+ const heroRect = heroSection.getBoundingClientRect();
+ const isInHeroSection = heroRect.top <= 100 && heroRect.bottom >= 0;
+
+ if (isInHeroSection) {
+ document.body.classList.add('hero-navbar');
+ } else {
+ document.body.classList.remove('hero-navbar');
+ }
+ }
+ };
+
+ // Set initial state
+ handleScroll();
+
+ // Add scroll listener
+ window.addEventListener('scroll', handleScroll);
+
Review Comment:
The scroll event handler runs on every scroll event without throttling or
debouncing. This can cause performance issues, especially on lower-end devices,
as it executes DOM queries (`querySelector`) and class list modifications on
every scroll event. Consider using a throttle or debounce mechanism (e.g., with
requestAnimationFrame or a throttle utility) to limit how often this handler
executes. Additionally, cache the DOM element references outside the handler to
avoid repeated queries.
```suggestion
const heroSection = document.querySelector('.hero-sec-wrap');
const navbar = document.querySelector('.navbar');
let ticking = false;
const updateHeroNavbar = () => {
if (heroSection && navbar) {
const heroRect = heroSection.getBoundingClientRect();
const isInHeroSection = heroRect.top <= 100 && heroRect.bottom >= 0;
if (isInHeroSection) {
document.body.classList.add('hero-navbar');
} else {
document.body.classList.remove('hero-navbar');
}
} else {
document.body.classList.remove('hero-navbar');
}
ticking = false;
};
const handleScroll = () => {
if (!ticking) {
ticking = true;
window.requestAnimationFrame(updateHeroNavbar);
}
};
// Set initial state
updateHeroNavbar();
// Add scroll listener
window.addEventListener('scroll', handleScroll, { passive: true });
```
##########
website/src/css/customTheme.scss:
##########
@@ -530,3 +778,557 @@ button[class*="announcementBarClose"] {
font-weight: 500;
}
}
+
+/* Enhanced Table Styles for Code Samples Page */
+.markdown table {
+ width: 130%;
+ max-width: 1600px;
+ border-collapse: collapse;
+ margin: 2rem auto;
+ margin-left: 64%;
+ transform: translateX(-50%);
+ font-size: 0.99rem;
+ box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
+ border-radius: 8px;
+ overflow: hidden;
+ table-layout: fixed;
+}
+
+.markdown table thead {
+ background: linear-gradient(135deg, var(--ifm-color-primary) 0%, #d0312d
100%);
+ color: white;
+}
+
+.markdown table th {
+ padding: 1rem 0.8rem;
+ font-weight: 600;
+ text-align: left;
+ font-size: 0.9rem;
+ letter-spacing: 0.3px;
+ border: none;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+}
+
+.markdown table td {
+ padding: 1rem 0.8rem;
+ border-bottom: 1px solid var(--ifm-table-border-color);
+ vertical-align: top;
+ line-height: 1.5;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+ hyphens: auto;
+ font-size: 0.9rem;
+}
+
+/* Enhanced column widths for code samples table - Larger size with better
spacing */
+.markdown table th:nth-child(1),
+.markdown table td:nth-child(1) {
+ min-width: 200px;
+ width: 20%;
+ max-width: 250px;
+}
+
+.markdown table th:nth-child(2),
+.markdown table td:nth-child(2) {
+ min-width: 260px;
+ width: 25%;
+ max-width: 320px;
+}
+
+.markdown table th:nth-child(3),
+.markdown table td:nth-child(3) {
+ min-width: 180px;
+ width: 18%;
+ max-width: 220px;
+}
+
+.markdown table th:nth-child(4),
+.markdown table td:nth-child(4) {
+ min-width: 180px;
+ width: 18%;
+ max-width: 220px;
+}
+
+.markdown table th:nth-child(5),
+.markdown table td:nth-child(5) {
+ min-width: 150px;
+ width: 12%;
+ max-width: 190px;
+}
+
+.markdown table th:nth-child(6),
+.markdown table td:nth-child(6) {
+ min-width: 150px;
+ width: 12%;
+ max-width: 180px;
+}
+
+/* Badge-like styling for categories and levels */
+.markdown table td:nth-child(5) {
+ font-size: 0.8rem;
+ font-weight: 500;
+}
+
+.markdown table td:nth-child(6) {
+ font-size: 0.8rem;
+ font-weight: 600;
+ text-transform: uppercase;
+}
+
+.markdown table tbody tr:hover {
+ background-color: var(--ifm-hover-overlay);
+ transition: background-color 0.2s ease;
+}
+
+.markdown table tbody tr:last-child td {
+ border-bottom: none;
+}
+
+/* Responsive table wrapper */
+.table-wrapper {
+ width: 100%;
+ overflow-x: auto;
+ margin: 2rem 0;
+ border-radius: 8px;
+ box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
+}
+
+/* Links styling in table */
+.markdown table a {
+ color: var(--ifm-color-primary);
+ text-decoration: none;
+ font-weight: 500;
+ transition: all 0.2s ease;
+ opacity: 1;
+}
+
+.markdown table a:hover {
+ color: var(--ifm-color-primary-darker);
+ text-decoration: underline;
+}
+
+/* Dark mode link styling */
+html[data-theme="dark"] .markdown table a {
+ color: #ff6b6b;
+}
+
+html[data-theme="dark"] .markdown table a:hover {
+ color: #ff5252;
+}
+
+/* responsive adjustments (1024px - 1366px) */
+@media screen and (max-width: 1366px) and (min-width: 1025px) {
+ .markdown table {
+ width: 125%;
+ margin-left: 62%;
+ font-size: 0.9rem;
+ }
+
+ .markdown table th,
+ .markdown table td {
+ padding: 0.9rem 0.7rem;
+ }
+
+ .markdown table th:nth-child(1),
+ .markdown table td:nth-child(1) {
+ min-width: 180px;
+ width: 19%;
+ }
+
+ .markdown table th:nth-child(2),
+ .markdown table td:nth-child(2) {
+ min-width: 220px;
+ width: 24%;
+ }
+
+ .markdown table th:nth-child(6),
+ .markdown table td:nth-child(6) {
+ min-width: 130px;
+ width: 11%;
+ }
+}
+
+/* Medium screens/Small laptops (768px - 1024px) */
+@media screen and (max-width: 1024px) and (min-width: 769px) {
+ .markdown table {
+ width: 120%;
+ margin-left: 60%;
+ font-size: 0.85rem;
+ }
+
+ .markdown table th,
+ .markdown table td {
+ padding: 0.8rem 0.6rem;
+ }
+
+ .markdown table th:nth-child(1),
+ .markdown table td:nth-child(1) {
+ min-width: 160px;
+ width: 18%;
+ }
+
+ .markdown table th:nth-child(2),
+ .markdown table td:nth-child(2) {
+ min-width: 200px;
+ width: 23%;
+ }
+
+ .markdown table th:nth-child(3),
+ .markdown table td:nth-child(3) {
+ min-width: 140px;
+ width: 16%;
+ }
+
+ .markdown table th:nth-child(4),
+ .markdown table td:nth-child(4) {
+ min-width: 140px;
+ width: 16%;
+ }
+
+ .markdown table th:nth-child(5),
+ .markdown table td:nth-child(5) {
+ min-width: 120px;
+ width: 14%;
+ }
+
+ .markdown table th:nth-child(6),
+ .markdown table td:nth-child(6) {
+ min-width: 110px;
+ width: 10%;
+ }
+
+ .markdown table th:nth-child(7),
+ .markdown table td:nth-child(7) {
+ min-width: 70px;
+ width: 3%;
+ }
+}
+
+/* Large Tablets (768px - 1024px) - NO horizontal scroll */
+@media screen and (max-width: 1024px) and (min-width: 769px) {
+ .markdown table {
+ width: 110%;
+ margin-left: 55%;
+ font-size: 0.82rem;
+ table-layout: fixed;
+ }
+
+ .markdown table th,
+ .markdown table td {
+ padding: 0.75rem 0.55rem;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .markdown table th:nth-child(6),
+ .markdown table td:nth-child(6) {
+ width: 9%;
+ }
+}
+
+/* Standard Tablets Portrait (600px - 768px) - NO horizontal scroll */
+@media screen and (max-width: 768px) and (min-width: 601px) {
+ .markdown table {
+ width: 100%;
+ margin-left: 0;
+ transform: none;
+ font-size: 0.78rem;
+ table-layout: fixed;
+ }
+
+ .markdown table th,
+ .markdown table td {
+ padding: 0.7rem 0.5rem;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .markdown table th:nth-child(1),
+ .markdown table td:nth-child(1) {
+ width: 18%;
+ }
+
+ .markdown table th:nth-child(2),
+ .markdown table td:nth-child(2) {
+ width: 22%;
+ }
+
+ .markdown table th:nth-child(3),
+ .markdown table td:nth-child(3) {
+ width: 16%;
+ }
+
+ .markdown table th:nth-child(4),
+ .markdown table td:nth-child(4) {
+ width: 16%;
+ }
+
+ .markdown table th:nth-child(5),
+ .markdown table td:nth-child(5) {
+ width: 14%;
+ }
+
+ .markdown table th:nth-child(6),
+ .markdown table td:nth-child(6) {
+ width: 9%;
+ }
+
+ .markdown table th:nth-child(7),
+ .markdown table td:nth-child(7) {
+ width: 5%;
+ }
+}
+
+/* Large Mobile Phones (480px - 600px) - WITH horizontal scroll for all
columns */
+@media screen and (max-width: 600px) and (min-width: 481px) {
+ .markdown {
+ overflow-x: auto;
+ -webkit-overflow-scrolling: touch;
+ padding-right: 50px;
+ }
+
+ .markdown table {
+ width: auto;
+ min-width: 1400px;
+ margin-left: 0;
+ transform: none;
+ font-size: 0.76rem;
+ table-layout: fixed;
+ border-collapse: separate;
+ border-spacing: 0;
+ }
+
+ .markdown table th,
+ .markdown table td {
+ padding: 0.7rem 0.5rem;
+ line-height: 1.4;
+ vertical-align: top;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+ hyphens: auto;
+ border-right: 1px solid var(--ifm-table-border-color);
+ }
+
+ .markdown table th:last-child,
+ .markdown table td:last-child {
+ border-right: none;
+ padding-right: 50px;
+ }
+
+ .markdown table th:nth-child(1),
+ .markdown table td:nth-child(1) {
+ width: 160px;
+ white-space: normal;
+ position: sticky;
+ left: 0;
+ background: var(--ifm-background-color);
+ z-index: 1;
+ border-right: 2px solid var(--ifm-table-border-color);
+ }
Review Comment:
The sticky first column implementation has a potential issue in dark mode.
The background uses `var(--ifm-background-color)` which should work, but when
scrolling horizontally, there might be a visual gap or misalignment if the
header row doesn't also have a sticky first column with the same background.
Consider ensuring the sticky column in the header (th:nth-child(1)) also has
the same styling to maintain consistency during horizontal scroll.
##########
website/src/css/landing-sections/hero.scss:
##########
@@ -158,3 +312,339 @@
width: 40vw;
}
}
+
+@media (max-width: 996px) {
+ .hero-sec-wrap {
+ display: block !important;
+ height: 100vh !important;
+ min-height: 100vh;
+ }
+
+ .hero-text {
+ width: 90%;
+ max-width: 800px;
+ padding: 40px 30px;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ text-align: center;
+ }
+
+ .hero-title {
+ width: 100%;
+ max-width: 100%;
+ font-size: 3rem;
+ }
+
+ .hero-title::after {
+ width: 60px;
+ left: 50%;
+ transform: translateX(-50%);
+ }
+
+ .hero-subtitle {
+ width: 100%;
+ padding-right: 0;
+ }
+
+ .homeCanvas {
+ width: 100% !important;
+ height: 100% !important;
+ opacity: 0.85 !important;
+ }
+
+ .hero-ctas {
+ justify-content: center;
+ gap: 15px;
+ }
+}
+
+@media (max-width: 768px) {
+ .hero-text {
+ width: 95%;
+ max-width: 600px;
+ padding: 30px 25px;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
+
+ .hero-title {
+ font-size: 2.5rem;
+ max-width: 100%;
+ }
+
+ .hero-subtitle {
+ font-size: 1rem;
+ }
+
+ .btn {
+ padding: 16px 32px;
+ font-size: 1.1rem;
+ }
+}
+
+@media (max-width: 768px) {
+ .hero-sec-wrap {
+ width: 100vw !important;
+ height: 100vh !important;
+ min-height: 100vh;
+ margin: 0 !important;
+ padding: 0 !important;
+ left: 50% !important;
+ right: 50% !important;
+ margin-left: -50vw !important;
+ margin-right: -50vw !important;
+ overflow: hidden;
+ position: relative;
+ }
+
+ .homeCanvas {
+ width: 100% !important;
+ height: 100% !important;
+ opacity: 0.9 !important;
+ filter: none !important;
+ backdrop-filter: none !important;
+ }
+
+ .hero-text {
+ width: 95%;
+ max-width: none;
+ padding: 20px 15px;
+ margin: 0;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ filter: none !important;
+ backdrop-filter: none !important;
+ text-align: center;
+ background: rgba(0, 0, 0, 0.4);
+ border-radius: 10px;
+ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
+ max-height: 85vh;
+ overflow-y: auto;
+ }
+
+ .hero-title {
+ font-size: clamp(1.2rem, 4.5vw, 1.6rem);
+ max-width: 100%;
+ line-height: 1.3;
+ margin-bottom: 10px;
+ text-shadow: 2px 2px 6px rgba(0, 0, 0, 1), 0 0 15px rgba(0, 0, 0, 0.9),
1px 1px 2px rgba(0, 0, 0, 1);
+ font-weight: 900;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+ hyphens: auto;
+ white-space: normal;
+ text-align: center;
+ padding: 0 10px;
+ }
+
+ .hero-title::after {
+ width: 30px;
+ height: 1px;
+ left: 50%;
+ transform: translateX(-50%);
+ }
+
+ .hero-subtitle {
+ font-size: clamp(0.75rem, 2.8vw, 0.9rem);
+ line-height: 1.4;
+ margin: 8px 0;
+ text-shadow: 1px 1px 4px rgba(0, 0, 0, 1), 0 0 10px rgba(0, 0, 0, 0.9),
1px 1px 1px rgba(0, 0, 0, 1);
+ font-weight: 600;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+ hyphens: auto;
+ white-space: normal;
+ text-align: center;
+ padding: 0 10px;
+ max-width: 100%;
+ }
+
+ .hero-subtitle[style*="color: #E8433E"] {
+ font-size: clamp(1rem, 4vw, 1.2rem);
+ margin: 8px 0 12px 0;
+ text-shadow: 2px 2px 6px rgba(0, 0, 0, 1), 0 0 15px rgba(0, 0, 0, 0.9),
1px 1px 2px rgba(0, 0, 0, 1);
+ font-weight: 800;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+ hyphens: auto;
+ white-space: normal;
+ text-align: center;
+ padding: 0 10px;
+ max-width: 100%;
+ line-height: 1.3;
+ }
+
+ .hero-ctas {
+ margin-top: 15px;
+ gap: 10px;
+ justify-content: center;
+ padding: 0 10px;
+ }
+
+ .btn {
+ padding: 9px 18px;
+ font-size: 0.8rem;
+ font-weight: 700;
+ text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
+ max-width: 200px;
+ border-radius: 20px;
+ }
+
+ .btn-docs {
+ background: rgba(255, 255, 255, 0.3);
+ padding: 7px 14px;
+ max-width: 200px;
+ border-radius: 18px;
+ }
+
+ .btn-docs .goto {
+ font-size: 0.75rem;
+ font-weight: 700;
+ text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
+ margin-right: 6px;
+ }
+}
+
+@media (max-width: 480px) {
+ .hero-sec-wrap {
+ width: 100vw !important;
+ height: 100vh !important;
+ min-height: 100vh;
+ margin: 0 !important;
+ padding: 0 !important;
+ left: 50% !important;
+ right: 50% !important;
+ margin-left: -50vw !important;
+ margin-right: -50vw !important;
+ overflow: hidden;
+ position: relative;
+ }
+
+ .homeCanvas {
+ width: 100% !important;
+ height: 100% !important;
+ opacity: 1 !important;
+ filter: none !important;
+ backdrop-filter: none !important;
+ }
+
+ .hero-text {
+ width: 100%;
+ max-width: none;
+ padding: 15px 10px;
+ margin: 0;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ filter: none !important;
+ backdrop-filter: none !important;
+ text-align: center;
+ background: rgba(0, 0, 0, 0.5);
+ border-radius: 8px;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
+ max-height: 80vh;
+ overflow-y: auto;
+ }
+
+ .hero-title {
+ font-size: clamp(0.9rem, 4vw, 1.2rem);
+ max-width: 100%;
+ line-height: 1.3;
+ margin-bottom: 8px;
+ text-shadow: 2px 2px 6px rgba(0, 0, 0, 1), 0 0 15px rgba(0, 0, 0, 0.9),
1px 1px 2px rgba(0, 0, 0, 1);
+ font-weight: 900;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+ hyphens: auto;
+ white-space: normal;
+ text-align: center;
+ padding: 0 8px;
+ }
+
+ .hero-title::after {
+ width: 25px;
+ height: 1px;
+ left: 50%;
+ transform: translateX(-50%);
+ }
+
+ .hero-subtitle {
+ font-size: clamp(0.65rem, 2.5vw, 0.8rem);
+ line-height: 1.4;
+ margin: 6px 0;
+ text-shadow: 1px 1px 4px rgba(0, 0, 0, 1), 0 0 10px rgba(0, 0, 0, 0.9),
1px 1px 1px rgba(0, 0, 0, 1);
+ font-weight: 600;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+ hyphens: auto;
+ white-space: normal;
+ text-align: center;
+ padding: 0 8px;
+ max-width: 100%;
+ }
+
+ .hero-subtitle[style*="color: #E8433E"] {
+ font-size: clamp(0.8rem, 3.5vw, 1rem);
+ margin: 6px 0 10px 0;
+ text-shadow: 2px 2px 6px rgba(0, 0, 0, 1), 0 0 15px rgba(0, 0, 0, 0.9),
1px 1px 2px rgba(0, 0, 0, 1);
+ font-weight: 800;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+ hyphens: auto;
+ white-space: normal;
+ text-align: center;
+ padding: 0 8px;
+ max-width: 100%;
+ line-height: 1.3;
+ }
+
+ .hero-ctas {
+ flex-direction: column;
+ align-items: center;
+ gap: 8px;
+ margin-top: 12px;
+ padding: 0 10px;
+ }
+
+ .btn {
+ width: 100%;
+ max-width: 180px;
+ height: 45px;
+ text-align: center;
+ padding: 12px 20px;
+ font-size: 0.8rem;
+ font-weight: 800;
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
+ border-radius: 25px;
+ background: linear-gradient(135deg, #ff4757 0%, #ff3742 100%);
+ border: 2px solid rgba(255, 255, 255, 0.7);
+ }
+
+ .btn-docs {
+ width: 100%;
+ max-width: 180px;
+ height: 45px;
+ justify-content: center;
+ padding: 12px 20px;
+ background: rgba(255, 255, 255, 0.4);
+ border: 2px solid rgba(255, 255, 255, 0.7);
+ border-radius: 25px;
+ font-size: 0.8rem;
+ font-weight: 800;
+ }
+
+ .btn-docs .goto {
+ font-size: 0.75rem;
+ font-weight: 800;
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
+ margin-right: 6px;
+ color: #ffffff;
+ }
+}
Review Comment:
The extensive hero section redesign (400+ lines of new CSS) is not related
to the PR objective of enhancing the code samples table. This includes new
animations, completely redesigned buttons, text shadows, gradient backgrounds,
and overlay effects. According to the PR description and linked issue #1965,
the changes should be limited to responsive table design for the code samples
page at /docs/general/code-samples/. These hero section changes should be in a
separate PR.
##########
website/src/css/customTheme.scss:
##########
@@ -530,3 +778,557 @@ button[class*="announcementBarClose"] {
font-weight: 500;
}
}
+
+/* Enhanced Table Styles for Code Samples Page */
+.markdown table {
+ width: 130%;
+ max-width: 1600px;
+ border-collapse: collapse;
+ margin: 2rem auto;
+ margin-left: 64%;
+ transform: translateX(-50%);
+ font-size: 0.99rem;
+ box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
+ border-radius: 8px;
+ overflow: hidden;
+ table-layout: fixed;
+}
+
+.markdown table thead {
+ background: linear-gradient(135deg, var(--ifm-color-primary) 0%, #d0312d
100%);
+ color: white;
+}
+
+.markdown table th {
+ padding: 1rem 0.8rem;
+ font-weight: 600;
+ text-align: left;
+ font-size: 0.9rem;
+ letter-spacing: 0.3px;
+ border: none;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+}
+
+.markdown table td {
+ padding: 1rem 0.8rem;
+ border-bottom: 1px solid var(--ifm-table-border-color);
+ vertical-align: top;
+ line-height: 1.5;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+ hyphens: auto;
+ font-size: 0.9rem;
+}
+
+/* Enhanced column widths for code samples table - Larger size with better
spacing */
+.markdown table th:nth-child(1),
+.markdown table td:nth-child(1) {
+ min-width: 200px;
+ width: 20%;
+ max-width: 250px;
+}
+
+.markdown table th:nth-child(2),
+.markdown table td:nth-child(2) {
+ min-width: 260px;
+ width: 25%;
+ max-width: 320px;
+}
+
+.markdown table th:nth-child(3),
+.markdown table td:nth-child(3) {
+ min-width: 180px;
+ width: 18%;
+ max-width: 220px;
+}
+
+.markdown table th:nth-child(4),
+.markdown table td:nth-child(4) {
+ min-width: 180px;
+ width: 18%;
+ max-width: 220px;
+}
+
+.markdown table th:nth-child(5),
+.markdown table td:nth-child(5) {
+ min-width: 150px;
+ width: 12%;
+ max-width: 190px;
+}
+
+.markdown table th:nth-child(6),
+.markdown table td:nth-child(6) {
+ min-width: 150px;
+ width: 12%;
+ max-width: 180px;
+}
+
+/* Badge-like styling for categories and levels */
+.markdown table td:nth-child(5) {
+ font-size: 0.8rem;
+ font-weight: 500;
+}
+
+.markdown table td:nth-child(6) {
+ font-size: 0.8rem;
+ font-weight: 600;
+ text-transform: uppercase;
+}
+
+.markdown table tbody tr:hover {
+ background-color: var(--ifm-hover-overlay);
+ transition: background-color 0.2s ease;
+}
+
+.markdown table tbody tr:last-child td {
+ border-bottom: none;
+}
+
+/* Responsive table wrapper */
+.table-wrapper {
+ width: 100%;
+ overflow-x: auto;
+ margin: 2rem 0;
+ border-radius: 8px;
+ box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
+}
+
+/* Links styling in table */
+.markdown table a {
+ color: var(--ifm-color-primary);
+ text-decoration: none;
+ font-weight: 500;
+ transition: all 0.2s ease;
+ opacity: 1;
+}
+
+.markdown table a:hover {
+ color: var(--ifm-color-primary-darker);
+ text-decoration: underline;
+}
+
+/* Dark mode link styling */
+html[data-theme="dark"] .markdown table a {
+ color: #ff6b6b;
+}
+
+html[data-theme="dark"] .markdown table a:hover {
+ color: #ff5252;
+}
+
+/* responsive adjustments (1024px - 1366px) */
+@media screen and (max-width: 1366px) and (min-width: 1025px) {
+ .markdown table {
+ width: 125%;
+ margin-left: 62%;
+ font-size: 0.9rem;
+ }
+
+ .markdown table th,
+ .markdown table td {
+ padding: 0.9rem 0.7rem;
+ }
+
+ .markdown table th:nth-child(1),
+ .markdown table td:nth-child(1) {
+ min-width: 180px;
+ width: 19%;
+ }
+
+ .markdown table th:nth-child(2),
+ .markdown table td:nth-child(2) {
+ min-width: 220px;
+ width: 24%;
+ }
+
+ .markdown table th:nth-child(6),
+ .markdown table td:nth-child(6) {
+ min-width: 130px;
+ width: 11%;
+ }
+}
+
+/* Medium screens/Small laptops (768px - 1024px) */
+@media screen and (max-width: 1024px) and (min-width: 769px) {
+ .markdown table {
+ width: 120%;
+ margin-left: 60%;
+ font-size: 0.85rem;
+ }
+
+ .markdown table th,
+ .markdown table td {
+ padding: 0.8rem 0.6rem;
+ }
+
+ .markdown table th:nth-child(1),
+ .markdown table td:nth-child(1) {
+ min-width: 160px;
+ width: 18%;
+ }
+
+ .markdown table th:nth-child(2),
+ .markdown table td:nth-child(2) {
+ min-width: 200px;
+ width: 23%;
+ }
+
+ .markdown table th:nth-child(3),
+ .markdown table td:nth-child(3) {
+ min-width: 140px;
+ width: 16%;
+ }
+
+ .markdown table th:nth-child(4),
+ .markdown table td:nth-child(4) {
+ min-width: 140px;
+ width: 16%;
+ }
+
+ .markdown table th:nth-child(5),
+ .markdown table td:nth-child(5) {
+ min-width: 120px;
+ width: 14%;
+ }
+
+ .markdown table th:nth-child(6),
+ .markdown table td:nth-child(6) {
+ min-width: 110px;
+ width: 10%;
+ }
+
+ .markdown table th:nth-child(7),
+ .markdown table td:nth-child(7) {
+ min-width: 70px;
+ width: 3%;
+ }
+}
+
+/* Large Tablets (768px - 1024px) - NO horizontal scroll */
+@media screen and (max-width: 1024px) and (min-width: 769px) {
+ .markdown table {
+ width: 110%;
+ margin-left: 55%;
+ font-size: 0.82rem;
+ table-layout: fixed;
+ }
+
+ .markdown table th,
+ .markdown table td {
+ padding: 0.75rem 0.55rem;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .markdown table th:nth-child(6),
+ .markdown table td:nth-child(6) {
+ width: 9%;
+ }
+}
+
+/* Standard Tablets Portrait (600px - 768px) - NO horizontal scroll */
+@media screen and (max-width: 768px) and (min-width: 601px) {
+ .markdown table {
+ width: 100%;
+ margin-left: 0;
+ transform: none;
+ font-size: 0.78rem;
+ table-layout: fixed;
+ }
+
+ .markdown table th,
+ .markdown table td {
+ padding: 0.7rem 0.5rem;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .markdown table th:nth-child(1),
+ .markdown table td:nth-child(1) {
+ width: 18%;
+ }
+
+ .markdown table th:nth-child(2),
+ .markdown table td:nth-child(2) {
+ width: 22%;
+ }
+
+ .markdown table th:nth-child(3),
+ .markdown table td:nth-child(3) {
+ width: 16%;
+ }
+
+ .markdown table th:nth-child(4),
+ .markdown table td:nth-child(4) {
+ width: 16%;
+ }
+
+ .markdown table th:nth-child(5),
+ .markdown table td:nth-child(5) {
+ width: 14%;
+ }
+
+ .markdown table th:nth-child(6),
+ .markdown table td:nth-child(6) {
+ width: 9%;
+ }
+
+ .markdown table th:nth-child(7),
+ .markdown table td:nth-child(7) {
+ width: 5%;
+ }
+}
+
+/* Large Mobile Phones (480px - 600px) - WITH horizontal scroll for all
columns */
+@media screen and (max-width: 600px) and (min-width: 481px) {
+ .markdown {
+ overflow-x: auto;
+ -webkit-overflow-scrolling: touch;
+ padding-right: 50px;
Review Comment:
The padding-right values (50px, 40px, 30px) added to the markdown container
and last table cells on mobile devices don't have a clear purpose and may cause
horizontal overflow issues. If this is intended to provide scroll padding,
consider using the CSS `scroll-padding-right` property instead, which is
specifically designed for scroll containers. Otherwise, document why this
padding is necessary.
##########
website/src/css/landing-sections/features.module.scss:
##########
@@ -320,3 +345,28 @@
}
}
}
+
+/* Extra small devices */
+@media (max-width: 480px) {
+ .features {
+ & .head {
+ padding: 0 3%;
+ max-width: 85%;
+
+ h2 {
+ font-size: 0.9rem;
+ padding: 4px 16px;
+ }
+
+ h3 {
+ font-size: 1.5rem;
+ line-height: 1.2;
+ }
+
+ p {
+ font-size: 0.75rem;
+ line-height: 1.3;
+ }
+ }
+ }
+}
Review Comment:
The responsive design additions to the features section are not mentioned in
the PR description or issue #1965. The PR scope should be limited to the code
samples table responsive design. These changes to features.module.scss should
be part of a separate PR focused on landing page improvements.
##########
website/src/css/customTheme.scss:
##########
@@ -530,3 +778,557 @@ button[class*="announcementBarClose"] {
font-weight: 500;
}
}
+
+/* Enhanced Table Styles for Code Samples Page */
+.markdown table {
+ width: 130%;
+ max-width: 1600px;
+ border-collapse: collapse;
+ margin: 2rem auto;
+ margin-left: 64%;
+ transform: translateX(-50%);
+ font-size: 0.99rem;
+ box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
+ border-radius: 8px;
+ overflow: hidden;
+ table-layout: fixed;
+}
+
+.markdown table thead {
+ background: linear-gradient(135deg, var(--ifm-color-primary) 0%, #d0312d
100%);
+ color: white;
+}
+
+.markdown table th {
+ padding: 1rem 0.8rem;
+ font-weight: 600;
+ text-align: left;
+ font-size: 0.9rem;
+ letter-spacing: 0.3px;
+ border: none;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+}
+
+.markdown table td {
+ padding: 1rem 0.8rem;
+ border-bottom: 1px solid var(--ifm-table-border-color);
+ vertical-align: top;
+ line-height: 1.5;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+ hyphens: auto;
+ font-size: 0.9rem;
+}
+
+/* Enhanced column widths for code samples table - Larger size with better
spacing */
+.markdown table th:nth-child(1),
+.markdown table td:nth-child(1) {
+ min-width: 200px;
+ width: 20%;
+ max-width: 250px;
+}
+
+.markdown table th:nth-child(2),
+.markdown table td:nth-child(2) {
+ min-width: 260px;
+ width: 25%;
+ max-width: 320px;
+}
+
+.markdown table th:nth-child(3),
+.markdown table td:nth-child(3) {
+ min-width: 180px;
+ width: 18%;
+ max-width: 220px;
+}
+
+.markdown table th:nth-child(4),
+.markdown table td:nth-child(4) {
+ min-width: 180px;
+ width: 18%;
+ max-width: 220px;
+}
+
+.markdown table th:nth-child(5),
+.markdown table td:nth-child(5) {
+ min-width: 150px;
+ width: 12%;
+ max-width: 190px;
+}
+
+.markdown table th:nth-child(6),
+.markdown table td:nth-child(6) {
+ min-width: 150px;
+ width: 12%;
+ max-width: 180px;
+}
+
+/* Badge-like styling for categories and levels */
+.markdown table td:nth-child(5) {
+ font-size: 0.8rem;
+ font-weight: 500;
+}
+
+.markdown table td:nth-child(6) {
+ font-size: 0.8rem;
+ font-weight: 600;
+ text-transform: uppercase;
+}
+
+.markdown table tbody tr:hover {
+ background-color: var(--ifm-hover-overlay);
+ transition: background-color 0.2s ease;
+}
+
+.markdown table tbody tr:last-child td {
+ border-bottom: none;
+}
+
+/* Responsive table wrapper */
+.table-wrapper {
+ width: 100%;
+ overflow-x: auto;
+ margin: 2rem 0;
+ border-radius: 8px;
+ box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
+}
+
+/* Links styling in table */
+.markdown table a {
+ color: var(--ifm-color-primary);
+ text-decoration: none;
+ font-weight: 500;
+ transition: all 0.2s ease;
+ opacity: 1;
+}
+
+.markdown table a:hover {
+ color: var(--ifm-color-primary-darker);
+ text-decoration: underline;
+}
+
+/* Dark mode link styling */
+html[data-theme="dark"] .markdown table a {
+ color: #ff6b6b;
+}
+
+html[data-theme="dark"] .markdown table a:hover {
+ color: #ff5252;
+}
+
+/* responsive adjustments (1024px - 1366px) */
+@media screen and (max-width: 1366px) and (min-width: 1025px) {
+ .markdown table {
+ width: 125%;
+ margin-left: 62%;
+ font-size: 0.9rem;
+ }
+
+ .markdown table th,
+ .markdown table td {
+ padding: 0.9rem 0.7rem;
+ }
+
+ .markdown table th:nth-child(1),
+ .markdown table td:nth-child(1) {
+ min-width: 180px;
+ width: 19%;
+ }
+
+ .markdown table th:nth-child(2),
+ .markdown table td:nth-child(2) {
+ min-width: 220px;
+ width: 24%;
+ }
+
+ .markdown table th:nth-child(6),
+ .markdown table td:nth-child(6) {
+ min-width: 130px;
+ width: 11%;
+ }
+}
+
+/* Medium screens/Small laptops (768px - 1024px) */
+@media screen and (max-width: 1024px) and (min-width: 769px) {
+ .markdown table {
+ width: 120%;
+ margin-left: 60%;
+ font-size: 0.85rem;
+ }
+
+ .markdown table th,
+ .markdown table td {
+ padding: 0.8rem 0.6rem;
+ }
+
+ .markdown table th:nth-child(1),
+ .markdown table td:nth-child(1) {
+ min-width: 160px;
+ width: 18%;
+ }
+
+ .markdown table th:nth-child(2),
+ .markdown table td:nth-child(2) {
+ min-width: 200px;
+ width: 23%;
+ }
+
+ .markdown table th:nth-child(3),
+ .markdown table td:nth-child(3) {
+ min-width: 140px;
+ width: 16%;
+ }
+
+ .markdown table th:nth-child(4),
+ .markdown table td:nth-child(4) {
+ min-width: 140px;
+ width: 16%;
+ }
+
+ .markdown table th:nth-child(5),
+ .markdown table td:nth-child(5) {
+ min-width: 120px;
+ width: 14%;
+ }
+
+ .markdown table th:nth-child(6),
+ .markdown table td:nth-child(6) {
+ min-width: 110px;
+ width: 10%;
+ }
+
+ .markdown table th:nth-child(7),
+ .markdown table td:nth-child(7) {
+ min-width: 70px;
+ width: 3%;
+ }
+}
+
+/* Large Tablets (768px - 1024px) - NO horizontal scroll */
+@media screen and (max-width: 1024px) and (min-width: 769px) {
+ .markdown table {
+ width: 110%;
+ margin-left: 55%;
+ font-size: 0.82rem;
+ table-layout: fixed;
+ }
+
+ .markdown table th,
+ .markdown table td {
+ padding: 0.75rem 0.55rem;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .markdown table th:nth-child(6),
+ .markdown table td:nth-child(6) {
+ width: 9%;
+ }
+}
+
+/* Standard Tablets Portrait (600px - 768px) - NO horizontal scroll */
+@media screen and (max-width: 768px) and (min-width: 601px) {
+ .markdown table {
+ width: 100%;
+ margin-left: 0;
+ transform: none;
+ font-size: 0.78rem;
+ table-layout: fixed;
+ }
+
+ .markdown table th,
+ .markdown table td {
+ padding: 0.7rem 0.5rem;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .markdown table th:nth-child(1),
+ .markdown table td:nth-child(1) {
+ width: 18%;
+ }
+
+ .markdown table th:nth-child(2),
+ .markdown table td:nth-child(2) {
+ width: 22%;
+ }
+
+ .markdown table th:nth-child(3),
+ .markdown table td:nth-child(3) {
+ width: 16%;
+ }
+
+ .markdown table th:nth-child(4),
+ .markdown table td:nth-child(4) {
+ width: 16%;
+ }
+
+ .markdown table th:nth-child(5),
+ .markdown table td:nth-child(5) {
+ width: 14%;
+ }
+
+ .markdown table th:nth-child(6),
+ .markdown table td:nth-child(6) {
+ width: 9%;
+ }
+
+ .markdown table th:nth-child(7),
+ .markdown table td:nth-child(7) {
+ width: 5%;
+ }
+}
+
+/* Large Mobile Phones (480px - 600px) - WITH horizontal scroll for all
columns */
+@media screen and (max-width: 600px) and (min-width: 481px) {
+ .markdown {
+ overflow-x: auto;
+ -webkit-overflow-scrolling: touch;
+ padding-right: 50px;
+ }
+
+ .markdown table {
+ width: auto;
+ min-width: 1400px;
+ margin-left: 0;
+ transform: none;
+ font-size: 0.76rem;
+ table-layout: fixed;
+ border-collapse: separate;
+ border-spacing: 0;
+ }
+
+ .markdown table th,
+ .markdown table td {
+ padding: 0.7rem 0.5rem;
+ line-height: 1.4;
+ vertical-align: top;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+ hyphens: auto;
+ border-right: 1px solid var(--ifm-table-border-color);
+ }
+
+ .markdown table th:last-child,
+ .markdown table td:last-child {
+ border-right: none;
+ padding-right: 50px;
+ }
+
+ .markdown table th:nth-child(1),
+ .markdown table td:nth-child(1) {
+ width: 160px;
+ white-space: normal;
+ position: sticky;
+ left: 0;
+ background: var(--ifm-background-color);
+ z-index: 1;
+ border-right: 2px solid var(--ifm-table-border-color);
+ }
+
+ .markdown table th:nth-child(2),
+ .markdown table td:nth-child(2) {
+ width: 250px;
+ white-space: normal;
+ }
+
+ .markdown table th:nth-child(3),
+ .markdown table td:nth-child(3) {
+ width: 160px;
+ white-space: normal;
+ }
+
+ .markdown table th:nth-child(4),
+ .markdown table td:nth-child(4) {
+ width: 160px;
+ white-space: normal;
+ }
+
+ .markdown table th:nth-child(5),
+ .markdown table td:nth-child(5) {
+ width: 150px;
+ white-space: normal;
+ }
+
+ .markdown table th:nth-child(6),
+ .markdown table td:nth-child(6) {
+ width: 100px;
+ white-space: nowrap;
+ }
+
+ .markdown table th:nth-child(7),
+ .markdown table td:nth-child(7) {
+ width: 90px;
+ white-space: nowrap;
+ }
+}
+
+/* Standard Mobile Phones (320px - 480px) - WITH horizontal scroll for all
columns */
+@media screen and (max-width: 480px) and (min-width: 321px) {
+ .markdown {
+ overflow-x: auto;
+ -webkit-overflow-scrolling: touch;
+ padding-right: 40px;
+ }
+
+ .markdown table {
+ width: auto;
+ min-width: 1300px;
+ margin-left: 0;
+ transform: none;
+ font-size: 0.72rem;
+ table-layout: fixed;
+ border-collapse: separate;
+ border-spacing: 0;
+ }
+
+ .markdown table th,
+ .markdown table td {
+ padding: 0.65rem 0.45rem;
+ line-height: 1.4;
+ vertical-align: top;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+ hyphens: auto;
+ border-right: 1px solid var(--ifm-table-border-color);
+ }
+
+ .markdown table th:last-child,
+ .markdown table td:last-child {
+ border-right: none;
+ padding-right: 40px;
+ }
+
+ .markdown table th:nth-child(1),
+ .markdown table td:nth-child(1) {
+ width: 140px;
+ white-space: normal;
+ position: sticky;
+ left: 0;
+ background: var(--ifm-background-color);
+ z-index: 1;
+ border-right: 2px solid var(--ifm-table-border-color);
+ }
+
+ .markdown table th:nth-child(2),
+ .markdown table td:nth-child(2) {
+ width: 220px;
+ white-space: normal;
+ }
+
+ .markdown table th:nth-child(3),
+ .markdown table td:nth-child(3) {
+ width: 140px;
+ white-space: normal;
+ }
+
+ .markdown table th:nth-child(4),
+ .markdown table td:nth-child(4) {
+ width: 140px;
+ white-space: normal;
+ }
+
+ .markdown table th:nth-child(5),
+ .markdown table td:nth-child(5) {
+ width: 130px;
+ white-space: normal;
+ }
+
+ .markdown table th:nth-child(6),
+ .markdown table td:nth-child(6) {
+ width: 100px;
+ white-space: nowrap;
+ }
+
+ .markdown table th:nth-child(7),
+ .markdown table td:nth-child(7) {
+ width: 80px;
+ white-space: nowrap;
+ }
+}
+
+/* Small Mobile Phones (320px and below) - WITH horizontal scroll for all
columns */
+@media screen and (max-width: 320px) {
+ .markdown {
+ overflow-x: auto;
+ -webkit-overflow-scrolling: touch;
+ padding-right: 30px;
+ }
+
+ .markdown table {
+ width: auto;
+ min-width: 1200px;
+ margin-left: 0;
+ transform: none;
+ font-size: 0.7rem;
+ table-layout: fixed;
+ border-collapse: separate;
+ border-spacing: 0;
+ }
+
+ .markdown table th,
+ .markdown table td {
+ padding: 0.6rem 0.4rem;
+ line-height: 1.3;
+ vertical-align: top;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+ hyphens: auto;
+ border-right: 1px solid var(--ifm-table-border-color);
+ }
+
+ .markdown table th:last-child,
+ .markdown table td:last-child {
+ border-right: none;
+ padding-right: 30px;
+ }
+
+ .markdown table th:nth-child(1),
+ .markdown table td:nth-child(1) {
+ width: 120px;
+ white-space: normal;
+ position: sticky;
+ left: 0;
+ background: var(--ifm-background-color);
+ z-index: 1;
+ border-right: 2px solid var(--ifm-table-border-color);
+ }
+
+ .markdown table th:nth-child(2),
+ .markdown table td:nth-child(2) {
+ width: 200px;
+ white-space: normal;
+ }
+
+ .markdown table th:nth-child(3),
+ .markdown table td:nth-child(3) {
+ width: 130px;
+ white-space: normal;
+ }
+
+ .markdown table th:nth-child(4),
+ .markdown table td:nth-child(4) {
+ width: 130px;
+ white-space: normal;
+ }
+
+ .markdown table th:nth-child(5),
+ .markdown table td:nth-child(5) {
+ width: 120px;
+ white-space: normal;
+ }
+
+ .markdown table th:nth-child(6),
+ .markdown table td:nth-child(6) {
+ width: 90px;
+ white-space: nowrap;
+ }
+
+ .markdown table th:nth-child(7),
+ .markdown table td:nth-child(7) {
+ width: 70px;
+ white-space: nowrap;
+ }
+}
Review Comment:
The `.markdown table` selector will apply these styles to ALL tables in ALL
markdown pages across the entire site, not just the code samples page. This
includes documentation pages, blog posts, and any other markdown content with
tables. These styles are specifically designed for the 7-column code samples
table (with explicit nth-child styling for columns 1-7), so applying them
globally could break the layout of other tables with different numbers of
columns. Consider using a more specific selector (e.g., a custom CSS class for
the code samples table) or scoping these styles to only the code-samples page.
--
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]
