investigation → style siders + titles
All checks were successful
Deploy / Deploy to Production (push) Successful in 12s
All checks were successful
Deploy / Deploy to Production (push) Successful in 12s
This commit is contained in:
Julie Blanc
parent
c4724c8f8d
commit
d51835a2c0
10 changed files with 136 additions and 236 deletions
|
|
@ -8,6 +8,7 @@
|
|||
|
||||
@include grid-content();
|
||||
padding: var(--padding-inner) 0;
|
||||
padding-bottom: calc(var(--spacing)*0.75);
|
||||
|
||||
&.has-link {
|
||||
@include hover-card-line();
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
|
||||
|
||||
|
||||
// @mixin details-summary(){
|
||||
|
||||
|
||||
|
||||
// }
|
||||
|
|
@ -4,7 +4,9 @@
|
|||
left: 0;
|
||||
padding-top: calc(var(--spacing)*4);
|
||||
margin-bottom: calc(var(--spacing)*3);
|
||||
|
||||
max-width: var(--max-w-cards);
|
||||
margin-inline: auto;
|
||||
|
||||
|
||||
figcaption{
|
||||
color: var(--color-txt-light);
|
||||
|
|
@ -28,49 +30,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.swiper-slide{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.swiper-button-prev, .swiper-button-next{
|
||||
--swiper-navigation-sides-offset: 32px;
|
||||
--swiper-navigation-size: 32px;
|
||||
|
||||
@media #{$x-small}{
|
||||
--swiper-navigation-sides-offset: 15px;
|
||||
--swiper-navigation-size: 15px;
|
||||
}
|
||||
opacity: 0.8;
|
||||
|
||||
// Position buttons relative to the image (16/9 aspect ratio)
|
||||
// Calculate: 50% of image height = 50% * (9/16) of width
|
||||
// Image is 100vw wide, so center at: (100vw * 9/16) / 2
|
||||
top: calc(100vw * 9 / 2 - var(--swiper-navigation-size)*0.5);
|
||||
margin-top: 0;
|
||||
|
||||
svg{ color: white; }
|
||||
}
|
||||
|
||||
.swiper-pagination{
|
||||
position: static;
|
||||
margin-top: calc(var(--spacing)*0.5);
|
||||
padding: 0 var(--padding-body);
|
||||
text-align: center;
|
||||
|
||||
.swiper-pagination-bullet{
|
||||
width: 15px;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
background: var(--color-txt-light);
|
||||
// opacity: 0.4;
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet-active{
|
||||
background: var(--color-txt);
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.player-container{
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -1,49 +1,11 @@
|
|||
.swiper {
|
||||
|
||||
|
||||
--slide-padding: 30px;
|
||||
|
||||
|
||||
.swiper-button-prev,
|
||||
.swiper-button-next {
|
||||
--swiper-navigation-size: 32px;
|
||||
.swiper-button-next{
|
||||
color: var(--color-txt);
|
||||
background-color: var(--color-bg);
|
||||
height: 100%;
|
||||
width: var(--slide-padding);
|
||||
top: 0px!important;
|
||||
height: calc(100% - var(--spacing)*1);
|
||||
// background-color: red;
|
||||
|
||||
svg {
|
||||
width: 14px;
|
||||
svg {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
&.swiper-button-disabled {
|
||||
opacity: 1;
|
||||
|
||||
svg {
|
||||
opacity: 0.05;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-button-prev {
|
||||
left: 0px!important;
|
||||
top: 0px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.swiper-button-next {
|
||||
right: 0px!important;
|
||||
top: 0px;
|
||||
justify-content: flex-end;
|
||||
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
padding-left: var(--slide-padding);
|
||||
padding-right: var(--slide-padding);
|
||||
}
|
||||
|
||||
.swiper-pagination {
|
||||
|
|
@ -63,15 +25,28 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media #{$x-small} {
|
||||
|
||||
.swiper-button-prev,
|
||||
.swiper-button-next {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
padding: 0px;
|
||||
}
|
||||
.swiper-wrapper {
|
||||
height: max-content;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
height: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
// @media #{$x-small} {
|
||||
|
||||
// .swiper-button-prev,
|
||||
// .swiper-button-next {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
// .swiper-slide {
|
||||
// padding: 0px;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
|
@ -617,6 +617,8 @@ button.sort[data-sort-type=up] .arrow {
|
|||
left: 0;
|
||||
padding-top: calc(var(--spacing) * 4);
|
||||
margin-bottom: calc(var(--spacing) * 3);
|
||||
max-width: var(--max-w-cards);
|
||||
margin-inline: auto;
|
||||
}
|
||||
#investigation__hero figcaption {
|
||||
color: var(--color-txt-light);
|
||||
|
|
@ -644,43 +646,6 @@ button.sort[data-sort-type=up] .arrow {
|
|||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
}
|
||||
#investigation__hero .swiper-slide {
|
||||
position: relative;
|
||||
}
|
||||
#investigation__hero .swiper-button-prev, #investigation__hero .swiper-button-next {
|
||||
--swiper-navigation-sides-offset: 32px;
|
||||
--swiper-navigation-size: 32px;
|
||||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
#investigation__hero .swiper-button-prev, #investigation__hero .swiper-button-next {
|
||||
--swiper-navigation-sides-offset: 15px;
|
||||
--swiper-navigation-size: 15px;
|
||||
}
|
||||
}
|
||||
#investigation__hero .swiper-button-prev, #investigation__hero .swiper-button-next {
|
||||
opacity: 0.8;
|
||||
top: calc(450vw - var(--swiper-navigation-size) * 0.5);
|
||||
margin-top: 0;
|
||||
}
|
||||
#investigation__hero .swiper-button-prev svg, #investigation__hero .swiper-button-next svg {
|
||||
color: white;
|
||||
}
|
||||
#investigation__hero .swiper-pagination {
|
||||
position: static;
|
||||
margin-top: calc(var(--spacing) * 0.5);
|
||||
padding: 0 var(--padding-body);
|
||||
text-align: center;
|
||||
}
|
||||
#investigation__hero .swiper-pagination .swiper-pagination-bullet {
|
||||
width: 15px;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
background: var(--color-txt-light);
|
||||
}
|
||||
#investigation__hero .swiper-pagination .swiper-pagination-bullet-active {
|
||||
background: var(--color-txt);
|
||||
opacity: 0.8;
|
||||
}
|
||||
#investigation__hero .player-container {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
|
@ -1628,6 +1593,7 @@ button.sort[data-sort-type=up] .arrow {
|
|||
grid-template-columns: 2fr 3fr;
|
||||
position: relative;
|
||||
padding: var(--padding-inner) 0;
|
||||
padding-bottom: calc(var(--spacing) * 0.75);
|
||||
}
|
||||
.card--impact-small.has-link {
|
||||
border-bottom: var(--border-light);
|
||||
|
|
@ -1861,44 +1827,13 @@ button.sort[data-sort-type=up] .arrow {
|
|||
}
|
||||
|
||||
@container opengraph (width < 500px) {}
|
||||
.swiper {
|
||||
--slide-padding: 30px;
|
||||
}
|
||||
.swiper .swiper-button-prev,
|
||||
.swiper .swiper-button-next {
|
||||
--swiper-navigation-size: 32px;
|
||||
color: var(--color-txt);
|
||||
background-color: var(--color-bg);
|
||||
height: 100%;
|
||||
width: var(--slide-padding);
|
||||
top: 0px !important;
|
||||
height: calc(100% - var(--spacing) * 1);
|
||||
}
|
||||
.swiper .swiper-button-prev svg,
|
||||
.swiper .swiper-button-next svg {
|
||||
width: 14px;
|
||||
}
|
||||
.swiper .swiper-button-prev.swiper-button-disabled,
|
||||
.swiper .swiper-button-next.swiper-button-disabled {
|
||||
opacity: 1;
|
||||
}
|
||||
.swiper .swiper-button-prev.swiper-button-disabled svg,
|
||||
.swiper .swiper-button-next.swiper-button-disabled svg {
|
||||
opacity: 0.05;
|
||||
}
|
||||
.swiper .swiper-button-prev {
|
||||
left: 0px !important;
|
||||
top: 0px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.swiper .swiper-button-next {
|
||||
right: 0px !important;
|
||||
top: 0px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.swiper .swiper-slide {
|
||||
padding-left: var(--slide-padding);
|
||||
padding-right: var(--slide-padding);
|
||||
width: 20px;
|
||||
}
|
||||
.swiper .swiper-pagination {
|
||||
position: relative;
|
||||
|
|
@ -1914,14 +1849,16 @@ button.sort[data-sort-type=up] .arrow {
|
|||
.swiper .swiper-pagination .swiper-pagination-bullet-active {
|
||||
background: var(--color-txt);
|
||||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
.swiper .swiper-button-prev,
|
||||
.swiper .swiper-button-next {
|
||||
display: none;
|
||||
}
|
||||
.swiper .swiper-slide {
|
||||
padding: 0px;
|
||||
}
|
||||
.swiper .swiper-wrapper {
|
||||
height: -moz-max-content;
|
||||
height: max-content;
|
||||
align-items: center;
|
||||
}
|
||||
.swiper .swiper-slide {
|
||||
height: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.slider-before-after {
|
||||
|
|
@ -2398,6 +2335,12 @@ main .page__header .description {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.section--home#home__investigations .section--inner .section--inner {
|
||||
padding-top: calc(var(--spacing) * 1);
|
||||
}
|
||||
.section--home#home__investigations .section--inner .col-left {
|
||||
top: calc(var(--header-h) + var(--spacing) * 1.5);
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.section--home .card--article,
|
||||
|
|
@ -2511,26 +2454,35 @@ main .page__header .description {
|
|||
padding-top: calc(var(--spacing) * 4);
|
||||
}
|
||||
#investigation__content .section-content {
|
||||
padding-left: calc(var(--padding-body) * 1.5);
|
||||
padding-right: calc(var(--padding-body) * 1.5);
|
||||
margin-bottom: calc(var(--spacing) * 6);
|
||||
margin-bottom: calc(var(--spacing) * 4);
|
||||
}
|
||||
#investigation__content .section-content:target {
|
||||
padding-top: calc(var(--header-h) + var(--spacing) * 2);
|
||||
#investigation__content .section-title-only {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
#investigation__content .section-content:target {
|
||||
padding-top: calc(var(--header-h) + var(--spacing) * 0.5);
|
||||
}
|
||||
}
|
||||
#investigation__content .section-title {
|
||||
#investigation__content h3, #investigation__content h4, #investigation__content h5 {
|
||||
font-weight: 500;
|
||||
max-width: var(--max-w-content);
|
||||
margin-inline: auto;
|
||||
}
|
||||
#investigation__content h3 {
|
||||
margin-top: calc(var(--spacing) * 4);
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
font-size: var(--fs-medium);
|
||||
font-weight: 500;
|
||||
text-wrap: balance;
|
||||
max-width: var(--max-w-content);
|
||||
font-size: 1.45em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
#investigation__content h4 {
|
||||
margin-top: calc(var(--spacing) * 3);
|
||||
margin-bottom: calc(var(--spacing) * 1.5);
|
||||
font-size: 1.2em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
#investigation__content h5 {
|
||||
margin-top: calc(var(--spacing) * 1.5);
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
font-size: 1.2em;
|
||||
-webkit-text-decoration: 1px underline var(--grey-600);
|
||||
text-decoration: 1px underline var(--grey-600);
|
||||
text-underline-offset: 5px;
|
||||
}
|
||||
#investigation__content .section-txt {
|
||||
max-width: var(--max-w-content);
|
||||
|
|
@ -2540,8 +2492,6 @@ main .page__header .description {
|
|||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--padding-body);
|
||||
margin-bottom: calc(var(--spacing) * 4);
|
||||
margin-top: calc(var(--spacing) * 2);
|
||||
position: relative;
|
||||
}
|
||||
#investigation__content .subsection-w-media .media {
|
||||
|
|
@ -2603,6 +2553,10 @@ main .page__header .description {
|
|||
#investigation__content ul li {
|
||||
margin: calc(var(--spacing) * 0.5) 0;
|
||||
}
|
||||
#investigation__content .subsection-txt > :first-child,
|
||||
#investigation__content .section-content > :first-child {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.investigation__content:target {
|
||||
padding-top: calc(var(--header-h) * 2 + var(--spacing)) !important;
|
||||
|
|
@ -2614,15 +2568,12 @@ main .page__header .description {
|
|||
.media figure {
|
||||
height: auto;
|
||||
}
|
||||
.media .caption {
|
||||
.media figcaption, .media .caption {
|
||||
font-size: var(--fs-small);
|
||||
color: var(--color-txt-light);
|
||||
font-weight: 500;
|
||||
line-height: 1.1;
|
||||
}
|
||||
.media .swiper {
|
||||
width: calc(100% - 60px);
|
||||
max-width: 600px;
|
||||
margin: calc(var(--spacing) * 0.5) 0 !important;
|
||||
}
|
||||
|
||||
.content-package {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -10,7 +10,6 @@
|
|||
@import "components/buttons";
|
||||
@import "components/tags";
|
||||
@import "components/keywords";
|
||||
// @import "components/details-summary";
|
||||
@import "components/sort";
|
||||
@import "components/btn-group-mobile";
|
||||
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@
|
|||
grid-gap: var(--gap);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.col-left {
|
||||
align-self: start;
|
||||
position: sticky;
|
||||
|
|
@ -63,6 +63,13 @@
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
&#home__investigations .section--inner{
|
||||
.section--inner{ padding-top: calc(var(--spacing)*1); }
|
||||
.col-left{ top: calc(var(--header-h) + var(--spacing)*1.5); }
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,46 +4,55 @@
|
|||
padding-top: calc(var(--spacing) * 4);
|
||||
|
||||
.section-content {
|
||||
// min-height: calc(100vh - var(--header-h));
|
||||
padding-left: calc(var(--padding-body)*1.5);
|
||||
padding-right: calc(var(--padding-body)*1.5);
|
||||
margin-bottom: calc(var(--spacing)*6);
|
||||
&:target{
|
||||
padding-top: calc(var(--header-h) + var(--spacing)*2);
|
||||
@media #{$small}{ padding-top: calc(var(--header-h) + var(--spacing)*0.5); }
|
||||
}
|
||||
|
||||
|
||||
margin-bottom: calc(var(--spacing)*4);
|
||||
|
||||
}
|
||||
|
||||
.section-title-only{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
.section-title {
|
||||
|
||||
h3, h4, h5{
|
||||
font-weight: 500;
|
||||
max-width: var(--max-w-content);
|
||||
margin-inline: auto;
|
||||
margin-bottom: calc(var(--spacing)*2);
|
||||
|
||||
font-size: var(--fs-medium);
|
||||
|
||||
font-weight: 500;
|
||||
// text-transform: uppercase;
|
||||
text-wrap: balance;
|
||||
max-width: var(--max-w-content);
|
||||
}
|
||||
|
||||
.section-txt{
|
||||
max-width: var(--max-w-content);
|
||||
margin-inline: auto;
|
||||
|
||||
|
||||
|
||||
h3 {
|
||||
margin-top: calc(var(--spacing)*4);
|
||||
margin-bottom: calc(var(--spacing)*2);
|
||||
font-size: 1.45em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: calc(var(--spacing)*3);
|
||||
margin-bottom: calc(var(--spacing)*1.5);
|
||||
font-size: 1.2em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h5 {
|
||||
margin-top: calc(var(--spacing)*1.5);
|
||||
margin-bottom: calc(var(--spacing)*1);
|
||||
font-size: 1.2em;
|
||||
text-decoration: 1px underline var(--grey-600);
|
||||
text-underline-offset: 5px;
|
||||
}
|
||||
|
||||
.section-txt{
|
||||
max-width: var(--max-w-content);
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.subsection-w-media{
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--padding-body);
|
||||
margin-bottom: calc(var(--spacing)*4);
|
||||
margin-top: calc(var(--spacing)*2);
|
||||
position: relative;
|
||||
|
||||
|
||||
|
|
@ -122,6 +131,12 @@
|
|||
margin: calc(var(--spacing)*0.5) 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.subsection-txt > :first-child,
|
||||
.section-content > :first-child{
|
||||
margin-top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.investigation__content:target {
|
||||
|
|
@ -139,15 +154,16 @@
|
|||
height: auto;
|
||||
}
|
||||
|
||||
.caption{
|
||||
figcaption, .caption{
|
||||
font-size: var(--fs-small);
|
||||
color: var(--color-txt-light);
|
||||
font-weight: 500;
|
||||
line-height: 1.1;
|
||||
margin: calc(var(--spacing) * 0.5) 0!important;
|
||||
}
|
||||
|
||||
.swiper{
|
||||
width: calc(100% - 60px);
|
||||
max-width: 600px;
|
||||
}
|
||||
// .swiper{
|
||||
// width: calc(100% - 60px);
|
||||
// max-width: 600px;
|
||||
// }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -194,10 +194,10 @@
|
|||
}
|
||||
?>
|
||||
|
||||
<div class="section-content">
|
||||
<div class="section-content<?= ($hasHeading && !$hasOtherContent) ? ' section-title-only' : '' ?>">
|
||||
<?php foreach ($blocks as $block): ?>
|
||||
<?php if ($block->type() === 'heading'): ?>
|
||||
<<?= $block->level()->or('h3') ?> class="section-title"><?= $block->text() ?></<?= $block->level()->or('h3') ?>>
|
||||
<<?= $block->level()->or('h3') ?>><?= $block->text() ?></<?= $block->level()->or('h3') ?>>
|
||||
<?php elseif ($block->type() === 'text'): ?>
|
||||
<div class="section-txt">
|
||||
<?= $block->text() ?>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue