Antoine/carhop__carhop-theme__DEV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FEATURE Refining article-card aspect
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Antoine M 2025-10-22 16:43:03 +02:00
parent 1ec404e792
commit e9759b6e42
3 changed files with 24 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
resources/css/components/article-card.css
View File

@ -1,12 +1,21 @@
.article-card { .article-card {
@apply bg-white border border-primary p-6 relative !flex flex-col; @apply p-6 relative !flex flex-col pt-16;
&:after { svg {
@apply content-[''] absolute inset-0 border-primary w-full h-full pointer-events-none; @apply absolute top-0 left-0 w-full h-full;
border-width: 4px; z-index: -1;
opacity: 0; path {
stroke-width: 0;
vector-effect: non-scaling-stroke;
} }
}
&:hover { &:hover {
svg {
path {
stroke-width: 8px;
}
}
&:after { &:after {
opacity: 1; opacity: 1;
} }

3
resources/img/elements/fond-biseau.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="595" height="508" viewBox="0 0 595 508" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<path d="M594.5 506.914H0.5V17.2129L594.5 0.513672V506.914Z" fill="white" stroke="#136F63"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 227 B

10
template-parts/dynamiques/article-card.php
View File

@ -22,7 +22,7 @@ $cover = get_the_post_thumbnail_url($articleID);
<?php foreach ($terms as $term): ?> <?php foreach ($terms as $term): ?>
<li class="article-card__tag article-tag"> <li class="article-card__tag article-tag">
<a href="<?php echo add_query_arg('etiquette', $tag->slug, get_post_type_archive_link('articles')); ?>"> <a href="<?php echo add_query_arg('etiquette', $term->slug, get_post_type_archive_link('articles')); ?>">
<?php echo esc_html($term->name); ?> <?php echo esc_html($term->name); ?>
</a> </a>
</li> </li>
@ -42,6 +42,10 @@ $cover = get_the_post_thumbnail_url($articleID);
'label' => 'Lire la revue', 'label' => 'Lire la revue',
'target' => '_self', 'target' => '_self',
)); ?> )); ?>
<?php
$svg_path = get_template_directory() . '/resources/img/elements/fond-biseau.svg';
if (file_exists($svg_path)) {
echo file_get_contents($svg_path);
}
?>
</div> </div>