Diffdown is a real-time collaborative Markdown editor/previewer built on the AT Protocol diffdown.com

Tweaked landing page

+57 -10
+2 -1
.gitignore
··· 16 16 .Trashes 17 17 ehthumbs.db 18 18 Thumbs.db 19 - server 19 + server 20 + diffdown
+39 -6
static/css/style.css
··· 1 + @import url(https://fonts.bunny.net/css?family=barlow:100,200,300,400,500,600|lexend:100,200,300,400,500,600,700,800,900); 2 + 1 3 *, *::before, *::after { 2 4 box-sizing: border-box; 3 5 margin: 0; ··· 17 19 --code-bg: #f3f4f6; 18 20 --alert-error-bg: #fef2f2; 19 21 --alert-error-border: #fecaca; 22 + --heading-font: "Lexend", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 20 23 --radius: 6px; 21 - --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 24 + --font: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 22 25 --font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace; 23 26 } 24 27 ··· 26 29 --bg: #0d1117; 27 30 --bg-card: #161b22; 28 31 --text: #e6edf3; 29 - --text-muted: #8b949e; 32 + --text-muted: #ededed; 33 + --text-secondary: #d4d4d4; 30 34 --border: #30363d; 31 35 --code-bg: #1f2428; 32 36 --primary: #388bfd; ··· 42 46 --bg: #0d1117; 43 47 --bg-card: #161b22; 44 48 --text: #e6edf3; 45 - --text-muted: #8b949e; 49 + --text-muted: #ededed; 50 + --text-secondary: #d4d4d4; 46 51 --border: #30363d; 47 52 --code-bg: #1f2428; 48 53 --primary: #388bfd; ··· 58 63 font-family: var(--font); 59 64 background: var(--bg); 60 65 color: var(--text); 61 - line-height: 1.6; 66 + line-height: 1.5; 62 67 } 63 68 64 69 a { color: var(--primary); text-decoration: none; } 65 70 a:hover { text-decoration: underline; } 66 71 72 + h1, h2, h3, h4, h5 { 73 + font-family: var(--heading-font); 74 + font-weight: 500; 75 + } 76 + 67 77 /* Navbar */ 68 78 .navbar { 69 79 display: flex; ··· 75 85 } 76 86 77 87 .logo { 78 - font-weight: 700; 88 + font-weight: 500; 79 89 font-size: 1.1rem; 80 90 color: var(--text); 81 91 } ··· 203 213 } 204 214 205 215 .landing h1 { font-size: 2.5rem; margin-bottom: 1rem; } 206 - .landing p { font-size: 1.1rem; color: var(--text-muted); margin-bottom: 2rem; } 216 + .landing p { font-size: 1.1rem; font-weight: 400; margin-bottom: 2rem; } 207 217 .landing-actions { display: flex; gap: 1rem; justify-content: center; } 218 + 219 + .landing-header { 220 + text-align: center; 221 + } 222 + 223 + .landing-content { 224 + color: var(--text-secondary); 225 + display: grid; 226 + grid-template-columns: 1fr 1fr; 227 + gap: 2rem; 228 + text-align: left; 229 + margin-bottom: 2rem; 230 + } 231 + 232 + .landing-hr { 233 + margin: 2rem 0; 234 + } 235 + 236 + @media (max-width: 640px) { 237 + .landing-content { 238 + grid-template-columns: 1fr; 239 + } 240 + } 208 241 209 242 /* Dashboard */ 210 243 .dashboard-header {
+16 -3
templates/landing.html
··· 1 1 {{template "base" .}} 2 2 {{define "content"}} 3 3 <div class="landing"> 4 - <h1>Collaborative Markdown Editing</h1> 5 - <p>Write, review, and collaborate on Markdown documents with your team in <a href="https://www.bskyinfo.com/glossary/atmosphere/">the ATmosphere</a>.</p> 6 - <p><strong>Note:</strong> This app is a toy I built to learn <a href="https://atproto.com/">AT Protocol</a>, lexicons, and <a href="https://agentic-coding.github.io/">agentic coding</a>. It is not meant for actual use. Any documents you create will be visible to anyone with the URL and may be deleted at any time.</p> 4 + <section class="landing-header"> 5 + <h1>Collaborative Markdown Editing</h1> 6 + <p>Write, review, and collaborate on Markdown documents with your team in <a href="https://www.bskyinfo.com/glossary/atmosphere/">the ATmosphere</a>.</p> 7 + </section> 7 8 <div class="landing-actions"> 8 9 <a href="/auth/register" class="btn btn-lg">Get Started</a> 9 10 <a href="/auth/login" class="btn btn-lg btn-outline">Log In</a> 10 11 </div> 12 + <hr class="landing-hr"> 13 + <section class="landing-content"> 14 + <div class="landing-col"> 15 + <h2>About This Project</h2> 16 + <p>This app is a toy I built to learn <a href="https://atproto.com/">AT Protocol</a>, <a href="https://atproto.com/guides/lexicon">lexicons</a>, and <a href="https://www.ibm.com/think/topics/agentic-engineering">agentic engineering</a>. It is not meant for actual use. Because AT Proto does not support private records (<a href="https://atproto.wiki/en/working-groups/private-data">yet</a>), any documents you create will be visible to anyone with the URL (<a href="https://atproto.at/viewer?uri=did:plc:za4vlvbizdstoym7lpymc5q5/com.diffdown.document/3mgzsp6m5hs24">example</a>).</p> 17 + </div> 18 + <div class="landing-col"> 19 + <h2>About Me</h2> 20 + <p>I've worked in tech for a long time as a product manager and executive. These days, I'm a co-founder of <a href="https://limeleaf.coop">Limeleaf Worker Collective</a>, and an advisor to a few tech projects. <a href="https://jluther.net">I like to write.</a></p> 21 + </div> 22 + </section> 23 + 11 24 </div> 12 25 {{end}}