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

chore: scroll containers and styling

Browse Source
This commit is contained in:
aziis98
2024-03-11 12:26:29 +01:00
parent 8d16c94ae8
commit 90341a5cfa
2 changed files with 74 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layouts/Layout.astro
+5 -3
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>
src/styles/main.scss
+69 -56
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;
justify-self: center;
width: 100%;
max-width: 80ch;
//
// Components
//
.list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start;
gap: 2rem;
justify-self: center;
width: 100%; width: 100%;
gap: 1rem; max-width: 80ch;
}
.job { //
padding: 1rem; // Components
border-radius: 1rem; //
width: 100%; .list {
background: $accent-400;
display: grid;
grid-template-columns: 1fr;
grid-row: auto auto;
gap: 0.5rem;
cursor: pointer;
&.running {
background: #dfd;
}
& > .name {
grid-column: span 3;
font-size: 18px;
font-weight: 600;
}
& > .footer {
display: flex; display: flex;
justify-content: space-between; flex-direction: column;
align-items: center;
width: 100%;
gap: 1rem;
} }
& .submitted-at { .job {
font-size: 15px; padding: 1rem;
} border-radius: 1rem;
& .delta { width: 100%;
font-size: 15px;
}
&:hover { background: $accent-400;
background: $accent-500;
display: grid;
grid-template-columns: 1fr;
grid-row: auto auto;
gap: 0.5rem;
cursor: pointer;
& > .name {
grid-column: span 3;
font-size: 18px;
font-weight: 600;
}
& > .footer {
display: flex;
justify-content: space-between;
align-items: center;
}
& .submitted-at {
font-size: 15px;
}
& .delta {
font-size: 15px;
}
&:hover {
background: $accent-500;
}
&.running {
background: $job-running-400;
&:hover {
background: $job-running-500;
}
}
} }
} }
} }