Hover

assets/less/blog/author.less

@@ -1,7 +1,5 @@
 .author {
   background-color: @white-color;
-  border-radius: 5px;
-  box-shadow: @shadow-base;
   display: flex;
   margin-top: 30px;
   padding: 30px 20px;

assets/less/blog/comment.less

@@ -1,7 +1,5 @@
 .comment {
   background-color: @white-color;
-  border-radius: 5px;
-  box-shadow: @shadow-base;
   margin-top: 30px;
   padding: 30px;
 }

assets/less/blog/page.less

@@ -0,0 +1,14 @@
+.page-template {
+  .single .post-header {
+    border-bottom: 1px solid @light-gray-color;
+    padding: 25px 30px;
+  }
+}
+
+@media (min-width: 992px) {
+  .page-template {
+    .content-column {
+      margin-left: 16.666667%;
+    }
+  }
+}

assets/less/blog/post.less

@@ -3,12 +3,9 @@
 }
 
 .post {
-  border-radius: 5px;
-  box-shadow: @shadow-base;
   display: flex;
   flex-direction: column;
   height: 100%;
-  overflow: hidden;
 }
 
 .post-wrapper {

assets/less/misc/utilities.less

@@ -1,3 +1,14 @@
+.u-shadow {
+  border-radius: 5px;
+  box-shadow: @shadow-base;
+  overflow: hidden;
+  transition: box-shadow .3s @animation-base;
+
+  &:hover {
+    box-shadow: 0 0 20px rgba(0,0,0,.12);
+  }
+}
+
 .u-plain-list {
   list-style-type: none;
   margin: 0;

assets/less/screen.less

@@ -16,6 +16,7 @@
 @import "site/footer.less";
 
 @import "blog/post.less";
+@import "blog/page.less";
 @import "blog/featured.less";
 @import "blog/single.less";
 @import "blog/share.less";

assets/less/site/widget.less

@@ -1,7 +1,5 @@
 .widget {
   background-color: @white-color;
-  border-radius: 5px;
-  box-shadow: @shadow-base;
   padding: 20px;
 
   & + & {
@@ -65,17 +63,8 @@
     }
   }
 
-  .recent-image-placeholder {
-    border-radius: 50%;
-    flex-shrink: 0;
-    height: 50px;
-    overflow: hidden;
-    width: 50px;
-  }
-
   .post-header {
     margin-bottom: 0;
-    margin-left: 15px;
     overflow: hidden;
   }
 

page.hbs

@@ -0,0 +1,23 @@
+{{!< default}}
+
+<div class="container">
+  <div class="row">
+    <div class="content-column col-lg-8">
+      <div class="content-area">
+        <main class="site-main">
+          {{#post}}
+            <article class="{{post_class}}{{#unless feature_image}} no-image{{/unless}} single u-shadow">
+              {{> post-header tag="h1" hide_link=true}}
+              {{> post-media}}
+              <div class="post-wrapper">
+                <div class="post-content u-text-format">
+                  {{content}}
+                </div>
+              </div>
+            </article>
+          {{/post}}
+        </main>
+      </div>
+    </div>
+  </div>
+</div>

partials/author.hbs

@@ -1,5 +1,5 @@
 {{#foreach authors}}
-  <section class="author">
+  <section class="author u-shadow">
     <div class="author-image-placeholder u-placeholder">
       <img class="author-image lazyload u-object-fit" data-src="{{img_url profile_image size="xs"}}" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="{{name}}">
     </div>

partials/disqus.hbs

@@ -1,4 +1,4 @@
-<div class="comment">
+<div class="comment u-shadow">
   <div id="disqus_thread"></div>
 </div>
 

partials/loop.hbs

@@ -1,4 +1,4 @@
-<article class="{{post_class}}{{#unless feature_image}} no-image{{/unless}}">
+<article class="{{post_class}}{{#unless feature_image}} no-image{{/unless}} u-shadow">
   {{#if featured}}
     <img class="post-image lazyload u-object-fit"
       data-src="{{img_url feature_image}}"

partials/widgets/widget-facebook.hbs

@@ -1,7 +1,7 @@
-<section class="widget widget-facebook widget-no-title">
+<section class="widget widget-facebook widget-no-title u-shadow">
   <div class="fb-page"
     {{!-- data-href="__YOUR_FACEBOOK_PAGE_URL__" --}}
-    data-href="https://www.facebook.com/ultralinx"
+    data-href="https://www.facebook.com/iveelco"
     data-small-header="false"
     data-hide-cover="false"
     data-show-facepile="true"

partials/widgets/widget-instagram.hbs

@@ -1,3 +1,3 @@
-<div class="widget widget-instagram widget-no-title">
+<div class="widget widget-instagram widget-no-title u-shadow">
   <div class="instagram-feed"></div>
 </div>

partials/widgets/widget-recent.hbs

@@ -1,13 +1,10 @@
-<div class="widget widget-recent">
+<div class="widget widget-recent u-shadow">
   <h4 class="widget-title">Recent Posts</h4>
   {{#get "posts" limit="3" include="tags" as |recents|}}
     {{#if recents}}
       <div class="recent-posts">
         {{#foreach recents}}
           <article class="recent">
-            <div class="recent-image-placeholder u-placeholder">
-              <img class="recent-image lazyload u-object-fit" data-src={{img_url feature_image size="xs"}} src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="{{title}}">
-            </div>
             {{> post-header tag="h5" hide_tag=true show_date=true}}
           </article>
         {{/foreach}}

partials/widgets/widget-tags.hbs

@@ -1,4 +1,4 @@
-<div class="widget widget-tags">
+<div class="widget widget-tags u-shadow">
   <h4 class="widget-title">Tags</h4>
   {{#get "tags" limit="all" include="count.posts"}}
     <div class="tag-feed">

post.hbs

@@ -6,7 +6,7 @@
       <div class="content-area">
         <main class="site-main">
           {{#post}}
-            <article class="{{post_class}}{{#unless feature_image}} no-image{{/unless}} single">
+            <article class="{{post_class}}{{#unless feature_image}} no-image{{/unless}} single u-shadow">
               {{> post-header tag="h1" hide_link=true}}
               <div class="post-meta">
                 <time class="post-meta-date" datetime="{{date format="YYYY-MM-DD"}}">