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;
                    }
                }
            }
        }
    }
 }