@jjlmoya/landings 0.7.0 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jjlmoya/landings",
3
- "version": "0.7.0",
3
+ "version": "0.8.0",
4
4
  "type": "module",
5
5
  "main": "./src/index.ts",
6
6
  "types": "./src/index.ts",
@@ -1,55 +0,0 @@
1
- .behind-joke-grid {
2
- display: grid;
3
- grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
4
- gap: 2rem;
5
- align-items: center;
6
- }
7
-
8
- .behind-joke-scene {
9
- position: relative;
10
- min-height: 360px;
11
- border: 1px solid var(--team-border);
12
- border-radius: 28px;
13
- }
14
-
15
- .behind-joke-island {
16
- position: absolute;
17
- top: 1.3rem;
18
- left: 1.3rem;
19
- border-radius: 999px;
20
- padding: 0.65rem 0.9rem;
21
- background: var(--team-mint);
22
- color: var(--team-deep);
23
- font-weight: var(--font-weight-bold, 800);
24
- }
25
-
26
- .behind-joke-desk {
27
- position: absolute;
28
- right: 12%;
29
- bottom: 18%;
30
- width: 58%;
31
- height: 92px;
32
- border-radius: 16px;
33
- background: var(--team-gold);
34
- }
35
-
36
- .behind-joke-avatar {
37
- position: absolute;
38
- left: 23%;
39
- bottom: 30%;
40
- display: grid;
41
- width: 88px;
42
- height: 88px;
43
- place-items: center;
44
- border-radius: 999px;
45
- background: var(--team-blue);
46
- color: var(--team-deep);
47
- font-size: 2rem;
48
- font-weight: var(--font-weight-bold, 800);
49
- }
50
-
51
- @media (max-width: 780px) {
52
- .behind-joke-grid {
53
- grid-template-columns: 1fr;
54
- }
55
- }
@@ -1,50 +0,0 @@
1
- .memory-wall {
2
- padding-bottom: 6rem;
3
- }
4
-
5
- .memory-wall-board {
6
- display: grid;
7
- grid-template-columns: repeat(4, minmax(0, 1fr));
8
- gap: 1rem;
9
- margin-top: 2rem;
10
- }
11
-
12
- .memory-card {
13
- min-height: 190px;
14
- border: 1px solid var(--team-border);
15
- border-radius: 12px;
16
- padding: 1rem;
17
- }
18
-
19
- .memory-card-photo {
20
- display: grid;
21
- height: 96px;
22
- place-items: center;
23
- border-radius: 8px;
24
- color: var(--memory-color);
25
- font-size: 2.4rem;
26
- font-weight: var(--font-weight-bold, 800);
27
- }
28
-
29
- .memory-card-name {
30
- margin: 0.9rem 0 0;
31
- font-size: 1.1rem;
32
- }
33
-
34
- .memory-card-line {
35
- margin: 0.35rem 0 0;
36
- color: var(--team-muted);
37
- line-height: 1.45;
38
- }
39
-
40
- @media (max-width: 920px) {
41
- .memory-wall-board {
42
- grid-template-columns: repeat(2, minmax(0, 1fr));
43
- }
44
- }
45
-
46
- @media (max-width: 560px) {
47
- .memory-wall-board {
48
- grid-template-columns: 1fr;
49
- }
50
- }
@@ -1,129 +0,0 @@
1
- .team-comic-strip {
2
- display: grid;
3
- gap: 1.2rem;
4
- margin-top: 2rem;
5
- }
6
-
7
- .team-comic-panel {
8
- display: grid;
9
- grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr);
10
- gap: 1rem;
11
- min-height: 360px;
12
- overflow: hidden;
13
- border: 1px solid var(--team-border);
14
- border-radius: 22px;
15
- }
16
-
17
- .team-comic-art {
18
- position: relative;
19
- min-height: 320px;
20
- }
21
-
22
- .team-comic-cat,
23
- .team-comic-human,
24
- .team-comic-prop {
25
- position: absolute;
26
- }
27
-
28
- .team-comic-cat {
29
- left: 18%;
30
- top: 22%;
31
- width: 96px;
32
- height: 70px;
33
- border-radius: 30px 30px 18px 18px;
34
- background: var(--team-deep);
35
- box-shadow:
36
- 16px -16px 0 -8px var(--team-deep),
37
- 58px -16px 0 -8px var(--team-deep);
38
- }
39
-
40
- .team-comic-cat::before,
41
- .team-comic-cat::after {
42
- position: absolute;
43
- top: 24px;
44
- width: 18px;
45
- height: 12px;
46
- border-radius: 999px;
47
- background: var(--team-gold);
48
- content: "";
49
- }
50
-
51
- .team-comic-cat::before {
52
- left: 22px;
53
- }
54
-
55
- .team-comic-cat::after {
56
- right: 22px;
57
- }
58
-
59
- .team-comic-human {
60
- right: 18%;
61
- bottom: 18%;
62
- width: 54px;
63
- height: 86px;
64
- border-radius: 24px 24px 12px 12px;
65
- background: var(--team-blue);
66
- }
67
-
68
- .team-comic-human::before {
69
- position: absolute;
70
- top: -28px;
71
- left: 12px;
72
- width: 30px;
73
- height: 30px;
74
- border-radius: 999px;
75
- background: var(--team-gold);
76
- content: "";
77
- }
78
-
79
- .team-comic-prop {
80
- left: 11%;
81
- bottom: 12%;
82
- border: 1px solid var(--team-border);
83
- border-radius: 12px;
84
- padding: 0.85rem 1rem;
85
- background: transparent;
86
- color: var(--team-muted);
87
- font-size: 0.85rem;
88
- font-weight: var(--font-weight-bold, 800);
89
- text-transform: uppercase;
90
- }
91
-
92
- .team-comic-content {
93
- display: grid;
94
- align-content: center;
95
- padding: 2rem;
96
- }
97
-
98
- .team-comic-content h3 {
99
- margin: 0;
100
- font-size: 2rem;
101
- }
102
-
103
- .team-comic-content p {
104
- margin: 1rem 0 0;
105
- color: var(--team-muted);
106
- line-height: 1.7;
107
- }
108
-
109
- .team-comic-bubbles {
110
- display: flex;
111
- flex-wrap: wrap;
112
- gap: 0.7rem;
113
- margin-top: 1.4rem;
114
- }
115
-
116
- .team-comic-bubbles span {
117
- position: relative;
118
- border: 1px solid var(--team-border);
119
- border-radius: 999px;
120
- padding: 0.7rem 0.9rem;
121
- color: var(--team-ink);
122
- font-weight: var(--font-weight-bold, 800);
123
- }
124
-
125
- @media (max-width: 780px) {
126
- .team-comic-panel {
127
- grid-template-columns: 1fr;
128
- }
129
- }
@@ -1,75 +0,0 @@
1
- .team-roster-grid {
2
- display: grid;
3
- grid-template-columns: repeat(3, minmax(0, 1fr));
4
- gap: 1rem;
5
- margin-top: 2rem;
6
- }
7
-
8
- .team-member-card {
9
- position: relative;
10
- min-height: 230px;
11
- overflow: hidden;
12
- border: 1px solid var(--team-border);
13
- border-radius: 18px;
14
- padding: 1.1rem;
15
- transition:
16
- transform 0.22s ease,
17
- border-color 0.22s ease;
18
- }
19
-
20
- .team-member-card:hover {
21
- transform: translateY(-6px);
22
- border-color: color-mix(in srgb, var(--team-pink) 46%, var(--team-border));
23
- }
24
-
25
- .team-member-card-avatar {
26
- display: grid;
27
- width: 4rem;
28
- height: 4rem;
29
- place-items: center;
30
- border-radius: 18px;
31
- background: var(--member-color);
32
- color: var(--team-deep);
33
- font-size: 2rem;
34
- font-weight: var(--font-weight-bold, 800);
35
- }
36
-
37
- .team-member-card-name {
38
- margin: 1.3rem 0 0;
39
- font-size: 1.45rem;
40
- }
41
-
42
- .team-member-card-role {
43
- margin: 0.35rem 0 0;
44
- color: var(--team-mint);
45
- font-weight: var(--font-weight-bold, 800);
46
- }
47
-
48
- .team-member-card-bio {
49
- margin: 1rem 0 0;
50
- color: var(--team-muted);
51
- line-height: 1.65;
52
- }
53
-
54
- .team-member-card-tag {
55
- display: inline-flex;
56
- margin-top: 1rem;
57
- border: 1px solid var(--team-border);
58
- border-radius: 999px;
59
- padding: 0.45rem 0.68rem;
60
- color: var(--team-muted);
61
- font-size: 0.82rem;
62
- font-weight: var(--font-weight-bold, 800);
63
- }
64
-
65
- @media (max-width: 920px) {
66
- .team-roster-grid {
67
- grid-template-columns: repeat(2, minmax(0, 1fr));
68
- }
69
- }
70
-
71
- @media (max-width: 620px) {
72
- .team-roster-grid {
73
- grid-template-columns: 1fr;
74
- }
75
- }