diff --git a/.changeset/fair-ads-beg.md b/.changeset/fair-ads-beg.md new file mode 100644 index 000000000..077a07823 --- /dev/null +++ b/.changeset/fair-ads-beg.md @@ -0,0 +1,5 @@ +--- +"@ryanatkn/fuz": patch +--- + +improve package components diff --git a/.changeset/rich-pumpkins-arrive.md b/.changeset/rich-pumpkins-arrive.md new file mode 100644 index 000000000..0d1ad120f --- /dev/null +++ b/.changeset/rich-pumpkins-arrive.md @@ -0,0 +1,5 @@ +--- +"@ryanatkn/fuz": patch +--- + +add `icon_size_xl3` diff --git a/src/lib/Package_Detail.svelte b/src/lib/Package_Detail.svelte index 8eac36189..1bc3394db 100644 --- a/src/lib/Package_Detail.svelte +++ b/src/lib/Package_Detail.svelte @@ -65,92 +65,110 @@
-
- {#if repo_name} - {@render repo_name(pkg.repo_name)} - {:else} -
- {pkg.repo_name}{#if package_json.icon}{' '}{package_json.icon}{/if} -
- {/if} -
- {#if children}{@render children(pkg)}{/if} - {#if package_json.description} - {#if description} - {@render description(package_json.description)} - {:else} -
{package_json.description}
- {/if} - {/if} - {#if pkg.npm_url} - {#if npm_url} - {@render npm_url(pkg.npm_url)} - {:else} -
npm i -D {package_json.name}
- {/if} - {/if} -
- {#if pkg.homepage_url} - {#if homepage_url} - {@render homepage_url(pkg.homepage_url)} - {:else} - homepage - - {/if} - {/if} - {#if pkg.repo_url} - repo - - {/if} - {#if pkg.npm_url} - npm - - {/if} - {#if pkg.changelog_url} - version - - {/if} - {#if license_url} - license - - {/if} - {#if pkg.homepage_url} - data -
- package.json - src.json +
+
+ +
+
+ {#if repo_name} + {@render repo_name(pkg.repo_name)} + {:else} +
+ {pkg.repo_name}{#if package_json.icon}{' '}{package_json.icon}{/if} +
+ {/if} +
+ {#if children}{@render children(pkg)}{/if} + {#if package_json.description} + {#if description} + {@render description(package_json.description)} + {:else} +
{package_json.description}
+ {/if} + {/if} + {#if pkg.npm_url} + {#if npm_url} + {@render npm_url(pkg.npm_url)} + {:else} +
npm i -D {package_json.name}
+ {/if} + {/if} + +
+ {#if pkg.homepage_url} + {#if homepage_url} + {@render homepage_url(pkg.homepage_url)} + {:else} + homepage + + {/if} + {/if} + {#if pkg.repo_url} + repo + + {/if} + {#if pkg.npm_url} + npm + + {/if} + {#if pkg.changelog_url} + version + + {/if} + {#if license_url} + license + + {/if} + {#if pkg.homepage_url} + data + + {/if} +
- {/if} -
+
+ + {#if modules && pkg.repo_url}
@@ -204,9 +222,22 @@ width: 100%; max-width: var(--max_width, var(--width_md)); } + + .info { + width: 100%; + display: flex; + flex-wrap: wrap; + } + + .logo { + flex-shrink: 0; + padding: 0 var(--space_xl); + } + header { margin-bottom: var(--space_lg); } + section { width: 100%; margin-bottom: var(--space_lg); diff --git a/src/lib/Package_Summary.svelte b/src/lib/Package_Summary.svelte index 4605e49f0..8562b9bfe 100644 --- a/src/lib/Package_Summary.svelte +++ b/src/lib/Package_Summary.svelte @@ -31,7 +31,7 @@ style:width="var(--size, var(--icon_size_xl2))" style:height="var(--size, var(--icon_size_xl2))" src="{pkg.homepage_url}/favicon.png" - alt="favicon for {pkg.repo_name}" + alt="logo for {pkg.repo_name}" /> {#if package_json.description} diff --git a/src/lib/Spiders.svelte b/src/lib/Spiders.svelte index ee7855236..0734c7ed7 100644 --- a/src/lib/Spiders.svelte +++ b/src/lib/Spiders.svelte @@ -35,13 +35,14 @@ }: Props = $props(); const shuffled = $derived(shuffle(spiders.slice(), (min, max) => random_int(min, max, random))); + const rotations = $derived(shuffled.map(() => random_int(0, 359, random)));
- {#each shuffled as color (color)} -
+ {#each shuffled as color, i (color)} +
{/each} @@ -51,6 +52,7 @@ .spiders { position: relative; z-index: -1; + overflow: hidden; margin-top: var(--space_xl9); display: grid; grid-template-columns: repeat(7, 1fr); diff --git a/src/lib/style.css b/src/lib/style.css index c8e92c48e..9b49b6cec 100644 --- a/src/lib/style.css +++ b/src/lib/style.css @@ -1085,6 +1085,9 @@ text .icon_size_xl2 { font-size: var(--icon_size_xl2); } +.icon_size_xl3 { + font-size: var(--icon_size_xl3); +} .text_align_center { text-align: center; diff --git a/src/lib/style_utilities.css b/src/lib/style_utilities.css index 93e550476..d19b282f4 100644 --- a/src/lib/style_utilities.css +++ b/src/lib/style_utilities.css @@ -239,6 +239,9 @@ text .icon_size_xl2 { font-size: var(--icon_size_xl2); } +.icon_size_xl3 { + font-size: var(--icon_size_xl3); +} .text_align_center { text-align: center; diff --git a/src/lib/theme.css b/src/lib/theme.css index a2975d7c1..13fb7f5f3 100644 --- a/src/lib/theme.css +++ b/src/lib/theme.css @@ -228,6 +228,7 @@ --icon_size_lg: 80px; --icon_size_xl: 128px; --icon_size_xl2: 192px; + --icon_size_xl3: 256px; --duration_1: 0.08s; --duration_2: 0.2s; --duration_3: 0.5s; diff --git a/src/lib/variables.ts b/src/lib/variables.ts index 42b64c0c5..b3652058e 100644 --- a/src/lib/variables.ts +++ b/src/lib/variables.ts @@ -648,6 +648,7 @@ export const icon_size_md: Style_Variable = {name: 'icon_size_md', light: '48px' export const icon_size_lg: Style_Variable = {name: 'icon_size_lg', light: '80px'}; export const icon_size_xl: Style_Variable = {name: 'icon_size_xl', light: '128px'}; export const icon_size_xl2: Style_Variable = {name: 'icon_size_xl2', light: '192px'}; +export const icon_size_xl3: Style_Variable = {name: 'icon_size_xl3', light: '256px'}; /* durations */ // TODO maybe change the scale from xs-xl, and add an xs here around 0.04s or 0.03s @@ -931,6 +932,7 @@ export const default_variables: Style_Variable[] = [ icon_size_lg, icon_size_xl, icon_size_xl2, + icon_size_xl3, /* durations */ duration_1, diff --git a/src/routes/package.ts b/src/routes/package.ts index 673f0b1fa..e8d212ead 100644 --- a/src/routes/package.ts +++ b/src/routes/package.ts @@ -701,6 +701,7 @@ export const src_json = { {name: 'icon_size_lg', kind: 'variable'}, {name: 'icon_size_xl', kind: 'variable'}, {name: 'icon_size_xl2', kind: 'variable'}, + {name: 'icon_size_xl3', kind: 'variable'}, {name: 'duration_1', kind: 'variable'}, {name: 'duration_2', kind: 'variable'}, {name: 'duration_3', kind: 'variable'},