1.0.2

category.php

@@ -0,0 +1,73 @@
+<?php get_header(); ?>
+
+<?php
+	$curr_cat = get_category( $cat );
+	$cat_name = ( $curr_cat ) ? $curr_cat->slug : '';
+	$loop_featured = new WP_Query(
+		array(
+			'category_name' => $cat_name,
+			'posts_per_page' => 2,
+		));
+	$ids = array();
+?>
+
+<div class="content">
+
+	<?php get_template_part('inc/page-title'); ?>
+	
+	<div class="featured-card-category group">
+		<?php
+			while ( $loop_featured->have_posts() ) : $loop_featured->the_post();
+				$ids[] = get_the_ID();
+				get_template_part('content-featured-category');
+			endwhile;
+			wp_reset_postdata();
+		?>
+	</div>
+	
+	<?php
+		if ( get_query_var('paged') ) {
+			$paged = get_query_var('paged');
+		} elseif ( get_query_var('page') ) { // 'page' is used instead of 'paged' on Static Front Page
+			$paged = get_query_var('page');
+		} else {
+			$paged = 1;
+		}
+
+		$custom_query_args = array(
+			'post_type' => 'post', 
+			'posts_per_page' => get_option('posts_per_page'),
+			'paged' => $paged,
+			'post_status' => 'publish',
+			'ignore_sticky_posts' => true,
+			'post__not_in' => $ids,
+			'category_name' => $cat_name,
+			'order' => 'DESC',
+			'orderby' => 'date'
+		);
+		$custom_query = new WP_Query( $custom_query_args );
+
+		if ( $custom_query->have_posts() ) :
+	?>
+	
+	<?php while( $custom_query->have_posts() ) : $custom_query->the_post(); ?>
+		<?php get_template_part('content'); ?>
+	<?php endwhile; ?>
+	
+	<?php if ($custom_query->max_num_pages > 1) : // custom pagination  ?>
+	<?php
+		$orig_query = $wp_query; // fix for pagination to work
+		$wp_query = $custom_query;
+	?>
+	<?php get_template_part('inc/pagination'); ?>
+
+	<?php $wp_query = $orig_query; // fix for pagination to work ?>
+	<?php endif; ?>
+
+	<?php wp_reset_postdata(); endif; ?>
+
+</div><!--/.content-->
+
+<?php get_sidebar(); ?>
+
+<?php get_footer(); ?>

content-featured-category.php

@@ -0,0 +1,26 @@
+<?php $format = get_post_format(); ?>
+
+<div class="featured-card-outer">
+	<div class="featured-card">
+
+		<div class="featured-card-image-wrapper">
+			<div class="featured-card-image" style="background-image:url('<?php if ( has_post_thumbnail() ): ?><?php the_post_thumbnail_url('incolor-medium'); ?><?php else: ?><?php echo esc_url( get_template_directory_uri() ); ?>/img/thumb-medium.png<?php endif; ?>');">
+				<a class="featured-card-link" href="<?php the_permalink(); ?>"></a>
+				<?php if ( has_post_format('video') && !is_sticky() ) echo'<span class="thumb-icon small"><i class="fas fa-play"></i></span>'; ?>
+				<?php if ( has_post_format('audio') && !is_sticky() ) echo'<span class="thumb-icon small"><i class="fas fa-volume-up"></i></span>'; ?>
+				<?php if ( is_sticky() ) echo'<span class="thumb-icon small"><i class="fas fa-star"></i></span>'; ?>
+			</div>
+			<?php if ( comments_open() && ( get_theme_mod( 'comment-count', 'on' ) =='on' ) ): ?>
+				<a class="card-comments" href="<?php comments_link(); ?>"><i class="fas fa-comment"></i><span><?php comments_number( '0', '1', '%' ); ?></span></a>
+			<?php endif; ?>
+		</div>
+		
+		<div class="featured-card-content">
+			<div class="featured-card-category"><?php the_category(' / '); ?></div>
+			<h2 class="featured-card-title">
+				<a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a>
+			</h2>
+		</div>
+		
+	</div>
+</div>

languages/incolor.pot

@@ -2,7 +2,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Incolor\n"
-"POT-Creation-Date: 2021-08-21 11:27+0200\n"
+"POT-Creation-Date: 2021-08-22 17:50+0200\n"
 "PO-Revision-Date: 2018-09-21 21:27+0100\n"
 "Last-Translator: \n"
 "Language-Team: \n"

readme.txt

@@ -8,7 +8,7 @@ Tags: blog, one-column, two-columns, right-sidebar, left-sidebar, custom-colors,
 
 == Description ==
 
-Incolor is a flexible blog and magazine theme built with only semi-transparent elements, which means you can set it to any background color you want and it will look great. You can also pick accent color, set sidebar to the left or right and choose website max-width with a few clicks. Demo: http://demo.alx.media/x/?theme=Incolor
+Incolor is a flexible blog and magazine theme built with only semi-transparent elements, which means you can set any background colors you want and it will look great. Choose colors for body, header, carousel, content, sidebar widgets, footer and more. You can also pick accent color, set sidebar to the left or right and choose website max-width with a few clicks. Give it a try! Demo: http://demo.alx.media/x/?theme=Incolor
 
 == Installation ==
 
@@ -87,6 +87,9 @@ Sidebar images
 
 == Changelog ==
 
