From 90b1cee8394ecb5e48d3603a3fb7e1938d8f7412 Mon Sep 17 00:00:00 2001
From: Paul Roub <paul@journey.live>
Date: Fri, 25 Aug 2023 16:06:31 -0400
Subject: [PATCH] Fix display on narrow / small screens (#1)

---
 index.html | 230 +++++++++++++++++++++++++++++++----------------------
 1 file changed, 137 insertions(+), 93 deletions(-)
diff --git a/index.html b/index.html
index 8cc0dc2..a3eb1c9 100644
--- a/index.html
+++ b/index.html
@@ -1,96 +1,141 @@
+<!DOCTYPE html>
+<html>
 <head>
-  <title>everything on curl development</title>
+    <title>everything on curl development</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <style>
+    * {
+        box-sizing: border-box;
+    }
+
+    body {
+        margin: 0px 0px 0px 0px;
+        font-family: Lora, arial, helvetica, ariel, sans-serif;
+        font-size: 140%;
+        display: grid;
+        min-height: 100vh;
+        grid-template-columns: 1fr 1fr;
+        grid-template-areas:
+            "title title"
+            "withcurl withlib"
+            "devcurl devlib";
+    }
+
+    .topic {
+        overflow-x: auto;
+        overflow-y: visible;
+        padding: 10px;
+    }
+
+    @media screen and (max-width: 60em) {
+        body {
+            grid-template-columns: 1fr;
+            grid-template-areas:
+                "title"
+                "withcurl"
+                "withlib"
+                "devcurl"
+                "devlib";
+        }
+
+        .topic {
+            overflow: visible;
+        }
+    }
+
+    a {
+        text-decoration: none;
+        color: #ffffff;
+    }
+    a:hover {
+        text-decoration: none;
+        color: #4040ff;
+        background-color: #093754;
+    }
+
+    a.light {
+        text-decoration: none;
+        color: #093754;
+    }
+    a:hover.light {
+        text-decoration: none;
+        color: #4040ff;
+        background-color: #e0e0e0;
+      }
+
+    h1 {
+        margin: 1rem auto 0;
+    }
+
+    .urls {
+        margin: 0 auto 1rem;
+    }
+
+    .title {
+        grid-area: title;
+        background: #202020;
+        color: #ffffff;
+        padding: 10px 0;
+        text-align: center;
+        align-items: center;
+        display: grid;
+    }
+
+    .withcurl {
+        grid-area: withcurl;
+        background: #093754;
+        color: #ffffff;
+    }
+
+    .withlib {
+        grid-area: withlib;
+        background: #ffffff;
+        color: #093754;
+    }
+
+    .devcurl {
+        grid-area: devcurl;
+        background: #cfcfcf;
+        color: #0f564d;
+    }
+
+    .devlib {
+        grid-area: devlib;
+        background: #0f564d;
+        color: #ffffff;
+    }
+
+    pre {
+        overflow: auto;
+        max-width: 100%;
+    }
+
+    .term {
+        padding: 4px 4px 4px 4px;
+        border: 2px solid white;
+    }
+
+    .whiteterm {
+        padding: 4px 4px 4px 4px;
+        border: 2px solid #093754;
+    }
+
+
+    </style>
+
 </head>
 <body>
-<style>
-body {
-    margin: 0px 0px 0px 0px;
-    font-family: Lora, arial, helvetica, ariel, sans-serif;
-    font-size: 140%;
-}
-a {
-  text-decoration: none;
-  color: #ffffff;
-}
-a:hover {
-  text-decoration: none;
-  color: #4040ff;
-  background-color: #093754;
-}
-
-a.light {
-  text-decoration: none;
-  color: #093754;
-}
-a:hover.light {
-  text-decoration: none;
-  color: #4040ff;
-  background-color: #e0e0e0;
-}
-
-.title {
-    width: 50%;
-    background: #202020;
-    color: #ffffff;
-    margin-left: auto;
-    margin-right: auto;
-    padding: 10px 0px 10px 0px;
-}
-
-.withcurl {
-    width: 48%;
-    background: #093754;
-    color: #ffffff;
-    padding: 10px 10px 10px 10px;
-    float: left;
-    height: 40%;
-}
-.withlib {
-    width: 48%;
-    background: #ffffff;
-    color: #093754;
-    padding: 10px 10px 10px 10px;
-    float: left;
-    height: 40%;
-}
-.devcurl {
-    width: 48%;
-    background: #ffffff;
-    color: #0f564d;
-    padding: 10px 10px 10px 10px;
-    float: left;
-    clear: left;
-    height: 100%;
-}
-.devlib {
-    width: 48%;
-    background: #0f564d;
-    color: #ffffff;
-    padding: 10px 10px 10px 10px;
-    float: left;
-    height: 100%;
-}
-.term {
-    padding: 4px 4px 4px 4px;
-    border: 2px solid white;
-}
-.whiteterm {
-    padding: 4px 4px 4px 4px;
-    border: 2px solid #093754;
-}
-
-
-</style>
-
-<div class="title">
-  <center><h1>curl development</h1>
+
+<header class="title">
+  <h1>curl development</h1>
+  <section class="urls">
     <a href="https://everything.curl.dev/">"everything curl"</a> <br>
     <a href="https://curl.se/">curl.se</a>
-  </center>
-  <p>
-</div>
+  </section>
+</header>
 
-<div class="withcurl">
+<div class="withcurl topic">
 <h2>development with curl</h2>
 <pre class="term">
 $ curl https://example.com/
@@ -105,9 +150,9 @@ <h2>development with curl</h2>
     <li> <a href="https://everything.curl.dev/http">How to HTTP with the curl tool</a>
     <li> <a href="https://everything.curl.dev/http/browserlike">Scripting browser-like tasks</a>
   </ol>
-  
 </div>
-<div class="withlib">
+<div class="withlib topic">
+
 <h2>development with libcurl</h2>
 <pre class="whiteterm">
   curl = curl_easy_init();
@@ -124,10 +169,9 @@ <h2>development with libcurl</h2>
     <li> <a class="light" href="https://everything.curl.dev/libcurl/drive">driving transfers with libcurl</a>
     <li> <a class="light" href="https://everything.curl.dev/libcurl-http">HTTP with libcurl</a>
   </ol>
-
 </div>
 
-<div class="devcurl">
+<div class="devcurl topic">
 <h2>development of curl</h2>
 <pre class="whiteterm">
 $ ./configure
@@ -139,10 +183,9 @@ <h2>development of curl</h2>
     <li> <a class="light" href="https://everything.curl.dev/opensource/license">the curl license</a>
     <li> <a class="light" href="https://everything.curl.dev/source">curl source code</a>
   </ol>
-
 </div>
 
-<div class="devlib">
+<div class="devlib topic">
 <h2>development of libcurl</h2>
 <pre class="term">
 $ ./configure
@@ -156,3 +199,4 @@ <h2>development of libcurl</h2>
   </ol>
 </div>
 </body>
+</html>
