WIP About section

* Add fold-out sections for additional details
* Use table for Open Source info, add licenses
* Move link styles to CSS variables

app/components/app-menu/about.gjs

@@ -14,7 +14,7 @@ import Icon from '#components/icon';
   </div>
 
   <div class="sidebar-content">
-    <section class="settings-section">
+    <section class="about-section">
       <p>
         <strong>Marco</strong>
         (as in
@@ -41,31 +41,78 @@ import Icon from '#components/icon';
           <span>Open Source</span>
         </summary>
         <div class="details-content">
-          <ul class="link-list">
+          <table>
-            <li>
+            <thead>
+              <tr>
+                <th>Source</th>
+                <th>License</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>
                   <a
                     href="https://gitea.kosmos.org/raucao/marco"
                     target="_blank"
                     rel="noopener"
                   >
-                Source Code
+                    Marco App
                   </a>
-              (<a
+                </td>
+                <td>
+                  <a
                     href="https://en.wikipedia.org/wiki/GNU_Affero_General_Public_License"
                     target="_blank"
                     rel="noopener"
-              >AGPL</a>)
+                  >
-            </li>
+                    <abbr title="GNU Affero General Public License">AGPL</abbr>
-            <li>
+                  </a>
+                </td>
+              </tr>
+              <tr>
+                <td>
                   <a
                     href="https://openstreetmap.org/copyright"
                     target="_blank"
                     rel="noopener"
                   >
-                Map Data © OpenStreetMap
+                    Map Data
                   </a>
-            </li>
+                </td>
-          </ul>
+                <td>
+                  <a
+                    href="https://opendatacommons.org/licenses/odbl/"
+                    target="_blank"
+                    rel="noopener"
+                  >
+                    <abbr
+                      title="Open Data Commons Open Database License"
+                    >ODbL</abbr>
+                  </a>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <a
+                    href="https://github.com/feathericons/feather"
+                    target="_blank"
+                    rel="noopener"
+                  >
+                    Feather Icons
+                  </a>
+                </td>
+                <td>
+                  <a
+                    href="https://en.wikipedia.org/wiki/MIT_License"
+                    target="_blank"
+                    rel="noopener"
+                  >
+                    <abbr title="MIT License">MIT</abbr>
+                  </a>
+                </td>
+              </tr>
+            </tbody>
+          </table>
         </div>
       </details>
       <details>

app/components/place-details.gjs

@@ -286,7 +286,7 @@ export default class PlaceDetails extends Component {
           >
             <Icon
               @name="bookmark"
-              @color={{if this.isSaved "currentColor" "#007bff"}}
+              @color={{if this.isSaved "currentColor" "var(--link-color)"}}
             />
             {{if this.isSaved "Saved" "Save"}}
           </button>
@@ -307,7 +307,7 @@ export default class PlaceDetails extends Component {
             title="Edit"
             {{on "click" this.startEditing}}
           >
-            <Icon @name="edit" @color="#007bff" />
+            <Icon @name="edit" @color="var(--link-color)" />
             Edit
           </button>
         {{/if}}

app/components/places-sidebar.gjs

@@ -226,7 +226,7 @@ export default class PlacesSidebar extends Component {
             class="btn btn-outline create-place"
             {{on "click" this.createNewPlace}}
           >
-            <Icon @name="plus" @size={{18}} @color="#007bff" />
+            <Icon @name="plus" @size={{18}} @color="var(--link-color)" />
             Create new place
           </button>
         {{/if}}

app/styles/app.css

@@ -4,6 +4,8 @@
   --default-list-color: #fc3;
   --hover-bg: #f8f9fa;
   --sidebar-width: 360px;
+  --link-color: #2a7fff;
+  --link-color-visited: #6a4fbf;
 }
 
 html,
@@ -186,7 +188,7 @@ body {
 }
 
 .text-primary {
-  color: #007bff;
+  color: var(--link-color);
 }
 
 .text-danger {
@@ -333,7 +335,7 @@ body {
 }
 
 .sidebar-content details .details-content {
-  padding: 1rem 1.4rem;
+  padding: 0 1.4rem 1rem;
   animation: details-slide-down 0.2s ease-out;
 }
 
@@ -395,8 +397,8 @@ body {
 
 .form-control:focus {
   outline: none;
-  border-color: #007bff;
+  border-color: var(--link-color);
-  box-shadow: 0 0 0 2px rgb(0 123 255 / 10%);
+  box-shadow: 0 0 0 2px rgb(42 127 255 / 10%);
 }
 
 select.form-control {
@@ -425,12 +427,21 @@ select.form-control {
   margin-top: 1rem;
 }
 
-.settings-section p a {
+.about-section {
-  color: #007bff;
+  margin-bottom: 2rem;
+  font-size: 0.95rem;
+}
+
+.about-section a {
+  color: var(--link-color);
   text-decoration: none;
 }
 
-.settings-section p a:hover {
+.about-section a:visited {
+  color: var(--link-color-visited);
+}
+
+.about-section a:hover {
   text-decoration: underline;
 }
 
@@ -439,7 +450,7 @@ select.form-control {
 }
 
 .btn-primary {
-  background: #007bff;
+  background: var(--link-color);
   color: white;
   border: none;
   padding: 0.75rem;
@@ -468,7 +479,7 @@ select.form-control {
 }
 
 .meta-info a {
-  color: #007bff;
+  color: var(--link-color);
   text-decoration: none;
 }
 
@@ -476,6 +487,37 @@ select.form-control {
   text-decoration: underline;
 }
 
+.sidebar-content table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.9rem;
+}
+
+.sidebar-content table th,
+.sidebar-content table td {
+  padding: 0.5rem 0;
+  text-align: left;
+}
+
+.sidebar-content table th {
+  font-size: 0.75rem;
+  font-weight: bold;
+  text-transform: uppercase;
+  color: #898989;
+}
+
+.sidebar-content table td {
+  border-bottom: 1px solid #f9f9f9;
+}
+
+.sidebar-content table tr:last-child td {
+  border-bottom: none;
+}
+
+abbr[title] {
+  text-decoration: underline dotted;
+}
+
 .link-list {
   list-style: none;
   padding: 0;
@@ -487,7 +529,7 @@ select.form-control {
 }
 
 .link-list a {
-  color: #007bff;
+  color: var(--link-color);
   text-decoration: none;
   font-size: 0.95rem;
 }
@@ -612,7 +654,7 @@ select.form-control {
 }
 
 .btn-blue {
-  background: #007bff;
+  background: var(--link-color);
   color: white;
   border: none;
 }
@@ -1152,7 +1194,7 @@ button.create-place {
 }
 
 .place-lists-manager input[type='checkbox'] {
-  accent-color: #007bff;
+  accent-color: var(--link-color);
   width: 16px;
   height: 16px;
   cursor: pointer;