Media queries

share/goodie/name_days/name_days.css

@@ -21,8 +21,23 @@ tr:last-of-type .name-days-country, tr:last-of-type .name-days-dates {
     border-bottom: none;
 }
 
-.name-days-tile {
-    display: inline-block;
-    min-width: 30%;
+.name-days-tile span {
     padding: 0 0.5em 0 0;
 }
+
+.name-days-tile {
+    display: inline-block;
+    min-width: 33%;
+}
+
+@media (max-width: 600px) {
+    .name-days-tile {
+        min-width: 50%;
+    }
+}
+
+@media (max-width: 400px) {
+    .name-days-tile {
+        width: 100%;
+    }
+}

share/goodie/name_days/preprocess.pl

@@ -74,8 +74,8 @@ sub prepare_dates {
             '</span></td><td class="name-days-dates">';
         my $i = 0;
         for (@{$dates_by_country_and_month->{$_}}) {
-            $res .= '<div class="name-days-tile">' . $month_names[$i] . ' ' .
-                    $_ . '</div>' if $_;
+            $res .= '<div class="name-days-tile"><span>' . $month_names[$i] . ' ' .
+                    $_ . '</span></div>' if $_;
             $i++;
         }
         $res .= '</td></tr>';

t/NameDays.t

@@ -36,7 +36,7 @@ sub line {
 
 sub tile {
     my ($days, $month) = @_;
-    return "<div class=\"name-days-tile\">$month $days</div>";
+    return "<div class=\"name-days-tile\"><span>$month $days</span></div>";
 }
 
 my $footer = '</table></div></div>';