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>
<body>
<Sidebar />
<main>
<slot />
</main>
<div class="scroll-container">
<main>
<slot />
</main>
</div>
</body>
</html>
src/styles/main.scss
+69 -56
View File
@@ -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;
justify-self: center;
width: 100%;
max-width: 80ch;
//
// Components
//
.list {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2rem;
justify-self: center;
width: 100%;
gap: 1rem;
}
max-width: 80ch;
.job {
padding: 1rem;
border-radius: 1rem;
//
// Components
//
width: 100%;
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 {
.list {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
width: 100%;
gap: 1rem;
}
& .submitted-at {
font-size: 15px;
}
.job {
padding: 1rem;
border-radius: 1rem;
& .delta {
font-size: 15px;
}
width: 100%;
&:hover {
background: $accent-500;
background: $accent-400;
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;
}
}
}
}
}