Monorepo for Tangled tangled.org
9

Configure Feed

Select the types of activity you want to include in your feed.

appview/pages: rework brand page

use the blessed logotype

Signed-off-by: oppiliappan <me@oppi.li>

author
oppiliappan
date (Jun 15, 2026, 10:38 AM +0100) commit 97e8ed99 parent 82899c63 change-id ttkrzuqv
+93 -85
+93 -85
appview/pages/templates/brand/brand.html
··· 10 10 </header> 11 11 12 12 <main class="col-span-full md:col-span-10 bg-white dark:bg-gray-800 drop-shadow-sm rounded p-6 md:px-10"> 13 - <div class="space-y-16"> 13 + <div class="space-y-12"> 14 14 15 - <!-- Introduction Section --> 15 + <!-- introduction section --> 16 16 <section> 17 17 <p class="text-gray-500 dark:text-gray-300 mb-2"> 18 18 Tangled's logo and mascot is <strong>Dolly</strong>, the first ever <em>cloned</em> mammal. Please 19 19 follow the below guidelines when using Dolly and the logotype. 20 20 </p> 21 - <p class="text-gray-500 dark:text-gray-300 mb-2"> 22 - All assets are served as SVGs, and can be downloaded by right-clicking and clicking "Save image as". 23 - </p> 24 21 </section> 25 22 26 - <!-- Black Logotype Section --> 27 - <section class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center"> 28 - <div class="order-2 lg:order-1"> 29 - <div class="border border-gray-200 dark:border-gray-700 p-8 sm:p-16 bg-gray-50 dark:bg-gray-100 rounded"> 30 - <img src="https://assets.tangled.network/tangled_logotype_black_on_trans.svg" 31 - alt="Tangled logo - black version" 32 - class="w-full max-w-sm mx-auto" /> 23 + <!-- black logotype section --> 24 + <section class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start"> 25 + <div class="order-2"> 26 + <div id="asset-logotype-black" data-filename="tangled_logotype_black.svg" class="border border-gray-200 dark:border-gray-700 p-8 sm:p-16 bg-gray-50 dark:bg-gray-100 rounded"> 27 + {{ template "fragments/dolly/logotype" (dict "Classes" "w-full max-w-sm mx-auto" "FillColor" "black") }} 33 28 </div> 34 29 </div> 35 - <div class="order-1 lg:order-2"> 30 + <div class="order-1"> 36 31 <h2 class="text-xl font-semibold dark:text-white mb-3">Black logotype</h2> 37 32 <p class="text-gray-500 dark:text-gray-300 mb-4">For use on light-colored backgrounds.</p> 38 - <p class="text-gray-700 dark:text-gray-300"> 33 + <p class="text-gray-700 dark:text-gray-300 mb-4"> 39 34 This is the preferred version of the logotype, featuring dark text and elements, ideal for light 40 35 backgrounds and designs. 41 36 </p> 37 + <button type="button" data-download="#asset-logotype-black" class="btn flex items-center gap-2 w-fit"> 38 + {{ i "download" "w-4 h-4" }} Download SVG 39 + </button> 42 40 </div> 43 41 </section> 44 42 45 - <!-- White Logotype Section --> 46 - <section class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center"> 47 - <div class="order-2 lg:order-1"> 48 - <div class="bg-black p-8 sm:p-16 rounded"> 49 - <img src="https://assets.tangled.network/tangled_logotype_white_on_trans.svg" 50 - alt="Tangled logo - white version" 51 - class="w-full max-w-sm mx-auto" /> 43 + <!-- white logotype section --> 44 + <section class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start"> 45 + <div class="order-2"> 46 + <div id="asset-logotype-white" data-filename="tangled_logotype_white.svg" class="bg-black p-8 sm:p-16 rounded"> 47 + {{ template "fragments/dolly/logotype" (dict "Classes" "w-full max-w-sm mx-auto" "FillColor" "white") }} 52 48 </div> 53 49 </div> 54 - <div class="order-1 lg:order-2"> 50 + <div class="order-1"> 55 51 <h2 class="text-xl font-semibold dark:text-white mb-3">White logotype</h2> 56 52 <p class="text-gray-500 dark:text-gray-300 mb-4">For use on dark-colored backgrounds.</p> 57 - <p class="text-gray-700 dark:text-gray-300"> 53 + <p class="text-gray-700 dark:text-gray-300 mb-4"> 58 54 This version features white text and elements, ideal for dark backgrounds 59 55 and inverted designs. 60 56 </p> 57 + <button type="button" data-download="#asset-logotype-white" class="btn flex items-center gap-2 w-fit"> 58 + {{ i "download" "w-4 h-4" }} Download SVG 59 + </button> 61 60 </div> 62 61 </section> 63 62 64 - <!-- Mark Only Section --> 65 - <section class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center"> 66 - <div class="order-2 lg:order-1"> 67 - <div class="grid grid-cols-2 gap-2"> 68 - <!-- Black mark on light background --> 69 - <div class="border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-100 p-8 sm:p-12 rounded"> 70 - <img src="https://assets.tangled.network/tangled_dolly_face_only_black_on_trans.svg" 71 - alt="Dolly face - black version" 72 - class="w-full max-w-16 mx-auto" /> 63 + <!-- mark only section --> 64 + <section class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start"> 65 + <div class="order-2 h-full"> 66 + <div class="grid grid-cols-2 gap-2 h-full"> 67 + <div id="asset-face-black" data-filename="tangled_dolly_face_black.svg" class="border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-100 p-8 sm:p-12 rounded flex items-center justify-center"> 68 + {{ template "fragments/dolly/logo" (dict "Classes" "w-full max-w-16 mx-auto" "FillColor" "black") }} 73 69 </div> 74 - <!-- White mark on dark background --> 75 - <div class="bg-black p-8 sm:p-12 rounded"> 76 - <img src="https://assets.tangled.network/tangled_dolly_face_only_white_on_trans.svg" 77 - alt="Dolly face - white version" 78 - class="w-full max-w-16 mx-auto" /> 70 + <div id="asset-face-white" data-filename="tangled_dolly_face_white.svg" class="bg-black p-8 sm:p-12 rounded flex items-center justify-center"> 71 + {{ template "fragments/dolly/logo" (dict "Classes" "w-full max-w-16 mx-auto" "FillColor" "white") }} 79 72 </div> 80 73 </div> 81 74 </div> 82 - <div class="order-1 lg:order-2"> 75 + <div class="order-1"> 83 76 <h2 class="text-xl font-semibold dark:text-white mb-3">Mark only</h2> 84 77 <p class="text-gray-500 dark:text-gray-300 mb-4"> 85 78 When a smaller 1:1 logo or icon is needed, Dolly's face may be used on its own. ··· 88 81 <strong class="font-semibold">Note</strong>: for situations where the background 89 82 is unknown, use the black version for ideal contrast in most environments. 90 83 </p> 84 + <div class="flex flex-wrap gap-2"> 85 + <button type="button" data-download="#asset-face-black" class="btn flex items-center gap-2 w-fit"> 86 + {{ i "download" "w-4 h-4" }} Black on white 87 + </button> 88 + <button type="button" data-download="#asset-face-white" class="btn flex items-center gap-2 w-fit"> 89 + {{ i "download" "w-4 h-4" }} White on black 90 + </button> 91 + </div> 91 92 </div> 92 93 </section> 93 94 94 - <!-- Colored Backgrounds Section --> 95 - <section class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center"> 96 - <div class="order-2 lg:order-1"> 95 + <!-- colored backgrounds section --> 96 + <section class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start"> 97 + <div class="order-2"> 97 98 <div class="grid grid-cols-2 gap-2"> 98 - <!-- Pastel Green background --> 99 99 <div class="bg-green-500 p-8 sm:p-12 rounded"> 100 - <img src="https://assets.tangled.network/tangled_dolly_face_only_white_on_trans.svg" 101 - alt="Tangled logo on pastel green background" 102 - class="w-full max-w-16 mx-auto" /> 100 + {{ template "fragments/dolly/logo" (dict "Classes" "w-full max-w-16 mx-auto" "FillColor" "white") }} 103 101 </div> 104 - <!-- Pastel Blue background --> 105 102 <div class="bg-blue-500 p-8 sm:p-12 rounded"> 106 - <img src="https://assets.tangled.network/tangled_dolly_face_only_white_on_trans.svg" 107 - alt="Tangled logo on pastel blue background" 108 - class="w-full max-w-16 mx-auto" /> 103 + {{ template "fragments/dolly/logo" (dict "Classes" "w-full max-w-16 mx-auto" "FillColor" "white") }} 109 104 </div> 110 - <!-- Pastel Yellow background --> 111 105 <div class="bg-yellow-500 p-8 sm:p-12 rounded"> 112 - <img src="https://assets.tangled.network/tangled_dolly_face_only_white_on_trans.svg" 113 - alt="Tangled logo on pastel yellow background" 114 - class="w-full max-w-16 mx-auto" /> 106 + {{ template "fragments/dolly/logo" (dict "Classes" "w-full max-w-16 mx-auto" "FillColor" "white") }} 115 107 </div> 116 - <!-- Pastel Red background --> 117 108 <div class="bg-red-500 p-8 sm:p-12 rounded"> 118 - <img src="https://assets.tangled.network/tangled_dolly_face_only_white_on_trans.svg" 119 - alt="Tangled logo on pastel red background" 120 - class="w-full max-w-16 mx-auto" /> 109 + {{ template "fragments/dolly/logo" (dict "Classes" "w-full max-w-16 mx-auto" "FillColor" "white") }} 121 110 </div> 122 111 </div> 123 112 </div> 124 - <div class="order-1 lg:order-2"> 113 + <div class="order-1"> 125 114 <h2 class="text-xl font-semibold dark:text-white mb-3">Colored backgrounds</h2> 126 115 <p class="text-gray-500 dark:text-gray-300 mb-4"> 127 116 White logo mark on colored backgrounds. ··· 133 122 </div> 134 123 </section> 135 124 136 - <!-- Black Logo on Pastel Backgrounds Section --> 137 - <section class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center"> 138 - <div class="order-2 lg:order-1"> 125 + <!-- black logo on pastel backgrounds section --> 126 + <section class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start"> 127 + <div class="order-2"> 139 128 <div class="grid grid-cols-2 gap-2"> 140 - <!-- Pastel Green background --> 141 129 <div class="bg-green-200 p-8 sm:p-12 rounded"> 142 - <img src="https://assets.tangled.network/tangled_dolly_face_only_black_on_trans.svg" 143 - alt="Tangled logo on pastel green background" 144 - class="w-full max-w-16 mx-auto" /> 130 + {{ template "fragments/dolly/logo" (dict "Classes" "w-full max-w-16 mx-auto" "FillColor" "black") }} 145 131 </div> 146 - <!-- Pastel Blue background --> 147 132 <div class="bg-blue-200 p-8 sm:p-12 rounded"> 148 - <img src="https://assets.tangled.network/tangled_dolly_face_only_black_on_trans.svg" 149 - alt="Tangled logo on pastel blue background" 150 - class="w-full max-w-16 mx-auto" /> 133 + {{ template "fragments/dolly/logo" (dict "Classes" "w-full max-w-16 mx-auto" "FillColor" "black") }} 151 134 </div> 152 - <!-- Pastel Yellow background --> 153 135 <div class="bg-yellow-200 p-8 sm:p-12 rounded"> 154 - <img src="https://assets.tangled.network/tangled_dolly_face_only_black_on_trans.svg" 155 - alt="Tangled logo on pastel yellow background" 156 - class="w-full max-w-16 mx-auto" /> 136 + {{ template "fragments/dolly/logo" (dict "Classes" "w-full max-w-16 mx-auto" "FillColor" "black") }} 157 137 </div> 158 - <!-- Pastel Pink background --> 159 138 <div class="bg-pink-200 p-8 sm:p-12 rounded"> 160 - <img src="https://assets.tangled.network/tangled_dolly_face_only_black_on_trans.svg" 161 - alt="Tangled logo on pastel pink background" 162 - class="w-full max-w-16 mx-auto" /> 139 + {{ template "fragments/dolly/logo" (dict "Classes" "w-full max-w-16 mx-auto" "FillColor" "black") }} 163 140 </div> 164 141 </div> 165 142 </div> 166 - <div class="order-1 lg:order-2"> 143 + <div class="order-1"> 167 144 <h2 class="text-xl font-semibold dark:text-white mb-3">Lighter backgrounds</h2> 168 145 <p class="text-gray-500 dark:text-gray-300 mb-4"> 169 146 Dark logo mark on lighter, pastel backgrounds. ··· 175 152 </div> 176 153 </section> 177 154 178 - <!-- Recoloring Section --> 179 - <section class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center"> 180 - <div class="order-2 lg:order-1"> 155 + <!-- recoloring section --> 156 + <section class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start"> 157 + <div class="order-2"> 181 158 <div class="bg-yellow-100 border border-yellow-200 p-8 sm:p-16 rounded"> 182 - <img src="https://assets.tangled.network/tangled_logotype_black_on_trans.svg" 183 - alt="Recolored Tangled logotype in gray/sand color" 184 - class="w-full max-w-sm mx-auto opacity-60 sepia contrast-75 saturate-50" /> 159 + {{ template "fragments/dolly/logotype" (dict "Classes" "w-full max-w-sm mx-auto opacity-60 sepia contrast-75 saturate-50" "FillColor" "black") }} 185 160 </div> 186 161 </div> 187 - <div class="order-1 lg:order-2"> 162 + <div class="order-1"> 188 163 <h2 class="text-xl font-semibold dark:text-white mb-3">Recoloring</h2> 189 164 <p class="text-gray-500 dark:text-gray-300 mb-4"> 190 165 Custom coloring of the logotype is permitted. ··· 201 176 </div> 202 177 </main> 203 178 </div> 179 + 180 + <script> 181 + (function () { 182 + function downloadSvg(svg, filename) { 183 + var clone = svg.cloneNode(true); 184 + // strip tailwind utility classes — they're meaningless in a standalone file 185 + clone.removeAttribute('class'); 186 + clone.querySelectorAll('[class]').forEach(function (el) { el.removeAttribute('class'); }); 187 + if (!clone.getAttribute('xmlns')) { 188 + clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg'); 189 + } 190 + var data = '<?xml version="1.0" encoding="UTF-8"?>\n' + new XMLSerializer().serializeToString(clone); 191 + var url = URL.createObjectURL(new Blob([data], { type: 'image/svg+xml' })); 192 + var a = document.createElement('a'); 193 + a.href = url; 194 + a.download = filename || 'tangled.svg'; 195 + document.body.appendChild(a); 196 + a.click(); 197 + a.remove(); 198 + URL.revokeObjectURL(url); 199 + } 200 + 201 + document.querySelectorAll('[data-download]').forEach(function (btn) { 202 + btn.addEventListener('click', function () { 203 + var container = document.querySelector(btn.dataset.download); 204 + if (!container) return; 205 + var svg = container.querySelector('svg'); 206 + if (!svg) return; 207 + downloadSvg(svg, container.dataset.filename); 208 + }); 209 + }); 210 + })(); 211 + </script> 204 212 {{ end }}