blogging-site-theme 0.1

data/_includes/postbox.html

@@ -0,0 +1,31 @@
+<div class="col-lg-3 col-md-6 mb-4 card-group">
+    <div class="card h-100" style="border-radius:16px" id="{{post.categories}}">
+        <a href="{{ post.url }}">
+            <img src="{{ post.image }}" class="card-img-top p-3" style="border-radius: 25px; height: 180px"
+                alt="not found">
+        </a>
+        <div class="card-body">
+            <a href="{{ post.url }}" class="anchor_link">
+                <h1 class="card-title mb-4">{{ post.title }}</h1>
+            </a>
+        </div>
+        {% assign author = site.data.blog.authors[post.author] %}
+        <div class="card-footer">
+            <div class="wrapfooter">
+                <span class="meta-footer-thumb">
+                    <img class="author-thumb" src="{{ author.image }}" alt="{{ author.name }}">
+                </span>
+                <span class="author-meta">
+                    <span class="post-name">
+                        <a target="_blank" href="/">{{post.author}}</a>
+                    </span><br>
+                    <span class="post-date">{{post.date | date_to_string }}</span>
+                </span>
+                <span class="post-read-more">
+                    <a href="{{ post.url }}" title="Read Story">
+                        Read More
+                    </a></span>
+            </div>
+        </div>
+    </div>
+</div>

data/_includes/scripts.html

@@ -0,0 +1,2 @@
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
+<script src="/assets/js/thefrontendworld.js"></script>

data/_includes/search-lunr.html

@@ -0,0 +1,11 @@
+<form class="bd-search m-0" onSubmit="return lunr_search(document.getElementById('lunrsearch').value);">
+    <input type="text" class="form-control text-small launch-modal-search" id="lunrsearch" name="q" maxlength="255"
+        value="" placeholder="Type and enter...">
+</form>
+
+<div id="lunrsearchresults">
+    <ul></ul>
+</div>
+
+<script src=" {{site.url}}/assets/js/lunr.js"></script>
+<script src="{{site.url}}/assets/js/lunrsearchengine.js"></script>

data/_includes/section/alertbar.html

@@ -0,0 +1,12 @@
+<div class="alertbar" style="display: none;">
+    <div class="container text-center">
+        <span style="font-size: 15px;">{{site.data.blog.alertbar.span}}</span>
+        <form>
+            <div class="mc-field-group">
+                <input type="email" placeholder="Email" name="EMAIL" class="required email" id="mce-EMAIL"
+                    autocomplete="on" required="">
+                <input type="submit" value="Subscribe" name="subscribe">
+            </div>
+        </form>
+    </div>
+</div>

data/_includes/section/count.html

@@ -0,0 +1,24 @@
+{%- assign footerData2 = site.data.blog.footer -%}
+{%- assign theme = site.data.theme.UI -%}
+<div class="explore" style="background: {{theme.color}}">
+    <h2 class="animate__animated animate__bounce animate__infinite">Explore</h2>
+    <span class="d-none d-md-inline animate__animated animate__backInDown animate__infinite"
+        style="font-size: 25px;">&#x2193;</span>
+    <ul>
+        {% assign categories_list = site.categories %}
+        {% if categories_list.first[0] == null %}
+        {% for category in categories_list %}
+        <a class="cat mt-1 mb-1" href="/categories#{{ category | url_escape | strip | replace: ' ', '-' }}">{{ category
+            |
+            camelcase }} ({{ site.tags[category].size }})</a>
+        {% endfor %}
+        {% else %}
+        {% for category in categories_list %}
+        <a class="cat mt-1 mb-1" href="/categories#{{ category[0] | url_escape | strip | replace: ' ', '-' }}">{{
+            category[0]
+            | camelcase }} ({{ category[1].size }})</a>
+        {% endfor %}
+        {% endif %}
+        {% assign categories_list = nil %}
+    </ul>
+</div>

data/_includes/section/faq.html

