Skip to content

Commit 8e40d24

Browse files
XunzhuoXunzhuo
authored
feat(website): simplify publications page UI and optimize mobile display (#605)
- Replace yellow/gold color scheme with blue tech theme - Convert card layout from multi-column grid to single-column list - Redesign cards as compact horizontal rows with icon, title, metadata, and actions - Place year and action buttons in a separate row with consistent sizing (32px height) - Optimize mobile layout: stack elements vertically, ensure no overflow - Remove decorative elements (badges, seals, complex borders, animations) - Simplify filter buttons and header styling - Add dark mode support using CSS variables Signed-off-by: bitliu <bitliu@tencent.com>
1 parent 6d9eb27 commit 8e40d24

File tree

3 files changed

+587
-593
lines changed

3 files changed

+587
-593
lines changed

‎website/src/css/custom.css‎

Lines changed: 262 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -483,9 +483,11 @@ a:hover {
483483
table {
484484
background: var(--tech-card-bg);
485485
border-radius: 8px;
486-
overflow: hidden;
487486
border: 1px solid var(--tech-border);
488487
transition: all 0.3s ease;
488+
border-collapse: collapse;
489+
width: 100%;
490+
display: table;
489491
}
490492

491493
[data-theme='dark'] table {
@@ -508,6 +510,14 @@ td, th {
508510
border-color: var(--tech-border);
509511
}
510512

513+
/* Table wrapper for horizontal scrolling */
514+
.markdown,
515+
article .markdown,
516+
[class*='blogPostContent'] {
517+
overflow-x: auto;
518+
-webkit-overflow-scrolling: touch;
519+
}
520+
511521
/* Admonition styling */
512522
.admonition {
513523
background: var(--tech-card-bg);
@@ -878,8 +888,258 @@ td, th {
878888
}
879889

880890
@media (max-width: 768px) {
891+
/* Remove all padding and margins on mobile for full-width display */
881892
[class*='blog-wrapper'] article,
882893
[class*='blog-wrapper'] article[class*='blogPostItem'] {
883-
padding: 1.5rem 1rem !important;
894+
padding: 1rem 0 !important;
895+
margin: 0 !important;
896+
border-radius: 0 !important;
897+
overflow-x: hidden !important;
898+
}
899+
900+
/* Remove container padding on mobile */
901+
[class*='blog-wrapper'] .container,
902+
[class*='blog-wrapper'] div[class*='blogContainer'] {
903+
padding: 0 !important;
904+
margin: 0 !important;
905+
max-width: 100% !important;
906+
}
907+
908+
/* Remove main wrapper padding on mobile */
909+
[class*='blog-wrapper'] .main-wrapper {
910+
padding: 0 !important;
911+
}
912+
913+
/* Ensure content takes full width */
914+
[class*='blog-wrapper'] .row {
915+
margin: 0 !important;
916+
}
917+
918+
/* Add comfortable padding to text content for readability */
919+
[class*='blog-wrapper'] article p,
920+
[class*='blog-wrapper'] article h1,
921+
[class*='blog-wrapper'] article h2,
922+
[class*='blog-wrapper'] article h3,
923+
[class*='blog-wrapper'] article h4,
924+
[class*='blog-wrapper'] article h5,
925+
[class*='blog-wrapper'] article h6,
926+
[class*='blog-wrapper'] article ul,
927+
[class*='blog-wrapper'] article ol,
928+
[class*='blog-wrapper'] article blockquote,
929+
[class*='blog-wrapper'] article div:not(.mermaid) {
930+
padding-left: 1rem !important;
931+
padding-right: 1rem !important;
932+
}
933+
934+
/* Ensure list items have proper spacing */
935+
[class*='blog-wrapper'] article li {
936+
margin-left: 0 !important;
937+
}
938+
939+
/* Create a scrollable container for tables */
940+
[class*='blog-wrapper'] .markdown > table,
941+
[class*='blog-wrapper'] article table {
942+
margin: 1rem 0 !important;
943+
}
944+
945+
/* Wrap table in a div for scrolling */
946+
[class*='blog-wrapper'] table {
947+
display: block !important;
948+
width: 100% !important;
949+
overflow-x: auto !important;
950+
-webkit-overflow-scrolling: touch !important;
951+
border-radius: 8px !important;
952+
}
953+
954+
/* Table content should maintain structure */
955+
[class*='blog-wrapper'] table > thead,
956+
[class*='blog-wrapper'] table > tbody {
957+
display: table !important;
958+
width: 100% !important;
959+
min-width: 600px !important;
960+
}
961+
962+
[class*='blog-wrapper'] table thead,
963+
[class*='blog-wrapper'] table tbody {
964+
display: table-row-group !important;
965+
}
966+
967+
[class*='blog-wrapper'] table tr {
968+
display: table-row !important;
969+
}
970+
971+
[class*='blog-wrapper'] table th,
972+
[class*='blog-wrapper'] table td {
973+
display: table-cell !important;
974+
}
975+
976+
/* Remove padding from table cells on mobile for more content space */
977+
[class*='blog-wrapper'] table td,
978+
[class*='blog-wrapper'] table th {
979+
padding: 0.5rem !important;
980+
font-size: 0.85rem !important;
981+
white-space: nowrap !important;
982+
}
983+
984+
/* Ensure images are responsive */
985+
[class*='blog-wrapper'] article img {
986+
max-width: calc(100% - 2rem) !important;
987+
height: auto !important;
988+
margin: 1rem !important;
989+
display: block !important;
990+
}
991+
992+
/* Code blocks should be scrollable with padding */
993+
[class*='blog-wrapper'] article pre {
994+
margin: 1rem !important;
995+
overflow-x: auto !important;
996+
-webkit-overflow-scrolling: touch !important;
997+
}
998+
999+
/* Mermaid diagrams should be scrollable with padding */
1000+
[class*='blog-wrapper'] .mermaid {
1001+
margin: 1rem !important;
1002+
overflow-x: auto !important;
1003+
-webkit-overflow-scrolling: touch !important;
1004+
}
1005+
1006+
/* Ensure header elements have proper spacing */
1007+
[class*='blog-wrapper'] article header {
1008+
padding: 0 1rem !important;
1009+
}
1010+
1011+
/* Blog post metadata */
1012+
[class*='blog-wrapper'] .avatar,
1013+
[class*='blog-wrapper'] .avatar__intro,
1014+
[class*='blog-wrapper'] [class*='blogPostData'] {
1015+
padding-left: 1rem !important;
1016+
padding-right: 1rem !important;
1017+
}
1018+
1019+
/* ============================================
1020+
Documentation Pages Mobile Optimization
1021+
============================================ */
1022+
1023+
/* Remove padding from doc containers on mobile */
1024+
.theme-doc-wrapper,
1025+
[class*='docMainContainer'],
1026+
.docMainContainer {
1027+
padding: 0 !important;
1028+
}
1029+
1030+
/* Optimize doc article spacing */
1031+
.theme-doc-wrapper article,
1032+
[class*='docItemContainer'] article {
1033+
padding: 1rem 0 !important;
1034+
margin: 0 !important;
1035+
border-radius: 0 !important;
1036+
}
1037+
1038+
/* Add comfortable padding to doc text content */
1039+
.theme-doc-wrapper article p,
1040+
.theme-doc-wrapper article h1,
1041+
.theme-doc-wrapper article h2,
1042+
.theme-doc-wrapper article h3,
1043+
.theme-doc-wrapper article h4,
1044+
.theme-doc-wrapper article h5,
1045+
.theme-doc-wrapper article h6,
1046+
.theme-doc-wrapper article ul,
1047+
.theme-doc-wrapper article ol,
1048+
.theme-doc-wrapper article blockquote,
1049+
.theme-doc-wrapper article div:not(.mermaid),
1050+
[class*='docItemContainer'] article p,
1051+
[class*='docItemContainer'] article h1,
1052+
[class*='docItemContainer'] article h2,
1053+
[class*='docItemContainer'] article h3,
1054+
[class*='docItemContainer'] article h4,
1055+
[class*='docItemContainer'] article h5,
1056+
[class*='docItemContainer'] article h6,
1057+
[class*='docItemContainer'] article ul,
1058+
[class*='docItemContainer'] article ol,
1059+
[class*='docItemContainer'] article blockquote,
1060+
[class*='docItemContainer'] article div:not(.mermaid) {
1061+
padding-left: 1rem !important;
1062+
padding-right: 1rem !important;
1063+
}
1064+
1065+
/* Make doc tables scrollable */
1066+
.theme-doc-wrapper table,
1067+
[class*='docItemContainer'] table {
1068+
display: block !important;
1069+
width: 100% !important;
1070+
overflow-x: auto !important;
1071+
-webkit-overflow-scrolling: touch !important;
1072+
border-radius: 8px !important;
1073+
margin: 1rem 0 !important;
1074+
}
1075+
1076+
.theme-doc-wrapper table > thead,
1077+
.theme-doc-wrapper table > tbody,
1078+
[class*='docItemContainer'] table > thead,
1079+
[class*='docItemContainer'] table > tbody {
1080+
display: table !important;
1081+
width: 100% !important;
1082+
min-width: 600px !important;
1083+
}
1084+
1085+
.theme-doc-wrapper table thead,
1086+
.theme-doc-wrapper table tbody,
1087+
[class*='docItemContainer'] table thead,
1088+
[class*='docItemContainer'] table tbody {
1089+
display: table-row-group !important;
1090+
}
1091+
1092+
.theme-doc-wrapper table tr,
1093+
[class*='docItemContainer'] table tr {
1094+
display: table-row !important;
1095+
}
1096+
1097+
.theme-doc-wrapper table th,
1098+
.theme-doc-wrapper table td,
1099+
[class*='docItemContainer'] table th,
1100+
[class*='docItemContainer'] table td {
1101+
display: table-cell !important;
1102+
padding: 0.5rem !important;
1103+
font-size: 0.85rem !important;
1104+
white-space: nowrap !important;
1105+
}
1106+
1107+
/* Doc images responsive */
1108+
.theme-doc-wrapper article img,
1109+
[class*='docItemContainer'] article img {
1110+
max-width: calc(100% - 2rem) !important;
1111+
height: auto !important;
1112+
margin: 1rem !important;
1113+
display: block !important;
1114+
}
1115+
1116+
/* Doc code blocks scrollable */
1117+
.theme-doc-wrapper article pre,
1118+
[class*='docItemContainer'] article pre {
1119+
margin: 1rem !important;
1120+
overflow-x: auto !important;
1121+
-webkit-overflow-scrolling: touch !important;
1122+
}
1123+
1124+
/* Doc Mermaid diagrams scrollable */
1125+
.theme-doc-wrapper .mermaid,
1126+
[class*='docItemContainer'] .mermaid {
1127+
margin: 1rem !important;
1128+
overflow-x: auto !important;
1129+
-webkit-overflow-scrolling: touch !important;
1130+
}
1131+
1132+
/* Remove doc container max-width constraints */
1133+
.theme-doc-wrapper .container,
1134+
[class*='docItemContainer'] .container {
1135+
max-width: 100% !important;
1136+
padding: 0 !important;
1137+
margin: 0 !important;
1138+
}
1139+
1140+
/* Doc page header spacing */
1141+
.theme-doc-wrapper header,
1142+
[class*='docItemContainer'] header {
1143+
padding: 0 1rem !important;
8841144
}
8851145
}

‎website/src/pages/publications.js‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ const talks = [
8282
year: '2025',
8383
abstract: 'A deep dive into vLLM Semantic Router capabilities, demonstrating how intelligent routing can unlock new possibilities for efficient LLM inference.',
8484
links: [
85-
{ type: 'event', url: '', label: '🎤 Comming Soon' },
85+
{ type: 'event', url: 'https://drive.google.com/drive/folders/1nQJ8ZkLSjKxvu36sSHaceVXtttbLvvu-', label: '🎤 Watch Recording' },
8686
],
8787
featured: true,
8888
},
@@ -140,19 +140,24 @@ function AwardCard({ item, index }) {
140140
</span>
141141
</div>
142142

143-
<div className={styles.awardVenue}>
144-
<span className={styles.venueLabel}>Venue:</span>
145-
<span className={styles.venueName}>{item.venue}</span>
146-
<span className={styles.awardYear}>{item.year}</span>
147-
</div>
143+
{item.venue && (
144+
<div className={styles.awardVenue}>
145+
<span className={styles.venueLabel}>Venue:</span>
146+
<span className={styles.venueName}>{item.venue}</span>
147+
</div>
148+
)}
148149
</div>
149150

150151
<div className={styles.awardDescription}>
151152
{item.abstract}
152153
</div>
154+
</div>
153155

156+
{/* Year and Actions Row */}
157+
<div className={styles.yearAndActions}>
158+
<span className={styles.awardYear}>{item.year}</span>
154159
{item.links && item.links.length > 0 && (
155-
<div className={styles.awardActions}>
160+
<>
156161
{item.links.map((link, linkIndex) => (
157162
<a
158163
key={linkIndex}
@@ -166,7 +171,7 @@ function AwardCard({ item, index }) {
166171
{link.label}
167172
</a>
168173
))}
169-
</div>
174+
</>
170175
)}
171176
</div>
172177

0 commit comments

Comments
 (0)