fix horizontal scroll, make hovered column render stuff on top of other

ones (popups, tooltips etc)
This commit is contained in:
Henry Jameson 2022-04-10 21:31:58 +03:00
parent 3f65c8b1d6
commit aa07b219c9

View file

@ -7,6 +7,7 @@
html { html {
font-size: 14px; font-size: 14px;
overflow-x: clip;
} }
body { body {
@ -15,10 +16,10 @@ body {
margin: 0; margin: 0;
color: $fallback--text; color: $fallback--text;
color: var(--text, $fallback--text); color: var(--text, $fallback--text);
overflow-x: hidden;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
overscroll-behavior-y: none; overscroll-behavior-y: none;
overflow-x: clip;
&.hidden { &.hidden {
display: none; display: none;
@ -174,6 +175,7 @@ nav {
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
min-height: 100vh; min-height: 100vh;
overflow-x: clip;
.column { .column {
--___columnMargin: var(--columnGap); --___columnMargin: var(--columnGap);
@ -188,6 +190,10 @@ nav {
row-gap: var(--___columnMargin); row-gap: var(--___columnMargin);
align-content: start; align-content: start;
&:hover {
z-index: 2;
}
&.-scrollable { &.-scrollable {
--___paddingIncrease: calc(var(--columnGap) / 2); --___paddingIncrease: calc(var(--columnGap) / 2);