diff --git a/assets/css/style.css b/assets/css/style.css index 0d5a120..2d04154 100644 --- a/assets/css/style.css +++ b/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; - overflow: auto; } + justify-content: space-between; } .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; } } diff --git a/assets/js/main.js b/assets/js/main.js index ed82170..7b8520c 100644 --- a/assets/js/main.js +++ b/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) { - $(this).attr('src', $(this).attr('src').replace("http://localhost:2368", "https://our.status.im")); - }); + if(window.location.origin == 'https://our-status.hauntedthemes.com'){ + $('#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 diff --git a/assets/scss/style.scss b/assets/scss/style.scss index 754c743..29fa196 100644 --- a/assets/scss/style.scss +++ b/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; + } } \ No newline at end of file diff --git a/page.hbs b/page.hbs index cdd87f4..e50bbcb 100644 --- a/page.hbs +++ b/page.hbs @@ -1 +1,50 @@ -page \ No newline at end of file +{{!< default}} + +{{#post}} + +
+
+
+
+
+
+
+

{{title}}

+
+ + {{#if primary_tag}} +
on {{tags limit="1"}}
+ {{/if}} + +
+ {{#if feature_image}} + {{title}} + {{/if}} +
+
+
+
+
+
+
+
+
+
+ {{content}} +
+
+
+
+
+
+
+ +{{/post}} \ No newline at end of file diff --git a/post.hbs b/post.hbs index 3a811d4..e601c38 100644 --- a/post.hbs +++ b/post.hbs @@ -7,7 +7,7 @@
-
+

{{title}}

@@ -36,23 +36,24 @@
-
+
{{content}}