From 39aa57de1fc94dd08dc496d26f0ac5a4389f6fb8 Mon Sep 17 00:00:00 2001
From: ktyl <me@ktyl.dev>
Date: Wed, 15 Sep 2021 01:41:51 +0100
Subject: [PATCH] draw planet orbits and line them up nicely :)

---
 src/inc_css/earth.css           | 15 ++++++++++++++-
 src/inc_css/mars.css            | 17 +++++++++++++++--
 src/inc_css/mercury.css         | 15 ++++++++++++++-
 src/inc_css/or_earth.css        |  2 +-
 src/inc_css/or_mars.css         |  2 +-
 src/inc_css/or_mercury.css      |  2 +-
 src/inc_css/orbit_thickness.css |  1 +
 src/inc_css/planets.css         | 14 +++++++++++++-
 src/inc_css/pr_earth.css        |  1 +
 src/inc_css/pr_mars.css         |  1 +
 src/inc_css/pr_mercury.css      |  1 +
 src/inc_css/pr_venus.css        |  1 +
 src/inc_css/solposx.css         |  2 +-
 src/inc_css/solposy.css         |  2 +-
 src/inc_css/venus.css           | 15 ++++++++++++++-
 src/inc_html/planets.html       | 18 ++++++++++++++----
 src/root/main.css               |  6 +++---
 17 files changed, 97 insertions(+), 18 deletions(-)
 create mode 100644 src/inc_css/orbit_thickness.css
 create mode 100644 src/inc_css/pr_earth.css
 create mode 100644 src/inc_css/pr_mars.css
 create mode 100644 src/inc_css/pr_mercury.css
 create mode 100644 src/inc_css/pr_venus.css

diff --git a/src/inc_css/earth.css b/src/inc_css/earth.css
index e915ce1..70d97ae 100644
--- a/src/inc_css/earth.css
+++ b/src/inc_css/earth.css
@@ -16,7 +16,7 @@
 }
 #earth {
     --period: 20s;
-    --radius: 80px;
+    --radius: #pr_earth.css;
     --color: #87ceeb;
 
     width: var(--radius);
@@ -31,3 +31,16 @@
     -o-animation:       orbit_earth var(--period) linear infinite;
     animation:          orbit_earth var(--period) linear infinite;
 }
