Style and spacing changes #1
Conversation
| } | ||
|
|
||
| @media (max-width: 767px) { | ||
| header nav { | ||
| overflow-x: auto; | ||
| overflow-x: hidden; |
There was a problem hiding this comment.
I think scroll would be better, that way it's still possible to get to on very small screens.
There was a problem hiding this comment.
You'd be better changing the overall shape of the menu from row to column, and maybe centring the text when on mobile view. I don't think I have ever seen a mobile menu with a horizontal scroll bar
| } | ||
|
|
||
| header nav a { | ||
| text-decoration: none; |
There was a problem hiding this comment.
I'd like to keep this, I think it's good to have some feedback when hovering links.
There was a problem hiding this comment.
Navigation menus are well understood these days, the contrast hover feedback I think is enough, along with the positioning to tell the user the items are clickable. Although, I do agree that the underline is a louder indication of being clickable.
| width: 3em; | ||
| } | ||
|
|
||
| header nav { |
There was a problem hiding this comment.
What is this changing? The screenshot looks the same, and pico already handles nav layout.
There was a problem hiding this comment.
I was moving control away from Pico here with the foresight that you would be changing the flex direction to column on mobile view.
| } | ||
| } | ||
|
|
||
| .logo { |
There was a problem hiding this comment.
What is this changing? The screenshot looks the same, and pico already handles nav layout.
There was a problem hiding this comment.
This is a spacing change, in this scenario flex is acting like a spreadsheet cell with the alignment set to middle. Giving even space above and below. The rem gap brings the text and image a little closer together. This allows the image and text to behave in more of a responsive manner.
Spacing adjusted between the header, content and footer. More space more better.
Project index icon buttons given background with hover effect. More spacing also, with mobile reactive adjustments.
Project page logo given a background to show text in dark mode.
Project page nav given more spacing to separate it more from the content below.
Light mode index:
Dark mode index:
Dark mode project:
Light mode mobile adjustment:
