✨feature: Style single post template

acf/group_60bfb84ae973c.json

@@ -26,7 +26,9 @@
             "ui": 0,
             "return_format": "value",
             "ajax": 0,
-            "placeholder": ""
+            "placeholder": "",
+            "create_options": 0,
+            "save_options": 0
         },
         {
             "key": "field_6478f669004aa",
@@ -44,7 +46,10 @@
             },
             "default_value": "",
             "enable_opacity": 0,
-            "return_format": "string"
+            "return_format": "string",
+            "custom_palette_source": "",
+            "palette_colors": "",
+            "show_color_wheel": true
         },
         {
             "key": "field_6478f68c004ab",
@@ -94,6 +99,35 @@
             "append": "",
             "maxlength": ""
         },
+        {
+            "key": "field_6a4ad339f75b8",
+            "label": "Subtitle",
+            "name": "subtitle",
+            "aria-label": "",
+            "type": "text",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": [
+                [
+                    {
+                        "field": "field_60bfda53dc0f2",
+                        "operator": "!=",
+                        "value": "none"
+                    }
+                ]
+            ],
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "default_value": "",
+            "maxlength": "",
+            "allow_in_bindings": 1,
+            "placeholder": "",
+            "prepend": "",
+            "append": ""
+        },
         {
             "key": "field_60bfb85a4a420",
             "label": "Intro",
@@ -202,7 +236,7 @@
             "name": "hero_vector",
             "aria-label": "",
             "type": "image",
-            "instructions": "Optional decorative linework/vector rendered on the right side of the hero.",
+            "instructions": "Optional decorative linework\/vector rendered on the right side of the hero.",
             "required": 0,
             "conditional_logic": [
                 [
@@ -256,5 +290,8 @@
     "active": true,
     "description": "",
     "show_in_rest": 0,
-    "modified": 1782918111
+    "display_title": "",
+    "allow_ai_access": false,
+    "ai_description": "",
+    "modified": 1783288661
 }

single.php

@@ -27,52 +27,30 @@ if ( hasSidebar() ) {
 				the_post();
 				?>
 
+                <div class="post-img">
+                    <?php if ( has_post_thumbnail() ) : ?>
+                        <img src="<?php the_post_thumbnail_url( 'full' ); ?>" alt="<?php the_title(); ?>" class="w-full h-auto mb-6">
+                    <?php endif; ?>
+                </div>
+
 				<div class="post-title mb-0">
-					<h1 class="mb-0"><?php the_title(); ?></h1>
+					<h1 class=""><?php the_title(); ?></h1>
+
+                    <div class="post-subtitle text-28px font-quincy font-bold m-0 mb-6 p-0 leading-none text-cwc-blue-02">
+                        <?php the_field( 'subtitle' ); ?>
+                    </div>
 				</div>
 
-				<div class="post-meta text-14px italic mb-6">
+				<div class="post-meta text-14px text-cwc-orange-01 uppercase font-bold mb-6">
 					<div class="">
 						<span class="post-date">Posted: <?php the_date(); ?></span> | <span class="post-author">Posted by: <?php echo esc_html( ucfirst( get_the_author() ) ); ?></span>
 					</div>
-
-					<div class="">
-						<span class="post-categories">
-							<?php
-							$categories = get_the_category();
-							if ( ! empty( $categories ) ) {
-								echo '<span>Posted in: ';
-								foreach ( $categories as $ct ) {
-									echo '<a href="' . esc_url( get_category_link( $ct->cat_ID ) ) . '">' . esc_html( $ct->name ) . '</a>';
-									if ( count( $categories ) > 1 && $ct !== end( $categories ) ) {
-										echo ', ';
-									}
-								}
-								echo '</span>';
-							}
-							?>
-						</span>
-						|
-						<span class="post-tags">
-							<?php
-							$tags = get_the_tags();
-							if ( ! empty( $tags ) ) {
-								echo '<span>Tagged: ';
-								foreach ( $tags as $tg ) {
-									echo '<a href="' . esc_url( get_tag_link( $tg->term_id ) ) . '">' . esc_html( $tg->name ) . '</a>';
-									if ( count( $tags ) > 1 && $tg !== end( $tags ) ) {
-										echo ', ';
-									}
-								}
-								echo '</span>';
-							}
-							?>
-						</span>
-					</div>
 				</div>
 
-				<?php
+                <div class="post-content font-light">
-				the_content();
+                    <?php the_content(); ?>
+                </div>
+                <?php
 			}
 		}
 		?>

styles/base/misc.css

@@ -3,3 +3,16 @@
 .social-icons svg {
     @apply bg-transparent fill-white rounded-full block;
 }
+
+.post-title h1 {
+    @apply mb-8 text-cwc-blue-01 leading-none;
+
+    &::after {
+        background: var(--color-secondary);
+        content: "";
+        display: block;
+        height: 4px;
+        margin-top: 0.45rem;
+        width: 3rem;
+    }
+}