fix: Revert to original sizing for hero section (#2)

* Mobile reponsive & small design details * fix: Revert to original sizing for hero section
riot-ml · Feb 10, 2024 · 6e90411 · 6e90411
1 parent eb95177
commit 6e90411
Showing 1 changed file with 16 additions and 16 deletions.
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" class="h-dvh">
+<html lang="en">
 
 <head>
   <meta charset="UTF-8" />
@@ -33,13 +33,13 @@ <h1 class="font-black text-2xl text-[#ed700d] md:text-4xl">Riot</h1>
         </div>
       </nav>
     </header>
-    <section id="hero" class="my-10 md:my-12 md:px-6">
-      <h2 class="font-bold text-5xl md:text-7xl text-center my-10 tracking-tight leading-tight"> The
+    <section id="hero" class="my-10 md:my-6 md:py-24 md:px-6 lg:pb-36">
+      <h2 class="font-bold text-5xl md:text-7xl lg:text-8xl text-center my-10"> The
         OCaml runtime
         <br />
         <span class="text-[#ed700d]">for software artisans.<span>
       </h2>
-      <p class="font-semibold md:font-normal text-md md:text-3xl text-center tracking-tighter md:py-16">
+      <p class="font-light text-md text-center md:text-2xl lg:text-xl max-w-4xl mx-auto lg:py-0 text-black/80">
         Riot is a multi-core runtime for the OCaml programming language that
         brings Erlang-style concurrency to OCaml via lightweight processes and
         message passing. On top of it we're building all the components you
@@ -48,50 +48,50 @@ <h2 class="font-bold text-5xl md:text-7xl text-center my-10 tracking-tight leadi
     </section>
     <section id="stack" class="py-10 md:px-2">
       <h3
-        class="font-bold text-4xl md:text-5xl pb-4 underline underline-offset-8 decoration-wavy decoration-[#ed700d]/75">
+        class="font-bold text-4xl md:text-5xl pb-4 underline underline-offset-8 decoration-wavy decoration-[#ed700d]/75 text-black/90">
         The Stack
       </h3>
-      <p class="font-semibold md:text-2xl pb-10 leading-1 md:pt-2">
+      <p class="font-semibold text-lg md:text-2xl pb-10 leading-1 md:pt-2 text-black/80">
         Apps aren't built in the void, so we are laying a foundation you can
         trust – freeing you to focus on creating amazing apps.
       </p>
-      <ul class="mt-6 space-y-8">
+      <ul class="space-y-10 md:py-6 lg:py-10">
         <li>
-          <h3 class="font-bold text-2xl md:text-4xl underline decoration-dotted decoration-[#ed700d]">
+          <h3 class="font-bold text-2xl md:text-3xl underline decoration-dotted decoration-[#ed700d]">
             riot scheduler
           </h3>
-          <p class="font-sans md:text-xl">
+          <p class="text-md md:text-xl text-black/90">
             The scheduler includes processes, message passing, and supervision
             trees across all cores. It ships with multicore friendly network
             and file system I/O, timers, and more.
           </p>
         </li>
 
         <li>
-          <h3 class="font-bold text-2xl md:text-4xl underline decoration-dotted decoration-[#ed700d]">
+          <h3 class="font-bold text-2xl md:text-3xl underline decoration-dotted decoration-[#ed700d]">
             gluon
           </h3>
-          <p class="font-sans md:text-xl">
+          <p class="text-md md:text-xl text-black/90">
             A minimal, portable, and <i>fast</i> API on top of the
             operating-system's evented I/O API.
           </p>
         </li>
 
         <li>
-          <h3 class="font-bold text-2xl md:text-4xl underline decoration-dotted decoration-[#ed700d]">
+          <h3 class="font-bold text-2xl md:text-3xl underline decoration-dotted decoration-[#ed700d]">
             bytestring
           </h3>
-          <p class="font-sans md:text-xl">
+          <p class="text-md md:text-xl text-black/90">
             Supercharged strings with efficient, ergonomic pattern matching.
             Ideal for building fast parsers over streamed data.
           </p>
         </li>
 
         <li>
-          <h3 class="font-bold text-2xl md:text-4xl underline decoration-dotted decoration-[#ed700d]">
+          <h3 class="font-bold text-2xl md:text-3xl underline decoration-dotted decoration-[#ed700d]">
             Rio
           </h3>
-          <p class="font-sans md:text-xl">
+          <p class="text-md md:text-xl text-black/90">
             Ergonomic, composable read/write streams for efficient IO. IO lets
             the Riot stack share a common way of reading and writing from any
             source into any destination.
@@ -101,7 +101,7 @@ <h3 class="font-bold text-2xl md:text-4xl underline decoration-dotted decoration
     </section>
   </main>
   <footer class="bg-black text-white p-4">
-    <div class="mx-auto max-w-7xl md:px-6 md:py-10 lg:px-4 lg:py-16">
+    <div class="mx-auto max-w-7xl md:px-2 md:py-10 lg:px-6 lg:py-16">
       <div class="flex flex-col">
         <h1 class="font-black text-2xl py-2 md:text-4xl">Riot</h1>
         <div class="flex align-center gap-2 md:gap-0">