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>
<head>
<link rel="stylesheet" href="./index.scss" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div class="hero" id="hero">

12
src/sidebar/index.scss
View file

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