diff options
| author | JeremyJamesL <jeremyluscombe@gmail.com> | 2024-12-11 13:53:08 +0000 |
|---|---|---|
| committer | JeremyJamesL <jeremyluscombe@gmail.com> | 2024-12-11 13:53:08 +0000 |
| commit | e6ca789c7873a77ddf070313452fdafdeeb603ef (patch) | |
| tree | 29655fca0f2f9683049b445f86857d02162c2f55 /index.html | |
| parent | 195270415c4ab5bb6fd985a9bc848a42099af871 (diff) | |
styling
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 29 |
1 files changed, 18 insertions, 11 deletions
@@ -60,7 +60,7 @@ amber-600 - accent --> <body class="relative text-neutral-200 bg-neutral-800 font-['Montserrat']"> - <header class="py-4 text-center bg-neutral-800 rounded-b-lg shadow-2xl"> + <header class="top-0 w-full h-[64px] left-0 fixed py-4 text-center bg-neutral-800 rounded-b-lg shadow-2xl z-50"> <h1 class="text-lg font-semibold">London Pub Search <span class="text-2xl">🍻</span></h1> <!-- <div> @@ -81,7 +81,7 @@ </div> --></header> - <main class="relative"> + <main class="relative mt-[65px]"> <div class="absolute top-0 z-50 h-10 w-full bg-gradient-to-br from-neutral-800 to-transparent"></div> <div id="map"></div> @@ -95,7 +95,10 @@ <li class="p-2 bg-amber-600 rounded-2xl select--polygon"> <img src="/images/polygon.svg" alt="" /> </li> - <li class="p-2 bg-amber-600 rounded-2xl select--ip"> + <li class="relative p-2 bg-amber-600 rounded-2xl select--ip"> + <div + class="ip-loader hidden absolute top-0 left-0 animate-ping h-4 w-4 rounded-full bg-sky-400 opacity-75" + ></div> <img src="/images/pin.svg" alt="" /> </li> </ul> @@ -107,19 +110,20 @@ <div class="flex items-center mb-5 bg-[#373737] rounded-lg pl-4 has-[input:focus-visible]:outline has-[input:focus-visible]:outline-2 has-[input:focus-visible]:outline-offset-2 has-[input:focus-visible]:outline-amber-100" > - <label for="searchbar" - ><svg fill="#E5E5E5" height="15px" width="15px" viewBox="0 0 488.4 488.4"> + <label for="searchbar"> + <svg fill="#E5E5E5" height="15px" width="15px" viewBox="0 0 488.4 488.4"> <g> <g> <path d="M0,203.25c0,112.1,91.2,203.2,203.2,203.2c51.6,0,98.8-19.4,134.7-51.2l129.5,129.5c2.4,2.4,5.5,3.6,8.7,3.6 - s6.3-1.2,8.7-3.6c4.8-4.8,4.8-12.5,0-17.3l-129.6-129.5c31.8-35.9,51.2-83,51.2-134.7c0-112.1-91.2-203.2-203.2-203.2 - S0,91.15,0,203.25z M381.9,203.25c0,98.5-80.2,178.7-178.7,178.7s-178.7-80.2-178.7-178.7s80.2-178.7,178.7-178.7 - S381.9,104.65,381.9,203.25z" + s6.3-1.2,8.7-3.6c4.8-4.8,4.8-12.5,0-17.3l-129.6-129.5c31.8-35.9,51.2-83,51.2-134.7c0-112.1-91.2-203.2-203.2-203.2 + S0,91.15,0,203.25z M381.9,203.25c0,98.5-80.2,178.7-178.7,178.7s-178.7-80.2-178.7-178.7s80.2-178.7,178.7-178.7 + S381.9,104.65,381.9,203.25z" /> </g> - </g></svg - ></label> + </g> + </svg> + </label> <input type="text" placeholder="Search for pub" @@ -127,7 +131,10 @@ id="searchbar" /> </div> - <h2 class="font-semibold text-lg mb-3">Pubs</h2> + <div class="flex justify-between items-center mb-3"> + <h2 class="font-semibold text-lg">Pubs</h2> + <i class="text-sm pub-count"></i> + </div> <div id="hits"></div> </div> </div> |