fix: complete mobile carousel and social updates
This commit is contained in:
Keith Solomon
@@ -75,6 +75,11 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.recent-posts__controls,
|
||||
.recent-posts__pagination {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.recent-posts__grid::before {
|
||||
background: var(--color-cwc-blue-03);
|
||||
content: "";
|
||||
@@ -273,10 +278,57 @@
|
||||
top: min(184px, calc(100cqw * 250 / 397));
|
||||
}
|
||||
|
||||
.recent-posts__card:nth-child(n + 2) {
|
||||
.recent-posts__card {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.recent-posts__card.is-active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.recent-posts__controls {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.recent-posts__control {
|
||||
align-items: center;
|
||||
background: var(--color-secondary);
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
color: var(--color-white);
|
||||
display: flex;
|
||||
height: 3rem;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: 10rem;
|
||||
width: 3rem;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.recent-posts__control:hover,
|
||||
.recent-posts__control:focus-visible {
|
||||
background: var(--color-secondary-800);
|
||||
}
|
||||
|
||||
.recent-posts__control svg {
|
||||
fill: none;
|
||||
height: 1.75rem;
|
||||
stroke: currentColor;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
stroke-width: 2.5;
|
||||
width: 1.75rem;
|
||||
}
|
||||
|
||||
.recent-posts__control--previous {
|
||||
left: -1.5rem;
|
||||
}
|
||||
|
||||
.recent-posts__control--next {
|
||||
right: -1.5rem;
|
||||
}
|
||||
|
||||
.recent-posts__image-link {
|
||||
border-radius: 0.5rem 0.5rem 0 0;
|
||||
}
|
||||
@@ -303,17 +355,38 @@
|
||||
.recent-posts__footer {
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
margin-top: 1.4rem;
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
|
||||
.recent-posts__footer::before {
|
||||
background:
|
||||
radial-gradient(circle, var(--color-cwc-blue-01) 0 0.2rem, transparent 0.22rem) left center / 0.75rem 0.5rem repeat-x;
|
||||
.recent-posts__pagination {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
justify-content: center;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.recent-posts__dot {
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
display: flex;
|
||||
height: 1.5rem;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.recent-posts__dot::before {
|
||||
background: var(--color-cwc-blue-01);
|
||||
border-radius: 50%;
|
||||
content: "";
|
||||
display: block;
|
||||
height: 0.5rem;
|
||||
width: 2.25rem;
|
||||
opacity: 0.45;
|
||||
width: 0.5rem;
|
||||
}
|
||||
|
||||
.recent-posts__dot.is-active::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.recent-posts__blog-link.button {
|
||||
|
||||
@@ -56,13 +56,15 @@ $wrapper = blockWrapperAttributes( $classes, $is_preview );
|
||||
<?php if ( $recent_posts->have_posts() ) : ?>
|
||||
<div class="recent-posts__grid">
|
||||
<?php
|
||||
$post_index = 0;
|
||||
while ( $recent_posts->have_posts() ) :
|
||||
$recent_posts->the_post();
|
||||
|
||||
$post_title = get_the_title();
|
||||
$post_permalink = get_permalink();
|
||||
$active_class = 0 === $post_index ? ' is-active' : '';
|
||||
?>
|
||||
<article class="recent-posts__card">
|
||||
<article class="recent-posts__card<?php echo esc_attr( $active_class ); ?>">
|
||||
<?php /* translators: %s: Post title. */ ?>
|
||||
<a class="recent-posts__image-link" href="<?php echo esc_url( $post_permalink ); ?>" aria-label="<?php echo esc_attr( sprintf( __( 'Continue reading %s', 'cwc' ), $post_title ) ); ?>">
|
||||
<?php if ( has_post_thumbnail() ) : ?>
|
||||
@@ -96,7 +98,34 @@ $wrapper = blockWrapperAttributes( $classes, $is_preview );
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
<?php endwhile; ?>
|
||||
<?php
|
||||
++$post_index;
|
||||
endwhile;
|
||||
?>
|
||||
|
||||
<div class="recent-posts__controls">
|
||||
<button class="recent-posts__control recent-posts__control--previous" type="button" aria-label="<?php echo esc_attr__( 'Previous article', 'cwc' ); ?>">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
|
||||
<path d="M15 5 8 12l7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
<button class="recent-posts__control recent-posts__control--next" type="button" aria-label="<?php echo esc_attr__( 'Next article', 'cwc' ); ?>">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
|
||||
<path d="m9 5 7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="recent-posts__pagination" aria-label="<?php echo esc_attr__( 'Choose an article', 'cwc' ); ?>">
|
||||
<?php for ( $dot_index = 0; $dot_index < $recent_posts->post_count; ++$dot_index ) : ?>
|
||||
<button
|
||||
class="recent-posts__dot<?php echo 0 === $dot_index ? ' is-active' : ''; ?>"
|
||||
type="button"
|
||||
aria-label="<?php echo esc_attr( sprintf( /* translators: %d: Article number. */ __( 'Show article %d', 'cwc' ), $dot_index + 1 ) ); ?>"
|
||||
<?php echo 0 === $dot_index ? ' aria-current="true"' : ''; ?>
|
||||
></button>
|
||||
<?php endfor; ?>
|
||||
</div>
|
||||
|
||||
<?php wp_reset_postdata(); ?>
|
||||
|
||||
@@ -1 +1 @@
|
||||
<i class="icon-facebook"></i>
|
||||
<img src="<?php echo esc_url( get_theme_file_uri( '/static/img/social-facebook.svg' ) ); ?>" alt="" width="24" height="24" aria-hidden="true" />
|
||||
|
||||
@@ -1 +1 @@
|
||||
<i class="icon-linkedin"></i>
|
||||
<img src="<?php echo esc_url( get_theme_file_uri( '/static/img/social-linkedin.svg' ) ); ?>" alt="" width="24" height="24" aria-hidden="true" />
|
||||
|
||||
@@ -1 +1 @@
|
||||
<i class="icon-youtube"></i>
|
||||
<img src="<?php echo esc_url( get_theme_file_uri( '/static/img/social-youtube.svg' ) ); ?>" alt="" width="24" height="24" aria-hidden="true" />
|
||||
|
||||
Reference in New Issue
Block a user