Improve flex layout

CHANGELOG.md

@@ -1,3 +1,9 @@
+# v1.0.10
+## 10/10/2022
+
+1. [](#improved)
+    * Improved flex layout
+
 # v1.0.9
 ## 10/10/2022
 

blueprints.yaml

@@ -1,7 +1,7 @@
 name: Custom Banner
 slug: custom-banner
 type: plugin
-version: 1.0.9
+version: 1.0.10
 description: Add a custom banner to your Grav site
 icon: bookmark
 author:

css/custom-banner.css

@@ -1,36 +1,41 @@
 div.custom-banner-container {
+  /* Invisible: fixes banner on page above page content */
   position: fixed;
   width: 100%;
   z-index: 10000;
 }
 
 div.custom-banner-body {
+  /* Visible: visible banner background */
   display: flex;
+  justify-content: space-between;
   width: 90%;
   max-width: 1000px;
   margin: 0 auto;
   padding: 1rem 1.5rem;
   border-radius: 4px;
-  overflow-wrap: anywhere;
 }
 
 div.custom-banner-content {
+  /* Visible: content of banner */
   margin: auto;
   font-size: 120%;
+  overflow-wrap: anywhere;
 }
 
 div.custom-banner-actions {
+  /* Invisible: buttons container */
   text-align: center;
-  margin: auto 0;
+  margin: auto 0 auto 0.5rem;
 }
 
 a.button.custom-banner-button {
-  /* Style the action button to your liking */
+  /* Visible: action button */
   margin: 0.125rem 0 0.25rem 0.125rem;
 }
 
 a.button.custom-banner-dismiss {
-  /* Style the dismiss button to your liking */
+  /* Visible: dismiss button */
   margin: 0 0.125rem 0.125rem 0;
   filter: grayscale(1);
-}
+}

custom-banner.php

@@ -123,7 +123,6 @@ public function onOutputGenerated(): void
         <div class="custom-banner-container" style="$position: 1rem;">
             <div class="custom-banner-body" style="box-shadow: $box_shadow; background-color: $bg_colour;">
                 <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>
                     <a class="button custom-banner-button" href="$button_url">$button_text</a>