Misc improvements

StackTipsLab · Jan 3, 2024 · 4b361ba · 4b361ba
1 parent bd5f0a7
commit 4b361ba
Show file tree

Hide file tree

Showing 11 changed files with 40 additions and 39 deletions.
diff --git a/bloggy/templates/pages/single/course.html b/bloggy/templates/pages/single/course.html
@@ -64,7 +64,6 @@ <h1 class="post-title display-2 fw-600 mt-0 mb-2">{{ course.title }}</h1>
 
                                 <div class="container overflow-hidden">
                                     <div class="row grid">
-
                                         <div class="timeline-container mt-4">
                                             <div class="wrapper">
                                                 <ul class="sessions ">

diff --git a/bloggy/templates/partials/category_archive_banner.html b/bloggy/templates/partials/category_archive_banner.html
@@ -1,20 +1,20 @@
 {% load static %}
 {% spaceless %}
-{% if category %}
-    <div class="my-4 p-4 category-archive-banner" style="border-color:{{ category.color }};">
-        <div class="d-lg-flex">
-            <div class="flex-shrink-0">
-                {% if category.thumbnail %}
-                    <div class="category-thumbnail">
-                        <img src="{{ category.thumbnail.url }}" alt="{{ category.title }}" />
-                    </div>
-                {% endif %}
-            </div>
-            <div class="flex-grow-1 ms-lg-3">
-                <h1 class="display-5 fw-bold">{{ category.title }}</h1>
-                {% if category.excerpt %}<p class="mb-1">{{ category.excerpt }}</p>{% endif %}
+    {% if category %}
+        <div class="my-lg-5 my-3 p-lg-4 p-3 category-archive-banner" style="border-color:{{ category.color }};">
+            <div class="d-lg-flex">
+                <div class="flex-shrink-0  me-lg-4">
+                    {% if category.thumbnail %}
+                        <div class="category-thumbnail">
+                            <img src="{{ category.thumbnail.url }}" alt="{{ category.title }}"/>
+                        </div>
+                    {% endif %}
+                </div>
+                <div class="flex-grow-1">
+                    <h1 class="display-4 fw-600">{{ category.title }}</h1>
+                    <div>{% if category.excerpt %}<p class="mb-1">{{ category.excerpt }}</p>{% endif %}</div>
+                </div>
             </div>
         </div>
-    </div>
-{% endif %}
+    {% endif %}
 {% endspaceless %}
diff --git a/bloggy/templates/partials/social_share.html b/bloggy/templates/partials/social_share.html
@@ -3,7 +3,7 @@
     {% spaceless %}
         <div class="d-grid gap-2 d-md-block d-print-none">
             <p class="h3">Did you like this article?</p>
-            <p>Please consider sharing this on your social media accounts.</p>
+            <p class="mb-2 font-sm">Please consider sharing this on your social media accounts.</p>
             {% post_to_facebook object "Facebook" %}
             {% post_to_twitter "{{ object.title }}" object "Share on X" %}
             {% send_email object.title "{{ object.title }}. Check it out!" object_or_url "Email link" %}

diff --git a/bloggy_frontend/sass/_customVariables.scss b/bloggy_frontend/sass/_customVariables.scss
@@ -56,7 +56,8 @@ $border-color: #e8ebed;
 
 $input-border-color: #333333;
 $card-border-color: rgb(233, 236, 239);
