diff --git a/.gitignore b/.gitignore index f4e0da4..b2c48e4 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ node_modules +.DS_Store .vscode .env public/index.html diff --git a/output/template.hbs b/output/template.hbs index 0f693d8..0fc653c 100644 --- a/output/template.hbs +++ b/output/template.hbs @@ -8,11 +8,16 @@ Warframe Market Gaps -

Warframe Market Gaps

+
+

Warframe Market Gaps

+

Find a profitable difference between the price of the set and the price of the sum of it's parts.

+
- - - 1 +
+ + + 1 +
@@ -45,4 +50,4 @@ - \ No newline at end of file + diff --git a/public/assets/banner.png b/public/assets/banner.png new file mode 100644 index 0000000..6faa95c Binary files /dev/null and b/public/assets/banner.png differ diff --git a/public/index.js b/public/index.js index 81d6613..99ff52f 100644 --- a/public/index.js +++ b/public/index.js @@ -1,4 +1,4 @@ -const slider = document.getElementById('minDifference') +const slider = document.getElementById('min-difference') slider.addEventListener('input', function (event) { const table = document.getElementById('items') @@ -10,5 +10,5 @@ slider.addEventListener('input', function (event) { } }) - document.getElementById('filterValue').innerText = event.target.value + document.getElementById('filter-value').innerText = event.target.value }) diff --git a/public/style.css b/public/style.css index 972a845..025a740 100644 --- a/public/style.css +++ b/public/style.css @@ -1,14 +1,67 @@ +:root { + --bg-darker: #082032; + --bg-main: #2C394B; + --bg-lighter: #334756; + --text-clr: #ececec; + --accent-clr: #FF4C29; +} + * { font-family: sans-serif; + font-weight: 100; +} + +body { + margin: 0; + min-height: 100vh; + background: var(--bg-main); + color: var(--text-clr); + text-align: center; } a { text-decoration: none; - color: black; + color: var(--accent-clr); +} + +.hero { + width: 100%; + text-align: center; + padding: 64px; + box-sizing: border-box; + background: url(/assets/banner.png); + background-position: center; + background-repeat: no-repeat; + background-size: cover; +} + +.hero > * { + margin: 20px auto; +} + +.hero > h1 { + font-weight: 800; + font-size: 42px; +} + +.hero > p { + max-width: 400px; +} + +.controls { + margin: 32px auto; + display: flex; + align-items: center; + justify-content: center; +} + +.controls > * { + margin: 0 4px; } table { - margin: 64px 0; + min-width: 500px; + margin: 32px auto; border-spacing: 0; } @@ -22,6 +75,7 @@ td { th { padding: 8px 16px; + background: var(--bg-lighter); } .name { @@ -29,5 +83,14 @@ th { } .timestamp { - font-size: small; + font-size: 14px; + padding-bottom: 16px; + position: sticky; + top: 100%; +} + +@media screen and (max-width: 500px) { + table { + min-width: 100%; + } } \ No newline at end of file