From 246e441020d62fa61cbaf8f639110591b8e3ff10 Mon Sep 17 00:00:00 2001
From: ray <gitea@rayelliott.dev>
Date: Tue, 19 Apr 2022 17:16:07 +0100
Subject: [PATCH] move transition durations into custom properties

---
 index.html | 2 +-
 style.css  | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 3fee68d..5e8bd2c 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,7 @@
     <div id="app" class="wrapper">
 			<ul class="orbitals clockwise">
 
-				<li class="orbital bg bg--red pulse">
+				<li class="orbital bg bg--red pulse shadow">
 					<div class="orbital-content content-center anti-clockwise">
 						<div class="feature">
 							<div class="feature-item primary">
diff --git a/style.css b/style.css
index 78d6cf1..d96964d 100644
--- a/style.css
+++ b/style.css
@@ -7,6 +7,8 @@
 
 	--duration__rotation: 50s;
 	--duration__pulse: 1.5s;
+	--duration__image-hover: 0.3s;
+	--duration__feature-hover: 0.3s;
 
 	--width__container: calc(var(--width__inner-content) + var(--width__orbital) + var(--radius__orbital));
 }
@@ -121,7 +123,7 @@ ul, li {
 		object-fit: cover;
 
 		&:last-child {
-			transition: opacity .3s;
+			transition: opacity var(--duration__image-hover);
 			opacity: 0;
 		}
 	}
@@ -151,7 +153,7 @@ ul, li {
 		left: 0;
 		border-radius: 50%;
 
-		transition: background-color 0.5s;
+		transition: background-color var(--duration__feature-hover);
 	}
 }
 
@@ -199,7 +201,7 @@ ul, li {
 		justify-content: center;
 		align-items: center;
 
-		transition: opacity 0.5s;
+		transition: opacity var(--duration__feature-hover);
 
 		&:first-child {
 			opacity: 1;