astro

website/src/components/Card.astro

@@ -1,61 +0,0 @@
----
-interface Props {
-  title: string
-  body: string
-  href: string
-}
-
-const { href, title, body } = Astro.props
----
-
-<li class="link-card">
-  <a href={href}>
-    <h2>
-      {title}
-      <span>&rarr;</span>
-    </h2>
-    <p>
-      {body}
-    </p>
-  </a>
-</li>
-<style>
-  .link-card {
-    list-style: none;
-    display: flex;
-    padding: 1px;
-    background-color: #23262d;
-    background-image: none;
-    background-size: 400%;
-    border-radius: 7px;
-    background-position: 100%;
-    transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
-  }
-  .link-card > a {
-    width: 100%;
-    text-decoration: none;
-    line-height: 1.4;
-    padding: calc(1.5rem - 1px);
-    border-radius: 8px;
-    color: white;
-    background-color: #23262d;
-    opacity: 0.8;
-  }
-  h2 {
-    margin: 0;
-    font-size: 1.25rem;
-    transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-  }
-  p {
-    margin-top: 0.5rem;
-    margin-bottom: 0;
-  }
-  .link-card:is(:hover, :focus-within) {
-    background-position: 0;
-    background-image: var(--accent-gradient);
-  }
-  .link-card:is(:hover, :focus-within) h2 {
-    color: rgb(var(--accent-light));
-  }
-</style>

website/src/components/Logo.astro

@@ -1,8 +1,4 @@
 ---
-interface Props {
-  title: string
-}
-
 const { title } = Astro.props
 ---
 
@@ -16,16 +12,3 @@ const { title } = Astro.props
   >
   <a href="https://x.com/hyperknot" target="_blank"><img src="/x.svg" alt="x" height="28" /></a>
 </div>
-
-<style>
-  .logo {
-    margin: 0 auto;
-  }
-
-  .icons {
-    margin: 0 auto;
-    width: 80px;
-    display: flex;
-    justify-content: space-between;
-  }
-</style>

website/src/components/Map.astro

@@ -13,7 +13,7 @@ const { showStyleURL } = Astro.props
   </div>
 </div>
 
-<div class="button-container">
+<div class="button-container container">
   <button data-style="positron" class="btn">Positron</button>
   <button data-style="bright" class="btn">Bright</button>
   <button data-style="liberty" class="btn selected">Liberty</button>
@@ -24,83 +24,3 @@ const { showStyleURL } = Astro.props
 
 <script is:inline src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
 <script is:inline src="/scripts/map.js"></script>
-
-<style>
-  #map-container {
-    width: 100%;
-    height: 500px;
-    margin-bottom: 24px;
-    position: relative;
-  }
-
-  @media (max-width: 550px) {
-    #map-container {
-      height: 300px;
-    }
-  }
-
-  #mapbg-image {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    z-index: 1;
-    background-image: url('/berlin.webp');
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    cursor: pointer;
-    transition: opacity 3s;
-  }
-
-  .mapbg-attrib {
-    font:
-      12px / 20px Helvetica Neue,
-      Arial,
-      Helvetica,
-      sans-serif;
-    background-color: hsla(0, 0%, 100%, 0.5);
-    padding: 0 5px;
-    bottom: 0;
-    right: 0;
-    position: absolute;
-  }
-
-  .mapbg-attrib a {
-    color: rgba(0, 0, 0, 0.75);
-    text-decoration: none;
-  }
-
-  .mapbg-attrib a:hover {
-    text-decoration: underline;
-  }
-
-  .button-container {
-    margin: 0 auto 20px;
-    max-width: 600px;
-    display: flex;
-    flex-wrap: nowrap;
-  }
-
-  .btn {
-    border: 0;
-    border-radius: 0.25rem;
-    background: #2f5f8b;
-    color: white;
-    font-size: 1rem;
-    white-space: nowrap;
-    text-decoration: none;
-    padding: 0.25rem 0.5rem;
-    margin-right: 0.5rem;
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-  }
-
-  .btn.selected {
-    background: #4892d9;
-  }
-
-  .btn:hover {
-    background: #4892d9;
-  }
-</style>

website/src/components/StyleUrlBug.astro

@@ -1,11 +1,5 @@
-<p>Use the following style in a MapLibre map:</p>
-<pre
-  id="style-url-pre"><code id="style-url-code">https://tiles.openfreemap.org/styles/liberty</code></pre>
-
-<style>
-  #style-url-pre {
-    background: #efefef;
-    padding: 14px;
-    font-weight: bold;
-  }
-</style>
+<div class="container">
+  <p>Use the following style in a MapLibre map:</p>
+  <pre
+    id="style-url-pre"><code id="style-url-code">https://tiles.openfreemap.org/styles/liberty</code></pre>
+</div>