Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add flex to Jemdoc #99

Merged
merged 4 commits into from Nov 18, 2020
Merged

Add flex to Jemdoc #99

merged 4 commits into from Nov 18, 2020

Conversation

rikhuijzer
Copy link
Collaborator

This pull request contains two changes, namely

  1. the whole page is now contained in a flex box such that it will (horizontally) center on big screens;
  2. on small screens, the menu is shown above the page content instead of on the left

For small screens, I have considered the typical menu button to allow the user to trigger the menu by clicking. However, this would either introduce Javascript or very arcane CSS styling. Overall, I think just showing the menu above the page isn't too bad and might be even the most clear for end-users.

@tlienart
Copy link
Owner

thanks a lot!! I'll try this soon and should merge it by tomorrow :)

@rikhuijzer
Copy link
Collaborator Author

Yes, I was considering to mention that I only tested it on my desktop and iPhone. Let me know if you find any issue

@tlienart
Copy link
Owner

tlienart commented Nov 17, 2020

Some suggestions:

diff --git a/src/templates/jemdoc/_css/jemdoc.css b/src/templates/jemdoc/_css/jemdoc.css
index 3040cf8..cffb7ed 100644
--- a/src/templates/jemdoc/_css/jemdoc.css
+++ b/src/templates/jemdoc/_css/jemdoc.css
@@ -7,9 +7,14 @@
     }
 
     .layout-menu {
+      margin: 0;
+      margin-top: 2rem;
       padding-left: 2em;
       padding-right: 2em;
     }
+    .franklin-content h1 {
+      margin-top: 0;
+    }
   }
 
 @media (min-width: 750px) {
@@ -19,6 +24,10 @@
     justify-content: center;
     margin: auto;
   }
+  .layout-menu{
+    margin-top: 5rem;
+    margin-left: 1rem;
+  }
 }
 
 body {
  • this removes some whitespace in narrow mode between the bottom of the menu and h1
  • this keeps the menu kind of aligned with the h1 of the page which I think looks better (?)
  • small adjustments when playing with resizing and checking that it works at all scales

otherwise looks great, thanks!

@rikhuijzer
Copy link
Collaborator Author

rikhuijzer commented Nov 18, 2020

Thanks for the suggestions. I've added them.

this keeps the menu kind of aligned with the h1 of the page which I think looks better

Agreed, that was a bit odd. I was also considering doing something about it.

otherwise looks great, thanks!

You're welcome. It was surprisingly easy actually.

@tlienart
Copy link
Owner

Fantastic, thanks Rik!

@tlienart tlienart merged commit 6624142 into tlienart:master Nov 18, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants