From 4da5a11cb9f3b49e7abcac80948d9e08936a9e76 Mon Sep 17 00:00:00 2001
From: ray <gitea@rayelliott.dev>
Date: Tue, 19 Apr 2022 19:34:16 +0100
Subject: [PATCH] account for variable number of orbitals

---
 index.html |  2 +-
 style.css  | 92 ++++++++++++++++++++++++++++--------------------------
 2 files changed, 48 insertions(+), 46 deletions(-)

diff --git a/index.html b/index.html
index 5e8bd2c..3fee68d 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 shadow">
+				<li class="orbital bg bg--red pulse">
 					<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 d96964d..88673b2 100644
--- a/style.css
+++ b/style.css
@@ -1,16 +1,15 @@
 :root {
+	--count__orbitals: 8;
+
 	--width__inner-content: 11em;
 	--width__orbital: 7.5em;
 
-	--radius__orbital: 14em;
-	--radius__orbital--diagonal: calc(var(--radius__orbital) / 1.4142);
+	--radius: 14em;
 
 	--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));
 }
 
 body, html {
@@ -51,49 +50,52 @@ ul, li {
 	border-radius: 50%;
 	left: 50%;
 	top: 50%;
-	transform: translate(-50%, -50%);
-
-	&:nth-child(1) {
-		/* top */
-		transform: translate(-50%, calc(-50% - var(--radius__orbital)));
-	}
-
-	&:nth-child(2) {
-		/* top right */
-		transform: translate(calc(-50% + var(--radius__orbital--diagonal)), calc(-50% - var(--radius__orbital--diagonal)));
-	}
-
-	&:nth-child(3) {
-		/* right */
-		transform: translate(calc(-50% + var(--radius__orbital)), -50%);
-	}
-
-	&:nth-child(4) {
-		/* bottom right */
-		transform: translate(calc(-50% + var(--radius__orbital--diagonal)), calc(-50% + var(--radius__orbital--diagonal)));
-	}
-
-	&:nth-child(5) {
-		/* bottom */
-		transform: translate(-50%, calc(-50% + var(--radius__orbital)));
-	}
-
-	&:nth-child(6) {
-		/* bottom left */
-		transform: translate(calc(-50% - var(--radius__orbital--diagonal)), calc(-50% + var(--radius__orbital--diagonal)));
-	}
-
-	&:nth-child(7) {
-		/* left */
-		transform: translate(calc(-50% - var(--radius__orbital)), -50%);
-	}
-
-	&:nth-child(8) {
-		/* top left */
-		transform: translate(calc(-50% - var(--radius__orbital--diagonal)), calc(-50% - var(--radius__orbital--diagonal)));
-	}
+	transform: translate(calc(-50% + var(--x-offset)), calc(-50% - var(--y-offset)));
 }
 
+.orbital {
+	/* --angle must be in radians so multiply by 2 * pi  */
+	--angle: calc(6.28318530360 * var(--index) / var(--count__orbitals));
+
+	/* thanks to https://gist.github.com/stereokai/7666bfe93929b14c2dced148c79e0e97 */
+	--sin-term1: var(--angle);
+  --sin-term2: calc((var(--angle) * var(--angle) * var(--angle)) / 6);
+  --sin-term3: calc((var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle)) / 120);
+  --sin-term4: calc((var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle)) / 5040);
+  --sin-term5: calc((var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle)) / 362880);
+  --sin: calc(var(--sin-term1) - var(--sin-term2) + var(--sin-term3) - var(--sin-term4) + var(--sin-term5));
+
+	/* thanks to https://gist.github.com/stereokai/7666bfe93929b14c2dced148c79e0e97 */
+	--cos-term1: 1;
+  --cos-term2: calc((var(--angle) * var(--angle)) / 2);
+  --cos-term3: calc((var(--angle) * var(--angle) * var(--angle) * var(--angle)) / 24);
+  --cos-term4: calc((var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle)) / 720);
+  --cos-term5: calc((var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle)) / 40320);
+  --cos: calc(var(--cos-term1) - var(--cos-term2) + var(--cos-term3) - var(--cos-term4) + var(--cos-term5));
+
+	--x-offset: calc(var(--radius) * var(--cos));
+	--y-offset: calc(var(--radius) * var(--sin));
+
+	&:nth-child(1) { --index: 0; }
+	&:nth-child(2) { --index: 1; }
+
+	&:nth-child(3) { --index: -1; }
+	&:nth-child(4) { --index: 2; }
+
+	&:nth-child(5) { --index: -2; }
+	&:nth-child(6) { --index: 3; }
+
+	&:nth-child(7) { --index: -3; }
+	&:nth-child(8) { --index: 4; }
+
+	&:nth-child(9) { --index: -4; }
+	&:nth-child(10) { --index: 5; }
+
+	&:nth-child(11) { --index: -5; }
+	&:nth-child(12) { --index: 6; }
+}
+
+
 .orbital-content {
 	width: 100%;
 	height: 100%;