@@ -0,0 +1,32 @@
+
+{%- assign fileName = page.fileName -%}
+{%- assign folderName = page.folderName -%}
+{%- assign lang = page.lang -%}
+
+<!-- Theme Config -->
+<!-- {%- assign theme = site.data.theme.UI -%}
+
+{% if lang %}
+{%- assign dataToShow  = site.data[folderName][lang][fileName] -%}
+
+{% elsif folderName %}
+{%- assign dataToShow  = site.data[folderName][fileName] -%}
+
+{% else %}
+{%- assign dataToShow  = site.data[fileName] -%}
+{% endif %}
+
+
+{% if dataToShow %}
+<h1 class="faq_heading">{{dataToShow.faq_heading}}</h1>
+{% endif %}
+<main>
+    {% for entry in dataToShow.faqList%}
+    <details>
+        <summary style="background-color: {{theme.color}}">{{entry.question}}</summary>
+        <div class="faq__content">
+            <p>{{entry.answer}}</p>
+        </div>
+    </details>
+    {% endfor %}
+</main> 

data/_includes/section/recent_posts.html

@@ -0,0 +1,42 @@
+<div class="container">
+    <div class="relatedPosts">
+<h1 class="related_post_heading">Recent Posts</h1>
+<div class="row">
+{% for recent in site.posts offset:1 limit:3 %}
+{% if recent.url != page.url %}
+<div class="col-lg-4 col-md-6 mb-4 card-group">
+    <div class="card h-100">
+        <a href="{{ recent.url }}">
+            <img src="{{ recent.image }}" class="card-img-top" alt="" style="height: 180px">
+        </a>
+        <div class="card-body">
+            <a class="text-decoration-none text-dark" href="{{ recent.url }}" class="anchor_link">
+                <h4 class="card-title mb-4 text-left">{{ recent.title }}</h4>
+            </a>
+        </div>
+        {% assign author = site.data.blog.authors[recent.author] %}
+        <div class="card-footer bg-white">
+            <div class="wrapfooter">
+                {% if recent.author %}
+                <span class="meta-footer-thumb">
+                    <img class="author-thumb" src="{{ author.image }}" alt="{{ author.name }}">
+                </span>
+                {% endif %}
+
+                <span class="author-meta">
+                    <span class="recent-name">
+                        <a target="_blank" href="/blog">{{recent.author}}</a>
+                    </span><br>
+                    <span class="post-date">{{recent.date | date_to_string }}</span>
+                </span>
+                <span class="post-read-more"><a class="text-dark" href="{{ recent.url }}"
+                        title="Read Story">Read More</a></span>
+            </div>
+        </div>
+    </div>
+</div>
+{% endif %}
+{% endfor %}
+</div>
+</div>
+</div>

data/_includes/section/related_post.html

@@ -0,0 +1,55 @@
+<div class="container">
+    <div class="relatedPosts">
+        {%- if page.categories -%}
+        <h2 class="pt-5 pb-0 related_post_heading">You might also like</h2>
+        {%- endif -%}
+
+        <div class="row">
+            {% for post in site.posts %}
+         
+            {% for category in post.categories %}
+            {% if post.url != page.url %}
+            {% if page.categories contains category %}
+        
+            <div class="col-lg-4 col-md-6 mb-4 card-group">
+                <div class="card h-100">
+                    <a href="{{ post.url }}">
+                        <img src="{{ post.image }}" 
+                        style="height: 150px; border-radius: 5px;"
+                        class="card-img-top" alt="">
+                    </a>
+                    <div class="card-body">
+                        <a class="text-decoration-none text-dark" href="{{ post.url }}" class="anchor_link">
+                            <h4 class="card-title mb-4 text-left">{{ post.title }}</h4>
+                        </a>
+                    </div>
+                    {% assign author = site.data.blog.authors[post.author] %}
+                    <div class="card-footer bg-white">
+                        <div class="wrapfooter" style="justify-content: space-between;
+                        ">
+                            {% if post.author %}
+                            <span class="meta-footer-thumb">
+                                <img class="author-thumb" src="{{ author.image }}" alt="{{ author.name }}">
+                            </span>
+                            {% endif %}
+
+                            <!-- <span class="author-meta">
+                                <span class="post-name">
+                                    <a target="_blank" href="/blog">{{post.author}}</a>
+                                </span><br>
+                                <span class="post-date">{{post.date | date_to_string }}</span>
+                            </span> -->
+                            <span class="post-read-more ml-5"><a class="text-dark" href="{{ post.url }}"
+                                    title="Read Story">Read More</a></span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {% endif %}
+            {% endif %}
+            {% endfor %}
+            {% endfor %}
+        </div>
+    </div>
+</div>

