xan.lol
forked from
atpota.to/flushes.app
The 1st decentralized social network for sharing when you're on the toilet. Post a "flush" today! Powered by the AT Protocol.
1.navbar {
2 display: flex;
3 justify-content: space-between;
4 align-items: center;
5 padding: 0.75rem 1.5rem;
6 background-color: var(--card-background);
7 border-bottom: 1px solid var(--tile-border);
8 position: sticky;
9 top: 0;
10 z-index: 100;
11 width: 100%;
12}
13
14.navStart, .navEnd {
15 display: flex;
16 align-items: center;
17 gap: 1rem;
18}
19
20.navSearch {
21 flex: 0 1 300px;
22 margin: 0 1rem;
23}
24
25.secondRow {
26 display: flex;
27 justify-content: space-between;
28 align-items: center;
29 width: 100%;
30 margin-top: 0;
31}
32
33@media (max-width: 1100px) {
34 .secondRow {
35 margin-top: 0;
36 }
37 .navSearch {
38 flex: 0 1 300px;
39 margin: 0 0;
40 }
41}
42
43.logo {
44 display: flex;
45 align-items: center;
46 text-decoration: none;
47 margin-right: 1.5rem;
48 width: 150px;
49}
50
51.logoImage {
52 height: auto;
53 object-fit: contain;
54 width: 100%;
55}
56
57.navLinks {
58 display: flex;
59}
60
61.navLink {
62 color: var(--foreground-rgb);
63 text-decoration: none;
64 font-size: 1rem;
65 padding: 0.5rem 0.75rem;
66 border-radius: 0.5rem;
67 transition: background-color 0.2s ease;
68}
69
70.navLink:hover {
71 background-color: var(--hover-overlay);
72}
73
74.navLink.active {
75 font-weight: 700;
76 color: var(--link-color);
77}
78
79.authButton {
80 background-color: var(--primary-color);
81 color: white;
82 border: none;
83 padding: 0.5rem 0.8rem;
84 border-radius: 0.5rem;
85 cursor: pointer;
86 font-size: 1rem;
87 font-weight: 500;
88 transition: background-color 0.2s ease;
89 text-decoration: none;
90 display: inline-block;
91 white-space: nowrap;
92 height: 36px;
93 display: flex;
94 align-items: center;
95 padding-top: 0.5rem;
96}
97
98.authButton:hover {
99 background-color: var(--primary-hover);
100}
101
102@media (max-width: 600px) {
103 .authButton {
104 font-size: 0.9rem;
105 }
106}
107
108/* Responsive styles */
109@media (max-width: 1100px) {
110 .navbar {
111 flex-wrap: wrap;
112 padding: 1.0rem 1.5rem 1.7rem;
113 gap: 0.7rem;
114 }
115
116 .navStart {
117 width: 100%;
118 justify-content: space-between;
119 }
120
121 .navLinks {
122 white-space: nowrap;
123 gap: 0.5rem;
124 -ms-overflow-style: none; /* IE and Edge */
125 scrollbar-width: none; /* Firefox */
126 }
127
128 .navLinks::-webkit-scrollbar {
129 display: none; /* Hide scrollbar in Chrome, Safari, Opera */
130 }
131
132 .navEnd {
133 display: flex;
134 align-items: center;
135 }
136 .navSearch {
137 flex: 0 1 300px;
138 margin: 0 0;
139 }
140}
141
142@media (max-width: 600px) {
143 .logo {
144 margin-right: 0rem;
145 }
146
147 .navLink {
148 padding: 0.5rem 0.4rem;
149 font-size: 0.9rem;
150 }
151
152 .navSearch {
153 order: 0;
154 flex: 1 1 auto;
155 margin-right: 1.5rem;
156 }
157
158 .navEnd {
159 gap: 0.25rem;
160 }
161
162 /* Put search and nav end items on same row */
163 .navbar {
164 flex-wrap: wrap;
165 }
166
167 .navStart {
168 width: 100%;
169 }
170
171 .secondRow {
172 display: flex;
173 width: 100%;
174 flex-direction: row;
175 justify-content: space-between;
176 align-items: center;
177 }
178 .navSearch {
179 flex: 0 1 300px;
180 margin: 0 0;
181 }
182}
183
184/* Small mobile layout */
185@media (max-width: 520px) {
186 .navbar {
187 padding: 1rem 1.5rem 1.5rem;
188 gap: 0;
189 }
190
191 .navStart {
192 flex-direction: column;
193 align-items: center;
194 text-align: center;
195 gap: 1rem;
196 display: inline;
197 margin-bottom: 1rem;
198 }
199
200 .logo {
201 margin: 0 auto;
202 justify-content: center;
203 width: 80%;
204 max-width: 240px;
205 }
206
207 .logoImage {
208 margin: 0 auto;
209 width: 100%;
210 }
211
212 .navLinks {
213 justify-content: center;
214 width: 100%;
215 overflow-x: auto;
216 gap: 0.4rem;
217 margin-top: 1rem;
218 }
219
220 .secondRow {
221 margin-top: 0rem;
222 gap: 1rem;
223 flex-direction: column;
224 }
225
226 .navSearch {
227 flex: 0;
228 margin: 0 0;
229 }
230}