This commit is contained in:
Julie Blanc
parent
193577b145
commit
b9cefffdfa
17 changed files with 174 additions and 139 deletions
|
|
@ -2,7 +2,7 @@
|
|||
:root {
|
||||
--font: "Executive", Arial, sans-serif;
|
||||
--title: "System", Arial, sans-serif;
|
||||
--fs-xsmall: 10px;
|
||||
--fs-xsmall: 12px;
|
||||
--fs-small: 16px;
|
||||
--fs-normal: 20px;
|
||||
--fs-medium: 24px;
|
||||
|
|
@ -343,7 +343,7 @@ button:disabled {
|
|||
height: calc(var(--h-block) * 1);
|
||||
border: var(--border);
|
||||
border-radius: var(--radius-btn);
|
||||
font-size: var(--fs-small);
|
||||
font-size: var(--fs-xsmall);
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
line-height: 1;
|
||||
|
|
@ -478,10 +478,11 @@ button:disabled {
|
|||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 1.5ch;
|
||||
padding: 0 1ch;
|
||||
padding-top: 3px;
|
||||
font-size: var(--fs-small);
|
||||
font-size: var(--fs-xsmall);
|
||||
line-height: 1;
|
||||
font-weight: 500;
|
||||
background-color: var(--color-txt);
|
||||
color: var(--color-bg);
|
||||
overflow: hidden;
|
||||
|
|
@ -503,7 +504,7 @@ button:disabled {
|
|||
padding-top: 2px;
|
||||
border: var(--border-light);
|
||||
border-radius: var(--radius-btn);
|
||||
font-size: var(--fs-small);
|
||||
font-size: var(--fs-xsmall);
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
|
|
@ -1193,9 +1194,10 @@ button.sort[data-sort-type=up] .arrow {
|
|||
margin-bottom: calc(var(--spacing) * 0.75);
|
||||
}
|
||||
.card--article .title {
|
||||
margin-top: calc(var(--spacing) * 0.5);
|
||||
font-size: var(--fs-medium);
|
||||
font-weight: normal;
|
||||
margin-top: calc(var(--spacing) * 0.75);
|
||||
font-size: var(--fs-normal);
|
||||
line-height: 1.1;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
|
@ -1208,10 +1210,12 @@ button.sort[data-sort-type=up] .arrow {
|
|||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
font-size: var(--fs-small);
|
||||
}
|
||||
.card--article .dl {
|
||||
margin-top: calc(var(--spacing) * 0.5);
|
||||
border-bottom: var(--border-light);
|
||||
font-size: var(--fs-small);
|
||||
}
|
||||
.card--article .dl .dl__group {
|
||||
display: grid;
|
||||
|
|
@ -1307,7 +1311,7 @@ button.sort[data-sort-type=up] .arrow {
|
|||
padding-right: calc(var(--padding-inner) * 3);
|
||||
}
|
||||
.card--article-small .title {
|
||||
font-weight: 400;
|
||||
font-weight: 500;
|
||||
font-size: var(--fs-small);
|
||||
margin-bottom: 0.25em;
|
||||
text-wrap: balance;
|
||||
|
|
@ -1451,6 +1455,7 @@ button.sort[data-sort-type=up] .arrow {
|
|||
grid-template-columns: 2fr 3fr;
|
||||
position: relative;
|
||||
padding: calc(var(--padding-inner) * 1.5) var(--padding-inner);
|
||||
font-size: var(--fs-small);
|
||||
position: relative;
|
||||
}
|
||||
.card--impact .card--impact__inner .btn--go-to {
|
||||
|
|
@ -1518,7 +1523,7 @@ button.sort[data-sort-type=up] .arrow {
|
|||
z-index: 10;
|
||||
grid-column: 2;
|
||||
list-style: none;
|
||||
font-size: var(--fs-small);
|
||||
font-size: var(--fs-xsmall);
|
||||
}
|
||||
.card--impact .card--impact__inner .investigations a {
|
||||
text-decoration: none;
|
||||
|
|
@ -1595,12 +1600,6 @@ button.sort[data-sort-type=up] .arrow {
|
|||
grid-column: 2;
|
||||
}
|
||||
}
|
||||
.card--impact .card--impact__inner .open-graph__inner {
|
||||
margin-top: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
.card--impact .card--impact__inner .open-graph__inner .card--open-graph {
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
|
||||
@container impact (width < 460px) {
|
||||
.card--impact__inner {
|
||||
|
|
@ -1613,7 +1612,7 @@ button.sort[data-sort-type=up] .arrow {
|
|||
margin-right: 2ch;
|
||||
top: 0px !important;
|
||||
}
|
||||
.card--impact__inner .content {
|
||||
.card--impact__inner .card--impact__inner > .content {
|
||||
margin-top: calc(var(--spacing) * 0.75);
|
||||
margin-bottom: calc(var(--spacing) * 0.25);
|
||||
padding-right: 0 !important;
|
||||
|
|
@ -1629,10 +1628,12 @@ button.sort[data-sort-type=up] .arrow {
|
|||
.card--impact__inner .keywords-wrapper {
|
||||
margin-top: calc(var(--spacing) * 1);
|
||||
}
|
||||
.card--impact__inner .date,
|
||||
.card--impact__inner .content,
|
||||
.card--impact__inner details {
|
||||
font-size: 14px !important;
|
||||
font-size: var(--fs-small) !important;
|
||||
}
|
||||
.card--impact__inner .date {
|
||||
font-size: var(--fs-xsmall) !important;
|
||||
}
|
||||
.card--impact__inner .btn--go-to {
|
||||
top: calc(var(--padding-inner) * 1.25) !important;
|
||||
|
|
@ -1844,12 +1845,6 @@ button.sort[data-sort-type=up] .arrow {
|
|||
grid-column: 2;
|
||||
}
|
||||
}
|
||||
.card--impact-small .open-graph__inner {
|
||||
margin-top: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
.card--impact-small .open-graph__inner .card--open-graph {
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
|
||||
.card--folder {
|
||||
position: relative;
|
||||
|
|
@ -1876,15 +1871,22 @@ button.sort[data-sort-type=up] .arrow {
|
|||
object-fit: cover;
|
||||
transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
|
||||
}
|
||||
.card--folder figure {
|
||||
background-color: var(--color-accent);
|
||||
}
|
||||
.card--folder figure img {
|
||||
mix-blend-mode: multiply;
|
||||
filter: grayscale(1) brightness(1.2);
|
||||
}
|
||||
.card--folder .content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: var(--fs-small);
|
||||
}
|
||||
.card--folder .title {
|
||||
flex-grow: 1;
|
||||
font-weight: 500;
|
||||
font-size: var(--fs-small);
|
||||
margin-bottom: 0.25em;
|
||||
font-size: var(--fs-normal);
|
||||
margin-bottom: 0.75em;
|
||||
text-wrap: balance;
|
||||
max-width: 42ch;
|
||||
text-transform: uppercase;
|
||||
|
|
@ -1913,6 +1915,8 @@ button.sort[data-sort-type=up] .arrow {
|
|||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
flex-grow: 1;
|
||||
padding-right: calc(var(--padding-inner) * 2);
|
||||
}
|
||||
.card--folder ul {
|
||||
display: flex;
|
||||
|
|
@ -2005,6 +2009,9 @@ button.sort[data-sort-type=up] .arrow {
|
|||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
[data-template=investigation-summary] .card--folder .title {
|
||||
font-size: var(--fs-small);
|
||||
}
|
||||
|
||||
@container cardfolder (width < 680px) {
|
||||
figure {
|
||||
|
|
@ -2027,13 +2034,17 @@ button.sort[data-sort-type=up] .arrow {
|
|||
}
|
||||
}
|
||||
.card--open-graph {
|
||||
container-type: inline-size;
|
||||
container-name: opengraph;
|
||||
border: 1px solid var(--grey-600);
|
||||
border-radius: var(--radius-small);
|
||||
position: relative;
|
||||
}
|
||||
.card--open-graph .open-graph__inner {
|
||||
display: grid;
|
||||
grid-gap: var(--padding-inner);
|
||||
grid-template-columns: 2fr 3fr;
|
||||
position: relative;
|
||||
border: 1px solid var(--grey-600);
|
||||
border-radius: var(--radius-small);
|
||||
position: relative;
|
||||
}
|
||||
.card--open-graph figure {
|
||||
grid-column: 1;
|
||||
|
|
@ -2054,19 +2065,20 @@ button.sort[data-sort-type=up] .arrow {
|
|||
}
|
||||
}
|
||||
.card--open-graph .content {
|
||||
padding: var(--padding-inner);
|
||||
padding-left: 0;
|
||||
padding-top: calc(var(--padding-inner) * 0.75);
|
||||
padding-bottom: calc(var(--padding-inner) * 0.75);
|
||||
padding-right: var(--padding-inner);
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
.card--open-graph .site-name {
|
||||
color: var(--color-txt-light);
|
||||
font-size: var(--fs-small);
|
||||
font-size: var(--fs-xsmall);
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.card--open-graph .title {
|
||||
font-size: var(--fs-normal);
|
||||
font-weight: normal;
|
||||
font-size: var(--fs-small);
|
||||
font-weight: 500;
|
||||
line-height: 1.1;
|
||||
padding-top: 2px;
|
||||
display: -webkit-box;
|
||||
|
|
@ -2079,7 +2091,7 @@ button.sort[data-sort-type=up] .arrow {
|
|||
text-decoration: none;
|
||||
}
|
||||
.card--open-graph .description {
|
||||
font-size: var(--fs-small);
|
||||
font-size: var(--fs-xsmall);
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
|
|
@ -2090,19 +2102,7 @@ button.sort[data-sort-type=up] .arrow {
|
|||
background-color: var(--grey-950);
|
||||
}
|
||||
|
||||
.open-graph__inner {
|
||||
container-type: inline-size;
|
||||
container-name: opengraph;
|
||||
}
|
||||
|
||||
@container opengraph (width < 500px) {
|
||||
.card--open-graph .content {
|
||||
padding: calc(var(--padding-inner) * 0.5);
|
||||
}
|
||||
.card--open-graph figure {
|
||||
aspect-ratio: inherit;
|
||||
}
|
||||
}
|
||||
@container opengraph (width < 500px) {}
|
||||
.swiper {
|
||||
--slide-padding: 30px;
|
||||
}
|
||||
|
|
@ -2501,10 +2501,11 @@ body main .page__content {
|
|||
justify-content: center;
|
||||
padding: 0 1.5ch;
|
||||
padding-top: 3px;
|
||||
font-size: var(--fs-small);
|
||||
font-size: var(--fs-xsmall);
|
||||
line-height: 1;
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-txt-light);
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-transform: uppercase;
|
||||
|
|
@ -2523,7 +2524,8 @@ main .page__header .page__title {
|
|||
max-width: var(--max-w-content);
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
font-size: var(--fs-big);
|
||||
font-size: var(--fs-medium);
|
||||
font-weight: 500;
|
||||
line-height: var(--leading-tight);
|
||||
margin-top: calc(var(--spacing) * 1);
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
|
|
@ -3215,7 +3217,8 @@ main .page__header .description-medium {
|
|||
}
|
||||
.content-folder .container__title {
|
||||
font-weight: normal;
|
||||
font-size: var(--fs-normal);
|
||||
font-size: var(--fs-small);
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: calc(var(--spacing) * 0.75);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue