Skip to content

Commit

Permalink
cleanup: hovering the navigation island will make it slightly bigger …
Browse files Browse the repository at this point in the history
…& more

- Hovering the navigation title will make it turn into the color accent rather then adding an underline

Docs:

- New theme for code blocks
  • Loading branch information
GabsEdits committed Aug 8, 2024
1 parent 7c22aaf commit b6a6370
Show file tree
Hide file tree
Showing 5 changed files with 32 additions and 8 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,10 @@

## Cleanup(s)

- Hovering the navigation island will make it slightly bigger

- Hovering the navigation title will make it turn into the color accent rather then adding an underline

- Add a ordering note for all lists (articles & plugins)

- Remove margin from the last paragraph
Expand Down
4 changes: 2 additions & 2 deletions docs/.vitepress/config.mts
Original file line number Diff line number Diff line change
Expand Up @@ -74,8 +74,8 @@ export default defineConfig({
infoLabel: "Info",
},
theme: {
light: "light-plus",
dark: "vitesse-dark",
light: "everforest-light",
dark: "everforest-dark",
},

config: (md) => {
Expand Down
8 changes: 4 additions & 4 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

17 changes: 15 additions & 2 deletions src/components/Navigation.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,10 @@
<nav>
<ul>
<li id="title">
<a href="/" @click="setActive('/')">
<a
href="/"
@click="setActive('/')"
>
{{ theme.nav.title || site.title }}
</a>
</li>
Expand Down Expand Up @@ -93,6 +96,11 @@ header {
padding: 0.0625rem 1.5625rem;
max-width: 90%;
text-align: center;
transition: background-color 0.4s ease;
&:hover {
background-color: var(--color-header-hover);
}
ul {
display: flex;
Expand Down Expand Up @@ -121,7 +129,7 @@ header {
letter-spacing: -0.0325rem;
&:hover {
text-decoration: underline 0.075rem solid var(--color-accent);
color: var(--color-accent);
}
&:active {
Expand All @@ -139,6 +147,10 @@ header {
height: 100%;
content: "";
}
.active {
color: var(--color-accent) !important;
}
}
a {
Expand Down Expand Up @@ -183,6 +195,7 @@ const { site, theme } = useData();
const currentPath = ref("/");
const isActive = (route: string) => currentPath.value === route;
const setActive = (route: string) => {
currentPath.value = route;
};
Expand Down
7 changes: 7 additions & 0 deletions src/styles/_color.scss
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,11 @@ $nav-bg-l: color.scale(
$saturation: -30%
) !default;
$nav-bg-d: color.scale($bg-color-s-d, $alpha: -20%, $lightness: -40%) !default;
$nav-bg-l: color.scale($bg-color-s-l, $alpha: -20%, $lightness: 40%, $saturation: -30%) !default;
$nav-bg-d: color.scale($bg-color-s-d, $alpha: -20%, $lightness: -38%) !default;

$nav-bg-l-hover: color.scale($bg-color-l, $alpha: -20%) !default;
$nav-bg-d-hover: color.scale($bg-color-d, $alpha: -20%) !default;

$text-color-secondary-l: color.scale(
$bg-color-l,
Expand All @@ -63,6 +68,7 @@ $text-color-secondary-d: color.scale(
--color-background-mute: #{$bg-color-m-l};
--color-background-code: #{$bg-color-code-l};
--color-header: #{$nav-bg-l};
--color-header-hover: #{$nav-bg-l-hover};
--color-text: #{color.scale($bg-color-l, $lightness: -90%)};

@media (prefers-color-scheme: dark) {
Expand All @@ -72,6 +78,7 @@ $text-color-secondary-d: color.scale(
--color-background-mute: #{$bg-color-m-d};
--color-background-code: #{$bg-color-code-d};
--color-header: #{$nav-bg-d};
--color-header-hover: #{$nav-bg-d-hover};
--color-text: #{color.scale($bg-color-l, $lightness: 85%)};
--color-text-secondary: #{$text-color-secondary-d};
}
Expand Down

0 comments on commit b6a6370

Please sign in to comment.