styling

Author: hyperknot

website/src/components/Logo.astro

@@ -4,7 +4,7 @@ const { title } = Astro.props
 
 <img src="/logo.jpg" alt="logo" height="200" class="logo" />
 
-<h1>{title}</h1>
+<h1 set:html={title} />
 
 <div class="icons">
   <a href="https://github.com/hyperknot/openfreemap" target="_blank"

website/src/content/index/rest.md

@@ -22,7 +22,7 @@ I waited for years for someone to offer this service but realized that no one wa
 
 I'll share more about the reasons in a future [blog post](https://blog.hyperknot.com/). Feel free to subscribe.
 
-## How can this work? How can a one-person project offer unlimited map hosting for free?
+## How can this work (both financially and technically)?
 
 There is no technical reason why map hosting costs as much as it does today. Vector tiles are just static files. It's true that serving hundreds of millions of files is not easy, but at the end of the day, they are just files.
 

website/src/pages/quick_start.astro

@@ -13,7 +13,7 @@ import Donate from '../components/Donate.astro'
 ---
 
 <Layout title="OpenFreeMap Quick Start Guide">
-  <Logo title="OpenFreeMap Quick Start Guide" />
+  <Logo title="OpenFreeMap<br>Quick Start Guide" />
 
   <div class="container" style="margin-top:30px; margin-bottom: 30px;">
     <p>

website/src/styles/global.css

@@ -108,19 +108,19 @@ hr {
   text-decoration: none;
   color: white;
   font-weight: bold;
-  letter-spacing: 0.1rem;
-  font-size: 20px;
+  letter-spacing: 0.05rem;
+  font-size: 18px;
   border-radius: 20px;
-  padding: 20px 0;
-  margin: 5em auto;
-  width: 300px;
+  padding: 15px 0;
+  margin: 2em auto 5em;
+  width: 230px;
   text-align: center;
-  background: linear-gradient(32deg, #fdb900, transparent) #f441a5;
+  background: linear-gradient(32deg, #0070a2, transparent) #59c15a;
   transition: background-color 1s;
 
   &:hover,
   &:focus {
-    background-color: #03a9f4;
+    background-color: #dea31d;
   }
 }