Add settings/about pane

app/components/settings-pane.gjs

@@ -1,19 +1,49 @@
 import Component from '@glimmer/component';
 import { on } from '@ember/modifier';
 import Icon from '#components/icon';
+import { service } from '@ember/service';
+import { action } from '@ember/object';
 
 export default class SettingsPane extends Component {
   <template>
     <div class="sidebar settings-pane">
       <div class="sidebar-header">
-        <h2>Settings</h2>
+        <h2>Marco</h2>
         <button type="button" class="close-btn" {{on "click" @onClose}}>
           <Icon @name="x" @size={{20}} @color="#333" />
         </button>
       </div>
 
       <div class="sidebar-content">
-        <p>Settings content placeholder...</p>
+        <section class="settings-section">
+          <h3>Settings</h3>
+        </section>
+        <section class="settings-section">
+          <h3>About</h3>
+          <p>
+            <strong>Marco</strong> (as in <a
+            href="https://en.wikipedia.org/wiki/Marco_Polo"
+            target="_blank">Marco Polo</a>) is an unhosted maps application
+            that respects your privacy and choices.
+          </p>
+          <p>
+            Connect your own <a href="https://remotestorage.io/"
+              target="_blank">remote storage</a> to sync place bookmarks across
+            devices.
+          </p>
+          <ul class="link-list">
+            <li>
+              <a href="https://gitea.kosmos.org/raucao/marco" target="_blank">
+                Source Code
+              </a> (<a href="https://en.wikipedia.org/wiki/GNU_Affero_General_Public_License" target="_blank">AGPL</a>)
+            </li>
+            <li>
+              <a href="https://openstreetmap.org/copyright" target="_blank">
+                Map Data © OpenStreetMap
+              </a>
+            </li>
+          </ul>
+        </section>
       </div>
     </div>
   </template>

app/styles/app.css

@@ -8,6 +8,7 @@ body {
 
 body {
   margin: 0;
+  font-family: "Noto Serif", serif;
 }
 
 #root,
@@ -199,9 +200,9 @@ body {
   .settings-pane.sidebar {
     width: 100%;
     right: 0;
-    border-radius: 0; /* Full screen, no rounded corners needed */
-    height: 100%; /* Ensure full height */
-    top: 0; /* Start from top */
+    border-radius: 16px 16px 0 0;
+    height: 66vh;
+    top: auto;
     bottom: 0;
   }
 }
@@ -264,6 +265,19 @@ body {
   justify-content: flex-end;
 }
 
+.settings-section {
+  margin-bottom: 2rem;
+}
+
+.settings-section h3 {
+  font-size: 1rem;
+  font-weight: bold;
+  color: #666;
+  margin: 0 0 0.5rem 0;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
 .btn-full {
   width: 100%;
 }
@@ -281,6 +295,27 @@ body {
 .btn-primary:hover {
   background: #0069d9;
 }
+
+.link-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.link-list li {
+  margin-bottom: 0.5rem;
+}
+
+.link-list a {
+  color: #007bff;
+  text-decoration: none;
+  font-size: 0.95rem;
+}
+
+.link-list a:hover {
+  text-decoration: underline;
+}
+
 .back-btn {
   background: none;
   border: none;