layout improvements

StackTipsLab · Dec 19, 2023 · 6481fd2 · 6481fd2
1 parent aef6985
commit 6481fd2
Show file tree

Hide file tree

Showing 12 changed files with 63 additions and 59 deletions.
diff --git a/bloggy/templates/auth/register.html b/bloggy/templates/auth/register.html
@@ -39,7 +39,7 @@ <h1 class="display-2 lh-1 fw-normal">Create your free account!</h1>
                     {{ form.password2|add_class:"form-control" }}
                     {{ form.password2.errors }}
                 </div>
-                {{ form.honeypot|add_class:"hidden" }}
+                {{ form.honeypot|add_class:"d-none" }}
                 <ul class="form-errors text-danger list-unstyled my-2">
                     {% for error in form.non_field_errors %}
                         <li>{{ error }}</li>{% endfor %}

diff --git a/bloggy/templates/base-with-header-footer.html b/bloggy/templates/base-with-header-footer.html
@@ -43,7 +43,7 @@
         {% endif %}
         {% block content %}{% endblock content %}
     </main>
-    <footer class="footer mt-auto bg-primary">
+    <footer class="footer mt-auto">
         {% include "partials/footer.html" %}
     </footer>
     </body>

diff --git a/bloggy/templates/pages/home.html b/bloggy/templates/pages/home.html
@@ -21,7 +21,10 @@ <h1 class="display-1 px-lg-5">
 
         <section class="recent-articles py-3">
             <div class="container">
-                <h2 class="h2 py-2">Recent posts</h2>
+                <h2 class="mb-4 fw-600 ms-3">
+                    <span class="text-secondary">&blk14;</span> Recent <span class="text-gradient text-primary">tutorials</span>
+                </h2>
+
                 <div class="row row-cols-1 row-cols-md-1 row-cols-lg-2 g-3">
                     {% if posts|length <= 0 %}
                         <p class="lead my-3 text-muted">No contents found!</p>
@@ -42,9 +45,9 @@ <h2 class="h2 py-2">Recent posts</h2>
 
         <section class="hero mt-md-3 mt-lg-5">
             {% load static %}
-            <div class="container p-5">
-                <h2 class="display-3 text-center mb-5 fw-600">
-                    Browse by <span class="text-gradient text-primary">Categories</span>
+            <div class="container py-5">
+                <h2 class="mb-4 fw-600">
+                    <span class="text-secondary">&blk14;</span> Browse by <span class="text-gradient text-primary">Categories</span>
                 </h2>
                 {% categories_widget count=15 widget_style="home" %}
             </div>
@@ -53,10 +56,11 @@ <h2 class="display-3 text-center mb-5 fw-600">
         <section class="homeCourses__section my-md-3 my-lg-5">
             {% load static %}
             <div class="container">
-                <h2 class="display-3 mb-3 fw-600">
-                    Popular <span class="text-gradient text-primary">Courses</span>
-                </h2>
 
+                <h2 class="mb-4 fw-600">
+                    <span class="text-secondary">&blk14;</span> Free <span
+                        class="text-gradient text-primary">Courses</span>
+                </h2>
                 <div class="row row-cols-1 row-cols-md-3 row-cols-lg-4 g-4 gy-3">
                     {% if courses|length <= 0 %}
                         <p class="lead my-3 text-muted">No contents found!</p>

diff --git a/bloggy/templates/pages/single/lesson.html b/bloggy/templates/pages/single/lesson.html
@@ -28,7 +28,7 @@
                             <div class="article-details-card mb-4 me-lg-3">
                                 <div class="padding-medium relative">
                                     <h1 class="display-2 fw-600"
-                                        style="line-height: 1.3;letter-spacing: -0.04rem">{{ post.title }}</h1>
+                                        style="line-height: 1.2;letter-spacing: -0.04rem">{{ post.title }}</h1>
 
                                     {% if post.thumbnail and post.template_type == "cover" %}
                                         <div class="article-single-thumbnails my-4">
@@ -68,7 +68,9 @@
 
         <div class="bg-light  border-bottom py-5">
             <div class="container">
-                <h2 class="text-center mx-auto display-3 mb-4">Related articles</h2>
+                <h2 class="mb-4 fw-600 ms-3">
+                    <span class="text-secondary">&blk14;</span> Related articles
+                </h2>
                 {% related_article_widget count=8 slug=post.slug categories=post.category.all widget_title='Related articles' widget_style="grid" %}
             </div>
         </div>

diff --git a/bloggy/templates/pages/single/post.html b/bloggy/templates/pages/single/post.html
@@ -27,8 +27,7 @@
                         <div class="flex-grow-1" style="overflow: hidden">
                             <div class="article-details-card mb-4 me-lg-3">
                                 <div class="padding-medium relative">
