fix: layout with tiles+search
Massimo Melina committed
Jun 5, 2023 at 15:21 UTC
76da9dae74b84ab6425fe60c4c2261e0a64cc573
1 file changed
+23
-19
frontend/src/index.scss
+23
-19
@@ -458,29 +458,33 @@ button label {
458
overflow-x: clip;
459
padding: 0;
460
461
- a {
462
- max-height: var(--name-height);
463
- display: block;
464
- display: -webkit-box;
465
- overflow: hidden;
466
- -webkit-line-clamp: calc(var(--name-lines) + 1); // + icon's line
467
- -webkit-box-orient: vertical;
468
-
469
- &:last-of-type { padding: 0; }
461
+ .link-wrapper {
462
+ &:not(:hover) {
463
+ max-height: var(--name-height);
464
+ display: block;
465
+ display: -webkit-box;
466
+ overflow: hidden;
467
+ -webkit-line-clamp: calc(var(--name-lines) + 1); // + icon's line
468
+ -webkit-box-orient: vertical;
469
+ }
470
+ a {
471
+ &:last-of-type { padding: 0; }
472
+ span { display: block; }
473
+ .icon.icon { font-size: calc(1.2rem + .6rem * var(--tile-size)); }
474
+ img.icon { width: auto }
475
+ .icon {
476
+ font-size: 4rem;
477
+ display: block;
478
+ margin: auto; // good for both font and img icons
479
+ }
480
+ }
481
+
482
&:hover {
483
overflow: visible;
484
display: block;
485
z-index: 1;
486
+ .icon::before { text-decoration: none; }
487
}
475
- span { display: block; }
476
- .icon.icon { font-size: calc(1.2rem + .6rem * var(--tile-size)); }
477
- img.icon { width: auto }
478
- .icon {
479
- font-size: 4rem;
480
- display: block;
481
- margin: auto; // good for both font and img icons
482
- }
483
- &:hover .icon::before { text-decoration: none; }
488
}
489
.link-wrapper:hover {
490
padding: 0; margin: 0;
@@ -507,6 +511,7 @@ button label {
511
right: 1em;
512
}
513
514
+ .link-wrapper a { display:inline } // avoid overlapping name and details
515
&:hover {
516
--bg: var(--ghost-contrast-alt);
517
background: var(--bg); // highlight whole tile
@@ -514,7 +519,6 @@ button label {
519
z-index: 1; background: var(--bg); // cover underlying elements of other tiles, in case it's overflowing
520
}
521
input[type=checkbox] { z-index: 2; } // over link-wrapper, but not over header
517
- .link-wrapper a { display:inline } // avoid overlapping name and details
522
.entry-panel {
523
padding-bottom: 0.3em;
524
}