From 898fe10e06323b8d5bbc4d8a9a6345b146a77ff6 Mon Sep 17 00:00:00 2001 From: Wienke Giezeman Date: Tue, 13 Oct 2026 10:33:05 +0200 Subject: [PATCH 1/5] Header/footer: UTM tags on links to The Things Industries Re-exported doc/data/site_nav.json from thethingsnetwork-v2 (scripts/export-docs-chrome.mjs): Enterprise, "Need professional support?" and the footer's The Things Stack link now carry utm_source=thethingsnetwork.org, utm_medium=referral, utm_campaign=ttn-website, utm_content=. Co-Authored-By: Claude Opus 5.5 --- doc/data/site_nav.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/doc/data/site_nav.json b/doc/data/site_nav.json index 06db5390c..2b8ddb855 100644 --- a/doc/data/site_nav.json +++ b/doc/data/site_nav.json @@ -54,7 +54,7 @@ }, { "label": "Enterprise", - "href": "https://www.thethingsindustries.com/", + "href": "https://www.thethingsindustries.com/?utm_source=thethingsnetwork.org&utm_medium=referral&utm_campaign=ttn-website&utm_content=header-enterprise", "external": true, "key": "enterprise", "highlight": true, @@ -63,7 +63,7 @@ ], "supportCta": { "label": "Need professional support?", - "href": "https://www.thethingsindustries.com/", + "href": "https://www.thethingsindustries.com/?utm_source=thethingsnetwork.org&utm_medium=referral&utm_campaign=ttn-website&utm_content=header-support", "external": true }, "auth": { @@ -142,7 +142,7 @@ }, { "label": "The Things Stack", - "href": "https://www.thethingsindustries.com/stack/", + "href": "https://www.thethingsindustries.com/stack/?utm_source=thethingsnetwork.org&utm_medium=referral&utm_campaign=ttn-website&utm_content=footer-the-things-stack", "external": true }, { From 7b953598b7f71cc4530a147fb0d2f2ea0f14f22c Mon Sep 17 00:00:00 2001 From: Wienke Giezeman Date: Wed, 14 Oct 2026 16:17:32 +0200 Subject: [PATCH 2/5] Theme: align with the TTI brand guidelines (radius, type, motion, logos) - Radius on the 8px grid: 8px for buttons, inputs, cards, menus and controls (no more pill buttons), 16px only for the feature banner and video panel, 999px only for the account avatar. - No uppercase or positive letter-spacing: sidebar/rail labels, eyebrows, glossary letters, table headers and footer headings are Inter Label/Small 13/16 600, sentence case. - Line-heights: body 15/21; explicit line-heights on labels, buttons, card titles and headings; long-form prose keeps 16/1.6 on purpose. - Motion: one shared token-based transition (140ms, standard easing) on color/background/border/shadow for every interactive element, 220ms for the dropdown chevron, no width animation on the search field, and a prefers-reduced-motion block. - Logos: TTN horizontal color/white, The Things Stack and LoRaWAN from the brand logo set as supplied; the stale TTS-logo.svg / TTN-logo.svg URLs now serve the current lockups; unused outdated PNGs removed. Co-Authored-By: Claude Opus 5.5 --- doc/assets/css/docs.css | 133 +++++++++++------- doc/content/lorawan/_index.md | 2 +- doc/content/lorawan/lorawan-logo-color.svg | 10 ++ doc/layouts/index.html | 6 +- doc/layouts/partials/site/footer.html | 2 +- doc/layouts/partials/site/header.html | 2 +- doc/static/img/TTN-logo.svg | 28 ++-- doc/static/img/TTS-logo.svg | 28 ++-- doc/static/img/logo-tts-horizontal.png | Bin 49041 -> 0 bytes doc/static/img/ttn-horizontal-white.svg | 12 +- doc/static/img/ttn-horizontal.svg | 16 ++- doc/static/img/ttn-logo-white.png | Bin 12800 -> 0 bytes .../img/tts-horizontal-standard-color.svg | 11 ++ 13 files changed, 154 insertions(+), 96 deletions(-) create mode 100644 doc/content/lorawan/lorawan-logo-color.svg delete mode 100644 doc/static/img/logo-tts-horizontal.png delete mode 100644 doc/static/img/ttn-logo-white.png create mode 100644 doc/static/img/tts-horizontal-standard-color.svg diff --git a/doc/assets/css/docs.css b/doc/assets/css/docs.css index 1de63f5ca..03f49a716 100644 --- a/doc/assets/css/docs.css +++ b/doc/assets/css/docs.css @@ -26,7 +26,16 @@ --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; - --br-s: 4px; --br-m: 9px; --br-l: 0.9rem; --br-xl: 1.25rem; --br-pill: 3rem; + /* Radius (brand guidelines §11, 8px grid): 8px default for buttons, inputs, cards and controls; + 16px only for large panels/banners; 999px only for badges, tags, status dots, avatars, progress + bars and scrollbars. Buttons are never pill-shaped. --br-s is for inline code/kbd chips only. */ + --br-s: 4px; --br-m: 8px; --br-l: 16px; --br-full: 999px; + + /* Motion (brand guidelines §12): state changes only, never decoration. */ + --dur-fast: 140ms; /* hover, press, focus */ + --dur-base: 220ms; /* dropdowns, tabs, accordions */ + --dur-slow: 400ms; /* large surfaces (max) */ + --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --bs-s: 0 0.2rem 1rem 0 rgb(0 0 0 / 5%); --header-h: 72px; /* = the global header on www (platform site.css .tn-header__bar) */ } @@ -38,7 +47,7 @@ body { margin: 0; font-family: var(--font-body); font-size: 1rem; - line-height: 1.6; + line-height: 1.4; /* Body / Default 15/21 */ color: var(--grey-900); background: #fff; -webkit-font-smoothing: antialiased; @@ -49,6 +58,16 @@ a:hover { color: var(--navy); } img { max-width: 100%; height: auto; } :focus-visible { outline: 3px solid #cce8ff; outline-offset: 2px; border-radius: 4px; } +/* One shared state-change transition for every interactive element (brand guidelines §12): color, + background, border and shadow only — never `all`, never layout properties. */ +a, button, summary, +.dx-search__field, .dx-search__item, .dx-anchor, .dx-chapter__arrow, .dx-card__arrow, +.dx-prose tbody tr { + transition-property: color, background-color, border-color, box-shadow; + transition-duration: var(--dur-fast); + transition-timing-function: var(--ease-standard); +} + .dx-icon { width: 1em; height: 1em; flex: none; vertical-align: -0.125em; } .dx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .dx-skip { position: absolute; left: 16px; top: -48px; z-index: 50; padding: 8px 14px; border-radius: var(--br-m); background: var(--navy); color: #fff; } @@ -58,9 +77,9 @@ img { max-width: 100%; height: auto; } /* ---------- Buttons ---------- */ .dx-btn { display: inline-flex; align-items: center; gap: 8px; - padding: 12px 22px; border: 1px solid transparent; border-radius: var(--br-pill); + padding: 12px 22px; border: 1px solid transparent; border-radius: var(--br-m); font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; white-space: nowrap; - cursor: pointer; transition: background-color 0.1s, border-color 0.1s, color 0.1s; + cursor: pointer; } .dx-btn p { margin: 0; } .dx-btn--sm { padding: 9px 18px; font-size: 14px; } @@ -80,13 +99,13 @@ img { max-width: 100%; height: auto; } } .dx-header__bar { max-width: 1200px; height: var(--header-h); margin-inline: auto; padding-inline: 24px; display: flex; align-items: center; gap: 32px; } .dx-header__logo { flex: none; } -.dx-header__logo img { display: block; height: 34px; width: auto; } +.dx-header__logo img { display: block; height: 28px; width: auto; } /* brand lockup 150×28 at its native size */ .dx-header__panel { flex: 1; min-width: 0; display: flex; align-items: center; gap: 16px; } .dx-header__nav { display: flex; align-items: center; gap: 2px; } .dx-header__link { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: var(--br-m); - color: var(--grey-800); font-size: 14px; font-weight: 500; line-height: 24px; white-space: nowrap; + color: var(--grey-800); font-size: 14px; font-weight: 500; line-height: 24px; white-space: nowrap; /* 24px = control height, mirrors www */ cursor: pointer; list-style: none; } .dx-header__link::-webkit-details-marker { display: none; } @@ -94,27 +113,27 @@ img { max-width: 100%; height: auto; } .dx-header__link[aria-current="page"] { color: var(--navy); font-weight: 600; } /* no pill: same as the global header */ .dx-header__link--highlight { background: var(--tint); color: var(--ttn-700); font-weight: 600; } /* same as the global header */ .dx-header__link--highlight:hover { background: #cce8ff; color: var(--ttn-700); } -.dx-header__cta { display: inline-flex; align-items: center; justify-content: center; padding: 8px 14px; border-radius: var(--br-pill); background: var(--navy); color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; } +.dx-header__cta { display: inline-flex; align-items: center; justify-content: center; padding: 8px 14px; border-radius: var(--br-m); background: var(--navy); color: #fff; font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; } .dx-header__cta:hover { background: var(--navy-900); color: #fff; } .dx-header__tools { flex: 1; display: flex; justify-content: flex-end; align-items: center; gap: 8px; } .dx-header__auth { display: flex; align-items: center; gap: 4px; } -.dx-header__login { padding: 8px 14px; color: var(--grey-800); font-size: 14px; font-weight: 500; white-space: nowrap; } +.dx-header__login { padding: 8px 14px; color: var(--grey-800); font-size: 14px; font-weight: 500; line-height: 1.2; white-space: nowrap; } .dx-header__login:hover { color: var(--navy); } -.dx-header__user { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: var(--br-pill); color: var(--grey-900); font-size: 14px; font-weight: 600; } +.dx-header__user { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: var(--br-m); color: var(--grey-900); font-size: 14px; font-weight: 600; line-height: 1.2; } .dx-header__user:hover { background: var(--grey-050); color: var(--grey-900); } -.dx-header__user img { width: 28px; height: 28px; border-radius: 50%; background: var(--grey-050); } +.dx-header__user img { width: 28px; height: 28px; border-radius: var(--br-full); background: var(--grey-050); } .dx-header__toggle { display: none; margin-left: auto; padding: 8px; border: 0; border-radius: var(--br-m); background: transparent; color: var(--grey-900); font-size: 22px; line-height: 0; cursor: pointer; } .dx-header__toggle-close { display: none; } .dx-drop { position: relative; } -.dx-drop__chev { font-size: 14px; transition: transform 0.15s; } +.dx-drop__chev { font-size: 14px; transition: transform var(--dur-base) var(--ease-standard); } .dx-drop[open] .dx-drop__chev { transform: rotate(180deg); } .dx-drop__menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 200px; display: flex; flex-direction: column; padding: 6px; - background: #fff; border: 1px solid var(--grey-100); border-radius: var(--br-l); box-shadow: 0 12px 32px rgb(0 24 89 / 12%); + background: #fff; border: 1px solid var(--grey-100); border-radius: var(--br-m); box-shadow: 0 12px 32px rgb(0 24 89 / 12%); } -.dx-drop__item { padding: 8px 12px; border-radius: var(--br-m); color: var(--grey-800); font-size: 14px; white-space: nowrap; } +.dx-drop__item { padding: 8px 12px; border-radius: var(--br-m); color: var(--grey-800); font-size: 14px; line-height: 1.2; white-space: nowrap; } .dx-drop__item:hover { background: var(--grey-050); color: var(--grey-900); } /* Signed-in account menu, rendered by www's /site-session.js into [data-ttn-auth="dx"]. */ summary.dx-header__user { list-style: none; cursor: pointer; } @@ -138,11 +157,11 @@ summary.dx-header__user::-webkit-details-marker { display: none; } .dx-search__field:focus-within kbd { display: none; } .dx-search__results { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; width: min(440px, calc(100vw - 32px)); max-height: min(70vh, 480px); overflow-y: auto; - padding: 6px; background: #fff; border: 1px solid var(--grey-100); border-radius: var(--br-l); box-shadow: 0 12px 32px rgb(0 24 89 / 14%); + padding: 6px; background: #fff; border: 1px solid var(--grey-100); border-radius: var(--br-m); box-shadow: 0 12px 32px rgb(0 24 89 / 14%); } .dx-search__item { display: block; padding: 10px 12px; border-radius: var(--br-m); color: var(--grey-900); } .dx-search__item:hover, .dx-search__item[aria-selected="true"] { background: var(--tint); color: var(--grey-900); } -.dx-search__title { display: block; font-size: 14px; font-weight: 600; color: var(--navy); } +.dx-search__title { display: block; font-size: 14px; font-weight: 600; line-height: 17px; color: var(--navy); } .dx-search__meta { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--grey-600); } .dx-search__empty { padding: 12px; font-size: 14px; color: var(--grey-600); } .dx-search__item mark { background: transparent; color: var(--ttn-700); font-weight: 700; } @@ -150,7 +169,7 @@ summary.dx-header__user::-webkit-details-marker { display: none; } full field over its neighbours on click or "/" (the field is a