bring back some CSS, minor visual tweaks

lib/DDG/Goodie/SunInfo.pm

@@ -37,21 +37,21 @@ handle remainder => sub {
         (?:on|for)?\s?
         (?<when>$datestring_regex)?
     $/xi;
-    
+
     my ($lat, $lon, $tz) = ($loc->latitude, $loc->longitude, $loc->time_zone);
     my $where = where_string();
     return unless (($lat || $lon) && $tz && $where);    # We'll need a real location and time zone.
     my $dt = DateTime->now;;
     $dt = parse_datestring_to_date($+{'when'}) if($+{'when'});
-    
+
     return unless $dt;                                  # Also going to need to know which day.
     $dt->set_time_zone($tz) unless ($+{'lat'} && $+{'lon'});
-    
+
     $lon = parse_arc($+{'lon'}) if ($+{'lon'});
     $lat = parse_arc($+{'lat'}) if ($+{'lat'});
-    
+
     $where = "Coordinates ${lat}°N ${lon}°E" if($+{'lat'} && $+{'lon'});
-    
+
     my $sun_at_loc = DateTime::Event::Sunrise->new(
         longitude => $lon,
         latitude  => $lat,
@@ -126,11 +126,12 @@ sub pretty_output {
             group => 'text',
             item => 0,
             options => {
+                title_content => 'DDH.sun_info.title',
                 content => 'DDH.sun_info.content'
             }
         }
     };
-    
+
 }
 
 1;

share/goodie/sun_info/content.handlebars

@@ -1,17 +1,14 @@
-<div class='c-base__sub text--secondary'>
-    <span class='ddgsi'>@</span>{{where}} on {{when_data}}
-</div>
 <div class='c-base__sub'>
-    <span class='suninfo--risebox'>
+    <span class='sun_info--risebox'>
         <img src='{{sunrise_svg}}' width='48' height='48'/>
     </span>
-    <span class='suninfo--timeboxes suninfo--border-right'>
-        <span class='suninfo--times text--primary'>{{rise}}</span>
+    <span class='sun_info--timeboxes sun_info--border-right'>
+        <span class='sun_info--times text--primary tx--25'>{{rise}}</span>
     </span>
-    <span class='suninfo--setbox'>
+    <span class='sun_info--setbox'>
         <img src='{{sunset_svg}}' width='48' height='48'/>
     </span>
-    <span class='suninfo--timeboxes'>
-        <span class='text--primary suninfo--times'>{{set_data}}</span>
+    <span class='sun_info--timeboxes'>
+        <span class='text--primary sun_info--times tx--25'>{{set_data}}</span>
     </span>
 </div>

share/goodie/sun_info/sun_info.css

@@ -1,15 +1,38 @@
+.zci--sun_info .sun_info--title .ddgsi {
+    margin-right: 0.5em;
+}
+
+.zci--sun_info .c-base__content {
+	margin-top: 0.1em;
+}
+
 .zci--sun_info span {
 	vertical-align: middle;
 }
 
-.suninfo--border-right {
+.zci--sun_info .sun_info--times {
+    margin: 0 0.5em;
+    position: relative;
+    top: -3px;
+}
+
+.zci--sun_info .sun_info--setbox {
+    padding-left: 0.5em;
+}
+
+.zci--sun_info  .sun_info--border-right {
 	border-right: 1px solid #ccc;
 	padding-right: 2px;
 }
 
-.suninfo--setbox,
-.suninfo--risebox {
+.zci--sun_info .sun_info--setbox,
+.zci--sun_info .sun_info--risebox {
     display: inline-block;
     width: 48px;
     height: 48px;
 }
+
+.zci--sun_info .sun_info--timeboxes {
+    display: inline-block;
+    height: 25px;
+}

share/goodie/sun_info/title.handlebars

@@ -0,0 +1,3 @@
+<div class='sun_info--title text--secondary tx--13'>
+    <span class='ddgsi'>@</span>{{where}} on {{when_data}}
+</div>