List layout made less cluttered

app/models/package.rb

@@ -26,6 +26,15 @@ class Package < ApplicationRecord
     # order('name ASC')
   # }
 
+  # Return the first paragraph of the long description.
+  def long_description_first_paragraph
+    if self.long_description
+      self.long_description.split(/\n\.\n/).first
+    else
+      nil
+    end
+  end
+
   # Return a query of all packages that have screenshots
   def self.with_screenshots
     # Query for all packages who's ID appears in a screenshot's "package_id" field

app/views/packages/list.slim

@@ -15,25 +15,24 @@
       - @packages.to_a.each do |pkg|
         .row.listview
           .small-12.medium-4.columns
-            a.black href=package_path(name: pkg.name)
-              .pkgname
-                =pkg.name
-                ' >
               - if pkg.screenshots_approved.any?
                 // TODO: smarter search for the best screenshot instead of taking the first one
                 - screenshot = pkg.screenshots.first
                 a.black title=screenshot.caption href=package_path(name: pkg.name)
                   = image_tag(screenshot.image.url(:large, timestamp: false), alt: screenshot.caption)
-                  - if pkg.screenshots.length > 1
+                  /- if pkg.screenshots.length > 1
                     a.black href=package_path(name: pkg.name)
                       'and #{pluralize(pkg.screenshots.length-1, 'screenshot')} more…
               - else
                 a href=package_path(name: pkg.name)
                   img.screenshot src="/images/dummy/no-screenshots-upload-one.svg"
           .small-12.medium-8.columns
-            .row.packagedetails
+            h1
-              .subtitle = pkg.description
+              a href=package_path(name: pkg.name)
-              = pkg.long_description or 'Sorry - no description available.'
+                =pkg.name
+            .packagedetails
+              h2 =pkg.description
+              = pkg.long_description_first_paragraph or 'Sorry - no description available.'
 
       // Second paginator at the bottom so the user does not have to scroll up again
       = render 'packages/paginator'