thumbnail images
This commit is contained in:
parent
90aa3babd6
commit
002b77b37a
6 changed files with 143 additions and 24 deletions
|
|
@ -11,10 +11,10 @@
|
|||
|
||||
.rapport__header{
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 140px;
|
||||
column-gap: calc(var(--spacing)*1.5);
|
||||
row-gap: calc(var(--spacing)*2);
|
||||
// display: grid;
|
||||
// grid-template-columns: 1fr 140px;
|
||||
// column-gap: calc(var(--spacing)*1.5);
|
||||
// row-gap: calc(var(--spacing)*2);
|
||||
|
||||
margin-top: calc(var(--spacing)*2);
|
||||
max-width: var(--max-w-content);
|
||||
|
|
@ -51,6 +51,7 @@
|
|||
border-bottom: var(--border-light);
|
||||
flex-grow: 2;
|
||||
align-items: flex-start;
|
||||
margin-top: calc(var(--spacing)*2);
|
||||
.dl__group{
|
||||
@include grid-content();
|
||||
border-top: var(--border-light);
|
||||
|
|
@ -66,20 +67,53 @@
|
|||
|
||||
.thumbnail--group{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: calc(var(--spacing)*0.5);
|
||||
margin-top: calc(var(--spacing)*1);
|
||||
}
|
||||
.thumbnail{
|
||||
.thumbnail{
|
||||
max-width: 260px;
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 3fr;
|
||||
column-gap: calc(var(--padding-inner)*1);
|
||||
padding: calc(var(--padding-inner)*0.5);
|
||||
border: var(--border-light);
|
||||
// font-size: var(--fs-small);
|
||||
|
||||
|
||||
width: 140px;
|
||||
figure{
|
||||
border: var(--border-medium);
|
||||
display: flex;
|
||||
aspect-ratio: 4/3;
|
||||
grid-column: 1;
|
||||
grid-row: 1/3;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.btn--small{
|
||||
width: 100%;
|
||||
margin-top: calc(var(--spacing)*0.25);
|
||||
|
||||
.thumbnail__title{
|
||||
padding-top: calc(var(--padding-inner)*0.5);
|
||||
a{
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
button{
|
||||
align-self: end;
|
||||
display: flex;
|
||||
align-items: end;
|
||||
justify-content: end;
|
||||
padding-right: calc(var(--padding-inner)*0.5);
|
||||
padding-bottom: calc(var(--padding-inner)*0.5);
|
||||
}
|
||||
|
||||
|
||||
button svg{
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue