2026-08-20 09:01:28 -05:00
3 changed files with 41 additions and 0 deletions
@@ -4,6 +4,15 @@
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Redefined Designs</title>
 <!-- The SVG carries its own light/dark rule; Chrome ignores media queries in a
     favicon and keeps the light rendering, which still reads because the pale
     letters carry the mark against a dark tab strip. -->
 <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
 <!-- Colours the browser UI around the page on Android and in installed PWAs,
     matching the accent in src/main.tsx so the chrome does not fight the app. -->
 <meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff" />
 <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#141414" />
 </head>
 <body>
 <div id="root"></div>
@@ -0,0 +1,32 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Redefined Designs">
  <!--
    RD monogram. The letters are knocked out of a filled tile rather than drawn
    on their own: at 16px the tile is what makes the icon findable in a strip of
    tabs, where bare strokes turn to grey fuzz.
    Colours are the brand accent from src/main.tsx, and they invert with the
    theme for the same reason it does. Chrome ignores media queries inside a
    favicon and keeps the light-theme rendering — that is fine here, because the
    pale letters still carry the mark against a dark tab strip.
    Drawn as strokes on a 64 grid so the weight is one number. Note a stroked
    arc extends half the stroke width past its centreline; the D's bowl radius
    is 14 from a stem at x=38, which is what keeps its outer edge inside the box.
  -->
  <style>
    .tile { fill: #1a1a1a; }
    .mark { fill: none; stroke: #f0f0f0; stroke-width: 6.5; stroke-linecap: butt; stroke-linejoin: miter; }
    @media (prefers-color-scheme: dark) {
      .tile { fill: #f0f0f0; }
      .mark { stroke: #1a1a1a; }
    }
  </style>
  <rect class="tile" x="2" y="2" width="60" height="60" rx="15" />
  <g class="mark">
    <path d="M15 18 V46" />
    <path d="M15 18 H20 A7 7 0 0 1 20 32 H15" />
    <path d="M20 32 L27 46" />
    <path d="M37 18 V46" />
    <path d="M37 18 H38 A14 14 0 0 1 38 46 H37" />
  </g>
 </svg>