brand: an icon, ~/ and a block cursor

The app was a ring and a dot, drawn in CSS in the bar and inlined as a data
URL for the favicon. It now has an icon of its own: the `~/` of the prompt it
is named after, with the cursor waiting beside it in the alarm colour of the
theme. It is the favicon, a full-bleed touch icon for a phone's home screen,
and the mark in the bar, on the login and on the share page, served from
`web/public` so all of them are the same file.

The banner and a 512 px copy in docs/images are for the README and the wiki.
The crate description says what the workspace is now, not the diary it was.

Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 # The Proton crates set the floor.
 rust-version = "1.96"
-description = "A terminal-themed personal diary for the browser"
+description = "A private, terminal-themed workspace for the browser: diary, notes, boards and files"
 
 [dependencies]
 axum = { version = "0.8", features = ["multipart", "macros"] }

web/index.html

@@ -6,7 +6,8 @@
     <meta name="color-scheme" content="dark" />
     <meta name="theme-color" content="#0c0d0b" />
     <title>~/workspace</title>
-    <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%230c0d0b'/%3E%3Ccircle cx='32' cy='32' r='15' fill='none' stroke='%23eef1ea' stroke-width='3'/%3E%3Ccircle cx='32' cy='32' r='7' fill='%23eef1ea'/%3E%3C/svg%3E" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
   </head>
   <body>
     <div id="app"></div>

web/public/favicon.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <!-- ~/ and a block cursor: the prompt the app is named after. -->
+  <defs>
+    <linearGradient id="hull" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#181b17"/>
+      <stop offset="1" stop-color="#0c0d0b"/>
+    </linearGradient>
+  </defs>
+  <rect width="512" height="512" rx="112" fill="url(#hull)"/>
+  <rect x="22" y="22" width="468" height="468" rx="92" fill="none" stroke="#2a2f28" stroke-width="8"/>
+  <path d="M64 282 C86 226 128 220 158 254 C188 288 228 282 250 226" fill="none" stroke="#eef1ea" stroke-width="40" stroke-linecap="round"/>
+  <path d="M332 136 L274 376" fill="none" stroke="#eef1ea" stroke-width="40" stroke-linecap="round"/>
+  <rect x="360" y="150" width="88" height="212" rx="12" fill="#c8684f"/>
+</svg>

web/src/app.css

@@ -330,20 +330,12 @@ input::placeholder { color: var(--muted); }
 }
 
 /* A ring with a dot in it: the favicon, and the desktop's launcher. */
+/* The app icon, ~/ and a block cursor, as on the login and the favicon. */
 .bar .mark {
-  position: relative;
+  display: block;
-  width: 12px;
+  width: 18px;
-  height: 12px;
+  height: 18px;
   flex: none;
-  border: 1.5px solid var(--light);
-  border-radius: 999px;
-}
-.bar .mark::after {
-  content: '';
-  position: absolute;
-  inset: 2px;
-  border-radius: 999px;
-  background: var(--light);
 }
 
 .bar .divider {

web/src/lib/Bar.svelte

@@ -17,7 +17,7 @@
 </script>
 
 <header class="bar">
-  <span class="mark" aria-hidden="true"></span>
+  <img class="mark" src="/favicon.svg" alt="" width="18" height="18" />
   <span class="divider"></span>
 
   <nav class="spaces" aria-label="spaces">

web/src/lib/Login.svelte

@@ -37,7 +37,7 @@
 <main>
   <form class="resolve" onsubmit={submit}>
     <div class="brand">
-      <span class="mark" aria-hidden="true"></span>
+      <img class="mark" src="/favicon.svg" alt="" width="34" height="34" />
       <h1 class="display">workspace</h1>
     </div>
 
@@ -95,22 +95,8 @@
   .brand { display: flex; align-items: center; gap: 14px; }
   h1 { margin: 0; font-size: 26px; text-shadow: 0 2px 24px var(--ink); }
 
-  /* The ring-and-dot mark, larger than in the bar. */
+  /* The app icon: ~/ and a block cursor. */
-  .mark {
+  .mark { flex: none; display: block; }
-    position: relative;
-    width: 18px;
-    height: 18px;
-    flex: none;
-    border: 2px solid var(--light);
-    border-radius: 999px;
-  }
-  .mark::after {
-    content: '';
-    position: absolute;
-    inset: 3px;
-    border-radius: 999px;
-    background: var(--light);
-  }
 
   p { margin: 0 0 4px; font-size: 10px; }
 

web/src/lib/Shared.svelte

@@ -78,7 +78,7 @@
 
 <div class="shell shared">
   <header class="bar">
-    <span class="mark" aria-hidden="true"></span>
+    <img class="mark" src="/favicon.svg" alt="" width="18" height="18" />
     <span class="divider"></span>
     <span class="pill" aria-current="true">shared</span>
     <span class="divider"></span>