diff --git a/src/main/resources/static/add-button-mask.svg b/src/main/resources/static/add-button-mask.svg new file mode 100644 index 0000000..221de76 --- /dev/null +++ b/src/main/resources/static/add-button-mask.svg @@ -0,0 +1,105 @@ + + + + + diff --git a/src/main/resources/static/filter.svg b/src/main/resources/static/filter.svg new file mode 100644 index 0000000..d90e5c0 --- /dev/null +++ b/src/main/resources/static/filter.svg @@ -0,0 +1,49 @@ + + + + diff --git a/src/main/resources/static/main.css b/src/main/resources/static/main.css index 62eb72d..0711eca 100644 --- a/src/main/resources/static/main.css +++ b/src/main/resources/static/main.css @@ -7,11 +7,13 @@ --min-card-size: 60ch; --corner-radius: 1rem; font-size: 12pt; + font-family: sans-serif; } body { background-color: var(--bg-color, black); color: var(--text-color, white); + margin: 0; } main { @@ -26,16 +28,27 @@ header { margin-inline: .75rem; } +#add-btn { + width: 7rem; + height: 7rem; + content: url("add-button-mask.svg"); + background: linear-gradient(135deg, pink, darkblue); + clip-path: polygon(0% 0%, 100% 0%, 0% 100%); + + cursor: pointer; + + position: fixed; + top: 0; + left: 0; + z-index: 1; +} #tool-bar { display: flex; flex-direction: row; float: right; -} - -#search-bar { + gap: .5rem; background-color: var(--fg-color, darkgrey); padding: .5rem 1rem; - width: 100%; border-radius: 1.5rem; } @@ -45,6 +58,10 @@ header { color: var(--text-color); } +#search-entry:focus-visible { + outline: none; +} + .datasets { padding-inline: var(--pad-datasets); display: grid; @@ -78,7 +95,7 @@ header { gap: .5em; } /* Buttons */ -.upvote-btn, .downvote-btn, .search-btn { +.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn { background: var(--icon-url) no-repeat; background-size: contain; border: none; @@ -99,15 +116,30 @@ header { transform: rotate(180deg); } -.search-btn { +#search-btn { --icon-url: url(looking-glass.svg); --icon-size: 1rem; } +#filter-btn { + --icon-url: url(filter.svg); + --icon-size: 1rem; +} -:is(.upvote-btn, .downvote-btn, .search-btn):is(:hover, :focus-visible) { +#sort-btn { + --icon-url: url(sort.svg); + --icon-size: 1rem; +} + +.divider { + width: .05rem; + height: 1rem; + background-color: var(--bg-color); +} + +:is(.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn, #add-btn):is(:hover, :focus-visible) { filter: brightness(1.5); } -:is(.upvote-btn, .downvote-btn, .search-btn):active { +:is(.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn, #add-btn):active { filter: brightness(1.75); } diff --git a/src/main/resources/static/sort.svg b/src/main/resources/static/sort.svg new file mode 100644 index 0000000..a259268 --- /dev/null +++ b/src/main/resources/static/sort.svg @@ -0,0 +1,61 @@ + + + + diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html index 138e19b..172c714 100644 --- a/src/main/resources/templates/index.html +++ b/src/main/resources/templates/index.html @@ -7,6 +7,7 @@ +

Welcome to DataDash

@@ -14,10 +15,22 @@
- + +
+ + +