Merge pull request #263 from lydiascarf/homepage-tweaks

Homepage tweaks

Author: timwis

css/main.css

@@ -50,21 +50,23 @@ dataset {
 
 .homepage-categories {
   text-align: justify;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  grid-gap: 1rem;
+  grid-auto-flow: dense;
 }
 
-/* allows last line of categories to be justify aligned */
-.homepage-categories:after {
-  display: inline-block;
-  width: 100%;
-  content: '';
+.homepage-categories .thumbnail:hover {
+  background-color: #abccfb;
 }
 
 .homepage-categories .thumbnail {
-  display: inline-grid;
-  min-width: 120px;
+  min-width: 150px;
   text-align: center;
   border: none;
   padding: 10px;
+  text-decoration: none;
+  transition: all 0.3s ease-in-out;
 }
 
 .homepage-categories .thumbnail img {

index.html

@@ -6,7 +6,7 @@
   <div class="col-lg-6 justify-content-center">
     <h1 class="display-5">{{ site.greeting }}</h1>
     <p class="col-md-8 fs-4 mb-4">{{ site.description }}</p>
-    <a href="{{ "/datasets" | relative_url }}" class="btn btn-primary btn-lg" role="button">Start browsing</a>
+    <a href="{{ "/datasets" | relative_url }}" class="btn btn-primary btn-lg" role="button">Browse all datasets</a>
   </div>
   <img alt="Example homepage hero image" class="d-none d-md-block img-responsive rounded-circle" src="{{ site.baseurl }} {{ site.hero_image }}" style="max-height: 300px" />
 </div>
@@ -16,9 +16,9 @@ <h3>Browse by Category</h3>
 {% for category in site.dataset_categories %}
   {% if category.featured == true %}
     {% capture logo_alt %}{{ category.name }}{% if category.logo_credit and category.logo_credit != empty %} logo by {{ category.logo_credit }}{% endif %}{% endcapture %}
-    <a href="{{ site.baseurl }}/categories/{{ category.name | slugify }}" class="thumbnail" title="{{ logo_alt }}">
+    <a class="card border thumbnail hover-overlay" href="{{ site.baseurl }}/categories/{{ category.name | slugify }}" title="{{ logo_alt }}">
       {% if category.logo and category.logo != empty %}
-        <img src="{{ site.baseurl }}{{ category.logo }}" alt="{{ logo_alt }}">
+        <img class="card-img-top" src="{{ site.baseurl }}{{ category.logo }}" alt="{{ logo_alt }}">
       {% endif %}
       {{ category.name }}
     </a>