BafS/Documentor

The menu squishes the main content a lot on smartphones

Not-a-web-Developer opened this issue · 2 comments

Opening the documentor documentation greets a smartphone user to this sight:
Screenshot_2022-03-22-14-39-52-28_40deb401b9ffe8e1df2f1cc5ba480b12

I feel like having the menu float over the main content on smartphones would be a much better experience; unfortunately I don't know how to fix it, hence an issue instead of a pull request.

That said however, i really like this project, and it's really polished; thanks for making this!

BafS commented

Thanks for your feedback, I'll try to address this soon

thanks for the reply!
as it turns out, I was being dumb and sleep deprived when I wrote the issue, and I can help in a limited way: I modified style.css to make the sidebar float over the content without obscuring the tools by doing this:

diff --git a/templates/alchemy/style.css b/templates/alchemy/style.css
index 7429787..dd5e888 100644
--- a/templates/alchemy/style.css
+++ b/templates/alchemy/style.css
@@ -164,6 +164,18 @@ hr {
   will-change: margin-left;
 }
 
+@media (max-width: 600px) {
+  .content {
+    margin-left: 0;
+  }
+  .tools {
+    margin-left: 270px;
+  }
+  .full-width .content .tools {
+    margin-left: 0;
+  }
+}
+
 .content h1,.content h2,.content h3,.content h4,.content h5,.content h6 {
   font-family: Lato, sans-serif;
   font-weight: 700;

there's no animation for the tools going to the right though, since I'm still dumb and don't know how css animations work.

that said, I hope this can be helpful as the base for a more rigorous solution.

once again, thanks for not leaving this project to die! i really like the simplicity of the project, and would've hated to see it left for dead.

EDIT: I got my fork hosted on GitHub pages (link is https://not-a-web-developer.github.io/Documentor), nad this is what it looks like on my phone:
Screenshot_2022-03-23-22-28-27-46_40deb401b9ffe8e1df2f1cc5ba480b12

It looks fine for now, although I'd probably add a very subtle box-shadow later to make it easier to focus onto the sidebar.