the-distro/floral.systems
1
1
Fork 1
Code Issues Pull requests 2 Packages Projects Releases Wiki Activity

feat(root page): break out hero links into chips, add accent colors on hover #6

Merged
ckie merged 2 commits from jakehamilton/feat/hero-links into main 2024-10-26 22:32:29 +00:00
Conversation 0 Commits 2 Files changed 5 +147 -20
5 changed files with 147 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
src/lib/assets/leaf.svg Normal file
View file

@ -0,0 +1,57 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="512"
height="512"
viewBox="0 0 135.46666 135.46667"
version="1.1"
id="svg1"
xml:space="preserve"
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
sodipodi:docname="leaf.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
id="namedview1"
pagecolor="#505050"
bordercolor="#eeeeee"
borderopacity="1"
inkscape:showpageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
inkscape:zoom="1.4450552"
inkscape:cx="177.15586"
inkscape:cy="260.54367"
inkscape:window-width="1831"
inkscape:window-height="1238"
inkscape:window-x="30"
inkscape:window-y="26"
inkscape:window-maximized="0"
inkscape:current-layer="svg1" /><defs
id="defs1" /><g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"><g
inkscape:label="Layer 1"
id="layer1-9"
transform="translate(0.39145833,-0.50256824)" /><g
id="layer4"
inkscape:label="stamen_base"
transform="translate(0.39145833,-0.50256824)" /><g
id="layer3"
inkscape:label="stamen"
transform="translate(48.408293,-0.36524651)" /></g><g
id="g2"
transform="translate(0,4.9535631)"><path
style="fill:#49be95;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 5.9447564,86.621179 c 0,0 28.4566516,-26.328381 41.6259236,-33.834967 C 63.137118,43.913224 74.262563,38.776995 129.98604,35.60375 120.5338,64.353283 120.9163,85.225333 87.438519,94.896362 37.828146,109.22776 5.9447564,86.621179 5.9447564,86.621179 Z"
id="path1"
sodipodi:nodetypes="cscsc" /><path
style="fill:#27a27b;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 5.9447564,86.62118 C 85.116628,78.856181 85.974262,63.282749 129.98604,35.603751 c 0,0 -40.446902,-2.684616 -74.20599,12.768723 C 33.239912,58.6903 5.9447564,86.62118 5.9447564,86.62118 Z"
id="path2"
sodipodi:nodetypes="ccsc" /></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 2.4 KiB

57
src/lib/assets/petal.svg Normal file
View file

@ -0,0 +1,57 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="512"
height="512"
viewBox="0 0 135.46666 135.46667"
version="1.1"
id="svg1"
xml:space="preserve"
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
sodipodi:docname="petal.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
id="namedview1"
pagecolor="#505050"
bordercolor="#eeeeee"
borderopacity="1"
inkscape:showpageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
inkscape:zoom="0.72252765"
inkscape:cx="231.82504"
inkscape:cy="226.28892"
inkscape:window-width="1482"
inkscape:window-height="988"
inkscape:window-x="30"
inkscape:window-y="26"
inkscape:window-maximized="0"
inkscape:current-layer="svg1" /><defs
id="defs1" /><g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"><g
inkscape:label="Layer 1"
id="layer1-9"
transform="translate(0.39145833,-0.50256824)" /><g
id="layer4"
inkscape:label="stamen_base"
transform="translate(0.39145833,-0.50256824)" /><g
id="layer3"
inkscape:label="stamen"
transform="translate(48.408293,-0.36524651)" /></g><g
id="g1"
transform="matrix(0.83206019,0.33412272,-0.33412272,0.83206019,38.961186,-9.777432)"><path
style="display:inline;opacity:1;fill:#ff6665;fill-opacity:1;stroke:none;stroke-width:1.70806px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 19.039792,124.95005 C 97.553068,126.5082 118.40125,97.230897 124.44237,72.62228 125.89647,66.698993 127.46153,60.966004 124.839,53.988905 120.13159,41.465054 110.15502,32.834282 106.92754,30.242053 103.89655,28.03009 99.255779,32.060252 96.459255,30.41665 94.206806,29.092826 93.317901,17.661166 89.384863,15.814783 71.972911,6.0185455 56.038876,10.210319 38.471929,23.876745 13.475765,43.322827 9.3107292,82.426994 19.039792,124.95005 Z"
id="path1-30"
sodipodi:nodetypes="csscscsc" /><path
style="fill:#ff9e9d;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 19.039792,124.95005 c 0,0 109.231808,-27.438225 87.887748,-94.707998 0,0 19.4742,15.213687 19.31236,32.206385 C 120.28436,135.20955 19.039792,124.95005 19.039792,124.95005 Z"
id="path1"
sodipodi:nodetypes="cccc" /></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 2.7 KiB

