cdransf/coryd.dev-eleventy
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: link-peek component

Browse source
This commit is contained in:
Cory Dransfeldt 2024-04-12 09:17:52 -07:00
parent 1f25a4df35
commit 67693635d8
No known key found for this signature in database
12 changed files with 79 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

36
src/assets/styles/components/link-peek.css Normal file
View file

@ -0,0 +1,36 @@
link-peek:defined a:not([data-key]) {
display: none;
}
link-peek:defined 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(--sizing-xs);
padding: 1rem;
margin: 0 0 var(--sizing-base);
font-size: var(--font-size-sm);
line-height: var(--line-height-sm);
}
link-peek:defined a[data-key="data.title.link"],
link-peek:defined figure p {
font-size: var(--font-size-sm);
line-height: var(--line-height-sm);
}
link-peek img[data-key="data.logo.url"] {
margin-right: var(--sizing-xs);
inline-size: var(--sizing-lg);
block-size: var(--sizing-lg);
vertical-align: middle;
}
link-peek img[data-key="data.image.url"] {
max-inline-size: 100%;
block-size: auto;
border-radius: var(--sizing-xs);
}