draw planet orbits and line them up nicely :)

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);
+}

src/inc_css/mars.css

@@ -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);
+}

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);
+}

src/inc_css/or_earth.css

@@ -1 +1 @@
-400px
+420px

src/inc_css/or_mars.css

@@ -1 +1 @@
-500px
+560px

src/inc_css/or_mercury.css

@@ -1 +1 @@
-200px
+180px

src/inc_css/orbit_thickness.css

@@ -0,0 +1 @@
+0.2rem

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

src/inc_css/pr_earth.css

@@ -0,0 +1 @@
+70px

src/inc_css/pr_mars.css

@@ -0,0 +1 @@
+50px

src/inc_css/pr_mercury.css

@@ -0,0 +1 @@
+40px

src/inc_css/pr_venus.css

@@ -0,0 +1 @@
+60px

src/inc_css/solposx.css

@@ -1 +1 @@
-90px
+0

src/inc_css/solposy.css

@@ -1 +1 @@
-50px
+0

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);
+}

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>

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 {