jashapiro
commented
3 years ago It seems body has a custom style that sets
padding-topto 51px to account for the navbar - I guess the navbar is only expected to have a height of 50px?I'm thinking that we might be able to add custom js to dynamically set
body.padding-top = navbar.height + 1. This would also take care of #376 LMK what you think.
This is just to note that this fix should also be applied somehow to the hacky thing I did here to make a hidden anchor with some padding above it so links to it go to the right place. Note that this line appears in every notebook, not just the template that I am linking to directly. I think all the headers may have the same padding/margin applied by whatever the base style sheet is.
davidsmejia
Purpose
Aesthetic updates to navbar and footer!
screenshot!!
Issue addressed
323
328
Gotchas the reviewer should know about
I'm only pushing the changes I made to
_navbar.html/footer.html/styles.cssIf you want to see the changes rendered to the actual html files you'll need to rebuild them manually.
I've been doing this by deleting
./01-getting-started/getting-started.htmlthen running the command:You can then open getting-started.html in a browser to see the changes rendered.
Remaining concerns and questions
navbar concerns
It seems like the navbar is "on top" of everything - it's not actually like on the same level as all of the other html elements.
This means that the navbar can cover content on the page (most notably when it gets resized to 2 lines see #376).
Since I increased the height of the navbar to 60px to accommodate the logo image, it covers content when you use the TOC to navigate to a section.
example
It seems body has a custom style that sets
padding-topto 51px to account for the navbar - I guess the navbar is only expected to have a height of 50px?I'm thinking that we might be able to add custom js to dynamically set
body.padding-top = navbar.height + 1. This would also take care of #376 LMK what you think.footer concerns
Right now I have the footer all the way at the bottom of the screen - outside of
container-main- so that the gradient can extend the whole length of the screen.In order to do this, I added some
</div>s above the footer's code infooter.htmlto get it out of the main container. This seems kinda silly/hacky so lmk if there's a better way to do this.Also, whatever TOC generator we are using is using js to add an extra div of a calculated height at the bottom of the main container so that when you use the TOC to navigate to a section, that section's title is at the top of the screen.
the div I'm talking about
This div is making the footer be placed way at the bottom of the screen. I was thinking that we could use custom js to subtract the height of the footer when it calculates the height for that div.
We should also talk about what info we want to put into the footer!