From c286562ee81e40a7e15ba64606413fd7925309ff Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 13 Apr 2024 19:21:48 +0800
Subject: [PATCH] Media-first style adjustments
---
src/app.css | 5 ++++-
src/components/status.css | 4 +++-
2 files changed, 7 insertions(+), 2 deletions(-)
diff --git a/src/app.css b/src/app.css
index 45534838..9b88bd41 100644
--- a/src/app.css
+++ b/src/app.css
@@ -312,7 +312,10 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
box-shadow: none !important;
max-width: min(480px, 100%);
margin-inline: auto !important;
- margin-block: 32px;
+
+ &:not(:first-child) {
+ margin-block: 32px;
+ }
&:has(.skeleton) {
width: 100%;
diff --git a/src/components/status.css b/src/components/status.css
index eea4c280..e4dde172 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -1325,6 +1325,8 @@ body:has(#modal-container .carousel) .status .media img:hover {
}
.status-media-first {
+ animation: appear-smooth 1s ease-out;
+
.meta-name {
opacity: 0.65;
transition: opacity 0.5s ease-in-out;
@@ -1398,7 +1400,7 @@ body:has(#modal-container .carousel) .status .media img:hover {
.media {
/* background-color: var(--average-color, var(--bg-faded-color)); */
- width: var(--width);
+ width: var(--width, 100%);
max-width: 100%;
max-height: 100%;
min-height: var(--min-dimension);