feat: add notice banner, header hiding, fix footer #212
@ -100,10 +100,10 @@ li {
|
|||||||
// - first-child Header height, default body padding, and center content border (10px) and padding (10px)
|
// - first-child Header height, default body padding, and center content border (10px) and padding (10px)
|
||||||
// - others We don't include border and padding and scroll to the top of the image
|
// - others We don't include border and padding and scroll to the top of the image
|
||||||
&:first-child {
|
&:first-child {
|
||||||
scroll-margin-top: $header-height + $body-vertical-padding + 20px;
|
scroll-margin-top: $body-vertical-padding + 20px;
|
||||||
}
|
}
|
||||||
&:not(:first-child) {
|
&:not(:first-child) {
|
||||||
scroll-margin-top: $header-height + $body-vertical-padding;
|
scroll-margin-top: $body-vertical-padding;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -148,7 +148,7 @@ li {
|
|||||||
justify-content: start;
|
justify-content: start;
|
||||||
align-items: start;
|
align-items: start;
|
||||||
|
|
||||||
scroll-margin-top: $header-height + $body-vertical-padding;
|
scroll-margin-top: $body-vertical-padding;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-dev='true'] {
|
[data-dev='true'] {
|
||||||
|
@ -42,15 +42,22 @@
|
|||||||
.sides {
|
.sides {
|
||||||
@media only screen and (min-width: 768px) {
|
@media only screen and (min-width: 768px) {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: $header-height + $body-vertical-padding;
|
top: $body-vertical-padding;
|
||||||
}
|
}
|
||||||
> :first-child {
|
> :first-child {
|
||||||
|
// We want to keep header on smaller devices at all times
|
||||||
max-height: calc(
|
max-height: calc(
|
||||||
100dvh - $header-height - $body-vertical-padding * 2 - $tabs-height
|
100dvh - $header-height - $body-vertical-padding * 2 - $tabs-height
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@media only screen and (min-width: 768px) {
|
||||||
|
max-height: calc(100dvh - $body-vertical-padding * 2);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Adjust the content scroll on smaller screens
|
||||||
|
// Make sure only the inner tab is scrolling
|
||||||
.scrollAdjust {
|
.scrollAdjust {
|
||||||
@media only screen and (max-width: 767px) {
|
@media only screen and (max-width: 767px) {
|
||||||
max-height: calc(
|
max-height: calc(
|
||||||
|
@ -3,5 +3,5 @@
|
|||||||
|
|
||||||
.main {
|
.main {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
padding: $header-height + $body-vertical-padding 0 $body-vertical-padding 0;
|
padding: $body-vertical-padding 0 $body-vertical-padding 0;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user