Improve content formatting and mobile responsiveness

aricooperdavis · Oct 10, 2022 · 100c564 · 100c564
1 parent ffa320d
commit 100c564
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,9 +1,16 @@
+# v1.0.9
+## 10/10/2022
+
+1. [](#improved)
+    * Changed container from <p> to <div> to allow non-inline elements
+    * Added overflow-wrap: anywhere to improve responsive behaviour 
+
 # v1.0.8
 ## 10/26/2021
 
 1. [](#improved)
-		* Changed CDN Fix behaviour to use client side JS to hide banner
-		* Added strict SameSite attribute to dismissal choice cookie 
+    * Changed CDN Fix behaviour to use client side JS to hide banner
+    * Added strict SameSite attribute to dismissal choice cookie 
 
 # v1.0.7
 ## 10/19/2021

diff --git a/blueprints.yaml b/blueprints.yaml
@@ -1,7 +1,7 @@
 name: Custom Banner
 slug: custom-banner
 type: plugin
-version: 1.0.8
+version: 1.0.9
 description: Add a custom banner to your Grav site
 icon: bookmark
 author:

diff --git a/css/custom-banner.css b/css/custom-banner.css
@@ -11,9 +11,10 @@ div.custom-banner-body {
   margin: 0 auto;
   padding: 1rem 1.5rem;
   border-radius: 4px;
+  overflow-wrap: anywhere;
 }
 
-p.custom-banner-content {
+div.custom-banner-content {
   margin: auto;
   font-size: 120%;
 }

diff --git a/custom-banner.php b/custom-banner.php
@@ -122,7 +122,7 @@ public function onOutputGenerated(): void
         $banner = <<<EOD
         <div class="custom-banner-container" style="$position: 1rem;">
             <div class="custom-banner-body" style="box-shadow: $box_shadow; background-color: $bg_colour;">
-                <p class="custom-banner-content" style="color: $fg_colour;">$content</p>
+                <div class="custom-banner-content" style="color: $fg_colour;">$content</div>
                 <span style="flex-grow: 1; min-width: 1rem;"></span>
                 <div class="custom-banner-actions">
                     <a class="button custom-banner-dismiss" href="javascript:void(0)" onclick="custom_button_dismiss();" style="display: $dismiss_button;">$dismiss_text</a>