leaflet.pub
a tool for shared writing and social publishing
Initialized front end added in Prettier moved over the tailwind config added basic font size and styling in global css super minimally card coded dummy cards started working out the scroll logic
and said a lil prayer LOL
cozylittle.house
+247
-3
+53
app/globals.css
+53
app/globals.css
···
1
1
@tailwind base;
2
2
@tailwind components;
3
3
@tailwind utilities;
4
+
5
+
html,
6
+
body {
7
+
@apply bg-bg-page;
8
+
@apply h-full;
9
+
@apply p-0;
10
+
@apply text-grey-15;
11
+
@apply overscroll-y-none;
12
+
min-height: -webkit-fill-available;
13
+
@apply font-sans;
14
+
}
15
+
16
+
#__next {
17
+
height: 100%;
18
+
}
19
+
20
+
/* START FONT STYLING */
21
+
h1 {
22
+
@apply text-2xl;
23
+
@apply font-bold;
24
+
}
25
+
26
+
h2 {
27
+
@apply text-xl;
28
+
@apply font-bold;
29
+
}
30
+
31
+
h3 {
32
+
@apply text-lg;
33
+
@apply font-bold;
34
+
}
35
+
36
+
h4 {
37
+
@apply text-base;
38
+
@apply font-bold;
39
+
}
40
+
41
+
p {
42
+
@apply text-base;
43
+
}
44
+
45
+
small {
46
+
@apply text-sm;
47
+
}
48
+
49
+
a {
50
+
color: inherit;
51
+
text-decoration: none;
52
+
}
53
+
54
+
pre {
55
+
font-family: "Quattro" !important;
56
+
}
+9
-1
app/layout.tsx
+9
-1
app/layout.tsx
···
1
1
import "./globals.css";
2
+
import localFont from "next/font/local";
3
+
2
4
export const metadata = {
3
5
title: "Minilink",
4
6
description: "tiny interconnected social documents",
5
7
};
6
8
9
+
const quattro = localFont({
10
+
src: "../public/fonts/iAWriterQuattroV.ttf",
11
+
display: "swap",
12
+
variable: "--font-quattro",
13
+
});
14
+
7
15
export default function RootLayout({
8
16
children,
9
17
}: {
10
18
children: React.ReactNode;
11
19
}) {
12
20
return (
13
-
<html lang="en">
21
+
<html lang="en" className={`${quattro.variable}`}>
14
22
<body>{children}</body>
15
23
</html>
16
24
);
+74
app/test/page.tsx
+74
app/test/page.tsx
···
1
+
"use client";
2
+
3
+
import { Home } from "../../components/Icons";
4
+
import { ButtonPrimary } from "../../components/Buttons";
5
+
import { useState } from "react";
6
+
7
+
export default function Index() {
8
+
let [cardTwo, setCardTwo] = useState(false);
9
+
let [cardMany, setCardMany] = useState(false);
10
+
11
+
return (
12
+
<div className="pageWrapper h-screen flex flex-col gap-4 py-4">
13
+
<div className="pageHeader shrink-0 flex justify-between grow-0 mx-4">
14
+
<div className="w-[3px] bg-test h-6 mx-auto" />
15
+
{/* <div className="flex gap-4 items-center">
16
+
<div className="text-grey-55">
17
+
<Home />
18
+
</div>
19
+
20
+
<ButtonPrimary>Share!</ButtonPrimary>
21
+
</div>
22
+
<div>theme</div> */}
23
+
</div>
24
+
25
+
<div className="pageContentWrapper w-full overflow-x-scroll snap-mandatory snap-x grow items-stretch flex ">
26
+
<div className="pageContent flex mx-auto px-4">
27
+
<div className="w-[600px]" />
28
+
<Card first>
29
+
<ButtonPrimary
30
+
onClick={() => {
31
+
setCardTwo(!cardTwo);
32
+
}}
33
+
>
34
+
toggle card 2
35
+
</ButtonPrimary>
36
+
<ButtonPrimary
37
+
onClick={() => {
38
+
setCardMany(!cardMany);
39
+
}}
40
+
>
41
+
toggle card many
42
+
</ButtonPrimary>
43
+
</Card>
44
+
{cardTwo && <Card>Card 2</Card>}
45
+
{cardMany && (
46
+
<>
47
+
<Card>Card 2</Card>
48
+
<Card>Card 3</Card>
49
+
<Card>Card 4</Card>
50
+
<Card>Card 5</Card>
51
+
<Card>Card 6</Card>
52
+
<Card>Card 7</Card>
53
+
</>
54
+
)}
55
+
<div className="w-[600px]" />
56
+
</div>
57
+
</div>
58
+
</div>
59
+
);
60
+
}
61
+
62
+
const Card = (props: { children: React.ReactNode; first?: boolean }) => {
63
+
return (
64
+
<>
65
+
{/* if the card is the first one in the list, remove this div... can we do with :before? */}
66
+
{!props.first && <div className="w-8 snap-center" />}
67
+
<div
68
+
className={`p-3 w-[calc(50vw-24px)] max-w-[500px] bg-bg-card border border-grey-80 rounded-lg grow flex flex-col gap-2 ${props.first && "snap-center"}`}
69
+
>
70
+
{props.children}
71
+
</div>
72
+
</>
73
+
);
74
+
};
+23
components/Buttons.tsx
+23
components/Buttons.tsx
···
1
+
type ButtonProps = Omit<JSX.IntrinsicElements["button"], "content">;
2
+
export function ButtonPrimary(
3
+
props: {
4
+
children: React.ReactNode;
5
+
} & ButtonProps,
6
+
) {
7
+
return (
8
+
<button
9
+
{...props}
10
+
className={`m-0 px-2 py-0.5 w-max
11
+
bg-accent outline-offset-[-2px] active:outline active:outline-2
12
+
border border-accent rounded-md
13
+
text-base font-bold text-white
14
+
flex gap-2 items-center justify-center shrink-0
15
+
disabled:border-grey-90
16
+
disabled:bg-grey-90 disabled:text-grey-80 disabled:hover:text-grey-80
17
+
${props.className}
18
+
`}
19
+
>
20
+
{props.children}
21
+
</button>
22
+
);
23
+
}
+19
components/Icons.tsx
+19
components/Icons.tsx
···
1
+
export const Home = (props: Props) => {
2
+
return (
3
+
<svg
4
+
width="33"
5
+
height="32"
6
+
viewBox="0 0 33 32"
7
+
fill="none"
8
+
xmlns="http://www.w3.org/2000/svg"
9
+
{...props}
10
+
>
11
+
<path
12
+
fillRule="evenodd"
13
+
clipRule="evenodd"
14
+
d="M11.4118 6.62153L11.4118 6.62137L11.4115 6.62166L3.75928 15.4314L4.76998 15.8647V23.5193L9.10158 25.5413V25.4262L9.1692 25.5577L13.7219 23.2987V27.5633L18.342 29.7296V29.73L29.3154 24.5306V17.5981L30.7593 16.876L28.5704 12.621V7.52505C28.5704 7.25627 28.4227 7.00926 28.1859 6.88212L26.0501 5.73539C25.8484 5.62713 25.6077 5.61974 25.3998 5.71541L25.0911 5.85745L23.1068 2L11.4118 6.62153ZM9.10158 20.4859V24.1202L13.6862 21.8454C13.5294 20.3564 12.8452 18.6036 11.4118 17.8864C9.79475 17.0774 9.10158 18.7526 9.10158 20.4859ZM12.5105 8.53241C12.933 8.32776 13.4414 8.50434 13.646 8.92682L19.6154 21.2496L26.7599 18.0098C27.1874 17.816 27.6912 18.0054 27.8851 18.4329C28.0789 18.8605 27.8895 19.3642 27.462 19.5581L19.5627 23.1401C19.1428 23.3305 18.6477 23.1515 18.4467 22.7365L12.1161 9.66795C11.9114 9.24547 12.088 8.73707 12.5105 8.53241ZM23.5583 6.75884C23.1639 6.50425 22.6377 6.61759 22.3832 7.012C22.1286 7.40641 22.2419 7.93253 22.6363 8.18712L24.0182 9.07917V14.4645C24.0182 14.9339 24.3988 15.3145 24.8682 15.3145C25.3377 15.3145 25.7182 14.9339 25.7182 14.4645V8.61615C25.7182 8.32749 25.5717 8.05856 25.3292 7.90201L23.5583 6.75884Z"
15
+
fill="currentColor"
16
+
/>
17
+
</svg>
18
+
);
19
+
};
+16
package-lock.json
+16
package-lock.json
···
18
18
"@types/react": "18.3.2",
19
19
"autoprefixer": "^10.4.19",
20
20
"postcss": "^8.4.38",
21
+
"prettier": "3.2.5",
21
22
"supabase": "^1.167.4",
22
23
"tailwindcss": "^3.4.3",
23
24
"typescript": "5.4.5",
···
2277
2278
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
2278
2279
"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
2279
2280
"dev": true
2281
+
},
2282
+
"node_modules/prettier": {
2283
+
"version": "3.2.5",
2284
+
"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz",
2285
+
"integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
2286
+
"dev": true,
2287
+
"bin": {
2288
+
"prettier": "bin/prettier.cjs"
2289
+
},
2290
+
"engines": {
2291
+
"node": ">=14"
2292
+
},
2293
+
"funding": {
2294
+
"url": "https://github.com/prettier/prettier?sponsor=1"
2295
+
}
2280
2296
},
2281
2297
"node_modules/printable-characters": {
2282
2298
"version": "1.0.42",
+1
package.json
+1
package.json
public/fonts/iAWriterQuattroV-Italic.ttf
public/fonts/iAWriterQuattroV-Italic.ttf
This is a binary file and will not be displayed.
public/fonts/iAWriterQuattroV.ttf
public/fonts/iAWriterQuattroV.ttf
This is a binary file and will not be displayed.
+52
-2
tailwind.config.js
+52
-2
tailwind.config.js
···
1
1
/** @type {import('tailwindcss').Config} */
2
2
module.exports = {
3
-
content: ["./app/**/*.{ts,tsx}"],
3
+
content: ["./app/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}"],
4
4
theme: {
5
-
extend: {},
5
+
screens: {
6
+
sm: "640px",
7
+
md: "960px",
8
+
},
9
+
borderRadius: {
10
+
none: "0",
11
+
md: "0.25rem",
12
+
lg: "0.5rem",
13
+
full: "9999px",
14
+
},
15
+
16
+
colors: {
17
+
inherit: "inherit",
18
+
transparent: "transparent",
19
+
current: "currentColor",
20
+
21
+
//TEXT COLORS. # refers to lightness value. 95 = lightest, 15 = darkest
22
+
"grey-15": "#272727",
23
+
"grey-35": "#595959",
24
+
"grey-55": "#8C8C8C",
25
+
"grey-80": "#CCCCCC",
26
+
"grey-90": "#E6E6E6",
27
+
white: "#FFFFFF",
28
+
29
+
//ACCENT COLORS
30
+
"accent": "#0000FF",
31
+
32
+
//BG COLORS
33
+
"bg-page": "floralwhite",
34
+
"bg-card": "white",
35
+
36
+
//DO NOT USE IN PRODUCTION. Test colors to aid development, ie, setting bg color on element to see edges of div. DO. NOT. USE. IN. PRODUCTION
37
+
"test": "#E18181",
38
+
"test-blue": "#48D1EF",
39
+
40
+
41
+
},
42
+
fontSize: {
43
+
xs: ".75rem",
44
+
sm: ".875rem",
45
+
base: "1rem",
46
+
lg: "1.25rem",
47
+
xl: "1.625rem",
48
+
"2xl": "2rem",
49
+
},
50
+
51
+
extend: {
52
+
fontFamily: {
53
+
sans: ['var(--font-quattro)'],
54
+
},
55
+
},
6
56
},
7
57
plugins: [],
8
58
};