From: stephen@cubedesigners.com <stephen@cubedesigners.com@f5622870-0f3c-0410-866d-9cb505b7a8ef>
Date: Thu, 28 May 2020 16:00:18 +0000 (+0000)
Subject: WIP #3641 @6
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=4204bc6dc0bb02523e2f02a63ed24ce1924844f9;p=fluidbook-v3.git

WIP #3641 @6
---

diff --git a/framework/application/controllers/BlogpostController.php b/framework/application/controllers/BlogpostController.php
index 7167883..6795770 100644
--- a/framework/application/controllers/BlogpostController.php
+++ b/framework/application/controllers/BlogpostController.php
@@ -5,6 +5,7 @@ class BlogpostController extends CubeIT_Controller_PageController {
     public function indexAction() {
 
         $this->view->headScript()->addScriptAndStyle('610-blog');
+        $this->view->body_class = 'blog-post-single';
 
         //$parent = $this->view->currentPage->getParent();
         //$parent_data = $this->getBootstrap()->getCMSDatasOfNavigationPage($parent);
diff --git a/framework/application/views/helpers/BlogIndex.php b/framework/application/views/helpers/BlogIndex.php
index e876ebe..c24ec0d 100644
--- a/framework/application/views/helpers/BlogIndex.php
+++ b/framework/application/views/helpers/BlogIndex.php
@@ -20,7 +20,7 @@ class Fluidbook_View_Helper_BlogIndex extends CubeIT_View_Helper_Abstract {
 
         foreach ($posts as $post) {
             /* @var $post Fluidbook_Model_Blog */
-            $res .= $this->blogIntro($post, false);
+            $res .= $this->htmlElement($this->blogIntro($post, false), 'article', ['itemProp' => 'blogPost']);
         }
 
         return $this->htmlElement($res, 'div', ['class' => 'blog-index']);
diff --git a/framework/application/views/helpers/BlogIntro.php b/framework/application/views/helpers/BlogIntro.php
index 0bd8f9a..d115af1 100644
--- a/framework/application/views/helpers/BlogIntro.php
+++ b/framework/application/views/helpers/BlogIntro.php
@@ -19,6 +19,9 @@ class Fluidbook_View_Helper_BlogIntro extends CubeIT_View_Helper_Abstract {
             $title_tag = 'h2';
         }
 
+        // Avoid orphaned punctuation in titles
+        $title = str_replace([' ?', ' :'], ['&nbsp;?', '&nbsp;:'], $title);
+
         // Blog intro content structure
         $res  = '<div class="grid">';
         $res .= '<div class="blog-intro-content">';
diff --git a/less/610-blog.less b/less/610-blog.less
index 2d7f6f2..88f833d 100644
--- a/less/610-blog.less
+++ b/less/610-blog.less
@@ -19,7 +19,26 @@
 .blog-intro {
   display: flex;
   align-items: center;
-  padding: 0 !important;
+
+  // Extra padding to ensure text doesn't get too close to edges or overlap when under a header
+  // Padding is symmetrical so that vertical centre is not thrown off
+  padding: 144px 0 !important;
+
+  @media @m1280 {
+    padding: 86px 0 !important;
+  }
+  @media @m900 {
+    padding: 96px 0 !important;
+  }
+  @media @m768 {
+    padding: 75px 0 !important;
+  }
+
+  @media @m1024 {
+    min-height: 0 !important; // Reset min-height now that there's no image
+  }
+
+
 
   &.light {
     color: #fff;
@@ -31,6 +50,20 @@
 
   &-content {
     flex-basis: 40%;
+
+    @media @m1280 {
+      flex-basis: 42%;
+    }
+    @media (max-width: 1100px) {
+      flex-basis: 47%;
+    }
+    @media @m1024 {
+      flex-basis: 100%;
+    }
+
+    @media @m900 {
+      text-align: center;
+    }
   }
 
   &-date {
@@ -42,6 +75,16 @@
     color: currentColor !important;
     font-size: 60px !important;
 
+    @media (max-width: 1600px) {
+      font-size: 50px !important;
+    }
+    @media @m1024 {
+      font-size: 40px !important;
+    }
+    @media @m640 {
+      font-size: 30px !important;
+    }
+
     &:after {
       background-color: currentColor !important;
       bottom: 0.7em !important;
@@ -61,12 +104,29 @@
     font-size: 15px;
     line-height: 1.7;
     max-width: 550px;
+
+    @media @m1024 {
+      max-width: none;
+    }
+  }
+
+  .grid {
+    width: 100%;
   }
 
   .picture {
     @media @m1024 {
       display: none;
     }
+
+    // Make image cover space even when text pushes height out
+    img {
+      left: 0;
+      height: 100% !important;
+      object-fit: cover;
+      object-position: left;
+    }
+
   }
 
 }
@@ -79,6 +139,17 @@
   max-width: 1008px;
   width: 100%;
 
+  @media @m1024 {
+    font-size: 20px;
+  }
+  @media @m900 {
+    font-size: 18px;
+  }
+  @media @m640 {
+    font-size: 16px;
+  }
+
+
   > * + * {
     margin-top: 1.5em;
   }
@@ -120,18 +191,36 @@
   padding: 1.5em;
   font-size: 15px;
 
+  @media (max-width: 600px) {
+    flex-wrap: wrap;
+    justify-content: center;
+    text-align: center;
+
+    > * + * {
+      padding-top: 0.75em;
+    }
+
+  }
+
   &-photo {
+    flex-shrink: 0;
     width: 120px;
     height: 120px;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     border-radius: 50%;
-    margin-right: 1.5em;
+  }
+
+  &-details {
+    margin: 0 1.5em;
   }
 
   &-name {
     font-family: @heading-font;
     font-size: 30px;
+    font-weight: normal;
+    line-height: 1.3;
+    margin-bottom: 0.2em;
   }
 }