-                                    <h1 class="display-2 fw-600"
-                                        style="line-height: 1.3;letter-spacing: -0.04rem">{{ post.title }}</h1>
+                                    <h1 class="display-2 fw-600" style="line-height: 1.2;letter-spacing: -0.055rem">{{ post.title }}</h1>
 
                                     {% if post.thumbnail and post.template_type == "cover" %}
                                         <div class="article-single-thumbnails my-4">
@@ -58,12 +57,10 @@
                                     </article>
                                     {% include "partials/social_share.html" with object=post authorName=post.author.get_full_name_or_username %}
                                     {% include 'partials/author_widget.html' with author=post.author %}
-
-
-                                    <section id="vueRoot" class="d-print-none my-5">
-                                        <comments post-id="{{ post.id }}" post-type="{{ post.post_type }}"
-                                                  current-user="{{ user }}"></comments>
-                                    </section>
+
+                                    {% comment %}<section id="vueRoot" class="d-print-none my-5">
+                                        <comments post-id="{{ post.id }}" post-type="{{ post.post_type }}" current-user="{{ user }}"></comments>
+                                    </section>{% endcomment %}
                                 </div>
                             </div>
                         </div>
@@ -87,7 +84,9 @@
 
         <div class="bg-light  border-bottom py-5">
             <div class="container">
-                <h2 class="text-center mx-auto display-3 mb-4">Related articles</h2>
+                <h2 class="mb-4 fw-600 ms-3">
+                    <span class="text-secondary">&blk14;</span> Related articles
+                </h2>
                 {% related_article_widget count=8 slug=post.slug categories=post.category.all widget_title='Related articles' widget_style="grid" %}
             </div>
         </div>

diff --git a/bloggy/templates/pages/single/quiz.html b/bloggy/templates/pages/single/quiz.html
@@ -43,7 +43,9 @@
 
     <div class="bg-light  border-bottom py-5">
         <div class="container">
-            <h2 class="text-center mx-auto display-3 mb-5">Related articles</h2>
+            <h2 class="mb-5 fw-600">
+                <span class="text-secondary">&blk14;</span> Related quizzes
+            </h2>
             {% related_quizzes_widget limit=15 widget_title=widget_title widget_style="grid" %}
         </div>
     </div>

diff --git a/bloggy/templates/partials/article_meta_container.html b/bloggy/templates/partials/article_meta_container.html
@@ -4,36 +4,33 @@
 {% load shortcodes_filters %}
 {% spaceless %}
     {% define post.author as author %}
-    <div class="d-flex align-items-center ">
-        <div class="flex-shrink-0">
-            <img src="{{ author.get_avatar }}"
-                 alt="{{ author.username }} avtar"
-                 loading="lazy"
-                 class="img-fluid m-0"
-                 height="42px"
-                 width="42px" style="border-radius: 50%"/>
+    <div class="d-flex flex-row align-items-center">
+        <img src="{{ author.get_avatar }}"
+             alt=""
+             loading="lazy"
+             height="42px"
+             width="42px" style="border-radius: 50%"/>
 
-        </div>
-        <div class="flex-grow-1 ms-3">
-            <a class="text-decoration-none fw-600 text-reset" href="{% url 'user_profile' username=author.username %}">
+        <div class="d-flex flex-row gap-2 ms-3 align-items-center">
+            <a class="text-decoration-none text-dark lead fw-500 "
+               href="{% url 'user_profile' username=author.username %}">
                 {{ author.get_full_name_or_username }}
             </a>
-            &nbsp;&nbsp;<span class="font-xs text-muted">|</span>&nbsp;&nbsp;
+
+            <span class="font-sm" style="color: #d5d5d5">&bull;</span>
+            <span class="text-decoration-none text-muted fw-500"> {{ post.updated_date|date:"M d, Y" }}</span>
+
+            <span class="font-sm" style="color: #d5d5d5">&bull;</span>
             {% for category in post.category.all %}
-                <a class="text-decoration-none text-reset link-primary fw-bold"
+                <a class="text-decoration-none link-primary text-primary text-lowercase lead fw-500"
                    style="z-index:999;position:relative"
                    href="{% url 'categories_single' slug=category.slug %}">
-                    <span class="d-inline-block mb-1 text-primary text-lowercase fw-500">#{{ category.title }}</span>
+                    #{{ category.title }}
                     {% if forloop.last != True %}
                         <span class="text-muted pe-2"></span>
                     {% endif %}
                 </a>
             {% endfor %}
-            &nbsp;&nbsp;<span class="font-xs text-muted">|</span>&nbsp;&nbsp;
-            <span class="text-decoration-none font-sm fw-400">
-                {{ post.updated_date|date:"M d, Y" }},&nbsp
-            </span>
-
         </div>
     </div>
 {% endspaceless %}

diff --git a/bloggy/templates/partials/footer.html b/bloggy/templates/partials/footer.html
@@ -1,23 +1,24 @@
 {% spaceless %}
