lab/website-components
1
Fork 0
Code Activity

Improve responsiveness of sidebar panels

Browse source
This commit is contained in:
Jake Howard 2024-10-06 16:11:45 +01:00
parent dfbeda4df7
commit 761cf7e572
Signed by: jake
GPG key ID: 57AFB45680EDD477
1 changed files with 25 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
src/sidebars/sidebar-2/index.scss
View file

@ -1,19 +1,23 @@
@import "normalize.css"; @import "normalize.css";
:root {
--content-width: 80ch;
--sidebar-width: 300px;
}
body, body,
html { html {
height: 100%; height: 100%;
font-size: 18px; font-size: 18px;
} }
$content-width: 80ch;
$content-padding: 16px; $content-padding: 16px;
$bleed-ratio: 0.1; $bleed-ratio: 0.1;
$details-bg: black; $details-bg: black;
$details-padding: $content-padding; $details-padding: $content-padding;
$bleed-size: $content-width * $bleed-ratio; $bleed-size: calc(var(--content-width) * $bleed-ratio);
.hero { .hero {
height: 50vh; height: 50vh;
@ -31,7 +35,7 @@ $bleed-size: $content-width * $bleed-ratio;
} }
.details { .details {
width: $content-width; width: var(--content-width);
max-width: 100%; max-width: 100%;
margin: 1rem auto; margin: 1rem auto;
@ -46,17 +50,17 @@ $bleed-size: $content-width * $bleed-ratio;
main { main {
display: flex; display: flex;
gap: 1rem; gap: 0.5rem;
} }
.spacer { .spacer {
flex-grow: 1; flex-grow: 1;
flex-shrink: 10; flex-shrink: 10;
flex-basis: 200px; flex-basis: var(--sidebar-width);
} }
.content-wrapper { .content-wrapper {
width: $content-width; width: var(--content-width);
max-width: 100%; max-width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -64,8 +68,8 @@ main {
margin-right: $bleed-size; margin-right: $bleed-size;
.bleed { .bleed {
margin-left: -$bleed-size; margin-left: calc($bleed-size * -1);
margin-right: -$bleed-size; margin-right: calc($bleed-size * -1);
} }
.inset { .inset {
@ -77,17 +81,24 @@ main {
.sidebar { .sidebar {
flex-grow: 1; flex-grow: 1;
flex-shrink: 10; flex-shrink: 10;
flex-basis: 200px; flex-basis: var(--sidebar-width);
min-width: 300px; min-width: var(--sidebar-width);
background-color: orange;
.sidebar-inner { .sidebar-inner {
position: sticky; position: sticky;
top: 0; top: 1rem;
margin: 1rem;
font-size: 16px;
} }
} }
@media (max-width: 1250px) { @media (max-width: 1250px) and (min-width: 1150px) {
:root {
--content-width: 70ch;
}
}
@media (max-width: 1150px) {
main { main {
flex-direction: column-reverse; flex-direction: column-reverse;
align-items: center; align-items: center;
@ -100,7 +111,7 @@ main {
.sidebar { .sidebar {
flex-basis: unset; flex-basis: unset;
width: $content-width; width: var(--content-width);
max-width: 100%; max-width: 100%;
.sidebar-inner { .sidebar-inner {