diff --git a/public/index.html b/public/index.html index eb19f13..d12903a 100644 --- a/public/index.html +++ b/public/index.html @@ -1,133 +1,191 @@ + + + + + lowmess Stats + + + + - - - -
- -

Stats

-
-
-
-

In the Last 30 Days

- -
-
- GitHub Commits -
-
- — -
-
- -
-
- Tweets Sent -
-
- — -
-
- -
-
- Places Visited -
-
- — + @media (prefers-color-scheme: dark) { + :root { + --background: #39342d; + --text: #efedea; + --muted: #2a2722; + } + } + + html { + box-sizing: border-box; + } + + *, + *::before, + *::after { + box-sizing: inherit; + } + + @media (min-width: 90em) { + html { + font-size: 112.5%; + } + } + + body { + min-height: 100vh; + margin: 0; + border-top: 0.5rem solid; + border-color: var(--primary); + padding-top: 4rem; + cursor: default; + background-color: var(--background); + color: var(--text); + font-family: Inter, system-ui, sans-serif; + font-feature-settings: 'calt', 'rlig', 'case', 'cv01'; + line-height: 1.5; + } + + ::selection { + background-color: var(--primary); + color: var(--text); + } + + header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 1rem; + } + + header svg { + color: var(--primary); + width: auto; + height: 1.5rem; + } + + main { + padding-top: 4rem; + padding-bottom: 4rem; + } + + h1 { + margin: 0; + font-size: 1.5rem; + line-height: 1.25; + font-weight: 600; + } + + svg:not([fill]) { + fill: currentColor; + } + + .container { + width: 100%; + max-width: 40rem; + margin-right: auto; + margin-left: auto; + } + + .stat { + display: grid; + grid-template-columns: 1; + grid-gap: 0.5rem; + padding: 0.5rem 1rem; + } + + @media (min-width: 28em) { + .stat { + grid-template-columns: 12rem 1fr; + grid-gap: 1rem; + } + } + + .stat:nth-child(2n) { + background-color: var(--muted); + } + + h2 { + margin: 0; + font-size: 1rem; + line-height: inherit; + font-weight: 600; + } + + .value { + font-feature-settings: 'tnum', 'cv01'; + } + + .book + .book { + margin-top: 0.5rem; + } + + + + +
+ + + + +

30 Day Stats

+
+ +
+
+

GitHub Commits

+
—
-
- -
-
- Steps Taken + +
+

Tweets Sent

+
—
-
- — + +
+

Steps Taken

+
—
-
- -
-
- Songs Played + +
+

Places Visited

+
—
-
- — + +
+

Songs Played

+
—
-
- -
-
- Top Album + +
+

Top Album

+
—
-
- — + +
+

Currently Reading

+
+
—
+
-
- -

Currently Reading

- -
- — -
-
- - - + + + diff --git a/public/main.js b/public/main.js index b83142f..78695a3 100644 --- a/public/main.js +++ b/public/main.js @@ -3,8 +3,8 @@ const stat = (selector, value) => { } const markupBook = ({ name, author }) => ` -
- ${name}, ${author} +
+ “${name}”, ${author}
` @@ -48,24 +48,40 @@ fetch('/graphql', { .then(json => { if (json.data) { // Commits - if (json.data.commits) stat('commits', json.data.commits.toLocaleString()) + if (typeof json.data.commits === 'number') { + stat('commits', json.data.commits.toLocaleString()) + } + // Tweets - if (json.data.tweets) stat('tweets', json.data.tweets.toLocaleString()) + if (typeof json.data.tweets === 'number') { + stat('tweets', json.data.tweets.toLocaleString()) + } + // Places - if (json.data.places) stat('places', json.data.places.toLocaleString()) + if (typeof json.data.places === 'number') { + stat('places', json.data.places.toLocaleString()) + } + // Steps - if (json.data.steps) stat('steps', json.data.steps.toLocaleString()) + if (typeof json.data.steps === 'number') { + stat('steps', json.data.steps.toLocaleString()) + } + // Songs - if (json.data.songs) stat('songs', json.data.songs.toLocaleString()) + if (typeof json.data.songs === 'number') { + stat('songs', json.data.songs.toLocaleString()) + } + // Album if (json.data.album) { if (json.data.album.name && json.data.album.artist) { stat( 'album', - `${json.data.album.name}, ${json.data.album.artist}` + `“${json.data.album.name}”, ${json.data.album.artist}` ) } } + // Book if (json.data.books) { fillBooks(json.data.books)