Switch to Grid and Footer #97
Conversation
Still have the: - original header to deal with - clean up the footer for real - check no js - animate the hide/show
| } | ||
|
|
||
| @media (min-width: 800px) { | ||
| .frqcy-header { | ||
| padding: 0 80px; | ||
| padding: 0 62px; |
There was a problem hiding this comment.
This helps align the Frequency logo by default with the sidebar
| @@ -604,66 +604,3 @@ function playground_text(playground, hidden = true) { | |||
| document.scrollingElement.scrollTo({ top: 0, behavior: "smooth" }); | |||
| }); | |||
| })(); | |||
|
|
|||
There was a problem hiding this comment.
We don't want to do any of this anymore. Perhaps we'll bring back the scrolling header disappearing later.
| @@ -2,6 +2,53 @@ | |||
|
|
|||
| @import "variables.css"; | |||
|
|
|||
| :target { | |||
| scroll-margin-top: calc(var(--header-height) + 20px); | |||
There was a problem hiding this comment.
Make it so that the anchor links aren't hidden by the header.
| scroll-margin-top: calc(var(--header-height) + 20px); | ||
| } | ||
|
|
||
| /* GRID */ |
There was a problem hiding this comment.
Had to move to grid to make everything work. No, I didn't want to, but it was the cleanest way.
| @@ -34,44 +81,22 @@ a > .hljs { | |||
| will want to reposition the viewport in a weird way. | |||
| */ | |||
| overflow-x: clip; | |||
| transition: 200ms; | |||
| } | |||
|
|
|||
| /* Menu Bar */ | |||
There was a problem hiding this comment.
Menu bar changes removed a ton of css.
| } | ||
|
|
||
| [dir="rtl"] .sidebar { |
There was a problem hiding this comment.
Not currently looking to move the sidebar side for rtl. Would require grid setup
| @@ -682,11 +650,11 @@ ul#searchresults span.teaser em { | |||
| .theme-popup { | |||
| position: absolute; | |||
| left: 10px; | |||
| top: var(--menu-bar-height); | |||
| top: 0; | |||
There was a problem hiding this comment.
This way the theme popup is with the icon
|
|
||
| <div id="page-wrapper" class="page-wrapper"> | ||
|
|
||
| <div class="page"> |
There was a problem hiding this comment.
Removed this extra div, but otherwise most of these are moving things around.
|
|
||
| <div class="page"> | ||
| <div id="menu-bar-hover-placeholder"></div> | ||
| <div id="menu-bar" class="menu-bar sticky"> |
There was a problem hiding this comment.
Moved outside to the grid structure
|
|
||
| <div style="clear: both"></div> | ||
| </nav> | ||
| <div id="page-wrapper" class="page-wrapper"> |
There was a problem hiding this comment.
Here's the content wrapper now
There was a problem hiding this comment.
All works for me, but I have a couple of notes, which I don't consider blocking until we get some more finalized design:
-
Was there supposed to be a dark version of the footer?
-
I don't know if this is a regression, but the prev/next chapter buttons are off-center for this view:
Problem ======= Needed to do the footer, but had to change a good amount to make it work. Closes #83 Solution ======== - Added a grid - Moved the old menu icons to the left as a column - Shifted around a few things for the grid. - Kept the resize - Kept the sidebar animation - Kept the touch controls for mobile (swipe to get the sidebar) - Added the footer
Problem
Needed to do the footer, but had to change a good amount to make it work.
Closes #83
Solution
Screenshots (optional):
Here are a few, but you really have pull and run locally