who: change tables to CSS flexbox for better mobile display

diff --git a/style.css b/style.css
index 43ee92ee2091531bcec1aea1776bfad39aa22771..3113baf5b1c942e137a53204785a4b42f333e45c 100644 (file)
--- a/style.css
+++ b/style.css
@@ -59,6 +59,16 @@ a:active {
        padding: 5%;
 }
 
+.width-60 {
+       width: 60%;
+}
+.width-80 {
+       width: 80%;
+}
+.width-100 {
+       width: 100%;
+}
+
 table {
        border-spacing: 0px;
        border-collapse: separate;
@@ -81,6 +91,35 @@ table#download {
        width: 80%;
 }
 
+div.who {
+       display: flex;
+       flex-wrap: wrap;
+       white-space: nowrap;
+}
+span.who-1 {
+       flex-basis: 100%;
+       flex-grow: 1;
+       flex-shrink: 0;
+}
+span.who-2 {
+       flex-basis: 50%;
+       flex-grow: 1;
+       flex-shrink: 0;
+       max-width: 50%;
+}
+span.who-3 {
+       flex-basis: 33%;
+       flex-grow: 1;
+       flex-shrink: 0;
+       max-width: 33%;
+}
+span.who-5 {
+       flex-basis: 20%;
+       flex-grow: 1;
+       flex-shrink: 0;
+       max-width: 20%;
+}
+
 div#bottom {
        display: flex;
        flex-wrap: wrap;
@@ -123,12 +162,26 @@ table#download {
        width: 100%;
 }
 
+span.who-2,
+span.who-3,
+span.who-5 {
+       flex-basis: 33%;
+       max-width: inherit;
+       padding-left: 1em;
+}
+
 #screenshots ul {
        padding-left: 0;
 }
 }
 
 @media only screen and (max-width: 600px) {
+span.who-2,
+span.who-3,
+span.who-5 {
+       flex-basis: 50%;
+}
+
 div#bottom span.menuitem {
        flex-basis: 50%;
        line-height: 1.5em;

diff --git a/who.php b/who.php
index 5a07377af931c8f328d2c9a17e243dc6034f5a80..7f4c264071b77ef78d02472a4e8d195edbcff02e 100644 (file)
--- a/who.php
+++ b/who.php
@@ -1,76 +1,63 @@
 <?php $title="Who's who";  include "top.php"; ?>
 
-<br><br>
-<center><b>Original Author</b></center>
-
-<table border=0 width="100%">
-<tr>
-<td><center>Chris Allegretta</center></td>
-</tr>
-</table>
-
-<br><br>
-<center><b>Current Maintainer</b></center>
-
-<table border=0 width="100%">
-<tr>
-<td><center>Benno Schulenberg</center></td>
-</tr>
-</table>
-
-<br><br>
-<center><b>Former Maintainers</b></center>
-
-<table align="center" border=0 width="60%">
-<tr align="center">
-<td><center>David Lawrence Ramsey</center></td>
-<td><center>Chris Allegretta</center></td>
-</tr>
-</table>
-
-<br><br>
-<center><b>Early Co-Developers</b></center>
+<br>
+<center>
+<div><b>Original Author</b></div>
+<div class="who width-100">
+<span class="who-1">Chris Allegretta</span>
+</div>
+</center>
 
-<table align="center" border=0 width="80%">
-<tr align="center">
-<td><center>Jordi Mallach</center></td>
-<td><center>David Benbennick</center></td>
-<td><center>Rocco Corsi</center></td>
-</tr>
-<tr align="center">
-<td><center>Mike Frysinger</center></td>
-<td><center>Adam Rogoyski</center></td>
-<td><center>Rob Siemborski</center></td>
-</tr>
-</table>
+<br>
+<center>
+<div><b>Current Maintainer</b></div>
+<div class="who width-100">
+<span class="who-1">Benno Schulenberg</span>
+</div>
+</center>
 
-<br><br>
-<center><b>Contributors of Code and Fixes</b></center>
+<br>
+<center>
+<div><b>Former Maintainers</b></div>
+<div class="who width-60">
+<span class="who-2">David Lawrence Ramsey</span>
+<span class="who-2">Chris Allegretta</span>
+</div>
+</center>
 
-<table border=0 width="100%">
-<tr align="center">
-<td>Ken Tyler</td>
-<td>Sven Guckes</td>
-<td>Bill Soudan</td>
-<td>Christian Weisgerber</td>
-<td>Kamil Dudka</td>
-</tr>
-<tr align="center">
-<td>Mark Majeres</td>
-<td>Joshua Jensen</td>
-<td>Ryan Krebs</td>
-<td>Big Gaute</td>
-<td>Albert Chin</td>
-</tr>
-<tr align="center">
-<td>Faissal Bensefia</td>
-<td>Mahyar Abbaspour</td>
-<td>Mike Scalora</td>
-<td>Sumedh Pendurkar</td>
-<td>Rishabh Dave</td>
-</tr>
-</table>
+<br>
+<center>
+<div><b>Early Co-Developers</b></div>
+<div class="who width-80">
+<span class="who-3">Jordi Mallach</span>
+<span class="who-3">David Benbennick</span>
+<span class="who-3">Rocco Corsi</span>
+<span class="who-3">Mike Frysinger</span>
+<span class="who-3">Adam Rogoyski</span>
+<span class="who-3">Rob Siemborski</span>
+</div>
+</center>
 
 <br>
+<center>
+<div><b>Contributors of Code and Fixes</b></div>
+<div class="who width-100">
+<span class="who-5">Ken Tyler</span>
+<span class="who-5">Sven Guckes</span>
+<span class="who-5">Bill Soudan</span>
+<span class="who-5">Christian Weisgerber</span>
+<span class="who-5">Kamil Dudka</span>
+<span class="who-5">Mark Majeres</span>
+<span class="who-5">Joshua Jensen</span>
+<span class="who-5">Ryan Krebs</span>
+<span class="who-5">Big Gaute</span>
+<span class="who-5">Albert Chin</span>
+<span class="who-5">Faissal Bensefia</span>
+<span class="who-5">Mahyar Abbaspour</span>
+<span class="who-5">Mike Scalora</span>
+<span class="who-5">Sumedh Pendurkar</span>
+<span class="who-5">Rishabh Dave</span>
+</div>
+</center>
 
 <?php include "bottom.php"; ?>