Homepage redesign

.github/workflows/jekyll.yml

@@ -20,6 +20,7 @@ jobs:
       - name: Populate latest_covers
         run: |
           cp "./_includes/latest_covers_test.html" "./_includes/latest_covers.html"
+          cp "./_includes/latest_covers_test.html" "./_includes/popular_covers.html"
 
       - name: Install Jekyll
         run: |

.gitignore

@@ -12,6 +12,7 @@ vendor
 # generated files
 _includes/latest_covers.html
 _includes/random_covers.html
+_includes/popular_covers.html
 
 
 

_includes/head2.html

@@ -1,5 +1,5 @@
 
- <link rel="stylesheet" href="/gutenberg/style2.css?v=1.5">
+ <link rel="stylesheet" href="/gutenberg/style2.css?v=1.6">
  <link rel="stylesheet" href="/gutenberg/collapsible.css?1.3">
  <link rel="stylesheet" href="/gutenberg/new_nav.css?v=1.6">
  <link rel="stylesheet" href="/gutenberg/pg-desktop-one.css?v=1.1">

catalog/admin/make-by-pages.php

@@ -96,15 +96,9 @@ function _navbarcategories ($what, $dir) {
 
 function navbar () {
   global $dir_authors, $dir_titles, $dir_langs, $dir_loccs, $dir_categories, $dir_recent, $lang_thres;
-  $nav  = "<div class=\"pgdbnavbar\">\n";
-  $nav .= _navbar       ("Authors",   $dir_authors);
-  $nav .= _navbar       ("Titles",    $dir_titles);
-  $nav .= _navbarlangs  ("Languages with more than $lang_thres books", "> $lang_thres", $dir_langs);
-  $nav .= _navbarlangs  ("Languages with up to $lang_thres books", "<= $lang_thres", $dir_langs);
-  //  $nav .= _navbarloccs  ("LoC Class", $dir_loccs);
-  $nav .= _navbarcategories ("Special Categories", $dir_categories);
-  $nav .= _navbarrecent     ("Recent",     $dir_recent);
-  $nav .= "</div>\n\n"; 
+  $nav = "<div class=\"pgdbnavbar\">\n";
+  $nav .= _navbarrecent ("Recent", $dir_recent);
+  $nav .= "</div>\n\n";
   return $nav;
 }
 

gutenberg/homepage.css

@@ -0,0 +1,211 @@
+/* ---------- Base Styles ---------- */
+body {
+  line-height: 1.6;
+  color: #333;
+}
+
+/* Headline & Slogan */
+#slogan { font-size: 32px; }
+#sub-slogan { font-size: 18px; }
+
+/* Slogan responsive line-height */
+@media (max-width: 960px) {
+  #slogan { line-height: 1.2; }
+}
+
+/* Utility */
+.box_shadow {
+  border: none;
+  border-radius: 10px;
+  display: inline-block;
+  min-width: 100%;
+}
+
+/* Typography */
+i { font-style: normal; font-size: 1.25rem; }
+
+p i + a {
+  font-size: 0.85rem;
+  padding: 2px 12px;
+  border-radius: 4px;
+}
+
+/* Links */
+a {
+  color: #007bff;
+  text-decoration: none;
+  transition: color 0.15s ease-in-out,
+              transform 0.2s ease-in-out,
+              box-shadow 0.2s ease-in-out;
+}
+
+a:hover { color: #0056b3; }
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 500;
+  color: #212529;
+}
+
+/* ---------- Category Grid ---------- */
+.category-grid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 30px;
+  list-style: none;
+  padding: 0;
+  margin: 55px 0px 65px 0px;
+}
+
+.category-grid a {
+  flex: 0 0 280px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 20px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
+  border: 1px solid #e9ecef;
+  border-radius: 12px;
+  color: #495057;
+  font-weight: 500;
+  font-size: 1.1rem;
+  text-decoration: none !important;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+}
+
+.category-grid a:hover {
+  background: #7EBED0;
+  text-decoration: none !important;
+  transform: translateY(-4px);
+}
+
+.category-grid a:before {
+  content: attr(data-emoji);
+  font-size: 1.5rem;
+  filter: grayscale(0.3);
+  transition: all 0.3s ease;
+}
+
+.category-grid a:hover:before {
+  filter: grayscale(0);
+  transform: scale(1.1);
+}
+
+/* Category Grid – Responsive */
+@media (max-width: 768px) {
+  .category-grid {
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    gap: 15px;
+  }
+}
+
+@media (max-width: 480px) {
+  .category-grid { grid-template-columns: 1fr; }
+}
+
+/* ---------- Info Boxes ---------- */
+.info-box-container {
+  display: flex;
+  gap: 30px;
+  margin: 40px 0;
+}
+
+.info-box {
+  flex: 1;
+  background-color: #F0F0F0;
+  border-radius: 10px;
+  padding: 20px 20px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
+  transition: transform 0.2s ease-in-out,
+              box-shadow 0.2s ease-in-out;
+}
+
+.info-box:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+}
+
+.info-box h3 {
+  color: #212529;
+  margin: 0 0 15px 0;
+  font-size: 1.35rem;
+}
+
+.info-box ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.info-box ul li { margin-bottom: 14px; line-height: 1.5; }
+
+.info-box .highlight-text {
+  color: #212529;
+  margin-bottom: 10px;
+  font-size: 0.95rem;
+}
+
+/* Info Boxes – Responsive */
+@media (max-width: 768px) {
+  .info-box-container { flex-direction: column; }
+  .info-box { margin-bottom: 15px; }
+}
+
+/* ---------- Latest Releases & Random Selection ---------- */
+.lib.latest {
+  display: flex;
+  gap: 28px;
+  padding: 0px 0px 50px 0px;
+}
+
+.lib.latest .cover_image {
+  flex-shrink: 0;
+  transition: transform 0.2s ease-in-out;
+}
+
+.lib.latest .cover_image:hover { transform: translateY(-4px); }
+
+.lib.latest .cover_img img {
+  width: 120px;
+  height: 180px;
+  border-radius: 6px;
+  box-shadow: none;
+  transition: all 0.2s ease-in-out;
+}
+
+.lib.latest .cover_img img:hover {
+  box-shadow: none;
+}
+
+.lib.latest .cover_title { margin-top: 12px; max-width: 140px; }
+
+.lib.latest .cover_title h5 {
+  font-size: 0.85rem;
+  line-height: 1.3;
+  margin: 0;
+  color: #495057;
+  width: 120px;
+}
+
+/* ---------- 'Find more' link ---------- */
+.box_shadow p a {
+  background-color: #C7DDE3;
+  padding: 0 12px;
+  border-radius: 3px;
+}
+
+.box_shadow p a:hover { filter: brightness(1.1); }
+
+/* Responsive width for cover carousels */
+/* Library wrapper */
+.library {
+  overflow-x: auto;
+  position: relative;
+}
+
+/* Box Shadow heading label */
+.box_shadow label { font-size: 1.35rem; }

gutenberg/style2.css

@@ -226,6 +226,31 @@ ul {
   margin-left: -1em;
 }
 
+.bookshelves h2:focus { outline: none; }
+
+/* highlights the relevant header if a user arrives via a "main categories" link on the homepage */
+@media only screen and (min-width: 751px) {
+  .bookshelves h2:target,
+  .bookshelves h2:focus {
+    background: #C7DDE3;
+    padding: 0.7em 0.5em;
+    animation: flash 1.5s ease-in-out 3;
+    font-size: 1.5em;
+    width: 80%;
+    display: inline-block;
+    box-sizing: border-box;
+  }
+}
+
+@keyframes flash {
+  0%, 100% { background: #C7DDE3; }
+  50%      { background:#F0F0F0}
+}
+
+.bookshelves h2 {
+  scroll-margin-top: 10rem; /* keeps heading out from under fixed header */
+}
+
 .page_content .bookshelves h2 {
   border-bottom: 0px none #ffffff;
 }