phc
/
phcd
6
1
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

chore: scroll containers and styling

Browse Source
main
Antonio De Lucreziis 10 months ago
parent 8d16c94ae8
commit 90341a5cfa
2 changed files with 67 additions and 52 deletions
Show Stats Download Patch File Download Diff File

8
src/layouts/Layout.astro
Unescape Escape View File

@ -22,8 +22,10 @@ const { title } = Astro.props
</head> </head>
<body> <body>
<Sidebar /> <Sidebar />
<main> <div class="scroll-container">
<slot /> <main>
</main> <slot />
</main>
</div>
</body> </body>
</html> </html>

111
src/styles/main.scss
Unescape Escape View File

@ -1,6 +1,9 @@
$accent-400: #f8f5ff; $accent-400: #f8f5ff;
$accent-500: #d8ccfa; $accent-500: #d8ccfa;
$job-running-400: #dfd;
$job-running-500: #bfb;
*, *,
*::before, *::before,
*::after { *::after {
@ -403,76 +406,86 @@ body {
} }
} }
main { & > .scroll-container {
grid-area: main; grid-area: main;
padding: 2rem; display: grid;
justify-items: center;
overflow-y: auto;
display: flex; main {
flex-direction: column; padding: 2rem;
align-items: flex-start;
gap: 2rem; display: flex;
flex-direction: column;
align-items: flex-start;
justify-self: center; gap: 2rem;
width: 100%; justify-self: center;
max-width: 80ch;
// width: 100%;
// Components max-width: 80ch;
//
.list { //
display: flex; // Components
flex-direction: column; //
width: 100%; .list {
gap: 1rem; display: flex;
} flex-direction: column;
.job { width: 100%;
padding: 1rem; gap: 1rem;
border-radius: 1rem; }
width: 100%; .job {
padding: 1rem;
border-radius: 1rem;
background: $accent-400; width: 100%;
display: grid; background: $accent-400;
grid-template-columns: 1fr;
grid-row: auto auto;
gap: 0.5rem; display: grid;
grid-template-columns: 1fr;
grid-row: auto auto;
cursor: pointer; gap: 0.5rem;
&.running { cursor: pointer;
background: #dfd;
}
& > .name { & > .name {
grid-column: span 3; grid-column: span 3;
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
} }
& > .footer { & > .footer {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
& .submitted-at { & .submitted-at {
font-size: 15px; font-size: 15px;
} }
& .delta { & .delta {
font-size: 15px; font-size: 15px;
} }
&:hover {
background: $accent-500;
}
&:hover { &.running {
background: $accent-500; background: $job-running-400;
&:hover {
background: $job-running-500;
}
}
} }
} }
} }

Write Preview
Loading…
Cancel
Save