40 lines
635 B
CSS
40 lines
635 B
CSS
.recipes {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
|
|
gap: 16px;
|
|
padding-block: 32px;
|
|
}
|
|
|
|
a.recipe {
|
|
position: relative;
|
|
color: initial;
|
|
padding: 16px;
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
|
|
.recipe-linkout {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
background-color: var(--soft);
|
|
border-radius: 8px;
|
|
z-index: 1;
|
|
opacity: 0;
|
|
transition: opacity 200ms ease;
|
|
}
|
|
|
|
.recipe-linkout:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.example {
|
|
display: grid;
|
|
grid-template-columns: 64px 64px;
|
|
gap: 12px;
|
|
place-items: center;
|
|
}
|