why.bsky.team
A locally focused bluesky appview
1* {
2 box-sizing: border-box;
3}
4
5body {
6 margin: 0;
7 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
8 -webkit-font-smoothing: antialiased;
9 -moz-osx-font-smoothing: grayscale;
10 background-color: #f7f9fa;
11 color: #0f1419;
12}
13
14.app {
15 min-height: 100vh;
16}
17
18.app-nav {
19 background: white;
20 border-bottom: 1px solid #e1e8ed;
21 position: sticky;
22 top: 0;
23 z-index: 100;
24}
25
26.nav-container {
27 max-width: 1200px;
28 margin: 0 auto;
29 display: flex;
30 align-items: center;
31 justify-content: space-between;
32 padding: 0 20px;
33 height: 56px;
34}
35
36.nav-brand {
37 font-size: 20px;
38 font-weight: 700;
39 color: #1da1f2;
40 text-decoration: none;
41}
42
43.nav-brand:hover {
44 color: #1991db;
45}
46
47.nav-links {
48 display: flex;
49 gap: 24px;
50}
51
52.nav-link {
53 color: #536471;
54 text-decoration: none;
55 font-weight: 500;
56 padding: 16px 0;
57 border-bottom: 2px solid transparent;
58 transition: all 0.2s ease;
59}
60
61.nav-link:hover {
62 color: #0f1419;
63}
64
65.nav-link.active {
66 color: #1da1f2;
67 border-bottom-color: #1da1f2;
68}
69
70.app-main {
71 min-height: calc(100vh - 56px);
72 background-color: #f7f9fa;
73}
74
75@media (max-width: 768px) {
76 .nav-container {
77 padding: 0 16px;
78 }
79
80 .nav-links {
81 gap: 16px;
82 }
83}