quarante-douze
/
qdouze2-wordpress-theme
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improvement: refonte page articles

This commit is contained in:
Kazhnuz Klappsthul 2022-12-18 14:39:50 +01:00
parent 6f5b37029d
commit 05848519af
5 changed files with 74 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
components/article.php
View File

@ -1,19 +1,22 @@
<?php include(TEMPLATEPATH . '/components/article/breadcrumb.php'); ?>
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<?php include(TEMPLATEPATH . '/components/article/flags.php'); ?>
<article class="article container-article" id="post-<?php the_ID(); ?>">
<article class="article container-article mb-1" id="post-<?php the_ID(); ?>">
<?php if ($haveTitle) { ?>
<h1 class="page-title"><?php the_title(); ?></h1>
<?php } ?>
<div class="thumbnail mb-half" aria-hidden="true">
<?php the_post_thumbnail( ); ?>
</div>
<div class="article-entry">
<?php the_content(); ?>
</div>
</article>
<section class="card card-noheader">
<section class="card card-noheader article-meta">
<div class="author-area">
<?php echo get_avatar( get_the_author_meta('user_email'), $size = '120'); ?>
<div class="author-metadata">
@ -22,14 +25,10 @@
</div>
</div>
<?php include(TEMPLATEPATH . '/components/article/description.php'); ?>
<div class="article-category">
<?php include(TEMPLATEPATH . '/components/article/terms.php'); ?>
</div>
</section>
<?php comments_template(); ?>
<?php endwhile; ?>
<?php endif; ?>

6
components/article/terms.php
View File

@ -2,18 +2,18 @@
if (has_category('chapters')) {
$romans = get_the_terms($post->ID, 'roman');
foreach( $romans as $roman ) {
echo "<a href= '" . esc_url( get_category_link( $roman->term_id ) ) . "' class='btn-small btn-primary'><i class='fa fa-book'></i> " . $roman->name . "</a>";
echo "<a href= '" . esc_url( get_category_link( $roman->term_id ) ) . "' class='badge btn-primary'><i class='fa fa-book'></i>&nbsp;" . $roman->name . "</a>";
}
} else {
$categories = get_the_category();
foreach( $categories as $category ) {
echo "<a href= '" . esc_url( get_category_link( $category->term_id ) ) . "' class='btn-small btn-primary'><i class='fa fa-folder'></i> " . $category->cat_name . "</a>";
echo "<a href= '" . esc_url( get_category_link( $category->term_id ) ) . "' class='badge btn-primary'><i class='fa fa-folder'></i>&nbsp;" . $category->cat_name . "</a>";
}
}
$tags = get_the_tags();
if ($tags) {
foreach( $tags as $tag ) {
echo "<a href= '" . esc_url( get_tag_link( $tag->term_id ) ) . "' class='btn-small btn-secondary'><i class='fa fa-tag'></i> " . $tag->name . "</a> ";
echo "<a href= '" . esc_url( get_tag_link( $tag->term_id ) ) . "' class='badge btn-secondary'><i class='fa fa-tag'></i>&nbsp;" . $tag->name . "</a> ";
}
}
?>

3
scss/_global.scss
View File

@ -3,4 +3,5 @@
**/
@import 'custom/global';
@import 'custom/previews';
@import 'custom/previews';
@import 'custom/article';

37
scss/custom/_article.scss Normal file
View File

@ -0,0 +1,37 @@
.article {
img {
max-width:100%;
height:auto;
margin:auto;
}
.thumbnail img {
width:100%;
aspect-ratio: 16 / 9;
border-radius: $card-radius;
object-fit: cover;
}
}
.article-meta {
.author-area {
display: flex;
align-items: center;
margin-bottom: $lineheight / 2;
img {
border-radius: 9999px;
width: $lineheight * 3;
height: auto;
margin: 0;
margin-right: $lineheight / 2;
}
}
.article-category {
.badge {
display: inline-block;
margin-bottom: $lineheight / 4;
}
}
}

26
style.css
View File

@ -2775,3 +2775,29 @@ footer {
font-size: 0.8rem;
line-height: 1.25rem;
color: rgba(33, 37, 41, 0.8); }
.article img {
max-width: 100%;
height: auto;
margin: auto; }
.article .thumbnail img {
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 8px;
object-fit: cover; }
.article-meta .author-area {
display: flex;
align-items: center;
margin-bottom: 0.8rem; }
.article-meta .author-area img {
border-radius: 9999px;
width: 4.8rem;
height: auto;
margin: 0;
margin-right: 0.8rem; }
.article-meta .article-category .badge {
display: inline-block;
margin-bottom: 0.4rem; }