From: stephen@cubedesigners.com <stephen@cubedesigners.com@f5622870-0f3c-0410-866d-9cb505b7a8ef>
Date: Wed, 16 May 2018 18:19:43 +0000 (+0000)
Subject: WIP #1912 @9.5
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=5e4c8e10d62031357d74e7c9069f68a76dfb642c;p=physioassist-wordpress.git

WIP #1912 @9.5
---

diff --git a/wp-content/mu-plugins/physioassist/src/Elementor/Setup.php b/wp-content/mu-plugins/physioassist/src/Elementor/Setup.php
index ffd075f3..2ecd08dc 100644
--- a/wp-content/mu-plugins/physioassist/src/Elementor/Setup.php
+++ b/wp-content/mu-plugins/physioassist/src/Elementor/Setup.php
@@ -3,6 +3,7 @@
 namespace PhysioAssist\Elementor;
 
 use Elementor\Plugin;
+use Elementor\Controls_Manager;
 
 class Setup {
 
@@ -23,6 +24,8 @@ class Setup {
 
     public function register_customisations() {
 
+        $this->_customise_sections();
+
         //--- Heading Widget
         // Extend Elementor's heading widget to add a CSS class based on the alignment setting so we can also control the position of the underline
         add_action( 'elementor/element/heading/section_title/before_section_end', function( $element, $args ) {
@@ -71,6 +74,7 @@ class Setup {
         $elementor->widgets_manager->register_widget_type( new Widgets\TextBlock() );
         $elementor->widgets_manager->register_widget_type( new Widgets\HeroBlock() );
         $elementor->widgets_manager->register_widget_type( new Widgets\ProfileGrid() );
+        $elementor->widgets_manager->register_widget_type( new Widgets\ResourceGrid() );
         $elementor->widgets_manager->register_widget_type( new Widgets\BackgroundImage() );
     }
 
@@ -79,18 +83,59 @@ class Setup {
         // Widgets\Carousel::register_scripts();
     }
 
-    // Ref: https://developers.elementor.com/widget-categories/
-    // Now using standard 'theme-elements' category in favour of this one
-//    public function register_category() {
-//
-//        Plugin::$instance->elements_manager->add_category(
-//            'physioassist-elements',
-//            [
-//                'title' => __( 'PhysioAssist Custom Elements', 'physioassist' ),
-//                'icon' => 'fa fa-plug', // default icon
-//            ],
-//            1 // position
-//        );
-//    }
+
+    // Override the main Elementor section element to allow custom controls to be added to the editor
+    // This allows us to set specific CSS classes on the section wrapper, thereby centralising control
+    // of necessary settings for each section layout (column width, padding etc)
+    //
+    // References:
+    // https://www.ibenic.com/extending-elementor-custom-button-field-skin/
+    // https://blogs.devforum.ro/customizing-elementor-default-widgets/
+    // https://github.com/pojome/elementor/issues/3495
+    protected function _customise_sections() {
+
+        // Add controls to section element in editor
+        add_action( 'elementor/element/section/section_layout/after_section_start', function( $element, $args ) {
+            /** @var \Elementor\Element_Base $element */
+            $element->add_control(
+                'block_layout',
+                [
+                    'label' => __('Custom Layout', 'cube'),
+                    'type' => Controls_Manager::SELECT,
+                    'options' => [
+                        'default' => __( 'Default', 'cube' ),
+                        'squares' => __( 'Text + Image Squares', 'cube' ),
+                        'indented' => __( 'Indented Content', 'cube' ),
+                    ],
+                    'default' => 'default',
+                    'prefix_class' => 'layout-',
+                ]
+            );
+
+            $element->add_control(
+                'layout_reversed',
+                [
+                    'label' => __('Reverse column layout?', 'cube'),
+                    'type' => Controls_Manager::SWITCHER,
+                    'default' => '',
+                    'return_value' => 'reversed',
+                    'prefix_class' => 'layout-', // Will apply return value as a class (eg. 'layout-reversed') when toggled. Prefix could also be an empty string.
+                ]
+            );
+
+            $element->add_control(
+                'layout_disable_vertical_spacing',
+                [
+                    'label' => __('Disable vertical spacing?', 'cube'),
+                    'type' => Controls_Manager::SWITCHER,
+                    'default' => '',
+                    'return_value' => 'disable-vertical-spacing',
+                    'prefix_class' => '', // Will apply return value as a class
+                ]
+            );
+
+        }, 10, 2 );
+
+    }
 
 }
diff --git a/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/HeroBlock.php b/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/HeroBlock.php
index 935fa5c2..df22c6a4 100644
--- a/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/HeroBlock.php
+++ b/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/HeroBlock.php
@@ -233,7 +233,7 @@ class HeroBlock extends Widget_Base {
         $this->add_render_attribute('subtitle', 'class', ['hero-block-subtitle']);
         $this->add_render_attribute('title', 'class', ['hero-block-title']);
         $this->add_render_attribute('body', 'class', ['hero-block-body']);
-        $this->add_render_attribute('cta_text', 'class', ['hero-block-cta']);
+        $this->add_render_attribute('cta_text', 'class', ['hero-block-cta arrow-link']);
         $this->add_render_attribute('image', 'class', ['hero-block-image']);
 
         // Add image src attribute
diff --git a/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/ProfileGrid.php b/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/ProfileGrid.php
index 9da66a65..fa8fdc16 100644
--- a/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/ProfileGrid.php
+++ b/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/ProfileGrid.php
@@ -162,7 +162,7 @@ class ProfileGrid extends Widget_Base {
                         </div>
 
                         <# if ('' !== item.cta_text && '' !== item.cta_link.url) { #>
-                            <a href="{{ item.cta_link.url }}" class="profile-grid-cta">
+                            <a href="{{ item.cta_link.url }}" class="profile-grid-cta arrow-link">
                                 <?= \BladeSvgSage\svg_image('arrow')->toHtml() ?>
                                 {{ item.cta_text }}
                             </a>
diff --git a/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/ResourceGrid.php b/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/ResourceGrid.php
new file mode 100644
index 00000000..5f50093e
--- /dev/null
+++ b/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/ResourceGrid.php
@@ -0,0 +1,167 @@
+<?php
+
+namespace PhysioAssist\Elementor\Widgets;
+
+use Elementor\Widget_Base;
+use Elementor\Controls_Manager;
+use Elementor\Utils;
+
+
+class ResourceGrid extends Widget_Base {
+
+//    protected $_has_template_content = true;
+
+    // Widget name / ID
+    public function get_name() {
+        return 'cube-resource-grid';
+    }
+
+    // Elementor widget title
+    public function get_title() {
+        return __( 'Resource Grid', 'cube' );
+    }
+
+    // Elementor interface icon
+    public function get_icon() {
+        return 'eicon-posts-grid';
+    }
+
+    // Where to display the widget in the Elementor interface
+    public function get_categories() {
+        return [ 'theme-elements' ];
+    }
+
+    /**
+     * List of scripts the widget depends on.
+     * Used to set scripts dependencies required to run the widget.
+     *
+     * @since 1.0.0
+     * @access public
+     * @return array Widget scripts dependencies.
+     */
+    public function get_script_depends() {
+        return [];
+    }
+    /**
+     * Register the widget controls.
+     * Adds different input fields to allow the user to change and customize the widget settings.
+     *
+     * @since 1.0.0
+     * @access protected
+     */
+    protected function _register_controls() {
+
+        $this->start_controls_section(
+            'section_content',
+            [
+                'label' => __( 'Resource Grid', 'cube' ),
+            ]
+        );
+
+        $this->add_control(
+            'items',
+            [
+                'label' => __( 'Items', 'cube' ),
+                'type' => Controls_Manager::REPEATER,
+                'fields' => [
+                    [
+                        'name' => 'image',
+                        'label' => __('Preview Image', 'cube'),
+                        'label_block' => true,
+                        'type' => Controls_Manager::MEDIA,
+                        'default' => [
+                            'url' => Utils::get_placeholder_image_src(),
+                        ],
+                    ],
+                    [
+                        'name' => 'title',
+                        'label' => __( 'Title', 'cube' ),
+                        'type' => Controls_Manager::TEXT,
+                        'label_block' => true,
+                    ],
+
+                    // Todo: revisit this to see if we can have a more user-friendly file control
+                    // See: https://github.com/pojome/elementor/issues/4468
+                    [
+                        'name' => 'interactive_version',
+                        'label' => __( 'Interactive version link', 'cube' ),
+                        'type' => Controls_Manager::TEXT,
+                        'label_block' => true,
+                    ],
+                    [
+                        'name' => 'pdf',
+                        'label' => __( 'PDF link', 'cube' ),
+                        'type' => Controls_Manager::TEXT,
+                        'label_block' => true,
+                    ],
+                ],
+                'title_field' => '{{{ title }}}',
+            ]
+        );
+        $this->end_controls_section();
+    }
+    /**
+     * Render the widget output on the frontend.
+     * Written in PHP and used to generate the final HTML.
+     *
+     * @since 1.0.0
+     * @access protected
+     */
+    protected function render() {
+
+        $items = $this->get_settings('items');
+
+        $html = \App\template('widgets/resource-grid', compact('items'));
+
+        echo '<div class="resource-grid">'. $html .'</div>';
+    }
+
+    /**
+     * Render widget output in the editor.
+     *
+     * Written as a Backbone JavaScript template and used to generate the live preview.
+     *
+     * @since 1.0.0
+     * @access protected
+     */
+    protected function _content_template() {
+        ?>
+        <div class="resource-grid">
+            <#
+                if ( settings.items ) {
+
+                _.each( settings.items, function( item, index ) {
+                #>
+                <div class="resource-grid-item">
+
+                    <img src="{{ item.image.url }}" class="resource-grid-image">
+
+                    <div class="resource-grid-text">
+
+                        <h3 class="resource-grid-title">{{{ item.title }}}</h3>
+
+                        <# if ('' !== item.interactive_version) { #>
+                            <a href="{{ item.interactive_version }}" class="resource-grid-link arrow-link">
+                                <?= \BladeSvgSage\svg_image('arrow')->toHtml() ?>
+                                <?php _ex('Read interactive version', 'Resource grid widget interactive version link text', 'cube') ?>
+                            </a>
+                        <# } #>
+
+                        <# if ('' !== item.pdf) { #>
+                            <a href="{{ item.pdf }}" class="resource-grid-link arrow-link">
+                                <?= \BladeSvgSage\svg_image('arrow')->toHtml() ?>
+                                <?php _ex('Download PDF', 'Resource grid widget PDF link text', 'cube') ?>
+                            </a>
+                        <# } #>
+
+                    </div>
+
+                </div>
+                <#
+                    });
+                } #>
+        </div>
+        <?php
+    }
+
+}
diff --git a/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/TextBlock.php b/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/TextBlock.php
index e83f9b63..bd35d24e 100644
--- a/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/TextBlock.php
+++ b/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/TextBlock.php
@@ -266,7 +266,7 @@ class TextBlock extends Widget_Base {
         $this->add_render_attribute('subtitle', 'class', ['text-block-subtitle']);
         $this->add_render_attribute('title', 'class', ['text-block-title']);
         $this->add_render_attribute('body', 'class', ['text-block-body']);
-        $this->add_render_attribute('cta_text', 'class', ['text-block-cta']);
+        $this->add_render_attribute('cta_text', 'class', ['text-block-cta arrow-link']);
 
         // Rendered content
         echo '<div class="text-block">';
@@ -293,7 +293,7 @@ class TextBlock extends Widget_Base {
 		view.addRenderAttribute( 'subtitle', 'class', ['text-block-subtitle']);
 		view.addRenderAttribute( 'title', 'class', ['text-block-title']);
 		view.addRenderAttribute( 'body', 'class', ['text-block-body']);
-		view.addRenderAttribute( 'cta_text', 'class', ['text-block-cta']);
+		view.addRenderAttribute( 'cta_text', 'class', ['text-block-cta arrow-link']);
 
         view.addInlineEditingAttributes( 'subtitle', 'none' );
         view.addInlineEditingAttributes( 'title', 'none' );
diff --git a/wp-content/themes/physioassist/app/filters.php b/wp-content/themes/physioassist/app/filters.php
index 99692668..bcdbc634 100644
--- a/wp-content/themes/physioassist/app/filters.php
+++ b/wp-content/themes/physioassist/app/filters.php
@@ -27,11 +27,12 @@ add_filter('body_class', function (array $classes) {
 });
 
 /**
- * Add "… Continued" to the excerpt
+ * Add "> Read More" to the excerpt
  */
 add_filter('excerpt_more', function () {
-    return ' &hellip; <a href="' . get_permalink() . '">' . __('Continued', 'sage') . '</a>';
+    return '&hellip; <p><a class="arrow-link read-more-link" href="' . get_permalink() . '">' . \BladeSvgSage\svg_image('arrow')->toHtml() . __('Read More', 'sage') . '</a></p>';
 });
+remove_filter('the_excerpt', 'wpautop'); // Don't apply wpautop to excerpt because it destroys the inline SVG in excerpt_more
 
 /**
  * Template Hierarchy should search for .blade.php files
diff --git a/wp-content/themes/physioassist/app/setup.php b/wp-content/themes/physioassist/app/setup.php
index a705bece..265cfe76 100644
--- a/wp-content/themes/physioassist/app/setup.php
+++ b/wp-content/themes/physioassist/app/setup.php
@@ -48,6 +48,7 @@ add_action('after_setup_theme', function () {
      * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/
      */
     add_theme_support('post-thumbnails');
+    set_post_thumbnail_size(237, 237, true);
 
     /**
      * Enable HTML5 markup support
diff --git a/wp-content/themes/physioassist/resources/assets/styles/common/global.styl b/wp-content/themes/physioassist/resources/assets/styles/common/global.styl
index 4edc1310..784152c2 100644
--- a/wp-content/themes/physioassist/resources/assets/styles/common/global.styl
+++ b/wp-content/themes/physioassist/resources/assets/styles/common/global.styl
@@ -21,11 +21,14 @@ body
   padding: 0
   min-width: 320px
 
+a
+  color: $colors.light-blue
+
 // Paragraph spacing
 p:not(:last-of-type)
   margin-bottom: 1.5em
 
-.wrap
+//.wrap
   // max-width: $content-max-width
   // margin: 0 auto
 
@@ -52,3 +55,23 @@ p:not(:last-of-type)
 // Get rid of default 10px padding around elements
 .elementor-column-gap-default > .elementor-row > .elementor-column > .elementor-element-populated
   padding: 0
+
+// Common action link with SVG arrow in front
+.arrow-link
+  display: inline-block
+  text-transform: uppercase
+  font-size: 14px
+  font-weight: 600
+  color: $colors.headings
+
+  &:hover
+    color: $colors.light-blue
+
+  svg
+    width: 6px
+    height: 10px
+    display: inline-block
+    margin-right: 8px
+
+  path
+    fill: currentColor
diff --git a/wp-content/themes/physioassist/resources/assets/styles/common/utilities.styl b/wp-content/themes/physioassist/resources/assets/styles/common/utilities.styl
index a5983e61..753d4970 100644
--- a/wp-content/themes/physioassist/resources/assets/styles/common/utilities.styl
+++ b/wp-content/themes/physioassist/resources/assets/styles/common/utilities.styl
@@ -2,5 +2,8 @@
   padding-top: 0 !important
   padding-bottom: 0 !important
 
-.indent-content
+.indent-content, .layout-indented
   constrain(padding-left, 7.5vw)
+
+.vertical-spacing
+  vertical-spacing()
diff --git a/wp-content/themes/physioassist/resources/assets/styles/components/headings.styl b/wp-content/themes/physioassist/resources/assets/styles/components/headings.styl
index a377bf71..a38ab66c 100644
--- a/wp-content/themes/physioassist/resources/assets/styles/components/headings.styl
+++ b/wp-content/themes/physioassist/resources/assets/styles/components/headings.styl
@@ -8,7 +8,7 @@ h1, h2
 
 
 
-.elementor-heading-title
+.elementor-heading-title, .main-heading
   color: $colors.headings
   font-family: $font
   font-size: $font-size-large
diff --git a/wp-content/themes/physioassist/resources/assets/styles/components/navigation.styl b/wp-content/themes/physioassist/resources/assets/styles/components/navigation.styl
index d69d0dff..e8f838af 100644
--- a/wp-content/themes/physioassist/resources/assets/styles/components/navigation.styl
+++ b/wp-content/themes/physioassist/resources/assets/styles/components/navigation.styl
@@ -20,9 +20,13 @@
   padding-bottom: 1em // To give space between menu and dropdown but keep them touching
   padding-top: @padding-bottom // Matches bottom padding so menu stays vertically aligned in the centre
 
-  &:hover
+  &:hover, &.current_page_parent, &.current_page_item
     a
       border-color: currentColor
+    // Home page is the exception - don't underline "home" when on home page...
+    &.menu-item-home a
+      border-color: transparent
+
 
   +below(1500px)
     margin-right: 3em
@@ -96,6 +100,9 @@
     border: none
     padding: 0
 
+    &:hover
+      color: $colors.light-blue
+
 .locale-active
   border-radius: 50%
   border: 2px solid currentColor
diff --git a/wp-content/themes/physioassist/resources/assets/styles/layouts/posts.styl b/wp-content/themes/physioassist/resources/assets/styles/layouts/posts.styl
index e69de29b..cb01fafc 100644
--- a/wp-content/themes/physioassist/resources/assets/styles/layouts/posts.styl
+++ b/wp-content/themes/physioassist/resources/assets/styles/layouts/posts.styl
@@ -0,0 +1,47 @@
+.blog-list
+  vertical-spacing(1.5vw)
+
+// Individual post on index/archive pages + single view
+.blog-post
+  display: flex
+  align-items: flex-start
+  &:not(:last-of-type)
+    constrain(margin-bottom, 4vw)
+
+.blog-post-featured-image
+  flex: 0 1 30%
+  max-width: 237px
+
+  &-inner
+    background-size: cover
+    background-color: #eee
+    padding-bottom: 100% // 1x1 ratio div
+
+.blog-post-text
+  flex: 1 1 70%
+  constrain(padding-left, 2.5vw)
+
+
+.entry-title
+  color: $colors.headings
+  font-size: 44px
+  line-height: 1.1
+  margin-bottom: 0.5em
+
+  a
+    color: currentColor
+
+.updated
+  display: inline-block
+  font-size: 18px
+  font-weight: 600
+  color: $colors.sub-headings
+  margin-bottom: 0.5em
+
+.entry-summary
+  .read-more-link
+    margin-top: 1.5em
+
+// Back home link
+.blog-back-link
+  margin-top: 1.5em
diff --git a/wp-content/themes/physioassist/resources/assets/styles/layouts/sections.styl b/wp-content/themes/physioassist/resources/assets/styles/layouts/sections.styl
new file mode 100644
index 00000000..534e1927
--- /dev/null
+++ b/wp-content/themes/physioassist/resources/assets/styles/layouts/sections.styl
@@ -0,0 +1,7 @@
+.layout-reversed
+  .elementor-row
+    flex-direction: row-reverse
+
+.layout-squares
+  // ToDo...
+
diff --git a/wp-content/themes/physioassist/resources/assets/styles/main.styl b/wp-content/themes/physioassist/resources/assets/styles/main.styl
index 548548d9..bb4e2aae 100644
--- a/wp-content/themes/physioassist/resources/assets/styles/main.styl
+++ b/wp-content/themes/physioassist/resources/assets/styles/main.styl
@@ -23,7 +23,7 @@
 @import 'layouts/header'
 @import 'layouts/sidebar'
 @import 'layouts/footer'
-// @import 'layouts/columns'
+ @import 'layouts/sections'
 @import 'layouts/pages'
 @import 'layouts/posts'
 @import 'layouts/tinymce'
diff --git a/wp-content/themes/physioassist/resources/assets/styles/widgets/hero-block.styl b/wp-content/themes/physioassist/resources/assets/styles/widgets/hero-block.styl
index be711e16..63f7fd70 100644
--- a/wp-content/themes/physioassist/resources/assets/styles/widgets/hero-block.styl
+++ b/wp-content/themes/physioassist/resources/assets/styles/widgets/hero-block.styl
@@ -38,20 +38,5 @@
 
   &-cta
     display: block
-    text-transform: uppercase
-    font-size: 14px
-    font-weight: 600
     color: #fff
     margin-top: 30px
-
-    &:hover
-      color: $colors.light-blue
-
-    svg
-      width: 6px
-      height: 10px
-      display: inline-block
-      margin-right: 8px
-
-    path
-      fill: currentColor
diff --git a/wp-content/themes/physioassist/resources/assets/styles/widgets/profile-grid.styl b/wp-content/themes/physioassist/resources/assets/styles/widgets/profile-grid.styl
index 3bc95180..50b7d192 100644
--- a/wp-content/themes/physioassist/resources/assets/styles/widgets/profile-grid.styl
+++ b/wp-content/themes/physioassist/resources/assets/styles/widgets/profile-grid.styl
@@ -37,20 +37,4 @@
 
   &-cta
     display: block
-    color: $colors.headings
-    font-size: 14px
-    font-weight: 600
-    text-transform: uppercase
     margin-top: 1.4em
-
-    &:hover
-      color: $colors.light-blue
-
-    svg
-      width: 6px
-      height: 10px
-      display: inline-block
-      margin-right: 4px
-
-    path
-      fill: currentColor
diff --git a/wp-content/themes/physioassist/resources/assets/styles/widgets/resource-grid.styl b/wp-content/themes/physioassist/resources/assets/styles/widgets/resource-grid.styl
new file mode 100644
index 00000000..344edb22
--- /dev/null
+++ b/wp-content/themes/physioassist/resources/assets/styles/widgets/resource-grid.styl
@@ -0,0 +1,48 @@
+.resource-grid
+  display: flex
+  flex-wrap: wrap
+  constrain(margin-bottom, -5vw) // Counteract space between rows for the last row
+
+  &-item
+    display: flex
+    constrain(margin-bottom, 5vw)
+    align-items: stretch // Make sure items are the same height
+    lost-column: 1/3 3 15px
+
+    +below(1100px)
+      lost-column: 1/2
+    +below(680px)
+      lost-column: 1/1
+
+  &-image
+    display: block
+    align-self: flex-end
+    max-width: 35% !important
+    box-shadow: -4px 6px 10px -2px rgba(0,0,0,0.4) !important
+    margin-left: 30px
+
+    +below(680px)
+      margin-left: 0
+
+  &-text
+    constrain(padding-left, 2.5vw) // Gutter between image and text
+    align-self: center
+
+  &-title
+    color: $colors.sub-headings
+    font-size: 18px
+    font-weight: 600
+    text-transform: uppercase
+    margin-bottom: 0.8em
+    line-height: 1.2
+
+  &-link
+    display: block
+    position: relative
+    margin-top: 1.4em
+    padding-left: 1em
+
+    svg
+      position: absolute
+      top: 0.425em
+      left: 0
diff --git a/wp-content/themes/physioassist/resources/assets/styles/widgets/text-block.styl b/wp-content/themes/physioassist/resources/assets/styles/widgets/text-block.styl
index e2602ac7..c69b7cd7 100644
--- a/wp-content/themes/physioassist/resources/assets/styles/widgets/text-block.styl
+++ b/wp-content/themes/physioassist/resources/assets/styles/widgets/text-block.styl
@@ -40,22 +40,5 @@
     margin-top: 40px
 
   &-cta
-    //font-smoothing()
     display: block
-    text-transform: uppercase
-    font-size: 14px
-    font-weight: 600
-    color: $colors.headings
     margin-top: 30px
-
-    &:hover
-      color: $colors.light-blue
-
-    svg
-      width: 6px
-      height: 10px
-      display: inline-block
-      margin-right: 8px
-
-    path
-      fill: currentColor
diff --git a/wp-content/themes/physioassist/resources/views/index.blade.php b/wp-content/themes/physioassist/resources/views/index.blade.php
index 36841a55..8f27562d 100644
--- a/wp-content/themes/physioassist/resources/views/index.blade.php
+++ b/wp-content/themes/physioassist/resources/views/index.blade.php
@@ -1,18 +1,29 @@
 @extends('layouts.app')
 
 @section('content')
-  @include('partials.page-header')
 
-  @if (!have_posts())
-    <div class="alert alert-warning">
-      {{ __('Sorry, no results were found.', 'sage') }}
+  <div class="content-inner vertical-spacing">
+
+    <h2 class="main-heading"><?php _ex('News', 'Blog index title text', 'sage') ?></h2>
+
+    @include('partials.page-header')
+
+    @if (!have_posts())
+      <div class="alert alert-warning">
+        {{ __('Sorry, no results were found.', 'sage') }}
+      </div>
+      {!! get_search_form(false) !!}
+    @endif
+
+    <div class="indent-content blog-list">
+      @while (have_posts()) @php(the_post())
+        @include('partials.content-'.get_post_type())
+      @endwhile
+
+      {!! get_the_posts_navigation() !!}
     </div>
-    {!! get_search_form(false) !!}
-  @endif
 
-  @while (have_posts()) @php(the_post())
-    @include('partials.content-'.get_post_type())
-  @endwhile
 
-  {!! get_the_posts_navigation() !!}
+  </div>
+
 @endsection
diff --git a/wp-content/themes/physioassist/resources/views/partials/content-single.blade.php b/wp-content/themes/physioassist/resources/views/partials/content-single.blade.php
index ff5aea1e..5662b998 100644
--- a/wp-content/themes/physioassist/resources/views/partials/content-single.blade.php
+++ b/wp-content/themes/physioassist/resources/views/partials/content-single.blade.php
@@ -1,13 +1,25 @@
-<article @php(post_class())>
-  <header>
-    <h1 class="entry-title">{{ get_the_title() }}</h1>
-    @include('partials/entry-meta')
-  </header>
-  <div class="entry-content">
-    @php(the_content())
+<article @php(post_class('blog-post blog-post-full'))>
+
+  <div class="blog-post-featured-image">
+    <div class="blog-post-featured-image-inner" style="background-image: url({{ the_post_thumbnail_url() }})"></div>
+  </div>
+
+  <div class="blog-post-text">
+    <header>
+      @include('partials/entry-meta')
+      <h1 class="entry-title">{{ get_the_title() }}</h1>
+    </header>
+    <div class="entry-content">
+      @php(the_content())
+    </div>
+    <footer>
+      {!! wp_link_pages(['echo' => 0, 'before' => '<nav class="page-nav"><p>' . __('Pages:', 'sage'), 'after' => '</p></nav>']) !!}
+    </footer>
+
+    <p>
+      <a class="blog-back-link arrow-link" href="../../">@svg('arrow') <?php _ex('Back to news', 'Blog back link text', 'sage') ?></a>
+    </p>
+
+    @php(comments_template('/partials/comments.blade.php'))
   </div>
-  <footer>
-    {!! wp_link_pages(['echo' => 0, 'before' => '<nav class="page-nav"><p>' . __('Pages:', 'sage'), 'after' => '</p></nav>']) !!}
-  </footer>
-  @php(comments_template('/partials/comments.blade.php'))
 </article>
diff --git a/wp-content/themes/physioassist/resources/views/partials/content.blade.php b/wp-content/themes/physioassist/resources/views/partials/content.blade.php
index 0afcffdb..8895612c 100644
--- a/wp-content/themes/physioassist/resources/views/partials/content.blade.php
+++ b/wp-content/themes/physioassist/resources/views/partials/content.blade.php
@@ -1,9 +1,18 @@
-<article @php(post_class())>
-  <header>
-    <h2 class="entry-title"><a href="{{ get_permalink() }}">{{ get_the_title() }}</a></h2>
-    @include('partials/entry-meta')
-  </header>
-  <div class="entry-summary">
-    @php(the_excerpt())
+<article @php(post_class('blog-post'))>
+
+  <a class="blog-post-featured-image" href="{{ get_permalink() }}">
+    <div class="blog-post-featured-image-inner" style="background-image: url({{ the_post_thumbnail_url() }})"></div>
+  </a>
+
+  <div class="blog-post-text">
+    <header>
+      @include('partials/entry-meta')
+      <h3 class="entry-title"><a href="{{ get_permalink() }}">{{ get_the_title() }}</a></h3>
+    </header>
+    <div class="entry-summary">
+      @php(the_excerpt())
+    </div>
   </div>
+
+
 </article>
diff --git a/wp-content/themes/physioassist/resources/views/partials/entry-meta.blade.php b/wp-content/themes/physioassist/resources/views/partials/entry-meta.blade.php
index 301e9b74..18b7813d 100644
--- a/wp-content/themes/physioassist/resources/views/partials/entry-meta.blade.php
+++ b/wp-content/themes/physioassist/resources/views/partials/entry-meta.blade.php
@@ -1,6 +1,6 @@
-<time class="updated" datetime="{{ get_post_time('c', true) }}">{{ get_the_date() }}</time>
-<p class="byline author vcard">
-  {{ __('By', 'sage') }} <a href="{{ get_author_posts_url(get_the_author_meta('ID')) }}" rel="author" class="fn">
-    {{ get_the_author() }}
-  </a>
-</p>
+<time class="updated" datetime="{{ get_post_time('c', true) }}">{{ get_the_date('d/m/Y') }}</time>
+{{--<p class="byline author vcard">--}}
+  {{--{{ __('By', 'sage') }} <a href="{{ get_author_posts_url(get_the_author_meta('ID')) }}" rel="author" class="fn">--}}
+    {{--{{ get_the_author() }}--}}
+  {{--</a>--}}
+{{--</p>--}}
diff --git a/wp-content/themes/physioassist/resources/views/single.blade.php b/wp-content/themes/physioassist/resources/views/single.blade.php
index cf60c3ef..fa59bf04 100644
--- a/wp-content/themes/physioassist/resources/views/single.blade.php
+++ b/wp-content/themes/physioassist/resources/views/single.blade.php
@@ -1,7 +1,10 @@
 @extends('layouts.app')
 
 @section('content')
-  @while(have_posts()) @php(the_post())
-    @include('partials.content-single-'.get_post_type())
-  @endwhile
+  <div class="content-inner vertical-spacing">
+    @while(have_posts()) @php(the_post())
+      @include('partials.content-single-'.get_post_type())
+    @endwhile
+  </div>
+
 @endsection
diff --git a/wp-content/themes/physioassist/resources/views/widgets/profile-grid.blade.php b/wp-content/themes/physioassist/resources/views/widgets/profile-grid.blade.php
index 0e344cf2..b1279cba 100644
--- a/wp-content/themes/physioassist/resources/views/widgets/profile-grid.blade.php
+++ b/wp-content/themes/physioassist/resources/views/widgets/profile-grid.blade.php
@@ -17,7 +17,7 @@
 
       @if (!empty($item['cta_text']) && !empty($item['cta_link']['url']))
         <a href="{{ $item['cta_link']['url'] }}"
-           class="profile-grid-cta"
+           class="profile-grid-cta arrow-link"
            @if ($item['cta_link']['is_external'])
             target="_blank" rel="noopener"
            @endif
diff --git a/wp-content/themes/physioassist/resources/views/widgets/resource-grid.blade.php b/wp-content/themes/physioassist/resources/views/widgets/resource-grid.blade.php
new file mode 100644
index 00000000..e0a4577e
--- /dev/null
+++ b/wp-content/themes/physioassist/resources/views/widgets/resource-grid.blade.php
@@ -0,0 +1,27 @@
+@foreach ($items as $item)
+
+  <div class="resource-grid-item">
+    @image($item['image']['id'], 'full', ['class' => 'resource-grid-image'])
+
+    <div class="resource-grid-text">
+
+      <h3 class="resource-grid-title">{{ $item['title'] }}</h3>
+
+      @if ($item['interactive_version'])
+        <a href="{{ $item['interactive_version'] }}" class="resource-grid-link arrow-link">
+          @svg('arrow')
+          <?php _ex('Read interactive version', 'Resource grid widget interactive version link text', 'cube') ?>
+        </a>
+      @endif
+
+      @if ($item['pdf'])
+        <a href="{{ $item['pdf'] }}" class="resource-grid-link arrow-link">
+          @svg('arrow')
+          <?php _ex('Download PDF', 'Resource grid widget PDF link text', 'cube') ?>
+        </a>
+      @endif
+
+    </div>
+  </div>
+
+@endforeach