gtfs-to-html 2.6.9 → 2.6.11

package/CHANGELOG.md

@@ -5,6 +5,24 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.6.11] - 2024-07-24
+
+### Updated
+- Dependency updates
+- Default template timetable styles
+
+### Fixed
+- Map route_text_color fix
+
+## [2.6.10] - 2024-07-15
+
+### Updated
+- Better date format in timetable comment
+- favicon
+- Improved timetable_page_name fallback
+- Overview template formatting
+- Update mapbox version
+
 ## [2.6.9] - 2024-07-11
 
 ### Added

package/lib/formatters.js

@@ -512,22 +512,16 @@ export function formatTimetablePageLabel(timetablePage) {
     timetablePage.consolidatedTimetables &&
     timetablePage.consolidatedTimetables.length > 0
   ) {
-    if (timetablePage.consolidatedTimetables.length === 1) {
-      // Get label from first timetable if there is only one
-      return timetablePage.consolidatedTimetables[0].timetable_label;
-    } else {
-      // Otherwise, use route names from all timetables
-      const routes = uniqBy(
-        flatMap(
-          timetablePage.consolidatedTimetables,
-          (timetable) => timetable.routes,
-        ),
-        'route_id',
-      );
-      const timetablePageLabel = routes.map((route) => formatRouteName(route));
+    // Use route names from all timetables
+    const routes = uniqBy(
+      flatMap(
+        timetablePage.consolidatedTimetables,
+        (timetable) => timetable.routes,
+      ),
+      'route_id',
+    );
 
-      return timetablePageLabel.join(' and ');
-    }
+    return routes.map((route) => formatRouteName(route)).join(' and ');
   }
 
   return 'Unknown';

package/lib/log-utils.js

