From 8bfdc58e9896b6d627fbb965e76f0f9dac763695 Mon Sep 17 00:00:00 2001 From: Roni Laukkarinen Date: Fri, 27 Oct 2023 23:05:22 +0300 Subject: [PATCH] Mobile responsiveness --- CHANGELOG.md | 4 ++++ index.php | 50 +++++++++++++++++++++++++++++++++++--------------- 2 files changed, 39 insertions(+), 15 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 156311b..b785416 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +### 0.0.4: 2023-10-27 + +* Mobile responsiveness + ### 0.0.3: 2023-10-27 * Fix regression with updating the status #5 diff --git a/index.php b/index.php index 6fa36de..46ff42c 100644 --- a/index.php +++ b/index.php @@ -118,18 +118,6 @@ margin-top: 10px; } - @media (max-width: 600px) { - #statuses { - grid-template-columns: 7rem 3rem 1fr; - } - - .version, - .bottom-bar p, - .top-bar p { - font-size: 11px; - } - } - #statuses * { overflow-anchor: none; } @@ -193,10 +181,10 @@ align-items: center; gap: 10px; display: inline-flex; - min-width: 50.73px; } .live-indicator-block .live-indicator { + min-width: 50.73px; background: #ea2429; border-radius: 6px; color: #fff; @@ -481,6 +469,38 @@ #filters p { margin: 0 0 19px; } + + @media (max-width: 640px) { + #statuses { + max-width: calc(100vw - 20px); + margin: 0 auto; + } + + .status { + grid-template-columns: 200px 30px 1fr; + } + + .version, + .bottom-bar p, + .top-bar p { + font-size: 11px; + } + + .firehose-text, + .repo-info { + display: none; + } + + .bottom-bar { + justify-content: end; + } + } + + @media (max-width: 480px) { + .status { + grid-template-columns: 140px 30px 1fr; + } + } @@ -724,7 +744,7 @@

beta

-

👀 the Fediverse firehose.

@@ -750,7 +770,7 @@ ?>

Fedi on Fire built by Roni Laukkarinen, based on fedistream gist by Jackson Palmer, inspired by firesky.tv and mastodon-firehose. View code

-
Running vLive
+
Running vLive