+#earth-orbit {
+    --orbit-radius: #or_earth.css;
+    --planet-radius: #pr_earth.css;
+    --orbit-thickness: #orbit_thickness.css;
+    --diameter: calc(2 * var(--orbit-radius) + (var(--planet-radius) - var(--orbit-thickness)) / 2);
+
+    right:      #solposx.css;
+    bottom:     #solposy.css;
+    transform:  translate(#or_earth.css, #or_earth.css);
+
+    width:  var(--diameter);
+    height: var(--diameter);
+}
diff --git a/src/inc_css/mars.css b/src/inc_css/mars.css
index 0f6aa6a..d776bc1 100644
--- a/src/inc_css/mars.css
+++ b/src/inc_css/mars.css
@@ -6,7 +6,7 @@
     from    { -moz-transform: rotate(360deg) translateX(#or_mars.css) rotate(360deg); }
     to      { -moz-transform: rotate(0deg) translateX(#or_mars.css) rotate(0deg); }
 }
-@-o-keyframes orbit_mars {
+@-o-keyframes orbit_mars{
     from    { -o-transform: rotate(360deg) translateX(#or_mars.css) rotate(360deg); }
     to      { -o-transform: rotate(0deg) translateX(#or_mars.css) rotate(0deg); }
 }
@@ -16,7 +16,7 @@
 }
 #mars {
     --period: 37.6s;
-    --radius: 40px;
+    --radius: #pr_mars.css;
     --color: #ff5349;
 
     width: var(--radius);
@@ -31,3 +31,16 @@
     -o-animation:       orbit_mars var(--period) linear infinite;
     animation:          orbit_mars var(--period) linear infinite;
 }
+#mars-orbit {
+    --orbit-radius: #or_mars.css;
+    --planet-radius: #pr_mars.css;
+    --orbit-thickness: #orbit_thickness.css;
+    --diameter: calc(2 * var(--orbit-radius) + (var(--planet-radius) - var(--orbit-thickness)) / 2);
+
+    right:      #solposx.css;
+    bottom:     #solposy.css;
+    transform:  translate(#or_mars.css, #or_mars.css);
+
+    width:  var(--diameter);
+    height: var(--diameter);
+}
diff --git a/src/inc_css/mercury.css b/src/inc_css/mercury.css
index 4132183..317c4b9 100644
--- a/src/inc_css/mercury.css
+++ b/src/inc_css/mercury.css
@@ -16,7 +16,7 @@
 }
 #mercury {
     --period: 4.82s;
-    --radius: 40px;
+    --radius: #pr_mercury.css;
     --color: #c89d7c;
 
     width: var(--radius);
@@ -31,3 +31,16 @@
     -o-animation:       orbit_mercury var(--period) linear infinite;
     animation:          orbit_mercury var(--period) linear infinite;
 }
+#mercury-orbit {
+    --orbit-radius: #or_mercury.css;
+    --planet-radius: #pr_mercury.css;
+    --orbit-thickness: #orbit_thickness.css;
+    --diameter: calc(2 * var(--orbit-radius) + (var(--planet-radius) - var(--orbit-thickness)) / 2);
+
+    right:      #solposx.css;
+    bottom:     #solposy.css;
+    transform:  translate(#or_mercury.css, #or_mercury.css);
+
+    width:  var(--diameter);
+    height: var(--diameter);
+}
diff --git a/src/inc_css/or_earth.css b/src/inc_css/or_earth.css
index 3d7ade1..29854ad 100644
--- a/src/inc_css/or_earth.css
+++ b/src/inc_css/or_earth.css
@@ -1 +1 @@
-400px
+420px
diff --git a/src/inc_css/or_mars.css b/src/inc_css/or_mars.css
index 2acee23..6977c52 100644
--- a/src/inc_css/or_mars.css
+++ b/src/inc_css/or_mars.css
@@ -1 +1 @@
-500px
+560px
diff --git a/src/inc_css/or_mercury.css b/src/inc_css/or_mercury.css
index 70cf68c..727b97e 100644
--- a/src/inc_css/or_mercury.css
+++ b/src/inc_css/or_mercury.css
@@ -1 +1 @@
-200px
+180px
diff --git a/src/inc_css/orbit_thickness.css b/src/inc_css/orbit_thickness.css
new file mode 100644
index 0000000..92db59d
--- /dev/null
+++ b/src/inc_css/orbit_thickness.css
@@ -0,0 +1 @@
+0.2rem
diff --git a/src/inc_css/planets.css b/src/inc_css/planets.css
index b6f70b1..43b49d0 100644
--- a/src/inc_css/planets.css
+++ b/src/inc_css/planets.css
@@ -7,7 +7,8 @@
     bottom: 0;
     z-index: -1;
 
-    background-color: var(--background);
+    /*background-color: var(--background);*/
+    background-color: transparent;
 }
 
 .planet {
@@ -16,6 +17,17 @@
     display: inline-block;
 }
 
+.orbit {
+    position: absolute;
+
+    border: #orbit_thickness.css solid var(--foreground-inactive);
+    border-radius: 100%;
+    background-color: transparent;
+    opacity: 0.2;
+
+    z-index:-1;
+}
+
 #include mercury.css
 #include earth.css
 #include venus.css
diff --git a/src/inc_css/pr_earth.css b/src/inc_css/pr_earth.css
new file mode 100644
index 0000000..265dd83
--- /dev/null
+++ b/src/inc_css/pr_earth.css
@@ -0,0 +1 @@
+70px
diff --git a/src/inc_css/pr_mars.css b/src/inc_css/pr_mars.css
new file mode 100644
index 0000000..af13e9c
--- /dev/null
+++ b/src/inc_css/pr_mars.css
@@ -0,0 +1 @@
+50px
diff --git a/src/inc_css/pr_mercury.css b/src/inc_css/pr_mercury.css
new file mode 100644
index 0000000..54330bc
--- /dev/null
+++ b/src/inc_css/pr_mercury.css
@@ -0,0 +1 @@
+40px
diff --git a/src/inc_css/pr_venus.css b/src/inc_css/pr_venus.css
new file mode 100644
index 0000000..a4f721a
--- /dev/null
+++ b/src/inc_css/pr_venus.css
@@ -0,0 +1 @@
+60px
diff --git a/src/inc_css/solposx.css b/src/inc_css/solposx.css
index 153c4d9..573541a 100644
--- a/src/inc_css/solposx.css
+++ b/src/inc_css/solposx.css
@@ -1 +1 @@
-90px
+0
diff --git a/src/inc_css/solposy.css b/src/inc_css/solposy.css
index af13e9c..573541a 100644
--- a/src/inc_css/solposy.css
+++ b/src/inc_css/solposy.css
@@ -1 +1 @@
-50px
+0
diff --git a/src/inc_css/venus.css b/src/inc_css/venus.css
index 61f68cb..374de94 100644
--- a/src/inc_css/venus.css
+++ b/src/inc_css/venus.css
@@ -16,7 +16,7 @@
 }
 #venus {
     --period: 12.3s;
-    --radius: 70px;
+    --radius: #pr_venus.css;
     --color: #eed053;
 
     width: var(--radius);
@@ -31,3 +31,16 @@
     -o-animation:       orbit_venus var(--period) linear infinite;
     animation:          orbit_venus var(--period) linear infinite;
 }
+#venus-orbit {
+    --orbit-radius: #or_venus.css;
+    --planet-radius: #pr_venus.css;
+    --orbit-thickness: #orbit_thickness.css;
+    --diameter: calc(2 * var(--orbit-radius) + (var(--planet-radius) - var(--orbit-thickness)) / 2);
+
+    right:      #solposx.css;
+    bottom:     #solposy.css;
+    transform:  translate(#or_venus.css, #or_venus.css);
+
+    width:  var(--diameter);
+    height: var(--diameter);
+}
diff --git a/src/inc_html/planets.html b/src/inc_html/planets.html
index 1b9b2c6..4f4f994 100644
--- a/src/inc_html/planets.html
+++ b/src/inc_html/planets.html
@@ -1,6 +1,16 @@
 <div class="planets">
-    <span id="mercury" class="planet"></span>
-    <span id="venus" class="planet"></span>
-    <span id="earth" class="planet"></span>
-    <span id="mars" class="planet"></span>
+
+    <!--
+    -->
+    <div id="mercury" class="planet"></div>
+    <div id="mercury-orbit" class="orbit"></div>
+
+    <div id="venus" class="planet"></div>
+    <div id="venus-orbit" class="orbit"></div>
+
+    <div id="earth" class="planet"></div>
+    <div id="earth-orbit" class="orbit"></div>
+
+    <div id="mars" class="planet"></div>
+    <div id="mars-orbit" class="orbit"></div>
 </div>
diff --git a/src/root/main.css b/src/root/main.css
index d43cc25..ce8d3ae 100644
--- a/src/root/main.css
+++ b/src/root/main.css
@@ -73,6 +73,7 @@ a.fsText:hover {
     width: max(30vmax,500px);
     left:50%;
     top:var(--title-height);
+    margin-top: 40px;
     padding: 10px 0 50px;
     background-color: var(--foreground-inactive);
 
@@ -99,7 +100,7 @@ a.fsText:hover {
     position: absolute;
     left: 15px;
     width: max(11vmax, 180px);
-    top:var(--title-height);
+    top: max(var(--title-height), 25%);
     bottom:0;
 
     background-color: var(--background);
@@ -109,7 +110,6 @@ a.fsText:hover {
 .sidebarContent {
     position: relative;
     background-color: var(--background);
-    padding-top: 5%;
 }
 
 .sidebar ul {
@@ -120,7 +120,7 @@ a.fsText:hover {
 
 .sidebar li {
     display: block;
-    margin: 5px 0 0 0;
+    margin: 15px 0 0 0;
 }
 
 .sidebar li a {