this repo has no description
www.baileykane.co/
Tailwind upgrade
+67
-47
+1
-1
app/layout.tsx
+1
-1
app/layout.tsx
···
43
43
className="flex flex-col items-center
44
44
min-h-screen w-full
45
45
bg-stone-50
46
-
dark:bg-gradient-to-br dark:from-stone-900 dark:to-stone-800
46
+
dark:bg-linear-to-br dark:from-stone-900 dark:to-stone-800
47
47
text-stone-900 dark:text-stone-100"
48
48
>
49
49
<div className="max-w-7xl w-full p-2 space-y-10">
+1
-1
components/Button.tsx
+1
-1
components/Button.tsx
···
13
13
<a href={href} target={target}>
14
14
<button
15
15
className={`px-4 py-2 font-bold
16
-
bg-gradient-to-r from-purple-200 to-orange-100 dark:from-purple-500 dark:to-orange-300
16
+
bg-linear-to-r from-purple-200 to-orange-100 dark:from-purple-500 dark:to-orange-300
17
17
border border-stone-800 dark:border-stone-200 rounded-full hover:opacity-80 active:opacity-60 ${className}`}
18
18
>
19
19
Visit →
+1
-1
components/SocialLink.tsx
+1
-1
components/SocialLink.tsx
···
17
17
<a
18
18
href={href}
19
19
target={target}
20
-
className="p-2 rounded-full dark:text-white bg-stone-100 dark:bg-stone-700 hover:bg-stone-200 hover:dark:bg-stone-600 border border-stone-300 flex gap-1"
20
+
className="p-2 rounded-full dark:text-white bg-stone-100 dark:bg-stone-700 hover:bg-stone-200 dark:hover:bg-stone-600 border border-stone-300 flex gap-1"
21
21
>
22
22
{children}
23
23
<img className="h-6 w-6" src={iconURL} />
+3
-3
components/pageContent/books/BookCard.tsx
+3
-3
components/pageContent/books/BookCard.tsx
···
21
21
className="rounded-md w-72 mx-auto sm:w-auto sm:mx-0"
22
22
>
23
23
<div className="p-2 rounded-md border-2 bg-stone-50 dark:bg-stone-800 border-stone-400 hover:border-stone-500 dark:border-stone-600 shadow-md hover:shadow-xl transition-all">
24
-
<div className="shadow-md rounded-sm w-full aspect-book outline outline-1 dark:outline-stone-400">
24
+
<div className="shadow-md rounded-xs w-full aspect-book outline-solid outline-1 dark:outline-stone-400">
25
25
<img
26
26
// OpenLibrary Covers API:https://openlibrary.org/dev/docs/api/covers
27
27
src={`https://covers.openlibrary.org/b/isbn/${book.isbn}-M.jpg?default=false`}
28
28
alt={`The cover of ${book.title}, by ${book.author}.`}
29
29
loading="lazy"
30
30
onError={() => setImageError(true)}
31
-
className={`w-full rounded-sm aspect-book ${
31
+
className={`w-full rounded-xs aspect-book ${
32
32
imageError && "hidden"
33
33
}`}
34
34
/>
35
35
{imageError && (
36
-
<div className="rounded-sm h-full bg-stone-200 dark:bg-stone-700 flex items-center justify-center">
36
+
<div className="rounded-xs h-full bg-stone-200 dark:bg-stone-700 flex items-center justify-center">
37
37
<p className="text-sm">Book image not found.</p>
38
38
</div>
39
39
)}
+1
-1
components/pageContent/feed/BlueskyFeed/BlueskyPost.js
+1
-1
components/pageContent/feed/BlueskyFeed/BlueskyPost.js
···
23
23
<Link href={blueskyUri} target="_blank">
24
24
<div
25
25
className="p-4 my-4 bg-stone-200 dark:bg-stone-800 rounded-lg
26
-
border border-stone-300 dark:border-stone-500 border-b-stone-900 dark:border-b-stone-200 hover:border-stone-900 hover:dark:border-stone-200 "
26
+
border border-stone-300 dark:border-stone-500 border-b-stone-900 dark:border-b-stone-200 hover:border-stone-900 dark:hover:border-stone-200 "
27
27
>
28
28
<div className="flex flex-col w-full">
29
29
{isRepost && (
+1
-1
components/pageContent/home/HomePage.tsx
+1
-1
components/pageContent/home/HomePage.tsx
···
51
51
<Link href={"/projects"} className="rounded-lg">
52
52
<p
53
53
className="w-full text-center px-4 py-2 font-semibold text-stone-900 dark:text-white
54
-
bg-gradient-to-r from-purple-200 to-orange-100 dark:from-purple-500 dark:to-orange-300
54
+
bg-linear-to-r from-purple-200 to-orange-100 dark:from-purple-500 dark:to-orange-300
55
55
border border-stone-800 dark:border-stone-200 rounded-lg group transition hover:scale-105"
56
56
>
57
57
Example projects →
+1
-1
components/pageContent/library-cards/LibraryCardItem.tsx
+1
-1
components/pageContent/library-cards/LibraryCardItem.tsx
···
31
31
{/* <FlashlightEffect> */}
32
32
<div
33
33
className="rounded-lg cursor-pointer h-fit
34
-
border-2 border-purple-200 hover:border-purple-300 dark:border-purple-400 hover:dark:border-purple-500
34
+
border-2 border-purple-200 hover:border-purple-300 dark:border-purple-400 dark:hover:border-purple-500
35
35
shadow-md hover:shadow-xl"
36
36
>
37
37
<img
+1
-1
components/pageContent/projects/ProjectContent.tsx
+1
-1
components/pageContent/projects/ProjectContent.tsx
···
36
36
<a href={githubLink} target="_blank">
37
37
<button
38
38
className="px-4 py-2
39
-
bg-gradient-to-r from-stone-100 to-stone-200 dark:from-stone-900 dark:to-stone-800
39
+
bg-linear-to-r from-stone-100 to-stone-200 dark:from-stone-900 dark:to-stone-800
40
40
border border-stone-800 dark:border-stone-200 rounded-full hover:opacity-70"
41
41
>
42
42
View the code
+1
-2
postcss.config.js
+1
-2
postcss.config.js
+55
-34
styles/globals.css
+55
-34
styles/globals.css
···
1
-
@import url("https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
1
+
@import url('https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap')
2
+
layer(base);
3
+
4
+
@import 'tailwindcss';
5
+
6
+
@config '../tailwind.config.js';
7
+
8
+
/*
9
+
The default border color has changed to `currentcolor` in Tailwind CSS v4,
10
+
so we've added these compatibility styles to make sure everything still
11
+
looks the same as it did with Tailwind CSS v3.
2
12
3
-
@tailwind base;
4
-
@tailwind components;
5
-
@tailwind utilities;
13
+
If we ever want to remove these styles, we need to add an explicit border
14
+
color utility to any element that depends on these defaults.
15
+
*/
16
+
@layer base {
17
+
*,
18
+
::after,
19
+
::before,
20
+
::backdrop,
21
+
::file-selector-button {
22
+
border-color: var(--color-gray-200, currentcolor);
23
+
}
24
+
}
6
25
7
-
@layer components {
8
-
.item-list:hover > div {
26
+
@utility item-list {
27
+
&:hover > div {
9
28
opacity: 0.7;
10
-
transition: opacity 0.2s, transform 0.2s;
29
+
transition:
30
+
opacity 0.2s,
31
+
transform 0.2s;
11
32
}
12
33
13
-
.item-list:hover > *:hover {
34
+
&:hover > *:hover {
14
35
opacity: 1;
15
36
}
37
+
}
16
38
17
-
.mapboxgl-popup-content {
18
-
font-family: "Poppins";
19
-
color: #000;
20
-
}
39
+
@utility mapboxgl-popup-content {
40
+
font-family: 'Poppins';
41
+
color: #000;
42
+
}
21
43
22
-
.library-card-selected {
23
-
/* transition-property: rotateX rotateY;
44
+
@utility library-card-selected {
45
+
/* transition-property: rotateX rotateY;
24
46
transition-timing-function: ease;
25
47
transition-duration: 150ms;
26
48
transform-style: preserve-3d;
27
49
rotateX(var(--rotateX)); */
28
-
transform: translate(-50%, -50%);
29
-
filter: brightness(1.2);
30
-
position: fixed;
31
-
top: 50%;
32
-
left: 50%;
33
-
z-index: 50;
34
-
}
50
+
transform: translate(-50%, -50%);
51
+
filter: brightness(1.2);
52
+
position: fixed;
53
+
top: 50%;
54
+
left: 50%;
55
+
z-index: 50;
56
+
}
35
57
36
-
.section-item {
37
-
@apply rounded-lg;
38
-
@apply bg-gradient-to-r;
39
-
@apply from-purple-200;
40
-
@apply to-orange-100;
41
-
@apply dark:from-purple-500;
42
-
@apply dark:to-orange-300;
43
-
@apply border;
44
-
@apply border-stone-800;
45
-
@apply dark:border-stone-200;
46
-
@apply shadow-md;
47
-
@apply hover:shadow-lg;
48
-
}
58
+
@utility section-item {
59
+
@apply rounded-lg;
60
+
@apply bg-linear-to-r;
61
+
@apply from-purple-200;
62
+
@apply to-orange-100;
63
+
@apply dark:from-purple-500;
64
+
@apply dark:to-orange-300;
65
+
@apply border;
66
+
@apply border-stone-800;
67
+
@apply dark:border-stone-200;
68
+
@apply shadow-md;
69
+
@apply hover:shadow-lg;
49
70
}
50
71
51
72
@layer base {