chore: scroll containers and styling

10 months ago · 90341a5cfa
parent 8d16c94ae8
commit 90341a5cfa
2 changed files with 67 additions and 52 deletions
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@ -22,8 +22,10 @@ const { title } = Astro.props
    </head>
    <body>
        <Sidebar />
+        <div class="scroll-container">
            <main>
                <slot />
            </main>
+        </div>
    </body>
 </html>
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@ -1,6 +1,9 @@
 $accent-400: #f8f5ff;
 $accent-500: #d8ccfa;

+$job-running-400: #dfd;
+$job-running-500: #bfb;
+
 *,
 *::before,
 *::after {
@ -403,8 +406,13 @@ body {
        }
    }

-    main {
+    & > .scroll-container {
        grid-area: main;
+        display: grid;
+        justify-items: center;
+        overflow-y: auto;
+
+        main {
            padding: 2rem;

            display: flex;
@ -446,10 +454,6 @@ body {

                cursor: pointer;

-            &.running {
-                background: #dfd;
-            }
-
                & > .name {
                    grid-column: span 3;

@ -474,6 +478,15 @@ body {
                &:hover {
                    background: $accent-500;
                }
+
+                &.running {
+                    background: $job-running-400;
+
+                    &:hover {
+                        background: $job-running-500;
+                    }
+                }
+            }
        }
    }
 }