update readme

godofredoninja · Oct 15, 2017 · 0fc1d9e · 0fc1d9e
2 parents 7de64a4 + 3300abc
commit 0fc1d9e
Show file tree

Hide file tree

Showing 29 changed files with 288 additions and 124 deletions.
diff --git a/README.md b/README.md
@@ -28,14 +28,17 @@ You can see Simply in action on my Page [Demo](https://goo.gl/V7moIY)
 - Page subscribe
 - Pagination Infinite Scroll
 - Instagram Feed in footer of Post
-- AMP template (Accelerated Mobile Pages)
+- [AMP](https://github.com/godofredoninja/Hodor-AMP-Template-for-Ghost) Template (Accelerated Mobile Pages)
 - Cover images for blog, tag and author
 - links to followers in social media
 - Related Articles (6 articles)
-- Video Post Format => add tag `#video-post-format`
-- Image post Format => add tag `#image-post-format`
+- Template Video Post Format
+- Template Image post Format
+- Template Audio post Format
+- Template not Image Featured in Post
 - YouTube Subscribe Button in video post Format
-- 5 articles latest posts in the (author - tag) section sidebar
+- 5 articles latest posts in the (Author - Tag) section sidebar
+- Tags Cloud in page of Author and Tag
 - Previous and next button in the Post
 - Support for comments (Facebook or Disqus)
 - Support for counter comments (Facebook or Disqus)
@@ -160,13 +163,32 @@ Take a look at the [Prismjs Supported Language List](http://prismjs.com/#languag
 
 ![](./documentation/prism.png)
 
-## Image Post Format
+## Template for (Video - Image - Audio)
 
-If you want to have a image post format, you only have to add the tag `#image-post-format` The Featured image will become large in size.
+**Image** — The Featured image will become large in size.
 
-## Video Post Format
+**Not Image** — The featured image will not be displayed in the article (Post).
 
-If you want to have a video post format, you only have to add the tag `#video-post-format`. The first video in the article will be large in size.
+**Video** — The first video in the article will be large in size. Supports formats
+
+- vimeo
+- Dailymotion
+- Facebook Video
+- Youtube
+- Vid
+- kickstarter
+
+**Audio** — The first Audio in the article will be large in size. Supports formats
+
+- Soundcloud
+- Mixcloud
+- Spotify
+
+---
+
+> **Add video or Audio where convenient. When you change the theme you will not have problems and not have Problem in your AMP Template**
+
+---
 
 ![](./documentation/video-post-format.png)
 

diff --git a/assets/scripts/main.js b/assets/scripts/main.js
diff --git a/assets/styles/main.css b/assets/styles/main.css
diff --git a/author.hbs b/author.hbs
@@ -2,6 +2,11 @@
 {{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
 
 {{#author}}
+
+{{!-- custom Styles For tag <body> --}}
+{{#contentFor "simply_class_body"}}is-author {{#if cover_image}}has-featured-image{{/if}}{{/contentFor}}
+
+{{!-- Author content --}}
 <section class="author u-relative u-flex u-flexWrap u-boxShadowBottom u-paddingBottom30 u-paddingTop30 {{#if cover_image}}has--image{{/if}}">
     <span class="cover-lazy lazy u-absolute0 u-backgroundSizeCover" data-original="{{cover_image}}"></span>
     {{#if cover_image}}<span class="u-absolute0 u-backgroundDark" style="z-index-1"></span>{{/if}}

diff --git a/custom-audio.hbs b/custom-audio.hbs
@@ -0,0 +1,13 @@
+{{!-- Layout --}}
+{{!< layout-article }}
+
+{{!-- custom Styles For tag <body> --}}
+{{#contentFor "simply_class_body"}}is-audio{{/contentFor}}
+
+{{!-- Video Container --}}
+{{#contentFor "simply_video"}}
+    <div class="audio-post-format u-marginAuto u-maxWidth1000 u-hide"></div>
+{{/contentFor}}
+
+{{!-- Article --}}
+{{> "article"}}
diff --git a/custom-image.hbs b/custom-image.hbs
@@ -0,0 +1,18 @@
+{{!-- Layout --}}
+{{!< layout-article }}
+
+{{!-- Image Container --}}
+{{#post}}
+
+{{#contentFor "simply_feature_image"}}
+    {{#if feature_image}}
+        <figure class="post-image u-block u-marginAuto u-marginTop30 u-sizeFullWidth">
+            <img src="{{feature_image}}" class="u-block u-marginAuto" alt="{{title}}"/>
+        </figure>
+    {{/if}}
+{{/contentFor}}
+
+{{/post}}
+
+{{!-- Article --}}
+{{> "article"}}
diff --git a/custom-not-image.hbs b/custom-not-image.hbs
@@ -0,0 +1,5 @@
+{{!-- Layout --}}
+{{!< layout-article }}
+
+{{!-- Article --}}
+{{> "article"}}
diff --git a/custom-video.hbs b/custom-video.hbs
@@ -0,0 +1,13 @@
+{{!-- Layout --}}
+{{!< layout-article }}
+
+{{!-- custom Styles For tag <body> --}}
+{{#contentFor "simply_class_body"}}is-video{{/contentFor}}
+
+{{!-- Video Container --}}
+{{#contentFor "simply_video"}}
+    <div class="video-post-format u-marginAuto u-maxWidth1000 u-hide"></div>
+{{/contentFor}}
+
+{{!-- Article --}}
+{{> "article"}}
diff --git a/default.hbs b/default.hbs
@@ -18,7 +18,7 @@
     {{!-- Ghost outputs important style and meta data with this tag --}}
     {{ghost_head}}
 </head>
-<body class="{{#is "home"}}is-home {{/is}}{{#is "index"}}is-frontpage{{/is}}{{#is "post"}}is-article{{/is}}{{#is "tag"}}is-tag {{#tag}}{{#if feature_image}}has-featured-image{{/if}}{{/tag}}{{/is}}{{#is "author"}}is-author {{#author}}{{#if cover_image}}has-featured-image{{/if}}{{/author}}{{/is}}" data-page="{{@blog.url}}">
+<body class="{{#is "home"}}is-home{{/is}} {{{block "simply_class_body"}}}" data-page="{{@blog.url}}">
 
     {{!-- Header Content --}}
     {{>"header"}}
@@ -38,9 +38,6 @@
     {{!-- Ghost outputs important scripts and data with this tag --}}
     {{ghost_foot}}
 
-    {{!-- The #block helper will pull in data from the #contentFor other template files. In this case, there's some JavaScript which we only want to use in post.hbs, but it needs to be included down here, after jQuery has already loaded. --}}
-    {{{block "scripts"}}}
-
     {{!-- The main JavaScript file for Casper --}}
     <script type="text/javascript" src="{{asset "scripts/main.js"}}"></script>
 

diff --git a/documentation/video-post-format-2.png b/documentation/video-post-format-2.png
diff --git a/documentation/video-post-format.png b/documentation/video-post-format.png
diff --git a/index.hbs b/index.hbs
@@ -1,7 +1,8 @@
 {{!< default}}
 {{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
 
-{{!-- All entry --}}
+{{!-- custom Styles For tag <body> --}}
+{{#contentFor "simply_class_body"}}is-frontpage{{/contentFor}}
 
 <div class="feed-entry-content">
     {{!--<header class="u-marginBottom30 u-fontSizeLarge u-fontWeightBold u-link u-contentTitle u-md-fontSizeBase">Most Recent Articles</header>--}}

diff --git a/layout-article.hbs b/layout-article.hbs
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+<head>
+    {{!-- Document Settings --}}
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+
+    {{!-- Page Meta --}}
+    <title>{{meta_title}}</title>
+
+    {{!-- Mobile Meta --}}
+    <meta name="HandheldFriendly" content="True" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+
+    {{!-- Styles'n'Scripts --}}
+    <link rel="stylesheet" type="text/css" href="{{asset "styles/main.css"}}"/>
+
+    {{!-- Ghost outputs important style and meta data with this tag --}}
+    {{ghost_head}}
+
+</head>
+<body class="is-article {{{block "simply_class_body"}}}" data-page="{{@blog.url}}">
+
+    {{!-- Header Content --}}
+    {{> "header"}}
+
+    {{!-- All the main content gets inserted here, index.hbs, post.hbs, etc --}}
+    <main class="main u-relative">{{{body}}}</main>
+
+    {{!-- Footer Content --}}
+    {{> "footer"}}
+
+    {{!-- Search box --}}
+    {{> "search"}}
+
+    {{!-- jQuery needs to come before `{{ghost_foot}}` so that jQuery can be used in code injection --}}
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
+
+    {{!-- Ghost outputs important scripts and data with this tag --}}
+    {{ghost_foot}}
+
+    {{!-- The #block helper will pull in data from the #contentFor other template files. In this case, there's some JavaScript which we only want to use in post.hbs, but it needs to be included down here, after jQuery has already loaded. --}}
+    {{{block "scripts"}}}
+
+    {{!-- The main JavaScript file for Casper --}}
+    <script type="text/javascript" src="{{asset "scripts/main.js"}}"></script>
+
+    {{!-- Loandig Bar --}}
+    <div class="loadingBar"></div>
+
+    {{!-- Return home top page scroll --}}
+    <a href="#" class="rocket u-hide-before-md u-hide">
+        <span class="svgIcon u-block">
+            <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path fill="#999" d="M251.7 169.6c-31 0-56 25-56 56 0 30.8 25 56 56 56 30.8 0 56-25.2 56-56 0-31-25.2-56-56-56zm0 95.6c-22 0-39.7-17.8-39.7-39.6 0-22 17.8-39.7 39.7-39.7 21.8 0 39.6 17.7 39.6 39.6 0 21.8-17.8 39.6-39.6 39.6zM251.7 395.7c-23.7 0-43 19.2-43 43 0 20.8 30.4 62 36.5 70 1.5 2 4 3.3 6.5 3.3s5-1.2 6.5-3.2c6-8 36.4-49.3 36.4-70.2 0-23.7-19.3-43-43-43zm0 94.3C239 472 225 448.3 225 438.6c0-14.7 12-26.6 26.7-26.6 14.6 0 26.6 12 26.6 26.6 0 9.7-14 33.3-26.6 51.4z"/><path fill="#999" d="M448.4 371.7l-80-71.5v-153-.6-.4-.4-.4l-.2-.4v-.4c-.2 0-.2-.2-.3-.3l-.2-.4c0-.2 0-.3-.2-.4 0-.2 0-.3-.2-.4 0 0 0-.2-.2-.3 0-.3-.2-.4-.3-.5l-.2-.2L258 3c-1.5-1.8-3.8-3-6.3-3-2.6 0-5 1.2-6.5 3L136.5 142.4v.2c-.2 0-.3.2-.4.4v.2l-.3.3c0 .2 0 .3-.2.4v.3c-.2 0-.2.2-.3.3v.4l-.2.4v.8l-.2.4v153.8l-80 71.4c-2.4 2.2-3.3 5.8-2 9 1 3 4.2 5.2 7.5 5.2H443c3.4 0 6.4-2.2 7.6-5.3 1.2-3.2.3-6.8-2.2-9zm-313.6-2h-53l53-47.6v47.6zm117-348.3L343.5 139h-184l92-117.6zM352 369.6h-201V312h201v57.6zm0-74h-201V155.5h201v140.3zm16.3 74V322l53 47.6h-53z"/><path fill="#999" d="M261.8 202.4c-3.2-3.2-8.4-3.2-11.6 0L228.5 224c-3.2 3.3-3.2 8.5 0 11.7 1.6 1.6 3.7 2.4 5.8 2.4s4-.7 5.7-2.3l21.8-21.8c3-3.3 3-8.4 0-11.6zM274.8 224c-3.2-3-8.3-3-11.5 0l-13 13.2c-3.2 3.2-3.2 8.3 0 11.5 1.5 1.6 3.6 2.4 5.7 2.4 2 0 4.2-.7 5.8-2.3l13-13c3.2-3.2 3.2-8.4 0-11.6zM486.5 252.2c-4.5 0-8.2 3.6-8.2 8v148c0 4.5 3.7 8 8.2 8 4.5 0 8-3.5 8-8v-148c0-4.4-3.5-8-8-8zM434.3 217.4c-4.5 0-8.2 3.7-8.2 8.2v52c0 4.6 3.8 8.3 8.3 8.3 4.5 0 8-3.8 8-8.3v-52c0-4.6-3.5-8.3-8-8.3zM25.5 261c-4.5 0-8 3.5-8 8v174c0 4.5 3.5 8 8 8s8.2-3.5 8.2-8V269c0-4.5-3.7-8-8.2-8zM77.7 182.6c-4.5 0-8 3.7-8 8.2V269c0 4.5 3.5 8.2 8 8.2s8.2-3.7 8.2-8.2v-78.2c0-4.5-3.8-8.2-8.3-8.2z"/></svg>
+        </span>
+    </a>
+
+    {{!--  Font Roboto  && Roboto Mono --}}
+    <script type="text/javascript">WebFontConfig ={google:{families:['Droid+Serif:400,700','Source+Code+Pro','Source+Sans+Pro:300,400,600,700']}};(function(){var wf=document.createElement('script');wf.src='https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js';wf.type='text/javascript';wf.async='true';var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(wf,s);})();</script>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "simply-godofredoninja",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "engines": {
     "ghost": ">=1.0.0"
   },

diff --git a/partials/post-actions.hbs → partials/article-actions.hbs b/partials/post-actions.hbs → partials/article-actions.hbs
diff --git a/partials/post-comments.hbs → partials/article-comments.hbs b/partials/post-comments.hbs → partials/article-comments.hbs
diff --git a/partials/post-related.hbs → partials/article-related.hbs b/partials/post-related.hbs → partials/article-related.hbs
diff --git a/partials/article-share.hbs b/partials/article-share.hbs
@@ -0,0 +1,11 @@
+<div class="sharePost u-textAlignCenter u-hide-before-lg">
+    <div class="share-box">
+        <span class="share-count u-block u-fontWeightBold u-contentTitle" data-url="{{url absolute="true"}}">0</span>
+        <span class="share-label u-block u-textColorNormal u-contentTitle u-fontSizeSmaller">SHARES</span>
+    </div>
+    <a href="#" class="simply-tracking simply-share i-facebook bg-facebook u-fontSize20 u-block" data-share="facebook" data-url="{{url absolute="true"}}" data-event-category="Article" data-event-action="Share" data-event-label="Facebook" data-event-non-interaction="1"></a>
+    <a href="#" class="simply-tracking simply-share i-twitter bg-twitter u-fontSize20 u-block" data-share="twitter" data-url="{{url absolute="true"}}" data-title="{{title}} {{#if @blog.twitter}}by {{@blog.twitter}}{{/if}}" data-event-category="Article" data-event-action="Share" data-event-label="Twitter" data-event-non-interaction="1"></a>
+    <a href="#" class="simply-tracking simply-share i-reddit bg-reddit u-fontSize20 u-block" data-share="reddit" data-url="{{url absolute="true"}}" data-event-category="Article" data-event-action="Share" data-event-label="Reddit" data-event-non-interaction="1"></a>
+    <a href="#" class="simply-tracking simply-share i-linkedin bg-linkedin u-fontSize20 u-block" data-share="linkedin" data-url="{{url absolute="true"}}" data-event-category="Article" data-event-action="Share" data-event-label="Linkedin" data-event-non-interaction="1"></a>
+    <a href="#" class="simply-tracking simply-share i-pinterest bg-pinterest u-fontSize20 u-block" data-share="pinterest" data-url="{{url absolute="true"}}" data-title="{{title}}" data-event-category="Article" data-event-action="Share" data-event-label="pinterest" data-event-non-interaction="1"></a>
+</div>
diff --git a/partials/article-subscribers.hbs b/partials/article-subscribers.hbs
@@ -0,0 +1,14 @@
+{{#if @labs.subscribers}}
+<div class="post-newsletter u-marginAuto u-textAlignCenter u-marginBottom20">
+    <h5 class="newsletter-title u-fontSize28 u-fontWeightBold u-marginBottom15">Sign up for my newsletter!</h5>
+    <div class="newsletter-description u-fontSizeSmall" style="color: #5f5f5f">Get the latest posts delivered right to your inbox</div>
+
+    {{subscribe_form
+    form_class="simply-subscribe-tracking newsletter-form u-marginAuto u-flex u-paddingTop30 u-paddingBottom20"
+    input_class="form--input u-block u-fontSize20"
+    button_class="form--btn u-relative u-overflowHidden u-fontSizeLarge i-send"
+    placeholder="yourname@example.com"
+    autofocus=""
+    }}
+</div>
+{{/if}}
diff --git a/partials/article-tags.hbs b/partials/article-tags.hbs
@@ -0,0 +1,5 @@
+{{#if tags}}
+    <div class="post-tags">
+        {{#foreach tags}}<a href="{{url absolute="true"}}" title="{{name}}" class="button simply-tracking" data-event-category="Article" data-event-action="Tags" data-event-label="{{name}}" data-event-non-interaction="1">{{name}}</a>{{/foreach}}
+    </div>
+{{/if}}
diff --git a/partials/article.hbs b/partials/article.hbs
@@ -0,0 +1,55 @@
+{{#post}}
+<article class="post u-marginBottom40 u-relative">
+
+    <header class="post-header u-container u-maxWidth740 u-paddingTop30">
+        {{!-- entry meta < author avtar, name, fisrt tag, datetime> --}}
+        {{> "card-meta"}}
+
+        {{!-- Article Title --}}
+        <h1 class="post-title u-fontSize40 u-paddingTop20 u-contentTitle u-paddingBottom2 u-fontWeightBold u-md-fontSizeLarger">{{title}}</h1>
+
+        {{!-- Article Excerpt  --}}
+        {{#if custom_excerpt}}<p class="post-excerpt u-textColorNormal u-fontSize28 u-marginBottom20 u-paddingTop5" style="line-height:1.22;letter-spacing:-.022em">{{custom_excerpt}}</p>{{/if}}
+    </header>
+
+    {{!-- audio post format --}}
+    {{{block "simply_audio"}}}
+
+    {{!-- Video post format --}}
+    {{{block "simply_video"}}}
+
+    {{!-- Image post Format or Image Normal --}}
+    {{{block "simply_feature_image"}}}
+
+    <section class="post-body u-container u-maxWidth740 u-relative u-clear">
+        {{!-- Share post --}}
+        {{> "article-share"}}
+
+        {{!-- Content of Post --}}
+        {{content}}
+    </section>
+
+    <footer class="post-footer u-container u-maxWidth740 u-paddingTop20 u-paddingBottom20">
+        {{!-- Email subscribe form at the bottom of the page --}}
+        {{> "article-subscribers"}}
+
+        {{!-- Post All Tags (category) --}}
+        {{> "article-tags"}}
+    </footer>
+
+</article>
+{{/post}}
+
+{{!-- post relative --}}
+{{> "article-related"}}
+
+{{#post}}
+    {{!-- post Commets --}}
+    {{> "article-comments"}}
+
+    {{!-- Post Actions (next and prev post, share social media, cout share in facebook) --}}
+    {{> "article-actions"}}
+
+    {{!-- Instgram Feed --}}
+    {{> "instagram-feed"}}
+{{/post}}
diff --git a/partials/header.hbs b/partials/header.hbs
@@ -38,7 +38,7 @@
             <div class="u-flex0 u-flex u-flexEnd u-headerColorLink {{#is "home"}}u-hide-after-md{{/is}}">
 
                 {{!-- Btn search and close menu --}}
-                <a href="#" class="button-search--open u-relative button button--chromeless i-search u-fontSizeLarge"></a>
+                <a href="#" class="search-toggle u-relative button button--chromeless i-search u-fontSizeLarge"></a>
                 <a href="#" style="margin-right:-12px;" class="button-nav--toggle u-relative u-hide-after-md"><span></span><span></span><span></span></a>
 
                 {{!-- header follow if is not index page --}}
@@ -60,7 +60,7 @@
             {{!-- Navigation --}}
             {{navigation}}
 
-            <a href="#" class="button-search--open button button--chromeless u-fontSizeLarge i-search"></a>
+            <a href="#" class="search-toggle button button--chromeless u-fontSizeLarge i-search"></a>
 
             {{!-- follow Me --}}
             {{>"widget-follow"}}

diff --git a/partials/search.hbs b/partials/search.hbs
@@ -1,6 +1,6 @@
 {{!-- Search --}}
 <div class="search u-absolute0 u-fixed">
-    <a href="#" class="button-search--close button button--large button--chromeless i-close u-fontSizeLarge"></a>
+    <a href="#" class="search-toggle button button--large button--chromeless i-close u-fontSizeLarge" style="position:absolute!important;right:50px;top:20px"></a>
 
     <form action="" class="search-form u-relative u-sizeFullWidth u-marginAuto u-marginBottom20">
         <input id="search-field" class="u-sizeFullWidth u-md-fontSizeBase u-fontSize40 u-fontWeightSemibold" type="text" placeholder="Search..." />

diff --git a/partials/sidebar-post.hbs b/partials/sidebar-post.hbs
@@ -0,0 +1,13 @@
+<div class="sidebar-items u-marginBottom30">
+    <h3 class="sidebar-title u-fontSizeBase u-textColorDarker">{{widgetTitle}}</h3>
+
+    {{#foreach widgetPosts}}
+    <div class="sidebar-post simply-tracking" data-event-category="{{#is "tag"}}Tag{{else}}Author{{/is}}" data-event-action="Sidebar - Latest articles" data-event-label="{{url absolute="true"}}" data-event-non-interaction="1">
+        <a href="{{url absolute="true"}}" class="sidebar-post--link u-block u-relative">
+            <span class="sidebar-border u-flexCenter u-absolute u-fontSize28 u-lineHeight1 u-fontWeightSemibold">{{@number}}</span>
+            <h3 class="sidebar-post--title u-fontSizeBase u-fontWeightNormal">{{title}}</h3>
+        </a>
+    </div>
+    {{/foreach}}
+
+</div>
diff --git a/partials/sidebar-tags.hbs b/partials/sidebar-tags.hbs
@@ -0,0 +1,12 @@
+{{!-- Tag Cloud --}}
+{{#get "tags" limit="10" include="count.posts" order="count.posts desc"}}
+
+<div class="sidebar-items u-marginBottom30">
+    <h3 class="sidebar-title u-fontSizeBase u-textColorDarker">Tags</h3>
+
+    {{#foreach tags}}
+        <a href="{{url absolute="true"}}" title="{{name}}" class="button" style="margin-bottom:8px">{{name}}</a>
+    {{/foreach}}
+</div>
+
+{{/get}}
diff --git a/partials/sidebar.hbs b/partials/sidebar.hbs
@@ -8,22 +8,13 @@
     </div> --}}
 
     {{!-- Add Post Recents --}}
-    {{#get "posts" limit="5" as |recents|}}
-    <div class="sidebar-items u-marginBottom30">
-        <h3 class="sidebar-title u-fontSizeBase u-textColorDarker">Latest Articles</h3>
-
-        {{#foreach recents}}
-        <div class="sidebar-post simply-tracking" data-event-category="{{#is "tag"}}Tag{{else}}Author{{/is}}" data-event-action="Sidebar - Latest articles" data-event-label="{{url absolute="true"}}" data-event-non-interaction="1">
-            <a href="{{url absolute="true"}}" class="sidebar-post--link u-block u-relative">
-                <span class="sidebar-border u-flexCenter u-absolute u-fontSize28 u-lineHeight1 u-fontWeightSemibold">{{@number}}</span>
-                <h3 class="sidebar-post--title u-fontSizeBase u-fontWeightNormal">{{title}}</h3>
-            </a>
-        </div>
-        {{/foreach}}
-
-    </div>
+    {{#get "posts" limit="5" as |recents| }}
+        {{> "sidebar-post" widgetTitle="Latest Articles" widgetPosts=recents }}
     {{/get}}
 
+    {{!-- Tags Cloud --}}
+    {{> "sidebar-tags"}}
+
     {{!-- this is Book  --}}
     {{!-- <div class="sidebar-items u-marginBottom30">
         <h3 class="sidebar-title u-fontSizeBase u-textColorDarker">.. your title ..</h3>