Clean up front page catalog.

resources/assets/styles/layouts/pages/_front-page.scss

@@ -115,11 +115,17 @@
     padding: 0 0 rem(154);
 
     h3 {
+      text-align: center;
+      text-transform: uppercase;
       margin-top: 4.375rem;
       margin-bottom: 2.8125rem;
     }
 
     .track {
+      display: flex;
+      flex-flow: row wrap;
+      justify-content: center;
+      align-items: center;
       max-width: 22.9375rem;
       margin-left: auto;
       margin-right: auto;
@@ -129,12 +135,20 @@
     }
 
     .books {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      order: 0;
       padding: 0;
       width: 100%;
       margin-bottom: rem(34);
     }
 
     .book {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
       width: 100%;
       max-width: 22.9375rem;
       height: 24.125rem;
@@ -144,25 +158,33 @@
       background: var(--accent, $brand-accent);
 
       a {
+        margin: 0;
         font-family: $font-family-sans-serif;
         color: var(--accent-fg, $white);
         text-decoration: none;
+        text-align: center;
       }
 
       .subject {
         height: 4.625rem;
+        margin: 0;
         font-size: rem(24);
+        text-align: center;
       }
 
       .title {
         height: 13rem;
+        margin: 0;
         font-size: rem(30);
         font-weight: 500;
         line-height: (40/30);
+        text-align: left;
       }
 
       .read-more {
+        margin: 0;
         font-size: rem(18);
+        text-align: left;
       }
 
       &:last-child {
@@ -172,6 +194,7 @@
 
     .previous,
     .next {
+      display: block;
       width: auto;
       height: auto;
 
@@ -181,6 +204,20 @@
         }
       }
     }
+
+    .previous {
+      order: 1;
+      margin-right: auto;
+    }
+
+    .next {
+      order: 2;
+      margin-left: auto;
+    }
+
+    .catalog-link {
+      text-align: center;
+    }
   }
 }
 
@@ -250,7 +287,8 @@
       }
 
       .track {
-        flex-wrap: nowrap;
+        display: flex;
+        flex-flow: row nowrap;
         width: 100%;
         max-width: 100%;
         margin: 0;
@@ -274,6 +312,7 @@
       }
 
       .previous {
+        order: 0;
         margin-left: 0.9375rem;
         left: 0;
       }
@@ -282,6 +321,7 @@
         width: auto;
         min-width: 50rem;
         flex-direction: row;
+        order: 1;
         justify-content: space-between;
         margin-bottom: 2rem;
       }
@@ -289,6 +329,10 @@
       .book {
         width: 30%;
         max-width: 19.54rem;
+
+        &:last-child {
+          margin-bottom: 2rem;
+        }
       }
     }
   }

resources/views/page-catalog.blade.php

@@ -1,3 +1,7 @@
+{{--
+  Template Name: Catalog
+--}}
+
 @extends('layouts.app')
 
 @section('content')

resources/views/partials/front-page-catalog.blade.php

@@ -1,27 +1,15 @@
-<div id="latest-titles" class="latest-books w-100">
-  <h3 class="tc ttu">{{ $latest_books_title }}</h3>
-  <div class="track flex flex-row flex-wrap justify-center items-center">
-    <div class="books flex flex-column justify-center items-center order-0 order-1-l flex-row-l justify-between-l" data-total-pages="{{ $catalog_data['pages'] }}" @if($next_page <= $catalog_data['pages'])data-next-page="{{ $next_page }}"@endif>
+<div id="latest-titles" class="latest-books">
+  <h3>{{ $latest_books_title }}</h3>
+  <div class="track">
+    <div class="books" data-total-pages="{{ $catalog_data['pages'] }}" @if($next_page <= $catalog_data['pages'])data-next-page="{{ $next_page }}"@endif>
       @foreach($catalog_data['books'] as $book)
-        <div class="book flex flex-column justify-end w-100">
-          @if(isset($book['metadata']['keywords']))
-          <p class="subject tc ma0">
-            <a href="{{ network_home_url('/catalog/#') . $book['metadata']['keywords'] }}">{{ $book['metadata']['keywords'] }}</a>
-          </p>
-          @endif
-          <p class="title tl ma0">
-            <a href="{{ $book['link'] }}">{{ $book['metadata']['name'] }}</a>
-          </p>
-          <p class="read-more tl ma0">
-            <a href="{{ $book['link'] }}">{{ __('About this book &rarr;', 'aldine') }}</a>
-          </p>
-        </div>
+        @include('partials.book', ['book' => $book])
       @endforeach
     </div>
-    @if($previous_page)<a class="previous db mr-auto f1 order-1 order-0-l" data-page="{{ $previous_page }}" href="{{ network_home_url("/page/$previous_page/#latest-titles") }}">@php(include get_theme_file_path() . '/dist/' . Aldine\svg_path('images/left-arrow.svg'))</a>@endif
-      @if($next_page <= $catalog_data['pages'])<a class="next ml-auto order-2 db f1" data-page="{{ $next_page }}" href="{{ network_home_url("/page/$next_page/#latest-titles") }}">@php(include get_theme_file_path() . '/dist/' . Aldine\svg_path('images/right-arrow.svg'))</a>@endif
+    @if($previous_page)<a class="previous" data-page="{{ $previous_page }}" href="{{ network_home_url("/page/$previous_page/#latest-titles") }}">@php(include get_theme_file_path() . '/dist/' . Aldine\svg_path('images/left-arrow.svg'))</a>@endif
+      @if($next_page <= $catalog_data['pages'])<a class="next" data-page="{{ $next_page }}" href="{{ network_home_url("/page/$next_page/#latest-titles") }}">@php(include get_theme_file_path() . '/dist/' . Aldine\svg_path('images/right-arrow.svg'))</a>@endif
   </div>
-  <div class="catalog-link tc">
+  <div class="catalog-link">
     <a class="button button-inverse button-wide" href="{{ network_home_url('/catalog/') }}">{{ __('View Complete Catalog', 'aldine') }}</a>
   </div>
 </div>