diff --git a/website/styles/main.css b/website/styles/main.css index 37015e611..366562187 100644 --- a/website/styles/main.css +++ b/website/styles/main.css @@ -27,11 +27,10 @@ main { &::after { bottom: 0; - height: 16rem; + height: var(--main-padding); background-image: linear-gradient( to bottom, transparent, - var(--background-color) 85%, var(--background-color) ); } @@ -54,7 +53,7 @@ main { height: 100%; display: flex; flex-direction: column; - padding-bottom: var(--bottom-area); + padding-bottom: 12rem; } } diff --git a/website/styles/panes/explorer.css b/website/styles/panes/explorer.css index f5d7a5e9c..57129f39c 100644 --- a/website/styles/panes/explorer.css +++ b/website/styles/panes/explorer.css @@ -1,6 +1,6 @@ #explorer { width: 100%; - height: 100dvh; + height: 100%; display: flex; overflow: hidden; @@ -12,35 +12,6 @@ overflow-y: auto; padding: var(--main-padding) 0; flex-direction: column; - - &::before, - &::after { - content: ""; - position: absolute; - top: 0; - bottom: 0; - width: var(--main-padding); - z-index: 1; - pointer-events: none; - } - - &::before { - left: 0; - background-image: linear-gradient( - to left, - transparent, - var(--background-color) - ); - } - - &::after { - right: 0; - background-image: linear-gradient( - to right, - transparent, - var(--background-color) - ); - } } --cube: 4.5rem; @@ -63,6 +34,7 @@ @media (min-width: 768px) { height: 100%; overflow-y: auto; + padding-right: calc(var(--main-padding) / 2); } .blocks { @@ -79,6 +51,10 @@ height: 11.5rem; width: max-content; } + + @media (min-width: 768px) { + padding-bottom: 6rem; + } } .cube { @@ -192,6 +168,7 @@ @media (min-width: 768px) { overflow-y: auto; + padding-left: calc(var(--main-padding) / 2); } h1 { diff --git a/website/styles/variables.css b/website/styles/variables.css index 7fb7b430f..a41fc41cd 100644 --- a/website/styles/variables.css +++ b/website/styles/variables.css @@ -33,10 +33,11 @@ --inv-border-color: light-dark(var(--dark-gray), var(--light-gray)); --off-border-color: light-dark(var(--dark-white), var(--light-black)); - --font-mono: "Lilex", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, + --font-mono: + "Lilex", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - --font-serif: Instrument, Charter, "Bitstream Charter", "Sitka Text", - Cambria, serif; + --font-serif: + Instrument, Charter, "Bitstream Charter", "Sitka Text", Cambria, serif; --font-size-xs: 0.75rem; --line-height-xs: calc(1 / 0.75); @@ -56,5 +57,4 @@ --negative-main-padding: calc(-1 * var(--main-padding)); --font-weight-base: 400; --max-main-width: 70dvw; - --bottom-area: 69vh; }