Share improve. Single post and page responsive.

assets/css/style.css

@@ -24,6 +24,9 @@ pre {
   background: #000000;
   border-radius: 5px; }
 
+svg path {
+  transition: all .3s ease; }
+
 hr {
   margin: 50px 0; }
 
@@ -78,8 +81,7 @@ blockquote {
   padding: 0 40px;
   font-family: "Manrope", sans-serif;
   display: flex;
-  justify-content: space-between;
+  justify-content: space-between; }
-  overflow: auto; }
   .sub-header nav {
     white-space: nowrap; }
     .sub-header nav ul {
@@ -154,7 +156,8 @@ blockquote {
   margin: 90px 0 35px; }
   .post-intro .inner .post-meta {
     display: flex;
-    align-items: center; }
+    align-items: center;
+    flex-wrap: wrap; }
     .post-intro .inner .post-meta time:before {
       content: ' - '; }
     .post-intro .inner .post-meta .tags a {
@@ -186,7 +189,8 @@ blockquote {
           color: #2D48BE; }
 
 .post-content {
-  margin-bottom: 70px; }
+  margin-bottom: 70px;
+  margin-top: 60px; }
   .post-content .editor-content {
     position: relative; }
     .post-content .editor-content h1, .post-content .editor-content h2, .post-content .editor-content h3, .post-content .editor-content h4 {
@@ -205,7 +209,8 @@ blockquote {
         color: #090909;
         margin-bottom: 10px; }
     .post-content .editor-content .share ul {
-      margin-bottom: 0; }
+      margin-bottom: 0;
+      padding: 0; }
     .post-content .editor-content a {
       color: #4360DF;
       font-weight: 500;
@@ -279,6 +284,14 @@ blockquote {
   position: absolute;
   top: 0;
   margin-left: -100px; }
+  .share span {
+    font-family: "IBM Plex Mono", monospace;
+    line-height: 18px;
+    font-size: 14px;
+    letter-spacing: -0.186667px;
+    color: rgba(99, 102, 109, 0.8);
+    display: block;
+    margin-bottom: 10px; }
   .share ul {
     list-style-type: none;
     margin: 0;
@@ -290,10 +303,15 @@ blockquote {
       width: 40px;
       height: 40px;
       border: 1px solid #8d8d8d;
-      border-radius: 50%;
+      border-radius: 2px;
       display: flex;
       align-items: center;
       justify-content: center; }
+      .share ul a:hover {
+        border: 1px solid #000000; }
+        .share ul a:hover svg path {
+          fill: #000000;
+          opacity: 1; }
 
 .loop {
   display: flex;
@@ -417,7 +435,8 @@ blockquote {
 
 @media screen and (max-width: 1199px) {
   .sub-header {
-    padding: 0 25px 0 20px; }
+    padding: 0 25px 0 20px;
+    overflow: auto; }
     .sub-header nav ul li {
       margin-right: 0; }
       .sub-header nav ul li:last-child {
@@ -427,7 +446,13 @@ blockquote {
     .sub-header #search-form {
       display: none; }
   .blog-intro {
-    padding: 60px 0; } }
+    padding: 60px 0; }
+  .post-intro {
+    margin-top: 60px; }
+    .post-intro .inner img {
+      margin-top: 60px; }
+  iframe[src*="https://www.youtube.com/"] {
+    height: calc(690px / 1.77777778) !important; } }
 
 @media screen and (max-width: 991px) {
   .loop.loop-first .post .post-inner-content {
@@ -437,9 +462,33 @@ blockquote {
     .loop.loop-first .post .post-inner-content .inner {
       width: 100%; }
   .loop .post {
-    width: calc(50% - 30px); } }
+    width: calc(50% - 30px); }
+  .post-content {
+    margin-bottom: 30px; }
+  .related-posts {
+    padding: 50px 0 30px; }
+    .related-posts .post:last-child {
+      display: none; } }
 
 @media screen and (max-width: 767px) {
+  .post-content .editor-content h1,
+  .post-content .editor-content h2,
+  .post-content .editor-content h3,
+  .post-content .editor-content h4 {
+    margin-top: 50px; }
+  .post-content {
+    margin-top: 30px; }
+  .post-title {
+    line-height: 40px;
+    font-size: 32px; }
   .loop .post {
     width: 100%;
-    margin: 0 0 20px 0; } }
+    margin: 0 0 20px 0; }
+  iframe[src*="https://www.youtube.com/"] {
+    height: calc(500px / 1.77777778) !important; }
+  .related-posts h3 {
+    margin-left: 0; } }
+
+@media screen and (max-width: 575px) {
+  iframe[src*="https://www.youtube.com/"] {
+    height: calc((100vw - 40px) / 1.77777778) !important; } }

assets/js/main.js

@@ -8,6 +8,11 @@ $(document).ready(function ($) {
         'content-api-key': '8a13e02a8917186f02014db742',
     };
 
+    if(window.location.origin == 'https://our-status.hauntedthemes.com'){
+        config['content-api-host'] = 'https://our-status.hauntedthemes.com';
+        config['content-api-key'] = 'c6717eab3d9a3e6be361980f66';
+    }
+
     var ghostSearch = new GhostSearch({
         host: config['content-api-host'],
         key: config['content-api-key'],
@@ -32,9 +37,15 @@ $(document).ready(function ($) {
     });
 
     function setDemoImages(){
-        $('img').each(function (index, element) {
+        if(window.location.origin == 'https://our-status.hauntedthemes.com'){
-            $(this).attr('src', $(this).attr('src').replace("http://localhost:2368", "https://our.status.im"));
+            $('#content img, .blog-intro img').each(function (index, element) {
-        });
+                $(this).attr('src', $(this).attr('src').replace("http://localhost:2368", "https://our.status.im"));
+            });
+        }else{
+            $('img').each(function (index, element) {
+                $(this).attr('src', $(this).attr('src').replace("http://localhost:2368", "https://our.status.im"));
+            });
+        }
     }
 
     setGalleryRation();
@@ -141,7 +152,7 @@ $(document).ready(function ($) {
     }
 
     $(".share").stick_in_parent({
-        offset_top: 50
+        offset_top: 30
     });
 
     // Set the right proportion for images inside the gallery

assets/scss/style.scss

@@ -57,6 +57,12 @@ pre {
     border-radius: 5px;
 }
 
+svg{
+    path{
+        transition: all .3s ease;
+    }
+}
+
 hr{
     margin: 50px 0;
 }
@@ -120,7 +126,6 @@ blockquote{
     font-family: $manrope;
     display: flex;
     justify-content: space-between;
-    overflow: auto;
     nav{
         white-space: nowrap;
         ul{
@@ -218,6 +223,7 @@ blockquote{
         .post-meta{
             display: flex;
             align-items: center;
+            flex-wrap: wrap;
             time{
                 &:before{
                     content: ' - ';
@@ -275,6 +281,7 @@ blockquote{
 
 .post-content{
     margin-bottom: 70px;
+    margin-top: 60px;
     .editor-content{
         position: relative;
         h1,h2,h3,h4{
@@ -299,6 +306,7 @@ blockquote{
         .share{
             ul{
                 margin-bottom: 0;
+                padding: 0;
             }
         }
         a{
@@ -403,6 +411,15 @@ blockquote{
     position: absolute;
     top: 0;
     margin-left: -100px;
+    span{
+        font-family: $ibm-plex-mono;
+        line-height: 18px;
+        font-size: 14px;
+        letter-spacing: -0.186667px;
+        color: rgba(#63666D, 0.8);
+        display: block;
+        margin-bottom: 10px;
+    }
     ul{
         list-style-type: none;
         margin: 0;
@@ -414,10 +431,19 @@ blockquote{
             width: 40px;
             height: 40px;
             border: 1px solid #8d8d8d;
-            border-radius: 50%;
+            border-radius: 2px;
             display: flex;
             align-items: center;
             justify-content: center;
+            &:hover{
+                border: 1px solid $black;
+                svg{
+                    path{
+                        fill: $black;
+                        opacity: 1;
+                    }
+                }
+            }
         }
     }
 }
@@ -587,6 +613,7 @@ blockquote{
 @media screen and (max-width: 1199px) {
     .sub-header{
         padding: 0 25px 0 20px;
+        overflow: auto;
         nav{
             ul{
                 li{
@@ -607,6 +634,17 @@ blockquote{
     .blog-intro {
         padding: 60px 0;
     }
+    .post-intro{
+        margin-top: 60px;
+        .inner{
+            img{
+                margin-top: 60px;
+            }
+        }
+    }
+    iframe[src*="https://www.youtube.com/"] {
+        height: calc(690px / 1.77777778) !important;
+    }
 }
 
 @media screen and (max-width: 991px) {
@@ -628,13 +666,51 @@ blockquote{
             width: calc(50% - 30px);
         }
     }
+    .post-content{
+        margin-bottom: 30px;
+    }
+    .related-posts{
+        padding: 50px 0 30px;
+        .post{
+            &:last-child{
+                display: none;
+            }
+        }
+    }
 }
 
 @media screen and (max-width: 767px) {
+    .post-content .editor-content h1, 
+    .post-content .editor-content h2, 
+    .post-content .editor-content h3, 
+    .post-content .editor-content h4 {
+        margin-top: 50px;
+    }
+    .post-content{
+        margin-top: 30px;
+    }
+    .post-title{
+        line-height: 40px;
+        font-size: 32px;
+    }
     .loop{
         .post{
             width: 100%;
             margin: 0 0 20px 0;
         }
     }
+    iframe[src*="https://www.youtube.com/"] {
+        height: calc(500px / 1.77777778) !important;
+    }
+    .related-posts{
+        h3{
+            margin-left: 0;
+        }
+    }
+}
+
+@media screen and (max-width: 575px) {
+    iframe[src*="https://www.youtube.com/"] {
+        height: calc((100vw - 40px) / 1.77777778) !important;
+    }
 }

page.hbs

@@ -1 +1,50 @@
-page
+{{!< default}}
+
+{{#post}}
+
+<main id="main" role="main">
+    <article class="{{post_class}}">
+        <div class="post-intro">
+            <div class="container">
+                <div class="row">
+                    <div class="col-xl-8 col-lg-9 col-md-12 ml-auto mr-auto">
+                        <div class="inner">
+                            <h1 class="post-title">{{title}}</h1>
+                            <div class="post-meta">
+                                <ul class="authors">
+                                    {{#foreach authors}}
+                                        <li>
+                                            <a href="{{url}}">
+                                                <span>{{name}}</span>
+                                            </a>
+                                        </li>
+                                    {{/foreach}}
+                                </ul>
+                                {{#if primary_tag}}
+                                    <div class="tags">on {{tags limit="1"}}</div>
+                                {{/if}}
+                                <time datetime="{{date format="YYYY-MM-DD"}}">{{date format="DD MMMM YYYY"}}</time>
+                            </div>
+                            {{#if feature_image}}
+                                <img src="{{img_url feature_image size="l"}}" class="inner-featured-image" alt="{{title}}">
+                            {{/if}}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="post-content">
+            <div class="container">
+                <div class="row">
+                    <div class="col-xl-8 col-lg-9 col-md-12 ml-auto mr-auto">
+                        <div class="editor-content">
+                            {{content}}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </article>
+</main>
+
+{{/post}}

post.hbs

@@ -7,7 +7,7 @@
         <div class="post-intro">
             <div class="container">
                 <div class="row">
-                    <div class="col-md-8 ml-auto mr-auto">
+                    <div class="col-xl-8 col-lg-9 col-md-12 ml-auto mr-auto">
                         <div class="inner">
                             <h1 class="post-title">{{title}}</h1>
                             <div class="post-meta">
@@ -36,23 +36,24 @@
         <div class="post-content">
             <div class="container">
                 <div class="row">
-                    <div class="col-md-8 ml-auto mr-auto">
+                    <div class="col-xl-8 col-lg-9 col-md-12 ml-auto mr-auto">
                         <div class="editor-content">
                             {{content}}
                             <div class="share">
+                                <span>Share</span>
                                 <ul>
                                     <li>
-                                        <a href="https://twitter.com/share?text={{encode title}}&amp;url={{url absolute="true"}}" class="twitter" onclick="window.open(this.href, 'share-twitter', 'width=550,height=235');return false;" data-toggle="tooltip" data-placement="top" title="{{t "Share on Twitter"}}">
+                                        <a href="https://twitter.com/share?text={{encode title}}&amp;url={{url absolute="true"}}" class="twitter" onclick="window.open(this.href, 'share-twitter', 'width=550,height=235');return false;" title="{{t "Share on Twitter"}}">
                                             <svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg"> <path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M13.232 2.056C13.8854 1.63145 14.3656 0.987398 14.586 0.24C13.987 0.62 13.325 0.89 12.631 1.036C12.0671 0.382464 11.2482 0.00470955 10.385 0C8.685 0 7.307 1.469 7.307 3.282C7.307 3.533 7.334 3.784 7.388 4.029C4.83 3.893 2.562 2.587 1.044 0.601C0.768819 1.10728 0.625742 1.67477 0.628 2.251C0.628 3.389 1.17 4.394 1.996 4.982C1.50422 4.96489 1.02473 4.82386 0.602 4.572V4.613C0.602 6.203 1.664 7.53 3.072 7.831C2.62003 7.96171 2.14316 7.98126 1.682 7.888C2.073 9.192 3.21 10.14 4.557 10.167C3.2938 11.2353 1.64202 11.7279 0 11.526C1.38681 12.4836 3.03169 12.9976 4.717 13C10.377 13 13.473 8 13.473 3.662C13.473 3.52 13.47 3.378 13.464 3.238C14.0725 2.76702 14.5926 2.19176 15 1.539C14.4416 1.80337 13.8449 1.97785 13.232 2.056Z" fill="#090909"></path> </svg>
                                         </a>
                                     </li>
                                     <li>
-                                        <a href="https://www.facebook.com/sharer/sharer.php?u={{url absolute="true"}}" class="facebook" onclick="window.open(this.href, 'share-facebook', 'width=580,height=296');return false;" data-toggle="tooltip" data-placement="top" title="{{t "Share on Facebook"}}">
+                                        <a href="https://www.facebook.com/sharer/sharer.php?u={{url absolute="true"}}" class="facebook" onclick="window.open(this.href, 'share-facebook', 'width=580,height=296');return false;" title="{{t "Share on Facebook"}}">
                                             <svg width="8" height="15" viewBox="0 0 8 15" fill="none" xmlns="http://www.w3.org/2000/svg"> <path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M5.203 8.07013H7.552L7.905 5.43713H5.203V3.74713C5.203 2.98313 5.416 2.46213 6.552 2.46213H8V0.100131C7.29882 0.0310031 6.59457 -0.00237344 5.89 0.000131122C3.8 0.000131122 2.37 1.22513 2.37 3.48613V5.43613H0V8.07013H2.371V14.8571H5.203V8.07013Z" fill="#090909"></path> </svg>
                                         </a>
                                     </li>
                                     <li>
-                                        <a href="https://www.reddit.com/submit?url={{url absolute="true"}}" target="_blank" class="reddit" data-toggle="tooltip" data-placement="top" title="{{t "Share on Reddit"}}">
+                                        <a href="https://www.reddit.com/submit?url={{url absolute="true"}}" target="_blank" class="reddit" title="{{t "Share on Reddit"}}">
                                             <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M17.9998 9.12116C17.9859 8.73593 17.8622 8.363 17.6438 8.04734C17.4253 7.73167 17.1214 7.48674 16.7686 7.34208C16.4158 7.19742 16.0292 7.15921 15.6554 7.23205C15.2817 7.30488 14.9367 7.48566 14.6621 7.75259C13.1249 6.6943 11.3179 6.10963 9.45964 6.06925L10.338 1.79933L13.2297 2.41518C13.2641 2.73882 13.4113 3.03946 13.6448 3.26312C13.8783 3.48679 14.1829 3.61883 14.5038 3.63556C14.8248 3.65228 15.1412 3.55259 15.3961 3.35438C15.651 3.15617 15.8279 2.87241 15.8949 2.55405C15.9619 2.23569 15.9146 1.90357 15.7616 1.61731C15.6086 1.33105 15.3599 1.10939 15.0601 0.992126C14.7603 0.874859 14.429 0.869663 14.1257 0.97747C13.8225 1.08528 13.5671 1.29903 13.4054 1.58035L10.0947 0.909757C10.0406 0.897727 9.98464 0.8967 9.9301 0.906737C9.87556 0.916773 9.82353 0.937672 9.77702 0.968224C9.73052 0.998776 9.69046 1.03837 9.65917 1.08472C9.62789 1.13106 9.606 1.18324 9.59477 1.23821L8.59482 5.98714C6.71367 6.01586 4.88185 6.60098 3.3248 7.67048C3.11649 7.47197 2.86805 7.32171 2.5967 7.23011C2.32535 7.13851 2.03758 7.10777 1.75333 7.14C1.46908 7.17224 1.19515 7.26669 0.950528 7.4168C0.705903 7.56692 0.496431 7.76911 0.33663 8.00936C0.176828 8.24962 0.070518 8.52219 0.0250674 8.80819C-0.0203832 9.0942 -0.00388753 9.38679 0.0734112 9.66569C0.15071 9.9446 0.286963 10.2031 0.472728 10.4234C0.658493 10.6437 0.889327 10.8204 1.14923 10.9414C1.13402 11.1418 1.13402 11.3431 1.14923 11.5435C1.14923 14.6091 4.67609 17.0999 9.02723 17.0999C13.3784 17.0999 16.9052 14.6091 16.9052 11.5435C16.9204 11.3431 16.9204 11.1418 16.9052 10.9414C17.2387 10.7735 17.5184 10.5135 17.7121 10.1914C17.9058 9.86929 18.0055 9.49825 17.9998 9.12116V9.12116ZM4.48691 10.4897C4.48691 10.219 4.56616 9.95445 4.71464 9.72939C4.86312 9.50433 5.07417 9.32892 5.32108 9.22533C5.568 9.12175 5.83969 9.09465 6.10182 9.14745C6.36394 9.20026 6.60472 9.3306 6.7937 9.522C6.98268 9.7134 7.11138 9.95725 7.16352 10.2227C7.21566 10.4882 7.1889 10.7634 7.08662 11.0135C6.98434 11.2635 6.81115 11.4773 6.58893 11.6276C6.36671 11.778 6.10545 11.8583 5.8382 11.8583C5.66074 11.8583 5.48503 11.8229 5.32108 11.7541C5.15714 11.6853 5.00817 11.5845 4.88269 11.4574C4.75721 11.3304 4.65768 11.1795 4.58977 11.0135C4.52186 10.8474 4.48691 10.6694 4.48691 10.4897V10.4897ZM12.3379 14.2533C11.3792 14.985 10.1996 15.3574 9.0002 15.3071C7.80078 15.3574 6.62123 14.985 5.66253 14.2533C5.60507 14.1824 5.5757 14.0924 5.58014 14.0007C5.58459 13.9091 5.62252 13.8224 5.68657 13.7576C5.75061 13.6927 5.83619 13.6543 5.92666 13.6498C6.01712 13.6453 6.106 13.675 6.17602 13.7332C6.98845 14.3368 7.98014 14.641 8.98669 14.5954C9.99448 14.6509 10.9908 14.3564 11.8109 13.7606C11.8826 13.6898 11.9791 13.6508 12.0792 13.6521C12.1287 13.6527 12.1777 13.6632 12.2232 13.683C12.2688 13.7028 12.31 13.7315 12.3446 13.7674C12.3792 13.8034 12.4065 13.8459 12.4249 13.8925C12.4433 13.9391 12.4524 13.989 12.4518 14.0392C12.4512 14.0893 12.4408 14.1389 12.4212 14.1851C12.4017 14.2312 12.3734 14.273 12.3379 14.308V14.2533ZM12.0946 11.913C11.8274 11.913 11.5661 11.8328 11.3439 11.6824C11.1217 11.532 10.9485 11.3183 10.8462 11.0682C10.7439 10.8181 10.7172 10.5429 10.7693 10.2775C10.8215 10.012 10.9502 9.76814 11.1391 9.57674C11.3281 9.38535 11.5689 9.255 11.831 9.2022C12.0931 9.14939 12.3648 9.17649 12.6118 9.28008C12.8587 9.38366 13.0697 9.55907 13.2182 9.78413C13.3667 10.0092 13.4459 10.2738 13.4459 10.5445C13.4533 10.7299 13.4233 10.9149 13.3578 11.0882C13.2924 11.2616 13.1928 11.4196 13.0651 11.5527C12.9375 11.6859 12.7844 11.7913 12.6152 11.8627C12.4461 11.934 12.2644 11.9698 12.0811 11.9678L12.0946 11.913Z" fill="#848484"></path> </svg>
                                         </a>
                                     </li>
@@ -71,7 +72,7 @@
         <div class="related-posts">
             <div class="container">
                 <div class="row">
-                    <div class="col-md-10 ml-auto mr-auto">
+                    <div class="col-md-12 col-xl-10 ml-auto mr-auto">
                         <h3>{{t "Related articles"}}</h3>
                         <div class="loop">
                             {{#foreach posts}}