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:
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!
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:
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.