57 & 110 UI improvements

_includes/footer.html

@@ -1,36 +1,40 @@
-<footer class="site-footer h-card">
-  <data class="u-url" href="{{ '/' | relative_url }}"></data>
+<footer class="site-footer-container">
+  <div class="site-footer h-card">
+    <data class="u-url" href="{{ '/' | relative_url }}"></data>
 
-  <div class="footer-col-wrapper">
-    <div class="footer-col footer-col-1">
-      <div class="footer-logo">
-        LOGO
-        <!-- <img src="{{ '/assets/images/logo.png' | relative_url }}" alt="LOGO" class="footer-logo-img"> -->
-      </div>
-      <ul class="contact-list">
-        <li class="p-name">
-          {%- if site.author -%}
-          {{ site.author | escape }}
-          {%- else -%}
-          {{ site.title | escape }}
+    <div class="footer-col-wrapper">
+      <div class="footer-col footer-col-1">
+        <div class="footer-logo">
+          LOGO
+          <!-- <img src="{{ '/assets/images/logo.png' | relative_url }}" alt="LOGO" class="footer-logo-img"> -->
+        </div>
+        <ul class="contact-list">
+          <li class="p-name">
+            {%- if site.author -%}
+            {{ site.author | escape }}
+            {%- else -%}
+            {{ site.title | escape }}
+            {%- endif -%}
+          </li>
+          {%- if site.email -%}
+          <li><a class="u-email" href="mailto:{{ site.email }}">{{ site.email }}</a></li>
           {%- endif -%}
-        </li>
-        {%- if site.email -%}
-        <li><a class="u-email" href="mailto:{{ site.email }}">{{ site.email }}</a></li>
-        {%- endif -%}
-      </ul>
-    </div>
+        </ul>
+      </div>
 
-    {%- if social.html -%}
-    <div class="footer-col footer-col-2">
-      {%- include social.html -%}
-    </div>
-    {%- endif -%}
+      {%- if social.html -%}
+      <div class="footer-col footer-col-2">
+        {%- include social.html -%}
+      </div>
+      {%- endif -%}
 
-    <div class="separator"></div>
+      <div class="separator"></div>
 
-    <div class="footer-col footer-col-3">
-      <p>{{- site.description | escape -}}</p>
+      <div class="footer-col footer-col-3">
+        <p>{{- site.description | escape -}}</p>
+      </div>
     </div>
   </div>
+  <div class="side-panel-container">
+  </div>
 </footer>

_layouts/docs.html

@@ -47,15 +47,15 @@ <h1 class="post-title">
 
                             <div class="post-content">
                                 {{ content }}
+
+                                {%- include footer.html -%}
                             </div>
                         </article>
                     </div>
                 </div>
             </div>
         </div>
     </main>
-
-    {%- include footer.html -%}
 </body>
 
 </html>

_layouts/main.html

@@ -35,13 +35,13 @@
                 <article class="post">
                     <div class="post-content">
                         {{ content }}
+
+                        {%- include footer.html -%}
                     </div>
                 </article>
             </div>
         </div>
     </main>
-
-    {%- include footer.html -%}
 </body>
 
 </html>

assets/css/base.scss

@@ -147,6 +147,11 @@ a:visited {
     padding-left: 32px;
 }
 
+.wrapper .site-footer {
+    padding-left: 0;
+    padding-right: 0;
+}
+
 /* Scrollbar Styles */
 /* Webkit browsers (Chrome, Safari, Edge) */
 ::-webkit-scrollbar {

assets/css/content.css

@@ -4,7 +4,8 @@
 .docs-content {
     min-width: 0;
     max-width: 100%;
-    padding: 24px 28px;
+    /* eslint-disable-next-line css/no-invalid-properties */
+    padding: var(--sidebar-padding-v) 28px;
     padding-right: 0;
 
     color: #5F5F5F;

assets/css/datatable-overrides.scss

@@ -2,6 +2,16 @@
 ---
 /* eslint-disable css/no-important */
 
+.table-container {
+    table.dataTable {
+        margin: -1px;
+    }
+}
+
+table.dataTable {
+    border-collapse: collapse !important;
+}
+
 /* Table Sorting */
 table.dataTable#deployments-table thead>tr>th,
 table.dataTable#deployments-table thead>tr>td {
@@ -25,7 +35,6 @@ table.dataTable#deployments-table thead>tr>td.sorting_desc_disabled {
         color: #A1A1A1;
 
         font-family: 'Material Symbols Rounded';
-        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
         font-size: 14px;
         line-height: 1;
         vertical-align: middle;
@@ -35,19 +44,25 @@ table.dataTable#deployments-table thead>tr>td.sorting_desc_disabled {
         opacity: 1;
     }
 
+    --y-bound: calc(50% - 4px);
     &::before {
-        bottom: 43%;
+        bottom: var(--y-bound);
         right: 14px;
         content: 'arrow_upward_alt';
     }
 
     &::after {
-        top: 43%;
+        top: var(--y-bound);
         right: 10px;
         content: 'arrow_downward_alt';
     }
 }
 
