diff --git a/src/main/resources/static/details.css b/src/main/resources/static/details.css
index f4d583f..0290013 100644
--- a/src/main/resources/static/details.css
+++ b/src/main/resources/static/details.css
@@ -1,7 +1,9 @@
@import url("./main.css");
+@import url('https://fonts.googleapis.com/css2?family=Flow+Circular&display=swap');
:root {
--min-card-size: min(60ch, calc(100vw - var(--pad-main)));
+ --rating-color: gold;
}
main {
@@ -80,19 +82,25 @@ header {
content: "";
display: inline-block;
width: 5em;
- height: 1em;
- margin-block: calc(-1 * (1lh - 1.25em));
+ height: 1lh;
+ vertical-align: bottom;
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));
+ background: linear-gradient(to right, var(--rating-color) var(--rating-percent), var(--bg-color) var(--rating-percent));
}
a {
- color: var(--accent-color);
+ --text-color: var(--accent-color);
+
+ /*
+ Why doesn't it do this automatically? It is inherited from body,
+ so I should be able to just change --text-color, right?
+ */
+ color: var(--text-color);
}
#terms-of-use {
@@ -121,4 +129,52 @@ a {
br {
margin-bottom: .5lh;
}
-}
\ No newline at end of file
+}
+
+.skeleton {
+ font-family: "Flow Circular";
+ font-weight: 400;
+ font-style: normal;
+ user-select: none;
+ --rating-color: var(--text-color);
+
+ a, .btn {
+ pointer-events: none;
+ }
+
+ & > * {
+ cursor: progress;
+ }
+
+ @media screen and not (prefers-reduced-motion) {
+ :is(header, section) > :is(p, span, h1, a) {
+ animation: infinite 2s linear skeleton-loading;
+ background: radial-gradient(
+ circle farthest-side,
+ var(--highlight-color, white) 20%,
+ var(--text-color) 40%
+ ) no-repeat, var(--text-color);
+ background-clip: text;
+ -webkit-background-clip: text;
+ color: transparent;
+
+ &:is(a) {
+ --highlight-color: color-mix(in oklab, white, var(--text-color));
+ }
+ }
+ }
+
+ #title::after {
+ color: color-mix(in oklab, var(--accent-color) 50%, currentcolor);
+ }
+}
+
+@keyframes skeleton-loading {
+ from {
+ background-position-x: calc(-1.4 * var(--min-card-size)), 0;
+ }
+
+ to {
+ background-position-x: calc(1.4 * var(--min-card-size)), 0;
+ }
+}
diff --git a/src/main/resources/static/details.html b/src/main/resources/static/details.html
index 7ce3a48..90e311f 100644
--- a/src/main/resources/static/details.html
+++ b/src/main/resources/static/details.html
@@ -4,22 +4,25 @@
Dataset details
+
+
+
-
+
Title
- 3.5
+ 4
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis recusandae laborum odio corrupti voluptas quisquam dicta, quibusdam ipsum qui exercitationem.
- https://example.com/dataset
+ https://example.com/dataset
@@ -27,7 +30,7 @@
Added on: 1. January 1970
Category: Something
License: MIT
- Terms of Use
+ Terms of Use
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
index 23ee989..1baa21d 100644
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@@ -4,6 +4,9 @@
DataDash
+
+
+