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 />
-        <main>
-            <slot />
-        </main>
+        <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,76 +406,86 @@ body {
        }
    }

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

-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
+        main {
+            padding: 2rem;

-        gap: 2rem;
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;

-        justify-self: center;
+            gap: 2rem;

-        width: 100%;
-        max-width: 80ch;
+            justify-self: center;

-        //
-        // Components
-        //
+            width: 100%;
+            max-width: 80ch;

-        .list {
-            display: flex;
-            flex-direction: column;
+            //
+            // Components
+            //

-            width: 100%;
-            gap: 1rem;
-        }
+            .list {
+                display: flex;
+                flex-direction: column;

-        .job {
-            padding: 1rem;
-            border-radius: 1rem;
+                width: 100%;
+                gap: 1rem;
+            }

-            width: 100%;
+            .job {
+                padding: 1rem;
+                border-radius: 1rem;

-            background: $accent-400;
+                width: 100%;

-            display: grid;
-            grid-template-columns: 1fr;
-            grid-row: auto auto;
+                background: $accent-400;

-            gap: 0.5rem;
+                display: grid;
+                grid-template-columns: 1fr;
+                grid-row: auto auto;

-            cursor: pointer;
+                gap: 0.5rem;

-            &.running {
-                background: #dfd;
-            }
+                cursor: pointer;

-            & > .name {
-                grid-column: span 3;
+                & > .name {
+                    grid-column: span 3;

-                font-size: 18px;
-                font-weight: 600;
-            }
+                    font-size: 18px;
+                    font-weight: 600;
+                }

-            & > .footer {
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-            }
+                & > .footer {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                }

-            & .submitted-at {
-                font-size: 15px;
-            }
+                & .submitted-at {
+                    font-size: 15px;
+                }

-            & .delta {
-                font-size: 15px;
-            }
+                & .delta {
+                    font-size: 15px;
+                }
+
+                &:hover {
+                    background: $accent-500;
+                }

-            &:hover {
-                background: $accent-500;
+                &.running {
+                    background: $job-running-400;
+
+                    &:hover {
+                        background: $job-running-500;
+                    }
+                }
            }
        }
    }