improve website

Author: cortex-lp

assets/js/offline-search.js

@@ -61,12 +61,14 @@
                         let docToAdd;
                         if (searchPath !== undefined && doc.ref.startsWith(searchPath)) {
                             docToAdd = doc;
-                            
                         } else if (searchPath === undefined) {
                             docToAdd = doc;
                         }
 
-                        if (docToAdd) {
+                        if (docToAdd
+                            && docToAdd.ref !== undefined
+                            && !docToAdd.ref.includes('/_shared/')
+                        ) {
                             this.add(doc);
 
                             resultDetails.set(doc.ref, {
@@ -150,11 +152,10 @@
             );
 
             const $searchResultBody = $('<div>').css({
-                maxHeight: `calc(100vh - ${
-                    $targetSearchInput.offset().top -
+                maxHeight: `calc(100vh - ${$targetSearchInput.offset().top -
                     $(window).scrollTop() +
                     180
-                }px)`,
+                    }px)`,
                 overflowY: 'auto',
             });
             $html.append($searchResultBody);

assets/scss/_content.scss

@@ -3,9 +3,19 @@
 //
 
 .td-content {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    grid-row-gap: 8px;
+    row-gap: 8px;
     order: 1;
 
-    p, li, td {
+    .reading-time {
+        margin: 5px 0px;
+    }
+
+    p,
+    li,
+    td {
         font-weight: $font-weight-body-text;
     }
 
@@ -16,29 +26,50 @@
     }
 
     p {
-        margin-bottom: 0.2rem;
+        margin-top: 0px;
+        margin-bottom: 0px;
     }
 
-    > h1 {
+    >h1 {
         font-weight: $font-weight-bold;
-        margin-bottom: 1rem;
     }
 
-    > h2 {
-        margin-bottom: 1rem;
+    >h2 {
+        margin-top: 10px;
+        margin-bottom: 10px;
+        padding-bottom: 8px;
+        border-bottom: 1px solid rgba(50, 50, 50, 0.1);
+    }
+
+    >h2:not(:first-of-type) {
+        margin-top: 24px;
+    }
+
+    >h2+h3 {
+        margin-top: 10px;
     }
 
-    > h2:not(:first-child) {
-        margin-top: 3rem;
+    >h3 {
+        margin-top: 24px;
+        margin-bottom: 8px;
     }
 
-    > h2 + h3 {
-         margin-top: 1rem;
+    h3+h4 {
+        margin-top: 10px;
     }
 
-    > h3, > h4, > h5, > h6 {
-        margin-bottom: 1rem;
-        margin-top: 2rem;
+    >h4  {
+        margin-top: 14px;
+        margin-bottom: 4px;
+    }
+
+    h4+h5, h5+h6 {
+        margin-top: 5px;
+    }
+
+    >h5, >h6 {
+        margin-top: 10px;
+        margin-bottom: 4px;
     }
 
     img {
@@ -53,38 +84,54 @@
         max-width: 90%;
     }
 
-    > table {
+    >table {
         @extend .table-striped;
 
         @extend .table-responsive;
 
         @extend .table;
     }
 
-    > blockquote {
+    >blockquote {
         padding: 0 0 0 1rem;
         margin-bottom: $spacer;
         color: $gray-600;
         border-left: 6px solid $secondary;
     }
 
-    > ul li, > ol li {
+    >ul {
+        margin-bottom: 0px;
+    }
+
+    >ul li,
+    >ol li {
         margin-bottom: .25rem;
 
-        > table {
+        >table {
             @extend .table-striped;
-    
+
             @extend .table-responsive;
-    
+
             @extend .table;
-        }    
+        }
     }
 
     strong {
         font-weight: $font-weight-bold;
     }
 
-    > pre, > .highlight, > .lead, > h1, > h2, > ul, > ol, > p, > blockquote, > dl dd, .footnotes, > .alert {
+    >pre,
+    >.highlight,
+    >.lead,
+    >h1,
+    >h2,
+    >ul,
+    >ol,
+    >p,
+    >blockquote,
+    >dl dd,
+    .footnotes,
+    >.alert {
         @extend .td-max-width-on-larger-screens;
     }
 
@@ -93,8 +140,10 @@
         margin-bottom: 1 * $spacer;
     }
 
-    .lead {
-        margin-bottom: 1.5rem;
+    .lead, .td-byline {
+        width: 100%;
+        max-width: 100%;
+        margin: 5px 0px !important;
     }
 
     span {
@@ -103,23 +152,25 @@
             color: black;
             padding: 0.18rem 0.45rem 0.18rem 0.45rem
         }
+
         &.threshold-warning {
-            background-color:  #FF9830;
+            background-color: #FF9830;
             color: black;
-            padding:  0.18rem 0.45rem 0.18rem 0.45rem
+            padding: 0.18rem 0.45rem 0.18rem 0.45rem
         }
+
         &.threshold-critical {
             background-color: #F2495C;
             color: black;
-            padding:  0.18rem 0.45rem 0.18rem 0.45rem
+            padding: 0.18rem 0.45rem 0.18rem 0.45rem
         }
     }
 
-    > .footnotes {
+    >.footnotes {
         font-style: italic;
     }
 
-    > .youtube-video {
+    >.youtube-video {
         max-width: 640px;
         width: 100%;
         animation: fadeIn 2s;
@@ -130,6 +181,12 @@
             border-radius: 5px;
         }
     }
+
+    br {
+        content: " ";
+        display: block;
+        margin-bottom: 5px;
+    }
 }
 
 .td-title {
@@ -142,6 +199,11 @@
 }
 
 @keyframes fadeIn {
-    0% { opacity: 0; }
-    100% { opacity: 1; }
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
 }

assets/scss/_sidebar-tree.scss

@@ -114,9 +114,9 @@
         @include media-breakpoint-up(md) {
             @supports (position: sticky) {
                 position: sticky;
-                top: 4rem;
+                top: 5.5rem;
                 z-index: 10;
-                height: calc(100vh - 6rem);
+                height: calc(100vh - 5.5rem);
             }
         }
 

assets/scss/_variables_project.scss

@@ -33,8 +33,13 @@ body {
   text-align: left;
   background-color: $white;
 
+  h1:first-of-type {
+    font-weight: 700 !important;
+  }
+
   h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
     color: $ctx-blue;
+    font-weight: 600 !important;
   }
 
   .slogan {
@@ -155,31 +160,28 @@ body {
 
   h2 {
     font-size: $h2-font-size !important;
-    font-weight: 600 !important;
-    margin: 2rem 0rem 0.5rem 0rem !important;
     max-width: 100% !important;
 
   }
 
   h3 {
     font-size: $h3-font-size !important;
-    font-weight: 600 !important;
-    margin: 1rem 0rem 0rem 0rem !important;
-    padding-bottom: 0.5rem;
+    opacity: .95;
   }
 
   h4 {
     font-size: $h4-font-size !important;
-    font-weight: 400 !important;
-    margin: 1rem 0rem 0.5rem 0rem !important;
+    opacity: .90;
   }
 
   h5 {
     font-size: $h5-font-size !important;
+    opacity: .85;
   }
 
   h6 {
     font-size: $h6-font-size !important;
+    opacity: .80;
   }
 
   p.namespace {

assets/scss/main.scss

@@ -33,24 +33,25 @@
 
 // Adjust anchors vs the fixed menu.
 @include media-breakpoint-up(md) {
-    .td-offset-anchor:target {
-        display: block;
-        position: relative;
-        top: -4rem;
-        visibility: hidden;
-    }
 
-    h1[id]:before,
-    h2[id]:before,
-    h3[id]:before,
-    h4[id]:before,
-    h5[id]:before {
+    h1[id]:target,
+    h2[id]:target,
+    h3[id]:target,
+    h4[id]:target,
+    h5[id]:target {
         content: " ";
-        margin-top: -6rem; 
-        height: 6rem;
-        visibility: hidden;
+        margin-top: -100px;
+        padding-top: 100px;
     }
 }
 
+
+.td-cover-block {
+    background-attachment: fixed;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
 @import "rtl/main";
 @import "styles_project";