design/styleguide/assets/style/styleguide.scss

72 lines
No EOL
1.2 KiB
SCSS

@import "main";
a {
&.a-regular {
color: var(--color-accent-1);
}
&.a-hover {
color: var(--color-accent-3);
}
&.a-visited {
color: var(--color-accent-2);
}
}
.layout-column {
display: flex;
& > * {
width: 100%;
}
@media (max-width: $breakpoint-md) {
flex-wrap: wrap;
& > * {
width: 100%;
}
}
}
.swatch-grid {
background-color: var(--color-background);
color: var(--color-foreground);
padding: 1rem;
section {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 2rem;
& > span {
width: 100%;
font-size: var(--text-xl);
}
.swatch-container {
display: inline-flex;
flex-direction: column;
align-items: end;
gap: 0.25rem;
background-color: var(--color-background);
border-radius: 1rem;
padding: 0.5rem;
border: 0.125rem solid var(--color-foreground);
.swatch {
background-color: var(--swatch-color);
width: 8rem;
height: 8rem;
border-radius: 0.5rem;
}
span {
font-family: "Departure Mono", ui-monospace, monospace;
color: var(--color-foreground);
line-height: 1.5;
}
}
}
}