feat(templates): namespace swap + dark surface + remove picsum fallbacks

404.php

@@ -2,11 +2,11 @@
 /**
  * Page Not Found
  *
- * @package SoloFrameEvo
+ * @package KsPortfolio
  * @since 1.0.0
  */
 
-namespace SoloFrameEvo;
+namespace KsPortfolio;
 
 get_header();
 ?>
@@ -20,8 +20,8 @@ get_header();
 	<p>
 	<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
 		<label>
-		<span class="screen-reader-text"><?php echo esc_html__( 'Search for:', 'label' ); ?></span>
-		Try searching for it: <input type="search" class="search-field border border-secondary px-2 rounded-md" placeholder="<?php echo esc_attr_x( 'Search &hellip;', 'placeholder' ); ?>" value="<?php echo get_search_query(); ?>" name="s" title="<?php echo esc_attr__( 'Search for:', 'label' ); ?>" />
+		<span class="screen-reader-text"><?php echo esc_html__( 'Search for:', 'ks-portfolio' ); ?></span>
+		Try searching for it: <input type="search" class="search-field border border-secondary px-2 rounded-md" placeholder="<?php echo esc_attr_x( 'Search &hellip;', 'placeholder' ); ?>" value="<?php echo get_search_query(); ?>" name="s" title="<?php echo esc_attr__( 'Search for:', 'ks-portfolio' ); ?>" />
 		</label>
 		<x-button
 		btnClasses="search-submit button text-center"

index.php

@@ -2,11 +2,11 @@
 /**
  * Blog posts list
  *
- * @package SoloFrameEvo
+ * @package KsPortfolio
  * @since 1.0.0
  */
 
-namespace SoloFrameEvo;
+namespace KsPortfolio;
 
 // Determine classes based on sidebar presence
 if ( hasSidebar() ) {
@@ -29,17 +29,16 @@ get_header();
 						the_post();
 						?>
 						<div class="post-list__post flex flex-col border border-secondary rounded-md shadow-lg hover:prose-img:scale-110 hover:prose-img:origin-center hover:prose-img:duration-500">
-							<figure class="post-list__img aspect-video border-b border-secondary rounded-t-md block h-auto w-full overflow-hidden m-0 p-0">
 							<?php if ( has_post_thumbnail() ) : ?>
+								<figure class="post-list__img aspect-video border-b border-secondary rounded-t-md block h-auto w-full overflow-hidden m-0 p-0">
 									<?php
-										$featImg = get_the_post_thumbnail_url();
-										$postImg = $featImg ? $featImg : 'https://picsum.photos/600/400?random=' . get_the_ID();
+										$postImg = get_the_post_thumbnail_url();
 										$imgAlt  = get_post_meta( get_post_thumbnail_id(), '_wp_attachment_image_alt', true ) ?? get_the_title();
 									?>
 
 									<img class="block h-full object-cover transition-transform duration-300 ease-linear w-full will-change-transform" src="<?php echo esc_url( $postImg ); ?>" alt="<?php echo esc_attr( $imgAlt ); ?>">
-								<?php endif; ?>
 								</figure>
+							<?php endif; ?>
 
 							<div class="post-list__details px-4 py-8 flex flex-col grow">
 								<div class="post-list__cats">

page.php

@@ -2,11 +2,11 @@
 /**
  * Single Pages
  *
- * @package SoloFrameEvo
+ * @package KsPortfolio
  * @since 1.0.0
  */
 
-namespace SoloFrameEvo;
+namespace KsPortfolio;
 
 get_header();
 

search.php

@@ -2,11 +2,11 @@
 /**
  * Blog search template
  *
- * @package SoloFrameEvo
+ * @package KsPortfolio
  * @since 1.0.0
  */
 
-namespace SoloFrameEvo;
+namespace KsPortfolio;
 
 // Determine classes based on sidebar presence
 if ( hasSidebar() ) {
@@ -29,15 +29,16 @@ get_header();
 						the_post();
 						?>
 						<div class="post-list__post flex flex-col border border-secondary rounded-md shadow-lg hover:prose-img:scale-110 hover:prose-img:origin-center hover:prose-img:duration-500">
+							<?php if ( has_post_thumbnail() ) : ?>
 								<figure class="post-list__img aspect-video border-b border-secondary rounded-t-md block h-auto w-full overflow-hidden m-0 p-0">
 									<?php
-								$featImg = get_the_post_thumbnail_url();
-								$postImg = $featimg ? $featImg : 'https://picsum.photos/600/400?random=' . get_the_ID();
+									$postImg = get_the_post_thumbnail_url();
 									$imgAlt  = get_post_meta( get_post_thumbnail_id(), '_wp_attachment_image_alt', true ) ?? get_the_title();
 									?>
 
 									<img class="block h-full object-cover transition-transform duration-300 ease-linear w-full will-change-transform" src="<?php echo esc_url( $postImg ); ?>" alt="<?php echo esc_attr( $imgAlt ); ?>">
 								</figure>
+							<?php endif; ?>
 
 							<div class="post-list__details px-4 py-8 flex flex-col flex-grow">
 									<?php

single.php

@@ -2,11 +2,11 @@
 /**
  * Single Posts
  *
- * @package SoloFrameEvo
+ * @package KsPortfolio
  * @since 1.0.0
  */
 
-namespace SoloFrameEvo;
+namespace KsPortfolio;
 
 get_header();
 

styles/components/index.css

@@ -7,3 +7,4 @@
 @import "./pagination.css";
 @import "./site-footer.css";
 @import "./project-card.css";
+@import "./page-hero.css";

styles/components/page-hero.css

@@ -0,0 +1,10 @@
+/* Page Hero partial styles */
+
+.page-hero {
+	background: var(--color-surface-container-low, #1a1b21);
+	color: var(--color-on-surface, #e3e1e9);
+	border-bottom: 1px solid var(--color-outline-variant, #444651);
+	margin-bottom: 2rem;
+}
+.page-hero__title { color: var(--color-on-surface, #e3e1e9); font-family: var(--font-sans); font-weight: 700; }
+.page-hero__intro { color: var(--color-on-surface-variant, #c5c5d3); }

views/partials/page-hero.php

@@ -2,10 +2,10 @@
 /**
  * Page Hero Partial
  *
- * @package SoloFrameEvo
+ * @package KsPortfolio
  */
 
-namespace SoloFrameEvo;
+namespace KsPortfolio;
 
 // Set variables
 $bgColor = get_field( 'background_color' );
@@ -24,7 +24,7 @@ if ( is_home() || is_single() || is_archive() || is_search() || is_404() ) {
 }
 ?>
 
-<div class="bg-cover bg-no-repeat mb-12 py-12 lg:py-16 bg-dark text-light overflow-hidden <?php echo $isDark ? 'dark' : ''; ?>" <?php echo $bgColor ? 'style="background-color: ' . esc_attr( $bgColor ) . '"' : ''; ?>>
+<section class="page-hero py-12 lg:py-16 <?php echo $isDark ? 'dark' : ''; ?>" <?php echo $bgColor ? 'style="background-color: ' . esc_attr( $bgColor ) . '"' : ''; ?>>
 
 	<div class="container mx-auto">
 		<div id="breadcrumbs">
@@ -35,22 +35,22 @@ if ( is_home() || is_single() || is_archive() || is_search() || is_404() ) {
 			<?php
 			// Heading
 			if ( apply_filters( 'include_page_title_in_hero', true ) ) {
-				echo '<h1 class="mx-auto text-center text-light font-normal text-4xl sm:text-5xl lg:text-6xl xl:text-7xl">';
+				echo '<h1 class="mx-auto text-center page-hero__title font-normal text-4xl sm:text-5xl lg:text-6xl xl:text-7xl">';
 				echo wp_kses_post( $heading );
 				echo '</h1>';
 			} else {
-				echo '<span class="mx-auto block text-center text-light font-normal text-4xl sm:text-5xl lg:text-6xl xl:text-7xl">';
+				echo '<span class="mx-auto block text-center page-hero__title font-normal text-4xl sm:text-5xl lg:text-6xl xl:text-7xl">';
 				echo wp_kses_post( $heading );
 				echo '</span>';
 			}
 
 			// Intro
 			if ( $intro ) {
-				echo '<p class="mt-3 text-base text-light sm:mt-5 sm:text-xl lg:text-lg xl:text-xl text-center">';
+				echo '<p class="mt-3 text-base page-hero__intro sm:mt-5 sm:text-xl lg:text-lg xl:text-xl text-center">';
 				echo wp_kses_post( $intro );
 				echo '</p>';
 			}
 			?>
 		</div>
 	</div>
-</div>
+</section>