From a709eec8f01e4b8f0c0c3ee64033b6881b79184a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ondr=CC=8Cej=20Ny=CC=81vlt?= <ondrej@nyv.lt>
Date: Mon, 8 Jan 2024 17:17:40 +0100
Subject: [PATCH] Update and format pages

---
 src/layouts/Layout.astro |  53 +++++++--------
 src/pages/index.astro    | 139 +++++++++++++++++----------------------
 2 files changed, 86 insertions(+), 106 deletions(-)

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 3b34352..0638a79 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -28,13 +28,13 @@ const { title } = Astro.props;
   :root {
     /* Radix colors – see https://www.radix-ui.com/colors */
 
-    --gray-1: hsl(0, 0%, 99.0%);
+    --gray-1: hsl(0, 0%, 99%);
     --gray-2: hsl(0, 0%, 97.5%);
     --gray-3: hsl(0, 0%, 94.6%);
-    --gray-4: hsl(0, 0%, 92.0%);
+    --gray-4: hsl(0, 0%, 92%);
     --gray-5: hsl(0, 0%, 89.5%);
     --gray-6: hsl(0, 0%, 86.8%);
-    --gray-7: hsl(0, 0%, 83.0%);
+    --gray-7: hsl(0, 0%, 83%);
     --gray-8: hsl(0, 0%, 73.2%);
     --gray-9: hsl(0, 0%, 55.2%);
     --gray-10: hsl(0, 0%, 50.3%);
@@ -49,10 +49,10 @@ const { title } = Astro.props;
     --accent-6: hsl(360, 81.7%, 87.8%);
     --accent-7: hsl(359, 74.2%, 81.7%);
     --accent-8: hsl(359, 69.5%, 74.3%);
-    --accent-9: hsl(358, 75.0%, 59.0%);
+    --accent-9: hsl(358, 75%, 59%);
     --accent-10: hsl(358, 67.4%, 54.6%);
-    --accent-11: hsl(358, 65.0%, 47.0%);
-    --accent-12: hsl(350, 63.0%, 24.0%);
+    --accent-11: hsl(358, 65%, 47%);
+    --accent-12: hsl(350, 63%, 24%);
   }
 
   @media (prefers-color-scheme: dark) {
@@ -65,23 +65,23 @@ const { title } = Astro.props;
       --gray-6: hsl(0, 0%, 24.7%);
       --gray-7: hsl(0, 0%, 29.1%);
       --gray-8: hsl(0, 0%, 37.5%);
-      --gray-9: hsl(0, 0%, 43.0%);
+      --gray-9: hsl(0, 0%, 43%);
       --gray-10: hsl(0, 0%, 50.7%);
       --gray-11: hsl(0, 0%, 69.5%);
       --gray-12: hsl(0, 0%, 93.5%);
 
-      --accent-1: hsl(353, 23.0%, 9.8%);
+      --accent-1: hsl(353, 23%, 9.8%);
       --accent-2: hsl(354, 30.2%, 12.4%);
       --accent-3: hsl(353, 40.8%, 16.4%);
       --accent-4: hsl(353, 46.3%, 19.2%);
       --accent-5: hsl(353, 51.2%, 22.1%);
       --accent-6: hsl(353, 57.3%, 26.2%);
       --accent-7: hsl(354, 65.7%, 33.2%);
-      --accent-8: hsl(358, 75.0%, 47.1%);
-      --accent-9: hsl(358, 75.0%, 59.0%);
+      --accent-8: hsl(358, 75%, 47.1%);
+      --accent-9: hsl(358, 75%, 59%);
       --accent-10: hsl(359, 84.8%, 67.6%);
-      --accent-11: hsl(358, 100%, 76.0%);
-      --accent-12: hsl(350, 100%, 91.0%);
+      --accent-11: hsl(358, 100%, 76%);
+      --accent-12: hsl(350, 100%, 91%);
     }
   }
 
@@ -97,20 +97,6 @@ const { title } = Astro.props;
     box-sizing: border-box;
   }
 
-  body {
-    font-size: clamp(1.5rem, 4vw, 1.75rem);
-    font-family: "Ysabeau", sans-serif;
-    line-height: 1.4;
-    background-color: var(--gray-1);
-    color: var(--gray-12);
-  }
-
-  @media screen and (min-width: 800px) {
-    /* body {
-      font-size: 2rem;
-    } */
-  }
-
   *,
   *:before,
   *:after {
@@ -118,6 +104,14 @@ const { title } = Astro.props;
     box-sizing: inherit;
   }
 
