diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 6b2bd53..4884010 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -22,8 +22,10 @@ const { title } = Astro.props -
- -
+
+
+ +
+
diff --git a/src/styles/main.scss b/src/styles/main.scss index 6b83b1d..4e03b18 100644 --- 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; + } + } } } }