This repository has been archived on 2025-03-28. You can view files and clone it, but you cannot make any changes to it's state, such as pushing and creating new issues, pull requests or comments.
coryd.dev-eleventy/src/assets/styles/components/link-peek.css
2024-04-15 12:37:32 -07:00

42 lines
No EOL
969 B
CSS

link-peek {
&:defined {
& a:not([data-key]) {
display: none;
}
& figure {
position: relative;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, max-content));
gap: 1rem;
max-inline-size: max-content;
border: 1px solid var(--gray-light);
border-radius: var(--rounded);
padding: 1rem;
margin: 0 0 var(--sizing-base);
font-size: var(--font-size-sm);
line-height: var(--line-height-sm);
}
& a[data-key="data.title.link"],
& figure p {
font-size: var(--font-size-sm);
line-height: var(--line-height-sm);
}
}
& img {
&[data-key="data.logo.url"] {
margin-right: var(--sizing-xs);
inline-size: var(--sizing-lg);
block-size: var(--sizing-lg);
vertical-align: middle;
}
&[data-key="data.image.url"] {
max-inline-size: 100%;
block-size: auto;
border-radius: var(--rounded);
}
}
}