Compare commits

...

1 Commits

Author SHA1 Message Date
d8a5d93342 new map-focused redesign
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
2023-10-29 21:34:26 -04:00
2 changed files with 214 additions and 257 deletions

View File

@ -1,38 +1,33 @@
/* Page Specific CSS */
body {
font-family: "Lato", sans-serif;
background: #fff;
color: #333;
font-size: 18px;
font-size: 16px;
margin: 0px;
padding: 20px 0px;
padding: 0px;
}
h1 {
font-size: 80px;
font-size: 40px;
font-family: "Acme", sans-serif;
font-weight: normal;
margin: 0px;
}
h2 {
font-size: 40px;
font-size: 30px;
font-family: "Acme", sans-serif;
font-weight: normal;
margin: 0px 0px;
}
h3 {
font-family: "Acme", sans-serif;
font-size: 30px;
font-size: 20px;
margin: 10px 0px;
}
h4 {
font-family: "Lato", sans-serif;
font-size: 24px;
font-size: 14px;
}
img {
width: 100%;
}
p a,
a {
color: #333;
@ -43,10 +38,6 @@ a {
a:hover {
color: #47ccfc;
}
small {
padding: 10px 0px;
font-size: 10px;
}
p {
margin: 0px;
padding: 0px;
@ -56,22 +47,14 @@ li {
line-height: 19px;
font-size: 15px;
}
ol {
line-height: 24px;
}
.clearfix {
clear: both;
}
.hidden {
display: none;
}
#map {
height: 500px;
width: 480px;
min-width: 300px;
height: 100vh;
width: 100%;
background: #ffffff;
float: left;
}
#map a {
border: none;
@ -83,13 +66,19 @@ ol {
}
#wrapper {
margin: 0px auto;
padding: 40px;
max-width: 1000px;
max-width: 500px;
position: absolute;
top: 10px;
right: 10px;
bottom: 10px;
overflow: scroll;
}
.container {
margin: 24px 0px;
.bubble {
background-color: white;
margin: 10px 0px;
padding: 10px;
border-radius: 3px;
}
ul.nav {
@ -105,7 +94,7 @@ ul.nav li {
}
ul.nav li:not(:first-child) {
border-left: 1px #333 solid;
padding-left: 10px;
padding-left: 5px;
}
ul.nav li h2 {
font-family: "Lato";
@ -126,15 +115,9 @@ ul.nav li a:hover {
font-weight: 700;
}
#selected {
max-width: 500px;
width: 100%;
float: left;
padding: 5px 10px;
}
#selected .description {
padding-top: 7px;
font-size: 16px;
padding: 4px 0px;
line-height: 22px;
text-align: justify;
}
@ -143,27 +126,17 @@ ul.nav li a:hover {
margin: 15px 0px;
padding: 0px;
}
#info {
max-width: 500px;
width: 100%;
float: left;
padding: 5px 10px;
}
.storeDetails {
font-size: 15px;
display: inline;
padding-right: 6px;
}
#info p {
font-size: 15px;
padding: 4px;
line-height: 22px;
text-align: justify;
}
#info details {
font-size: 15px;
padding: 4px;
line-height: 22px;
text-align: justify;
}
@ -174,40 +147,34 @@ ul.nav li a:hover {
#Stores {
margin: 0 auto;
width: 80%;
}
#Stores tr {
cursor: pointer;
}
#Stores tr td {
padding: 4px 10px;
padding: 2px 0px;
}
#Stores tr:not(:last-child) td {
border-bottom: 1px #ddd solid;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px) and (max-width: 1120px) {
h1 {
font-size: 60px;
}
body {
margin: 0px;
padding: 5px;
}
#wrapper {
max-width: 480px;
padding-top: 20px;
position: static;
padding: 10px;
}
.bubble {
margin: 0px;
padding: 0px;
border-radius: 0px;
}
#map {
height: 400px;
}
#Stores,
#map {
min-width: 224px;
width: 100%;
}
#map,
#info,
#selected {
width: 100%;
margin: 10px 0px;
padding: 0;
}
}

View File

