sigit/sigit.io
6
2
Fork 0
Code Issues 55 Pull Requests 2 Actions Packages Projects 1 Releases Wiki Activity

feat: add notice banner, header hiding, fix footer #212

Merged
enes merged 4 commits from 186-header-design into staging 2024-09-19 11:30:46 +00:00
Conversation 0 Commits 4 Files Changed 7 +12 -5
3 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit d45ea63c20 - Show all commits

6
src/App.scss
View File

@ -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'] {

9
src/layouts/StickySideColumns.module.scss
View File

@ -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(

2
src/layouts/style.module.scss
View File

@ -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;
} }