diff --git a/index.html b/index.html index 69025d2..28cd7be 100644 --- a/index.html +++ b/index.html @@ -23,6 +23,10 @@
+
+

Online status unknown

+

+

Hi! I'm Trouble, and I'm currently working as a fullstack developer. In my free time I enjoy working on my @@ -53,7 +57,7 @@

Purpur

diff --git a/index.js b/index.js index 1950e89..a6ca156 100644 --- a/index.js +++ b/index.js @@ -2,8 +2,8 @@ const status = document.querySelector("#status"); const action = document.querySelector("#status-action"); const avatar = document.querySelector(".avatar img"); -// updateStatus(); -// window.setInterval(updateStatus, 10000); +updateStatus(); +window.setInterval(updateStatus, 10000); async function updateStatus() { const result = await fetch("https://api.youhavetrouble.me/online"); diff --git a/main.css b/main.css index d8b1806..e63d03d 100644 --- a/main.css +++ b/main.css @@ -4,6 +4,15 @@ padding: 0; --max-width: 40rem; } + +::-moz-selection { + background: rgba(255,255,255, 0.2); +} + +::selection { + background: rgba(255,255,255, 0.2); +} + html { font-family: 'Open Sans', sans-serif; color: white; @@ -86,6 +95,26 @@ main article { height: 100%; } +.status { + max-width: var(--max-width); + width: min(100%, 16rem); + border: 2px solid #000; + border-radius: 0.2rem; + background-color: rgba(0,0,0, 0.5); + backdrop-filter: blur(4px); + box-sizing: border-box; + min-height: 5rem; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 0.5rem; +} + +.status #status-action:empty { + display: none; +} + .bio { padding: 1rem; max-width: var(--max-width);