chore: set max-width for large screens and fix margins

fixes: #624
Signed-off-by: Siddarth Kumar <[email protected]>

Author: siddarthkay

assets/scss/_footer_project.scss

@@ -11,6 +11,13 @@
   margin: -12px;
   font-family: $font-qanelas;
 
+  @media (min-width: $site-max-width) {
+    > * {
+      max-width: $site-max-width;
+      width: 100%;
+    }
+  }
+
   .d-header {
     height: 6rem;
     background-color: $white;

assets/scss/_styles_project.scss

@@ -784,6 +784,25 @@ html {
   scroll-behavior: smooth;
 }
 
+// Max-width constraint for large screens to prevent layout stretch
+@media (min-width: $site-max-width) {
+  .td-navbar {
+    > .container-fluid {
+      max-width: $site-max-width;
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
+
+  .container-fluid.td-outer {
+    > .td-main {
+      max-width: $site-max-width;
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
+}
+
 h1, h2, h3, h4, h5, h6 {
   scroll-margin-top: 1rem;
 }

assets/scss/_variables_project.scss

@@ -114,6 +114,10 @@ $pagination-disabled-color: $gray-300 !default;
 $navbar-dark-color: rgba($white, 0.75) !default;
 $navbar-dark-hover-color: rgba($white, 0.35) !default;
 
+// Layout
+
+$site-max-width: 1920px;
+
 // Footer
 
 $list-inline-padding: $spacer;