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%;