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

2
src/assets/styles/components/banners.css
View file

@ -2,7 +2,7 @@
margin: var(--sizing-base) 0;
padding: var(--sizing-md);
border: 1px solid;
border-radius: var(--rounded-lg);
border-radius: var(--sizing-xs);
}
.banner.old-post {

2
src/assets/styles/components/forms.css
View file

@ -14,7 +14,7 @@ textarea {
padding: var(--sizing-sm);
font-size: var(--font-size-base);
width: 100%;
border-radius: var(--rounded-md);
border-radius: var(--sizing-xs);
outline: none;
margin-bottom: var(--sizing-base);
font-weight: var(--font-weight-base);

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);
}

4
src/assets/styles/components/media-grid.css
View file

@ -49,7 +49,7 @@
content: '';
top: 0;
left: 1px;
border-radius: calc(var(--rounded-md) * .85);
border-radius: calc(var(--sizing-xs) * .85);
box-shadow: inset 0 -70px 50px -40px #000;
width: 100%;
height: calc(100% - 1px);
@ -84,7 +84,7 @@
.media__grid img {
border: 1px solid var(--accent-color);
border-radius: var(--rounded-md);
border-radius: var(--sizing-xs);
transition-property: border-color;
transition-timing-function: var(--transition-ease-in-out);
transition-duration: 300ms;

2
src/assets/styles/components/track-chart.css
View file

@ -51,7 +51,7 @@
.track__chart--item img {
border: 1px solid var(--accent-color);
border-radius: var(--rounded-md);
border-radius: var(--sizing-xs);
}
.track__chart--item img,

4
src/assets/styles/index.css
View file

@ -118,7 +118,7 @@ table {
max-width: fit-content;
margin: 0 auto;
white-space: nowrap;
border-radius: var(--rounded-lg);
border-radius: var(--sizing-xs);
border: 1px solid var(--gray-light);
}
@ -375,7 +375,7 @@ li {
/* images */
.image__banner {
border: 1px solid var(--accent-color);
border-radius: var(--rounded-lg);
border-radius: var(--sizing-xs);
height: auto;
}

4
src/assets/styles/plugins/prism.css
View file

@ -20,7 +20,7 @@ pre[class*="language-"] {
padding: 1rem;
margin: 1.25rem 0;
overflow: auto;
border-radius: var(--rounded-md);
border-radius: var(--sizing-xs);
}
:not(pre) > code[class*="language-"],
@ -31,7 +31,7 @@ pre[class*="language-"] {
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: 0.1rem;
border-radius: var(--rounded-md);
border-radius: var(--sizing-xs);
white-space: normal;
}