+= 1.0.2 - 2021-08-22 =
+* Added new styling for category pages with two large entries up top (the latest posts)
+
 = 1.0.1 - 2021-08-21 =
 * Added several more styling layout color options
 

responsive.css

@@ -58,6 +58,7 @@
 	
 	.container { padding: 0; }
 	.grid { width: 100%; margin: 0 0 10px; }
+	.sidebar.s1 { padding-top: 40px; }
 	.sidebar .widget { padding-left: 20px; padding-right: 20px; }
 	.pagination { margin-left: 20px; margin-right: 20px; }
 	
@@ -175,7 +176,7 @@
 	
 	/* blog */
 	.featured-card { margin-left: 10px; margin-right: 10px; }
-	.featured-card-image-wrapper { height: 130px; }
+	.featured-card-image-wrapper { height: 160px; }
 	.featured-card-title { font-size: 16px; height: 92px; }
 	.slick-posts { padding-top: 20px; padding-bottom: 20px; }
 	
@@ -188,6 +189,12 @@
 	#page { padding: 30px 20px; }
 	.front-widgets { padding: 10px 15px 10px 15px; }
 	
+	/* category */
+	.featured-card-category .featured-card-outer { width: 100%; margin: 20px 0 0; }
+	.featured-card-category .featured-card-outer:nth-child(1) .featured-card { margin-right: 0; }
+	.featured-card-category .featured-card-outer:nth-child(2) .featured-card { margin-left: 0; }
+	.featured-card-category .featured-card-image-wrapper { height: 160px; }
+	
 	/* single */
 	.entry-header .entry-title { font-size: 22px; letter-spacing: 0; }
 	.sharrre-header { float: none; width: 100%; padding-top: 10px; }

style.css

@@ -1,11 +1,11 @@
 /*
 Theme Name: Incolor
 Theme URI: http://alx.media/themes/incolor/
-Version: 1.0.1
+Version: 1.0.2
 Requires at least: 5.0
 Requires PHP: 5.6
 Tested up to: 5.8
-Description: <a href="http://alx.media/themes/incolor/">Incolor</a> is a flexible blog and magazine theme built with only semi-transparent elements, which means you can set it to any background color you want and it will look great. You can also pick accent color, set sidebar to the left or right and choose website max-width with a few clicks. Demo: http://demo.alx.media/x/?theme=Incolor
+Description: <a href="http://alx.media/themes/incolor/">Incolor</a> is a flexible blog and magazine theme built with only semi-transparent elements, which means you can set any background colors you want and it will look great. Choose colors for body, header, carousel, content, sidebar widgets, footer and more. You can also pick accent color, set sidebar to the left or right and choose website max-width with a few clicks. Give it a try! Demo: http://demo.alx.media/x/?theme=Incolor
 Author: Alexander Agnarson
 Author URI: http://alx.media
 Tags: blog, one-column, two-columns, right-sidebar, left-sidebar, custom-colors, custom-menu, featured-images, flexible-header, full-width-template, post-formats, sticky-post, theme-options, threaded-comments, translation-ready, custom-logo, custom-header, custom-background
@@ -475,7 +475,7 @@ box-shadow: inset 0 1px 1px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.03); }
 
 /*  common : thumb icon
 /* ------------------------------------ */
-.thumb-icon { background: rgba(0,0,0,0.7); color: #fff; text-align: center; display: block; width: 32px; height: 32px; position: absolute; bottom: 50%; left: 50%; margin-left: -16px; margin-bottom: -16px;
+.thumb-icon { background: rgba(0,0,0,0.7); pointer-events: none; color: #fff; text-align: center; display: block; width: 32px; height: 32px; position: absolute; bottom: 50%; left: 50%; margin-left: -16px; margin-bottom: -16px;
 -webkit-border-radius: 4px; border-radius: 4px;
 -moz-transition: all 0.7s ease; -webkit-transition: all 0.7s ease; transition: all 0.7s ease;
 -webkit-box-shadow: 0 0 2px rgba(255,255,255,0.4);
@@ -754,10 +754,16 @@ box-shadow: 0 0 2px rgba(255,255,255,0.4);
 .featured-card-title { font-size: 18px; line-height: 1.5em; text-transform: uppercase; font-weight: 600; height: 80px; overflow: hidden; }
 .featured-card-title a { color: #fff; position: relative; }
 
+body.category.paged .featured-card-category { display: none; }
+.featured-card-category .featured-card-outer { margin: 30px 0; float: left; width: 50%; }
+.featured-card-category .featured-card { margin: 0; }
+.featured-card-category .featured-card-outer:nth-child(1) .featured-card { margin-right: 20px; }
+.featured-card-category .featured-card-outer:nth-child(2) .featured-card { margin-left: 20px; }
+
 .card-comments { background: #009ae4; color: #fff; padding: 1px 8px; position: absolute; right: 0; top: 20px; transition: all 0.2s ease; }
 .card-comments:hover span { padding-right: 10px; }
 .card-comments span { color: #fff; font-size: 12px; font-weight: 600; transition: all 0.2s ease; }
-.card-comments i { margin-right: 4px; position: relative; top: 2px; }
+.card-comments i { color: #fff; margin-right: 4px; position: relative; top: 2px; }
 .card-comments:before { content:""; position: absolute; left: -8px; top: 3px; display: block; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid #009ae4; z-index: 2; }
 .card-comments:after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border: 1px solid hsla(0,0%,100%,.3); transition: color .2s,background-color .2s,border-color .2s; pointer-events: none; z-index: 1; }