A social RSS reader built on the AT Protocol. glean.at
glean atproto atmosphere rss feed social app
14
fork

Configure Feed

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

Refactor mobile navigation and layout styling

+28 -42
+1 -1
internal/tmpl/articles.html
··· 43 43 <p class="text-sm text-spot-secondary mb-6">All your subscribed articles, newest first.</p> 44 44 {{end}} 45 45 46 - <div class="flex items-center gap-3 mb-6"> 46 + <div class="flex items-center gap-3 mb-6 flex-wrap"> 47 47 <form method="GET" action="/articles" class="flex-1" id="search-form"> 48 48 <div class="relative"> 49 49 <input type="text" name="q" value="{{.SearchQuery}}" placeholder="Search articles..."
+26 -34
internal/tmpl/base.html
··· 120 120 </div> 121 121 </aside> 122 122 123 - <nav id="mobile-nav" class="lg:hidden fixed bottom-0 left-0 right-0 bg-spot-surface/80 backdrop-blur-xl border-t border-spot-divider z-30 px-2 py-2"> 124 - <div class="flex items-center justify-around"> 125 - <a href="/dashboard" class="flex flex-col items-center gap-0.5 {{activeClass .ActivePath "/dashboard"}} text-[10px] px-2 py-1"> 126 - <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-4 0a1 1 0 01-1-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 01-1 1"/></svg> 127 - Home 128 - </a> 129 - <a href="/articles" class="flex flex-col items-center gap-0.5 {{activeClass .ActivePath "/articles"}} text-[10px] px-2 py-1"> 130 - <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2"/></svg> 131 - Articles 132 - </a> 133 - <a href="/trending" class="flex flex-col items-center gap-0.5 {{activeClass .ActivePath "/trending"}} text-[10px] px-2 py-1"> 134 - <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg> 135 - Trending 136 - </a> 137 - <a href="/feeds" class="flex flex-col items-center gap-0.5 {{activeClass .ActivePath "/feeds"}} text-[10px] px-2 py-1"> 138 - <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 5c7.18 0 13 5.82 13 13M6 11a7 7 0 017 7m-7-1a1 1 0 11-2 0 1 1 0 012 0z"/></svg> 139 - Feeds 140 - </a> 141 - <a href="/library" class="flex flex-col items-center gap-0.5 {{activeClass .ActivePath "/library"}} text-[10px] px-2 py-1"> 142 - <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"/></svg> 143 - Library 144 - </a> 145 - </div> 146 - </nav> 147 123 {{end}} 148 124 149 - <main id="main-content" class="{{if or .User (or (eq .ActivePath "/trending") (eq .ActivePath "/stats"))}}lg:ml-60 pb-20 lg:pb-0{{end}} flex-1 min-h-screen flex flex-col"> 125 + <main id="main-content" class="{{if or .User (or (eq .ActivePath "/trending") (eq .ActivePath "/stats"))}}lg:ml-60{{end}} flex-1 min-h-screen flex flex-col"> 150 126 {{if or .User (or (eq .ActivePath "/trending") (eq .ActivePath "/stats"))}} 151 - <div class="lg:hidden bg-spot-surface border-b border-spot-divider px-4 py-3 flex items-center justify-between sticky top-0 z-20"> 127 + <div class="lg:hidden bg-spot-surface border-b border-spot-divider px-2 py-2 flex items-center justify-between sticky top-0 z-20"> 152 128 {{template "logo-link"}} 153 - {{if .User}} 154 - <a href="/profile/{{.User.DID}}" class="flex items-center gap-2"> 155 - {{if .User.AvatarURL}}<img src="{{.User.AvatarURL}}" class="w-7 h-7 rounded-full">{{end}} 156 - <span class="text-xs text-spot-secondary">@{{.User.Handle}}</span> 157 - </a> 158 - {{else}} 159 - <a href="/auth/login" class="bg-spot-green text-white rounded-pill px-4 py-1.5 text-xs font-bold uppercase tracking-button hover:brightness-110 transition">Sign in</a> 160 - {{end}} 129 + <div class="flex items-center gap-0.5"> 130 + <a href="/dashboard" class="p-1.5 rounded-md {{if eq .ActivePath "/dashboard"}}text-spot-green{{else}}text-spot-secondary hover:text-spot-text{{end}} transition" title="Dashboard"> 131 + <svg class="w-[1.2rem] h-[1.2rem]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-4 0a1 1 0 01-1-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 01-1 1"/></svg> 132 + </a> 133 + <a href="/articles" class="p-1.5 rounded-md {{if eq .ActivePath "/articles"}}text-spot-green{{else}}text-spot-secondary hover:text-spot-text{{end}} transition" title="Articles"> 134 + <svg class="w-[1.2rem] h-[1.2rem]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2"/></svg> 135 + </a> 136 + <a href="/trending" class="p-1.5 rounded-md {{if eq .ActivePath "/trending"}}text-spot-green{{else}}text-spot-secondary hover:text-spot-text{{end}} transition" title="Trending"> 137 + <svg class="w-[1.2rem] h-[1.2rem]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg> 138 + </a> 139 + <a href="/feeds" class="p-1.5 rounded-md {{if eq .ActivePath "/feeds"}}text-spot-green{{else}}text-spot-secondary hover:text-spot-text{{end}} transition" title="Feeds"> 140 + <svg class="w-[1.2rem] h-[1.2rem]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 5c7.18 0 13 5.82 13 13M6 11a7 7 0 017 7m-7-1a1 1 0 11-2 0 1 1 0 012 0z"/></svg> 141 + </a> 142 + <a href="/library" class="p-1.5 rounded-md {{if eq .ActivePath "/library"}}text-spot-green{{else}}text-spot-secondary hover:text-spot-text{{end}} transition" title="Library"> 143 + <svg class="w-[1.2rem] h-[1.2rem]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"/></svg> 144 + </a> 145 + {{if .User}} 146 + <a href="/profile/{{.User.DID}}" class="shrink-0 ml-1" title="@{{.User.Handle}}"> 147 + {{if .User.AvatarURL}}<img src="{{.User.AvatarURL}}" class="w-7 h-7 rounded-full ring-1 ring-spot-divider">{{end}} 148 + </a> 149 + {{else}} 150 + <a href="/auth/login" class="bg-spot-green text-white rounded-pill px-3 py-1 text-xs font-bold uppercase tracking-button hover:brightness-110 transition shrink-0 ml-1">Sign in</a> 151 + {{end}} 152 + </div> 161 153 </div> 162 154 {{end}} 163 155 <div class="{{if not (or .User (or (eq .ActivePath "/trending") (eq .ActivePath "/stats")))}}w-full{{else}}max-w-6xl mx-auto px-4 lg:px-8 py-6{{end}} flex-1">
+1 -7
static/input.css
··· 96 96 color: var(--spot-text); 97 97 } 98 98 99 - #mobile-nav a.bg-spot-hover { 100 - background: transparent !important; 101 - color: #00754A !important; 102 - } 103 - #mobile-nav a { 104 - transition: color 0.15s ease; 105 - } 99 + 106 100 107 101 ::-webkit-scrollbar { width: 8px; } 108 102 ::-webkit-scrollbar-track { background: var(--spot-bg); }