unkn0wn
1878ec3a0e
- Implemented Card component with cover, title, subtitle, content, and footer slots. - Added styles for Card component in _card.scss. - Created Navbar component with brand and links, including styles in _navbar.scss. - Updated index.astro to include new Card and Navbar components.
56 lines
1.2 KiB
SCSS
56 lines
1.2 KiB
SCSS
@use "../../styles/tokens/typography" as *;
|
|
|
|
.navbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--nds-spacing-lg);
|
|
height: 60px;
|
|
padding: 0 var(--nds-spacing-lg);
|
|
background-color: var(--nds-surface);
|
|
border-bottom: var(--nds-border-width-thin) solid var(--nds-border);
|
|
|
|
&__brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--nds-spacing-xs);
|
|
}
|
|
&__mark {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: var(--nds-radius-md);
|
|
background: linear-gradient(135deg, var(--nds-primary), var(--nds-accent));
|
|
}
|
|
&__title {
|
|
@include text-xl;
|
|
font-size: 1rem;
|
|
color: var(--nds-text);
|
|
}
|
|
|
|
&__links {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--nds-spacing-2xs);
|
|
flex: 1;
|
|
}
|
|
&__link {
|
|
padding: var(--nds-spacing-2xs) var(--nds-spacing-sm);
|
|
border-radius: var(--nds-radius-md);
|
|
@include text-label;
|
|
color: var(--nds-neutral);
|
|
text-decoration: none;
|
|
transition: all 120ms ease;
|
|
&:hover {
|
|
color: var(--nds-text);
|
|
background-color: var(--nds-surface-hover);
|
|
}
|
|
&--active {
|
|
color: var(--nds-text);
|
|
}
|
|
}
|
|
&__right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--nds-spacing-sm);
|
|
}
|
|
}
|