Updated demo pages

src/assets/layout/_content.scss

@@ -1,12 +0,0 @@
-.layout-main-container {
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
-    justify-content: space-between;
-    padding: 6rem 2rem 2rem 4rem;
-    transition: margin-left var(--layout-section-transition-duration);
-}
-
-.layout-main {
-    flex: 1 1 auto;
-}

src/assets/layout/_core.scss

@@ -0,0 +1,23 @@
+html {
+    height: 100%;
+    font-size: 14px;
+}
+
+body {
+    font-family: 'CircularStd', sans-serif;
+    color: var(--text-color);
+    background-color: var(--surface-ground);
+    margin: 0;
+    padding: 0;
+    min-height: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+    text-decoration: none;
+}
+
+.layout-wrapper {
+    min-height: 100vh;
+}

src/assets/layout/_footer.scss

@@ -1,8 +1,8 @@
 .layout-footer {
-    transition: margin-left var(--layout-section-transition-duration);
     display: flex;
     align-items: center;
     justify-content: center;
-    padding-top: 1rem;
+    padding: 1rem 0 1rem 0;
+    gap: 0.5rem;
     border-top: 1px solid var(--surface-border);
 }

src/assets/layout/_main.scss

@@ -1,23 +1,13 @@
-html {
-    height: 100%;
-    font-size: 14px;
-}
-
-body {
-    font-family: 'CircularStd', sans-serif;
-    color: var(--text-color);
-    background-color: var(--surface-ground);
-    margin: 0;
-    padding: 0;
-    min-height: 100%;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-    text-decoration: none;
-}
-
-.layout-wrapper {
+.layout-main-container {
+    display: flex;
+    flex-direction: column;
     min-height: 100vh;
+    justify-content: space-between;
+    padding: 6rem 2rem 0 2rem;
+    transition: margin-left var(--layout-section-transition-duration);
+}
+
+.layout-main {
+    flex: 1 1 auto;
+    padding-bottom: 2rem;
 }

src/assets/layout/_menu.scss

@@ -1,7 +1,7 @@
 .layout-sidebar {
     position: fixed;
-    width: 300px;
-    height: calc(100vh - 9rem);
+    width: 20rem;
+    height: calc(100vh - 8rem);
     z-index: 999;
     overflow-y: auto;
     user-select: none;

src/assets/layout/_responsive.scss

@@ -37,7 +37,7 @@
 
         &.layout-static {
             .layout-main-container {
-                margin-left: 300px;
+                margin-left: 22rem;
             }
 
             &.layout-static-inactive {

src/assets/layout/_topbar.scss

@@ -12,7 +12,7 @@
     align-items: center;
 
     .layout-topbar-logo-container {
-        width: 300px;
+        width: 20rem;
         display: flex;
         align-items: center;
     }
@@ -130,6 +130,7 @@
             right: 2rem;
             top: 4rem;
             min-width: 15rem;
+            border: 1px solid var(--surface-border);
 
             .layout-topbar-menu-content {
                 gap: 0.5rem;
@@ -162,25 +163,6 @@
 }
 
 .config-panel {
-    position: absolute;
-    top: 3.25rem;
-    right: 0;
-    width: 16rem;
-    padding: 0.75rem;
-    background-color: var(--surface-overlay);
-    border-radius: 6px;
-    border: 1px solid var(--surface-border);
-    transform-origin: top;
-    box-shadow:
-        0 4px 6px -1px rgb(0 0 0 / 0.1),
-        0 2px 4px -2px rgb(0 0 0 / 0.1);
-
-    .config-panel-content {
-        display: flex;
-        flex-direction: column;
-        gap: 1rem;
-    }
-
     .config-panel-label {
         font-size: 0.875rem;
         color: var(--text-secondary-color);

src/assets/layout/layout.scss

@@ -3,10 +3,10 @@
 @import './variables/_dark';
 @import './_mixins';
 @import './_preloading';
+@import './_core';
 @import './_main';
 @import './_topbar';
 @import './_menu';
-@import './_content';
 @import './_footer';
 @import './_responsive';
 @import './_utils';