From 118fe4921128a22cb950b8e4b9e7a142af762dc3 Mon Sep 17 00:00:00 2001
From: ray <gitea@rayelliott.dev>
Date: Tue, 19 Apr 2022 15:59:24 +0100
Subject: [PATCH] use custom properties for durations

---
 style.css | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/style.css b/style.css
index 62151a5..aabc617 100644
--- a/style.css
+++ b/style.css
@@ -1,9 +1,12 @@
 :root {
-	--width__inner-content: 10em;
-	--width__orbital: 7em;
+	--width__inner-content: 11em;
+	--width__orbital: 7.5em;
 
 	--radius__orbital: 14em;
 	--radius__orbital--diagonal: calc(var(--radius__orbital) / 1.4142);
+
+	--duration__rotation: 50s;
+	--duration__pulse: 1.5s;
 }
 
 body, html {
@@ -98,7 +101,8 @@ ul, li {
 	top: 50%;
 	transform: translate(-50%, -50%);
 
-	opacity: 0.3;
+	border-radius: 3em;
+	overflow: hidden;
 }
 
 .image-hover {
@@ -164,16 +168,16 @@ ul, li {
 }
 
 .clockwise {
-	animation: rotate 20s linear infinite;
+	animation: rotate var(--duration__rotation) linear infinite;
 }
 
 .anti-clockwise {
-	animation: rotate 20s reverse linear infinite;
+	animation: rotate var(--duration__rotation) reverse linear infinite;
 }
 
 .pulse {
 	&::before {
-		animation: pulse 2s alternate ease-in-out infinite;
+		animation: pulse var(--duration__pulse) alternate ease-in-out infinite;
 	}
 }
 
@@ -191,6 +195,6 @@ ul, li {
 		transform: scale(1);
 	}
 	to {
-		transform: scale(1.2);
+		transform: scale(1.15);
 	}
 }