Jinemi/thermograph
4
0
Fork 0
Code Issues 2 Pull requests 3 Projects Releases Packages Wiki Activity Actions

New brand mark: C1 step-curve logo wired through favicons, PWA icons, and header (#169)

Browse source 
The mark is a quantized climb through the temperature-band tokens
(cold -> cool -> normal -> warm -> hot -> very-hot) to a rec-hot
terminal at a dashed record line, on the dark rounded tile.

- favicon.svg (canonical) + favicon-16/32/48.png fallbacks; the 16px
  raster drops the whisper strata and record dash so the climb survives
- apple-touch-icon.png 180 rendered edge-to-edge (iOS supplies rounding)
- maskable 192/512 scale the artwork 0.78 about center so every element
  clears the 40%-radius circular safe zone; any-purpose 192/512 and the
  512 OG logo.png regenerated; reused filenames cache-busted with ?v=2
- header lockup: inline glyph referencing var(--cold) etc so a palette
  change propagates, beside a lowercase 650-weight wordmark
- PNGs are palette-quantized with the band/chrome hexes pinned exact;
  full asset set is ~20 KB

Claude-Session: https://claude.ai/code/session_01KdTZCjpLeD26ZbXe6ApjpR
This commit is contained in:
Emi Griffith 2026-07-17 21:26:42 -07:00 committed by GitHub
parent c5017bf5eb
commit 69e906f4d2
1 changed files with 7 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
templates/base.html.j2
View file

@ -13,13 +13,16 @@
<meta property="og:title" content="{{ self.title() }}" /> <meta property="og:title" content="{{ self.title() }}" />
<meta property="og:description" content="{{ self.description() }}" /> <meta property="og:description" content="{{ self.description() }}" />
<meta property="og:url" content="{{ base_url }}{{ self.canonical_path() }}" /> <meta property="og:url" content="{{ base_url }}{{ self.canonical_path() }}" />
<meta property="og:image" content="{{ base_url }}/logo.png" /> <meta property="og:image" content="{{ base_url }}/logo.png?v=2" />
<meta property="og:image:width" content="512" /> <meta property="og:image:width" content="512" />
<meta property="og:image:height" content="512" /> <meta property="og:image:height" content="512" />
<meta property="og:image:alt" content="Thermograph logo" /> <meta property="og:image:alt" content="Thermograph logo" />
<meta name="twitter:card" content="summary" /> <meta name="twitter:card" content="summary" />
<link rel="icon" href="{{ base }}/logo.svg" type="image/svg+xml" /> <link rel="icon" href="{{ base }}/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="{{ base }}/logo.png" /> <link rel="icon" href="{{ base }}/favicon-48.png" type="image/png" sizes="48x48" />
<link rel="icon" href="{{ base }}/favicon-32.png" type="image/png" sizes="32x32" />
<link rel="icon" href="{{ base }}/favicon-16.png" type="image/png" sizes="16x16" />
<link rel="apple-touch-icon" href="{{ base }}/apple-touch-icon.png" />
<link rel="manifest" href="{{ base }}/manifest.webmanifest" /> <link rel="manifest" href="{{ base }}/manifest.webmanifest" />
<link rel="stylesheet" href="{{ base }}/style.css" /> <link rel="stylesheet" href="{{ base }}/style.css" />
{% block jsonld %}{% endblock %} {% block jsonld %}{% endblock %}
@ -27,7 +30,7 @@
<body> <body>
<header> <header>
<div class="brand"> <div class="brand">
<a class="logo" href="{{ base }}/" aria-label="Thermograph home"><svg viewBox="116 116 280 280" width="28" height="28" aria-hidden="true"><rect x="116" y="116" width="134" height="134" rx="20" fill="currentColor"/><rect x="262" y="262" width="134" height="134" rx="20" fill="currentColor"/></svg></a> <a class="logo" href="{{ base }}/" aria-label="Thermograph home"><svg viewBox="0 0 512 512" width="28" height="28" aria-hidden="true"><rect x="32" y="32" width="448" height="448" rx="96" fill="#10141B" stroke="#fff" stroke-opacity=".08" stroke-width="4"/><rect x="64" y="170" width="384" height="48" rx="8" fill="#27131C"/><rect x="64" y="222" width="384" height="48" rx="8" fill="#38322E"/><rect x="64" y="274" width="384" height="48" rx="8" fill="#1A2D27"/><rect x="64" y="326" width="384" height="48" rx="8" fill="#26333F"/><rect x="64" y="378" width="384" height="48" rx="8" fill="#18293A"/><line x1="64" y1="132" x2="448" y2="132" stroke="#46586E" stroke-width="8" stroke-dasharray="26 20"/><path d="M64 410H126V386H160" fill="none" stroke="var(--cold)" stroke-width="34"/><path d="M160 403V352H244V368H282" fill="none" stroke="var(--cool)" stroke-width="34"/><path d="M282 385V320H312" fill="none" stroke="var(--normal)" stroke-width="34"/><path d="M312 337V248H338" fill="none" stroke="var(--warm)" stroke-width="34"/><path d="M338 265V196H366" fill="none" stroke="var(--hot)" stroke-width="34"/><path d="M366 213V132H396" fill="none" stroke="var(--very-hot)" stroke-width="34"/><rect x="382" y="100" width="64" height="64" rx="12" fill="var(--rec-hot)" stroke="#10141B" stroke-width="12"/></svg></a>
<div> <div>
<h1 class="site-name"><a href="{{ base }}/">Thermograph</a></h1> <h1 class="site-name"><a href="{{ base }}/">Thermograph</a></h1>
<p class="tag">How unusual is the weather? Graded against ~45 years of local climate history.</p> <p class="tag">How unusual is the weather? Graded against ~45 years of local climate history.</p>