diff --git a/src/content/branding/Local-Community/branding.json b/src/content/branding/Local-Community/branding.json
index 1bd907991378..7eb898be0309 100644
--- a/src/content/branding/Local-Community/branding.json
+++ b/src/content/branding/Local-Community/branding.json
@@ -9,7 +9,7 @@
{
"data-book": "outside-back-cover-branding-bottom-html",
"lang": "*",
- "content": "
This book was created with many Bloom Enterprise features enabled at no cost in order to support projects that are fully funded and managed by the language community. Licensed to \"{personalization}\".
",
+ "content": "",
"condition": "always"
}
]
diff --git a/src/content/branding/Local-Community/branding.less b/src/content/branding/Local-Community/branding.less
index a575b26f2212..c52ebee57e73 100644
--- a/src/content/branding/Local-Community/branding.less
+++ b/src/content/branding/Local-Community/branding.less
@@ -5,22 +5,64 @@
@import "../branding-base.less";
[data-book="outside-back-cover-branding-bottom-html"] {
- display: flex;
- flex-direction: row;
- align-items: center;
- gap: 10px; // space between the logo and the {personalization} text
- border: solid #ce5546 3px;
- border-radius: 4px;
- background: white;
- padding: 10px;
- font-family: "Andika";
- font-size: 10.5pt;
- width: 9cm;
- margin-right: auto;
- margin-left: auto;
+ .bloom-branding-wrapper.local-community-branding {
+ border-width: 3px;
+ border-radius: 4px;
+ padding: 10px;
+ font-family: "Andika";
+ font-size: 10.5pt;
+ width: 12cm;
+ max-width: 100%;
+ box-sizing: border-box;
- img.branding {
- height: 2cm;
- margin-right: 10px;
+ .local-community-badge {
+ display: grid;
+ // Keep side images at normal size while giving the message as much room as possible.
+ // If space gets tight, keep at least this much width for readable text in the center.
+ grid-template-columns: max-content minmax(3cm, 1fr) max-content;
+ grid-auto-columns: 0;
+ align-items: center;
+ column-gap: 10px;
+ row-gap: 6px;
+ color: inherit;
+ text-decoration: none;
+
+ .local-community-logo {
+ height: 2cm;
+ width: auto;
+ max-width: none;
+ margin: 0;
+ grid-column: 1;
+ align-self: start;
+ justify-self: start;
+ }
+
+ .local-community-message {
+ grid-column: 2;
+ min-width: 0;
+ margin: 0;
+ }
+
+ .bloom-qrcode {
+ width: 2cm;
+ max-width: none;
+ padding: 0;
+ margin: 0;
+ grid-column: 3;
+ align-self: start;
+ justify-self: end;
+ }
+
+ .bloom-lang-on-blorg {
+ grid-column-start: 1;
+ grid-column-end: -1;
+ grid-row: 2;
+ margin: 0;
+ width: auto;
+ justify-self: stretch;
+ text-align: start;
+ max-width: none;
+ }
+ }
}
}