harmonize header page
All checks were successful
Deploy / Deploy to Production (push) Successful in 10s
All checks were successful
Deploy / Deploy to Production (push) Successful in 10s
This commit is contained in:
Julie Blanc
parent
849b506c50
commit
e6f62a62df
22 changed files with 302 additions and 229 deletions
|
|
@ -115,8 +115,6 @@ body {
|
|||
font-size: var(--fs-normal);
|
||||
color: var(--color-txt);
|
||||
background-color: var(--color-bg);
|
||||
width: 100vw;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
@ -180,6 +178,7 @@ body.is-hidden .btn--back-to-top {
|
|||
}
|
||||
#site-header #site-title {
|
||||
flex-grow: 2;
|
||||
opacity: 0;
|
||||
}
|
||||
#site-header #site-title svg {
|
||||
width: 100px;
|
||||
|
|
@ -465,24 +464,6 @@ button:disabled {
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tag-inline {
|
||||
height: calc(var(--h-block) * 0.75);
|
||||
border-radius: var(--radius-small);
|
||||
border: var(--border-medium);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 1.5ch;
|
||||
padding-top: 3px;
|
||||
font-size: var(--fs-small);
|
||||
line-height: 1;
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-txt-light);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.keywords {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
|
|
@ -550,6 +531,16 @@ button.sort[data-sort-type=up] .arrow {
|
|||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.page__sort {
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
grid-gap: var(--padding-inner);
|
||||
width: 100%;
|
||||
max-width: var(--max-w-cards);
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.btn--group__mobile {
|
||||
z-index: calc(var(--z-header) - 10);
|
||||
opacity: 0;
|
||||
|
|
@ -1122,23 +1113,16 @@ button.sort[data-sort-type=up] .arrow {
|
|||
}
|
||||
}
|
||||
|
||||
.page__header {
|
||||
max-width: var(--max-w-cards);
|
||||
margin: calc(var(--spacing) * 1.5) auto;
|
||||
@media screen and (max-width: 1280px) {
|
||||
[data-template=investigations] .dropdown .dropdown__content {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
[data-template=investigations] .dropdown .dropdown__content::before {
|
||||
left: auto;
|
||||
right: 16px;
|
||||
}
|
||||
}
|
||||
.page__header .page__title {
|
||||
font-size: var(--fs-big);
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.page__header .page__description {
|
||||
margin-top: calc(var(--spacing) * 1);
|
||||
}
|
||||
.page__header .page__description p {
|
||||
font-size: var(--fs-medium);
|
||||
max-width: 54ch;
|
||||
}
|
||||
|
||||
.card--article {
|
||||
border: var(--border-light);
|
||||
position: relative;
|
||||
|
|
@ -1170,7 +1154,7 @@ button.sort[data-sort-type=up] .arrow {
|
|||
position: absolute;
|
||||
top: var(--padding-inner);
|
||||
left: var(--padding-inner);
|
||||
z-index: 200;
|
||||
z-index: 10;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: var(--radius-small);
|
||||
|
|
@ -1446,6 +1430,7 @@ button.sort[data-sort-type=up] .arrow {
|
|||
|
||||
.card--folder {
|
||||
position: relative;
|
||||
max-width: var(--max-w-cards);
|
||||
border: var(--border-light);
|
||||
padding: var(--padding-inner);
|
||||
display: grid;
|
||||
|
|
@ -1477,6 +1462,8 @@ button.sort[data-sort-type=up] .arrow {
|
|||
margin-bottom: 0.25em;
|
||||
text-wrap: balance;
|
||||
max-width: 42ch;
|
||||
text-transform: uppercase;
|
||||
padding-top: calc(var(--spacing) * 0.25);
|
||||
}
|
||||
.card--folder .title a {
|
||||
text-decoration: none;
|
||||
|
|
@ -1488,7 +1475,7 @@ button.sort[data-sort-type=up] .arrow {
|
|||
}
|
||||
.card--folder .short {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -1547,10 +1534,24 @@ button.sort[data-sort-type=up] .arrow {
|
|||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
.card--folder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: calc(var(--padding-inner) * 0.5);
|
||||
}
|
||||
.card--folder .content {
|
||||
display: contents;
|
||||
}
|
||||
.card--folder .title {
|
||||
order: 1;
|
||||
}
|
||||
.card--folder figure {
|
||||
order: 2;
|
||||
}
|
||||
.card--folder .short {
|
||||
display: none;
|
||||
order: 3;
|
||||
}
|
||||
.card--folder ul {
|
||||
order: 4;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1651,6 +1652,7 @@ button.sort[data-sort-type=up] .arrow {
|
|||
}
|
||||
#site-header #site-title {
|
||||
flex-grow: 2;
|
||||
opacity: 0;
|
||||
}
|
||||
#site-header #site-title svg {
|
||||
width: 100px;
|
||||
|
|
@ -1855,6 +1857,8 @@ body.menu-open #menu-toggle .close {
|
|||
body {
|
||||
min-height: 100dvh;
|
||||
min-height: 100vh;
|
||||
width: 100vw;
|
||||
overflow-x: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
@ -1863,6 +1867,73 @@ body main {
|
|||
padding: 0 var(--padding-body);
|
||||
padding-top: var(--header-h);
|
||||
padding-bottom: calc(var(--spacing) * 2);
|
||||
min-height: 100dvh;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.page__type {
|
||||
height: calc(var(--h-block) * 0.75);
|
||||
border-radius: var(--radius-small);
|
||||
border: var(--border-medium);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 1.5ch;
|
||||
padding-top: 3px;
|
||||
font-size: var(--fs-small);
|
||||
line-height: 1;
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-txt-light);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
main .page__header {
|
||||
max-width: var(--max-w-cards);
|
||||
margin-inline: auto;
|
||||
margin-top: calc(var(--spacing) * 1);
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
}
|
||||
main .page__header .page__title {
|
||||
max-width: var(--max-w-content);
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
font-size: var(--fs-big);
|
||||
line-height: var(--leading-tight);
|
||||
margin-top: calc(var(--spacing) * 1);
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
text-wrap: balance;
|
||||
}
|
||||
main .page__header .description {
|
||||
max-width: 68ch;
|
||||
}
|
||||
main .page__header .description-medium {
|
||||
font-size: var(--fs-medium);
|
||||
max-width: 58ch;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.container-cards {
|
||||
max-width: var(--max-w-cards);
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-gap: calc(var(--spacing) * 1);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 560px) {
|
||||
.container-cards__investigations {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
||||
grid-auto-rows: minmax(100px, auto);
|
||||
grid-gap: calc(var(--padding-body) * 1.5);
|
||||
margin-bottom: 10vh;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
.container-cards__investigations {
|
||||
margin-bottom: 10vh;
|
||||
}
|
||||
}
|
||||
|
||||
.section--home {
|
||||
|
|
@ -1898,43 +1969,6 @@ body main {
|
|||
width: 11px;
|
||||
}
|
||||
|
||||
[data-template=investigations] main {
|
||||
max-width: var(--max-w-cards);
|
||||
margin-inline: auto;
|
||||
}
|
||||
@media screen and (min-width: 560px) {
|
||||
[data-template=investigations] main #container-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
||||
grid-auto-rows: minmax(100px, auto);
|
||||
grid-gap: calc(var(--padding-body) * 1.5);
|
||||
margin-bottom: 10vh;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
[data-template=investigations] main #container-cards {
|
||||
margin-bottom: 10vh;
|
||||
}
|
||||
[data-template=investigations] main #container-cards .card--article {
|
||||
margin-bottom: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
[data-template=investigations] main {
|
||||
margin-bottom: 10vh;
|
||||
}
|
||||
[data-template=investigations] main .card--article {
|
||||
margin-bottom: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
}
|
||||
|
||||
.page__sort {
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
grid-gap: var(--padding-inner);
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
}
|
||||
|
||||
[data-template=investigation-summary] main {
|
||||
position: relative;
|
||||
max-width: var(--max-w-cards);
|
||||
|
|
@ -1962,23 +1996,6 @@ body main {
|
|||
width: calc(var(--panel-w) * 0.5);
|
||||
}
|
||||
}
|
||||
[data-template=investigation-summary] main header {
|
||||
margin-top: calc(var(--spacing) * 1);
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
}
|
||||
[data-template=investigation-summary] main header .page-title {
|
||||
max-width: var(--max-w-content);
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
font-size: var(--fs-big);
|
||||
line-height: var(--leading-tight);
|
||||
margin-top: calc(var(--spacing) * 1);
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
text-wrap: balance;
|
||||
}
|
||||
[data-template=investigation-summary] main header .description {
|
||||
max-width: 62ch;
|
||||
}
|
||||
[data-template=investigation-summary] main .section__article {
|
||||
margin-top: calc(var(--spacing) * 3);
|
||||
margin-bottom: calc(var(--spacing) * 3);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue