05-10-2023

midkiffaries · May 11, 2023 · 222f4f9 · 222f4f9
1 parent 61cf464
commit 222f4f9
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 16 deletions.
diff --git a/archive-portfolio.php b/archive-portfolio.php
@@ -18,22 +18,14 @@
 
     <?php while (have_posts()) : the_post(); // Display portfolio items ?>
     <div <?php post_class(); ?> id="post-<?=the_ID(); ?>">
-            <div class="post-container">
-                <a href="<?=esc_url(the_permalink()); ?>" rel="bookmark" class="portfolio-thumbnail" style="<?=FeaturedImageURL(get_the_ID(), 'medium', true); ?>">
+            <div class="portfolio-container">
+                <a href="<?=esc_url(the_permalink()); ?>" rel="bookmark" itemprop="url" class="portfolio-thumbnail" style="<?=FeaturedImageURL(get_the_ID(), 'medium', true); ?>">
                     <div class="portfolio-sticky"><?php if(is_sticky( get_the_ID() )) : // If sticky portfolio item ?>Featured Item<?php endif; ?>&nbsp;</div>
-                </a>
-                <header class="portfolio-header">
-                    <div class="portfolio-date"><time datetime="<?=get_the_date('c'); ?>" itemprop="datePublished"><?=the_date(); ?></time></div>
-                    <h2 class="portfolio-title" id="<?=$post->post_name; ?>" itemprop="name"><a href="<?=esc_url(the_permalink()); ?>" rel="bookmark" itemprop="url"><?=the_title(); ?></a></h2>
-                    <div class="portfolio-metadata">
-                        <span class="portfolio-author">By <a href="<?=get_author_posts_url( get_the_author_meta( 'ID' ), get_the_author_meta( 'user_nicename' ) ); ?>" itemprop="author" rel="author"><?php the_author(); ?></a></span>
+                    <div class="portfolio-info">
+                        <h2 class="portfolio-title" id="<?=$post->post_name; ?>" itemprop="name"><?=the_title(); ?></h2>
+                        <div class="portfolio-author">By <?php the_author(); ?></div>
                     </div>
-                </header>
-                <div class="the-content content-excerpt" itemprop="text description ">
-                    <p><?=shorten_the_content($post->post_content); ?></p>
-                </div>
-                <footer class="portfolio-footer hidden">
-                </footer>
+                </a>
             </div>
         </div>
     <?php endwhile; ?>

diff --git a/archive.php b/archive.php
@@ -56,7 +56,7 @@
     <?php while (have_posts()) : the_post(); // Display blog posts ?>
         <article <?php post_class(); ?> id="post-<?=the_ID(); ?>" itemscope itemtype="https://schema.org/NewsArticle">
             <div class="post-container">
-                <a href="<?=esc_url(the_permalink()); ?>" rel="bookmark" class="entry-thumbnail" style="<?=FeaturedImageURL(get_the_ID(), 'medium', true); ?>">
+                <a href="<?=esc_url(the_permalink()); ?>" rel="bookmark" itemprop="url" class="entry-thumbnail" style="<?=FeaturedImageURL(get_the_ID(), 'medium', true); ?>">
                     <div class="entry-sticky"><?php if(is_sticky( get_the_ID() )) : // If sticky post ?>Featured Article<?php endif; ?>&nbsp;</div>
                 </a>
                 <header class="entry-header">

diff --git a/assets/css/layout.css b/assets/css/layout.css
@@ -731,6 +731,91 @@ Entry Social Sharing Styling
 }
 
 
+/*********************************** 
+Portfolio Page Styling
+************************************/
+
+.portfolio-page {
+	display: grid;
+	grid-template-columns: auto auto auto;
+	gap: 1em;
+}
+
+.portfolio-page > div {
+
+}
+
+/* Entry Featured Image as a background element */
+.portfolio-thumbnail {
+    width: 300px;
+    height: 300px;
+	border-radius: 0.3rem;
+	display: block;
+	background-repeat: no-repeat;
+	background-position: center center;
+    background-size: 150%;
+    background-color: var(--brand-color-dark);
+    background-image: var(--featured-img-bg);
+	text-decoration: none;
+	transition: all 0.4s ease-in-out;
+}
+
+.portfolio-thumbnail:hover {
+	background-size: 170%;
+}
+
+.portfolio-thumbnail:active {
+	filter: brightness(104%);
+}
+
+.portfolio-thumbnail:is([style$='.png)'],[style$='.gif)'],[style$='.svg)']) {
+	background-size: 85%;
+}
+
+.portfolio-thumbnail:is([style$='.png)'],[style$='.gif)'],[style$='.svg)']):hover {
+	background-size: 105%;
+}
+
+.portfolio-info {
+	background-color: rgba(0,0,0,0.5);
+	text-align: center;
+	padding: 5px;
+	-webkit-backdrop-filter: blur(3px);
+	backdrop-filter: blur(3px);
+	border-top: 1px solid #ddd;
+	border-bottom: 1px solid #ddd;
+}
+
+.portfolio-title {
+	font-size: 1.5rem;
+	font-weight: 700;
+	color: #fff;
+	line-height: 1;
+	margin: 0;
+	text-shadow: 1px 1px 0 #000;
+}
+
+.portfolio-author {
+	color: rgba(255,255,255,0.8);
+	font-size: 0.8rem;
+}
+
+@media (max-width: 849px) {
+	.portfolio-thumbnail {
+		width: 100%;
+		height: 9em;
+		margin-bottom: 0.8em;
+	}
+
+	.portfolio-title {
+		font-size: 0.9rem;
+	}
+	.portfolio-author {
+		font-size: 0.7rem;
+	}
+}
+
+
 /***************************** 
 WordPress Generated Components
 *****************************/

diff --git a/index.php b/index.php
@@ -15,7 +15,7 @@
     <?php while (have_posts()) : the_post(); // List all the posts ?>
         <article <?php post_class(); ?> id="post-<?php the_ID(); ?>" itemscope itemtype="https://schema.org/NewsArticle">
             <div class="post-container">
-                <a href="<?php the_permalink(); ?>" rel="bookmark" class="entry-thumbnail" style="<?php echo FeaturedImageURL(get_the_ID(), 'medium', true); ?>">
+                <a href="<?php the_permalink(); ?>" rel="bookmark" itemprop="url" class="entry-thumbnail" style="<?php echo FeaturedImageURL(get_the_ID(), 'medium', true); ?>">
                     <?php if (is_sticky( get_the_ID() )) : // If sticky/featured post ?><div class="entry-sticky">Featured Article</div><?php endif; ?>
                 </a>
                 <header class="entry-header">