Better mobile support

leggett · Apr 8, 2021 · 687c2c4 · 687c2c4
1 parent 330a9b3
commit 687c2c4
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 41 deletions.
diff --git a/index.html b/index.html
@@ -83,52 +83,22 @@
     </div>
     -->
 
-    <a name="about"></a>
     <div class="box">
       <!-- TEAM ---------------------------------------------------- -->
+      <a name="about"></a>
       <h2>About Simplify</h2>
       <ul class="TOC">
-        <li><a href="#team">Team</a> – Who is behind Simplify?</li>
-        <li><a href="#privacy">Privacy Policy</a> – Completely private.</li>
         <li><a href="#mission">Mission</a> - The big picture.</li>
-        <li><a href="#purpose">Purpose</a> – What problems does this solve?</li>
-        <li><a href="#product">Product</a> - How does it solve them?</li>
+        <li><a href="#purpose">Purpose</a> – What's the problem?</li>
+        <li>
+          <a href="#product">Product</a> - How does it solve this problem?
+        </li>
         <li><a href="#customer">Customer</a> - Who is this for?</li>
         <li><a href="#pricing">Pricing</a> - Fair, simple, and flexible.</li>
+        <li><a href="#team">Team</a> – Who is behind Simplify?</li>
+        <li><a href="#privacy">Privacy Policy</a> – Completely private.</li>
       </ul>
 
-      <!-- TEAM ---------------------------------------------------- -->
-      <a name="team"></a>
-      <h2>Team</h2>
-      <p>
-        Simplify is made and maintained by
-        <a href="https://leggett.org">Michael Leggett</a>. Michael was Gmail's
-        design lead from 2008 to 2012 and a co-founder and design lead for
-        Google Inbox. With the unfortunate demise of Google Inbox, Leggett
-        wanted bring the simplified email experience to Gmail. Thus, Simplify
-        Gmail was born on April 2, 2019.
-      </p>
-      <p>
-        Simplify is not affiliated with Google in any way. Gmail is a trademark
-        of Google Inc. Use of this trademark is subject to Google Permissions.
-      </p>
-
-      <!-- PRIVACY ---------------------------------------------------- -->
-      <a name="privacy"></a>
-      <h2>Privacy Policy</h2>
-      <p>
-        Simplify has
-        <b>no ads, no analytics, no trackers, and no use of cookies</b>.
-        Furthermore, Simplify's products
-        <b>do not send or receive data of any kind</b> from your account or
-        device.
-      </p>
-      <p>
-        We aim to make software worth paying for and taking strictest stance on
-        privacy possible. Your privacy and the security of your account and data
-        is of the utmost importance to us.
-      </p>
-
       <!-- MISSION ---------------------------------------------------- -->
       <a name="mission"></a>
       <h2>Mission</h2>
@@ -313,6 +283,38 @@ <h2>Pricing</h2>
       </ul>
       <p>Here is what the pricing page might look like:</p>
       <img src="img/pricing.png" />
+
+      <!-- TEAM ---------------------------------------------------- -->
+      <a name="team"></a>
+      <h2>Team</h2>
+      <p>
+        Simplify is made and maintained by
+        <a href="https://leggett.org">Michael Leggett</a>. Michael was Gmail's
+        design lead from 2008 to 2012 and a co-founder and design lead for
+        Google Inbox. With the unfortunate demise of Google Inbox, Leggett
+        wanted bring the simplified email experience to Gmail. Thus, Simplify
+        Gmail was born on April 2, 2019.
+      </p>
+      <p>
+        Simplify is not affiliated with Google in any way. Gmail is a trademark
+        of Google Inc. Use of this trademark is subject to Google Permissions.
+      </p>
+
+      <!-- PRIVACY ---------------------------------------------------- -->
+      <a name="privacy"></a>
+      <h2>Privacy Policy</h2>
+      <p>
+        Simplify has
+        <b>no ads, no analytics, no trackers, and no use of cookies</b>.
+        Furthermore, Simplify's products
+        <b>do not send or receive data of any kind</b> from your account or
+        device.
+      </p>
+      <p>
+        We aim to make software worth paying for and taking strictest stance on
+        privacy possible. Your privacy and the security of your account and data
+        is of the utmost importance to us.
+      </p>
     </div>
   </body>
 

diff --git a/styles.css b/styles.css
@@ -110,10 +110,12 @@ html.scrolled .links a {
   color: #333;
 }
 
-.links a:hover,
-html.scrolled .links a#installLink {
-  background-color: #0a6cdd;
-  color: #fff !important;
+@media only screen and (min-width: 750px) {
+  .links a:hover,
+  html.scrolled .links a#installLink {
+    background-color: #0a6cdd;
+    color: #fff !important;
+  }
 }
 .links a[href="#top"] {
   float: left;
@@ -284,3 +286,36 @@ blockquote {
 /* TODO: Invert site for OS dark mode */
 @media (prefers-color-scheme: dark) {
 }
+
+@media only screen and (max-width: 750px) {
+  header,
+  body > div.box {
+    padding: 36px;
+    box-sizing: border-box;
+  }
+
+  .box.title {
+    padding: 36px 0;
+  }
+
+  header .links {
+    top: auto;
+    bottom: 0px;
+    text-align: center;
+  }
+
+  header .links a {
+    color: #333;
+  }
+
+  header .links #logo,
+  header .links a[href*="support"],
+  header .links #installLink {
+    display: none;
+  }
+
+  a[name]:not([name="top"]) {
+    display: block;
+    height: 36px;
+  }
+}