-    <div class="py-4">
+    <div class="py-5">
         <div class="container">
-            <p class="footer-text text-info font-sm mb-1">
-                Powered by <a class="link-info" href="https://github.com/StackTipsLab/bloggy">Bloggy.</a>
-                Made with <span style="color: #e74c3c">&hearts;</span> by <a href="https://twitter.com/asknilan" target="_blank" class="link-info">@asknilan</a>.
+            <p class="footer-text text-secondary font-sm mb-1">
+                Powered by <a class="link-secondary" href="https://github.com/StackTipsLab/bloggy">Bloggy.</a>
+                Made with <span style="color: #e74c3c">&hearts;</span> by <a href="https://twitter.com/asknilan"
+                                                                             target="_blank" class="link-secondary">@asknilan</a>.
             </p>
-            <div class="d-block">
+            <div class="d-block pt-3">
                 <small>
-                    <a class="footer-text link-info" href="{% url 'pages.contact' %}">Contact</a>
+                    <a class="footer-text link-secondary" href="{% url 'pages.contact' %}">Contact</a>
                     <span class="eyebrow__spacer footer-text ">·</span>
-                    <a class="footer-text link-info" href="/privacy">Privacy policy</a>
+                    <a class="footer-text link-secondary" href="/privacy">Privacy policy</a>
                     <span class="eyebrow__spacer footer-text">·</span>
-                    <a class="footer-text link-info" href="/terms-of-service">Terms of service</a>
+                    <a class="footer-text link-secondary" href="/terms-of-service">Terms of service</a>
                     <span class="eyebrow__spacer footer-text">·</span>
-                    <a class="footer-text link-info" href="/cookie-policy">Cookies</a>
+                    <a class="footer-text link-secondary" href="/cookie-policy">Cookies</a>
                     <span class="eyebrow__spacer footer-text">·</span>
-                    <a class="footer-text link-info" href="/code-of-conduct">Code of conduct</a>
+                    <a class="footer-text link-secondary" href="/code-of-conduct">Code of conduct</a>
                     <span class="eyebrow__spacer footer-text">·</span>
-                    <a class="footer-text link-info" href="/about">About</a>
+                    <a class="footer-text link-secondary" href="/about">About</a>
                 </small>
             </div>
         </div>

diff --git a/bloggy/templates/partials/header.html b/bloggy/templates/partials/header.html
@@ -55,8 +55,7 @@
                     <div class="nav-item dropdown">
                         <a class="nav-item nav-link dropdown-toggle user-action" id="userProfileDropDownCta"
                            data-bs-toggle="dropdown" aria-expanded="false">
-                            <img src="{{ user.get_avatar }}" class="avatar" loading="lazy"
-                                 alt="{{ user.username }} avtar"/>
+                            <img src="{{ user.get_avatar }}" class="avatar" loading="lazy"/>
                         </a>
 
                         <div class="dropdown custom-dropdown">

diff --git a/bloggy/templates/partials/home_article_breadcrumb.html b/bloggy/templates/partials/home_article_breadcrumb.html
@@ -3,13 +3,13 @@
         <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
             <ol class="breadcrumb m-0">
                 <li class="breadcrumb-item">
-                    <a href="{% url 'index' %}">Home</a>
+                    <a href="{% url 'index' %}" class=" font-sm fw-500">Home</a>
                 </li>
                 <li class="breadcrumb-item">
-                    <a href="{% url 'posts' %}">Articles</a>
+                    <a href="{% url 'posts' %}" class="font-sm fw-500">Articles</a>
                 </li>
                 <li class="breadcrumb-item active" aria-current="page">
-                    <span>{{ post.title }}</span>
+                    <span class=" text-muted font-sm fw-500">{{ post.title }}</span>
                 </li>
             </ol>
         </nav>

diff --git a/bloggy/templates/partials/social_share.html b/bloggy/templates/partials/social_share.html
@@ -1,4 +1,4 @@
-<div class="card share-appeal-widget p-4 my-5">
+<div class="share-appeal-widget p-4 my-5">
     {% load social_share %}
     {% spaceless %}
         <div class="d-grid gap-2 d-md-block d-print-none">

diff --git a/bloggy/templates/widgets/categories.html b/bloggy/templates/widgets/categories.html
@@ -5,8 +5,8 @@
             <ul class="p-0">
                 {% for category in categories %}
                     <li>
-                        <a href="{% url 'categories_single' slug=category.slug %}" class="text-decoration-none text-reset">{{ category.title }}
-                            <img src="{% if category.thumbnail %} {{ category.thumbnail.url }} {% endif %}"
+                        <a href="{% url 'categories_single' slug=category.slug %}" class="text-decoration-none text-reset">
+                            {{ category.title }} <img src="{% if category.thumbnail %} {{ category.thumbnail.url }} {% endif %}"
                                  height="32px" width="32px" alt="">
                         </a>
                     </li>