From 25594377c26d66c90140a136e8b096e82edd1cd9 Mon Sep 17 00:00:00 2001 From: alyx Date: Mon, 24 Jun 2024 19:43:05 -0400 Subject: Import existing site --- favicon.ico | Bin 0 -> 32606 bytes index.html | 153 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ logo.png | Bin 0 -> 4605 bytes style.css | 90 +++++++++++++++++++++++++++++++++++ 4 files changed, 243 insertions(+) create mode 100644 favicon.ico create mode 100644 index.html create mode 100644 logo.png create mode 100644 style.css diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..126ad42 Binary files /dev/null and b/favicon.ico differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..2bffb84 --- /dev/null +++ b/index.html @@ -0,0 +1,153 @@ + + + + + + scrobble.observer + + + + + + + + + + + + + + + + +
+

Scrobble.Observer

+

A little embed for your personal site, with whatever you're scrobbling.

+
+
+
+ +

Last.fm is a cool service! It keeps a live, usually public, log, of whatever music you're listening to! + I felt like that fit into the general set of status buttons and other widgets present in the + Web Revival movement, and yet last.fm was basically stuck on https://www.last.fm. I decided to write an embed myself. + If you'd like to know about the technical details, the code and lengthy documentation are available on my git server (link at the bottom).

+

This project is not affiliated with or endorsed by last.fm at all, I'm just doing it for fun :>

+
+
+

Introduction


+ +

This is the embed. Currently, it's displaying the listening history of the last.fm staff. It will update once-a-minute, + every minute, with whatever they're listening to. This rate limit is to avoid pinging the last.fm API too much, and because + few songs are shorter than 1 minute. This embed also uses no Javascript, instead relying on other mechanisms to refresh.

+
+
+

Generate your embed!


+
+
+ + +
+
+ +

Options + +
+
+
+
+
+

Contact

+

This project is currently run by just one person, but if you need help or want to contribute, these are the places to go.

+ +
+
+ + + + + diff --git a/logo.png b/logo.png new file mode 100644 index 0000000..6796ccb Binary files /dev/null and b/logo.png differ diff --git a/style.css b/style.css new file mode 100644 index 0000000..3b8a5e5 --- /dev/null +++ b/style.css @@ -0,0 +1,90 @@ +@import url('https://fonts.googleapis.com/css2?family=Geologica&family=Montserrat+Subrayada:wght@700&display=swap'); + +:root { + --text-color: hsl(99, 36%, 81%); + --bg-color: hsl(290, 100%, 8%); + --bg2-color: hsl(290, 100%, 4%); + --em-color: hsl(294, 42%, 65%); + --sub-color: hsl(294, 42%, 50%); + --link-color: hsl(324, 42%, 55%); + + font-family: 'Geologica', sans-serif; +} + +body { + display: flex; + flex-direction: column; + align-items: center; + + margin: 0px; + + background: repeating-linear-gradient(45deg, var(--bg-color), var(--bg-color) 18px, var(--bg2-color) 18px, var(--bg2-color) 21px); + background-attachment: fixed; + color: var(--text-color); + + padding-top: 5mm; +} + +a { + color: var(--link-color); +} + +section, footer { + margin-bottom: 1cm; + padding: 5mm; + border-radius: 3.5mm; + + background: #fff1; + backdrop-filter: blur(5px); + + max-width: 20cm; +} + +hgroup, +h1, h2, h3, h4, h5, h6 { + font-family: 'Montserrat Subrayada', sans-serif; + +} + +h1, h2, h3, h4, h5, h6 { + margin-top: 0px; + margin-bottom: 0px; + color: var(--em-color) +} + +hgroup > p { + color: var(--sub-color) +} + +section > pre { + background: var(--bg2-color); + padding: 2.5mm; + border-radius: 2.5mm; + + width: auto; +} + +footer { + color: var(--sub-color); + margin-bottom: 5mm; +} +footer > p { margin: 0px; } + +code { + background: var(--bg2-color); + padding: 1mm; + border-radius: 2mm; +} + +p { + line-height: 1.5; +} + +:is(h1,h2,h3,h4,h5,h6) > a { + color: inherit; + text-decoration: none; +} + +:is(h1,h2,h3,h4,h5,h6) > a:hover { + color: inherit; +} -- cgit v1.2.3-54-g00ecf