www home.html

[Therese Godefroy]

CVSROOT:        /webcvs/www
Module name:    www
Changes by:     Therese Godefroy <th_g> 20/06/18 14:16:49

Modified files:
        .              : home.html 

Log message:
        Use div/inline-block instead of table to format thumbnails
        (www-discuss - WCAG 2.0 - 2020-06-14).

CVSWeb URLs:
http://web.cvs.savannah.gnu.org/viewcvs/www/home.html?cvsroot=www&r1=1.598&r2=1.599

Patches:
Index: home.html
===================================================================
RCS file: /webcvs/www/www/home.html,v
retrieving revision 1.598
retrieving revision 1.599
diff -u -b -r1.598 -r1.599
--- home.html   1 Jun 2020 10:19:52 -0000       1.598
+++ home.html   18 Jun 2020 18:16:48 -0000      1.599
@@ -32,15 +32,15 @@
    max-width: 100%;
    margin: .5em auto;
 }
-.screenshot, .thumbs .image td {
+.screenshot {
    line-height: .8em;
    background: #444;
    padding: .2em;
 }
-.screenshot a, .thumbs .image td a {
+.screenshot a {
    color: white;
 }
-.screenshot a[href]:hover, .thumbs .image td a[href]:hover {
+.screenshot a[href]:hover, .thumbs a[href]:hover {
    background-color: transparent;
 }
 .screenshot img {
@@ -50,30 +50,24 @@
    line-height: 1.2em;
    margin: .2em 0 0;
 }
-.thumbs {
+div.thumbs {
+   display: inline-block;
    width: 100%;
-   display: block;
+   white-space: nowrap;
    overflow: auto;
    padding-bottom: .8em;
 }
-.thumbs td {
+div.thumbs div {
+   display: inline-block;
    vertical-align: top;
-   padding: .1em;
-   border: 0;
-   border-left: .5em solid white;
-}
-.thumbs td:first-child {
-   border: 0;
-}
-.thumbs .caption td  {
-   line-height: 1em;
-}
-.thumbs img {
-   width: 10em;
-   max-width: 100%;
-   min-width: 8em;
+   white-space: normal;
+   width: 8em;
+   margin: 0 2px;
+}
+div.thumbs img {
+   width: 100%;
+   border: 1px solid #444;
 }
-
 .btn-left a[href], .btn-right a[href] {
    display: inline-block;
    text-align: center;
@@ -184,9 +178,6 @@
 -->
 <!--#if expr="$LANGUAGE_SUFFIX = /[.](ar|fa|he)/" -->
 <!--
-.thumbs td {
-   border-left: 0; border-right: .5em solid white;
-}
 .btn-left {
    float: right;
 }
@@ -288,36 +279,55 @@
 and Inkscape (vector graphics editor)</small></p><!--#endif -->
 </div>
 
-<table class="thumbs">
- <tr class="image">
-  <td><a href="/home.html?distro=dragora#gnu-linux"><img
+<div class="thumbs">
+ <div>
+  <a href="/home.html?distro=dragora#gnu-linux"><img
    src="/distros/screenshots/dragora-ice-thumb.jpg"
-   alt="&nbsp;[Screenshot of Dragora&nbsp;3.0-beta1 with IceWM window 
manager]&nbsp;" /></a></td>
-  <td><a href="/home.html?distro=guix#gnu-linux"><img
+   alt="&nbsp;[Screenshot of Dragora&nbsp;3.0-beta1 with IceWM window 
manager]&nbsp;" /></a>
+  <span class="gnun-split"></span>
+  <small>Dragora / IceWM</small>
+ </div>
+
+ <div>
+  <a href="/home.html?distro=guix#gnu-linux"><img
    src="/distros/screenshots/guixSD-gnome3-thumb.jpg"
-   alt="&nbsp;[Screenshot of Guix&nbsp;0.15 with GNOME&nbsp;3 desktop]&nbsp;" 
/></a></td>
-  <td><a href="/home.html?distro=hyperbola#gnu-linux"><img
+   alt="&nbsp;[Screenshot of Guix&nbsp;0.15 with GNOME&nbsp;3 desktop]&nbsp;" 
/></a>
+  <span class="gnun-split"></span>
+  <small>Guix / GNOME3</small>
+ </div>
+
+ <div>
+  <a href="/home.html?distro=hyperbola#gnu-linux"><img
    src="/distros/screenshots/hyperbola-i3-thumb.jpg"
-   alt="&nbsp;[Screenshot of Hyperbola&nbsp;0.3 with i3 window manager]&nbsp;" 
/></a></td>
-  <td><a href="/home.html?distro=parabola#gnu-linux"><img
+   alt="&nbsp;[Screenshot of Hyperbola&nbsp;0.3 with i3 window manager]&nbsp;" 
/></a>
+  <span class="gnun-split"></span>
+  <small>Hyperbola / i3</small>
+ </div>
+
+ <div>
+  <a href="/home.html?distro=parabola#gnu-linux"><img
    src="/distros/screenshots/parabola2020-lxde-thumb.jpg"
-   alt="&nbsp;[Screenshot of Parabola&nbsp;2020 with LXDE desktop]&nbsp;" 
/></a></td>
-  <td><a href="/home.html?distro=pureos#gnu-linux"><img
+   alt="&nbsp;[Screenshot of Parabola&nbsp;2020 with LXDE desktop]&nbsp;" 
/></a>
+  <span class="gnun-split"></span>
+  <small>Parabola / LXDE</small>
+ </div>
+
+ <div>
+  <a href="/home.html?distro=pureos#gnu-linux"><img
    src="/distros/screenshots/gnome3-thumb.jpg"
-   alt="&nbsp;[Screenshot of PureOS&nbsp;8 with GNOME&nbsp;3 desktop]&nbsp;" 
/></a></td>
-  <td><a href="/home.html?distro=trisquel#gnu-linux"><img
+   alt="&nbsp;[Screenshot of PureOS&nbsp;8 with GNOME&nbsp;3 desktop]&nbsp;" 
/></a>
+  <span class="gnun-split"></span>
+  <small>PureOS / GNOME3</small>
+ </div>
+
+ <div>
+  <a href="/home.html?distro=trisquel#gnu-linux"><img
    src="/distros/screenshots/trisquel8-mate-thumb.jpg"
-   alt="&nbsp;[Screenshot of Trisquel&nbsp;8 with MATE desktop]&nbsp;" 
/></a></td>
- </tr>
- <tr class="caption">
-  <td><small>Dragora / IceWM</small></td>
-  <td><small>Guix / GNOME3</small></td>
-  <td><small>Hyperbola / i3</small></td>
-  <td><small>Parabola / LXDE</small></td>
-  <td><small>PureOS / GNOME3</small></td>
-  <td><small>Trisquel / MATE</small></td>
- </tr>
-</table>
+   alt="&nbsp;[Screenshot of Trisquel&nbsp;8 with MATE desktop]&nbsp;" /></a>
+  <span class="gnun-split"></span>
+  <small>Trisquel / MATE</small>
+ </div>
+</div>
 
 <div class="btn-right">... or <a
 
href="https://directory.fsf.org/wiki/Free_Software_Directory:Free_software_replacements";>
@@ -568,7 +578,7 @@
 
 <p class="unprintable">Updated:
 <!-- timestamp start -->
-$Date: 2020/06/01 10:19:52 $
+$Date: 2020/06/18 18:16:48 $
 <!-- timestamp end -->
 </p>
 </div>