You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@grails.apache.org by as...@apache.org on 2026/05/02 21:21:08 UTC
(grails-website) branch asf-site-production updated: Updating apache/grails-website asf-site-production branch for GitHub Actions run:25261915361
This is an automated email from the ASF dual-hosted git repository.
asf-ci-deploy pushed a commit to branch asf-site-production
in repository https://gitbox.apache.org/repos/asf/grails-website.git
The following commit(s) were added to refs/heads/asf-site-production by this push:
new fd2d004034a Updating apache/grails-website asf-site-production branch for GitHub Actions run:25261915361
fd2d004034a is described below
commit fd2d004034a1fcbadb4b3ce50c66d6508397934d
Author: jamesfredley <ja...@users.noreply.github.com>
AuthorDate: Sat May 2 21:21:01 2026 +0000
Updating apache/grails-website asf-site-production branch for GitHub Actions run:25261915361
---
guides/_redirects.json | 2 +-
guides/adding-commit-info/3/css/main.css | 66 +++++++-
guides/adding-commit-info/4/css/main.css | 66 +++++++-
guides/angular2-combined/4/css/main.css | 66 +++++++-
guides/building-a-react-app/4/css/main.css | 66 +++++++-
guides/building-a-vue-app/4/css/main.css | 66 +++++++-
.../4/css/main.css | 66 +++++++-
.../4/css/main.css | 66 +++++++-
.../4/css/main.css | 66 +++++++-
guides/command-objects-and-forms/3/css/main.css | 66 +++++++-
guides/command-objects-and-forms/4/css/main.css | 66 +++++++-
.../creating-your-first-grails-app/3/css/main.css | 66 +++++++-
.../creating-your-first-grails-app/4/css/main.css | 66 +++++++-
.../creating-your-first-grails-app/6/css/main.css | 66 +++++++-
guides/database-per-tenant/4/css/main.css | 66 +++++++-
guides/discriminator-per-tenant/4/css/main.css | 66 +++++++-
guides/gorm-event-listeners/3/css/main.css | 66 +++++++-
guides/gorm-event-listeners/4/css/main.css | 66 +++++++-
.../4/css/main.css | 66 +++++++-
guides/gorm-ratpack/3/css/main.css | 66 +++++++-
guides/gorm-ratpack/4/css/main.css | 66 +++++++-
guides/gorm-without-grails/4/css/main.css | 66 +++++++-
guides/grails-as-docker-container/3/css/main.css | 66 +++++++-
guides/grails-as-docker-container/4/css/main.css | 66 +++++++-
guides/grails-async-promises/3/css/main.css | 66 +++++++-
guides/grails-async-promises/4/css/main.css | 66 +++++++-
guides/grails-basicauth/3/css/main.css | 66 +++++++-
guides/grails-basicauth/4/css/main.css | 66 +++++++-
guides/grails-code-coverage/3/css/main.css | 66 +++++++-
guides/grails-code-coverage/4/css/main.css | 66 +++++++-
guides/grails-codenarc/4/css/main.css | 66 +++++++-
.../4/css/main.css | 66 +++++++-
.../6/css/main.css | 66 +++++++-
.../grails-configuration-properties/3/css/main.css | 66 +++++++-
.../grails-configuration-properties/4/css/main.css | 66 +++++++-
guides/grails-controller-testing/3/css/main.css | 66 +++++++-
guides/grails-controller-testing/4/css/main.css | 66 +++++++-
.../3/css/main.css | 66 +++++++-
.../4/css/main.css | 66 +++++++-
guides/grails-database-migration/3/css/main.css | 66 +++++++-
guides/grails-database-migration/4/css/main.css | 66 +++++++-
guides/grails-database-migration/6/css/main.css | 66 +++++++-
.../grails-docker-external-services/4/css/main.css | 66 +++++++-
.../3/css/main.css | 66 +++++++-
.../4/css/main.css | 66 +++++++-
guides/grails-elasticbeanstalk/4/css/main.css | 66 +++++++-
guides/grails-elasticsearch/4/css/main.css | 66 +++++++-
guides/grails-email/3/css/main.css | 66 +++++++-
guides/grails-email/4/css/main.css | 66 +++++++-
guides/grails-events/3/css/main.css | 66 +++++++-
guides/grails-events/4/css/main.css | 66 +++++++-
.../8/css/main.css | 66 +++++++-
.../8/guide/createApp.html | 46 +----
.../8/guide/customTable.html | 137 +++++++++++----
.../8/guide/gettingStarted.html | 4 +-
.../8/guide/index.html | 186 ++++++++++++---------
.../{customTable.html => pages/appWideTable.html} | 151 +++++------------
.../8/guide/pages/download.html | 44 +----
.../pages/{download.html => perColumnCells.html} | 63 ++-----
.../pages/{download.html => perDomainTable.html} | 79 ++++-----
.../8/guide/pages/requirements.html | 4 +-
.../8/guide/single.html | 186 ++++++++++++---------
.../8/index.html | 6 +-
guides/grails-file-download-excel/3/css/main.css | 66 +++++++-
guides/grails-file-download-excel/4/css/main.css | 66 +++++++-
guides/grails-geb-multiple-browsers/3/css/main.css | 66 +++++++-
guides/grails-geb-multiple-browsers/4/css/main.css | 66 +++++++-
guides/grails-google-cloud/4/css/main.css | 66 +++++++-
guides/grails-google-home/4/css/main.css | 66 +++++++-
guides/grails-gorm-data-services/3/css/main.css | 66 +++++++-
guides/grails-gorm-data-services/4/css/main.css | 66 +++++++-
guides/grails-javamelody/4/css/main.css | 66 +++++++-
guides/grails-logicaldelete/3/css/main.css | 66 +++++++-
guides/grails-logicaldelete/4/css/main.css | 66 +++++++-
guides/grails-micronaut-http/5/css/main.css | 66 +++++++-
guides/grails-micronaut-kafka/4/css/main.css | 66 +++++++-
guides/grails-mock-basics/3/css/main.css | 66 +++++++-
guides/grails-mock-basics/4/css/main.css | 66 +++++++-
guides/grails-mock-http-server/3/css/main.css | 66 +++++++-
guides/grails-mock-http-server/4/css/main.css | 66 +++++++-
.../grails-mock-logging-slf4j-test/3/css/main.css | 66 +++++++-
.../grails-mock-logging-slf4j-test/4/css/main.css | 66 +++++++-
guides/grails-multi-datasource/3/css/main.css | 66 +++++++-
guides/grails-multi-datasource/4/css/main.css | 66 +++++++-
guides/grails-multi-project-build/4/css/main.css | 66 +++++++-
guides/grails-oauth-google/4/css/main.css | 66 +++++++-
guides/grails-oauth-twitter/4/css/main.css | 66 +++++++-
guides/grails-on-circleci-basics/4/css/main.css | 66 +++++++-
guides/grails-on-github-actions/4/css/main.css | 66 +++++++-
guides/grails-on-travis-basics/3/css/main.css | 66 +++++++-
guides/grails-on-travis-basics/4/css/main.css | 66 +++++++-
guides/grails-quickcast-logging/4/css/main.css | 66 +++++++-
.../4/css/main.css | 66 +++++++-
.../4/css/main.css | 66 +++++++-
.../grails-quickcasts-interceptors/4/css/main.css | 66 +++++++-
guides/grails-quickcasts-json-views/4/css/main.css | 66 +++++++-
.../4/css/main.css | 66 +++++++-
.../4/css/main.css | 66 +++++++-
guides/grails-rabbitmq/4/css/main.css | 66 +++++++-
guides/grails-restapi-angularjs/4/css/main.css | 66 +++++++-
guides/grails-scheduled/3/css/main.css | 66 +++++++-
guides/grails-scheduled/4/css/main.css | 66 +++++++-
guides/grails-schwartz/4/css/main.css | 66 +++++++-
guides/grails-soap/3/css/main.css | 66 +++++++-
guides/grails-soap/4/css/main.css | 66 +++++++-
.../3/css/main.css | 66 +++++++-
.../4/css/main.css | 66 +++++++-
guides/grails-taglib-wyswyg-trix/3/css/main.css | 66 +++++++-
guides/grails-taglib-wyswyg-trix/4/css/main.css | 66 +++++++-
.../3/css/main.css | 66 +++++++-
.../4/css/main.css | 66 +++++++-
guides/grails-test-security/3/css/main.css | 66 +++++++-
guides/grails-test-security/4/css/main.css | 66 +++++++-
guides/grails-tvmlapp/3/css/main.css | 66 +++++++-
guides/grails-tvmlapp/4/css/main.css | 66 +++++++-
guides/grails-upload-file/3/css/main.css | 66 +++++++-
guides/grails-upload-file/4/css/main.css | 66 +++++++-
guides/grails-vs-nodejs/4/css/main.css | 66 +++++++-
guides/grails-vue-combined/4/css/main.css | 66 +++++++-
guides/grails-yourkit-profiling/4/css/main.css | 66 +++++++-
guides/grails_i18n/3/css/main.css | 66 +++++++-
guides/grails_i18n/4/css/main.css | 66 +++++++-
guides/grails_url_mappings/4/css/main.css | 66 +++++++-
guides/neo4j-movies/4/css/main.css | 66 +++++++-
.../querying-gorm-dynamic-finders/3/css/main.css | 66 +++++++-
.../querying-gorm-dynamic-finders/4/css/main.css | 66 +++++++-
guides/react-combined/4/css/main.css | 66 +++++++-
guides/react-spring-security/4/css/main.css | 66 +++++++-
guides/rest-hibernate/3/css/main.css | 66 +++++++-
guides/rest-hibernate/4/css/main.css | 66 +++++++-
guides/rest-mongodb/4/css/main.css | 66 +++++++-
guides/server-sent-events/3/css/main.css | 66 +++++++-
guides/server-sent-events/4/css/main.css | 66 +++++++-
guides/using-hal-with-json-views/3/css/main.css | 66 +++++++-
guides/using-hal-with-json-views/4/css/main.css | 66 +++++++-
guides/using-the-react-profile/4/css/main.css | 66 +++++++-
guides/using-the-vue-profile/3/css/main.css | 66 +++++++-
guides/using-the-vue-profile/4/css/main.css | 66 +++++++-
guides/vaadin-grails/4/css/main.css | 66 +++++++-
rss.xml | 2 +-
140 files changed, 8691 insertions(+), 601 deletions(-)
diff --git a/guides/_redirects.json b/guides/_redirects.json
index 8745f4221d3..95be8c78d7b 100644
--- a/guides/_redirects.json
+++ b/guides/_redirects.json
@@ -1,6 +1,6 @@
{
"version": 1,
- "generated": "2026-05-02T20:20:42.443818142Z",
+ "generated": "2026-05-02T21:14:03.639048188Z",
"from_base": "https://guides.grails.org",
"to_base": "https://grails.apache.org/guides",
"count": 1735,
diff --git a/guides/adding-commit-info/3/css/main.css b/guides/adding-commit-info/3/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/adding-commit-info/3/css/main.css
+++ b/guides/adding-commit-info/3/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/adding-commit-info/4/css/main.css b/guides/adding-commit-info/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/adding-commit-info/4/css/main.css
+++ b/guides/adding-commit-info/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/angular2-combined/4/css/main.css b/guides/angular2-combined/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/angular2-combined/4/css/main.css
+++ b/guides/angular2-combined/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/building-a-react-app/4/css/main.css b/guides/building-a-react-app/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/building-a-react-app/4/css/main.css
+++ b/guides/building-a-react-app/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/building-a-vue-app/4/css/main.css b/guides/building-a-vue-app/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/building-a-vue-app/4/css/main.css
+++ b/guides/building-a-vue-app/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/building-an-android-client-powered-by-a-grails-backend/4/css/main.css b/guides/building-an-android-client-powered-by-a-grails-backend/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/building-an-android-client-powered-by-a-grails-backend/4/css/main.css
+++ b/guides/building-an-android-client-powered-by-a-grails-backend/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/building-an-ios-objectc-client-powered-by-a-grails-backend/4/css/main.css b/guides/building-an-ios-objectc-client-powered-by-a-grails-backend/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/building-an-ios-objectc-client-powered-by-a-grails-backend/4/css/main.css
+++ b/guides/building-an-ios-objectc-client-powered-by-a-grails-backend/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/building-an-ios-swift-client-powered-by-a-grails-backend/4/css/main.css b/guides/building-an-ios-swift-client-powered-by-a-grails-backend/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/building-an-ios-swift-client-powered-by-a-grails-backend/4/css/main.css
+++ b/guides/building-an-ios-swift-client-powered-by-a-grails-backend/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/command-objects-and-forms/3/css/main.css b/guides/command-objects-and-forms/3/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/command-objects-and-forms/3/css/main.css
+++ b/guides/command-objects-and-forms/3/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/command-objects-and-forms/4/css/main.css b/guides/command-objects-and-forms/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/command-objects-and-forms/4/css/main.css
+++ b/guides/command-objects-and-forms/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/creating-your-first-grails-app/3/css/main.css b/guides/creating-your-first-grails-app/3/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/creating-your-first-grails-app/3/css/main.css
+++ b/guides/creating-your-first-grails-app/3/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/creating-your-first-grails-app/4/css/main.css b/guides/creating-your-first-grails-app/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/creating-your-first-grails-app/4/css/main.css
+++ b/guides/creating-your-first-grails-app/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/creating-your-first-grails-app/6/css/main.css b/guides/creating-your-first-grails-app/6/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/creating-your-first-grails-app/6/css/main.css
+++ b/guides/creating-your-first-grails-app/6/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/database-per-tenant/4/css/main.css b/guides/database-per-tenant/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/database-per-tenant/4/css/main.css
+++ b/guides/database-per-tenant/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/discriminator-per-tenant/4/css/main.css b/guides/discriminator-per-tenant/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/discriminator-per-tenant/4/css/main.css
+++ b/guides/discriminator-per-tenant/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/gorm-event-listeners/3/css/main.css b/guides/gorm-event-listeners/3/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/gorm-event-listeners/3/css/main.css
+++ b/guides/gorm-event-listeners/3/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/gorm-event-listeners/4/css/main.css b/guides/gorm-event-listeners/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/gorm-event-listeners/4/css/main.css
+++ b/guides/gorm-event-listeners/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/gorm-graphql-with-react-and-apollo/4/css/main.css b/guides/gorm-graphql-with-react-and-apollo/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/gorm-graphql-with-react-and-apollo/4/css/main.css
+++ b/guides/gorm-graphql-with-react-and-apollo/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/gorm-ratpack/3/css/main.css b/guides/gorm-ratpack/3/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/gorm-ratpack/3/css/main.css
+++ b/guides/gorm-ratpack/3/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/gorm-ratpack/4/css/main.css b/guides/gorm-ratpack/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/gorm-ratpack/4/css/main.css
+++ b/guides/gorm-ratpack/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/gorm-without-grails/4/css/main.css b/guides/gorm-without-grails/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/gorm-without-grails/4/css/main.css
+++ b/guides/gorm-without-grails/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-as-docker-container/3/css/main.css b/guides/grails-as-docker-container/3/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-as-docker-container/3/css/main.css
+++ b/guides/grails-as-docker-container/3/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-as-docker-container/4/css/main.css b/guides/grails-as-docker-container/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-as-docker-container/4/css/main.css
+++ b/guides/grails-as-docker-container/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-async-promises/3/css/main.css b/guides/grails-async-promises/3/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-async-promises/3/css/main.css
+++ b/guides/grails-async-promises/3/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-async-promises/4/css/main.css b/guides/grails-async-promises/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-async-promises/4/css/main.css
+++ b/guides/grails-async-promises/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-basicauth/3/css/main.css b/guides/grails-basicauth/3/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-basicauth/3/css/main.css
+++ b/guides/grails-basicauth/3/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-basicauth/4/css/main.css b/guides/grails-basicauth/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-basicauth/4/css/main.css
+++ b/guides/grails-basicauth/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-code-coverage/3/css/main.css b/guides/grails-code-coverage/3/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-code-coverage/3/css/main.css
+++ b/guides/grails-code-coverage/3/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-code-coverage/4/css/main.css b/guides/grails-code-coverage/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-code-coverage/4/css/main.css
+++ b/guides/grails-code-coverage/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-codenarc/4/css/main.css b/guides/grails-codenarc/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-codenarc/4/css/main.css
+++ b/guides/grails-codenarc/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-configuration-properties-micronaut/4/css/main.css b/guides/grails-configuration-properties-micronaut/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-configuration-properties-micronaut/4/css/main.css
+++ b/guides/grails-configuration-properties-micronaut/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-configuration-properties-micronaut/6/css/main.css b/guides/grails-configuration-properties-micronaut/6/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-configuration-properties-micronaut/6/css/main.css
+++ b/guides/grails-configuration-properties-micronaut/6/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-configuration-properties/3/css/main.css b/guides/grails-configuration-properties/3/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-configuration-properties/3/css/main.css
+++ b/guides/grails-configuration-properties/3/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-configuration-properties/4/css/main.css b/guides/grails-configuration-properties/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-configuration-properties/4/css/main.css
+++ b/guides/grails-configuration-properties/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-controller-testing/3/css/main.css b/guides/grails-controller-testing/3/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-controller-testing/3/css/main.css
+++ b/guides/grails-controller-testing/3/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-controller-testing/4/css/main.css b/guides/grails-controller-testing/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-controller-testing/4/css/main.css
+++ b/guides/grails-controller-testing/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-custom-security-tenant-resolver/3/css/main.css b/guides/grails-custom-security-tenant-resolver/3/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-custom-security-tenant-resolver/3/css/main.css
+++ b/guides/grails-custom-security-tenant-resolver/3/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-custom-security-tenant-resolver/4/css/main.css b/guides/grails-custom-security-tenant-resolver/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-custom-security-tenant-resolver/4/css/main.css
+++ b/guides/grails-custom-security-tenant-resolver/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-database-migration/3/css/main.css b/guides/grails-database-migration/3/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-database-migration/3/css/main.css
+++ b/guides/grails-database-migration/3/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-database-migration/4/css/main.css b/guides/grails-database-migration/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-database-migration/4/css/main.css
+++ b/guides/grails-database-migration/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-database-migration/6/css/main.css b/guides/grails-database-migration/6/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-database-migration/6/css/main.css
+++ b/guides/grails-database-migration/6/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-docker-external-services/4/css/main.css b/guides/grails-docker-external-services/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-docker-external-services/4/css/main.css
+++ b/guides/grails-docker-external-services/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-dynamic-multiple-datasources/3/css/main.css b/guides/grails-dynamic-multiple-datasources/3/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-dynamic-multiple-datasources/3/css/main.css
+++ b/guides/grails-dynamic-multiple-datasources/3/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-dynamic-multiple-datasources/4/css/main.css b/guides/grails-dynamic-multiple-datasources/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-dynamic-multiple-datasources/4/css/main.css
+++ b/guides/grails-dynamic-multiple-datasources/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-elasticbeanstalk/4/css/main.css b/guides/grails-elasticbeanstalk/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-elasticbeanstalk/4/css/main.css
+++ b/guides/grails-elasticbeanstalk/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-elasticsearch/4/css/main.css b/guides/grails-elasticsearch/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-elasticsearch/4/css/main.css
+++ b/guides/grails-elasticsearch/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-email/3/css/main.css b/guides/grails-email/3/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-email/3/css/main.css
+++ b/guides/grails-email/3/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-email/4/css/main.css b/guides/grails-email/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-email/4/css/main.css
+++ b/guides/grails-email/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-events/3/css/main.css b/guides/grails-events/3/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-events/3/css/main.css
+++ b/guides/grails-events/3/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-events/4/css/main.css b/guides/grails-events/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-events/4/css/main.css
+++ b/guides/grails-events/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-fields-custom-widgets-and-wrappers/8/css/main.css b/guides/grails-fields-custom-widgets-and-wrappers/8/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-fields-custom-widgets-and-wrappers/8/css/main.css
+++ b/guides/grails-fields-custom-widgets-and-wrappers/8/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-fields-custom-widgets-and-wrappers/8/guide/createApp.html b/guides/grails-fields-custom-widgets-and-wrappers/8/guide/createApp.html
index 48a3d2372e1..f94a822156a 100644
--- a/guides/grails-fields-custom-widgets-and-wrappers/8/guide/createApp.html
+++ b/guides/grails-fields-custom-widgets-and-wrappers/8/guide/createApp.html
@@ -120,7 +120,7 @@ function addJsClass() {
<div class="paragraph">
-<p>Generate a fresh Grails 8 snapshot project. The <a href="https://prev-snapshot.grails.org">Grails snapshot starter service</a> exposes the same <code>create-app</code> API as <code>start.grails.org</code> but for the in-development branch.</p>
+<p>Generate a fresh Apache Grails 8 project from <a href="https://start.grails.org">start.grails.org</a>.</p>
</div>
@@ -134,38 +134,10 @@ function addJsClass() {
<div class="paragraph">
-<p>Run the following command to download a <code>web</code> profile starter for Grails 8 with Hibernate, Tomcat, DevTools, and the JDK 25 toolchain:</p>
-</div>
-<div class="listingblock">
-<div class="content">
-<pre class="CodeRay highlight"><code data-lang="bash">curl --location --request GET \
- 'https://prev-snapshot.grails.org/create/web/example.library?gorm=HIBERNATE&servlet=TOMCAT&reloading=DEVTOOLS&javaVersion=JDK_25' \
- --output library.zip
-unzip library.zip -d library
-cd library</code></pre>
-</div>
+<p>Open <a href="https://start.grails.org">start.grails.org</a>, pick the <code>web</code> profile, name the application <code>library</code>, set the package to <code>example</code>, and download the generated zip. Unzip it and <code>cd</code> into the project directory.</p>
</div>
<div class="paragraph">
-<p>The query string controls four feature toggles:</p>
-</div>
-<div class="ulist">
-<ul>
-<li>
-<p><code>gorm=HIBERNATE</code> - uses Hibernate as the GORM data store (the default; the alternative is <code>MONGODB</code>).</p>
-</li>
-<li>
-<p><code>servlet=TOMCAT</code> - embeds Apache Tomcat as the servlet container.</p>
-</li>
-<li>
-<p><code>reloading=DEVTOOLS</code> - wires in Spring Boot DevTools so file changes restart the JVM.</p>
-</li>
-<li>
-<p><code>javaVersion=JDK_25</code> - sets the source/target compatibility to JDK 25 in <code>build.gradle</code>.</p>
-</li>
-</ul>
-</div>
-<div class="paragraph">
-<p>The resulting project is a self-contained Gradle build. Verify it boots before you go further:</p>
+<p>Verify it boots before you go further:</p>
</div>
<div class="listingblock">
<div class="content">
@@ -175,18 +147,6 @@ cd library</code></pre>
<div class="paragraph">
<p>Open <code><a href="http://localhost:8080/" class="bare">http://localhost:8080/</a></code> in a browser and you should see the default Grails landing page. Stop the application with <code>Ctrl+C</code> once you have confirmed it runs.</p>
</div>
-<div class="admonitionblock note">
-<table>
-<tr>
-<td class="icon">
-<i class="fa icon-note" title="Note"></i>
-</td>
-<td class="content">
-If <code>prev-snapshot.grails.org</code> is not reachable in your environment, you can pin Grails 8 manually instead. Add the snapshot Maven repository to <code>build.gradle</code> and set <code>grailsVersion=8.0.0-SNAPSHOT</code> in <code>gradle.properties</code>. The <a href="https://repo.grails.org/grails/libs-snapshots-local/">Apache Grails snapshot repository</a> hosts the artifacts.
-</td>
-</tr>
-</table>
-</div>
<h2 id="fieldsPluginAlreadyIncluded">2.2 The Fields Plugin in Grails 8</h2>
diff --git a/guides/grails-fields-custom-widgets-and-wrappers/8/guide/customTable.html b/guides/grails-fields-custom-widgets-and-wrappers/8/guide/customTable.html
index 9f35313419e..45038ce1fae 100644
--- a/guides/grails-fields-custom-widgets-and-wrappers/8/guide/customTable.html
+++ b/guides/grails-fields-custom-widgets-and-wrappers/8/guide/customTable.html
@@ -99,10 +99,13 @@ function addJsClass() {
<div id="table-of-content">
<h2>Table of Contents</h2>
- <div class="toc-item" style="margin-left:0px"><a href="#bookTableTemplate"><strong>12.1</strong><span>A Custom _table.gsp for Book</span></a>
+ <div class="toc-item" style="margin-left:0px"><a href="#appWideTable"><strong>12.1</strong><span>App-Wide _table.gsp Override</span></a>
</div>
- <div class="toc-item" style="margin-left:0px"><a href="#bookTableColumns"><strong>12.2</strong><span>Per-Column Cell Overrides</span></a>
+ <div class="toc-item" style="margin-left:0px"><a href="#perDomainTable"><strong>12.2</strong><span>Per-Domain Override via template= Attribute</span></a>
+ </div>
+
+ <div class="toc-item" style="margin-left:0px"><a href="#perColumnCells"><strong>12.3</strong><span>Per-Column Cell Overrides</span></a>
</div>
</div>
@@ -120,43 +123,55 @@ function addJsClass() {
<div class="paragraph">
-<p><code><f:table></code> reads its column list from the <code>properties</code> attribute (or the first seven of the bean), looks each property up in <code>_displayWidget.gsp</code> for the cell, and emits a <code><table></code> with a header row.</p>
+<p><code><f:table></code> reads its column list from the <code>properties</code> attribute (or the first seven properties of the bean), looks each cell up via <code><f:displayWidget></code>, and emits a <code><table></code> with a sortable header row.</p>
</div>
<div class="paragraph">
-<p>You can customise tables at two layers: the whole-table template (<code>_table.gsp</code>) and the individual cell templates (<code>_displayWidget.gsp</code>). Both follow the same lookup precedence as the form templates - per-class first, then default fallback.</p>
+<p>Customising the table renders at three layers:</p>
+</div>
+<div class="ulist">
+<ul>
+<li>
+<p><strong>Whole-table layout, app-wide</strong> - replace the <code><table></code> skeleton (header row, body iteration, accessibility attributes) for every <code><f:table></code> invocation in the application. This is a single file under <code>grails-app/views/templates/_fields/_table.gsp</code>.</p>
+</li>
+<li>
+<p><strong>Whole-table layout, per-domain or per-page</strong> - opt one specific <code><f:table></code> invocation into a different template via the <code>template=</code> attribute, with the override file living next to the app-wide one under <code>grails-app/views/templates/_fields/</code>.</p>
+</li>
+<li>
+<p><strong>Per-column cells</strong> - each <code><td></code> is rendered by <code><f:displayWidget></code>, which DOES go through the standard <code>_fields/<class>/<property>/_displayWidget.gsp</code> lookup chain. So one-off cell formatting is a per-property override, not a table-template change.</p>
+</li>
+</ul>
+</div>
+<div class="admonitionblock caution">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-caution" title="Caution"></i>
+</td>
+<td class="content">
+Unlike the form templates (<code><f:field></code>, <code><f:all></code>, <code><f:display></code> with a property), <code><f:table></code> does NOT walk the <code>_fields/<class>/_table.gsp</code> lookup chain. Looking at <a href="https://github.com/apache/grails-core/blob/8.0.x/grails-fields/grails-app/taglib/grails/plugin/formfields/FormFieldsTagLib.groovy"><code>FormFieldsTagLib.table</code></a> in the plugin source, the template path is hardcoded to <cod [...]
+</td>
+</tr>
+</table>
</div>
-<h2 id="bookTableTemplate">12.1 A Custom _table.gsp for Book</h2>
+<h2 id="appWideTable">12.1 App-Wide _table.gsp Override</h2>
<div class='contribute-btn'>
- <button type='button' class='btn btn-default' onclick='window.location.href="https://github.com/apache/grails-static-website/edit/master/guides/grails-fields-custom-widgets-and-wrappers/v8/guide/bookTableTemplate.adoc"'>
+ <button type='button' class='btn btn-default' onclick='window.location.href="https://github.com/apache/grails-static-website/edit/master/guides/grails-fields-custom-widgets-and-wrappers/v8/guide/appWideTable.adoc"'>
<i class='fa fa-pencil-square-o'></i> Improve this doc
</button>
</div>
<div class="paragraph">
-<p>Override the whole table for <code>Book</code> so that:</p>
-</div>
-<div class="ulist">
-<ul>
-<li>
-<p>The table renders as a Bootstrap 5 striped, hover-enabled table.</p>
-</li>
-<li>
-<p>The header row uses <code><th scope="col"></code> for accessibility.</p>
-</li>
-<li>
-<p>The last column always contains action buttons (View / Edit / Delete) without you adding a property to <code>properties=</code>.</p>
-</li>
-</ul>
+<p>Replace the default app-wide table template with one that renders as a Bootstrap 5 striped, hover-enabled table, uses <code><th scope="col"></code> for accessibility, and adds a trailing actions column for View / Edit / Delete buttons.</p>
</div>
<div class="paragraph">
-<p>Create <code>_fields/book/_table.gsp</code>:</p>
+<p>Create the file at the path the plugin actually looks up:</p>
</div>
<div class="listingblock">
-<div class="title">grails-app/views/_fields/book/_table.gsp</div>
+<div class="title">grails-app/views/templates/_fields/_table.gsp</div>
<div class="content">
<pre class="CodeRay highlight"><code data-lang="html"><span class="tag"><table</span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">table table-striped table-hover align-middle</span><span class="delimiter">"</span></span><span class="tag">></span>
<span class="tag"><thead</span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">table-dark</span><span class="delimiter">"</span></span><span class="tag">></span>
@@ -217,28 +232,90 @@ function addJsClass() {
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>domainClass</code></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><code>Class<?></code></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">The Java class of the elements - useful when emitting links via <code><g:link controller="…​"></code>.</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><code>org.grails.datastore.mapping.model.PersistentEntity</code></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">The persistent entity for the bean type. Use <code>domainClass.javaClass.simpleName.toLowerCase()</code> to compute a controller name for <code><g:link></code>.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>domainProperties</code></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><code>List<DomainProperty></code></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">The columns the plugin selected, already filtered by the <code>properties=</code>/<code>except=</code> attributes.</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><code>List<Map></code></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">The columns the plugin selected, already filtered by the <code>properties=</code>/<code>except=</code> attributes. Each map has <code>property</code>, <code>label</code>, and <code>bean</code> keys (plus <code>class</code> and <code>theme</code> if those attributes were passed).</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><code>displayStyle</code></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><code>String</code></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">The <code>displayStyle</code> attribute from <code><f:table></code>, defaulting to <code>'table'</code>. Pass it through to per-cell <code><f:displayWidget></code> calls so cell templates can branch on style.</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><code>theme</code></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><code>String</code></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">The <code>theme</code> attribute from <code><f:table></code>. Same passthrough rule.</p></td>
</tr>
</tbody>
</table>
<div class="paragraph">
-<p>Inside the loop, render each cell with <code><f:displayWidget bean="${book}" property="${prop.name}"/></code>. That dispatches to whichever <code>_displayWidget.gsp</code> is most specific - your <code>Date</code> display widget for the <code>publishedDate</code> cell, your <code>Boolean</code> widget for the <code>inStock</code> cell, and so on.</p>
+<p>Inside the loop, render each cell with <code><f:displayWidget bean="${book}" property="${prop.property}"/></code>. That call DOES go through the standard lookup chain - it will pick up your per-property <code>_displayWidget.gsp</code> overrides (the <code>Date</code> formatter you wrote in chapter 9.2, the <code>Boolean</code> checkmark from 9.3, the per-column overrides we’ll write in chapter 12.3, etc.).</p>
+</div>
+<div class="paragraph">
+<p>Because this template lives at <code>templates/_fields/_table.gsp</code>, <strong>every</strong> <code><f:table></code> in the application now uses this layout - books, authors, and any future domain class. Restart the app and visit <code><a href="http://localhost:8080/book/index" class="bare">http://localhost:8080/book/index</a></code> and <code><a href="http://localhost:8080/author/index" class="bare">http://localhost:8080/author/index</a></code>; both list pages now use the B [...]
+</div>
+
+
+<h2 id="perDomainTable">12.2 Per-Domain Override via template= Attribute</h2>
+
+<div class='contribute-btn'>
+ <button type='button' class='btn btn-default' onclick='window.location.href="https://github.com/apache/grails-static-website/edit/master/guides/grails-fields-custom-widgets-and-wrappers/v8/guide/perDomainTable.adoc"'>
+ <i class='fa fa-pencil-square-o'></i> Improve this doc
+ </button>
+</div>
+
+
+<div class="paragraph">
+<p>When you want a <strong>specific</strong> <code><f:table></code> invocation to use a different layout - for example, the books list page should show a card-grid instead of a table while every other list view keeps the standard table - opt into a per-page template via the <code>template=</code> attribute:</p>
+</div>
+<div class="listingblock">
+<div class="title">grails-app/views/book/index.gsp</div>
+<div class="content">
+<pre class="CodeRay highlight"><code data-lang="html"><span class="tag"><f:table</span> <span class="attribute-name">collection</span>=<span class="string"><span class="delimiter">"</span><span class="content">${bookList}</span><span class="delimiter">"</span></span>
+ <span class="attribute-name">properties</span>=<span class="string"><span class="delimiter">"</span><span class="content">title,author,genre,priceUSD,inStock</span><span class="delimiter">"</span></span>
+ <span class="attribute-name">template</span>=<span class="string"><span class="delimiter">"</span><span class="content">bookCards</span><span class="delimiter">"</span></span><span class="tag">/></span></code></pre>
+</div>
+</div>
+<div class="paragraph">
+<p>The plugin resolves <code>template="bookCards"</code> to the path <code>/templates/_fields/bookCards</code>, so create the override at:</p>
+</div>
+<div class="listingblock">
+<div class="title">grails-app/views/templates/_fields/_bookCards.gsp</div>
+<div class="content">
+<pre class="CodeRay highlight"><code data-lang="html"><span class="tag"><div</span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">row row-cols-1 row-cols-md-3 g-3</span><span class="delimiter">"</span></span><span class="tag">></span>
+ <span class="tag"><g:each</span> <span class="attribute-name">in</span>=<span class="string"><span class="delimiter">"</span><span class="content">${collection}</span><span class="delimiter">"</span></span> <span class="attribute-name">var</span>=<span class="string"><span class="delimiter">"</span><span class="content">book</span><span class="delimiter">"</span></span><span class="tag">></span>
+ <span class="tag"><div</span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">col</span><span class="delimiter">"</span></span><span class="tag">></span>
+ <span class="tag"><div</span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">card h-100</span><span class="delimiter">"</span></span><span class="tag">></span>
+ <span class="tag"><div</span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">card-body</span><span class="delimiter">"</span></span><span class="tag">></span>
+ <span class="tag"><h5</span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">card-title</span><span class="delimiter">"</span></span><span class="tag">></span>${book.title.encodeAsHTML()}<span class="tag"></h5></span>
+ <span class="tag"><p</span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">card-subtitle text-muted mb-2</span><span class="delimiter">"</span></span><span class="tag">></span>
+ <span class="tag"><f:displayWidget</span> <span class="attribute-name">bean</span>=<span class="string"><span class="delimiter">"</span><span class="content">${book}</span><span class="delimiter">"</span></span> <span class="attribute-name">property</span>=<span class="string"><span class="delimiter">"</span><span class="content">author</span><span class="delimiter">"</span></span><span class="tag">/></span>
+ <span class="tag"></p></span>
+ <span class="tag"><p</span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">card-text</span><span class="delimiter">"</span></span><span class="tag">></span><span class="tag"><g:formatNumber</span> <span class="attribute-name">number</span>=<span class="string"><span class="delimiter">"</span><span class="content">${book.priceUSD}</span><span class="delimiter">"</span></s [...]
+ <span class="tag"><g:link</span> <span class="attribute-name">resource</span>=<span class="string"><span class="delimiter">"</span><span class="content">${book}</span><span class="delimiter">"</span></span> <span class="attribute-name">action</span>=<span class="string"><span class="delimiter">"</span><span class="content">show</span><span class="delimiter">"</span></span> <span class="attribute-name">class</span>=<span class="string"><span clas [...]
+ <span class="tag"></div></span>
+ <span class="tag"></div></span>
+ <span class="tag"></div></span>
+ <span class="tag"></g:each></span>
+<span class="tag"></div></span></code></pre>
+</div>
+</div>
+<div class="paragraph">
+<p>Inside this template, <code>collection</code> is the same model variable the app-wide <code>_table.gsp</code> receives. The <code>template=</code> attribute is only useful when you want a non-table layout for one specific page; if you want every list view to look like the new layout, change <code>_table.gsp</code> instead.</p>
</div>
<div class="paragraph">
-<p><code><f:table></code> for any <em>other</em> domain class still uses the default table template. Only <code>Book</code> gets this customised layout.</p>
+<p>You can also use <code>template=</code> to swap layouts based on a request attribute (e.g. a "list" vs "grid" toggle), since the attribute value is just a string passed to <code>render()</code> at runtime.</p>
</div>
-<h2 id="bookTableColumns">12.2 Per-Column Cell Overrides</h2>
+<h2 id="perColumnCells">12.3 Per-Column Cell Overrides</h2>
<div class='contribute-btn'>
- <button type='button' class='btn btn-default' onclick='window.location.href="https://github.com/apache/grails-static-website/edit/master/guides/grails-fields-custom-widgets-and-wrappers/v8/guide/bookTableColumns.adoc"'>
+ <button type='button' class='btn btn-default' onclick='window.location.href="https://github.com/apache/grails-static-website/edit/master/guides/grails-fields-custom-widgets-and-wrappers/v8/guide/perColumnCells.adoc"'>
<i class='fa fa-pencil-square-o'></i> Improve this doc
</button>
</div>
diff --git a/guides/grails-fields-custom-widgets-and-wrappers/8/guide/gettingStarted.html b/guides/grails-fields-custom-widgets-and-wrappers/8/guide/gettingStarted.html
index 7ef7e3d9b03..0272aaa2d01 100644
--- a/guides/grails-fields-custom-widgets-and-wrappers/8/guide/gettingStarted.html
+++ b/guides/grails-fields-custom-widgets-and-wrappers/8/guide/gettingStarted.html
@@ -201,7 +201,7 @@ function addJsClass() {
<div class="ulist">
<ul>
<li>
-<p>JDK 17 or later (JDK 21 or 25 recommended for Grails 8 snapshots).</p>
+<p>JDK 21 or later. JDK 21 LTS is the minimum required by Apache Grails 8; JDK 25 LTS also works.</p>
</li>
<li>
<p>Approximately 30 minutes of your time.</p>
@@ -215,7 +215,7 @@ function addJsClass() {
</ul>
</div>
<div class="paragraph">
-<p>This guide targets Apache Grails 8 (snapshot). The Fields plugin is bundled with <code>grails-core</code> in Grails 7 and later, so no additional plugin dependency is required.</p>
+<p>This guide targets Apache Grails 8. The Fields plugin is bundled with <code>grails-core</code> in Grails 7 and later, so no additional plugin dependency is required.</p>
</div>
diff --git a/guides/grails-fields-custom-widgets-and-wrappers/8/guide/index.html b/guides/grails-fields-custom-widgets-and-wrappers/8/guide/index.html
index 03dd2915c86..bafe62f3a3f 100644
--- a/guides/grails-fields-custom-widgets-and-wrappers/8/guide/index.html
+++ b/guides/grails-fields-custom-widgets-and-wrappers/8/guide/index.html
@@ -173,9 +173,11 @@
<div class="toc-item" style="margin-left:0px"><a href="#customTable"><strong>12</strong><span>Customising the Table Template</span></a></div>
- <div class="toc-item" style="margin-left:10px"><a href="#bookTableTemplate"><strong>12.1</strong><span>A Custom _table.gsp for Book</span></a></div>
+ <div class="toc-item" style="margin-left:10px"><a href="#appWideTable"><strong>12.1</strong><span>App-Wide _table.gsp Override</span></a></div>
- <div class="toc-item" style="margin-left:10px"><a href="#bookTableColumns"><strong>12.2</strong><span>Per-Column Cell Overrides</span></a></div>
+ <div class="toc-item" style="margin-left:10px"><a href="#perDomainTable"><strong>12.2</strong><span>Per-Domain Override via template= Attribute</span></a></div>
+
+ <div class="toc-item" style="margin-left:10px"><a href="#perColumnCells"><strong>12.3</strong><span>Per-Column Cell Overrides</span></a></div>
<div class="toc-item" style="margin-left:0px"><a href="#cleanCrud"><strong>13</strong><span>The Result - Clean CRUD GSPs</span></a></div>
@@ -283,7 +285,7 @@
<div class="ulist">
<ul>
<li>
-<p>JDK 17 or later (JDK 21 or 25 recommended for Grails 8 snapshots).</p>
+<p>JDK 21 or later. JDK 21 LTS is the minimum required by Apache Grails 8; JDK 25 LTS also works.</p>
</li>
<li>
<p>Approximately 30 minutes of your time.</p>
@@ -297,7 +299,7 @@
</ul>
</div>
<div class="paragraph">
-<p>This guide targets Apache Grails 8 (snapshot). The Fields plugin is bundled with <code>grails-core</code> in Grails 7 and later, so no additional plugin dependency is required.</p>
+<p>This guide targets Apache Grails 8. The Fields plugin is bundled with <code>grails-core</code> in Grails 7 and later, so no additional plugin dependency is required.</p>
</div>
@@ -348,7 +350,7 @@ cd grails-fields-custom-widgets-and-wrappers/complete
<div class="paragraph">
-<p>Generate a fresh Grails 8 snapshot project. The <a href="https://prev-snapshot.grails.org">Grails snapshot starter service</a> exposes the same <code>create-app</code> API as <code>start.grails.org</code> but for the in-development branch.</p>
+<p>Generate a fresh Apache Grails 8 project from <a href="https://start.grails.org">start.grails.org</a>.</p>
</div>
@@ -362,38 +364,10 @@ cd grails-fields-custom-widgets-and-wrappers/complete
<div class="paragraph">
-<p>Run the following command to download a <code>web</code> profile starter for Grails 8 with Hibernate, Tomcat, DevTools, and the JDK 25 toolchain:</p>
-</div>
-<div class="listingblock">
-<div class="content">
-<pre class="CodeRay highlight"><code data-lang="bash">curl --location --request GET \
- 'https://prev-snapshot.grails.org/create/web/example.library?gorm=HIBERNATE&servlet=TOMCAT&reloading=DEVTOOLS&javaVersion=JDK_25' \
- --output library.zip
-unzip library.zip -d library
-cd library</code></pre>
-</div>
-</div>
-<div class="paragraph">
-<p>The query string controls four feature toggles:</p>
-</div>
-<div class="ulist">
-<ul>
-<li>
-<p><code>gorm=HIBERNATE</code> - uses Hibernate as the GORM data store (the default; the alternative is <code>MONGODB</code>).</p>
-</li>
-<li>
-<p><code>servlet=TOMCAT</code> - embeds Apache Tomcat as the servlet container.</p>
-</li>
-<li>
-<p><code>reloading=DEVTOOLS</code> - wires in Spring Boot DevTools so file changes restart the JVM.</p>
-</li>
-<li>
-<p><code>javaVersion=JDK_25</code> - sets the source/target compatibility to JDK 25 in <code>build.gradle</code>.</p>
-</li>
-</ul>
+<p>Open <a href="https://start.grails.org">start.grails.org</a>, pick the <code>web</code> profile, name the application <code>library</code>, set the package to <code>example</code>, and download the generated zip. Unzip it and <code>cd</code> into the project directory.</p>
</div>
<div class="paragraph">
-<p>The resulting project is a self-contained Gradle build. Verify it boots before you go further:</p>
+<p>Verify it boots before you go further:</p>
</div>
<div class="listingblock">
<div class="content">
@@ -403,18 +377,6 @@ cd library</code></pre>
<div class="paragraph">
<p>Open <code><a href="http://localhost:8080/" class="bare">http://localhost:8080/</a></code> in a browser and you should see the default Grails landing page. Stop the application with <code>Ctrl+C</code> once you have confirmed it runs.</p>
</div>
-<div class="admonitionblock note">
-<table>
-<tr>
-<td class="icon">
-<i class="fa icon-note" title="Note"></i>
-</td>
-<td class="content">
-If <code>prev-snapshot.grails.org</code> is not reachable in your environment, you can pin Grails 8 manually instead. Add the snapshot Maven repository to <code>build.gradle</code> and set <code>grailsVersion=8.0.0-SNAPSHOT</code> in <code>gradle.properties</code>. The <a href="https://repo.grails.org/grails/libs-snapshots-local/">Apache Grails snapshot repository</a> hosts the artifacts.
-</td>
-</tr>
-</table>
-</div>
<h2 id="fieldsPluginAlreadyIncluded">2.2 The Fields Plugin in Grails 8</h2>
@@ -2152,43 +2114,55 @@ For very large candidate sets (hundreds of <code>Tag</code> rows), a checkbox gr
<div class="paragraph">
-<p><code><f:table></code> reads its column list from the <code>properties</code> attribute (or the first seven of the bean), looks each property up in <code>_displayWidget.gsp</code> for the cell, and emits a <code><table></code> with a header row.</p>
+<p><code><f:table></code> reads its column list from the <code>properties</code> attribute (or the first seven properties of the bean), looks each cell up via <code><f:displayWidget></code>, and emits a <code><table></code> with a sortable header row.</p>
</div>
<div class="paragraph">
-<p>You can customise tables at two layers: the whole-table template (<code>_table.gsp</code>) and the individual cell templates (<code>_displayWidget.gsp</code>). Both follow the same lookup precedence as the form templates - per-class first, then default fallback.</p>
+<p>Customising the table renders at three layers:</p>
+</div>
+<div class="ulist">
+<ul>
+<li>
+<p><strong>Whole-table layout, app-wide</strong> - replace the <code><table></code> skeleton (header row, body iteration, accessibility attributes) for every <code><f:table></code> invocation in the application. This is a single file under <code>grails-app/views/templates/_fields/_table.gsp</code>.</p>
+</li>
+<li>
+<p><strong>Whole-table layout, per-domain or per-page</strong> - opt one specific <code><f:table></code> invocation into a different template via the <code>template=</code> attribute, with the override file living next to the app-wide one under <code>grails-app/views/templates/_fields/</code>.</p>
+</li>
+<li>
+<p><strong>Per-column cells</strong> - each <code><td></code> is rendered by <code><f:displayWidget></code>, which DOES go through the standard <code>_fields/<class>/<property>/_displayWidget.gsp</code> lookup chain. So one-off cell formatting is a per-property override, not a table-template change.</p>
+</li>
+</ul>
+</div>
+<div class="admonitionblock caution">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-caution" title="Caution"></i>
+</td>
+<td class="content">
+Unlike the form templates (<code><f:field></code>, <code><f:all></code>, <code><f:display></code> with a property), <code><f:table></code> does NOT walk the <code>_fields/<class>/_table.gsp</code> lookup chain. Looking at <a href="https://github.com/apache/grails-core/blob/8.0.x/grails-fields/grails-app/taglib/grails/plugin/formfields/FormFieldsTagLib.groovy"><code>FormFieldsTagLib.table</code></a> in the plugin source, the template path is hardcoded to <cod [...]
+</td>
+</tr>
+</table>
</div>
-<h2 id="bookTableTemplate">12.1 A Custom _table.gsp for Book</h2>
+<h2 id="appWideTable">12.1 App-Wide _table.gsp Override</h2>
<div class='contribute-btn'>
- <button type='button' class='btn btn-default' onclick='window.location.href="https://github.com/apache/grails-static-website/edit/master/guides/grails-fields-custom-widgets-and-wrappers/v8/guide/bookTableTemplate.adoc"'>
+ <button type='button' class='btn btn-default' onclick='window.location.href="https://github.com/apache/grails-static-website/edit/master/guides/grails-fields-custom-widgets-and-wrappers/v8/guide/appWideTable.adoc"'>
<i class='fa fa-pencil-square-o'></i> Improve this doc
</button>
</div>
<div class="paragraph">
-<p>Override the whole table for <code>Book</code> so that:</p>
-</div>
-<div class="ulist">
-<ul>
-<li>
-<p>The table renders as a Bootstrap 5 striped, hover-enabled table.</p>
-</li>
-<li>
-<p>The header row uses <code><th scope="col"></code> for accessibility.</p>
-</li>
-<li>
-<p>The last column always contains action buttons (View / Edit / Delete) without you adding a property to <code>properties=</code>.</p>
-</li>
-</ul>
+<p>Replace the default app-wide table template with one that renders as a Bootstrap 5 striped, hover-enabled table, uses <code><th scope="col"></code> for accessibility, and adds a trailing actions column for View / Edit / Delete buttons.</p>
</div>
<div class="paragraph">
-<p>Create <code>_fields/book/_table.gsp</code>:</p>
+<p>Create the file at the path the plugin actually looks up:</p>
</div>
<div class="listingblock">
-<div class="title">grails-app/views/_fields/book/_table.gsp</div>
+<div class="title">grails-app/views/templates/_fields/_table.gsp</div>
<div class="content">
<pre class="CodeRay highlight"><code data-lang="html"><span class="tag"><table</span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">table table-striped table-hover align-middle</span><span class="delimiter">"</span></span><span class="tag">></span>
<span class="tag"><thead</span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">table-dark</span><span class="delimiter">"</span></span><span class="tag">></span>
@@ -2249,28 +2223,90 @@ For very large candidate sets (hundreds of <code>Tag</code> rows), a checkbox gr
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>domainClass</code></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><code>Class<?></code></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">The Java class of the elements - useful when emitting links via <code><g:link controller="…​"></code>.</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><code>org.grails.datastore.mapping.model.PersistentEntity</code></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">The persistent entity for the bean type. Use <code>domainClass.javaClass.simpleName.toLowerCase()</code> to compute a controller name for <code><g:link></code>.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>domainProperties</code></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><code>List<DomainProperty></code></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">The columns the plugin selected, already filtered by the <code>properties=</code>/<code>except=</code> attributes.</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><code>List<Map></code></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">The columns the plugin selected, already filtered by the <code>properties=</code>/<code>except=</code> attributes. Each map has <code>property</code>, <code>label</code>, and <code>bean</code> keys (plus <code>class</code> and <code>theme</code> if those attributes were passed).</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><code>displayStyle</code></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><code>String</code></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">The <code>displayStyle</code> attribute from <code><f:table></code>, defaulting to <code>'table'</code>. Pass it through to per-cell <code><f:displayWidget></code> calls so cell templates can branch on style.</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><code>theme</code></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><code>String</code></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">The <code>theme</code> attribute from <code><f:table></code>. Same passthrough rule.</p></td>
</tr>
</tbody>
</table>
<div class="paragraph">
-<p>Inside the loop, render each cell with <code><f:displayWidget bean="${book}" property="${prop.name}"/></code>. That dispatches to whichever <code>_displayWidget.gsp</code> is most specific - your <code>Date</code> display widget for the <code>publishedDate</code> cell, your <code>Boolean</code> widget for the <code>inStock</code> cell, and so on.</p>
+<p>Inside the loop, render each cell with <code><f:displayWidget bean="${book}" property="${prop.property}"/></code>. That call DOES go through the standard lookup chain - it will pick up your per-property <code>_displayWidget.gsp</code> overrides (the <code>Date</code> formatter you wrote in chapter 9.2, the <code>Boolean</code> checkmark from 9.3, the per-column overrides we’ll write in chapter 12.3, etc.).</p>
+</div>
+<div class="paragraph">
+<p>Because this template lives at <code>templates/_fields/_table.gsp</code>, <strong>every</strong> <code><f:table></code> in the application now uses this layout - books, authors, and any future domain class. Restart the app and visit <code><a href="http://localhost:8080/book/index" class="bare">http://localhost:8080/book/index</a></code> and <code><a href="http://localhost:8080/author/index" class="bare">http://localhost:8080/author/index</a></code>; both list pages now use the B [...]
+</div>
+
+
+<h2 id="perDomainTable">12.2 Per-Domain Override via template= Attribute</h2>
+
+<div class='contribute-btn'>
+ <button type='button' class='btn btn-default' onclick='window.location.href="https://github.com/apache/grails-static-website/edit/master/guides/grails-fields-custom-widgets-and-wrappers/v8/guide/perDomainTable.adoc"'>
+ <i class='fa fa-pencil-square-o'></i> Improve this doc
+ </button>
+</div>
+
+
+<div class="paragraph">
+<p>When you want a <strong>specific</strong> <code><f:table></code> invocation to use a different layout - for example, the books list page should show a card-grid instead of a table while every other list view keeps the standard table - opt into a per-page template via the <code>template=</code> attribute:</p>
+</div>
+<div class="listingblock">
+<div class="title">grails-app/views/book/index.gsp</div>
+<div class="content">
+<pre class="CodeRay highlight"><code data-lang="html"><span class="tag"><f:table</span> <span class="attribute-name">collection</span>=<span class="string"><span class="delimiter">"</span><span class="content">${bookList}</span><span class="delimiter">"</span></span>
+ <span class="attribute-name">properties</span>=<span class="string"><span class="delimiter">"</span><span class="content">title,author,genre,priceUSD,inStock</span><span class="delimiter">"</span></span>
+ <span class="attribute-name">template</span>=<span class="string"><span class="delimiter">"</span><span class="content">bookCards</span><span class="delimiter">"</span></span><span class="tag">/></span></code></pre>
+</div>
+</div>
+<div class="paragraph">
+<p>The plugin resolves <code>template="bookCards"</code> to the path <code>/templates/_fields/bookCards</code>, so create the override at:</p>
+</div>
+<div class="listingblock">
+<div class="title">grails-app/views/templates/_fields/_bookCards.gsp</div>
+<div class="content">
+<pre class="CodeRay highlight"><code data-lang="html"><span class="tag"><div</span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">row row-cols-1 row-cols-md-3 g-3</span><span class="delimiter">"</span></span><span class="tag">></span>
+ <span class="tag"><g:each</span> <span class="attribute-name">in</span>=<span class="string"><span class="delimiter">"</span><span class="content">${collection}</span><span class="delimiter">"</span></span> <span class="attribute-name">var</span>=<span class="string"><span class="delimiter">"</span><span class="content">book</span><span class="delimiter">"</span></span><span class="tag">></span>
+ <span class="tag"><div</span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">col</span><span class="delimiter">"</span></span><span class="tag">></span>
+ <span class="tag"><div</span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">card h-100</span><span class="delimiter">"</span></span><span class="tag">></span>
+ <span class="tag"><div</span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">card-body</span><span class="delimiter">"</span></span><span class="tag">></span>
+ <span class="tag"><h5</span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">card-title</span><span class="delimiter">"</span></span><span class="tag">></span>${book.title.encodeAsHTML()}<span class="tag"></h5></span>
+ <span class="tag"><p</span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">card-subtitle text-muted mb-2</span><span class="delimiter">"</span></span><span class="tag">></span>
+ <span class="tag"><f:displayWidget</span> <span class="attribute-name">bean</span>=<span class="string"><span class="delimiter">"</span><span class="content">${book}</span><span class="delimiter">"</span></span> <span class="attribute-name">property</span>=<span class="string"><span class="delimiter">"</span><span class="content">author</span><span class="delimiter">"</span></span><span class="tag">/></span>
+ <span class="tag"></p></span>
+ <span class="tag"><p</span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">card-text</span><span class="delimiter">"</span></span><span class="tag">></span><span class="tag"><g:formatNumber</span> <span class="attribute-name">number</span>=<span class="string"><span class="delimiter">"</span><span class="content">${book.priceUSD}</span><span class="delimiter">"</span></s [...]
+ <span class="tag"><g:link</span> <span class="attribute-name">resource</span>=<span class="string"><span class="delimiter">"</span><span class="content">${book}</span><span class="delimiter">"</span></span> <span class="attribute-name">action</span>=<span class="string"><span class="delimiter">"</span><span class="content">show</span><span class="delimiter">"</span></span> <span class="attribute-name">class</span>=<span class="string"><span clas [...]
+ <span class="tag"></div></span>
+ <span class="tag"></div></span>
+ <span class="tag"></div></span>
+ <span class="tag"></g:each></span>
+<span class="tag"></div></span></code></pre>
+</div>
+</div>
+<div class="paragraph">
+<p>Inside this template, <code>collection</code> is the same model variable the app-wide <code>_table.gsp</code> receives. The <code>template=</code> attribute is only useful when you want a non-table layout for one specific page; if you want every list view to look like the new layout, change <code>_table.gsp</code> instead.</p>
</div>
<div class="paragraph">
-<p><code><f:table></code> for any <em>other</em> domain class still uses the default table template. Only <code>Book</code> gets this customised layout.</p>
+<p>You can also use <code>template=</code> to swap layouts based on a request attribute (e.g. a "list" vs "grid" toggle), since the attribute value is just a string passed to <code>render()</code> at runtime.</p>
</div>
-<h2 id="bookTableColumns">12.2 Per-Column Cell Overrides</h2>
+<h2 id="perColumnCells">12.3 Per-Column Cell Overrides</h2>
<div class='contribute-btn'>
- <button type='button' class='btn btn-default' onclick='window.location.href="https://github.com/apache/grails-static-website/edit/master/guides/grails-fields-custom-widgets-and-wrappers/v8/guide/bookTableColumns.adoc"'>
+ <button type='button' class='btn btn-default' onclick='window.location.href="https://github.com/apache/grails-static-website/edit/master/guides/grails-fields-custom-widgets-and-wrappers/v8/guide/perColumnCells.adoc"'>
<i class='fa fa-pencil-square-o'></i> Improve this doc
</button>
</div>
diff --git a/guides/grails-fields-custom-widgets-and-wrappers/8/guide/customTable.html b/guides/grails-fields-custom-widgets-and-wrappers/8/guide/pages/appWideTable.html
similarity index 65%
copy from guides/grails-fields-custom-widgets-and-wrappers/8/guide/customTable.html
copy to guides/grails-fields-custom-widgets-and-wrappers/8/guide/pages/appWideTable.html
index 9f35313419e..506c5c4e099 100644
--- a/guides/grails-fields-custom-widgets-and-wrappers/8/guide/customTable.html
+++ b/guides/grails-fields-custom-widgets-and-wrappers/8/guide/pages/appWideTable.html
@@ -2,7 +2,7 @@
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
- <title>12 Customising the Table Template</title>
+ <title>12.1 App-Wide _table.gsp Override</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="../css/main.css" type="text/css" media="screen, print" title="Style" charset="utf-8"/>
<link rel="stylesheet" href="../css/guide.css" type="text/css" media="screen, print" title="Style" charset="utf-8" />
@@ -26,50 +26,50 @@ function addJsClass() {
<ul>
<li>
<div id="nav-summary" onmouseover="toggleNavSummary(false)" onmouseout="toggleNavSummary(true)">
- <a href="../guide/index.html" class="button">Table of contents</a>
+ <a href="../../guide/index.html" class="button">Table of contents</a>
<div id="nav-summary-childs" style="display:none;">
- <div class="toc-item" style="margin-left:0"><a href="../guide/gettingStarted.html"><strong>1</strong><span>Getting Started</span></a>
+ <div class="toc-item" style="margin-left:0"><a href="../../guide/gettingStarted.html"><strong>1</strong><span>Getting Started</span></a>
</div>
- <div class="toc-item" style="margin-left:0"><a href="../guide/createApp.html"><strong>2</strong><span>Creating the Application</span></a>
+ <div class="toc-item" style="margin-left:0"><a href="../../guide/createApp.html"><strong>2</strong><span>Creating the Application</span></a>
</div>
- <div class="toc-item" style="margin-left:0"><a href="../guide/domainModel.html"><strong>3</strong><span>The Book and Author Domain Model</span></a>
+ <div class="toc-item" style="margin-left:0"><a href="../../guide/domainModel.html"><strong>3</strong><span>The Book and Author Domain Model</span></a>
</div>
- <div class="toc-item" style="margin-left:0"><a href="../guide/scaffolding.html"><strong>4</strong><span>Scaffolding the CRUD Controllers</span></a>
+ <div class="toc-item" style="margin-left:0"><a href="../../guide/scaffolding.html"><strong>4</strong><span>Scaffolding the CRUD Controllers</span></a>
</div>
- <div class="toc-item" style="margin-left:0"><a href="../guide/fAllAndFDisplay.html"><strong>5</strong><span>Replacing the GSPs with f:all and f:display</span></a>
+ <div class="toc-item" style="margin-left:0"><a href="../../guide/fAllAndFDisplay.html"><strong>5</strong><span>Replacing the GSPs with f:all and f:display</span></a>
</div>
- <div class="toc-item" style="margin-left:0"><a href="../guide/fTable.html"><strong>6</strong><span>Replacing list.gsp with f:table</span></a>
+ <div class="toc-item" style="margin-left:0"><a href="../../guide/fTable.html"><strong>6</strong><span>Replacing list.gsp with f:table</span></a>
</div>
- <div class="toc-item" style="margin-left:0"><a href="../guide/templateLookup.html"><strong>7</strong><span>Template Lookup Precedence</span></a>
+ <div class="toc-item" style="margin-left:0"><a href="../../guide/templateLookup.html"><strong>7</strong><span>Template Lookup Precedence</span></a>
</div>
- <div class="toc-item" style="margin-left:0"><a href="../guide/customDefaultWrapper.html"><strong>8</strong><span>Customising the Default Wrapper</span></a>
+ <div class="toc-item" style="margin-left:0"><a href="../../guide/customDefaultWrapper.html"><strong>8</strong><span>Customising the Default Wrapper</span></a>
</div>
- <div class="toc-item" style="margin-left:0"><a href="../guide/customWidgets.html"><strong>9</strong><span>Customising Widgets by Type</span></a>
+ <div class="toc-item" style="margin-left:0"><a href="../../guide/customWidgets.html"><strong>9</strong><span>Customising Widgets by Type</span></a>
</div>
- <div class="toc-item" style="margin-left:0"><a href="../guide/associationWidgets.html"><strong>10</strong><span>Customising Association Widgets</span></a>
+ <div class="toc-item" style="margin-left:0"><a href="../../guide/associationWidgets.html"><strong>10</strong><span>Customising Association Widgets</span></a>
</div>
- <div class="toc-item" style="margin-left:0"><a href="../guide/perPropertyOverrides.html"><strong>11</strong><span>Per-Property Overrides</span></a>
+ <div class="toc-item" style="margin-left:0"><a href="../../guide/perPropertyOverrides.html"><strong>11</strong><span>Per-Property Overrides</span></a>
</div>
- <div class="toc-item" style="margin-left:0"><a href="../guide/customTable.html"><strong>12</strong><span>Customising the Table Template</span></a>
+ <div class="toc-item" style="margin-left:0"><a href="../../guide/customTable.html"><strong>12</strong><span>Customising the Table Template</span></a>
</div>
- <div class="toc-item" style="margin-left:0"><a href="../guide/cleanCrud.html"><strong>13</strong><span>The Result - Clean CRUD GSPs</span></a>
+ <div class="toc-item" style="margin-left:0"><a href="../../guide/cleanCrud.html"><strong>13</strong><span>The Result - Clean CRUD GSPs</span></a>
</div>
- <div class="toc-item" style="margin-left:0"><a href="../guide/helpWithGrails.html"><strong>14</strong><span>Do you need help with Grails?</span></a>
+ <div class="toc-item" style="margin-left:0"><a href="../../guide/helpWithGrails.html"><strong>14</strong><span>Do you need help with Grails?</span></a>
</div>
</div>
@@ -87,76 +87,35 @@ function addJsClass() {
<div id="main" class="corner-all">
- <div class="toc-item prev-left"><a href="../guide/perPropertyOverrides.html"><< <strong>11</strong><span>Per-Property Overrides</span></a></div>
+ <div class="toc-item prev-left"><a href="../../guide/perPropertyOverrides.html"><< <strong>11</strong><span>Per-Property Overrides</span></a></div>
- <div class="toc-item next-right"><a href="../guide/cleanCrud.html"><strong>13</strong><span>The Result - Clean CRUD GSPs</span> >></a></div>
+ <div class="toc-item next-right"><a href="../../guide/cleanCrud.html"><strong>13</strong><span>The Result - Clean CRUD GSPs</span> >></a></div>
- <div id="table-of-content">
- <h2>Table of Contents</h2>
-
- <div class="toc-item" style="margin-left:0px"><a href="#bookTableTemplate"><strong>12.1</strong><span>A Custom _table.gsp for Book</span></a>
- </div>
-
- <div class="toc-item" style="margin-left:0px"><a href="#bookTableColumns"><strong>12.2</strong><span>Per-Column Cell Overrides</span></a>
- </div>
-
- </div>
-
-<h1 id="customTable">12 Customising the Table Template</h1>
+<h2 id="appWideTable">12.1 App-Wide _table.gsp Override</h2>
<div class='contribute-btn'>
- <button type='button' class='btn btn-default' onclick='window.location.href="https://github.com/apache/grails-static-website/edit/master/guides/grails-fields-custom-widgets-and-wrappers/v8/guide/customTable.adoc"'>
+ <button type='button' class='btn btn-default' onclick='window.location.href="https://github.com/apache/grails-static-website/edit/master/guides/grails-fields-custom-widgets-and-wrappers/v8/guide/appWideTable.adoc"'>
<i class='fa fa-pencil-square-o'></i> Improve this doc
</button>
</div>
<div class="paragraph">
-<p><code><f:table></code> reads its column list from the <code>properties</code> attribute (or the first seven of the bean), looks each property up in <code>_displayWidget.gsp</code> for the cell, and emits a <code><table></code> with a header row.</p>
+<p>Replace the default app-wide table template with one that renders as a Bootstrap 5 striped, hover-enabled table, uses <code><th scope="col"></code> for accessibility, and adds a trailing actions column for View / Edit / Delete buttons.</p>
</div>
<div class="paragraph">
-<p>You can customise tables at two layers: the whole-table template (<code>_table.gsp</code>) and the individual cell templates (<code>_displayWidget.gsp</code>). Both follow the same lookup precedence as the form templates - per-class first, then default fallback.</p>
-</div>
-
-
-<h2 id="bookTableTemplate">12.1 A Custom _table.gsp for Book</h2>
-
-<div class='contribute-btn'>
- <button type='button' class='btn btn-default' onclick='window.location.href="https://github.com/apache/grails-static-website/edit/master/guides/grails-fields-custom-widgets-and-wrappers/v8/guide/bookTableTemplate.adoc"'>
- <i class='fa fa-pencil-square-o'></i> Improve this doc
- </button>
-</div>
-
-
-<div class="paragraph">
-<p>Override the whole table for <code>Book</code> so that:</p>
-</div>
-<div class="ulist">
-<ul>
-<li>
-<p>The table renders as a Bootstrap 5 striped, hover-enabled table.</p>
-</li>
-<li>
-<p>The header row uses <code><th scope="col"></code> for accessibility.</p>
-</li>
-<li>
-<p>The last column always contains action buttons (View / Edit / Delete) without you adding a property to <code>properties=</code>.</p>
-</li>
-</ul>
-</div>
-<div class="paragraph">
-<p>Create <code>_fields/book/_table.gsp</code>:</p>
+<p>Create the file at the path the plugin actually looks up:</p>
</div>
<div class="listingblock">
-<div class="title">grails-app/views/_fields/book/_table.gsp</div>
+<div class="title">grails-app/views/templates/_fields/_table.gsp</div>
<div class="content">
<pre class="CodeRay highlight"><code data-lang="html"><span class="tag"><table</span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">table table-striped table-hover align-middle</span><span class="delimiter">"</span></span><span class="tag">></span>
<span class="tag"><thead</span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">table-dark</span><span class="delimiter">"</span></span><span class="tag">></span>
@@ -217,67 +176,39 @@ function addJsClass() {
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>domainClass</code></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><code>Class<?></code></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">The Java class of the elements - useful when emitting links via <code><g:link controller="…​"></code>.</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><code>org.grails.datastore.mapping.model.PersistentEntity</code></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">The persistent entity for the bean type. Use <code>domainClass.javaClass.simpleName.toLowerCase()</code> to compute a controller name for <code><g:link></code>.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>domainProperties</code></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><code>List<DomainProperty></code></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">The columns the plugin selected, already filtered by the <code>properties=</code>/<code>except=</code> attributes.</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><code>List<Map></code></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">The columns the plugin selected, already filtered by the <code>properties=</code>/<code>except=</code> attributes. Each map has <code>property</code>, <code>label</code>, and <code>bean</code> keys (plus <code>class</code> and <code>theme</code> if those attributes were passed).</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><code>displayStyle</code></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><code>String</code></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">The <code>displayStyle</code> attribute from <code><f:table></code>, defaulting to <code>'table'</code>. Pass it through to per-cell <code><f:displayWidget></code> calls so cell templates can branch on style.</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><code>theme</code></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><code>String</code></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">The <code>theme</code> attribute from <code><f:table></code>. Same passthrough rule.</p></td>
</tr>
</tbody>
</table>
<div class="paragraph">
-<p>Inside the loop, render each cell with <code><f:displayWidget bean="${book}" property="${prop.name}"/></code>. That dispatches to whichever <code>_displayWidget.gsp</code> is most specific - your <code>Date</code> display widget for the <code>publishedDate</code> cell, your <code>Boolean</code> widget for the <code>inStock</code> cell, and so on.</p>
-</div>
-<div class="paragraph">
-<p><code><f:table></code> for any <em>other</em> domain class still uses the default table template. Only <code>Book</code> gets this customised layout.</p>
-</div>
-
-
-<h2 id="bookTableColumns">12.2 Per-Column Cell Overrides</h2>
-
-<div class='contribute-btn'>
- <button type='button' class='btn btn-default' onclick='window.location.href="https://github.com/apache/grails-static-website/edit/master/guides/grails-fields-custom-widgets-and-wrappers/v8/guide/bookTableColumns.adoc"'>
- <i class='fa fa-pencil-square-o'></i> Improve this doc
- </button>
-</div>
-
-
-<div class="paragraph">
-<p>Sometimes a single column wants formatting that does not generalise to the property’s type. For example, the <code>priceUSD</code> column on the books table should render with a <code>$</code> prefix and two decimal places, but you do not want every <code>BigDecimal</code> in the app to look like USD.</p>
-</div>
-<div class="paragraph">
-<p>Per-class, per-property display widgets work the same way as form widgets. Create <code>_fields/book/priceUSD/_displayWidget.gsp</code>:</p>
-</div>
-<div class="listingblock">
-<div class="title">grails-app/views/_fields/book/priceUSD/_displayWidget.gsp</div>
-<div class="content">
-<pre class="CodeRay highlight"><code data-lang="html"><span class="tag"><g:formatNumber</span> <span class="attribute-name">number</span>=<span class="string"><span class="delimiter">"</span><span class="content">${value}</span><span class="delimiter">"</span></span> <span class="attribute-name">type</span>=<span class="string"><span class="delimiter">"</span><span class="content">currency</span><span class="delimiter">"</span></span> <span class="attribute-name">c [...]
-</div>
-</div>
-<div class="paragraph">
-<p>The <code><f:displayWidget></code> call inside the table template dispatches to the most-specific path, so the price column picks up the currency formatting. The other <code>BigDecimal</code> columns in the app keep using whatever <code>_fields/bigDecimal/_displayWidget.gsp</code> (or the default) produces.</p>
-</div>
-<div class="paragraph">
-<p>A second example: render <code>Book.author</code> as the author’s <code>name</code> rather than the default <code>toString()</code>:</p>
-</div>
-<div class="listingblock">
-<div class="title">grails-app/views/_fields/book/author/_displayWidget.gsp</div>
-<div class="content">
-<pre class="CodeRay highlight"><code data-lang="html"><span class="tag"><g:if</span> <span class="attribute-name">test</span>=<span class="string"><span class="delimiter">"</span><span class="content">${value}</span><span class="delimiter">"</span></span><span class="tag">></span><span class="tag"><g:link</span> <span class="attribute-name">controller</span>=<span class="string"><span class="delimiter">"</span><span class="content">author</span><span class="delimi [...]
-</div>
+<p>Inside the loop, render each cell with <code><f:displayWidget bean="${book}" property="${prop.property}"/></code>. That call DOES go through the standard lookup chain - it will pick up your per-property <code>_displayWidget.gsp</code> overrides (the <code>Date</code> formatter you wrote in chapter 9.2, the <code>Boolean</code> checkmark from 9.3, the per-column overrides we’ll write in chapter 12.3, etc.).</p>
</div>
<div class="paragraph">
-<p>The same display widget is also picked up by <code><f:display bean="book" property="author"/></code> on the show page - one customisation, two consumers.</p>
+<p>Because this template lives at <code>templates/_fields/_table.gsp</code>, <strong>every</strong> <code><f:table></code> in the application now uses this layout - books, authors, and any future domain class. Restart the app and visit <code><a href="http://localhost:8080/book/index" class="bare">http://localhost:8080/book/index</a></code> and <code><a href="http://localhost:8080/author/index" class="bare">http://localhost:8080/author/index</a></code>; both list pages now use the B [...]
</div>
<div style="clear:both;margin-top:15px;"></div>
- <div class="toc-item prev-left"><a href="../guide/perPropertyOverrides.html"><< <strong>11</strong><span>Per-Property Overrides</span></a></div>
+ <div class="toc-item prev-left"><a href="../../guide/perPropertyOverrides.html"><< <strong>11</strong><span>Per-Property Overrides</span></a></div>
- <div class="toc-item next-right"><a href="../guide/cleanCrud.html"><strong>13</strong><span>The Result - Clean CRUD GSPs</span> >></a></div>
+ <div class="toc-item next-right"><a href="../../guide/cleanCrud.html"><strong>13</strong><span>The Result - Clean CRUD GSPs</span> >></a></div>
<div style="clear:both"></div>
</div>
diff --git a/guides/grails-fields-custom-widgets-and-wrappers/8/guide/pages/download.html b/guides/grails-fields-custom-widgets-and-wrappers/8/guide/pages/download.html
index 6fdffc03093..9d942127ae9 100644
--- a/guides/grails-fields-custom-widgets-and-wrappers/8/guide/pages/download.html
+++ b/guides/grails-fields-custom-widgets-and-wrappers/8/guide/pages/download.html
@@ -109,38 +109,10 @@ function addJsClass() {
<div class="paragraph">
-<p>Run the following command to download a <code>web</code> profile starter for Grails 8 with Hibernate, Tomcat, DevTools, and the JDK 25 toolchain:</p>
-</div>
-<div class="listingblock">
-<div class="content">
-<pre class="CodeRay highlight"><code data-lang="bash">curl --location --request GET \
- 'https://prev-snapshot.grails.org/create/web/example.library?gorm=HIBERNATE&servlet=TOMCAT&reloading=DEVTOOLS&javaVersion=JDK_25' \
- --output library.zip
-unzip library.zip -d library
-cd library</code></pre>
-</div>
+<p>Open <a href="https://start.grails.org">start.grails.org</a>, pick the <code>web</code> profile, name the application <code>library</code>, set the package to <code>example</code>, and download the generated zip. Unzip it and <code>cd</code> into the project directory.</p>
</div>
<div class="paragraph">
-<p>The query string controls four feature toggles:</p>
-</div>
-<div class="ulist">
-<ul>
-<li>
-<p><code>gorm=HIBERNATE</code> - uses Hibernate as the GORM data store (the default; the alternative is <code>MONGODB</code>).</p>
-</li>
-<li>
-<p><code>servlet=TOMCAT</code> - embeds Apache Tomcat as the servlet container.</p>
-</li>
-<li>
-<p><code>reloading=DEVTOOLS</code> - wires in Spring Boot DevTools so file changes restart the JVM.</p>
-</li>
-<li>
-<p><code>javaVersion=JDK_25</code> - sets the source/target compatibility to JDK 25 in <code>build.gradle</code>.</p>
-</li>
-</ul>
-</div>
-<div class="paragraph">
-<p>The resulting project is a self-contained Gradle build. Verify it boots before you go further:</p>
+<p>Verify it boots before you go further:</p>
</div>
<div class="listingblock">
<div class="content">
@@ -149,18 +121,6 @@ cd library</code></pre>
</div>
<div class="paragraph">
<p>Open <code><a href="http://localhost:8080/" class="bare">http://localhost:8080/</a></code> in a browser and you should see the default Grails landing page. Stop the application with <code>Ctrl+C</code> once you have confirmed it runs.</p>
-</div>
-<div class="admonitionblock note">
-<table>
-<tr>
-<td class="icon">
-<i class="fa icon-note" title="Note"></i>
-</td>
-<td class="content">
-If <code>prev-snapshot.grails.org</code> is not reachable in your environment, you can pin Grails 8 manually instead. Add the snapshot Maven repository to <code>build.gradle</code> and set <code>grailsVersion=8.0.0-SNAPSHOT</code> in <code>gradle.properties</code>. The <a href="https://repo.grails.org/grails/libs-snapshots-local/">Apache Grails snapshot repository</a> hosts the artifacts.
-</td>
-</tr>
-</table>
</div>
diff --git a/guides/grails-fields-custom-widgets-and-wrappers/8/guide/pages/download.html b/guides/grails-fields-custom-widgets-and-wrappers/8/guide/pages/perColumnCells.html
similarity index 71%
copy from guides/grails-fields-custom-widgets-and-wrappers/8/guide/pages/download.html
copy to guides/grails-fields-custom-widgets-and-wrappers/8/guide/pages/perColumnCells.html
index 6fdffc03093..bd7a2c76e49 100644
--- a/guides/grails-fields-custom-widgets-and-wrappers/8/guide/pages/download.html
+++ b/guides/grails-fields-custom-widgets-and-wrappers/8/guide/pages/perColumnCells.html
@@ -2,7 +2,7 @@
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
- <title>2.1 Download a Grails 8 Snapshot Starter</title>
+ <title>12.3 Per-Column Cell Overrides</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="../css/main.css" type="text/css" media="screen, print" title="Style" charset="utf-8"/>
<link rel="stylesheet" href="../css/guide.css" type="text/css" media="screen, print" title="Style" charset="utf-8" />
@@ -87,11 +87,11 @@ function addJsClass() {
<div id="main" class="corner-all">
- <div class="toc-item prev-left"><a href="../../guide/gettingStarted.html"><< <strong>1</strong><span>Getting Started</span></a></div>
+ <div class="toc-item prev-left"><a href="../../guide/perPropertyOverrides.html"><< <strong>11</strong><span>Per-Property Overrides</span></a></div>
- <div class="toc-item next-right"><a href="../../guide/domainModel.html"><strong>3</strong><span>The Book and Author Domain Model</span> >></a></div>
+ <div class="toc-item next-right"><a href="../../guide/cleanCrud.html"><strong>13</strong><span>The Result - Clean CRUD GSPs</span> >></a></div>
@@ -99,76 +99,49 @@ function addJsClass() {
-<h2 id="download">2.1 Download a Grails 8 Snapshot Starter</h2>
+<h2 id="perColumnCells">12.3 Per-Column Cell Overrides</h2>
<div class='contribute-btn'>
- <button type='button' class='btn btn-default' onclick='window.location.href="https://github.com/apache/grails-static-website/edit/master/guides/grails-fields-custom-widgets-and-wrappers/v8/guide/download.adoc"'>
+ <button type='button' class='btn btn-default' onclick='window.location.href="https://github.com/apache/grails-static-website/edit/master/guides/grails-fields-custom-widgets-and-wrappers/v8/guide/perColumnCells.adoc"'>
<i class='fa fa-pencil-square-o'></i> Improve this doc
</button>
</div>
<div class="paragraph">
-<p>Run the following command to download a <code>web</code> profile starter for Grails 8 with Hibernate, Tomcat, DevTools, and the JDK 25 toolchain:</p>
+<p>Sometimes a single column wants formatting that does not generalise to the property’s type. For example, the <code>priceUSD</code> column on the books table should render with a <code>$</code> prefix and two decimal places, but you do not want every <code>BigDecimal</code> in the app to look like USD.</p>
+</div>
+<div class="paragraph">
+<p>Per-class, per-property display widgets work the same way as form widgets. Create <code>_fields/book/priceUSD/_displayWidget.gsp</code>:</p>
</div>
<div class="listingblock">
+<div class="title">grails-app/views/_fields/book/priceUSD/_displayWidget.gsp</div>
<div class="content">
-<pre class="CodeRay highlight"><code data-lang="bash">curl --location --request GET \
- 'https://prev-snapshot.grails.org/create/web/example.library?gorm=HIBERNATE&servlet=TOMCAT&reloading=DEVTOOLS&javaVersion=JDK_25' \
- --output library.zip
-unzip library.zip -d library
-cd library</code></pre>
+<pre class="CodeRay highlight"><code data-lang="html"><span class="tag"><g:formatNumber</span> <span class="attribute-name">number</span>=<span class="string"><span class="delimiter">"</span><span class="content">${value}</span><span class="delimiter">"</span></span> <span class="attribute-name">type</span>=<span class="string"><span class="delimiter">"</span><span class="content">currency</span><span class="delimiter">"</span></span> <span class="attribute-name">c [...]
</div>
</div>
<div class="paragraph">
-<p>The query string controls four feature toggles:</p>
-</div>
-<div class="ulist">
-<ul>
-<li>
-<p><code>gorm=HIBERNATE</code> - uses Hibernate as the GORM data store (the default; the alternative is <code>MONGODB</code>).</p>
-</li>
-<li>
-<p><code>servlet=TOMCAT</code> - embeds Apache Tomcat as the servlet container.</p>
-</li>
-<li>
-<p><code>reloading=DEVTOOLS</code> - wires in Spring Boot DevTools so file changes restart the JVM.</p>
-</li>
-<li>
-<p><code>javaVersion=JDK_25</code> - sets the source/target compatibility to JDK 25 in <code>build.gradle</code>.</p>
-</li>
-</ul>
+<p>The <code><f:displayWidget></code> call inside the table template dispatches to the most-specific path, so the price column picks up the currency formatting. The other <code>BigDecimal</code> columns in the app keep using whatever <code>_fields/bigDecimal/_displayWidget.gsp</code> (or the default) produces.</p>
</div>
<div class="paragraph">
-<p>The resulting project is a self-contained Gradle build. Verify it boots before you go further:</p>
+<p>A second example: render <code>Book.author</code> as the author’s <code>name</code> rather than the default <code>toString()</code>:</p>
</div>
<div class="listingblock">
+<div class="title">grails-app/views/_fields/book/author/_displayWidget.gsp</div>
<div class="content">
-<pre class="CodeRay highlight"><code data-lang="bash">./gradlew bootRun</code></pre>
+<pre class="CodeRay highlight"><code data-lang="html"><span class="tag"><g:if</span> <span class="attribute-name">test</span>=<span class="string"><span class="delimiter">"</span><span class="content">${value}</span><span class="delimiter">"</span></span><span class="tag">></span><span class="tag"><g:link</span> <span class="attribute-name">controller</span>=<span class="string"><span class="delimiter">"</span><span class="content">author</span><span class="delimi [...]
</div>
</div>
<div class="paragraph">
-<p>Open <code><a href="http://localhost:8080/" class="bare">http://localhost:8080/</a></code> in a browser and you should see the default Grails landing page. Stop the application with <code>Ctrl+C</code> once you have confirmed it runs.</p>
-</div>
-<div class="admonitionblock note">
-<table>
-<tr>
-<td class="icon">
-<i class="fa icon-note" title="Note"></i>
-</td>
-<td class="content">
-If <code>prev-snapshot.grails.org</code> is not reachable in your environment, you can pin Grails 8 manually instead. Add the snapshot Maven repository to <code>build.gradle</code> and set <code>grailsVersion=8.0.0-SNAPSHOT</code> in <code>gradle.properties</code>. The <a href="https://repo.grails.org/grails/libs-snapshots-local/">Apache Grails snapshot repository</a> hosts the artifacts.
-</td>
-</tr>
-</table>
+<p>The same display widget is also picked up by <code><f:display bean="book" property="author"/></code> on the show page - one customisation, two consumers.</p>
</div>
<div style="clear:both;margin-top:15px;"></div>
- <div class="toc-item prev-left"><a href="../../guide/gettingStarted.html"><< <strong>1</strong><span>Getting Started</span></a></div>
+ <div class="toc-item prev-left"><a href="../../guide/perPropertyOverrides.html"><< <strong>11</strong><span>Per-Property Overrides</span></a></div>
- <div class="toc-item next-right"><a href="../../guide/domainModel.html"><strong>3</strong><span>The Book and Author Domain Model</span> >></a></div>
+ <div class="toc-item next-right"><a href="../../guide/cleanCrud.html"><strong>13</strong><span>The Result - Clean CRUD GSPs</span> >></a></div>
<div style="clear:both"></div>
</div>
diff --git a/guides/grails-fields-custom-widgets-and-wrappers/8/guide/pages/download.html b/guides/grails-fields-custom-widgets-and-wrappers/8/guide/pages/perDomainTable.html
similarity index 56%
copy from guides/grails-fields-custom-widgets-and-wrappers/8/guide/pages/download.html
copy to guides/grails-fields-custom-widgets-and-wrappers/8/guide/pages/perDomainTable.html
index 6fdffc03093..217fcbb509d 100644
--- a/guides/grails-fields-custom-widgets-and-wrappers/8/guide/pages/download.html
+++ b/guides/grails-fields-custom-widgets-and-wrappers/8/guide/pages/perDomainTable.html
@@ -2,7 +2,7 @@
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
- <title>2.1 Download a Grails 8 Snapshot Starter</title>
+ <title>12.2 Per-Domain Override via template= Attribute</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="../css/main.css" type="text/css" media="screen, print" title="Style" charset="utf-8"/>
<link rel="stylesheet" href="../css/guide.css" type="text/css" media="screen, print" title="Style" charset="utf-8" />
@@ -87,11 +87,11 @@ function addJsClass() {
<div id="main" class="corner-all">
- <div class="toc-item prev-left"><a href="../../guide/gettingStarted.html"><< <strong>1</strong><span>Getting Started</span></a></div>
+ <div class="toc-item prev-left"><a href="../../guide/perPropertyOverrides.html"><< <strong>11</strong><span>Per-Property Overrides</span></a></div>
- <div class="toc-item next-right"><a href="../../guide/domainModel.html"><strong>3</strong><span>The Book and Author Domain Model</span> >></a></div>
+ <div class="toc-item next-right"><a href="../../guide/cleanCrud.html"><strong>13</strong><span>The Result - Clean CRUD GSPs</span> >></a></div>
@@ -99,76 +99,63 @@ function addJsClass() {
-<h2 id="download">2.1 Download a Grails 8 Snapshot Starter</h2>
+<h2 id="perDomainTable">12.2 Per-Domain Override via template= Attribute</h2>
<div class='contribute-btn'>
- <button type='button' class='btn btn-default' onclick='window.location.href="https://github.com/apache/grails-static-website/edit/master/guides/grails-fields-custom-widgets-and-wrappers/v8/guide/download.adoc"'>
+ <button type='button' class='btn btn-default' onclick='window.location.href="https://github.com/apache/grails-static-website/edit/master/guides/grails-fields-custom-widgets-and-wrappers/v8/guide/perDomainTable.adoc"'>
<i class='fa fa-pencil-square-o'></i> Improve this doc
</button>
</div>
<div class="paragraph">
-<p>Run the following command to download a <code>web</code> profile starter for Grails 8 with Hibernate, Tomcat, DevTools, and the JDK 25 toolchain:</p>
+<p>When you want a <strong>specific</strong> <code><f:table></code> invocation to use a different layout - for example, the books list page should show a card-grid instead of a table while every other list view keeps the standard table - opt into a per-page template via the <code>template=</code> attribute:</p>
</div>
<div class="listingblock">
+<div class="title">grails-app/views/book/index.gsp</div>
<div class="content">
-<pre class="CodeRay highlight"><code data-lang="bash">curl --location --request GET \
- 'https://prev-snapshot.grails.org/create/web/example.library?gorm=HIBERNATE&servlet=TOMCAT&reloading=DEVTOOLS&javaVersion=JDK_25' \
- --output library.zip
-unzip library.zip -d library
-cd library</code></pre>
+<pre class="CodeRay highlight"><code data-lang="html"><span class="tag"><f:table</span> <span class="attribute-name">collection</span>=<span class="string"><span class="delimiter">"</span><span class="content">${bookList}</span><span class="delimiter">"</span></span>
+ <span class="attribute-name">properties</span>=<span class="string"><span class="delimiter">"</span><span class="content">title,author,genre,priceUSD,inStock</span><span class="delimiter">"</span></span>
+ <span class="attribute-name">template</span>=<span class="string"><span class="delimiter">"</span><span class="content">bookCards</span><span class="delimiter">"</span></span><span class="tag">/></span></code></pre>
</div>
</div>
<div class="paragraph">
-<p>The query string controls four feature toggles:</p>
-</div>
-<div class="ulist">
-<ul>
-<li>
-<p><code>gorm=HIBERNATE</code> - uses Hibernate as the GORM data store (the default; the alternative is <code>MONGODB</code>).</p>
-</li>
-<li>
-<p><code>servlet=TOMCAT</code> - embeds Apache Tomcat as the servlet container.</p>
-</li>
-<li>
-<p><code>reloading=DEVTOOLS</code> - wires in Spring Boot DevTools so file changes restart the JVM.</p>
-</li>
-<li>
-<p><code>javaVersion=JDK_25</code> - sets the source/target compatibility to JDK 25 in <code>build.gradle</code>.</p>
-</li>
-</ul>
-</div>
-<div class="paragraph">
-<p>The resulting project is a self-contained Gradle build. Verify it boots before you go further:</p>
+<p>The plugin resolves <code>template="bookCards"</code> to the path <code>/templates/_fields/bookCards</code>, so create the override at:</p>
</div>
<div class="listingblock">
+<div class="title">grails-app/views/templates/_fields/_bookCards.gsp</div>
<div class="content">
-<pre class="CodeRay highlight"><code data-lang="bash">./gradlew bootRun</code></pre>
+<pre class="CodeRay highlight"><code data-lang="html"><span class="tag"><div</span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">row row-cols-1 row-cols-md-3 g-3</span><span class="delimiter">"</span></span><span class="tag">></span>
+ <span class="tag"><g:each</span> <span class="attribute-name">in</span>=<span class="string"><span class="delimiter">"</span><span class="content">${collection}</span><span class="delimiter">"</span></span> <span class="attribute-name">var</span>=<span class="string"><span class="delimiter">"</span><span class="content">book</span><span class="delimiter">"</span></span><span class="tag">></span>
+ <span class="tag"><div</span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">col</span><span class="delimiter">"</span></span><span class="tag">></span>
+ <span class="tag"><div</span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">card h-100</span><span class="delimiter">"</span></span><span class="tag">></span>
+ <span class="tag"><div</span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">card-body</span><span class="delimiter">"</span></span><span class="tag">></span>
+ <span class="tag"><h5</span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">card-title</span><span class="delimiter">"</span></span><span class="tag">></span>${book.title.encodeAsHTML()}<span class="tag"></h5></span>
+ <span class="tag"><p</span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">card-subtitle text-muted mb-2</span><span class="delimiter">"</span></span><span class="tag">></span>
+ <span class="tag"><f:displayWidget</span> <span class="attribute-name">bean</span>=<span class="string"><span class="delimiter">"</span><span class="content">${book}</span><span class="delimiter">"</span></span> <span class="attribute-name">property</span>=<span class="string"><span class="delimiter">"</span><span class="content">author</span><span class="delimiter">"</span></span><span class="tag">/></span>
+ <span class="tag"></p></span>
+ <span class="tag"><p</span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">card-text</span><span class="delimiter">"</span></span><span class="tag">></span><span class="tag"><g:formatNumber</span> <span class="attribute-name">number</span>=<span class="string"><span class="delimiter">"</span><span class="content">${book.priceUSD}</span><span class="delimiter">"</span></s [...]
+ <span class="tag"><g:link</span> <span class="attribute-name">resource</span>=<span class="string"><span class="delimiter">"</span><span class="content">${book}</span><span class="delimiter">"</span></span> <span class="attribute-name">action</span>=<span class="string"><span class="delimiter">"</span><span class="content">show</span><span class="delimiter">"</span></span> <span class="attribute-name">class</span>=<span class="string"><span clas [...]
+ <span class="tag"></div></span>
+ <span class="tag"></div></span>
+ <span class="tag"></div></span>
+ <span class="tag"></g:each></span>
+<span class="tag"></div></span></code></pre>
</div>
</div>
<div class="paragraph">
-<p>Open <code><a href="http://localhost:8080/" class="bare">http://localhost:8080/</a></code> in a browser and you should see the default Grails landing page. Stop the application with <code>Ctrl+C</code> once you have confirmed it runs.</p>
+<p>Inside this template, <code>collection</code> is the same model variable the app-wide <code>_table.gsp</code> receives. The <code>template=</code> attribute is only useful when you want a non-table layout for one specific page; if you want every list view to look like the new layout, change <code>_table.gsp</code> instead.</p>
</div>
-<div class="admonitionblock note">
-<table>
-<tr>
-<td class="icon">
-<i class="fa icon-note" title="Note"></i>
-</td>
-<td class="content">
-If <code>prev-snapshot.grails.org</code> is not reachable in your environment, you can pin Grails 8 manually instead. Add the snapshot Maven repository to <code>build.gradle</code> and set <code>grailsVersion=8.0.0-SNAPSHOT</code> in <code>gradle.properties</code>. The <a href="https://repo.grails.org/grails/libs-snapshots-local/">Apache Grails snapshot repository</a> hosts the artifacts.
-</td>
-</tr>
-</table>
+<div class="paragraph">
+<p>You can also use <code>template=</code> to swap layouts based on a request attribute (e.g. a "list" vs "grid" toggle), since the attribute value is just a string passed to <code>render()</code> at runtime.</p>
</div>
<div style="clear:both;margin-top:15px;"></div>
- <div class="toc-item prev-left"><a href="../../guide/gettingStarted.html"><< <strong>1</strong><span>Getting Started</span></a></div>
+ <div class="toc-item prev-left"><a href="../../guide/perPropertyOverrides.html"><< <strong>11</strong><span>Per-Property Overrides</span></a></div>
- <div class="toc-item next-right"><a href="../../guide/domainModel.html"><strong>3</strong><span>The Book and Author Domain Model</span> >></a></div>
+ <div class="toc-item next-right"><a href="../../guide/cleanCrud.html"><strong>13</strong><span>The Result - Clean CRUD GSPs</span> >></a></div>
<div style="clear:both"></div>
</div>
diff --git a/guides/grails-fields-custom-widgets-and-wrappers/8/guide/pages/requirements.html b/guides/grails-fields-custom-widgets-and-wrappers/8/guide/pages/requirements.html
index ee5c711b637..fc3cc650c2d 100644
--- a/guides/grails-fields-custom-widgets-and-wrappers/8/guide/pages/requirements.html
+++ b/guides/grails-fields-custom-widgets-and-wrappers/8/guide/pages/requirements.html
@@ -112,7 +112,7 @@ function addJsClass() {
<div class="ulist">
<ul>
<li>
-<p>JDK 17 or later (JDK 21 or 25 recommended for Grails 8 snapshots).</p>
+<p>JDK 21 or later. JDK 21 LTS is the minimum required by Apache Grails 8; JDK 25 LTS also works.</p>
</li>
<li>
<p>Approximately 30 minutes of your time.</p>
@@ -126,7 +126,7 @@ function addJsClass() {
</ul>
</div>
<div class="paragraph">
-<p>This guide targets Apache Grails 8 (snapshot). The Fields plugin is bundled with <code>grails-core</code> in Grails 7 and later, so no additional plugin dependency is required.</p>
+<p>This guide targets Apache Grails 8. The Fields plugin is bundled with <code>grails-core</code> in Grails 7 and later, so no additional plugin dependency is required.</p>
</div>
diff --git a/guides/grails-fields-custom-widgets-and-wrappers/8/guide/single.html b/guides/grails-fields-custom-widgets-and-wrappers/8/guide/single.html
index 03dd2915c86..bafe62f3a3f 100644
--- a/guides/grails-fields-custom-widgets-and-wrappers/8/guide/single.html
+++ b/guides/grails-fields-custom-widgets-and-wrappers/8/guide/single.html
@@ -173,9 +173,11 @@
<div class="toc-item" style="margin-left:0px"><a href="#customTable"><strong>12</strong><span>Customising the Table Template</span></a></div>
- <div class="toc-item" style="margin-left:10px"><a href="#bookTableTemplate"><strong>12.1</strong><span>A Custom _table.gsp for Book</span></a></div>
+ <div class="toc-item" style="margin-left:10px"><a href="#appWideTable"><strong>12.1</strong><span>App-Wide _table.gsp Override</span></a></div>
- <div class="toc-item" style="margin-left:10px"><a href="#bookTableColumns"><strong>12.2</strong><span>Per-Column Cell Overrides</span></a></div>
+ <div class="toc-item" style="margin-left:10px"><a href="#perDomainTable"><strong>12.2</strong><span>Per-Domain Override via template= Attribute</span></a></div>
+
+ <div class="toc-item" style="margin-left:10px"><a href="#perColumnCells"><strong>12.3</strong><span>Per-Column Cell Overrides</span></a></div>
<div class="toc-item" style="margin-left:0px"><a href="#cleanCrud"><strong>13</strong><span>The Result - Clean CRUD GSPs</span></a></div>
@@ -283,7 +285,7 @@
<div class="ulist">
<ul>
<li>
-<p>JDK 17 or later (JDK 21 or 25 recommended for Grails 8 snapshots).</p>
+<p>JDK 21 or later. JDK 21 LTS is the minimum required by Apache Grails 8; JDK 25 LTS also works.</p>
</li>
<li>
<p>Approximately 30 minutes of your time.</p>
@@ -297,7 +299,7 @@
</ul>
</div>
<div class="paragraph">
-<p>This guide targets Apache Grails 8 (snapshot). The Fields plugin is bundled with <code>grails-core</code> in Grails 7 and later, so no additional plugin dependency is required.</p>
+<p>This guide targets Apache Grails 8. The Fields plugin is bundled with <code>grails-core</code> in Grails 7 and later, so no additional plugin dependency is required.</p>
</div>
@@ -348,7 +350,7 @@ cd grails-fields-custom-widgets-and-wrappers/complete
<div class="paragraph">
-<p>Generate a fresh Grails 8 snapshot project. The <a href="https://prev-snapshot.grails.org">Grails snapshot starter service</a> exposes the same <code>create-app</code> API as <code>start.grails.org</code> but for the in-development branch.</p>
+<p>Generate a fresh Apache Grails 8 project from <a href="https://start.grails.org">start.grails.org</a>.</p>
</div>
@@ -362,38 +364,10 @@ cd grails-fields-custom-widgets-and-wrappers/complete
<div class="paragraph">
-<p>Run the following command to download a <code>web</code> profile starter for Grails 8 with Hibernate, Tomcat, DevTools, and the JDK 25 toolchain:</p>
-</div>
-<div class="listingblock">
-<div class="content">
-<pre class="CodeRay highlight"><code data-lang="bash">curl --location --request GET \
- 'https://prev-snapshot.grails.org/create/web/example.library?gorm=HIBERNATE&servlet=TOMCAT&reloading=DEVTOOLS&javaVersion=JDK_25' \
- --output library.zip
-unzip library.zip -d library
-cd library</code></pre>
-</div>
-</div>
-<div class="paragraph">
-<p>The query string controls four feature toggles:</p>
-</div>
-<div class="ulist">
-<ul>
-<li>
-<p><code>gorm=HIBERNATE</code> - uses Hibernate as the GORM data store (the default; the alternative is <code>MONGODB</code>).</p>
-</li>
-<li>
-<p><code>servlet=TOMCAT</code> - embeds Apache Tomcat as the servlet container.</p>
-</li>
-<li>
-<p><code>reloading=DEVTOOLS</code> - wires in Spring Boot DevTools so file changes restart the JVM.</p>
-</li>
-<li>
-<p><code>javaVersion=JDK_25</code> - sets the source/target compatibility to JDK 25 in <code>build.gradle</code>.</p>
-</li>
-</ul>
+<p>Open <a href="https://start.grails.org">start.grails.org</a>, pick the <code>web</code> profile, name the application <code>library</code>, set the package to <code>example</code>, and download the generated zip. Unzip it and <code>cd</code> into the project directory.</p>
</div>
<div class="paragraph">
-<p>The resulting project is a self-contained Gradle build. Verify it boots before you go further:</p>
+<p>Verify it boots before you go further:</p>
</div>
<div class="listingblock">
<div class="content">
@@ -403,18 +377,6 @@ cd library</code></pre>
<div class="paragraph">
<p>Open <code><a href="http://localhost:8080/" class="bare">http://localhost:8080/</a></code> in a browser and you should see the default Grails landing page. Stop the application with <code>Ctrl+C</code> once you have confirmed it runs.</p>
</div>
-<div class="admonitionblock note">
-<table>
-<tr>
-<td class="icon">
-<i class="fa icon-note" title="Note"></i>
-</td>
-<td class="content">
-If <code>prev-snapshot.grails.org</code> is not reachable in your environment, you can pin Grails 8 manually instead. Add the snapshot Maven repository to <code>build.gradle</code> and set <code>grailsVersion=8.0.0-SNAPSHOT</code> in <code>gradle.properties</code>. The <a href="https://repo.grails.org/grails/libs-snapshots-local/">Apache Grails snapshot repository</a> hosts the artifacts.
-</td>
-</tr>
-</table>
-</div>
<h2 id="fieldsPluginAlreadyIncluded">2.2 The Fields Plugin in Grails 8</h2>
@@ -2152,43 +2114,55 @@ For very large candidate sets (hundreds of <code>Tag</code> rows), a checkbox gr
<div class="paragraph">
-<p><code><f:table></code> reads its column list from the <code>properties</code> attribute (or the first seven of the bean), looks each property up in <code>_displayWidget.gsp</code> for the cell, and emits a <code><table></code> with a header row.</p>
+<p><code><f:table></code> reads its column list from the <code>properties</code> attribute (or the first seven properties of the bean), looks each cell up via <code><f:displayWidget></code>, and emits a <code><table></code> with a sortable header row.</p>
</div>
<div class="paragraph">
-<p>You can customise tables at two layers: the whole-table template (<code>_table.gsp</code>) and the individual cell templates (<code>_displayWidget.gsp</code>). Both follow the same lookup precedence as the form templates - per-class first, then default fallback.</p>
+<p>Customising the table renders at three layers:</p>
+</div>
+<div class="ulist">
+<ul>
+<li>
+<p><strong>Whole-table layout, app-wide</strong> - replace the <code><table></code> skeleton (header row, body iteration, accessibility attributes) for every <code><f:table></code> invocation in the application. This is a single file under <code>grails-app/views/templates/_fields/_table.gsp</code>.</p>
+</li>
+<li>
+<p><strong>Whole-table layout, per-domain or per-page</strong> - opt one specific <code><f:table></code> invocation into a different template via the <code>template=</code> attribute, with the override file living next to the app-wide one under <code>grails-app/views/templates/_fields/</code>.</p>
+</li>
+<li>
+<p><strong>Per-column cells</strong> - each <code><td></code> is rendered by <code><f:displayWidget></code>, which DOES go through the standard <code>_fields/<class>/<property>/_displayWidget.gsp</code> lookup chain. So one-off cell formatting is a per-property override, not a table-template change.</p>
+</li>
+</ul>
+</div>
+<div class="admonitionblock caution">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-caution" title="Caution"></i>
+</td>
+<td class="content">
+Unlike the form templates (<code><f:field></code>, <code><f:all></code>, <code><f:display></code> with a property), <code><f:table></code> does NOT walk the <code>_fields/<class>/_table.gsp</code> lookup chain. Looking at <a href="https://github.com/apache/grails-core/blob/8.0.x/grails-fields/grails-app/taglib/grails/plugin/formfields/FormFieldsTagLib.groovy"><code>FormFieldsTagLib.table</code></a> in the plugin source, the template path is hardcoded to <cod [...]
+</td>
+</tr>
+</table>
</div>
-<h2 id="bookTableTemplate">12.1 A Custom _table.gsp for Book</h2>
+<h2 id="appWideTable">12.1 App-Wide _table.gsp Override</h2>
<div class='contribute-btn'>
- <button type='button' class='btn btn-default' onclick='window.location.href="https://github.com/apache/grails-static-website/edit/master/guides/grails-fields-custom-widgets-and-wrappers/v8/guide/bookTableTemplate.adoc"'>
+ <button type='button' class='btn btn-default' onclick='window.location.href="https://github.com/apache/grails-static-website/edit/master/guides/grails-fields-custom-widgets-and-wrappers/v8/guide/appWideTable.adoc"'>
<i class='fa fa-pencil-square-o'></i> Improve this doc
</button>
</div>
<div class="paragraph">
-<p>Override the whole table for <code>Book</code> so that:</p>
-</div>
-<div class="ulist">
-<ul>
-<li>
-<p>The table renders as a Bootstrap 5 striped, hover-enabled table.</p>
-</li>
-<li>
-<p>The header row uses <code><th scope="col"></code> for accessibility.</p>
-</li>
-<li>
-<p>The last column always contains action buttons (View / Edit / Delete) without you adding a property to <code>properties=</code>.</p>
-</li>
-</ul>
+<p>Replace the default app-wide table template with one that renders as a Bootstrap 5 striped, hover-enabled table, uses <code><th scope="col"></code> for accessibility, and adds a trailing actions column for View / Edit / Delete buttons.</p>
</div>
<div class="paragraph">
-<p>Create <code>_fields/book/_table.gsp</code>:</p>
+<p>Create the file at the path the plugin actually looks up:</p>
</div>
<div class="listingblock">
-<div class="title">grails-app/views/_fields/book/_table.gsp</div>
+<div class="title">grails-app/views/templates/_fields/_table.gsp</div>
<div class="content">
<pre class="CodeRay highlight"><code data-lang="html"><span class="tag"><table</span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">table table-striped table-hover align-middle</span><span class="delimiter">"</span></span><span class="tag">></span>
<span class="tag"><thead</span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">table-dark</span><span class="delimiter">"</span></span><span class="tag">></span>
@@ -2249,28 +2223,90 @@ For very large candidate sets (hundreds of <code>Tag</code> rows), a checkbox gr
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>domainClass</code></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><code>Class<?></code></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">The Java class of the elements - useful when emitting links via <code><g:link controller="…​"></code>.</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><code>org.grails.datastore.mapping.model.PersistentEntity</code></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">The persistent entity for the bean type. Use <code>domainClass.javaClass.simpleName.toLowerCase()</code> to compute a controller name for <code><g:link></code>.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>domainProperties</code></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><code>List<DomainProperty></code></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">The columns the plugin selected, already filtered by the <code>properties=</code>/<code>except=</code> attributes.</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><code>List<Map></code></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">The columns the plugin selected, already filtered by the <code>properties=</code>/<code>except=</code> attributes. Each map has <code>property</code>, <code>label</code>, and <code>bean</code> keys (plus <code>class</code> and <code>theme</code> if those attributes were passed).</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><code>displayStyle</code></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><code>String</code></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">The <code>displayStyle</code> attribute from <code><f:table></code>, defaulting to <code>'table'</code>. Pass it through to per-cell <code><f:displayWidget></code> calls so cell templates can branch on style.</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><code>theme</code></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><code>String</code></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">The <code>theme</code> attribute from <code><f:table></code>. Same passthrough rule.</p></td>
</tr>
</tbody>
</table>
<div class="paragraph">
-<p>Inside the loop, render each cell with <code><f:displayWidget bean="${book}" property="${prop.name}"/></code>. That dispatches to whichever <code>_displayWidget.gsp</code> is most specific - your <code>Date</code> display widget for the <code>publishedDate</code> cell, your <code>Boolean</code> widget for the <code>inStock</code> cell, and so on.</p>
+<p>Inside the loop, render each cell with <code><f:displayWidget bean="${book}" property="${prop.property}"/></code>. That call DOES go through the standard lookup chain - it will pick up your per-property <code>_displayWidget.gsp</code> overrides (the <code>Date</code> formatter you wrote in chapter 9.2, the <code>Boolean</code> checkmark from 9.3, the per-column overrides we’ll write in chapter 12.3, etc.).</p>
+</div>
+<div class="paragraph">
+<p>Because this template lives at <code>templates/_fields/_table.gsp</code>, <strong>every</strong> <code><f:table></code> in the application now uses this layout - books, authors, and any future domain class. Restart the app and visit <code><a href="http://localhost:8080/book/index" class="bare">http://localhost:8080/book/index</a></code> and <code><a href="http://localhost:8080/author/index" class="bare">http://localhost:8080/author/index</a></code>; both list pages now use the B [...]
+</div>
+
+
+<h2 id="perDomainTable">12.2 Per-Domain Override via template= Attribute</h2>
+
+<div class='contribute-btn'>
+ <button type='button' class='btn btn-default' onclick='window.location.href="https://github.com/apache/grails-static-website/edit/master/guides/grails-fields-custom-widgets-and-wrappers/v8/guide/perDomainTable.adoc"'>
+ <i class='fa fa-pencil-square-o'></i> Improve this doc
+ </button>
+</div>
+
+
+<div class="paragraph">
+<p>When you want a <strong>specific</strong> <code><f:table></code> invocation to use a different layout - for example, the books list page should show a card-grid instead of a table while every other list view keeps the standard table - opt into a per-page template via the <code>template=</code> attribute:</p>
+</div>
+<div class="listingblock">
+<div class="title">grails-app/views/book/index.gsp</div>
+<div class="content">
+<pre class="CodeRay highlight"><code data-lang="html"><span class="tag"><f:table</span> <span class="attribute-name">collection</span>=<span class="string"><span class="delimiter">"</span><span class="content">${bookList}</span><span class="delimiter">"</span></span>
+ <span class="attribute-name">properties</span>=<span class="string"><span class="delimiter">"</span><span class="content">title,author,genre,priceUSD,inStock</span><span class="delimiter">"</span></span>
+ <span class="attribute-name">template</span>=<span class="string"><span class="delimiter">"</span><span class="content">bookCards</span><span class="delimiter">"</span></span><span class="tag">/></span></code></pre>
+</div>
+</div>
+<div class="paragraph">
+<p>The plugin resolves <code>template="bookCards"</code> to the path <code>/templates/_fields/bookCards</code>, so create the override at:</p>
+</div>
+<div class="listingblock">
+<div class="title">grails-app/views/templates/_fields/_bookCards.gsp</div>
+<div class="content">
+<pre class="CodeRay highlight"><code data-lang="html"><span class="tag"><div</span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">row row-cols-1 row-cols-md-3 g-3</span><span class="delimiter">"</span></span><span class="tag">></span>
+ <span class="tag"><g:each</span> <span class="attribute-name">in</span>=<span class="string"><span class="delimiter">"</span><span class="content">${collection}</span><span class="delimiter">"</span></span> <span class="attribute-name">var</span>=<span class="string"><span class="delimiter">"</span><span class="content">book</span><span class="delimiter">"</span></span><span class="tag">></span>
+ <span class="tag"><div</span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">col</span><span class="delimiter">"</span></span><span class="tag">></span>
+ <span class="tag"><div</span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">card h-100</span><span class="delimiter">"</span></span><span class="tag">></span>
+ <span class="tag"><div</span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">card-body</span><span class="delimiter">"</span></span><span class="tag">></span>
+ <span class="tag"><h5</span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">card-title</span><span class="delimiter">"</span></span><span class="tag">></span>${book.title.encodeAsHTML()}<span class="tag"></h5></span>
+ <span class="tag"><p</span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">card-subtitle text-muted mb-2</span><span class="delimiter">"</span></span><span class="tag">></span>
+ <span class="tag"><f:displayWidget</span> <span class="attribute-name">bean</span>=<span class="string"><span class="delimiter">"</span><span class="content">${book}</span><span class="delimiter">"</span></span> <span class="attribute-name">property</span>=<span class="string"><span class="delimiter">"</span><span class="content">author</span><span class="delimiter">"</span></span><span class="tag">/></span>
+ <span class="tag"></p></span>
+ <span class="tag"><p</span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">card-text</span><span class="delimiter">"</span></span><span class="tag">></span><span class="tag"><g:formatNumber</span> <span class="attribute-name">number</span>=<span class="string"><span class="delimiter">"</span><span class="content">${book.priceUSD}</span><span class="delimiter">"</span></s [...]
+ <span class="tag"><g:link</span> <span class="attribute-name">resource</span>=<span class="string"><span class="delimiter">"</span><span class="content">${book}</span><span class="delimiter">"</span></span> <span class="attribute-name">action</span>=<span class="string"><span class="delimiter">"</span><span class="content">show</span><span class="delimiter">"</span></span> <span class="attribute-name">class</span>=<span class="string"><span clas [...]
+ <span class="tag"></div></span>
+ <span class="tag"></div></span>
+ <span class="tag"></div></span>
+ <span class="tag"></g:each></span>
+<span class="tag"></div></span></code></pre>
+</div>
+</div>
+<div class="paragraph">
+<p>Inside this template, <code>collection</code> is the same model variable the app-wide <code>_table.gsp</code> receives. The <code>template=</code> attribute is only useful when you want a non-table layout for one specific page; if you want every list view to look like the new layout, change <code>_table.gsp</code> instead.</p>
</div>
<div class="paragraph">
-<p><code><f:table></code> for any <em>other</em> domain class still uses the default table template. Only <code>Book</code> gets this customised layout.</p>
+<p>You can also use <code>template=</code> to swap layouts based on a request attribute (e.g. a "list" vs "grid" toggle), since the attribute value is just a string passed to <code>render()</code> at runtime.</p>
</div>
-<h2 id="bookTableColumns">12.2 Per-Column Cell Overrides</h2>
+<h2 id="perColumnCells">12.3 Per-Column Cell Overrides</h2>
<div class='contribute-btn'>
- <button type='button' class='btn btn-default' onclick='window.location.href="https://github.com/apache/grails-static-website/edit/master/guides/grails-fields-custom-widgets-and-wrappers/v8/guide/bookTableColumns.adoc"'>
+ <button type='button' class='btn btn-default' onclick='window.location.href="https://github.com/apache/grails-static-website/edit/master/guides/grails-fields-custom-widgets-and-wrappers/v8/guide/perColumnCells.adoc"'>
<i class='fa fa-pencil-square-o'></i> Improve this doc
</button>
</div>
diff --git a/guides/grails-fields-custom-widgets-and-wrappers/8/index.html b/guides/grails-fields-custom-widgets-and-wrappers/8/index.html
index 45ff2ffde48..c351bebca94 100644
--- a/guides/grails-fields-custom-widgets-and-wrappers/8/index.html
+++ b/guides/grails-fields-custom-widgets-and-wrappers/8/index.html
@@ -173,9 +173,11 @@
<div class="toc-item" style="margin-left:0px"><a href="./guide/customTable.html"><strong>12</strong><span>Customising the Table Template</span></a></div>
- <div class="toc-item" style="margin-left:10px"><a href="./guide/customTable.html#bookTableTemplate"><strong>12.1</strong><span>A Custom _table.gsp for Book</span></a></div>
+ <div class="toc-item" style="margin-left:10px"><a href="./guide/customTable.html#appWideTable"><strong>12.1</strong><span>App-Wide _table.gsp Override</span></a></div>
- <div class="toc-item" style="margin-left:10px"><a href="./guide/customTable.html#bookTableColumns"><strong>12.2</strong><span>Per-Column Cell Overrides</span></a></div>
+ <div class="toc-item" style="margin-left:10px"><a href="./guide/customTable.html#perDomainTable"><strong>12.2</strong><span>Per-Domain Override via template= Attribute</span></a></div>
+
+ <div class="toc-item" style="margin-left:10px"><a href="./guide/customTable.html#perColumnCells"><strong>12.3</strong><span>Per-Column Cell Overrides</span></a></div>
<div class="toc-item" style="margin-left:0px"><a href="./guide/cleanCrud.html"><strong>13</strong><span>The Result - Clean CRUD GSPs</span></a></div>
diff --git a/guides/grails-file-download-excel/3/css/main.css b/guides/grails-file-download-excel/3/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-file-download-excel/3/css/main.css
+++ b/guides/grails-file-download-excel/3/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-file-download-excel/4/css/main.css b/guides/grails-file-download-excel/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-file-download-excel/4/css/main.css
+++ b/guides/grails-file-download-excel/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-geb-multiple-browsers/3/css/main.css b/guides/grails-geb-multiple-browsers/3/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-geb-multiple-browsers/3/css/main.css
+++ b/guides/grails-geb-multiple-browsers/3/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-geb-multiple-browsers/4/css/main.css b/guides/grails-geb-multiple-browsers/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-geb-multiple-browsers/4/css/main.css
+++ b/guides/grails-geb-multiple-browsers/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-google-cloud/4/css/main.css b/guides/grails-google-cloud/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-google-cloud/4/css/main.css
+++ b/guides/grails-google-cloud/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-google-home/4/css/main.css b/guides/grails-google-home/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-google-home/4/css/main.css
+++ b/guides/grails-google-home/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-gorm-data-services/3/css/main.css b/guides/grails-gorm-data-services/3/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-gorm-data-services/3/css/main.css
+++ b/guides/grails-gorm-data-services/3/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-gorm-data-services/4/css/main.css b/guides/grails-gorm-data-services/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-gorm-data-services/4/css/main.css
+++ b/guides/grails-gorm-data-services/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-javamelody/4/css/main.css b/guides/grails-javamelody/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-javamelody/4/css/main.css
+++ b/guides/grails-javamelody/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-logicaldelete/3/css/main.css b/guides/grails-logicaldelete/3/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-logicaldelete/3/css/main.css
+++ b/guides/grails-logicaldelete/3/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-logicaldelete/4/css/main.css b/guides/grails-logicaldelete/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-logicaldelete/4/css/main.css
+++ b/guides/grails-logicaldelete/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-micronaut-http/5/css/main.css b/guides/grails-micronaut-http/5/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-micronaut-http/5/css/main.css
+++ b/guides/grails-micronaut-http/5/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-micronaut-kafka/4/css/main.css b/guides/grails-micronaut-kafka/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-micronaut-kafka/4/css/main.css
+++ b/guides/grails-micronaut-kafka/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-mock-basics/3/css/main.css b/guides/grails-mock-basics/3/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-mock-basics/3/css/main.css
+++ b/guides/grails-mock-basics/3/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-mock-basics/4/css/main.css b/guides/grails-mock-basics/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-mock-basics/4/css/main.css
+++ b/guides/grails-mock-basics/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-mock-http-server/3/css/main.css b/guides/grails-mock-http-server/3/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-mock-http-server/3/css/main.css
+++ b/guides/grails-mock-http-server/3/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-mock-http-server/4/css/main.css b/guides/grails-mock-http-server/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-mock-http-server/4/css/main.css
+++ b/guides/grails-mock-http-server/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-mock-logging-slf4j-test/3/css/main.css b/guides/grails-mock-logging-slf4j-test/3/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-mock-logging-slf4j-test/3/css/main.css
+++ b/guides/grails-mock-logging-slf4j-test/3/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-mock-logging-slf4j-test/4/css/main.css b/guides/grails-mock-logging-slf4j-test/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-mock-logging-slf4j-test/4/css/main.css
+++ b/guides/grails-mock-logging-slf4j-test/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-multi-datasource/3/css/main.css b/guides/grails-multi-datasource/3/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-multi-datasource/3/css/main.css
+++ b/guides/grails-multi-datasource/3/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-multi-datasource/4/css/main.css b/guides/grails-multi-datasource/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-multi-datasource/4/css/main.css
+++ b/guides/grails-multi-datasource/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-multi-project-build/4/css/main.css b/guides/grails-multi-project-build/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-multi-project-build/4/css/main.css
+++ b/guides/grails-multi-project-build/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-oauth-google/4/css/main.css b/guides/grails-oauth-google/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-oauth-google/4/css/main.css
+++ b/guides/grails-oauth-google/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-oauth-twitter/4/css/main.css b/guides/grails-oauth-twitter/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-oauth-twitter/4/css/main.css
+++ b/guides/grails-oauth-twitter/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-on-circleci-basics/4/css/main.css b/guides/grails-on-circleci-basics/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-on-circleci-basics/4/css/main.css
+++ b/guides/grails-on-circleci-basics/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-on-github-actions/4/css/main.css b/guides/grails-on-github-actions/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-on-github-actions/4/css/main.css
+++ b/guides/grails-on-github-actions/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-on-travis-basics/3/css/main.css b/guides/grails-on-travis-basics/3/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-on-travis-basics/3/css/main.css
+++ b/guides/grails-on-travis-basics/3/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-on-travis-basics/4/css/main.css b/guides/grails-on-travis-basics/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-on-travis-basics/4/css/main.css
+++ b/guides/grails-on-travis-basics/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-quickcast-logging/4/css/main.css b/guides/grails-quickcast-logging/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-quickcast-logging/4/css/main.css
+++ b/guides/grails-quickcast-logging/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-quickcasts-angularjs-scaffolding-with-grails-3/4/css/main.css b/guides/grails-quickcasts-angularjs-scaffolding-with-grails-3/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-quickcasts-angularjs-scaffolding-with-grails-3/4/css/main.css
+++ b/guides/grails-quickcasts-angularjs-scaffolding-with-grails-3/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-quickcasts-developing-grails-3-applications-with-intellij-idea/4/css/main.css b/guides/grails-quickcasts-developing-grails-3-applications-with-intellij-idea/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-quickcasts-developing-grails-3-applications-with-intellij-idea/4/css/main.css
+++ b/guides/grails-quickcasts-developing-grails-3-applications-with-intellij-idea/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-quickcasts-interceptors/4/css/main.css b/guides/grails-quickcasts-interceptors/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-quickcasts-interceptors/4/css/main.css
+++ b/guides/grails-quickcasts-interceptors/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-quickcasts-json-views/4/css/main.css b/guides/grails-quickcasts-json-views/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-quickcasts-json-views/4/css/main.css
+++ b/guides/grails-quickcasts-json-views/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-quickcasts-multi-project-builds/4/css/main.css b/guides/grails-quickcasts-multi-project-builds/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-quickcasts-multi-project-builds/4/css/main.css
+++ b/guides/grails-quickcasts-multi-project-builds/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-quickcasts-retrieving-config-values/4/css/main.css b/guides/grails-quickcasts-retrieving-config-values/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-quickcasts-retrieving-config-values/4/css/main.css
+++ b/guides/grails-quickcasts-retrieving-config-values/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-rabbitmq/4/css/main.css b/guides/grails-rabbitmq/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-rabbitmq/4/css/main.css
+++ b/guides/grails-rabbitmq/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-restapi-angularjs/4/css/main.css b/guides/grails-restapi-angularjs/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-restapi-angularjs/4/css/main.css
+++ b/guides/grails-restapi-angularjs/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-scheduled/3/css/main.css b/guides/grails-scheduled/3/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-scheduled/3/css/main.css
+++ b/guides/grails-scheduled/3/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-scheduled/4/css/main.css b/guides/grails-scheduled/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-scheduled/4/css/main.css
+++ b/guides/grails-scheduled/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-schwartz/4/css/main.css b/guides/grails-schwartz/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-schwartz/4/css/main.css
+++ b/guides/grails-schwartz/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-soap/3/css/main.css b/guides/grails-soap/3/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-soap/3/css/main.css
+++ b/guides/grails-soap/3/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-soap/4/css/main.css b/guides/grails-soap/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-soap/4/css/main.css
+++ b/guides/grails-soap/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-spring-security-core-plugin-custom-authentication/3/css/main.css b/guides/grails-spring-security-core-plugin-custom-authentication/3/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-spring-security-core-plugin-custom-authentication/3/css/main.css
+++ b/guides/grails-spring-security-core-plugin-custom-authentication/3/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-spring-security-core-plugin-custom-authentication/4/css/main.css b/guides/grails-spring-security-core-plugin-custom-authentication/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-spring-security-core-plugin-custom-authentication/4/css/main.css
+++ b/guides/grails-spring-security-core-plugin-custom-authentication/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-taglib-wyswyg-trix/3/css/main.css b/guides/grails-taglib-wyswyg-trix/3/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-taglib-wyswyg-trix/3/css/main.css
+++ b/guides/grails-taglib-wyswyg-trix/3/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-taglib-wyswyg-trix/4/css/main.css b/guides/grails-taglib-wyswyg-trix/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-taglib-wyswyg-trix/4/css/main.css
+++ b/guides/grails-taglib-wyswyg-trix/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-test-domain-class-constraints/3/css/main.css b/guides/grails-test-domain-class-constraints/3/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-test-domain-class-constraints/3/css/main.css
+++ b/guides/grails-test-domain-class-constraints/3/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-test-domain-class-constraints/4/css/main.css b/guides/grails-test-domain-class-constraints/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-test-domain-class-constraints/4/css/main.css
+++ b/guides/grails-test-domain-class-constraints/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-test-security/3/css/main.css b/guides/grails-test-security/3/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-test-security/3/css/main.css
+++ b/guides/grails-test-security/3/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-test-security/4/css/main.css b/guides/grails-test-security/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-test-security/4/css/main.css
+++ b/guides/grails-test-security/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-tvmlapp/3/css/main.css b/guides/grails-tvmlapp/3/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-tvmlapp/3/css/main.css
+++ b/guides/grails-tvmlapp/3/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-tvmlapp/4/css/main.css b/guides/grails-tvmlapp/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-tvmlapp/4/css/main.css
+++ b/guides/grails-tvmlapp/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-upload-file/3/css/main.css b/guides/grails-upload-file/3/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-upload-file/3/css/main.css
+++ b/guides/grails-upload-file/3/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-upload-file/4/css/main.css b/guides/grails-upload-file/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-upload-file/4/css/main.css
+++ b/guides/grails-upload-file/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-vs-nodejs/4/css/main.css b/guides/grails-vs-nodejs/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-vs-nodejs/4/css/main.css
+++ b/guides/grails-vs-nodejs/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-vue-combined/4/css/main.css b/guides/grails-vue-combined/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-vue-combined/4/css/main.css
+++ b/guides/grails-vue-combined/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails-yourkit-profiling/4/css/main.css b/guides/grails-yourkit-profiling/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails-yourkit-profiling/4/css/main.css
+++ b/guides/grails-yourkit-profiling/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails_i18n/3/css/main.css b/guides/grails_i18n/3/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails_i18n/3/css/main.css
+++ b/guides/grails_i18n/3/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails_i18n/4/css/main.css b/guides/grails_i18n/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails_i18n/4/css/main.css
+++ b/guides/grails_i18n/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
+
+/* ---- Code-block + inline-code refinements (apache/grails-static-website) ---- */
+
+/* Inline <code> in narrative paragraphs gets a subtle pill background so it
+ stands out from regular prose. Excludes <code> inside <pre> blocks so the
+ syntax-highlighted listings keep their existing flush layout. */
+p > code,
+li > code,
+td > code,
+dd > code,
+dt > code,
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+ background: #f3f3f4;
+ padding: 0.12em 0.35em;
+ border-radius: 3px;
+ font-size: 0.92em;
+ color: #c7254e;
+ word-break: break-word;
+}
+
+/* The block-code language label was hover-only on desktop; show it always so
+ readers can see the language without mousing over. Also pin it slightly
+ inside the rounded corner so it doesn't look like it's escaping the box. */
+.listingblock code[data-lang]:before {
+ display: block;
+ top: 0.35rem;
+ right: 0.6rem;
+ padding: 0.05em 0.4em;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ letter-spacing: 0.04em;
+}
+
+/* The "filename" caption above each listing block (rendered from the
+ "[source,html]\n.path/to/file"-style title) is currently styled like a
+ floating italic line with no visual connection to the code below. Bind
+ it visually to the listing by giving it a top-rounded gray bar that
+ sits flush against the code block. */
+.listingblock > .title {
+ background: #ebebed;
+ color: #555;
+ font-style: normal;
+ font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ font-size: 0.78em;
+ padding: 0.4em 0.9em;
+ border-radius: 4px 4px 0 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #dcdcde;
+}
+
+/* When a listing has a title, square off the top corners of the pre so the
+ title and code meet seamlessly. */
+.listingblock > .title + .content > pre,
+.listingblock > .title + .content > pre[class] {
+ border-radius: 0 0 4px 4px;
+}
+
+/* Slightly relax horizontal scrolling so long lines don't wrap mid-token. */
+.listingblock pre,
+.listingblock pre[class] {
+ overflow-x: auto;
+ word-wrap: normal;
+ white-space: pre;
+}
\ No newline at end of file
diff --git a/guides/grails_url_mappings/4/css/main.css b/guides/grails_url_mappings/4/css/main.css
index cddebbd6443..c665d27dbaf 100644
--- a/guides/grails_url_mappings/4/css/main.css
+++ b/guides/grails_url_mappings/4/css/main.css
@@ -1214,4 +1214,68 @@ table.CodeRay td.code>pre{padding:0}
.CodeRay .insert .insert{color:#080}
.CodeRay .delete .delete{color:#800}
.CodeRay .change .change{color:#66f}
-.CodeRay .head .head{color:#f4f}
\ No newline at end of file
+.CodeRay .head .head{color:#f4f}
... 1291 lines suppressed ...