mobile styles

Nate created

Change summary

server/styles.css         | 11 +++++++++--
server/templates/home.hbs | 12 ++++++------
2 files changed, 15 insertions(+), 8 deletions(-)

Detailed changes

server/styles.css 🔗 

@@ -9,9 +9,16 @@
 
 @layer base {
   html {
-    font-size: 125%;
+    font-size: 100%;
     text-rendering: geometricPrecision;
   }
+
+  @media screen and (min-width: 1024px) {
+    html {
+      font-size: 125%;
+    }
+  }
+
   h1 {
     @apply text-4xl;
     @apply tracking-tighter;
@@ -33,7 +40,7 @@
     text-underline-offset: 4px;
   }
 
-  @media screen and (min-width: 1124px) {
+  @media screen and (min-width: 1024px) {
     .text-columns-2 {
         column-count: 2;
         column-gap: 3rem;

server/templates/home.hbs 🔗 

@@ -1,19 +1,19 @@
 {{#> layout }}
 
-<div class="max-w-screen-lg mx-auto text-main font-extralight p-20">
+<div class="max-w-screen-lg p-10 mx-auto text-main font-extralight lg:p-20">
     <article class="max-w-xl">
-        <h1 class="text-white text-4xl font-display font-extralight mb-10">Introducing Zed&mdash;A lightning fast code editor written natively in Rust.</h1>
-        <p class="leading-7">
+        <h1 class="mb-10 text-4xl leading-tight text-white font-display font-extralight">Introducing Zed&mdash;A lightning fast code editor written in Rust.</h1>
+        <p class="text-lg leading-relaxed">
             Level up your development process with:
-            <ul class="mt-2 ml-8 list-disc leading-8">
+            <ul class="mt-4 ml-8 text-lg leading-loose list-disc">
                 <li>a <a href="/tech#rust>" class="underline">lightning fast</a> code editor</li>
                 <li>real time collaboration on any work tree</li>
                 <li>powerful code annotation tools</li>
                 <li>the ability to rewind time to any point</li>
             </ul>
         </p>
-        <p class="mt-5 leading-7">Early access to Zed will open up mid-2022 for small teams and individuals in our <a class="underline" href="/community">community</a>.</p>
-        <a href="/story" class="underline inline-block border border-white mt-10 mb-10 p-5">Read our story.</a>
+        <p class="mt-5 text-lg leading-relaxed">Early access to Zed will open up mid-2022 for small teams and individuals in our <a class="underline" href="/community">community</a>.</p>
+        <a href="/story" class="inline-block pt-6 pl-10 pr-10 mt-10 mb-10 text-lg underline border border-white pb-7">Read our story.</a>
     </article>
 </div>