diff --git a/src/main/resources/static/add.css b/src/main/resources/static/add.css index 6d62a6f..e4cc24d 100644 --- a/src/main/resources/static/add.css +++ b/src/main/resources/static/add.css @@ -1,9 +1,5 @@ @import url("main.css"); -:root { - --accent-color: oklch(65.33% 0.158 247.76); -} - form { display: grid; grid-template-columns: 1fr 1fr auto; diff --git a/src/main/resources/static/details.css b/src/main/resources/static/details.css new file mode 100644 index 0000000..f4d583f --- /dev/null +++ b/src/main/resources/static/details.css @@ -0,0 +1,124 @@ +@import url("./main.css"); + +:root { + --min-card-size: min(60ch, calc(100vw - var(--pad-main))); +} + +main { + & > :is(header, section, footer) { + background-color: var(--fg-color); + padding: var(--pad-datasets-block) var(--pad-datasets-inline); + position: relative; + } + + & > :first-child { + border-radius: var(--corner-radius) var(--corner-radius) 0 0; + margin-top: var(--pad-main); + } + + & > :last-child { + border-radius: 0 0 var(--corner-radius) var(--corner-radius); + margin-bottom: var(--pad-main); + } + + & > :not(:last-child):is(header, section)::after { + content: ''; + position: absolute; + inset-inline: calc(var(--pad-datasets-inline) - var(--gap-small)); + bottom: 0; + border-bottom: 3px solid var(--bg-color); + opacity: .25; + transform: translateY(50%); + z-index: 1; + } +} + +header { + margin-inline: 0; + display: grid; + grid-template-columns: 1fr 1fr max-content; + align-items: center; + grid-gap: var(--gap-medium); +} + +#title { + grid-column: 1 / 3; + margin-block: var(--gap-medium) 0; + text-align: center; + + &::after { + content: attr(data-type); + background-color: var(--accent-color); + font-size: .5em; + font-weight: initial; + position: relative; + bottom: .25lh; + margin-inline: var(--gap-small); + padding: 2pt 4pt; + border-radius: 4pt; + } + + &[data-type="dataset"]::after { + content: "Dataset"; + } + + &[data-type="api"]::after { + content: "API"; + } +} + +:has(#rating), #url { + text-align: start; + grid-column: 1 / 3; +} + +#rating { + color: color-mix(in oklab, var(--text-color) 80%, black); +} + +#rating::after { + content: ""; + display: inline-block; + width: 5em; + height: 1em; + margin-block: calc(-1 * (1lh - 1.25em)); + margin-inline: .5ch; + mask-image: url("stars.svg"); + -webkit-mask-image: url("stars.svg"); + mask-size: 100% 100%; + mask-mode: alpha; + --rating-percent: calc((var(--rating, 0) / 5) * 100%); + background: linear-gradient(to right, gold var(--rating-percent), var(--bg-color) var(--rating-percent)); +} + +a { + color: var(--accent-color); +} + +#terms-of-use { + /* text-align: end; */ +} + +.upvote { + margin: var(--gap-medium) 0; + align-self: self-start; + grid-column: 3; + grid-row: 1 / 4; +} + +#metadata { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + gap: var(--gap-large); +} + +#full-description { + text-wrap: balance; + text-wrap: pretty; + margin-top: 0; + + br { + margin-bottom: .5lh; + } +} \ No newline at end of file diff --git a/src/main/resources/static/details.html b/src/main/resources/static/details.html new file mode 100644 index 0000000..7ce3a48 --- /dev/null +++ b/src/main/resources/static/details.html @@ -0,0 +1,52 @@ + + + + + + Dataset details + + + + +
+
+

Title

+ + 3.5 + Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis recusandae laborum odio corrupti voluptas quisquam dicta, quibusdam ipsum qui exercitationem. + + https://example.com/dataset + +
+ +
+ Added on: 1. January 1970 + Category: Something + License: MIT + Terms of Use +
+ +
+

Full description
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae + nihil saepe et numquam quo id voluptatum recusandae assumenda + doloremque pariatur consequatur molestias delectus dolore + corrupti, odio modi vitae repellat tempora sed eos voluptates + temporibus veritatis repudiandae. Cum eveniet molestias, in + beatae non reiciendis quia voluptatem id, facere architecto + vitae harum ipsum earum deleniti dolor atque recusandae odit + corporis error dolorum blanditiis vel maxime pariatur quibusdam! +
Saepe debitis ab possimus, dolorem neque ad voluptatibus ex + quisquam itaque. Nihil et non consequuntur error ipsa. + Necessitatibus voluptatibus aliquid itaque id ipsum, pariatur + odio explicabo, dolores ex, incidunt tenetur dolore. Assumenda + ipsam nobis quis. +

+
+
+ + \ No newline at end of file diff --git a/src/main/resources/static/main.css b/src/main/resources/static/main.css index c62d21e..0b9615e 100644 --- a/src/main/resources/static/main.css +++ b/src/main/resources/static/main.css @@ -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 { diff --git a/src/main/resources/static/stars.svg b/src/main/resources/static/stars.svg new file mode 100644 index 0000000..0dbeb2d --- /dev/null +++ b/src/main/resources/static/stars.svg @@ -0,0 +1,127 @@ + + + +