Finish details page design

2024-07-03 00:20:36 +02:00
parent 79b851a4a7
commit 8810bfa53f
5 changed files with 318 additions and 14 deletions
--- a/src/main/resources/static/details.css
+++ 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;
+    }
+}