-$card-border-radius: 8px;
+//$card-border-radius: 8px;
+$card-border-radius: 0;
 
 $border-width: 1px !default;
 $border-widths: (

diff --git a/bloggy_frontend/sass/content/_social.scss b/bloggy_frontend/sass/content/_social.scss
@@ -4,7 +4,7 @@
     display: flex;
     background: $gray-300;
     padding: 0.25rem;
-    border-radius: 0.25rem;
+    border-radius: 0;
     box-sizing: border-box;
     box-shadow: 5px 15px 15px rgb(89 152 152 / 5%);
     transition: all 0.2s ease-in-out !important;
@@ -53,6 +53,8 @@
   border: none;
   transition: all 0.2s ease-in-out !important;
   padding: 6px 12px !important;
+  line-height: 1rem;
+  border-radius: 0;
 
   button, a {
     color: unset;
@@ -62,6 +64,7 @@
     background: none;
     outline: none;
     border: 0;
+    border-radius: 0;
   }
 
   i, svg {

diff --git a/bloggy_frontend/sass/content/_table.scss b/bloggy_frontend/sass/content/_table.scss
@@ -14,7 +14,7 @@ table {
 
   th,
   td {
-    padding: 4px 8px !important;
+    padding: 6px 8px !important;
   }
 
   th {

diff --git a/bloggy_frontend/sass/content/_toc.scss b/bloggy_frontend/sass/content/_toc.scss
@@ -2,7 +2,7 @@
   margin-bottom: 2rem;
   border-radius: $card-border-radius;
   border: 1px solid rgba(25, 25, 28, 0.2) !important;
-  box-shadow: rgba(99, 99, 99, 0.1) 0 2px 8px 0;
+  //box-shadow: rgba(99, 99, 99, 0.1) 0 2px 8px 0;
   overflow: hidden;
 
   .collapsible {

diff --git a/bloggy_frontend/sass/content/_widget.scss b/bloggy_frontend/sass/content/_widget.scss
@@ -6,9 +6,9 @@
 
 .share-appeal-widget {
   border: 1px solid #e1e1e1;
-  //background: var(--feed-card-bg);
+  background: var(--feed-card-bg);
   box-shadow: 5px 15px 15px rgb(89 152 152 / 5%);
   border: 1px solid rgba(25, 25, 28, 0.2) !important;
-  border-radius: 8px !important;
+  border-radius: $card-border-radius !important;
   box-shadow: 2px 2px 0 -1px #fff, 2px 2px 0 0 rgba(25, 25, 28, 0.2) !important;
 }
diff --git a/bloggy_frontend/sass/content/post.scss b/bloggy_frontend/sass/content/post.scss
@@ -44,7 +44,6 @@ article {
 
   li, p {
     margin-top: 0;
-    //margin-top: 1.1em;
     margin-bottom: 1.1em;
     font-size: 1.05rem;
     line-height: 1.66666678;
@@ -62,21 +61,21 @@ article {
   h1 {
     font-size: $h1-font-size * 1.3;
     line-height: 1.1111111;
-    margin-bottom: 1em;
+    margin-bottom: .7555em;
   }
 
   h2 {
-    font-size: $h2-font-size * 1.3;
+    font-size: $h2-font-size * 1.2;
     margin-top: 1.11111em;
     margin-bottom: .7555em;
     line-height: 1.3333333;
   }
 
   h3 {
     font-size: $h3-font-size * 1.35;
-    margin-top: 1.2222222em;
-    margin-bottom: 1.0666667em;
-    line-height: 1.3333333
+    margin-top: 1.11111em;
+    margin-bottom: .555em;
+    line-height: 1
   }
 
   h4 {
@@ -87,10 +86,8 @@ article {
 
   h5, h6 {
     font-size: $h5-font-size * 1.3;
-    letter-spacing: 1.5px;
-    margin: 2rem 0 1rem;
-    text-transform: uppercase;
-    font-weight: 500;
+    margin-top: 1.11111em;
+    margin-bottom: .555em;
   }
 
 }
@@ -288,7 +285,7 @@ article {
   background: var(--bs-card-bg);
   overflow: hidden;
   border-radius: $card-border-radius !important;
-  box-shadow: rgba(99, 99, 99, 0.1) 0 2px 8px 0;
+  //box-shadow: rgba(99, 99, 99, 0.1) 0 2px 8px 0;
 }
 
 .article-card {
@@ -351,9 +348,9 @@ article {
 }
 
 .category-archive-banner {
-  border-left: 3px solid $primary;
-  border-radius: $card-border-radius;
-  background: var(--bs-body-bg);
+  border: 1px solid $primary;
+  background: var(--feed-card-bg);
+  box-shadow: rgba(99, 99, 99, 0.1) 0 2px 8px 0;
 
   .category-thumbnail {
     width: 80px;

diff --git a/bloggy_frontend/sass/vendor/_card.scss b/bloggy_frontend/sass/vendor/_card.scss
@@ -7,7 +7,7 @@
   border-radius: $card-border-radius;
   box-sizing: border-box;
   transition: all 0.2s ease-in-out !important;
-  box-shadow: rgba(99, 99, 99, 0.1) 0 2px 8px 0;
+  //box-shadow: rgba(99, 99, 99, 0.1) 0 2px 8px 0;
 }
 
 .card-rounded {

diff --git a/bloggy_frontend/sass/vendor/_timeline.scss b/bloggy_frontend/sass/vendor/_timeline.scss
@@ -1,9 +1,10 @@
 .timeline-container {
-
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: $card-border-radius;
+  margin-left: 0;
+  padding-left: 0;
   //background: rgb(226, 244, 255);
   //background: linear-gradient(197deg, rgb(226, 244, 255) 0%, rgb(237, 248, 255) 25%, rgb(230, 246, 255) 87%, rgb(223, 243, 255) 100%);
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,7 +14,7 @@ table { @@
       th,
       td {
-        padding: 4px 8px !important;
+        padding: 6px 8px !important;
       }
       th {
@@ Expand Down @@