+  body {
+    font-size: clamp(1.5rem, 4vw, 2rem);
+    font-family: "Ysabeau", sans-serif;
+    line-height: 1.4;
+    background-color: var(--gray-1);
+    color: var(--gray-12);
+  }
+
   img {
     max-width: 100%;
     height: auto;
@@ -175,4 +169,11 @@ const { title } = Astro.props;
     margin-right: 0.5em;
     opacity: 0.25;
   }
+
+  .container {
+    max-width: 1080px;
+    padding: 1.5rem;
+    margin: 3rem auto;
+    word-wrap: break-word;
+  }
 </style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 5a25723..1605b74 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -4,105 +4,84 @@ import Layout from "../layouts/Layout.astro";
 
 <Layout title="Ondřej Nývlt">
   <main class="container">
-    <div class="section">
-      <hgroup class="header section__content">
-        <h1>
-          I’m <em>Ondřej Nývlt</em>,
-        </h1>
-        <p>
-          a designer, software engineer, and&nbsp;student of social & cultural anthtropology.
-        </p>
-      </hgroup>
-    </div>
+    <p class="intro space-after">
+      I’m <em>Ondřej Nývlt</em>, a designer, software engineer, and&nbsp;student
+      of social & cultural anthtropology.
+    </p>
 
-    <section class="section">
-      <h2 class="section__header">About me</h2>
-      <ul class="section__content about par-space">
-        <li>I mostly make web apps. I try to stay close to the web platform and I prefer <a class="link" href="https://hypermedia.systems/">hypermedia driven applications</a> to SPAs.
-        <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>).
+    <section class="space-after">
+      <ul class="list">
+        <li>I make web apps that look nice and work well for everyone.</li>
+        <li>I experiment with <a
+            class="link"
+            href="https://docs.racket-lang.org/pollen/index.html"
+            >computational typesetting</a
+          > for my school theses.
+        </li>
+        <li>I contribute to <a class="link" href="https://nolog.cz">nolog.cz</a>,
+          a collective of people who provides social movements with privacy-focused
+          IT infrastructure.
+        </li>
       </ul>
     </section>
 
-    <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="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>
+    <section class="contact-section">
+      <h2>Contact:</h2>
+      <ul class="contact-list">
+        <li>
+          <a class="link" href='https://witter.cz/@uwundrej"'>Mastodon</a>
+        </li>
+        <li>
+          <a class="link" href="https://twitter.com/uwundrej">X</a>
+        </li>
+        <li>
+          <a class="link" href="https://github.com/onvlt">GitHub</a>
+        </li>
+        <li>
+          <a class="link" href="https://git.nolog.cz/uwundrej">git.nolog.cz</a>
+        </li>
+      </ul>
+    </section>
   </main>
 </Layout>
 
 <style>
-  .container {
-    max-width: 1200px;
-    padding: 1rem;
-    margin: 3rem auto;
-    word-wrap: break-word;
+  .intro {
+    max-width: 40ch;
+  }
+  .list {
+    --bullet-offset: 1em;
   }
 
-  .section__header {
-    font-weight: 700;
-    margin-bottom: 0.5em;
+  .list li {
+    padding-inline-start: var(--bullet-offset);
   }
 
-  @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;
-    }
+  .list li::before {
+    content: "–";
+    width: var(--bullet-offset);
+    display: inline-block;
+    margin-inline-start: calc(-1 * var(--bullet-offset));
+    color: var(--accent-12);
   }
 
-  .header {
-    font-weight: 700;
-    margin-bottom: 3rem;
-    font-size: 2.25rem;
-    line-height: 1.3;
+  .contact-section {
+    display: flex;
+    flex-wrap: wrap;
+    column-gap: 2rem;
   }
 
-  .header > * {
-    display: inline;
+  .contact-section h2 {
+    font-weight: bold;
   }
 
-  .about li {
-    margin-bottom: 0.5em;
+  .contact-list {
+    display: flex;
+    flex-wrap: wrap;
+    column-gap: 1.5rem;
   }
 
-  .nav p {
-    margin-right: 0.6rem;
-  }
-
-  .nav * {
-    display: inline;
-  }
-
-  .par-space {
-    margin-bottom: 1em;
+  .space-after {
+    margin-bottom: 1.5rem;
   }
 </style>