@turnipxenon/pineapple 3.1.0-alpha.6 → 3.1.0-alpha.8
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/dist/components/dialog_overlay/DialogOverlay.svelte +22 -30
- package/dist/styles/app.css +1 -1
- package/dist/styles/turnip-theme.css +17 -7
- package/dist/ui/components/SocialSection.svelte +2 -1
- package/dist/ui/elements/ImageIcon.svelte +2 -2
- package/dist/ui/elements/ImageIcon.svelte.d.ts +1 -1
- package/dist/ui/elements/PinyaAnchorButton/PinyaAnchorButton.svelte +25 -0
- package/dist/ui/elements/PinyaAnchorButton/PinyaAnchorButton.svelte.d.ts +4 -0
- package/dist/ui/elements/PinyaAnchorButton/PinyaAnchorButtonProps.d.ts +4 -0
- package/dist/ui/elements/PinyaAnchorButton/PinyaAnchorButtonProps.js +1 -0
- package/dist/ui/elements/PinyaAnchorButton/index.d.ts +2 -0
- package/dist/ui/elements/PinyaAnchorButton/index.js +2 -0
- package/dist/ui/elements/PinyaButton/PinyaButton.svelte +8 -31
- package/dist/ui/elements/PinyaButton/PinyaButton.svelte.d.ts +1 -1
- package/dist/ui/elements/PinyaButton/PinyaButtonProps.d.ts +4 -14
- package/dist/ui/elements/PinyaButton/PinyaButtonProps.js +1 -6
- package/dist/ui/elements/PinyaButtonCommon/ButtonVariant.d.ts +5 -0
- package/dist/ui/elements/PinyaButtonCommon/ButtonVariant.js +6 -0
- package/dist/ui/elements/PinyaButtonCommon/PinyaButtonCommonProps.d.ts +8 -0
- package/dist/ui/elements/PinyaButtonCommon/PinyaButtonCommonProps.js +2 -0
- package/dist/ui/elements/PinyaButtonCommon/createButtonClass.d.ts +2 -0
- package/dist/ui/elements/PinyaButtonCommon/createButtonClass.js +31 -0
- package/dist/ui/elements/PinyaButtonCommon/index.d.ts +3 -0
- package/dist/ui/elements/PinyaButtonCommon/index.js +3 -0
- package/dist/ui/elements/PinyaCard/PinyaCard.svelte +3 -2
- package/dist/ui/elements/PinyaCard/PinyaCardProps.d.ts +1 -0
- package/dist/ui/elements/index.d.ts +4 -3
- package/dist/ui/elements/index.js +6 -3
- package/dist/ui/modules/projects/Hepcat.svelte +1 -1
- package/dist/ui/modules/projects/Pengi.svelte +1 -1
- package/dist/ui/modules/projects/Soulwork.svelte +1 -1
- package/dist/ui/modules/projects/ThisWebpage.svelte +1 -1
- package/dist/ui/templates/PinyaPageLayout/PinyaPageLayout.svelte +2 -2
- package/package.json +1 -1
- package/src/lib/styles/app.css +1 -1
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
import
|
|
2
|
+
import { slide } from "svelte/transition";
|
|
3
3
|
import { onMount } from "svelte";
|
|
4
|
+
|
|
5
|
+
import AresHappy from "../../assets/characters/ares/ares_happy.webp";
|
|
4
6
|
import { DialogState } from "../../types/pineapple_fiber/DialogState";
|
|
5
7
|
import { dialogManager } from "../dialog_manager/DialogManager";
|
|
6
8
|
import PinyaCard from "../../ui/elements/PinyaCard/PinyaCard.svelte";
|
|
@@ -8,8 +10,7 @@
|
|
|
8
10
|
import CloseIcon from "../../assets/icons/close.svg";
|
|
9
11
|
import FABIcon from "../../assets/bg_tiled/bg_tiled_turnip.png";
|
|
10
12
|
import { enableDialogueOverlay } from "../dialog_manager/DialogManagerStore";
|
|
11
|
-
import
|
|
12
|
-
import { slide } from "svelte/transition";
|
|
13
|
+
import PinyaButton from "../../ui/elements/PinyaButton/PinyaButton.svelte";
|
|
13
14
|
|
|
14
15
|
let currentMessage = $state("");
|
|
15
16
|
let currentPortrait = $state(AresHappy);
|
|
@@ -80,13 +81,13 @@
|
|
|
80
81
|
paddingClass=""
|
|
81
82
|
className="dialog-name"
|
|
82
83
|
>
|
|
83
|
-
<div>
|
|
84
|
-
<b class="fake-h1">Turnip</b>
|
|
85
|
-
</div>
|
|
84
|
+
<div class="fake-h1">Turnip</div>
|
|
86
85
|
</PinyaCard>
|
|
87
86
|
<PinyaCard
|
|
88
87
|
widthClass="w-full"
|
|
89
88
|
className="dialog-text"
|
|
89
|
+
colorClass=""
|
|
90
|
+
flexClass=""
|
|
90
91
|
>
|
|
91
92
|
<!-- Made for 140 characters, like the original tweets -->
|
|
92
93
|
{@html currentMessage}
|
|
@@ -96,7 +97,7 @@
|
|
|
96
97
|
|
|
97
98
|
|
|
98
99
|
{#if appState.allowDialog && isMounted}
|
|
99
|
-
<div class="fab-container"
|
|
100
|
+
<div class="fab-container" transition:slide>
|
|
100
101
|
<PinyaButton
|
|
101
102
|
classes="fab"
|
|
102
103
|
onclick={()=>{dialogManager.toggleDialogOverlay();}}
|
|
@@ -113,12 +114,12 @@
|
|
|
113
114
|
<style>
|
|
114
115
|
:global(.dialog-text) {
|
|
115
116
|
height: 100%;
|
|
116
|
-
padding:
|
|
117
|
+
padding: 0.8lh 2rem 0.5lh;
|
|
117
118
|
}
|
|
118
119
|
|
|
119
|
-
:global(.dialog-
|
|
120
|
-
font-size: clamp(
|
|
121
|
-
line-height: 1.
|
|
120
|
+
:global(.dialog-text) {
|
|
121
|
+
font-size: clamp(1rem, 3vw, 1.75rem);
|
|
122
|
+
line-height: calc(clamp(1rem, 3vw, 1.75rem) * 1.5);
|
|
122
123
|
}
|
|
123
124
|
|
|
124
125
|
.dialog-elements {
|
|
@@ -138,16 +139,6 @@
|
|
|
138
139
|
transform: translateY(var(--hidePercentHeight));
|
|
139
140
|
}
|
|
140
141
|
|
|
141
|
-
|
|
142
|
-
.dialog-padding :global(p) {
|
|
143
|
-
font-size: clamp(1em, 5vw, 1.3em) !important;
|
|
144
|
-
line-height: 1.5em !important;
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
.dialog-padding {
|
|
148
|
-
padding: clamp(1.5em, 5vw, 1.75em) clamp(0em, 5vw - 0.5em, 2em) 0;
|
|
149
|
-
}
|
|
150
|
-
|
|
151
142
|
:global(.dialog-name) {
|
|
152
143
|
padding-left: 2rem;
|
|
153
144
|
padding-right: 2rem;
|
|
@@ -189,28 +180,29 @@
|
|
|
189
180
|
transform: scaleX(-1);
|
|
190
181
|
}
|
|
191
182
|
|
|
183
|
+
:global(html) {
|
|
184
|
+
--bg-dialog: rgba(255, 247, 225, 0.9);
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
:global(html.dark) {
|
|
188
|
+
--bg-dialog: rgba(76, 71, 59, 0.9);
|
|
189
|
+
}
|
|
192
190
|
|
|
193
191
|
.dialog-box {
|
|
194
|
-
background-color: var(--
|
|
192
|
+
background-color: var(--bg-dialog);
|
|
195
193
|
position: fixed;
|
|
196
194
|
bottom: 0;
|
|
197
195
|
width: var(--dialog-box-width); /*75em + 4em padding*/
|
|
198
196
|
height: var(--dialog-box-height);
|
|
199
|
-
max-width: calc(100vw - ((var(--fab-margin) *
|
|
197
|
+
max-width: calc(100vw - ((var(--fab-margin) * 3) + (clamp(2rem, 5vw, 4rem))));
|
|
200
198
|
border-radius: 1rem;
|
|
201
199
|
}
|
|
202
200
|
|
|
203
|
-
.dark .dialog-box {
|
|
204
|
-
background-color: rgb(var(--color-surface-900) / 0.95);
|
|
205
|
-
--tw-ring-color: rgb(var(--color-text-400));
|
|
206
|
-
/*background-color: red;*/
|
|
207
|
-
}
|
|
208
|
-
|
|
209
201
|
:global(.fab) {
|
|
210
202
|
/*@apply btn preset-filled-tertiary-500;*/
|
|
211
203
|
background-color: var(--color-tertiary-500);
|
|
212
204
|
padding: 0.3rem;
|
|
213
|
-
width:
|
|
205
|
+
width: clamp(2rem, 5vw, 4rem);
|
|
214
206
|
border-radius: 50%;
|
|
215
207
|
z-index: 100;
|
|
216
208
|
box-shadow: 3px 3px 3px var(--shadow-color);
|
package/dist/styles/app.css
CHANGED
|
@@ -250,7 +250,7 @@ blockquote {
|
|
|
250
250
|
filter: brightness(140%);
|
|
251
251
|
}
|
|
252
252
|
|
|
253
|
-
h1, h2, h3, h4, h5, h6, .fake-h2, .fake-h3, .fake-h4 {
|
|
253
|
+
h1, h2, h3, h4, h5, h6, .fake-h1, .fake-h2, .fake-h3, .fake-h4 {
|
|
254
254
|
text-align: center;
|
|
255
255
|
margin-top: 0;
|
|
256
256
|
font-weight: bolder;
|
|
@@ -265,7 +265,7 @@ h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p, .fake-h2 + p, .fake-h3 + p, .fak
|
|
|
265
265
|
margin-top: 0.5lh;
|
|
266
266
|
}
|
|
267
267
|
|
|
268
|
-
h1 {
|
|
268
|
+
h1, .fake-h1 {
|
|
269
269
|
@apply text-4xl;
|
|
270
270
|
}
|
|
271
271
|
|
|
@@ -289,7 +289,11 @@ h6 {
|
|
|
289
289
|
text-decoration: underline;
|
|
290
290
|
}
|
|
291
291
|
|
|
292
|
-
a {
|
|
292
|
+
a.a-as-btn {
|
|
293
|
+
text-decoration: none;
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
a:not(.a-as-btn) {
|
|
293
297
|
text-decoration: underline;
|
|
294
298
|
color: var(--color-secondary-500);
|
|
295
299
|
|
|
@@ -298,11 +302,16 @@ a {
|
|
|
298
302
|
}
|
|
299
303
|
}
|
|
300
304
|
|
|
301
|
-
a:hover, a:focus {
|
|
305
|
+
a:not(.a-as-btn):hover, a:not(.a-as-btn):focus {
|
|
302
306
|
filter: brightness(150%);
|
|
303
307
|
}
|
|
304
308
|
|
|
305
|
-
a
|
|
309
|
+
/* we're fighting a specificity war with skeleton components */
|
|
310
|
+
a.a-as-btn:hover {
|
|
311
|
+
filter: brightness(110%);
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
a:not(.a-as-btn):visited {
|
|
306
315
|
color: var(--color-secondary-950);
|
|
307
316
|
|
|
308
317
|
@variant dark {
|
|
@@ -310,6 +319,7 @@ a:visited {
|
|
|
310
319
|
}
|
|
311
320
|
}
|
|
312
321
|
|
|
322
|
+
|
|
313
323
|
ul {
|
|
314
324
|
list-style: inside;
|
|
315
325
|
}
|
|
@@ -318,10 +328,10 @@ ol {
|
|
|
318
328
|
list-style: decimal inside;
|
|
319
329
|
}
|
|
320
330
|
|
|
321
|
-
p{
|
|
331
|
+
p {
|
|
322
332
|
@apply mb-3;
|
|
323
333
|
}
|
|
324
334
|
|
|
325
335
|
@theme {
|
|
326
336
|
--color-secondary-0: oklch(99% 0.02 38.38deg);
|
|
327
|
-
}
|
|
337
|
+
}
|
|
@@ -6,8 +6,9 @@
|
|
|
6
6
|
import GithubIcon from "../../assets/icons/github-mark.svg";
|
|
7
7
|
import LinkedinIcon from "../../assets/icons/linkedin.svg";
|
|
8
8
|
import { ItchLogoHotLink } from "../../consts";
|
|
9
|
-
import {
|
|
9
|
+
import { PinyaButton } from "../elements/PinyaButton/index";
|
|
10
10
|
import ImageIcon from "../elements/ImageIcon.svelte";
|
|
11
|
+
import { ButtonVariant } from "../elements/PinyaButtonCommon/ButtonVariant";
|
|
11
12
|
|
|
12
13
|
/** @type {{isSmallVersion?: boolean, email?: string, linkedinSlug?: string, isSlot?: boolean, allowLinkedIn?: boolean}} */
|
|
13
14
|
let {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import type { HTMLImgAttributes } from 'svelte/elements';
|
|
3
|
-
import type { GeneralUIProps } from
|
|
4
|
-
import { ColorScheme } from
|
|
3
|
+
import type { GeneralUIProps } from "./GeneralUIProps";
|
|
4
|
+
import { ColorScheme } from "./ColorScheme";
|
|
5
5
|
|
|
6
6
|
type PinyaButtonProps = HTMLImgAttributes & GeneralUIProps;
|
|
7
7
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { HTMLImgAttributes } from 'svelte/elements';
|
|
2
|
-
import type { GeneralUIProps } from
|
|
2
|
+
import type { GeneralUIProps } from "./GeneralUIProps";
|
|
3
3
|
type PinyaButtonProps = HTMLImgAttributes & GeneralUIProps;
|
|
4
4
|
declare const ImageIcon: import("svelte").Component<PinyaButtonProps, {}, "">;
|
|
5
5
|
type ImageIcon = ReturnType<typeof ImageIcon>;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { ColorScheme } from "../ColorScheme";
|
|
3
|
+
import { ButtonVariant } from "../PinyaButtonCommon/ButtonVariant";
|
|
4
|
+
import { createButtonClass } from "../PinyaButtonCommon/createButtonClass";
|
|
5
|
+
import type { PinyaAnchorButtonProps } from "./PinyaAnchorButtonProps";
|
|
6
|
+
|
|
7
|
+
let {
|
|
8
|
+
children,
|
|
9
|
+
colorScheme = ColorScheme.Primary,
|
|
10
|
+
paddingClass = "",
|
|
11
|
+
buttonVariant = ButtonVariant.Default,
|
|
12
|
+
colorClass = "",
|
|
13
|
+
classes = "",
|
|
14
|
+
...props
|
|
15
|
+
}: PinyaAnchorButtonProps = $props();
|
|
16
|
+
|
|
17
|
+
let tailwindClass = $derived(createButtonClass({ colorScheme, paddingClass, buttonVariant, colorClass, classes }));
|
|
18
|
+
</script>
|
|
19
|
+
|
|
20
|
+
<a
|
|
21
|
+
{...props}
|
|
22
|
+
class={`a-as-btn ${tailwindClass}}`}
|
|
23
|
+
>
|
|
24
|
+
{@render children()}
|
|
25
|
+
</a>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import type { HTMLAnchorAttributes } from "svelte/elements";
|
|
2
|
+
import type { PinyaButtonCommonProps } from "../PinyaButtonCommon/PinyaButtonCommonProps";
|
|
3
|
+
import type { WrapperProps } from "../index";
|
|
4
|
+
export type PinyaAnchorButtonProps = WrapperProps & HTMLAnchorAttributes & PinyaButtonCommonProps;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,48 +1,25 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
import {
|
|
2
|
+
import { type PinyaButtonProps } from "./PinyaButtonProps";
|
|
3
3
|
import { ColorScheme } from "../ColorScheme";
|
|
4
|
+
import { ButtonVariant } from "../PinyaButtonCommon/ButtonVariant";
|
|
5
|
+
import { createButtonClass } from "../PinyaButtonCommon/createButtonClass";
|
|
4
6
|
|
|
5
7
|
let {
|
|
6
8
|
children,
|
|
7
9
|
colorScheme = ColorScheme.Primary,
|
|
8
|
-
paddingClass =
|
|
10
|
+
paddingClass = "",
|
|
9
11
|
buttonVariant = ButtonVariant.Default,
|
|
10
|
-
colorClass =
|
|
11
|
-
classes =
|
|
12
|
+
colorClass = "",
|
|
13
|
+
classes = "",
|
|
12
14
|
...props
|
|
13
15
|
}: PinyaButtonProps = $props();
|
|
14
16
|
|
|
15
|
-
|
|
16
|
-
? paddingClass
|
|
17
|
-
: (
|
|
18
|
-
buttonVariant === ButtonVariant.Image
|
|
19
|
-
? 'pl-3 pr-3 pt-2 pb-2'
|
|
20
|
-
: 'pl-3 pr-3'
|
|
21
|
-
);
|
|
22
|
-
|
|
23
|
-
const chooseTailwindClass = () => {
|
|
24
|
-
switch (colorScheme) {
|
|
25
|
-
case ColorScheme.Custom:
|
|
26
|
-
return colorClass;
|
|
27
|
-
case ColorScheme.Warning:
|
|
28
|
-
return 'bg-warning-700 dark:bg-warning-400 text-secondary-0 dark:text-secondary-950 hover:brightness-110';
|
|
29
|
-
case ColorScheme.Surface:
|
|
30
|
-
return 'bg-surface-700 dark:bg-surface-600 text-surface-50-950 hover:brightness-110';
|
|
31
|
-
default:
|
|
32
|
-
console.error(`Unimplemented color scheme: ${colorScheme.toString()}`);
|
|
33
|
-
// eslint-disable-next-line no-fallthrough
|
|
34
|
-
case ColorScheme.Primary:
|
|
35
|
-
return 'bg-primary-400-600 text-secondary-950 dark:text-secondary-0 hover:brightness-110';
|
|
36
|
-
}
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
const tailwindClass = chooseTailwindClass();
|
|
17
|
+
let tailwindClass = $derived(createButtonClass({ colorScheme, paddingClass, buttonVariant, colorClass, classes }));
|
|
40
18
|
</script>
|
|
41
19
|
|
|
42
20
|
<button
|
|
43
21
|
{...props}
|
|
44
|
-
class
|
|
45
|
-
class={`btn rounded-2xl text-xl font-bold ${tailwindClass} ${paddingClass} ${classes}`}
|
|
22
|
+
class={tailwindClass}
|
|
46
23
|
>
|
|
47
24
|
{@render children()}
|
|
48
25
|
</button>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type PinyaButtonProps } from
|
|
1
|
+
import { type PinyaButtonProps } from "./PinyaButtonProps";
|
|
2
2
|
declare const PinyaButton: import("svelte").Component<PinyaButtonProps, {}, "">;
|
|
3
3
|
type PinyaButton = ReturnType<typeof PinyaButton>;
|
|
4
4
|
export default PinyaButton;
|
|
@@ -1,14 +1,4 @@
|
|
|
1
|
-
import type { HTMLButtonAttributes } from
|
|
2
|
-
import type {
|
|
3
|
-
import type { WrapperProps } from
|
|
4
|
-
export
|
|
5
|
-
Default = 0,
|
|
6
|
-
Image = 1,
|
|
7
|
-
SmallIcon = 2
|
|
8
|
-
}
|
|
9
|
-
export type PinyaButtonProps = WrapperProps & HTMLButtonAttributes & GeneralUIProps & {
|
|
10
|
-
paddingClass?: string;
|
|
11
|
-
buttonVariant?: ButtonVariant;
|
|
12
|
-
colorClass?: string;
|
|
13
|
-
classes?: string;
|
|
14
|
-
};
|
|
1
|
+
import type { HTMLButtonAttributes } from "svelte/elements";
|
|
2
|
+
import type { PinyaButtonCommonProps } from "../PinyaButtonCommon/PinyaButtonCommonProps";
|
|
3
|
+
import type { WrapperProps } from "../index";
|
|
4
|
+
export type PinyaButtonProps = WrapperProps & HTMLButtonAttributes & PinyaButtonCommonProps;
|
|
@@ -1,6 +1 @@
|
|
|
1
|
-
export
|
|
2
|
-
(function (ButtonVariant) {
|
|
3
|
-
ButtonVariant[ButtonVariant["Default"] = 0] = "Default";
|
|
4
|
-
ButtonVariant[ButtonVariant["Image"] = 1] = "Image";
|
|
5
|
-
ButtonVariant[ButtonVariant["SmallIcon"] = 2] = "SmallIcon";
|
|
6
|
-
})(ButtonVariant || (ButtonVariant = {}));
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export var ButtonVariant;
|
|
2
|
+
(function (ButtonVariant) {
|
|
3
|
+
ButtonVariant[ButtonVariant["Default"] = 0] = "Default";
|
|
4
|
+
ButtonVariant[ButtonVariant["Image"] = 1] = "Image";
|
|
5
|
+
ButtonVariant[ButtonVariant["SmallIcon"] = 2] = "SmallIcon";
|
|
6
|
+
})(ButtonVariant || (ButtonVariant = {}));
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { ColorScheme } from "../ColorScheme";
|
|
2
|
+
import { ButtonVariant } from "./ButtonVariant";
|
|
3
|
+
export const createButtonClass = (props) => {
|
|
4
|
+
let { colorScheme, paddingClass, buttonVariant, colorClass, classes } = props;
|
|
5
|
+
colorScheme ??= ColorScheme.Primary;
|
|
6
|
+
buttonVariant ??= ButtonVariant.Default;
|
|
7
|
+
paddingClass ??= buttonVariant === ButtonVariant.Image
|
|
8
|
+
? "pl-3 pr-3 pt-2 pb-2"
|
|
9
|
+
: "pl-3 pr-3";
|
|
10
|
+
colorClass ??= "";
|
|
11
|
+
classes ??= "";
|
|
12
|
+
const chooseTailwindClass = () => {
|
|
13
|
+
switch (colorScheme) {
|
|
14
|
+
case ColorScheme.Custom:
|
|
15
|
+
return colorClass;
|
|
16
|
+
case ColorScheme.Warning:
|
|
17
|
+
return "bg-warning-700 dark:bg-warning-400 text-secondary-0 dark:text-secondary-950 hover:brightness-110";
|
|
18
|
+
case ColorScheme.Surface:
|
|
19
|
+
return "bg-surface-700 dark:bg-surface-600 text-surface-50-950 hover:brightness-110";
|
|
20
|
+
default:
|
|
21
|
+
console.error(`Unimplemented color scheme: ${colorScheme.toString()}`);
|
|
22
|
+
// eslint-disable-next-line no-fallthrough
|
|
23
|
+
case ColorScheme.Primary:
|
|
24
|
+
return "bg-primary-400-600 text-secondary-950 dark:text-secondary-0 hover:brightness-110";
|
|
25
|
+
}
|
|
26
|
+
};
|
|
27
|
+
const tailwindClass = chooseTailwindClass();
|
|
28
|
+
return `btn rounded-2xl text-xl font-bold
|
|
29
|
+
${buttonVariant === ButtonVariant.SmallIcon ? 'small-icon-button' : ''}
|
|
30
|
+
${tailwindClass} ${paddingClass} ${classes}`;
|
|
31
|
+
};
|
|
@@ -8,14 +8,15 @@ let {
|
|
|
8
8
|
flexClass = "flex flex-col",
|
|
9
9
|
widthClass = "w-full max-w-md",
|
|
10
10
|
borderClass = "border-[2px] border-primary-500 dark:border-0",
|
|
11
|
+
colorClass = "bg-surface-200 dark:bg-surface-900",
|
|
11
12
|
marginClass = "",
|
|
12
13
|
className,
|
|
13
14
|
includeDataNoSnippet = false,
|
|
14
15
|
children
|
|
15
16
|
}: PinyaCardProps = $props();
|
|
16
17
|
|
|
17
|
-
let cardClass = $derived(`card
|
|
18
|
-
${paddingClass} ${flexClass} ${className} ${widthClass} ${borderClass} ${marginClass}`);
|
|
18
|
+
let cardClass = $derived(`card text-start rounded-xl
|
|
19
|
+
${paddingClass} ${flexClass} ${className} ${widthClass} ${borderClass} ${marginClass} ${colorClass}`);
|
|
19
20
|
</script>
|
|
20
21
|
|
|
21
22
|
{#if includeDataNoSnippet}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
export { default as ImageIcon } from "./ImageIcon.svelte";
|
|
2
|
-
export { default as TextLink } from "./TextLink.svelte";
|
|
3
|
-
export { default as ElementVisibilityDetector } from "./ElementVisibilityDetector.svelte";
|
|
4
1
|
export * from "./ColorScheme";
|
|
5
2
|
export * from "./GeneralUIProps";
|
|
6
3
|
export * from "./OnBackground";
|
|
4
|
+
export * from "./PinyaButtonCommon";
|
|
5
|
+
export { default as ImageIcon } from "./ImageIcon.svelte";
|
|
6
|
+
export { default as TextLink } from "./TextLink.svelte";
|
|
7
|
+
export { default as ElementVisibilityDetector } from "./ElementVisibilityDetector.svelte";
|
|
7
8
|
export * from "./PinyaCard/index";
|
|
8
9
|
export * from "./WrapperProps";
|
|
9
10
|
export * from "./PinyaButton/index";
|
|
@@ -1,9 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
export { default as TextLink } from "./TextLink.svelte";
|
|
3
|
-
export { default as ElementVisibilityDetector } from "./ElementVisibilityDetector.svelte";
|
|
1
|
+
// types
|
|
4
2
|
export * from "./ColorScheme";
|
|
5
3
|
export * from "./GeneralUIProps";
|
|
6
4
|
export * from "./OnBackground";
|
|
5
|
+
export * from "./PinyaButtonCommon";
|
|
6
|
+
// components
|
|
7
|
+
export { default as ImageIcon } from "./ImageIcon.svelte";
|
|
8
|
+
export { default as TextLink } from "./TextLink.svelte";
|
|
9
|
+
export { default as ElementVisibilityDetector } from "./ElementVisibilityDetector.svelte";
|
|
7
10
|
export * from "./PinyaCard/index";
|
|
8
11
|
export * from "./WrapperProps";
|
|
9
12
|
export * from "./PinyaButton/index";
|
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
import { default as FourPartCard } from "../../components/FourPartCard.svelte";
|
|
6
6
|
import { default as ImageIcon } from "../../elements/ImageIcon.svelte";
|
|
7
7
|
import { default as PinyaButton } from "../../elements/PinyaButton/PinyaButton.svelte";
|
|
8
|
-
import { ButtonVariant } from "../../elements/PinyaButton/PinyaButtonProps";
|
|
9
8
|
import { ItchLogoHotLink } from "../../../consts";
|
|
9
|
+
import { ButtonVariant } from "../../elements/PinyaButtonCommon/ButtonVariant";
|
|
10
10
|
|
|
11
11
|
const key = "Hepcat";
|
|
12
12
|
export { component, key };
|
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
import { default as FourPartCard } from "../../components/FourPartCard.svelte";
|
|
6
6
|
import { default as ImageIcon } from "../../elements/ImageIcon.svelte";
|
|
7
7
|
import { default as PinyaButton } from "../../elements/PinyaButton/PinyaButton.svelte";
|
|
8
|
-
import { ButtonVariant } from "../../elements/PinyaButton/PinyaButtonProps";
|
|
9
8
|
import { ItchLogoHotLink } from "../../../consts";
|
|
9
|
+
import { ButtonVariant } from "../../elements/PinyaButtonCommon/ButtonVariant";
|
|
10
10
|
|
|
11
11
|
const key = "Pengi";
|
|
12
12
|
export { component, key };
|
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
import { default as FourPartCard } from "../../components/FourPartCard.svelte";
|
|
6
6
|
import { default as ImageIcon } from "../../elements/ImageIcon.svelte";
|
|
7
7
|
import { default as PinyaButton } from "../../elements/PinyaButton/PinyaButton.svelte";
|
|
8
|
-
import { ButtonVariant } from "../../elements/PinyaButton/PinyaButtonProps";
|
|
9
8
|
import { ItchLogoHotLink } from "../../../consts";
|
|
9
|
+
import { ButtonVariant } from "../../elements/PinyaButtonCommon/ButtonVariant";
|
|
10
10
|
|
|
11
11
|
const key = "Soulwork";
|
|
12
12
|
export { component, key };
|
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
import { default as FourPartCard } from "../../components/FourPartCard.svelte";
|
|
6
6
|
import { default as ImageIcon } from "../../elements/ImageIcon.svelte";
|
|
7
7
|
import { default as PinyaButton } from "../../elements/PinyaButton/PinyaButton.svelte";
|
|
8
|
-
import { ButtonVariant } from "../../elements/PinyaButton/PinyaButtonProps";
|
|
9
8
|
import { default as TextChip } from "../../elements/text-chip/TextChip.svelte";
|
|
9
|
+
import { ButtonVariant } from "../../elements/PinyaButtonCommon/ButtonVariant";
|
|
10
10
|
|
|
11
11
|
const key = "This Webpage";
|
|
12
12
|
export { component, key };
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import type { Snippet } from "svelte";
|
|
3
|
+
import { modals } from "svelte-modals";
|
|
3
4
|
import { m } from "../../../paraglide/messages";
|
|
5
|
+
import { localizeHref } from "../../../paraglide/runtime";
|
|
4
6
|
|
|
5
7
|
import AresLogo from "../../../assets/characters/ares/ares_logo.webp";
|
|
6
8
|
import SettingsLogo from "../../../assets/icons/icon-settings.svg";
|
|
7
9
|
import RandomizedBackground from "../../components/randomized-background/RandomizedBackground.svelte";
|
|
8
|
-
import { modals } from "svelte-modals";
|
|
9
10
|
import GeneralSettingsModal from "../../modules/modals/general-settings/GeneralSettingsModal.svelte";
|
|
10
|
-
import { localizeHref } from "../../../paraglide/runtime";
|
|
11
11
|
import { appState } from "./runes.svelte";
|
|
12
12
|
import { enableBackground } from "../../../store";
|
|
13
13
|
import DialogOverlay from "../../../components/dialog_overlay/DialogOverlay.svelte";
|
package/package.json
CHANGED