hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use separator `div instead of ::after on the home button

Browse Source
This commit is contained in:
daudix
2024-09-11 21:21:13 +03:00
parent c035e69830
commit 4d278ca078
3 changed files with 34 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -53,6 +53,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Use more fitting cursors in some contexts. - Use more fitting cursors in some contexts.
- Use PNG instead of GIF for comments QR code to reduce download size. - Use PNG instead of GIF for comments QR code to reduce download size.
- Use relative colors for `-bg` color variants. - Use relative colors for `-bg` color variants.
- Use separator `div` instead of `::after` on the home button.
### Removed ### Removed

81
sass/_nav.scss
View File

@ -99,72 +99,55 @@
} }
} }
#home { #home a {
position: relative; color: var(--fg-muted-5);
margin-inline-end: 0.625rem; font-weight: 800;
&::after { &:hover {
position: absolute; color: var(--fg-color);
top: -0.125rem;
right: -0.5rem;
background-color: var(--fg-muted-2);
width: max(1px, 0.0625em);
height: calc(100% + 0.25rem);
content: "";
:root[dir*="rtl"] & { .icon {
right: unset; background-color: var(--fg-color);
left: -0.5rem;
}
@media only screen and (max-width: 480px) {
display: none;
} }
} }
a { &.active {
color: var(--fg-muted-5); color: var(--primary-color);
font-weight: 800;
&:hover { &:hover {
color: var(--fg-color); color: var(--contrast-color);
.icon { .icon {
background-color: var(--fg-color); background-color: var(--contrast-color);
}
}
&.active {
color: var(--primary-color);
&:hover {
color: var(--contrast-color);
.icon {
background-color: var(--contrast-color);
}
}
.icon {
background-color: var(--primary-color);
} }
} }
.icon { .icon {
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 .361a2.2 2.2 0 0 0-1.41.51L2.129 4.59A3.14 3.14 0 0 0 1 7v6c0 1.66 1.34 3 3 3h8c1.66 0 3-1.34 3-3V7c0-.93-.414-1.813-1.129-2.41L9.411.87A2.2 2.2 0 0 0 8 .361m0 2.002a.2.2 0 0 1 .129.047l4.46 3.719c.263.215.411.535.411.871v6c0 .547-.453 1-1 1h-2V9c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v5H4c-.547 0-1-.453-1-1V7c0-.336.148-.656.41-.871L7.871 2.41A.2.2 0 0 1 8 2.363'/%3E%3C/svg%3E"); background-color: var(--primary-color);
-webkit-mask-image: var(--icon);
vertical-align: -0.125em;
mask-image: var(--icon);
transition: var(--transition);
margin-inline-end: 0.25rem;
background-color: var(--fg-muted-5);
width: 1rem;
height: 1rem;
} }
} }
.icon {
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 .361a2.2 2.2 0 0 0-1.41.51L2.129 4.59A3.14 3.14 0 0 0 1 7v6c0 1.66 1.34 3 3 3h8c1.66 0 3-1.34 3-3V7c0-.93-.414-1.813-1.129-2.41L9.411.87A2.2 2.2 0 0 0 8 .361m0 2.002a.2.2 0 0 1 .129.047l4.46 3.719c.263.215.411.535.411.871v6c0 .547-.453 1-1 1h-2V9c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v5H4c-.547 0-1-.453-1-1V7c0-.336.148-.656.41-.871L7.871 2.41A.2.2 0 0 1 8 2.363'/%3E%3C/svg%3E");
-webkit-mask-image: var(--icon);
vertical-align: -0.125em;
mask-image: var(--icon);
transition: var(--transition);
margin-inline-end: 0.25rem;
background-color: var(--fg-muted-5);
width: 1rem;
height: 1rem;
}
}
.divider {
align-self: stretch;
margin: 0 0.25rem;
background-color: var(--fg-muted-2);
width: max(1px, 0.0625em);
@media only screen and (max-width: 480px) { @media only screen and (max-width: 480px) {
margin-inline-end: 0; display: none;
} }
} }

1
templates/partials/nav.html
View File

@ -15,6 +15,7 @@
{{- config.title -}} {{- config.title -}}
</a> </a>
</li> </li>
<div class="divider"></div>
{%- for link in config.extra.nav.links %} {%- for link in config.extra.nav.links %}
{%- if link.sublinks and link.sublinks | length > 0 -%} {%- if link.sublinks and link.sublinks | length > 0 -%}
<li> <li>