Blacksmith Agency Requested Code Samples

_front-page-hero.scss

.hero {
	display: block;
	height: Max(100vh, 600px);

	.hero-animation-container {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		height: 100%;

		.logo-container {
			height: 4.5rem;
			margin-bottom: calc(3rem + 5.2083vh);
			@include breakpoint(md) {
				margin-bottom: 6rem;
			}
		
			@include breakpoint(md) {
				height: 6rem;
			}
		
			@include breakpoint(lg) {
				display: none;
			}
		
			svg {
				width: auto;
				height: 100%;
			}
		}

		.hero-bottom {
			margin-top: auto;
		}

		.hero-circle {
			right: 0;
			bottom: 0;
		}
	}
}

.hero-firstname,
.hero-lastname,
.hero-jobtitle {
	display: flex;
	overflow: hidden;
	font-size: 0;
	color: $offblack;
	&.display-text {
		.split-text {
			letter-spacing: -0.02em;
		}
	}

	.split-text {
		position: relative;
		display: inline-block;
		letter-spacing: -0.03em;
		transform: translateY(200px);
	}
}

.hero-logo-container, .hero-arrow-container {
	opacity: 0;
}

.hero-arrow-placer {
	width: 7rem;
	height: 7rem;
	position: fixed;
	right: $sm-x;
	bottom: 5.556vh;
	z-index: 2;
	@include breakpoint(md) {
		right: $md-x;
		bottom: 9.765625vh;
	}
	@include breakpoint(lg) {
		right: $lg-x;
		bottom: 7.32064421vh;
	}
	@include breakpoint(xl) {
		width: 6.944444444vw;
		height: 6.944444444vw;
		right: $xl-x;
		bottom: 4.16667vh;
	}
	@include breakpoint(xxl) {
		right: $xxl-x;
	}
}

.hero-arrow-container {
	width: 1.8rem;
	display: block;
	position: relative;
	top: 52%;
	left: 50%;
	transform: translate(-50%, -50%);
	cursor: pointer;
	@include breakpoint(xl) {
		width: 1.875vw;
	}
}

cym_section_by_section_locomotive.js

// Create a new Locomotive Scroll object via a data-scroll-container
const lscroll = new LocomotiveScroll({
    el: document.querySelector('[data-scroll-container]'),
    smooth: true,
    direction: 'horizontal'
});

// Prevent Locomotive Scroll from moving on its own
lscroll.stop();

// Throttle the wheel inputs, check direction scrolled, and move scrtions accordingly
window.addEventListener(
    "wheel",
    _.throttle(
        function (e) {
            let direction = checkScrollDirection(e);
            if (direction === "up") {
                lscroll.scrollTo(prevSection, {
                    offset: -90,
                });
                currentSectionNum--;
                if (currentSectionNum < 0) {
                    currentSectionNum = 0;
                }
                if (currentSectionNum === 0) {
                    prevSection = sections[0];
                } else {
                    prevSection = sections[currentSectionNum - 1];
                }
                nextSection = sections[currentSectionNum + 1];

            } else if (direction === "down") {
                lscroll.scrollTo(nextSection, {
                    offset: -90,
                });
                currentSectionNum++;
                if (currentSectionNum >= sections.length) {
                    currentSectionNum = sections.length - 1;
                }
                prevSection = sections[currentSectionNum - 1];
                if (currentSectionNum === sections.length - 1) {
                    nextSection = sections[sections.length - 1];
                } else {
                    nextSection = sections[currentSectionNum + 1];
                }
            }
        },
        1500,
        {
            trailing: false
        }
    )
);

// Helper function for easier readability
function checkScrollDirection(e) {
    if (e.deltaY < 0) {
        return "up";
    }
    else if (e.deltaY > 0) {
        return "down";
    }
}

filter-by-category.php

<?php
/**
 * Shopping Page
 *
 * @category   Page
 * @package    WordPress
 * @subpackage courtyardplaza
 */

?>

<?php get_header(); ?>

<main class="shopping-main">

	<div class="hero-img-secondary" style="background-image: url('
		<?php
		if ( has_post_thumbnail() ) {
			the_post_thumbnail_url( 'full' ); }
		?>
	');">
		<div class="hero-img-overlay"></div>
		<div class="hero-text">
			<h1><?php echo esc_html( get_the_title() ) . ' '; ?><span class="desktop-title"> AT THE COURTYARD PLAZA</span>
			</h1>
		</div>
	</div>

	<div class="container-base-full">

		<div class="category-filter">
			<h4>Filter by Type: </h4>
			<ul>
				<li class="category-filter-item">
					<a class="category-filter-anchor active" href="
						<?php
						// Returns to the Shopping home page without filter applied
							echo home_url( 'shopping' );
						?>
					">All</a>
				</li>	
				<?php
					// Get terms of custom post type category and create a list item for each one found
					$terms = get_terms(
						array(
							'taxonomy'   => 'shop_category',
							'hide_empty' => true,
						)
					);

					foreach ( $terms as $term ) :
						?>
					<li class="category-filter-item">
						<a class="category-filter-anchor" data-category="<?php echo $term->term_id; ?>" href="
							<?php
								echo get_term_link( $term );
							?>
						">
							<?php
								echo $term->name;
							?>
						</a>
					</li>
				<?php endforeach; ?>
			</ul>
		</div>

		<div class="retail-list">

			<?php
			// Default to page 1 of filter if no other page has been requested
			if ( get_query_var( 'paged' ) ) {
				$paged = get_query_var( 'paged' );
			} elseif ( get_query_var( 'page' ) ) {
				$paged = get_query_var( 'page' );
			} else {
				$paged = 1;
			}

			$args = array(
				'post_type'      => 'shop',
				'posts_per_page' => 10,
				'paged'          => $paged,
				'orderby'        => 'title',
				'order'          => 'ASC',
			);

			// Create custom loop with above args to display post types			
			$loop = new WP_Query( $args );

			if ( $loop->have_posts() ) :
				while ( $loop->have_posts() ) :
					$loop->the_post();

					get_template_part( 'template-parts/retail', 'single' );

				endwhile;
				?>
				<div class="pagination-container">
					<?php
					// Pagination for shopping items only if required
					$links = paginate_links(
						array(
							'base'    => '%_%',
							'format'  => '?paged=%#%',
							'total'   => $loop->max_num_pages,
							'current' => $paged,
						)
					);

					if ( $links ) {
						echo $links;
					}

					wp_reset_postdata();
					?>
				</div>
				<?php
			else :
				_e( 'Sorry, no posts matched your criteria.', 'textdomain' );
			endif;
			?>
		</div>
	</div>

</main>

<?php get_footer(); ?>