Improve layout

src/pages/index.astro

@@ -4,7 +4,8 @@ import Layout from "../layouts/Layout.astro";
 
 <Layout title="Ondřej Nývlt">
   <main class="container">
-    <hgroup class="header">
+    <div class="section">
+      <hgroup class="header section__content">
         <h1>
           I’m <em>Ondřej Nývlt</em>,
         </h1>
@@ -12,69 +13,97 @@ import Layout from "../layouts/Layout.astro";
           a designer, software engineer, and&nbsp;student of social & cultural anthtropology.
         </p>
       </hgroup>
+    </div>
 
-    <ul class="about par-space">
+    <section class="section">
+      <h2 class="section__header">About me</h2>
+      <ul class="section__content about par-space">
         <li>I do mainly web development. While I do so, I try to stay as close to the web platform as possible,
         without the hype and complexity of JavaScript tooling. Instead, I’m an advocate of <a class="link" href="https://hypermedia.systems/">hypermedia-driven applications</a>.
         <li>I like a good typography and hate repetitive work. That’s why I experiment with computational typesetting and <a class="link" href="https://docs.racket-lang.org/pollen">Pollen</a> for my school theses.
         <li>I contribute to open-source projects at <a class="link" href="https://nolog.cz">nolog.cz</a>, activist IT collective
         which provides privacy-focused infrastructure to social movements (You should consider <a class="link" href="https://nolog.cz/support/">supporting them</a>).
       </ul>
+    </section>
     
-    <nav class="nav par-space">
-      <h2>My software projects are to be found at</h2>
+    <nav class="section par-space">
+      <h2 class="section__header">Work</h2>
+      <div class="section__content nav">
+        <p>My software projects are to be found at</p>
         <ul>
           <li><a class="link" href="https://github.com/onvlt">github</a> and
           <li><a class="link" href="https://git.nolog.cz/uwundrej">git.nolog.cz</a>
         </ul>.
+      </div>
     </nav>
 
-    <nav class="nav">
-      <h2>I’m at</h2>
+    <nav class="section">
+      <h2 class="section__header">Contact</h2>
+      <div class="section__content nav">
+        <p>I’m at</p>
         <ul>
           <li><a class="link" href="https://twitter.com/uwundrej">twitter</a>,
           <li><a class="link" href="https://witter.cz/@uwundrej">mastodon</a> and
           <li><a class="link" href="mailto:ondrej@nyv.lt">e-mail</a>
         </ul>.
+      </div>
     </nav>
   </main>
 </Layout>
 
 <style>
   .container {
-    max-width: 50rem;
+    max-width: 1200px;
     padding: 1rem;
     margin: 3rem auto;
     word-wrap: break-word;
   }
 
-  .header {
+  .section__header {
     font-weight: 700;
-    margin-bottom: 1.5rem;
+    margin-bottom: 0.5em;
   }
 
-  .header * {
+  @media screen and (min-width: 800px) {
+    .section {
+      display: grid;
+      grid-template-columns: repeat(12, 1fr);
+    }
+
+    .section__header {
+      grid-column: 1 / 3;
+      text-align: right;
+    }
+
+    .section__content {
+      grid-column: 4 / 12;
+    }
+  }
+
+  .header {
+    font-weight: 700;
+    margin-bottom: 3rem;
+    font-size: 2.25rem;
+    line-height: 1.3;
+  }
+
+  .header > * {
     display: inline;
   }
 
   .about li {
-    margin-bottom: 1.25em;
+    margin-bottom: 0.5em;
   }
 
-  .nav h2 {
-    display: inline;
-    margin-right: 0.75rem;
+  .nav p {
+    margin-right: 0.6rem;
   }
 
-  .nav ul {
-    display: inline;
-  }
-
-  .nav li {
+  .nav * {
     display: inline;
   }
 
   .par-space {
-    margin-bottom: 1.25em;
+    margin-bottom: 1em;
   }
 </style>