[!!!][TASK] Modernize widget rendering

The widget rendering has been completely reworked and is
now more easy to customize without overwriting the templates.

Title rendering has been moved to the main layout, you can now
use the new section "Title" to set the widget title. If you have
overwritten the widget templates or added new ones that makes
use of the "Widgets" layout you need to add this new section.

Migration:
remove: <h3 class="widget-title">[TITLE]</h3>
add: <f:section name="Title">[TITLE]</f:section>

Templates changed:
* Layouts/Widget.html
* Templates/Post/Sidebar.html
* Templates/Widget/Archive.html
* Templates/Widget/Categories.html
* Templates/Widget/Comments.html
* Templates/Widget/Feed.html
* Templates/Widget/RecentPosts.html
* Templates/Widget/Tags.html

Releases: master

Resources/Private/Layouts/Widget.html

@@ -1,3 +1,10 @@
-<aside class="tx-blog-widget">
-    <f:render section="Content" />
-</aside>
+<f:spaceless>
+    <aside class="blogwidget">
+        <h3 class="blogwidget__title">
+            <span><f:render section="Title" /></span>
+        </h3>
+        <div class="blogwidget__content">
+            <f:render section="Content" />
+        </div>
+    </aside>
+</f:spaceless>

Resources/Private/Scss/components/_widget.scss

@@ -0,0 +1,14 @@
+/**
+ * Widget
+ */
+.blogwidget {
+    margin-bottom: 1.5rem;
+    &:last-child {
+        margin-bottom: 0;
+    }
+}
+.blogwidget__content {
+    > *:last-child {
+        margin-bottom: 0;
+    }
+}

Resources/Private/Scss/frontend.scss

@@ -3,6 +3,7 @@
  */
 @import "components/author";
 @import "components/comment";
+@import "components/widget";
 
 /**
  * Misc

Resources/Private/Templates/Post/Sidebar.html

@@ -1,6 +1,8 @@
 <f:layout name="Default" />
 <f:section name="Content">
-    <f:for each="{settings.sidebarWidgets}" as="widget">
-        <f:cObject typoscriptObjectPath="{widget}" />
-    </f:for>
+    <div class="blogwidgets">
+        <f:for each="{settings.sidebarWidgets}" as="widget">
+            <f:cObject typoscriptObjectPath="{widget}" />
+        </f:for>
+    </div>
 </f:section>

Resources/Private/Templates/Widget/Archive.html

@@ -1,5 +1,5 @@
 <f:layout name="Widget" />
+<f:section name="Title"><f:translate key="headline.archive"/></f:section>
 <f:section name="Content">
-    <h3 class="widget-title"><f:translate key="headline.archive"/></h3>
     <f:render partial="Archive/Menu" arguments="{settings: settings, items: archiveData}" />
 </f:section>

Resources/Private/Templates/Widget/Categories.html

@@ -1,6 +1,6 @@
 <f:layout name="Widget" />
+<f:section name="Title"><f:translate key="headline.categories" /></f:section>
 <f:section name="Content">
-    <h3 class="widget-title"><f:translate key="headline.categories"/></h3>
     <ul class="categories list-inline">
         <f:for each="{categories}" as="category">
             <f:if condition="{currentCategory} == {category.uid}">

Resources/Private/Templates/Widget/Comments.html

@@ -1,6 +1,6 @@
 <f:layout name="Widget" />
+<f:section name="Title"><f:translate key="headline.recentcomments" /></f:section>
 <f:section name="Content">
-    <h3 class="widget-title"><f:translate key="headline.recentcomments"/></h3>
     <ul id="recentcomments" class="list list-unstyled">
         <f:for each="{comments}" as="comment">
         <li>

Resources/Private/Templates/Widget/Feed.html

@@ -1,6 +1,6 @@
 <f:layout name="Widget" />
+<f:section name="Title"><f:translate key="headline.rssfeed" /></f:section>
 <f:section name="Content">
-    <h3 class="widget-title"><f:translate key="headline.rssfeed"/></h3>
     <ul class="feeds">
         <li><f:link.page pageUid="{settings.blogUid}" pageType="200">Recent posts</f:link.page></li>
     </ul>

Resources/Private/Templates/Widget/RecentPosts.html

@@ -1,6 +1,6 @@
 <f:layout name="Widget" />
+<f:section name="Title"><f:translate key="headline.recentposts" /></f:section>
 <f:section name="Content">
-    <h3 class="widget-title"><f:translate key="headline.recentposts"/></h3>
     <ul class="list list-unstyled">
     <f:for each="{posts}" as="post">
         <li><blogvh:link.post post="{post}" /></li>

Resources/Private/Templates/Widget/Tags.html

@@ -1,6 +1,6 @@
 <f:layout name="Widget" />
+<f:section name="Title"><f:translate key="headline.tags" /></f:section>
 <f:section name="Content">
-    <h3 class="widget-title"><f:translate key="headline.tags"/></h3>
     <div class="tags">
     <f:for each="{tags}" as="tag">
         <blogvh:link.tag tag="{tag.tagObject}" style="font-size: {tag.size}%" class="label label-default label-tag" />