aside investigatins
This commit is contained in:
Julie Blanc
parent
243583d024
commit
0c767e2e5e
15 changed files with 418 additions and 725 deletions
|
|
@ -1,19 +1,18 @@
|
|||
.card--package,
|
||||
.card--article-small {
|
||||
|
||||
@include grid-content();
|
||||
|
||||
padding-top: calc(var(--spacing)*0.5);
|
||||
padding-bottom: calc(var(--spacing)*0.5);
|
||||
|
||||
border-bottom: var(--border-light);
|
||||
margin-bottom: calc(var(--spacing)*0.75);
|
||||
border: var(--border-light);
|
||||
|
||||
&:first-of-type {
|
||||
border-top: var(--border-light);
|
||||
}
|
||||
|
||||
&.has-link {
|
||||
@include hover-card-line();
|
||||
}
|
||||
// &.has-link {
|
||||
// @include hover-card-line();
|
||||
// }
|
||||
|
||||
@include figure-16-9();
|
||||
|
||||
|
|
@ -23,38 +22,79 @@
|
|||
}
|
||||
}
|
||||
|
||||
.type {
|
||||
|
||||
display: inline-flex;
|
||||
flex-grow: 0;
|
||||
height: calc(var(--h-block)*0.75);
|
||||
border-radius: var(--radius-small);
|
||||
border: var(--border-medium);
|
||||
align-items: center;
|
||||
padding: 5px 1ch 0 1ch;
|
||||
|
||||
|
||||
font-size: var(--fs-xsmall);
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
color: var(--color-txt-light);
|
||||
margin-bottom: calc(var(--spacing)*0.75);
|
||||
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: calc(var(--spacing)*0.25);
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
padding-top: calc(var(--padding-inner)*2);
|
||||
padding-bottom: calc(var(--padding-inner)*2);
|
||||
padding-left: calc(var(--padding-inner)*1.5);
|
||||
padding-right: calc(var(--padding-inner)*3);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 500;
|
||||
font-size: var(--fs-small);
|
||||
font-size: var(--fs-normal);
|
||||
margin-bottom: 0.25em;
|
||||
text-wrap: balance;
|
||||
max-width: 42ch;
|
||||
text-transform: uppercase;
|
||||
line-height: var(--leading-title);
|
||||
|
||||
flex-grow: 2;
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
time {
|
||||
flex-grow: 1;
|
||||
.date,
|
||||
.details {
|
||||
// flex-grow: 2;
|
||||
color: var(--color-txt-light);
|
||||
font-size: var(--fs-small);
|
||||
}
|
||||
|
||||
.details {
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
li:not(:last-of-type)::after {
|
||||
content: "|";
|
||||
padding-left: 1ch;
|
||||
padding-right: 0.5ch;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.description {
|
||||
font-size: var(--fs-small);
|
||||
@include clamp(2);
|
||||
margin-bottom: calc(var(--spacing)*0.75);
|
||||
// margin-bottom: calc(var(--spacing)*0.75);
|
||||
margin-top: calc(var(--spacing)*0.25);
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -42,19 +42,16 @@
|
|||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
text-wrap: balance;
|
||||
// flex-grow: 2;
|
||||
|
||||
a{ text-decoration: none;}
|
||||
}
|
||||
|
||||
.description{
|
||||
margin-top: calc(var(--spacing)*0.5);
|
||||
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
|
||||
font-size: var(--fs-small);
|
||||
}
|
||||
|
||||
|
|
@ -82,17 +79,7 @@
|
|||
}
|
||||
|
||||
|
||||
.keywords-wrapper{
|
||||
z-index: 3000;
|
||||
margin-top: calc(var(--spacing)*0.5);
|
||||
// margin-bottom: calc(var(--spacing)*0.5);
|
||||
}
|
||||
|
||||
.keywords{
|
||||
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
|
||||
&:hover{
|
||||
border-color: var(--color-txt);
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
|
||||
.card--impact-small {
|
||||
|
||||
border-bottom: var(--border-light);
|
||||
|
|
@ -5,7 +6,6 @@
|
|||
border-top: var(--border-light);
|
||||
}
|
||||
|
||||
|
||||
@include grid-content();
|
||||
padding: var(--padding-inner) 0;
|
||||
|
||||
|
|
@ -20,8 +20,16 @@
|
|||
bottom: auto;
|
||||
}
|
||||
|
||||
.content {
|
||||
.title {
|
||||
grid-column: 2;
|
||||
font-size: var(--fs-normal);
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
margin-right: 4ch;
|
||||
}
|
||||
|
||||
.date{
|
||||
font-size: var(--fs-small);
|
||||
}
|
||||
|
||||
.card--open-graph {
|
||||
|
|
@ -44,7 +52,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
.category {
|
||||
width: auto;
|
||||
justify-self: start;
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
// }
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -8,12 +8,12 @@
|
|||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: calc(var(--h-block)*0.75);
|
||||
height: calc(var(--h-block)*1);
|
||||
padding: 0 1ch;
|
||||
padding-top: 2px;
|
||||
border: var(--border-light);
|
||||
border-radius: var(--radius-btn);
|
||||
font-size: var(--fs-xsmall);
|
||||
font-size: var(--fs-small);
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.tag{
|
||||
.category{
|
||||
height: calc(var(--h-block)*0.75);
|
||||
// border-radius: calc(var(--h-block)*0.75/2);
|
||||
border-radius: var(--radius-small);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue