Spaces:
Running
Running
Fix: Remove height-based vertical stacking - cards stay side by side on desktop
Browse files- index.html +31 -15
index.html
CHANGED
|
@@ -477,8 +477,8 @@
|
|
| 477 |
}
|
| 478 |
}
|
| 479 |
|
| 480 |
-
/* Mobile
|
| 481 |
-
@media (max-width:
|
| 482 |
.container {
|
| 483 |
padding: 1vh 4vw;
|
| 484 |
}
|
|
@@ -530,18 +530,14 @@
|
|
| 530 |
}
|
| 531 |
}
|
| 532 |
|
| 533 |
-
/*
|
| 534 |
-
@media (max-height: 600px) {
|
| 535 |
.paper-thumbnail {
|
| 536 |
-
height: clamp(
|
| 537 |
-
}
|
| 538 |
-
|
| 539 |
-
.paper-card {
|
| 540 |
-
max-height: 35vh;
|
| 541 |
}
|
| 542 |
|
| 543 |
.paper-summary {
|
| 544 |
-
-webkit-line-clamp:
|
| 545 |
}
|
| 546 |
|
| 547 |
header {
|
|
@@ -553,20 +549,40 @@
|
|
| 553 |
}
|
| 554 |
}
|
| 555 |
|
| 556 |
-
/*
|
| 557 |
-
@media (max-height: 500px) {
|
| 558 |
.paper-thumbnail {
|
| 559 |
display: none;
|
| 560 |
}
|
| 561 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 562 |
.paper-card {
|
| 563 |
-
max-height:
|
| 564 |
}
|
| 565 |
|
| 566 |
-
.
|
| 567 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 568 |
}
|
| 569 |
}
|
|
|
|
| 570 |
</style>
|
| 571 |
</head>
|
| 572 |
<body>
|
|
|
|
| 477 |
}
|
| 478 |
}
|
| 479 |
|
| 480 |
+
/* Mobile ONLY - width based, NOT height */
|
| 481 |
+
@media (max-width: 700px) {
|
| 482 |
.container {
|
| 483 |
padding: 1vh 4vw;
|
| 484 |
}
|
|
|
|
| 530 |
}
|
| 531 |
}
|
| 532 |
|
| 533 |
+
/* Short screens - keep side by side but smaller content */
|
| 534 |
+
@media (max-height: 600px) and (min-width: 700px) {
|
| 535 |
.paper-thumbnail {
|
| 536 |
+
height: clamp(60px, 12vh, 120px);
|
|
|
|
|
|
|
|
|
|
|
|
|
| 537 |
}
|
| 538 |
|
| 539 |
.paper-summary {
|
| 540 |
+
-webkit-line-clamp: 2;
|
| 541 |
}
|
| 542 |
|
| 543 |
header {
|
|
|
|
| 549 |
}
|
| 550 |
}
|
| 551 |
|
| 552 |
+
/* Very short screens - still side by side */
|
| 553 |
+
@media (max-height: 500px) and (min-width: 700px) {
|
| 554 |
.paper-thumbnail {
|
| 555 |
display: none;
|
| 556 |
}
|
| 557 |
|
| 558 |
+
.subtitle {
|
| 559 |
+
display: none;
|
| 560 |
+
}
|
| 561 |
+
}
|
| 562 |
+
|
| 563 |
+
/* Actual mobile phones only */
|
| 564 |
+
@media (max-height: 600px) and (max-width: 700px) {
|
| 565 |
+
.paper-thumbnail {
|
| 566 |
+
height: clamp(50px, 10vh, 80px);
|
| 567 |
+
}
|
| 568 |
+
|
| 569 |
.paper-card {
|
| 570 |
+
max-height: 35vh;
|
| 571 |
}
|
| 572 |
|
| 573 |
+
.paper-summary {
|
| 574 |
+
-webkit-line-clamp: 1;
|
| 575 |
+
}
|
| 576 |
+
|
| 577 |
+
header {
|
| 578 |
+
padding: 0.3vh 0 0.5vh;
|
| 579 |
+
}
|
| 580 |
+
|
| 581 |
+
.stats-bar {
|
| 582 |
+
padding: 0.5vh 0;
|
| 583 |
}
|
| 584 |
}
|
| 585 |
+
|
| 586 |
</style>
|
| 587 |
</head>
|
| 588 |
<body>
|