Skip to content

Commit

Permalink
more changes to blog template
Browse files Browse the repository at this point in the history
  • Loading branch information
CGamesPlay committed Jan 28, 2020
1 parent 5a8dc86 commit e0ea810
Show file tree
Hide file tree
Showing 8 changed files with 139 additions and 84 deletions.
7 changes: 1 addition & 6 deletions index.hbs
Expand Up @@ -17,12 +17,7 @@
{{/if}}
</div>
</div>
<div class="py-5 text-center">
<div class="d-inline-block pr-md-5 h5 m-0">
Our experts help you succeed in your BigData and Cloud projects
</div>
<a href="/contact" class="d-inline-block align-baseline btn btn-enroll-header py-3 px-5">LEARN MORE</a>
</div>
{{> bdbq-banner}}
<div class="row">
<div class="col-md-4 mb-5">
<aside>
Expand Down
6 changes: 6 additions & 0 deletions partials/bdbq-banner.hbs
@@ -0,0 +1,6 @@
<div class="bdbq-banner my-5 py-4 text-center">
<div class="d-inline-block pr-md-5 h5 m-0">
Our experts help you succeed in your BigData and Cloud projects
</div>
<a href="/contact" class="d-inline-block align-baseline btn btn-enroll-header bdbq-banner-button">LEARN MORE</a>
</div>
31 changes: 24 additions & 7 deletions partials/fresh-post.hbs
@@ -1,5 +1,22 @@
<article class="fresh-post container card">
<div class="fresh-post__img col-md-6 px-0">
<div class="fresh-post-box-social d-none d-md-block">
<!-- Generated using https://github.com/mxstbr/sharing -->
<!-- Sharingbutton Facebook -->
<a href="https://facebook.com/sharer/sharer.php?u={{encodeURI this.full_url}}" target="_blank" rel="noopener" aria-label="">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><defs><style>.a{fill:#fff;}</style></defs><path class="a" d="M16,0A16,16,0,1,0,32,16,16,16,0,0,0,16,0Zm4.736,9.413H18.5c-.789,0-.954.323-.954,1.141v1.973h3.19l-.307,3.464H17.546V26.338H13.413v-10.3H11.264V12.526h2.149V9.763c0-2.592,1.387-3.946,4.462-3.946h2.861v3.6Z"/></svg>
</a>

<!-- Sharingbutton Twitter -->
<a href="https://twitter.com/intent/tweet/?text={{encodeURI this.title}}&amp;url={{encodeURI this.full_url}}" target="_blank" rel="noopener" aria-label="">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><defs><style>.a{fill:#fff;}</style></defs><path class="a" d="M16,0A16,16,0,1,0,32,16,16,16,0,0,0,16,0Zm8.046,13.243A10.555,10.555,0,0,1,7.81,22.614,7.464,7.464,0,0,0,13.3,21.078,3.713,3.713,0,0,1,9.838,18.5a3.7,3.7,0,0,0,1.675-.064,3.713,3.713,0,0,1-2.976-3.685,3.7,3.7,0,0,0,1.68.464A3.715,3.715,0,0,1,9.07,10.261a10.528,10.528,0,0,0,7.648,3.878,3.713,3.713,0,0,1,6.323-3.386,7.426,7.426,0,0,0,2.357-.9,3.712,3.712,0,0,1-1.632,2.053,7.364,7.364,0,0,0,2.133-.584A7.53,7.53,0,0,1,24.046,13.243Z"/></svg>
</a>

<!-- Sharingbutton LinkedIn -->
<a href="https://www.linkedin.com/shareArticle?mini=true&amp;url={{encodeURI this.full_url}}&amp;title={{encodeURI this.title}}&amp;summary={{encodeURI this.title}}&amp;source={{encodeURI blogUrl}}" target="_blank" rel="noopener" aria-label="">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><style>.a{fill:#fff;}</style><path class="a" d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2 16h-2v-6h2v6zm-1-6.891c-.607 0-1.1-.496-1.1-1.109 0-.612.492-1.109 1.1-1.109s1.1.497 1.1 1.109c0 .613-.493 1.109-1.1 1.109zm8 6.891h-1.998v-2.861c0-1.881-2.002-1.722-2.002 0v2.861h-2v-6h2v1.093c.872-1.616 4-1.736 4 1.548v3.359z"/></svg>
</a>
</div>
<a href="{{this.url}}"><img src="{{#if this.metadata.header_image_url}}{{{this.metadata.header_image_url}}}{{else}}/static/base/img/post1.jpg{{/if}}" alt=""></a>
</div>
<div class="col-md-6 px-5 py-3">
Expand All @@ -14,15 +31,15 @@
<a href="{{this.url}}" class="text-reset">
<h4>{{this.title}}</h4>
</a>
<div class="fresh-post__badges post-badges mb-2">
{{!-- {{#if series}}
<a href="{{series_url}}">
<div class="series-badge badge my-4">Series: {{series}}</div>
<div class="fresh-post__badges post-badges my-3">
{{#if series}}
<a class="tag tag-solid my-2" href="{{series_url}}">
Series: {{series}}
</a>
{{/if}} --}}
{{/if}}
{{#each tags}}
<a href="{{this.url}}">
<div class="tags-badge badge">{{this.key}}</div>
<a class="tag tag-solid my-2" href="{{this.url}}">
{{this.key}}
</a>
{{/each}}
</div>
Expand Down
5 changes: 5 additions & 0 deletions partials/header.hbs
Expand Up @@ -10,6 +10,11 @@
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav w-100 justify-content-end">
<li class="nav-item ml-4">
<a class="nav-link" href="{{blogRoutePrefix}}/rss" target="_blank">
<i style="padding: 0rem 0.5rem" class="fas fa-rss"></i>
</a>
</li>
<li class=" nav-item dropdown services-dropdown ml-4">
<a href="https://bigdataboutique.com/services" class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
Expand Down
25 changes: 21 additions & 4 deletions partials/post.hbs
@@ -1,5 +1,22 @@
<div class="col-md-4 pb-5 d-flex">
<div class="post-box card">
<div class="post-box-social d-none d-md-block">
<!-- Generated using https://github.com/mxstbr/sharing -->
<!-- Sharingbutton Facebook -->
<a href="https://facebook.com/sharer/sharer.php?u={{encodeURI this.full_url}}" target="_blank" rel="noopener" aria-label="">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><defs><style>.a{fill:#fff;}</style></defs><path class="a" d="M16,0A16,16,0,1,0,32,16,16,16,0,0,0,16,0Zm4.736,9.413H18.5c-.789,0-.954.323-.954,1.141v1.973h3.19l-.307,3.464H17.546V26.338H13.413v-10.3H11.264V12.526h2.149V9.763c0-2.592,1.387-3.946,4.462-3.946h2.861v3.6Z"/></svg>
</a>

<!-- Sharingbutton Twitter -->
<a href="https://twitter.com/intent/tweet/?text={{encodeURI this.title}}&amp;url={{encodeURI this.full_url}}" target="_blank" rel="noopener" aria-label="">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><defs><style>.a{fill:#fff;}</style></defs><path class="a" d="M16,0A16,16,0,1,0,32,16,16,16,0,0,0,16,0Zm8.046,13.243A10.555,10.555,0,0,1,7.81,22.614,7.464,7.464,0,0,0,13.3,21.078,3.713,3.713,0,0,1,9.838,18.5a3.7,3.7,0,0,0,1.675-.064,3.713,3.713,0,0,1-2.976-3.685,3.7,3.7,0,0,0,1.68.464A3.715,3.715,0,0,1,9.07,10.261a10.528,10.528,0,0,0,7.648,3.878,3.713,3.713,0,0,1,6.323-3.386,7.426,7.426,0,0,0,2.357-.9,3.712,3.712,0,0,1-1.632,2.053,7.364,7.364,0,0,0,2.133-.584A7.53,7.53,0,0,1,24.046,13.243Z"/></svg>
</a>

<!-- Sharingbutton LinkedIn -->
<a href="https://www.linkedin.com/shareArticle?mini=true&amp;url={{encodeURI this.full_url}}&amp;title={{encodeURI this.title}}&amp;summary={{encodeURI this.title}}&amp;source={{encodeURI blogUrl}}" target="_blank" rel="noopener" aria-label="">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><style>.a{fill:#fff;}</style><path class="a" d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2 16h-2v-6h2v6zm-1-6.891c-.607 0-1.1-.496-1.1-1.109 0-.612.492-1.109 1.1-1.109s1.1.497 1.1 1.109c0 .613-.493 1.109-1.1 1.109zm8 6.891h-1.998v-2.861c0-1.881-2.002-1.722-2.002 0v2.861h-2v-6h2v1.093c.872-1.616 4-1.736 4 1.548v3.359z"/></svg>
</a>
</div>
<a href="{{this.url}}"><img class="post_thumbnail" src="{{this.metadata.header_image_url}}" alt=""></a>
<div class="post-box__content p-3">
<div class="post-box__content-header">
Expand All @@ -15,13 +32,13 @@
</div>
<div class="post-box__content-footer">
{{# if this.series}}
<a href="{{this.series_url}}">
<div class="series-badge badge">Series: {{this.series}}</div>
<a class="tag tag-solid my-2" href="{{this.series_url}}">
Series: {{this.series}}
</a>
{{/if}}
{{#each tags}}
<a href="{{this.url}}">
<div class="tags-badge badge">{{this.key}}</div>
<a class="tag tag-solid my-2" href="{{this.url}}">
{{this.key}}
</a>
{{/each}}
</div>
Expand Down
4 changes: 2 additions & 2 deletions partials/recent-tags-widget.hbs
Expand Up @@ -4,7 +4,7 @@
<div class="tag-list-content">
{{#each sidebarWidgetData.allTags}}
<a href="{{this.url}}" class="tag">
<div class="badge">{{this.key}} <span>({{this.doc_count}})</span></div>
{{this.key}} <span>({{this.doc_count}})</span>
</a>
{{/each}}
</div>
Expand All @@ -16,7 +16,7 @@
<div class="tag-list-content">
{{#each sidebarWidgetData.allSeries}}
<a href="{{this.url}}" class="tag">
<div class="badge">{{this.key}} <span>({{this.doc_count}})</span></div>
{{this.key}} <span>({{this.doc_count}})</span>
</a>
{{/each}}
</div>
Expand Down
28 changes: 11 additions & 17 deletions post.hbs
Expand Up @@ -13,19 +13,20 @@
{{/if}}
</div>
<h1 class="flex-grow-1">{{post.title}}</h1>
<div class="post-author__container d-flex justify-content-between">
<div class="post-author">
<img src="{{post.author.avatar}}" alt="">
<span class="author-name">{{post.author.name}}</span>
<div class="my-3 d-flex justify-content-between">
<div class="badge-cloud">
{{# if post.series}}
<a href="{{post.series_url}}" class="tag tag-solid">Series: {{post.series}}</a>
{{/if}}
{{#each post.tags}}
<a href="{{this.url}}" class="tag tag-solid">{{this.key}}</a>
{{/each}}
</div>
</div>
</div>
</div>
<div class="py-5 text-center">
<div class="d-inline-block pr-md-5 h5 m-0">
Our experts help you succeed in your BigData and Cloud projects
</div>
<a href="/contact" class="d-inline-block align-baseline btn btn-enroll-header py-3 px-5">LEARN MORE</a>
<div class="container">
{{> bdbq-banner}}
</div>
<article class="container" style="position: relative">
<div id="SocialLinks">
Expand All @@ -51,15 +52,8 @@
</a>
</div>
<div class="col-md-8 offset-md-2">
<div class="badge-cloud">
{{# if post.series}}
<a href="{{post.series_url}}" class="tag"><div class="badge">Series: {{post.series}}</div></a>
{{/if}}
{{#each post.tags}}
<a href="{{this.url}}" class="tag"><div class="badge">{{this.key}}</div></a>
{{/each}}
</div>
<div class="post-content my-3">
<p class="h5 mb-3">{{{post.excerpt}}}</p>
{{{post.content}}}
</div>
{{#if post.metadata.canonical_url}}
Expand Down
117 changes: 69 additions & 48 deletions public/css/style.css
Expand Up @@ -79,15 +79,6 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
height: auto;
}

.tag-list-content a {
display: inline-block;
margin: 0 0 0.8rem;
}

.tag-list .badge {
margin: 0;
}

.fresh-title {
color: #c31473;
font-size: 1.4rem;
Expand Down Expand Up @@ -148,21 +139,6 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-size: 3rem;
}

.badge {
border-radius: 4px;
line-height: 1.71;
font-size: 1.4rem;
padding: 0 0.7rem;
margin: 0.3rem;
}

.post-badge {
background-color: #47bea4;
color: #ffffff;
margin-left: 1.7rem;
font-weight: 500;
}

p.header-text {
font-size: 1.6rem;
font-weight: normal;
Expand All @@ -173,13 +149,6 @@ p.header-text {
color: rgb(126, 119, 119);
}

.badge {
margin: 0.8rem 0;
color: #843aea;
font-weight: 500;
font-size: 16px;
}

.post-content .post-author__container {
order: 1;
}
Expand Down Expand Up @@ -421,7 +390,8 @@ main.post-page {
display: flex;
flex-direction: column;
margin-top: 1rem;
padding-right: 0.3rem;
padding: 0rem;
overflow: hidden;
}

.post,
Expand Down Expand Up @@ -532,13 +502,6 @@ blockquote em {
font-weight: 400;
}

.btn-enroll-header {
color: #fff;
background: transparent linear-gradient(270deg, #efa52f 0%, #eb596b 100%) 0%
0% no-repeat padding-box;
border-radius: 5px;
}

/* media queries */

@media only screen and (min-width: 769px) {
Expand Down Expand Up @@ -910,6 +873,20 @@ blockquote em {

/* Custom */

.bdbq-banner {
background-color: #f5eeff;
}

.bdbq-banner-button {
display: inline-block;
min-width: 25%;
color: #fff;
background: transparent linear-gradient(270deg, #efa52f 0%, #eb596b 100%) 0%
0% no-repeat padding-box;
border-radius: 5px;
padding: 0.5rem;
}

.sidebar {
margin-top: 0 !important;
}
Expand All @@ -934,17 +911,18 @@ blockquote em {
background-position: center center;
background-repeat: no-repeat;
padding-left: 20px;
transition: -webkit-transform 200ms;
transition: transform 200ms;
transition: transform 200ms, -webkit-transform 200ms;
}
.tag-list.closed .arrow {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.tag-list.closed {
height: 53px;
box-sizing: content-box;
height: 1.25rem;
}
.tag-list.closed .tag-list-content {
display: none;
}

.tag {
Expand All @@ -953,8 +931,15 @@ blockquote em {
border-radius: 25px;
opacity: 1;
padding: 0.5rem;
margin-right: 0.5rem;
transition: all 0.2s ease-in;
margin: 0.5rem 0.5rem 0.5rem 0;
transition: all 0.15s ease-in;
line-height: 1.71;
font-size: 1.4rem;
color: #843aea;
font-weight: 500;
font-size: 1rem;
padding: 0.375rem 0.875rem;
display: inline-block;
}

.tag span {
Expand All @@ -963,12 +948,15 @@ blockquote em {
}

.tag:hover {
/* Don't transition the "in" animation, so it feels snappy */
transition: none;
background-color: #eadeff;
color: #843aea;
}

.tag-list .badge {
.tag.tag-solid {
background: #f5eeff;
color: #843aea;
font-weight: 500;
}

footer {
Expand Down Expand Up @@ -1040,9 +1028,42 @@ footer {
margin-right: 1rem;
}

.fresh-post .fresh-post-box-social,
.post-box .post-box-social {
position: absolute;
right: 0;
}

.fresh-post .fresh-post-box-social a,
.post-box .post-box-social a {
opacity: 0;
transition: all 0.1s ease-in;
display: block;
padding: 0.25rem 0.5rem;
}

.fresh-post .fresh-post-box-social a:first-child,
.post-box .post-box-social a:first-child {
padding-top: 0.5rem;
}

.fresh-post .fresh-post-box-social a:last-child,
.post-box .post-box-social a:last-child {
padding-bottom: 0.5rem;
}

.fresh-post:hover .fresh-post-box-social a,
.post-box:hover .post-box-social a {
opacity: 0.8;
}

.fresh-post .fresh-post-box-social a:hover,
.post-box .post-box-social a:hover {
opacity: 1;
}

#SocialLinks {
position: absolute;
left: 2rem;
}
#SocialLinks a {
display: block;
Expand Down

0 comments on commit e0ea810

Please sign in to comment.