astro

hyperknot · Jun 13, 2024 · ec5bac8 · ec5bac8
1 parent 3f26695
commit ec5bac8
Show file tree

Hide file tree

Showing 14 changed files with 786 additions and 2,524 deletions.
diff --git a/website/pnpm-lock.yaml b/website/pnpm-lock.yaml
diff --git a/website/src/components/Card.astro b/website/src/components/Card.astro
diff --git a/website/src/components/Logo.astro b/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>
diff --git a/website/src/components/Map.astro b/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>
diff --git a/website/src/components/StyleUrlBug.astro b/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>
diff --git a/website/src/layouts/Layout.astro b/website/src/layouts/Layout.astro
@@ -1,6 +1,6 @@
 ---
 const { frontmatter } = Astro.props || {}
-const { title, container } = frontmatter || Astro.props
+const { title } = frontmatter || Astro.props
 
 import '../styles/_style.css'
 ---
@@ -30,15 +30,15 @@ import '../styles/_style.css'
 
   <body>
     {
-      container && (
+      frontmatter && (
         <div class="container">
           <slot />
         </div>
       )
     }
-    {!container && <slot />}
+    {!frontmatter && <slot />}
 
-    <div class="footer">
+    <div class="footer container">
       <a href="/privacy">Privacy Policy</a>
       <a href="/tos">Terms of Service</a>
     </div>

diff --git a/website/src/pages/privacy.md b/website/src/pages/privacy.md
@@ -1,7 +1,6 @@
 ---
 layout: '../layouts/Layout.astro'
 title: 'Privacy Policy'
-container: true
 ---
 
 # OpenFreeMap and your data

diff --git a/website/src/pages/quick_start.astro b/website/src/pages/quick_start.astro
@@ -39,35 +39,3 @@ import Donate from '../components/Donate.astro'
     <Donate />
   </div>
 </Layout>
-
-<!--<style>-->
-<!--  .col-lbl {-->
-<!--    display: block;-->
-<!--    cursor: pointer;-->
-<!--    color: #333;-->
-<!--  }-->
-
-<!--  .col-chk {-->
-<!--    display: none;-->
-<!--  }-->
-
-<!--  .col-lbl:before {-->
-<!--    content: '►';-->
-<!--    margin-right: 1em;-->
-<!--    color: #555;-->
-<!--    font-size: 0.8em;-->
-<!--  }-->
-
-<!--  .col-cnt {-->
-<!--    display: none;-->
-<!--    margin: 1em 0 2em;-->
-<!--  }-->
-
-<!--  .col-chk:checked ~ .col-cnt {-->
-<!--    display: block;-->
-<!--  }-->
-
-<!--  .col-chk:checked ~ .col-lbl:before {-->
-<!--    content: '▼';-->
-<!--  }-->
-<!--</style>-->
diff --git a/website/src/pages/tos.md b/website/src/pages/tos.md
@@ -1,7 +1,6 @@
 ---
 layout: '../layouts/Layout.astro'
 title: 'Terms of Services'
-container: true
 ---
 
 # TERMS OF SERVICES

diff --git a/website/src/styles/_style.css b/website/src/styles/_style.css
@@ -1,3 +1,5 @@
 @import "reset.css";
+@import "global.css";
+/* */
+@import "map.css";
 @import "donate.css";
-@import "global.css";
diff --git a/website/src/styles/collapsible.css b/website/src/styles/collapsible.css
@@ -0,0 +1,29 @@
+.col-lbl {
+  display: block;
+  cursor: pointer;
+  color: #333;
+}
+
+.col-chk {
+  display: none;
+}
+
+.col-lbl:before {
+  content: '►';
+  margin-right: 1em;
+  color: #555;
+  font-size: 0.8em;
+}
+
+.col-cnt {
+  display: none;
+  margin: 1em 0 2em;
+}
+
+.col-chk:checked ~ .col-cnt {
+  display: block;
+}
+
+.col-chk:checked ~ .col-lbl:before {
+  content: '▼';
+}
diff --git a/website/src/styles/donate.css b/website/src/styles/donate.css
@@ -1,5 +1,4 @@
 #support-plans-slider {
-  max-width: 600px;
   margin: 200px auto 150px;
 }
 

diff --git a/website/src/styles/global.css b/website/src/styles/global.css
@@ -17,7 +17,7 @@ body {
 .container {
   max-width: 600px;
   margin: 0 auto;
-  padding: 20px;
+  padding: 0 20px;
 }
 
 h1,
@@ -56,7 +56,6 @@ h1 {
 }
 
 .footer {
-  max-width: 600px;
   margin-top: 3em;
   display: flex;
   justify-content: space-evenly;
@@ -69,12 +68,10 @@ h1 {
 
 p,
 ul {
-  max-width: 600px;
   margin-bottom: 0.6em;
 }
 
 pre {
-  max-width: 600px;
   margin-bottom: 0.6em;
   font-size: 14px;
   padding: 7px 14px;
@@ -91,19 +88,20 @@ hr {
   margin: 2em 0;
 }
 
-/*@media (max-width: 620px) {*/
-/*  .static,*/
-/*  h1,*/
-/*  h2,*/
-/*  h3,*/
-/*  h4,*/
-/*  h5,*/
-/*  h6,*/
-/*  p,*/
-/*  .button-container {*/
-/*    max-width: 100%;*/
-/*    margin-left: 20px;*/
-/*    margin-right: 20px;*/
-/*  }*/
-/*}*/
+.logo {
+  margin: 0 auto;
+}
+
+.icons {
+  margin: 0 auto;
+  width: 80px;
+  display: flex;
+  justify-content: space-between;
+}
 
+#style-url-pre {
+  background: #efefef;
+  padding: 14px;
+  font-weight: bold;
+  overflow-x: auto;
+}