eforis/DataDash
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Finish details page design

Browse Source
This commit is contained in:
Elias Schriefer
2024-07-03 00:20:36 +02:00
parent 79b851a4a7
commit 8810bfa53f
5 changed files with 318 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/main/resources/static/main.css
View File

@@ -2,7 +2,12 @@
--bg-color: #222;
--fg-color: #555;
--text-color: #dbdbdb;
--pad-datasets: 1rem;
--accent-color: oklch(65.33% 0.158 247.76);
--pad-datasets-block: 1rem;
--pad-datasets-inline: 2rem;
--gap-large: 1.5rem;
--gap-medium: 1rem;
--gap-small: .5rem;
--pad-main: 2rem;
--min-card-size: min(60ch, 33vw);
--corner-radius: 1rem;
@@ -17,7 +22,7 @@ body {
}
main {
max-width: calc(2 * var(--min-card-size) + var(--pad-main) + var(--pad-datasets));
max-width: calc(2 * var(--min-card-size) + var(--pad-main) + 2 * var(--pad-datasets-inline));
padding-inline: var(--pad-main);
margin-inline: auto;
container-type: inline-size;
@@ -47,12 +52,12 @@ header {
display: flex;
flex-direction: row;
float: right;
gap: .5rem;
gap: var(--gap-small);
background-color: var(--fg-color, darkgrey);
padding: .5rem 1rem;
margin-bottom: var(--pad-datasets);
margin-left: var(--pad-datasets);
margin-right: var(--pad-datasets);
margin-bottom: var(--pad-datasets-block);
margin-left: var(--pad-datasets-inline);
margin-right: var(--pad-datasets-inline);
border-radius: 1.5rem;
}
@@ -86,10 +91,10 @@ header {
}
.datasets {
padding-inline: var(--pad-datasets);
padding-inline: var(--pad-datasets-inline);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--min-card-size), 1fr));
gap: 1rem;
gap: var(--gap-medium);
}
@container (width < 60ch) {
@@ -99,7 +104,7 @@ header {
}
.dataset {
padding: var(--pad-datasets) 2rem;
padding: var(--pad-datasets-block) var(--pad-datasets-inline);
background-color: var(--fg-color, darkgrey);
border-radius: var(--corner-radius);
list-style: none;
@@ -115,7 +120,7 @@ header {
display: flex;
flex-direction: column;
align-items: center;
gap: .5em;
gap: var(--gap-small);
}
/* Buttons */
.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn, #reset-tools-btn {