lab/website-components
1
Fork 0
Code Activity

Clean up grid sidebar

Browse source
This commit is contained in:
Jake Howard 2024-11-01 17:25:50 +00:00
parent 791041ea9c
commit 529c866547
Signed by: jake
GPG key ID: 57AFB45680EDD477
2 changed files with 9 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/sidebars/sidebar/index.html
View file

@ -1,3 +1,4 @@
<!doctype html>
<html> <html>
<head> <head>
<link rel="stylesheet" href="./index.scss" /> <link rel="stylesheet" href="./index.scss" />

15
src/sidebars/sidebar/index.scss
View file

@ -8,6 +8,7 @@ html {
$content-width: 85ch; $content-width: 85ch;
$content-padding: 16px; $content-padding: 16px;
$sidebar-width: 400px;
$bleed-ratio: 0.2; $bleed-ratio: 0.2;
$details-bg: black; $details-bg: black;
@ -53,8 +54,8 @@ main {
.spacer { .spacer {
flex-grow: 1; flex-grow: 1;
flex-shrink: 10; flex-shrink: 100;
flex-basis: 200px; flex-basis: $sidebar-width;
} }
.content-wrapper { .content-wrapper {
@ -84,9 +85,8 @@ main {
.sidebar { .sidebar {
flex-grow: 1; flex-grow: 1;
flex-shrink: 10; flex-basis: $sidebar-width;
flex-basis: 200px; min-width: $sidebar-width;
min-width: 400px;
background-color: orange; background-color: orange;
.sidebar-inner { .sidebar-inner {
@ -95,11 +95,12 @@ main {
} }
} }
@media (max-width: 1200px) { @media (max-width: 1175px) {
main { main {
flex-direction: column-reverse; flex-direction: column-reverse;
align-items: center; align-items: center;
padding: 0 1rem; padding: 0 1rem;
gap: unset;
} }
.spacer { .spacer {
@ -118,7 +119,7 @@ main {
} }
} }
@media (max-width: 400px) { @media (max-width: 300px) {
.sidebar { .sidebar {
display: none; display: none;
} }