Improve mobile layout

sangsatori · Dec 3, 2022 · f46aa54 · f46aa54
1 parent d735920
commit f46aa54
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 10 deletions.
diff --git a/static/style.css b/static/style.css
@@ -10,9 +10,15 @@ nav {
   align-items: center;
   flex-wrap: wrap;
 }
-nav a:first-child { margin-left: 0; text-decoration: none }
+menu { padding: 0; display: flex }
+nav > a:first-child { margin-left: 0; text-decoration: none }
 nav h1 { margin: 0 }
 nav a { margin-left: 1.5rem; }
+@media only screen and (max-width: 540px) {
+  nav { flex-direction: column; padding-bottom: .5rem }
+  menu { margin: 2rem 0 0 }
+  menu a { margin: .75rem }
+}
 article, nav {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -136,11 +142,16 @@ strong {
 }
 
 .selling-point {
-  /* Max 2, min 1 selling point per row */
-  max-width: 20em;
+  max-width: 50%;
+  box-sizing: border-box;
   font-size: 1.20rem;
-  padding: 2rem;
-  padding-top: 1rem;
+  padding: 1rem 1.5rem;
+}
+
+@media only screen and (max-width: 768px) {
+  .selling-point {
+    max-width: 100%
+  }
 }
 
 .selling-point h2 {

diff --git a/templates/base.html b/templates/base.html
@@ -24,10 +24,12 @@
           <h1>Helix</h1>
         </a>
         <div style="flex: 1"></div>
-        <a href="/news">News</a>
-        <a href="https://docs.helix-editor.com">Documentation</a>
-        <a href="https://github.com/helix-editor/helix">GitHub</a>
-        <a href="https://matrix.to/#/#helix-community:matrix.org">Matrix</a>
+        <menu>
+          <a href="/news">News</a>
+          <a href="https://docs.helix-editor.com">Documentation</a>
+          <a href="https://github.com/helix-editor/helix">GitHub</a>
+          <a href="https://matrix.to/#/#helix-community:matrix.org">Matrix</a>
+        </menu>
     </nav>
     <article>
         {% block content %} {% endblock %}

diff --git a/templates/index.html b/templates/index.html
@@ -48,7 +48,7 @@ <h2>Built in Rust, for the terminal</h2>
           </div>
 
           <div class="selling-point">
-            <h2>Modern and sane builtin features</h2>
+            <h2>Modern builtin features</h2>
             Fuzzy finder to jump to files and symbols, project wide search,
             <a href="https://github.com/helix-editor/helix/wiki/Themes">beautiful themes</a>,
             auto closing bracket pairs, <a href="https://docs.helix-editor.com/usage.html#surround">