1<!DOCTYPE html> 2<html 3 lang="en" 4 class='view-transition-none bg-[black] h-full transition-colors' 5 x-data="{ 6 timezone: 'America/Toronto', 7 query: '', 8 lightbox_src: null, 9 theme_color: '#2A3B90', 10 cover_placeholder: '', 11 search_type: 'catalogue', 12 page_url: 'https://nflibrary.ca', 13 container_width: 0, 14 is_loading: false 15 }" 16> 17 18<head> 19 <meta charset="utf-8"> 20<meta 21 name="viewport" 22 content="width=device-width,initial-scale=1.0,viewport-fit=cover" 23> 24<title> 25 Niagara Falls Public Library</title> 26<meta 27 name="description" 28 content="The Niagara Falls Public Library provides free access to a collection of books, movies, games, programs, and services for our community members. Primarily funded by the City of Niagara Falls." 29> 30<meta 31 name="theme-color" 32 content="#2A3B90" 33 :content="theme_color" 34> 35 36<meta 37 name="htmx-config" 38 content='{"selfRequestsOnly":false}' 39> 40
40<script 41 defer 42 data-domain="nflibrary.ca" 43 src="https://plausible.nflibrary.ca/js/script.outbound-links.file-downloads.js" 44></script>
vendor: 1 bytes, line 44
44
45<script 46 defer 47 src="https://umami.nflibrary.ca/script.js" 48 data-website-id="ee098df0-36d7-40fd-b5a3-ffd3fa423556" 49 data-performance="true" 50></script>
50 51 52<!-- Google tag (gtag.js) -->
vendor: 66 bytes, lines 52-55
52 53<script 54 async 55 src="https://www.googletagmanager.com/gtag/js?id=
55G-6XQ5G09RVD
vendor: 13 bytes, lines 55-56
55" 56></script>
57<script> 58
vendor: 134 bytes, lines 58-62
58window.dataLayer = window.dataLayer || []; 59 function gtag() { dataLayer.push(arguments); } 60 gtag('js', new Date()); 61 62 gtag('config', '
62G-6XQ5G09RVD
vendor: 4 bytes, line 62
62');
63</script>
63 64 <link 65 rel="preconnect" 66 href="https://api.fonts.coollabs.io" 67> 68<link 69 rel="preconnect" 70 href="https://fonts.gstatic.com" 71 crossorigin 72> 73<link 74 rel="preload" 75 href="https://api.fonts.coollabs.io/css2?family=Inconsolata:[email protected]&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" 76 as="style" 77 onload=" 78 this.onload=null; 79 this.rel='stylesheet' 80 " 81/> 82<noscript> 83 <link 84 href="https://api.fonts.coollabs.io/css2?family=Inconsolata:[email protected]&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" 85 rel="stylesheet" 86 type="text/css" 87 > 88</noscript> 89 <link 90 rel="apple-touch-icon" 91 sizes="180x180" 92 href="https://nflibrary.ca/apple-touch-icon.png" 93> 94<link 95 rel="icon" 96 type="image/png" 97 sizes="32x32" 98 href="https://nflibrary.ca/favicon-32x32.png" 99> 100<link 101 rel="icon" 102 type="image/png" 103 sizes="16x16" 104 href="https://nflibrary.ca/favicon-16x16.png" 105> 106<link 107 rel="manifest" 108 href="https://nflibrary.ca/site.webmanifest" 109> 110<link 111 rel="mask-icon" 112 href="https://nflibrary.ca/safari-pinned-tab.svg" 113 color="#5bbad5" 114> 115<meta 116 name="msapplication-TileColor" 117 content="#2b5797" 118> 119<link 120 rel="shortcut icon" 121 type="image/x-icon" 122 href="https://nflibrary.ca/favicon.ico" 123> 124 <link href="https://nflibrary.ca/assets/styles/output.css?v1779725553" rel="stylesheet">
124<script defer src="https://nflibrary.ca/assets/scripts/app.min.js?v=1779725553"></script>
124</head> 125 126<body 127 :class="{ 128 'overflow-hidden lg:overflow-auto' : $store.nav.is_open || $store.notices.is_open || $store.account.menu_open, 129 'border-t-blue-600' : theme_color !== '#BE202E', 130 'border-t-red' : theme_color === '#BE202E', 131 'bg-gray-100': $store.notices.is_open, 132 'bg-white sm:bg-gray-100': $store.account.menu_open, 133 'bg-gray-50': !$store.notices.is_open && !$store.account.menu_open, 134 }" 135 class=' 136 text-gray-950 min-h-full font-body bg-gray-50 flex flex-col justify-between contain-paint 137 ' 138 hx-ext="preload" 139 ><a href="https://nflibrary.ca/cdn-cgi/content?id=Cy8GAlvQgKRdCjNC2NYUgkTUujHyt6PsRorCwIrRCdE-1790288003.38693-1.2.1.1-SaWzHVk0.Pavdnj2_4QdUizpYLtbHEoymEniyeRU73pdt8C1LaabDqG5Sps20j_r" aria-hidden="true" rel="nofollow noopener" style="display: none !important; visibility: hidden !important"></a> 140 141 <!-- fouc fix --> 142
142<script> 143 let FOUC_FIX; 144 </script>
144 145 <div 146 id="site-wrapper" 147 class='transition-opacity relative w-full grow-[999] z-[1]' 148 > 149 <header 150 id="site-header" 151 x-data="{ 152 get is_open() { 153 return ( $store.notices.is_open || $store.account.menu_open); 154 } 155 }" 156 class="lg:h-auto lg:overflow-visible max-h-dvh border-t-8 border-blue-600 bg-gray-50" 157 :class="{ 158 'top-0 bottom-0 left-0 right-0 z-50': $store.notices.is_open || $store.nav.is_open || $store.account.menu_open, 159 'overflow-scroll': $store.nav.is_open, 160 }" 161 @account_menu_open="$store.account.menu_open = $event.detail" 162 @click.outside="$store.nav.is_open = false" 163> 164 <div 165 class=" 166 container relative z-15 flex flex-wrap items-center justify-between h-auto gap-4 gap-x-2 167 xs:gap-4 lg:gap-6 xl:gap-8 py-4 xs:py-5 lg:py-6 xl:py-8 168 " 169 x-resize=" 170 container_width = $width; 171 " 172 > 173 174 <a 175 href="https://nflibrary.ca" 176 class="order-0 shrink-0 flex items-center justify-between xs:w-40 sm:w-64 md:w-72 lg:w-44 xl:w-64 shrink max-w-[37vw] text-white " 177> 178 <img 179 class="max-h-16 xl:max-h-[4.5rem] w-auto" 180 src="https://nflibrary.ca/assets/logos/nfpl-logo.svg" 181 alt="Niagara Falls Public Library" 182 /> 183</a> 184 185 186<div 187 class="order-2 transition-opacity flex w-8 justify-center lg:justify-start xl:grow-0 xl:-ml-8 lg:hidden" 188 :class="{ 189 'opacity-0': is_open, 190 }" 191> 192 <button 193 @click.prevent='$store.nav.is_open = !$store.nav.is_open' 194 class='flex w-9 p-1 m-1 md:m-0 ml-1 shrink-0 relative rounded-md text-gray-600' 195 :class="!$store.nav.is_open || 'bg-gray-50'" 196 :title="!$store.nav.is_open ? 'Open Navigation Menu' : 'Close Navigation Menu'" 197 x-intersect:enter="nav_toggle_visible = true" 198 x-intersect:leave="nav_toggle_visible = false" 199 > 200 <span 201 x-show="!$store.nav.is_open" 202 class='flex w-full' 203 > 204 <svg 205 xmlns="http://www.w3.org/2000/svg" 206 width="24" 207 height="24" 208 viewBox="0 0 24 24" 209 fill="none" 210 stroke="currentColor" 211 stroke-width="2" 212 stroke-linecap="round" 213 stroke-linejoin="round" 214> 215 <line x1="4" x2="20" y1="12" y2="12" /> 216 <line x1="4" x2="20" y1="6" y2="6" /> 217 <line x1="4" x2="20" y1="18" y2="18" /> 218</svg> 219 </span> 220 <span 221 x-cloak 222 x-show="$store.nav.is_open" 223 class='flex w-full' 224 > 225 <svg 226 xmlns="http://www.w3.org/2000/svg" 227 width="24" 228 height="24" 229 viewBox="0 0 24 24" 230 fill="none" 231 stroke="currentColor" 232 stroke-width="2" 233 stroke-linecap="round" 234 stroke-linejoin="round" 235> 236 <path d="M18 6 6 18" /> 237 <path d="m6 6 12 12" /> 238</svg> 239 </span> 240 </button> 241</div> 242 <div 243 class="relative self-stretch sm:self-center flex items-center order-3 lg:order-4 h-14 lg:h-16 w-28 sm:w-64 md:w-72 lg:w-44 xl:w-72 z-10"> 244 <div 245 class="absolute min-h-full h-full right-0 top-0 transition-all duration-300 w-full max-w-screen" 246 :class="{ 247 'w-dvw -mr-4 -mt-4 pt-4 sm:mt-0 sm:pt-0 sm:mr-0 sm:w-96 ml-8': is_open, 248 'w-full': !is_open, 249 'bg-gray-100': $store.notices.is_open, 250 'bg-white': $store.account.menu_open, 251 }" 252 > 253 <div 254 class=" 255 w-full min-h-full flex flex-col bg-gray-50/25 p-2 border border-gray-200 rounded-md transition-all 256 " 257 :class="{ 258 'sm:shadow-lg p-2 px-4 pb-8 sm:p-2 sm:border sm:rounded-md': is_open, 259 'bg-red-500 border-red-600': $store.notices.is_urgent && !$store.notices.is_read, 260 'bg-gray-100 sm:bg-white after:opacity-100': $store.notices.is_open, 261 'after:opacity-0': !$store.notices.is_open, 262 'bg-white': $store.account.menu_open, 263 'bg-gray-50/25 p-2 border rounded-md': !is_open, 264 }" 265 @click.outside=' 266 $store.notices.is_open = false; 267 $store.account.menu_open = false; 268 ' 269 > 270 <div class=" flex justify-between items-center gap-1 xs:gap-2 h-10 lg:h-12 -my-px relative z-10"> 271 272<div 273 id='notices' 274 class=" transition-all pointer-events-none z-10 lg:opacity-100 lg:overflow-visible" 275 x-init=" 276 $watch('$store.notices.is_open', value => { 277 if (!value) return; 278 $store.nav.is_open = false; 279 $store.notices.last_read = Date.now(); 280 }); 281 " 282 x-intersect:leave="$store.notices.is_open = false" 283> 284 285 <button 286 id='notices_button' 287 title='Open Notices Menu' 288 @click=" 289 $store.notices.is_open = !$store.notices.is_open; 290 " 291 :aria-expanded="$store.notices.is_open ? 'true' : 'false'" 292 class="group flex gap-2 px-2 items-center cursor-pointer pointer-events-auto leading-none text-gray-600" 293 :class="{ 294 'opacity-100 z-50 pointer-events-auto' : !$store.notices.is_open, 295 ' text-white pointer-events-auto': $store.notices.is_priority, 296 'opacity-0 h-0 overflow-hidden lg:overflow-hidden': $store.account.menu_open 297 }" 298 tabindex="0" 299 > 300 <span 301 class="group-hover:underline flex gap-1 items-center" 302 :class="{ 303 'decoration-gray-600': $store.notices.max_score === 0, 304 'decoration-sky-600': $store.notices.max_score === 1, 305 'decoration-amber-500': $store.notices.max_score === 2, 306 'decoration-red-500': $store.notices.max_score === 3, 307 }" 308 > 309 <div 310 x-cloak 311 x-show="$store.notices.is_urgent && !$store.notices.is_read" 312 aria-hidden="true" 313 class="text-white shrink-0 w-6 flex items-center" 314 > 315 <svg 316 xmlns="http://www.w3.org/2000/svg" 317 width="24" 318 height="24" 319 viewBox="0 0 24 24" 320 fill="none" 321 stroke="currentColor" 322 stroke-width="2" 323 stroke-linecap="round" 324 stroke-linejoin="round" 325> 326 <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" /> 327 <path d="M12 8v4" /> 328 <path d="M12 16h.01" /> 329</svg> 330 </div> 331 <div 332 aria-hidden="true" 333 x-show="!$store.notices.is_urgent || $store.notices.is_read" 334 class=" 335 w-6 shrink-0 flex items-center relative 336 after:block after:transition-all after:w-3 after:h-3 after:rounded-full after:absolute after:-top-1 after:-right-1 after:border-2 after:border-gray-50 after:mr-1 337 " 338 :class="{ 339 'after:opacity-0': !$store.notices.count || $store.notices.is_open, 340 'after:bg-gray-600': $store.notices.max_score === 0 && !$store.notices.is_priority, 341 'after:bg-sky-600': $store.notices.max_score === 1 && !$store.notices.is_priority, 342 'after:bg-amber-500': $store.notices.max_score === 2 && !$store.notices.is_priority, 343 'after:bg-red-500': $store.notices.max_score === 3 && !$store.notices.is_priority, 344 }" 345 > 346 <svg 347 xmlns="http://www.w3.org/2000/svg" 348 width="24" 349 height="24" 350 viewBox="0 0 24 24" 351 fill="none" 352 stroke="currentColor" 353 stroke-width="2" 354 stroke-linecap="round" 355 stroke-linejoin="round" 356> 357 <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" /> 358 <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" /> 359</svg> 360 </div> 361 <span 362 class="align-middle leading-4 h-4 hidden sm:block lg:hidden xl:block" 363 :class="{ 364 'block': $store.notices.is_open, 365 'hidden sm:block lg:hidden xl:block': !$store.notices.is_open, 366 }" 367 >Notices</span> 368 </span> 369 370 <span 371 class=" p-1.5 px-2.5 rounded-md text-white font-bold leading-4 transition-all hidden md:block lg:hidden xl:block bg-gray-600" 372 :class="{ 373 'opacity-0 bg-transparent': $store.notices.is_open,
374 'bg-red-900': $store.notices.is_priority, 375 'bg-gray-600': $store.notices.max_score === 0 && !$store.notices.is_priority, 376 'bg-sky-600': $store.notices.max_score === 1 && !$store.notices.is_priority, 377 'bg-amber-500': $store.notices.max_score === 2 && !$store.notices.is_priority, 378 'bg-red-500': $store.notices.max_score === 3 && !$store.notices.is_priority, 379 }" 380 x-text="$store.notices.count" 381 >0</span> 382 383 <!-- <span 384 x-cloak 385 x-show="$store.notices.is_urgent && !$store.notices.is_read" 386 class=" p-2 px-3 rounded text-white font-bold bg-red-900 group-hover:bg-gray-950 hidden lg:block leading-4" 387 :class="(!$store.notices.is_urgent || $store.notices.is_read) ? ' lg:block' : 'block'" 388 >View</span> --> 389 390 </button> 391 392</div> 393 <div :class="{ 394 'hidden': $store.notices.is_open 395 }"> 396 <div 397 id="account-menu-button" 398 class="text-gray-600" 399 x-init=" 400 $watch('$store.account.menu_open', value => { 401 if (!value) return; 402 $store.nav.is_open = false; 403 }); 404 " 405> 406 <a 407 id="account-menu-link" 408 class="transition-all p-2 hover:text-blue bg-white hover:underline flex items-center justify-center border border-gray-200 rounded shadow-sm md:w-28" 409 href="/eg/opac/login" 410 title="Account Login" 411 :class="{ 412 'hidden opacity-0': $store.account.menu_open 413 }" 414 > 415 <span 416 class="shrink-0" 417 aria-hidden="true" 418 > 419 <svg 420 xmlns="http://www.w3.org/2000/svg" 421 width="24" 422 height="24" 423 viewBox="0 0 24 24" 424 fill="none" 425 stroke="currentColor" 426 stroke-width="2" 427 stroke-linecap="round" 428 stroke-linejoin="round" 429> 430 <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" /> 431 <circle cx="12" cy="7" r="4" /> 432</svg> 433 </span> 434 <span class="hidden sm:block ml-2">Account</span> 435 </a> 436 437 438 439</div> 440 </div> 441 <div 442 class="hidden text-gray" 443 :class="{ 444 'hidden': !$store.notices.is_open 445 }" 446 > 447 <a 448 class="p-2 hover:text-red-700 rounded hover:underline flex items-center justify-center" 449 @click.prevent="$store.notices.is_open = false" 450 href="#" 451 > 452 <span 453 class="shrink-0" 454 aria-hidden="true" 455 > 456 <svg 457 xmlns="http://www.w3.org/2000/svg" 458 width="24" 459 height="24" 460 viewBox="0 0 24 24" 461 fill="none" 462 stroke="currentColor" 463 stroke-width="2" 464 stroke-linecap="round" 465 stroke-linejoin="round" 466> 467 <path d="M18 6 6 18" /> 468 <path d="m6 6 12 12" /> 469</svg> 470 </span> 471 </a> 472 </div> 473 </div> 474 475 <div 476 class="hidden" 477 :class="{ 478 'hidden': !$store.notices.is_open 479 }" 480 > 481 <div 482 id="6ab5a0839071d" 483 hx-trigger='load'hx-select='#notices-list'hx-swap='outerHTML'hx-post='/_/notices-list/id:6ab5a0839071d'></div> 484 </div> 485 <div 486 x-cloak 487 class="hidden -mt-10 relative z-0 p-3 text-gray-600" 488 :class="{ 489 'hidden': !$store.account.menu_open 490 }" 491> 492 <header class="border-b border-gray-200 text-xl/tight pb-4"> 493 <div class="">Hello,</div> 494 <div class="capitalize font-semibold"> </div> 495 </header> 496 497 <div class="flex flex-col gap-3 my-4"> 498 <a 499 href="/eg/opac/myopac/main" 500 class="flex items-center gap-2 group hover:text-cyan-500 hover:underline" 501> 502 <span aria-hidden='true' x-ignore='' class='icon w-6'><svg 503 xmlns="http://www.w3.org/2000/svg" 504 width="24" 505 height="24" 506 viewBox="0 0 24 24" 507 fill="none" 508 stroke="currentColor" 509 stroke-width="2" 510 stroke-linecap="round" 511 stroke-linejoin="round" 512> 513 <circle cx="12" cy="12" r="10" /> 514 <path d="M12 16v-4" /> 515 <path d="M12 8h.01" /> 516</svg> 517</span> <span>Account Summary</span> 518</a> 519 <a 520 href="/eg/opac/myopac/messages" 521 class="flex items-center gap-2 group hover:text-cyan-500 hover:underline" 522> 523 <span aria-hidden='true' x-ignore='' class='icon w-6'><svg 524 xmlns="http://www.w3.org/2000/svg" 525 width="24" 526 height="24" 527 viewBox="0 0 24 24" 528 fill="none" 529 stroke="currentColor" 530 stroke-width="2" 531 stroke-linecap="round" 532 stroke-linejoin="round" 533> 534 <rect width="20" height="16" x="2" y="4" rx="2" /> 535 <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" /> 536</svg> 537</span> <span>Messages</span> 538</a> 539 <a 540 href="/eg/opac/myopac/holds" 541 class="flex items-center gap-2 group hover:text-cyan-500 hover:underline" 542> 543 <span aria-hidden='true' x-ignore='' class='icon w-6'><svg 544 xmlns="http://www.w3.org/2000/svg" 545 width="24" 546 height="24" 547 viewBox="0 0 24 24" 548 fill="none" 549 stroke="currentColor" 550 stroke-width="2" 551 stroke-linecap="round" 552 stroke-linejoin="round" 553> 554 <circle cx="12" cy="12" r="10" /> 555 <polyline points="12 6 12 12 16 14" /> 556</svg> 557</span> <span>Items on Hold</span> 558</a> 559 <a 560 href="/eg/opac/myopac/lists" 561 class="flex items-center gap-2 group hover:text-cyan-500 hover:underline" 562> 563 <span aria-hidden='true' x-ignore='' class='icon w-6'><svg 564 xmlns="http://www.w3.org/2000/svg" 565 width="24" 566 height="24" 567 viewBox="0 0 24 24" 568 fill="none" 569 stroke="currentColor" 570 stroke-width="2" 571 stroke-linecap="round" 572 stroke-linejoin="round" 573> 574 <line x1="8" x2="21" y1="6" y2="6" /> 575 <line x1="8" x2="21" y1="12" y2="12" /> 576 <line x1="8" x2="21" y1="18" y2="18" /> 577 <line x1="3" x2="3.01" y1="6" y2="6" /> 578 <line x1="3" x2="3.01" y1="12" y2="12" /> 579 <line x1="3" x2="3.01" y1="18" y2="18" /> 580</svg> 581</span> <span>My Lists</span> 582</a> 583 </div> 584 585 <footer class="border-t border-gray-200 border-dashed pt-4"> 586 <a 587 href="/evergreen/logout" 588 class="flex items-center gap-2 group hover:text-cyan-500 hover:underline" 589> 590 <span aria-hidden='true' x-ignore='' class='icon w-6'><svg 591 xmlns="http://www.w3.org/2000/svg" 592 width="24" 593 height="24" 594 viewBox="0 0 24 24" 595 fill="none" 596 stroke="currentColor" 597 stroke-width="2" 598 stroke-linecap="round" 599 stroke-linejoin="round" 600> 601 <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" /> 602 <polyline points="16 17 21 12 16 7" /> 603 <line x1="21" x2="9" y1="12" y2="12" /> 604</svg> 605</span> <span>Logout</span> 606</a> 607 </footer> 608</div> 609 </div> 610 </div> 611</div> 612 <div 613 class=" order-4 lg:order-3 relative z-0 transition-opacity grow content-center" 614 :class="{ 615 'opacity-0 sm:opacity-50': is_open, 616 }" 617> 618 <section class='w-full group '> 619 <form 620 id="site-search" 621 title='Search' 622 x-data="{ 623 is_focused: false, 624 search_query: '' 625 }" 626 :action="search_type == 'website' ? '/search#content' : 'https://nflibrary.ca/catalogue/search'" 627 class=' 628 w-full border border-solid border-gray-200 shadow-md shadow-gray-900/5 629 flex flex-wrap items-stretch text-gray p-1.5 gap-x-2 630 md:flex-nowrap md:p-2 631 hover:border-gray-300 hover:shadow-gray-100 bg-white rounded-md overflow-hidden'
632 :class="{ 633 'bg-white': !is_open 634 }" 635 > 636 637 <div class="flex items-stretch mb-1 md:mb-0"> 638 639 <label 640 for="site-search-type" 641 class="sr-only" 642 >Type of search 643 </label> 644 <select 645 class=" 646 input-defaults 647 py-1.5 md:py-2.5 lg:py-3 pr-8 shrink-0 font-semibold cursor-pointer hover:underline border border-blue-200 bg-blue-50 text-blue-900 " 648 name="from" 649 id="site-search-type" x-model="search_type" x-ref="select"> 650 <option 651 value="catalogue" 652 >Catalogue</option> 653 <option 654 value="website" 655 >Website</option> 656 </select> 657 </div> 658 <div class='flex w-full gap-2'> 659 <input 660 :placeholder="search_type == "catalogue" ? "Title, author, subject...": "Keyword, topic, question..."" @blur="is_focused = false" @focus="is_focused = true" autocomplete="off" id="site-search-query" name="query" x-model="search_query" x-ref="input" class="input-defaults grow w-full bg-transparent md:py-2.5 lg:py-3 border-dashed border-gray-100 group-hover:border-gray-300 group-hover:focus:border-blue-400" 661 type="search" 662> 663 <div 664 class="flex w-12 h-12 items-center shrink-0 whitespace-nowrap rounded transition-all duration-500 border border-gray-100" 665 :class="{ 666 'bg-blue-200 text-blue-800 border-blue-300 hover:bg-blue-300 hover:border-blue-400 hover:text-blue-900' : search_query.length, 667 'border-gray-100' : !search_query.length, 668 }" 669 > 670 <template x-if="search_query.length"> 671 <button 672 id='site-search-button' 673 class="h-full w-full flex p-2.5" 674 for="site-search-query" 675 type="submit" 676 ><svg 677 xmlns="http://www.w3.org/2000/svg" 678 width="24" 679 height="24" 680 viewBox="0 0 24 24" 681 fill="none" 682 stroke="currentColor" 683 stroke-width="2" 684 stroke-linecap="round" 685 stroke-linejoin="round" 686> 687 <circle cx="11" cy="11" r="8" /> 688 <path d="m21 21-4.3-4.3" /> 689</svg> 690</button> 691 </template> 692 <template x-if="!search_query.length"> 693 <label 694 id='site-search-label' 695 class="h-full w-full flex p-2.5" 696 for="site-search-query" 697 ><svg 698 xmlns="http://www.w3.org/2000/svg" 699 width="24" 700 height="24" 701 viewBox="0 0 24 24" 702 fill="none" 703 stroke="currentColor" 704 stroke-width="2" 705 stroke-linecap="round" 706 stroke-linejoin="round" 707> 708 <circle cx="11" cy="11" r="8" /> 709 <path d="m21 21-4.3-4.3" /> 710</svg> 711</label> 712 </template>
713 </div> 714 </div> 715 716 </form> 717 </section> 718</div> 719 720 </div> 721 722 723 <nav 724 id="site-nav" 725 x-data 726 class="lg:pb-8 transition-all duration-300 max-h-0 lg:max-h-96 overflow-hidden order-5 " 727 :class="{ 728 'max-h-0 ease-out overflow-hidden': !$store.nav.is_open && container_width <= 768, 729 'max-h-256 ease-in h-full': $store.nav.is_open, 730 'opacity-20 pointer-events-none': $store.notices.is_open || $store.account.menu_open, 731 }" 732> 733 <div class="container lg:pb-0"> 734 <ul 735 @click.outside="$store.nav.current_item = null" 736 class='lg:flex gap-8 xl:gap-10 2xl:gap-12' 737 > 738 <li 739 x-data="{ 740 index: 0 }" 741 class='relative py-2 lg:py-0' 742 > 743 <a 744 @click.prevent="$store.nav.current_item = $store.nav.current_item === index ? null : index" 745 class='group flex items-center py-1 text-gray-600 hover:text-sky-600 hover:underline leading-tight text-xl lg:text-base xl:text-lg lg:font-normal lg:m-0 truncate' 746 href="https://nflibrary.ca/about" 747 > 748 <span 749 :class='$store.nav.current_item === index ? "text-sky-600 group-hover:text-sky-600" : "group-hover:text-gray-950"' 750 class=' font-semibold leading-tight' 751 > 752 About </span> 753 <span class='flex w-4 ml-2 '> 754 <span 755 class='flex text-gray-300 group-hover:text-gray-400' 756 x-show='$store.nav.current_item != index' 757 > 758 <svg 759 xmlns="http://www.w3.org/2000/svg" 760 width="24" 761 height="24" 762 viewBox="0 0 24 24" 763 fill="none" 764 stroke="currentColor" 765 stroke-width="2" 766 stroke-linecap="round" 767 stroke-linejoin="round" 768> 769 <path d="m6 9 6 6 6-6" /> 770</svg> 771 </span> 772 <span 773 x-cloak 774 class='flex text-sky-600' 775 x-show='$store.nav.current_item == index' 776 > 777 <svg 778 xmlns="http://www.w3.org/2000/svg" 779 width="24" 780 height="24" 781 viewBox="0 0 24 24" 782 fill="none" 783 stroke="currentColor" 784 stroke-width="2" 785 stroke-linecap="round" 786 stroke-linejoin="round" 787> 788 <path d="m18 15-6-6-6 6" /> 789</svg> 790 </span> 791 </span> 792 793 </a> 794 <div 795 x-show="$store.nav.current_item == index" 796 x-collapse.duration.100ms 797 class=' 798 z-20 top-full 799 lg:absolute lg:w-80 lg:mt-2 800 md:left-0 ' 801> 802 803 <ul 804 :class="{ 805 'opacity-100 duration-200 lg:scale-100': $store.nav.current_item == index, 806 'opacity-0 delay-50 duration-50 lg:scale-90': $store.nav.current_item != index, 807 }" 808 class=' 809 border-gray-200 opacity-0 transition-all 810 lg:bg-white lg:p-4 xl:p-6 lg:rounded-md lg:shadow lg:border 811 md:left-0 ' 812 > 813 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 814 <a 815 @focus='$store.nav.current_item = index' 816 @blur='$store.nav.current_item = null' 817 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 818 href="https://nflibrary.ca/contact" 819 >Contact the Library</a> 820 </li> 821 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 822 <a 823 @focus='$store.nav.current_item = index' 824 @blur='$store.nav.current_item = null' 825 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 826 href="https://nflibrary.ca/membership/joining-and-using-the-library" 827 >Joining and Using the Library</a> 828 </li> 829 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 830 <a 831 @focus='$store.nav.current_item = index' 832 @blur='$store.nav.current_item = null' 833 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 834 href="https://nflibrary.ca/membership/reciprocal-borrowing" 835 >Reciprocal Borrowing</a> 836 </li> 837 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 838 <a 839 @focus='$store.nav.current_item = index' 840 @blur='$store.nav.current_item = null' 841 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 842 href="https://nflibrary.ca/about/library-board" 843 >Library Board</a> 844 </li> 845 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 846 <a 847 @focus='$store.nav.current_item = index' 848 @blur='$store.nav.current_item = null' 849 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 850 href="https://nflibrary.ca/about/policies" 851 >Policies, Forms & Reports</a> 852 </li> 853 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 854 <a 855 @focus='$store.nav.current_item = index' 856 @blur='$store.nav.current_item = null' 857 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 858 href="https://nflibrary.ca/donate" 859 >Support Your Library</a> 860 </li> 861 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 862 <a 863 @focus='$store.nav.current_item = index' 864 @blur='$store.nav.current_item = null' 865 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 866 href="https://nflibrary.ca/about/volunteering-employment" 867 >Volunteering & Employment</a> 868 </li> 869 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 870 <a 871 @focus='$store.nav.current_item = index' 872 @blur='$store.nav.current_item = null' 873 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 874 href="https://nflibrary.ca/about/our-history" 875 >Our History</a> 876 </li> 877 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 878 <a 879 @focus='$store.nav.current_item = index' 880 @blur='$store.nav.current_item = null' 881 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 882 href="https://nflibrary.ca/rfp" 883 >Current Requests for Proposal</a> 884 </li> 885 </ul> 886</div> 887 </li> 888 <li 889 x-data="{ 890 index: 1 }" 891 class='relative py-2 lg:py-0' 892 > 893 <a 894 @click.prevent="$store.nav.current_item = $store.nav.current_item === index ? null : index" 895 class='group flex items-center py-1 text-gray-600 hover:text-sky-600 hover:underline leading-tight text-xl lg:text-base xl:text-lg lg:font-normal lg:m-0 truncate' 896 href="#" 897 > 898 <span 899 :class='$store.nav.current_item === index ? "text-sky-600 group-hover:text-sky-600" : "group-hover:text-gray-950"' 900 class=' font-semibold leading-tight' 901 > 902 Locations & Hours </span> 903 <span class='flex w-4 ml-2 '> 904 <span 905 class='flex text-gray-300 group-hover:text-gray-400' 906 x-show='$store.nav.current_item != index' 907 > 908 <svg 909 xmlns="http://www.w3.org/2000/svg" 910 width="24" 911 height="24" 912 viewBox="0 0 24 24" 913 fill="none" 914 stroke="currentColor" 915 stroke-width="2" 916 stroke-linecap="round" 917 stroke-linejoin="round" 918> 919 <path d="m6 9 6 6 6-6" /> 920</svg> 921 </span> 922 <span 923 x-cloak 924 class='flex text-sky-600' 925 x-show='$store.nav.current_item == index' 926 > 927 <svg 928 xmlns="http://www.w3.org/2000/svg" 929 width="24" 930 height="24" 931 viewBox="0 0 24 24" 932 fill="none" 933 stroke="currentColor" 934 stroke-width="2" 935 stroke-linecap="round" 936 stroke-linejoin="round" 937> 938 <path d="m18 15-6-6-6 6" /> 939</svg> 940 </span> 941 </span> 942 943 </a> 944 <div 945 x-show="$store.nav.current_item == index" 946 x-collapse.duration.100ms 947 class='
948 z-20 top-full 949 lg:absolute lg:w-80 lg:mt-2 950 md:left-0 ' 951> 952 953 <ul 954 :class="{ 955 'opacity-100 duration-200 lg:scale-100': $store.nav.current_item == index, 956 'opacity-0 delay-50 duration-50 lg:scale-90': $store.nav.current_item != index, 957 }" 958 class=' 959 border-gray-200 opacity-0 transition-all 960 lg:bg-white lg:p-4 xl:p-6 lg:rounded-md lg:shadow lg:border 961 md:left-0 ' 962 > 963 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 964 <a 965 @focus='$store.nav.current_item = index' 966 @blur='$store.nav.current_item = null' 967 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 968 href="https://nflibrary.ca/locations" 969 >Our Locations</a> 970 </li> 971 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 972 <a 973 @focus='$store.nav.current_item = index' 974 @blur='$store.nav.current_item = null' 975 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 976 href="https://nflibrary.ca/bookmobile" 977 >Bookmobile</a> 978 </li> 979 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 980 <a 981 @focus='$store.nav.current_item = index' 982 @blur='$store.nav.current_item = null' 983 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 984 href="https://nflibrary.ca/locations/victoria" 985 >Victoria Avenue Library</a> 986 </li> 987 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 988 <a 989 @focus='$store.nav.current_item = index' 990 @blur='$store.nav.current_item = null' 991 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 992 href="https://nflibrary.ca/locations/community-centre" 993 >Community Centre Library</a> 994 </li> 995 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 996 <a 997 @focus='$store.nav.current_item = index' 998 @blur='$store.nav.current_item = null' 999 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 1000 href="https://nflibrary.ca/locations/stamford" 1001 >Stamford Centre Library</a> 1002 </li> 1003 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 1004 <a 1005 @focus='$store.nav.current_item = index' 1006 @blur='$store.nav.current_item = null' 1007 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 1008 href="https://nflibrary.ca/locations/chippawa" 1009 >Chippawa Library</a> 1010 </li> 1011 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 1012 <a 1013 @focus='$store.nav.current_item = index' 1014 @blur='$store.nav.current_item = null' 1015 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 1016 href="https://nflibrary.ca/locations/novelbranch" 1017 >NovelBranch</a> 1018 </li> 1019 </ul> 1020</div> 1021 </li> 1022 <li 1023 x-data="{ 1024 index: 2 }" 1025 class='relative py-2 lg:py-0' 1026 > 1027 <a 1028 @click.prevent="$store.nav.current_item = $store.nav.current_item === index ? null : index" 1029 class='group flex items-center py-1 text-gray-600 hover:text-sky-600 hover:underline leading-tight text-xl lg:text-base xl:text-lg lg:font-normal lg:m-0 truncate' 1030 href="#" 1031 > 1032 <span 1033 :class='$store.nav.current_item === index ? "text-sky-600 group-hover:text-sky-600" : "group-hover:text-gray-950"' 1034 class=' font-semibold leading-tight' 1035 > 1036 Services </span> 1037 <span class='flex w-4 ml-2 '> 1038 <span 1039 class='flex text-gray-300 group-hover:text-gray-400' 1040 x-show='$store.nav.current_item != index' 1041 > 1042 <svg 1043 xmlns="http://www.w3.org/2000/svg" 1044 width="24" 1045 height="24" 1046 viewBox="0 0 24 24" 1047 fill="none" 1048 stroke="currentColor" 1049 stroke-width="2" 1050 stroke-linecap="round" 1051 stroke-linejoin="round" 1052> 1053 <path d="m6 9 6 6 6-6" /> 1054</svg> 1055 </span> 1056 <span 1057 x-cloak 1058 class='flex text-sky-600' 1059 x-show='$store.nav.current_item == index' 1060 > 1061 <svg 1062 xmlns="http://www.w3.org/2000/svg" 1063 width="24" 1064 height="24" 1065 viewBox="0 0 24 24" 1066 fill="none" 1067 stroke="currentColor" 1068 stroke-width="2" 1069 stroke-linecap="round" 1070 stroke-linejoin="round" 1071> 1072 <path d="m18 15-6-6-6 6" /> 1073</svg> 1074 </span> 1075 </span> 1076 1077 </a> 1078 <div 1079 x-show="$store.nav.current_item == index" 1080 x-collapse.duration.100ms 1081 class='
1082 z-20 top-full 1083 lg:absolute lg:w-80 lg:mt-2 1084 md:left-0 ' 1085> 1086 1087 <ul 1088 :class="{ 1089 'opacity-100 duration-200 lg:scale-100': $store.nav.current_item == index, 1090 'opacity-0 delay-50 duration-50 lg:scale-90': $store.nav.current_item != index, 1091 }" 1092 class=' 1093 border-gray-200 opacity-0 transition-all 1094 lg:bg-white lg:p-4 xl:p-6 lg:rounded-md lg:shadow lg:border 1095 md:left-0 ' 1096 > 1097 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 1098 <a 1099 @focus='$store.nav.current_item = index' 1100 @blur='$store.nav.current_item = null' 1101 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 1102 href="https://nflibrary.ca/earlyon" 1103 >EarlyON Child and Family Centre</a> 1104 </li> 1105 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 1106 <a 1107 @focus='$store.nav.current_item = index' 1108 @blur='$store.nav.current_item = null' 1109 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 1110 href="https://nflibrary.ca/services/creator-spaces" 1111 >Creator Spaces</a> 1112 </li> 1113 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 1114 <a 1115 @focus='$store.nav.current_item = index' 1116 @blur='$store.nav.current_item = null' 1117 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 1118 href="https://nflibrary.ca/services/space-rentals" 1119 >Community Space Rentals</a> 1120 </li> 1121 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 1122 <a 1123 @focus='$store.nav.current_item = index' 1124 @blur='$store.nav.current_item = null' 1125 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 1126 href="https://nflibrary.ca/study-rooms" 1127 >Study Rooms</a> 1128 </li> 1129 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 1130 <a 1131 @focus='$store.nav.current_item = index' 1132 @blur='$store.nav.current_item = null' 1133 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 1134 href="https://nflibrary.ca/services/educator-library-card" 1135 >Educator Library Card</a> 1136 </li> 1137 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 1138 <a 1139 @focus='$store.nav.current_item = index' 1140 @blur='$store.nav.current_item = null' 1141 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 1142 href="https://nflibrary.ca/services/illo" 1143 >Interlibrary Loan (ILLO)</a> 1144 </li> 1145 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 1146 <a 1147 @focus='$store.nav.current_item = index' 1148 @blur='$store.nav.current_item = null' 1149 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 1150 href="https://nflibrary.ca/services/computers-internet-access" 1151 >Internet & Public Computers</a> 1152 </li> 1153 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 1154 <a 1155 @focus='$store.nav.current_item = index' 1156 @blur='$store.nav.current_item = null' 1157 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 1158 href="https://nflibrary.ca/resources/chromebooks" 1159 >Chromebook Lending</a> 1160 </li> 1161 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 1162 <a 1163 @focus='$store.nav.current_item = index' 1164 @blur='$store.nav.current_item = null' 1165 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 1166 href="https://nflibrary.ca/services/special-services" 1167 >Special Services</a> 1168 </li> 1169 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 1170 <a 1171 @focus='$store.nav.current_item = index' 1172 @blur='$store.nav.current_item = null' 1173 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 1174 href="https://nflibrary.ca/services/suggestion-for-purchase" 1175 >Suggestion for Purchase</a> 1176 </li> 1177 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 1178 <a 1179 @focus='$store.nav.current_item = index' 1180 @blur='$store.nav.current_item = null' 1181 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 1182 href="https://nflibrary.ca/services/tech-help" 1183 >Tech Help</a> 1184 </li> 1185 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 1186 <a 1187 @focus='$store.nav.current_item = index' 1188 @blur='$store.nav.current_item = null' 1189 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 1190 href="https://nflibrary.ca/services/visiting-library-service" 1191 >Visiting Library Service</a> 1192 </li> 1193 </ul> 1194</div> 1195 </li> 1196 <li 1197 x-data="{ 1198 index: 3 }" 1199 class='relative py-2 lg:py-0' 1200 > 1201 <a 1202 @click.prevent="$store.nav.current_item = $store.nav.current_item === index ? null : index" 1203 class='group flex items-center py-1 text-gray-600 hover:text-sky-600 hover:underline leading-tight text-xl lg:text-base xl:text-lg lg:font-normal lg:m-0 truncate' 1204 href="#" 1205 > 1206 <span 1207 :class='$store.nav.current_item === index ? "text-sky-600 group-hover:text-sky-600" : "group-hover:text-gray-950"' 1208 class=' font-semibold leading-tight' 1209 > 1210 Resources </span> 1211 <span class='flex w-4 ml-2 '> 1212 <span 1213 class='flex text-gray-300 group-hover:text-gray-400' 1214 x-show='$store.nav.current_item != index' 1215 > 1216 <svg 1217 xmlns="http://www.w3.org/2000/svg" 1218 width="24" 1219 height="24" 1220 viewBox="0 0 24 24" 1221 fill="none" 1222 stroke="currentColor" 1223 stroke-width="2" 1224 stroke-linecap="round" 1225 stroke-linejoin="round" 1226> 1227 <path d="m6 9 6 6 6-6" /> 1228</svg> 1229 </span> 1230 <span 1231 x-cloak 1232 class='flex text-sky-600' 1233 x-show='$store.nav.current_item == index' 1234 > 1235 <svg 1236 xmlns="http://www.w3.org/2000/svg" 1237 width="24" 1238 height="24" 1239 viewBox="0 0 24 24" 1240 fill="none" 1241 stroke="currentColor" 1242 stroke-width="2" 1243 stroke-linecap="round" 1244 stroke-linejoin="round" 1245> 1246 <path d="m18 15-6-6-6 6" /> 1247</svg> 1248 </span> 1249 </span> 1250 1251 </a> 1252 <div 1253 x-show="$store.nav.current_item == index" 1254 x-collapse.duration.100ms 1255 class='
1256 z-20 top-full 1257 lg:absolute lg:w-80 lg:mt-2 1258 md:left-0 ' 1259> 1260 1261 <ul 1262 :class="{ 1263 'opacity-100 duration-200 lg:scale-100': $store.nav.current_item == index, 1264 'opacity-0 delay-50 duration-50 lg:scale-90': $store.nav.current_item != index, 1265 }" 1266 class=' 1267 border-gray-200 opacity-0 transition-all 1268 lg:bg-white lg:p-4 xl:p-6 lg:rounded-md lg:shadow lg:border 1269 md:left-0 ' 1270 > 1271 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 1272 <a 1273 @focus='$store.nav.current_item = index' 1274 @blur='$store.nav.current_item = null' 1275 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 1276 href="https://nflibrary.ca/collections" 1277 >Collections</a> 1278 </li> 1279 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 1280 <a 1281 @focus='$store.nav.current_item = index' 1282 @blur='$store.nav.current_item = null' 1283 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 1284 href="https://nflibrary.ca/catalogue/new" 1285 >New Books, Movies and More</a> 1286 </li> 1287 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 1288 <a 1289 @focus='$store.nav.current_item = index' 1290 @blur='$store.nav.current_item = null' 1291 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 1292 href="https://nflibrary.ca/digital-resources" 1293 >Digital Resources</a> 1294 </li> 1295 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 1296 <a 1297 @focus='$store.nav.current_item = index' 1298 @blur='$store.nav.current_item = null' 1299 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 1300 href="https://nflibrary.ca/collections/puzzles" 1301 >Puzzles</a> 1302 </li> 1303 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 1304 <a 1305 @focus='$store.nav.current_item = index' 1306 @blur='$store.nav.current_item = null' 1307 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 1308 href="https://nflibrary.ca/articles" 1309 >Library Blog</a> 1310 </li> 1311 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 1312 <a 1313 @focus='$store.nav.current_item = index' 1314 @blur='$store.nav.current_item = null' 1315 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 1316 href="https://nflibrary.ca/collections/culture-box" 1317 >Culture Box Collection</a> 1318 </li> 1319 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 1320 <a 1321 @focus='$store.nav.current_item = index' 1322 @blur='$store.nav.current_item = null' 1323 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 1324 href="https://nflibrary.ca/storywalks" 1325 >StoryWalk® Kits</a> 1326 </li> 1327 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 1328 <a 1329 @focus='$store.nav.current_item = index' 1330 @blur='$store.nav.current_item = null' 1331 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 1332 href="https://nfpl.historicniagara.ca/s/livinglibrary/page/welcome" 1333 >Living Library<span 1334 title="Link goes to external website." 1335 class="flex w-4 text-gray-400 group-hover:text-gray-600 ml-2" 1336 ><svg 1337 xmlns="http://www.w3.org/2000/svg" 1338 width="24" 1339 height="24" 1340 viewBox="0 0 24 24" 1341 fill="none" 1342 stroke="currentColor" 1343 stroke-width="2" 1344 stroke-linecap="round" 1345 stroke-linejoin="round" 1346> 1347 <path d="M15 3h6v6" /> 1348 <path d="M10 14 21 3" /> 1349 <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /> 1350</svg> 1351</span></a> 1352 </li> 1353 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 1354 <a 1355 @focus='$store.nav.current_item = index' 1356 @blur='$store.nav.current_item = null' 1357 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 1358 href="https://nflibrary.ca/resources/mental-health-and-wellbeing" 1359 >Mental Health and Wellbeing</a> 1360 </li> 1361 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 1362 <a 1363 @focus='$store.nav.current_item = index' 1364 @blur='$store.nav.current_item = null' 1365 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 1366 href="https://nflibrary.ca/help" 1367 >Need Help</a> 1368 </li> 1369 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 1370 <a 1371 @focus='$store.nav.current_item = index' 1372 @blur='$store.nav.current_item = null' 1373 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 1374 href="https://nflibrary.ca/resources/helpful-links" 1375 >Helpful Links</a> 1376 </li> 1377 </ul> 1378</div> 1379 </li> 1380 <li 1381 x-data="{ 1382 index: 4 }" 1383 class='relative py-2 lg:py-0' 1384 > 1385 <a 1386 @click.prevent="$store.nav.current_item = $store.nav.current_item === index ? null : index" 1387 class='group flex items-center py-1 text-gray-600 hover:text-sky-600 hover:underline leading-tight text-xl lg:text-base xl:text-lg lg:font-normal lg:m-0 truncate' 1388 href="#" 1389 > 1390 <span 1391 :class='$store.nav.current_item === index ? "text-sky-600 group-hover:text-sky-600" : "group-hover:text-gray-950"' 1392 class=' font-semibold leading-tight' 1393 > 1394 Programs & Activities </span> 1395 <span class='flex w-4 ml-2 '> 1396 <span 1397 class='flex text-gray-300 group-hover:text-gray-400' 1398 x-show='$store.nav.current_item != index' 1399 > 1400 <svg 1401 xmlns="http://www.w3.org/2000/svg" 1402 width="24" 1403 height="24" 1404 viewBox="0 0 24 24" 1405 fill="none" 1406 stroke="currentColor" 1407 stroke-width="2" 1408 stroke-linecap="round" 1409 stroke-linejoin="round" 1410> 1411 <path d="m6 9 6 6 6-6" /> 1412</svg> 1413 </span> 1414 <span 1415 x-cloak 1416 class='flex text-sky-600' 1417 x-show='$store.nav.current_item == index' 1418 > 1419 <svg 1420 xmlns="http://www.w3.org/2000/svg" 1421 width="24" 1422 height="24" 1423 viewBox="0 0 24 24" 1424 fill="none" 1425 stroke="currentColor" 1426 stroke-width="2" 1427 stroke-linecap="round" 1428 stroke-linejoin="round" 1429> 1430 <path d="m18 15-6-6-6 6" /> 1431</svg> 1432 </span> 1433 </span> 1434 1435 </a> 1436 <div 1437 x-show="$store.nav.current_item == index" 1438 x-collapse.duration.100ms 1439 class='
1440 z-20 top-full 1441 lg:absolute lg:w-80 lg:mt-2 1442 md:left-0 ' 1443> 1444 1445 <ul 1446 :class="{ 1447 'opacity-100 duration-200 lg:scale-100': $store.nav.current_item == index, 1448 'opacity-0 delay-50 duration-50 lg:scale-90': $store.nav.current_item != index, 1449 }" 1450 class=' 1451 border-gray-200 opacity-0 transition-all 1452 lg:bg-white lg:p-4 xl:p-6 lg:rounded-md lg:shadow lg:border 1453 md:left-0 ' 1454 > 1455 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 1456 <a 1457 @focus='$store.nav.current_item = index' 1458 @blur='$store.nav.current_item = null' 1459 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 1460 href="https://nflibrary.ca/programs" 1461 >All Programs & Activities </a> 1462 </li> 1463 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 1464 <a 1465 @focus='$store.nav.current_item = index' 1466 @blur='$store.nav.current_item = null' 1467 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 1468 href="https://nflibrary.ca/programs/summer-reading-club" 1469 >Summer Reading Club</a> 1470 </li> 1471 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 1472 <a 1473 @focus='$store.nav.current_item = index' 1474 @blur='$store.nav.current_item = null' 1475 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 1476 href="https://nflibrary.ca/services/gallery" 1477 >Art Exhibits</a> 1478 </li> 1479 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 1480 <a 1481 @focus='$store.nav.current_item = index' 1482 @blur='$store.nav.current_item = null' 1483 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 1484 href="https://nflibrary.ca/programs/tax-clinics" 1485 >Tax Clinics</a> 1486 </li> 1487 </ul> 1488</div> 1489 </li> 1490 <li 1491 x-data="{ 1492 index: 5 }" 1493 class='relative py-2 lg:py-0' 1494 > 1495 <a 1496 @click.prevent="$store.nav.current_item = $store.nav.current_item === index ? null : index" 1497 class='group flex items-center py-1 text-gray-600 hover:text-sky-600 hover:underline leading-tight text-xl lg:text-base xl:text-lg lg:font-normal lg:m-0 truncate' 1498 href="#" 1499 > 1500 <span 1501 :class='$store.nav.current_item === index ? "text-sky-600 group-hover:text-sky-600" : "group-hover:text-gray-950"' 1502 class=' font-semibold leading-tight' 1503 > 1504 Local History </span> 1505 <span class='flex w-4 ml-2 '> 1506 <span 1507 class='flex text-gray-300 group-hover:text-gray-400' 1508 x-show='$store.nav.current_item != index' 1509 > 1510 <svg 1511 xmlns="http://www.w3.org/2000/svg" 1512 width="24" 1513 height="24" 1514 viewBox="0 0 24 24" 1515 fill="none" 1516 stroke="currentColor" 1517 stroke-width="2" 1518 stroke-linecap="round" 1519 stroke-linejoin="round" 1520> 1521 <path d="m6 9 6 6 6-6" /> 1522</svg> 1523 </span> 1524 <span 1525 x-cloak 1526 class='flex text-sky-600' 1527 x-show='$store.nav.current_item == index' 1528 > 1529 <svg 1530 xmlns="http://www.w3.org/2000/svg" 1531 width="24" 1532 height="24" 1533 viewBox="0 0 24 24" 1534 fill="none" 1535 stroke="currentColor" 1536 stroke-width="2" 1537 stroke-linecap="round" 1538 stroke-linejoin="round" 1539> 1540 <path d="m18 15-6-6-6 6" /> 1541</svg> 1542 </span> 1543 </span> 1544 1545 </a> 1546 <div 1547 x-show="$store.nav.current_item == index" 1548 x-collapse.duration.100ms 1549 class=' 1550 z-20 top-full 1551 lg:absolute lg:w-80 lg:mt-2 1552 md:right-0 ' 1553> 1554 1555 <ul 1556 :class="{ 1557 'opacity-100 duration-200 lg:scale-100': $store.nav.current_item == index, 1558 'opacity-0 delay-50 duration-50 lg:scale-90': $store.nav.current_item != index, 1559 }" 1560 class=' 1561 border-gray-200 opacity-0 transition-all 1562 lg:bg-white lg:p-4 xl:p-6 lg:rounded-md lg:shadow lg:border 1563 md:right-0 ' 1564 > 1565 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 1566 <a 1567 @focus='$store.nav.current_item = index' 1568 @blur='$store.nav.current_item = null' 1569 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 1570 href="https://nflibrary.ca/history/book-an-appointment" 1571 >Book a Local History Appointment</a> 1572 </li> 1573 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 1574 <a 1575 @focus='$store.nav.current_item = index' 1576 @blur='$store.nav.current_item = null' 1577 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 1578 href="https://nflibrary.ca/services/microfilm-readers" 1579 >Book a Microfilm Reader</a> 1580 </li> 1581 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 1582 <a 1583 @focus='$store.nav.current_item = index' 1584 @blur='$store.nav.current_item = null' 1585 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 1586 href="https://nflibrary.ca/history/research-services" 1587 >Research Services & Fees</a> 1588 </li> 1589 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 1590 <a 1591 @focus='$store.nav.current_item = index' 1592 @blur='$store.nav.current_item = null' 1593 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 1594 href="https://nflibrary.ca/history/book-sale" 1595 >Books for Sale</a> 1596 </li> 1597 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 1598 <a 1599 @focus='$store.nav.current_item = index' 1600 @blur='$store.nav.current_item = null' 1601 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 1602 href="https://nfpl.historicniagara.ca/s/All/page/about" 1603 >Digital Collection<span 1604 title="Link goes to external website." 1605 class="flex w-4 text-gray-400 group-hover:text-gray-600 ml-2" 1606 ><svg 1607 xmlns="http://www.w3.org/2000/svg" 1608 width="24" 1609 height="24" 1610 viewBox="0 0 24 24" 1611 fill="none" 1612 stroke="currentColor" 1613 stroke-width="2" 1614 stroke-linecap="round" 1615 stroke-linejoin="round" 1616> 1617 <path d="M15 3h6v6" /> 1618 <path d="M10 14 21 3" /> 1619 <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /> 1620</svg> 1621</span></a> 1622 </li> 1623 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 1624 <a 1625 @focus='$store.nav.current_item = index' 1626 @blur='$store.nav.current_item = null' 1627 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 1628 href="https://nflibrary.ca/history/digital-exhibits" 1629 >Digital Exhibits</a> 1630 </li> 1631 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 1632 <a 1633 @focus='$store.nav.current_item = index' 1634 @blur='$store.nav.current_item = null' 1635 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 1636 href="https://nflibrary.ca/history/digital-downloads" 1637 >Digital Downloads</a> 1638 </li> 1639 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 1640 <a 1641 @focus='$store.nav.current_item = index' 1642 @blur='$store.nav.current_item = null' 1643 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 1644 href="https://nflibrary.ca/history/digital-puzzles" 1645 >Digital Puzzles</a> 1646 </li> 1647 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 1648 <a 1649 @focus='$store.nav.current_item = index' 1650 @blur='$store.nav.current_item = null' 1651 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 1652 href="https://nflibrary.ca/history/genealogical-research" 1653 >Genealogical Research</a> 1654 </li> 1655 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 1656 <a 1657 @focus='$store.nav.current_item = index' 1658 @blur='$store.nav.current_item = null' 1659 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 1660 href="https://nflibrary.ca/history/local" 1661 >Local History</a> 1662 </li> 1663 <li class=" my-2 first:my-0 last:my-0 first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0"> 1664 <a 1665 @focus='$store.nav.current_item = index' 1666 @blur='$store.nav.current_item = null' 1667 class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded" 1668 href="http://swof.niagarafallsheritage.ca/" 1669 >Virtual Sports Wall of Fame<span 1670 title="Link goes to external website." 1671 class="flex w-4 text-gray-400 group-hover:text-gray-600 ml-2" 1672 ><svg 1673 xmlns="http://www.w3.org/2000/svg" 1674 width="24" 1675 height="24" 1676 viewBox="0 0 24 24" 1677 fill="none" 1678 stroke="currentColor" 1679 stroke-width="2" 1680 stroke-linecap="round" 1681 stroke-linejoin="round" 1682> 1683 <path d="M15 3h6v6" /> 1684 <path d="M10 14 21 3" /> 1685 <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /> 1686</svg> 1687</span></a> 1688 </li> 1689 </ul> 1690</div> 1691 </li> 1692 </ul> 1693 1694 </div> 1695</nav> 1696 1697 </header> 1698 <main 1699 id="site-main" 1700 class="w-auto transition-all duration-200 ease-out p-0 relative lg:opacity-100 pb-4 border-t border-gray-200/80 bg-gradient-to-b from-white to-w
1700hite/0 " 1701 :class="{ 1702 'opacity-20 pointer-events-none lg:pointer-events-auto': $store.nav.is_open, 1703 'opacity-0 sm:opacity-50 pointer-events-none': $store.notices.is_open || $store.account.menu_open, 1704 }" 1705 > 1706 <h1 class='sr-only'>Niagara Falls Public Library Home Page</h1> 1707<article class="container pt-px "> 1708 1709 <section class="my-6 md:my-8 grid grid-cols-12 gap-x-6 md:gap-x-8"> 1710 <div class="col-span-12 "> 1711 <div class="flex flex-col sm:grid sm:grid-cols-2 lg:grid-cols-3 md:grid-rows-2 gap-6 md:gap-x-8 lg:gap-y-4 my-8"> 1712 1713 <a 1714 aria-label="Trivia Night at the Library" 1715 href='https://nflibrary.ca/trivia-night' 1716 class="flex items-stretch col-span-2 row-span-2" 1717 > 1718 <picture 1719 style="background-image: url('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAA0AAAAFCAMAAACpZpYjAAAAulBMVEXDdUa/dUm2cFGpZ1ycXWeTVm6PUnKOUXKOUXGPUnCNUXGKT3S7b027cU23cFCwa1WpZlyjYWGgXmSfXWSeXWScXGWYWmiTV2ytZFeyaVO1bFG1bVKza1SwaVatZ1isZVqqZFunY12jYWCXWWmdV2SmXl2vZVa1alG3a1C2alGzaFSwZlasY1mnYV2iXmGbWmaTVWyOTG+bVWWpXluzZVO3aFC2Z1GyY1WsYFmmXF6gWWKZVmiRUm2KTXOk2UJRAAAAAW9yTlQBz6J3mgAAAE5JREFUCNdjYGBkYmZhZWPn4OTk4mbg4eXjFxAUEhYWERUTZ5CQlJKWkZWTV1BUElFmUFFVU9fQ1NLW0dXTN2AwNDI2MTUzt7C0sraxBQCu7weUxjn8aQAAAABJRU5ErkJggg==')" 1720 class="w-full group rounded-md lg:rounded-lg relative flex bg-gray-200 bg-cover overflow-hidden aspect-[160/64]" 1721 x-data="{ 1722 src: 'https://nflibrary.ca/media/pages/home/fdb927b419-1788205004/website-banner-1600x640-1400x.png', 1723 srcset: 'https://nflibrary.ca/media/pages/home/fdb927b419-1788205004/website-banner-1600x640-400x.png 400w, https://nflibrary.ca/media/pages/home/fdb927b419-1788205004/website-banner-1600x640-800x.png 800w, https://nflibrary.ca/media/pages/home/fdb927b419-1788205004/website-banner-1600x640-1200x.png 1200w, https://nflibrary.ca/media/pages/home/fdb927b419-1788205004/website-banner-1600x640-1600x.png 1600w', 1724 srcset_webp: 'https://nflibrary.ca/media/pages/home/fdb927b419-1788205004/website-banner-1600x640-400x.webp 400w, https://nflibrary.ca/media/pages/home/fdb927b419-1788205004/website-banner-1600x640-800x.webp 800w, https://nflibrary.ca/media/pages/home/fdb927b419-1788205004/website-banner-1600x640-1200x.webp 1200w, https://nflibrary.ca/media/pages/home/fdb927b419-1788205004/website-banner-1600x640-1600x.webp 1600w', 1725 visible: false, 1726 }" 1727 x-intersect.once=" 1728 visible = true 1729 " 1730 > 1731 1732 <source 1733 :srcset="visible ? srcset_webp : ''" 1734 sizes="100vw" 1735 > 1736 <img 1737 width="1600" 1738 height="640" 1739 class="aspect-[160/64] bg-gray-200 w-full overflow-hidden object-cover opacity-0 transition-opacity" 1740 :class="{ 1741 'bg-gray-200' : !src, 1742 'bg-white' : src, 1743 'opacity-0' : !visible, 1744 'opacity-100' : visible, 1745 }" 1746 src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAA0AAAAFCAMAAACpZpYjAAAAulBMVEXDdUa/dUm2cFGpZ1ycXWeTVm6PUnKOUXKOUXGPUnCNUXGKT3S7b027cU23cFCwa1WpZlyjYWGgXmSfXWSeXWScXGWYWmiTV2ytZFeyaVO1bFG1bVKza1SwaVatZ1isZVqqZFunY12jYWCXWWmdV2SmXl2vZVa1alG3a1C2alGzaFSwZlasY1mnYV2iXmGbWmaTVWyOTG+bVWWpXluzZVO3aFC2Z1GyY1WsYFmmXF6gWWKZVmiRUm2KTXOk2UJRAAAAAW9yTlQBz6J3mgAAAE5JREFUCNdjYGBkYmZhZWPn4OTk4mbg4eXjFxAUEhYWERUTZ5CQlJKWkZWTV1BUElFmUFFVU9fQ1NLW0dXTN2AwNDI2MTUzt7C0sraxBQCu7weUxjn8aQAAAABJRU5ErkJggg==" 1747 :srcset="visible ? srcset : ''" 1748 alt="" 1749 > 1750 </picture> 1751 1752 </a> 1753 <a 1754 aria-label="We read Canadian." 1755 href='https://nflibrary.ca/read-canadian' 1756 class="flex items-stretch col-span-1 row-span-1" 1757 > 1758 <picture 1759 style="background-image: url('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAA0AAAAFCAMAAACpZpYjAAAAtFBMVEW2Ghq3HR24Hx+4IiK5KCi9NjfCT0/Kbm/RjY7Xpqjbubrfxsjh0tS3Hh65IiK5JSW6KCi7Li6+PDzDUlPKb3DRi4zWoqPas7XewsThz9G4ICC5JCW7LCy8MjO/QUHEV1jLc3TSjY7WoaPasrPdwMLgztC5IyO5Jye6Kyu8MzTARETFXF3MeXrTk5Tbtrfew8Xh0NG3ICC5JSa7MDC/RETGYGHOf4DUm5zZr7Hdvr/fycvh09V+9Fw/AAAAAW9yTlQBz6J3mgAAAEtJREFUCNcFwYMBwAAMALDOtm3b+v+vJQAIiuEESdEMy/EgiJKsqJpumJbtgOvJfhBGcZJmeQFCWdVN2/UDM04zALKs236c1/283w+rtwcSnhpJGwAAAABJRU5ErkJggg==')" 1760 class="w-full group rounded-md lg:rounded-lg relative flex bg-gray-200 bg-cover overflow-hidden aspect-[160/64]" 1761 x-data="{ 1762 src: 'https://nflibrary.ca/media/pages/home/7088091f25-1774555484/read-canadian-banner-1400x.png', 1763 srcset: 'https://nflibrary.ca/media/pages/home/7088091f25-1774555484/read-canadian-banner-400x.png 400w, https://nflibrary.ca/media/pages/home/7088091f25-1774555484/read-canadian-banner-800x.png 800w, https://nflibrary.ca/media/pages/home/7088091f25-1774555484/read-canadian-banner-1200x.png 1200w, https://nflibrary.ca/media/pages/home/7088091f25-1774555484/read-canadian-banner-1600x.png 1600w', 1764 srcset_webp: 'https://nflibrary.ca/media/pages/home/7088091f25-1774555484/read-canadian-banner-400x.webp 400w, https://nflibrary.ca/media/pages/home/7088091f25-1774555484/read-canadian-banner-800x.webp 800w, https://nflibrary.ca/media/pages/home/7088091f25-1774555484/read-canadian-banner-1200x.webp 1200w, https://nflibrary.ca/media/pages/home/7088091f25-1774555484/read-canadian-banner-1600x.webp 1600w', 1765 visible: false, 1766 }" 1767 x-intersect.once=" 1768 visible = true 1769 " 1770 > 1771 1772 <source 1773 :srcset="visible ? srcset_webp : ''" 1774 sizes="(min-width: 1536px) 430px, 1775 (min-width: 1280px) 360px, 1776 (min-width: 1024px) 300px, 1777 (min-width: 768px) 225px,
1778 100vw" 1779 > 1780 <img 1781 width="1600" 1782 height="640" 1783 class="aspect-[160/64] bg-gray-200 w-full overflow-hidden object-cover opacity-0 transition-opacity" 1784 :class="{ 1785 'bg-gray-200' : !src, 1786 'bg-white' : src, 1787 'opacity-0' : !visible, 1788 'opacity-100' : visible, 1789 }" 1790 src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAA0AAAAFCAMAAACpZpYjAAAAtFBMVEW2Ghq3HR24Hx+4IiK5KCi9NjfCT0/Kbm/RjY7Xpqjbubrfxsjh0tS3Hh65IiK5JSW6KCi7Li6+PDzDUlPKb3DRi4zWoqPas7XewsThz9G4ICC5JCW7LCy8MjO/QUHEV1jLc3TSjY7WoaPasrPdwMLgztC5IyO5Jye6Kyu8MzTARETFXF3MeXrTk5Tbtrfew8Xh0NG3ICC5JSa7MDC/RETGYGHOf4DUm5zZr7Hdvr/fycvh09V+9Fw/AAAAAW9yTlQBz6J3mgAAAEtJREFUCNcFwYMBwAAMALDOtm3b+v+vJQAIiuEESdEMy/EgiJKsqJpumJbtgOvJfhBGcZJmeQFCWdVN2/UDM04zALKs236c1/283w+rtwcSnhpJGwAAAABJRU5ErkJggg==" 1791 :srcset="visible ? srcset : ''" 1792 alt="" 1793 > 1794 </picture> 1795 1796 </a> 1797 <a 1798 aria-label="EarlyON Child and Family Centre" 1799 href='https://nflibrary.ca/earlyon' 1800 class="flex items-stretch col-span-1 row-span-1" 1801 > 1802 <picture 1803 style="background-image: url('data:image/png;base64, /9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv/2wBDAQoLCw4NDhwQEBw7KCIoOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozv/wAARCAAFAA0DAREAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAABAX/xAAcEAABAwUAAAAAAAAAAAAAAAABAAIEAxETIUH/xAAWAQEBAQAAAAAAAAAAAAAAAAAEBQb/xAAaEQADAAMBAAAAAAAAAAAAAAAAAQIDESEx/9oADAMBAAIRAxEAPwAMEjKNJVeEfB2irLrPDmi/EdGglaR//9k=')" 1804 class="w-full group rounded-md lg:rounded-lg relative flex bg-gray-200 bg-cover overflow-hidden aspect-[160/64]" 1805 x-data="{ 1806 src: 'https://nflibrary.ca/media/pages/home/2da3a84c4f-1774555150/earlyon-banner-1400x.jpg', 1807 srcset: 'https://nflibrary.ca/media/pages/home/2da3a84c4f-1774555150/earlyon-banner-400x.jpg 400w, https://nflibrary.ca/media/pages/home/2da3a84c4f-1774555150/earlyon-banner-800x.jpg 800w, https://nflibrary.ca/media/pages/home/2da3a84c4f-1774555150/earlyon-banner-1200x.jpg 1200w, https://nflibrary.ca/media/pages/home/2da3a84c4f-1774555150/earlyon-banner-1600x.jpg 1600w', 1808 srcset_webp: 'https://nflibrary.ca/media/pages/home/2da3a84c4f-1774555150/earlyon-banner-400x.webp 400w, https://nflibrary.ca/media/pages/home/2da3a84c4f-1774555150/earlyon-banner-800x.webp 800w, https://nflibrary.ca/media/pages/home/2da3a84c4f-1774555150/earlyon-banner-1200x.webp 1200w, https://nflibrary.ca/media/pages/home/2da3a84c4f-1774555150/earlyon-banner-1600x.webp 1600w', 1809 visible: false, 1810 }" 1811 x-intersect.once=" 1812 visible = true 1813 " 1814 > 1815 1816 <source 1817 :srcset="visible ? srcset_webp : ''" 1818 sizes="(min-width: 1536px) 430px, 1819 (min-width: 1280px) 360px, 1820 (min-width: 1024px) 300px, 1821 (min-width: 768px) 225px, 1822 100vw" 1823 > 1824 <img 1825 width="1600" 1826 height="640" 1827 class="aspect-[160/64] bg-gray-200 w-full overflow-hidden object-cover opacity-0 transition-opacity" 1828 :class="{ 1829 'bg-gray-200' : !src, 1830 'bg-white' : src, 1831 'opacity-0' : !visible, 1832 'opacity-100' : visible, 1833 }" 1834 src="data:image/png;base64, /9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv/2wBDAQoLCw4NDhwQEBw7KCIoOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozv/wAARCAAFAA0DAREAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAABAX/xAAcEAABAwUAAAAAAAAAAAAAAAABAAIEAxETIUH/xAAWAQEBAQAAAAAAAAAAAAAAAAAEBQb/xAAaEQADAAMBAAAAAAAAAAAAAAAAAQIDESEx/9oADAMBAAIRAxEAPwAMEjKNJVeEfB2irLrPDmi/EdGglaR//9k=" 1835 :srcset="visible ? srcset : ''" 1836 alt="EarlyON Child and Family Centre" 1837 > 1838 </picture> 1839 1840 </a> 1841 </div> 1842 </div> 1843 </section> 1844 1845 <section class="my-0 grid grid-cols-12 gap-x-6 md:gap-x-8"> 1846 <div class="col-span-12 "> 1847 <div class="gap-4 sm:gap-6 md:gap-8 grid my-4 grid-cols-12"> 1848 <a 1849 href="/catalogue" 1850 @click="is_loading = true" 1851 class="group col-span-6 lg:col-span-3 flex flex-col p-3 lg:p-4 font-semibold rounded-lg overflow-hidden items-start justify-between text-white hover:scale-105 transition-all relative bg-theme shadow hover:shadow-md" 1852 style=" 1853 --color-theme-light: var(--color-purple-300); 1854 --color-theme: var(--color-purple-500); 1855 --color-theme-dark: var(--color-purple-700); 1856 " 1857> 1858 1859 <div 1860 aria-hidden="true" 1861 class="absolute flex items-start justify-start top-0 bottom-0 left-0 right-0 z-0 group-hover:scale-125 group-hover:-translate-x-4 group-hover:translate-y-2 transition group-hover:-rotate-3 duration-500 ease-in-out" 1862> 1863 <div 1864 style="transform: rotate(12deg)" 1865 class="absolute bg-pink-400 -left-32 -right-32 h-64 bottom-full -mb-4 opacity-60 shadow-theme-light group-hover:mt-1 transition-all duration-500 ease-in-out" 1866 ></div> 1867 <div 1868 style="transform: rotate(4deg)" 1869 class="absolute bg-blue-900 -left-32 -right-32 -bottom-64 top-16 opacity-40 group-hover:mt-3 transition-all duration-300 ease-in-out" 1870 ></div> 1871</div> 1872 <!-- <div class="absolute top-0 left-0 w-full h-full text-purple-500"></div> --> 1873 <div class="flex w-full grow h-full items-start relative"> 1874 1875 <div 1876 class="flex w-8 xl:w-10 h-8 xl:h-10 mb-2 group-hover:scale-110 group-hover:-rotate-6 transition-all duration-700 ease-in-out"> 1877 <svg 1878 xmlns="http://www.w3.org/2000/svg" 1879 width="24" 1880 height="24" 1881 viewBox="0 0 24 24" 1882 fill="none" 1883 stroke="currentColor" 1884 stroke-width="2" 1885 stroke-linecap="round" 1886 stroke-linejoin="round" 1887> 1888 <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" /> 1889 <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" /> 1890</svg> 1891 </div> 1892 </div> 1893 <div 1894 class='w-24 xl:w-32 h-16 leading-tight lg:text-lg/tight xl:text-xl/tight lg:leading-tight flex items-end decoration-theme-light decoration-2 group-hover:underline relative text-pretty'> 1895 Browse Catalogue </div> 1896</a> 1897<a 1898 href="/eg/opac/register" 1899 @click="is_loading = true" 1900 class="group col-span-6 lg:col-span-3 flex flex-col p-3 lg:p-4 font-semibold rounded-lg overflow-hidden items-start justify-between text-white hover:scale-105 transition-all relative bg-theme shadow hover:shadow-md" 1901 style=" 1902 --color-theme-light: var(--color-blue-300); 1903 --color-theme: var(--color-blue-500); 1904 --color-theme-dark: var(--color-blue-700); 1905 " 1906> 1907 1908 <div 1909 aria-hidden="true" 1910 class="absolute flex items-start justify-start top-0 bottom-0 left-0 right-0 z-0 transition duration-500 ease-in-out" 1911> 1912 <div 1913 class="absolute bg-cyan-300 left-1/2 bottom-14 h-36 w-36 lg:h-48 lg:w-40 z-2 opacity-40 group-hover:mt-3 transition-all duration-500 ease-in-out rounded-[50%] rotate-45 group-hover:scale-125 group-hover:rotate-15 group-hover:translate-x-8 group-hover:translate-y-4"> 1914 </div> 1915 <div 1916 class="absolute bg-purple-800 h-44 w-44 md:w-52 md:h-52 lg:h-56 lg:w-60 -bottom-20 opacity-40 z-1 shadow-theme-light group-hover:mt-1 transition-all duration-500 ease-in-out rounded-[50%] group-hover:scale-125 group-hover:-rotate-15 group-hover:-translate-x-4 group-hover:translate-y-4 -rotate-45 -left-1/4 ml-4 sm"> 1917 </div> 1918 1919</div> 1920 <!-- <div class="absolute top-0 left-0 w-full h-full text-blue-500"></div> --> 1921 <div class="flex w-full grow h-full items-start relative"> 1922 1923 <div 1924 class="flex w-8 xl:w-10 h-8 xl:h-10 mb-2 group-hover:scale-110 group-hover:-rotate-6 transition-all duration-700 ease-in-out"> 1925 <svg 1926 xmlns="http://www.w3.org/2000/svg" 1927 width="24" 1928 height="24" 1929 viewBox="0 0 24 24" 1930 fill="none" 1931 stroke="currentColor" 1932 stroke-width="2" 1933 stroke-linecap="round" 1934 stroke-linejoin="round" 1935> 1936 <rect width="20" height="14" x="2" y="5" rx="2" />
1937 <line x1="2" x2="22" y1="10" y2="10" /> 1938</svg> 1939 </div> 1940 </div> 1941 <div 1942 class='w-24 xl:w-32 h-16 leading-tight lg:text-lg/tight xl:text-xl/tight lg:leading-tight flex items-end decoration-theme-light decoration-2 group-hover:underline relative text-pretty'> 1943 Get a Library Card </div> 1944</a> 1945<a 1946 href="/help" 1947 @click="is_loading = true" 1948 class="group col-span-6 lg:col-span-3 flex flex-col p-3 lg:p-4 font-semibold rounded-lg overflow-hidden items-start justify-between text-white hover:scale-105 transition-all relative bg-theme shadow hover:shadow-md" 1949 style=" 1950 --color-theme-light: var(--color-green-300); 1951 --color-theme: var(--color-green-500); 1952 --color-theme-dark: var(--color-green-700); 1953 " 1954> 1955 1956 <div 1957 aria-hidden="true" 1958 class="absolute flex items-start justify-start top-0 bottom-0 left-0 right-0 z-0 group-hover:scale-125 group-hover:-translate-x-4 group-hover:translate-y-2 transition group-hover:-rotate-3 duration-500 ease-in-out" 1959> 1960 <div 1961 style="transform: rotate(12deg)" 1962 class="absolute bg-yellow-300 -left-32 -right-32 h-64 bottom-full -mb-4 opacity-60 shadow-theme-light group-hover:mt-1 transition-all duration-500 ease-in-out" 1963 ></div> 1964 <div 1965 style="transform: rotate(9deg)" 1966 class="absolute bg-cyan-900 -left-32 -right-32 -bottom-64 top-16 opacity-40 group-hover:mt-3 transition-all duration-300 ease-in-out" 1967 ></div> 1968</div> 1969 <!-- <div class="absolute top-0 left-0 w-full h-full text-green-500"></div> --> 1970 <div class="flex w-full grow h-full items-start relative"> 1971 1972 <div 1973 class="flex w-8 xl:w-10 h-8 xl:h-10 mb-2 group-hover:scale-110 group-hover:-rotate-6 transition-all duration-700 ease-in-out"> 1974 <svg 1975 xmlns="http://www.w3.org/2000/svg" 1976 width="24" 1977 height="24" 1978 viewBox="0 0 24 24" 1979 fill="none" 1980 stroke="currentColor" 1981 stroke-width="2" 1982 stroke-linecap="round" 1983 stroke-linejoin="round" 1984> 1985 <circle cx="12" cy="12" r="10" /> 1986 <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" /> 1987 <path d="M12 17h.01" /> 1988</svg> 1989 </div> 1990 </div> 1991 <div 1992 class='w-24 xl:w-32 h-16 leading-tight lg:text-lg/tight xl:text-xl/tight lg:leading-tight flex items-end decoration-theme-light decoration-2 group-hover:underline relative text-pretty'> 1993 Need Help? </div> 1994</a> 1995<a 1996 href="/newsletter" 1997 @click="is_loading = true" 1998 class="group col-span-6 lg:col-span-3 flex flex-col p-3 lg:p-4 font-semibold rounded-lg overflow-hidden items-start justify-between text-white hover:scale-105 transition-all relative bg-theme shadow hover:shadow-md" 1999 style=" 2000 --color-theme-light: var(--color-amber-300); 2001 --color-theme: var(--color-amber-500); 2002 --color-theme-dark: var(--color-amber-700); 2003 " 2004> 2005 2006 <div 2007 aria-hidden="true" 2008 class="absolute flex items-start justify-start top-0 bottom-0 left-0 right-0 z-0 transition duration-500 ease-in-out" 2009> 2010 <div 2011 class="absolute bg-yellow-200 left-1/2 bottom-14 h-36 w-36 lg:h-48 lg:w-40 z-2 opacity-40 group-hover:mt-3 transition-all duration-500 ease-in-out rounded-[50%] rotate-45 group-hover:scale-125 group-hover:rotate-15 group-hover:translate-x-8 group-hover:translate-y-4"> 2012 </div> 2013 <div 2014 class="absolute bg-orange-600 h-44 w-44 md:w-52 md:h-52 lg:h-56 lg:w-60 -bottom-20 opacity-40 z-1 shadow-theme-light group-hover:mt-1 transition-all duration-500 ease-in-out rounded-[50%] group-hover:scale-125 group-hover:-rotate-15 group-hover:-translate-x-4 group-hover:translate-y-4 -rotate-45 -left-1/4 ml-4 sm"> 2015 </div> 2016 2017</div> 2018 <!-- <div class="absolute top-0 left-0 w-full h-full text-amber-500"></div> --> 2019 <div class="flex w-full grow h-full items-start relative"> 2020 2021 <div 2022 class="flex w-8 xl:w-10 h-8 xl:h-10 mb-2 group-hover:scale-110 group-hover:-rotate-6 transition-all duration-700 ease-in-out"> 2023 <svg 2024 xmlns="http://www.w3.org/2000/svg" 2025 width="24" 2026 height="24" 2027 viewBox="0 0 24 24" 2028 fill="none" 2029 stroke="currentColor" 2030 stroke-width="2" 2031 stroke-linecap="round" 2032 stroke-linejoin="round" 2033> 2034 <rect width="20" height="16" x="2" y="4" rx="2" /> 2035 <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" /> 2036</svg> 2037 </div> 2038 </div> 2039 <div 2040 class='w-24 xl:w-32 h-16 leading-tight lg:text-lg/tight xl:text-xl/tight lg:leading-tight flex items-end decoration-theme-light decoration-2 group-hover:underline relative text-pretty'> 2041 Newsletter Sign-Up </div> 2042</a> 2043 2044 2045</div> 2046 </div> 2047 </section> 2048 2049 <section class="my-0 grid grid-cols-12 gap-x-6 md:gap-x-8"> 2050 <div class="col-span-12 "> 2051 2052<section class="w-full my-12 lg:my-16 "> 2053 <header class="empty:hidden"> 2054 <h2 class='heading-2 m-0 mb-6 flex justify-between items-baseline'>
2055 <a 2056 class="group hover:text-blue-900 gap-x-4 w-full" 2057 href="https://nflibrary.ca/programs/list" 2058 > 2059 <span class=" decoration-blue-300 underline-offset-4"> 2060 Upcoming Programs </span> 2061 2062 <span class=' 2063 text-sm text-gray-400 flex items-center mt-1 underline-offset-4 decoration-blue-600 decoration-1 2064 group-hover:underline 2065 '> 2066 All Programs & Activities <span class='inline-block w-5 ml-1'> 2067 <svg 2068 xmlns="http://www.w3.org/2000/svg" 2069 width="24" 2070 height="24" 2071 viewBox="0 0 24 24" 2072 fill="none" 2073 stroke="currentColor" 2074 stroke-width="2" 2075 stroke-linecap="round" 2076 stroke-linejoin="round" 2077> 2078 <path d="m9 18 6-6-6-6" /> 2079</svg> 2080 </span> 2081 </span> 2082 </a> 2083 </h2> 2084 <p class="mb-6 text-pretty max-w-4xl"> 2085 Discover exciting programs and activities for all ages. From storytime sessions to workshops, there's something for everyone. Explore, learn, and connect with your community at our library! </p> 2086 </header> 2087 <div class="grid md:grid-cols-2 xl:grid-cols-4 gap-4 lg:gap-8 mt-8 mb-4"> 2088 2089<a 2090 href="https://nflibrary.ca/programs/chess-club-4022155" 2091 class="flex group h-full border border-gray-200 bg-white shadow-sm hover:shadow-md rounded-md transition-all hover:border-gray-300 overflow-hidden " 2092> 2093 2094 <div class=" p-2 relative w-16 shrink-0 bg-blue-100"> 2095 <!-- date ------------------------------- --> 2096 <div 2097 class="bg-gray-900 text-white w-full text-sm items-center p-1 py-2 rounded text-center font-semibold relative z-10 "> 2098 <div class="text-xs/none tracking-wide uppercase mb-1">Sep </div> 2099 <div class="text-2xl/none">24</div> 2100 </div> 2101 2102 <div 2103 class=' 2104 overflow-hidden top-8 bottom-0 left-0 w-full opacity-40 absolute bg-center bg-cover bg-blue-100 2105 before:bg-gradient-to-b before:from-blue-100 before:to-blue-100/0 before:h-24 before:absolute before:top-0 before:w-full before:z-[1] 2106 ' 2107 style="background-image: url('https://img.nflibrary.ca/b444W8a8fqInjkduyhnEybCHE7fUQ5jnYy1pat5vm4E/preset:xs-1x1/aHR0cHM6Ly9sY2ltYWdlcy1jYS5zMy5hbWF6b25hd3MuY29tL2RhdGEvZmVhdF9pbWcvNDEwNi83NDA5LzE2NjI2Njc5ND
2107MucG5n.webp')" 2108 ></div> 2109 2110 </div> 2111 2112 <div class="w-3/4 p-3 lg:p-4 grow flex flex-col gap-4 justify-between"> 2113 <header class="flex h-10 -my-1 items-center"> 2114 <div class="shrink w-full"> 2115 <!-- title ------------------------------- --> 2116 <h2 2117 class="leading-none line-clamp-2 lg:text-lg/none group-hover:underline font-heading font-semibold m-0 text-pretty decoration-2 decoration-blue-300" 2118 title="Chess Club" 2119 > 2120 Chess Club </h2> 2121 </div> 2122 </header> 2123 2124 2125 <footer class="flex flex-col gap-2"> 2126 <!-- info box ------------------------------- --> 2127 <div class="flex flex-wrap gap-1 text-sm "> 2128 2129 <div class="w-full leading-tight text-gray items-center truncate"> 2130 <span class="h-4 inline-flex items-center shrink-0 w-4 text-gray align-middle"> 2131 <svg 2132 xmlns="http://www.w3.org/2000/svg" 2133 width="24" 2134 height="24" 2135 viewBox="0 0 24 24" 2136 fill="none" 2137 stroke="currentColor" 2138 stroke-width="2" 2139 stroke-linecap="round" 2140 stroke-linejoin="round" 2141> 2142 <rect width="16" height="20" x="4" y="2" rx="2" ry="2" /> 2143 <path d="M9 22v-4h6v4" /> 2144 <path d="M8 6h.01" /> 2145 <path d="M16 6h.01" /> 2146 <path d="M12 6h.01" /> 2147 <path d="M12 10h.01" /> 2148 <path d="M12 14h.01" /> 2149 <path d="M16 10h.01" /> 2150 <path d="M16 14h.01" /> 2151 <path d="M8 10h.01" /> 2152 <path d="M8 14h.01" /> 2153</svg> 2154 </span> 2155 <span class="align-middle">Community Centre Library</span> 2156 </div> 2157 2158 <div class="w-full leading-tight text-gray items-center truncate"> 2159 <span class="h-4 inline-flex items-center shrink-0 w-4 text-gray align-middle"> 2160 <svg 2161 xmlns="http://www.w3.org/2000/svg" 2162 width="24" 2163 height="24" 2164 viewBox="0 0 24 24" 2165 fill="none" 2166 stroke="currentColor" 2167 stroke-width="2" 2168 stroke-linecap="round" 2169 stroke-linejoin="round" 2170> 2171 <circle cx="12" cy="12" r="10" /> 2172 <polyline points="12 6 12 12 16 14" /> 2173</svg> 2174 </span> 2175 <span class="align-middle">3:00pm - 6:00pm</span> 2176 </div> 2177 </div> 2178 2179 <!-- tags ------------------------------- --> 2180 <!-- audiences ------------------------------- --> 2181<div 2182 class="flex gap-1 mt-2 -mt-1 relative overflow-hidden -mr-1 text-xs/tight after:block after:bg-gradient-to-r after:from-transparent after:to-white after:absolute after:z-10 after:w-6 after:right-0 after:-top-1 after:-bottom-1 "> 2183 <div 2184 class="rounded text-nowrap border border-gray-950/10 p-1 px-2 bg-blue-200 text-blue-800"> 2185 Adults </div> 2186 <div 2187 class="rounded text-nowrap border border-gray-950/10 p-1 px-2 bg-pink-200 text-pink-800"> 2188 Teens </div> 2189 2190 <!-- categories ------------------------------- --> 2191 <div class=" rounded text-nowrap rounded bg-gray-50 border border-gray-200 text-gray-600 p-1 px-2"> 2192 Fun & Games </div> 2193 </div> 2194 2195 </footer> 2196 </div> 2197 2198</a> 2199<!-- decoration-blue-300 --> 2200<!-- decoration-pink-300 --> 2201<!-- decoration-orange-300 --> 2202 2203<a 2204 href="https://nflibrary.ca/programs/cultivating-indigenous-culture-through-songs-and-stories-4022636" 2205 class="flex group h-full border border-gray-200 bg-white shadow-sm hover:shadow-md rounded-md transition-all hover:border-gray-300 overflow-hidden " 2206> 2207 2208 <div class=" p-2 relative w-16 shrink-0 bg-blue-100"> 2209 <!-- date ------------------------------- --> 2210 <div 2211 class="bg-gray-900 text-white w-full text-sm items-center p-1 py-2 rounded text-center font-semibold relative z-10 "> 2212 <div class="text-xs/none tracking-wide uppercase mb-1">Sep </div> 2213 <div class="text-2xl/none">24</div> 2214 </div> 2215 2216 2217 </div> 2218 2219 <div class="w-3/4 p-3 lg:p-4 grow flex flex-col gap-4 justify-between"> 2220 <header class="flex h-10 -my-1 items-center"> 2221 <div class="shrink w-full"> 2222 <!-- title ------------------------------- --> 2223 <h2 2224 class="leading-none line-clamp-2 lg:text-lg/none group-hover:underline font-heading font-semibold m-0 text-pretty decoration-2 decoration-blue-300" 2225 title="Cultivating Indigenous Culture Through Songs and Stories" 2226 > 2227 Cultivating Indigenous Culture Through Songs and Stories </h2> 2228 </div> 2229 </header> 2230 2231 2232 <footer class="flex flex-col gap-2"> 2233 <!-- info box ------------------------------- --> 2234 <div class="flex flex-wrap gap-1 text-sm "> 2235 2236 <div class="w-full leading-tight text-gray items-center truncate"> 2237 <span class="h-4 inline-flex items-center shrink-0 w-4 text-gray align-middle"> 2238 <svg 2239 xmlns="http://www.w3.org/2000/svg" 2240 width="24" 2241 height="24" 2242 viewBox="0 0 24 24" 2243 fill="none" 2244 stroke="currentColor" 2245 stroke-width="2" 2246 stroke-linecap="round" 2247 stroke-linejoin="round" 2248> 2249 <rect width="16" height="20" x="4" y="2" rx="2" ry="2" /> 2250 <path d="M9 22v-4h6v4" /> 2251 <path d="M8 6h.01" /> 2252 <path d="M16 6h.01" /> 2253 <path d="M12 6h.01" /> 2254 <path d="M12 10h.01" /> 2255 <path d="M12 14h.01" /> 2256 <path d="M16 10h.01" /> 2257 <path d="M16 14h.01" /> 2258 <path d="M8 10h.01" /> 2259 <path d="M8 14h.01" /> 2260</svg> 2261 </span> 2262 <span class="align-middle">Offsite - see description for details</span> 2263 </div> 2264 2265 <div class="w-full leading-tight text-gray items-center truncate"> 2266 <span class="h-4 inline-flex items-center shrink-0 w-4 text-gray align-middle"> 2267 <svg 2268 xmlns="http://www.w3.org/2000/svg" 2269 width="24" 2270 height="24" 2271 viewBox="0 0 24 24" 2272 fill="none" 2273 stroke="currentColor" 2274 stroke-width="2" 2275 stroke-linecap="round" 2276 stroke-linejoin="round" 2277> 2278 <circle cx="12" cy="12" r="10" /> 2279 <polyline points="12 6 12 12 16 14" /> 2280</svg> 2281 </span> 2282 <span class="align-middle">5:00pm - 8:00pm</span> 2283 </div> 2284 </div> 2285 2286 <!-- tags ------------------------------- -->
2287 <!-- audiences ------------------------------- --> 2288<div 2289 class="flex gap-1 mt-2 -mt-1 relative overflow-hidden -mr-1 text-xs/tight after:block after:bg-gradient-to-r after:from-transparent after:to-white after:absolute after:z-10 after:w-6 after:right-0 after:-top-1 after:-bottom-1 "> 2290 <div 2291 class="rounded text-nowrap border border-gray-950/10 p-1 px-2 bg-blue-200 text-blue-800"> 2292 Adults </div> 2293 <div 2294 class="rounded text-nowrap border border-gray-950/10 p-1 px-2 bg-orange-200 text-orange-800"> 2295 Children </div> 2296 <div 2297 class="rounded text-nowrap border border-gray-950/10 p-1 px-2 bg-pink-200 text-pink-800"> 2298 Teens </div> 2299 2300 <!-- categories ------------------------------- --> 2301 <div class=" rounded text-nowrap rounded bg-gray-50 border border-gray-200 text-gray-600 p-1 px-2"> 2302 Special Event </div> 2303 </div> 2304 2305 </footer> 2306 </div> 2307 2308</a> 2309<!-- decoration-blue-300 --> 2310<!-- decoration-pink-300 --> 2311<!-- decoration-orange-300 --> 2312 2313<a 2314 href="https://nflibrary.ca/programs/earlyon-outdoor-fun-4055702" 2315 class="flex group h-full border border-gray-200 bg-white shadow-sm hover:shadow-md rounded-md transition-all hover:border-gray-300 overflow-hidden " 2316> 2317 2318 <div class=" p-2 relative w-16 shrink-0 bg-earlyon-100"> 2319 <!-- date ------------------------------- --> 2320 <div 2321 class="bg-gray-900 text-white w-full text-sm items-center p-1 py-2 rounded text-center font-semibold relative z-10 "> 2322 <div class="text-xs/none tracking-wide uppercase mb-1">Sep </div> 2323 <div class="text-2xl/none">25</div> 2324 </div> 2325 2326 <div 2327 class=' 2328 overflow-hidden top-8 bottom-0 left-0 w-full opacity-40 absolute bg-center bg-cover bg-earlyon-100 2329 before:bg-gradient-to-b before:from-earlyon-100 before:to-earlyon-100/0 before:h-24 before:absolute before:top-0 before:w-full before:z-[1] 2330 ' 2331 style="background-image: url('https://img.nflibrary.ca/Yxz3NbG1vI2id24T70evYIPn9Ob-t4UmjESoVsEgyoc/preset:xs-1x1/aHR0cHM6Ly9kZXZnajAwdng5MmpiLmNsb3VkZnJvbnQubmV0L2RhdGEvZmVhdF9pbWcvNDEwNi90ZW1wbGF0ZS8xNzU2NDkyNTA0LnBuZw.webp')" 2332 ></div> 2333 2334 </div> 2335 2336 <div class="w-3/4 p-3 lg:p-4 grow flex flex-col gap-4 justify-between"> 2337 <header class="flex h-10 -my-1 items-center"> 2338 <div class="shrink w-full"> 2339 <!-- title ------------------------------- --> 2340 <h2 2341 class="leading-none line-clamp-2 lg:text-lg/none group-hover:underline font-heading font-semibold m-0 text-pretty decoration-2 decoration-earlyon-300" 2342 title="EarlyON - Outdoor Fun!" 2343 > 2344 EarlyON - Outdoor Fun! </h2> 2345 </div> 2346 </header> 2347 2348 2349 <footer class="flex flex-col gap-2"> 2350 <!-- info box ------------------------------- --> 2351 <div class="flex flex-wrap gap-1 text-sm "> 2352 2353 <div class="w-full leading-tight text-gray items-center truncate"> 2354 <span class="h-4 inline-flex items-center shrink-0 w-4 text-gray align-middle"> 2355 <svg 2356 xmlns="http://www.w3.org/2000/svg" 2357 width="24" 2358 height="24" 2359 viewBox="0 0 24 24" 2360 fill="none" 2361 stroke="currentColor" 2362 stroke-width="2" 2363 stroke-linecap="round" 2364 stroke-linejoin="round" 2365> 2366 <rect width="16" height="20" x="4" y="2" rx="2" ry="2" /> 2367 <path d="M9 22v-4h6v4" /> 2368 <path d="M8 6h.01" /> 2369 <path d="M16 6h.01" /> 2370 <path d="M12 6h.01" /> 2371 <path d="M12 10h.01" /> 2372 <path d="M12 14h.01" /> 2373 <path d="M16 10h.01" /> 2374 <path d="M16 14h.01" /> 2375 <path d="M8 10h.01" /> 2376 <path d="M8 14h.01" /> 2377</svg> 2378 </span> 2379 <span class="align-middle">Offsite - see description for details</span> 2380 </div> 2381 2382 <div class="w-full leading-tight text-gray items-center truncate"> 2383 <span class="h-4 inline-flex items-center shrink-0 w-4 text-gray align-middle"> 2384 <svg 2385 xmlns="http://www.w3.org/2000/svg" 2386 width="24" 2387 height="24" 2388 viewBox="0 0 24 24" 2389 fill="none" 2390 stroke="currentColor" 2391 stroke-width="2" 2392 stroke-linecap="round" 2393 stroke-linejoin="round" 2394> 2395 <circle cx="12" cy="12" r="10" /> 2396 <polyline points="12 6 12 12 16 14" /> 2397</svg> 2398 </span> 2399 <span class="align-middle">9:00am - 12:00pm</span> 2400 </div> 2401 </div> 2402 2403 <!-- tags ------------------------------- -->
2404 <!-- audiences ------------------------------- --> 2405<div 2406 class="flex gap-1 mt-2 -mt-1 relative overflow-hidden -mr-1 text-xs/tight after:block after:bg-gradient-to-r after:from-transparent after:to-white after:absolute after:z-10 after:w-6 after:right-0 after:-top-1 after:-bottom-1 "> 2407 <div 2408 class="rounded text-nowrap border border-gray-950/10 p-1 px-2 bg-earlyon-200 text-earlyon-800"> 2409 EarlyON </div> 2410 <div 2411 class="rounded text-nowrap border border-gray-950/10 p-1 px-2 bg-orange-200 text-orange-800"> 2412 Children </div> 2413 2414 <!-- categories ------------------------------- --> 2415 </div> 2416 2417 </footer> 2418 </div> 2419 2420</a> 2421<!-- decoration-blue-300 --> 2422<!-- decoration-pink-300 --> 2423<!-- decoration-orange-300 --> 2424 2425<a 2426 href="https://nflibrary.ca/programs/earlyon-play-learn-connect-4055611" 2427 class="flex group h-full border border-gray-200 bg-white shadow-sm hover:shadow-md rounded-md transition-all hover:border-gray-300 overflow-hidden " 2428> 2429 2430 <div class=" p-2 relative w-16 shrink-0 bg-earlyon-100"> 2431 <!-- date ------------------------------- --> 2432 <div 2433 class="bg-gray-900 text-white w-full text-sm items-center p-1 py-2 rounded text-center font-semibold relative z-10 "> 2434 <div class="text-xs/none tracking-wide uppercase mb-1">Sep </div> 2435 <div class="text-2xl/none">25</div> 2436 </div> 2437 2438 <div 2439 class=' 2440 overflow-hidden top-8 bottom-0 left-0 w-full opacity-40 absolute bg-center bg-cover bg-earlyon-100 2441 before:bg-gradient-to-b before:from-earlyon-100 before:to-earlyon-100/0 before:h-24 before:absolute before:top-0 before:w-full before:z-[1] 2442 ' 2443 style="background-image: url('https://img.nflibrary.ca/Yxz3NbG1vI2id24T70evYIPn9Ob-t4UmjESoVsEgyoc/preset:xs-1x1/aHR0cHM6Ly9kZXZnajAwdng5MmpiLmNsb3VkZnJvbnQubmV0L2RhdGEvZmVhdF9pbWcvNDEwNi90ZW1wbGF0ZS8xNzU2NDkyNTA0LnBuZw.webp')" 2444 ></div> 2445 2446 </div> 2447 2448 <div class="w-3/4 p-3 lg:p-4 grow flex flex-col gap-4 justify-between"> 2449 <header class="flex h-10 -my-1 items-center"> 2450 <div class="shrink w-full"> 2451 <!-- title ------------------------------- --> 2452 <h2 2453 class="leading-none line-clamp-2 lg:text-lg/none group-hover:underline font-heading font-semibold m-0 text-pretty decoration-2 decoration-earlyon-300" 2454 title="EarlyON - Play, Learn & Connect" 2455 > 2456 EarlyON - Play, Learn & Connect </h2> 2457 </div> 2458 </header> 2459 2460 2461 <footer class="flex flex-col gap-2"> 2462 <!-- info box ------------------------------- --> 2463 <div class="flex flex-wrap gap-1 text-sm "> 2464 2465 <div class="w-full leading-tight text-gray items-center truncate"> 2466 <span class="h-4 inline-flex items-center shrink-0 w-4 text-gray align-middle"> 2467 <svg 2468 xmlns="http://www.w3.org/2000/svg" 2469 width="24" 2470 height="24" 2471 viewBox="0 0 24 24" 2472 fill="none" 2473 stroke="currentColor" 2474 stroke-width="2" 2475 stroke-linecap="round" 2476 stroke-linejoin="round" 2477> 2478 <rect width="16" height="20" x="4" y="2" rx="2" ry="2" /> 2479 <path d="M9 22v-4h6v4" /> 2480 <path d="M8 6h.01" /> 2481 <path d="M16 6h.01" /> 2482 <path d="M12 6h.01" /> 2483 <path d="M12 10h.01" /> 2484 <path d="M12 14h.01" /> 2485 <path d="M16 10h.01" /> 2486 <path d="M16 14h.01" /> 2487 <path d="M8 10h.01" /> 2488 <path d="M8 14h.01" /> 2489</svg> 2490 </span> 2491 <span class="align-middle">Victoria Avenue Library</span> 2492 </div> 2493 2494 <div class="w-full leading-tight text-gray items-center truncate"> 2495 <span class="h-4 inline-flex items-center shrink-0 w-4 text-gray align-middle"> 2496 <svg 2497 xmlns="http://www.w3.org/2000/svg" 2498 width="24" 2499 height="24" 2500 viewBox="0 0 24 24" 2501 fill="none" 2502 stroke="currentColor" 2503 stroke-width="2" 2504 stroke-linecap="round" 2505 stroke-linejoin="round" 2506> 2507 <circle cx="12" cy="12" r="10" /> 2508 <polyline points="12 6 12 12 16 14" /> 2509</svg> 2510 </span> 2511 <span class="align-middle">9:00am - 12:00pm</span> 2512 </div> 2513 </div> 2514 2515 <!-- tags ------------------------------- --> 2516 <!-- audiences ------------------------------- --> 2517<div 2518 class="flex gap-1 mt-2 -mt-1 relative overflow-hidden -mr-1 text-xs/tight after:block after:bg-gradient-to-r after:from-transparent after:to-white after:absolute after:z-10 after:w-6 after:right-0 after:-top-1 after:-bottom-1 "> 2519 <div 2520 class="rounded text-nowrap border border-gray-950/10 p-1 px-2 bg-earlyon-200 text-earlyon-800"> 2521 EarlyON </div> 2522 <div 2523 class="rounded text-nowrap border border-gray-950/10 p-1 px-2 bg-orange-200 text-orange-800"> 2524 Children </div> 2525 2526 <!-- categories ------------------------------- --> 2527 </div> 2528 2529 </footer> 2530 </div> 2531 2532</a> 2533<!-- decoration-blue-300 --> 2534<!-- decoration-pink-300 --> 2535<!-- decoration-orange-300 --> 2536</div> 2537 </section> 2538 </div> 2539 </section> 2540 2541 <section class="my-6 md:my-8 grid grid-cols-12 gap-x-6 md:gap-x-8"> 2542 <div class="col-span-12 "> 2543 <div class="relative z-1 my-4"> 2544 <a 2545 aria-label="" 2546 href='https://nflibrary.ca/donate' 2547 class=" group block" 2548 > 2549 2550 <figure class="hidden lg:block"> 2551 <picture 2552 style="background-image: url('data:image/png;
2552base64, iVBORw0KGgoAAAANSUhEUgAAAA0AAAADCAMAAAB/P3U+AAAAdVBMVEUvNVczOls7Q2JIUGpYYHJrbnl9d32KfoGRgoiVho+YiJKehIymfH4xN1o3PV9BR2hPVXRiZ4B2d4qHg5CRipSWjpeXj5mYjZebhoyhfHsyOFs5PmJFSW5WWn1sbo6AgZuQj6OYl6WamqWZl6KXkpuZiI2ce3n5y61tAAAAAW9yTlQBz6J3mgAAADJJREFUCNdjYGBkYmZhZWPn4OTi5mHg5eMXEBQSFhEVE5eQZJCSlpGVk1dQVFJWUVUDAChVAuZTmuFdAAAAAElFTkSuQmCC')" 2553 class="w-full group rounded-md lg:rounded-lg relative flex bg-gray-200 bg-cover overflow-hidden aspect-auto" 2554 x-data="{ 2555 src: 'https://nflibrary.ca/media/pages/home/ed63e1282a-1751038985/donate-cta-1400x.png', 2556 srcset: 'https://nflibrary.ca/media/pages/home/ed63e1282a-1751038985/donate-cta-400x.png 400w, https://nflibrary.ca/media/pages/home/ed63e1282a-1751038985/donate-cta-800x.png 800w, https://nflibrary.ca/media/pages/home/ed63e1282a-1751038985/donate-cta-1200x.png 1200w, https://nflibrary.ca/media/pages/home/ed63e1282a-1751038985/donate-cta-1600x.png 1600w', 2557 srcset_webp: 'https://nflibrary.ca/media/pages/home/ed63e1282a-1751038985/donate-cta-400x.webp 400w, https://nflibrary.ca/media/pages/home/ed63e1282a-1751038985/donate-cta-800x.webp 800w, https://nflibrary.ca/media/pages/home/ed63e1282a-1751038985/donate-cta-1200x.webp 1200w, https://nflibrary.ca/media/pages/home/ed63e1282a-1751038985/donate-cta-1600x.webp 1600w', 2558 visible: false, 2559 }" 2560 x-intersect.once=" 2561 visible = true 2562 " 2563 > 2564 2565 <source 2566 :srcset="visible ? srcset_webp : ''" 2567 sizes="100vw" 2568 > 2569 <img 2570 width="1575" 2571 height="375" 2572 class="aspect-auto bg-gray-200 w-full overflow-hidden object-cover opacity-0 transition-opacity" 2573 :class="{ 2574 'bg-gray-200' : !src, 2575 'bg-white' : src, 2576 'opacity-0' : !visible, 2577 'opacity-100' : visible, 2578 }" 2579 src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAA0AAAADCAMAAAB/P3U+AAAAdVBMVEUvNVczOls7Q2JIUGpYYHJrbnl9d32KfoGRgoiVho+YiJKehIymfH4xN1o3PV9BR2hPVXRiZ4B2d4qHg5CRipSWjpeXj5mYjZebhoyhfHsyOFs5PmJFSW5WWn1sbo6AgZuQj6OYl6WamqWZl6KXkpuZiI2ce3n5y61tAAAAAW9yTlQBz6J3mgAAADJJREFUCNdjYGBkYmZhZWPn4OTi5mHg5eMXEBQSFhEVE5eQZJCSlpGVk1dQVFJWUVUDAChVAuZTmuFdAAAAAElFTkSuQmCC" 2580 :srcset="visible ? srcset : ''" 2581 alt="Donate - Support Your Library" 2582 > 2583 </picture> 2584 2585 </figure> 2586 2587 2588 <figure class="lg:hidden"> 2589 <picture 2590 style="background-image: url('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAwAAAAFCAMAAABGpP0dAAAArlBMVEUwNVcxNlkzOFs2O147P2JDRGdOSmxbTm9oUG10T2h9TWGCS1s1Olw3PF46P2E+Q2VFSWtPUXJbWXloYHx1Y3yAY3iIYHKOXmw3PV9ESWxNUnRZXX5maIdzcIx/dYyJdYqQc4WUcYE2PF45P2E+RGdGTW9SWXtgZohtc5J5fJmDgZuKg5mQgpaTgJMyOVw2PF88Q2ZGTnFTXX9ibI5vepl5g6CAiKOFiaKJiaGMiZ/uwM23AAAAAW9yTlQBz6J3mgAAAEhJREFUCNcFwQMCwDAQALCb3c62bf7/Y0sACJKiGZbjBVECWUFY1XTDtGwHXIQ9PwijOEkzyIuyqpu264dxgnlZt/04r/t5vx+NSgaTcaN2xQAAAABJRU5ErkJggg==')" 2591 class="w-full group rounded-md lg:rounded-lg relative flex bg-gray-200 bg-cover overflow-hidden aspect-auto" 2592 x-data="{ 2593 src: 'https://nflibrary.ca/media/pages/home/2034f55236-1755721584/donate-cta-mobile-1400x.png', 2594 srcset: 'https://nflibrary.ca/media/pages/home/2034f55236-1755721584/donate-cta-mobile-400x.png 400w, https://nflibrary.ca/media/pages/home/2034f55236-1755721584/donate-cta-mobile-800x.png 800w, https://nflibrary.ca/media/pages/home/2034f55236-1755721584/donate-cta-mobile-1200x.png 1200w, https://nflibrary.ca/media/pages/home/2034f55236-1755721584/donate-cta-mobile-1600x.png 1600w', 2595 srcset_webp: 'https://nflibrary.ca/media/pages/home/2034f55236-1755721584/donate-cta-mobile-400x.webp 400w, https://nflibrary.ca/media/pages/home/2034f55236-1755721584/donate-cta-mobile-800x.webp 800w, https://nflibrary.ca/media/pages/home/2034f55236-1755721584/donate-cta-mobile-1200x.webp 1200w, https://nflibrary.ca/media/pages/home/2034f55236-1755721584/donate-cta-mobile-1600x.webp 1600w', 2596 visible: false, 2597 }" 2598 x-intersect.once=" 2599 visible = true 2600 " 2601 > 2602 2603 <source 2604 :srcset="visible ? srcset_webp : ''" 2605 sizes="100vw" 2606 > 2607 <img 2608 width="1003" 2609 height="429" 2610 class="aspect-auto bg-gray-200 w-full overflow-hidden object-cover opacity-0 transition-opacity" 2611 :class="{ 2612 'bg-gray-200' : !src, 2613 'bg-white' : src, 2614 'opacity-0' : !visible, 2615 'opacity-100' : visible, 2616 }" 2617 src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAwAAAAFCAMAAABGpP0dAAAArlBMVEUwNVcxNlkzOFs2O147P2JDRGdOSmxbTm9oUG10T2h9TWGCS1s1Olw3PF46P2E+Q2VFSWtPUXJbWXloYHx1Y3yAY3iIYHKOXmw3PV9ESWxNUnRZXX5maIdzcIx/dYyJdYqQc4WUcYE2PF45P2E+RGdGTW9SWXtgZohtc5J5fJmDgZuKg5mQgpaTgJMyOVw2PF88Q2ZGTnFTXX9ibI5vepl5g6CAiKOFiaKJiaGMiZ/uwM23AAAAAW9yTlQBz6J3mgAAAEhJREFUCNcFwQMCwDAQALCb3c62bf7/Y0sACJKiGZbjBVECWUFY1XTDtGwHXIQ9PwijOEkzyIuyqpu264dxgnlZt/04r/t5vx+NSgaTcaN2xQAAAABJRU5ErkJggg==" 2618 :srcset="visible ? srcset : ''" 2619 alt="" 2620 > 2621 </picture> 2622 2623 </figure> 2624 2625 </a> 2626 </div> 2627 </div> 2628 </section> 2629 2630 <section class="my-0 grid grid-cols-12 gap-x-6 md:gap-x-8"> 2631 <div class="col-span-12 "> 2632 2633<section class="my-8 lg:my-16"> 2634 2635 <h2 class='heading-2 w-full mb-8 '> 2636 <a 2637 class='group hover:text-blue-700' 2638 href='https://nflibrary.ca/articles' 2639 > 2640 <span>Recent Articles</span> 2641 2642 <span class='text-sm text-gray-400 flex items-end group-hover:underline decoration-blue-600 mt-1'> 2643 View All Articles 2644 <span class='inline-block w-5 ml-1'> 2645 <svg 2646 xmlns="http://www.w3.org/2000/svg" 2647 width="24" 2648 height="24" 2649 viewBox="0 0 24 24" 2650 fill="none" 2651 stroke="currentColor" 2652 stroke-width="2" 2653 stroke-linecap="round" 2654 stroke-linejoin="round" 2655> 2656 <path d="m9 18 6-6-6-6" /> 2657</svg> 2658 </span> 2659 </span> 2660 </a> 2661 </h2> 2662 2663 <div class="grow gap-8 lg:gap-12 grid md:grid-cols-2"> 2664 <a 2665 href='https://nflibrary.ca/articles/niagara-falls-public-library-book-clubs-are-back-for-fall' 2666 class=" flex items-start sm:items-center gap-4 sm:gap-6 group" 2667 > 2668 <div 2669 class="bg-blue-300 w-1/4 max-w-32 md:w-32 shrink-0 rounded-md transition-all duration-500 group-hover:scale-110 "> 2670 <div 2671 class="bg-blue-300 border-blue-500 shadow-blue-500/25 overflow-hidden rounded-md -rotate-6 group-hover:rotate-6 border shadow-lg transition-all duration-500"> 2672 <picture 2673 style="background-image: url('data:image/png;base64, /9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pLSwzOko+MzZGNywtQFdBRkxOUlNSMj5aYVpQYEpRUk//2wBDAQ4ODhMREyYVFSZPNS01T09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0//wAARCAAGAAYDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAP/xAAaEAACAgMAAAAAAAAAAAAAAAAAAxEhAgZR/8QAFAEBAAAAAAAAAAAAAAAAAAAAAf/EABgRAAMBAQAAAAAAAAAAAAAAAAABAhJR/9oADAMBAAIRAxEAPwCS9bxi3X2AACuujlH/2Q==')" 2674 class="w-full transition-all duration-500 opacity-75 group-hover:opacity-100 bg-blue-300 flex bg-gray-200 bg-cover overflow-hidden aspect-1/1" 2675 x-data="{ 2676 src: 'https://nflibrary.ca/media/pages/articles/niagara-falls-public-library-book-clubs-are-back-for-fall/6135298bdb-1788979265/book-club-stack-column-1400x.jpg', 2677 srcset: 'https://nflibrary.ca/media/pages/articles/niagara-falls-public-library-book-clubs-are-back-for-fall/6135298bdb-1788979265/book-club-stack-column-400x400-crop-49-5-68-8.jpg 400w, https://nflibrary.ca/media/pages/articles/niagara-falls-public-library-book-clubs-are-back-for-fall/6135298bdb-1788979265/book-club-stack-column-800x800-crop-49-5-68-8.jpg 800w, https://nflibrary.ca/media/pages/articles/niagara-falls-public-library-book-clubs-are-back-for-fall/6135298bdb-1788979265/book-club-stack-column-1200x1200-crop-49-5-68-8.jpg 1200w, https://nflibrary.ca/media/pages/articles/niagara-falls-public-library-book-clubs-are-back-for-fall/6135298bdb-1788979265/book-club-stack-column-1600x1600-crop-49-5-68-8.jpg 1600w', 2678 srcset_webp: 'https://nflibrary.ca/media/pages/articles/niagara-falls-public-library-book-clubs-are-back-for-fall/6135298bdb-1788979265/book-club-stack-column-400x400-crop-49-5-68-8.webp 400w, https://nflibrary.ca/media/pages/articles/niagara-falls-public-library-book-clubs-are-back-for-fall/6135298bdb-1788979265/book-club-stack-column-800x800-crop-49-5-68-8.webp 800w, https://nflibrary.ca/media/pages/articles/niagara-falls-public-library-book-clubs-are-back-for-fall/6135298bdb-1788979265/book-club-stack-column-1200x1200-crop-49-5-68-8.webp 1200w, https://nflibrary.ca/media/pages/articles/niagara-falls-public-library-book-clubs-are-back-for-fall/6135298bdb-1788979265/book-club-stack-column-1600x1600-crop-49-5-68-8.webp 1600w', 2679 visible: false, 2680 }" 2681 x-intersect.once=" 2682 visible = true 2683 " 2684 > 2685 2686 <source 2687 :srcset="visible ? srcset_webp : ''" 2688 sizes="(min-width: 1536px) 800px, 2689 (min-width: 1280px) 600px, 2690 (min-width: 1024px) 600px, 2691 (min-width: 768px) 400px, 2692 (min-width: 640px) 600px,
2693 100vw" 2694 > 2695 <img 2696 width="1193" 2697 height="1601" 2698 class="aspect-1/1 bg-gray-200 w-full overflow-hidden object-cover opacity-0 transition-opacity" 2699 :class="{ 2700 'bg-gray-200' : !src, 2701 'bg-white' : src, 2702 'opacity-0' : !visible, 2703 'opacity-100' : visible, 2704 }" 2705 src="data:image/png;base64, /9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pLSwzOko+MzZGNywtQFdBRkxOUlNSMj5aYVpQYEpRUk//2wBDAQ4ODhMREyYVFSZPNS01T09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0//wAARCAAGAAYDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAP/xAAaEAACAgMAAAAAAAAAAAAAAAAAAxEhAgZR/8QAFAEBAAAAAAAAAAAAAAAAAAAAAf/EABgRAAMBAQAAAAAAAAAAAAAAAAABAhJR/9oADAMBAAIRAxEAPwCS9bxi3X2AACuujlH/2Q==" 2706 :srcset="visible ? srcset : ''" 2707 alt="" 2708 > 2709 </picture> 2710 2711 </div> 2712 </div> 2713 <div class=""> 2714 <h3 2715 class='heading-3 m-0 line-clamp-2 group-hover:underline decoration-blue-300 mb-1 w-full grow-0 leading-tight text-balance text-blue-500'> 2716 Niagara Falls Public Library’s book clubs are back for fall </h3> 2717 <div class="flex flex-wrap gap-x-4 text-sm text-gray-600"> 2718 <!-- <p class='m-0 font-semibold'>Tricia Everaert</p> --> 2719 <p class='m-0 font-bold'> 2720 Tuesday, September 15 2026 </p> 2721 </div> 2722 <p class="text-gray-400 mt-2 line-clamp-2 text-sm">Come to a library book club for a social time out of the house or to talk about your latest read, writes Tricia Everaert.</p> 2723 </div> 2724 </a> 2725 <a 2726 href='https://nflibrary.ca/articles/nostalgia-reads' 2727 class=" flex items-start sm:items-center gap-4 sm:gap-6 group" 2728 > 2729 <div 2730 class="bg-green-300 w-1/4 max-w-32 md:w-32 shrink-0 rounded-md transition-all duration-500 group-hover:scale-110 "> 2731 <div 2732 class="bg-green-300 border-green-500 shadow-green-500/25 overflow-hidden rounded-md -rotate-6 group-hover:rotate-6 border shadow-lg transition-all duration-500"> 2733 <picture 2734 style="background-image: url('data:image/png;base64, /9j/4AAQSkZJRgABAQEASABIAAD/4gJkSUNDX1BST0ZJTEUAAQEAAAJUAAAAAAQAAABtbnRyUkdCIFhZWiAH5wADAAkACgA5AABhY3NwAAAAAAAAAABHT09HAAAAAAAAAAAAAAAAAAAAAAAA9tYAAQAAAADTLUdPT0dhRzUo1aqjEeFD38k++qJoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAtkZXNjAAABCAAAAEBjcHJ0AAABSAAAAFp3dHB0AAABpAAAABRia3B0AAABuAAAABRyWFlaAAABzAAAABRnWFlaAAAB4AAAABRiWFlaAAAB9AAAABRyVFJDAAACCAAAACBjaGFkAAACKAAAACxiVFJDAAACCAAAACBnVFJDAAACCAAAACBtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACQAAAAcAHMAUgBHAEIAIABJAEUAQwA2ADEAOQA2ADYALQAyAC4AMQAAbWx1YwAAAAAAAAABAAAADGVuVVMAAAA+AAAAHABDAG8AcAB5AHIAaQBnAGgAdAAgACgAYwApACAAMgAwADIAMwAgAEcAbwBvAGcAbABlACAASQBuAGMALgAAAABYWVogAAAAAAAA9tYAAQAAAADTLVhZWiAAAAAAAAAAAAAAAAAAAAAAWFlaIAAAAAAAAG+gAAA49QAAA5BYWVogAAAAAAAAYpcAALeHAAAY2VhZWiAAAAAAAAAknwAAD4QAALbDcGFyYQAAAAAAAwAAAAJmZgAA8qcAAA1ZAAAT0AAACltzZjMyAAAAAAABDEIAAAXe///zJwAAB5MAAP2Q///7o////aQAAAPcAADAbv/bAEMADQkKCwoIDQsKCw4ODQ8TIBUTEhITJxweFyAuKTEwLiktLDM6Sj4zNkY3LC1AV0FGTE5SU1IyPlphWlBgSlFST//bAEMBDg4OExETJhUVJk81LTVPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT//AABEIAAYABgMBIgACEQEDEQH/xAAUAAEAAAAAAAAAAAAAAAAAAAAA/8QAGBAAAwEBAAAAAAAAAAAAAAAAAAEEERP/xAAVAQEBAAAAAAAAAAAAAAAAAAADBP/EABcRAAMBAAAAAAAAAAAAAAAAAAABAhL/2gAMAwEAAhEDEQA/ADotT3uACZXQ2Ef/2Q==')" 2735 class="w-full transition-all duration-500 opacity-75 group-hover:opacity-100 bg-green-300 flex bg-gray-200 bg-cover overflow-hidden aspect-1/1" 2736 x-data="{ 2737 src: 'https://nflibrary.ca/media/pages/articles/nostalgia-reads/45f2bcdd0f-1789340326/nostalgia-reads-1400x.jpg', 2738 srcset: 'https://nflibrary.ca/media/pages/articles/nostalgia-reads/45f2bcdd0f-1789340326/nostalgia-reads-400x400-crop.jpg 400w, https://nflibrary.ca/media/pages/articles/nostalgia-reads/45f2bcdd0f-1789340326/nostalgia-reads-800x800-crop.jpg 800w, https://nflibrary.ca/media/pages/articles/nostalgia-reads/45f2bcdd0f-1789340326/nostalgia-reads-1200x1200-crop.jpg 1200w, https://nflibrary.ca/media/pages/articles/nostalgia-reads/45f2bcdd0f-1789340326/nostalgia-reads-1600x1600-crop.jpg 1600w', 2739 srcset_webp: 'https://nflibrary.ca/media/pages/articles/nostalgia-reads/45f2bcdd0f-1789340326/nostalgia-reads-400x400-crop.webp 400w, https://nflibrary.ca/media/pages/articles/nostalgia-reads/45f2bcdd0f-1789340326/nostalgia-reads-800x800-crop.webp 800w, https://nflibrary.ca/media/pages/articles/nostalgia-reads/45f2bcdd0f-1789340326/nostalgia-reads-1200x1200-crop.webp 1200w, https://nflibrary.ca/media/pages/articles/nostalgia-reads/45f2bcdd0f-1789340326/nostalgia-reads-1600x1600-crop.webp 1600w', 2740 visible: false, 2741 }" 2742 x-intersect.once=" 2743 visible = true 2744 " 2745 > 2746 2747 <source 2748 :srcset="visible ? srcset_webp : ''" 2749 sizes="(min-width: 1536px) 800px, 2750 (min-width: 1280px) 600px, 2751 (min-width: 1024px) 600px, 2752 (min-width: 768px) 400px, 2753 (min-width: 640px) 600px,
2754 100vw" 2755 > 2756 <img 2757 width="2400" 2758 height="1350" 2759 class="aspect-1/1 bg-gray-200 w-full overflow-hidden object-cover opacity-0 transition-opacity" 2760 :class="{ 2761 'bg-gray-200' : !src, 2762 'bg-white' : src, 2763 'opacity-0' : !visible, 2764 'opacity-100' : visible, 2765 }" 2766 src="data:image/png;base64, /9j/4AAQSkZJRgABAQEASABIAAD/4gJkSUNDX1BST0ZJTEUAAQEAAAJUAAAAAAQAAABtbnRyUkdCIFhZWiAH5wADAAkACgA5AABhY3NwAAAAAAAAAABHT09HAAAAAAAAAAAAAAAAAAAAAAAA9tYAAQAAAADTLUdPT0dhRzUo1aqjEeFD38k++qJoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAtkZXNjAAABCAAAAEBjcHJ0AAABSAAAAFp3dHB0AAABpAAAABRia3B0AAABuAAAABRyWFlaAAABzAAAABRnWFlaAAAB4AAAABRiWFlaAAAB9AAAABRyVFJDAAACCAAAACBjaGFkAAACKAAAACxiVFJDAAACCAAAACBnVFJDAAACCAAAACBtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACQAAAAcAHMAUgBHAEIAIABJAEUAQwA2ADEAOQA2ADYALQAyAC4AMQAAbWx1YwAAAAAAAAABAAAADGVuVVMAAAA+AAAAHABDAG8AcAB5AHIAaQBnAGgAdAAgACgAYwApACAAMgAwADIAMwAgAEcAbwBvAGcAbABlACAASQBuAGMALgAAAABYWVogAAAAAAAA9tYAAQAAAADTLVhZWiAAAAAAAAAAAAAAAAAAAAAAWFlaIAAAAAAAAG+gAAA49QAAA5BYWVogAAAAAAAAYpcAALeHAAAY2VhZWiAAAAAAAAAknwAAD4QAALbDcGFyYQAAAAAAAwAAAAJmZgAA8qcAAA1ZAAAT0AAACltzZjMyAAAAAAABDEIAAAXe///zJwAAB5MAAP2Q///7o////aQAAAPcAADAbv/bAEMADQkKCwoIDQsKCw4ODQ8TIBUTEhITJxweFyAuKTEwLiktLDM6Sj4zNkY3LC1AV0FGTE5SU1IyPlphWlBgSlFST//bAEMBDg4OExETJhUVJk81LTVPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT//AABEIAAYABgMBIgACEQEDEQH/xAAUAAEAAAAAAAAAAAAAAAAAAAAA/8QAGBAAAwEBAAAAAAAAAAAAAAAAAAEEERP/xAAVAQEBAAAAAAAAAAAAAAAAAAADBP/EABcRAAMBAAAAAAAAAAAAAAAAAAABAhL/2gAMAwEAAhEDEQA/ADotT3uACZXQ2Ef/2Q==" 2767 :srcset="visible ? srcset : ''" 2768 alt="" 2769 > 2770 </picture> 2771 2772 </div> 2773 </div> 2774 <div class=""> 2775 <h3 2776 class='heading-3 m-0 line-clamp-2 group-hover:underline decoration-green-300 mb-1 w-full grow-0 leading-tight text-balance text-green-500'> 2777 Nostalgia Reads </h3> 2778 <div class="flex flex-wrap gap-x-4 text-sm text-gray-600"> 2779 <!-- <p class='m-0 font-semibold'>Stephanie Topping</p> --> 2780 <p class='m-0 font-bold'> 2781 Monday, September 14 2026 </p> 2782 </div> 2783 <p class="text-gray-400 mt-2 line-clamp-2 text-sm"></p> 2784 </div> 2785 </a> 2786 <a 2787 href='https://nflibrary.ca/articles/still-time-to-squeeze-more-reading-out-of-summer-at-niagara-falls-public-library' 2788 class=" flex items-start sm:items-center gap-4 sm:gap-6 group" 2789 > 2790 <div 2791 class="bg-red-300 w-1/4 max-w-32 md:w-32 shrink-0 rounded-md transition-all duration-500 group-hover:scale-110 "> 2792 <div 2793 class="bg-red-300 border-red-500 shadow-red-500/25 overflow-hidden rounded-md -rotate-6 group-hover:rotate-6 border shadow-lg transition-all duration-500"> 2794 <picture 2795 style="background-image: url('data:image/png;base64, /9j/4AAQSkZJRgABAQEASABIAAD/4gJYSUNDX1BST0ZJTEUAAQEAAAJIAAAAAAQAAABtbnRyUkdCIFhZWiAH5wADAAkACgA5AABhY3NwAAAAAAAAAABHT09HAAAAAAAAAAAAAAAAAAAAAAAA9tYAAQAAAADTLUdPT0e7YySopQkbu102+a+kD5q5AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAtkZXNjAAABCAAAADJjcHJ0AAABPAAAAFp3dHB0AAABmAAAABRia3B0AAABrAAAABRyWFlaAAABwAAAABRnWFlaAAAB1AAAABRiWFlaAAAB6AAAABRyVFJDAAAB/AAAACBjaGFkAAACHAAAACxiVFJDAAAB/AAAACBnVFJDAAAB/AAAACBtbHVjAAAAAAAAAAEAAAAMZW5VUwAAABYAAAAcAEQAaQBzAHAAbABhAHkAIABQADMAAAAAbWx1YwAAAAAAAAABAAAADGVuVVMAAAA+AAAAHABDAG8AcAB5AHIAaQBnAGgAdAAgACgAYwApACAAMgAwADIAMwAgAEcAbwBvAGcAbABlACAASQBuAGMALgAAAABYWVogAAAAAAAA9tYAAQAAAADTLVhZWiAAAAAAAAAAAAAAAAAAAAAAWFlaIAAAAAAAAIPfAAA9v////7xYWVogAAAAAAAASr8AALE3AAAKuVhZWiAAAAAAAAAoOAAAEQsAAMi5cGFyYQAAAAAAAwAAAAJmZgAA8qcAAA1ZAAAT0AAACltzZjMyAAAAAAABDEIAAAXe///zJwAAB5MAAP2Q///7o////aQAAAPcAADAbv/bAEMADQkKCwoIDQsKCw4ODQ8TIBUTEhITJxweFyAuKTEwLiktLDM6Sj4zNkY3LC1AV0FGTE5SU1IyPlphWlBgSlFST//bAEMBDg4OExETJhUVJk81LTVPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT//AABEIAAYABgMBIgACEQEDEQH/xAAVAAEBAAAAAAAAAAAAAAAAAAAABP/EABwQAAICAgMAAAAAAAAAAAAAAAADAQIEEQUhUf/EABUBAQEAAAAAAAAAAAAAAAAAAAID/8QAGBEAAwEBAAAAAAAAAAAAAAAAAAECESH/2gAMAwEAAhEDEQA/AJ38lmZlF2a3rW4jwAAcrSkvh//Z')" 2796 class="w-full transition-all duration-500 opacity-75 group-hover:opacity-100 bg-red-300 flex bg-gray-200 bg-cover overflow-hidden aspect-1/1" 2797 x-data="{ 2798 src: 'https://nflibrary.ca/media/pages/articles/still-time-to-squeeze-more-reading-out-of-summer-at-niagara-falls-public-library/a70443ab12-1787841800/book-fair-reading-nfpl-1400x.jpg', 2799 srcset: 'https://nflibrary.ca/media/pages/articles/still-time-to-squeeze-more-reading-out-of-summer-at-niagara-falls-public-library/a70443ab12-1787841800/book-fair-reading-nfpl-400x400-crop.jpg 400w, https://nflibrary.ca/media/pages/articles/still-time-to-squeeze-more-reading-out-of-summer-at-niagara-falls-public-library/a70443ab12-1787841800/book-fair-reading-nfpl-800x800-crop.jpg 800w, https://nflibrary.ca/media/pages/articles/still-time-to-squeeze-more-reading-out-of-summer-at-niagara-falls-public-library/a70443ab12-1787841800/book-fair-reading-nfpl-1200x1200-crop.jpg 1200w, https://nflibrary.ca/media/pages/articles/still-time-to-squeeze-more-reading-out-of-summer-at-niagara-falls-public-library/a70443ab12-1787841800/book-fair-reading-nfpl-1600x1600-crop.jpg 1600w', 2800 srcset_webp: 'https://nflibrary.ca/media/pages/articles/still-time-to-squeeze-more-reading-out-of-summer-at-niagara-falls-public-library/a70443ab12-1787841800/book-fair-reading-nfpl-400x400-crop.webp 400w, https://nflibrary.ca/media/pages/articles/still-time-to-squeeze-more-reading-out-of-summer-at-niagara-falls-public-library/a70443ab12-1787841800/book-fair-reading-nfpl-800x800-crop.webp 800w, https://nflibrary.ca/media/pages/articles/still-time-to-squeeze-more-reading-out-of-summer-at-niagara-falls-public-library/a70443ab12-1787841800/book-fair-reading-nfpl-1200x1200-crop.webp 1200w, https://nflibrary.ca/media/pages/articles/still-time-to-squeeze-more-reading-out-of-summer-at-niagara-falls-public-library/a70443ab12-1787841800/book-fair-reading-nfpl-1600x1600-crop.webp 1600w', 2801 visible: false, 2802 }" 2803 x-intersect.once=" 2804 visible = true 2805 " 2806 > 2807 2808 <source 2809 :srcset="visible ? srcset_webp : ''" 2810 sizes="(min-width: 1536px) 800px, 2811 (min-width: 1280px) 600px, 2812 (min-width: 1024px) 600px, 2813 (min-width: 768px) 400px, 2814 (min-width: 640px) 600px,
2815 100vw" 2816 > 2817 <img 2818 width="2400" 2819 height="1350" 2820 class="aspect-1/1 bg-gray-200 w-full overflow-hidden object-cover opacity-0 transition-opacity" 2821 :class="{ 2822 'bg-gray-200' : !src, 2823 'bg-white' : src, 2824 'opacity-0' : !visible, 2825 'opacity-100' : visible, 2826 }" 2827 src="data:image/png;base64, /9j/4AAQSkZJRgABAQEASABIAAD/4gJYSUNDX1BST0ZJTEUAAQEAAAJIAAAAAAQAAABtbnRyUkdCIFhZWiAH5wADAAkACgA5AABhY3NwAAAAAAAAAABHT09HAAAAAAAAAAAAAAAAAAAAAAAA9tYAAQAAAADTLUdPT0e7YySopQkbu102+a+kD5q5AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAtkZXNjAAABCAAAADJjcHJ0AAABPAAAAFp3dHB0AAABmAAAABRia3B0AAABrAAAABRyWFlaAAABwAAAABRnWFlaAAAB1AAAABRiWFlaAAAB6AAAABRyVFJDAAAB/AAAACBjaGFkAAACHAAAACxiVFJDAAAB/AAAACBnVFJDAAAB/AAAACBtbHVjAAAAAAAAAAEAAAAMZW5VUwAAABYAAAAcAEQAaQBzAHAAbABhAHkAIABQADMAAAAAbWx1YwAAAAAAAAABAAAADGVuVVMAAAA+AAAAHABDAG8AcAB5AHIAaQBnAGgAdAAgACgAYwApACAAMgAwADIAMwAgAEcAbwBvAGcAbABlACAASQBuAGMALgAAAABYWVogAAAAAAAA9tYAAQAAAADTLVhZWiAAAAAAAAAAAAAAAAAAAAAAWFlaIAAAAAAAAIPfAAA9v////7xYWVogAAAAAAAASr8AALE3AAAKuVhZWiAAAAAAAAAoOAAAEQsAAMi5cGFyYQAAAAAAAwAAAAJmZgAA8qcAAA1ZAAAT0AAACltzZjMyAAAAAAABDEIAAAXe///zJwAAB5MAAP2Q///7o////aQAAAPcAADAbv/bAEMADQkKCwoIDQsKCw4ODQ8TIBUTEhITJxweFyAuKTEwLiktLDM6Sj4zNkY3LC1AV0FGTE5SU1IyPlphWlBgSlFST//bAEMBDg4OExETJhUVJk81LTVPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT//AABEIAAYABgMBIgACEQEDEQH/xAAVAAEBAAAAAAAAAAAAAAAAAAAABP/EABwQAAICAgMAAAAAAAAAAAAAAAADAQIEEQUhUf/EABUBAQEAAAAAAAAAAAAAAAAAAAID/8QAGBEAAwEBAAAAAAAAAAAAAAAAAAECESH/2gAMAwEAAhEDEQA/AJ38lmZlF2a3rW4jwAAcrSkvh//Z" 2828 :srcset="visible ? srcset : ''" 2829 alt="" 2830 > 2831 </picture> 2832 2833 </div> 2834 </div> 2835 <div class=""> 2836 <h3 2837 class='heading-3 m-0 line-clamp-2 group-hover:underline decoration-red-300 mb-1 w-full grow-0 leading-tight text-balance text-red-500'> 2838 Still time to squeeze more reading out of summer at Niagara Falls Public Library </h3> 2839 <div class="flex flex-wrap gap-x-4 text-sm text-gray-600"> 2840 <!-- <p class='m-0 font-semibold'>Kim Hetherington</p> --> 2841 <p class='m-0 font-bold'> 2842 Wednesday, August 26 2026 </p> 2843 </div> 2844 <p class="text-gray-400 mt-2 line-clamp-2 text-sm">You can keep track of your progress right up until the Summer Reading Club wraps up on Aug. 29, Kim Hetherington writes.</p> 2845 </div> 2846 </a> 2847 <a 2848 href='https://nflibrary.ca/articles/from-daredevil-stunts-to-sightseeing-tours-100-years-of-aviation-over-niagara-falls' 2849 class=" flex items-start sm:items-center gap-4 sm:gap-6 group" 2850 > 2851 <div 2852 class="bg-pink-300 w-1/4 max-w-32 md:w-32 shrink-0 rounded-md transition-all duration-500 group-hover:scale-110 "> 2853 <div 2854 class="bg-pink-300 border-pink-500 shadow-pink-500/25 overflow-hidden rounded-md -rotate-6 group-hover:rotate-6 border shadow-lg transition-all duration-500"> 2855 <picture 2856 style="background-image: url('data:image/png;base64, /9j/4AAQSkZJRgABAQEBLAEsAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pLSwzOko+MzZGNywtQFdBRkxOUlNSMj5aYVpQYEpRUk//2wBDAQ4ODhMREyYVFSZPNS01T09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0//wAARCAAGAAYDAREAAhEBAxEB/8QAFAABAAAAAAAAAAAAAAAAAAAABv/EABkQAAMAAwAAAAAAAAAAAAAAAAECAwAFYf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8ASw2EldlESo5kH//Z')" 2857 class="w-full transition-all duration-500 opacity-75 group-hover:opacity-100 bg-pink-300 flex bg-gray-200 bg-cover overflow-hidden aspect-1/1" 2858 x-data="{ 2859 src: 'https://nflibrary.ca/media/pages/articles/from-daredevil-stunts-to-sightseeing-tours-100-years-of-aviation-over-niagara-falls/64fba4d993-1787163415/aug-2026-lh-column-pic-2-1400x.jpg', 2860 srcset: 'https://nflibrary.ca/media/pages/articles/from-daredevil-stunts-to-sightseeing-tours-100-years-of-aviation-over-niagara-falls/64fba4d993-1787163415/aug-2026-lh-column-pic-2-400x400-crop.jpg 400w, https://nflibrary.ca/media/pages/articles/from-daredevil-stunts-to-sightseeing-tours-100-years-of-aviation-over-niagara-falls/64fba4d993-1787163415/aug-2026-lh-column-pic-2-800x800-crop.jpg 800w, https://nflibrary.ca/media/pages/articles/from-daredevil-stunts-to-sightseeing-tours-100-years-of-aviation-over-niagara-falls/64fba4d993-1787163415/
2860aug-2026-lh-column-pic-2-1200x1200-crop.jpg 1200w, https://nflibrary.ca/media/pages/articles/from-daredevil-stunts-to-sightseeing-tours-100-years-of-aviation-over-niagara-falls/64fba4d993-1787163415/aug-2026-lh-column-pic-2-1600x1600-crop.jpg 1600w', 2861 srcset_webp: 'https://nflibrary.ca/media/pages/articles/from-daredevil-stunts-to-sightseeing-tours-100-years-of-aviation-over-niagara-falls/64fba4d993-1787163415/aug-2026-lh-column-pic-2-400x400-crop.webp 400w, https://nflibrary.ca/media/pages/articles/from-daredevil-stunts-to-sightseeing-tours-100-years-of-aviation-over-niagara-falls/64fba4d993-1787163415/aug-2026-lh-column-pic-2-800x800-crop.webp 800w, https://nflibrary.ca/media/pages/articles/from-daredevil-stunts-to-sightseeing-tours-100-years-of-aviation-over-niagara-falls/64fba4d993-1787163415/aug-2026-lh-column-pic-2-1200x1200-crop.webp 1200w, https://nflibrary.ca/media/pages/articles/from-daredevil-stunts-to-sightseeing-tours-100-years-of-aviation-over-niagara-falls/64fba4d993-1787163415/aug-2026-lh-column-pic-2-1600x1600-crop.webp 1600w', 2862 visible: false, 2863 }" 2864 x-intersect.once=" 2865 visible = true 2866 " 2867 > 2868 2869 <source 2870 :srcset="visible ? srcset_webp : ''" 2871 sizes="(min-width: 1536px) 800px, 2872 (min-width: 1280px) 600px, 2873 (min-width: 1024px) 600px, 2874 (min-width: 768px) 400px, 2875 (min-width: 640px) 600px, 2876 100vw" 2877 > 2878 <img 2879 width="800" 2880 height="550" 2881 class="aspect-1/1 bg-gray-200 w-full overflow-hidden object-cover opacity-0 transition-opacity" 2882 :class="{ 2883 'bg-gray-200' : !src, 2884 'bg-white' : src, 2885 'opacity-0' : !visible, 2886 'opacity-100' : visible, 2887 }" 2888 src="data:image/png;base64, /9j/4AAQSkZJRgABAQEBLAEsAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pLSwzOko+MzZGNywtQFdBRkxOUlNSMj5aYVpQYEpRUk//2wBDAQ4ODhMREyYVFSZPNS01T09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0//wAARCAAGAAYDAREAAhEBAxEB/8QAFAABAAAAAAAAAAAAAAAAAAAABv/EABkQAAMAAwAAAAAAAAAAAAAAAAECAwAFYf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8ASw2EldlESo5kH//Z" 2889 :srcset="visible ? srcset : ''" 2890 alt="" 2891 > 2892 </picture> 2893 2894 </div> 2895 </div> 2896 <div class=""> 2897 <h3 2898 class='heading-3 m-0 line-clamp-2 group-hover:underline decoration-pink-300 mb-1 w-full grow-0 leading-tight text-balance text-pink-500'> 2899 From daredevil stunts to sightseeing tours: 100 years of aviation over Niagara Falls </h3> 2900 <div class="flex flex-wrap gap-x-4 text-sm text-gray-600"> 2901 <!-- <p class='m-0 font-semibold'>Talon Jerry</p> --> 2902 <p class='m-0 font-bold'> 2903 Wednesday, August 19 2026 </p> 2904 </div> 2905 <p class="text-gray-400 mt-2 line-clamp-2 text-sm">Aviation has a long history in Niagara Falls, dating back to shortly after the first powered flight, Talon Jarry writes.</p> 2906 </div> 2907 </a> 2908 </div> 2909</section> 2910 </div> 2911 </section> 2912 2913 <section class="my-0 grid grid-cols-12 gap-x-6 md:gap-x-8"> 2914 <div class="col-span-12 "> 2915 <div class='mt-24'> 2916 <h2 class='heading-2 flex justify-between items-baseline'> 2917 <span> 2918 Digital Resources </span> 2919 </h2> 2920 <div class="prose prose-a:text-blue-800 max-w-full"> 2921 <p><p>With the power of your library card, you can access great resources to use at home or on the go. <a href="https://dev.nflibrary.ca/eg/opac/register"><strong>Sign-up for a card</strong></a> and get started today!</p></p> 2922 </div> 2923 2924 <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-8 mt-8"> 2925 <a 2926 href='https://nflibrary.ca/digital-resources/cloudlibrary' 2927 class="group border border-gray-200 bg-white shadow-sm hover:shadow-md rounded-md transition-all block hover:border-sky-600 font-semibold overflow-hidden group" 2928> 2929 2930 <picture 2931 style="background-image: url('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAMAAADJ2y/JAAAAkFBMVEUrPEkqQlAsTFQzVVA7WEg9UUQ3RkQvPUYrPkspSVYuVlk7YlBJZkVNYEFEUEMzQUYsQEwsTFY0WlZEZktSakJVY0FJU0Q1QkYxQ041TVU+WVVKYk5TZUpTX0tHUkw2Q0o5SFNCUltJW15NXltQXllRXFtHVFk4RlA8SlVHVV9OXGROW2JNWmFPW2NHVF44RlFzKhE5AAAAAW9yTlQBz6J3mgAAAD5JREFUCJljYGBkYmZhZWNn4ODk4ubh5eNnEBAUEhYRFRNnkJCUkpaRlZNnUFBUUlZRVVNn0NDU0tbR1dMHAE7SBGmj50QpAAAAAElFTkSuQmCC')" 2932 class="rounded-none flex bg-gray-200 bg-cover overflow-hidden aspect-4/3" 2933 x-data="{ 2934 src: 'https://nflibrary.ca/media/pages/digital-resources/cloudlibrary/2d9d4697ca-1751038988/cloudlibrary-logo-1400x.png', 2935 srcset: 'https://nflibrary.ca/media/pages/digital-resources/cloudlibrary/2d9d4697ca-1751038988/cloudlibrary-logo-400x300-crop.png 400w, https://nflibrary.ca/media/pages/digital-resources/cloudlibrary/2d9d4697ca-1751038988/cloudlibrary-logo-800x600-crop.png 800w, https://nflibrary.ca/media/pages/digital-resources/cloudlibrary/2d9d4697ca-1751038988/cloudlibrary-logo-1200x900-crop.png 1200w, https://nflibrary.ca/media/pages/digital-resources/cloudlibrary/2d9d4697ca-1751038988/cloudlibrary-logo-1600x1200-crop.png 1600w', 2936 srcset_webp: 'https://nflibrary.ca/media/pages/digital-resources/cloudlibrary/2d9d4697ca-1751038988/cloudlibrary-logo-400x300-crop.webp 400w, https://nflibrary.ca/media/pages/digital-resources/cloudlibrary/2d9d4697ca-1751038988/cloudlibrary-logo-800x600-crop.webp 800w, https://nflibrary.ca/media/pages/digital-resources/cloudlibrary/2d9d4697ca-1751038988/cloudlibrary-logo-1200x900-crop.webp 1200w, https://nflibrary.ca/media/pages/digital-resources/cloudlibrary/2d9d4697ca-1751038988/cloudlibrary-logo-1600x1200-crop.webp 1600w', 2937 visible: false, 2938 }" 2939 x-intersect.once=" 2940 visible = true 2941 " 2942 > 2943 2944 <source 2945 :srcset="visible ? srcset_webp : ''" 2946 sizes="(min-width: 1536px) 300px, 2947 (min-width: 1280px) 260px,
2948 (min-width: 1024px) 220px, 2949 (min-width: 768px) 160px, 2950 (min-width: 640px) 300px, 2951 50vw" 2952 > 2953 <img 2954 width="600" 2955 height="600" 2956 class="aspect-4/3 bg-gray-200 w-full overflow-hidden object-cover opacity-0 transition-opacity" 2957 :class="{ 2958 'bg-gray-200' : !src, 2959 'bg-white' : src, 2960 'opacity-0' : !visible, 2961 'opacity-100' : visible, 2962 }" 2963 src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAMAAADJ2y/JAAAAkFBMVEUrPEkqQlAsTFQzVVA7WEg9UUQ3RkQvPUYrPkspSVYuVlk7YlBJZkVNYEFEUEMzQUYsQEwsTFY0WlZEZktSakJVY0FJU0Q1QkYxQ041TVU+WVVKYk5TZUpTX0tHUkw2Q0o5SFNCUltJW15NXltQXllRXFtHVFk4RlA8SlVHVV9OXGROW2JNWmFPW2NHVF44RlFzKhE5AAAAAW9yTlQBz6J3mgAAAD5JREFUCJljYGBkYmZhZWNn4ODk4ubh5eNnEBAUEhYRFRNnkJCUkpaRlZNnUFBUUlZRVVNn0NDU0tbR1dMHAE7SBGmj50QpAAAAAElFTkSuQmCC" 2964 :srcset="visible ? srcset : ''" 2965 alt="" 2966 > 2967 </picture> 2968 2969 2970 <footer class='p-3'> 2971 <div class='leading-tight group-hover:underline font-heading group-hover:text-sky-600 '> 2972 cloudLibrary </div> 2973 <!-- tags --> 2974 <div 2975 class="flex mt-2 relative overflow-hidden after:block after:bg-gradient-to-r after:from-transparent after:to-white after:absolute after:z-10 after:w-6 after:right-0 after:-top-1 after:-bottom-1"> 2976 <div 2977 class="text-sm font-medium leading-tight text-gray-800 bg-gray-50 rounded p-1 border border-gray-100 px-2 mr-1 relative z-0"> 2978 Audiobooks </div> 2979 <div 2980 class="text-sm font-medium leading-tight text-gray-800 bg-gray-50 rounded p-1 border border-gray-100 px-2 mr-1 relative z-0"> 2981 eBooks </div> 2982 </div> 2983 </footer> 2984</a> 2985<a 2986 href='https://nflibrary.ca/digital-resources/hoopla' 2987 class="group border border-gray-200 bg-white shadow-sm hover:shadow-md rounded-md transition-all block hover:border-sky-600 font-semibold overflow-hidden group" 2988> 2989 2990 <picture 2991 style="background-image: url('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAMAAADJ2y/JAAAAY1BMVEUBru8Er+8Hr+8Ir+8Eru8Ssu8btfAftvAgtvAetvAGr+8NsO8juPE3vvJBwfJFwvM/wPImufEMsO8it/BDwvNIxPMnufEOse8Fr+8Psu8atfAht/AkuPEgt/ATs/ADru8IsO+HcZ+TAAAAAW9yTlQBz6J3mgAAADtJREFUCJkFwYkCQCAQQMFnV6RUyJHb/3+lGahEVWoQ07S2Mw7fh5iG0TPlMC9x3Sj7cV73I/A6/bTwAzHFAm32uiaFAAAAAElFTkSuQmCC')" 2992 class="rounded-none flex bg-gray-200 bg-cover overflow-hidden aspect-4/3" 2993 x-data="{ 2994 src: 'https://nflibrary.ca/media/pages/digital-resources/hoopla/757b6aecc1-1751038988/hoopla-logo-1400x.png', 2995 srcset: 'https://nflibrary.ca/media/pages/digital-resources/hoopla/757b6aecc1-1751038988/hoopla-logo-400x300-crop.png 400w, https://nflibrary.ca/media/pages/digital-resources/hoopla/757b6aecc1-1751038988/hoopla-logo-800x600-crop.png 800w, https://nflibrary.ca/media/pages/digital-resources/hoopla/757b6aecc1-1751038988/hoopla-logo-1200x900-crop.png 1200w, https://nflibrary.ca/media/pages/digital-resources/hoopla/757b6aecc1-1751038988/hoopla-logo-1600x1200-crop.png 1600w', 2996 srcset_webp: 'https://nflibrary.ca/media/pages/digital-resources/hoopla/757b6aecc1-1751038988/hoopla-logo-400x300-crop.webp 400w, https://nflibrary.ca/media/pages/digital-resources/hoopla/757b6aecc1-1751038988/hoopla-logo-800x600-crop.webp 800w, https://nflibrary.ca/media/pages/digital-resources/hoopla/757b6aecc1-1751038988/hoopla-logo-1200x900-crop.webp 1200w, https://nflibrary.ca/media/pages/digital-resources/hoopla/757b6aecc1-1751038988/hoopla-logo-1600x1200-crop.webp 1600w', 2997 visible: false, 2998 }" 2999 x-intersect.once=" 3000 visible = true 3001 " 3002 > 3003 3004 <source 3005 :srcset="visible ? srcset_webp : ''" 3006 sizes="(min-width: 1536px) 300px, 3007 (min-width: 1280px) 260px, 3008 (min-width: 1024px) 220px, 3009 (min-width: 768px) 160px, 3010 (min-width: 640px) 300px, 3011 50vw" 3012 > 3013 <img 3014 width="600" 3015 height="600" 3016 class="aspect-4/3 bg-gray-200 w-full overflow-hidden object-cover opacity-0 transition-opacity" 3017 :class="{ 3018 'bg-gray-200' : !src, 3019 'bg-white' : src, 3020 'opacity-0' : !visible, 3021 'opacity-100' : visible, 3022 }" 3023 src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAMAAADJ2y/JAAAAY1BMVEUBru8Er+8Hr+8Ir+8Eru8Ssu8btfAftvAgtvAetvAGr+8NsO8juPE3vvJBwfJFwvM/wPImufEMsO8it/BDwvNIxPMnufEOse8Fr+8Psu8atfAht/AkuPEgt/ATs/ADru8IsO+HcZ+TAAAAAW9yTlQBz6J3mgAAADtJREFUCJkFwYkCQCAQQMFnV6RUyJHb/3+lGahEVWoQ07S2Mw7fh5iG0TPlMC9x3Sj7cV73I/A6/bTwAzHFAm32uiaFAAAAAElFTkSuQmCC" 3024 :srcset="visible ? srcset : ''" 3025 alt="" 3026 > 3027 </picture> 3028 3029 3030 <footer class='p-3'> 3031 <div class='leading-tight group-hover:underline font-heading group-hover:text-sky-600 '> 3032 hoopla </div> 3033 <!-- tags --> 3034 <div 3035 class="flex mt-2 relative overflow-hidden after:block after:bg-gradient-to-r after:from-transparent after:to-white after:absolute after:z-10 after:w-6 after:right-0 after:-top-1 after:-bottom-1"> 3036 <div 3037 class="text-sm font-medium leading-tight text-gray-800 bg-gray-50 rounded p-1 border border-gray-100 px-2 mr-1 relative z-0"> 3038 Movies </div> 3039 <div 3040 class="text-sm font-medium leading-tight text-gray-800 bg-gray-50 rounded p-1 border border-gray-100 px-2 mr-1 relative z-0"> 3041 eBooks </div> 3042 <div 3043 class="text-sm font-medium leading-tight text-gray-800 bg-gray-50 rounded p-1 border border-gray-100 px-2 mr-1 relative z-0">
3044 Music </div> 3045 <div 3046 class="text-sm font-medium leading-tight text-gray-800 bg-gray-50 rounded p-1 border border-gray-100 px-2 mr-1 relative z-0"> 3047 Magazines </div> 3048 </div> 3049 </footer> 3050</a> 3051<a 3052 href='https://nflibrary.ca/digital-resources/mango-languages' 3053 class="group border border-gray-200 bg-white shadow-sm hover:shadow-md rounded-md transition-all block hover:border-sky-600 font-semibold overflow-hidden group" 3054> 3055 3056 <picture 3057 style="background-image: url('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAMAAADJ2y/JAAAAaVBMVEX7/Pv5+vn4+Pf4+Pj5+Pj5+fn7+/vv9O/o7Ojl5uPm5uXm5ubq6ury8vLf5+DR2NLLzsnNzszOzs7W1tbf5eDR19PK0MzN0M7Oz87Nzc3n5+fv8fDo6+nl6Ofn6Ofl5eXz8/P4+fn8/Pw1sVpgAAAAAW9yTlQBz6J3mgAAAD1JREFUCJkFwYkCQCAUBMBNNvFyVM5E+P+PNAOoStekQWPbTsT1GMbJhxAF87Ju+xETznzdqbgHRr2k5vcDPgwC06JumswAAAAASUVORK5CYII=')" 3058 class="rounded-none flex bg-gray-200 bg-cover overflow-hidden aspect-4/3" 3059 x-data="{ 3060 src: 'https://nflibrary.ca/media/pages/digital-resources/mango-languages/76d513a1d3-1751038988/mango_languages-logo-1400x.png', 3061 srcset: 'https://nflibrary.ca/media/pages/digital-resources/mango-languages/76d513a1d3-1751038988/mango_languages-logo-400x300-crop.png 400w, https://nflibrary.ca/media/pages/digital-resources/mango-languages/76d513a1d3-1751038988/mango_languages-logo-800x600-crop.png 800w, https://nflibrary.ca/media/pages/digital-resources/mango-languages/76d513a1d3-1751038988/mango_languages-logo-1200x900-crop.png 1200w, https://nflibrary.ca/media/pages/digital-resources/mango-languages/76d513a1d3-1751038988/mango_languages-logo-1600x1200-crop.png 1600w', 3062 srcset_webp: 'https://nflibrary.ca/media/pages/digital-resources/mango-languages/76d513a1d3-1751038988/mango_languages-logo-400x300-crop.webp 400w, https://nflibrary.ca/media/pages/digital-resources/mango-languages/76d513a1d3-1751038988/mango_languages-logo-800x600-crop.webp 800w, https://nflibrary.ca/media/pages/digital-resources/mango-languages/76d513a1d3-1751038988/mango_languages-logo-1200x900-crop.webp 1200w, https://nflibrary.ca/media/pages/digital-resources/mango-languages/76d513a1d3-1751038988/mango_languages-logo-1600x1200-crop.webp 1600w', 3063 visible: false, 3064 }" 3065 x-intersect.once=" 3066 visible = true 3067 " 3068 > 3069 3070 <source 3071 :srcset="visible ? srcset_webp : ''" 3072 sizes="(min-width: 1536px) 300px, 3073 (min-width: 1280px) 260px, 3074 (min-width: 1024px) 220px, 3075 (min-width: 768px) 160px, 3076 (min-width: 640px) 300px, 3077 50vw" 3078 > 3079 <img 3080 width="600" 3081 height="600" 3082 class="aspect-4/3 bg-gray-200 w-full overflow-hidden object-cover opacity-0 transition-opacity" 3083 :class="{ 3084 'bg-gray-200' : !src, 3085 'bg-white' : src, 3086 'opacity-0' : !visible, 3087 'opacity-100' : visible, 3088 }" 3089 src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAMAAADJ2y/JAAAAaVBMVEX7/Pv5+vn4+Pf4+Pj5+Pj5+fn7+/vv9O/o7Ojl5uPm5uXm5ubq6ury8vLf5+DR2NLLzsnNzszOzs7W1tbf5eDR19PK0MzN0M7Oz87Nzc3n5+fv8fDo6+nl6Ofn6Ofl5eXz8/P4+fn8/Pw1sVpgAAAAAW9yTlQBz6J3mgAAAD1JREFUCJkFwYkCQCAUBMBNNvFyVM5E+P+PNAOoStekQWPbTsT1GMbJhxAF87Ju+xETznzdqbgHRr2k5vcDPgwC06JumswAAAAASUVORK5CYII=" 3090 :srcset="visible ? srcset : ''" 3091 alt="" 3092 > 3093 </picture> 3094 3095 3096 <footer class='p-3'> 3097 <div class='leading-tight group-hover:underline font-heading group-hover:text-sky-600 '> 3098 Mango Languages </div> 3099 <!-- tags --> 3100 <div 3101 class="flex mt-2 relative overflow-hidden after:block after:bg-gradient-to-r after:from-transparent after:to-white after:absolute after:z-10 after:w-6 after:right-0 after:-top-1 after:-bottom-1"> 3102 <div 3103 class="text-sm font-medium leading-tight text-gray-800 bg-gray-50 rounded p-1 border border-gray-100 px-2 mr-1 relative z-0"> 3104 Education </div> 3105 </div> 3106 </footer> 3107</a> 3108<a 3109 href='https://nflibrary.ca/digital-resources/pressreader' 3110 class="group border border-gray-200 bg-white shadow-sm hover:shadow-md rounded-md transition-all block hover:border-sky-600 font-semibold overflow-hidden group" 3111> 3112 3113 <picture 3114 style="background-image: url('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAMAAADJ2y/JAAAAaVBMVEUsxIw0xpBHy5ta0KVX0KRCypgxxY8uxI06yJRTzqFl06ti0qlMzZ01xpEvxY49yZZY0KRo1Kxj06pNzZ42x5IsxI07yJVe0adWz6NDypkzxpAtxI1Gy5pOzZ5Iy5s8yJUyxY9DypgyxpACoCxkAAAAAW9yTlQBz6J3mgAAAD1JREFUCJljYGBkYmZhZWNgYOfg5OLm4WVg4OMXEBQSFhFlYBfjFJeQlGJgkBaRkZWTB6phUJBXZJVXYgAAOL0CwQg2WvwAAAAASUVORK5CYII=')" 3115 class="rounded-none flex bg-gray-200 bg-cover overflow-hidden aspect-4/3" 3116 x-data="{ 3117 src: 'https://nflibrary.ca/media/pages/digital-resources/pressreader/e2ea6938a3-1751038988/pressreader-logo-1400x.png', 3118 srcset: 'https://nflibrary.ca/media/pages/digital-resources/pressreader/e2ea6938a3-1751038988/pressreader-logo-400x300-crop.png 400w, https://nflibrary.ca/media/pages/digital-resources/pressreader/e2ea6938a3-1751038988/pressreader-logo-800x600-crop.png 800w, https://nflibrary.ca/media/pages/digital-resources/pressreader/e2ea6938a3-1751038988/pressreader-logo-1200x900-crop.png 1200w, https://nflibrary.ca/media/pages/digital-resources/pressreader/e2ea6938a3-1751038988/pressreader-logo-1600x1200-crop.png 1600w', 3119 srcset_webp: 'https://nflibrary.ca/media/pages/digital-resources/pressreader/e2ea6938a3-1751038988/pressreader-logo-400x300-crop.webp 400w, https://nflibrary.ca/media/pages/digital-resources/pressreader/e2ea6938a3-1751038988/pressreader-logo-800x600-crop.webp 800w, https://nflibrary.ca/media/pages/digital-resources/pressreader/e2ea6938a3-1751038988/pressreader-logo-1200x900-crop.webp 1200w, https://nflibrary.ca/media/pages/digital-resources/pressreader/e2ea6938a3-1751038988/pressreader-logo-1600x1200-crop.webp 1600w', 3120 visible: false, 3121 }" 3122 x-intersect.once=" 3123 visible = true 3124 " 3125 > 3126 3127 <source 3128 :srcset="visible ? srcset_webp : ''" 3129 sizes="(min-width: 1536px) 300px, 3130 (min-width: 1280px) 260px,
3131 (min-width: 1024px) 220px, 3132 (min-width: 768px) 160px, 3133 (min-width: 640px) 300px, 3134 50vw" 3135 > 3136 <img 3137 width="600" 3138 height="600" 3139 class="aspect-4/3 bg-gray-200 w-full overflow-hidden object-cover opacity-0 transition-opacity" 3140 :class="{ 3141 'bg-gray-200' : !src, 3142 'bg-white' : src, 3143 'opacity-0' : !visible, 3144 'opacity-100' : visible, 3145 }" 3146 src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAMAAADJ2y/JAAAAaVBMVEUsxIw0xpBHy5ta0KVX0KRCypgxxY8uxI06yJRTzqFl06ti0qlMzZ01xpEvxY49yZZY0KRo1Kxj06pNzZ42x5IsxI07yJVe0adWz6NDypkzxpAtxI1Gy5pOzZ5Iy5s8yJUyxY9DypgyxpACoCxkAAAAAW9yTlQBz6J3mgAAAD1JREFUCJljYGBkYmZhZWNgYOfg5OLm4WVg4OMXEBQSFhFlYBfjFJeQlGJgkBaRkZWTB6phUJBXZJVXYgAAOL0CwQg2WvwAAAAASUVORK5CYII=" 3147 :srcset="visible ? srcset : ''" 3148 alt="" 3149 > 3150 </picture> 3151 3152 3153 <footer class='p-3'> 3154 <div class='leading-tight group-hover:underline font-heading group-hover:text-sky-600 '> 3155 PressReader </div> 3156 <!-- tags --> 3157 <div 3158 class="flex mt-2 relative overflow-hidden after:block after:bg-gradient-to-r after:from-transparent after:to-white after:absolute after:z-10 after:w-6 after:right-0 after:-top-1 after:-bottom-1"> 3159 <div 3160 class="text-sm font-medium leading-tight text-gray-800 bg-gray-50 rounded p-1 border border-gray-100 px-2 mr-1 relative z-0"> 3161 Newspapers </div> 3162 <div 3163 class="text-sm font-medium leading-tight text-gray-800 bg-gray-50 rounded p-1 border border-gray-100 px-2 mr-1 relative z-0"> 3164 Magazines </div> 3165 </div> 3166 </footer> 3167</a> 3168 </div> 3169 <div class="flex justify-end items-baseline mt-4"> 3170 <a 3171 class='button text-base flex items-center' 3172 href='https://nflibrary.ca/digital-resources'> 3173 <span>All 3174 Digital Resources </span> 3175 <span class='inline-block w-5 ml-2'> 3176 <svg 3177 xmlns="http://www.w3.org/2000/svg" 3178 width="24" 3179 height="24" 3180 viewBox="0 0 24 24" 3181 fill="none" 3182 stroke="currentColor" 3183 stroke-width="2" 3184 stroke-linecap="round" 3185 stroke-linejoin="round" 3186> 3187 <path d="m9 18 6-6-6-6" /> 3188</svg> 3189 </span> 3190 </a> 3191 </div> 3192</div> </div> 3193 </section> 3194</article> 3195 </main> 3196 3197 </div> 3198 <div 3199 id="account-status-wrapper" 3200 class="hidden" 3201 > 3202 <div 3203 id="account-status" 3204 hx-get="/eg/opac/home/account-status" 3205 hx-trigger="load, every 60s" 3206 hx-swap="outerHTML ignoreTitle:true" 3207 hx-select="#account-status" 3208 hx-target="#account-status" 3209 ></div> 3210 </div> 3211 <footer 3212 id="site-footer" 3213 class='bg-gray-950 text-gray-200 pb-8 z-0 relative mt-8 border-t border-gray-50' 3214> 3215 <div 3216 class="text-gray-600 absolute items-stretch justify-stretch -top-1 left-0 -right-1 bottom-0 w-full -z-1 overflow-hidden pointer-events-none flex h-48 xs:h-64 sm:h-80 xl:h-[30rem] aspect-auto object-fill"> 3217 <svg preserveAspectRatio="none" width="1400" height="585" viewBox="0 0 1400 585" fill="none" xmlns="http://www.w3.org/2000/svg"> 3218<path opacity="0.5" d="M0 0H1400V331.501C720 262.235 514.5 28.1287 0 28.1287V0Z" fill="currentcolor"/> 3219<path d="M0 0H1400V270.5C720 215.553 514.5 23.8443 0 23.8443V0Z" fill="#F3F3F7"/> 3220</svg> 3221 </div> 3222 <div class="container pb-4 overflow-hidden"> 3223 <div 3224 aria-hidden="true" 3225 class="flex pr-32 md:px-0 w-96 md:w-64 lg:w-72 -z-10 -mt-8 mb-8 relative pt-0 overflow-hidden -scale-y-100" 3226 > 3227 <img 3228 width="364" 3229 height="364" 3230 src='https://nflibrary.ca/assets/logos/nfpl-logo-mark.svg' 3231 alt="Niagara Falls Public Library" 3232 > 3233 </div> 3234 <div class="flex flex-wrap justify-start items-end "> 3235 <div class='md:w-1/3 lg:w-1/4'> 3236 <strong class='text-white'> 3237 Niagara Falls Public Library 3238 </strong><br> 3239 4848 Victoria Avenue Niagara Falls,<br> 3240 Ontario L2E 4C5 Canada<br> 3241 <div class="flex mt-4 text-lg pb-2"> 3242 <a 3243 target='_blank' 3244 class='flex text-gray-200 hover:text-cyan-500 mr-4 lg:mr-6' 3245 title="View our Facebook page." 3246 href="https://www.facebook.com/NFPublicLibrary/" 3247 > 3248 <span class="hover:scale-125 flex w-7 h-7 transition-all"> 3249 <svg 3250 xmlns="http://www.w3.org/2000/svg" 3251 width="24" 3252 height="24" 3253 viewBox="0 0 24 24" 3254 fill="none" 3255 stroke="currentColor" 3256 stroke-width="2" 3257 stroke-linecap="round" 3258 stroke-linejoin="round" 3259> 3260 <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" /> 3261</svg> 3262 </span> 3263 <!-- "/assets/icons/facebook.svg" --> 3264 </a> 3265 <a 3266 target='_blank' 3267 class='flex text-gray-200 hover:text-cyan-500 mr-4 lg:mr-6' 3268 title="View our YouTube page." 3269 href="https://www.youtube.com/user/NFPublicLibraryCA" 3270 > 3271 <span class="hover:scale-125 flex w-7 h-7 transition-all"> 3272 <svg 3273 xmlns="http://www.w3.org/2000/svg" 3274 width="24" 3275 height="24" 3276 viewBox="0 0 24 24" 3277 fill="none" 3278 stroke="currentColor" 3279 stroke-width="2" 3280 stroke-linecap="round" 3281 stroke-linejoin="round" 3282> 3283 <path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.5
32835 0 0 1-16.2 0A2 2 0 0 1 2.5 17" /> 3284 <path d="m10 15 5-3-5-3z" /> 3285</svg> 3286 </span> 3287 <!-- "/assets/icons/youtube.svg" --> 3288 </a> 3289 <a 3290 target='_blank' 3291 class='flex text-gray-200 hover:text-cyan-500 mr-4 lg:mr-6' 3292 title="View our Instagram page." 3293 href="https://www.instagram.com/nflibrary" 3294 > 3295 <span class="hover:scale-125 flex w-7 h-7 transition-all"> 3296 <svg 3297 xmlns="http://www.w3.org/2000/svg" 3298 width="24" 3299 height="24" 3300 viewBox="0 0 24 24" 3301 fill="none" 3302 stroke="currentColor" 3303 stroke-width="2" 3304 stroke-linecap="round" 3305 stroke-linejoin="round" 3306> 3307 <rect width="20" height="20" x="2" y="2" rx="5" ry="5" /> 3308 <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" /> 3309 <line x1="17.5" x2="17.51" y1="6.5" y2="6.5" /> 3310</svg> 3311 </span> 3312 <!-- "/assets/icons/instagram.svg" --> 3313 </a> 3314 </div> 3315 <div class="mt-3 text-xs text-gray-400">Registered Charity: #107773400RR0001</div> 3316 </div> 3317 <div 3318 class='md:w-2/3 lg:w-3/4 md:pl-16 lg:pl-24 box-border mt-8 text-right flex flex-col items-start justify-start md:-mt-8'> 3319 3320 <div class="flex flex-wrap items-center"> 3321 <a 3322 href="/eg/opac/register" 3323 class="button bg-sky-600 text-nowrap mb-8" 3324 >Get a Library Card</a> 3325 <ul 3326 class="text-sky-300 grid sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 items-start mb-8 w-full max-w-md text-left"> 3327 <li class="mr-4"> 3328 <a 3329 href="https://nflibrary.ca/accessibility" 3330 class="group hover:underline hover:decoration-amber-300 hover:text-white inline-block my-1" 3331 >Accessibility</a> 3332 </li> 3333 <li class="mr-4"> 3334 <a 3335 href="https://nflibrary.ca/about/library-board" 3336 class="group hover:underline hover:decoration-amber-300 hover:text-white inline-block my-1" 3337 >Library Board</a> 3338 </li> 3339 <li class="mr-4"> 3340 <a 3341 href="https://nflibrary.ca/customer-promise" 3342 class="group hover:underline hover:decoration-amber-300 hover:text-white inline-block my-1" 3343 >Customer Promise</a> 3344 </li> 3345 <li class="mr-4"> 3346 <a 3347 href="https://nflibrary.ca/about/policies" 3348 class="group hover:underline hover:decoration-amber-300 hover:text-white inline-block my-1" 3349 >Policies, Forms & Reports</a> 3350 </li> 3351 <li class="mr-4"> 3352 <a 3353 href="https://nflibrary.ca/press-releases" 3354 class="group hover:underline hover:decoration-amber-300 hover:text-white inline-block my-1" 3355 >Press Releases</a> 3356 </li> 3357 <li class="mr-4"> 3358 <a 3359 href="https://nflibrary.ca/sitemap" 3360 class="group hover:underline hover:decoration-amber-300 hover:text-white inline-block my-1" 3361 >Sitemap</a> 3362 </li> 3363 <li class="mr-4"> 3364 <a 3365 href="https://nflibrary.ca/terms-of-use" 3366 class="group hover:underline hover:decoration-amber-300 hover:text-white inline-block my-1" 3367 >Terms of Use</a> 3368 </li> 3369 <li class="mr-4"> 3370 <a 3371 href="https://nflibrary.ca/privacy" 3372 class="group hover:underline hover:decoration-amber-300 hover:text-white inline-block my-1" 3373 >Privacy</a> 3374 </li> 3375 </ul> 3376 3377 </div> 3378 3379 <div class="text-left"> 3380 The Public Library is a nonprofit service primarily funded by the 3381 <a 3382 class='text-white hover:text-cyan-500 font-semibold hover:underline inline-block' 3383 target='_blank' 3384 href="https://niagarafalls.ca/" 3385 >City of Niagara Falls.</a><br> 3386 Additional funding is provided by the <a 3387 class='text-white hover:text-cyan-500 font-semibold hover:underline inline-block' 3388 href="https://www.ontario.ca/" 3389 >Government of Ontario.</a> 3390 </div> 3391 3392 </div> 3393 </div> 3394 </div> 3395</footer> 3396 <!-- Lightbox --> 3397<div 3398 aria-disabled 3399 x-cloak 3400 :class="lightbox_src ? 'fixed bg-gray-950/95' : ' bg-transparent hidden' " 3401 :class="{ 3402 'fixed bg-gray-950/95 flex': lightbox_src, 3403 'bg-transparent hidden': !lightbox_src, 3404 }" 3405 @click="lightbox_src = null" 3406 class="top-0 right-0 bottom-0 left-0 box-border md:p-4 lg:p-8 z-50 bg-transparent hidden items-center justify-center transition-colors duration-1000 delay-100" 3407> 3408 <div class="w-full relative box-border flex items-stretch justify-center h-full "> 3409 <div 3410 class='w-full h-full bg-contain bg-center bg-no-repeat' 3411 x-bind:style="`background-image: url('${lightbox_src}')`" 3412 ></div> 3413 </div> 3414 3415 <button 3416 title='Close Image Lightbox' 3417 @click="lightbox_src = null" 3418 class="flex items-center cursor-pointer group hover:underline text-gray-200 z-50 p-1 rounded-md absolute right-2 top-2" 3419 x-transition 3420 x-transition:enter.delay.300ms 3421 href="#" 3422 > 3423 <span class="px-1 pl-2"> 3424 Close 3425 </span> 3426 <div 3427 class="ml-2 flex rounded bg-gray-50 text-gray group-hover:bg-red group-hover:border-red group-hover:text-white p-1 w-8 h-8"> 3428 <svg 3429 xmlns="http://www.w3.org/2000/svg" 3430 width="24" 3431 height="24" 3432 viewBox="0 0 24 24" 3433 fill="none" 3434 stroke="currentColor" 3435 stroke-width="2" 3436 stroke-linecap="round" 3437 stroke-linejoin="round" 3438> 3439 <path d="M18 6 6 18" /> 3440 <path d="m6 6 12 12" /> 3441</svg> 3442 </div> 3443 </button> 3444 3445</div> 3446
3446<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"5349267fea5f467c9c6d525bffe36a43","r":1,"spa":2}' crossorigin="anonymous"></script>
vendor: 1 bytes, line 3446
3446
3447<script>(function(){function c(){var b=a.contentDocument||(a.contentWindow&&a.contentWindow.document);if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'a40522d52ddeac8a',t:'MTc5MDI4ODAwMw=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>
3447</body> 3448 3449</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.