refactor(header): extract nav link component, add search widget stub, recolor header #4

Merged

ckie merged 6 commits from jakehamilton/floral.systems:refactor/header into main 2024-10-24 22:31:39 +00:00

Conversation 1 Commits 6 Files changed 7 +36 -22

jakehamilton commented 2024-10-24 21:36:18 +00:00

Member

Copy link

I've reworked the header a little bit and in doing so extracted the link element to be its own component for reuse (while still letting certain instances override styles).

Before

After

In moving things I've gone ahead and created src/lib/components to drop arbitrary component files in. It seemed odd for me to put these in routes since they weren't really routes. If there is a better place for them, please let me know! The Nav component has also been migrated to src/lib/components.

The new header design has a couple of interactions, here they are from left-to-right:

Hovering "floral.systems"

Hovering "Search..."

Focusing "Search..."

Hovering "Docs"

Hovering "Try FleurixOS"

I've reworked the header a little bit and in doing so extracted the link element to be its own component for reuse (while still letting certain instances override styles). <details> <summary>Before</summary>  </details> <details> <summary>After</summary>  </details> In moving things I've gone ahead and created `src/lib/components` to drop arbitrary component files in. It seemed odd for me to put these in routes since they weren't really routes. If there is a better place for them, please let me know! The `Nav` component has also been migrated to `src/lib/components`. The new header design has a couple of interactions, here they are from left-to-right: <details> <summary>Hovering "floral.systems"</summary>  </details> <details> <summary>Hovering "Search..."</summary>  </details> <details> <summary>Focusing "Search..."</summary>  </details> <details> <summary>Hovering "Docs"</summary>  </details> <details> <summary>Hovering "Try FleurixOS"</summary>  </details>

image.png

54 KiB

image.png

54 KiB

image.png

54 KiB

image.png

54 KiB

image.png

54 KiB

image.png

54 KiB

image.png

54 KiB

jakehamilton added 3 commits 2024-10-24 21:36:22 +00:00

feat: add logo assets ffca8f93d9

refactor(logo): use solid colors, simplify design 6a870c8a9f

refactor(header): extract nav link component, add search widget stub, recolor header 8af65a6c30

jakehamilton added 1 commit 2024-10-24 21:40:26 +00:00

refactor(search): darken colors a4f5f5fdea

jakehamilton force-pushed refactor/header from a4f5f5fdea to 86eecefea4 2024-10-24 21:42:52 +00:00 Compare

jakehamilton commented 2024-10-24 21:46:37 +00:00

Author

Member

Copy link

I've darkened some of the search colors

I've darkened some of the search colors 

image.png

54 KiB

ckie added 2 commits 2024-10-24 22:07:12 +00:00

fix(Nav): make special link semibold 1eddddd7d1

refactor(Search): constrain max width 4b25036169

ckie added 1 commit 2024-10-24 22:11:50 +00:00

fix(layout): use same color-set for unhovered state 285237cf7a

ckie added 2 commits 2024-10-24 22:30:36 +00:00

refactor(layout): adjust title text colors, introduce new colors.coral.970 7619e48d75

chore(Footer): move to $lib/components d3ba4573c9

ckie merged commit d3ba4573c9 into main 2024-10-24 22:31:39 +00:00

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels

No items

No labels

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

2 participants

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: the-distro/floral.systems#4

No description provided.