data/_layouts/blog.html

@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+
+{% include custom-head.html %}
+
+<body>
+    {%- include header/index.html -%}
+    <section class="section_post">
+        <div class="container px-5">
+            <div class="row justify-content-center section-title-wrap">
+                <div class="col-lg-12 mt-5 ">
+                    <h1 style="font-weight: 900;">{{ site.data.blog.blog.h1 }}
+                    </h1>
+                    <p class="lead mb-5 mt-1" style="font-size: 18px;">
+                        {{ site.data.blog.blog.tagline }}
+                    </p>
+                </div>
+            </div>
+
+            <!-- categories post -->
+            <div class="main-content">
+                {{content}}
+            </div>
+            <!-- close -->
+
+              <div class="row">
+                {% for post in paginator.posts%}
+                <div class="col-lg-4 col-md-6 mb-4 card-group">
+                    <div class="card h-100" style="border-radius:16px" id="{{post.categories}}">
+                        <a href="{{ post.url }}">
+                            <img src="{{ post.image }}" class="card-img-top p-3" style="border-radius: 25px; height: 180px;"
+                                alt="not found">
+                        </a>
+                        <div class="card-body">
+                            <a href="{{ post.url }}" class="anchor_link">
+                                <h1 class="card-title mb-4">{{ post.title }}</h1>
+                            </a>
+                        </div>
+                        {% assign author = site.data.blog.authors[post.author] %}
+                        <div class="card-footer">
+                            <div class="wrapfooter">
+                                <span class="meta-footer-thumb">
+                                    <img class="author-thumb" src="{{ author.image }}" alt="{{ author.name }}">
+                                </span>
+                                <span class="author-meta">
+                                    <span class="post-name">
+                                        <a target="_blank" href="/">{{post.author}}</a>
+                                    </span><br>
+                                    <span class="post-date">{{post.date | date_to_string }}</span>
+                                </span>
+                                <span class="post-read-more">
+                                    <a href="{{ post.url }}" title="Read Story">
+                                        Read More
+                                    </a></span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                {% endfor %}
+            </div>
+            {%- include pagination.html -%}
+        </div>
+
+        {% include section/count.html %}
+    </section>
+
+    {%- include section/recent_posts.html -%}
+    <!-- {% include section/faq.html %} -->
+
+    {% include footer/index.html %}
+
+    {% include scripts.html %}
+</body>
+
+</html>

data/_layouts/categories.html

@@ -0,0 +1,25 @@
+---
+layout: blog
+---
+
+<div class="container">
+    <div class="row listrecent">
+        {% for category in site.categories %}
+        <div class="section-title col-md-12 mt-4">
+            <h2 id="{{ category[0] | replace: ' ', '-' }}">Category <span class="text-capitalize">{{ category[0]
+                    }}</span>
+            </h2>
+        </div>
+        {% assign pages_list = category[1] %}
+        {% for post in pages_list %}
+        {% if post.title != null %}
+        {% if group == null or group == post.group %}
+        {% include postbox.html %}
+        {% endif %}
+        {% endif %}
+        {% endfor %}
+        {% assign pages_list = nil %}
+        {% assign group = nil %}
+        {% endfor %}
+    </div>
+</div>

data/_layouts/post.html

@@ -0,0 +1,78 @@
+<Doctype html>
+    <html lang="en">
+    {% include custom-head.html %}
+    <style>
+        .post-content img {
+            width: auto;
+            max-width: 100%;
+        }
+        @media(max-width:768px){
+            .main_h1{
+                font-size: 1rem !important;
+            }
+        }
+    </style>
+
+    <body>
+        {%- include header/index.html -%}
+        <section class="section_post">
+            <div class="container px-5">
+                <div class="row section-title-wrap">
+                    <div class="col-md-12 mt-5">
+                        <h1 class="main_h1" style="font-weight: 900;">{{ page.title }}</h1>
+                    </div>
+                </div>
+                <div class="row mt-5">
+                    <div class="col-md-2">
+                        <div class="socialIons">
+                            <ul class="list-unstyled item-lists2">
+                                <li><a style="pointer-events: none;">{{ site.data.blog.share.label }}</a></li>
+                                {% capture title %}{{ page.title }}{% endcapture %}
+                                {% assign url = page.url | relative_url | prepend: site.url %}
+                                {% for share in site.data.blog.share.platforms %}
+                                {% assign link = share.link | replace: 'TITLE', title | replace: 'URL', url %}
+                                <li> <a href=" {{ link }}" data-toggle="tooltip"
+                                        onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
+                                        data-placement="top" title="{{ share.type }}" aria-label="{{ share.type }}">
+                                        <i class="fa-fw {{ share.icon }}"></i>
+                                    </a>
+                                </li>
+                                {% endfor %}
+                                </span>
+                            </ul>
+                            <div class="sep"></div>
+                            <div class="comments-count">
+                                <a href="{{ content.absolute_url  }}#disqus_thread" class="comment_count"></a>
+                            </div>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div class="col-md-8">
+                        {% assign author = site.data.blog.authors[page.author] %}
+
+                        {% if author %}
+                        {% include author_bio.html %}
+                        {% endif %}
+
+                        <div class="post-content fetch-posts-content mt-5">
+                            {{ content }}
+                        </div>
+                       
+                        {%- include paginationPostPage.html -%}
+                        {%- include section/related_post.html -%}
+                        <div class="commentsection">
+                            {%- if site.disqus.shortname -%}
+                            {%- include disqus_comments.html -%}
+                            {%- endif -%}
+                        </div>
+                    </div>
+                </div>
+        </section>
+        {%- include section/count.html -%}
+        
+        {%- include footer/index.html -%}
+        {% include scripts.html %}
+    </body>
+
+    </html>

data/_sass/_main.scss

@@ -0,0 +1,25 @@
+// @import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
+
+// ------------------------------------------------------------------
+// [Color codes]
+
+$primary-color: #5fb9fd;
+$primary-color2: #5960ff;
+$title-color: #222222;
+$text-color: #777777;
+$aquablue-color: #edf6ff;
+
+$white: #fff;
+$offwhite: #e9e9e9;
+$black: #222;
+
+// -----------------------------------------------------------------------*/
+
+@import 'theme/header';
+@import 'theme/blog';
+@import 'theme/faq';
+@import 'theme/pagination';
+@import 'theme/pagination2';
+@import 'theme/footer';

data/_sass/theme/_blog.scss

@@ -0,0 +1,242 @@
+
+.card:hover{
+  transform: translateY(-20px);
+  transition: all 0.15s ease;
+}
+.card-body {
+  .anchor_link {
+    font-weight: 300;
+    letter-spacing: 0.56px;
+    line-height: 20px;
+    text-decoration: none;
+    color: #000;
+  }
+  .card-title {
+    font-size: 14px;
+  }
+  .card-img-top {
+    width: 100%;
+    height: 100%;
+    -o-object-fit: cover;
+    object-fit: cover;
+    border-radius: 16px !important;
+  }
+}
+
+@media(max-width:768px){
+  .card-img-top{
+    height:auto !important;
+  }
+}
+
+.blog-post {
+  font-size: 20px;
+  color: rgb(37, 34, 34);
+  img {
+    width: 100%;
+  }
+}
+.socialIons {
+  position: sticky;
+  top: 100px;
+
+  ul {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+  li {
+    list-style: none;
+    padding: 3px 0;
+    margin: 0 auto;
+  }
+  a {
+    color: rgba(0, 0, 0, 0.44) !important;
+    fill: rgba(0, 0, 0, 0.44) !important;
+    font-size: 18px;
+    cursor: pointer;
+  }
+}
+
+.sep {
+  height: 1px;
+  width: 20px;
+  background: #999;
+  margin: 3px auto;
+}
+
+@media (max-width: 768px) {
+  .socialIons ul {
+    flex-direction: row;
+    align-items: center;
+
+    li {
+      margin: 0;
+      padding-right: 50px;
+    }
+  }
+
+  .sep {
+    margin: 0;
+  }
+}
+
+/* author bio styling.. */
+.wrapfooter {
+  width: 100%;
+  display: flex;
+  align-items: center;
+
+  .author-thumb {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    object-fit: cover;
+  }
+
+  .author-meta {
+    padding-left: 43px;
+  }
+  .postName {
+    font-size: 18px;
+    color: rgba(0, 0, 0, 0.8) !important;
+    text-decoration: none !important;
+    font-family: 'Merriweather', serif;
+  }
+  .btn_follow {
+    margin-left: 5px;
+    margin-bottom: 10px;
+    border-color: #02b875;
+    color: #1c9963 !important;
+    padding: 3px 10px;
+    text-align: center;
+    border-radius: 999em;
+    font-size: 1rem;
+    display: inline-block;
+    border: 1px solid;
+  }
+  .author_bio {
+    font-family: 'Merriweather', serif;
+    color: rgba(0, 0, 0, 0.44);
+    font-size: 16px;
+    line-height: 20px;
+  }
+  .post-read-more a {
+    text-decoration: none !important;
+    font-size: 0.8rem;
+    color: gray;
+
+    &:hover {
+      color: blue !important;
+      text-decoration: underline !important;
+    }
+  }
+} /* close */
+
+.card-footer {
+  border: none !important;
+
+  .wrapfooter2 {
+    display: flex;
+    align-items: center;
+  }
+  img {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+  }
+  .author-meta {
+    flex: 1 1 auto;
+    padding: 0 15px;
+  }
+  .post-date {
+    display: block;
+    position: relative;
+    font-size: 12px;
+  }
+  .author-meta a {
+    font-size: 12px;
+    color: #000;
+    text-transform: capitalize;
+    text-decoration: none;
+  }
+  .span.post-read-more {
+    align-items: center;
+    display: inline-block;
+    margin-top: 8px;
+  }
+}
+
+.explore {
+  margin: 100px 0;
+  height: 300px;
+  background: #00ab6b;
+  width: 100%;
+  text-align: center;
+  display: grid;
+  place-items: center;
+  /* min-height: 100vh; */
+  color: #fff;
+  font-weight: 400;
+  .cat {
+    display: inline-block;
+    padding: 7px 10px;
+    text-decoration: none !important;
+    color: #000 !important;
+    font-weight: 600;
+    font-size: 12px;
+    background: #fff;
+    border-radius: 15px;
+    margin: 0 15px;
+  }
+}
+
+// catgories styling
+.section-title h2 {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+  font-size: 1.5rem;
+  margin-bottom: 27px;
+  span {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.44);
+    display: inline-block;
+    padding-bottom: 20px;
+    margin-bottom: -1px;
+  }
+}
+
+
+/* Blog-Pages-Pagination stlying*/
+.blog-pagination a,
+.blog-pagination span {
+  padding: 7px 10px;
+  margin-left: -2px;
+  margin-right: -2px;
+  background-color: #ffffff;
+  display: inline-block;
+  text-decoration: none;
+}
+.blog-pagination{
+  text-align: center;
+a:hover {
+  background-color: #f1f1f1;
+  color: #333;
+}
+}
+
+
+/* recent post heading stlye */
+.related_post_heading{
+  text-align: center !important;
+  width:100%;
+  font-size: 40px;
+  text-align: left;
+    font-weight: 800;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: 1.24;
+    letter-spacing: normal;
+    color: rgb(17, 48, 78);
+    margin-bottom: 45px;
+    padding-top: 75px;
+    display: inline-block;
+}