Add more link arrow to featured posts carousel on mobile

This commit is contained in:
Alexander Agnarson 2024-04-16 13:11:48 +02:00
parent 794e5d1054
commit 552df9aa1d
4 changed files with 14 additions and 5 deletions

View file

@ -20,8 +20,11 @@
</h3>
<div class="featured-card-date"><?php the_time( get_option('date_format') ); ?></div>
</div>
<a class="featured-card-more" href="<?php the_permalink(); ?>"><i class="fas fa-arrow-right"></i></a>
</div>
</div>

View file

@ -126,6 +126,7 @@ body.boxed #header { max-width: '.esc_attr( get_theme_mod('container-width') ).'
.blog-card-bottom,
.blog-card-bottom-list li.blog-card-more a,
.blog-card-date,
.featured-card-more,
.alx-tabs-nav,
.alx-posts img,
.author-bio,
@ -153,7 +154,8 @@ body.boxed #header { max-width: '.esc_attr( get_theme_mod('container-width') ).'
.commentlist li.bypostauthor > .comment-body:after,
.commentlist li.comment-author-admin > .comment-body:after,
.themeform input[type="submit"],
.blog-card-bottom-list li.blog-card-more a { background-image: linear-gradient(90deg, '.esc_attr( get_theme_mod('gradient-left') ).' 0%, '.esc_attr( get_theme_mod('gradient-right') ).' 100%)!important; }
.blog-card-bottom-list li.blog-card-more a,
.featured-card-more { background-image: linear-gradient(90deg, '.esc_attr( get_theme_mod('gradient-left') ).' 0%, '.esc_attr( get_theme_mod('gradient-right') ).' 100%)!important; }
'."\n";
}
// gradient right
@ -164,7 +166,8 @@ body.boxed #header { max-width: '.esc_attr( get_theme_mod('container-width') ).'
.commentlist li.bypostauthor > .comment-body:after,
.commentlist li.comment-author-admin > .comment-body:after,
.themeform input[type="submit"],
.blog-card-bottom-list li.blog-card-more a { background-image: linear-gradient(90deg, '.esc_attr( get_theme_mod('gradient-left') ).' 0%, '.esc_attr( get_theme_mod('gradient-right') ).' 100%)!important; }
.blog-card-bottom-list li.blog-card-more a,
.featured-card-more { background-image: linear-gradient(90deg, '.esc_attr( get_theme_mod('gradient-left') ).' 0%, '.esc_attr( get_theme_mod('gradient-right') ).' 100%)!important; }
'."\n";
}
// header logo max-height

View file

@ -47,6 +47,7 @@
.entry-header .entry-title { font-size: 32px; }
.featured-card-more { display: block; }
.slick-featured .slick-posts-nav { position: relative; left: auto; right: auto; bottom: -40px; text-align: center; width: 70px; margin: 0 auto; }
.featured-card { padding-right: 0; }
@ -91,6 +92,7 @@
.site-header { margin-bottom: 0; }
#theme-toggle { left: -10px; bottom: 10px; }
.featured-card-title { min-height: 68px; max-height: 68px; overflow: hidden; }
.slick-featured,
.blog-card { margin-top: 10px; margin-left: 10px; margin-right: 10px; }
.blog-card-single-content { margin-left: 10px; margin-right: 10px; }

View file

@ -462,7 +462,7 @@ body { background: #f6f7fa; }
.slick-featured { background: #fff; margin-bottom: 80px; position: relative; box-shadow: 0 0 0 1px #12376914,0 1px 1px #1237690a,0 3px 3px #12376908,0 6px 4px #12376905,0 11px 4px #12376903; }
.featured-card { position: relative; margin: 20px; }
.featured-card-inner { padding-left: 100px; min-height: 84px; }
.featured-card-inner { padding-left: 100px; min-height: 84px; position: relative; }
.featured-card-left { position: absolute; left: 0; top: 0; }
.featured-card-thumb { width: 84px; height: 84px; border: 1px solid rgba(0,0,0,0.06); border-radius: 100%; padding: 5px; box-sizing: border-box; }
.featured-card-thumb a { display: block; border-radius: 100%; overflow: hidden; width: 100%; height: 100%; }
@ -473,7 +473,8 @@ body { background: #f6f7fa; }
.featured-card-thumb-empty i { position: absolute; top: 50%; margin: -12px 0 0 -12px; }
.featured-card-right { padding-top: 4px; }
.featured-card-title { font-weight: 600; font-size: 16px; }
.featured-search { padding: 10px 0 40px; }
.featured-card-more { display: none; background-image: linear-gradient(90deg, #be1e1e 0%, #ff0000 100%); color: #fff; padding: 8px 20px; position: absolute; right: -20px; bottom: -20px; }
.featured-card-more:hover { color: #fff; padding-right: 26px; }
.blog-card { background: #fff; display: flex; min-height: 620px; position: relative; margin-bottom: 100px; box-shadow: 0 0 0 1px #12376914,0 1px 1px #1237690a,0 3px 3px #12376908,0 6px 4px #12376905,0 11px 4px #12376903; }
.blog-card:before { content:""; background: url(img/dot-pattern-dark-2x.png) repeat top left; background-size: 10px 10px; position: absolute; left: 100px; right: 100px; bottom: -60px; height: 40px; width: auto; z-index: -2; opacity: 0.08; }