From 01ac8e202c131804e91f5554162e08577fbc8313 Mon Sep 17 00:00:00 2001
From: Amir Livne Bar-on <amir.livne.baron@gmail.com>
Date: Sat, 26 Aug 2023 19:08:44 +0300
Subject: [PATCH] Switch to one-column view on narrow screens

---
 index.html | 37 ++++++++++++++++++++++++-------------
 1 file changed, 24 insertions(+), 13 deletions(-)

diff --git a/index.html b/index.html
index 8cc0dc2..a0945d1 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,28 @@
     margin: 0px 0px 0px 0px;
     font-family: Lora, arial, helvetica, ariel, sans-serif;
     font-size: 140%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+.content {
+  flex-grow: 1;
+}
+.devcurl {
+  border-top: 1px solid #0f564d;
+}
+@media (min-width: 60em) {
+  .content {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-rows: min-content 1fr;
+  }
+  .devcurl {
+    border-top: none;
+  }
+}
+pre {
+  overflow-x: scroll;
 }
 a {
   text-decoration: none;
@@ -38,37 +60,24 @@
 }
 
 .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;
@@ -90,6 +99,7 @@
   <p>
 </div>
 
+<div class="content">
 <div class="withcurl">
 <h2>development with curl</h2>
 <pre class="term">
@@ -155,4 +165,5 @@ <h2>development of libcurl</h2>
     <li> <a href="https://everything.curl.dev/source/contributing">contribute</a>
   </ol>
 </div>
+</div>
 </body>