+table.dataTable#deployments-table>thead>tr>th,
+table.dataTable#deployments-table>thead>tr>td {
+    border-bottom: 1px solid #E7E7E7;
+}
+
 table.dataTable#deployments-table thead>tr>th.sorting_asc:before,
 table.dataTable#deployments-table thead>tr>th.sorting_desc:after,
 table.dataTable#deployments-table thead>tr>td.sorting_asc:before,
@@ -66,6 +81,7 @@ table.dataTable.row-border>tbody>tr>td,
 table.dataTable.display>tbody>tr>th,
 table.dataTable.display>tbody>tr>td {
     border-top: 1px solid #E7E7E7;
+    vertical-align: top;
 }
 
 table.dataTable.stripe>tbody>tr.odd>*,

assets/css/footer.css

@@ -1,8 +1,13 @@
 /* Footer Component Styles */
 
+.site-footer-container {
+  display: flex;
+}
+
 .site-footer {
   border: none;
-  padding: 56px 120px;
+  /* eslint-disable-next-line css/no-invalid-properties */
+  padding: 56px var(--page-h-padding) 0;
 }
 
 .footer-heading {
@@ -107,10 +112,10 @@
 }
 
 /* Responsive Design */
-@media (max-width: 768px) {
-  .site-footer {
-    padding: 1rem 20px 80px 20px;
-    margin-top: 2rem;
+@media (max-width: 1024px) {
+
+  .site-footer-container {
+    flex-direction: column;
   }
 
   .footer-col-wrapper {
@@ -121,6 +126,15 @@
   .footer-col-wrapper .separator {
     display: block;
   }
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+
+  .site-footer {
+    padding-top: 1rem;
+    margin-top: 2rem;
+  }
 
   .footer-col-wrapper a {
     text-decoration: none;

assets/css/forms.css

@@ -5,46 +5,44 @@
     width: 100%;
     margin-top: 1rem;
     justify-content: space-between;
-    align-items: center;
+    align-items: start;
     gap: 12px;
     color: #181818;
+}
+
+.filters-container .title {
     font-size: 16px;
     font-weight: 500;
     line-height: 24px;
 }
 
+.filters-container .sub-title {
+    font-size: 14px;
+    font-style: normal;
+    line-height: 20px;
+    /* 142.857% */
+}
+
 .filters-container button {
     height: 34px;
 }
 
 .filter-row {
-    width: 100%;
-    max-width: 750px;
     display: flex;
-    flex-wrap: wrap;
-}
-
-.filter-group {
-    flex-grow: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: end;
-    position: relative;
 }
 
-.filter-group label {
+.filter-row label {
     display: block;
     margin-bottom: 4px;
 }
 
-.filter-group input,
-.filter-group input:active,
-.filter-group select {
+.filter-row input,
+.filter-row input:active {
     padding: 0px 12px;
     background: white;
     border: 1px solid #DADADA;
     border-radius: 8px;
     outline: none;
     color: #5F5F5F;
     height: 32px;
     transition: all 0.2s ease;
@@ -82,45 +80,43 @@
     background-color: transparent;
 }
 
+.filter-actions {
+    flex-shrink: 0;
+}
+
 #clear-filters {
+    flex-shrink: 0;
     display: none;
     margin-left: 8px;
 }
 
 /* Forms Responsive Design */
-@media (max-width: 1068px) {
+@media (max-width: 1024px) {
+
+    /* Filter Container */
     .filters-container {
         flex-direction: column;
+        align-items: start;
         gap: 12px;
     }
 
-    .filter-group {
-        max-width: unset;
-    }
-}
-
-/* Forms Responsive Design */
-@media (max-width: 768px) {
     .filter-row {
-        flex-direction: column;
-    }
+        width: 100%;
 
-    .filter-group {
-        min-width: 100%;
-        max-width: unset;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: end;
     }
 
-    /* Filter Container */
-    .filters-container {
-        flex-direction: column;
-        gap: 12px;
+    .search-container,
+    #search-filter {
+        flex-grow: 1;
     }
+}
 
+@media (max-width: 480px) {
     .filter-row {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: end;
-        width: 100%;
+        flex-direction: column;
     }
 
     .search-container,

assets/css/layout.css

@@ -1,4 +1,7 @@
 /* Layout Styles - Main page structure, documentation layout, and page containers */
+:root {
+    --page-h-padding: 2rem;
+}
 
 /* Page Content Layout */
 .page {
@@ -41,7 +44,7 @@
     display: flex;
     flex-direction: row;
     gap: 0;
-    padding: 0 2rem;
+    padding: 0 var(--page-h-padding);
     box-sizing: border-box;
     max-width: 100%;
     width: 100%;
@@ -140,12 +143,18 @@
 
 /* Layout Responsive Design */
 @media (min-width: 768px) {
+
+    .docs-layout .header,
     .docs-layout .header .site-title {
         display: none;
     }
 }
 
 @media (max-width: 768px) {
+    :root {
+        --page-h-padding: 0;
+    }
+
     .docs-page {
         overflow-x: hidden;
         overflow-y: auto;
@@ -168,7 +177,6 @@
 
     .home-page {
         flex-direction: column;
-        padding: 0;
     }
 
     .home-page .main-content {