Make the intro paragraph a bit responsive

For wide screens, the logo fits easily aside the description.
For narrow screens (mobile device), put it atop instead.

docs/index.html

@@ -9,10 +9,14 @@
 <!--img src="logo.png" alt="Logo" /-->
 <h1>AVR-LibC</h1>
 <h2>Summary</h2>
-<table class="intro">
-<tr>
-  <td><img src="avr-libc-logo.png" alt="Logo"></td>
-  <td id="text">
+<div class="toplogo">
+  <img src="avr-libc-logo.png" alt="Logo">
+</div>
+<div class="row">
+  <div class="logo">
+    <img src="avr-libc-logo.png" alt="Logo">
+  </div>
+  <div class="col">
     <p>AVR-LibC is a Free Software project whose goal is to provide a high
     quality C library for use with GCC on Atmel AVR microcontrollers.</p>
 
@@ -26,9 +30,8 @@ <h2>Summary</h2>
     restrictions for the use of the library in closed-source
     commercial applications as possible.
     </p>
-  </td>
-</tr>
-</table>
+  </div>
+</div>
 <h2>Documentation</h2>
 <p>This page links the documentation
 for various versions of AVR-LibC.</p>

docs/style.css

@@ -23,14 +23,17 @@ a:hover {
     color: #ff4080;
 }
 
-/* Responsive Styles */
+/* Fit logo and description side by side for standard desktop
+   browser sizes. */
+.row { display: flex; margin:  0.5rem -0.6rem; align-items: stretch; }
+.row [class*="col"] { width: 50%; padding: 0  0.6rem; }
+.row [class*="logo"] { padding: 0  0.6rem; }
+.toplogo { display: none; }
+.row .col .logo   { flex: 1 1 100%; }
 
-table.intro {
-    max-width: 600px;
-}
-
-@media screen and (max-height: 800px) {
-    h1 {
-	font-size: 30px;
-    }
+/* For narrow screens (mobile devices), put logo on top instead. */
+@media screen and (max-width : 1000px){
+    .row [class*="logo"] { display: none; }
+    .toplogo { display: block; }
+    .row [class*="col"] { width: 100%; padding: 0  0.6rem; }
 }