lab/website-components
1
Fork 0
Code Activity

Improve responsiveness of sidebar

Browse source
This commit is contained in:
Jake Howard 2024-08-14 14:49:29 +01:00
parent 6e5fc8b952
commit 76e18bb922
Signed by: jake
GPG key ID: 57AFB45680EDD477
2 changed files with 12 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/sidebar/index.html
View file

@ -1,6 +1,7 @@
<html> <html>
<head> <head>
<link rel="stylesheet" href="./index.scss" /> <link rel="stylesheet" href="./index.scss" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head> </head>
<body> <body>
<div class="hero" id="hero"> <div class="hero" id="hero">

12
src/sidebar/index.scss
View file

@ -48,6 +48,7 @@ $details-padding: $content-padding;
main { main {
display: flex; display: flex;
gap: 1rem;
} }
.spacer { .spacer {
@ -72,7 +73,6 @@ main {
.bleed { .bleed {
grid-column: 1 / -1; grid-column: 1 / -1;
max-width: 100vw;
justify-self: center; justify-self: center;
} }
@ -86,6 +86,8 @@ main {
flex-grow: 1; flex-grow: 1;
flex-shrink: 10; flex-shrink: 10;
flex-basis: 200px; flex-basis: 200px;
min-width: 400px;
background-color: orange;
.sidebar-inner { .sidebar-inner {
position: sticky; position: sticky;
@ -105,9 +107,17 @@ main {
.sidebar { .sidebar {
flex-basis: unset; flex-basis: unset;
width: $content-width;
max-width: 100vw;
.sidebar-inner { .sidebar-inner {
position: unset; position: unset;
} }
} }
} }
@media (max-width: 400px) {
.sidebar {
display: none;
}
}