@ -31,7 +31,7 @@
media="screen"
rel="stylesheet"
type="text/css"
href="/css/site.css?1697075405981"
href="/css/site.css?1698627633277"
/>
<meta
property="title"
@ -66,15 +66,11 @@
/>
</head>
<body>
<div id="map"></div>
<div id="wrapper">
<header class="bubble">
<h1>NYC Bookstores</h1>
<div>
<ul class="nav">
<li>
<h2 id="subhed">
The Many Independent Bookstores of New York City
</h2>
</li>
<li>
<a id="viewInfo" href="#info" onclick="event.preventDefault()"
>intro</a
@ -93,10 +89,8 @@
>
</li>
</ul>
</div>
<div class="container">
<div id="map"></div>
<div id="info">
</header>
<div id="info" class="bubble">
<p>
New York City loves its independent bookstores. It
<a
@ -104,8 +98,7 @@
target="_blank"
>eulogizes those that have faded</a
>
and celebrates when new ventures are launched. And while the
historic
and celebrates when new ventures are launched. And while the historic
<a
href="https://untappedcities.com/2015/08/26/4th-avenue-the-history-of-nycs-book-row/"
target="_blank"
@ -119,8 +112,8 @@
<p>
While Manhattan and Brooklyn still lead the pack, Queens has a
respectable number of stores, and all five boroughs are represented,
with the Bronx and Staten Island both hosting lone independent
stores. Lower Manhattan has the highest density of booksellers.
with the Bronx and Staten Island both hosting lone independent stores.
Lower Manhattan has the highest density of booksellers.
</p>
<p>
The listings here are kept up-to-date to the best of my ability;
@ -143,29 +136,34 @@
survives at this point).
</p>
<p>
There are currently <span id="storeCount">114</span> stores indexed
on this page. Last updated
<span id="updatedOn">October 11, 2023</span>.
There are currently <span id="storeCount">114</span> stores indexed on
this page. Last updated <span id="updatedOn">October 29, 2023</span>.
</p>
<details>
<summary>Recent Changes</summary>
<ul id="changesList">
<li>October 11, 2023 - add this fancy recent changes module</li>
<li>
October 8, 2023 - move Burnt Books into Hey Kids!, update
archestratus to note there's no cafe anymore
October 26, 2023 - Return Three Lives to its original corner
location.
</li>
<li>
October 26, 2023 - Idlewild Books appears to have transitioned
entirely to language classes as opposed to bookselling
</li>
<li>
October 26, 2023 - remove Boulevard Books; correct Alabaster
Bookshop Instagram link
</li>
<li>
October 26, 2023 - Add Topos Too, currently in a "soft opening"
</li>
<li>September 30, 2023 - add Lofty Pigeon Books</li>
<li>September 19, 2023 - Move Yu and Me to Essex Market</li>
</ul>
</details>
</div>
<div id="selected"></div>
</div>
<div class="clearfix"></div>
<div id="selected" class="bubble hidden"></div>
<div class="container">
<div class="bubble">
<div id="Stores">
<table>
<tbody>
@ -179,7 +177,7 @@
</tr>
<tr id="2" class="spotRow">
<td class="name">Adanne</td>
<td>234 Water St, Brooklyn</td>
<td>115 Ralph Ave, Brooklyn</td>
</tr>
<tr id="3" class="spotRow">
<td class="name">Aeon Bookstore</td>
@ -278,335 +276,335 @@
<td>42 West 17th St, New York</td>
</tr>
<tr id="27" class="spotRow">
<td class="name">Boulevard Books</td>
<td>7518 13th Ave, Brooklyn</td>
</tr>
<tr id="28" class="spotRow">
<td class="name">Bravo's Book Nook</td>
<td>115 MacDougal St, New York</td>
</tr>
<tr id="29" class="spotRow">
<tr id="28" class="spotRow">
<td class="name">Burnt Books</td>
<td>157 Huron St, Brooklyn</td>
</tr>
<tr id="30" class="spotRow">
<tr id="29" class="spotRow">
<td class="name">Cafe con Libros</td>
<td>724 Prospect Place, Brooklyn</td>
</tr>
<tr id="31" class="spotRow">
<tr id="30" class="spotRow">
<td class="name">Catland</td>
<td>985 Flushing Ave, Brooklyn</td>
</tr>
<tr id="32" class="spotRow">
<tr id="31" class="spotRow">
<td class="name">Chartwell Booksellers</td>
<td>55 E 52nd St, New York</td>
</tr>
<tr id="33" class="spotRow">
<tr id="32" class="spotRow">
<td class="name">Codex Books</td>
<td>1 Bleecker St, New York</td>
</tr>
<tr id="34" class="spotRow">
<tr id="33" class="spotRow">
<td class="name">Community Bookstore</td>
<td>143 7th Ave, Brooklyn</td>
</tr>
<tr id="35" class="spotRow">
<tr id="34" class="spotRow">
<td class="name">Cups and Books</td>
<td>2024 Bedford Ave, Brooklyn</td>
</tr>
<tr id="36" class="spotRow">
<tr id="35" class="spotRow">
<td class="name">Dashwood Books</td>
<td>33 Bond St, New York</td>
</tr>
<tr id="37" class="spotRow">
<tr id="36" class="spotRow">
<td class="name">Dear Friend Books</td>
<td>343A Tompkins Ave, Brooklyn</td>
</tr>
<tr id="38" class="spotRow">
<tr id="37" class="spotRow">
<td class="name">Desert Island Comics</td>
<td>540 Metropolitan Ave, Brooklyn</td>
</tr>
<tr id="39" class="spotRow">
<tr id="38" class="spotRow">
<td class="name">East Village Books</td>
<td>99 St. Mark's Place, New York</td>
</tr>
<tr id="40" class="spotRow">
<tr id="39" class="spotRow">
<td class="name">ETG Book Cafe</td>
<td>208 Bay St, Staten Island</td>
</tr>
<tr id="41" class="spotRow">
<tr id="40" class="spotRow">
<td class="name">Freebird Books</td>
<td>123 Columbia St, Brooklyn</td>
</tr>
<tr id="42" class="spotRow">
<tr id="41" class="spotRow">
<td class="name">Greenlight Bookstore</td>
<td>686 Fulton St, Brooklyn</td>
</tr>
<tr id="43" class="spotRow">
<tr id="42" class="spotRow">
<td class="name">Here's A Book Store</td>
<td>1964 Coney Island Ave, Brooklyn</td>
</tr>
<tr id="44" class="spotRow">
<tr id="43" class="spotRow">
<td class="name">Hey Kids! Comics</td>
<td>157 Huron St, Brooklyn</td>
</tr>
<tr id="45" class="spotRow">
<tr id="44" class="spotRow">
<td class="name">Housing Works Bookstore Café</td>
<td>126 Crosby St, New York</td>
</tr>
<tr id="46" class="spotRow">
<tr id="45" class="spotRow">
<td class="name">Human Relations Books</td>
<td>1067 Flushing Ave, Brooklyn</td>
</tr>
<tr id="47" class="spotRow">
<td class="name">Idlewild Books</td>
<td>170 7th Avenue S, New York</td>
</tr>
<tr id="48" class="spotRow">
<tr id="46" class="spotRow">
<td class="name">James Cummins Bookseller</td>
<td>699 Madison Ave, 7th Floor, New York</td>
</tr>
<tr id="49" class="spotRow">
<tr id="47" class="spotRow">
<td class="name">Joanne Hendricks Cookbooks</td>
<td>488 Greenwich St, New York</td>
</tr>
<tr id="50" class="spotRow">
<tr id="48" class="spotRow">
<td class="name">Karma Bookstore</td>
<td>136 East Third St, New York</td>
</tr>
<tr id="51" class="spotRow">
<tr id="49" class="spotRow">
<td class="name">Kew &amp; Willow Books</td>
<td>81-63 Lefferts Boulevard, New York</td>
</tr>
<tr id="52" class="spotRow">
<tr id="50" class="spotRow">
<td class="name">Kinokunya</td>
<td>1073 Avenue of the Americas, New York</td>
</tr>
<tr id="53" class="spotRow">
<tr id="51" class="spotRow">
<td class="name">Kitchen Arts &amp; Letters</td>
<td>1435 Lexington Ave, New York</td>
</tr>
<tr id="54" class="spotRow">
<tr id="52" class="spotRow">
<td class="name">Leaves Bookstore</td>
<td>140 Nassau Ave, Brooklyn</td>
</tr>
<tr id="55" class="spotRow">
<tr id="53" class="spotRow">
<td class="name">Left Bank Books</td>
<td>41 Perry St, New York</td>
</tr>
<tr id="56" class="spotRow">
<tr id="54" class="spotRow">
<td class="name">Lofty Pigeon Books</td>
<td>743 Church Ave, Brooklyn</td>
</tr>
<tr id="57" class="spotRow">
<tr id="55" class="spotRow">
<td class="name">Logos Bookstore</td>
<td>1575 York Ave, New York</td>
</tr>
<tr id="58" class="spotRow">
<tr id="56" class="spotRow">
<td class="name">Mast Books</td>
<td>72 Avenue A, New York</td>
</tr>
<tr id="59" class="spotRow">
<tr id="57" class="spotRow">
<td class="name">McNally Jackson Books</td>
<td>134 Prince St, New York</td>
</tr>
<tr id="60" class="spotRow">
<tr id="58" class="spotRow">
<td class="name">McNally Jackson Books City Point</td>
<td>445 Albee Square W, Unit G112, Brooklyn</td>
</tr>
<tr id="61" class="spotRow">
<tr id="59" class="spotRow">
<td class="name">McNally Jackson Books Seaport</td>
<td>4 Fulton St, New York</td>
</tr>
<tr id="62" class="spotRow">
<tr id="60" class="spotRow">
<td class="name">McNally Jackson Books Williamsburg</td>
<td>76 North 4th St, Brooklyn</td>
</tr>
<tr id="63" class="spotRow">
<tr id="61" class="spotRow">
<td class="name">McNally Jackson Rockefeller Center</td>
<td>1 Rockefeller Plaza, New York</td>
</tr>
<tr id="64" class="spotRow">
<tr id="62" class="spotRow">
<td class="name">Melville House Publishers</td>
<td>46 John St, Brooklyn</td>
</tr>
<tr id="65" class="spotRow">
<tr id="63" class="spotRow">
<td class="name">Mercer Street Books &amp; Records</td>
<td>206 Mercer St, New York</td>
</tr>
<tr id="66" class="spotRow">
<tr id="64" class="spotRow">
<td class="name">Mil Mundos Books</td>
<td>323 Linden St, Brooklyn</td>
</tr>
<tr id="67" class="spotRow">
<tr id="65" class="spotRow">
<td class="name">Molasses Books</td>
<td>770 Hart St, Brooklyn</td>
</tr>
<tr id="68" class="spotRow">
<tr id="66" class="spotRow">
<td class="name">Namaste Bookshop</td>
<td>2 W 14th St, New York</td>
</tr>
<tr id="69" class="spotRow">
<tr id="67" class="spotRow">
<td class="name">P&amp;T Knitwear</td>
<td>180 Orchard St, New York</td>
</tr>
<tr id="70" class="spotRow">
<tr id="68" class="spotRow">
<td class="name">Passageway Books</td>
<td>150 9th Ave, New York</td>
</tr>
<tr id="71" class="spotRow">
<tr id="69" class="spotRow">
<td class="name">Pillow-Cat Books</td>
<td>328 East 9th St, New York</td>
</tr>
<tr id="72" class="spotRow">
<tr id="70" class="spotRow">
<td class="name">Posman Books Chelsea Market</td>
<td>75 9th Avenue, New York</td>
</tr>
<tr id="73" class="spotRow">
<tr id="71" class="spotRow">
<td class="name">POWERHOUSE @ IC</td>
<td>220 36th St, Building #2, Brooklyn</td>
</tr>
<tr id="74" class="spotRow">
<tr id="72" class="spotRow">
<td class="name">POWERHOUSE Arena</td>
<td>28 Adams St, Brooklyn</td>
</tr>
<tr id="75" class="spotRow">
<tr id="73" class="spotRow">
<td class="name">POWERHOUSE on 8th</td>
<td>1111 8th Ave, Brooklyn</td>
</tr>
<tr id="76" class="spotRow">
<tr id="74" class="spotRow">
<td class="name">Printed Matter</td>
<td>231 11th Ave, New York</td>
</tr>
<tr id="77" class="spotRow">
<tr id="75" class="spotRow">
<td class="name">Printed Matter St. Marks</td>
<td>38 St. Marks Pl, New York</td>
</tr>
<tr id="78" class="spotRow">
<tr id="76" class="spotRow">
<td class="name">Quest Bookshop</td>
<td>240 E 53rd St, New York</td>
</tr>
<tr id="79" class="spotRow">
<tr id="77" class="spotRow">
<td class="name">Quimby's Bookstore</td>
<td>536 Metropolitan Ave, Brooklyn</td>
</tr>
<tr id="80" class="spotRow">
<tr id="78" class="spotRow">
<td class="name">Recirculation</td>
<td>876 Riverside Dr, New York</td>
</tr>
<tr id="81" class="spotRow">
<tr id="79" class="spotRow">
<td class="name">Respect For Life Books-N-Things</td>
<td>537 Nostrand Ave, Brooklyn</td>
</tr>
<tr id="82" class="spotRow">
<tr id="80" class="spotRow">
<td class="name">Revolution Books</td>
<td>437 Malcolm X Blvd, New York</td>
</tr>
<tr id="83" class="spotRow">
<tr id="81" class="spotRow">
<td class="name">Rizzoli Bookstore</td>
<td>1133 Broadway, New York</td>
</tr>
<tr id="84" class="spotRow">
<tr id="82" class="spotRow">
<td class="name">Shakespeare &amp; Company</td>
<td>939 Lexington Ave, New York</td>
</tr>
<tr id="85" class="spotRow">
<tr id="83" class="spotRow">
<td class="name">
Shakespeare &amp; Company (Upper West Side)
</td>
<td>2020 Broadway, New York</td>
</tr>
<tr id="86" class="spotRow">
<tr id="84" class="spotRow">
<td class="name">Sister's Uptown Bookstore</td>
<td>1942 Amsterdam Ave, New York</td>
</tr>
<tr id="87" class="spotRow">
<tr id="85" class="spotRow">
<td class="name">Spoonbill &amp; Sugartown, Booksellers</td>
<td>218 Bedford Ave, Brooklyn</td>
</tr>
<tr id="88" class="spotRow">
<tr id="86" class="spotRow">
<td class="name">Standards Manual</td>
<td>212 Franklin Street, Brooklyn</td>
</tr>
<tr id="89" class="spotRow">
<tr id="87" class="spotRow">
<td class="name">Strand Bookstore</td>
<td>828 Broadway, New York</td>
</tr>
<tr id="90" class="spotRow">
<tr id="88" class="spotRow">
<td class="name">Sweet Pickle Books</td>
<td>47 Orchard St, New York</td>
</tr>
<tr id="91" class="spotRow">
<tr id="89" class="spotRow">
<td class="name">Taylor &amp; Co. Books</td>
<td>1021 Cortelyou Rd, Brooklyn</td>
</tr>
<tr id="92" class="spotRow">
<tr id="90" class="spotRow">
<td class="name">Terrace Books</td>
<td>242 Prospect Park West, Brooklyn</td>
</tr>
<tr id="93" class="spotRow">
<tr id="91" class="spotRow">
<td class="name">The Austin Book Shop</td>
<td>104-29 Jamaica Ave, Richmond Hill</td>
</tr>
<tr id="94" class="spotRow">
<tr id="92" class="spotRow">
<td class="name">The Book Cellar</td>
<td>1465 York Ave, New York</td>
</tr>
<tr id="95" class="spotRow">
<tr id="93" class="spotRow">
<td class="name">The Center for Fiction</td>
<td>15 Lafayette Ave, Brooklyn</td>
</tr>
<tr id="96" class="spotRow">
<tr id="94" class="spotRow">
<td class="name">The Corner Bookstore</td>
<td>1313 Madison Ave, New York</td>
</tr>
<tr id="97" class="spotRow">
<tr id="95" class="spotRow">
<td class="name">The Drama Book Shop</td>
<td>266 W 39th St, New York</td>
</tr>
<tr id="98" class="spotRow">
<tr id="96" class="spotRow">
<td class="name">The Lit. Bar</td>
<td>131 Alexander Ave, Bronx</td>
</tr>
<tr id="99" class="spotRow">
<tr id="97" class="spotRow">
<td class="name">The Mysterious Bookshop</td>
<td>58 Warren St, New York</td>
</tr>
<tr id="100" class="spotRow">
<tr id="98" class="spotRow">
<td class="name">The Ripped Bodice</td>
<td>218 5th Ave, Brooklyn</td>
</tr>
<tr id="101" class="spotRow">
<tr id="99" class="spotRow">
<td class="name">The Strand At Columbus Ave</td>
<td>450 Columbus Ave, New York</td>
</tr>
<tr id="102" class="spotRow">
<tr id="100" class="spotRow">
<td class="name">The Word Is Change</td>
<td>368 Tompkins Ave, Brooklyn</td>
</tr>
<tr id="103" class="spotRow">
<tr id="101" class="spotRow">
<td class="name">Three Lives &amp; Company</td>
<td>238 West 10th St, New York</td>
<td>154 W 10th St, New York</td>
</tr>
<tr id="104" class="spotRow">
<tr id="102" class="spotRow">
<td class="name">Topos Bookstore Cafe</td>
<td>788 Woodward Ave, Brooklyn</td>
</tr>
<tr id="105" class="spotRow">
<tr id="103" class="spotRow">
<td class="name">Topos Too</td>
<td>59-22 Myrtle Ave, Queens</td>
</tr>
<tr id="104" class="spotRow">
<td class="name">Troubled Sleep Books</td>
<td>129 6th Ave, Brooklyn</td>
</tr>
<tr id="106" class="spotRow">
<tr id="105" class="spotRow">
<td class="name">Turn The Page... Again</td>
<td>39-15a Bell Blvd, Flushing</td>
</tr>
<tr id="107" class="spotRow">
<tr id="106" class="spotRow">
<td class="name">Unnameable Books</td>
<td>600 Vanderbilt Ave, Brooklyn</td>
</tr>
<tr id="108" class="spotRow">
<tr id="107" class="spotRow">
<td class="name">Ursus Books</td>
<td>50 East 78th St, Suite 1C, New York</td>
</tr>
<tr id="108" class="spotRow">
<td class="name">Village Works</td>
<td>12 St. Marks Pl, New York</td>
</tr>
<tr id="109" class="spotRow">
<td class="name">Westsider Rare &amp; Used Books</td>
<td>2246 Broadway, New York</td>
@ -685,7 +683,6 @@
${city}, NY ${postcode}
</p>
<p>
View in:
<a
href="https://maps.google.com/maps?q=${encodeURIComponent(
name
@ -706,17 +703,13 @@
: ""
}
</p>
<ul>
${
website
? `<li><a href="${website}" target="_blank">${cleanWebsite(
? `<p><a href="${website}" target="_blank">${cleanWebsite(
website
)}</a></li>`
)}</a></p>`
: ""
}
<li class="storeDetails">Events: ${events}</li>
<li class="storeDetails">Caf&eacute;: ${cafe}</li>
</ul>
${description ? `<p class="description">${description}</p>` : ""}`;
}
@ -820,6 +813,10 @@
}
}
function isStacked() {
return screen.width < 1120;
}
function boundingBox(point) {
// add some buffer to a point to give the user some leeway
return [
@ -829,7 +826,11 @@
}
function updateSelectedStore(store, pushState = false) {
map.flyTo({ center: [store.long, store.lat], zoom: 12 });
map.flyTo({
center: [store.long, store.lat],
offset: [isStacked() ? 0 : -250, 0],
zoom: 13,
});
popup.setLngLat([store.long, store.lat]).setHTML(store.name).addTo(map);
@ -851,8 +852,6 @@
}
function loadMap(data) {
var geolocate = new mapboxgl.GeolocateControl();
var points = [];
data.forEach((value, key) => {
points.push({
@ -883,7 +882,6 @@
},
});
map.addControl(new mapboxgl.NavigationControl(), "top-left");
map.addControl(geolocate, "top-right");
updateViewBySlug(window.location.hash.split("#")[1]);
});
@ -916,20 +914,12 @@
map.getCanvas().style.cursor = features.length ? "pointer" : "";
});
geolocate.on("geolocate", function (e) {
map.setZoom(14);
popup
.setLngLat([e.coords.longitude, e.coords.latitude])
.setHTML("Current Location")
.addTo(map);
});
setContent("Stores", TableViewTemplate(data));
document.querySelectorAll("#Stores tbody tr").forEach((element) => {
element.addEventListener("click", () => {
updateSelectedStore(data[element.id], true);
document
.getElementById("subhed")
.getElementById(isStacked() ? "map" : "selected")
.scrollIntoView({ behavior: "smooth" });
});
});