@@ -17,7 +17,7 @@ export function generateLogText(outputStats, config) {
   const logText = [
     `Feed Version: ${feedVersion}`,
     `GTFS-to-HTML Version: ${config.gtfsToHtmlVersion}`,
-    `Date Generated: ${new Date()}`,
+    `Date Generated: ${new Date().toISOString()}`,
     `Timetable Page Count: ${outputStats.timetablePages}`,
     `Timetable Count: ${outputStats.timetables}`,
     `Calendar Service ID Count: ${outputStats.calendars}`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gtfs-to-html",
-  "version": "2.6.9",
+  "version": "2.6.11",
   "private": false,
   "description": "Build human readable transit timetables as HTML, PDF or CSV from GTFS",
   "keywords": [
@@ -42,7 +42,7 @@
     "copy-dir": "^1.3.0",
     "csv-stringify": "^6.5.0",
     "express": "^4.19.2",
-    "gtfs": "^4.13.0",
+    "gtfs": "^4.13.1",
     "insane": "^2.6.2",
     "js-beautify": "^1.15.1",
     "lodash-es": "^4.17.21",
@@ -51,7 +51,7 @@
     "morgan": "^1.10.0",
     "pretty-error": "^4.0.0",
     "pug": "^3.0.3",
-    "puppeteer": "^22.13.0",
+    "puppeteer": "^22.13.1",
     "sanitize-filename": "^1.6.3",
     "sqlstring": "^2.3.3",
     "timer-machine": "^1.1.0",
@@ -61,9 +61,9 @@
     "yoctocolors": "^2.1.1"
   },
   "devDependencies": {
-    "husky": "^9.0.11",
+    "husky": "^9.1.1",
     "lint-staged": "^15.2.7",
-    "prettier": "^3.3.2"
+    "prettier": "^3.3.3"
   },
   "engines": {
     "node": ">= 20.11.0"

package/public/css/overview_styles.css

@@ -0,0 +1,242 @@
+/* Base styles */
+body {
+  color: #666;
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-feature-settings: normal;
+  line-height: inherit;
+  margin: 0;
+}
+
+*, ::before, ::after {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: #e5e7eb;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  line-height: inherit;
+  font-weight: inherit;
+  color: #333;
+  margin: 0;
+}
+
+a {
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+/* Overview styles */
+
+.route-color-swatch {
+  min-width: 34px;
+  height: 34px;
+  border-radius: 17px;
+  text-align: center;
+  line-height: 34px;
+  font-size: 14px;
+  letter-spacing: -0.5px;
+  padding: 0 5px;
+}
+
+.route-color-swatch-large {
+  min-width: 46px;
+  height: 46px;
+  border-radius: 23px;
+  text-align: center;
+  line-height: 46px;
+  font-size: 20px;
+  font-weight: bold;
+  letter-spacing: -1px;
+  padding: 0 6px;
+}
+
+.btn-blue {
+  color: rgb(255 255 255);
+  padding: 0.75rem 2rem;
+  background-color: rgb(37 99 235);
+  border-radius: 0.375rem;
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.btn-blue:hover {
+  background-color: rgb(29 78 216);
+  text-decoration: none;
+}
+
+.btn-sm {
+  padding: 0.25rem 1rem;
+  border-radius: 0.25rem;
+}
+
+.mr-1 {
+  margin-right: 0.25rem;
+}
+
+.mx-4 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.block {
+  display: block;
+}
+
+.flex {
+  display: flex;
+}
+
+.inline-flex {
+  display: inline-flex;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.h-screen {
+  height: 100vh;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.flex-none {
+  flex: none;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.items-stretch {
+  align-items: stretch;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.gap-2 {
+  gap: 0.5rem;
+}
+
+.rounded-full {
+  border-radius: 9999px;
+}
+
+.border-b {
+  border-bottom-width: 1px;
+}
+
+.border-slate-200 {
+  border-color: rgb(226 232 240);
+}
+
+.bg-slate-200 {
+  background-color: rgb(226 232 240);
+}
+
+.p-2 {
+  padding: 0.5rem;
+}
+
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.leading-none {
+  line-height: 1;
+}
+
+.text-slate-800 {
+  color: rgb(30 41 59);
+}
+
+.hover\:bg-slate-100:hover {
+  background-color: rgb(241 245 249);
+}
+
+.hover\:no-underline:hover {
+  text-decoration-line: none;
+}
+
+@media (min-width: 768px) {
+  .md\:flex {
+    display: flex;
+  }
+
+  .md\:max-w-96 {
+    max-width: 24rem;
+  }
+
+  .md\:overflow-y-scroll {
+    overflow-y: scroll;
+  }
+}
+
+/* Map Styles */
+
+.map .mapboxgl-popup-content .popup-title {
+  margin: 0 20px 5px 0;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.map .mapboxgl-popup-content .route-item {
+  display: flex;
+  align-items: center;
+  line-height: 1;
+}
+
+.map .mapboxgl-popup-content .mapboxgl-popup-close-button {
+  padding: 0 5px;
+}
+

package/public/css/timetable_styles.css

@@ -1,24 +1,251 @@
-/* Timetable Styles */
+/* Base styles */
 body {
   color: #666;
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-feature-settings: normal;
+  line-height: inherit;
+  margin: 0;
+}
+
+*, ::before, ::after {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: #e5e7eb;
 }
 
 h1,
 h2,
 h3,
 h4,
-h5 {
+h5,
+h6 {
+  line-height: inherit;
+  font-weight: inherit;
   color: #333;
+  margin: 0;
 }
 
 a:hover {
   text-decoration: underline;
 }
 
+/* Timetable Styles */
+
+.container {
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .container {
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container {
+    max-width: 1024px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1280px;
+  }
+}
+
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.mr-1 {
+  margin-right: 0.25rem;
+}
+
+.mx-4 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+.my-3 {
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.mb-10 {
+  margin-bottom: 2.5rem;
+}
+
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
+.block {
+  display: block;
+}
+
+.flex {
+  display: flex;
+}
+
+.grid {
+  display: grid;
+}
+
+.hidden {
+  display: none;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.flex-none {
+  flex: none;
+}
+
+.grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.gap-2 {
+  gap: 0.5rem;
+}
+
+.gap-4 {
+  gap: 1rem;
+}
+
+.border {
+  border-width: 1px;
+}
+
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.pt-4 {
+  padding-top: 1rem;
+}
+
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.text-gray-600 {
+  color: rgb(75 85 99);
+}
+
+.text-white {
+  color: rgb(255 255 255);
+}
+
+@media (min-width: 768px) {
+  .md\:mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .md\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
 .menu-type-radio .timetable {
   display: none;
 }
 
+.btn-blue {
+  color: rgb(255 255 255);
+  padding: 0.75rem 2rem;
+  background-color: rgb(37 99 235);
+  border-radius: 0.375rem;
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.btn-blue:hover {
+  background-color: rgb(29 78 216);
+  text-decoration: none;
+}
+
+.btn-gray {
+  color: rgb(75 85 99);
+  padding: 0.75rem 2rem;
+  background-color: rgb(209 213 219);
+  border-radius: 0.375rem;
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.btn-gray:hover {
+  background-color: rgb(201, 206, 213);
+  text-decoration: none;
+}
+
+.btn-sm {
+  padding: 0.25rem 1rem;
+  border-radius: 0.25rem;
+}
+
 .timetable .stop-header {
   text-align: center;
 }
@@ -73,10 +300,6 @@ a:hover {
   margin: 20px 0;
 }
 
-.timetable .table-container .table {
-  margin-bottom: 0;
-}
-
 .timetable .table-container::-webkit-scrollbar {
   -webkit-appearance: none;
   height: 8px;
@@ -92,8 +315,14 @@ a:hover {
   background-color: rgba(156, 156, 156, 0.8);
 }
 
+.timetable .table-container table {
+  text-indent: 0;
+  border-color: inherit;
+  border-collapse: collapse;
+}
+
 .timetable thead tr {
-  background: #aed9fb;
+  background: #bae6fd;
 }
 
 .timetable thead tr,
@@ -186,7 +415,7 @@ a:hover {
   font-size: 20px;
   font-weight: bold;
   letter-spacing: -1px;
-  padding: 0 8px;
+  padding: 0 6px;
 }
 
 @media screen and (max-width: 767px) {
@@ -262,3 +491,7 @@ a:hover {
   align-items: center;
   line-height: 1;
 }
+
+.map .mapboxgl-popup-content .mapboxgl-popup-close-button {
+  padding: 0 5px;
+}

package/public/js/system-map.js

@@ -7,6 +7,10 @@ function formatRouteColor(route) {
   return route.route_color || '#000000';
 }
 
+function formatRouteTextColor(route) {
+  return route.route_text_color || '#FFFFFF';
+}
+
 function formatRoute(route) {
   const html = route.route_url
     ? $('<a>').attr('href', route.route_url).addClass('hover:no-underline')
@@ -22,6 +26,7 @@ function formatRoute(route) {
         $('<div>')
           .addClass('route-color-swatch flex-shrink-0 text-white')
           .css('backgroundColor', formatRouteColor(route))
+          .css('color', formatRouteTextColor(route))
           .text(route.route_short_name || ''),
         $('<div>')
           .addClass('hover:underline')
@@ -65,9 +70,7 @@ function formatStopPopup(feature) {
   $(html).append(routes.map((route) => formatRoute(route)));
 
   $('<a>')
-    .addClass(
-      'bg-blue-500 hover:bg-blue-700 text-white font-bold py-1.5 px-3 rounded inline-block hover:no-underline mt-2',
-    )
+    .addClass('btn-blue btn-sm mt-2')
     .prop(
       'href',
       `https://www.google.com/maps/@?api=1&map_action=pano&viewpoint=${feature.geometry.coordinates[1]},${feature.geometry.coordinates[0]}&heading=0&pitch=0&fov=90`,

package/public/js/timetable-map.js

@@ -7,6 +7,10 @@ function formatRouteColor(route) {
   return route.route_color || '#000000';
 }
 
+function formatRouteTextColor(route) {
+  return route.route_text_color || '#FFFFFF';
+}
+
 function formatRoute(route) {
   const html = route.route_url
     ? $('<a>').attr('href', route.route_url).addClass('hover:no-underline')
@@ -22,6 +26,7 @@ function formatRoute(route) {
         $('<div>')
           .addClass('route-color-swatch flex-shrink-0 text-white')
           .css('backgroundColor', formatRouteColor(route))
+          .css('color', formatRouteTextColor(route))
           .text(route.route_short_name || ''),
         $('<div>')
           .addClass('hover:underline')
@@ -58,9 +63,7 @@ function formatStopPopup(feature, routes) {
   $(html).append(routeIds.map((routeId) => formatRoute(routes[routeId])));
 
   $('<a>')
-    .addClass(
-      'bg-blue-500 hover:bg-blue-700 text-white font-bold py-1.5 px-3 rounded inline-block hover:no-underline mt-2',
-    )
+    .addClass('btn-blue btn-sm mt-2')
     .prop(
       'href',
       `https://www.google.com/maps/@?api=1&map_action=pano&viewpoint=${feature.geometry.coordinates[1]},${feature.geometry.coordinates[0]}&heading=0&pitch=0&fov=90`,

package/public/js/timetable-menu.js

@@ -21,32 +21,26 @@ $(() => {
     $('#day_list_selector input[name="dayList"]').each((index, element) => {
       $(element)
         .parents('label')
-        .toggleClass('text-white bg-blue-600', $(element).is(':checked'));
+        .toggleClass('btn-blue', $(element).is(':checked'));
       $(element)
         .parents('label')
-        .toggleClass(
-          'text-gray-600 bg-gray-300',
-          $(element).is(':not(:checked)')
-        );
+        .toggleClass('btn-gray', $(element).is(':not(:checked)'));
     });
 
     $('#direction_name_selector input[name="directionName"]').each(
       (index, element) => {
         $(element)
           .parents('label')
-          .toggleClass('text-white bg-blue-600', $(element).is(':checked'));
+          .toggleClass('btn-blue', $(element).is(':checked'));
         $(element)
           .parents('label')
-          .toggleClass(
-            'text-gray-600 bg-gray-300',
-            $(element).is(':not(:checked)')
-          );
-      }
+          .toggleClass('btn-gray', $(element).is(':not(:checked)'));
+      },
     );
 
     const dayList = $('#day_list_selector input[name="dayList"]:checked').val();
     const directionName = $(
-      '#direction_name_selector input[name="directionName"]:checked'
+      '#direction_name_selector input[name="directionName"]:checked',
     ).val();
 
     $('.timetable').hide();
@@ -55,7 +49,7 @@ $(() => {
         dayList +
         '"][data-direction-name="' +
         directionName +
-        '"]'
+        '"]',
     ).attr('id');
     showTimetable(id);
   }

package/views/default/formatting_functions.pug

@@ -11,14 +11,8 @@
     return summary;
   }
 
-  function formatRouteName(route) {
-    const hasLongName = route.route_long_name !== '' && route.route_long_name !== null;
-
-    if (hasLongName) {
-      return route.route_long_name;
-    }
-
-    return route.route_short_name;
+  function isNullOrEmpty(value) {
+    return value === null || value === '';
   }
 
   function formatFrequencyWarning(frequencies) {

package/views/default/layout.pug

@@ -3,13 +3,8 @@ html
   head
     title= title
     meta(charset="utf-8")
-    link(rel="stylesheet" href=`${config.assetPath}css/timetable_styles.css`)
-    if config.outputFormat === 'pdf'
-      link(rel="stylesheet" href=`${config.assetPath}css/timetable_pdf_styles.css`)
     meta(name="viewport" content="initial-scale=1.0, width=device-width")
 
-    script(src="https://cdn.tailwindcss.com")
-
     block extraHeader
 
   body

package/views/default/overview.pug

@@ -1,28 +1,27 @@
 include formatting_functions.pug
 
-.container.mx-4.h-screen.items-stretch(class="md:mx-auto md:flex")
+.h-screen.items-stretch(class="md:flex")
   if !timetablePages || !timetablePages.length
-    .flex.justify-center
-      .bg-blue-700.text-white.font-bold.rounded-lg.border.shadow-lg.text-lg.p-8(class="w-1/2") No timetables found
+    h1.text-2xl.mx-4.py-3 No timetables found
   else
-    .overview-list.flex-none(class="md:overflow-y-scroll")
+    .overview-list.flex-none(class="md:overflow-y-scroll md:max-w-96")
       each timetablePageGroup in getAgencyTimetableGroups(timetablePages, agencies)
-        h1.text-2xl.pt-4.pb-2= `${formatAgencyName(timetablePageGroup.agency)} Routes`
+        h1.text-2xl.mx-4.py-3= `${formatAgencyName(timetablePageGroup.agency)} Routes`
+  
         each timetablePage in timetablePageGroup.timetablePages
           if config.allowEmptyTimetables || timetablePage.consolidatedTimetables.length > 0
-            a.block.p-2.border-b.border-slate-200(class="hover:bg-slate-100 hover:no-underline" href=`${timetablePage.relativePath}` data-route-ids=`${timetablePage.route_ids ? timetablePage.route_ids.join(',') : ''}`)
-              .text-lg.text-gray-800.leading-none= timetablePage.timetable_page_label
+            a.timetable-overview-label.flex.items-center.gap-2.block.p-2.border-b.border-slate-200(class="hover:bg-slate-100 hover:no-underline" href=`${timetablePage.relativePath}` data-route-ids=`${timetablePage.route_ids ? timetablePage.route_ids.join(',') : ''}`)
               each route in _.uniqBy(_.flatMap(timetablePage.consolidatedTimetables, timetable => timetable.routes), 'route_id')
-                .flex.my-1.items-center.gap-1
-                  .route-color-swatch.flex-none(style=`background-color: ${formatRouteColor(route)}; color: ${formatRouteTextColor(route)};`)= route.route_short_name || ''
-                  .text-gray-600.leading-none= formatRouteName(route)
-              .inline-flex.items-center.justify-center.px-2.py-1.text-xs.font-bold.leading-none.text-slate-800.bg-slate-200.rounded-full= timetablePage.dayList
+                .route-color-swatch-large.flex-none(style=`background-color: ${formatRouteColor(route)}; color: ${formatRouteTextColor(route)};`)= route.route_short_name || ''
+              div
+                .text-xl.leading-none.text-slate-800= timetablePage.timetable_page_label
+                .inline-flex.items-center.justify-center.px-2.py-1.text-xs.font-bold.leading-none.text-slate-800.bg-slate-200.rounded-full= timetablePage.dayList
     if config.showMap
-      .map.ml-4.h-full.w-full(id="system_map")
+      .map.h-full.w-full(id="system_map")
 
       //- Use #{variable} format to inject values from pug to client side js
       script.
         (function() {
-          var geojson = !{JSON.stringify(geojson) || '\'\''};
+          const geojson = !{JSON.stringify(geojson) || '\'\''};
           createSystemMap('system_map', geojson);
         })();

package/views/default/overview_full.pug

@@ -6,9 +6,11 @@ block extraHeader
   if config.showMap
     script(src="https://unpkg.com/jquery@3.7.1/dist/jquery.min.js" crossorigin="anonymous")
     script(src="https://unpkg.com/lodash@4.17.21/lodash.min.js" crossorigin="anonymous")
-    script(src="https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.js")
+    script(src="https://api.mapbox.com/mapbox-gl-js/v3.5.1/mapbox-gl.js")
     script.
       mapboxgl.accessToken = '#{config.mapboxAccessToken}';
     script(src=`${config.assetPath}js/system-map.js`)
 
-    link(href="https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.css" rel="stylesheet")
+    link(href="https://api.mapbox.com/mapbox-gl-js/v3.5.1/mapbox-gl.css" rel="stylesheet")
+
+  link(rel="stylesheet" href=`${config.assetPath}css/overview_styles.css`)

package/views/default/timetable_menu.pug

@@ -26,24 +26,24 @@ if timetablePage.consolidatedTimetables.length > 1
       .grid.grid-cols-1.gap-4(class="md:grid-cols-3")
         each group, dayList in groupedTimetables
           div
-            h3.font-bold= dayList
+            h3.font-bold.mb-1= dayList
             each timetable in group
-              a.mb-2.w-full.flex.items-center.justify-center.px-8.py-3.border.border-transparent.text-base.rounded-md.text-white.bg-blue-600(class="hover:bg-blue-700 md:py-4 md:text-lg md:px-10" href=`#timetable_id_${timetable.timetable_id}`)= timetable.timetable_label
+              a.mb-2.w-full.btn-blue(href=`#timetable_id_${timetable.timetable_id}`)= timetable.timetable_label
 
     if config.menuType === 'radio'
       .grid.grid-cols-1.gap-4(class="md:grid-cols-3")
         -var directionNames = _.uniq(timetablePage.consolidatedTimetables.map(timetable => timetable.direction_name));
         div(hidden=directionNames.length <= 1)
           #direction_name_selector
-            h3.font-bold Service Direction
+            h3.font-bold.mb-1 Service Direction
             each directionName, idx in directionNames
-              label.cursor-pointer.mb-2.w-full.flex.items-center.justify-center.px-8.py-3.border.border-transparent.text-base.rounded-md(class=idx === 0 ? 'text-white bg-blue-600': 'text-gray-600 bg-gray-300')
+              label.mb-2.w-full(class=idx === 0 ? 'btn-blue' : 'btn-gray')
                 input.hidden(type="radio" name="directionName" autocomplete="off" value=directionName checked=(idx === 0))
                 span= directionName
         div(hidden=timetablePage.dayLists.length <= 1)
           #day_list_selector
-            h3.font-bold Day of Week
+            h3.font-bold.mb-1 Day of Week
             each dayList, idx in timetablePage.dayLists
-              label.cursor-pointer.mb-2.w-full.flex.items-center.justify-center.px-8.py-3.border.border-transparent.text-base.rounded-md(class=idx === 0 ? 'text-white bg-blue-600': 'text-gray-600 bg-gray-300')
+              label.mb-2.w-full(class=idx === 0 ? 'btn-blue' : 'btn-gray')
                 input.hidden(type="radio" name="dayList" autocomplete="off" value=dayList checked=(idx === 0))
                 span= dayList

package/views/default/timetablepage.pug

@@ -1,6 +1,6 @@
 include formatting_functions.pug
 
-<!-- Timetable generated on #{Date()} using GTFS-to-HTML version #{config.gtfsToHtmlVersion} -->
+<!-- Timetable generated on #{new Date().toISOString()} using GTFS-to-HTML version #{config.gtfsToHtmlVersion} -->
 .timetable-page(class=`menu-type-${config.menuType}`)
   .container.mx-4(class="md:mx-auto")
     if config.showRouteTitle
@@ -9,7 +9,7 @@ include formatting_functions.pug
           .route-color-swatch-large.flex-none(style=`background-color: ${formatRouteColor(route)}; color: ${formatRouteTextColor(route)};`)= route.route_short_name || ''
         div= timetablePage.timetable_page_label
       if config.effectiveDate
-        .effective-date.text-gray-600.mb-2= `Effective ${config.effectiveDate}`
+        .effective-date.text-gray-600.mt-2= `Effective ${config.effectiveDate}`
 
     include timetable_menu.pug
 

package/views/default/timetablepage_full.pug

@@ -9,10 +9,14 @@ block extraHeader
     script(src=`${config.assetPath}js/timetable-menu.js`)
 
   if config.showMap
-    script(src="https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.js")
+    script(src="https://api.mapbox.com/mapbox-gl-js/v3.5.1/mapbox-gl.js")
     script.
       mapboxgl.accessToken = '#{config.mapboxAccessToken}';
     script(src=`${config.assetPath}js/timetable-map.js`)
 
-    link(href="https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.css" rel="stylesheet")
+    link(href="https://api.mapbox.com/mapbox-gl-js/v3.5.1/mapbox-gl.css" rel="stylesheet")
+
+  link(rel="stylesheet" href=`${config.assetPath}css/timetable_styles.css`)
+  if config.outputFormat === 'pdf'
+    link(rel="stylesheet" href=`${config.assetPath}css/timetable_pdf_styles.css`)