feat(site): add brand mark

Author: Seungpyo1007

site/public/techapi-mark.png

@@ -51,7 +51,7 @@ const endpoints = [
   <nav class="nav">
     <div class="wrap nav-inner">
       <a class="brand" href={base}>
-        <span class="mark">T</span>TechAPI<span class="cursor" aria-hidden="true"></span>
+        <img class="brand-mark" src={`${base}techapi-mark.png`} alt="" aria-hidden="true" />TechAPI<span class="cursor" aria-hidden="true"></span>
       </a>
       <div class="nav-links">
         <a href="#history">History</a>
@@ -315,7 +315,7 @@ const endpoints = [
   <footer>
     <div class="wrap">
       <div class="foot-inner">
-        <a class="brand" href={base}><span class="mark">T</span>TechAPI</a>
+        <a class="brand" href={base}><img class="brand-mark" src={`${base}techapi-mark.png`} alt="" aria-hidden="true" />TechAPI</a>
         <div class="lic">code <strong>MIT</strong> · data <strong>CC-BY-SA 4.0</strong></div>
         <div class="foot-links">
           <a href={ghUrl} target="_blank" rel="noopener">GitHub</a>

site/src/pages/index.astro

@@ -120,11 +120,10 @@ code, .mono { font-family: var(--mono); }
 }
 .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
 .brand { display: flex; align-items: center; gap: 11px; font-family: var(--mono); font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
-.brand .mark {
-  width: 26px; height: 26px; flex: none;
-  display: grid; place-items: center;
-  background: var(--accent); color: var(--accent-ink);
-  font-weight: 800; font-size: 15px; border-radius: 3px;
+.brand .brand-mark {
+  width: 30px; height: 30px; flex: none;
+  object-fit: cover; border-radius: 6px;
+  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 35%, transparent);
 }
 .brand .cursor {
   width: 9px; height: 17px; background: var(--accent);