studio-variable/index-main
4
0
Fork 0
Code Issues 11 Pull requests Projects Releases Packages Wiki Activity Actions

aside investigatins

Browse source
This commit is contained in:
Julie Blanc 2026-02-18 16:40:20 +01:00
parent 243583d024
commit 0c767e2e5e
15 changed files with 418 additions and 725 deletions
Download patch file Download diff file Expand all files Collapse all files

209
assets/css/components/_card-package.scss
View file

@ -1,145 +1,94 @@
.card--package {
position: relative;
max-width: var(--max-w-cards);
border: var(--border-light);
padding: var(--padding-inner);
@include grid-content();
@include figure-16-9();
// .card--package {
// position: relative;
// max-width: var(--max-w-cards);
// border: var(--border-light);
container-type: inline-size;
container-name: cardpackage;
// @include grid-content();
// @include figure-16-9();
figure {
border-radius: var(--radius-small);
background-color: var(--color-accent);
// container-type: inline-size;
// container-name: cardpackage;
img {
opacity: 0.8;
filter: grayscale(1);
}
}
// figure {
// border-radius: var(--radius-small);
// background-color: var(--color-accent);
.content {
display: flex;
flex-direction: column;
font-size: var(--fs-small);
}
// img {
// opacity: 0.8;
// filter: grayscale(1);
// }
// }
.title {
font-weight: 500;
font-size: var(--fs-normal);
line-height: var(--leading-title);
// .content {
// display: flex;
// flex-direction: column;
// font-size: var(--fs-small);
// }
margin-bottom: 0.75em;
text-wrap: balance;
max-width: 42ch;
text-transform: uppercase;
padding-top: calc(var(--spacing) * 0.25);
a {
text-decoration: none;
}
// .title {
// font-weight: 500;
// font-size: var(--fs-normal);
// line-height: var(--leading-title);
@media #{$small} {
font-size: var(--fs-normal);
}
// margin-bottom: 0.75em;
// text-wrap: balance;
// max-width: 42ch;
// text-transform: uppercase;
// padding-top: calc(var(--spacing) * 0.25);
// a {
// text-decoration: none;
// }
.icon {
padding-right: 1ch;
position: relative;
top: 1px;
svg {
height: 15px;
width: 15px;
fill: var(--color-txt);
}
}
}
// @media #{$small} {
// font-size: var(--fs-normal);
// }
.short {
@include clamp(3);
flex-grow: 1;
padding-right: calc(var(--padding-inner) * 2);
}
// .icon {
// padding-right: 1ch;
// position: relative;
// top: 1px;
// svg {
// height: 15px;
// width: 15px;
// fill: var(--color-txt);
// }
// }
// }
ul {
display: flex;
list-style: none;
gap: 1ch;
color: var(--color-txt-light);
padding-top: calc(var(--spacing) * 0.5);
// .short {
// @include clamp(3);
// flex-grow: 1;
// padding-right: calc(var(--padding-inner) * 2);
// }
li + li {
&::before {
content: "|";
padding-right: 1ch;
}
}
@media #{$small} {
font-size: var(--fs-small);
}
}
// ul {
// display: flex;
// list-style: none;
// gap: 1ch;
// color: var(--color-txt-light);
// padding-top: calc(var(--spacing) * 0.5);
.btn--go-to {
position: absolute;
right: calc(var(--padding-inner) * 1);
bottom: var(--padding-inner);
}
// li + li {
// &::before {
// content: "|";
// padding-right: 1ch;
// }
// }
// @media #{$small} {
// font-size: var(--fs-small);
// }
// }
@include btn--go-to();
// .btn--go-to {
// position: absolute;
// right: calc(var(--padding-inner) * 1);
// bottom: var(--padding-inner);
// }
&:hover {
background-color: var(--grey-950);
border-color: var(--color-txt);
}
}
// @include btn--go-to();
[data-template="investigation"] .card--package {
border: none;
padding-left: 0;
padding-right: 0;
border-bottom: var(--border-light);
&:first-of-type {
border-top: var(--border-light);
}
&.has-link {
@include hover-card-line();
}
figure {
@media #{$x-small} {
margin-left: 0px;
}
}
.title {
font-size: var(--fs-small);
}
}
@media #{$x-small} {
.card--package {
.content {
display: contents;
}
figure {
grid-row: 1/3;
}
.title {
font-size: var(--fs-small);
padding-top: calc(var(--spacing) * 0.25);
margin-bottom: 0;
}
.short {
grid-column: span 2;
}
ul {
grid-column: 2;
grid-row: 2;
padding-top: 0;
}
}
}
// &:hover {
// background-color: var(--grey-950);
// border-color: var(--color-txt);
// }
// }