Browse Source

Block templates: page title above the card + consistent top spacing

- search/404/page.html: move the title above the #dadada card (white on the dark
  body), matching the classic archive/contact pages. Only single posts keep the
  title inside the content area.
- 404 gets the dark body + #dadada card it was missing.
- main.wp-block-group top padding clears the float:right .site-title header, so the
  block pages line up with the classic .container pages (they rode up next to the
  collapsed header before).
- Block query pagination (Feed/Posts, search): center it and swap the text prev/next
  for <- -> arrows, so it matches the classic dw_paging_nav pagination.
windhamdavid 5 days ago
parent
commit
337325a2bb
5 changed files with 58 additions and 10 deletions
  1. 51 3
      style.css
  2. 3 3
      templates/404.html
  3. 3 3
      templates/page.html
  4. 1 1
      templates/search.html
  5. 0 0
      v4-style.min.css

+ 51 - 3
style.css

@@ -1280,9 +1280,14 @@ body.sitemap #content {
 	margin-top: 1.25rem;
 	margin-top: 1.25rem;
 	margin-bottom: 3rem;
 	margin-bottom: 3rem;
 }
 }
-/* Search results — give the block search template the same #dadada card as the
-   classic archives, so its content isn't dark-on-dark. */
-body.search main > .wp-block-group {
+/* Search + 404 — block templates get the same dark body + white title-above +
+   #dadada card as the classic archive/contact/sitemap pages. (Only single posts
+   keep the title inside the card.) */
+body.error404 {
+	background: rgba(72,76,87,1);
+}
+body.search main > .wp-block-group,
+body.error404 main > .wp-block-group {
 	max-width: 1280px;
 	max-width: 1280px;
 	margin: 1.25rem auto 3rem;
 	margin: 1.25rem auto 3rem;
 	padding-left: 96px;
 	padding-left: 96px;
@@ -1290,6 +1295,12 @@ body.search main > .wp-block-group {
 	background: #dadada;
 	background: #dadada;
 	border-radius: 6px;
 	border-radius: 6px;
 }
 }
+body.search main > .wp-block-query-title,
+body.error404 main > .wp-block-heading {
+	color: #fff;
+	max-width: 1280px;
+	margin: 1.25rem auto 0;
+}
 /* Pagination — classic archives (.page-numbers from dw_paging_nav) + the block
 /* Pagination — classic archives (.page-numbers from dw_paging_nav) + the block
    query pagination (search/archive). Centered, de-Bootstrapped pill links. */
    query pagination (search/archive). Centered, de-Bootstrapped pill links. */
 .pagination,
 .pagination,
@@ -1325,6 +1336,30 @@ body.search main > .wp-block-group {
 .wp-block-query-pagination a:hover {
 .wp-block-query-pagination a:hover {
 	background: rgba(72, 76, 87, .12);
 	background: rgba(72, 76, 87, .12);
 }
 }
+/* Block query pagination (Feed/Posts page, search): override the block's
+   space-between layout + text prev/next so it centers with ← → like the
+   classic dw_paging_nav pagination on the archives. */
+nav.wp-block-query-pagination {
+	justify-content: center;
+	gap: .4rem;
+}
+.wp-block-query-pagination-numbers {
+	display: flex;
+	align-items: center;
+	gap: .4rem;
+}
+.wp-block-query-pagination-previous,
+.wp-block-query-pagination-next {
+	font-size: 0;
+}
+.wp-block-query-pagination-previous::before {
+	content: "\2190";
+	font-size: 1rem;
+}
+.wp-block-query-pagination-next::after {
+	content: "\2192";
+	font-size: 1rem;
+}
 /* "Daveo Radio" CTA — playback now lives on /radio, so the Music page links there. */
 /* "Daveo Radio" CTA — playback now lives on /radio, so the Music page links there. */
 .daveo-radio-btn {
 .daveo-radio-btn {
 	display: inline-block;
 	display: inline-block;
@@ -1613,6 +1648,19 @@ h2.entry-title {
 	padding: 96px; /* 1in APA-style margins on all sides (96px = 1in) */
 	padding: 96px; /* 1in APA-style margins on all sides (96px = 1in) */
 	border-radius: 6px;
 	border-radius: 6px;
 }
 }
+/* Block templates (search / 404 / page.html): the navbar's site-title is
+   float:right, so it collapses the header and block <main> content would ride up
+   next to it. Clear the header the way the classic .container pages do, so every
+   page has the same top spacing. */
+main.wp-block-group {
+	padding-top: 73px;
+}
+/* Block default pages (page.html): the page title sits above the card — white,
+   on the dark body.page bg — matching the archive/search/404 pages. */
+body.page main > .wp-block-post-title {
+	color: #fff;
+	margin-bottom: 1.25rem;
+}
 .signature {
 .signature {
 	float: right;
 	float: right;
 	margin: 10px 150px 40px 0px;
 	margin: 10px 150px 40px 0px;

+ 3 - 3
templates/404.html

@@ -2,11 +2,11 @@
 
 
 <!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
 <!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
 <main class="wp-block-group">
 <main class="wp-block-group">
+	<!-- wp:heading {"level":1} -->
+	<h1 class="wp-block-heading">Not found</h1>
+	<!-- /wp:heading -->
 	<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
 	<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
 	<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)">
 	<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)">
-		<!-- wp:heading {"level":1} -->
-		<h1 class="wp-block-heading">Not found</h1>
-		<!-- /wp:heading -->
 		<!-- wp:paragraph -->
 		<!-- wp:paragraph -->
 		<p>That page doesn't exist. Try a search, or head <a href="/">home</a>.</p>
 		<p>That page doesn't exist. Try a search, or head <a href="/">home</a>.</p>
 		<!-- /wp:paragraph -->
 		<!-- /wp:paragraph -->

+ 3 - 3
templates/page.html

@@ -2,9 +2,9 @@
 
 
 <!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
 <!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
 <main class="wp-block-group">
 <main class="wp-block-group">
-	<!-- wp:group {"align":"wide","className":"entry-content","style":{"spacing":{"margin":{"top":"6.5rem"}}},"layout":{"type":"constrained"}} -->
-	<div class="wp-block-group entry-content alignwide" style="margin-top:6.5rem">
-		<!-- wp:post-title {"level":1} /-->
+	<!-- wp:post-title {"level":1,"align":"wide"} /-->
+	<!-- wp:group {"align":"wide","className":"entry-content","layout":{"type":"constrained"}} -->
+	<div class="wp-block-group entry-content alignwide">
 		<!-- wp:post-content {"layout":{"type":"constrained"}} /-->
 		<!-- wp:post-content {"layout":{"type":"constrained"}} /-->
 	</div>
 	</div>
 	<!-- /wp:group -->
 	<!-- /wp:group -->

+ 1 - 1
templates/search.html

@@ -2,9 +2,9 @@
 
 
 <!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
 <!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
 <main class="wp-block-group">
 <main class="wp-block-group">
+	<!-- wp:query-title {"type":"search","level":1} /-->
 	<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
 	<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
 	<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)">
 	<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)">
-		<!-- wp:query-title {"type":"search","level":1} /-->
 		<!-- wp:search {"label":"Search","buttonText":"Search"} /-->
 		<!-- wp:search {"label":"Search","buttonText":"Search"} /-->
 		<!-- wp:query {"queryId":0,"query":{"inherit":true,"perPage":10},"layout":{"type":"constrained"}} -->
 		<!-- wp:query {"queryId":0,"query":{"inherit":true,"perPage":10},"layout":{"type":"constrained"}} -->
 		<div class="wp-block-query">
 		<div class="wp-block-query">

File diff suppressed because it is too large
+ 0 - 0
v4-style.min.css


Some files were not shown because too many files changed in this diff