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