8
src/lib/components/FlowerDivider.svelte
View file

@ -3,11 +3,15 @@
</script> </script>
<div class="flex w-full justify-center gap-x-12"> <div class="flex w-full justify-center gap-x-12">
{#snippet flower()} {#snippet flower(alt)}
{#if alt}
<enhanced:img src="$lib/assets/flower-gray.svg" width="24" height="24" alt="flower" /> <enhanced:img src="$lib/assets/flower-gray.svg" width="24" height="24" alt="flower" />
{:else}
<enhanced:img src="$lib/assets/flower.svg" width="24" height="24" alt="flower" />
{/if}
{/snippet} {/snippet}
{#each range(1, 5) as i} {#each range(1, 5) as i}
{@render flower()} {@render flower(i % 2 == 0)}
{/each} {/each}
</div> </div>

9
src/lib/components/LinkChip.svelte Normal file
View file

@ -0,0 +1,9 @@
<script lang="ts">
import clsx from "clsx";
let props = $props();
</script>
<a {...props} class={clsx(props.class, "no-link-style flex gap-x-2 px-2 pr-4 py-1 rounded-full border-2 border-zinc-200 w-fit transform translate-y-0 transition-all hover:translate-y-[-2px] active:translate-y-[2px] active:bg-zinc-100")}>
{@render props.children?.()}
</a>

34
src/routes/+page.svelte
View file

@ -1,5 +1,6 @@
<script> <script>
import Highlight from "$lib/Highlight.svelte"; import Highlight from "$lib/Highlight.svelte";
import LinkChip from "$lib/components/LinkChip.svelte";
import FlowerDivider from "$lib/components/FlowerDivider.svelte"; import FlowerDivider from "$lib/components/FlowerDivider.svelte";
import nix from "svelte-highlight/languages/nix"; import nix from "svelte-highlight/languages/nix";
@ -16,31 +17,30 @@
full end-to-end&nbsp;customizability of <b class="text-teal-500">67,589</b> packages. full end-to-end&nbsp;customizability of <b class="text-teal-500">67,589</b> packages.
</p> </p>
<div class="flex pt-4 gap-x-2"> <div class="flex pt-4 gap-x-2">
<a <LinkChip
href="https://petalpkgs.org" href="https://fleurixos.org"
target="_blank" target="_blank"
class="no-link-style flex gap-x-2 px-2 pr-4 py-1 rounded-full border-2 border-zinc-100 w-fit transform translate-y-0 transition-all hover:translate-y-[-2px] active:translate-y-[2px] active:bg-zinc-100" class="hover:border-teal-200"
> >
<enhanced:img src="$lib/assets/flower.svg" width="24" height="24" /> <enhanced:img src="$lib/assets/leaf.svg" width="24" height="24" />
<span>Petalpkgs</span>
</a>
<a
href="https://petalpkgs.org"
target="_blank"
class="no-link-style flex gap-x-2 px-2 pr-4 py-1 rounded-full border-2 border-zinc-100 w-fit transform translate-y-0 transition-all hover:translate-y-[-2px] active:translate-y-[2px] active:bg-zinc-100"
>
<enhanced:img src="$lib/assets/flower-gray.svg" width="24" height="24" />
<span>FleurixOS</span> <span>FleurixOS</span>
</a> </LinkChip>
<a <LinkChip
href="https://petalpkgs.org" href="https://petalpkgs.org"
target="_blank" target="_blank"
class="no-link-style flex gap-x-2 px-2 pr-4 py-1 rounded-full border-2 border-zinc-100 w-fit transform translate-y-0 transition-all hover:translate-y-[-2px] active:translate-y-[2px] active:bg-zinc-100" class="hover:border-coral-200"
>
<enhanced:img src="$lib/assets/petal.svg" width="24" height="24" />
<span>Petalpkgs</span>
</LinkChip>
<LinkChip
href="https://lix.systems"
target="_blank"
class="hover:border-[#df92c0]"
> >
<!-- TODO: Swap to enhanced:img when we have a Lix logo to place here. -->
<enhanced:img src="$lib/assets/lix.svg" width="12" height="24" /> <enhanced:img src="$lib/assets/lix.svg" width="12" height="24" />
<span>Lix</span> <span>Lix</span>
</a> </LinkChip>
</div> </div>
</div> </div>