Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 42 additions & 0 deletions style.css
Original file line number Diff line number Diff line change
Expand Up @@ -430,3 +430,45 @@ body > footer {
height: auto;
margin-bottom: 2rem;
}

/*--------------------------------------------------------------
# Block Theme Styles (Front Page Parity)
--------------------------------------------------------------*/
.work-loop {
list-style: none;
padding: 0;
margin: 0;
}

.work-row {
display: flex;
gap: 2rem;
align-items: center;
padding: 3rem 0;
border-bottom: 1px solid #eee;
}

.work-loop > li:first-child .work-row {
border-top: 1px solid #eee;
}

.work-text {
flex: 1;
}

.work-image {
flex: 1;
}

/* The magic: reverse the order on even rows */
@media (min-width: 1024px) {
.work-loop > li:nth-child(even) .work-row {
flex-direction: row-reverse;
}
}

@media (max-width: 768px) {
.work-row {
flex-direction: column;
}
}
66 changes: 22 additions & 44 deletions templates/front-page.html
Original file line number Diff line number Diff line change
@@ -1,53 +1,31 @@
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:cover {"url":"http://nano-design-build-v1.test/wp-content/uploads/2025/07/250705-NanoGreenDot-NanoBackgroundVideo.mp4","id":1,"dimRatio":50,"minHeight":100,"minHeightUnit":"vh","contentPosition":"center center","isDark":false} -->
<div class="wp-block-cover" style="min-height:100vh">
<span aria-hidden="true" class="wp-block-cover__background-container">
<video class="wp-block-cover__video-background" autoplay muted loop src="http://nano-design-build-v1.test/wp-content/uploads/2025/07/250705-NanoGreenDot-NanoBackgroundVideo.mp4" poster="YOUR_POSTER_IMAGE_URL.jpg"></video>
</span>
<div class="wp-block-cover__inner-container">
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group">
<!-- wp:heading {"textAlign":"center","level":1,"style":{"typography":{"fontSize":"4rem"}}} -->
<h1 class="has-text-align-center" style="font-size:4rem">Designing & Building The Future</h1>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"1.5rem"}}} -->
<p class="has-text-align-center" style="font-size:1.5rem">We craft bespoke homes that merge timeless design with modern living.</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->
</div>
</div>
<!-- /wp:cover -->

<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80"}}},"layout":{"type":"constrained"}} -->
<main class="wp-block-group" style="padding-top:var(--wp--preset--spacing--80);padding-bottom:var(--wp--preset--spacing--80)">
<!-- wp:heading {"textAlign":"center"} -->
<h2 class="has-text-align-center">Recent Work</h2>
<!-- /wp:heading -->
<!-- wp:group {"className":"container","layout":{"type":"constrained"}} -->
<div class="wp-block-group container">
<!-- wp:post-content /-->

<!-- wp:query {"queryId":1,"query":{"perPage":3,"pages":0,"offset":0,"postType":"project","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
<div class="wp-block-query">
<!-- wp:query {"queryId":1,"query":{"perPage":3,"pages":0,"offset":0,"postType":"project","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false},"className":"work-loop"} -->
<div class="wp-block-query work-loop">
<!-- wp:post-template -->
Comment on lines +7 to 9

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[P1] Attach work-loop class to the post template list

The alternating-row CSS added in style.css assumes .work-loop > li selectors to flip .work-row on even items, but the markup here applies class="work-loop" to the Query wrapper div rather than the <ul class="wp-block-post-template"> generated by the Post Template block (lines 7‑9). Because the <li> elements are children of that <ul>, none of the selectors like .work-loop > li:nth-child(even) will ever match, so rows never reverse order at 1024px+ and the layout stays text-left/image-right for every item. The class should be on the post template itself (or the CSS selectors updated) for the parity fix to actually work.

Useful? React with 👍 / 👎.

<!-- wp:post-featured-image {"isLink":true} /-->
<!-- wp:post-title {"isLink":true} /-->
<!-- wp:post-excerpt /-->
<!-- wp:post-terms {"term":"location"} /-->
<!-- wp:columns {"className":"work-row"} -->
<div class="wp-block-columns work-row">
<!-- wp:column {"className":"work-text"} -->
<div class="wp-block-column work-text">
<!-- wp:post-title {"isLink":true} /-->
<!-- wp:post-excerpt /-->
</div>
<!-- /wp:column -->
<!-- wp:column {"className":"work-image"} -->
<div class="wp-block-column work-image">
<!-- wp:post-featured-image {"isLink":true,"align":""} /-->
</div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->
<!-- /wp:post-template -->
</div>
<!-- /wp:query -->

<!-- wp:group {"style":{"spacing":{"margin":{"top":"var:preset|spacing|60"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center"}} -->
<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--60)">
<!-- wp:image {"width":32,"height":32,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="/wp-content/themes/nano-design-build/images/nano.svg" alt="Nano Design Build Logo" width="32" height="32"/></figure>
<!-- /wp:image -->
<!-- wp:paragraph -->
<p><a href="/projects">View All Projects</a></p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->
</main>
</div>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->