From 27d832b24429e9cb255b24ffe51db11b7a8cb0e9 Mon Sep 17 00:00:00 2001
From: Alvie Rahman <alvierahman90@gmail.com>
Date: Thu, 14 Apr 2022 16:15:42 +0100
Subject: [PATCH] use variables in soft_media module

---
 modules/readmes/soft_media.txt |  6 ++++++
 modules/soft_media.css         | 10 ++++++++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/modules/readmes/soft_media.txt b/modules/readmes/soft_media.txt
index 91bdd91..aa524a6 100644
--- a/modules/readmes/soft_media.txt
+++ b/modules/readmes/soft_media.txt
@@ -2,5 +2,11 @@ in the css
 
 	@import url("https://styles.alv.cx/modules/soft_media.css");
 
+variables:
+
+	--soft-media-opacity: 0.75;
+	--soft-media-transition-time: .5s;
+	--soft-media-transition-timing-function: ease-in-out;
+
 this module makes reduces the opacity of all images to give the webpage a softer look,
 even when in light mode (this is default behaviour in dark mode).
diff --git a/modules/soft_media.css b/modules/soft_media.css
index f0edf32..eaecd23 100644
--- a/modules/soft_media.css
+++ b/modules/soft_media.css
@@ -1,6 +1,12 @@
+:root {
+	--soft-media-opacity: 0.75;
+	--soft-media-transition-time: .5s;
+	--soft-media-transition-timing-function: ease-in-out;
+}
+
 img, video {
-	opacity: .75;
-	transition: opacity .5s ease-in-out;
+	opacity: var(--soft-media-opacity);
+	transition: opacity var(--soft-media-transition-time) var(--soft-media-transition-timing-function);
 }
 img:hover, video:hover {
 	opacity: 1;