(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol. margin.at
extension web atproto comments
98
fork

Configure Feed

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

brand page

+257 -2
+248
web/src/pages/brand.astro
··· 1 + --- 2 + import BaseLayout from '../layouts/StaticLayout.astro'; 3 + 4 + const sections = [ 5 + { id: 'logo', title: 'Logo' }, 6 + { id: 'colors', title: 'Colors' }, 7 + { id: 'typography', title: 'Typography' }, 8 + { id: 'usage', title: 'Usage guidelines' }, 9 + ]; 10 + --- 11 + 12 + <BaseLayout title="Brand — Margin" description="Margin brand guidelines"> 13 + <div class="min-h-screen bg-surface-100 dark:bg-surface-900"> 14 + <div class="max-w-7xl mx-auto px-4 sm:px-6 pt-10 md:pt-14 pb-20"> 15 + <a href="/home" class="inline-flex items-center gap-1.5 text-sm font-medium text-surface-500 dark:text-surface-400 hover:text-surface-900 dark:hover:text-white transition-colors mb-8"> 16 + <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg> 17 + Back 18 + </a> 19 + 20 + <div class="lg:grid lg:grid-cols-[minmax(0,1fr)_200px] lg:gap-12"> 21 + <div class="bg-white dark:bg-surface-800 rounded-2xl px-5 sm:px-8 lg:px-12 py-10 md:py-14 lg:min-w-0"> 22 + <header class="mb-12"> 23 + <p class="text-xs font-semibold text-surface-500 dark:text-surface-400 uppercase tracking-wider mb-3">Brand</p> 24 + <h1 class="font-display font-bold text-3xl md:text-4xl text-surface-900 dark:text-white tracking-tight mb-2">Brand Guidelines</h1> 25 + <p class="text-[15px] text-surface-500 dark:text-surface-400">Assets and rules for representing Margin in third-party contexts.</p> 26 + </header> 27 + 28 + <details class="lg:hidden mb-10 rounded-xl border border-surface-200 dark:border-surface-700/60 overflow-hidden"> 29 + <summary class="cursor-pointer px-4 py-3 text-xs font-semibold text-surface-500 dark:text-surface-400 uppercase tracking-wider bg-surface-50 dark:bg-surface-900/40">On this page</summary> 30 + <ol class="px-4 py-3 space-y-0.5 text-sm"> 31 + {sections.map((s) => ( 32 + <li><a href={`#${s.id}`} class="block py-1 text-surface-600 dark:text-surface-400">{s.title}</a></li> 33 + ))} 34 + </ol> 35 + </details> 36 + 37 + <div class="space-y-14"> 38 + 39 + <section id="logo" data-toc-section class="scroll-mt-6"> 40 + <h2 class="font-display font-bold text-xl text-surface-900 dark:text-white tracking-tight mb-1">Logo</h2> 41 + <p class="text-sm text-surface-500 dark:text-surface-400 mb-6">Use the SVG whenever possible. Do not alter the shape, proportions, or color.</p> 42 + 43 + <div class="grid sm:grid-cols-2 gap-3 mb-6"> 44 + <div class="rounded-xl border border-surface-200 dark:border-surface-700/60 bg-white flex items-center justify-center h-36"> 45 + <svg width="56" height="49" viewBox="0 0 265 231" fill="#027bff" xmlns="http://www.w3.org/2000/svg"> 46 + <path d="M0 230 V0 H199 V65.7156 H149.5 V115.216 H182.5 L199 131.716 V230 Z"/> 47 + <path d="M215 214.224 V230 H264.5 V0 H215 V16.2242 H248.5 V214.224 H215 Z"/> 48 + </svg> 49 + </div> 50 + <div class="rounded-xl border border-surface-700/60 bg-surface-900 flex items-center justify-center h-36"> 51 + <svg width="56" height="49" viewBox="0 0 265 231" fill="#027bff" xmlns="http://www.w3.org/2000/svg"> 52 + <path d="M0 230 V0 H199 V65.7156 H149.5 V115.216 H182.5 L199 131.716 V230 Z"/> 53 + <path d="M215 214.224 V230 H264.5 V0 H215 V16.2242 H248.5 V214.224 H215 Z"/> 54 + </svg> 55 + </div> 56 + </div> 57 + 58 + <div class="flex flex-wrap gap-3 mb-8"> 59 + <a href="/logo.svg" download class="inline-flex items-center gap-1.5 text-sm font-medium text-surface-600 dark:text-surface-300 border border-surface-200 dark:border-surface-700 rounded-lg px-3 py-1.5 hover:border-surface-400 dark:hover:border-surface-500 transition-colors"> 60 + <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg> 61 + SVG 62 + </a> 63 + <a href="/logo.png" download class="inline-flex items-center gap-1.5 text-sm font-medium text-surface-600 dark:text-surface-300 border border-surface-200 dark:border-surface-700 rounded-lg px-3 py-1.5 hover:border-surface-400 dark:hover:border-surface-500 transition-colors"> 64 + <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg> 65 + PNG 66 + </a> 67 + </div> 68 + 69 + <div class="space-y-2 text-[15px] text-surface-700 dark:text-surface-300 leading-relaxed"> 70 + <p class="font-medium text-surface-900 dark:text-white text-sm">Do not:</p> 71 + <ul class="list-disc pl-5 space-y-1.5 marker:text-surface-400 dark:marker:text-surface-600"> 72 + <li>Recolor the logo to anything other than <span class="font-mono text-[13px] px-1 py-0.5 rounded bg-surface-100 dark:bg-surface-900">#027bff</span>, white, or black.</li> 73 + <li>Stretch, rotate, or otherwise distort the mark.</li> 74 + <li>Place the logo on a background that reduces legibility.</li> 75 + <li>Add effects such as shadows, gradients, or outlines.</li> 76 + <li>Use the logo in a way that implies an official partnership or endorsement without written permission from Padding Labs LLC.</li> 77 + </ul> 78 + </div> 79 + </section> 80 + 81 + <section id="colors" data-toc-section class="scroll-mt-6"> 82 + <h2 class="font-display font-bold text-xl text-surface-900 dark:text-white tracking-tight mb-1">Colors</h2> 83 + <p class="text-sm text-surface-500 dark:text-surface-400 mb-6">Use <span class="font-mono text-[13px] px-1 py-0.5 rounded bg-surface-100 dark:bg-surface-900">#027bff</span> to match the logo. Use <span class="font-mono text-[13px] px-1 py-0.5 rounded bg-surface-100 dark:bg-surface-900">#2563eb</span> for interactive UI elements such as buttons and links.</p> 84 + 85 + <div class="space-y-8"> 86 + <div> 87 + <p class="text-xs font-semibold text-surface-500 dark:text-surface-400 uppercase tracking-wider mb-3">Brand</p> 88 + <div class="flex flex-wrap gap-3"> 89 + <div class="flex flex-col gap-1.5"> 90 + <div class="w-16 h-16 rounded-xl shadow-sm" style="background:#027bff;"></div> 91 + <p class="text-xs font-mono text-surface-600 dark:text-surface-400">#027bff</p> 92 + <p class="text-xs text-surface-500 dark:text-surface-500">Brand Blue</p> 93 + </div> 94 + </div> 95 + </div> 96 + 97 + <div> 98 + <p class="text-xs font-semibold text-surface-500 dark:text-surface-400 uppercase tracking-wider mb-3">Primary (UI)</p> 99 + <div class="flex flex-wrap gap-3"> 100 + {[ 101 + { hex: '#dbeafe', label: '100' }, 102 + { hex: '#93c5fd', label: '300' }, 103 + { hex: '#3b82f6', label: '500' }, 104 + { hex: '#2563eb', label: '600' }, 105 + { hex: '#1d4ed8', label: '700' }, 106 + { hex: '#1e3a8a', label: '900' }, 107 + ].map(({ hex, label }) => ( 108 + <div class="flex flex-col gap-1.5"> 109 + <div class="w-12 h-12 rounded-xl shadow-sm border border-black/5" style={`background:${hex};`}></div> 110 + <p class="text-xs font-mono text-surface-600 dark:text-surface-400">{hex}</p> 111 + <p class="text-xs text-surface-500 dark:text-surface-500">{label}</p> 112 + </div> 113 + ))} 114 + </div> 115 + </div> 116 + 117 + <div> 118 + <p class="text-xs font-semibold text-surface-500 dark:text-surface-400 uppercase tracking-wider mb-3">Surface (Neutral)</p> 119 + <div class="flex flex-wrap gap-3"> 120 + {[ 121 + { hex: '#f4f4f5', label: '100' }, 122 + { hex: '#e4e4e7', label: '200' }, 123 + { hex: '#a1a1aa', label: '400' }, 124 + { hex: '#71717a', label: '500' }, 125 + { hex: '#3f3f46', label: '700' }, 126 + { hex: '#27272a', label: '800' }, 127 + { hex: '#18181b', label: '900' }, 128 + ].map(({ hex, label }) => ( 129 + <div class="flex flex-col gap-1.5"> 130 + <div class="w-12 h-12 rounded-xl shadow-sm border border-black/5" style={`background:${hex};`}></div> 131 + <p class="text-xs font-mono text-surface-600 dark:text-surface-400">{hex}</p> 132 + <p class="text-xs text-surface-500 dark:text-surface-500">{label}</p> 133 + </div> 134 + ))} 135 + </div> 136 + </div> 137 + </div> 138 + </section> 139 + 140 + <section id="typography" data-toc-section class="scroll-mt-6"> 141 + <h2 class="font-display font-bold text-xl text-surface-900 dark:text-white tracking-tight mb-1">Typography</h2> 142 + <p class="text-sm text-surface-500 dark:text-surface-400 mb-6">Two typefaces, both from Google Fonts.</p> 143 + 144 + <div class="space-y-5"> 145 + <div class="rounded-xl border border-surface-200 dark:border-surface-700/60 p-5"> 146 + <p class="text-xs font-semibold text-surface-400 dark:text-surface-500 uppercase tracking-wider mb-2">Display — Outfit</p> 147 + <p class="font-display font-bold text-4xl text-surface-900 dark:text-white tracking-tight leading-tight">Annotate the web.</p> 148 + <p class="text-xs text-surface-500 dark:text-surface-400 mt-3">Used for headings and display text. Weights 500, 600, 700.</p> 149 + </div> 150 + <div class="rounded-xl border border-surface-200 dark:border-surface-700/60 p-5"> 151 + <p class="text-xs font-semibold text-surface-400 dark:text-surface-500 uppercase tracking-wider mb-2">Body — Inter</p> 152 + <p class="text-[15px] text-surface-700 dark:text-surface-300 leading-relaxed">Margin is an open-source web annotation tool built on the AT Protocol. Highlight, bookmark, and annotate any page, then share with the network.</p> 153 + <p class="text-xs text-surface-500 dark:text-surface-400 mt-3">Used for body copy and UI. Weights 400, 500, 600, 700.</p> 154 + </div> 155 + </div> 156 + </section> 157 + 158 + <section id="usage" data-toc-section class="scroll-mt-6"> 159 + <h2 class="font-display font-bold text-xl text-surface-900 dark:text-white tracking-tight mb-1">Usage guidelines</h2> 160 + <p class="text-sm text-surface-500 dark:text-surface-400 mb-6">Rules for referencing Margin in third-party apps, integrations, and content.</p> 161 + 162 + <div class="space-y-6 text-[15px] text-surface-700 dark:text-surface-300 leading-relaxed"> 163 + <div> 164 + <p class="font-medium text-surface-900 dark:text-white text-sm mb-2">Name</p> 165 + <ul class="list-disc pl-5 space-y-1.5 marker:text-surface-400 dark:marker:text-surface-600"> 166 + <li>Write the product name as <strong>Margin</strong>, capitalized, with no prefix or suffix.</li> 167 + <li>Do not write "margin", "MarginApp", "MarginAt", or similar variants.</li> 168 + <li>On first reference, "Margin" is sufficient. You do not need to append "by Padding Labs" unless legal context requires it.</li> 169 + </ul> 170 + </div> 171 + 172 + <div> 173 + <p class="font-medium text-surface-900 dark:text-white text-sm mb-2">Permitted uses</p> 174 + <ul class="list-disc pl-5 space-y-1.5 marker:text-surface-400 dark:marker:text-surface-600"> 175 + <li>Referring to Margin by name in editorial content, blog posts, and documentation.</li> 176 + <li>Using the phrase "Works with Margin", "Built for Margin", or "Powered by Margin" in product descriptions.</li> 177 + <li>Using the logo in "Works with" or "Get it on" badge contexts, unmodified and at a reasonable size.</li> 178 + </ul> 179 + </div> 180 + 181 + <div> 182 + <p class="font-medium text-surface-900 dark:text-white text-sm mb-2">Prohibited uses</p> 183 + <ul class="list-disc pl-5 space-y-1.5 marker:text-surface-400 dark:marker:text-surface-600"> 184 + <li>Using the Margin name or logo as the primary element of a third-party product name or domain.</li> 185 + <li>Implying affiliation, sponsorship, or endorsement by Padding Labs LLC without prior written consent.</li> 186 + <li>Using brand assets in a way that is misleading, defamatory, or that violates any applicable law.</li> 187 + </ul> 188 + </div> 189 + 190 + <p>For permissions beyond these guidelines, contact <a href="mailto:hello@margin.at" class="text-primary-600 dark:text-primary-400 hover:underline font-medium">hello@margin.at</a>.</p> 191 + </div> 192 + </section> 193 + 194 + </div> 195 + </div> 196 + 197 + <aside class="hidden lg:block"> 198 + <details class="sticky top-6 group" open> 199 + <summary class="cursor-pointer list-none flex items-center gap-1.5 py-2 text-[11px] font-semibold text-surface-400 dark:text-surface-500 uppercase tracking-[0.12em] hover:text-surface-700 dark:hover:text-surface-200 transition-colors"> 200 + <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="transition-transform group-open:rotate-90"><path d="m9 18 6-6-6-6"/></svg> 201 + On this page 202 + </summary> 203 + <ol class="mt-3 space-y-0.5 text-[13px]"> 204 + {sections.map((s) => ( 205 + <li> 206 + <a href={`#${s.id}`} data-toc-link={s.id} class="toc-link block py-1 text-surface-500 dark:text-surface-500 hover:text-surface-900 dark:hover:text-white transition-colors leading-snug">{s.title}</a> 207 + </li> 208 + ))} 209 + </ol> 210 + </details> 211 + </aside> 212 + </div> 213 + </div> 214 + </div> 215 + 216 + <script> 217 + const links = document.querySelectorAll<HTMLAnchorElement>('[data-toc-link]'); 218 + const sections = document.querySelectorAll<HTMLElement>('[data-toc-section]'); 219 + if (links.length && sections.length) { 220 + const setActive = (id: string) => { 221 + links.forEach((l) => { 222 + if (l.dataset.tocLink === id) { 223 + l.classList.add('text-primary-600', 'dark:text-primary-400', 'font-medium'); 224 + l.classList.remove('text-surface-500', 'dark:text-surface-500'); 225 + } else { 226 + l.classList.remove('text-primary-600', 'dark:text-primary-400', 'font-medium'); 227 + l.classList.add('text-surface-500', 'dark:text-surface-500'); 228 + } 229 + }); 230 + }; 231 + let current = sections[0].id; 232 + setActive(current); 233 + const obs = new IntersectionObserver( 234 + (entries) => { 235 + const visible = entries 236 + .filter((e) => e.isIntersecting) 237 + .sort((a, b) => (a.target as HTMLElement).offsetTop - (b.target as HTMLElement).offsetTop); 238 + if (visible.length > 0) { 239 + current = visible[0].target.id; 240 + setActive(current); 241 + } 242 + }, 243 + { rootMargin: '-15% 0px -70% 0px', threshold: 0 } 244 + ); 245 + sections.forEach((s) => obs.observe(s)); 246 + } 247 + </script> 248 + </BaseLayout>
+1 -1
web/src/pages/privacy.astro
··· 44 44 </ol> 45 45 </details> 46 46 47 - <div class="space-y-12 max-w-2xl"> 47 + <div class="space-y-12"> 48 48 <section id="overview" data-toc-section class="scroll-mt-6"> 49 49 <h2 class="font-display font-bold text-xl text-surface-900 dark:text-white tracking-tight mb-2">Overview</h2> 50 50 <p class="text-sm italic text-surface-500 dark:text-surface-400 mb-4">Padding Labs LLC is the controller. We process the minimum needed to run Margin and do not sell your data.</p>
+1 -1
web/src/pages/terms.astro
··· 43 43 </ol> 44 44 </details> 45 45 46 - <div class="space-y-12 max-w-2xl"> 46 + <div class="space-y-12"> 47 47 <section id="agreement" data-toc-section class="scroll-mt-6"> 48 48 <h2 class="font-display font-bold text-xl text-surface-900 dark:text-white tracking-tight mb-2">Agreement</h2> 49 49 <p class="text-sm italic text-surface-500 dark:text-surface-400 mb-4">These Terms govern your use of Margin. Using it means you accept them.</p>
+6
web/src/views/About.tsx
··· 787 787 {t("about.footer.terms")} 788 788 </a> 789 789 <a 790 + href="/brand" 791 + className="hover:text-surface-600 dark:hover:text-surface-300 transition-colors" 792 + > 793 + Brand 794 + </a> 795 + <a 790 796 href="https://github.com/margin-at" 791 797 target="_blank" 792 798 rel="noreferrer"
+1
web/src/views/AppShell.tsx
··· 149 149 "/about", 150 150 "/privacy", 151 151 "/terms", 152 + "/brand", 152 153 "/auth/", 153 154 "/api/", 154 155 "/og-image",