a tool for shared writing and social publishing
rename container to frosted container
+89
-49
+37
-10
app/globals.css
+37
-10
app/globals.css
···
215
215
.pageScrollWrapper h2,
216
216
.pageScrollWrapper h3,
217
217
.pageScrollWrapper h4 {
218
-
font-family: var(--theme-heading-font, var(--theme-font, var(--font-quattro)));
218
+
font-family: var(
219
+
--theme-heading-font,
220
+
var(--theme-font, var(--font-quattro))
221
+
);
219
222
}
220
223
221
224
/* Scale heading sizes relative to the custom base font size */
222
-
.pageScrollWrapper h1 { font-size: 2em; }
223
-
.pageScrollWrapper h2 { font-size: 1.625em; }
224
-
.pageScrollWrapper h3 { font-size: 1.125em; }
225
-
.pageScrollWrapper h4 { font-size: 1em; }
225
+
.pageScrollWrapper h1 {
226
+
font-size: 2em;
227
+
}
228
+
.pageScrollWrapper h2 {
229
+
font-size: 1.625em;
230
+
}
231
+
.pageScrollWrapper h3 {
232
+
font-size: 1.125em;
233
+
}
234
+
.pageScrollWrapper h4 {
235
+
font-size: 1em;
236
+
}
226
237
227
238
/* Scale text size classes relative to the custom base font size.
228
239
Tailwind's text-sm/text-base/text-lg compile to fixed rem values
229
240
which ignore the custom base size set on .pageScrollWrapper. */
230
-
.pageScrollWrapper .textSizeSmall { font-size: 0.875em; }
231
-
.pageScrollWrapper .textSizeLarge { font-size: 1.125em; }
241
+
.pageScrollWrapper .textSizeSmall {
242
+
font-size: 0.875em;
243
+
}
244
+
.pageScrollWrapper .textSizeLarge {
245
+
font-size: 1.125em;
246
+
}
232
247
233
248
.pageScrollWrapper pre {
234
249
font-family: var(--theme-font, var(--font-quattro));
···
243
258
.pubWrapper h2,
244
259
.pubWrapper h3,
245
260
.pubWrapper h4 {
246
-
font-family: var(--theme-heading-font, var(--theme-font, var(--font-quattro)));
261
+
font-family: var(
262
+
--theme-heading-font,
263
+
var(--theme-font, var(--font-quattro))
264
+
);
247
265
}
248
266
/*END FONT STYLING*/
249
267
···
446
464
@apply ml-2;
447
465
}
448
466
467
+
.container {
468
+
@apply border;
469
+
@apply border-border-light;
470
+
@apply rounded-md;
471
+
background: rgba(var(--bg-page), var(--bg-page-alpha));
472
+
}
473
+
449
474
.transparent-container {
450
475
@apply border;
451
476
@apply border-border-light;
452
477
@apply rounded-md;
453
478
}
454
479
455
-
.container {
480
+
.frosted-container {
456
481
background: rgba(var(--bg-page), 0.75);
457
482
@apply border;
458
483
@apply border-bg-page;
···
571
596
.footnote-side-item {
572
597
max-height: 4.5em;
573
598
overflow: hidden;
574
-
transition: max-height 200ms ease, mask-image 200ms ease;
599
+
transition:
600
+
max-height 200ms ease,
601
+
mask-image 200ms ease;
575
602
}
576
603
.footnote-side-item.has-overflow {
577
604
mask-image: linear-gradient(to bottom, white 50%, transparent 100%);
+1
-1
components/ActionBar/Sidebar.tsx
+1
-1
components/ActionBar/Sidebar.tsx
···
30
30
${!props.alwaysOpen ? "absolute top-0 left-0 z-10 w-max" : "w-[192px] max-w-[192px]"}
31
31
h-fit p-[6px]
32
32
flex flex-col gap-1 justify-start border
33
-
rounded-md bg-bg-page ${open && !props.alwaysOpen ? "border-border-light" : "container"}
33
+
rounded-md bg-bg-page ${open && !props.alwaysOpen ? "border-border-light" : "frosted-container"}
34
34
${props.className}
35
35
`}
36
36
onMouseOver={() => {
+1
-1
app/(home-pages)/notifications/NotificationList.tsx
+1
-1
app/(home-pages)/notifications/NotificationList.tsx
···
30
30
31
31
if (notifications.length === 0)
32
32
return (
33
-
<div className="w-full text-sm flex flex-col gap-1 container italic text-tertiary text-center sm:p-4 p-3">
33
+
<div className="w-full text-sm flex flex-col gap-1 frosted-container italic text-tertiary text-center sm:p-4 p-3">
34
34
<div className="text-base font-bold">no notifications yet...</div>
35
35
Here, you'll find notifications about new follows, comments,
36
36
mentions, and replies!
+1
-1
app/(home-pages)/reader/GlobalContent.tsx
+1
-1
app/(home-pages)/reader/GlobalContent.tsx
···
34
34
35
35
if (posts.length === 0) {
36
36
return (
37
-
<div className="flex flex-col gap-2 container bg-[rgba(var(--bg-page),.7)] sm:p-4 p-3 justify-between text-center text-tertiary">
37
+
<div className="flex flex-col gap-2 frosted-container bg-[rgba(var(--bg-page),.7)] sm:p-4 p-3 justify-between text-center text-tertiary">
38
38
Nothing trending right now. Check back soon!
39
39
</div>
40
40
);
+1
-1
app/(home-pages)/reader/InboxContent.tsx
+1
-1
app/(home-pages)/reader/InboxContent.tsx
···
109
109
110
110
export const ReaderEmpty = () => {
111
111
return (
112
-
<div className="flex flex-col gap-2 container bg-[rgba(var(--bg-page),.7)] sm:p-4 p-3 justify-between text-center text-tertiary">
112
+
<div className="flex flex-col gap-2 frosted-container bg-[rgba(var(--bg-page),.7)] sm:p-4 p-3 justify-between text-center text-tertiary">
113
113
Nothing to read yet… <br />
114
114
Subscribe to publications and find their posts here!
115
115
<Link href={"/reader/hot"}>
+1
-1
app/(home-pages)/reader/NewContent.tsx
+1
-1
app/(home-pages)/reader/NewContent.tsx
···
66
66
67
67
if (allPosts.length === 0) {
68
68
return (
69
-
<div className="flex flex-col gap-2 container bg-[rgba(var(--bg-page),.7)] sm:p-4 p-3 justify-between text-center text-tertiary">
69
+
<div className="flex flex-col gap-2 frosted-container bg-[rgba(var(--bg-page),.7)] sm:p-4 p-3 justify-between text-center text-tertiary">
70
70
No posts yet. Check back soon!
71
71
</div>
72
72
);
+2
-2
app/[leaflet_id]/publish/PublishPost.tsx
+2
-2
app/[leaflet_id]/publish/PublishPost.tsx
···
180
180
submit();
181
181
}}
182
182
>
183
-
<div className="container flex flex-col gap-3 sm:p-3 p-4">
183
+
<div className="frosted-container flex flex-col gap-3 sm:p-3 p-4">
184
184
<PublishingTo
185
185
publication_uri={props.publication_uri}
186
186
record={props.record}
···
458
458
}) => {
459
459
let uri = props.publication_uri ? new AtUri(props.publication_uri) : null;
460
460
return (
461
-
<div className="container p-4 m-3 sm:m-4 flex flex-col gap-1 justify-center text-center w-fit h-fit mx-auto">
461
+
<div className="frosted-container p-4 m-3 sm:m-4 flex flex-col gap-1 justify-center text-center w-fit h-fit mx-auto">
462
462
<PublishIllustration posts_in_pub={props.posts_in_pub} />
463
463
<h2 className="pt-2">Published!</h2>
464
464
{uri && props.record ? (
+1
-1
app/lish/createPub/page.tsx
+1
-1
app/lish/createPub/page.tsx
···
9
9
return (
10
10
<div className="createPubPage relative w-full h-full flex items-stretch bg-bg-leaflet p-4">
11
11
<div className="createPubContent h-full flex items-center max-w-sm w-full mx-auto">
12
-
<div className="container w-full p-3 justify-items-center text-center">
12
+
<div className="frosted-container w-full p-3 justify-items-center text-center">
13
13
<LoginForm
14
14
text="Log in to create a publication!"
15
15
noEmail
+6
-7
app/lish/[did]/[publication]/dashboard/PublishedPostsLists.tsx
+6
-7
app/lish/[did]/[publication]/dashboard/PublishedPostsLists.tsx
···
9
9
} from "./PublicationSWRProvider";
10
10
import { Fragment } from "react";
11
11
import { useParams } from "next/navigation";
12
-
import { getPublicationURL, getDocumentURL } from "app/lish/createPub/getPublicationURL";
12
+
import {
13
+
getPublicationURL,
14
+
getDocumentURL,
15
+
} from "app/lish/createPub/getPublicationURL";
13
16
import { SpeedyLink } from "components/SpeedyLink";
14
17
import { InteractionPreview } from "components/InteractionsPreview";
15
18
import { useLocalizedDate } from "src/hooks/useLocalizedDate";
···
27
30
if (!publication) return null;
28
31
if (!documents || documents.length === 0)
29
32
return (
30
-
<div className="italic text-tertiary w-full container text-center place-items-center flex flex-col gap-3 p-3">
33
+
<div className="italic text-tertiary w-full frosted-container text-center place-items-center flex flex-col gap-3 p-3">
31
34
Nothing's been published yet...
32
35
</div>
33
36
);
···
85
88
}}
86
89
>
87
90
<div className="flex justify-between gap-2">
88
-
<a
89
-
className="hover:no-underline!"
90
-
target="_blank"
91
-
href={docUrl}
92
-
>
91
+
<a className="hover:no-underline!" target="_blank" href={docUrl}>
93
92
<h3 className="text-primary grow leading-snug">
94
93
{doc.record.title}
95
94
</h3>
+1
-1
app/lish/[did]/[publication]/subscribeSuccess/page.tsx
+1
-1
app/lish/[did]/[publication]/subscribeSuccess/page.tsx
···
4
4
export default function SubscribeSuccess() {
5
5
return (
6
6
<div className="h-full w-screen bg-bg-leaflet flex place-items-center text-center ">
7
-
<div className="container p-4 max-w-md mx-auto justify-center place-items-center flex flex-col gap-2">
7
+
<div className="frosted-container p-4 max-w-md mx-auto justify-center place-items-center flex flex-col gap-2">
8
8
<h3 className="text-secondary">You've Subscribed!</h3>
9
9
<div className="text-tertiary">
10
10
Add this custom feed to your Bluesky to get the updates from this and
+22
-23
app/lish/[did]/[publication]/dashboard/settings/PostSettings.tsx
+22
-23
app/lish/[did]/[publication]/dashboard/settings/PostSettings.tsx
···
13
13
setShowInDiscover: (v: boolean) => void;
14
14
}) {
15
15
return (
16
-
<section className="flex flex-col gap-3">
17
-
<h3 className="font-bold text-primary">Post Settings</h3>
18
-
19
-
<h4 className="mb-0">Discovery</h4>
20
-
<Toggle
21
-
toggle={props.showInDiscover}
22
-
onToggle={() => props.setShowInDiscover(!props.showInDiscover)}
23
-
>
24
-
<div className="flex flex-col justify-start">
25
-
<div className="font-bold">Make Public</div>
26
-
<div className="text-tertiary text-sm leading-tight">
27
-
Your posts will appear in{" "}
28
-
<a href="/reader" target="_blank">
29
-
Leaflet Reader
30
-
</a>{" "}
31
-
and show up in search and tags.
16
+
<>
17
+
<div className="flex flex-col gap-3">
18
+
<h3 className="mb-0">Discovery</h3>
19
+
<Toggle
20
+
toggle={props.showInDiscover}
21
+
onToggle={() => props.setShowInDiscover(!props.showInDiscover)}
22
+
>
23
+
<div className="flex flex-col justify-start">
24
+
<div className="font-bold">Make Public</div>
25
+
<div className="text-tertiary text-sm leading-tight">
26
+
Your posts will appear in{" "}
27
+
<a href="/reader" target="_blank">
28
+
Leaflet Reader
29
+
</a>{" "}
30
+
and show up in search and tags.
31
+
</div>
32
32
</div>
33
-
</div>
34
-
</Toggle>
35
-
33
+
</Toggle>
34
+
</div>
36
35
<hr className="border-border-light" />
37
36
38
-
<h4 className="mb-0">Layout</h4>
37
+
<h3 className="mb-0">Post Layout</h3>
39
38
<Toggle
40
39
toggle={props.showPrevNext}
41
40
onToggle={() => props.setShowPrevNext(!props.showPrevNext)}
42
41
>
43
-
<div className="font-bold">Show Prev/Next Buttons</div>
42
+
<div className="font-bold">Show Prev/Next Buttons on Post</div>
44
43
</Toggle>
45
44
46
45
<hr className="border-border-light" />
47
46
48
-
<h4 className="mb-0">Interactions</h4>
47
+
<h3 className="mb-0">Post Interactions</h3>
49
48
<div className="flex flex-col gap-2">
50
49
<Toggle
51
50
toggle={props.showComments}
···
78
77
</div>
79
78
</Toggle>
80
79
</div>
81
-
</section>
80
+
</>
82
81
);
83
82
}
+15
app/lish/[did]/[publication]/dashboard/settings/SettingsContent.tsx
+15
app/lish/[did]/[publication]/dashboard/settings/SettingsContent.tsx
···
15
15
import { GeneralSettings } from "./GeneralSettings";
16
16
import { PostSettings } from "./PostSettings";
17
17
import { ThemeSettings } from "./ThemeSettings";
18
+
import { useCardBorderHidden } from "components/Pages/useCardBorderHidden";
18
19
19
20
type SettingsView = "all" | "theme";
20
21
···
164
165
</form>
165
166
);
166
167
}
168
+
169
+
export const DashboardContainer = (props: {
170
+
children: React.ReactNode;
171
+
className?: string;
172
+
}) => {
173
+
let cardBorderHidden = useCardBorderHidden();
174
+
return (
175
+
<div
176
+
className={`flex flex-col ${cardBorderHidden ? "con" : "bg-transparent"}`}
177
+
>
178
+
{props.children}
179
+
</div>
180
+
);
181
+
};