diff --git a/html/index.html b/html/index.html new file mode 100644 index 0000000..df5a374 --- /dev/null +++ b/html/index.html @@ -0,0 +1,113 @@ + + + + + + DataDash + + + +
+
+

Welcome to DataDash

+

The place to launch and discover datasets and API endpoints.

+
+ +
+

Recently added:

+ +
+
+

Most Liked:

+ + +
+ + \ No newline at end of file diff --git a/html/main.css b/html/main.css new file mode 100644 index 0000000..03cf4e5 --- /dev/null +++ b/html/main.css @@ -0,0 +1,83 @@ +:root { + --bg-color: #222; + --fg-color: #555; + --text-color: #dbdbdb; + --pad-datasets: 1rem; + --pad-main: 2rem; + --min-card-size: 60ch; + font-size: 12pt; +} + +body { + background-color: var(--bg-color, black); + color: var(--text-color, white); +} + +main { + max-width: calc(2 * var(--min-card-size) + var(--pad-main) + var(--pad-datasets)); + padding-inline: var(--pad-main); + margin-inline: auto; + container-type: inline-size; +} + +header { + text-align: center; + margin-inline: .75rem; +} + +.datasets { + padding-inline: var(--pad-datasets); + display: grid; + grid-template-columns: repeat(auto-fit, minmax(var(--min-card-size), 1fr)); + gap: 1rem; +} + +@container (width < 80ch) { + .datasets { + grid-template-columns: 1fr; + } +} + +.dataset { + padding: 1rem 2rem; + background-color: var(--fg-color, darkgrey); + border-radius: 1rem; + list-style: none; + display: inline-flex; + align-items: center; + justify-content: space-between; + box-sizing: border-box; +} + +.upvote { + margin-left: 1rem; + margin-block: 1rem; + display: flex; + flex-direction: column; + align-items: center; + gap: .5em; +} + +.upvote-btn, .downvote-btn { + background: url(triangle.svg) no-repeat; + background-size: contain; + border: none; + width: 2em; + height: 2em; + padding: 0; + overflow: hidden; + color: transparent; + cursor: pointer; +} + +.downvote-btn { + transform: rotate(180deg); +} + +:is(.upvote-btn, .downvote-btn):is(:hover, :focus-visible) { + filter: brightness(1.5); +} + +:is(.upvote-btn, .downvote-btn):active { + filter: brightness(1.75); +} diff --git a/html/sad-looking-glass.svg b/html/sad-looking-glass.svg new file mode 100644 index 0000000..7ad3841 --- /dev/null +++ b/html/sad-looking-glass.svg @@ -0,0 +1,2 @@ + + diff --git a/html/triangle.svg b/html/triangle.svg new file mode 100644 index 0000000..75d192f --- /dev/null +++ b/html/triangle.svg @@ -0,0 +1,2 @@ + +